@epam/uui 5.5.0 → 5.5.2

package/icons/icons.tsx

@@ -0,0 +1,116 @@
+import { ReactComponent as btnCross12 } from './btn-cross-12.svg';
+import { ReactComponent as btnCross18 } from './btn-cross-18.svg';
+import { ReactComponent as btnCross24 } from './btn-cross-24.svg';
+import { ReactComponent as foldingArrow12 } from './folding-arrow-12.svg';
+import { ReactComponent as foldingArrow18 } from './folding-arrow-18.svg';
+import { ReactComponent as foldingArrow24 } from './folding-arrow-24.svg';
+import { ReactComponent as accept12 } from './accept-12.svg';
+import { ReactComponent as accept18 } from './accept-18.svg';
+import { ReactComponent as accept24 } from './accept-24.svg';
+import { ReactComponent as search12 } from './search-12.svg';
+import { ReactComponent as search18 } from './search-18.svg';
+import { ReactComponent as search24 } from './search-24.svg';
+import { ReactComponent as calendar12 } from './calendar-12.svg';
+import { ReactComponent as calendar18 } from './calendar-18.svg';
+import { ReactComponent as calendar24 } from './calendar-24.svg';
+import { ReactComponent as info12 } from './info-12.svg';
+import { ReactComponent as info18 } from './info-18.svg';
+import { ReactComponent as info24 } from './info-24.svg';
+import { ReactComponent as help10 } from './help-fill-10.svg';
+import { ReactComponent as help16 } from './help-fill-16.svg';
+import { ReactComponent as DocIcon } from '@epam/assets/icons/common/file-file_word-24.svg';
+import { ReactComponent as ExelIcon } from '@epam/assets/icons/common/file-file_excel-24.svg';
+import { ReactComponent as PdfIcon } from '@epam/assets/icons/common/file-file_pdf-24.svg';
+import { ReactComponent as ImgIcon } from '@epam/assets/icons/common/file-file_image-24.svg';
+import { ReactComponent as VideoIcon } from '@epam/assets/icons/common/file-file_video-24.svg';
+import { ReactComponent as TableIcon } from '@epam/assets/icons/common/file-file_table-24.svg';
+import { ReactComponent as TextIcon } from '@epam/assets/icons/common/file-file_text-24.svg';
+import { ReactComponent as MailIcon } from '@epam/assets/icons/common/file-file_eml-24.svg';
+import { ReactComponent as FileIcon } from '@epam/assets/icons/common/file-file-24.svg';
+
+export const fileIcons = {
+    docIcon: DocIcon,
+    exelIcon: ExelIcon,
+    pdfIcon: PdfIcon,
+    imgIcon: ImgIcon,
+    videoIcon: VideoIcon,
+    tableIcon: TableIcon,
+    textIcon: TextIcon,
+    mailIcon: MailIcon,
+    fileIcon: FileIcon,
+};
+
+export const systemIcons: { [key: string]: any } = {
+    18: {
+        clear: btnCross12,
+        foldingArrow: foldingArrow12,
+        accept: accept12,
+        search: search12,
+        calendar: calendar12,
+        info: info12,
+        help: help10,
+    },
+    24: {
+        clear: btnCross12,
+        foldingArrow: foldingArrow12,
+        accept: accept12,
+        search: search12,
+        calendar: calendar12,
+        info: info12,
+        help: help10,
+    },
+    30: {
+        clear: btnCross18,
+        foldingArrow: foldingArrow18,
+        accept: accept18,
+        search: search18,
+        calendar: calendar18,
+        info: info18,
+        help: help10,
+    },
+    36: {
+        clear: btnCross18,
+        foldingArrow: foldingArrow18,
+        accept: accept18,
+        search: search18,
+        calendar: calendar18,
+        info: info18,
+        help: help16,
+    },
+    42: {
+        clear: btnCross18,
+        foldingArrow: foldingArrow18,
+        accept: accept18,
+        search: search18,
+        calendar: calendar18,
+        info: info18,
+        help: help16,
+    },
+    48: {
+        clear: btnCross24,
+        foldingArrow: foldingArrow24,
+        accept: accept24,
+        search: search24,
+        calendar: calendar24,
+        info: info24,
+        help: help16,
+    },
+    60: {
+        clear: btnCross24,
+        foldingArrow: foldingArrow24,
+        accept: accept24,
+        search: search24,
+        calendar: calendar24,
+        info: info24,
+        help: help16,
+    },
+    none: {
+        clear: btnCross18,
+        foldingArrow: foldingArrow18,
+        accept: accept18,
+        search: search18,
+        calendar: calendar18,
+        info: info18,
+        help: help16,
+    },
+};

