@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTRating/versions/V0/components/Circle/styles.module.scss

@@ -0,0 +1,116 @@
+@use '../../../../../../scss/variables/colors.module.scss' as *;
+@use '../../../../../../scss/variables/fontSizes.module.scss' as *;
+@use '../../../../../../scss/variables/sizes.module.scss' as *;
+@use '../../../../../../scss/variables/mediaQueries.module.scss' as *;
+
+.icon {
+  height: $rating-circle-icon-size;
+  margin-bottom: 10px;
+  width: $rating-circle-icon-size;
+
+  @media #{$mobile} {
+    height: $rating-circle-mobile-icon-size;
+    width: $rating-circle-mobile-icon-size;
+  }
+}
+
+.avatar {
+  background-color: $white;
+  border: $rating-star-selected solid 2px;
+  font-size: $large;
+  font-weight: 700;
+  height: $rating-circle-icon-size;
+  transition: color 0.65s ease-out;
+  width: $rating-circle-icon-size;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  @media #{$mobile} {
+    height: 30px;
+    width: 30px;
+  }
+}
+
+.selectedAvatar {
+  background-color: $rating-star-selected;
+}
+
+.container {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  margin-right: 5px;
+
+  @media #{$mobile} {
+    margin-left: 5px;
+  }
+}
+
+.first {
+  flex-direction: row-reverse;
+
+  @media #{$mobile} {
+    position: relative;
+
+    .text {
+      left: 0;
+      position: absolute;
+      top: 40px;
+      white-space: nowrap;
+    }
+  }
+}
+
+.last {
+  flex-direction: inherit;
+  margin: 0 0 0 5px;
+
+  .avatar {
+    margin-right: 10px;
+  }
+
+  @media #{$mobile} {
+    position: relative;
+
+    .text {
+      position: absolute;
+      right: 0;
+      top: 40px;
+      white-space: nowrap;
+    }
+
+    .avatar {
+      margin-right: 0;
+    }
+  }
+}
+
+.withTextBottom {
+  margin: 0 12px 0 0;
+  position: relative;
+}
+
+%label {
+  position: absolute;
+  top: calc(#{$rating-circle-icon-size} + 10px);
+  white-space: nowrap;
+  width: 100%;
+
+  @media #{$mobile} {
+    top: calc(#{$rating-circle-mobile-icon-size} + 10px);
+  }
+}
+
+.labelBottomFirst {
+  @extend %label;
+}
+
+.labelBottomLast {
+  @extend %label;
+  right: $rating-circle-icon-size;
+  @media #{$mobile} {
+    right: 40px;
+  }
+}

package/dist/esm/components/UTRating/versions/V0/components/Faces/assets/mood-confuzed-selected.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="20" fill="#FFD6D7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8ZM4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24ZM16 20C16 18.8954 16.8954 18 18 18H18.02C19.1246 18 20.02 18.8954 20.02 20C20.02 21.1046 19.1246 22 18.02 22H18C16.8954 22 16 21.1046 16 20ZM28 20C28 18.8954 28.8954 18 30 18H30.02C31.1246 18 32.02 18.8954 32.02 20C32.02 21.1046 31.1246 22 30.02 22H30C28.8954 22 28 21.1046 28 20ZM30.8613 30.9955C27.0664 30.7317 23.2856 31.6769 20.0613 33.6955C19.1251 34.2816 17.891 33.9978 17.3048 33.0616C16.7187 32.1254 17.0025 30.8913 17.9387 30.3051C21.8795 27.838 26.5005 26.6827 31.1387 27.0051C32.2406 27.0817 33.0718 28.0371 32.9952 29.139C32.9186 30.2409 31.9632 31.0721 30.8613 30.9955Z" fill="#E00002"/>
+</svg>

