@itcase/ui 1.0.65 → 1.0.70

package/dist/context/Notifications.js

@@ -100,6 +100,20 @@ function useNotifications() {
 function useNotificationsAPI() {
   return React.useContext(NotificationsAPIContext);
 }
+NotificationsProvider.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "NotificationsProvider",
+  "props": {
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    }
+  }
+};
 
 exports.NotificationsProvider = NotificationsProvider;
 exports.useNotifications = useNotifications;

package/dist/css/components/Badge/Badge.css

@@ -27,8 +27,8 @@
 .badge {
   &&_type {
     &_primary {
-      background: var(--color-primary);
       color: var(--color-primary-text-primary);
+      background: var(--color-primary-primary);
     }
   }
 }

package/dist/css/components/Button/Button.css

@@ -48,7 +48,7 @@
 }
 .button {
   &_size {
-    @each $size in xs, s, m, l, xl, xxl {
+    @each $size in xxs, xs, s, m, l, xl, xxl {
       &_$(size) {
         ^^&__wrapper {
           padding: var(--button-size-$(size)-padding);

package/dist/css/components/DatePicker/DatePicker.css

@@ -854,7 +854,12 @@
                 cursor: default !important;
               }
             }
-            &--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {
+            &--in-selecting-range:not(
+            .react-datepicker__day--in-range,
+            .react-datepicker__month-text--in-range,
+            .react-datepicker__quarter-text--in-range,
+            .react-datepicker__year-text--in-range
+          ) {
               background: var(--date-picker-day-selected-background);
               & .button__label {
                 color: var(--date-picker-day-selected-text-color);

package/dist/css/components/Page/Page.css

@@ -0,0 +1,8 @@
+.page {
+  width: 100%;
+  &__wrapper {
+    width: 100%;
+    max-width: var(--max);
+    margin: 0 auto;
+  }
+}

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

@@ -5,40 +5,40 @@
   column-gap: 4px;
   &:hover {
     ^&__state {
-      border-color: var(--radio-button-state-hover-border);
+      border-color: var(--radio-button-state-border-hover);
     }
   }
   &__item {
-    position: relative;
-    cursor: pointer;
+    min-width: 16px;
+    min-height: 16px;
     font-size: 0;
     line-height: 0;
+    margin: 2px 0 0 0;
+    position: relative;
     display: flex;
-    min-height: 16px;
-    min-width: 16px;
-    grid-row-start: span 2;
     align-self: start;
-    margin: 2px 0 0 0;
+    cursor: pointer;
+    grid-row-start: span 2;
     ^&__input {
-      cursor: pointer;
-      appearance: none;
-      border: 0;
-      margin: 0;
+      width: 100%;
+      height: 100%;
       font-size: 0;
       line-height: 0;
+      margin: 0;
+      border: 0;
       position: absolute;
       left: 0;
       top: 0;
-      width: 100%;
-      height: 100%;
       z-index: 3;
+      cursor: pointer;
+      appearance: none;
       &:disabled + .radio-button__state {
         border-color: transparent !important;
       }
     }
     ^&__state {
-      flex: 1;
       display: flex;
+      flex: 1;
       z-index: 1;
       &_shape {
         &_rounded {
@@ -54,15 +54,15 @@
       }
     }
     ^&__state-checkmark {
-      height: calc(100% - 6px);
       width: calc(100% - 6px);
+      height: calc(100% - 6px);
+      border-radius: 50%;
       position: absolute;
-      z-index: 2;
+      display: none;
       left: 50%;
       top: 50%;
+      z-index: 2;
       transform: translate(-50%, -50%);
-      display: none;
-      border-radius: 50%;
     }
   }
 }
@@ -111,5 +111,5 @@
   }
 }
 :root {
-  --radio-button-state-hover-border: var(--color-surface-border-tertiary);
+  --radio-button-state-border-hover: var(--color-surface-border-tertiary);
 }

package/dist/css/components/Segmented/Segmented.css

@@ -25,8 +25,8 @@
           width 0.3s ease;
       }
       ^^&__item {
-        border-radius: 6px;
         min-width: 120px;
+        border-radius: 6px;
         position: relative;
         display: flex;
         align-items: center;
@@ -52,22 +52,20 @@
         & input {
           width: 100%;
           height: 100%;
+          margin: 0;
+          border: 0;
           position: absolute;
-          left: 0;
-          top: 0;
-          right: 0;
-          bottom: 0;
+          inset: 0 0 0 0;
           z-index: 2;
           opacity: 0%;
           cursor: pointer;
-          border: 0;
-          margin: 0;
         }
         &-label {
           width: 100%;
           text-align: center;
           position: relative;
-          display: block;
+          display: flex;
+          justify-content: center;
           z-index: 3;
           transition: color 0.5s ease;
           cursor: pointer;

package/dist/css/styles/constraints/constraints.css

@@ -1,59 +1,72 @@
 .constraints {
-  &_top-left,
-  &_left-top {
+  &_top {
+    top: 0;
+  }
+  &_top-left {
     left: 0;
     top: 0;
   }
-  &_bottom-left,
-  &_left-bottom {
+  &_top-right {
+    top: 0;
+    right: 0;
+  }
+  &_top-fill {
     left: 0;
-    bottom: 0;
+    top: 0;
+    right: 0;
   }
-  &_bottom-right,
-  &_right-bottom {
+  &_top-center {
+    position: absolute;
+    left: 50%;
+    top: 0%;
     right: 0;
+    transform: translate(-50%, 0);
+  }
+  &_bottom {
+    bottom: 0;
+  }
+  &_bottom-left {
+    left: 0;
     bottom: 0;
   }
-  &_top-right,
-  &_right-top {
+  &_bottom-right {
     right: 0;
-    top: 0;
+    bottom: 0;
   }
-  &_left-right-top {
+  &_bottom-left-right {
     left: 0;
-    right: 0;
     top: 0;
+    right: 0;
   }
-
-  &_left-right-bottom {
-    left: 0;
+  &_bottom_center {
+    position: absolute;
+    left: 50%;
     right: 0;
     bottom: 0;
+    transform: translate(-50%, 0);
   }
-  &_left-right-top-bottom {
+  &_bottom-fill {
     left: 0;
     right: 0;
     bottom: 0;
-    top: 0;
+  }
+  &_left {
+    left: 0;
+  }
+  &_right {
+    right: 0;
   }
   &_center {
     position: absolute;
-    top: 50%;
     left: 50%;
+    top: 50%;
     transform: translate(-50%, -50%);
   }
-  &_center-top {
-    position: absolute;
-    top: 0%;
-    left: 50%;
-    right: 0;
-    transform: translate(-50%, 0);
+  &_fill {
+    inset: 0 0 0 0;
   }
-  &_center-bottom {
-    position: absolute;
+  &_fill_vertical {
+    top: 0;
     bottom: 0;
-    left: 50%;
-    right: 0;
-    transform: translate(-50%, 0);
   }
 }

package/dist/css/styles/width/width.css

@@ -5,5 +5,7 @@
   &_fill {
     width: 100%;
   }
+  &_auto {
+    width: auto;
+  }
 }
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.65",
+  "version": "1.0.70",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -79,6 +79,7 @@
     "@semantic-release/release-notes-generator": "^12.0.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-inline-react-svg": "^2.0.2",
+    "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "eslint": "8.50.0",
     "eslint-config-prettier": "^9.0.0",