@spaced-out/ui-design-system 0.1.1 → 0.1.3

package/.cspell/custom-words.txt

@@ -12,12 +12,17 @@ eqeqeq
 Fennimore
 flowtype
 fontawesome
+framename
 Gaurav
+innerref
 Lipsey
 Neue
 Nishant
+nofollow
 nonbreaking
 nonstrict
+noopener
+noreferrer
 OPACITYS
 partialformat
 premajor

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.3](https://github.com/spaced-out/ui-design-system/compare/v0.1.2...v0.1.3) (2023-04-03)
+
+
+### Features
+
+* generate a new component with forward ref ([8f9ab59](https://github.com/spaced-out/ui-design-system/commit/8f9ab597781c645b3a9df908e0f05d2707783b2f))
+* link text component ([c38e447](https://github.com/spaced-out/ui-design-system/commit/c38e4475881ba734a3eb9749715642a29e1e8072))
+
+
+### Bug Fixes
+
+* added link docs ([a62ecde](https://github.com/spaced-out/ui-design-system/commit/a62ecde6eb105bcab98438e1f4e6a07ca930b2ea))
+* added tooltip example on secondary button in modal ([f5de89d](https://github.com/spaced-out/ui-design-system/commit/f5de89ded339f5d84b13b78d73c142a0a8a3eb4b))
+* btn dropdown stories fix ([b74a546](https://github.com/spaced-out/ui-design-system/commit/b74a5469ccd4b880492c2b34f1ae452f2271268b))
+* initial focus in modal story ([922d860](https://github.com/spaced-out/ui-design-system/commit/922d8601dfb9ae1360ee3983f8567135d059494e))
+* svg fixes ([49b0f53](https://github.com/spaced-out/ui-design-system/commit/49b0f5384b59940244eb4c5dd3f514e1089bb9d3))
+
+### [0.1.2](https://github.com/spaced-out/ui-design-system/compare/v0.1.1...v0.1.2) (2023-03-31)
+
+
+### Bug Fixes
+
+* tooltip elevation fixes ([09fd443](https://github.com/spaced-out/ui-design-system/commit/09fd44388a30d4a5753c5cb30bcc8f8e8b564d46))
+
 ### [0.1.1](https://github.com/spaced-out/ui-design-system/compare/v0.1.0...v0.1.1) (2023-03-31)
 
 

package/design-tokens/elevation/app-elevation.json

@@ -17,6 +17,9 @@
     },
     "toast": {
       "value": "{baseElevation.60.value}"
+    },
+    "tooltip": {
+      "value": "{baseElevation.4.value}"
     }
   }
 }

package/lib/components/ErrorMessage/ErrorImages/ForbiddenImage.js

@@ -21,14 +21,14 @@ const ForbiddenImage = () => /*#__PURE__*/React.createElement("svg", {
   d: "M117.737 39.1648V98.0025C117.737 99.7288 116.299 101.167 114.572 101.167H25.1649C23.4386 101.239 22 99.8007 22 98.0744V39.1648C22 37.3666 23.4386 36 25.1649 36H114.572C116.37 36 117.737 37.4385 117.737 39.1648Z",
   fill: "white",
   stroke: "#D3D2E0",
-  "stroke-width": "2",
-  "stroke-miterlimit": "10"
+  strokeWidth: "2",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M117.737 39.1648V43.6963H22V39.1648C22 37.3666 23.4386 36 25.1649 36H114.572C116.37 36 117.737 37.4385 117.737 39.1648Z",
   fill: "#F1F1F5",
   stroke: "#D3D2E0",
-  "stroke-width": "2",
-  "stroke-miterlimit": "10"
+  strokeWidth: "2",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M26.2438 41.1789C26.8397 41.1789 27.3227 40.6958 27.3227 40.1C27.3227 39.5041 26.8397 39.021 26.2438 39.021C25.6479 39.021 25.1649 39.5041 25.1649 40.1C25.1649 40.6958 25.6479 41.1789 26.2438 41.1789Z",
   fill: "#66658D"
@@ -60,18 +60,18 @@ const ForbiddenImage = () => /*#__PURE__*/React.createElement("svg", {
   d: "M81.7221 100.285H59.7106C57.2856 100.285 55.327 98.3226 55.327 95.8925V65.3287C55.327 56.8231 62.2289 50 70.6231 50C79.0173 50 85.9193 56.9166 85.9193 65.3287V95.9859C86.0125 98.3226 84.0539 100.285 81.7221 100.285ZM64.0943 91.593H77.3385V65.3287C77.3385 61.6834 74.3539 58.6925 70.7164 58.6925C67.0789 58.6925 64.0943 61.6834 64.0943 65.3287V91.593Z",
   fill: "#E6E5EF",
   stroke: "#D3D2E0",
-  "stroke-width": "2",
-  "stroke-miterlimit": "10"
+  strokeWidth: "2",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M90.7692 108.604H50.9433C48.2385 108.604 46 106.361 46 103.65V77.1989C46 74.4884 48.2385 72.2451 50.9433 72.2451H90.7692C93.4741 72.2451 95.7125 74.4884 95.7125 77.1989V103.65C95.7125 106.361 93.4741 108.604 90.7692 108.604Z",
   fill: "white",
   stroke: "#D3D2E0",
-  "stroke-width": "2",
-  "stroke-miterlimit": "10"
+  strokeWidth: "2",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M73.7556 91.2576C75.1014 90.3226 76.013 88.7548 76.013 86.9541C76.013 84.0636 73.6991 81.7418 70.8096 81.7418C67.9202 81.7418 65.6063 84.0636 65.6063 86.9541C65.6063 88.7548 66.5179 90.3226 67.8637 91.2576V95.2226C67.8637 96.8649 69.1656 98.1727 70.8096 98.1727C72.4537 98.1727 73.7556 96.8649 73.7556 95.2226V91.2576Z",
   fill: "#F1F1F5",
   stroke: "#D3D2E0",
-  "stroke-width": "2"
+  strokeWidth: "2"
 }));
 exports.ForbiddenImage = ForbiddenImage;

package/lib/components/ErrorMessage/ErrorImages/ForbiddenImage.js.flow

@@ -19,15 +19,15 @@ export const ForbiddenImage = (): React.Node => (
       d="M117.737 39.1648V98.0025C117.737 99.7288 116.299 101.167 114.572 101.167H25.1649C23.4386 101.239 22 99.8007 22 98.0744V39.1648C22 37.3666 23.4386 36 25.1649 36H114.572C116.37 36 117.737 37.4385 117.737 39.1648Z"
       fill="white"
       stroke="#D3D2E0"
-      stroke-width="2"
-      stroke-miterlimit="10"
+      strokeWidth="2"
+      strokeMiterlimit="10"
     />
     <path
       d="M117.737 39.1648V43.6963H22V39.1648C22 37.3666 23.4386 36 25.1649 36H114.572C116.37 36 117.737 37.4385 117.737 39.1648Z"
       fill="#F1F1F5"
       stroke="#D3D2E0"
-      stroke-width="2"
-      stroke-miterlimit="10"
+      strokeWidth="2"
+      strokeMiterlimit="10"
     />
     <path
       d="M26.2438 41.1789C26.8397 41.1789 27.3227 40.6958 27.3227 40.1C27.3227 39.5041 26.8397 39.021 26.2438 39.021C25.6479 39.021 25.1649 39.5041 25.1649 40.1C25.1649 40.6958 25.6479 41.1789 26.2438 41.1789Z"
@@ -69,21 +69,21 @@ export const ForbiddenImage = (): React.Node => (
       d="M81.7221 100.285H59.7106C57.2856 100.285 55.327 98.3226 55.327 95.8925V65.3287C55.327 56.8231 62.2289 50 70.6231 50C79.0173 50 85.9193 56.9166 85.9193 65.3287V95.9859C86.0125 98.3226 84.0539 100.285 81.7221 100.285ZM64.0943 91.593H77.3385V65.3287C77.3385 61.6834 74.3539 58.6925 70.7164 58.6925C67.0789 58.6925 64.0943 61.6834 64.0943 65.3287V91.593Z"
       fill="#E6E5EF"
       stroke="#D3D2E0"
-      stroke-width="2"
-      stroke-miterlimit="10"
+      strokeWidth="2"
+      strokeMiterlimit="10"
     />
     <path
       d="M90.7692 108.604H50.9433C48.2385 108.604 46 106.361 46 103.65V77.1989C46 74.4884 48.2385 72.2451 50.9433 72.2451H90.7692C93.4741 72.2451 95.7125 74.4884 95.7125 77.1989V103.65C95.7125 106.361 93.4741 108.604 90.7692 108.604Z"
       fill="white"
       stroke="#D3D2E0"
-      stroke-width="2"
-      stroke-miterlimit="10"
+      strokeWidth="2"
+      strokeMiterlimit="10"
     />
     <path
       d="M73.7556 91.2576C75.1014 90.3226 76.013 88.7548 76.013 86.9541C76.013 84.0636 73.6991 81.7418 70.8096 81.7418C67.9202 81.7418 65.6063 84.0636 65.6063 86.9541C65.6063 88.7548 66.5179 90.3226 67.8637 91.2576V95.2226C67.8637 96.8649 69.1656 98.1727 70.8096 98.1727C72.4537 98.1727 73.7556 96.8649 73.7556 95.2226V91.2576Z"
       fill="#F1F1F5"
       stroke="#D3D2E0"
-      stroke-width="2"
+      strokeWidth="2"
     />
   </svg>
 );

package/lib/components/ErrorMessage/ErrorImages/NotFoundImage.js

@@ -18,8 +18,8 @@ const NotFoundImage = () => /*#__PURE__*/React.createElement("svg", {
   d: "M98.6144 41.3329C98.6144 51.4876 90.5389 59.8847 80.4937 60.4706C80.0994 60.4706 79.7055 60.4706 79.3115 60.4706C75.9631 60.4706 72.6146 59.4941 69.8571 57.9319C63.948 54.6121 60.0087 48.3631 60.0087 41.1376C60.0087 36.2556 61.7813 31.7641 64.9329 28.4443C68.4783 24.5387 73.5994 22 79.3115 22C86.7961 22 93.296 26.2962 96.448 32.5453C97.8261 35.2791 98.6144 38.2084 98.6144 41.3329Z",
   fill: "#F1F1F5",
   stroke: "#D3D2E0",
-  "stroke-width": "1.6185",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.6185",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   opacity: "0.1",
   d: "M98.4453 41.333C98.4453 51.4876 90.3698 59.8848 80.324 60.4706C76.5817 59.8848 73.0363 58.9083 69.6877 58.1273C63.7788 54.8074 59.8394 48.5584 59.8394 41.333C59.8394 36.4509 61.6121 31.9595 64.7636 28.6396C71.2635 28.4444 78.7483 29.0302 86.4304 30.3971C89.9757 30.983 93.3236 31.7641 96.4756 32.5453C97.6571 35.2793 98.4453 38.2085 98.4453 41.333Z",
@@ -28,8 +28,8 @@ const NotFoundImage = () => /*#__PURE__*/React.createElement("svg", {
   d: "M121.996 54.2571C123.483 45.9751 105.154 35.8147 81.0569 31.5632C56.9605 27.3117 36.2211 30.5791 34.7345 38.8611C33.248 47.1431 51.5771 57.3036 75.6738 61.555C99.7708 65.8065 120.509 62.5391 121.996 54.2571Z",
   fill: "#F1F1F5",
   stroke: "#D3D2E0",
-  "stroke-width": "1.6185",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.6185",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M74.9142 36.2923C75.0239 34.8945 72.8268 33.5851 70.0069 33.3677C67.1871 33.1503 64.8122 34.1073 64.7027 35.5052C64.593 36.9031 66.7901 38.2124 69.6099 38.4298C72.4298 38.6472 74.8046 37.6902 74.9142 36.2923Z",
   fill: "#E6E5EF"
@@ -46,8 +46,8 @@ const NotFoundImage = () => /*#__PURE__*/React.createElement("svg", {
   d: "M114.709 118.008H19.9669C22.5275 115.713 26.2699 113.418 30.6032 111.696C32.9669 110.836 35.7244 109.689 38.482 109.115C46.7546 106.82 56.7999 105.386 67.4362 105.386C80.2392 105.386 92.057 107.393 101.118 110.549C104.269 111.696 107.026 112.844 109.39 114.279C111.557 115.425 113.33 116.573 114.709 118.008Z",
   fill: "#F1F1F5",
   stroke: "#D3D2E0",
-  "stroke-width": "1.6185",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.6185",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M39.4375 111.487C39.5616 112.652 37.5312 114.047 35.1809 114.297C32.8306 114.547 30.7686 113.785 30.4486 112.641C32.7368 111.808 35.3962 110.739 38.0968 110.059C38.9217 110.364 39.3754 110.904 39.4375 111.487Z",
   fill: "#E6E5EF"
@@ -64,8 +64,8 @@ const NotFoundImage = () => /*#__PURE__*/React.createElement("svg", {
   d: "M96.6705 55.4708C97.3373 51.7545 89.0223 47.1794 78.0986 45.2521C67.1748 43.3247 57.7785 44.775 57.1115 48.4912C56.4444 52.2075 64.7592 56.7826 75.683 58.7099C86.6067 60.6373 96.0029 59.187 96.6705 55.4708Z",
   fill: "#9F9FBC",
   stroke: "#D3D2E0",
-  "stroke-width": "1.6185",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.6185",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M25.9393 73.4683C25.9393 73.4683 19.1354 75.1958 21.1972 76.5777C23.259 77.8906 28.1385 80.1709 32.7431 78.6507C37.3478 77.1305 32.7431 74.9884 32.8119 74.9884C32.8806 74.9884 25.9393 73.4683 25.9393 73.4683Z",
   fill: "#E6E5EF"
@@ -75,10 +75,10 @@ const NotFoundImage = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M138 118.008H132.093H9.6315H2",
   stroke: "#D3D2E0",
-  "stroke-width": "1.6185",
-  "stroke-miterlimit": "10",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
+  strokeWidth: "1.6185",
+  strokeMiterlimit: "10",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M74.8776 48.037L58.0795 48L30 117.873L104 129L95.58 56L74.8776 48.037Z",
   fill: "url(#paint0_linear_1872_702)"
@@ -96,10 +96,10 @@ const NotFoundImage = () => /*#__PURE__*/React.createElement("svg", {
   y2: "96.4599",
   gradientUnits: "userSpaceOnUse"
 }, /*#__PURE__*/React.createElement("stop", {
-  "stop-color": "#9F9FBC"
+  stopColor: "#9F9FBC"
 }), /*#__PURE__*/React.createElement("stop", {
   offset: "1",
-  "stop-color": "#D3D2E0",
-  "stop-opacity": "0"
+  stopColor: "#D3D2E0",
+  stopOpacity: "0"
 }))));
 exports.NotFoundImage = NotFoundImage;

package/lib/components/ErrorMessage/ErrorImages/NotFoundImage.js.flow

@@ -15,8 +15,8 @@ export const NotFoundImage = (): React.Node => (
       d="M98.6144 41.3329C98.6144 51.4876 90.5389 59.8847 80.4937 60.4706C80.0994 60.4706 79.7055 60.4706 79.3115 60.4706C75.9631 60.4706 72.6146 59.4941 69.8571 57.9319C63.948 54.6121 60.0087 48.3631 60.0087 41.1376C60.0087 36.2556 61.7813 31.7641 64.9329 28.4443C68.4783 24.5387 73.5994 22 79.3115 22C86.7961 22 93.296 26.2962 96.448 32.5453C97.8261 35.2791 98.6144 38.2084 98.6144 41.3329Z"
       fill="#F1F1F5"
       stroke="#D3D2E0"
-      stroke-width="1.6185"
-      stroke-miterlimit="10"
+      strokeWidth="1.6185"
+      strokeMiterlimit="10"
     />
     <path
       opacity="0.1"
@@ -27,8 +27,8 @@ export const NotFoundImage = (): React.Node => (
       d="M121.996 54.2571C123.483 45.9751 105.154 35.8147 81.0569 31.5632C56.9605 27.3117 36.2211 30.5791 34.7345 38.8611C33.248 47.1431 51.5771 57.3036 75.6738 61.555C99.7708 65.8065 120.509 62.5391 121.996 54.2571Z"
       fill="#F1F1F5"
       stroke="#D3D2E0"
-      stroke-width="1.6185"
-      stroke-miterlimit="10"
+      strokeWidth="1.6185"
+      strokeMiterlimit="10"
     />
     <path
       d="M74.9142 36.2923C75.0239 34.8945 72.8268 33.5851 70.0069 33.3677C67.1871 33.1503 64.8122 34.1073 64.7027 35.5052C64.593 36.9031 66.7901 38.2124 69.6099 38.4298C72.4298 38.6472 74.8046 37.6902 74.9142 36.2923Z"
@@ -50,8 +50,8 @@ export const NotFoundImage = (): React.Node => (
       d="M114.709 118.008H19.9669C22.5275 115.713 26.2699 113.418 30.6032 111.696C32.9669 110.836 35.7244 109.689 38.482 109.115C46.7546 106.82 56.7999 105.386 67.4362 105.386C80.2392 105.386 92.057 107.393 101.118 110.549C104.269 111.696 107.026 112.844 109.39 114.279C111.557 115.425 113.33 116.573 114.709 118.008Z"
       fill="#F1F1F5"
       stroke="#D3D2E0"
-      stroke-width="1.6185"
-      stroke-miterlimit="10"
+      strokeWidth="1.6185"
+      strokeMiterlimit="10"
     />
     <path
       d="M39.4375 111.487C39.5616 112.652 37.5312 114.047 35.1809 114.297C32.8306 114.547 30.7686 113.785 30.4486 112.641C32.7368 111.808 35.3962 110.739 38.0968 110.059C38.9217 110.364 39.3754 110.904 39.4375 111.487Z"
@@ -73,8 +73,8 @@ export const NotFoundImage = (): React.Node => (
       d="M96.6705 55.4708C97.3373 51.7545 89.0223 47.1794 78.0986 45.2521C67.1748 43.3247 57.7785 44.775 57.1115 48.4912C56.4444 52.2075 64.7592 56.7826 75.683 58.7099C86.6067 60.6373 96.0029 59.187 96.6705 55.4708Z"
       fill="#9F9FBC"
       stroke="#D3D2E0"
-      stroke-width="1.6185"
-      stroke-miterlimit="10"
+      strokeWidth="1.6185"
+      strokeMiterlimit="10"
     />
     <path
       d="M25.9393 73.4683C25.9393 73.4683 19.1354 75.1958 21.1972 76.5777C23.259 77.8906 28.1385 80.1709 32.7431 78.6507C37.3478 77.1305 32.7431 74.9884 32.8119 74.9884C32.8806 74.9884 25.9393 73.4683 25.9393 73.4683Z"
@@ -87,10 +87,10 @@ export const NotFoundImage = (): React.Node => (
     <path
       d="M138 118.008H132.093H9.6315H2"
       stroke="#D3D2E0"
-      stroke-width="1.6185"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.6185"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M74.8776 48.037L58.0795 48L30 117.873L104 129L95.58 56L74.8776 48.037Z"
@@ -113,8 +113,8 @@ export const NotFoundImage = (): React.Node => (
         y2="96.4599"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stop-color="#9F9FBC" />
-        <stop offset="1" stop-color="#D3D2E0" stop-opacity="0" />
+        <stop stopColor="#9F9FBC" />
+        <stop offset="1" stopColor="#D3D2E0" stopOpacity="0" />
       </linearGradient>
     </defs>
   </svg>

package/lib/components/ErrorMessage/ErrorImages/ServerErrorImage.js

@@ -17,17 +17,17 @@ const ServerErrorImage = () => /*#__PURE__*/React.createElement("svg", {
 }, /*#__PURE__*/React.createElement("path", {
   d: "M43.9012 110.079H123.265",
   stroke: "#D3D2E0",
-  "stroke-width": "1.62134",
-  "stroke-miterlimit": "10",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
+  strokeWidth: "1.62134",
+  strokeMiterlimit: "10",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M131.016 110.079H138.875",
   stroke: "#D3D2E0",
-  "stroke-width": "1.62134",
-  "stroke-miterlimit": "10",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
+  strokeWidth: "1.62134",
+  strokeMiterlimit: "10",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M45.6402 104.05C48.0578 104.05 50.0177 102.09 50.0177 99.6716C50.0177 97.2542 48.0578 95.2942 45.6402 95.2942C43.2224 95.2942 41.2626 97.2542 41.2626 99.6716C41.2626 102.09 43.2224 104.05 45.6402 104.05Z",
   fill: "#9F9FBC"
@@ -35,21 +35,21 @@ const ServerErrorImage = () => /*#__PURE__*/React.createElement("svg", {
   d: "M88.4976 85.8364C88.5513 92.7542 89.146 101.51 89.3621 102.428C89.3077 103.401 87.2546 106.482 85.5787 104.374C83.9035 102.266 80.4986 97.7262 82.0658 89.1876C83.6336 80.7026 88.4976 85.8364 88.4976 85.8364Z",
   fill: "#E6E5EF",
   stroke: "#D3D2E0",
-  "stroke-width": "1.08089",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.08089",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M45.0457 103.996C45.0457 104.049 45.0457 104.158 45.0998 104.212C45.0998 104.266 45.1538 104.374 45.1538 104.428C45.2079 104.482 45.2079 104.59 45.2619 104.644C45.3159 104.698 45.37 104.752 45.4241 104.86C45.6943 105.239 46.1807 105.563 46.7211 105.887C46.8292 105.941 46.9913 105.995 47.0994 106.049C47.1535 106.103 47.2616 106.103 47.3156 106.157C47.3696 106.211 47.4778 106.211 47.5318 106.266L47.748 106.319C48.0182 106.427 48.3424 106.536 48.6667 106.59C48.8288 106.644 48.937 106.644 49.0991 106.698C49.2072 106.698 49.3152 106.752 49.4774 106.752C49.5855 106.752 49.6936 106.806 49.8016 106.806C50.6664 106.914 51.477 106.86 52.1796 106.59C54.6116 105.671 55.5844 103.779 55.5844 103.779C55.5844 103.779 56.2329 103.941 57.2598 104.05C59.2054 104.32 62.4481 104.698 65.2584 104.428C66.1771 104.32 67.1499 104.104 68.1766 103.833C68.5008 103.725 68.825 103.617 69.2035 103.509C69.8519 103.293 70.4465 103.023 71.0949 102.753C72.8245 101.996 74.4461 100.969 75.7971 99.8344C75.9589 99.7263 76.1213 99.5639 76.2837 99.4558C77.0401 98.7531 77.6885 97.9967 78.1751 97.2403C79.1476 95.5644 80.445 94.1596 81.8497 92.8085C83.9579 90.8084 86.4439 89.0795 88.7138 87.2418C89.4165 86.7015 90.1186 86.1069 90.7676 85.5666C92.8751 83.7289 94.7664 81.5671 96.0638 79.0811C97.4686 76.3789 97.4686 73.8385 97.2525 70.8666C97.2525 70.7042 96.9283 68.7584 97.0363 68.7047C98.0095 68.0564 98.7116 67.1373 99.0901 66.0024C99.9546 63.7325 99.6304 60.8141 98.6035 58.9225C98.4955 58.7064 98.3874 58.4902 98.2794 58.3281C97.1988 56.4365 95.9014 54.2206 94.4423 52.7615L91.7945 50.1133H68.7713C68.7713 50.1133 68.5008 51.6806 68.1229 53.6262C68.0686 53.7883 68.0686 53.9504 68.0149 54.1126C67.9606 54.4368 67.9066 54.7611 67.7984 55.0854C67.7444 55.2475 67.7444 55.4096 67.6904 55.5718C67.6904 55.6258 67.6904 55.6258 67.6363 55.6799C67.5822 56.0582 67.4742 56.3824 67.4202 56.7608C67.204 57.8417 66.9337 58.8145 66.6095 59.6251C66.6095 59.6792 66.5554 59.7873 66.5554 59.8413C66.3933 60.2737 66.2312 60.652 66.069 60.9222C64.7719 63.0299 58.1785 69.0826 53.5848 72.4875C48.991 75.8923 46.8833 81.6751 45.6943 91.0252C44.3431 100.32 44.8295 102.212 45.0457 103.996Z",
   fill: "white",
   stroke: "#D3D2E0",
-  "stroke-width": "1.08089",
-  "stroke-miterlimit": "10",
-  "stroke-linejoin": "round"
+  strokeWidth: "1.08089",
+  strokeMiterlimit: "10",
+  strokeLinejoin: "round"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M86.552 101.455C89.6327 101.131 89.5783 101.455 91.3079 101.455C93.0375 101.455 93.4698 102.32 94.1181 103.131C94.4967 103.671 95.0369 105.239 95.3611 106.373C95.5772 107.022 95.0906 107.616 94.4423 107.671C92.4965 107.671 88.9836 107.725 88.3897 107.671C87.5245 107.563 85.6868 107.346 84.8767 105.995C84.6063 105.509 84.4438 104.86 84.2821 104.212C84.066 102.969 84.8767 101.726 86.1734 101.564L86.552 101.455Z",
   fill: "white",
   stroke: "#D3D2E0",
-  "stroke-width": "1.08089",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.08089",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   opacity: "0.3",
   d: "M45.0457 103.996C45.2079 105.779 49.6395 107.454 52.0715 106.536C54.5575 105.617 55.4763 103.725 55.4763 103.725C55.4763 103.725 60.8267 104.806 65.1502 104.428C68.3927 104.104 72.7708 102.212 75.6347 99.7799L75.2568 91.5654C75.2568 91.5654 74.932 84.3771 74.6078 81.2428C74.338 78.1084 76.824 78.1621 76.7159 74.1089C76.5535 70.0557 78.1751 62.8676 80.2825 56.2743L72.9325 50.7617L67.9065 53.6261C67.4201 56.3283 66.6094 59.7331 65.9069 60.9761C64.6098 63.0838 58.0164 69.1369 53.4226 72.5417C48.8288 75.9466 46.7211 81.7294 45.5321 91.0788C44.3431 100.32 44.8295 102.212 45.0457 103.996Z",
@@ -65,39 +65,39 @@ const ServerErrorImage = () => /*#__PURE__*/React.createElement("svg", {
   d: "M70.717 102.752C73.797 102.374 73.7434 102.752 75.473 102.752C77.2019 102.752 77.6348 103.671 78.2832 104.536C78.6617 105.076 79.202 106.806 79.5262 108.049C79.7423 108.751 79.2557 109.4 78.6073 109.4C76.6616 109.4 72.3379 109.346 71.7439 109.292C70.8788 109.184 69.8519 109.022 69.0955 107.562C68.825 107.022 68.6633 106.319 68.5008 105.617C68.2847 104.266 69.0955 102.969 70.3929 102.752H70.717Z",
   fill: "white",
   stroke: "#D3D2E0",
-  "stroke-width": "1.08089",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.08089",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M56.6652 103.671C58.0704 104.536 58.8811 106.59 59.3134 108.049C59.5296 108.751 59.0432 109.4 58.3947 109.4C56.4491 109.4 52.1255 109.346 51.5311 109.292C48.1263 108.859 47.7479 105.13 50.3421 103.671C51.9634 102.698 55.044 102.644 56.6652 103.671Z",
   fill: "white",
   stroke: "#D3D2E0",
-  "stroke-width": "1.08089",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.08089",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M94.0902 61.6405C93.6091 62.0914 93.0661 62.4964 92.5156 62.8479C91.7666 63.337 90.9565 63.7802 90.1383 64.1699C87.6312 65.3467 84.9637 66.1641 82.144 66.2937C79.8123 66.4081 77.3364 66.2702 75.0509 65.5591C74.2564 65.345 73.4464 65.0239 72.743 64.6875C68.6925 62.6998 66.3844 61.0639 66.0639 56.5239C65.7435 51.9839 65.9503 48.4605 65.9503 48.4605C65.9503 48.0783 66.3631 47.5281 66.4778 47.1842C66.6918 46.7715 66.8448 46.3129 67.0588 45.9002C67.4334 45.0825 67.8539 44.2035 68.2895 43.4317C69.2531 41.7656 70.4683 40.3365 72.0124 39.2972C74.5038 37.6313 77.5233 36.982 80.481 36.6691C82.6286 36.4171 84.853 36.3181 87.008 36.8839C88.881 37.3809 90.4856 38.2982 91.9223 39.5672C93.4813 40.9279 94.7039 42.6094 96.072 44.1612C96.072 44.1612 97.2565 47.486 98.2189 51.9344C99.1812 56.3828 97.4156 58.5455 94.0902 61.6405Z",
   fill: "white",
   stroke: "#D3D2E0",
-  "stroke-width": "1.08089",
-  "stroke-miterlimit": "10",
-  "stroke-linejoin": "round"
+  strokeWidth: "1.08089",
+  strokeMiterlimit: "10",
+  strokeLinejoin: "round"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M76.107 54.599C75.5416 55.2257 75.0135 57.2663 71.9029 56.5093C67.4857 55.3928 67.1347 49.8745 69.1913 47.8341C72.868 44.1429 77.3004 44.9842 78.523 48.9587C79.7837 53.2008 77.246 53.3991 76.107 54.599Z",
   fill: "#E6E5EF",
   stroke: "#D3D2E0",
-  "stroke-width": "1.08089",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.08089",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M67.4721 41.5284C68.6571 39.8853 70.4071 40.2906 69.803 42.1783C68.8168 45.2125 66.8448 46.695 66.6905 57.8539C66.6444 59.8257 59.9037 55.82 59.6218 48.8724C59.5455 47.5731 61.1124 47.0765 61.1124 47.0765C62.0525 46.7786 65.6069 44.1421 67.4721 41.5284Z",
   fill: "#F1F1F5",
   stroke: "#D3D2E0",
-  "stroke-width": "1.08089",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.08089",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M91.9732 59.8136C92.1642 61.1512 91.9732 62.4886 91.4839 63.6503C90.8342 64.0706 90.1233 64.445 89.4124 64.8194C87.2112 65.8433 84.857 66.5615 82.4722 66.6835C80.4701 66.8055 78.2607 66.6295 76.266 66.0408C75.3492 64.9706 74.7913 63.74 74.5854 62.2954C73.9588 57.9083 77.3609 53.8196 82.1759 53.1323C86.9373 52.4527 91.3473 55.4264 91.9732 59.8136Z",
   fill: "#E6E5EF",
   stroke: "#D3D2E0",
-  "stroke-width": "1.08089",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.08089",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M73.6156 54.3542C75.3588 54.1054 76.5705 52.4904 76.3218 50.747C76.0731 49.0037 74.4576 47.7921 72.7144 48.0409C70.9712 48.2897 69.7595 49.9048 70.0082 51.6481C70.2569 53.3915 71.8724 54.6031 73.6156 54.3542Z",
   fill: "white"
@@ -126,21 +126,21 @@ const ServerErrorImage = () => /*#__PURE__*/React.createElement("svg", {
   d: "M93.0768 37.3278C91.4797 36.0818 89.9126 36.9605 91.0203 38.6039C92.8165 41.241 95.1245 42.1126 98.3941 52.7826C98.9901 54.6629 104.341 48.9313 102.668 42.1823C102.378 40.9135 100.735 40.8751 100.735 40.8751C99.7486 40.8521 95.5989 39.3153 93.0768 37.3278Z",
   fill: "#F1F1F5",
   stroke: "#D3D2E0",
-  "stroke-width": "1.08089",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.08089",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M1.10754 111.292H30.6158C31.5345 111.292 31.6967 112.643 30.7779 112.805C22.4551 114.534 12.4029 115.237 18.1856 118.75C28.0217 124.694 43.3703 127.721 61.6373 124.317C78.0669 121.29 78.283 76.7573 79.0395 64.5433C79.2019 62.3815 80.9852 60.6521 83.147 60.6521H84.5525C86.8217 60.6521 88.7137 62.4896 88.7137 64.7595V72.1095",
   stroke: "#66658D",
-  "stroke-width": "2.16178",
-  "stroke-miterlimit": "10",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
+  strokeWidth: "2.16178",
+  strokeMiterlimit: "10",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M88.9536 61.7182C89.5741 64.3483 87.4333 65.6306 84.5402 66.3131C81.6471 66.9955 79.1591 66.8051 78.5386 64.175C77.9181 61.5449 79.7367 58.895 82.6298 58.2125C85.5223 57.5301 88.3332 59.0882 88.9536 61.7182Z",
   fill: "#E6E5EF",
   stroke: "#D3D2E0",
-  "stroke-width": "1.08089",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.08089",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M86.1735 85.837C85.6332 85.837 85.2009 85.4048 85.2009 84.8638V81.0811C85.2009 80.5408 85.6332 80.1079 86.1735 80.1079C86.7137 80.1079 87.1467 80.5408 87.1467 81.0811V84.8638C87.1467 85.4585 86.7137 85.837 86.1735 85.837Z",
   fill: "#66658D"
@@ -151,20 +151,20 @@ const ServerErrorImage = () => /*#__PURE__*/React.createElement("svg", {
   d: "M93.7395 81.1347H83.7954V79.9998C83.7954 77.244 86.0116 72.488 88.7674 72.488C91.524 72.488 93.7395 77.244 93.7395 79.9998V81.1347Z",
   fill: "#E6E5EF",
   stroke: "#D3D2E0",
-  "stroke-width": "1.08089",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.08089",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M135.732 83.0261H115.249C114.385 83.0261 113.736 82.3241 113.736 81.5133V59.6793C113.736 58.8146 114.438 58.166 115.249 58.166H135.732C136.597 58.166 137.246 58.8686 137.246 59.6793V81.5133C137.299 82.3241 136.597 83.0261 135.732 83.0261Z",
   fill: "#F1F1F5",
   stroke: "#D3D2E0",
-  "stroke-width": "1.08089",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.08089",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M133.192 70.1638C133.192 72.7042 131.949 75.0278 130.057 76.4332H120.816C118.925 75.0278 117.682 72.7579 117.682 70.1638C117.682 67.6238 118.925 65.2999 120.816 63.8948H130.057C131.949 65.354 133.192 67.6238 133.192 70.1638Z",
   fill: "#E6E5EF",
   stroke: "#D3D2E0",
-  "stroke-width": "1.08089",
-  "stroke-miterlimit": "10"
+  strokeWidth: "1.08089",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M122.545 70.596C122.167 70.596 121.843 70.2718 121.843 69.894V67.5698C121.843 67.1914 122.167 66.8672 122.545 66.8672C122.923 66.8672 123.248 67.1914 123.248 67.5698V69.894C123.248 70.2718 122.923 70.596 122.545 70.596Z",
   fill: "#9F9FBC"

package/lib/components/ErrorMessage/ErrorImages/ServerErrorImage.js.flow

@@ -14,18 +14,18 @@ export const ServerErrorImage = (): React.Node => (
     <path
       d="M43.9012 110.079H123.265"
       stroke="#D3D2E0"
-      stroke-width="1.62134"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.62134"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M131.016 110.079H138.875"
       stroke="#D3D2E0"
-      stroke-width="1.62134"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.62134"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M45.6402 104.05C48.0578 104.05 50.0177 102.09 50.0177 99.6716C50.0177 97.2542 48.0578 95.2942 45.6402 95.2942C43.2224 95.2942 41.2626 97.2542 41.2626 99.6716C41.2626 102.09 43.2224 104.05 45.6402 104.05Z"
@@ -35,23 +35,23 @@ export const ServerErrorImage = (): React.Node => (
       d="M88.4976 85.8364C88.5513 92.7542 89.146 101.51 89.3621 102.428C89.3077 103.401 87.2546 106.482 85.5787 104.374C83.9035 102.266 80.4986 97.7262 82.0658 89.1876C83.6336 80.7026 88.4976 85.8364 88.4976 85.8364Z"
       fill="#E6E5EF"
       stroke="#D3D2E0"
-      stroke-width="1.08089"
-      stroke-miterlimit="10"
+      strokeWidth="1.08089"
+      strokeMiterlimit="10"
     />
     <path
       d="M45.0457 103.996C45.0457 104.049 45.0457 104.158 45.0998 104.212C45.0998 104.266 45.1538 104.374 45.1538 104.428C45.2079 104.482 45.2079 104.59 45.2619 104.644C45.3159 104.698 45.37 104.752 45.4241 104.86C45.6943 105.239 46.1807 105.563 46.7211 105.887C46.8292 105.941 46.9913 105.995 47.0994 106.049C47.1535 106.103 47.2616 106.103 47.3156 106.157C47.3696 106.211 47.4778 106.211 47.5318 106.266L47.748 106.319C48.0182 106.427 48.3424 106.536 48.6667 106.59C48.8288 106.644 48.937 106.644 49.0991 106.698C49.2072 106.698 49.3152 106.752 49.4774 106.752C49.5855 106.752 49.6936 106.806 49.8016 106.806C50.6664 106.914 51.477 106.86 52.1796 106.59C54.6116 105.671 55.5844 103.779 55.5844 103.779C55.5844 103.779 56.2329 103.941 57.2598 104.05C59.2054 104.32 62.4481 104.698 65.2584 104.428C66.1771 104.32 67.1499 104.104 68.1766 103.833C68.5008 103.725 68.825 103.617 69.2035 103.509C69.8519 103.293 70.4465 103.023 71.0949 102.753C72.8245 101.996 74.4461 100.969 75.7971 99.8344C75.9589 99.7263 76.1213 99.5639 76.2837 99.4558C77.0401 98.7531 77.6885 97.9967 78.1751 97.2403C79.1476 95.5644 80.445 94.1596 81.8497 92.8085C83.9579 90.8084 86.4439 89.0795 88.7138 87.2418C89.4165 86.7015 90.1186 86.1069 90.7676 85.5666C92.8751 83.7289 94.7664 81.5671 96.0638 79.0811C97.4686 76.3789 97.4686 73.8385 97.2525 70.8666C97.2525 70.7042 96.9283 68.7584 97.0363 68.7047C98.0095 68.0564 98.7116 67.1373 99.0901 66.0024C99.9546 63.7325 99.6304 60.8141 98.6035 58.9225C98.4955 58.7064 98.3874 58.4902 98.2794 58.3281C97.1988 56.4365 95.9014 54.2206 94.4423 52.7615L91.7945 50.1133H68.7713C68.7713 50.1133 68.5008 51.6806 68.1229 53.6262C68.0686 53.7883 68.0686 53.9504 68.0149 54.1126C67.9606 54.4368 67.9066 54.7611 67.7984 55.0854C67.7444 55.2475 67.7444 55.4096 67.6904 55.5718C67.6904 55.6258 67.6904 55.6258 67.6363 55.6799C67.5822 56.0582 67.4742 56.3824 67.4202 56.7608C67.204 57.8417 66.9337 58.8145 66.6095 59.6251C66.6095 59.6792 66.5554 59.7873 66.5554 59.8413C66.3933 60.2737 66.2312 60.652 66.069 60.9222C64.7719 63.0299 58.1785 69.0826 53.5848 72.4875C48.991 75.8923 46.8833 81.6751 45.6943 91.0252C44.3431 100.32 44.8295 102.212 45.0457 103.996Z"
       fill="white"
       stroke="#D3D2E0"
-      stroke-width="1.08089"
-      stroke-miterlimit="10"
-      stroke-linejoin="round"
+      strokeWidth="1.08089"
+      strokeMiterlimit="10"
+      strokeLinejoin="round"
     />
     <path
       d="M86.552 101.455C89.6327 101.131 89.5783 101.455 91.3079 101.455C93.0375 101.455 93.4698 102.32 94.1181 103.131C94.4967 103.671 95.0369 105.239 95.3611 106.373C95.5772 107.022 95.0906 107.616 94.4423 107.671C92.4965 107.671 88.9836 107.725 88.3897 107.671C87.5245 107.563 85.6868 107.346 84.8767 105.995C84.6063 105.509 84.4438 104.86 84.2821 104.212C84.066 102.969 84.8767 101.726 86.1734 101.564L86.552 101.455Z"
       fill="white"
       stroke="#D3D2E0"
-      stroke-width="1.08089"
-      stroke-miterlimit="10"
+      strokeWidth="1.08089"
+      strokeMiterlimit="10"
     />
     <path
       opacity="0.3"
@@ -71,44 +71,44 @@ export const ServerErrorImage = (): React.Node => (
       d="M70.717 102.752C73.797 102.374 73.7434 102.752 75.473 102.752C77.2019 102.752 77.6348 103.671 78.2832 104.536C78.6617 105.076 79.202 106.806 79.5262 108.049C79.7423 108.751 79.2557 109.4 78.6073 109.4C76.6616 109.4 72.3379 109.346 71.7439 109.292C70.8788 109.184 69.8519 109.022 69.0955 107.562C68.825 107.022 68.6633 106.319 68.5008 105.617C68.2847 104.266 69.0955 102.969 70.3929 102.752H70.717Z"
       fill="white"
       stroke="#D3D2E0"
-      stroke-width="1.08089"
-      stroke-miterlimit="10"
+      strokeWidth="1.08089"
+      strokeMiterlimit="10"
     />
     <path
       d="M56.6652 103.671C58.0704 104.536 58.8811 106.59 59.3134 108.049C59.5296 108.751 59.0432 109.4 58.3947 109.4C56.4491 109.4 52.1255 109.346 51.5311 109.292C48.1263 108.859 47.7479 105.13 50.3421 103.671C51.9634 102.698 55.044 102.644 56.6652 103.671Z"
       fill="white"
       stroke="#D3D2E0"
-      stroke-width="1.08089"
-      stroke-miterlimit="10"
+      strokeWidth="1.08089"
+      strokeMiterlimit="10"
     />
     <path
       d="M94.0902 61.6405C93.6091 62.0914 93.0661 62.4964 92.5156 62.8479C91.7666 63.337 90.9565 63.7802 90.1383 64.1699C87.6312 65.3467 84.9637 66.1641 82.144 66.2937C79.8123 66.4081 77.3364 66.2702 75.0509 65.5591C74.2564 65.345 73.4464 65.0239 72.743 64.6875C68.6925 62.6998 66.3844 61.0639 66.0639 56.5239C65.7435 51.9839 65.9503 48.4605 65.9503 48.4605C65.9503 48.0783 66.3631 47.5281 66.4778 47.1842C66.6918 46.7715 66.8448 46.3129 67.0588 45.9002C67.4334 45.0825 67.8539 44.2035 68.2895 43.4317C69.2531 41.7656 70.4683 40.3365 72.0124 39.2972C74.5038 37.6313 77.5233 36.982 80.481 36.6691C82.6286 36.4171 84.853 36.3181 87.008 36.8839C88.881 37.3809 90.4856 38.2982 91.9223 39.5672C93.4813 40.9279 94.7039 42.6094 96.072 44.1612C96.072 44.1612 97.2565 47.486 98.2189 51.9344C99.1812 56.3828 97.4156 58.5455 94.0902 61.6405Z"
       fill="white"
       stroke="#D3D2E0"
-      stroke-width="1.08089"
-      stroke-miterlimit="10"
-      stroke-linejoin="round"
+      strokeWidth="1.08089"
+      strokeMiterlimit="10"
+      strokeLinejoin="round"
     />
     <path
       d="M76.107 54.599C75.5416 55.2257 75.0135 57.2663 71.9029 56.5093C67.4857 55.3928 67.1347 49.8745 69.1913 47.8341C72.868 44.1429 77.3004 44.9842 78.523 48.9587C79.7837 53.2008 77.246 53.3991 76.107 54.599Z"
       fill="#E6E5EF"
       stroke="#D3D2E0"
-      stroke-width="1.08089"
-      stroke-miterlimit="10"
+      strokeWidth="1.08089"
+      strokeMiterlimit="10"
     />
     <path
       d="M67.4721 41.5284C68.6571 39.8853 70.4071 40.2906 69.803 42.1783C68.8168 45.2125 66.8448 46.695 66.6905 57.8539C66.6444 59.8257 59.9037 55.82 59.6218 48.8724C59.5455 47.5731 61.1124 47.0765 61.1124 47.0765C62.0525 46.7786 65.6069 44.1421 67.4721 41.5284Z"
       fill="#F1F1F5"
       stroke="#D3D2E0"
-      stroke-width="1.08089"
-      stroke-miterlimit="10"
+      strokeWidth="1.08089"
+      strokeMiterlimit="10"
     />
     <path
       d="M91.9732 59.8136C92.1642 61.1512 91.9732 62.4886 91.4839 63.6503C90.8342 64.0706 90.1233 64.445 89.4124 64.8194C87.2112 65.8433 84.857 66.5615 82.4722 66.6835C80.4701 66.8055 78.2607 66.6295 76.266 66.0408C75.3492 64.9706 74.7913 63.74 74.5854 62.2954C73.9588 57.9083 77.3609 53.8196 82.1759 53.1323C86.9373 52.4527 91.3473 55.4264 91.9732 59.8136Z"
       fill="#E6E5EF"
       stroke="#D3D2E0"
-      stroke-width="1.08089"
-      stroke-miterlimit="10"
+      strokeWidth="1.08089"
+      strokeMiterlimit="10"
     />
     <path
       d="M73.6156 54.3542C75.3588 54.1054 76.5705 52.4904 76.3218 50.747C76.0731 49.0037 74.4576 47.7921 72.7144 48.0409C70.9712 48.2897 69.7595 49.9048 70.0082 51.6481C70.2569 53.3915 71.8724 54.6031 73.6156 54.3542Z"
@@ -146,23 +146,23 @@ export const ServerErrorImage = (): React.Node => (
       d="M93.0768 37.3278C91.4797 36.0818 89.9126 36.9605 91.0203 38.6039C92.8165 41.241 95.1245 42.1126 98.3941 52.7826C98.9901 54.6629 104.341 48.9313 102.668 42.1823C102.378 40.9135 100.735 40.8751 100.735 40.8751C99.7486 40.8521 95.5989 39.3153 93.0768 37.3278Z"
       fill="#F1F1F5"
       stroke="#D3D2E0"
-      stroke-width="1.08089"
-      stroke-miterlimit="10"
+      strokeWidth="1.08089"
+      strokeMiterlimit="10"
     />
     <path
       d="M1.10754 111.292H30.6158C31.5345 111.292 31.6967 112.643 30.7779 112.805C22.4551 114.534 12.4029 115.237 18.1856 118.75C28.0217 124.694 43.3703 127.721 61.6373 124.317C78.0669 121.29 78.283 76.7573 79.0395 64.5433C79.2019 62.3815 80.9852 60.6521 83.147 60.6521H84.5525C86.8217 60.6521 88.7137 62.4896 88.7137 64.7595V72.1095"
       stroke="#66658D"
-      stroke-width="2.16178"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2.16178"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M88.9536 61.7182C89.5741 64.3483 87.4333 65.6306 84.5402 66.3131C81.6471 66.9955 79.1591 66.8051 78.5386 64.175C77.9181 61.5449 79.7367 58.895 82.6298 58.2125C85.5223 57.5301 88.3332 59.0882 88.9536 61.7182Z"
       fill="#E6E5EF"
       stroke="#D3D2E0"
-      stroke-width="1.08089"
-      stroke-miterlimit="10"
+      strokeWidth="1.08089"
+      strokeMiterlimit="10"
     />
     <path
       d="M86.1735 85.837C85.6332 85.837 85.2009 85.4048 85.2009 84.8638V81.0811C85.2009 80.5408 85.6332 80.1079 86.1735 80.1079C86.7137 80.1079 87.1467 80.5408 87.1467 81.0811V84.8638C87.1467 85.4585 86.7137 85.837 86.1735 85.837Z"
@@ -176,22 +176,22 @@ export const ServerErrorImage = (): React.Node => (
       d="M93.7395 81.1347H83.7954V79.9998C83.7954 77.244 86.0116 72.488 88.7674 72.488C91.524 72.488 93.7395 77.244 93.7395 79.9998V81.1347Z"
       fill="#E6E5EF"
       stroke="#D3D2E0"
-      stroke-width="1.08089"
-      stroke-miterlimit="10"
+      strokeWidth="1.08089"
+      strokeMiterlimit="10"
     />
     <path
       d="M135.732 83.0261H115.249C114.385 83.0261 113.736 82.3241 113.736 81.5133V59.6793C113.736 58.8146 114.438 58.166 115.249 58.166H135.732C136.597 58.166 137.246 58.8686 137.246 59.6793V81.5133C137.299 82.3241 136.597 83.0261 135.732 83.0261Z"
       fill="#F1F1F5"
       stroke="#D3D2E0"
-      stroke-width="1.08089"
-      stroke-miterlimit="10"
+      strokeWidth="1.08089"
+      strokeMiterlimit="10"
     />
     <path
       d="M133.192 70.1638C133.192 72.7042 131.949 75.0278 130.057 76.4332H120.816C118.925 75.0278 117.682 72.7579 117.682 70.1638C117.682 67.6238 118.925 65.2999 120.816 63.8948H130.057C131.949 65.354 133.192 67.6238 133.192 70.1638Z"
       fill="#E6E5EF"
       stroke="#D3D2E0"
-      stroke-width="1.08089"
-      stroke-miterlimit="10"
+      strokeWidth="1.08089"
+      strokeMiterlimit="10"
     />
     <path
       d="M122.545 70.596C122.167 70.596 121.843 70.2718 121.843 69.894V67.5698C121.843 67.1914 122.167 66.8672 122.545 66.8672C122.923 66.8672 123.248 67.1914 123.248 67.5698V69.894C123.248 70.2718 122.923 70.596 122.545 70.596Z"

package/lib/components/ErrorMessage/ErrorImages/UnauthorizedImage.js

@@ -27,14 +27,14 @@ const UnauthorizedImage = () => /*#__PURE__*/React.createElement("svg", {
   d: "M117.737 39.1648V98.0025C117.737 99.7288 116.299 101.167 114.572 101.167H25.1649C23.4386 101.239 22 99.8007 22 98.0744V39.1648C22 37.3666 23.4386 36 25.1649 36H114.572C116.37 36 117.737 37.4385 117.737 39.1648Z",
   fill: "white",
   stroke: "#D3D2E0",
-  "stroke-width": "2",
-  "stroke-miterlimit": "10"
+  strokeWidth: "2",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M117.737 39.1648V43.6963H22V39.1648C22 37.3666 23.4386 36 25.1649 36H114.572C116.37 36 117.737 37.4385 117.737 39.1648Z",
   fill: "#F1F1F5",
   stroke: "#D3D2E0",
-  "stroke-width": "2",
-  "stroke-miterlimit": "10"
+  strokeWidth: "2",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M56.6696 66.4975C58.1395 66.4975 59.331 65.306 59.331 63.8362C59.331 62.3663 58.1395 61.1748 56.6696 61.1748C55.1998 61.1748 54.0083 62.3663 54.0083 63.8362C54.0083 65.306 55.1998 66.4975 56.6696 66.4975Z",
   fill: "#66658D"

package/lib/components/ErrorMessage/ErrorImages/UnauthorizedImage.js.flow

@@ -27,15 +27,15 @@ export const UnauthorizedImage = (): React.Node => (
       d="M117.737 39.1648V98.0025C117.737 99.7288 116.299 101.167 114.572 101.167H25.1649C23.4386 101.239 22 99.8007 22 98.0744V39.1648C22 37.3666 23.4386 36 25.1649 36H114.572C116.37 36 117.737 37.4385 117.737 39.1648Z"
       fill="white"
       stroke="#D3D2E0"
-      stroke-width="2"
-      stroke-miterlimit="10"
+      strokeWidth="2"
+      strokeMiterlimit="10"
     />
     <path
       d="M117.737 39.1648V43.6963H22V39.1648C22 37.3666 23.4386 36 25.1649 36H114.572C116.37 36 117.737 37.4385 117.737 39.1648Z"
       fill="#F1F1F5"
       stroke="#D3D2E0"
-      stroke-width="2"
-      stroke-miterlimit="10"
+      strokeWidth="2"
+      strokeMiterlimit="10"
     />
     <path
       d="M56.6696 66.4975C58.1395 66.4975 59.331 65.306 59.331 63.8362C59.331 62.3663 58.1395 61.1748 56.6696 61.1748C55.1998 61.1748 54.0083 62.3663 54.0083 63.8362C54.0083 65.306 55.1998 66.4975 56.6696 66.4975Z"

package/lib/components/Link/Link.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Link = exports.LINK_AS = exports.ANCHOR_TARGET = exports.ANCHOR_REL = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _typography = require("../../types/typography");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const LINK_AS = Object.freeze({
+  bodyLarge: 'bodyLarge',
+  bodyMedium: 'bodyMedium',
+  bodySmall: 'bodySmall',
+  buttonTextExtraSmall: 'buttonTextExtraSmall',
+  buttonTextMedium: 'buttonTextMedium',
+  buttonTextSmall: 'buttonTextSmall',
+  formInputMedium: 'formInputMedium',
+  formInputSmall: 'formInputSmall',
+  formLabelMedium: 'formLabelMedium',
+  formLabelSmall: 'formLabelSmall',
+  jumboMedium: 'jumboMedium',
+  subTitleExtraSmall: 'subTitleExtraSmall',
+  subTitleLarge: 'subTitleLarge',
+  subTitleMedium: 'subTitleMedium',
+  subTitleSmall: 'subTitleSmall',
+  titleMedium: 'titleMedium'
+});
+exports.LINK_AS = LINK_AS;
+const ANCHOR_REL = Object.freeze({
+  alternate: 'alternate',
+  author: 'author',
+  bookmark: 'bookmark',
+  external: 'external',
+  help: 'help',
+  license: 'license',
+  next: 'next',
+  nofollow: 'nofollow',
+  noopener: 'noopener',
+  noreferrer: 'noreferrer',
+  search: 'search',
+  tag: 'tag'
+});
+exports.ANCHOR_REL = ANCHOR_REL;
+const ANCHOR_TARGET = Object.freeze({
+  _blank: '_blank',
+  _self: '_self',
+  _parent: '_parent',
+  _top: '_top',
+  framename: 'framename'
+});
+exports.ANCHOR_TARGET = ANCHOR_TARGET;
+const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.clickable,
+    children,
+    className,
+    as = 'buttonTextExtraSmall',
+    underline = true,
+    tabIndex = 0,
+    disabled,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
+    tabIndex: tabIndex,
+    innerref: ref,
+    "data-testid": "Link",
+    className: (0, _classify.default)(_typographyModule.default.link, _typographyModule.default[as], _typographyModule.default[color], {
+      [_typographyModule.default.underline]: underline,
+      [_typographyModule.default.disabled]: disabled
+    }, className)
+  }), children);
+});
+exports.Link = Link;

package/lib/components/Link/Link.js.flow

@@ -0,0 +1,111 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {ColorTypes} from '../../types/typography';
+import {TEXT_COLORS} from '../../types/typography';
+import classify from '../../utils/classify';
+
+import css from '../../styles/typography.module.css';
+
+
+export const LINK_AS = Object.freeze({
+  bodyLarge: 'bodyLarge',
+  bodyMedium: 'bodyMedium',
+  bodySmall: 'bodySmall',
+  buttonTextExtraSmall: 'buttonTextExtraSmall',
+  buttonTextMedium: 'buttonTextMedium',
+  buttonTextSmall: 'buttonTextSmall',
+  formInputMedium: 'formInputMedium',
+  formInputSmall: 'formInputSmall',
+  formLabelMedium: 'formLabelMedium',
+  formLabelSmall: 'formLabelSmall',
+  jumboMedium: 'jumboMedium',
+  subTitleExtraSmall: 'subTitleExtraSmall',
+  subTitleLarge: 'subTitleLarge',
+  subTitleMedium: 'subTitleMedium',
+  subTitleSmall: 'subTitleSmall',
+  titleMedium: 'titleMedium',
+});
+
+export type LinkAs = $Values<typeof LINK_AS>;
+
+export const ANCHOR_REL = Object.freeze({
+  alternate: 'alternate',
+  author: 'author',
+  bookmark: 'bookmark',
+  external: 'external',
+  help: 'help',
+  license: 'license',
+  next: 'next',
+  nofollow: 'nofollow',
+  noopener: 'noopener',
+  noreferrer: 'noreferrer',
+  search: 'search',
+  tag: 'tag',
+});
+
+export type AnchorRel = $Values<typeof ANCHOR_REL>;
+
+export const ANCHOR_TARGET = Object.freeze({
+  _blank: '_blank',
+  _self: '_self',
+  _parent: '_parent',
+  _top: '_top',
+  framename: 'framename',
+});
+
+export type AnchorTarget = $Values<typeof ANCHOR_TARGET>;
+
+export type LinkProps = {
+  color?: ColorTypes,
+  children: React.Node,
+  className?: string,
+  as?: LinkAs,
+  rel?: AnchorRel,
+  underline?: boolean,
+  target?: AnchorTarget,
+  href?: string,
+  onClick?: (SyntheticEvent<HTMLElement>) => mixed,
+  tabIndex?: number,
+  disabled?: boolean,
+  ...
+};
+
+export const Link: React$AbstractComponent<
+  LinkProps,
+  React.Element<'a'>,
+> = React.forwardRef<LinkProps, React.Element<'a'>>(
+  (
+    {
+      color = TEXT_COLORS.clickable,
+      children,
+      className,
+      as = 'buttonTextExtraSmall',
+      underline = true,
+      tabIndex = 0,
+      disabled,
+      ...props
+    }: LinkProps,
+    ref,
+  ) => (
+    <a
+      {...props}
+      tabIndex={tabIndex}
+      innerref={ref}
+      data-testid="Link"
+      className={classify(
+        css.link,
+        css[as],
+        css[color],
+        {
+          [css.underline]: underline,
+          [css.disabled]: disabled,
+        },
+        className,
+      )}
+    >
+      {children}
+    </a>
+  ),
+);

package/lib/components/Link/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Link = require("./Link");
+Object.keys(_Link).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Link[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Link[key];
+    }
+  });
+});

package/lib/components/Link/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './Link';

package/lib/components/Tooltip/Tooltip.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Tooltip = exports.DELAY_MOTION_DURATION_TYPES = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
 var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
+var ELEVATION = _interopRequireWildcard(require("../../styles/variables/_elevation"));
 var MOTION = _interopRequireWildcard(require("../../styles/variables/_motion"));
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
@@ -36,8 +38,10 @@ const Tooltip = _ref => {
     placement = 'top',
     bodyMaxLines = 2,
     titleMaxLines = 1,
-    delayMotionDuration = 'none'
+    delayMotionDuration = 'none',
+    elevation = ELEVATION['elevationTooltip']
   } = _ref;
+  const bodyRef = React.useRef(document.querySelector('body'));
   const [open, setOpen] = React.useState(false);
   const {
     x,
@@ -47,7 +51,6 @@ const Tooltip = _ref => {
     strategy,
     context
   } = (0, _reactDomInteractions.useFloating)({
-    strategy: 'fixed',
     placement,
     open,
     onOpenChange: setOpen,
@@ -73,13 +76,14 @@ const Tooltip = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, getReferenceProps({
     ref,
     ...children.props
-  })), open && /*#__PURE__*/React.createElement("div", _extends({
+  })), open && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement("div", _extends({
     ref: floating,
     className: (0, _classify.classify)(_TooltipModule.default.tooltip, classNames?.tooltip),
     style: {
       position: strategy,
       top: y ?? _space.spaceNone,
-      left: x ?? _space.spaceNone
+      left: x ?? _space.spaceNone,
+      '--tooltip-elevation': elevation
     }
   }, getFloatingProps()), !!title && /*#__PURE__*/React.createElement(_Truncate.Truncate, {
     line: titleMaxLines
@@ -89,6 +93,6 @@ const Tooltip = _ref => {
     line: bodyMaxLines
   }, /*#__PURE__*/React.createElement(_Text.BodyMedium, {
     color: !title ? 'inversePrimary' : 'inverseSecondary'
-  }, body))));
+  }, body))), bodyRef.current));
 };
 exports.Tooltip = Tooltip;

package/lib/components/Tooltip/Tooltip.js.flow

@@ -1,6 +1,8 @@
 // @flow strict
 
 import * as React from 'react';
+// $FlowFixMe[untyped-import]
+import {createPortal} from 'react-dom';
 import {
   // $FlowFixMe[untyped-import]
   autoUpdate,
@@ -24,6 +26,7 @@ import {
   useRole,
 } from '@floating-ui/react-dom-interactions';
 
+import * as ELEVATION from '../../styles/variables/_elevation';
 import * as MOTION from '../../styles/variables/_motion';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
@@ -71,6 +74,7 @@ export type TooltipProps = {
   // TODO(Nishant): Decide on a type to use
   // $FlowFixMe
   children: any,
+  elevation?: string,
 };
 
 export const Tooltip = ({
@@ -82,10 +86,11 @@ export const Tooltip = ({
   bodyMaxLines = 2,
   titleMaxLines = 1,
   delayMotionDuration = 'none',
+  elevation = ELEVATION['elevationTooltip'],
 }: TooltipProps): React.Node => {
+  const bodyRef = React.useRef(document.querySelector('body'));
   const [open, setOpen] = React.useState(false);
   const {x, y, reference, floating, strategy, context} = useFloating({
-    strategy: 'fixed',
     placement,
     open,
     onOpenChange: setOpen,
@@ -127,36 +132,39 @@ export const Tooltip = ({
           ...children.props,
         }),
       )}
-      {open && (
-        <div
-          ref={floating}
-          className={classify(css.tooltip, classNames?.tooltip)}
-          style={{
-            position: strategy,
-            top: y ?? spaceNone,
-            left: x ?? spaceNone,
-          }}
-          {...getFloatingProps()}
-        >
-          {!!title && (
-            <Truncate line={titleMaxLines}>
-              <SubTitleExtraSmall color="inversePrimary">
-                {title}
-              </SubTitleExtraSmall>
-            </Truncate>
-          )}
+      {open &&
+        createPortal(
+          <div
+            ref={floating}
+            className={classify(css.tooltip, classNames?.tooltip)}
+            style={{
+              position: strategy,
+              top: y ?? spaceNone,
+              left: x ?? spaceNone,
+              '--tooltip-elevation': elevation,
+            }}
+            {...getFloatingProps()}
+          >
+            {!!title && (
+              <Truncate line={titleMaxLines}>
+                <SubTitleExtraSmall color="inversePrimary">
+                  {title}
+                </SubTitleExtraSmall>
+              </Truncate>
+            )}
 
-          {!!body && (
-            <Truncate line={bodyMaxLines}>
-              <BodyMedium
-                color={!title ? 'inversePrimary' : 'inverseSecondary'}
-              >
-                {body}
-              </BodyMedium>
-            </Truncate>
-          )}
-        </div>
-      )}
+            {!!body && (
+              <Truncate line={bodyMaxLines}>
+                <BodyMedium
+                  color={!title ? 'inversePrimary' : 'inverseSecondary'}
+                >
+                  {body}
+                </BodyMedium>
+              </Truncate>
+            )}
+          </div>,
+          bodyRef.current,
+        )}
     </>
   );
 };

package/lib/components/Tooltip/Tooltip.module.css

@@ -2,8 +2,10 @@
 @value (size300) from '../../styles/variables/_size.css';
 @value (spaceXSmall, spaceSmall, spaceXXSmall) from '../../styles/variables/_space.css';
 @value (borderRadiusSmall) from '../../styles/variables/_border.css';
+@value (elevationTooltip) from '../../styles/variables/_elevation.css';
 
 .tooltip {
+  --tooltip-elevation: elevationTooltip;
   display: flex;
   flex-flow: column;
   max-width: size300;
@@ -13,4 +15,5 @@
   pointer-events: none;
   border-radius: borderRadiusSmall;
   word-wrap: break-word;
+  z-index: var(--tooltip-elevation);
 }

package/lib/styles/typography.module.css

@@ -11,7 +11,8 @@
   colorTextDanger,
   colorTextInversePrimary,
   colorTextInverseSecondary,
-  colorInformationLightest
+  colorInformationLightest,
+  colorFocusPrimary
 ) from 'variables/_color.css';
 
 @value (
@@ -44,6 +45,8 @@
 
 @value (spaceXXSmall, spaceNone) from 'variables/_space.css';
 
+@value (borderWidthNone, borderWidthTertiary, borderRadiusXSmall) from 'variables/_border.css';
+
 .baseType {
   /* Design system uses this font */
   font-family: 'Centra No 2';
@@ -243,3 +246,23 @@
   background-color: colorInformationLightest;
   padding: spaceNone calc(spaceXXSmall / 4);
 }
+
+.link {
+  border-radius: calc(borderRadiusXSmall / 2);
+  cursor: pointer;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.link:focus {
+  outline: none;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+.disabled {
+  pointer-events: none;
+  color: colorTextDisabled;
+}

package/lib/styles/variables/_elevation.css

@@ -9,3 +9,5 @@
 @value elevationModal: 40;
 
 @value elevationToast: 60;
+
+@value elevationTooltip: 4;

package/lib/styles/variables/_elevation.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = void 0;
+exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = void 0;
 
 const elevationNone = '0';
 exports.elevationNone = elevationNone;
@@ -16,4 +16,6 @@ exports.elevationBackdrop = elevationBackdrop;
 const elevationModal = '40';
 exports.elevationModal = elevationModal;
 const elevationToast = '60';
-exports.elevationToast = elevationToast;
+exports.elevationToast = elevationToast;
+const elevationTooltip = '4';
+exports.elevationTooltip = elevationTooltip;

package/lib/styles/variables/_elevation.js.flow

@@ -11,3 +11,5 @@ export const elevationBackdrop = '40';
 export const elevationModal = '40';
 
 export const elevationToast = '60';
+
+export const elevationTooltip = '4';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {