@codacy/ui-components 0.67.58 → 0.67.65

package/lib/DiffCaption/DiffCaption.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DiffCaptionProps } from './DiffCaption.types';
+/**
+ * Displays the variation between a value and a previous value, color coded by
+ * whether that variation is an improvement or a regression.
+ */
+export declare const DiffCaption: React.FC<DiffCaptionProps>;

package/lib/DiffCaption/DiffCaption.js

@@ -0,0 +1,128 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import numeral from 'numeral';
+import { lowerCase } from 'lodash';
+import { ArrowDownIcon, ArrowUpIcon, EqualsIcon } from '../Icons';
+import { Caption, DataPoint, Paragraph } from '../Typography';
+import { IconAndText } from '../IconAndText';
+import { Icon } from '../Icon';
+import { Flex } from '../Flexbox';
+import { Tooltip } from '../Tooltip';
+const diffColors = {
+  good: {
+    text: 'text-success',
+    background: 'background-success',
+    icon: 'icon-success'
+  },
+  bad: {
+    text: 'text-danger',
+    background: 'background-danger',
+    icon: 'icon-danger'
+  },
+  neutral: {
+    text: 'text-tertiary',
+    background: 'background-primary',
+    icon: 'icon-disabled'
+  }
+};
+const iconDetails = {
+  increase: {
+    icon: ArrowUpIcon,
+    title: 'Increase'
+  },
+  decrease: {
+    icon: ArrowDownIcon,
+    title: 'Decrease'
+  },
+  'no-diff': {
+    icon: EqualsIcon,
+    title: 'No change'
+  }
+};
+
+/**
+ * Displays the variation between a value and a previous value, color coded by
+ * whether that variation is an improvement or a regression.
+ */
+export const DiffCaption = ({
+  value,
+  previousValue,
+  isPercentage = false,
+  greaterIsBetter = false,
+  noSeverity = false,
+  onlyIcon = false,
+  format = '+0[.]00a',
+  periodComparison,
+  size = 'md',
+  ...other
+}) => {
+  if (value === undefined || previousValue === undefined) return null;
+  const {
+    m,
+    mt,
+    mb,
+    ml,
+    mr
+  } = other;
+  const marginProps = {
+    m,
+    mt,
+    mb,
+    ml,
+    mr
+  };
+  const variation = Math.abs(value - previousValue) < (isPercentage ? 0.0001 : 0.01) ? 'no-diff' : value > previousValue ? 'increase' : 'decrease';
+  const diff = variation === 'no-diff' ? 'neutral' : greaterIsBetter ? variation === 'increase' ? 'good' : 'bad' : variation === 'increase' ? 'bad' : 'good';
+  const diffIcon = iconDetails[variation];
+  const diffValue = variation === 'no-diff' ? '0' : numeral(value - previousValue).format(format);
+  const diffElement = isPercentage ? /*#__PURE__*/React.createElement(React.Fragment, null, diffValue, " ", isPercentage && /*#__PURE__*/React.createElement("small", null, " %")) : /*#__PURE__*/React.createElement(React.Fragment, null, diffValue);
+  if (diff === 'neutral' && onlyIcon) {
+    return /*#__PURE__*/React.createElement(Icon, _extends({}, marginProps, {
+      icon: EqualsIcon,
+      title: "No change",
+      color: diffColors[diff].icon,
+      size: size,
+      mr: 2
+    }));
+  }
+  return onlyIcon ? /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(Flex, {
+      alignItems: "center",
+      my: -2,
+      flexWrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Icon, _extends({}, diffIcon, {
+      color: diffColors[diff].icon,
+      size: "md",
+      mr: 1
+    })), /*#__PURE__*/React.createElement(DataPoint, {
+      value: value - previousValue,
+      format: format,
+      color: diffColors[diff].text,
+      showPercentage: isPercentage
+    }), ' ', periodComparison && /*#__PURE__*/React.createElement(Paragraph, {
+      size: "sm",
+      color: diffColors[diff].text,
+      ml: 1
+    }, "vs ", lowerCase(periodComparison))),
+    maxWidth: "fit-content",
+    backgroundColor: diffColors[diff].background
+  }, /*#__PURE__*/React.createElement(Icon, _extends({}, diffIcon, marginProps, {
+    style: {
+      pointerEvents: 'none'
+    },
+    color: noSeverity ? 'icon-enabled' : diffColors[diff].icon,
+    size: size,
+    mr: 2
+  }))) : /*#__PURE__*/React.createElement(Caption, _extends({
+    color: diffColors[noSeverity ? 'neutral' : diff].text,
+    as: "div"
+  }, other), /*#__PURE__*/React.createElement(IconAndText, {
+    icon: diffIcon.icon,
+    iconProps: {
+      scale: 0.9,
+      title: diffIcon.title,
+      size
+    },
+    toRight: true
+  }, diffElement));
+};

package/lib/DiffCaption/DiffCaption.types.d.ts

@@ -0,0 +1,22 @@
+import { CaptionProps } from '../Typography';
+type CompareAgainstValueType = 'previous-day' | 'previous-week' | 'previous-month';
+export interface DiffCaptionProps extends CaptionProps {
+    /** The current value to compare */
+    value?: number;
+    /** The value to compare against */
+    previousValue?: number;
+    /** Renders the values as percentages */
+    isPercentage?: boolean;
+    /** Determines whether an increase is a positive or a negative variation */
+    greaterIsBetter?: boolean;
+    /** Renders the variation without the good/bad color coding */
+    noSeverity?: boolean;
+    /** Renders only the variation icon, with the values in a tooltip */
+    onlyIcon?: boolean;
+    /** Numeral format for the variation value */
+    format?: string;
+    /** The period the current value is being compared against */
+    periodComparison?: CompareAgainstValueType;
+}
+export type DiffTypes = 'good' | 'bad' | 'neutral';
+export {};

package/lib/DiffCaption/DiffCaption.types.js

@@ -0,0 +1 @@
+export {};

package/lib/DiffCaption/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DiffCaption';
+export * from './DiffCaption.types';

package/lib/DiffCaption/index.js

@@ -0,0 +1,2 @@
+export * from './DiffCaption';
+export * from './DiffCaption.types';

package/lib/Icons/Arrows.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const ArrowUpIcon: () => React.JSX.Element;
+export declare const ArrowDownIcon: () => React.JSX.Element;

package/lib/Icons/Arrows.js

@@ -0,0 +1,23 @@
+import React from 'react';
+export const ArrowUpIcon = () => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  className: "ionicon",
+  viewBox: "0 0 512 512"
+}, /*#__PURE__*/React.createElement("path", {
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: "48",
+  d: "M112 244l144-144 144 144M256 120v292",
+  className: "ionicon-fill-none"
+}));
+export const ArrowDownIcon = () => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  className: "ionicon",
+  viewBox: "0 0 512 512"
+}, /*#__PURE__*/React.createElement("path", {
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: "48",
+  d: "M112 268l144 144 144-144M256 392V100",
+  className: "ionicon-fill-none"
+}));

package/lib/Icons/Grades/GradeA.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GradeA: () => React.JSX.Element;

package/lib/Icons/Grades/GradeA.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+export const GradeA = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 51 51",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "25.1255",
+    cy: "25.1255",
+    r: "25.1255",
+    fill: theme.colors['grades-background-elite']
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M29.7479 30.6688H20.188L17.7004 36.1808H14.0703L25.1198 12.0603L35.7788 36.1808H32.0908L29.7479 30.6688ZM28.3739 27.4498L25.0619 19.733L21.5909 27.4498H28.3739Z",
+    fill: theme.colors['grades-text']
+  }));
+};

package/lib/Icons/Grades/GradeB.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GradeB: () => React.JSX.Element;

package/lib/Icons/Grades/GradeB.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+export const GradeB = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 51 51",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "25.9693",
+    cy: "25.1255",
+    r: "25.1255",
+    fill: theme.colors['grades-background-high']
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M20.4453 37.1858V13.0653H24.0696C25.6839 13.0653 26.9701 13.1903 27.9283 13.4402C28.8969 13.6902 29.7144 14.112 30.381 14.7056C31.0579 15.3201 31.5943 16.0856 31.99 17.0021C32.3962 17.929 32.5993 18.8663 32.5993 19.8141C32.5993 21.5429 31.938 23.0062 30.6153 24.2039C31.8963 24.6413 32.9065 25.4068 33.646 26.5003C34.3959 27.5834 34.7708 28.8436 34.7708 30.2809C34.7708 32.1659 34.1042 33.7594 32.7712 35.0612C31.9692 35.8632 31.0683 36.4204 30.0685 36.7328C28.975 37.0348 27.6054 37.1858 25.9599 37.1858H20.4453ZM24.0853 23.4228H25.2257C26.5796 23.4228 27.569 23.1259 28.1939 22.5323C28.8292 21.9282 29.1468 21.043 29.1468 19.8765C29.1468 18.7413 28.824 17.8821 28.1783 17.2989C27.5325 16.7053 26.5952 16.4084 25.3663 16.4084H24.0853V23.4228ZM24.0853 33.7646H26.3348C27.9804 33.7646 29.1885 33.4417 29.9592 32.796C30.7715 32.0982 31.1777 31.213 31.1777 30.1403C31.1777 29.0988 30.7871 28.224 30.006 27.5158C29.2458 26.818 27.8866 26.4691 25.9287 26.4691H24.0853V33.7646Z",
+    fill: theme.colors['grades-text']
+  }));
+};

package/lib/Icons/Grades/GradeC.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GradeC: () => React.JSX.Element;

package/lib/Icons/Grades/GradeC.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+export const GradeC = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 51 51",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "25.813",
+    cy: "25.1255",
+    r: "25.1255",
+    fill: theme.colors['grades-background-medium']
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M33.5966 14.7667V18.9223C31.569 17.2259 29.4712 16.3777 27.303 16.3777C24.9141 16.3777 22.9015 17.236 21.2654 18.9524C19.6192 20.6588 18.7961 22.7466 18.7961 25.2159C18.7961 27.6551 19.6192 29.7128 21.2654 31.3891C22.9115 33.0654 24.9291 33.9035 27.3181 33.9035C28.5527 33.9035 29.6016 33.7028 30.4649 33.3013C30.9467 33.1005 31.4436 32.8295 31.9555 32.4882C32.4774 32.1469 33.0245 31.7354 33.5966 31.2536V35.4844C31.5891 36.6187 29.4812 37.1858 27.2729 37.1858C23.9504 37.1858 21.1148 36.0265 18.766 33.7078C16.4272 31.369 15.2578 28.5484 15.2578 25.246C15.2578 22.2849 16.2365 19.645 18.1938 17.3263C20.6029 14.4856 23.7196 13.0653 27.5439 13.0653C29.6318 13.0653 31.6493 13.6324 33.5966 14.7667Z",
+    fill: theme.colors['grades-text']
+  }));
+};

package/lib/Icons/Grades/GradeD.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GradeD: () => React.JSX.Element;

