krl-alfred 1.12.0 → 1.13.0

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var prop_types_1 = __importDefault(require("prop-types"));
 var Breadcrumbs_styled_1 = require("./Breadcrumbs.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
@@ -22,13 +23,18 @@ var Breadcrumbs = function (props) {
         var item = _a.item, children = _a.children;
         return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
     };
-    setTimeout(function () {
-        var elem = document === null || document === void 0 ? void 0 : document.querySelector(".breadcrumbSm");
-        var activeItem = document === null || document === void 0 ? void 0 : document.querySelector(".breadcrumbSm li.active");
-        if (activeItem && elem) {
-            elem.scrollLeft = activeItem.offsetLeft;
-        }
-    }, 100);
+    (0, react_1.useEffect)(function () {
+        setTimeout(function () {
+            var _a, _b;
+            if (window && typeof window !== "undefined") {
+                var elem = (_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.querySelector(".breadcrumbSm");
+                var activeItem = (_b = window === null || window === void 0 ? void 0 : window.document) === null || _b === void 0 ? void 0 : _b.querySelector(".breadcrumbSm li.active");
+                if (activeItem && elem) {
+                    elem.scrollLeft = activeItem.offsetLeft;
+                }
+            }
+        }, 100);
+    }, []);
     var SubMenu = function (_a) {
         var data = _a.data, item = _a.item;
         var rowLength = subMenuRowLength;
@@ -45,15 +51,14 @@ var Breadcrumbs = function (props) {
     var SubMenuMobile = function () {
         var _a;
         return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileWrapper, { className: "breadcrumbSm", children: (_a = getSubData()) === null || _a === void 0 ? void 0 : _a.map(function (item) {
-                var _a;
-                return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileItem, { isActive: item.isActive, className: (0, classnames_1.default)("caption-bold-12-15", (_a = {},
-                        _a["active"] = item.isActive,
-                        _a)), children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: item, children: item.name }) }, item.id));
+                return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileItem, { isActive: item.isActive, className: (0, classnames_1.default)("caption-bold-12-15", {
+                        "active": item.isActive,
+                    }), children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: item, children: item.name }) }, item.id));
             }) }));
     };
     return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsWrapper, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsList, { children: data === null || data === void 0 ? void 0 : data.map(function (breadCrumbItem, key) {
                     var _a;
-                    return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, { onClick: onClickBackIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft" }) }), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRight" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { className: "caption-bold-12-15", children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { stroke: "#9763F6", name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, { item: breadCrumbItem, children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRight" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { className: "caption-bold-12-15", children: breadCrumbItem.name })] }))] }, breadCrumbItem.id));
+                    return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, { onClick: onClickBackIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft" }) }), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRight" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { className: "caption-bold-12-15", children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { stroke: "#9763F6", name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, { item: breadCrumbItem, children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRight" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { className: "caption-bold-12-15", children: breadCrumbItem.name })] }))] }, key));
                 }) }), (0, jsx_runtime_1.jsx)(SubMenuMobile, {})] }));
 };
 exports.default = Breadcrumbs;

package/dist/components/Checkbox/Checkbox.js

@@ -10,7 +10,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var Checkbox = function (props) {
     var _a, _b, _c, _d;
     var value = props.value, checked = props.checked, onChange = props.onChange, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid;
-    return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, { htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (0, jsx_runtime_1.jsxs)("div", { className: "labelsWrapper", children: [(0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("label", (_a = {}, _a["body-medium-14-17"] = size === "small", _a), (_b = {}, _b["title-medium-16-19"] = size === "medium", _b)), htmlFor: id, children: label }), (0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("description", (_c = {}, _c["body-regular-13-16"] = size === "small", _c), (_d = {}, _d["body-regular-13-16"] = size === "medium", _d)), htmlFor: id, children: description })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, { htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "labelsWrapper", children: [label && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("label", (_a = {}, _a["body-medium-14-17"] = size === "small", _a), (_b = {}, _b["title-medium-16-19"] = size === "medium", _b)), htmlFor: id, children: label })), description && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("description", (_c = {}, _c["body-regular-13-16"] = size === "small", _c), (_d = {}, _d["body-regular-13-16"] = size === "medium", _d)), htmlFor: id, children: description }))] }))] }));
 };
 exports.default = Checkbox;
 Checkbox.propTypes = {

package/dist/components/Checkbox/Checkbox.styled.js

@@ -12,7 +12,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
-exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex:1;\n    position:relative;\n    display:flex;\n    align-items:flex-start;\n    justify-content:flex-start;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0;\n        z-index: -1;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: inline-block;\n        cursor: ", ";\n        margin: ", ";\n        color:", ";\n        label.label{\n            display:block;\n            margin:0;\n        }\n        label.description{\n            display:block;\n            margin:0;\n        }\n    }\n"], ["\n    flex:1;\n    position:relative;\n    display:flex;\n    align-items:flex-start;\n    justify-content:flex-start;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0;\n        z-index: -1;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: inline-block;\n        cursor: ", ";\n        margin: ", ";\n        color:", ";\n        label.label{\n            display:block;\n            margin:0;\n        }\n        label.description{\n            display:block;\n            margin:0;\n        }\n    }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementInvalid" }))); }, function (props) {
+exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex:1;\n    position:relative;\n    display:flex;\n    align-items:flex-start;\n    justify-content:flex-start;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0;\n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: ", ";\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: inline-block;\n        cursor: ", ";\n        margin: ", ";\n        color:", ";\n        label.label{\n            display:block;\n            margin:0;\n        }\n        label.description{\n            display:block;\n            margin:0;\n        }\n    }\n"], ["\n    flex:1;\n    position:relative;\n    display:flex;\n    align-items:flex-start;\n    justify-content:flex-start;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0;\n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: ", ";\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: inline-block;\n        cursor: ", ";\n        margin: ", ";\n        color:", ";\n        label.label{\n            display:block;\n            margin:0;\n        }\n        label.description{\n            display:block;\n            margin:0;\n        }\n    }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementInvalid" }))); }, function (props) { return (props.size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
     switch (props.size) {
         case 'small':
             return "16px";
@@ -30,5 +30,5 @@ exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (
         default:
             return "16px";
     }
-}, function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return (props.size === "small" ? "0 0 0 8px" : "2px 0 0 16px"); }, function (props) { return props.valid ? '#000000' : 'var(--red)'; });
+}, function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return (props.size === "small" ? "0 0 0 0" : "2px 0 0 0"); }, function (props) { return props.valid ? '#000000' : 'var(--red)'; });
 var templateObject_1;