package/dist/esm/components/UTRating/versions/V0/components/Faces/assets/mood-confuzed.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8ZM4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24ZM16 20C16 18.8954 16.8954 18 18 18H18.02C19.1246 18 20.02 18.8954 20.02 20C20.02 21.1046 19.1246 22 18.02 22H18C16.8954 22 16 21.1046 16 20ZM28 20C28 18.8954 28.8954 18 30 18H30.02C31.1246 18 32.02 18.8954 32.02 20C32.02 21.1046 31.1246 22 30.02 22H30C28.8954 22 28 21.1046 28 20ZM30.8613 30.9955C27.0664 30.7317 23.2856 31.6769 20.0613 33.6955C19.1251 34.2816 17.891 33.9978 17.3048 33.0616C16.7187 32.1254 17.0025 30.8913 17.9387 30.3051C21.8795 27.838 26.5005 26.6827 31.1387 27.0051C32.2406 27.0817 33.0718 28.0371 32.9952 29.139C32.9186 30.2409 31.9632 31.0721 30.8613 30.9955Z" fill="#677489"/>
+</svg>

package/dist/esm/components/UTRating/versions/V0/components/Faces/assets/mood-empty-selected.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="20" fill="#FFF5D6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8ZM4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24ZM16 20C16 18.8954 16.8954 18 18 18H18.02C19.1246 18 20.02 18.8954 20.02 20C20.02 21.1046 19.1246 22 18.02 22H18C16.8954 22 16 21.1046 16 20ZM28 20C28 18.8954 28.8954 18 30 18H30.02C31.1246 18 32.02 18.8954 32.02 20C32.02 21.1046 31.1246 22 30.02 22H30C28.8954 22 28 21.1046 28 20ZM16 30C16 28.8954 16.8954 28 18 28H30C31.1046 28 32 28.8954 32 30C32 31.1046 31.1046 32 30 32H18C16.8954 32 16 31.1046 16 30Z" fill="#C29400"/>
+</svg>

package/dist/esm/components/UTRating/versions/V0/components/Faces/assets/mood-empty.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8ZM4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24ZM16 20C16 18.8954 16.8954 18 18 18H18.02C19.1246 18 20.02 18.8954 20.02 20C20.02 21.1046 19.1246 22 18.02 22H18C16.8954 22 16 21.1046 16 20ZM28 20C28 18.8954 28.8954 18 30 18H30.02C31.1246 18 32.02 18.8954 32.02 20C32.02 21.1046 31.1246 22 30.02 22H30C28.8954 22 28 21.1046 28 20ZM16 30C16 28.8954 16.8954 28 18 28H30C31.1046 28 32 28.8954 32 30C32 31.1046 31.1046 32 30 32H18C16.8954 32 16 31.1046 16 30Z" fill="#677489"/>
+</svg>

package/dist/esm/components/UTRating/versions/V0/components/Faces/assets/mood-happy-selected.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="20" fill="#CDFED8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8ZM4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24ZM16 18C16 16.8954 16.8954 16 18 16H18.02C19.1246 16 20.02 16.8954 20.02 18C20.02 19.1046 19.1246 20 18.02 20H18C16.8954 20 16 19.1046 16 18ZM28 18C28 16.8954 28.8954 16 30 16H30.02C31.1246 16 32.02 16.8954 32.02 18C32.02 19.1046 31.1246 20 30.02 20H30C28.8954 20 28 19.1046 28 18ZM14.5858 24.5858C14.9609 24.2107 15.4696 24 16 24H32C32.5304 24 33.0391 24.2107 33.4142 24.5858C33.7893 24.9609 34 25.4696 34 26C34 28.6522 32.9464 31.1957 31.0711 33.0711C29.1957 34.9464 26.6522 36 24 36C21.3478 36 18.8043 34.9464 16.9289 33.0711C15.0536 31.1957 14 28.6522 14 26C14 25.4696 14.2107 24.9609 14.5858 24.5858ZM18.3431 28C18.6387 28.8358 19.1185 29.6038 19.7574 30.2426C20.8826 31.3679 22.4087 32 24 32C25.5913 32 27.1174 31.3679 28.2426 30.2426C28.8815 29.6038 29.3613 28.8358 29.6569 28H18.3431Z" fill="#048B21"/>
+</svg>