package/lib/Icons/Grades/GradeD.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+export const GradeD = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 51 51",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "25.6636",
+    cy: "25.1255",
+    r: "25.1255",
+    fill: theme.colors['grades-background-low']
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M18.1318 37.1858V13.0653H23.1934C25.62 13.0653 27.5363 13.3048 28.9423 13.7839C30.4525 14.2526 31.822 15.0493 33.0509 16.1741C35.5401 18.4445 36.7846 21.4283 36.7846 25.1256C36.7846 28.8332 35.488 31.8327 32.8947 34.1239C31.5929 35.2695 30.2285 36.0663 28.8017 36.5141C27.4686 36.9619 25.5784 37.1858 23.1309 37.1858H18.1318ZM21.7718 33.7646H23.4121C25.0472 33.7646 26.4063 33.5928 27.4895 33.2491C28.5726 32.8846 29.5516 32.3065 30.4264 31.515C32.2178 29.8799 33.1134 27.7501 33.1134 25.1256C33.1134 22.4802 32.2282 20.3348 30.4577 18.6893C28.8642 17.2208 26.5157 16.4865 23.4121 16.4865H21.7718V33.7646Z",
+    fill: theme.colors['grades-text']
+  }));
+};

package/lib/Icons/Grades/GradeE.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GradeE: () => React.JSX.Element;

package/lib/Icons/Grades/GradeE.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+export const GradeE = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 51 51",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "26.023",
+    cy: "25.1255",
+    r: "25.1255",
+    fill: theme.colors['grades-background-generic']
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M32.8012 16.4865H23.1312V22.2823H32.52V25.7036H23.1312V33.7646H32.8012V37.1858H19.4912V13.0653H32.8012V16.4865Z",
+    fill: theme.colors['grades-text']
+  }));
+};

package/lib/Icons/Grades/GradeError.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GradeError: () => React.JSX.Element;

package/lib/Icons/Grades/GradeError.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+export const GradeError = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-name": "Layer 1",
+    viewBox: "0 0 40 40"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "20",
+    fill: theme.colors['grades-background-icon']
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: theme.colors['grades-text'],
+    d: "M21.71 22.12h-3.42V10.94h3.42v11.18zm0 5.88h-3.42v-3h3.42v3z"
+  }));
+};

package/lib/Icons/Grades/GradeF.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GradeF: () => React.JSX.Element;

package/lib/Icons/Grades/GradeF.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+export const GradeF = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 51 51",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "25.8746",
+    cy: "25.1255",
+    r: "25.1255",
+    fill: theme.colors['grades-background-other']
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M32.8952 16.4865H24.4905V22.2823H32.5984V25.7036H24.4905V37.1858H20.8506V13.0653H32.8952V16.4865Z",
+    fill: theme.colors['grades-text']
+  }));
+};

package/lib/Icons/Grades/index.d.ts

@@ -0,0 +1,7 @@
+export * from './GradeA';
+export * from './GradeB';
+export * from './GradeC';
+export * from './GradeD';
+export * from './GradeE';
+export * from './GradeF';
+export * from './GradeError';

package/lib/Icons/Grades/index.js

@@ -0,0 +1,7 @@
+export * from './GradeA';
+export * from './GradeB';
+export * from './GradeC';
+export * from './GradeD';
+export * from './GradeE';
+export * from './GradeF';
+export * from './GradeError';

package/lib/Icons/Symbols.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { AllColorsKeys } from '../theme/ColorSchemes/light';
 export declare const CheckIcon: () => React.JSX.Element;
 export declare const MinusIcon: () => React.JSX.Element;
+export declare const EqualsIcon: () => React.JSX.Element;
 export declare const CloseIcon: () => React.JSX.Element;
 export declare const DangerIcon: () => React.JSX.Element;
 export declare const RocketIcon: React.FC<{

package/lib/Icons/Symbols.js

@@ -20,6 +20,16 @@ export const MinusIcon = () => /*#__PURE__*/React.createElement("svg", {
   d: "M400 256H112",
   className: "ionicon-fill-none ionicon-stroke-width"
 }));
+export const EqualsIcon = () => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  className: "ionicon",
+  viewBox: "0 0 512 512"
+}, /*#__PURE__*/React.createElement("path", {
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  d: "M112 304h288M112 208h288",
+  className: "ionicon-fill-none ionicon-stroke-width"
+}));
 export const CloseIcon = () => /*#__PURE__*/React.createElement("svg", {
   className: "ionicon close-icon",
   viewBox: "0 0 512 512"

package/lib/Icons/index.d.ts

@@ -1,8 +1,10 @@
 export * from './Search';
 export * from './Spinner';
+export * from './Arrows';
 export * from './Chevrons';
 export * from './Sorting';
 export * from './Symbols';
 export * from './Messages';
 export * from './Severities';
+export * from './Grades';
 export * from './CodacyIcon';

package/lib/Icons/index.js

@@ -1,8 +1,10 @@
 export * from './Search';
 export * from './Spinner';
+export * from './Arrows';
 export * from './Chevrons';
 export * from './Sorting';
 export * from './Symbols';
 export * from './Messages';
 export * from './Severities';
+export * from './Grades';
 export * from './CodacyIcon';

package/lib/QuickFilter/QuickFilter.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { QuickFilterOptionProps } from './QuickFilter.types';
+import { RectSkeletonProps } from '../Skeleton/Skeleton.types';
+/**
+ * A column of filter options, optionally split into groups. Selection state lives with the
+ * consumer: pass `selected` and handle `onClick`.
+ */
+export declare const QuickFilter: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+} & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("../Flexbox").As & {
+    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, import("..").CodacyTheme> | undefined;
+} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & import("..").FlexboxProps, {}, {}> & {
+    Option: React.FC<QuickFilterOptionProps>;
+    Group: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    } & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("../Flexbox").As & {
+        fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, import("..").CodacyTheme> | undefined;
+    } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+        theme?: import("@emotion/react").Theme | undefined;
+    } & import("..").FlexboxProps, {}, {}>;
+    OptionSkeleton: React.FC<RectSkeletonProps>;
+};

package/lib/QuickFilter/QuickFilter.js

