@codacy/ui-components 0.65.51 → 0.65.53

package/lib/ExpandableBox/ExpandableBox.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ExpandableBoxProps } from './ExpandableBox.types';
+import { BoxProps } from 'reakit';
+export declare const ExpandableBox: React.FC<ExpandableBoxProps & BoxProps>;

package/lib/ExpandableBox/ExpandableBox.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandableBox = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _ExpandableBox = require("./ExpandableBox.styles");
+var _Flexbox = require("../Flexbox");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "expanded", "primaryColor", "secondaryColor", "animating", "setAnimating", "expandableContentChildren"];
+/**
+ * Description for ExpandableBox
+ */
+var ANIMATION_DURATION = 300; // in milliseconds
+
+var ExpandableBox = exports.ExpandableBox = function ExpandableBox(_ref) {
+  var children = _ref.children,
+    expanded = _ref.expanded,
+    primaryColor = _ref.primaryColor,
+    secondaryColor = _ref.secondaryColor,
+    animating = _ref.animating,
+    setAnimating = _ref.setAnimating,
+    expandableContentChildren = _ref.expandableContentChildren,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flexbox.Box, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandableBox.StyledExpandableBox, {
+      primaryColor: primaryColor,
+      expanded: expanded,
+      padding: 4,
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandableBox.StyledAnimateHeight, {
+      secondaryColor: secondaryColor,
+      duration: ANIMATION_DURATION,
+      height: expanded ? 'auto' : 0,
+      easing: "ease-in-out",
+      onAnimationEnd: function onAnimationEnd() {
+        return setAnimating === null || setAnimating === void 0 ? void 0 : setAnimating(false);
+      },
+      children: (expanded || animating) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandableBox.StyledBox, {
+        p: 4,
+        children: expandableContentChildren
+      })
+    })]
+  }));
+};

package/lib/ExpandableBox/ExpandableBox.styles.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { Color } from '../theme';
+export declare const StyledAnimateHeight: import("@emotion/styled").StyledComponent<import("react-animate-height").AnimateHeightProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    secondaryColor?: Color | undefined;
+}, {}, {}>;
+export declare const StyledExpandableBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | 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("../theme").FontWeights, import("../theme").CodacyTheme> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & import("..").FlexboxProps & import("..").GridboxProps & {
+    primaryColor?: Color | undefined;
+    expanded?: boolean | undefined;
+}, {}, {}>;
+export declare const StyledBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | 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("../theme").FontWeights, import("../theme").CodacyTheme> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & import("..").FlexboxProps & import("..").GridboxProps, {}, {}>;