package/dist/esm/components/UTRating/versions/V0/components/Faces/assets/mood-happy.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8ZM4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24ZM16 18C16 16.8954 16.8954 16 18 16H18.02C19.1246 16 20.02 16.8954 20.02 18C20.02 19.1046 19.1246 20 18.02 20H18C16.8954 20 16 19.1046 16 18ZM28 18C28 16.8954 28.8954 16 30 16H30.02C31.1246 16 32.02 16.8954 32.02 18C32.02 19.1046 31.1246 20 30.02 20H30C28.8954 20 28 19.1046 28 18ZM14.5858 24.5858C14.9609 24.2107 15.4696 24 16 24H32C32.5304 24 33.0391 24.2107 33.4142 24.5858C33.7893 24.9609 34 25.4696 34 26C34 28.6522 32.9464 31.1957 31.0711 33.0711C29.1957 34.9464 26.6522 36 24 36C21.3478 36 18.8043 34.9464 16.9289 33.0711C15.0536 31.1957 14 28.6522 14 26C14 25.4696 14.2107 24.9609 14.5858 24.5858ZM18.3431 28C18.6387 28.8358 19.1185 29.6038 19.7574 30.2426C20.8826 31.3679 22.4087 32 24 32C25.5913 32 27.1174 31.3679 28.2426 30.2426C28.8815 29.6038 29.3613 28.8358 29.6569 28H18.3431Z" fill="#677489"/>
+</svg>

package/dist/esm/components/UTRating/versions/V0/components/Faces/assets/mood-sad-selected.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="20" fill="#FFE7D7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8ZM4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24ZM16 20C16 18.8954 16.8954 18 18 18H18.02C19.1246 18 20.02 18.8954 20.02 20C20.02 21.1046 19.1246 22 18.02 22H18C16.8954 22 16 21.1046 16 20ZM28 20C28 18.8954 28.8954 18 30 18H30.02C31.1246 18 32.02 18.8954 32.02 20C32.02 21.1046 31.1246 22 30.02 22H30C28.8954 22 28 21.1046 28 20ZM24 30.3994C23.3348 30.3994 22.6763 30.5321 22.063 30.7898C21.4498 31.0475 20.8941 31.425 20.4286 31.9001C19.6555 32.6891 18.3893 32.702 17.6003 31.929C16.8113 31.156 16.7984 29.8897 17.5714 29.1007C18.4094 28.2455 19.4096 27.566 20.5135 27.1022C21.6173 26.6383 22.8026 26.3994 24 26.3994C25.1974 26.3994 26.3827 26.6383 27.4865 27.1022C28.5904 27.566 29.5906 28.2455 30.4286 29.1007C31.2016 29.8897 31.1887 31.156 30.3997 31.929C29.6107 32.702 28.3445 32.6891 27.5714 31.9001C27.1059 31.425 26.5502 31.0475 25.937 30.7898C25.3237 30.5321 24.6652 30.3994 24 30.3994Z" fill="#EA6001"/>
+</svg>