@@ -0,0 +1,62 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { QuickFilterBaseElement, QuickFilterGroupElement, QuickFilterOptionElement, QuickFilterOptionLabel } from './QuickFilter.styles';
+import { Box, Flex } from '../Flexbox';
+import { IconAndText } from '../IconAndText';
+import { MoreInfo } from '../MoreInfo';
+import { Skeleton } from '../Skeleton';
+const QuickFilterOption = ({
+  selected,
+  onClick,
+  value,
+  helpText,
+  size = 'md',
+  icon,
+  iconProps,
+  count,
+  label,
+  ...props
+}) => /*#__PURE__*/React.createElement(QuickFilterOptionElement, _extends({}, props, {
+  onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(value),
+  size: size,
+  selected: selected,
+  "aria-selected": selected
+}), /*#__PURE__*/React.createElement(Flex, {
+  alignItems: "center",
+  id: `${label === null || label === void 0 ? void 0 : label.toString().replace(/\s+/g, '-').toLowerCase()}-filter`
+}, icon ? /*#__PURE__*/React.createElement(IconAndText, {
+  icon: icon,
+  iconProps: iconProps
+}, /*#__PURE__*/React.createElement(QuickFilterOptionLabel, null, label)) : /*#__PURE__*/React.createElement(QuickFilterOptionLabel, null, label), helpText && /*#__PURE__*/React.createElement(Box, {
+  flexShrink: 0,
+  ml: 1
+}, /*#__PURE__*/React.createElement(MoreInfo, {
+  helpContent: helpText,
+  inline: true,
+  style: {
+    transform: 'translateY(2px)'
+  }
+})), count !== undefined && /*#__PURE__*/React.createElement(Box, {
+  flexShrink: 0,
+  flexGrow: 1,
+  textAlign: "right",
+  ml: 1
+}, count)));
+const QuickFilterOptionSkeleton = ({
+  height = 24,
+  width = 100,
+  ...props
+}) => /*#__PURE__*/React.createElement(Skeleton.Rect, _extends({
+  height: height,
+  width: width
+}, props));
+
+/**
+ * A column of filter options, optionally split into groups. Selection state lives with the
+ * consumer: pass `selected` and handle `onClick`.
+ */
+export const QuickFilter = Object.assign(QuickFilterBaseElement, {
+  Option: QuickFilterOption,
+  Group: QuickFilterGroupElement,
+  OptionSkeleton: QuickFilterOptionSkeleton
+});