package/icons/info-12.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" version="1.1" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+ <path d="m6 1c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm1 8h-2v-4h2zm0-5c-0.4714 0.4714-1.5286 0.4714-2 0s-0.4714-1.5286 0-2 1.5286-0.4714 2 0 0.4714 1.5286 0 2z" fill-rule="evenodd"/>
+</svg>

package/icons/info-18.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" d="M8 13h2V8H8v5zM9 1C4.584 1 1 4.584 1 9s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8zm0 15c-3.859 0-7-3.141-7-7s3.141-7 7-7 7 3.141 7 7-3.141 7-7 7zM8 7h2V5H8v2z"/></svg>

package/icons/info-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/></svg>

package/icons/logo-arrow.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13" height="60" version="1.1" viewBox="0 0 13 60" xmlns="http://www.w3.org/2000/svg">
+ <path d="m13 30-13 30v-60z" stroke-width=".14636"/>
+</svg>

package/icons/menu_input_cancel.svg

@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   width="18"
+   height="24"
+   viewBox="0 0 18 24"
+   version="1.1"
+   id="svg8">
+  <defs
+     id="defs2">
+    <pattern
+       y="0"
+       x="0"
+       height="6"
+       width="6"
+       patternUnits="userSpaceOnUse"
+       id="EMFhbasepattern" />
+    <pattern
+       y="0"
+       x="0"
+       height="6"
+       width="6"
+       patternUnits="userSpaceOnUse"
+       id="EMFhbasepattern-7" />
+    <pattern
+       y="0"
+       x="0"
+       height="6"
+       width="6"
+       patternUnits="userSpaceOnUse"
+       id="EMFhbasepattern-0" />
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(0,-290.65)"
+     style="display:none">
+    <circle
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.03341123;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path4752"
+       cx="9.0642443"
+       cy="302.68155"
+       r="4.9517455" />
+    <rect
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.05;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4754"
+       width="36"
+       height="36"
+       x="-8.9357557"
+       y="284.68155" />
+    <circle
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.05;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path4756"
+       cx="9.0642443"
+       cy="302.68155"
+       r="18" />
+    <rect
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.03321357;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4760"
+       width="7.9622984"
+       height="7.9802246"
+       x="5.0322967"
+       y="298.65317" />
+  </g>
+  <g id="layer2"
+     style="display:inline">
+    <g
+       id="g5744"
+       transform="matrix(3.7795275,0,0,3.7795275,-368.99999,-648.51962)">
+      <rect
+         y="169.99998"
+         x="95.25"
+         height="9.5250015"
+         width="9.5249996"
+         id="rect10299-4"
+         style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-width:0.39687493;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         style="opacity:1;vector-effect:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26458335;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="m 100.76086,173.63996 -0.74836,0.74835 -0.748352,-0.74835 -0.374178,0.37417 0.748355,0.74836 -0.748355,0.74835 0.374178,0.37418 0.748352,-0.74836 0.74836,0.74836 0.37417,-0.37418 -0.74835,-0.74835 0.74835,-0.74836 z"
+         id="rect6052" />
+    </g>
+  </g>
+</svg>