package/lib/ExpandableBox/ExpandableBox.styles.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledExpandableBox = exports.StyledBox = exports.StyledAnimateHeight = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _Flexbox = require("../Flexbox");
+var _reactAnimateHeight = _interopRequireDefault(require("react-animate-height"));
+var StyledAnimateHeight = exports.StyledAnimateHeight = /*#__PURE__*/(0, _base["default"])(_reactAnimateHeight["default"], process.env.NODE_ENV === "production" ? {
+  target: "e1sxq8nk2"
+} : {
+  target: "e1sxq8nk2",
+  label: "codacy"
+})("box-shadow:", function (_ref) {
+  var theme = _ref.theme,
+    secondaryColor = _ref.secondaryColor;
+  return secondaryColor ? "-".concat(theme.borderWidths[2], " 0  0 ").concat(theme.colors["".concat(secondaryColor)], " , 0 0.25rem 0.35rem ").concat(theme.colors['border-primary'], ", -0.45rem 0.25rem 0.35rem ").concat(theme.colors['grey-70'], "88") : 'none';
+}, ";border-radius:", function (_ref2) {
+  var theme = _ref2.theme;
+  return "0 0 ".concat(theme.radii[1], " ").concat(theme.radii[1]);
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9FeHBhbmRhYmxlQm94L0V4cGFuZGFibGVCb3guc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtvRiIsImZpbGUiOiIuLi8uLi9zcmMvRXhwYW5kYWJsZUJveC9FeHBhbmRhYmxlQm94LnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vRmxleGJveCdcbmltcG9ydCB7IENvbG9yIH0gZnJvbSAnLi4vdGhlbWUnXG5pbXBvcnQgQW5pbWF0ZUhlaWdodCBmcm9tICdyZWFjdC1hbmltYXRlLWhlaWdodCdcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEFuaW1hdGVIZWlnaHQgPSBzdHlsZWQoQW5pbWF0ZUhlaWdodCk8eyBzZWNvbmRhcnlDb2xvcj86IENvbG9yIH0+YFxuICBib3gtc2hhZG93OiAkeyh7IHRoZW1lLCBzZWNvbmRhcnlDb2xvciB9KSA9PlxuICAgIHNlY29uZGFyeUNvbG9yXG4gICAgICA/IGAtJHt0aGVtZS5ib3JkZXJXaWR0aHNbMl19IDAgIDAgJHt0aGVtZS5jb2xvcnNbYCR7c2Vjb25kYXJ5Q29sb3J9YF19ICwgMCAwLjI1cmVtIDAuMzVyZW0gJHtcbiAgICAgICAgICB0aGVtZS5jb2xvcnNbJ2JvcmRlci1wcmltYXJ5J11cbiAgICAgICAgfSwgLTAuNDVyZW0gMC4yNXJlbSAwLjM1cmVtICR7dGhlbWUuY29sb3JzWydncmV5LTcwJ119ODhgXG4gICAgICA6ICdub25lJ307XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgdGhlbWUgfSkgPT4gYDAgMCAke3RoZW1lLnJhZGlpWzFdfSAke3RoZW1lLnJhZGlpWzFdfWB9O1xuYFxuXG5leHBvcnQgY29uc3QgU3R5bGVkRXhwYW5kYWJsZUJveCA9IHN0eWxlZChCb3gpPHsgcHJpbWFyeUNvbG9yPzogQ29sb3I7IGV4cGFuZGVkPzogYm9vbGVhbiB9PmBcbiAgYm9yZGVyOiAkeyh7IHRoZW1lIH0pID0+IGBzb2xpZCAke3RoZW1lLmJvcmRlcldpZHRoc1swXX0gJHt0aGVtZS5jb2xvcnNbJ2JvcmRlci1wcmltYXJ5J119YH07XG4gIGJveC1zaGFkb3c6ICR7KHsgdGhlbWUsIGV4cGFuZGVkLCBwcmltYXJ5Q29sb3IgfSkgPT5cbiAgICBleHBhbmRlZCAmJiBwcmltYXJ5Q29sb3JcbiAgICAgID8gYC0ke3RoZW1lLmJvcmRlcldpZHRoc1syXX0gMCAgMCAke1xuICAgICAgICAgIHRoZW1lLmNvbG9yc1tgJHtwcmltYXJ5Q29sb3J9YF1cbiAgICAgICAgfSR7YCwgMCAwLjI1cmVtIDAuMzVyZW0gJHt0aGVtZS5jb2xvcnNbJ2JvcmRlci1wcmltYXJ5J119LCAtMC40NXJlbSAwLjA1cmVtIDAuMzVyZW0gJHt0aGVtZS5jb2xvcnNbJ2dyZXktNzAnXX04OGB9YFxuICAgICAgOiBwcmltYXJ5Q29sb3JcbiAgICAgICAgPyBgLSR7dGhlbWUuYm9yZGVyV2lkdGhzWzJdfSAwICAwICR7dGhlbWUuY29sb3JzW2Ake3ByaW1hcnlDb2xvcn1gIGFzIENvbG9yXX1gXG4gICAgICAgIDogYC0ke3RoZW1lLmJvcmRlcldpZHRoc1syXX0gMCAwICR7dGhlbWUuY29sb3JzWydzdWJ0bGUtcHJpbWFyeScgYXMgQ29sb3JdfWB9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lLCBleHBhbmRlZCB9KSA9PiAoZXhwYW5kZWQgPyBgJHt0aGVtZS5yYWRpaVsxXX0gJHt0aGVtZS5yYWRpaVsxXX0gMCAwYCA6IHRoZW1lLnJhZGlpWzFdKX07XG5gXG5leHBvcnQgY29uc3QgU3R5bGVkQm94ID0gc3R5bGVkKEJveClgXG4gIGJvcmRlcjogJHsoeyB0aGVtZSB9KSA9PiBgc29saWQgJHt0aGVtZS5ib3JkZXJXaWR0aHNbMF19ICR7dGhlbWUuY29sb3JzWydib3JkZXItcHJpbWFyeSddfWB9O1xuICBib3JkZXItdG9wOiBub25lO1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IGAwIDAgJHt0aGVtZS5yYWRpaVsxXX0gJHt0aGVtZS5yYWRpaVsxXX1gfTtcbmBcbiJdfQ== */"));
+var StyledExpandableBox = exports.StyledExpandableBox = /*#__PURE__*/(0, _base["default"])(_Flexbox.Box, process.env.NODE_ENV === "production" ? {
+  target: "e1sxq8nk1"
+} : {
+  target: "e1sxq8nk1",
+  label: "codacy"
+})("border:", function (_ref3) {
+  var theme = _ref3.theme;
+  return "solid ".concat(theme.borderWidths[0], " ").concat(theme.colors['border-primary']);
+}, ";box-shadow:", function (_ref4) {
+  var theme = _ref4.theme,
+    expanded = _ref4.expanded,
+    primaryColor = _ref4.primaryColor;
+  return expanded && primaryColor ? "-".concat(theme.borderWidths[2], " 0  0 ").concat(theme.colors["".concat(primaryColor)], ", 0 0.25rem 0.35rem ".concat(theme.colors['border-primary'], ", -0.45rem 0.05rem 0.35rem ").concat(theme.colors['grey-70'], "88")) : primaryColor ? "-".concat(theme.borderWidths[2], " 0  0 ").concat(theme.colors["".concat(primaryColor)]) : "-".concat(theme.borderWidths[2], " 0 0 ").concat(theme.colors['subtle-primary']);
+}, ";border-radius:", function (_ref5) {
+  var theme = _ref5.theme,
+    expanded = _ref5.expanded;
+  return expanded ? "".concat(theme.radii[1], " ").concat(theme.radii[1], " 0 0") : theme.radii[1];
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9FeHBhbmRhYmxlQm94L0V4cGFuZGFibGVCb3guc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWU0RiIsImZpbGUiOiIuLi8uLi9zcmMvRXhwYW5kYWJsZUJveC9FeHBhbmRhYmxlQm94LnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vRmxleGJveCdcbmltcG9ydCB7IENvbG9yIH0gZnJvbSAnLi4vdGhlbWUnXG5pbXBvcnQgQW5pbWF0ZUhlaWdodCBmcm9tICdyZWFjdC1hbmltYXRlLWhlaWdodCdcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEFuaW1hdGVIZWlnaHQgPSBzdHlsZWQoQW5pbWF0ZUhlaWdodCk8eyBzZWNvbmRhcnlDb2xvcj86IENvbG9yIH0+YFxuICBib3gtc2hhZG93OiAkeyh7IHRoZW1lLCBzZWNvbmRhcnlDb2xvciB9KSA9PlxuICAgIHNlY29uZGFyeUNvbG9yXG4gICAgICA/IGAtJHt0aGVtZS5ib3JkZXJXaWR0aHNbMl19IDAgIDAgJHt0aGVtZS5jb2xvcnNbYCR7c2Vjb25kYXJ5Q29sb3J9YF19ICwgMCAwLjI1cmVtIDAuMzVyZW0gJHtcbiAgICAgICAgICB0aGVtZS5jb2xvcnNbJ2JvcmRlci1wcmltYXJ5J11cbiAgICAgICAgfSwgLTAuNDVyZW0gMC4yNXJlbSAwLjM1cmVtICR7dGhlbWUuY29sb3JzWydncmV5LTcwJ119ODhgXG4gICAgICA6ICdub25lJ307XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgdGhlbWUgfSkgPT4gYDAgMCAke3RoZW1lLnJhZGlpWzFdfSAke3RoZW1lLnJhZGlpWzFdfWB9O1xuYFxuXG5leHBvcnQgY29uc3QgU3R5bGVkRXhwYW5kYWJsZUJveCA9IHN0eWxlZChCb3gpPHsgcHJpbWFyeUNvbG9yPzogQ29sb3I7IGV4cGFuZGVkPzogYm9vbGVhbiB9PmBcbiAgYm9yZGVyOiAkeyh7IHRoZW1lIH0pID0+IGBzb2xpZCAke3RoZW1lLmJvcmRlcldpZHRoc1swXX0gJHt0aGVtZS5jb2xvcnNbJ2JvcmRlci1wcmltYXJ5J119YH07XG4gIGJveC1zaGFkb3c6ICR7KHsgdGhlbWUsIGV4cGFuZGVkLCBwcmltYXJ5Q29sb3IgfSkgPT5cbiAgICBleHBhbmRlZCAmJiBwcmltYXJ5Q29sb3JcbiAgICAgID8gYC0ke3RoZW1lLmJvcmRlcldpZHRoc1syXX0gMCAgMCAke1xuICAgICAgICAgIHRoZW1lLmNvbG9yc1tgJHtwcmltYXJ5Q29sb3J9YF1cbiAgICAgICAgfSR7YCwgMCAwLjI1cmVtIDAuMzVyZW0gJHt0aGVtZS5jb2xvcnNbJ2JvcmRlci1wcmltYXJ5J119LCAtMC40NXJlbSAwLjA1cmVtIDAuMzVyZW0gJHt0aGVtZS5jb2xvcnNbJ2dyZXktNzAnXX04OGB9YFxuICAgICAgOiBwcmltYXJ5Q29sb3JcbiAgICAgICAgPyBgLSR7dGhlbWUuYm9yZGVyV2lkdGhzWzJdfSAwICAwICR7dGhlbWUuY29sb3JzW2Ake3ByaW1hcnlDb2xvcn1gIGFzIENvbG9yXX1gXG4gICAgICAgIDogYC0ke3RoZW1lLmJvcmRlcldpZHRoc1syXX0gMCAwICR7dGhlbWUuY29sb3JzWydzdWJ0bGUtcHJpbWFyeScgYXMgQ29sb3JdfWB9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lLCBleHBhbmRlZCB9KSA9PiAoZXhwYW5kZWQgPyBgJHt0aGVtZS5yYWRpaVsxXX0gJHt0aGVtZS5yYWRpaVsxXX0gMCAwYCA6IHRoZW1lLnJhZGlpWzFdKX07XG5gXG5leHBvcnQgY29uc3QgU3R5bGVkQm94ID0gc3R5bGVkKEJveClgXG4gIGJvcmRlcjogJHsoeyB0aGVtZSB9KSA9PiBgc29saWQgJHt0aGVtZS5ib3JkZXJXaWR0aHNbMF19ICR7dGhlbWUuY29sb3JzWydib3JkZXItcHJpbWFyeSddfWB9O1xuICBib3JkZXItdG9wOiBub25lO1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IGAwIDAgJHt0aGVtZS5yYWRpaVsxXX0gJHt0aGVtZS5yYWRpaVsxXX1gfTtcbmBcbiJdfQ== */"));
+var StyledBox = exports.StyledBox = /*#__PURE__*/(0, _base["default"])(_Flexbox.Box, process.env.NODE_ENV === "production" ? {
+  target: "e1sxq8nk0"
+} : {
+  target: "e1sxq8nk0",
+  label: "codacy"
+})("border:", function (_ref6) {
+  var theme = _ref6.theme;
+  return "solid ".concat(theme.borderWidths[0], " ").concat(theme.colors['border-primary']);
+}, ";border-top:none;border-radius:", function (_ref7) {
+  var theme = _ref7.theme;
+  return "0 0 ".concat(theme.radii[1], " ").concat(theme.radii[1]);
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9FeHBhbmRhYmxlQm94L0V4cGFuZGFibGVCb3guc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCb0MiLCJmaWxlIjoiLi4vLi4vc3JjL0V4cGFuZGFibGVCb3gvRXhwYW5kYWJsZUJveC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IEJveCB9IGZyb20gJy4uL0ZsZXhib3gnXG5pbXBvcnQgeyBDb2xvciB9IGZyb20gJy4uL3RoZW1lJ1xuaW1wb3J0IEFuaW1hdGVIZWlnaHQgZnJvbSAncmVhY3QtYW5pbWF0ZS1oZWlnaHQnXG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBbmltYXRlSGVpZ2h0ID0gc3R5bGVkKEFuaW1hdGVIZWlnaHQpPHsgc2Vjb25kYXJ5Q29sb3I/OiBDb2xvciB9PmBcbiAgYm94LXNoYWRvdzogJHsoeyB0aGVtZSwgc2Vjb25kYXJ5Q29sb3IgfSkgPT5cbiAgICBzZWNvbmRhcnlDb2xvclxuICAgICAgPyBgLSR7dGhlbWUuYm9yZGVyV2lkdGhzWzJdfSAwICAwICR7dGhlbWUuY29sb3JzW2Ake3NlY29uZGFyeUNvbG9yfWBdfSAsIDAgMC4yNXJlbSAwLjM1cmVtICR7XG4gICAgICAgICAgdGhlbWUuY29sb3JzWydib3JkZXItcHJpbWFyeSddXG4gICAgICAgIH0sIC0wLjQ1cmVtIDAuMjVyZW0gMC4zNXJlbSAke3RoZW1lLmNvbG9yc1snZ3JleS03MCddfTg4YFxuICAgICAgOiAnbm9uZSd9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IGAwIDAgJHt0aGVtZS5yYWRpaVsxXX0gJHt0aGVtZS5yYWRpaVsxXX1gfTtcbmBcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEV4cGFuZGFibGVCb3ggPSBzdHlsZWQoQm94KTx7IHByaW1hcnlDb2xvcj86IENvbG9yOyBleHBhbmRlZD86IGJvb2xlYW4gfT5gXG4gIGJvcmRlcjogJHsoeyB0aGVtZSB9KSA9PiBgc29saWQgJHt0aGVtZS5ib3JkZXJXaWR0aHNbMF19ICR7dGhlbWUuY29sb3JzWydib3JkZXItcHJpbWFyeSddfWB9O1xuICBib3gtc2hhZG93OiAkeyh7IHRoZW1lLCBleHBhbmRlZCwgcHJpbWFyeUNvbG9yIH0pID0+XG4gICAgZXhwYW5kZWQgJiYgcHJpbWFyeUNvbG9yXG4gICAgICA/IGAtJHt0aGVtZS5ib3JkZXJXaWR0aHNbMl19IDAgIDAgJHtcbiAgICAgICAgICB0aGVtZS5jb2xvcnNbYCR7cHJpbWFyeUNvbG9yfWBdXG4gICAgICAgIH0ke2AsIDAgMC4yNXJlbSAwLjM1cmVtICR7dGhlbWUuY29sb3JzWydib3JkZXItcHJpbWFyeSddfSwgLTAuNDVyZW0gMC4wNXJlbSAwLjM1cmVtICR7dGhlbWUuY29sb3JzWydncmV5LTcwJ119ODhgfWBcbiAgICAgIDogcHJpbWFyeUNvbG9yXG4gICAgICAgID8gYC0ke3RoZW1lLmJvcmRlcldpZHRoc1syXX0gMCAgMCAke3RoZW1lLmNvbG9yc1tgJHtwcmltYXJ5Q29sb3J9YCBhcyBDb2xvcl19YFxuICAgICAgICA6IGAtJHt0aGVtZS5ib3JkZXJXaWR0aHNbMl19IDAgMCAke3RoZW1lLmNvbG9yc1snc3VidGxlLXByaW1hcnknIGFzIENvbG9yXX1gfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSwgZXhwYW5kZWQgfSkgPT4gKGV4cGFuZGVkID8gYCR7dGhlbWUucmFkaWlbMV19ICR7dGhlbWUucmFkaWlbMV19IDAgMGAgOiB0aGVtZS5yYWRpaVsxXSl9O1xuYFxuZXhwb3J0IGNvbnN0IFN0eWxlZEJveCA9IHN0eWxlZChCb3gpYFxuICBib3JkZXI6ICR7KHsgdGhlbWUgfSkgPT4gYHNvbGlkICR7dGhlbWUuYm9yZGVyV2lkdGhzWzBdfSAke3RoZW1lLmNvbG9yc1snYm9yZGVyLXByaW1hcnknXX1gfTtcbiAgYm9yZGVyLXRvcDogbm9uZTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSB9KSA9PiBgMCAwICR7dGhlbWUucmFkaWlbMV19ICR7dGhlbWUucmFkaWlbMV19YH07XG5gXG4iXX0= */"));

package/lib/ExpandableBox/ExpandableBox.types.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ContainerComponentProps } from '../types';
+import { SpaceProps, LayoutProps, ColorProps } from '../system-props/types';
+import { Color } from '../theme';
+export interface ExpandableBoxProps extends ContainerComponentProps, SpaceProps, LayoutProps, ColorProps {
+    primaryColor?: Color;
+    secondaryColor?: Color;
+    expanded?: boolean;
+    animating?: boolean;
+    setAnimating?: (animating: boolean) => void;
+    expandableContentChildren?: React.ReactNode;
+}

package/lib/ExpandableBox/ExpandableBox.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/ExpandableBox/index.d.ts

@@ -0,0 +1 @@
+export * from './ExpandableBox';

package/lib/ExpandableBox/index.js

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

package/lib/index.d.ts

@@ -45,3 +45,4 @@ export * from './system-props';
 export * from './ProgressBar';
 export * from './Slider';
 export * from './MultiSlider';
+export * from './ExpandableBox';

package/lib/index.js

@@ -519,4 +519,15 @@ Object.keys(_MultiSlider).forEach(function (key) {
       return _MultiSlider[key];
     }
   });
+});
+var _ExpandableBox = require("./ExpandableBox");
+Object.keys(_ExpandableBox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ExpandableBox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ExpandableBox[key];
+    }
+  });
 });

