@redocly/theme 0.25.2 → 0.26.1

package/src/components/Tabs/Tabs.tsx

@@ -39,7 +39,15 @@ export function Tabs(props: TabsProps): JSX.Element {
 }
 
 const TabsContainer = styled.div`
-  margin: 10px 0;
+  color: var(--md-tabs-container-text-color);
+  font-size: var(--md-tabs-container-font-size);
+  font-family: var(--md-tabs-container-font-family);
+  font-style: var(--md-tabs-container-font-style);
+  font-weight: var(--md-tabs-container-font-weight);
+  background-color: var(--md-tabs-container-background-color);
+  margin: var(--md-tabs-container-margin);
+  padding: var(--md-tabs-container-padding);
+  border: var(--md-tabs-container-border);
 
   ol[class^='Tabs__TabList'] {
     margin: 0;
@@ -48,18 +56,24 @@ const TabsContainer = styled.div`
 `;
 
 const TabList = styled.ol`
-  color: var(--md-tabs-tab-text-color);
-  padding: 0;
+  padding: var(--md-tabs-padding);
   margin-block-end: 0;
-  border: solid var(--border-primary);
-  border-width: 0 0 1px 0;
+  border: var(--md-tabs-border);
+  border-width: var(--md-tabs-border-width);
 
   li[class^='Tab__TabItem'] {
-    margin: 0;
-    margin-bottom: -1px;
+    margin: var(--md-tabs-tab-margin);
   }
 `;
 
 const TabContent = styled.div`