package/lib/QuickFilter/QuickFilter.styles.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const QuickFilterBaseElement: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("../Flexbox").As & {
+    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, import("..").CodacyTheme> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & import("..").FlexboxProps, {}, {}>;
+export declare const QuickFilterGroupElement: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("../Flexbox").As & {
+    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, import("..").CodacyTheme> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & import("..").FlexboxProps, {}, {}>;
+export declare const QuickFilterOptionLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const QuickFilterOptionElement: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & Pick<import("..").LinkProps, "size" | "styleType"> & import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    selected?: boolean | undefined;
+}, {}, {}>;

package/lib/QuickFilter/QuickFilter.styles.js

@@ -0,0 +1,57 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { Flex } from '../Flexbox';
+import { StyledLink } from '../Link/Link.styles';
+import { IconAndTextWrapper } from '../IconAndText/IconAndText.styles';
+export const QuickFilterBaseElement = /*#__PURE__*/_styled(Flex, process.env.NODE_ENV === "production" ? {
+  target: "ebw50jb3"
+} : {
+  target: "ebw50jb3",
+  label: "codacy"
+})(process.env.NODE_ENV === "production" ? {
+  name: "qdeacm",
+  styles: "flex-direction:column"
+} : {
+  name: "qdeacm",
+  styles: "flex-direction:column/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9RdWlja0ZpbHRlci9RdWlja0ZpbHRlci5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2tEIiwiZmlsZSI6Ii4uLy4uL3NyYy9RdWlja0ZpbHRlci9RdWlja0ZpbHRlci5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IEZsZXggfSBmcm9tICcuLi9GbGV4Ym94J1xuaW1wb3J0IHsgU3R5bGVkTGluayB9IGZyb20gJy4uL0xpbmsvTGluay5zdHlsZXMnXG5pbXBvcnQgeyBJY29uQW5kVGV4dFdyYXBwZXIgfSBmcm9tICcuLi9JY29uQW5kVGV4dC9JY29uQW5kVGV4dC5zdHlsZXMnXG5cbmV4cG9ydCBjb25zdCBRdWlja0ZpbHRlckJhc2VFbGVtZW50ID0gc3R5bGVkKEZsZXgpYFxuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuYFxuXG5leHBvcnQgY29uc3QgUXVpY2tGaWx0ZXJHcm91cEVsZW1lbnQgPSBzdHlsZWQoRmxleClgXG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbMl19IDA7XG5cbiAgJjpub3QoOmxhc3QtY2hpbGQpIHtcbiAgICBib3JkZXItYm90dG9tOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmJvcmRlcnNbMF19O1xuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBRdWlja0ZpbHRlck9wdGlvbkxhYmVsID0gc3R5bGVkLnNwYW5gXG4gIGRpc3BsYXk6IGJsb2NrO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgbWluLXdpZHRoOiAwO1xuYFxuXG5leHBvcnQgY29uc3QgUXVpY2tGaWx0ZXJPcHRpb25FbGVtZW50ID0gc3R5bGVkKFN0eWxlZExpbmspPHsgc2VsZWN0ZWQ/OiBib29sZWFuIH0+YFxuICBmbGV4LWdyb3c6IDE7XG4gIG1hcmdpbjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsxXX0gMDtcblxuICB0cmFuc2l0aW9uOiBjb2xvciAwLjNzIGVhc2UtaW4tb3V0O1xuICBjb2xvcjogJHsoeyB0aGVtZSwgc2VsZWN0ZWQgfSkgPT4gdGhlbWUuY29sb3JzW3NlbGVjdGVkID8gJ3RleHQtaW5mbycgOiAndGV4dC1zZWNvbmRhcnknXX07XG4gIGZvbnQtd2VpZ2h0OiAkeyh7IHNlbGVjdGVkLCB0aGVtZSB9KSA9PiB0aGVtZS5mb250V2VpZ2h0c1tzZWxlY3RlZCA/ICdzZW1pLWJvbGQnIDogJ3JlZ3VsYXInXX07XG5cbiAgLyogZmxleCBpdGVtcyBkZWZhdWx0IHRvIG1pbi13aWR0aDogYXV0bywgd2hpY2ggd291bGQgZGVmZWF0IHRoZSBsYWJlbCdzIGVsbGlwc2lzLiBXaXRoIGFuXG4gICAgIGljb24gdGhlIGxhYmVsIHNpdHMgaW5zaWRlIEljb25BbmRUZXh0J3Mgb3duIHNwYW4sIHNvIGJvdGggbGV2ZWxzIGhhdmUgdG8gZ2l2ZSB3YXkuICovXG4gICR7SWNvbkFuZFRleHRXcmFwcGVyfSB7XG4gICAgbWluLXdpZHRoOiAwO1xuXG4gICAgPiBzcGFuIHtcbiAgICAgIG1pbi13aWR0aDogMDtcbiAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgfVxuICB9XG5cbiAgJjpob3ZlciB7XG4gICAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWyd0ZXh0LWluZm8nXX07XG4gIH1cbmBcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const QuickFilterGroupElement = /*#__PURE__*/_styled(Flex, process.env.NODE_ENV === "production" ? {
+  target: "ebw50jb2"
+} : {
+  target: "ebw50jb2",
+  label: "codacy"
+})("flex-direction:column;padding:", ({
+  theme
+}) => theme.space[2], " 0;&:not(:last-child){border-bottom:", ({
+  theme
+}) => theme.borders[0], ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9RdWlja0ZpbHRlci9RdWlja0ZpbHRlci5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU21EIiwiZmlsZSI6Ii4uLy4uL3NyYy9RdWlja0ZpbHRlci9RdWlja0ZpbHRlci5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IEZsZXggfSBmcm9tICcuLi9GbGV4Ym94J1xuaW1wb3J0IHsgU3R5bGVkTGluayB9IGZyb20gJy4uL0xpbmsvTGluay5zdHlsZXMnXG5pbXBvcnQgeyBJY29uQW5kVGV4dFdyYXBwZXIgfSBmcm9tICcuLi9JY29uQW5kVGV4dC9JY29uQW5kVGV4dC5zdHlsZXMnXG5cbmV4cG9ydCBjb25zdCBRdWlja0ZpbHRlckJhc2VFbGVtZW50ID0gc3R5bGVkKEZsZXgpYFxuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuYFxuXG5leHBvcnQgY29uc3QgUXVpY2tGaWx0ZXJHcm91cEVsZW1lbnQgPSBzdHlsZWQoRmxleClgXG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbMl19IDA7XG5cbiAgJjpub3QoOmxhc3QtY2hpbGQpIHtcbiAgICBib3JkZXItYm90dG9tOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmJvcmRlcnNbMF19O1xuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBRdWlja0ZpbHRlck9wdGlvbkxhYmVsID0gc3R5bGVkLnNwYW5gXG4gIGRpc3BsYXk6IGJsb2NrO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgbWluLXdpZHRoOiAwO1xuYFxuXG5leHBvcnQgY29uc3QgUXVpY2tGaWx0ZXJPcHRpb25FbGVtZW50ID0gc3R5bGVkKFN0eWxlZExpbmspPHsgc2VsZWN0ZWQ/OiBib29sZWFuIH0+YFxuICBmbGV4LWdyb3c6IDE7XG4gIG1hcmdpbjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsxXX0gMDtcblxuICB0cmFuc2l0aW9uOiBjb2xvciAwLjNzIGVhc2UtaW4tb3V0O1xuICBjb2xvcjogJHsoeyB0aGVtZSwgc2VsZWN0ZWQgfSkgPT4gdGhlbWUuY29sb3JzW3NlbGVjdGVkID8gJ3RleHQtaW5mbycgOiAndGV4dC1zZWNvbmRhcnknXX07XG4gIGZvbnQtd2VpZ2h0OiAkeyh7IHNlbGVjdGVkLCB0aGVtZSB9KSA9PiB0aGVtZS5mb250V2VpZ2h0c1tzZWxlY3RlZCA/ICdzZW1pLWJvbGQnIDogJ3JlZ3VsYXInXX07XG5cbiAgLyogZmxleCBpdGVtcyBkZWZhdWx0IHRvIG1pbi13aWR0aDogYXV0bywgd2hpY2ggd291bGQgZGVmZWF0IHRoZSBsYWJlbCdzIGVsbGlwc2lzLiBXaXRoIGFuXG4gICAgIGljb24gdGhlIGxhYmVsIHNpdHMgaW5zaWRlIEljb25BbmRUZXh0J3Mgb3duIHNwYW4sIHNvIGJvdGggbGV2ZWxzIGhhdmUgdG8gZ2l2ZSB3YXkuICovXG4gICR7SWNvbkFuZFRleHRXcmFwcGVyfSB7XG4gICAgbWluLXdpZHRoOiAwO1xuXG4gICAgPiBzcGFuIHtcbiAgICAgIG1pbi13aWR0aDogMDtcbiAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgfVxuICB9XG5cbiAgJjpob3ZlciB7XG4gICAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWyd0ZXh0LWluZm8nXX07XG4gIH1cbmBcbiJdfQ== */"));
+export const QuickFilterOptionLabel = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production" ? {
+  target: "ebw50jb1"
+} : {
+  target: "ebw50jb1",
+  label: "codacy"
+})(process.env.NODE_ENV === "production" ? {
+  name: "wuzzic",
+  styles: "display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0"
+} : {
+  name: "wuzzic",
+  styles: "display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9RdWlja0ZpbHRlci9RdWlja0ZpbHRlci5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JpRCIsImZpbGUiOiIuLi8uLi9zcmMvUXVpY2tGaWx0ZXIvUXVpY2tGaWx0ZXIuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBGbGV4IH0gZnJvbSAnLi4vRmxleGJveCdcbmltcG9ydCB7IFN0eWxlZExpbmsgfSBmcm9tICcuLi9MaW5rL0xpbmsuc3R5bGVzJ1xuaW1wb3J0IHsgSWNvbkFuZFRleHRXcmFwcGVyIH0gZnJvbSAnLi4vSWNvbkFuZFRleHQvSWNvbkFuZFRleHQuc3R5bGVzJ1xuXG5leHBvcnQgY29uc3QgUXVpY2tGaWx0ZXJCYXNlRWxlbWVudCA9IHN0eWxlZChGbGV4KWBcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbmBcblxuZXhwb3J0IGNvbnN0IFF1aWNrRmlsdGVyR3JvdXBFbGVtZW50ID0gc3R5bGVkKEZsZXgpYFxuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWzJdfSAwO1xuXG4gICY6bm90KDpsYXN0LWNoaWxkKSB7XG4gICAgYm9yZGVyLWJvdHRvbTogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5ib3JkZXJzWzBdfTtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgUXVpY2tGaWx0ZXJPcHRpb25MYWJlbCA9IHN0eWxlZC5zcGFuYFxuICBkaXNwbGF5OiBibG9jaztcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIG1pbi13aWR0aDogMDtcbmBcblxuZXhwb3J0IGNvbnN0IFF1aWNrRmlsdGVyT3B0aW9uRWxlbWVudCA9IHN0eWxlZChTdHlsZWRMaW5rKTx7IHNlbGVjdGVkPzogYm9vbGVhbiB9PmBcbiAgZmxleC1ncm93OiAxO1xuICBtYXJnaW46ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbMV19IDA7XG5cbiAgdHJhbnNpdGlvbjogY29sb3IgMC4zcyBlYXNlLWluLW91dDtcbiAgY29sb3I6ICR7KHsgdGhlbWUsIHNlbGVjdGVkIH0pID0+IHRoZW1lLmNvbG9yc1tzZWxlY3RlZCA/ICd0ZXh0LWluZm8nIDogJ3RleHQtc2Vjb25kYXJ5J119O1xuICBmb250LXdlaWdodDogJHsoeyBzZWxlY3RlZCwgdGhlbWUgfSkgPT4gdGhlbWUuZm9udFdlaWdodHNbc2VsZWN0ZWQgPyAnc2VtaS1ib2xkJyA6ICdyZWd1bGFyJ119O1xuXG4gIC8qIGZsZXggaXRlbXMgZGVmYXVsdCB0byBtaW4td2lkdGg6IGF1dG8sIHdoaWNoIHdvdWxkIGRlZmVhdCB0aGUgbGFiZWwncyBlbGxpcHNpcy4gV2l0aCBhblxuICAgICBpY29uIHRoZSBsYWJlbCBzaXRzIGluc2lkZSBJY29uQW5kVGV4dCdzIG93biBzcGFuLCBzbyBib3RoIGxldmVscyBoYXZlIHRvIGdpdmUgd2F5LiAqL1xuICAke0ljb25BbmRUZXh0V3JhcHBlcn0ge1xuICAgIG1pbi13aWR0aDogMDtcblxuICAgID4gc3BhbiB7XG4gICAgICBtaW4td2lkdGg6IDA7XG4gICAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIH1cbiAgfVxuXG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1sndGV4dC1pbmZvJ119O1xuICB9XG5gXG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const QuickFilterOptionElement = /*#__PURE__*/_styled(StyledLink, process.env.NODE_ENV === "production" ? {
+  target: "ebw50jb0"
+} : {
+  target: "ebw50jb0",
+  label: "codacy"
+})("flex-grow:1;margin:", ({
+  theme
+}) => theme.space[1], " 0;transition:color 0.3s ease-in-out;color:", ({
+  theme,
+  selected
+}) => theme.colors[selected ? 'text-info' : 'text-secondary'], ";font-weight:", ({
+  selected,
+  theme
+}) => theme.fontWeights[selected ? 'semi-bold' : 'regular'], ";", IconAndTextWrapper, "{min-width:0;>span{min-width:0;overflow:hidden;}}&:hover{color:", ({
+  theme
+}) => theme.colors['text-info'], ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9RdWlja0ZpbHRlci9RdWlja0ZpbHRlci5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJrRiIsImZpbGUiOiIuLi8uLi9zcmMvUXVpY2tGaWx0ZXIvUXVpY2tGaWx0ZXIuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBGbGV4IH0gZnJvbSAnLi4vRmxleGJveCdcbmltcG9ydCB7IFN0eWxlZExpbmsgfSBmcm9tICcuLi9MaW5rL0xpbmsuc3R5bGVzJ1xuaW1wb3J0IHsgSWNvbkFuZFRleHRXcmFwcGVyIH0gZnJvbSAnLi4vSWNvbkFuZFRleHQvSWNvbkFuZFRleHQuc3R5bGVzJ1xuXG5leHBvcnQgY29uc3QgUXVpY2tGaWx0ZXJCYXNlRWxlbWVudCA9IHN0eWxlZChGbGV4KWBcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbmBcblxuZXhwb3J0IGNvbnN0IFF1aWNrRmlsdGVyR3JvdXBFbGVtZW50ID0gc3R5bGVkKEZsZXgpYFxuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWzJdfSAwO1xuXG4gICY6bm90KDpsYXN0LWNoaWxkKSB7XG4gICAgYm9yZGVyLWJvdHRvbTogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5ib3JkZXJzWzBdfTtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgUXVpY2tGaWx0ZXJPcHRpb25MYWJlbCA9IHN0eWxlZC5zcGFuYFxuICBkaXNwbGF5OiBibG9jaztcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIG1pbi13aWR0aDogMDtcbmBcblxuZXhwb3J0IGNvbnN0IFF1aWNrRmlsdGVyT3B0aW9uRWxlbWVudCA9IHN0eWxlZChTdHlsZWRMaW5rKTx7IHNlbGVjdGVkPzogYm9vbGVhbiB9PmBcbiAgZmxleC1ncm93OiAxO1xuICBtYXJnaW46ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbMV19IDA7XG5cbiAgdHJhbnNpdGlvbjogY29sb3IgMC4zcyBlYXNlLWluLW91dDtcbiAgY29sb3I6ICR7KHsgdGhlbWUsIHNlbGVjdGVkIH0pID0+IHRoZW1lLmNvbG9yc1tzZWxlY3RlZCA/ICd0ZXh0LWluZm8nIDogJ3RleHQtc2Vjb25kYXJ5J119O1xuICBmb250LXdlaWdodDogJHsoeyBzZWxlY3RlZCwgdGhlbWUgfSkgPT4gdGhlbWUuZm9udFdlaWdodHNbc2VsZWN0ZWQgPyAnc2VtaS1ib2xkJyA6ICdyZWd1bGFyJ119O1xuXG4gIC8qIGZsZXggaXRlbXMgZGVmYXVsdCB0byBtaW4td2lkdGg6IGF1dG8sIHdoaWNoIHdvdWxkIGRlZmVhdCB0aGUgbGFiZWwncyBlbGxpcHNpcy4gV2l0aCBhblxuICAgICBpY29uIHRoZSBsYWJlbCBzaXRzIGluc2lkZSBJY29uQW5kVGV4dCdzIG93biBzcGFuLCBzbyBib3RoIGxldmVscyBoYXZlIHRvIGdpdmUgd2F5LiAqL1xuICAke0ljb25BbmRUZXh0V3JhcHBlcn0ge1xuICAgIG1pbi13aWR0aDogMDtcblxuICAgID4gc3BhbiB7XG4gICAgICBtaW4td2lkdGg6IDA7XG4gICAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIH1cbiAgfVxuXG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1sndGV4dC1pbmZvJ119O1xuICB9XG5gXG4iXX0= */"));

package/lib/QuickFilter/QuickFilter.types.d.ts

@@ -0,0 +1,21 @@
+import { SpaceProps } from '../system-props/types';
+import { IconAndTextProps } from '../IconAndText';
+import { TextSize } from '../Typography';
+export interface QuickFilterOptionProps extends Pick<IconAndTextProps, 'iconProps'>, SpaceProps {
+    /** Icon for the option */
+    icon?: IconAndTextProps['icon'];
+    /** Renders the option as the selected one */
+    selected?: boolean;
+    /** The value handed back to `onClick` */
+    value: string;
+    /** The option's visible label */
+    label: string;
+    /** Renders a `MoreInfo` tooltip next to the label */
+    helpText?: string;
+    /** Called with the option's `value` when it is clicked */
+    onClick?: (value: string) => void;
+    /** Shown right-aligned, typically the number of matches */
+    count?: number | string;
+    /** Text size for the option */
+    size?: TextSize;
+}

package/lib/QuickFilter/QuickFilter.types.js

@@ -0,0 +1 @@
+export {};

package/lib/QuickFilter/index.d.ts

@@ -0,0 +1,2 @@
+export * from './QuickFilter';
+export * from './QuickFilter.types';

package/lib/QuickFilter/index.js

@@ -0,0 +1,2 @@
+export * from './QuickFilter';
+export * from './QuickFilter.types';

package/lib/SeverityLabel/SeverityLabel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Severity, SeverityDetails, SeverityLabelProps } from './SeverityLabel.types';
+/**
+ * The icon and colors that belong to each severity. Exported so consumers can compose their
+ * own layouts without rebuilding the mapping.
+ */
+export declare const severityDetails: Record<Severity, SeverityDetails>;
+/**
+ * A severity, rendered with its icon and colors from the theme.
+ */
+export declare const SeverityLabel: React.FC<SeverityLabelProps>;

