@codacy/ui-components 0.50.5 → 0.52.1

package/lib/Link/Link.js

@@ -2,6 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import React, { forwardRef } from 'react';
 import { StyledLink } from './Link.styles';
 import { Icon } from '..';
+import { uniq } from 'lodash';
 
 var ExternalLinkIcon = function ExternalLinkIcon() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -21,13 +22,22 @@ export var Link = forwardRef(function (_ref, ref) {
       children = _ref.children,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'lg' : _ref$size,
-      rest = _objectWithoutProperties(_ref, ["isExternal", "children", "size"]);
+      _ref$noReferrer = _ref.noReferrer,
+      noReferrer = _ref$noReferrer === void 0 ? false : _ref$noReferrer,
+      _ref$noFollow = _ref.noFollow,
+      noFollow = _ref$noFollow === void 0 ? false : _ref$noFollow,
+      rel = _ref.rel,
+      rest = _objectWithoutProperties(_ref, ["isExternal", "children", "size", "noReferrer", "noFollow", "rel"]);
 
+  var relArray = (rel === null || rel === void 0 ? void 0 : rel.split(' ')) || [];
+  if (noReferrer) relArray.push('noreferrer');
+  if (noFollow) relArray.push('nofollow');
+  var relStr = relArray.length ? uniq(relArray).join(' ') : undefined;
   return isExternal ? /*#__PURE__*/React.createElement(StyledLink, Object.assign({
     ref: ref,
     target: "_blank",
-    rel: "noopener noreferrer",
-    size: size
+    size: size,
+    rel: relStr
   }, rest), children, /*#__PURE__*/React.createElement(Icon, {
     icon: ExternalLinkIcon,
     ml: size === 'lg' ? 2 : 1,
@@ -35,6 +45,7 @@ export var Link = forwardRef(function (_ref, ref) {
   })) : /*#__PURE__*/React.createElement(StyledLink, Object.assign({
     ref: ref,
     children: children,
-    size: size
+    size: size,
+    rel: relStr
   }, rest));
 });

package/lib/Link/Link.types.d.ts

@@ -5,5 +5,7 @@ export interface LinkInterface {
     styleType?: 'normal' | 'subtle' | 'underlined' | 'light';
     isExternal?: boolean;
     size?: TextSize;
+    noReferrer?: boolean;
+    noFollow?: boolean;
 }
 export declare type LinkProps = LinkInterface & React.AnchorHTMLAttributes<HTMLAnchorElement> & SpaceProps;

package/lib/PillLabel/PillLabel.js

@@ -1,7 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import React from 'react';
-import { PillLabelWrapper } from './PillLabel.styles'; // import { Icon } from '../Icon'
-
+import { PillLabelWrapper } from './PillLabel.styles';
 /**
  * PillLabel Banner
  */
@@ -14,12 +13,15 @@ var PillLabel = React.forwardRef(function (_ref, ref) {
       inline = _ref$inline === void 0 ? true : _ref$inline,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'md' : _ref$size,
-      props = _objectWithoutProperties(_ref, ["children", "status", "inline", "size"]);
+      _ref$invert = _ref.invert,
+      invert = _ref$invert === void 0 ? false : _ref$invert,
+      props = _objectWithoutProperties(_ref, ["children", "status", "inline", "size", "invert"]);
 
   return /*#__PURE__*/React.createElement(PillLabelWrapper, Object.assign({
     status: status,
     size: size,
-    display: inline ? 'inline-block' : 'block'
+    display: inline ? 'inline-block' : 'block',
+    invert: invert
   }, props, {
     ref: ref
   }), children);

package/lib/PillLabel/PillLabel.styles.js

@@ -26,44 +26,20 @@ export var PillLabelWrapper = /*#__PURE__*/_styled(Box, {
 }, ";text-transform:", function (_ref6) {
   var size = _ref6.size;
   return size === 'md' ? 'none' : 'uppercase';
-}, ";color:", function (_ref7) {
-  var status = _ref7.status,
+}, ";", function (_ref7) {
+  var _ref7$status = _ref7.status,
+      status = _ref7$status === void 0 ? 'default' : _ref7$status,
+      invert = _ref7.invert,
       theme = _ref7.theme;
 
-  switch (status) {
-    case 'error':
-      return theme.colors['text-danger'];
-
-    case 'warning':
-      return theme.colors['text-warning'];
-
-    case 'info':
-      return theme.colors['text-info'];
-
-    case 'success':
-      return theme.colors['text-success'];
-
-    default:
-      return theme.colors['text-secondary'];
-  }
-}, ";background-color:", function (_ref8) {
-  var status = _ref8.status,
-      theme = _ref8.theme;
-
-  switch (status) {
-    case 'error':
-      return theme.colors['background-danger'];
-
-    case 'warning':
-      return theme.colors['background-warning'];
-
-    case 'info':
-      return theme.colors['background-info'];
-
-    case 'success':
-      return theme.colors['background-success'];
-
-    default:
-      return theme.colors['background-neutral'];
-  }
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QaWxsTGFiZWwvUGlsbExhYmVsLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPd0UiLCJmaWxlIjoiLi4vLi4vc3JjL1BpbGxMYWJlbC9QaWxsTGFiZWwuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBDb2RhY3lUaGVtZSB9IGZyb20gJy4uL3RoZW1lJ1xuaW1wb3J0IHsgUGlsbExhYmVsUHJvcHMgfSBmcm9tICcuL1BpbGxMYWJlbC50eXBlcydcbmltcG9ydCB7IEJveCB9IGZyb20gJy4uL0ZsZXhib3gnXG5pbXBvcnQgeyBJY29uQW5kVGV4dFdyYXBwZXIgfSBmcm9tICcuLi9JY29uQW5kVGV4dC9JY29uQW5kVGV4dC5zdHlsZXMnXG5pbXBvcnQgeyBJY29uV3JhcHBlciB9IGZyb20gJy4uL0ljb24vSWNvbi5zdHlsZXMnXG5cbmV4cG9ydCBjb25zdCBQaWxsTGFiZWxXcmFwcGVyID0gc3R5bGVkKEJveCk8UGlsbExhYmVsUHJvcHMsIENvZGFjeVRoZW1lPmBcbiAgcGFkZGluZzogMCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWzJdfTtcbiAgaGVpZ2h0OiAkeyh7IHRoZW1lLCBzaXplIH0pID0+IHRoZW1lLnNwYWNlW3NpemUgPT09ICdtZCcgPyA1IDogNF19O1xuICBsaW5lLWhlaWdodDogJHsoeyB0aGVtZSwgc2l6ZSB9KSA9PiB0aGVtZS5zcGFjZVtzaXplID09PSAnbWQnID8gNSA6IDRdfTtcblxuICAke0ljb25BbmRUZXh0V3JhcHBlcn0sICR7SWNvbldyYXBwZXJ9IHtcbiAgICBsaW5lLWhlaWdodDogJHsoeyB0aGVtZSwgc2l6ZSB9KSA9PiB0aGVtZS5zcGFjZVtzaXplID09PSAnbWQnID8gNSA6IDRdfTtcbiAgfVxuXG4gIGJvcmRlci1yYWRpdXM6IDAuMjVyZW07XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gIGZvbnQtc2l6ZTogJHsoeyB0aGVtZSwgc2l6ZSB9KSA9PiB0aGVtZS5mb250U2l6ZXNbc2l6ZSA9PT0gJ21kJyA/IDEgOiAwXX07XG5cbiAgdGV4dC10cmFuc2Zvcm06ICR7KHsgc2l6ZSB9KSA9PiAoc2l6ZSA9PT0gJ21kJyA/ICdub25lJyA6ICd1cHBlcmNhc2UnKX07XG5cbiAgY29sb3I6ICR7KHsgc3RhdHVzLCB0aGVtZSB9KSA9PiB7XG4gICAgc3dpdGNoIChzdGF0dXMpIHtcbiAgICAgIGNhc2UgJ2Vycm9yJzpcbiAgICAgICAgcmV0dXJuIHRoZW1lLmNvbG9yc1sndGV4dC1kYW5nZXInXVxuICAgICAgY2FzZSAnd2FybmluZyc6XG4gICAgICAgIHJldHVybiB0aGVtZS5jb2xvcnNbJ3RleHQtd2FybmluZyddXG4gICAgICBjYXNlICdpbmZvJzpcbiAgICAgICAgcmV0dXJuIHRoZW1lLmNvbG9yc1sndGV4dC1pbmZvJ11cbiAgICAgIGNhc2UgJ3N1Y2Nlc3MnOlxuICAgICAgICByZXR1cm4gdGhlbWUuY29sb3JzWyd0ZXh0LXN1Y2Nlc3MnXVxuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuIHRoZW1lLmNvbG9yc1sndGV4dC1zZWNvbmRhcnknXVxuICAgIH1cbiAgfX07XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyBzdGF0dXMsIHRoZW1lIH0pID0+IHtcbiAgICBzd2l0Y2ggKHN0YXR1cykge1xuICAgICAgY2FzZSAnZXJyb3InOlxuICAgICAgICByZXR1cm4gdGhlbWUuY29sb3JzWydiYWNrZ3JvdW5kLWRhbmdlciddXG4gICAgICBjYXNlICd3YXJuaW5nJzpcbiAgICAgICAgcmV0dXJuIHRoZW1lLmNvbG9yc1snYmFja2dyb3VuZC13YXJuaW5nJ11cbiAgICAgIGNhc2UgJ2luZm8nOlxuICAgICAgICByZXR1cm4gdGhlbWUuY29sb3JzWydiYWNrZ3JvdW5kLWluZm8nXVxuICAgICAgY2FzZSAnc3VjY2Vzcyc6XG4gICAgICAgIHJldHVybiB0aGVtZS5jb2xvcnNbJ2JhY2tncm91bmQtc3VjY2VzcyddXG4gICAgICBkZWZhdWx0OlxuICAgICAgICByZXR1cm4gdGhlbWUuY29sb3JzWydiYWNrZ3JvdW5kLW5ldXRyYWwnXVxuICAgIH1cbiAgfX07XG5gXG4iXX0= */"));
+  /** { status: [ main, text, background ] } */
+  var scheme = {
+    "default": ['accent-subtle', 'text-secondary', 'background-neutral'],
+    attention: ['accent-attention', 'text-attention', 'background-attention'],
+    success: ['accent-success', 'text-success', 'background-success'],
+    info: ['accent-info', 'text-info', 'background-info'],
+    warning: ['accent-warning', 'text-warning', 'background-warning'],
+    error: ['accent-danger', 'text-danger', 'background-danger']
+  };
+  return "\n      color: ".concat(invert ? theme.colors['white'] : theme.colors[scheme[status][1]], ";\n      background-color: ").concat(invert ? theme.colors[scheme[status][0]] : theme.colors[scheme[status][2]], ";\n    ");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QaWxsTGFiZWwvUGlsbExhYmVsLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPd0UiLCJmaWxlIjoiLi4vLi4vc3JjL1BpbGxMYWJlbC9QaWxsTGFiZWwuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBDb2RhY3lUaGVtZSwgQ29sb3IgfSBmcm9tICcuLi90aGVtZSdcbmltcG9ydCB7IFBpbGxMYWJlbFByb3BzLCBQaWxsTGFiZWxTdGF0dXMgfSBmcm9tICcuL1BpbGxMYWJlbC50eXBlcydcbmltcG9ydCB7IEJveCB9IGZyb20gJy4uL0ZsZXhib3gnXG5pbXBvcnQgeyBJY29uQW5kVGV4dFdyYXBwZXIgfSBmcm9tICcuLi9JY29uQW5kVGV4dC9JY29uQW5kVGV4dC5zdHlsZXMnXG5pbXBvcnQgeyBJY29uV3JhcHBlciB9IGZyb20gJy4uL0ljb24vSWNvbi5zdHlsZXMnXG5cbmV4cG9ydCBjb25zdCBQaWxsTGFiZWxXcmFwcGVyID0gc3R5bGVkKEJveCk8UGlsbExhYmVsUHJvcHMsIENvZGFjeVRoZW1lPmBcbiAgcGFkZGluZzogMCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWzJdfTtcbiAgaGVpZ2h0OiAkeyh7IHRoZW1lLCBzaXplIH0pID0+IHRoZW1lLnNwYWNlW3NpemUgPT09ICdtZCcgPyA1IDogNF19O1xuICBsaW5lLWhlaWdodDogJHsoeyB0aGVtZSwgc2l6ZSB9KSA9PiB0aGVtZS5zcGFjZVtzaXplID09PSAnbWQnID8gNSA6IDRdfTtcblxuICAke0ljb25BbmRUZXh0V3JhcHBlcn0sICR7SWNvbldyYXBwZXJ9IHtcbiAgICBsaW5lLWhlaWdodDogJHsoeyB0aGVtZSwgc2l6ZSB9KSA9PiB0aGVtZS5zcGFjZVtzaXplID09PSAnbWQnID8gNSA6IDRdfTtcbiAgfVxuXG4gIGJvcmRlci1yYWRpdXM6IDAuMjVyZW07XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gIGZvbnQtc2l6ZTogJHsoeyB0aGVtZSwgc2l6ZSB9KSA9PiB0aGVtZS5mb250U2l6ZXNbc2l6ZSA9PT0gJ21kJyA/IDEgOiAwXX07XG5cbiAgdGV4dC10cmFuc2Zvcm06ICR7KHsgc2l6ZSB9KSA9PiAoc2l6ZSA9PT0gJ21kJyA/ICdub25lJyA6ICd1cHBlcmNhc2UnKX07XG5cbiAgJHsoeyBzdGF0dXMgPSAnZGVmYXVsdCcsIGludmVydCwgdGhlbWUgfSkgPT4ge1xuICAgIC8qKiB7IHN0YXR1czogWyBtYWluLCB0ZXh0LCBiYWNrZ3JvdW5kIF0gfSAqL1xuICAgIGNvbnN0IHNjaGVtZTogeyBba2V5IGluIFBpbGxMYWJlbFN0YXR1c106IFtDb2xvciwgQ29sb3IsIENvbG9yXSB9ID0ge1xuICAgICAgZGVmYXVsdDogWydhY2NlbnQtc3VidGxlJywgJ3RleHQtc2Vjb25kYXJ5JywgJ2JhY2tncm91bmQtbmV1dHJhbCddLFxuICAgICAgYXR0ZW50aW9uOiBbJ2FjY2VudC1hdHRlbnRpb24nLCAndGV4dC1hdHRlbnRpb24nLCAnYmFja2dyb3VuZC1hdHRlbnRpb24nXSxcbiAgICAgIHN1Y2Nlc3M6IFsnYWNjZW50LXN1Y2Nlc3MnLCAndGV4dC1zdWNjZXNzJywgJ2JhY2tncm91bmQtc3VjY2VzcyddLFxuICAgICAgaW5mbzogWydhY2NlbnQtaW5mbycsICd0ZXh0LWluZm8nLCAnYmFja2dyb3VuZC1pbmZvJ10sXG4gICAgICB3YXJuaW5nOiBbJ2FjY2VudC13YXJuaW5nJywgJ3RleHQtd2FybmluZycsICdiYWNrZ3JvdW5kLXdhcm5pbmcnXSxcbiAgICAgIGVycm9yOiBbJ2FjY2VudC1kYW5nZXInLCAndGV4dC1kYW5nZXInLCAnYmFja2dyb3VuZC1kYW5nZXInXSxcbiAgICB9XG5cbiAgICByZXR1cm4gYFxuICAgICAgY29sb3I6ICR7aW52ZXJ0ID8gdGhlbWUuY29sb3JzWyd3aGl0ZSddIDogdGhlbWUuY29sb3JzW3NjaGVtZVtzdGF0dXNdWzFdXX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2ludmVydCA/IHRoZW1lLmNvbG9yc1tzY2hlbWVbc3RhdHVzXVswXV0gOiB0aGVtZS5jb2xvcnNbc2NoZW1lW3N0YXR1c11bMl1dfTtcbiAgICBgXG4gIH19XG5gXG4iXX0= */");

package/lib/PillLabel/PillLabel.types.d.ts

@@ -1,6 +1,6 @@
 import { SpaceProps, LayoutProps } from '../system-props/types';
 import { ContainerComponentProps } from '../types';
-export declare type PillLabelStatus = 'info' | 'warning' | 'error' | 'success' | 'default';
+export declare type PillLabelStatus = 'info' | 'warning' | 'error' | 'success' | 'default' | 'attention';
 export interface PillLabelProps extends ContainerComponentProps, SpaceProps, LayoutProps {
     /** Status of PillLabel */
     status?: PillLabelStatus;
@@ -8,4 +8,6 @@ export interface PillLabelProps extends ContainerComponentProps, SpaceProps, Lay
     inline?: boolean;
     /** Size */
     size?: 'md' | 'sm';
+    /** Invert color scheme to make darker background and lighter text */
+    invert?: boolean;
 }

package/lib/Popup/styles.js

@@ -8,14 +8,14 @@ export var StyledPopup = /*#__PURE__*/_styled(Box, {
   return theme.space[5];
 }, ";background-color:", function (_ref2) {
   var theme = _ref2.theme;
-  return theme.colors['blue-0'];
+  return theme.colors['black-50'];
 }, ";background-image:", function (_ref3) {
   var backgroundImage = _ref3.backgroundImage;
   return "url(".concat(backgroundImage, ")");
 }, ";background-repeat:no-repeat;background-size:contain;width:24rem;outline:none;border-radius:5px;box-shadow:0px 0px 14px ", function (_ref4) {
   var theme = _ref4.theme;
   return rgba(theme.colors['neutral-300'], 0.6);
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Qb3B1cC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTXdGIiwiZmlsZSI6Ii4uLy4uL3NyYy9Qb3B1cC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IENvZGFjeVRoZW1lIH0gZnJvbSAnLi4vdGhlbWUnXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLidcbmltcG9ydCB7IFBvcHVwUHJvcHMgfSBmcm9tICcuL3R5cGVzJ1xuaW1wb3J0IHsgcmdiYSB9IGZyb20gJ3BvbGlzaGVkJ1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUG9wdXAgPSBzdHlsZWQoQm94KTxQaWNrPFBvcHVwUHJvcHMsICdiYWNrZ3JvdW5kSW1hZ2UnPiwgQ29kYWN5VGhlbWU+YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbNV19O1xuXG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydibHVlLTAnXX07XG4gIGJhY2tncm91bmQtaW1hZ2U6ICR7KHsgYmFja2dyb3VuZEltYWdlIH0pID0+IGB1cmwoJHtiYWNrZ3JvdW5kSW1hZ2V9KWB9O1xuICBiYWNrZ3JvdW5kLXJlcGVhdDogbm8tcmVwZWF0O1xuICBiYWNrZ3JvdW5kLXNpemU6IGNvbnRhaW47XG5cbiAgd2lkdGg6IDI0cmVtO1xuICBvdXRsaW5lOiBub25lO1xuICBib3JkZXItcmFkaXVzOiA1cHg7XG4gIGJveC1zaGFkb3c6IDBweCAwcHggMTRweCAkeyh7IHRoZW1lIH0pID0+IHJnYmEodGhlbWUuY29sb3JzWyduZXV0cmFsLTMwMCddLCAwLjYpfTtcbmBcbmV4cG9ydCBjb25zdCBDbG9zZUJ0bkxvY2F0aW9uID0gc3R5bGVkLmRpdjx7fSwgQ29kYWN5VGhlbWU+YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWzVdfTtcbiAgdG9wOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWzVdfTtcbiAgbWFyZ2luLXRvcDogLTAuMzVyZW07XG4gIG1hcmdpbi1yaWdodDogLTAuMzVyZW07XG5gXG4iXX0= */"));
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Qb3B1cC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTXdGIiwiZmlsZSI6Ii4uLy4uL3NyYy9Qb3B1cC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IENvZGFjeVRoZW1lIH0gZnJvbSAnLi4vdGhlbWUnXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLidcbmltcG9ydCB7IFBvcHVwUHJvcHMgfSBmcm9tICcuL3R5cGVzJ1xuaW1wb3J0IHsgcmdiYSB9IGZyb20gJ3BvbGlzaGVkJ1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUG9wdXAgPSBzdHlsZWQoQm94KTxQaWNrPFBvcHVwUHJvcHMsICdiYWNrZ3JvdW5kSW1hZ2UnPiwgQ29kYWN5VGhlbWU+YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbNV19O1xuXG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydibGFjay01MCddfTtcbiAgYmFja2dyb3VuZC1pbWFnZTogJHsoeyBiYWNrZ3JvdW5kSW1hZ2UgfSkgPT4gYHVybCgke2JhY2tncm91bmRJbWFnZX0pYH07XG4gIGJhY2tncm91bmQtcmVwZWF0OiBuby1yZXBlYXQ7XG4gIGJhY2tncm91bmQtc2l6ZTogY29udGFpbjtcblxuICB3aWR0aDogMjRyZW07XG4gIG91dGxpbmU6IG5vbmU7XG4gIGJvcmRlci1yYWRpdXM6IDVweDtcbiAgYm94LXNoYWRvdzogMHB4IDBweCAxNHB4ICR7KHsgdGhlbWUgfSkgPT4gcmdiYSh0aGVtZS5jb2xvcnNbJ25ldXRyYWwtMzAwJ10sIDAuNil9O1xuYFxuZXhwb3J0IGNvbnN0IENsb3NlQnRuTG9jYXRpb24gPSBzdHlsZWQuZGl2PHt9LCBDb2RhY3lUaGVtZT5gXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgcmlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbNV19O1xuICB0b3A6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbNV19O1xuICBtYXJnaW4tdG9wOiAtMC4zNXJlbTtcbiAgbWFyZ2luLXJpZ2h0OiAtMC4zNXJlbTtcbmBcbiJdfQ== */"));
 export var CloseBtnLocation = _styled("div", {
   target: "evoxgzo1"
 })("position:absolute;right:", function (_ref5) {
@@ -24,4 +24,4 @@ export var CloseBtnLocation = _styled("div", {
 }, ";top:", function (_ref6) {
   var theme = _ref6.theme;
   return theme.space[5];
-}, ";margin-top:-0.35rem;margin-right:-0.35rem;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Qb3B1cC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0IyRCIsImZpbGUiOiIuLi8uLi9zcmMvUG9wdXAvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBDb2RhY3lUaGVtZSB9IGZyb20gJy4uL3RoZW1lJ1xuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4nXG5pbXBvcnQgeyBQb3B1cFByb3BzIH0gZnJvbSAnLi90eXBlcydcbmltcG9ydCB7IHJnYmEgfSBmcm9tICdwb2xpc2hlZCdcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFBvcHVwID0gc3R5bGVkKEJveCk8UGljazxQb3B1cFByb3BzLCAnYmFja2dyb3VuZEltYWdlJz4sIENvZGFjeVRoZW1lPmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWzVdfTtcblxuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snYmx1ZS0wJ119O1xuICBiYWNrZ3JvdW5kLWltYWdlOiAkeyh7IGJhY2tncm91bmRJbWFnZSB9KSA9PiBgdXJsKCR7YmFja2dyb3VuZEltYWdlfSlgfTtcbiAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDtcbiAgYmFja2dyb3VuZC1zaXplOiBjb250YWluO1xuXG4gIHdpZHRoOiAyNHJlbTtcbiAgb3V0bGluZTogbm9uZTtcbiAgYm9yZGVyLXJhZGl1czogNXB4O1xuICBib3gtc2hhZG93OiAwcHggMHB4IDE0cHggJHsoeyB0aGVtZSB9KSA9PiByZ2JhKHRoZW1lLmNvbG9yc1snbmV1dHJhbC0zMDAnXSwgMC42KX07XG5gXG5leHBvcnQgY29uc3QgQ2xvc2VCdG5Mb2NhdGlvbiA9IHN0eWxlZC5kaXY8e30sIENvZGFjeVRoZW1lPmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICByaWdodDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVs1XX07XG4gIHRvcDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVs1XX07XG4gIG1hcmdpbi10b3A6IC0wLjM1cmVtO1xuICBtYXJnaW4tcmlnaHQ6IC0wLjM1cmVtO1xuYFxuIl19 */"));
+}, ";margin-top:-0.35rem;margin-right:-0.35rem;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Qb3B1cC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0IyRCIsImZpbGUiOiIuLi8uLi9zcmMvUG9wdXAvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBDb2RhY3lUaGVtZSB9IGZyb20gJy4uL3RoZW1lJ1xuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4nXG5pbXBvcnQgeyBQb3B1cFByb3BzIH0gZnJvbSAnLi90eXBlcydcbmltcG9ydCB7IHJnYmEgfSBmcm9tICdwb2xpc2hlZCdcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFBvcHVwID0gc3R5bGVkKEJveCk8UGljazxQb3B1cFByb3BzLCAnYmFja2dyb3VuZEltYWdlJz4sIENvZGFjeVRoZW1lPmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWzVdfTtcblxuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snYmxhY2stNTAnXX07XG4gIGJhY2tncm91bmQtaW1hZ2U6ICR7KHsgYmFja2dyb3VuZEltYWdlIH0pID0+IGB1cmwoJHtiYWNrZ3JvdW5kSW1hZ2V9KWB9O1xuICBiYWNrZ3JvdW5kLXJlcGVhdDogbm8tcmVwZWF0O1xuICBiYWNrZ3JvdW5kLXNpemU6IGNvbnRhaW47XG5cbiAgd2lkdGg6IDI0cmVtO1xuICBvdXRsaW5lOiBub25lO1xuICBib3JkZXItcmFkaXVzOiA1cHg7XG4gIGJveC1zaGFkb3c6IDBweCAwcHggMTRweCAkeyh7IHRoZW1lIH0pID0+IHJnYmEodGhlbWUuY29sb3JzWyduZXV0cmFsLTMwMCddLCAwLjYpfTtcbmBcbmV4cG9ydCBjb25zdCBDbG9zZUJ0bkxvY2F0aW9uID0gc3R5bGVkLmRpdjx7fSwgQ29kYWN5VGhlbWU+YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWzVdfTtcbiAgdG9wOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWzVdfTtcbiAgbWFyZ2luLXRvcDogLTAuMzVyZW07XG4gIG1hcmdpbi1yaWdodDogLTAuMzVyZW07XG5gXG4iXX0= */"));

package/lib/Skeleton/Skeleton.js

@@ -29,7 +29,8 @@ var ParagraphSkeleton = function ParagraphSkeleton(_ref3) {
   return /*#__PURE__*/React.createElement(Box, props, new Array(lines).fill('').map(function (_item, index) {
     return /*#__PURE__*/React.createElement(SkeletonPrimitive, {
       mb: 4,
-      width: index < lines - 1 ? '100%' : '70%'
+      width: index < lines - 1 ? '100%' : '70%',
+      key: "skeleton-paragraph-".concat(index)
     });
   }));
 };

package/lib/Tab/Tab.styles.js

@@ -15,37 +15,40 @@ var TabWrapper = /*#__PURE__*/_styled(Flex, {
 }, ";border-bottom:1px solid ", function (_ref2) {
   var theme = _ref2.theme;
   return theme.colors['ui-border'];
-}, ";align-items:stretch;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9UYWIvVGFiLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTeUUiLCJmaWxlIjoiLi4vLi4vc3JjL1RhYi9UYWIuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBDb2RhY3lUaGVtZSwgdHJhbnNpdGlvbiB9IGZyb20gJy4uL3RoZW1lJ1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uL0ZsZXhib3gnXG5pbXBvcnQgeyBUYWJCdXR0b25Qcm9wcyB9IGZyb20gJy4vVGFiLnR5cGVzJ1xuaW1wb3J0IHsgSWNvbkFuZFRleHRXcmFwcGVyIH0gZnJvbSAnLi4vSWNvbkFuZFRleHQvSWNvbkFuZFRleHQuc3R5bGVzJ1xuXG4vKipcbiAqIFRhYlxuICovXG5jb25zdCBUYWJXcmFwcGVyID0gc3R5bGVkKEZsZXgpPHsgaGFzQmFja2dyb3VuZD86IGJvb2xlYW4gfSwgQ29kYWN5VGhlbWU+YFxuICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lLCBoYXNCYWNrZ3JvdW5kIH0pID0+IChoYXNCYWNrZ3JvdW5kID8gdGhlbWUuY29sb3JzWydiYWNrZ3JvdW5kLXNlY29uZGFyeSddIDogJ3RyYW5zcGFyZW50Jyl9O1xuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ3VpLWJvcmRlciddfTtcbiAgYWxpZ24taXRlbXM6IHN0cmV0Y2g7XG5gXG5cbmNvbnN0IFRhYkJ1dHRvbiA9IHN0eWxlZC5idXR0b248VGFiQnV0dG9uUHJvcHMsIENvZGFjeVRoZW1lPmBcbiAgLyogYnV0dG9uIHJlc2V0ICovXG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgb3V0bGluZTogbm9uZTtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG5cbiAgbWF4LXdpZHRoOiAxMnJlbTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG5cbiAgbGluZS1oZWlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuYmFzZUxpbmVIZWlnaHR9O1xuXG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbMl19O1xuICBtYXJnaW4tYm90dG9tOiAtMXB4OyAvKiBUbyBvdmVybGFwIHRoZSB0YWIgd3JhcHBlciBib3JkZXIgKi9cbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmZvbnRTaXplc1syXX07XG5cbiAgdHJhbnNpdGlvbjogJHsoKSA9PiB0cmFuc2l0aW9uKFsnYm9yZGVyJywgJ2NvbG9yJywgJ2JhY2tncm91bmQtY29sb3InXSl9O1xuICBib3JkZXItYm90dG9tOiAxcHggc29saWRcbiAgICAkeyh7IHRoZW1lLCBhY3RpdmUgfSkgPT4gKGFjdGl2ZSA/IHRoZW1lLmNvbG9yc1snYWNjZW50LXByaW1hcnknXSA6IHRoZW1lLmNvbG9yc1sndWktYm9yZGVyJ10pfTtcbiAgY29sb3I6ICR7KHsgdGhlbWUsIGFjdGl2ZSB9KSA9PiAoYWN0aXZlID8gdGhlbWUuY29sb3JzWydhY2NlbnQtcHJpbWFyeSddIDogdGhlbWUuY29sb3JzWyd0ZXh0LXNlY29uZGFyeSddKX07XG5cbiAgJHtJY29uQW5kVGV4dFdyYXBwZXJ9IHN2ZyB7XG4gICAgZmlsbDogJHsoeyB0aGVtZSwgYWN0aXZlIH0pID0+IChhY3RpdmUgPyB0aGVtZS5jb2xvcnNbJ2JsdWUtNDAwJ10gOiB0aGVtZS5jb2xvcnNbJ3RleHQtc2Vjb25kYXJ5J10pfTtcbiAgfVxuXG4gIDpob3ZlciB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSwgYWN0aXZlIH0pID0+IChhY3RpdmUgPyAndHJhbnNwYXJlbnQnIDogdGhlbWUuY29sb3JzWydibHVlLTUwJ10pfTtcbiAgfVxuYFxuXG5leHBvcnQgeyBUYWJXcmFwcGVyLCBUYWJCdXR0b24gfVxuIl19 */"));
+}, ";align-items:stretch;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9UYWIvVGFiLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTeUUiLCJmaWxlIjoiLi4vLi4vc3JjL1RhYi9UYWIuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBDb2RhY3lUaGVtZSwgdHJhbnNpdGlvbiB9IGZyb20gJy4uL3RoZW1lJ1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uL0ZsZXhib3gnXG5pbXBvcnQgeyBUYWJCdXR0b25Qcm9wcyB9IGZyb20gJy4vVGFiLnR5cGVzJ1xuaW1wb3J0IHsgSWNvbkFuZFRleHRXcmFwcGVyIH0gZnJvbSAnLi4vSWNvbkFuZFRleHQvSWNvbkFuZFRleHQuc3R5bGVzJ1xuXG4vKipcbiAqIFRhYlxuICovXG5jb25zdCBUYWJXcmFwcGVyID0gc3R5bGVkKEZsZXgpPHsgaGFzQmFja2dyb3VuZD86IGJvb2xlYW4gfSwgQ29kYWN5VGhlbWU+YFxuICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lLCBoYXNCYWNrZ3JvdW5kIH0pID0+IChoYXNCYWNrZ3JvdW5kID8gdGhlbWUuY29sb3JzWydiYWNrZ3JvdW5kLXNlY29uZGFyeSddIDogJ3RyYW5zcGFyZW50Jyl9O1xuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ3VpLWJvcmRlciddfTtcbiAgYWxpZ24taXRlbXM6IHN0cmV0Y2g7XG5gXG5cbmNvbnN0IFRhYkJ1dHRvbiA9IHN0eWxlZC5idXR0b248VGFiQnV0dG9uUHJvcHMsIENvZGFjeVRoZW1lPmBcbiAgLyogYnV0dG9uIHJlc2V0ICovXG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgb3V0bGluZTogbm9uZTtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG5cbiAgbWF4LXdpZHRoOiAkeyh7IG1heFdpZHRoIH0pID0+IG1heFdpZHRoIHx8ICcxMnJlbSd9O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcblxuICBsaW5lLWhlaWdodDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5iYXNlTGluZUhlaWdodH07XG5cbiAgcGFkZGluZzogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsyXX07XG4gIG1hcmdpbi1ib3R0b206IC0xcHg7IC8qIFRvIG92ZXJsYXAgdGhlIHRhYiB3cmFwcGVyIGJvcmRlciAqL1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuZm9udFNpemVzWzJdfTtcblxuICB0cmFuc2l0aW9uOiAkeygpID0+IHRyYW5zaXRpb24oWydib3JkZXInLCAnY29sb3InLCAnYmFja2dyb3VuZC1jb2xvciddKX07XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZFxuICAgICR7KHsgdGhlbWUsIGFjdGl2ZSB9KSA9PiAoYWN0aXZlID8gdGhlbWUuY29sb3JzWydhY2NlbnQtcHJpbWFyeSddIDogdGhlbWUuY29sb3JzWyd1aS1ib3JkZXInXSl9O1xuICBjb2xvcjogJHsoeyB0aGVtZSwgYWN0aXZlIH0pID0+IChhY3RpdmUgPyB0aGVtZS5jb2xvcnNbJ2FjY2VudC1wcmltYXJ5J10gOiB0aGVtZS5jb2xvcnNbJ3RleHQtc2Vjb25kYXJ5J10pfTtcblxuICAke0ljb25BbmRUZXh0V3JhcHBlcn0gc3ZnIHtcbiAgICBmaWxsOiAkeyh7IHRoZW1lLCBhY3RpdmUgfSkgPT4gKGFjdGl2ZSA/IHRoZW1lLmNvbG9yc1snYmx1ZS00MDAnXSA6IHRoZW1lLmNvbG9yc1sndGV4dC1zZWNvbmRhcnknXSl9O1xuICB9XG5cbiAgOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lLCBhY3RpdmUgfSkgPT4gKGFjdGl2ZSA/ICd0cmFuc3BhcmVudCcgOiB0aGVtZS5jb2xvcnNbJ2JsdWUtNTAnXSl9O1xuICB9XG5gXG5cbmV4cG9ydCB7IFRhYldyYXBwZXIsIFRhYkJ1dHRvbiB9XG4iXX0= */"));
 
 var TabButton = _styled("button", {
   target: "e1y1ufi91"
-})("border:none;background-color:transparent;cursor:pointer;outline:none;font-weight:bold;max-width:12rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:", function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.baseLineHeight;
-}, ";padding:", function (_ref4) {
+})("border:none;background-color:transparent;cursor:pointer;outline:none;font-weight:bold;max-width:", function (_ref3) {
+  var maxWidth = _ref3.maxWidth;
+  return maxWidth || '12rem';
+}, ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:", function (_ref4) {
   var theme = _ref4.theme;
-  return theme.space[2];
-}, ";margin-bottom:-1px;font-size:", function (_ref5) {
+  return theme.baseLineHeight;
+}, ";padding:", function (_ref5) {
   var theme = _ref5.theme;
+  return theme.space[2];
+}, ";margin-bottom:-1px;font-size:", function (_ref6) {
+  var theme = _ref6.theme;
   return theme.fontSizes[2];
 }, ";transition:", function () {
   return transition(['border', 'color', 'background-color']);
-}, ";border-bottom:1px solid ", function (_ref6) {
-  var theme = _ref6.theme,
-      active = _ref6.active;
-  return active ? theme.colors['accent-primary'] : theme.colors['ui-border'];
-}, ";color:", function (_ref7) {
+}, ";border-bottom:1px solid ", function (_ref7) {
   var theme = _ref7.theme,
       active = _ref7.active;
-  return active ? theme.colors['accent-primary'] : theme.colors['text-secondary'];
-}, ";", IconAndTextWrapper, " svg{fill:", function (_ref8) {
+  return active ? theme.colors['accent-primary'] : theme.colors['ui-border'];
+}, ";color:", function (_ref8) {
   var theme = _ref8.theme,
       active = _ref8.active;
-  return active ? theme.colors['blue-400'] : theme.colors['text-secondary'];
-}, ";}:hover{background-color:", function (_ref9) {
+  return active ? theme.colors['accent-primary'] : theme.colors['text-secondary'];
+}, ";", IconAndTextWrapper, " svg{fill:", function (_ref9) {
   var theme = _ref9.theme,
       active = _ref9.active;
+  return active ? theme.colors['blue-400'] : theme.colors['text-secondary'];
+}, ";}:hover{background-color:", function (_ref10) {
+  var theme = _ref10.theme,
+      active = _ref10.active;
   return active ? 'transparent' : theme.colors['blue-50'];
-}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9UYWIvVGFiLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlNEQiLCJmaWxlIjoiLi4vLi4vc3JjL1RhYi9UYWIuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBDb2RhY3lUaGVtZSwgdHJhbnNpdGlvbiB9IGZyb20gJy4uL3RoZW1lJ1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uL0ZsZXhib3gnXG5pbXBvcnQgeyBUYWJCdXR0b25Qcm9wcyB9IGZyb20gJy4vVGFiLnR5cGVzJ1xuaW1wb3J0IHsgSWNvbkFuZFRleHRXcmFwcGVyIH0gZnJvbSAnLi4vSWNvbkFuZFRleHQvSWNvbkFuZFRleHQuc3R5bGVzJ1xuXG4vKipcbiAqIFRhYlxuICovXG5jb25zdCBUYWJXcmFwcGVyID0gc3R5bGVkKEZsZXgpPHsgaGFzQmFja2dyb3VuZD86IGJvb2xlYW4gfSwgQ29kYWN5VGhlbWU+YFxuICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lLCBoYXNCYWNrZ3JvdW5kIH0pID0+IChoYXNCYWNrZ3JvdW5kID8gdGhlbWUuY29sb3JzWydiYWNrZ3JvdW5kLXNlY29uZGFyeSddIDogJ3RyYW5zcGFyZW50Jyl9O1xuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ3VpLWJvcmRlciddfTtcbiAgYWxpZ24taXRlbXM6IHN0cmV0Y2g7XG5gXG5cbmNvbnN0IFRhYkJ1dHRvbiA9IHN0eWxlZC5idXR0b248VGFiQnV0dG9uUHJvcHMsIENvZGFjeVRoZW1lPmBcbiAgLyogYnV0dG9uIHJlc2V0ICovXG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgb3V0bGluZTogbm9uZTtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG5cbiAgbWF4LXdpZHRoOiAxMnJlbTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG5cbiAgbGluZS1oZWlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuYmFzZUxpbmVIZWlnaHR9O1xuXG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbMl19O1xuICBtYXJnaW4tYm90dG9tOiAtMXB4OyAvKiBUbyBvdmVybGFwIHRoZSB0YWIgd3JhcHBlciBib3JkZXIgKi9cbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmZvbnRTaXplc1syXX07XG5cbiAgdHJhbnNpdGlvbjogJHsoKSA9PiB0cmFuc2l0aW9uKFsnYm9yZGVyJywgJ2NvbG9yJywgJ2JhY2tncm91bmQtY29sb3InXSl9O1xuICBib3JkZXItYm90dG9tOiAxcHggc29saWRcbiAgICAkeyh7IHRoZW1lLCBhY3RpdmUgfSkgPT4gKGFjdGl2ZSA/IHRoZW1lLmNvbG9yc1snYWNjZW50LXByaW1hcnknXSA6IHRoZW1lLmNvbG9yc1sndWktYm9yZGVyJ10pfTtcbiAgY29sb3I6ICR7KHsgdGhlbWUsIGFjdGl2ZSB9KSA9PiAoYWN0aXZlID8gdGhlbWUuY29sb3JzWydhY2NlbnQtcHJpbWFyeSddIDogdGhlbWUuY29sb3JzWyd0ZXh0LXNlY29uZGFyeSddKX07XG5cbiAgJHtJY29uQW5kVGV4dFdyYXBwZXJ9IHN2ZyB7XG4gICAgZmlsbDogJHsoeyB0aGVtZSwgYWN0aXZlIH0pID0+IChhY3RpdmUgPyB0aGVtZS5jb2xvcnNbJ2JsdWUtNDAwJ10gOiB0aGVtZS5jb2xvcnNbJ3RleHQtc2Vjb25kYXJ5J10pfTtcbiAgfVxuXG4gIDpob3ZlciB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSwgYWN0aXZlIH0pID0+IChhY3RpdmUgPyAndHJhbnNwYXJlbnQnIDogdGhlbWUuY29sb3JzWydibHVlLTUwJ10pfTtcbiAgfVxuYFxuXG5leHBvcnQgeyBUYWJXcmFwcGVyLCBUYWJCdXR0b24gfVxuIl19 */"));
+}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9UYWIvVGFiLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlNEQiLCJmaWxlIjoiLi4vLi4vc3JjL1RhYi9UYWIuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBDb2RhY3lUaGVtZSwgdHJhbnNpdGlvbiB9IGZyb20gJy4uL3RoZW1lJ1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uL0ZsZXhib3gnXG5pbXBvcnQgeyBUYWJCdXR0b25Qcm9wcyB9IGZyb20gJy4vVGFiLnR5cGVzJ1xuaW1wb3J0IHsgSWNvbkFuZFRleHRXcmFwcGVyIH0gZnJvbSAnLi4vSWNvbkFuZFRleHQvSWNvbkFuZFRleHQuc3R5bGVzJ1xuXG4vKipcbiAqIFRhYlxuICovXG5jb25zdCBUYWJXcmFwcGVyID0gc3R5bGVkKEZsZXgpPHsgaGFzQmFja2dyb3VuZD86IGJvb2xlYW4gfSwgQ29kYWN5VGhlbWU+YFxuICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lLCBoYXNCYWNrZ3JvdW5kIH0pID0+IChoYXNCYWNrZ3JvdW5kID8gdGhlbWUuY29sb3JzWydiYWNrZ3JvdW5kLXNlY29uZGFyeSddIDogJ3RyYW5zcGFyZW50Jyl9O1xuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ3VpLWJvcmRlciddfTtcbiAgYWxpZ24taXRlbXM6IHN0cmV0Y2g7XG5gXG5cbmNvbnN0IFRhYkJ1dHRvbiA9IHN0eWxlZC5idXR0b248VGFiQnV0dG9uUHJvcHMsIENvZGFjeVRoZW1lPmBcbiAgLyogYnV0dG9uIHJlc2V0ICovXG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgb3V0bGluZTogbm9uZTtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG5cbiAgbWF4LXdpZHRoOiAkeyh7IG1heFdpZHRoIH0pID0+IG1heFdpZHRoIHx8ICcxMnJlbSd9O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcblxuICBsaW5lLWhlaWdodDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5iYXNlTGluZUhlaWdodH07XG5cbiAgcGFkZGluZzogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsyXX07XG4gIG1hcmdpbi1ib3R0b206IC0xcHg7IC8qIFRvIG92ZXJsYXAgdGhlIHRhYiB3cmFwcGVyIGJvcmRlciAqL1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuZm9udFNpemVzWzJdfTtcblxuICB0cmFuc2l0aW9uOiAkeygpID0+IHRyYW5zaXRpb24oWydib3JkZXInLCAnY29sb3InLCAnYmFja2dyb3VuZC1jb2xvciddKX07XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZFxuICAgICR7KHsgdGhlbWUsIGFjdGl2ZSB9KSA9PiAoYWN0aXZlID8gdGhlbWUuY29sb3JzWydhY2NlbnQtcHJpbWFyeSddIDogdGhlbWUuY29sb3JzWyd1aS1ib3JkZXInXSl9O1xuICBjb2xvcjogJHsoeyB0aGVtZSwgYWN0aXZlIH0pID0+IChhY3RpdmUgPyB0aGVtZS5jb2xvcnNbJ2FjY2VudC1wcmltYXJ5J10gOiB0aGVtZS5jb2xvcnNbJ3RleHQtc2Vjb25kYXJ5J10pfTtcblxuICAke0ljb25BbmRUZXh0V3JhcHBlcn0gc3ZnIHtcbiAgICBmaWxsOiAkeyh7IHRoZW1lLCBhY3RpdmUgfSkgPT4gKGFjdGl2ZSA/IHRoZW1lLmNvbG9yc1snYmx1ZS00MDAnXSA6IHRoZW1lLmNvbG9yc1sndGV4dC1zZWNvbmRhcnknXSl9O1xuICB9XG5cbiAgOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lLCBhY3RpdmUgfSkgPT4gKGFjdGl2ZSA/ICd0cmFuc3BhcmVudCcgOiB0aGVtZS5jb2xvcnNbJ2JsdWUtNTAnXSl9O1xuICB9XG5gXG5cbmV4cG9ydCB7IFRhYldyYXBwZXIsIFRhYkJ1dHRvbiB9XG4iXX0= */"));
 
 export { TabWrapper, TabButton };