package/dist/esm/components/UTRating/versions/V0/components/Faces/assets/mood-sad.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8ZM4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24ZM16 20C16 18.8954 16.8954 18 18 18H18.02C19.1246 18 20.02 18.8954 20.02 20C20.02 21.1046 19.1246 22 18.02 22H18C16.8954 22 16 21.1046 16 20ZM28 20C28 18.8954 28.8954 18 30 18H30.02C31.1246 18 32.02 18.8954 32.02 20C32.02 21.1046 31.1246 22 30.02 22H30C28.8954 22 28 21.1046 28 20ZM24 30.3994C23.3348 30.3994 22.6763 30.5321 22.063 30.7898C21.4498 31.0475 20.8941 31.425 20.4286 31.9001C19.6555 32.6891 18.3893 32.702 17.6003 31.929C16.8113 31.156 16.7984 29.8897 17.5714 29.1007C18.4094 28.2455 19.4096 27.566 20.5135 27.1022C21.6173 26.6383 22.8026 26.3994 24 26.3994C25.1974 26.3994 26.3827 26.6383 27.4865 27.1022C28.5904 27.566 29.5906 28.2455 30.4286 29.1007C31.2016 29.8897 31.1887 31.156 30.3997 31.929C29.6107 32.702 28.3445 32.6891 27.5714 31.9001C27.1059 31.425 26.5502 31.0475 25.937 30.7898C25.3237 30.5321 24.6652 30.3994 24 30.3994Z" fill="#677489"/>
+</svg>

package/dist/esm/components/UTRating/versions/V0/components/Faces/assets/mood-smile-selected.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="20" fill="#E1FEE8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8ZM4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24ZM16 20C16 18.8954 16.8954 18 18 18H18.02C19.1246 18 20.02 18.8954 20.02 20C20.02 21.1046 19.1246 22 18.02 22H18C16.8954 22 16 21.1046 16 20ZM28 20C28 18.8954 28.8954 18 30 18H30.02C31.1246 18 32.02 18.8954 32.02 20C32.02 21.1046 31.1246 22 30.02 22H30C28.8954 22 28 21.1046 28 20ZM17.6003 28.5714C18.3893 27.7984 19.6555 27.8113 20.4286 28.6003C20.8941 29.0754 21.4498 29.4529 22.063 29.7106C22.6763 29.9683 23.3348 30.101 24 30.101C24.6652 30.101 25.3237 29.9683 25.937 29.7106C26.5502 29.4529 27.1059 29.0754 27.5714 28.6003C28.3445 27.8113 29.6107 27.7984 30.3997 28.5714C31.1887 29.3445 31.2016 30.6107 30.4286 31.3997C29.5906 32.255 28.5904 32.9344 27.4865 33.3983C26.3827 33.8621 25.1974 34.101 24 34.101C22.8026 34.101 21.6173 33.8621 20.5135 33.3983C19.4096 32.9344 18.4094 32.255 17.5714 31.3997C16.7984 30.6107 16.8113 29.3445 17.6003 28.5714Z" fill="#04A928"/>
+</svg>

package/dist/esm/components/UTRating/versions/V0/components/Faces/assets/mood-smile.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8ZM4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24ZM16 20C16 18.8954 16.8954 18 18 18H18.02C19.1246 18 20.02 18.8954 20.02 20C20.02 21.1046 19.1246 22 18.02 22H18C16.8954 22 16 21.1046 16 20ZM28 20C28 18.8954 28.8954 18 30 18H30.02C31.1246 18 32.02 18.8954 32.02 20C32.02 21.1046 31.1246 22 30.02 22H30C28.8954 22 28 21.1046 28 20ZM17.6003 28.5714C18.3893 27.7984 19.6555 27.8113 20.4286 28.6003C20.8941 29.0754 21.4498 29.4529 22.063 29.7106C22.6763 29.9683 23.3348 30.101 24 30.101C24.6652 30.101 25.3237 29.9683 25.937 29.7106C26.5502 29.4529 27.1059 29.0754 27.5714 28.6003C28.3445 27.8113 29.6107 27.7984 30.3997 28.5714C31.1887 29.3445 31.2016 30.6107 30.4286 31.3997C29.5906 32.255 28.5904 32.9344 27.4865 33.3983C26.3827 33.8621 25.1974 34.101 24 34.101C22.8026 34.101 21.6173 33.8621 20.5135 33.3983C19.4096 32.9344 18.4094 32.255 17.5714 31.3997C16.7984 30.6107 16.8113 29.3445 17.6003 28.5714Z" fill="#677489"/>
+</svg>