package/lib/SeverityLabel/SeverityLabel.js

@@ -0,0 +1,80 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { SeverityCaption } from './SeverityLabel.styles';
+import { IconAndText } from '../IconAndText';
+import { PillLabel } from '../PillLabel';
+import { CriticalSeverityIcon, HighSeverityIcon, MediumSeverityIcon, MinorSeverityIcon } from '../Icons';
+
+/**
+ * The icon and colors that belong to each severity. Exported so consumers can compose their
+ * own layouts without rebuilding the mapping.
+ */
+export const severityDetails = {
+  minor: {
+    icon: MinorSeverityIcon,
+    iconColor: 'label-minor-icon',
+    textColor: 'label-minor-text',
+    label: 'Minor'
+  },
+  medium: {
+    icon: MediumSeverityIcon,
+    iconColor: 'label-medium-icon',
+    textColor: 'label-medium-text',
+    label: 'Medium'
+  },
+  high: {
+    icon: HighSeverityIcon,
+    iconColor: 'label-high-icon',
+    textColor: 'label-high-text',
+    label: 'High'
+  },
+  critical: {
+    icon: CriticalSeverityIcon,
+    iconColor: 'label-critical-icon',
+    textColor: 'label-critical-text',
+    label: 'Critical'
+  }
+};
+
+/**
+ * A severity, rendered with its icon and colors from the theme.
+ */
+export const SeverityLabel = ({
+  severity,
+  variant = 'text',
+  size,
+  children,
+  ...props
+}) => {
+  const {
+    icon,
+    iconColor,
+    textColor,
+    label
+  } = severityDetails[severity];
+  const content = children ?? label;
+  if (variant === 'pill') {
+    return (
+      /*#__PURE__*/
+      // `Severity` is a subset of `PillLabelStatus`, so it maps straight onto the status
+      React.createElement(PillLabel, _extends({}, props, {
+        status: severity,
+        size: size === 'xs' || size === 'sm' ? 'sm' : 'md',
+        leftIcon: icon
+      }), content)
+    );
+  }
+  return /*#__PURE__*/React.createElement(SeverityCaption, _extends({}, props, {
+    size: size || 'xs',
+    fontWeight: "semi-bold",
+    color: textColor,
+    pl: 1,
+    as: "div"
+  }), /*#__PURE__*/React.createElement(IconAndText, {
+    icon: icon,
+    iconProps: {
+      scale: 1.2,
+      color: iconColor
+    }
+  }, content));
+};

