quicksnack 1.22.3 → 1.24.2

package/dist/animation/SlideInFromTop/SlideInFromTop.d.ts

@@ -1 +1,3 @@
-export declare const SlideInFromTop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SlideInFromTop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    speed?: string | undefined;
+}, never>;

package/dist/animation/SlideInFromTop/SlideInFromTop.js

@@ -26,5 +26,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SlideInFromTop = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var slideInFromTop = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n    transform: translateY(-5px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"], ["\n  0% {\n    opacity: 0;\n    transform: translateY(-5px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
-exports.SlideInFromTop = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: ", " .3s ease-in 0s 1;\n"], ["\n  animation: ", " .3s ease-in 0s 1;\n"])), slideInFromTop);
+exports.SlideInFromTop = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: ", " ", " ease-in 0s 1;\n"], ["\n  animation: ", " ", " ease-in 0s 1;\n"])), slideInFromTop, function (props) { return props.speed || '.3s'; });
 var templateObject_1, templateObject_2;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Button } from "../../form/Button/Button";
+interface Props {
+    buttonProps: React.ComponentProps<typeof Button>;
+    align?: 'left' | 'right';
+}
+export declare const DropdownMenu: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const DropdownMenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+export declare const Dropdown: React.FC<Props>;
+export {};

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,65 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = exports.DropdownMenuItem = exports.DropdownMenu = void 0;
+var react_1 = __importStar(require("react"));
+var Button_1 = require("../../form/Button/Button");
+var styled_components_1 = __importStar(require("styled-components"));
+var SlideInFromTop_1 = require("../../animation/SlideInFromTop/SlideInFromTop");
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var Dropper = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);\n  position: absolute;\n  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);  \n  background-color: ", ";\n  \n  ", "  \n"], ["\n  border-radius: 4px;\n  border: 1px solid rgba(34,36,38,.15);\n  position: absolute;\n  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);  \n  background-color: ", ";\n  \n  ", "  \n"])), function (props) { return props.theme.palette.common.white; }, function (props) { return props.align === 'right' ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["right: 0;"], ["right: 0;"]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["left: 0;"], ["left: 0;"]))); });
+exports.DropdownMenu = styled_components_1.default.ul(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: ", ";  \n"], ["\n  list-style: none;\n  margin: 0;\n  padding: ", ";  \n"])), function (props) { return props.theme.spacing(2, 0); });
+exports.DropdownMenuItem = styled_components_1.default.li(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  cursor: pointer;\n  padding: ", ";\n  &:hover {\n    background-color: #ddd;\n  }\n"], ["\n  cursor: pointer;\n  padding: ", ";\n  &:hover {\n    background-color: #ddd;\n  }\n"])), function (props) { return props.theme.spacing(0, 3); });
+var Dropdown = function (_a) {
+    var buttonProps = _a.buttonProps, align = _a.align, children = _a.children;
+    var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
+    var handleOpen = (0, react_1.useCallback)(function () { return setIsOpen(true); }, [setIsOpen]);
+    var handleClose = (0, react_1.useCallback)(function () { return setIsOpen(false); }, [setIsOpen]);
+    react_1.default.useEffect(function () {
+        if (isOpen) {
+            document.addEventListener('click', handleClose);
+        }
+        return function () {
+            document.removeEventListener('click', handleClose);
+        };
+    }, [isOpen]);
+    return (react_1.default.createElement(Wrapper, null,
+        react_1.default.createElement(Button_1.Button, __assign({}, buttonProps, { onClick: handleOpen })),
+        isOpen && (react_1.default.createElement(SlideInFromTop_1.SlideInFromTop, { speed: '.1s' },
+            react_1.default.createElement(Dropper, { align: align || 'left' }, children)))));
+};
+exports.Dropdown = Dropdown;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/Paginator/Paginator.js

@@ -29,9 +29,9 @@ var Paginator = function (props) {
         react_1.default.createElement(Button, { "data-testid": "paginate-prev", disabled: currentPage === 1, onClick: function () { return onChange(currentPage - 1); } }, "\u27E8"),
         clamLower > 1 && (react_1.default.createElement(Button, { "data-testid": "paginate-page-1", active: currentPage === 1, onClick: function () { return onChange(1); } }, "1")),
         clamLower > 2 && (react_1.default.createElement(Button, { disabled: true }, "...")),
-        range(clamLower, clamUpper + 1).map(function (pageNumber) { return (react_1.default.createElement(Button, { "data-testid": "paginate-page-" + pageNumber, key: pageNumber, active: currentPage === pageNumber, onClick: function () { return onChange(pageNumber); } }, pageNumber)); }),
+        range(clamLower, clamUpper + 1).map(function (pageNumber) { return (react_1.default.createElement(Button, { "data-testid": "paginate-page-".concat(pageNumber), key: pageNumber, active: currentPage === pageNumber, onClick: function () { return onChange(pageNumber); } }, pageNumber)); }),
         clamUpper < pageCount - 1 && (react_1.default.createElement(Button, { disabled: true }, "...")),
-        clamUpper < pageCount && (react_1.default.createElement(Button, { "data-testid": "paginate-page-" + pageCount, active: currentPage === pageCount, onClick: function () { return onChange(pageCount); } }, pageCount)),
+        clamUpper < pageCount && (react_1.default.createElement(Button, { "data-testid": "paginate-page-".concat(pageCount), active: currentPage === pageCount, onClick: function () { return onChange(pageCount); } }, pageCount)),
         react_1.default.createElement(Button, { "data-testid": "paginate-next", disabled: currentPage === pageCount, onClick: function () { return onChange(currentPage + 1); } }, "\u27E9")));
 };
 exports.Paginator = Paginator;

package/dist/components/Table/Table.js

@@ -55,14 +55,14 @@ var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps")
 exports.StyledTable = styled_components_1.default.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 4px;\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;      \n"], ["\n  border-radius: 4px;\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;      \n"])));
 var StyledTableRow = styled_components_1.default.tr(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > td {\n    transition: background-color .1s ease, color .1s ease;\n  }\n  ", "    \n"], ["\n  & > td {\n    transition: background-color .1s ease, color .1s ease;\n  }\n  ", "    \n"])), function (props) { return Object.entries(props.theme.palette.pane).map(function (_a) {
     var variant = _a[0], value = _a[1];
-    return "\n    &:nth-child(odd) > td." + variant + " {    \n      color: " + value.main.idle.text + ";\n      background-color: " + value.main.idle.background + ";        \n    }                  \n    &:nth-child(even) > td." + variant + " {    \n      color: " + value.alternate.idle.text + ";\n      background-color: " + value.alternate.idle.background + ";        \n    }            \n    \n    \n    " + (!props.disableHover && "\n      &:nth-child(odd):hover > td." + variant + " {\n        color: " + value.main.hover.text + ";\n        background-color: " + value.main.hover.background + ";          \n      }\n      &:nth-child(even):hover > td." + variant + " {\n        color: " + value.alternate.hover.text + ";\n        background-color: " + value.alternate.hover.background + ";          \n      }\n    ") + " \n    \n    \n  ";
+    return "\n    &:nth-child(odd) > td.".concat(variant, " {    \n      color: ").concat(value.main.idle.text, ";\n      background-color: ").concat(value.main.idle.background, ";        \n    }                  \n    &:nth-child(even) > td.").concat(variant, " {    \n      color: ").concat(value.alternate.idle.text, ";\n      background-color: ").concat(value.alternate.idle.background, ";        \n    }            \n    \n    \n    ").concat(!props.disableHover && "\n      &:nth-child(odd):hover > td.".concat(variant, " {\n        color: ").concat(value.main.hover.text, ";\n        background-color: ").concat(value.main.hover.background, ";          \n      }\n      &:nth-child(even):hover > td.").concat(variant, " {\n        color: ").concat(value.alternate.hover.text, ";\n        background-color: ").concat(value.alternate.hover.background, ";          \n      }\n    "), " \n    \n    \n  ");
 }); });
 var StyledTableCell = styled_components_1.default.td(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-top: 1px solid rgba(34,36,38,.1);\n  border-right: 1px solid rgba(34,36,38,.1);    \n  padding: ", ";\n  \n  &:last-of-type {\n    border-right: 0;\n  }\n        \n  ", "\n"], ["\n  border-top: 1px solid rgba(34,36,38,.1);\n  border-right: 1px solid rgba(34,36,38,.1);    \n  padding: ", ";\n  \n  &:last-of-type {\n    border-right: 0;\n  }\n        \n  ", "\n"])), function (props) { return props.theme.spacing(2, 3); }, function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
     width: function (unit) { return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), unit); },
 }); });
 var StyledTableHeadCell = styled_components_1.default.th(templateObject_6 || (templateObject_6 = __makeTemplateObject(["  \n  border-right: 1px solid rgba(34,36,38,.1); \n  text-align: left;\n  padding: ", ";  \n  font-weight: 700;\n  transition: background-color .1s ease, color .1s ease;\n\n  &:last-of-type {\n    border-right: 0;\n  }\n  \n  ", "\n  \n  ", "\n \n  ", " \n  \n  ", "\n"], ["  \n  border-right: 1px solid rgba(34,36,38,.1); \n  text-align: left;\n  padding: ", ";  \n  font-weight: 700;\n  transition: background-color .1s ease, color .1s ease;\n\n  &:last-of-type {\n    border-right: 0;\n  }\n  \n  ", "\n  \n  ", "\n \n  ", " \n  \n  ", "\n"
     // Wrapper to allow for dot notated components:
-])), function (props) { return props.theme.spacing(2, 3); }, function (props) { return !!props.variant && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    background-color: ", ";\n    \n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }    \n  "], ["\n    color: ", ";\n    background-color: ", ";\n    \n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }    \n  "])), props.theme.palette.pane[props.variant].main.idle.text, props.theme.palette.pane[props.variant].main.idle.background, props.theme.palette.pane[props.variant].main.hover.text, props.theme.palette.pane[props.variant].main.hover.background); }, function (props) { return props.width ? "width: " + props.width + ";" : ''; }, function (props) { return props.sortable && "\n    cursor: pointer;\n    user-select: none;\n    \n    &:hover {      \n      background-color: " + props.theme.palette.pane.basic.main.hover.background + ";   \n    }       \n  "; }, function (props) { return props.sortDirection && "         \n    position:relative;\n         \n    &:after {\n      content: \" \";\n      position: absolute; \n      right: 15px;\n      top: 50%;\n                     \n      height: 0;\n      width: 0;\n      border: 5px solid transparent;\n      \n      " + (props.sortDirection === 'asc' ? "\n        border-top-color: #000;\n        transform: translateY(-25%);\n      " : "\n        border-bottom-color: #000;\n        transform: translateY(-75%);\n      ") + "                            \n    }       \n  "; });
+])), function (props) { return props.theme.spacing(2, 3); }, function (props) { return !!props.variant && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    background-color: ", ";\n    \n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }    \n  "], ["\n    color: ", ";\n    background-color: ", ";\n    \n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }    \n  "])), props.theme.palette.pane[props.variant].main.idle.text, props.theme.palette.pane[props.variant].main.idle.background, props.theme.palette.pane[props.variant].main.hover.text, props.theme.palette.pane[props.variant].main.hover.background); }, function (props) { return props.width ? "width: ".concat(props.width, ";") : ''; }, function (props) { return props.sortable && "\n    cursor: pointer;\n    user-select: none;\n    \n    &:hover {      \n      background-color: ".concat(props.theme.palette.pane.basic.main.hover.background, ";   \n    }       \n  "); }, function (props) { return props.sortDirection && "         \n    position:relative;\n         \n    &:after {\n      content: \" \";\n      position: absolute; \n      right: 15px;\n      top: 50%;\n                     \n      height: 0;\n      width: 0;\n      border: 5px solid transparent;\n      \n      ".concat(props.sortDirection === 'asc' ? "\n        border-top-color: #000;\n        transform: translateY(-25%);\n      " : "\n        border-bottom-color: #000;\n        transform: translateY(-75%);\n      ", "                            \n    }       \n  "); });
 // Wrapper to allow for dot notated components:
 var Table = function (_a) {
     var children = _a.children;
@@ -71,7 +71,7 @@ var Table = function (_a) {
 exports.Table = Table;
 var TableCell = function (_a) {
     var variant = _a.variant, className = _a.className, rest = __rest(_a, ["variant", "className"]);
-    return (react_1.default.createElement(StyledTableCell, __assign({ className: (className || '') + " " + (variant || 'basic') }, rest)));
+    return (react_1.default.createElement(StyledTableCell, __assign({ className: "".concat(className || '', " ").concat(variant || 'basic') }, rest)));
 };
 exports.Table.Row = StyledTableRow;
 exports.Table.HeadCell = StyledTableHeadCell;

package/dist/components/Timeline/Timeline.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 interface Props {
-    title: string;
-    titleMeta: string;
+    title?: string | JSX.Element;
+    titleMeta?: string | JSX.Element;
     isInitiallyOpen: boolean;
     icon: JSX.Element;
     chevron: string | JSX.Element;

package/dist/form/Button/Button.js

@@ -63,7 +63,7 @@ var StyledButton = styled_components_1.default.button(templateObject_5 || (templ
 }, function (props) {
     var _a;
     var _b = theme_1.theme.palette.button[(_a = props.variant) !== null && _a !== void 0 ? _a : 'default'], idle = _b.idle, hover = _b.hover, active = _b.active;
-    return "\n        color: " + idle.text + ";\n        background-color: " + idle.background + ";        \n        \n        &:hover, &:focus {\n          color: " + hover.text + ";\n          background-color: " + hover.background + ";        \n        }        \n\n        &:active {\n          color: " + active.text + ";\n          background-color: " + active.background + ";        \n        }        \n    ";
+    return "\n        color: ".concat(idle.text, ";\n        background-color: ").concat(idle.background, ";        \n        \n        &:hover, &:focus {\n          color: ").concat(hover.text, ";\n          background-color: ").concat(hover.background, ";        \n        }        \n\n        &:active {\n          color: ").concat(active.text, ";\n          background-color: ").concat(active.background, ";        \n        }        \n    ");
 });
 var IconWrapper = styled_components_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n \n  ", "          \n"], ["\n  ", "\n \n  ", "          \n"])), function (props) { return props.variant !== "text" && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n     min-width: ", ";\n  "], ["\n     min-width: ", ";\n  "])), props.theme.spacing(10)); }, function (props) { return props.variant === "text"
     ? props.hasChildren && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-right: ", ";\n    "], ["\n      padding-right: ", ";\n    "])), props.theme.spacing(2))

package/dist/form/ScaffoldForm/ScaffoldForm.js

@@ -38,7 +38,7 @@ exports.ScaffoldForm = react_1.default.forwardRef(function (_a, ref) {
             var key = _a[0], fieldProps = _a[1];
             return (
             // @ts-ignore
-            react_1.default.createElement(ScaffoldField_1.default, __assign({ name: "" + (prefixFieldNames !== null && prefixFieldNames !== void 0 ? prefixFieldNames : '') + key, key: key, field: fieldProps, ref: ref }, restProps)));
+            react_1.default.createElement(ScaffoldField_1.default, __assign({ name: "".concat(prefixFieldNames !== null && prefixFieldNames !== void 0 ? prefixFieldNames : '').concat(key), key: key, field: fieldProps, ref: ref }, restProps)));
         }),
         children));
 });