package/dist/esm/components/UTRating/versions/V0/components/Faces/constants.js

@@ -0,0 +1,179 @@
+import React from "react";
+var MoodConfuzed = function MoodConfuzed(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 8C15.163 8 8 15.163 8 24s7.163 16 16 16 16-7.163 16-16S32.837 8 24 8ZM4 24C4 12.954 12.954 4 24 4s20 8.954 20 20-8.954 20-20 20S4 35.046 4 24Zm12-4a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Zm12 0a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H30a2 2 0 0 1-2-2Zm2.861 10.995a18 18 0 0 0-10.8 2.7 2 2 0 0 1-2.122-3.39 22 22 0 0 1 13.2-3.3 2 2 0 0 1-.278 3.99Z",
+    fill: "#677489"
+  }));
+};
+MoodConfuzed.defaultProps = {
+  width: "48",
+  height: "48",
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var MoodEmpty = function MoodEmpty(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 8C15.163 8 8 15.163 8 24s7.163 16 16 16 16-7.163 16-16S32.837 8 24 8ZM4 24C4 12.954 12.954 4 24 4s20 8.954 20 20-8.954 20-20 20S4 35.046 4 24Zm12-4a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Zm12 0a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H30a2 2 0 0 1-2-2ZM16 30a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Z",
+    fill: "#677489"
+  }));
+};
+MoodEmpty.defaultProps = {
+  width: "48",
+  height: "48",
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var MoodHappy = function MoodHappy(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 8C15.163 8 8 15.163 8 24s7.163 16 16 16 16-7.163 16-16S32.837 8 24 8ZM4 24C4 12.954 12.954 4 24 4s20 8.954 20 20-8.954 20-20 20S4 35.046 4 24Zm12-6a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Zm12 0a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H30a2 2 0 0 1-2-2Zm-13.414 6.586A2 2 0 0 1 16 24h16a2 2 0 0 1 2 2 10 10 0 0 1-20 0 2 2 0 0 1 .586-1.414ZM18.343 28a6 6 0 0 0 11.314 0H18.343Z",
+    fill: "#677489"
+  }));
+};
+MoodHappy.defaultProps = {
+  width: "48",
+  height: "48",
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var MoodSad = function MoodSad(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 8C15.163 8 8 15.163 8 24s7.163 16 16 16 16-7.163 16-16S32.837 8 24 8ZM4 24C4 12.954 12.954 4 24 4s20 8.954 20 20-8.954 20-20 20S4 35.046 4 24Zm12-4a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Zm12 0a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H30a2 2 0 0 1-2-2Zm-4 10.4a5 5 0 0 0-3.571 1.5 2 2 0 0 1-2.858-2.8 9 9 0 0 1 12.858 0 2 2 0 0 1-2.858 2.8A5 5 0 0 0 24 30.4Z",
+    fill: "#677489"
+  }));
+};
+MoodSad.defaultProps = {
+  width: "48",
+  height: "48",
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var MoodSmile = function MoodSmile(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 8C15.163 8 8 15.163 8 24s7.163 16 16 16 16-7.163 16-16S32.837 8 24 8ZM4 24C4 12.954 12.954 4 24 4s20 8.954 20 20-8.954 20-20 20S4 35.046 4 24Zm12-4a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Zm12 0a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H30a2 2 0 0 1-2-2Zm-10.4 8.571a2 2 0 0 1 2.829.03 5 5 0 0 0 7.142 0A2 2 0 0 1 30.43 31.4a9 9 0 0 1-12.858 0 2 2 0 0 1 .03-2.829Z",
+    fill: "#677489"
+  }));
+};
+MoodSmile.defaultProps = {
+  width: "48",
+  height: "48",
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var MoodConfuzedSelected = function MoodConfuzedSelected(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("circle", {
+    cx: "24",
+    cy: "24",
+    r: "20",
+    fill: "#FFD6D7"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 8C15.163 8 8 15.163 8 24s7.163 16 16 16 16-7.163 16-16S32.837 8 24 8ZM4 24C4 12.954 12.954 4 24 4s20 8.954 20 20-8.954 20-20 20S4 35.046 4 24Zm12-4a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Zm12 0a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H30a2 2 0 0 1-2-2Zm2.861 10.995a18 18 0 0 0-10.8 2.7 2 2 0 0 1-2.122-3.39 22 22 0 0 1 13.2-3.3 2 2 0 0 1-.278 3.99Z",
+    fill: "#E00002"
+  }));
+};
+MoodConfuzedSelected.defaultProps = {
+  width: "48",
+  height: "48",
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var MoodEmptySelected = function MoodEmptySelected(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("circle", {
+    cx: "24",
+    cy: "24",
+    r: "20",
+    fill: "#FFF5D6"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 8C15.163 8 8 15.163 8 24s7.163 16 16 16 16-7.163 16-16S32.837 8 24 8ZM4 24C4 12.954 12.954 4 24 4s20 8.954 20 20-8.954 20-20 20S4 35.046 4 24Zm12-4a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Zm12 0a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H30a2 2 0 0 1-2-2ZM16 30a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Z",
+    fill: "#C29400"
+  }));
+};
+MoodEmptySelected.defaultProps = {
+  width: "48",
+  height: "48",
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var MoodHappySelected = function MoodHappySelected(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("circle", {
+    cx: "24",
+    cy: "24",
+    r: "20",
+    fill: "#CDFED8"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 8C15.163 8 8 15.163 8 24s7.163 16 16 16 16-7.163 16-16S32.837 8 24 8ZM4 24C4 12.954 12.954 4 24 4s20 8.954 20 20-8.954 20-20 20S4 35.046 4 24Zm12-6a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Zm12 0a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H30a2 2 0 0 1-2-2Zm-13.414 6.586A2 2 0 0 1 16 24h16a2 2 0 0 1 2 2 10 10 0 0 1-20 0 2 2 0 0 1 .586-1.414ZM18.343 28a6 6 0 0 0 11.314 0H18.343Z",
+    fill: "#048B21"
+  }));
+};
+MoodHappySelected.defaultProps = {
+  width: "48",
+  height: "48",
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var MoodSadSelected = function MoodSadSelected(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("circle", {
+    cx: "24",
+    cy: "24",
+    r: "20",
+    fill: "#FFE7D7"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 8C15.163 8 8 15.163 8 24s7.163 16 16 16 16-7.163 16-16S32.837 8 24 8ZM4 24C4 12.954 12.954 4 24 4s20 8.954 20 20-8.954 20-20 20S4 35.046 4 24Zm12-4a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Zm12 0a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H30a2 2 0 0 1-2-2Zm-4 10.4a5 5 0 0 0-3.571 1.5 2 2 0 0 1-2.858-2.8 9 9 0 0 1 12.858 0 2 2 0 0 1-2.858 2.8A5 5 0 0 0 24 30.4Z",
+    fill: "#EA6001"
+  }));
+};
+MoodSadSelected.defaultProps = {
+  width: "48",
+  height: "48",
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var MoodSmileSelected = function MoodSmileSelected(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("circle", {
+    cx: "24",
+    cy: "24",
+    r: "20",
+    fill: "#E1FEE8"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 8C15.163 8 8 15.163 8 24s7.163 16 16 16 16-7.163 16-16S32.837 8 24 8ZM4 24C4 12.954 12.954 4 24 4s20 8.954 20 20-8.954 20-20 20S4 35.046 4 24Zm12-4a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H18a2 2 0 0 1-2-2Zm12 0a2 2 0 0 1 2-2h.02a2 2 0 1 1 0 4H30a2 2 0 0 1-2-2Zm-10.4 8.571a2 2 0 0 1 2.829.03 5 5 0 0 0 7.142 0A2 2 0 0 1 30.43 31.4a9 9 0 0 1-12.858 0 2 2 0 0 1 .03-2.829Z",
+    fill: "#04A928"
+  }));
+};
+MoodSmileSelected.defaultProps = {
+  width: "48",
+  height: "48",
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+export const FACES_ICONS = [MoodConfuzed, MoodSad, MoodEmpty, MoodSmile, MoodHappy];
+export const FACES_ICONS_SELECTED = [MoodConfuzedSelected, MoodSadSelected, MoodEmptySelected, MoodSmileSelected, MoodHappySelected];
+export const FACES_CLASSES = ['faceButtonConfuzed', 'faceButtonSad', 'faceButtonEmpty', 'faceButtonSmile', 'faceButtonHappy'];

package/dist/esm/components/UTRating/versions/V0/components/Faces/index.js

@@ -0,0 +1,71 @@
+import React, { Fragment, memo } from 'react';
+import { bool, func, number, objectOf, oneOfType, string } from 'prop-types';
+import UTButton from '../../../../../UTButton';
+import UTLabel from '../../../../../UTLabel';
+import { BOTTOM_TEXT, SIDE_TEXT, NO_TEXT } from '../../constants';
+import { FACES_CLASSES, FACES_ICONS, FACES_ICONS_SELECTED } from './constants';
+import styles from './styles.module.scss';
+const Faces = _ref => {
+  let {
+    classes,
+    isFirst,
+    isLast,
+    name,
+    onClick,
+    order,
+    selected,
+    textVariant,
+    value
+  } = _ref;
+  const handleClick = () => onClick(order, value);
+  const textVariants = {
+    [SIDE_TEXT]: {
+      containerClass: isFirst ? styles.first : isLast && styles.last,
+      labelClass: classes.label,
+      showLabel: isFirst || isLast
+    },
+    [BOTTOM_TEXT]: {
+      containerClass: "".concat(styles.withTextBottom, " ").concat(classes.facesWithTextBottom),
+      labelClass: classes.label,
+      showLabel: true
+    },
+    [NO_TEXT]: {
+      containerClass: '',
+      labelClass: '',
+      showLabel: false
+    }
+  };
+  const textVariantToUse = textVariants[textVariant] || textVariants[NO_TEXT];
+  const Icon = FACES_ICONS[order - 1];
+  const IconSelected = FACES_ICONS_SELECTED[order - 1];
+  return Icon && IconSelected && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(textVariantToUse.containerClass)
+  }, /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: "\n              ".concat(styles.faceButton, "\n              ").concat(classes[FACES_CLASSES[order - 1]], "\n              ").concat(selected && "".concat(classes.faceButtonSelected, " ").concat(styles.faceButtonSelected), "\n            ")
+    },
+    Icon: () => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+      className: styles.faceIcon
+    }), /*#__PURE__*/React.createElement(IconSelected, {
+      className: styles.faceIconSelected
+    })),
+    onClick: handleClick,
+    variant: "text"
+  }), textVariantToUse.showLabel && /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(styles.text, " ").concat(textVariantToUse.labelClass),
+    colorTheme: "gray",
+    weight: "semibold"
+  }, name));
+};
+Faces.propTypes = {
+  classes: objectOf(string),
+  isFirst: bool,
+  isLast: bool,
+  name: string,
+  onClick: func,
+  order: number,
+  selected: bool,
+  textVariant: string,
+  value: oneOfType([number, string])
+};
+export default /*#__PURE__*/memo(Faces);

