@spaced-out/ui-design-system 0.1.2 → 0.1.4

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: disabled ? -1 : 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={disabled ? -1 : 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/Panel/Panel.js

@@ -21,7 +21,8 @@ const PanelHeader = _ref => {
     children,
     hideCloseBtn,
     onCloseButtonClick,
-    className
+    className,
+    size
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_PanelModule.default.panelHeader, className)
@@ -31,7 +32,8 @@ const PanelHeader = _ref => {
     iconLeftName: "xmark",
     type: "ghost",
     onClick: onCloseButtonClick,
-    ariaLabel: "Close Button"
+    ariaLabel: "Close Button",
+    size: size
   })));
 };
 exports.PanelHeader = PanelHeader;

package/lib/components/Panel/Panel.js.flow

@@ -21,6 +21,7 @@ export type PanelHeaderProps = {
   hideCloseBtn?: boolean,
   onCloseButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   className?: string,
+  size?: 'medium' | 'small',
 };
 
 type FooterClassNames = $ReadOnly<{
@@ -49,6 +50,7 @@ export const PanelHeader = ({
   hideCloseBtn,
   onCloseButtonClick,
   className,
+  size,
 }: PanelHeaderProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
@@ -62,6 +64,7 @@ export const PanelHeader = ({
             type="ghost"
             onClick={onCloseButtonClick}
             ariaLabel="Close Button"
+            size={size}
           ></Button>
         )}
       </div>

package/lib/components/SubMenu/SubMenu.module.css

@@ -65,7 +65,7 @@
 .subMenuGroupWrapper {
   display: flex;
   flex-direction: column;
-  padding: spaceSmall spaceNone;
+  padding: spaceXSmall spaceNone;
   flex: auto;
 }
 

package/lib/components/Table/StaticTable.js

@@ -8,6 +8,7 @@ exports.StaticTable = StaticTable;
 var React = _interopRequireWildcard(require("react"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _xor = _interopRequireDefault(require("lodash/xor"));
+var _classify = require("../../utils/classify");
 var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
 var _Row = require("./Row");
 var _TableHeader = require("./TableHeader");
@@ -28,6 +29,7 @@ const BasicTableBody = (0, _makeClassNameComponent.makeClassNameComponent)(_Tabl
 exports.BasicTableBody = BasicTableBody;
 function StaticTable(props) {
   const {
+    classNames,
     className,
     Row,
     entries,
@@ -49,7 +51,8 @@ function StaticTable(props) {
     idName = 'id',
     emptyText,
     disabled,
-    customLoader
+    customLoader,
+    borderRadius
   } = props;
 
   // this is a fallback and honestly probably doesn't need the
@@ -73,14 +76,16 @@ function StaticTable(props) {
     }
   } : undefined;
   return /*#__PURE__*/React.createElement("div", {
-    className: _TableModule.default.tableContainer,
-    "data-id": "table-wrap"
+    className: (0, _classify.classify)(_TableModule.default.tableContainer, classNames?.wrapper),
+    "data-id": "table-wrap",
+    style: {
+      '--border-radius': borderRadius
+    }
   }, /*#__PURE__*/React.createElement(BasicTable, {
     "data-id": "basic-table",
-    className: className
+    className: (0, _classify.classify)(className, classNames?.table)
   }, showHeader && /*#__PURE__*/React.createElement(_TableHeader.DefaultTableHeader, {
-    tableHeaderClassName: tableHeaderClassName,
-    className: tableHeaderClassName,
+    className: (0, _classify.classify)(tableHeaderClassName, classNames?.tableHeader),
     sortable: sortable,
     columns: headers,
     handleSortClick: handleSortClick,
@@ -89,7 +94,9 @@ function StaticTable(props) {
     disabled: disabled,
     handleCheckboxClick: handleHeaderCheckboxClick,
     checked: selectedKeys == null || selectedKeys.length === 0 ? 'false' : selectedKeys.length < entries.length ? 'mixed' : 'true'
-  }), /*#__PURE__*/React.createElement(BasicTableBody, null, isLoading || !entries.length ? /*#__PURE__*/React.createElement(_Row.EmptyRow, {
+  }), /*#__PURE__*/React.createElement(BasicTableBody, {
+    className: classNames?.tableBody
+  }, isLoading || !entries.length ? /*#__PURE__*/React.createElement(_Row.EmptyRow, {
     isLoading: isLoading,
     emptyText: emptyText,
     headersLength: handleHeaderCheckboxClick ? headers.length + 1 : headers.length,

package/lib/components/Table/StaticTable.js.flow

@@ -4,6 +4,7 @@ import * as React from 'react';
 import get from 'lodash/get';
 import xor from 'lodash/xor';
 
+import {classify} from '../../utils/classify';
 import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
 import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
 
@@ -37,18 +38,15 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
   rowKeys?: string[],
 }): React.Node {
   const {
+    classNames,
     className,
-
     Row,
-
     entries,
     extras,
     rowKeys,
-
     headers,
     showHeader = true,
     tableHeaderClassName,
-
     sortable,
     defaultSortKey,
     defaultSortDirection = 'original',
@@ -58,12 +56,12 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     sortDirection,
     selectedKeys,
     onSelect,
-
     isLoading,
     idName = 'id',
     emptyText,
     disabled,
     customLoader,
+    borderRadius,
   } = props;
 
   // this is a fallback and honestly probably doesn't need the
@@ -92,12 +90,20 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     : undefined;
 
   return (
-    <div className={css.tableContainer} data-id="table-wrap">
-      <BasicTable data-id="basic-table" className={className}>
+    <div
+      className={classify(css.tableContainer, classNames?.wrapper)}
+      data-id="table-wrap"
+      style={{
+        '--border-radius': borderRadius,
+      }}
+    >
+      <BasicTable
+        data-id="basic-table"
+        className={classify(className, classNames?.table)}
+      >
         {showHeader && (
           <DefaultTableHeader
-            tableHeaderClassName={tableHeaderClassName}
-            className={tableHeaderClassName}
+            className={classify(tableHeaderClassName, classNames?.tableHeader)}
             sortable={sortable}
             columns={headers}
             handleSortClick={handleSortClick}
@@ -115,7 +121,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
           />
         )}
 
-        <BasicTableBody>
+        <BasicTableBody className={classNames?.tableBody}>
           {isLoading || !entries.length ? (
             <EmptyRow
               isLoading={isLoading}

package/lib/components/Table/Table.js

@@ -26,6 +26,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function Table(props) {
   const {
     className,
+    classNames,
     Row,
     entries,
     extras,

package/lib/components/Table/Table.js.flow

@@ -19,7 +19,15 @@ export type GenericObject = {
   +[key: string]: mixed,
 };
 
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  table?: string,
+  tableHeader?: string,
+  tableBody?: string,
+}>;
+
 export type TableProps<T, U> = {
+  classNames?: ClassNames,
   className?: string,
   Row?: TableRow<T, U>,
   headers: GenericHeaderItems<T, U>,
@@ -41,6 +49,7 @@ export type TableProps<T, U> = {
   emptyText?: React.Node,
   disabled?: boolean,
   customLoader?: React.Node,
+  borderRadius?: string,
 };
 
 /**
@@ -61,6 +70,7 @@ export function Table<Data: GenericObject, Extras: GenericObject>(
 ): React.Node {
   const {
     className,
+    classNames,
     Row,
     entries,
     extras,