package/dist/form/ScaffoldForm/utils/assertGridIsValid.js

@@ -13,7 +13,7 @@ var assertGridIsValid = function (availableKeys, grid) {
     var distinctValues = grid.getDistinctValues();
     // Check if all `availableKeys` have a place in the given grid
     if (distinctValues.length < availableKeys.length) {
-        throw new Error("Not all given fields are present in the grid. Please add these fields " + (0, difference_1.default)(distinctValues, availableKeys).map(function (_) { return "\"" + _ + "\""; }).join(", "));
+        throw new Error("Not all given fields are present in the grid. Please add these fields ".concat((0, difference_1.default)(distinctValues, availableKeys).map(function (_) { return "\"".concat(_, "\""); }).join(", ")));
     }
     // We don't support tetris-shaped values:
     // E.g:
@@ -23,13 +23,13 @@ var assertGridIsValid = function (availableKeys, grid) {
     // ]
     distinctValues.forEach(function (value) {
         if (!availableKeys.includes(value)) {
-            throw new Error(value + " is not an existing field. Existing fields are " + availableKeys.map(function (_) { return "\"" + _ + "\""; }).join(", ") + ".");
+            throw new Error("".concat(value, " is not an existing field. Existing fields are ").concat(availableKeys.map(function (_) { return "\"".concat(_, "\""); }).join(", "), "."));
         }
         var coordinates = grid.getCoordinatesForValue(value);
         var subGrid = grid.sliceArea(coordinates.topLeft, coordinates.bottomRight);
         var subGridDistinctValues = subGrid.getDistinctValues();
         if (subGridDistinctValues.length !== 1 || subGridDistinctValues[0] !== value) {
-            throw new Error("Grid contains an unsupported shape. Please make sure \"" + value + "\" has a rectangular shape.");
+            throw new Error("Grid contains an unsupported shape. Please make sure \"".concat(value, "\" has a rectangular shape."));
         }
     });
     return true;

package/dist/index.d.ts

@@ -7,6 +7,8 @@ export * from './components/BreadCrumbs/BreadCrumbs';
 export * from './components/CollapsiblePanel/CollapsiblePanel';
 export * from './components/ConfirmButton/ConfirmButton';
 export * from './components/ConfirmModal/ConfirmModal';
+export * from './components/Details/Details';
+export * from './components/Dropdown/Dropdown';
 export * from './components/Dropzone/Dropzone';
 export * from './components/Footer/Footer';
 export * from './components/Menu/Menu';

package/dist/index.js

@@ -19,6 +19,8 @@ __exportStar(require("./components/BreadCrumbs/BreadCrumbs"), exports);
 __exportStar(require("./components/CollapsiblePanel/CollapsiblePanel"), exports);
 __exportStar(require("./components/ConfirmButton/ConfirmButton"), exports);
 __exportStar(require("./components/ConfirmModal/ConfirmModal"), exports);
+__exportStar(require("./components/Details/Details"), exports);
+__exportStar(require("./components/Dropdown/Dropdown"), exports);
 __exportStar(require("./components/Dropzone/Dropzone"), exports);
 __exportStar(require("./components/Footer/Footer"), exports);
 __exportStar(require("./components/Menu/Menu"), exports);

package/dist/theme.js

@@ -60,7 +60,7 @@ exports.theme = {
         for (var _i = 0; _i < arguments.length; _i++) {
             args[_i] = arguments[_i];
         }
-        return args.map(function (arg) { return arg * SPACING + "px"; }).join(' ');
+        return args.map(function (arg) { return "".concat(arg * SPACING, "px"); }).join(' ');
     },
     palette: {
         common: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quicksnack",
   "description": "Quickly create beautiful admin layouts using react",
-  "version": "1.22.3",
+  "version": "1.24.2",
   "private": false,
   "files": [
     "dist/**"
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "clsx": "1.1.1",
-    "immer": "9.0.6",
+    "immer": "9.0.7",
     "lodash.difference": "4.5.0",
     "polished": "4.1.3"
   },
@@ -51,32 +51,31 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@semantic-release/git": "10.0.0",
-    "@semantic-release/gitlab": "7.0.3",
-    "@semantic-release/npm": "8.0.0",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
-    "@storybook/addon-links": "^6.3.8",
-    "@storybook/node-logger": "^6.3.8",
+    "@semantic-release/git": "10.0.1",
+    "@semantic-release/gitlab": "7.0.4",
+    "@semantic-release/npm": "8.0.3",
+    "@storybook/addon-actions": "6.4.1",
+    "@storybook/addon-essentials": "6.4.1",
+    "@storybook/addon-links": "6.4.1",
+    "@storybook/node-logger": "6.4.1",
     "@storybook/preset-create-react-app": "3.2.0",
-    "@storybook/react": "^6.3.8",
-    "@testing-library/jest-dom": "5.14.1",
+    "@storybook/react": "6.4.1",
+    "@testing-library/jest-dom": "5.15.1",
     "@testing-library/react": "12.1.2",
-    "@testing-library/user-event": "13.3.0",
-    "@types/jest": "27.0.2",
-    "@types/lodash": "4.14.175",
-    "@types/node": "16.10.9",
-    "@types/react": "17.0.29",
-    "@types/react-dom": "17.0.9",
+    "@testing-library/user-event": "13.5.0",
+    "@types/jest": "27.0.3",
+    "@types/lodash": "4.14.177",
+    "@types/node": "16.11.11",
+    "@types/react": "17.0.37",
+    "@types/react-dom": "17.0.11",
     "@types/styled-components": "5.1.15",
-    "babel-loader": "8.2.2",
-    "chromatic": "6.0.4",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "babel-loader": "8.2.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-icons": "4.3.1",
-    "react-scripts": "^4.0.3",
-    "semantic-release": "18.0.0",
-    "styled-components": "^5.3.1",
-    "typescript": "^4.4.3"
+    "react-scripts": "4.0.3",
+    "semantic-release": "18.0.1",
+    "styled-components": "5.3.3",
+    "typescript": "4.5.2"
   }
 }