package/dist/esm/components/UTRating/versions/V0/components/Faces/styles.module.scss

@@ -0,0 +1,93 @@
+@use '../../../../../../scss/variables/colors.module.scss' as *;
+@use '../../../../../../scss/variables/sizes.module.scss' as *;
+@use '../../../../../../scss/variables/mediaQueries.module.scss' as *;
+
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  width: 20%;
+}
+
+.first {
+  flex-direction: row-reverse;
+
+/*   @media #{$mobile} {
+    position: relative;
+
+    .text {
+      left: 0;
+      position: absolute;
+      top: 40px;
+      white-space: nowrap;
+    }
+  } */
+}
+
+.last {
+  flex-direction: inherit;
+  margin: 0 0 0 5px;
+
+  .avatar {
+    margin-right: 10px;
+  }
+
+  @media #{$mobile} {
+    position: relative;
+
+    .text {
+      position: absolute;
+      right: 0;
+      top: 40px;
+      white-space: nowrap;
+    }
+
+    .avatar {
+      margin-right: 0;
+    }
+  }
+}
+
+.withTextBottom {
+  position: relative;
+  text-align: center;
+}
+
+.faceButton {
+  background: none !important;
+
+  &:not(&:hover):not(.faceButtonSelected) {
+    .faceIconSelected {
+      display: none;
+    }
+  }
+
+  &:hover {
+    .faceIcon {
+      display: none;
+    }
+  }
+}
+
+.faceButtonSelected {
+  & .faceIcon {
+    display: none;
+  }
+}
+
+.faceIcon,
+.faceIconSelected {
+  height: 56px;
+  width: 56px;
+
+  @media #{$mobile} {
+    height: 24px;
+    width: 24px;
+  }
+}
+
+.text {
+  @media #{$mobile} {
+    font-size: 12px;
+  }
+}