package/lib/theme/ColorSchemes/codacy.d.ts

@@ -1,162 +1,111 @@
-export declare const baseColors: {
-    'blue-99': string;
-    'blue-95': string;
-    'blue-90': string;
-    'blue-80': string;
-    'blue-70': string;
-    'blue-60': string;
-    'blue-50': string;
-    'blue-40': string;
-    'blue-30': string;
-    'blue-20': string;
-    'blue-10': string;
-    'orange-99': string;
-    'orange-95': string;
-    'orange-90': string;
-    'orange-80': string;
-    'orange-70': string;
-    'orange-60': string;
-    'orange-50': string;
-    'orange-40': string;
-    'orange-30': string;
-    'orange-20': string;
-    'orange-10': string;
-    'purple-99': string;
-    'purple-95': string;
-    'purple-90': string;
-    'purple-80': string;
-    'purple-70': string;
-    'purple-60': string;
-    'purple-50': string;
-    'purple-40': string;
-    'purple-30': string;
-    'purple-20': string;
-    'purple-10': string;
-    'grey-99': string;
-    'grey-95': string;
-    'grey-90': string;
-    'grey-80': string;
-    'grey-70': string;
-    'grey-60': string;
-    'grey-50': string;
-    'grey-40': string;
-    'grey-30': string;
-    'grey-20': string;
-    'grey-10': string;
-    white: string;
-    'red-99': string;
-    'red-95': string;
-    'red-90': string;
-    'red-80': string;
-    'red-70': string;
-    'red-60': string;
-    'red-50': string;
-    'red-40': string;
-    'red-30': string;
-    'red-20': string;
-    'red-10': string;
-    'green-99': string;
-    'green-95': string;
-    'green-90': string;
-    'green-80': string;
-    'green-70': string;
-    'green-60': string;
-    'green-50': string;
-    'green-40': string;
-    'green-30': string;
-    'green-20': string;
-    'green-10': string;
-    'yellow-99': string;
-    'yellow-95': string;
-    'yellow-90': string;
-    'yellow-80': string;
-    'yellow-70': string;
-    'yellow-60': string;
-    'yellow-50': string;
-    'yellow-40': string;
-    'yellow-30': string;
-    'yellow-20': string;
-    'yellow-10': string;
+export declare const colorNames: readonly ["blue", "grey", "purple", "orange", "turquoise", "magenta", "red", "green", "yellow"];
+declare type ColorName = (typeof colorNames)[number];
+declare type ColorNumber = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95 | 99;
+declare type ColorType = {
+    [key in `${ColorName}-${ColorNumber}` | 'white']: string;
 };
+export declare const baseColors: ColorType;
 export declare const functionalColorsFx: (colors: {
     white: string;
-    "blue-99": string;
-    "blue-95": string;
-    "blue-90": string;
-    "blue-80": string;
-    "blue-70": string;
-    "blue-60": string;
-    "blue-50": string;
-    "blue-40": string;
-    "blue-30": string;
-    "blue-20": string;
     "blue-10": string;
-    "orange-99": string;
-    "orange-95": string;
-    "orange-90": string;
-    "orange-80": string;
-    "orange-70": string;
-    "orange-60": string;
-    "orange-50": string;
-    "orange-40": string;
-    "orange-30": string;
-    "orange-20": string;
+    "blue-20": string;
+    "blue-30": string;
+    "blue-40": string;
+    "blue-50": string;
+    "blue-60": string;
+    "blue-70": string;
+    "blue-80": string;
+    "blue-90": string;
+    "blue-95": string;
+    "blue-99": string;
+    "green-10": string;
+    "green-20": string;
+    "green-30": string;
+    "green-40": string;
+    "green-50": string;
+    "green-60": string;
+    "green-70": string;
+    "green-80": string;
+    "green-90": string;
+    "green-95": string;
+    "green-99": string;
+    "grey-10": string;
+    "grey-20": string;
+    "grey-30": string;
+    "grey-40": string;
+    "grey-50": string;
+    "grey-60": string;
+    "grey-70": string;
+    "grey-80": string;
+    "grey-90": string;
+    "grey-95": string;
+    "grey-99": string;
+    "magenta-10": string;
+    "magenta-20": string;
+    "magenta-30": string;
+    "magenta-40": string;
+    "magenta-50": string;
+    "magenta-60": string;
+    "magenta-70": string;
+    "magenta-80": string;
+    "magenta-90": string;
+    "magenta-95": string;
+    "magenta-99": string;
     "orange-10": string;
-    "purple-99": string;
-    "purple-95": string;
-    "purple-90": string;
-    "purple-80": string;
-    "purple-70": string;
-    "purple-60": string;
-    "purple-50": string;
-    "purple-40": string;
-    "purple-30": string;
-    "purple-20": string;
+    "orange-20": string;
+    "orange-30": string;
+    "orange-40": string;
+    "orange-50": string;
+    "orange-60": string;
+    "orange-70": string;
+    "orange-80": string;
+    "orange-90": string;
+    "orange-95": string;
+    "orange-99": string;
     "purple-10": string;
-    "grey-99": string;
-    "grey-95": string;
-    "grey-90": string;
-    "grey-80": string;
-    "grey-70": string;
-    "grey-60": string;
-    "grey-50": string;
-    "grey-40": string;
-    "grey-30": string;
-    "grey-20": string;
-    "grey-10": string;
-    "red-99": string;
-    "red-95": string;
-    "red-90": string;
-    "red-80": string;
-    "red-70": string;
-    "red-60": string;
-    "red-50": string;
-    "red-40": string;
-    "red-30": string;
-    "red-20": string;
+    "purple-20": string;
+    "purple-30": string;
+    "purple-40": string;
+    "purple-50": string;
+    "purple-60": string;
+    "purple-70": string;
+    "purple-80": string;
+    "purple-90": string;
+    "purple-95": string;
+    "purple-99": string;
     "red-10": string;
-    "green-99": string;
-    "green-95": string;
-    "green-90": string;
-    "green-80": string;
-    "green-70": string;
-    "green-60": string;
-    "green-50": string;
-    "green-40": string;
-    "green-30": string;
-    "green-20": string;
-    "green-10": string;
-    "yellow-99": string;
-    "yellow-95": string;
-    "yellow-90": string;
-    "yellow-80": string;
-    "yellow-70": string;
-    "yellow-60": string;
-    "yellow-50": string;
-    "yellow-40": string;
-    "yellow-30": string;
-    "yellow-20": string;
+    "red-20": string;
+    "red-30": string;
+    "red-40": string;
+    "red-50": string;
+    "red-60": string;
+    "red-70": string;
+    "red-80": string;
+    "red-90": string;
+    "red-95": string;
+    "red-99": string;
+    "turquoise-10": string;
+    "turquoise-20": string;
+    "turquoise-30": string;
+    "turquoise-40": string;
+    "turquoise-50": string;
+    "turquoise-60": string;
+    "turquoise-70": string;
+    "turquoise-80": string;
+    "turquoise-90": string;
+    "turquoise-95": string;
+    "turquoise-99": string;
     "yellow-10": string;
+    "yellow-20": string;
+    "yellow-30": string;
+    "yellow-40": string;
+    "yellow-50": string;
+    "yellow-60": string;
+    "yellow-70": string;
+    "yellow-80": string;
+    "yellow-90": string;
+    "yellow-95": string;
+    "yellow-99": string;
 }) => {
     'brand-primary': string;
     'brand-hover': string;
@@ -198,26 +147,11 @@ export declare const functionalColorsFx: (colors: {
     'text-tertiary': string;
     'text-inverted': string;
     'text-disabled': string;
-    'text-danger': string;
-    'text-success': string;
-    'text-warning': string;
-    'text-info': string;
-    'text-attention': string;
     'background-primary': string;
     'background-secondary': string;
     'background-brand': string;
     'background-subtle': string;
-    'background-danger': string;
-    'background-success': string;
-    'background-warning': string;
-    'background-info': string;
-    'background-attention': string;
     'border-primary': string;
-    'border-danger': string;
-    'border-success': string;
-    'border-info': string;
-    'border-warning': string;
-    'border-attention': string;
     'border-brand-primary': string;
     'border-brand-hover': string;
     'border-brand-pressed': string;
@@ -231,14 +165,29 @@ export declare const functionalColorsFx: (colors: {
     'icon-brand-enabled': string;
     'icon-brand-hover': string;
     'icon-brand-disabled': string;
-    'icon-danger': string;
-    'icon-success': string;
-    'icon-warning': string;
-    'icon-info': string;
-    'icon-attention': string;
     'icon-inverted': string;
+    "background-success": string;
+    "background-danger": string;
+    "background-warning": string;
+    "background-info": string;
+    "background-attention": string;
+    "border-success": string;
+    "border-danger": string;
+    "border-warning": string;
+    "border-info": string;
+    "border-attention": string;
+    "text-success": string;
+    "text-danger": string;
+    "text-warning": string;
+    "text-info": string;
+    "text-attention": string;
+    "icon-success": string;
+    "icon-danger": string;
+    "icon-warning": string;
+    "icon-info": string;
+    "icon-attention": string;
 };
-declare const functionalColors: {
+export declare const functionalColors: {
     'brand-primary': string;
     'brand-hover': string;
     'brand-pressed': string;
@@ -279,26 +228,11 @@ declare const functionalColors: {
     'text-tertiary': string;
     'text-inverted': string;
     'text-disabled': string;
-    'text-danger': string;
-    'text-success': string;
-    'text-warning': string;
-    'text-info': string;
-    'text-attention': string;
     'background-primary': string;
     'background-secondary': string;
     'background-brand': string;
     'background-subtle': string;
-    'background-danger': string;
-    'background-success': string;
-    'background-warning': string;
-    'background-info': string;
-    'background-attention': string;
     'border-primary': string;
-    'border-danger': string;
-    'border-success': string;
-    'border-info': string;
-    'border-warning': string;
-    'border-attention': string;
     'border-brand-primary': string;
     'border-brand-hover': string;
     'border-brand-pressed': string;
@@ -312,12 +246,27 @@ declare const functionalColors: {
     'icon-brand-enabled': string;
     'icon-brand-hover': string;
     'icon-brand-disabled': string;
-    'icon-danger': string;
-    'icon-success': string;
-    'icon-warning': string;
-    'icon-info': string;
-    'icon-attention': string;
     'icon-inverted': string;
+    "background-success": string;
+    "background-danger": string;
+    "background-warning": string;
+    "background-info": string;
+    "background-attention": string;
+    "border-success": string;
+    "border-danger": string;
+    "border-warning": string;
+    "border-info": string;
+    "border-attention": string;
+    "text-success": string;
+    "text-danger": string;
+    "text-warning": string;
+    "text-info": string;
+    "text-attention": string;
+    "icon-success": string;
+    "icon-danger": string;
+    "icon-warning": string;
+    "icon-info": string;
+    "icon-attention": string;
 };
 export declare type BaseColor = keyof typeof baseColors;
 export declare type FunctionalColor = keyof typeof functionalColors;

package/lib/theme/ColorSchemes/codacy.js

@@ -4,98 +4,84 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.functionalColorsFx = exports.codacyThemeColors = exports.baseColors = void 0;
+exports.functionalColorsFx = exports.functionalColors = exports.colorNames = exports.codacyThemeColors = exports.baseColors = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var baseColors = exports.baseColors = {
-  // BLUE - Quality
-  'blue-99': '#F0F6FF',
-  'blue-95': '#E5EFFF',
-  'blue-90': '#DBE9FF',
-  'blue-80': '#C2D9FF',
-  'blue-70': '#94BDFF',
-  'blue-60': '#608BFF',
-  'blue-50': '#3172FC',
-  'blue-40': '#0061FA',
-  'blue-30': '#004AC2',
-  'blue-20': '#004AC2',
-  'blue-10': '#00174A',
-  // ORANGE - Security
-  'orange-99': '#FFFCFA',
-  'orange-95': '#FFF2E6',
-  'orange-90': '#FEE5CD',
-  'orange-80': '#FECA9A',
-  'orange-70': '#FDB068',
-  'orange-60': '#FD9535',
-  'orange-50': '#FD881C',
-  'orange-40': '#F47603',
-  'orange-30': '#C56002',
-  'orange-20': '#653101',
-  'orange-10': '#321901',
-  // PURPLE - Codacy
-  'purple-99': '#FCFBFE',
-  'purple-95': '#F1EAFA',
-  'purple-90': '#E4D5F6',
-  'purple-80': '#C8ACEC',
-  'purple-70': '#AD82E3',
-  'purple-60': '#9F6DDE',
-  'purple-50': '#8443D5',
-  'purple-40': '#712DC8',
-  'purple-30': '#532192',
-  'purple-20': '#421A75',
-  'purple-10': '#18092A',
-  // GREY - Neutral
-  'grey-99': '#F4F6FB',
-  'grey-95': '#E8EDF7',
-  'grey-90': '#DAE2F1',
-  'grey-80': '#C8D2E4',
-  'grey-70': '#B9C5DA',
-  'grey-60': '#99A7C2',
-  'grey-50': '#798CAF',
-  'grey-40': '#5C7199',
-  'grey-30': '#415986',
-  'grey-20': '#2C4168',
-  'grey-10': '#182949',
-  // WHITE
-  white: '#FFFFFF',
-  // RED - Error
-  'red-99': '#FFF6F5',
-  'red-95': '#FFEDEB',
-  'red-90': '#FFDAD6',
-  'red-80': '#FFB3AD',
-  'red-70': '#FF8980',
-  'red-60': '#FB5851',
-  'red-50': '#D52E2A',
-  'red-40': '#CC292B',
-  'red-30': '#960311',
-  'red-20': '#680008',
-  'red-10': '#410003',
-  // GREEN - Success
-  'green-99': '#F7FCF9',
-  'green-95': '#ECF9EF',
-  'green-90': '#D9F2E0',
-  'green-80': '#B3E5C1',
-  'green-70': '#8CD9A2',
-  'green-60': '#66CC83',
-  'green-50': '#40BF64',
-  'green-40': '#339950',
-  'green-30': '#26733C',
-  'green-20': '#1A4C28',
-  'green-10': '#0D2614',
-  // YELLOW - Warning
-  'yellow-99': '#FFFDFA',
-  'yellow-95': '#FFF6E5',
-  'yellow-90': '#FFECCC',
-  'yellow-80': '#FFD999',
-  'yellow-70': '#FFC666',
-  'yellow-60': '#FFB433',
-  'yellow-50': '#FFA101',
-  'yellow-40': '#EB9400',
-  'yellow-30': '#996000',
-  'yellow-20': '#664000',
-  'yellow-10': '#332000'
+var colorNames = exports.colorNames = ['blue', 'grey', 'purple', 'orange', 'turquoise', 'magenta', 'red', 'green', 'yellow'];
+var semantics = ['danger', 'success', 'warning', 'info', 'attention'];
+var generateBaseColors = function generateBaseColors(color) {
+  var colors = {};
+  colors["".concat(color.name, "-99")] = "hsl(".concat(color.hue, ", ").concat(color.saturation, "%, 98%)");
+  colors["".concat(color.name, "-95")] = "hsl(".concat(color.hue, ", ").concat(color.saturation, "%, 95%)");
+  colors["".concat(color.name, "-90")] = "hsl(".concat(color.hue, ", ").concat(color.saturation, "%, 90%)");
+  for (var i = 80; i >= 10; i -= 10) {
+    colors["".concat(color.name, "-").concat(i)] = "hsl(".concat(color.hue, ", ").concat(color.saturation, "%, ").concat(color.lightnessStart + i, "%)");
+  }
+  return colors;
+};
+var baseColors = exports.baseColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, generateBaseColors({
+  name: 'turquoise',
+  hue: 183,
+  saturation: 50,
+  lightnessStart: 0
+})), generateBaseColors({
+  name: 'blue',
+  hue: 217,
+  saturation: 100,
+  lightnessStart: 7
+})), generateBaseColors({
+  name: 'magenta',
+  hue: 310,
+  saturation: 63,
+  lightnessStart: 2
+})), generateBaseColors({
+  name: 'purple',
+  hue: 266,
+  saturation: 64,
+  lightnessStart: 7
+})), generateBaseColors({
+  name: 'orange',
+  hue: 29,
+  saturation: 98,
+  lightnessStart: 7
+})), generateBaseColors({
+  name: 'grey',
+  hue: 219,
+  saturation: 25,
+  lightnessStart: 7
+})), generateBaseColors({
+  name: 'red',
+  hue: 359,
+  saturation: 67,
+  lightnessStart: 7
+})), generateBaseColors({
+  name: 'green',
+  hue: 137,
+  saturation: 50,
+  lightnessStart: 0
+})), generateBaseColors({
+  name: 'yellow',
+  hue: 38,
+  saturation: 100,
+  lightnessStart: 7
+})), {}, {
+  white: '#FFFFFF'
+});
+var semanticFunctionalColorsFx = function semanticFunctionalColorsFx(prefix, number) {
+  var colors = {};
+  var semanticMapToColor = {
+    danger: 'red',
+    success: 'green',
+    warning: 'yellow',
+    info: 'blue',
+    attention: 'purple'
+  };
+  semantics.map(function (semantic) {
+    return colors["".concat(prefix, "-").concat(semantic)] = baseColors["".concat(semanticMapToColor[semantic], "-").concat(number)];
+  });
+  return colors;
 };
 var functionalColorsFx = exports.functionalColorsFx = function functionalColorsFx(colors) {
-  return {
+  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, semanticFunctionalColorsFx('text', 40)), semanticFunctionalColorsFx('background', 95)), semanticFunctionalColorsFx('border', 40)), semanticFunctionalColorsFx('icon', 40)), {}, {
     // Brand
     'brand-primary': colors['blue-40'],
     'brand-hover': colors['blue-30'],
@@ -156,30 +142,14 @@ var functionalColorsFx = exports.functionalColorsFx = function functionalColorsF
     'text-tertiary': colors['grey-50'],
     'text-inverted': colors['white'],
     'text-disabled': colors['grey-70'],
-    // Text - Semantic
-    'text-danger': colors['red-40'],
-    'text-success': colors['green-40'],
-    'text-warning': colors['yellow-40'],
-    'text-info': colors['blue-40'],
-    'text-attention': colors['purple-40'],
     // Background
     'background-primary': colors['white'],
     'background-secondary': colors['grey-99'],
     // Background - Semantic
     'background-brand': colors['blue-95'],
     'background-subtle': colors['grey-95'],
-    'background-danger': colors['red-95'],
-    'background-success': colors['green-95'],
-    'background-warning': colors['yellow-95'],
-    'background-info': colors['blue-95'],
-    'background-attention': colors['purple-95'],
     // Border
     'border-primary': colors['grey-95'],
-    'border-danger': colors['red-40'],
-    'border-success': colors['green-40'],
-    'border-info': colors['blue-40'],
-    'border-warning': colors['yellow-40'],
-    'border-attention': colors['purple-70'],
     // Border - Brand
     'border-brand-primary': colors['blue-70'],
     'border-brand-hover': colors['blue-40'],
@@ -199,13 +169,8 @@ var functionalColorsFx = exports.functionalColorsFx = function functionalColorsF
     'icon-brand-enabled': colors['blue-40'],
     'icon-brand-hover': colors['blue-30'],
     'icon-brand-disabled': colors['blue-70'],
-    'icon-danger': colors['red-40'],
-    'icon-success': colors['green-40'],
-    'icon-warning': colors['yellow-40'],
-    'icon-info': colors['blue-40'],
-    'icon-attention': colors['purple-50'],
     'icon-inverted': colors['white']
-  };
+  });
 };
-var functionalColors = functionalColorsFx(baseColors);
+var functionalColors = exports.functionalColors = functionalColorsFx(baseColors);
 var codacyThemeColors = exports.codacyThemeColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, baseColors), functionalColors);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codacy/ui-components",
-  "version": "0.65.51",
+  "version": "0.65.53",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -91,6 +91,7 @@
     "numeral": "^2.0.6",
     "prettier": "^3.1.1",
     "react": "^18.2.0",
+    "react-animate-height": "3.1.1",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",