-  padding: 1rem 0;
+  color: var(--md-tabs-content-text-color);
+  font-size: var(--md-tabs-content-font-size);
+  font-family: var(--md-tabs-content-font-family);
+  font-style: var(--md-tabs-content-font-style);
+  font-weight: var(--md-tabs-content-font-weight);
+  background-color: var(--md-tabs-content-background-color);
+  margin: var(--md-tabs-content-margin);
+  padding: var(--md-tabs-content-padding);
+  border: var(--md-tabs-content-border);
 `;

package/src/config.ts

@@ -449,7 +449,7 @@ export const themeConfigSchema = {
         },
         type: {
           type: 'string',
-          enum: ['rating', 'sentiment', 'comment', 'reasons', 'mood'],
+          enum: ['rating', 'sentiment', 'comment', 'reasons', 'mood', 'scale'],
           default: 'sentiment',
         },
         settings: {
@@ -457,10 +457,11 @@ export const themeConfigSchema = {
           properties: {
             label: { type: 'string' },
             submitText: { type: 'string' },
-            max: { type: 'number' },
             buttonText: { type: 'string' },
             multi: { type: 'boolean' },
             items: { type: 'array', items: { type: 'string' }, minItems: 1 },
+            leftScaleLabel: { type: 'string' },
+            rightScaleLabel: { type: 'string' },
             reasons: {
               type: 'object',
               properties: {

package/src/icons/CheckboxIcon/CheckboxIcon.tsx

@@ -19,10 +19,10 @@ const Icon = ({
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect width="16" height="16" rx="4" fill="var(--checkbox-active-background-color)" />
+        <rect width="16" height="16" rx="4" fill="currentColor" />
         <path
           d="M3.91308 7.03516H3.91326C3.99256 7.03525 4.07081 7.05331 4.14213 7.08798C4.21341 7.12262 4.27591 7.17295 4.32497 7.2352L3.91308 7.03516ZM3.91308 7.03516H3.09394C2.89031 7.03516 2.7766 7.26975 2.90232 7.4292L2.90237 7.42927L6.11214 11.4957L6.11218 11.4957C6.32247 11.7619 6.72568 11.7611 6.93667 11.4962L6.93708 11.4957L12.6597 4.24398C12.6598 4.24378 12.66 4.24358 12.6602 4.24338C12.7884 4.08295 12.6699 3.85 12.4689 3.85H11.6498C11.4894 3.85 11.3367 3.9235 11.2376 4.05044C11.2375 4.05055 11.2374 4.05066 11.2373 4.05077L6.52403 10.0216M3.91308 7.03516L6.52403 10.0216M6.52403 10.0216L4.32506 7.23531L6.52403 10.0216Z"
-          fill="var(--checkbox-mark-color)"
+          fill="currentColor"
           stroke="var(--checkbox-mark-color)"
         />
       </svg>
@@ -31,10 +31,10 @@ const Icon = ({
         width="16"
         height="16"
         viewBox="0 0 16 16"
-        fill="none"
+        fill="currentColor"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect width="16" height="16" rx="4" fill="var(--checkbox-background-color)" />
+        <rect width="16" height="16" rx="4" fill="currentColor" />
         <rect
           x="0.5"
           y="0.5"

package/src/icons/ColorModeIcon/ColorModeIcon.tsx

@@ -11,23 +11,23 @@ function Icon({ mode, className }: ColorModeIconProps) {
     case 'dark':
       return (
         <svg
-          className={className + ' dark'}
           data-testid="dark"
+          className={className + ' dark'}
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
+          <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
         </svg>
       );
     case 'light':
       return (
         <svg
-          data-testid="light"
           className={className + ' light'}
+          data-testid="light"
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+          <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
         </svg>
       );
     default:

package/src/icons/DissatisfiedIcon/DissatisfiedIcon.tsx

@@ -3,32 +3,22 @@ import styled from 'styled-components';
 
 const Icon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
-    <rect
-      width="16"
-      height="16"
-      transform="translate(0 0.511719)"
-      fill="white"
-      style={{ mixBlendMode: 'multiply' }}
-    />
+    <rect width="16" height="16" transform="translate(0 0.511719)" fill="none" />
     <path
       d="M8 1.51172C6.61553 1.51172 5.26216 1.92226 4.11101 2.69143C2.95987 3.4606 2.06266 4.55385 1.53285 5.83293C1.00303 7.11202 0.86441 8.51948 1.13451 9.87735C1.4046 11.2352 2.07129 12.4825 3.05026 13.4615C4.02922 14.4404 5.2765 15.1071 6.63437 15.3772C7.99224 15.6473 9.3997 15.5087 10.6788 14.9789C11.9579 14.4491 13.0511 13.5519 13.8203 12.4007C14.5895 11.2496 15 9.89619 15 8.51172C15 6.6552 14.2625 4.87473 12.9497 3.56197C11.637 2.24922 9.85652 1.51172 8 1.51172ZM8 14.5117C6.81332 14.5117 5.65328 14.1598 4.66658 13.5005C3.67989 12.8412 2.91085 11.9042 2.45673 10.8078C2.0026 9.71146 1.88378 8.50506 2.11529 7.34118C2.3468 6.17729 2.91825 5.10819 3.75736 4.26908C4.59648 3.42996 5.66558 2.85852 6.82946 2.62701C7.99335 2.3955 9.19975 2.51432 10.2961 2.96844C11.3925 3.42257 12.3295 4.1916 12.9888 5.1783C13.6481 6.16499 14 7.32503 14 8.51172C14 10.103 13.3679 11.6291 12.2426 12.7544C11.1174 13.8796 9.5913 14.5117 8 14.5117Z"
-      fill="black"
-      fillOpacity="0.45"
+      fill="currentColor"
     />
     <path
       d="M5.75 6.01172C5.50278 6.01172 5.2611 6.08503 5.05554 6.22238C4.84998 6.35973 4.68976 6.55496 4.59515 6.78336C4.50054 7.01177 4.47579 7.26311 4.52402 7.50558C4.57225 7.74806 4.6913 7.97079 4.86612 8.1456C5.04094 8.32042 5.26366 8.43947 5.50614 8.4877C5.74862 8.53593 5.99995 8.51118 6.22836 8.41657C6.45677 8.32196 6.65199 8.16174 6.78934 7.95618C6.92669 7.75062 7 7.50895 7 7.26172C7 6.9302 6.86831 6.61226 6.63389 6.37784C6.39947 6.14341 6.08152 6.01172 5.75 6.01172Z"
-      fill="black"
-      fillOpacity="0.45"
+      fill="currentColor"
     />
     <path
       d="M10.25 6.01172C10.0028 6.01172 9.7611 6.08503 9.55554 6.22238C9.34998 6.35973 9.18976 6.55496 9.09515 6.78336C9.00054 7.01177 8.97579 7.26311 9.02402 7.50558C9.07225 7.74806 9.1913 7.97079 9.36612 8.1456C9.54093 8.32042 9.76366 8.43947 10.0061 8.4877C10.2486 8.53593 10.4999 8.51118 10.7284 8.41657C10.9568 8.32196 11.152 8.16174 11.2893 7.95618C11.4267 7.75062 11.5 7.50895 11.5 7.26172C11.5 6.9302 11.3683 6.61226 11.1339 6.37784C10.8995 6.14341 10.5815 6.01172 10.25 6.01172Z"
-      fill="black"
-      fillOpacity="0.45"
+      fill="currentColor"
     />
     <path
       d="M8 10.0117C7.30982 10.0129 6.63168 10.1926 6.03151 10.5334C5.43135 10.8743 4.92958 11.3646 4.575 11.9567L5.43 12.4567C5.69683 12.0136 6.07369 11.647 6.524 11.3925C6.97431 11.1381 7.48276 11.0043 8 11.0043C8.51724 11.0043 9.0257 11.1381 9.47601 11.3925C9.92631 11.647 10.3032 12.0136 10.57 12.4567L11.425 11.9567C11.0704 11.3646 10.5687 10.8743 9.96849 10.5334C9.36833 10.1926 8.69019 10.0129 8 10.0117Z"
-      fill="black"
-      fillOpacity="0.45"
+      fill="currentColor"
     />
   </svg>
 );

package/src/icons/NeutralIcon/NeutralIcon.tsx

@@ -3,29 +3,20 @@ import styled from 'styled-components';
 
 const Icon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
-    <rect
-      width="16"
-      height="16"
-      transform="translate(0 0.511719)"
-      fill="white"
-      style={{ mixBlendMode: 'multiply' }}
-    />
+    <rect width="16" height="16" transform="translate(0 0.511719)" fill="none" />
     <path
       d="M8 1.51172C6.61553 1.51172 5.26216 1.92226 4.11101 2.69143C2.95987 3.4606 2.06266 4.55385 1.53285 5.83293C1.00303 7.11202 0.86441 8.51948 1.13451 9.87735C1.4046 11.2352 2.07129 12.4825 3.05026 13.4615C4.02922 14.4404 5.2765 15.1071 6.63437 15.3772C7.99224 15.6473 9.3997 15.5087 10.6788 14.9789C11.9579 14.4491 13.0511 13.5519 13.8203 12.4007C14.5895 11.2496 15 9.89619 15 8.51172C15 6.6552 14.2625 4.87473 12.9497 3.56197C11.637 2.24922 9.85652 1.51172 8 1.51172ZM8 14.5117C6.81332 14.5117 5.65328 14.1598 4.66658 13.5005C3.67989 12.8412 2.91085 11.9042 2.45673 10.8078C2.0026 9.71146 1.88378 8.50506 2.11529 7.34118C2.3468 6.17729 2.91825 5.10819 3.75736 4.26908C4.59648 3.42996 5.66558 2.85852 6.82946 2.62701C7.99335 2.3955 9.19975 2.51432 10.2961 2.96844C11.3925 3.42257 12.3295 4.1916 12.9888 5.1783C13.6481 6.16499 14 7.32503 14 8.51172C14 10.103 13.3679 11.6291 12.2426 12.7544C11.1174 13.8796 9.5913 14.5117 8 14.5117Z"
-      fill="black"
-      fillOpacity="0.45"
+      fill="currentColor"
     />
     <path
       d="M5.75 6.01172C5.50278 6.01172 5.2611 6.08503 5.05554 6.22238C4.84998 6.35973 4.68976 6.55496 4.59515 6.78336C4.50054 7.01177 4.47579 7.26311 4.52402 7.50558C4.57225 7.74806 4.6913 7.97079 4.86612 8.1456C5.04094 8.32042 5.26366 8.43947 5.50614 8.4877C5.74862 8.53593 5.99995 8.51118 6.22836 8.41657C6.45677 8.32196 6.65199 8.16174 6.78934 7.95618C6.92669 7.75062 7 7.50895 7 7.26172C7 6.9302 6.86831 6.61226 6.63389 6.37784C6.39947 6.14341 6.08152 6.01172 5.75 6.01172Z"
-      fill="black"
-      fillOpacity="0.45"
+      fill="currentColor"
     />
     <path
       d="M10.25 6.01172C10.0028 6.01172 9.7611 6.08503 9.55554 6.22238C9.34998 6.35973 9.18976 6.55496 9.09515 6.78336C9.00054 7.01177 8.97579 7.26311 9.02402 7.50558C9.07225 7.74806 9.1913 7.97079 9.36612 8.1456C9.54093 8.32042 9.76366 8.43947 10.0061 8.4877C10.2486 8.53593 10.4999 8.51118 10.7284 8.41657C10.9568 8.32196 11.152 8.16174 11.2893 7.95618C11.4267 7.75062 11.5 7.50895 11.5 7.26172C11.5 6.9302 11.3683 6.61226 11.1339 6.37784C10.8995 6.14341 10.5815 6.01172 10.25 6.01172Z"
-      fill="black"
-      fillOpacity="0.45"
+      fill="currentColor"
     />
-    <path d="M11 10.5117H5V11.5117H11V10.5117Z" fill="black" fillOpacity="0.45" />
+    <path d="M11 10.5117H5V11.5117H11V10.5117Z" fill="currentColor" />
   </svg>
 );
 

package/src/icons/RadioCheckButtonIcon/RadioCheckButtonIcon.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <rect width="16" height="16" fill="none" />
+    <path
+      d="M8 1C6.61553 1 5.26216 1.41054 4.11101 2.17971C2.95987 2.94888 2.06266 4.04213 1.53285 5.32122C1.00303 6.6003 0.86441 8.00776 1.13451 9.36563C1.4046 10.7235 2.07129 11.9708 3.05026 12.9497C4.02922 13.9287 5.2765 14.5954 6.63437 14.8655C7.99224 15.1356 9.3997 14.997 10.6788 14.4672C11.9579 13.9373 13.0511 13.0401 13.8203 11.889C14.5895 10.7378 15 9.38447 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1ZM8 14C6.81332 14 5.65328 13.6481 4.66658 12.9888C3.67989 12.3295 2.91085 11.3925 2.45673 10.2961C2.0026 9.19974 1.88378 7.99334 2.11529 6.82946C2.3468 5.66557 2.91825 4.59647 3.75736 3.75736C4.59648 2.91824 5.66558 2.3468 6.82946 2.11529C7.99335 1.88378 9.19975 2.0026 10.2961 2.45672C11.3925 2.91085 12.3295 3.67988 12.9888 4.66658C13.6481 5.65327 14 6.81331 14 8C14 9.5913 13.3679 11.1174 12.2426 12.2426C11.1174 13.3679 9.5913 14 8 14Z"
+      fill="currentColor"
+    />
+    <path
+      d="M7 10.625L4.5 8.145L5.295 7.375L7 9.05L10.705 5.375L11.5 6.165L7 10.625Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export const RadioCheckButtonIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/RadioCheckButtonIcon/RadioCheckButtonIcon',
+}))``;

package/src/icons/RadioCheckButtonIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';

package/src/icons/SatisfiedIcon/SatisfiedIcon.tsx

@@ -14,28 +14,24 @@ const Icon = () => (
       width="16"
       height="16"
       transform="translate(0 0.511719)"
-      fill="white"
+      fill="none"
       style={{ mixBlendMode: 'multiply' }}
     />
     <path
       d="M8 1.51172C6.61553 1.51172 5.26216 1.92226 4.11101 2.69143C2.95987 3.4606 2.06266 4.55385 1.53285 5.83293C1.00303 7.11202 0.86441 8.51948 1.13451 9.87735C1.4046 11.2352 2.07129 12.4825 3.05026 13.4615C4.02922 14.4404 5.2765 15.1071 6.63437 15.3772C7.99224 15.6473 9.3997 15.5087 10.6788 14.9789C11.9579 14.4491 13.0511 13.5519 13.8203 12.4007C14.5895 11.2496 15 9.89619 15 8.51172C15 6.6552 14.2625 4.87473 12.9497 3.56197C11.637 2.24922 9.85652 1.51172 8 1.51172ZM8 14.5117C6.81332 14.5117 5.65328 14.1598 4.66658 13.5005C3.67989 12.8412 2.91085 11.9042 2.45673 10.8078C2.0026 9.71146 1.88378 8.50506 2.11529 7.34118C2.3468 6.17729 2.91825 5.10819 3.75736 4.26908C4.59648 3.42996 5.66558 2.85852 6.82946 2.62701C7.99335 2.3955 9.19975 2.51432 10.2961 2.96844C11.3925 3.42257 12.3295 4.1916 12.9888 5.1783C13.6481 6.16499 14 7.32503 14 8.51172C14 10.103 13.3679 11.6291 12.2426 12.7544C11.1174 13.8796 9.5913 14.5117 8 14.5117Z"
-      fill="black"
-      fillOpacity="0.45"
+      fill="currentColor"
     />
     <path
       d="M5.75 6.01172C5.50278 6.01172 5.2611 6.08503 5.05554 6.22238C4.84998 6.35973 4.68976 6.55496 4.59515 6.78336C4.50054 7.01177 4.47579 7.26311 4.52402 7.50558C4.57225 7.74806 4.6913 7.97079 4.86612 8.1456C5.04094 8.32042 5.26366 8.43947 5.50614 8.4877C5.74862 8.53593 5.99995 8.51118 6.22836 8.41657C6.45677 8.32196 6.65199 8.16174 6.78934 7.95618C6.92669 7.75062 7 7.50895 7 7.26172C7.00134 7.0972 6.96991 6.93405 6.90757 6.78179C6.84522 6.62953 6.7532 6.49121 6.63686 6.37487C6.52052 6.25853 6.38219 6.1665 6.22993 6.10416C6.07767 6.04181 5.91453 6.01039 5.75 6.01172Z"
-      fill="black"
-      fillOpacity="0.45"
+      fill="currentColor"
     />
     <path
       d="M10.25 6.01172C10.0028 6.01172 9.7611 6.08503 9.55554 6.22238C9.34998 6.35973 9.18976 6.55496 9.09515 6.78336C9.00054 7.01177 8.97579 7.26311 9.02402 7.50558C9.07225 7.74806 9.1913 7.97079 9.36612 8.1456C9.54093 8.32042 9.76366 8.43947 10.0061 8.4877C10.2486 8.53593 10.4999 8.51118 10.7284 8.41657C10.9568 8.32196 11.152 8.16174 11.2893 7.95618C11.4267 7.75062 11.5 7.50895 11.5 7.26172C11.5013 7.0972 11.4699 6.93405 11.4076 6.78179C11.3452 6.62953 11.2532 6.49121 11.1369 6.37487C11.0205 6.25853 10.8822 6.1665 10.7299 6.10416C10.5777 6.04181 10.4145 6.01039 10.25 6.01172Z"
-      fill="black"
-      fillOpacity="0.45"
+      fill="currentColor"
     />
     <path
       d="M8 12.5117C8.69019 12.5106 9.36833 12.3308 9.96849 11.99C10.5687 11.6492 11.0704 11.1589 11.425 10.5667L10.57 10.0667C10.3032 10.5098 9.92631 10.8764 9.47601 11.1309C9.0257 11.3854 8.51724 11.5191 8 11.5191C7.48276 11.5191 6.97431 11.3854 6.524 11.1309C6.07369 10.8764 5.69683 10.5098 5.43 10.0667L4.575 10.5667C4.92958 11.1589 5.43135 11.6492 6.03151 11.99C6.63168 12.3308 7.30982 12.5106 8 12.5117Z"
-      fill="black"
-      fillOpacity="0.45"
+      fill="currentColor"
     />
   </svg>
 );

package/src/icons/ThumbDownIcon/ThumbDownIcon.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+    <path
+      d="M12.8422 6.66036C12.8984 6.47286 12.9266 6.27911 12.9266 6.08224C12.9266 5.64005 12.7812 5.21505 12.5188 4.86818C12.575 4.68068 12.6031 4.48693 12.6031 4.29005C12.6031 3.84786 12.4578 3.42286 12.1953 3.07599C12.2516 2.88849 12.2797 2.69474 12.2797 2.49786C12.2797 1.69161 11.8 0.965052 11.0562 0.647865C10.9255 0.591503 10.7845 0.562777 10.6422 0.56349H1.25C0.973437 0.56349 0.75 0.786927 0.75 1.06349V6.75099C0.75 7.02755 0.973437 7.25099 1.25 7.25099H3.27031L4.61094 12.1072C4.82656 12.8901 5.54531 13.4369 6.35781 13.4369C6.82188 13.4369 7.25469 13.2526 7.575 12.9151C7.89531 12.5791 8.05937 12.1385 8.03594 11.6744L7.94219 9.75411H11.6906C11.8797 9.75411 12.0641 9.70411 12.2266 9.6088C12.8578 9.24161 13.25 8.57599 13.25 7.87443C13.25 7.43224 13.1047 7.00724 12.8422 6.66036ZM1.875 6.12443V1.68693H3.14062V6.12443H1.875ZM11.675 8.63068H6.7625L6.9125 11.7307C6.92188 11.9166 6.83906 12.0916 6.68437 12.2072C6.58906 12.2776 6.47188 12.3135 6.35469 12.3119C6.20497 12.3105 6.05977 12.2605 5.94087 12.1695C5.82198 12.0785 5.73581 11.9514 5.69531 11.8072L4.14062 6.17443V1.68693H10.6313C10.7874 1.75692 10.9201 1.87054 11.0132 2.01413C11.1063 2.15772 11.156 2.32515 11.1562 2.4963C11.1562 2.64786 11.1203 2.79161 11.0484 2.92286L10.8313 3.31974L11.1734 3.61661C11.2698 3.70003 11.347 3.80322 11.3998 3.91917C11.4527 4.03511 11.4799 4.16107 11.4797 4.28849C11.4797 4.44005 11.4437 4.5838 11.3719 4.71505L11.1547 5.11193L11.4969 5.4088C11.5932 5.49222 11.6704 5.59541 11.7232 5.71135C11.7761 5.82729 11.8033 5.95326 11.8031 6.08068C11.8031 6.23224 11.7672 6.37599 11.6953 6.50724L11.4766 6.90568L11.8188 7.20255C11.9151 7.28597 11.9923 7.38916 12.0451 7.5051C12.098 7.62104 12.1252 7.74701 12.125 7.87443C12.125 8.17286 11.9531 8.46036 11.675 8.63068Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const ThumbDownIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ThumbDownIcon/ThumbDownIcon',
+}))``;

package/src/icons/ThumbDownIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/ThumbDownIcon/ThumbDownIcon';

package/src/icons/ThumbUpIcon/ThumbUpIcon.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+    <path
+      d="M12.8422 7.33966C13.1047 6.99279 13.25 6.56779 13.25 6.1256C13.25 5.42404 12.8578 4.75997 12.2266 4.38966C12.0641 4.29434 11.879 4.24417 11.6906 4.24435H7.94375L8.0375 2.32404C8.05938 1.85997 7.89531 1.41935 7.57656 1.08341C7.42013 0.917829 7.23141 0.786087 7.02206 0.696324C6.8127 0.606562 6.58716 0.560687 6.35938 0.561535C5.54688 0.561535 4.82812 1.10841 4.6125 1.89122L3.27031 6.7506H1.25C0.973437 6.7506 0.75 6.97404 0.75 7.2506V12.9381C0.75 13.2147 0.973437 13.4381 1.25 13.4381H10.6453C10.7891 13.4381 10.9297 13.41 11.0594 13.3537C11.8031 13.0365 12.2828 12.31 12.2828 11.5037C12.2828 11.3068 12.2547 11.1131 12.1984 10.9256C12.4609 10.5787 12.6062 10.1537 12.6062 9.71154C12.6062 9.51466 12.5781 9.32091 12.5219 9.13341C12.7844 8.78654 12.9297 8.36154 12.9297 7.91935C12.9266 7.72247 12.8984 7.52716 12.8422 7.33966ZM1.875 12.3131V7.8756H3.14062V12.3131H1.875ZM11.8188 6.79747L11.4766 7.09435L11.6938 7.49122C11.7653 7.62196 11.8024 7.76875 11.8016 7.91779C11.8016 8.1756 11.6891 8.42091 11.4953 8.58966L11.1531 8.88654L11.3703 9.28341C11.4419 9.41414 11.479 9.56094 11.4781 9.70997C11.4781 9.96779 11.3656 10.2131 11.1719 10.3818L10.8297 10.6787L11.0469 11.0756C11.1184 11.2063 11.1555 11.3531 11.1547 11.5022C11.1547 11.8522 10.9484 12.1678 10.6297 12.3115H4.14062V7.8256L5.69531 2.19279C5.7354 2.04841 5.82146 1.92104 5.94044 1.82997C6.05943 1.7389 6.20485 1.68909 6.35469 1.6881C6.47344 1.6881 6.59062 1.72247 6.68437 1.79279C6.83906 1.90841 6.92188 2.08341 6.9125 2.26935L6.7625 5.36935H11.675C11.9531 5.53966 12.125 5.82716 12.125 6.1256C12.125 6.38341 12.0125 6.62716 11.8188 6.79747Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const ThumbUpIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ThumbUpIcon/ThumbUpIcon',
+}))``;

package/src/icons/ThumbUpIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/ThumbUpIcon/ThumbUpIcon';

package/src/types/portal/src/shared/constants.ts

@@ -9,6 +9,7 @@ export enum FEEDBACK_TYPES {
   COMMENT = 'comment',
   MOOD = 'mood',
   PROBLEM = 'problem',
+  SCALE = 'scale',
 }
 export const DEV_LOGIN_SLUG = '/login/';
 export enum ExternalRoutes {

package/src/types/portal/src/shared/types/feedback.ts

@@ -1,6 +1,6 @@
 import type { FEEDBACK_TYPES } from '../constants';
 
-import type {RatingProps, SentimentProps, CommentProps, MoodProps} from '@theme/components/Feedback';
+import type {RatingProps, SentimentProps, CommentProps, MoodProps, ScaleProps} from '@theme/components/Feedback';
 
 export type SubmitFeedbackParams = {
   type: string;
@@ -11,5 +11,5 @@ export type SubmitFeedbackParams = {
 
 export type FeedbackProps = {
   type: FEEDBACK_TYPES;
-  settings: (RatingProps | SentimentProps | CommentProps | MoodProps)['settings'];
+  settings: (RatingProps | SentimentProps | CommentProps | MoodProps | ScaleProps)['settings'];
 }