package/lib/SeverityLabel/SeverityLabel.styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const SeverityCaption: import("@emotion/styled").StyledComponent<import("../Typography").CaptionProps & import("react").RefAttributes<HTMLParagraphElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/SeverityLabel/SeverityLabel.styles.js

@@ -0,0 +1,16 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { Caption } from '../Typography';
+export const SeverityCaption = /*#__PURE__*/_styled(Caption, process.env.NODE_ENV === "production" ? {
+  target: "e1pdfgxc0"
+} : {
+  target: "e1pdfgxc0",
+  label: "codacy"
+})(process.env.NODE_ENV === "production" ? {
+  name: "50zrmy",
+  styles: "text-transform:uppercase"
+} : {
+  name: "50zrmy",
+  styles: "text-transform:uppercase/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9TZXZlcml0eUxhYmVsL1NldmVyaXR5TGFiZWwuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUc4QyIsImZpbGUiOiIuLi8uLi9zcmMvU2V2ZXJpdHlMYWJlbC9TZXZlcml0eUxhYmVsLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgQ2FwdGlvbiB9IGZyb20gJy4uL1R5cG9ncmFwaHknXG5cbmV4cG9ydCBjb25zdCBTZXZlcml0eUNhcHRpb24gPSBzdHlsZWQoQ2FwdGlvbilgXG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gXG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});

package/lib/SeverityLabel/SeverityLabel.types.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { ContainerComponentProps } from '../types';
+import { SpaceProps, LayoutProps } from '../system-props/types';
+import { AllColorsKeys } from '../theme';
+import { IconFile } from '../Icon/Icon.types';
+import { TextSize } from '../Typography';
+/**
+ * The design system's severity vocabulary. Consumers whose API speaks a different one
+ * (`Info`/`Warning`/`Error`, numeric levels, …) should map onto this at their boundary
+ * rather than this package learning their domain.
+ */
+export type Severity = 'minor' | 'medium' | 'high' | 'critical';
+export type SeverityLabelVariant = 'text' | 'pill';
+export interface SeverityDetails {
+    icon: IconFile;
+    iconColor: AllColorsKeys;
+    textColor: AllColorsKeys;
+    label: string;
+}
+export interface SeverityLabelProps extends ContainerComponentProps, SpaceProps, Omit<LayoutProps, 'size'> {
+    /** The severity to render */
+    severity: Severity;
+    /** `text` renders an uppercase caption, `pill` renders a PillLabel */
+    variant?: SeverityLabelVariant;
+    /** Text size; the `pill` variant maps `xs`/`sm` to its small size and the rest to medium */
+    size?: TextSize;
+    /** Overrides the built-in label, for consumers with their own glossary */
+    children?: React.ReactNode;
+}

package/lib/SeverityLabel/SeverityLabel.types.js

@@ -0,0 +1 @@
+export {};

package/lib/SeverityLabel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SeverityLabel';
+export * from './SeverityLabel.types';

package/lib/SeverityLabel/index.js

@@ -0,0 +1,2 @@
+export * from './SeverityLabel';
+export * from './SeverityLabel.types';

package/lib/Skeleton/Skeleton.js

@@ -1,7 +1,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
 import { SkeletonPrimitive } from './Skeleton.styles';
-import { Box } from '../';
+import { Box } from '../Flexbox';
 const CircleSkeleton = ({
   size = '2rem',
   ...props

package/lib/index.d.ts

@@ -29,6 +29,8 @@ export * from './Textarea';
 export * from './Divider';
 export * from './Message';
 export * from './PillLabel';
+export * from './QuickFilter';
+export * from './SeverityLabel';
 export * from './Tab';
 export * from './IconAndText';
 export * from './Table';
@@ -51,3 +53,4 @@ export * from './Bannerol';
 export * from './Orb';
 export * from './IconButton';
 export * from './Card';
+export * from './DiffCaption';

package/lib/index.js

@@ -29,6 +29,8 @@ export * from './Textarea';
 export * from './Divider';
 export * from './Message';
 export * from './PillLabel';
+export * from './QuickFilter';
+export * from './SeverityLabel';
 export * from './Tab';
 export * from './IconAndText';
 export * from './Table';
@@ -50,4 +52,5 @@ export * from './ExpandableBox';
 export * from './Bannerol';
 export * from './Orb';
 export * from './IconButton';
-export * from './Card';
+export * from './Card';
+export * from './DiffCaption';

package/package.json

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