package/dist/esm/components/UTRating/versions/V0/components/Star/index.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { func, number, string, bool, shape, oneOfType } from 'prop-types';
+import StarSVG from '@material-ui/icons/StarRate';
+import IconButton from '@material-ui/core/IconButton';
+import UTLabel from '../../../../../UTLabel';
+import { BOTTOM_TEXT, SIDE_TEXT, NO_TEXT } from '../../constants';
+import styles from './styles.module.scss';
+const Star = _ref => {
+  let {
+    name,
+    onMouseLeave,
+    hovered,
+    selected,
+    isFirst,
+    isLast,
+    color,
+    order,
+    value,
+    onClick,
+    onHover,
+    classes,
+    textVariant
+  } = _ref;
+  const handleClick = () => onClick(order, value);
+  const handleHover = () => onHover(order);
+  const onFocus = () => {};
+  const showPropColor = color && (hovered || selected);
+  const textVariants = {
+    [SIDE_TEXT]: {
+      containerClass: isFirst ? styles.first : isLast && styles.last,
+      showLabel: isFirst || isLast
+    },
+    [BOTTOM_TEXT]: {
+      containerClass: styles.withTextBottom,
+      showLabel: true
+    },
+    [NO_TEXT]: {
+      containerClass: '',
+      showLabel: false
+    }
+  };
+  const textVariantToUse = textVariants[textVariant] || textVariants[SIDE_TEXT];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(textVariantToUse.containerClass)
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onFocus: onFocus,
+    onMouseOver: handleHover,
+    onMouseLeave: onMouseLeave,
+    onClick: handleClick,
+    style: showPropColor ? {
+      color
+    } : {},
+    className: "".concat(styles.starButton, " ").concat(hovered && styles.starHovered, " ").concat(selected && styles.starsPainted)
+  }, /*#__PURE__*/React.createElement(StarSVG, {
+    className: styles.starSize
+  })), textVariantToUse.showLabel && /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(styles.text, " ").concat(classes.label),
+    colorTheme: "gray"
+  }, name));
+};
+Star.propTypes = {
+  onClick: func,
+  onHover: func,
+  onMouseLeave: func,
+  order: number,
+  value: oneOfType([number, string]),
+  hovered: bool,
+  selected: bool,
+  name: string,
+  isFirst: bool,
+  isLast: bool,
+  color: string,
+  classes: shape({
+    label: string,
+    avatar: string
+  }),
+  textVariant: string
+};
+export default Star;