@ultraviolet/ui 1.11.2 → 1.14.0

package/dist/src/components/Checkbox/index.js

@@ -6,7 +6,8 @@ import { Loader } from '../Loader/index.js';
 import { Row } from '../Row/index.js';
 import { Stack } from '../Stack/index.js';
 import { Text } from '../Text/index.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 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)."; }
 const ErrorText = /*#__PURE__*/_styled(Text, {
@@ -107,7 +108,7 @@ const CheckboxInput = /*#__PURE__*/_styled('input', {
   let {
     theme
   } = _ref14;
-  return theme.colors.primary.backgroundStrong;
+  return theme.colors.primary.borderStrong;
 }, ";}}&[aria-invalid='true']+", StyledIcon, ",&[aria-invalid='mixed']+", StyledIcon, "{fill:", _ref15 => {
   let {
     theme
@@ -190,7 +191,7 @@ const CheckboxContainer = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref30;
-  return theme.colors.neutral.borderDisabled;
+  return theme.colors.neutral.borderStrongDisabled;
 }, ";fill:", _ref31 => {
   let {
     theme
@@ -200,17 +201,17 @@ const CheckboxContainer = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref32;
-  return theme.colors.danger.borderDisabled;
+  return theme.colors.danger.backgroundStrongDisabled;
 }, ";", InnerCheckbox, "{stroke:", _ref33 => {
   let {
     theme
   } = _ref33;
-  return theme.colors.danger.borderDisabled;
+  return theme.colors.danger.borderStrongDisabled;
 }, ";fill:", _ref34 => {
   let {
     theme
   } = _ref34;
-  return theme.colors.danger.borderDisabled;
+  return theme.colors.danger.backgroundStrongDisabled;
 }, ";}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", _ref35 => {
   let {
     theme
@@ -230,7 +231,7 @@ const CheckboxContainer = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref38;
-  return theme.colors.primary.borderDisabled;
+  return theme.colors.primary.backgroundStrongDisabled;
 }, ";", InnerCheckbox, "{stroke:", _ref39 => {
   let {
     theme
@@ -245,37 +246,37 @@ const CheckboxContainer = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref41;
-  return theme.colors.primary.borderDisabled;
+  return theme.colors.primary.backgroundStrongDisabled;
 }, ";", InnerCheckbox, "{stroke:", _ref42 => {
   let {
     theme
   } = _ref42;
-  return theme.colors.primary.borderDisabled;
+  return theme.colors.primary.borderStrongDisabled;
 }, ";fill:", _ref43 => {
   let {
     theme
   } = _ref43;
-  return theme.colors.primary.borderDisabled;
+  return theme.colors.primary.backgroundStrongDisabled;
 }, ";}}}", CheckboxInput, ":checked+", StyledIcon, " path{transform-origin:center;transition:200ms transform ease-in-out;transform:scale(1);transform:translate(2px, 2px);}", CheckboxInput, ":checked+", StyledIcon, " ", InnerCheckbox, "{fill:", _ref44 => {
   let {
     theme
   } = _ref44;
-  return theme.colors.primary.border;
+  return theme.colors.primary.backgroundStrong;
 }, ";stroke:", _ref45 => {
   let {
     theme
   } = _ref45;
-  return theme.colors.primary.border;
+  return theme.colors.primary.borderStrong;
 }, ";}", CheckboxInput, "[aria-invalid=\"true\"]:checked+", StyledIcon, " ", InnerCheckbox, "{fill:", _ref46 => {
   let {
     theme
   } = _ref46;
-  return theme.colors.danger.border;
+  return theme.colors.danger.backgroundStrong;
 }, ";stroke:", _ref47 => {
   let {
     theme
   } = _ref47;
-  return theme.colors.danger.border;
+  return theme.colors.danger.borderStrong;
 }, ";}", CheckboxInput, "[aria-checked=\"mixed\"]+", StyledIcon, "{", CheckMixedMark, "{fill:", _ref48 => {
   let {
     theme
@@ -285,12 +286,12 @@ const CheckboxContainer = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref49;
-  return theme.colors.primary.border;
+  return theme.colors.primary.backgroundStrong;
 }, ";stroke:", _ref50 => {
   let {
     theme
   } = _ref50;
-  return theme.colors.primary.border;
+  return theme.colors.primary.borderStrong;
 }, ";}}&:hover[aria-disabled='false']{", CheckboxInput, "[aria-invalid='false']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref51 => {
   let {
     theme
@@ -301,30 +302,60 @@ const CheckboxContainer = /*#__PURE__*/_styled("div", {
     theme
   } = _ref52;
   return theme.colors.primary.backgroundHover;
-}, ";}}", CheckboxInput, "[aria-invalid='true']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref53 => {
+}, ";}&[aria-checked='true']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref53 => {
   let {
     theme
   } = _ref53;
-  return theme.colors.danger.borderHover;
+  return theme.colors.primary.borderStrongHover;
 }, ";fill:", _ref54 => {
   let {
     theme
   } = _ref54;
-  return theme.colors.danger.backgroundHover;
-}, ";}}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", _ref55 => {
+  return theme.colors.primary.backgroundStrongHover;
+}, ";}&[aria-checked='mixed']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref55 => {
   let {
     theme
   } = _ref55;
-  return theme.colors.danger.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref56 => {
+  return theme.colors.primary.borderStrongHover;
+}, ";fill:", _ref56 => {
   let {
     theme
   } = _ref56;
-  return theme.colors.danger.backgroundStrong;
-}, ";fill:", _ref57 => {
+  return theme.colors.primary.backgroundStrongHover;
+}, ";}}", CheckboxInput, "[aria-invalid='true']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref57 => {
   let {
     theme
   } = _ref57;
+  return theme.colors.danger.borderHover;
+}, ";fill:", _ref58 => {
+  let {
+    theme
+  } = _ref58;
+  return theme.colors.danger.backgroundHover;
+}, ";}&[aria-checked='true']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref59 => {
+  let {
+    theme
+  } = _ref59;
+  return theme.colors.danger.borderStrongHover;
+}, ";fill:", _ref60 => {
+  let {
+    theme
+  } = _ref60;
+  return theme.colors.danger.backgroundStrongHover;
+}, ";}}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", _ref61 => {
+  let {
+    theme
+  } = _ref61;
+  return theme.colors.danger.backgroundStrong;
+}, ";", InnerCheckbox, "{stroke:", _ref62 => {
+  let {
+    theme
+  } = _ref62;
+  return theme.colors.danger.backgroundStrong;
+}, ";fill:", _ref63 => {
+  let {
+    theme
+  } = _ref63;
   return theme.colors.danger.background;
 }, ";}}");
 const StyledActivityContainer = /*#__PURE__*/_styled("div", {
@@ -337,7 +368,10 @@ const StyledActivityContainer = /*#__PURE__*/_styled("div", {
   styles: "display:flex",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const Checkbox = /*#__PURE__*/forwardRef((_ref58, ref) => {
+/**
+ * Checkbox is an input component used to select or deselect an option.
+ */
+const Checkbox = /*#__PURE__*/forwardRef((_ref64, ref) => {
   let {
     checked = false,
     onChange,
@@ -356,8 +390,9 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref58, ref) => {
     'data-visibility': dataVisibility,
     'aria-label': ariaLabel,
     required,
-    'data-testid': dataTestId
-  } = _ref58;
+    'data-testid': dataTestId,
+    tooltip
+  } = _ref64;
   const [state, setState] = useState(checked);
   const id = useId();
   const computedName = name ?? id;
@@ -374,84 +409,87 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref58, ref) => {
       setState(current => !current);
     }
   }, []);
-  return jsxs(CheckboxContainer, {
-    className: className,
-    "aria-disabled": disabled,
-    "data-visibility": dataVisibility,
-    "data-checked": state,
-    "data-error": !!error,
-    "data-testid": dataTestId,
-    children: [progress ? jsx(StyledActivityContainer, {
-      children: jsx(Loader, {
-        active: true,
-        size: size
-      })
-    }) : null, jsx(CheckboxInput, {
-      id: computedName,
-      type: "checkbox",
-      "aria-invalid": !!error,
-      "aria-describedby": error ? `${computedName}-hint` : undefined,
-      "aria-checked": state === 'indeterminate' ? 'mixed' : state,
-      "aria-label": ariaLabel,
-      checked: state === 'indeterminate' ? false : state,
-      size: size,
-      onChange: onLocalChange,
-      onKeyDown: onKeyDown,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      disabled: disabled,
-      value: value,
-      name: computedName,
-      autoFocus: autoFocus,
-      ref: ref,
-      required: required
-    }), !progress ? jsx(StyledIcon, {
-      size: size,
-      viewBox: "0 0 24 24",
-      children: jsx(CheckboxIconContainer, {
-        children: state !== 'indeterminate' ? jsx("path", {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          width: 14,
-          height: 14,
-          d: "M15.6678 5.26709C16.0849 5.6463 16.113 6.28907 15.7307 6.70276L9.29172 13.6705C9.10291 13.8748 8.83818 13.9937 8.55884 13.9998C8.2795 14.0058 8.0098 13.8984 7.81223 13.7024L4.30004 10.2185C3.89999 9.82169 3.89999 9.17831 4.30004 8.78149C4.70009 8.38467 5.34869 8.38467 5.74874 8.78149L8.50441 11.5149L14.2205 5.32951C14.6028 4.91583 15.2508 4.88788 15.6678 5.26709Z",
-          fill: "white"
-        }) : jsx(CheckMixedMark, {
-          x: "6",
-          y: "11",
-          rx: "1",
-          width: "12",
-          height: "2"
+  return jsx(Tooltip, {
+    text: tooltip,
+    children: jsxs(CheckboxContainer, {
+      className: className,
+      "aria-disabled": disabled,
+      "data-visibility": dataVisibility,
+      "data-checked": state,
+      "data-error": !!error,
+      "data-testid": dataTestId,
+      children: [progress ? jsx(StyledActivityContainer, {
+        children: jsx(Loader, {
+          active: true,
+          size: size
         })
-      })
-    }) : null, jsxs(Stack, {
-      gap: 0.25,
-      children: [jsxs(Row, {
-        templateColumns: "11fr 1fr",
-        alignItems: "center",
-        children: [children ? jsx(StyledLabel, {
-          htmlFor: computedName,
-          children: children
-        }) : null, required ? jsx("sup", {
-          children: jsx(Icon, {
-            name: "asterisk",
-            size: 10,
-            color: "danger"
+      }) : null, jsx(CheckboxInput, {
+        id: computedName,
+        type: "checkbox",
+        "aria-invalid": !!error,
+        "aria-describedby": error ? `${computedName}-hint` : undefined,
+        "aria-checked": state === 'indeterminate' ? 'mixed' : state,
+        "aria-label": ariaLabel,
+        checked: state === 'indeterminate' ? false : state,
+        size: size,
+        onChange: onLocalChange,
+        onKeyDown: onKeyDown,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        disabled: disabled,
+        value: value,
+        name: computedName,
+        autoFocus: autoFocus,
+        ref: ref,
+        required: required
+      }), !progress ? jsx(StyledIcon, {
+        size: size,
+        viewBox: "0 0 24 24",
+        children: jsx(CheckboxIconContainer, {
+          children: state !== 'indeterminate' ? jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            width: 14,
+            height: 14,
+            d: "M15.6678 5.26709C16.0849 5.6463 16.113 6.28907 15.7307 6.70276L9.29172 13.6705C9.10291 13.8748 8.83818 13.9937 8.55884 13.9998C8.2795 14.0058 8.0098 13.8984 7.81223 13.7024L4.30004 10.2185C3.89999 9.82169 3.89999 9.17831 4.30004 8.78149C4.70009 8.38467 5.34869 8.38467 5.74874 8.78149L8.50441 11.5149L14.2205 5.32951C14.6028 4.91583 15.2508 4.88788 15.6678 5.26709Z",
+            fill: "white"
+          }) : jsx(CheckMixedMark, {
+            x: "6",
+            y: "11",
+            rx: "1",
+            width: "12",
+            height: "2"
           })
+        })
+      }) : null, jsxs(Stack, {
+        gap: 0.25,
+        children: [jsxs(Row, {
+          templateColumns: "11fr 1fr",
+          alignItems: "center",
+          children: [children ? jsx(StyledLabel, {
+            htmlFor: computedName,
+            children: children
+          }) : null, required ? jsx("sup", {
+            children: jsx(Icon, {
+              name: "asterisk",
+              size: 10,
+              color: "danger"
+            })
+          }) : null]
+        }), helper ? jsx(Text, {
+          variant: "bodySmall",
+          as: "p",
+          prominence: "weak",
+          color: "neutral",
+          children: helper
+        }) : null, error ? jsx(ErrorText, {
+          variant: "bodySmall",
+          as: "p",
+          color: "danger",
+          children: error
         }) : null]
-      }), helper ? jsx(Text, {
-        variant: "bodySmall",
-        as: "p",
-        prominence: "weak",
-        color: "neutral",
-        children: helper
-      }) : null, error ? jsx(ErrorText, {
-        variant: "bodySmall",
-        as: "p",
-        color: "danger",
-        children: error
-      }) : null]
-    })]
+      })]
+    })
   });
 });
 

package/dist/src/components/CheckboxGroup/index.js

@@ -69,6 +69,9 @@ const StyledRequiredIcon = /*#__PURE__*/_styled(Icon, {
   styles: "vertical-align:super",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
+/**
+ * CheckboxGroup is a component that groups a set of checkboxes together with a legend and helper/error text.
+ */
 const CheckboxGroup = _ref2 => {
   let {
     legend,

package/dist/src/components/CopyButton/index.js

@@ -3,6 +3,9 @@ import { Button } from '../Button/index.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 
 const COPY_DURATION = 2500;
+/**
+ * CopyButton is a button that copies a given value to the clipboard.
+ */
 const CopyButton = _ref => {
   let {
     size = 'small',

package/dist/src/components/DateInput/index.js

@@ -144,6 +144,11 @@ const StyledText = /*#__PURE__*/_styled(Text, {
   return theme.space['1'];
 }, ";");
 const DEFAULT_FORMAT = value => value instanceof Date ? value.toISOString() : value;
+
+/**
+ * DateInput is a wrapper around react-datepicker that provides a consistent look and feel with the rest of the Ultraviolet UI.
+ * See https://reactdatepicker.com/ for more information.
+ */
 const DateInput = _ref24 => {
   let {
     autoFocus = false,

package/dist/src/components/EmptyState/index.js

@@ -56,6 +56,9 @@ const StyledStack = /*#__PURE__*/_styled(Stack, {
   } = _ref4;
   return theme.space['5'];
 }, ";");
+/**
+ * EmptyState component is used to display a message when there is no data to show.
+ */
 const EmptyState = _ref5 => {
   let {
     image,

package/dist/src/components/Expandable/index.js

@@ -19,6 +19,12 @@ const StyledExpandable = /*#__PURE__*/_styled('div', {
   } = _ref2;
   return opened ? 'initial' : `${minHeight}px`;
 }, ";");
+
+/**
+ * The Expandable component is a dynamic React component that allows for the expansion of its children content
+ * based on its height. The component comes with a sleek and smooth animation, providing a visually pleasing
+ * user experience.
+ */
 const Expandable = _ref3 => {
   let {
     children,

package/dist/src/components/LineChart/index.js

@@ -26,6 +26,8 @@ const DEFAULT_YSCALE = {
 const DEFAULT_CHARTPROPS = {};
 
 /**
+ * LineChart component is a wrapper around Nivo's ResponsiveLine component used to display data in a line chart.
+ * See https://nivo.rocks/line/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 const LineChart = _ref => {

package/dist/src/components/Link/index.js

@@ -91,6 +91,10 @@ const StyledLink = /*#__PURE__*/_styled('a', {
   } = _ref8;
   return theme.colors[sentiment]?.text ?? theme.colors.neutral.text;
 }, ";}&:active{text-decoration-thickness:2px;}");
+
+/**
+ * Link is a component used to navigate between pages or to external websites.
+ */
 const Link = /*#__PURE__*/forwardRef((_ref9, ref) => {
   let {
     children,

package/dist/src/components/List/index.js

@@ -67,6 +67,10 @@ const BaseList = /*#__PURE__*/forwardRef((_ref3, ref) => {
     })
   });
 });
+
+/**
+ * List is a component that displays a list of items based on the columns you provide and the data you pass.
+ */
 const List = /*#__PURE__*/Object.assign(BaseList, {
   Row,
   Cell,

package/dist/src/components/Loader/index.js

@@ -37,6 +37,10 @@ const Text = /*#__PURE__*/_styled('text', {
   } = _ref3;
   return theme.colors[color]?.backgroundStrong || color;
 }, ";font-size:26px;dominant-baseline:middle;text-anchor:middle;");
+
+/**
+ * Loader is a circular progress indicator that can be used to indicate that an action is being performed.
+ */
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "si0mpz",
   styles: "transition:stroke-dashoffset 0.5s ease 0s"

package/dist/src/components/Menu/index.js

@@ -139,6 +139,13 @@ const FwdMenu = /*#__PURE__*/forwardRef((_ref9, ref) => {
     })]
   });
 });
+
+/**
+ * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
+ * A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a
+ * sub menu, or by invoking a command, such as `Shift + F10` on Windows, that opens a context specific menu.
+ * When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
+ */
 const Menu = /*#__PURE__*/Object.assign(FwdMenu, {
   Item
 });

package/dist/src/components/Meter/{Meter.js → index.js}

@@ -4,7 +4,7 @@ import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
 const StyledStrength = /*#__PURE__*/_styled(Text, {
   shouldForwardProp: prop => !['color'].includes(prop),
-  target: "e1segop82"
+  target: "e157fc5l2"
 })("float:right;vertical-align:top;color:", _ref => {
   let {
     strength
@@ -12,7 +12,7 @@ const StyledStrength = /*#__PURE__*/_styled(Text, {
   return strength.color;
 }, ";");
 const StyledWrapper = /*#__PURE__*/_styled("div", {
-  target: "e1segop81"
+  target: "e157fc5l1"
 })("background-color:", _ref2 => {
   let {
     theme
@@ -40,13 +40,16 @@ const StyledWrapper = /*#__PURE__*/_styled("div", {
   return theme.space['2'];
 }, ";");
 const StyledMeter = /*#__PURE__*/_styled("div", {
-  target: "e1segop80"
+  target: "e157fc5l0"
 })("border-radius:", _ref7 => {
   let {
     theme
   } = _ref7;
   return theme.radii.default;
 }, ";height:100%;transition:all 0.5s;");
+/**
+ * Show strength of a password based on different criteria.
+ */
 const Meter = _ref8 => {
   let {
     strength,

package/dist/src/components/Modal/Dialog.js

@@ -124,11 +124,13 @@ const Dialog = _ref9 => {
 
   // Handle body scroll
   useEffect(() => {
+    const previousOverflow = document.body.style.overflow;
     if (open && preventBodyScroll) {
       document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'auto';
     }
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
   }, [preventBodyScroll, open]);
 
   // Stop focus to prevent unexpected body loose focus

package/dist/src/components/Modal/{Modal.js → index.js}

@@ -6,7 +6,7 @@ import { Disclosure } from './Disclosure.js';
 import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 
 const StyledContainer = /*#__PURE__*/_styled("div", {
-  target: "e227mx40"
+  target: "ebywm9u0"
 })("position:absolute;top:", _ref => {
   let {
     theme
@@ -18,6 +18,11 @@ const StyledContainer = /*#__PURE__*/_styled("div", {
   } = _ref2;
   return theme.space['2'];
 }, ";");
+
+/**
+ * Modal is a component that allows you to display content on top of other content.
+ * It is often used to display a dialog with additional information or to ask for a confirmation.
+ */
 const Modal = _ref3 => {
   let {
     ariaLabel = 'modal',

package/dist/src/components/Notice/index.js

@@ -3,6 +3,9 @@ import { Stack } from '../Stack/index.js';
 import { Text } from '../Text/index.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
+/**
+ * A Notice is used to display a short message to the user.
+ */
 const Notice = _ref => {
   let {
     children,

package/dist/src/components/NumberInput/index.js

@@ -138,6 +138,10 @@ const StyledContainer = /*#__PURE__*/_styled('div', {
   } = _ref20;
   return theme.colors.primary.borderHover;
 }, ";}}");
+/**
+ * NumberInput component is used to increment / decrement a number value by clicking on + / - buttons or
+ * by typing into input.
+ */
 const NumberInput = _ref21 => {
   let {
     disabled = false,

package/dist/src/components/Pagination/index.js

@@ -37,7 +37,8 @@ const StyledContainer = /*#__PURE__*/_styled("div", {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 /**
- * Display multiple buttons to allow navigation between a paginated resource
+ * Pagination is a component to navigate between pages, it is composed of 2 buttons to go to the previous and next page,
+ * and a list of buttons to go to a specific page.
  */
 const Pagination = _ref4 => {
   let {

package/dist/src/components/PasswordCheck/index.js

@@ -12,6 +12,11 @@ const PasswordCheckContainer = /*#__PURE__*/_styled("div", {
   } = _ref;
   return theme.space['1'];
 }, ";");
+
+/**
+ * PasswordCheck is a component that display a list of password rules with a check or a cross depending on the validity
+ * of the rule.
+ */
 const PasswordCheck = _ref2 => {
   let {
     rules,

package/dist/src/components/PasswordStrengthMeter/index.js

@@ -60,6 +60,7 @@ const DEFAULT_ESTIMATE = () => ({
 const DEFAULT_FORBIDDEN_WORDS = [];
 
 /**
+ * PasswordStrengthMeter is a component that displays a password strength meter.
  * @deprecated use Meter component instead
  */
 const PasswordStrengthMeter = _ref7 => {

package/dist/src/components/PieChart/index.js

@@ -45,6 +45,8 @@ const DEFAULT_MARGIN = {
 };
 
 /**
+ * PieChart component is a wrapper around the Nivo Pie component to display a pie chart.
+ * See https://nivo.rocks/pie/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 const PieChart = _ref2 => {

package/dist/src/components/Popover/index.js

@@ -88,6 +88,10 @@ const ContentWrapper = _ref5 => {
     }) : children]
   });
 };
+/**
+ * Popover component is used to display additional information or actions on top of the main content of the page.
+ * It is usually triggered by clicking on a button. It includes a title, a close button and a content area.
+ */
 const Popover = _ref6 => {
   let {
     visible = false,

package/dist/src/components/ProgressBar/index.js

@@ -47,6 +47,9 @@ const StyledFilled = /*#__PURE__*/_styled('div', {
   } = _ref5;
   return Math.max(0, Math.min(100, value));
 }, "%;");
+/**
+ * Progress bar component to display progress of a task. Can be used to display progress of a form or a loading state.
+ */
 const ProgressBar = _ref6 => {
   let {
     progress = false,