odaptos_design_system 2.0.5 → 2.0.7

package/src/Atoms/PopoverBeta/PopoverBeta.tsx

@@ -1,107 +1,107 @@
-import React from 'react';
-import { Tooltip } from '../../';
-
-interface PopoverBetaProps {
-  description: string;
-  placement?:
-    | 'bottom-end'
-    | 'bottom-start'
-    | 'bottom'
-    | 'left-end'
-    | 'left-start'
-    | 'left'
-    | 'right-end'
-    | 'right-start'
-    | 'right'
-    | 'top-end'
-    | 'top-start'
-    | 'top';
-  className?: string;
-  isCloseBeta?: boolean;
-}
-
-export const PopoverBeta = ({
-  description,
-  placement = 'right',
-  className,
-  isCloseBeta = false,
-}: PopoverBetaProps) => {
-  return (
-    <Tooltip
-      arrow
-      placement={placement}
-      tooltipDescription={description}
-      children={
-        isCloseBeta ? (
-          <svg
-            width="78"
-            height="16"
-            viewBox="0 0 78 16"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect
-              width="78"
-              height="16"
-              rx="4"
-              fill="url(#paint0_linear_7476_130)"
-            />
-            <path
-              d="M5.363 8.128C5.363 7.36533 5.528 6.687 5.858 6.093C6.188 5.49167 6.64633 5.026 7.233 4.696C7.827 4.35867 8.498 4.19 9.246 4.19C10.1627 4.19 10.9473 4.432 11.6 4.916C12.2527 5.4 12.689 6.06 12.909 6.896H10.841C10.687 6.57333 10.467 6.32767 10.181 6.159C9.90233 5.99033 9.58333 5.906 9.224 5.906C8.64467 5.906 8.17533 6.10767 7.816 6.511C7.45667 6.91433 7.277 7.45333 7.277 8.128C7.277 8.80267 7.45667 9.34167 7.816 9.745C8.17533 10.1483 8.64467 10.35 9.224 10.35C9.58333 10.35 9.90233 10.2657 10.181 10.097C10.467 9.92833 10.687 9.68267 10.841 9.36H12.909C12.689 10.196 12.2527 10.856 11.6 11.34C10.9473 11.8167 10.1627 12.055 9.246 12.055C8.498 12.055 7.827 11.89 7.233 11.56C6.64633 11.2227 6.188 10.757 5.858 10.163C5.528 9.569 5.363 8.89067 5.363 8.128ZM15.9419 3.86V12H14.0609V3.86H15.9419ZM20.099 12.088C19.4977 12.088 18.955 11.9597 18.471 11.703C17.9944 11.4463 17.6167 11.0797 17.338 10.603C17.0667 10.1263 16.931 9.569 16.931 8.931C16.931 8.30033 17.0704 7.74667 17.349 7.27C17.6277 6.786 18.009 6.41567 18.493 6.159C18.977 5.90233 19.5197 5.774 20.121 5.774C20.7224 5.774 21.265 5.90233 21.749 6.159C22.233 6.41567 22.6144 6.786 22.893 7.27C23.1717 7.74667 23.311 8.30033 23.311 8.931C23.311 9.56167 23.168 10.119 22.882 10.603C22.6034 11.0797 22.2184 11.4463 21.727 11.703C21.243 11.9597 20.7004 12.088 20.099 12.088ZM20.099 10.46C20.4584 10.46 20.7627 10.328 21.012 10.064C21.2687 9.8 21.397 9.42233 21.397 8.931C21.397 8.43967 21.2724 8.062 21.023 7.798C20.781 7.534 20.4804 7.402 20.121 7.402C19.7544 7.402 19.45 7.534 19.208 7.798C18.966 8.05467 18.845 8.43233 18.845 8.931C18.845 9.42233 18.9624 9.8 19.197 10.064C19.439 10.328 19.7397 10.46 20.099 10.46ZM26.806 12.088C26.2706 12.088 25.794 11.9963 25.376 11.813C24.958 11.6297 24.628 11.3803 24.386 11.065C24.144 10.7423 24.0083 10.383 23.979 9.987H25.838C25.86 10.1997 25.959 10.372 26.135 10.504C26.311 10.636 26.5273 10.702 26.784 10.702C27.0186 10.702 27.1983 10.658 27.323 10.57C27.455 10.4747 27.521 10.3537 27.521 10.207C27.521 10.031 27.4293 9.90267 27.246 9.822C27.0626 9.734 26.7656 9.63867 26.355 9.536C25.915 9.43333 25.5483 9.327 25.255 9.217C24.9616 9.09967 24.7086 8.92 24.496 8.678C24.2833 8.42867 24.177 8.095 24.177 7.677C24.177 7.325 24.2723 7.006 24.463 6.72C24.661 6.42667 24.947 6.19567 25.321 6.027C25.7023 5.85833 26.1533 5.774 26.674 5.774C27.444 5.774 28.049 5.96467 28.489 6.346C28.9363 6.72733 29.193 7.23333 29.259 7.864H27.521C27.4916 7.65133 27.3963 7.48267 27.235 7.358C27.081 7.23333 26.8756 7.171 26.619 7.171C26.399 7.171 26.2303 7.215 26.113 7.303C25.9956 7.38367 25.937 7.49733 25.937 7.644C25.937 7.82 26.0286 7.952 26.212 8.04C26.4026 8.128 26.696 8.216 27.092 8.304C27.5466 8.42133 27.917 8.53867 28.203 8.656C28.489 8.766 28.7383 8.94933 28.951 9.206C29.171 9.45533 29.2846 9.79267 29.292 10.218C29.292 10.5773 29.1893 10.9 28.984 11.186C28.786 11.4647 28.4963 11.6847 28.115 11.846C27.741 12.0073 27.3046 12.088 26.806 12.088ZM36.2287 8.832C36.2287 9.008 36.2177 9.19133 36.1957 9.382H31.9387C31.9681 9.76333 32.0891 10.0567 32.3017 10.262C32.5217 10.46 32.7894 10.559 33.1047 10.559C33.5741 10.559 33.9004 10.361 34.0837 9.965H36.0857C35.9831 10.3683 35.7961 10.7313 35.5247 11.054C35.2607 11.3767 34.9271 11.6297 34.5237 11.813C34.1204 11.9963 33.6694 12.088 33.1707 12.088C32.5694 12.088 32.0341 11.9597 31.5647 11.703C31.0954 11.4463 30.7287 11.0797 30.4647 10.603C30.2007 10.1263 30.0687 9.569 30.0687 8.931C30.0687 8.293 30.1971 7.73567 30.4537 7.259C30.7177 6.78233 31.0844 6.41567 31.5537 6.159C32.0231 5.90233 32.5621 5.774 33.1707 5.774C33.7647 5.774 34.2927 5.89867 34.7547 6.148C35.2167 6.39733 35.5761 6.753 35.8327 7.215C36.0967 7.677 36.2287 8.216 36.2287 8.832ZM34.3037 8.337C34.3037 8.01433 34.1937 7.75767 33.9737 7.567C33.7537 7.37633 33.4787 7.281 33.1487 7.281C32.8334 7.281 32.5657 7.37267 32.3457 7.556C32.1331 7.73933 32.0011 7.99967 31.9497 8.337H34.3037ZM36.8471 8.92C36.8471 8.28933 36.9644 7.73567 37.1991 7.259C37.4411 6.78233 37.7674 6.41567 38.1781 6.159C38.5887 5.90233 39.0471 5.774 39.5531 5.774C39.9564 5.774 40.3231 5.85833 40.6531 6.027C40.9904 6.19567 41.2544 6.423 41.4451 6.709V3.86H43.3261V12H41.4451V11.12C41.2691 11.4133 41.0161 11.648 40.6861 11.824C40.3634 12 39.9857 12.088 39.5531 12.088C39.0471 12.088 38.5887 11.9597 38.1781 11.703C37.7674 11.439 37.4411 11.0687 37.1991 10.592C36.9644 10.108 36.8471 9.55067 36.8471 8.92ZM41.4451 8.931C41.4451 8.46167 41.3131 8.09133 41.0491 7.82C40.7924 7.54867 40.4771 7.413 40.1031 7.413C39.7291 7.413 39.4101 7.54867 39.1461 7.82C38.8894 8.084 38.7611 8.45067 38.7611 8.92C38.7611 9.38933 38.8894 9.76333 39.1461 10.042C39.4101 10.3133 39.7291 10.449 40.1031 10.449C40.4771 10.449 40.7924 10.3133 41.0491 10.042C41.3131 9.77067 41.4451 9.40033 41.4451 8.931ZM51.6929 8.04C52.1403 8.13533 52.4996 8.359 52.7709 8.711C53.0423 9.05567 53.1779 9.45167 53.1779 9.899C53.1779 10.5443 52.9506 11.0577 52.4959 11.439C52.0486 11.813 51.4216 12 50.6149 12H47.0179V4.278H50.4939C51.2786 4.278 51.8909 4.45767 52.3309 4.817C52.7783 5.17633 53.0019 5.664 53.0019 6.28C53.0019 6.73467 52.8809 7.11233 52.6389 7.413C52.4043 7.71367 52.0889 7.92267 51.6929 8.04ZM48.8989 7.402H50.1309C50.4389 7.402 50.6736 7.336 50.8349 7.204C51.0036 7.06467 51.0879 6.863 51.0879 6.599C51.0879 6.335 51.0036 6.13333 50.8349 5.994C50.6736 5.85467 50.4389 5.785 50.1309 5.785H48.8989V7.402ZM50.2849 10.482C50.6003 10.482 50.8423 10.4123 51.0109 10.273C51.1869 10.1263 51.2749 9.91733 51.2749 9.646C51.2749 9.37467 51.1833 9.162 50.9999 9.008C50.8239 8.854 50.5783 8.777 50.2629 8.777H48.8989V10.482H50.2849ZM60.0549 8.832C60.0549 9.008 60.0439 9.19133 60.0219 9.382H55.7649C55.7942 9.76333 55.9152 10.0567 56.1279 10.262C56.3479 10.46 56.6156 10.559 56.9309 10.559C57.4002 10.559 57.7266 10.361 57.9099 9.965H59.9119C59.8092 10.3683 59.6222 10.7313 59.3509 11.054C59.0869 11.3767 58.7532 11.6297 58.3499 11.813C57.9466 11.9963 57.4956 12.088 56.9969 12.088C56.3956 12.088 55.8602 11.9597 55.3909 11.703C54.9216 11.4463 54.5549 11.0797 54.2909 10.603C54.0269 10.1263 53.8949 9.569 53.8949 8.931C53.8949 8.293 54.0232 7.73567 54.2799 7.259C54.5439 6.78233 54.9106 6.41567 55.3799 6.159C55.8492 5.90233 56.3882 5.774 56.9969 5.774C57.5909 5.774 58.1189 5.89867 58.5809 6.148C59.0429 6.39733 59.4022 6.753 59.6589 7.215C59.9229 7.677 60.0549 8.216 60.0549 8.832ZM58.1299 8.337C58.1299 8.01433 58.0199 7.75767 57.7999 7.567C57.5799 7.37633 57.3049 7.281 56.9749 7.281C56.6596 7.281 56.3919 7.37267 56.1719 7.556C55.9592 7.73933 55.8272 7.99967 55.7759 8.337H58.1299ZM64.4682 10.405V12H63.5112C62.8292 12 62.2976 11.835 61.9162 11.505C61.5349 11.1677 61.3442 10.6213 61.3442 9.866V7.424H60.5962V5.862H61.3442V4.366H63.2252V5.862H64.4572V7.424H63.2252V9.888C63.2252 10.0713 63.2692 10.2033 63.3572 10.284C63.4452 10.3647 63.5919 10.405 63.7972 10.405H64.4682ZM65.142 8.92C65.142 8.28933 65.2593 7.73567 65.494 7.259C65.736 6.78233 66.0623 6.41567 66.473 6.159C66.8837 5.90233 67.342 5.774 67.848 5.774C68.2807 5.774 68.6583 5.862 68.981 6.038C69.311 6.214 69.564 6.445 69.74 6.731V5.862H71.621V12H69.74V11.131C69.5567 11.417 69.3 11.648 68.97 11.824C68.6473 12 68.2697 12.088 67.837 12.088C67.3383 12.088 66.8837 11.9597 66.473 11.703C66.0623 11.439 65.736 11.0687 65.494 10.592C65.2593 10.108 65.142 9.55067 65.142 8.92ZM69.74 8.931C69.74 8.46167 69.608 8.09133 69.344 7.82C69.0873 7.54867 68.772 7.413 68.398 7.413C68.024 7.413 67.705 7.54867 67.441 7.82C67.1843 8.084 67.056 8.45067 67.056 8.92C67.056 9.38933 67.1843 9.76333 67.441 10.042C67.705 10.3133 68.024 10.449 68.398 10.449C68.772 10.449 69.0873 10.3133 69.344 10.042C69.608 9.77067 69.74 9.40033 69.74 8.931Z"
-              fill="white"
-            />
-            <defs>
-              <linearGradient
-                id="paint0_linear_7476_130"
-                x1="0"
-                y1="0"
-                x2="6.17502"
-                y2="30.1821"
-                gradientUnits="userSpaceOnUse"
-              >
-                <stop stopColor="#0077FF" />
-                <stop offset="1" stopColor="#5CBB65" />
-              </linearGradient>
-            </defs>
-          </svg>
-        ) : (
-          <svg
-            className={className}
-            width="36"
-            height="16"
-            viewBox="0 0 36 16"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect
-              width="36"
-              height="16"
-              rx="4"
-              fill="url(#paint0_linear_2922_39675)"
-            />
-            <path
-              d="M10.357 8.04C10.8043 8.13533 11.1637 8.359 11.435 8.711C11.7063 9.05567 11.842 9.45167 11.842 9.899C11.842 10.5443 11.6147 11.0577 11.16 11.439C10.7127 11.813 10.0857 12 9.279 12H5.682V4.278H9.158C9.94267 4.278 10.555 4.45767 10.995 4.817C11.4423 5.17633 11.666 5.664 11.666 6.28C11.666 6.73467 11.545 7.11233 11.303 7.413C11.0683 7.71367 10.753 7.92267 10.357 8.04ZM7.563 7.402H8.795C9.103 7.402 9.33767 7.336 9.499 7.204C9.66767 7.06467 9.752 6.863 9.752 6.599C9.752 6.335 9.66767 6.13333 9.499 5.994C9.33767 5.85467 9.103 5.785 8.795 5.785H7.563V7.402ZM8.949 10.482C9.26433 10.482 9.50633 10.4123 9.675 10.273C9.851 10.1263 9.939 9.91733 9.939 9.646C9.939 9.37467 9.84733 9.162 9.664 9.008C9.488 8.854 9.24233 8.777 8.927 8.777H7.563V10.482H8.949ZM18.719 8.832C18.719 9.008 18.708 9.19133 18.686 9.382H14.429C14.4583 9.76333 14.5793 10.0567 14.792 10.262C15.012 10.46 15.2796 10.559 15.595 10.559C16.0643 10.559 16.3906 10.361 16.574 9.965H18.576C18.4733 10.3683 18.2863 10.7313 18.015 11.054C17.751 11.3767 17.4173 11.6297 17.014 11.813C16.6106 11.9963 16.1596 12.088 15.661 12.088C15.0596 12.088 14.5243 11.9597 14.055 11.703C13.5856 11.4463 13.219 11.0797 12.955 10.603C12.691 10.1263 12.559 9.569 12.559 8.931C12.559 8.293 12.6873 7.73567 12.944 7.259C13.208 6.78233 13.5746 6.41567 14.044 6.159C14.5133 5.90233 15.0523 5.774 15.661 5.774C16.255 5.774 16.783 5.89867 17.245 6.148C17.707 6.39733 18.0663 6.753 18.323 7.215C18.587 7.677 18.719 8.216 18.719 8.832ZM16.794 8.337C16.794 8.01433 16.684 7.75767 16.464 7.567C16.244 7.37633 15.969 7.281 15.639 7.281C15.3236 7.281 15.056 7.37267 14.836 7.556C14.6233 7.73933 14.4913 7.99967 14.44 8.337H16.794ZM23.1323 10.405V12H22.1753C21.4933 12 20.9616 11.835 20.5803 11.505C20.199 11.1677 20.0083 10.6213 20.0083 9.866V7.424H19.2603V5.862H20.0083V4.366H21.8893V5.862H23.1213V7.424H21.8893V9.888C21.8893 10.0713 21.9333 10.2033 22.0213 10.284C22.1093 10.3647 22.256 10.405 22.4613 10.405H23.1323ZM23.806 8.92C23.806 8.28933 23.9234 7.73567 24.158 7.259C24.4 6.78233 24.7264 6.41567 25.137 6.159C25.5477 5.90233 26.006 5.774 26.512 5.774C26.9447 5.774 27.3224 5.862 27.645 6.038C27.975 6.214 28.228 6.445 28.404 6.731V5.862H30.285V12H28.404V11.131C28.2207 11.417 27.964 11.648 27.634 11.824C27.3114 12 26.9337 12.088 26.501 12.088C26.0024 12.088 25.5477 11.9597 25.137 11.703C24.7264 11.439 24.4 11.0687 24.158 10.592C23.9234 10.108 23.806 9.55067 23.806 8.92ZM28.404 8.931C28.404 8.46167 28.272 8.09133 28.008 7.82C27.7514 7.54867 27.436 7.413 27.062 7.413C26.688 7.413 26.369 7.54867 26.105 7.82C25.8484 8.084 25.72 8.45067 25.72 8.92C25.72 9.38933 25.8484 9.76333 26.105 10.042C26.369 10.3133 26.688 10.449 27.062 10.449C27.436 10.449 27.7514 10.3133 28.008 10.042C28.272 9.77067 28.404 9.40033 28.404 8.931Z"
-              fill="white"
-            />
-            <defs>
-              <linearGradient
-                id="paint0_linear_2922_39675"
-                x1="-7.625"
-                y1="-2.70364"
-                x2="6.88516"
-                y2="28.8617"
-                gradientUnits="userSpaceOnUse"
-              >
-                <stop stopColor="#0077FF" />
-                <stop offset="0.275098" stopColor="#7434F8" />
-                <stop offset="0.461172" stopColor="#9024F6" />
-                <stop offset="0.621185" stopColor="#A62DD1" />
-                <stop offset="1" stopColor="#F54C4C" />
-              </linearGradient>
-            </defs>
-          </svg>
-        )
-      }
-    />
-  );
-};
+import React from 'react';
+import { Tooltip } from '../../';
+
+interface PopoverBetaProps {
+  description: string;
+  placement?:
+    | 'bottom-end'
+    | 'bottom-start'
+    | 'bottom'
+    | 'left-end'
+    | 'left-start'
+    | 'left'
+    | 'right-end'
+    | 'right-start'
+    | 'right'
+    | 'top-end'
+    | 'top-start'
+    | 'top';
+  className?: string;
+  isCloseBeta?: boolean;
+}
+
+export const PopoverBeta = ({
+  description,
+  placement = 'right',
+  className,
+  isCloseBeta = false,
+}: PopoverBetaProps) => {
+  return (
+    <Tooltip
+      arrow
+      placement={placement}
+      tooltipDescription={description}
+      children={
+        isCloseBeta ? (
+          <svg
+            width="78"
+            height="16"
+            viewBox="0 0 78 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect
+              width="78"
+              height="16"
+              rx="4"
+              fill="url(#paint0_linear_7476_130)"
+            />
+            <path
+              d="M5.363 8.128C5.363 7.36533 5.528 6.687 5.858 6.093C6.188 5.49167 6.64633 5.026 7.233 4.696C7.827 4.35867 8.498 4.19 9.246 4.19C10.1627 4.19 10.9473 4.432 11.6 4.916C12.2527 5.4 12.689 6.06 12.909 6.896H10.841C10.687 6.57333 10.467 6.32767 10.181 6.159C9.90233 5.99033 9.58333 5.906 9.224 5.906C8.64467 5.906 8.17533 6.10767 7.816 6.511C7.45667 6.91433 7.277 7.45333 7.277 8.128C7.277 8.80267 7.45667 9.34167 7.816 9.745C8.17533 10.1483 8.64467 10.35 9.224 10.35C9.58333 10.35 9.90233 10.2657 10.181 10.097C10.467 9.92833 10.687 9.68267 10.841 9.36H12.909C12.689 10.196 12.2527 10.856 11.6 11.34C10.9473 11.8167 10.1627 12.055 9.246 12.055C8.498 12.055 7.827 11.89 7.233 11.56C6.64633 11.2227 6.188 10.757 5.858 10.163C5.528 9.569 5.363 8.89067 5.363 8.128ZM15.9419 3.86V12H14.0609V3.86H15.9419ZM20.099 12.088C19.4977 12.088 18.955 11.9597 18.471 11.703C17.9944 11.4463 17.6167 11.0797 17.338 10.603C17.0667 10.1263 16.931 9.569 16.931 8.931C16.931 8.30033 17.0704 7.74667 17.349 7.27C17.6277 6.786 18.009 6.41567 18.493 6.159C18.977 5.90233 19.5197 5.774 20.121 5.774C20.7224 5.774 21.265 5.90233 21.749 6.159C22.233 6.41567 22.6144 6.786 22.893 7.27C23.1717 7.74667 23.311 8.30033 23.311 8.931C23.311 9.56167 23.168 10.119 22.882 10.603C22.6034 11.0797 22.2184 11.4463 21.727 11.703C21.243 11.9597 20.7004 12.088 20.099 12.088ZM20.099 10.46C20.4584 10.46 20.7627 10.328 21.012 10.064C21.2687 9.8 21.397 9.42233 21.397 8.931C21.397 8.43967 21.2724 8.062 21.023 7.798C20.781 7.534 20.4804 7.402 20.121 7.402C19.7544 7.402 19.45 7.534 19.208 7.798C18.966 8.05467 18.845 8.43233 18.845 8.931C18.845 9.42233 18.9624 9.8 19.197 10.064C19.439 10.328 19.7397 10.46 20.099 10.46ZM26.806 12.088C26.2706 12.088 25.794 11.9963 25.376 11.813C24.958 11.6297 24.628 11.3803 24.386 11.065C24.144 10.7423 24.0083 10.383 23.979 9.987H25.838C25.86 10.1997 25.959 10.372 26.135 10.504C26.311 10.636 26.5273 10.702 26.784 10.702C27.0186 10.702 27.1983 10.658 27.323 10.57C27.455 10.4747 27.521 10.3537 27.521 10.207C27.521 10.031 27.4293 9.90267 27.246 9.822C27.0626 9.734 26.7656 9.63867 26.355 9.536C25.915 9.43333 25.5483 9.327 25.255 9.217C24.9616 9.09967 24.7086 8.92 24.496 8.678C24.2833 8.42867 24.177 8.095 24.177 7.677C24.177 7.325 24.2723 7.006 24.463 6.72C24.661 6.42667 24.947 6.19567 25.321 6.027C25.7023 5.85833 26.1533 5.774 26.674 5.774C27.444 5.774 28.049 5.96467 28.489 6.346C28.9363 6.72733 29.193 7.23333 29.259 7.864H27.521C27.4916 7.65133 27.3963 7.48267 27.235 7.358C27.081 7.23333 26.8756 7.171 26.619 7.171C26.399 7.171 26.2303 7.215 26.113 7.303C25.9956 7.38367 25.937 7.49733 25.937 7.644C25.937 7.82 26.0286 7.952 26.212 8.04C26.4026 8.128 26.696 8.216 27.092 8.304C27.5466 8.42133 27.917 8.53867 28.203 8.656C28.489 8.766 28.7383 8.94933 28.951 9.206C29.171 9.45533 29.2846 9.79267 29.292 10.218C29.292 10.5773 29.1893 10.9 28.984 11.186C28.786 11.4647 28.4963 11.6847 28.115 11.846C27.741 12.0073 27.3046 12.088 26.806 12.088ZM36.2287 8.832C36.2287 9.008 36.2177 9.19133 36.1957 9.382H31.9387C31.9681 9.76333 32.0891 10.0567 32.3017 10.262C32.5217 10.46 32.7894 10.559 33.1047 10.559C33.5741 10.559 33.9004 10.361 34.0837 9.965H36.0857C35.9831 10.3683 35.7961 10.7313 35.5247 11.054C35.2607 11.3767 34.9271 11.6297 34.5237 11.813C34.1204 11.9963 33.6694 12.088 33.1707 12.088C32.5694 12.088 32.0341 11.9597 31.5647 11.703C31.0954 11.4463 30.7287 11.0797 30.4647 10.603C30.2007 10.1263 30.0687 9.569 30.0687 8.931C30.0687 8.293 30.1971 7.73567 30.4537 7.259C30.7177 6.78233 31.0844 6.41567 31.5537 6.159C32.0231 5.90233 32.5621 5.774 33.1707 5.774C33.7647 5.774 34.2927 5.89867 34.7547 6.148C35.2167 6.39733 35.5761 6.753 35.8327 7.215C36.0967 7.677 36.2287 8.216 36.2287 8.832ZM34.3037 8.337C34.3037 8.01433 34.1937 7.75767 33.9737 7.567C33.7537 7.37633 33.4787 7.281 33.1487 7.281C32.8334 7.281 32.5657 7.37267 32.3457 7.556C32.1331 7.73933 32.0011 7.99967 31.9497 8.337H34.3037ZM36.8471 8.92C36.8471 8.28933 36.9644 7.73567 37.1991 7.259C37.4411 6.78233 37.7674 6.41567 38.1781 6.159C38.5887 5.90233 39.0471 5.774 39.5531 5.774C39.9564 5.774 40.3231 5.85833 40.6531 6.027C40.9904 6.19567 41.2544 6.423 41.4451 6.709V3.86H43.3261V12H41.4451V11.12C41.2691 11.4133 41.0161 11.648 40.6861 11.824C40.3634 12 39.9857 12.088 39.5531 12.088C39.0471 12.088 38.5887 11.9597 38.1781 11.703C37.7674 11.439 37.4411 11.0687 37.1991 10.592C36.9644 10.108 36.8471 9.55067 36.8471 8.92ZM41.4451 8.931C41.4451 8.46167 41.3131 8.09133 41.0491 7.82C40.7924 7.54867 40.4771 7.413 40.1031 7.413C39.7291 7.413 39.4101 7.54867 39.1461 7.82C38.8894 8.084 38.7611 8.45067 38.7611 8.92C38.7611 9.38933 38.8894 9.76333 39.1461 10.042C39.4101 10.3133 39.7291 10.449 40.1031 10.449C40.4771 10.449 40.7924 10.3133 41.0491 10.042C41.3131 9.77067 41.4451 9.40033 41.4451 8.931ZM51.6929 8.04C52.1403 8.13533 52.4996 8.359 52.7709 8.711C53.0423 9.05567 53.1779 9.45167 53.1779 9.899C53.1779 10.5443 52.9506 11.0577 52.4959 11.439C52.0486 11.813 51.4216 12 50.6149 12H47.0179V4.278H50.4939C51.2786 4.278 51.8909 4.45767 52.3309 4.817C52.7783 5.17633 53.0019 5.664 53.0019 6.28C53.0019 6.73467 52.8809 7.11233 52.6389 7.413C52.4043 7.71367 52.0889 7.92267 51.6929 8.04ZM48.8989 7.402H50.1309C50.4389 7.402 50.6736 7.336 50.8349 7.204C51.0036 7.06467 51.0879 6.863 51.0879 6.599C51.0879 6.335 51.0036 6.13333 50.8349 5.994C50.6736 5.85467 50.4389 5.785 50.1309 5.785H48.8989V7.402ZM50.2849 10.482C50.6003 10.482 50.8423 10.4123 51.0109 10.273C51.1869 10.1263 51.2749 9.91733 51.2749 9.646C51.2749 9.37467 51.1833 9.162 50.9999 9.008C50.8239 8.854 50.5783 8.777 50.2629 8.777H48.8989V10.482H50.2849ZM60.0549 8.832C60.0549 9.008 60.0439 9.19133 60.0219 9.382H55.7649C55.7942 9.76333 55.9152 10.0567 56.1279 10.262C56.3479 10.46 56.6156 10.559 56.9309 10.559C57.4002 10.559 57.7266 10.361 57.9099 9.965H59.9119C59.8092 10.3683 59.6222 10.7313 59.3509 11.054C59.0869 11.3767 58.7532 11.6297 58.3499 11.813C57.9466 11.9963 57.4956 12.088 56.9969 12.088C56.3956 12.088 55.8602 11.9597 55.3909 11.703C54.9216 11.4463 54.5549 11.0797 54.2909 10.603C54.0269 10.1263 53.8949 9.569 53.8949 8.931C53.8949 8.293 54.0232 7.73567 54.2799 7.259C54.5439 6.78233 54.9106 6.41567 55.3799 6.159C55.8492 5.90233 56.3882 5.774 56.9969 5.774C57.5909 5.774 58.1189 5.89867 58.5809 6.148C59.0429 6.39733 59.4022 6.753 59.6589 7.215C59.9229 7.677 60.0549 8.216 60.0549 8.832ZM58.1299 8.337C58.1299 8.01433 58.0199 7.75767 57.7999 7.567C57.5799 7.37633 57.3049 7.281 56.9749 7.281C56.6596 7.281 56.3919 7.37267 56.1719 7.556C55.9592 7.73933 55.8272 7.99967 55.7759 8.337H58.1299ZM64.4682 10.405V12H63.5112C62.8292 12 62.2976 11.835 61.9162 11.505C61.5349 11.1677 61.3442 10.6213 61.3442 9.866V7.424H60.5962V5.862H61.3442V4.366H63.2252V5.862H64.4572V7.424H63.2252V9.888C63.2252 10.0713 63.2692 10.2033 63.3572 10.284C63.4452 10.3647 63.5919 10.405 63.7972 10.405H64.4682ZM65.142 8.92C65.142 8.28933 65.2593 7.73567 65.494 7.259C65.736 6.78233 66.0623 6.41567 66.473 6.159C66.8837 5.90233 67.342 5.774 67.848 5.774C68.2807 5.774 68.6583 5.862 68.981 6.038C69.311 6.214 69.564 6.445 69.74 6.731V5.862H71.621V12H69.74V11.131C69.5567 11.417 69.3 11.648 68.97 11.824C68.6473 12 68.2697 12.088 67.837 12.088C67.3383 12.088 66.8837 11.9597 66.473 11.703C66.0623 11.439 65.736 11.0687 65.494 10.592C65.2593 10.108 65.142 9.55067 65.142 8.92ZM69.74 8.931C69.74 8.46167 69.608 8.09133 69.344 7.82C69.0873 7.54867 68.772 7.413 68.398 7.413C68.024 7.413 67.705 7.54867 67.441 7.82C67.1843 8.084 67.056 8.45067 67.056 8.92C67.056 9.38933 67.1843 9.76333 67.441 10.042C67.705 10.3133 68.024 10.449 68.398 10.449C68.772 10.449 69.0873 10.3133 69.344 10.042C69.608 9.77067 69.74 9.40033 69.74 8.931Z"
+              fill="white"
+            />
+            <defs>
+              <linearGradient
+                id="paint0_linear_7476_130"
+                x1="0"
+                y1="0"
+                x2="6.17502"
+                y2="30.1821"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stopColor="#0077FF" />
+                <stop offset="1" stopColor="#5CBB65" />
+              </linearGradient>
+            </defs>
+          </svg>
+        ) : (
+          <svg
+            className={className}
+            width="36"
+            height="16"
+            viewBox="0 0 36 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect
+              width="36"
+              height="16"
+              rx="4"
+              fill="url(#paint0_linear_2922_39675)"
+            />
+            <path
+              d="M10.357 8.04C10.8043 8.13533 11.1637 8.359 11.435 8.711C11.7063 9.05567 11.842 9.45167 11.842 9.899C11.842 10.5443 11.6147 11.0577 11.16 11.439C10.7127 11.813 10.0857 12 9.279 12H5.682V4.278H9.158C9.94267 4.278 10.555 4.45767 10.995 4.817C11.4423 5.17633 11.666 5.664 11.666 6.28C11.666 6.73467 11.545 7.11233 11.303 7.413C11.0683 7.71367 10.753 7.92267 10.357 8.04ZM7.563 7.402H8.795C9.103 7.402 9.33767 7.336 9.499 7.204C9.66767 7.06467 9.752 6.863 9.752 6.599C9.752 6.335 9.66767 6.13333 9.499 5.994C9.33767 5.85467 9.103 5.785 8.795 5.785H7.563V7.402ZM8.949 10.482C9.26433 10.482 9.50633 10.4123 9.675 10.273C9.851 10.1263 9.939 9.91733 9.939 9.646C9.939 9.37467 9.84733 9.162 9.664 9.008C9.488 8.854 9.24233 8.777 8.927 8.777H7.563V10.482H8.949ZM18.719 8.832C18.719 9.008 18.708 9.19133 18.686 9.382H14.429C14.4583 9.76333 14.5793 10.0567 14.792 10.262C15.012 10.46 15.2796 10.559 15.595 10.559C16.0643 10.559 16.3906 10.361 16.574 9.965H18.576C18.4733 10.3683 18.2863 10.7313 18.015 11.054C17.751 11.3767 17.4173 11.6297 17.014 11.813C16.6106 11.9963 16.1596 12.088 15.661 12.088C15.0596 12.088 14.5243 11.9597 14.055 11.703C13.5856 11.4463 13.219 11.0797 12.955 10.603C12.691 10.1263 12.559 9.569 12.559 8.931C12.559 8.293 12.6873 7.73567 12.944 7.259C13.208 6.78233 13.5746 6.41567 14.044 6.159C14.5133 5.90233 15.0523 5.774 15.661 5.774C16.255 5.774 16.783 5.89867 17.245 6.148C17.707 6.39733 18.0663 6.753 18.323 7.215C18.587 7.677 18.719 8.216 18.719 8.832ZM16.794 8.337C16.794 8.01433 16.684 7.75767 16.464 7.567C16.244 7.37633 15.969 7.281 15.639 7.281C15.3236 7.281 15.056 7.37267 14.836 7.556C14.6233 7.73933 14.4913 7.99967 14.44 8.337H16.794ZM23.1323 10.405V12H22.1753C21.4933 12 20.9616 11.835 20.5803 11.505C20.199 11.1677 20.0083 10.6213 20.0083 9.866V7.424H19.2603V5.862H20.0083V4.366H21.8893V5.862H23.1213V7.424H21.8893V9.888C21.8893 10.0713 21.9333 10.2033 22.0213 10.284C22.1093 10.3647 22.256 10.405 22.4613 10.405H23.1323ZM23.806 8.92C23.806 8.28933 23.9234 7.73567 24.158 7.259C24.4 6.78233 24.7264 6.41567 25.137 6.159C25.5477 5.90233 26.006 5.774 26.512 5.774C26.9447 5.774 27.3224 5.862 27.645 6.038C27.975 6.214 28.228 6.445 28.404 6.731V5.862H30.285V12H28.404V11.131C28.2207 11.417 27.964 11.648 27.634 11.824C27.3114 12 26.9337 12.088 26.501 12.088C26.0024 12.088 25.5477 11.9597 25.137 11.703C24.7264 11.439 24.4 11.0687 24.158 10.592C23.9234 10.108 23.806 9.55067 23.806 8.92ZM28.404 8.931C28.404 8.46167 28.272 8.09133 28.008 7.82C27.7514 7.54867 27.436 7.413 27.062 7.413C26.688 7.413 26.369 7.54867 26.105 7.82C25.8484 8.084 25.72 8.45067 25.72 8.92C25.72 9.38933 25.8484 9.76333 26.105 10.042C26.369 10.3133 26.688 10.449 27.062 10.449C27.436 10.449 27.7514 10.3133 28.008 10.042C28.272 9.77067 28.404 9.40033 28.404 8.931Z"
+              fill="white"
+            />
+            <defs>
+              <linearGradient
+                id="paint0_linear_2922_39675"
+                x1="-7.625"
+                y1="-2.70364"
+                x2="6.88516"
+                y2="28.8617"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stopColor="#0077FF" />
+                <stop offset="0.275098" stopColor="#7434F8" />
+                <stop offset="0.461172" stopColor="#9024F6" />
+                <stop offset="0.621185" stopColor="#A62DD1" />
+                <stop offset="1" stopColor="#F54C4C" />
+              </linearGradient>
+            </defs>
+          </svg>
+        )
+      }
+    />
+  );
+};