package/icons/modal-close-cross.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(0,-290.65)" display="none">
+  <path d="m11.892 294.65a8 8 89.237 0 0-7.8926 8.1074 8 8 89.237 0 0 8.1074 7.8926 8 8 89.237 0 0 7.8926-8.1074 8 8 89.237 0 0-8.1074-7.8926zm0.10742 1a7 7 0 0 1 7 7 7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 7-7z"/>
+  <path transform="translate(0,290.65)" d="m7 4.0195v0.98047h-2v2h-0.95703v10h0.95703v2h2v1h10v-1h2v-2h1v-10h-1v-2h-2v-0.98047z" fill-opacity=".27451" opacity=".544"/>
+  <rect x="-6" y="284.65" width="36" height="36" fill="none" stroke="#000000" stroke-width=".05"/>
+  <circle cx="12" cy="302.65" r="18" fill="none" stroke="#000000" stroke-width=".05"/>
+ </g>
+ <g>
+  <g transform="matrix(2.25 0 0 2.25 -8.25 -15)">
+   <g transform="translate(0,-290.65)" display="none" fill="none" stroke="#000000">
+    <circle cx="9.0642" cy="302.68" r="4.9517" stroke-width=".033411"/>
+    <rect x="-8.9358" y="284.68" width="36" height="36" stroke-width=".05"/>
+    <circle cx="9.0642" cy="302.68" r="18" stroke-width=".05"/>
+    <rect x="5.0323" y="298.65" width="7.9623" height="7.9802" stroke-width=".033214"/>
+   </g>
+   <g>
+    <path d="m12.111 8.4444-3.1111 3.1111-3.1111-3.1111-0.44444 0.44445 3.1111 3.1111-3.1111 3.1111 0.44444 0.44444 3.1111-3.1111 3.1111 3.1111 0.44444-0.44444-3.1111-3.1111 3.1111-3.1111z"/>
+   </g>
+  </g>
+ </g>
+</svg>

package/icons/navigation-close-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>

package/icons/navigation-more_vert-12.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill-rule="evenodd" d="M6 4c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0 1c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 3c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"/></svg>

package/icons/navigation-more_vert-18.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" d="M9 6c.825 0 1.5-.675 1.5-1.5S9.825 3 9 3s-1.5.675-1.5 1.5S8.175 6 9 6zm0 1.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5S9.825 7.5 9 7.5zM9 12c-.825 0-1.5.675-1.5 1.5S8.175 15 9 15s1.5-.675 1.5-1.5S9.825 12 9 12z"/></svg>

package/icons/navigation-more_vert-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>

package/icons/notification-check_circle-fill-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>

package/icons/notification-done-12.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill-rule="evenodd" d="M9.462 2L11 3.6 4.846 10 3.308 8.4 1 6l1.538-1.6 2.308 2.399L9.462 2z"/></svg>

package/icons/notification-done-18.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" d="M7.136 11.91L4.034 8.776 3 9.821 7.136 14 16 5.045 14.966 4z"/></svg>

package/icons/notification-done-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M9.727 16.075l-4.295-4.388L4 13.149 9.727 19 22 6.463 20.568 5z"/></svg>

package/icons/notification-error-fill-10.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>

package/icons/notification-error-fill-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>

package/icons/notification-help-fill-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>

package/icons/notification-warning-fill-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>

package/icons/partly-select-12.svg

@@ -0,0 +1,3 @@
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <polygon id="Path-4" fill-rule="evenodd" points="9 5 9 7 3 7 3 5" />
+</svg>

package/icons/partly-select-18.svg

@@ -0,0 +1,3 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <polygon id="Path-3" fill-rule="evenodd" points="14 8 14 10 4 10 4 8" />
+</svg>

package/icons/radio-point.svg

@@ -0,0 +1,3 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <circle id="inner_oval" cx="9" cy="9" r="6" />
+</svg>

package/icons/search-12.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill-rule="evenodd" d="M9.016 8.309L10.707 10l-.707.707-1.691-1.691a4.5 4.5 0 11.707-.707zM5.5 9a3.5 3.5 0 100-7 3.5 3.5 0 000 7z"/></svg>

package/icons/search-18.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" d="M13.749 12.335L16.414 15 15 16.414l-2.665-2.665a6.5 6.5 0 111.414-1.414zM8.5 13a4.5 4.5 0 100-9 4.5 4.5 0 000 9z"/></svg>

package/icons/search-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M17.32 15.906L21.414 20 20 21.414l-4.094-4.094a8 8 0 111.414-1.414zM11 17a6 6 0 100-12 6 6 0 000 12z"/></svg>

package/icons/search-with-background.svg