package/dist/components/ProductCard/ProductCard.js

@@ -0,0 +1,33 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ProductCard_styled_1 = require("./ProductCard.styled");
+var Checkbox_1 = __importDefault(require("../Checkbox"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_device_detect_1 = require("react-device-detect");
+var ProductCard = function (props) {
+    return (0, jsx_runtime_1.jsx)(ProductCard_styled_1.ProductCardStyled, __assign({ htmlFor: props.checkboxId }, props, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ProductCardInner", children: [(0, jsx_runtime_1.jsx)("div", { className: "ProductCardCheckboxContent", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: props.checkboxId, size: react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: props.productCardOnChange }) }), props.image && ((0, jsx_runtime_1.jsx)("div", { className: "ProductCardImg", children: props.image })), (0, jsx_runtime_1.jsxs)("div", { className: "ProductCardText", children: [(0, jsx_runtime_1.jsx)("strong", { className: "ProductCardTitle title-semi-bold-16-19", children: props.title }), props.contentAlignment === "center" && props.content && (0, jsx_runtime_1.jsx)("div", { className: "ProductCardContent", children: props.content })] }), props.contentAlignment === "left" && props.content && (0, jsx_runtime_1.jsx)("div", { className: "ProductCardContent", children: props.content })] }) }));
+};
+exports.default = ProductCard;
+ProductCard.propTypes = {
+    productChecked: prop_types_1.default.bool,
+    disabled: prop_types_1.default.bool,
+};
+ProductCard.defaultProps = {
+    productChecked: false,
+    disabled: false,
+};

package/dist/components/ProductCard/ProductCard.styled.js

@@ -0,0 +1,14 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductCardStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var devices_1 = require("../../constants/devices");
+exports.ProductCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  max-width: 634px;\n  ", "\n  .ProductCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    .ProductCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n    }\n    .ProductCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      @media only screen and ", " {\n        margin-right: 8px;\n      }\n\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .ProductCardTitle{\n      min-height: 66px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n    }\n    .ProductCardContent{ \n      margin: 24px auto 0 0;\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: 100%;\n    }\n  }\n"], ["\n  display: block;\n  max-width: 634px;\n  ", "\n  .ProductCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    .ProductCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n    }\n    .ProductCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      @media only screen and ", " {\n        margin-right: 8px;\n      }\n\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .ProductCardTitle{\n      min-height: 66px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n    }\n    .ProductCardContent{ \n      margin: 24px auto 0 0;\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: 100%;\n    }\n  }\n"])), function (props) { return props.disabled ? "\n  user-select:none;\n  pointer-events:none;\n  " : ""; }, devices_1.devices.sm);
+var templateObject_1;

package/dist/components/ProductCard/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ProductCard_1 = require("./ProductCard");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ProductCard_1).default; } });

package/dist/components/ProductCard/props.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contentAlignments = void 0;
+exports.contentAlignments = ['left', 'center'];
+var ProductCardDefault = {
+    hasCheckbox: false,
+    contentAlignment: exports.contentAlignments[0],
+    productChecked: false,
+    disabled: false,
+};

package/dist/components/ProductCard/stories/ProductCard.stories.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ProductCard_1 = __importDefault(require("../ProductCard"));
+var props_1 = require("../props");
+exports.default = {
+    title: "Components/ProductCard",
+    component: ProductCard_1.default,
+    tags: ['autodocs'],
+    argTypes: {
+        contentAlignment: { control: 'select', options: props_1.contentAlignments },
+        disabled: { control: 'boolean' },
+    }
+};
+exports.Default = {
+    args: {
+        title: "Product Name",
+        content: "Content",
+        contentAlignment: "left",
+        productCardOnChange: function () { return console.log("test"); },
+        image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" })
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "files": [
     "dist"
   ],
@@ -25,6 +25,7 @@
     "css-loader": "^6.7.3",
     "plop": "^3.1.2",
     "react": "^18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "^5.0.1",