package/src/Atoms/QuestionButton/QuestionButton.module.scss

@@ -1,30 +1,30 @@
-.QuestionButtonContainer {
-  border-radius: 0.5rem;
-  display: flex;
-  border-radius: 8px;
-  border: 1px solid var(--Color-Primary-300, #66ADFF);
-  background: var(--Color-Primary-50, #F2F8FF);
-  padding: 0.5rem 1rem;
-  align-items: flex-start;
-  cursor: pointer;
-
-  .QuestionButtonText {
-    color: var(--Color-Primary-600, #005FCC);
-    font-family: 'Poppins';
-    font-size: 16px;
-  }
-
-  &:hover {
-    box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
-.QuestionButtonContainerSelected {
-  border: 1px solid var(--Color-Primary-300, #66ADFF) !important;
-  background: var(--Color-Primary-500, #07F) !important;
-
-  .QuestionButtonText {
-    color: var(--Color-Neutral-Basics-White, #FFF);
-    font-family: 'Poppins';
-  }
+.QuestionButtonContainer {
+  border-radius: 0.5rem;
+  display: flex;
+  border-radius: 8px;
+  border: 1px solid var(--Color-Primary-300, #66ADFF);
+  background: var(--Color-Primary-50, #F2F8FF);
+  padding: 0.5rem 1rem;
+  align-items: flex-start;
+  cursor: pointer;
+
+  .QuestionButtonText {
+    color: var(--Color-Primary-600, #005FCC);
+    font-family: 'Poppins';
+    font-size: 16px;
+  }
+
+  &:hover {
+    box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.QuestionButtonContainerSelected {
+  border: 1px solid var(--Color-Primary-300, #66ADFF) !important;
+  background: var(--Color-Primary-500, #07F) !important;
+
+  .QuestionButtonText {
+    color: var(--Color-Neutral-Basics-White, #FFF);
+    font-family: 'Poppins';
+  }
 }

package/src/Atoms/QuestionButton/QuestionButton.tsx

@@ -1,26 +1,26 @@
-import React, { HTMLAttributes } from 'react';
-import styles from './QuestionButton.module.scss';
-
-interface QuestionButtonProps extends HTMLAttributes<HTMLParagraphElement> {
-  /** Text display */
-  text: string;
-  onClick: () => void;
-  clicked?: boolean;
-}
-
-/** This text should be use to display basic text
- * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=52-751&mode=dev
- */
-export const QuestionButton = ({
-  text,
-  onClick,
-  clicked = true,
-}: QuestionButtonProps) => {
-  return (
-    <div onClick={onClick} className={`${styles.QuestionButtonContainer} ${clicked ? styles.QuestionButtonContainerSelected : ''}`}>
-      <div className={styles.QuestionButtonText}>
-        {text}
-      </div>
-    </div>
-  );
-};
+import React, { HTMLAttributes } from 'react';
+import styles from './QuestionButton.module.scss';
+
+interface QuestionButtonProps extends HTMLAttributes<HTMLParagraphElement> {
+  /** Text display */
+  text: string;
+  onClick: () => void;
+  clicked?: boolean;
+}
+
+/** This text should be use to display basic text
+ * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=52-751&mode=dev
+ */
+export const QuestionButton = ({
+  text,
+  onClick,
+  clicked = true,
+}: QuestionButtonProps) => {
+  return (
+    <div onClick={onClick} className={`${styles.QuestionButtonContainer} ${clicked ? styles.QuestionButtonContainerSelected : ''}`}>
+      <div className={styles.QuestionButtonText}>
+        {text}
+      </div>
+    </div>
+  );
+};

package/src/Atoms/Radio/Radio.module.scss

@@ -1,9 +1,9 @@
-.radioBtnWrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  .MuiRadio-root {
-    height: 16px;
-    width: 16px;
-  }
-}
+.radioBtnWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .MuiRadio-root {
+    height: 16px;
+    width: 16px;
+  }
+}

package/src/Atoms/Radio/Radio.tsx

@@ -1,89 +1,89 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import { Radio as MuiRadio } from '@mui/material';
-import { Text } from '../../';
-import styles from './Radio.module.scss';
-
-const BpIcon = styled('span')(() => ({
-  borderRadius: '50%',
-  width: '1rem',
-  height: '1rem',
-  border: '1px solid #A6A29E',
-  backgroundColor: '#f5f8fa',
-  backgroundImage:
-    'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
-  '.Mui-focusVisible &': {
-    outline: '2px auto #0077FF !important',
-    outlineOffset: 2,
-  },
-  'input:disabled ~ &': {
-    border: `1px solid #E1E1E2`,
-    background: '#FFFFFF',
-    cursor: 'not-allowed',
-  },
-}));
-
-const BpCheckedIcon = styled(BpIcon)({
-  backgroundColor: '#0077FF',
-  border: 'none',
-  width: '1.1rem',
-  height: '1.1rem',
-  backgroundImage:
-    'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
-    display: 'block',
-    width: '1.1rem',
-    height: '1.1rem',
-    backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
-    content: '""',
-  },
-  'input:disabled ~ &': {
-    border: `1px solid #96989A`,
-    background: '#96989A',
-    cursor: 'not-allowed',
-  },
-});
-
-interface RadioProps {
-  label?: string;
-  leftLabel?: string;
-  onChange?: () => void;
-  onBlur?: () => void;
-  checked: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  value?: any;
-  name?: string;
-  className?: string;
-}
-
-export const Radio = ({
-  label,
-  checked,
-  disabled,
-  onChange,
-  required,
-  value,
-  leftLabel,
-  name,
-  className,
-}: RadioProps) => {
-  return (
-    <div className={`${styles.radioBtnWrapper} ${className}`}>
-      {leftLabel && <Text text={leftLabel} size="sm" />}
-      <MuiRadio
-        disableRipple
-        color="default"
-        checkedIcon={<BpCheckedIcon />}
-        icon={<BpIcon />}
-        checked={checked}
-        disabled={disabled}
-        onChange={onChange}
-        required={required}
-        value={value}
-        name={name}
-      />
-      {label && <Text text={label} size="sm" />}
-    </div>
-  );
-};
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { Radio as MuiRadio } from '@mui/material';
+import { Text } from '../../';
+import styles from './Radio.module.scss';
+
+const BpIcon = styled('span')(() => ({
+  borderRadius: '50%',
+  width: '1rem',
+  height: '1rem',
+  border: '1px solid #A6A29E',
+  backgroundColor: '#f5f8fa',
+  backgroundImage:
+    'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
+  '.Mui-focusVisible &': {
+    outline: '2px auto #0077FF !important',
+    outlineOffset: 2,
+  },
+  'input:disabled ~ &': {
+    border: `1px solid #E1E1E2`,
+    background: '#FFFFFF',
+    cursor: 'not-allowed',
+  },
+}));
+
+const BpCheckedIcon = styled(BpIcon)({
+  backgroundColor: '#0077FF',
+  border: 'none',
+  width: '1.1rem',
+  height: '1.1rem',
+  backgroundImage:
+    'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+  '&:before': {
+    display: 'block',
+    width: '1.1rem',
+    height: '1.1rem',
+    backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
+    content: '""',
+  },
+  'input:disabled ~ &': {
+    border: `1px solid #96989A`,
+    background: '#96989A',
+    cursor: 'not-allowed',
+  },
+});
+
+interface RadioProps {
+  label?: string;
+  leftLabel?: string;
+  onChange?: () => void;
+  onBlur?: () => void;
+  checked: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  value?: any;
+  name?: string;
+  className?: string;
+}
+
+export const Radio = ({
+  label,
+  checked,
+  disabled,
+  onChange,
+  required,
+  value,
+  leftLabel,
+  name,
+  className,
+}: RadioProps) => {
+  return (
+    <div className={`${styles.radioBtnWrapper} ${className}`}>
+      {leftLabel && <Text text={leftLabel} size="sm" />}
+      <MuiRadio
+        disableRipple
+        color="default"
+        checkedIcon={<BpCheckedIcon />}
+        icon={<BpIcon />}
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+        required={required}
+        value={value}
+        name={name}
+      />
+      {label && <Text text={label} size="sm" />}
+    </div>
+  );
+};

package/src/Atoms/Search/Search.tsx

@@ -1,32 +1,32 @@
-import React from 'react';
-import { TextInput, SearchCircledIcon } from '../../';
-
-interface SearchProps {
-  searchInput: string | number;
-  placeholder?: string;
-  id?: string;
-  onChange: (e: any) => void;
-}
-
-export const Search = ({
-  searchInput,
-  onChange,
-  placeholder,
-  id,
-}: SearchProps) => {
-  return (
-    <TextInput
-      value={searchInput}
-      placeholder={placeholder ?? 'Search'}
-      rightIcon={
-        <SearchCircledIcon
-          fill="black"
-          stroke="black"
-          style={{ height: '1rem', width: '1rem' }}
-        />
-      }
-      onChange={onChange}
-      id={id}
-    />
-  );
-};
+import React from 'react';
+import { TextInput, SearchCircledIcon } from '../../';
+
+interface SearchProps {
+  searchInput: string | number;
+  placeholder?: string;
+  id?: string;
+  onChange: (e: any) => void;
+}
+
+export const Search = ({
+  searchInput,
+  onChange,
+  placeholder,
+  id,
+}: SearchProps) => {
+  return (
+    <TextInput
+      value={searchInput}
+      placeholder={placeholder ?? 'Search'}
+      rightIcon={
+        <SearchCircledIcon
+          fill="black"
+          stroke="black"
+          style={{ height: '1rem', width: '1rem' }}
+        />
+      }
+      onChange={onChange}
+      id={id}
+    />
+  );
+};

package/src/Atoms/SquareText/SquareText.module.scss

@@ -1,8 +1,8 @@
-.SquareTextContainer {
-  display: flex;
-  padding: 0.75rem;
-  gap: 0.5rem;
-  border-radius: 0.5rem;
-  border: 1px solid var(--Color-Neutral-Clear-Shades-400, #AFB0B2);
-  background: var(--Color-Neutral-Basics-White, #FFF);
+.SquareTextContainer {
+  display: flex;
+  padding: 0.75rem;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--Color-Neutral-Clear-Shades-400, #AFB0B2);
+  background: var(--Color-Neutral-Basics-White, #FFF);
 }