@@ -0,0 +1,4 @@
+<svg width="66" height="67" viewBox="0 0 66 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 33.5C0 15.2746 14.7746 0.5 33 0.5C51.2254 0.5 66 15.2746 66 33.5C66 51.7254 51.2254 66.5 33 66.5C14.7746 66.5 0 51.7254 0 33.5Z" fill="#EBEDF5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.3098 40.3349L49.4749 47.5L47 49.9749L39.8349 42.8098C37.4642 44.6526 34.4852 45.75 31.25 45.75C23.518 45.75 17.25 39.482 17.25 31.75C17.25 24.018 23.518 17.75 31.25 17.75C38.982 17.75 45.25 24.018 45.25 31.75C45.25 34.9852 44.1526 37.9642 42.3098 40.3349ZM31.25 42.25C37.049 42.25 41.75 37.549 41.75 31.75C41.75 25.951 37.049 21.25 31.25 21.25C25.451 21.25 20.75 25.951 20.75 31.75C20.75 37.549 25.451 42.25 31.25 42.25Z" fill="#6C6F80"/>
+</svg>

package/icons/settings-18.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" d="M3 9.093a6.121 6.121 0 010-.186L1.55 7.271a1 1 0 01-.118-1.163l1.28-2.216a1 1 0 011.066-.48l2.14.439c.054-.033.108-.064.163-.094l.691-2.073A1 1 0 017.721 1h2.558a1 1 0 01.949.684l.69 2.073c.056.03.11.061.163.094l2.141-.439a1 1 0 011.067.48l1.279 2.216a1 1 0 01-.118 1.163L15 8.907a6.12 6.12 0 010 .186l1.45 1.636a1 1 0 01.118 1.163l-1.28 2.216a1 1 0 01-1.066.48l-2.14-.439a5.994 5.994 0 01-.163.094l-.691 2.073a1 1 0 01-.949.684H7.721a1 1 0 01-.949-.684l-.69-2.073a5.994 5.994 0 01-.163-.094l-2.141.439a1 1 0 01-1.067-.48l-1.279-2.216a1 1 0 01.118-1.163L3 9.093zM9 12a3 3 0 100-6 3 3 0 000 6z"/></svg>