package/lib/Tab/Tab.types.d.ts

@@ -1,3 +1,4 @@
+import { MaxWidthProps } from 'styled-system';
 import { SpaceProps } from '../system-props/types';
 import { ContainerComponentProps } from '../types';
 export interface TabWrapperProps extends ContainerComponentProps, SpaceProps {
@@ -6,7 +7,7 @@ export interface TabWrapperProps extends ContainerComponentProps, SpaceProps {
     /** Accessibility label for tabs descriptions */
     ariaLabel: string;
 }
-export interface TabButtonProps {
+export interface TabButtonProps extends MaxWidthProps {
     /** Indication if tab is active or not */
     active: boolean;
 }

package/lib/theme/colors.d.ts

@@ -1,11 +1,5 @@
 declare const themeColors: {
     'brand-primary': string;
-    /** Stop using these values -------- */
-    'accent-focus': string;
-    'accent-hover': string;
-    'accent-active': string;
-    'accent-disabled': string;
-    /** --------------------------------- */
     'accent-primary': string;
     'accent-primary-hover': string;
     'accent-primary-focus': string;
@@ -28,6 +22,7 @@ declare const themeColors: {
     'accent-danger-disabled': string;
     'accent-warning': string;
     'accent-info': string;
+    'accent-attention': string;
     'text-primary': string;
     'text-secondary': string;
     'text-complementary': string;
@@ -37,12 +32,14 @@ declare const themeColors: {
     'text-success': string;
     'text-warning': string;
     'text-danger': string;
+    'text-attention': string;
     'background-primary': string;
     'background-secondary': string;
     'background-info': string;
     'background-success': string;
     'background-warning': string;
     'background-danger': string;
+    'background-attention': string;
     'background-neutral': string;
     'control-border': string;
     'control-background': string;
@@ -69,6 +66,15 @@ declare const themeColors: {
     'neutral-100': string;
     'neutral-50': string;
     'neutral-0': string;
+    'secondary-100': string;
+    'secondary-200': string;
+    'secondary-300': string;
+    'secondary-400': string;
+    'secondary-500': string;
+    'secondary-600': string;
+    'secondary-700': string;
+    'secondary-800': string;
+    'secondary-900': string;
     'blue-900': string;
     'blue-800': string;
     'blue-700': string;
@@ -79,6 +85,7 @@ declare const themeColors: {
     'blue-200': string;
     'blue-100': string;
     'blue-50': string;
+    /** @deprecated Use black-50 instead */
     'blue-0': string;
     'black-700': string;
     'black-600': string;
@@ -90,7 +97,16 @@ declare const themeColors: {
     'black-80': string;
     'black-60': string;
     'black-50': string;
-    'black-0': string;
+    white: string;
+    'purple-100': string;
+    'purple-200': string;
+    'purple-300': string;
+    'purple-400': string;
+    'purple-500': string;
+    'purple-600': string;
+    'purple-700': string;
+    'purple-800': string;
+    'purple-900': string;
     'red-400': string;
     'red-300': string;
     'red-200': string;

package/lib/theme/colors.js

@@ -3,7 +3,7 @@ var baseColors = {
   // BLUE
   'blue-900': '#0052CC',
   'blue-800': '#2562EA',
-  'blue-700': '#2A6CFF',
+  'blue-700': '#286CFC',
   'blue-600': '#3E7AFF',
   'blue-500': '#6695FF',
   'blue-400': '#94B4FF',
@@ -11,6 +11,8 @@ var baseColors = {
   'blue-200': '#D0DDFE',
   'blue-100': '#DDE6FF',
   'blue-50': '#EBF1FF',
+
+  /** @deprecated Use black-50 instead */
   'blue-0': '#F9FBFF',
   // BLACK
   'black-700': '#172B4D',
@@ -23,7 +25,18 @@ var baseColors = {
   'black-80': '#E5ECF5',
   'black-60': '#F2F5FD',
   'black-50': '#F5F8FE',
-  'black-0': '#FFFFFF',
+  // WHITE
+  white: '#FFFFFF',
+  // PURPLE
+  'purple-100': '#FAF7FD',
+  'purple-200': '#DECDF4',
+  'purple-300': '#C3A3EB',
+  'purple-400': '#A77AE1',
+  'purple-500': '#8C50D8',
+  'purple-600': '#712DC8',
+  'purple-700': '#5A239E',
+  'purple-800': '#421A75',
+  'purple-900': '#2A114B',
   // REDS
   'red-400': '#C92C22',
   'red-300': '#E04440',
@@ -43,14 +56,6 @@ var baseColors = {
 };
 var functionalColors = {
   'brand-primary': baseColors['blue-700'],
-
-  /** Stop using these values -------- */
-  'accent-focus': baseColors['blue-600'],
-  'accent-hover': baseColors['blue-800'],
-  'accent-active': baseColors['blue-900'],
-  'accent-disabled': baseColors['blue-400'],
-
-  /** --------------------------------- */
   'accent-primary': baseColors['blue-700'],
   'accent-primary-hover': baseColors['blue-800'],
   'accent-primary-focus': baseColors['blue-800'],
@@ -72,25 +77,28 @@ var functionalColors = {
   'accent-danger-active': baseColors['red-400'],
   'accent-danger-disabled': baseColors['red-100'],
   'accent-warning': baseColors['orange-100'],
-  'accent-info': baseColors['blue-700'],
+  'accent-info': baseColors['blue-600'],
+  'accent-attention': baseColors['purple-400'],
   'text-primary': baseColors['black-700'],
   'text-secondary': baseColors['black-400'],
   'text-complementary': baseColors['black-300'],
-  'text-invert': baseColors['black-0'],
+  'text-invert': baseColors['white'],
   'text-placeholder': baseColors['black-200'],
   'text-info': baseColors['blue-800'],
   'text-success': baseColors['green-300'],
   'text-warning': baseColors['orange-200'],
   'text-danger': baseColors['red-400'],
-  'background-primary': baseColors['black-0'],
+  'text-attention': baseColors['purple-600'],
+  'background-primary': baseColors['white'],
   'background-secondary': baseColors['black-50'],
   'background-info': baseColors['blue-50'],
   'background-success': baseColors['green-50'],
   'background-warning': baseColors['orange-50'],
   'background-danger': baseColors['red-50'],
+  'background-attention': baseColors['purple-100'],
   'background-neutral': baseColors['black-80'],
   'control-border': baseColors['blue-300'],
-  'control-background': baseColors['black-0'],
+  'control-background': baseColors['white'],
   'control-active-background': baseColors['black-60'],
   'control-active-border': baseColors['blue-700'],
   'control-invalid-border': baseColors['red-200'],
@@ -114,7 +122,17 @@ var functionalColors = {
   'neutral-200': baseColors['black-80'],
   'neutral-100': baseColors['black-60'],
   'neutral-50': baseColors['black-50'],
-  'neutral-0': baseColors['black-0']
+  'neutral-0': baseColors['white'],
+  // SECONDARY
+  'secondary-100': baseColors['purple-100'],
+  'secondary-200': baseColors['purple-200'],
+  'secondary-300': baseColors['purple-300'],
+  'secondary-400': baseColors['purple-400'],
+  'secondary-500': baseColors['purple-500'],
+  'secondary-600': baseColors['purple-600'],
+  'secondary-700': baseColors['purple-700'],
+  'secondary-800': baseColors['purple-800'],
+  'secondary-900': baseColors['purple-900']
 };
 
 var themeColors = _objectSpread(_objectSpread({}, baseColors), functionalColors);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codacy/ui-components",
-  "version": "0.50.5",
+  "version": "0.52.1",
   "description": "",
   "license": "ISC",
   "author": "",