package/icons/slider-rating/active_mark_blue_icon.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>active_mark</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="95.8877389%" id="linearGradient-1">
+            <stop stop-color="#64ECE7" offset="0%"></stop>
+            <stop stop-color="#52BDE2" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-2" cx="111" cy="6" r="6"></circle>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="criteria/grade/good" transform="translate(-108.000000, -2.000000)" stroke-width="2">
+            <g id="radio" transform="translate(5.000000, 4.000000)">
+                <g id="active_mark">
+                    <circle stroke="#FFFFFF" stroke-linejoin="square" fill="url(#linearGradient-1)" fill-rule="evenodd" cx="111" cy="6" r="5"></circle>
+                    <circle stroke="#62CAE7" cx="111" cy="6" r="7"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/icons/slider-rating/active_mark_green_icon.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>active_mark</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#55D25C" offset="0%"></stop>
+            <stop stop-color="#79C32D" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-2" cx="75" cy="6" r="6"></circle>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="criteria/grade/normal" transform="translate(-72.000000, -2.000000)" stroke-width="2">
+            <g id="radio" transform="translate(5.000000, 4.000000)">
+                <g id="active_mark">
+                    <circle stroke="#FFFFFF" stroke-linejoin="square" fill="url(#linearGradient-1)" fill-rule="evenodd" cx="75" cy="6" r="5"></circle>
+                    <circle stroke="#65C24C" cx="75" cy="6" r="7"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/icons/slider-rating/active_mark_red_icon.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>active_mark</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="95.8877389%" id="linearGradient-1">
+            <stop stop-color="#F96650" offset="0%"></stop>
+            <stop stop-color="#EE3C3C" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-2" cx="6" cy="6" r="6"></circle>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="criteria/grade/bad" transform="translate(0.000000, -2.000000)" stroke-width="2">
+            <g id="radio" transform="translate(2.000000, 4.000000)">
+                <g id="active_mark">
+                    <circle stroke="#FFFFFF" stroke-linejoin="square" fill="url(#linearGradient-1)" fill-rule="evenodd" cx="6" cy="6" r="5"></circle>
+                    <circle stroke="#F06965" cx="6" cy="6" r="7"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/icons/slider-rating/active_mark_violet_icon.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>active_mark</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="14.444987%" x2="50%" y2="81.3476562%" id="linearGradient-1">
+            <stop stop-color="#8B3CE6" offset="0%"></stop>
+            <stop stop-color="#4B31DD" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-2" cx="146" cy="6" r="6"></circle>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="criteria/grade/excellent" transform="translate(-143.000000, -2.000000)" stroke-width="2">
+            <g id="radio" transform="translate(5.000000, 4.000000)">
+                <g id="active_mark">
+                    <circle stroke="#FFFFFF" stroke-linejoin="square" fill="url(#linearGradient-1)" fill-rule="evenodd" cx="146" cy="6" r="5"></circle>
+                    <circle stroke="#6965E2" cx="146" cy="6" r="7"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/icons/slider-rating/active_mark_yellow_icon.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>active_mark</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="95.8877389%" id="linearGradient-1">
+            <stop stop-color="#F9FF00" offset="0%"></stop>
+            <stop stop-color="#FFA600" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-2" cx="39" cy="6" r="6"></circle>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="criteria/grade/not_good" transform="translate(-36.000000, -2.000000)" stroke-width="2">
+            <g id="radio" transform="translate(5.000000, 4.000000)">
+                <g id="active_mark">
+                    <circle stroke="#FFFFFF" stroke-linejoin="square" fill="url(#linearGradient-1)" fill-rule="evenodd" cx="39" cy="6" r="5"></circle>
+                    <circle stroke="#FAB309" cx="39" cy="6" r="7"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/icons/slider-rating/line_blue_icon.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="150px" height="8px" viewBox="0 0 150 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>Blue line</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="3.23062819%" y1="0%" x2="100%" y2="0%" id="linearGradient-1">
+            <stop stop-color="#54CBC5" offset="0%"></stop>
+            <stop stop-color="#51C1E7" offset="50.5719866%"></stop>
+            <stop stop-color="#51CEDE" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-2">
+            <stop stop-color="#52C2E6" offset="0%"></stop>
+            <stop stop-color="#53CAC7" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="criteria/grade/good" transform="translate(-5.000000, -6.000000)">
+            <g id="Blue-line" transform="translate(4.000000, 6.000000)">
+                <g id="Group">
+                    <rect id="gray_base" fill="#E5E5E5" x="4" y="3" width="143" height="2"></rect>
+                    <circle id="Oval-2" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2" fill-opacity="0" fill="#FFFFFF" cx="148" cy="4" r="3"></circle>
+                    <path d="M4,7 C2.34314575,7 1,5.65685425 1,4 C1,2.34314575 2.34314575,1 4,1 C5.65685425,1 7,2.34314575 7,4 C7,5.65685425 5.65685425,7 4,7 Z M40,7 C38.3431458,7 37,5.65685425 37,4 C37,2.34314575 38.3431458,1 40,1 C41.6568542,1 43,2.34314575 43,4 C43,5.65685425 41.6568542,7 40,7 Z M76,7 C74.3431458,7 73,5.65685425 73,4 C73,2.34314575 74.3431458,1 76,1 C77.6568542,1 79,2.34314575 79,4 C79,5.65685425 77.6568542,7 76,7 Z M148,7 C146.343146,7 145,5.65685425 145,4 C145,2.34314575 146.343146,1 148,1 C149.656854,1 151,2.34314575 151,4 C151,5.65685425 149.656854,7 148,7 Z M112,7 C110.343146,7 109,5.65685425 109,4 C109,2.34314575 110.343146,1 112,1 C113.656854,1 115,2.34314575 115,4 C115,5.65685425 113.656854,7 112,7 Z" id="base" fill="#E5E5E5"></path>
+                    <circle id="Oval-2" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2" fill-opacity="0" fill="#FFFFFF" cx="4" cy="4" r="3"></circle>
+                </g>
+                <polygon id="gradient_line" fill="url(#linearGradient-1)" points="76 3 115 3 115 5 76 5"></polygon>
+                <path d="M76,7 C77.6568542,7 79,5.65685425 79,4 C79,2.34314575 77.6568542,1 76,1 C74.3431458,1 73,2.34314575 73,4 C73,5.65685425 74.3431458,7 76,7 Z M112,7 C113.656854,7 115,5.65685425 115,4 C115,2.34314575 113.656854,1 112,1 C110.343146,1 109,2.34314575 109,4 C109,5.65685425 110.343146,7 112,7 Z" id="base" stroke="url(#linearGradient-2)" stroke-width="2" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/icons/slider-rating/line_gray_icon.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="150px" height="6px" viewBox="0 0 150 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>Gray line</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="criteria/grade/not_good-copy" transform="translate(-5.000000, -7.000000)">
+            <g id="radio" transform="translate(4.000000, 6.000000)">
+                <g id="Gray-line">
+                    <g id="Group">
+                        <rect id="gray_base" fill="#E5E5E5" x="4" y="3" width="143" height="2"></rect>
+                        <circle id="Oval-2" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2" fill-opacity="0" fill="#FFFFFF" cx="148" cy="4" r="3"></circle>
+                        <path d="M4,7 C2.34314575,7 1,5.65685425 1,4 C1,2.34314575 2.34314575,1 4,1 C5.65685425,1 7,2.34314575 7,4 C7,5.65685425 5.65685425,7 4,7 Z M40,7 C38.3431458,7 37,5.65685425 37,4 C37,2.34314575 38.3431458,1 40,1 C41.6568542,1 43,2.34314575 43,4 C43,5.65685425 41.6568542,7 40,7 Z M76,7 C74.3431458,7 73,5.65685425 73,4 C73,2.34314575 74.3431458,1 76,1 C77.6568542,1 79,2.34314575 79,4 C79,5.65685425 77.6568542,7 76,7 Z M148,7 C146.343146,7 145,5.65685425 145,4 C145,2.34314575 146.343146,1 148,1 C149.656854,1 151,2.34314575 151,4 C151,5.65685425 149.656854,7 148,7 Z M112,7 C110.343146,7 109,5.65685425 109,4 C109,2.34314575 110.343146,1 112,1 C113.656854,1 115,2.34314575 115,4 C115,5.65685425 113.656854,7 112,7 Z" id="base" fill="#E5E5E5"></path>
+                        <circle id="Oval-2" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2" fill-opacity="0" fill="#FFFFFF" cx="4" cy="4" r="3"></circle>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/icons/slider-rating/line_red_icon.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="151px" height="8px" viewBox="0 0 151 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>Group</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="100%" y1="6.18582821%" x2="3.48566002%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FF8468" offset="0%"></stop>
+            <stop stop-color="#FF695B" offset="52.2014993%"></stop>
+            <stop stop-color="#E23030" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="100%" y1="6.18582821%" x2="3.48566002%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#FF8468" offset="0%"></stop>
+            <stop stop-color="#E34040" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="100%" y1="6.18582821%" x2="3.48566002%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#FF8468" offset="0%"></stop>
+            <stop stop-color="#E34B4B" offset="97.7555997%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="criteria/grade/bad" transform="translate(-4.000000, -6.000000)">
+            <g id="radio" transform="translate(2.000000, 6.000000)">
+                <g id="Group" transform="translate(2.000000, 0.000000)">
+                    <g id="Red-line">
+                        <rect id="gray_base" fill="#E5E5E5" x="4" y="3" width="143" height="2"></rect>
+                        <circle id="Oval-2" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2" fill-opacity="0" fill="#FFFFFF" cx="148" cy="4" r="3"></circle>
+                        <path d="M4,7 C2.34314575,7 1,5.65685425 1,4 C1,2.34314575 2.34314575,1 4,1 C5.65685425,1 7,2.34314575 7,4 C7,5.65685425 5.65685425,7 4,7 Z M40,7 C38.3431458,7 37,5.65685425 37,4 C37,2.34314575 38.3431458,1 40,1 C41.6568542,1 43,2.34314575 43,4 C43,5.65685425 41.6568542,7 40,7 Z M76,7 C74.3431458,7 73,5.65685425 73,4 C73,2.34314575 74.3431458,1 76,1 C77.6568542,1 79,2.34314575 79,4 C79,5.65685425 77.6568542,7 76,7 Z M148,7 C146.343146,7 145,5.65685425 145,4 C145,2.34314575 146.343146,1 148,1 C149.656854,1 151,2.34314575 151,4 C151,5.65685425 149.656854,7 148,7 Z" id="base" fill="#E5E5E5"></path>
+                        <circle id="Oval-2" fill="#E5E5E5" cx="112" cy="4" r="3"></circle>
+                        <circle id="Oval-2" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2" fill-opacity="0" fill="#FFFFFF" cx="4" cy="4" r="3"></circle>
+                    </g>
+                    <g id="Group-2">
+                        <polygon id="gradient_line" fill="url(#linearGradient-1)" points="6 3 77 3 77 5 6 5"></polygon>
+                        <circle id="Oval-2" stroke="url(#linearGradient-2)" stroke-width="2" fill="#FFFFFF" cx="40" cy="4" r="3"></circle>
+                        <circle id="Oval-2" stroke="url(#linearGradient-2)" stroke-width="2" fill="#FFFFFF" cx="4" cy="4" r="3"></circle>
+                        <circle id="Oval-2" stroke="url(#linearGradient-3)" stroke-width="2" fill="#FFFFFF" cx="76" cy="4" r="3"></circle>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/icons/slider-rating/line_violet_icon.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="151px" height="8px" viewBox="0 0 151 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>Violet line</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="linearGradient-1">
+            <stop stop-color="#7A7AF6" offset="0%"></stop>
+            <stop stop-color="#49B4EE" offset="50.5719866%"></stop>
+            <stop stop-color="#454DBF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-2">
+            <stop stop-color="#477AD4" offset="0%"></stop>
+            <stop stop-color="#49AFEC" offset="52.7503189%"></stop>
+            <stop stop-color="#777DF5" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="criteria/grade/excellent" transform="translate(-5.000000, -6.000000)">
+            <g id="radio" transform="translate(4.000000, -17.000000)">
+                <g id="Violet-line" transform="translate(0.000000, 23.000000)">
+                    <rect id="gray_base" fill="#E5E5E5" x="4" y="3" width="143" height="2"></rect>
+                    <polygon id="gradient_line" fill="url(#linearGradient-1)" points="76 3 147 3 147 5 76 5"></polygon>
+                    <circle id="Oval-2" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2" fill-opacity="0" fill="#FFFFFF" cx="148" cy="4" r="3"></circle>
+                    <path d="M4,7 C2.34314575,7 1,5.65685425 1,4 C1,2.34314575 2.34314575,1 4,1 C5.65685425,1 7,2.34314575 7,4 C7,5.65685425 5.65685425,7 4,7 Z M40,7 C38.3431458,7 37,5.65685425 37,4 C37,2.34314575 38.3431458,1 40,1 C41.6568542,1 43,2.34314575 43,4 C43,5.65685425 41.6568542,7 40,7 Z M76,7 C74.3431458,7 73,5.65685425 73,4 C73,2.34314575 74.3431458,1 76,1 C77.6568542,1 79,2.34314575 79,4 C79,5.65685425 77.6568542,7 76,7 Z M148,7 C146.343146,7 145,5.65685425 145,4 C145,2.34314575 146.343146,1 148,1 C149.656854,1 151,2.34314575 151,4 C151,5.65685425 149.656854,7 148,7 Z" id="base" fill="#E5E5E5"></path>
+                    <circle id="Oval-2" fill="#E5E5E5" cx="112" cy="4" r="3"></circle>
+                    <path d="M76,7 C77.6568542,7 79,5.65685425 79,4 C79,2.34314575 77.6568542,1 76,1 C74.3431458,1 73,2.34314575 73,4 C73,5.65685425 74.3431458,7 76,7 Z M112,7 C113.656854,7 115,5.65685425 115,4 C115,2.34314575 113.656854,1 112,1 C110.343146,1 109,2.34314575 109,4 C109,5.65685425 110.343146,7 112,7 Z M148,7 C149.656854,7 151,5.65685425 151,4 C151,2.34314575 149.656854,1 148,1 C146.343146,1 145,2.34314575 145,4 C145,5.65685425 146.343146,7 148,7 Z" id="base" stroke="url(#linearGradient-2)" stroke-width="2" fill="#FFFFFF"></path>
+                    <circle id="Oval-2" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2" fill-opacity="0" fill="#FFFFFF" cx="4" cy="4" r="3"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>