trepur_components 0.2.72 → 0.3.0

package/dist/components/Button/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,15 +9,15 @@ exports.default = void 0;
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
-require("core-js/modules/es.object.assign.js");
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-require("../index.css");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
 
-require("./index.css");
+require("../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,199 +29,166 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const Button = _ref => {
   let {
-    buttonId,
-    buttonClasses,
-    buttonText,
-    buttonOnClick,
-    buttonLeftIcon,
-    buttonRightIcon,
-    buttonCenterIcon,
-    iconHollow,
-    buttonBgColor,
-    buttonTextColor,
-    buttonBorderColor,
-    buttonHoverBgColor,
-    buttonHoverTextColor,
-    buttonHoverBorderColor,
-    buttonHoverText,
-    buttonType,
-    buttonUrl,
-    buttonDesign,
-    buttonBordered,
-    buttonRounded,
-    buttonIconBrand,
-    buttonDisabled,
-    iconSize
+    buttonProps
   } = _ref;
-  let padding = buttonType === 'social' ? 'px-1 py-1 ' : buttonType === 'icon' ? 'px-3 ' : 'px-8 ';
-  let externalPadding = buttonType === 'external' ? 'py-3 ' : 'py-2 ';
-  let borderClassList = buttonBordered ? 'border-2 ' : '';
-  let roundedClassList = buttonRounded ? 'rounded-full ' : '';
-  let standardClasses = ' rounded-lg text-black transition-backgroundColor duration-500 transform ' + borderClassList + roundedClassList;
-  let slideClasses = ' btn px-8 text-white border-2 bg-gray hover:bg-brand-primary hover:text-black ';
-  let classList = padding;
-  classList += externalPadding;
-  classList += buttonClasses ? buttonClasses : '';
-  const design = buttonDesign ? buttonDesign : 'standard';
-
-  if (design === 'standard') {
-    classList += standardClasses;
-  } else if (design === 'slide') {
-    classList += slideClasses;
-  }
-
-  const iconClassList = buttonIconBrand ? 'fa-brands' : '';
-
-  let iconLeft = buttonLeftIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
+  const [hovering, setHovering] = (0, _react.useState)(false);
+  const design = buttonProps.design ? buttonProps.design : 'standard';
+  const padding = (0, _classnames.default)({
+    'px-1 py-1': buttonProps.type === 'social',
+    'px-3': buttonProps.type === 'icon',
+    'px-8': buttonProps.type !== 'social' && buttonProps.type !== 'icon'
+  }, 'py-2');
+  const borderClassList = (0, _classnames.default)({
+    'border-2': buttonProps.bordered
+  });
+  const roundedClassList = (0, _classnames.default)({
+    'rounded-full': buttonProps.rounded,
+    'rounded-none': !buttonProps.rounded
+  });
+  const standardClasses = (0, _classnames.default)({
+    [borderClassList]: borderClassList,
+    [roundedClassList]: roundedClassList
+  }, "rounded-lg transition-backgroundColor \n        duration-500 transform");
+  const slideClasses = (0, _classnames.default)("btn px-8 border-2 ");
+  const loadingClasses = (0, _classnames.default)({
+    'invisible': !buttonProps.isLoading
+  }, 'absolute left-2/4 top-1/4 -ml-2');
+  const colours = (0, _classnames.default)({
+    [buttonProps.hoverBgColor]: buttonProps.hoverBgColor,
+    [buttonProps.hoverTextColor]: buttonProps.hoverTextColor,
+    [buttonProps.hoverBorderColor]: buttonProps.hoverBorderColor,
+    [buttonProps.bgColor]: buttonProps.bgColor,
+    [buttonProps.textColor]: buttonProps.textColor,
+    [buttonProps.borderColor]: buttonProps.borderColor
+  });
+  const classList = (0, _classnames.default)({
+    [padding]: true,
+    [colours]: true,
+    [buttonProps.classes]: buttonProps.classes,
+    [standardClasses]: design === 'standard',
+    [slideClasses]: design === 'slide'
+  });
+  const iconClassList = (0, _classnames.default)({
+    'fa-brands': buttonProps.iconBrand
+  });
+
+  let iconLeft = buttonProps.leftIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
     classes: "pr-2",
-    type: buttonLeftIcon
-  }, iconHollow && {
-    hollow: iconHollow
+    type: buttonProps.leftIcon
+  }, buttonProps.iconHollow && {
+    hollow: buttonProps.iconHollow
   }));
 
-  let iconRight = buttonRightIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
+  let iconRight = buttonProps.rightIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
     classes: "pl-2",
-    type: buttonRightIcon
-  }, iconHollow && {
-    hollow: iconHollow
+    type: buttonProps.rightIcon
+  }, buttonProps.iconHollow && {
+    hollow: buttonProps.iconHollow
   }));
 
-  let iconCenter = buttonCenterIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
-    size: iconSize,
+  let iconCenter = buttonProps.centerIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
+    size: buttonProps.iconSize,
     classes: iconClassList,
-    type: buttonCenterIcon
-  }, iconHollow && {
-    hollow: iconHollow
-  })); //---------- Styling ---------------
-
-
-  const [styles, setStyles] = (0, _react.useState)(!buttonDisabled ? {
-    'backgroundColor': buttonBgColor ? buttonBgColor : 'white',
-    color: buttonTextColor ? buttonTextColor : 'black',
-    'borderColor': buttonBorderColor ? buttonBorderColor : 'black'
-  } : {
-    'backgroundColor': 'white',
-    color: 'grey',
-    'borderColor': 'grey'
-  });
-  const [hovering, setHovering] = (0, _react.useState)(false);
+    type: buttonProps.centerIcon
+  }, buttonProps.iconHollow && {
+    hollow: buttonProps.iconHollow
+  }));
 
-  const setHoverState = isHovering => {
-    if (isHovering) {
-      setHovering(true);
-      setStyles({
-        'backgroundColor': buttonHoverBgColor ? buttonHoverBgColor : 'black',
-        color: buttonHoverTextColor ? buttonHoverTextColor : 'white',
-        'borderColor': buttonHoverBorderColor ? buttonHoverBorderColor : 'black'
-      });
-    } else {
-      setHovering(false);
-      setStyles({
-        'backgroundColor': buttonBgColor ? buttonBgColor : 'white',
-        color: buttonTextColor ? buttonTextColor : 'black',
-        'borderColor': buttonBorderColor ? buttonBorderColor : 'black'
-      });
-    }
-  }; //-----------------------------------
-
-
-  if (buttonType === 'external') {
-    return /*#__PURE__*/_react.default.createElement("a", {
-      target: "_blank",
-      href: buttonUrl
-    }, /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
-      id: buttonId
+  if (['internal', 'external'].includes(buttonProps.type)) {
+    return /*#__PURE__*/_react.default.createElement("a", _extends({}, buttonProps.type === 'external' && {
+      target: '_blank'
     }, {
-      className: classList,
-      style: styles,
-      type: "button",
-      onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false)
-    }, buttonOnClick && {
-      onClick: buttonOnClick
-    }, buttonDisabled && {
-      disabled: buttonDisabled
-    }), buttonLeftIcon && iconLeft, hovering ? buttonHoverText ? buttonHoverText : buttonText : buttonText, buttonRightIcon && iconRight));
-  } else if (buttonType === 'internal') {
-    return /*#__PURE__*/_react.default.createElement("a", {
-      href: buttonUrl
-    }, /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
-      id: buttonId
-    }, {
-      className: classList,
-      style: styles,
-      type: "button",
-      onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false)
-    }, buttonOnClick && {
-      onClick: buttonOnClick
-    }, buttonDisabled && {
-      disabled: buttonDisabled
-    }), buttonLeftIcon && iconLeft, hovering ? buttonHoverText ? buttonHoverText : buttonText : buttonText, buttonRightIcon && iconRight));
-  } else if (buttonType === 'social') {
-    return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
-      id: buttonId
+      href: buttonProps.url
+    }), /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps.id && {
+      id: buttonProps.id
     }, {
       className: classList,
-      style: styles,
       type: "button",
-      onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false)
-    }, buttonOnClick && {
-      onClick: buttonOnClick
-    }, buttonDisabled && {
-      disabled: buttonDisabled
-    }), buttonCenterIcon && iconCenter);
-  } else if (buttonType === 'icon') {
-    return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
-      id: buttonId
+      "aria-busy": buttonProps.isLoading,
+      onMouseOver: () => setHovering(true),
+      onMouseOut: () => setHovering(false)
+    }, buttonProps.onClick && {
+      onClick: buttonProps.onClick
+    }, buttonProps.disabled && {
+      disabled: buttonProps.disabled
+    }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      className: buttonProps.isLoading && 'invisible'
+    }, buttonProps.leftIcon && iconLeft, hovering ? buttonProps.hoverText ? buttonProps.hoverText : buttonProps.text : buttonProps.text, buttonProps.rightIcon && iconRight), /*#__PURE__*/_react.default.createElement("div", {
+      className: loadingClasses
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      type: "spinner",
+      animation: "pulse"
+    })))));
+  } else if (['social', 'icon'].includes(buttonProps.type)) {
+    return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps.id && {
+      id: buttonProps.id
     }, {
       className: classList,
-      style: styles,
       type: "button",
-      onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false)
-    }, buttonOnClick && {
-      onClick: buttonOnClick
-    }, buttonDisabled && {
-      disabled: buttonDisabled
-    }), buttonCenterIcon && iconCenter);
-  } else if (buttonType === 'loading') {
-    return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
-      id: buttonId
-    }, {
-      className: 'flex ' + classList,
-      type: "button",
-      style: styles,
-      type: buttonType,
-      onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false)
-    }, buttonOnClick && {
-      onClick: buttonOnClick
-    }, buttonDisabled && {
-      disabled: buttonDisabled
-    }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      "aria-busy": buttonProps.isLoading,
+      onMouseOver: () => setHovering(true),
+      onMouseOut: () => setHovering(false)
+    }, buttonProps.onClick && {
+      onClick: buttonProps.onClick
+    }, buttonProps.disabled && {
+      disabled: buttonProps.disabled
+    }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      className: buttonProps.isLoading && 'invisible'
+    }, buttonProps.centerIcon && iconCenter), /*#__PURE__*/_react.default.createElement("div", {
+      className: loadingClasses
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
       type: "spinner",
       animation: "pulse"
-    })), /*#__PURE__*/_react.default.createElement("p", {
-      className: "pl-3"
-    }, "Loading"));
-  }
-
-  return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
-    id: buttonId
+    }))));
+  } else return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps.id && {
+    id: buttonProps.id
   }, {
     className: classList,
-    style: styles,
     type: "button",
-    onMouseOver: () => setHoverState(true),
-    onMouseOut: () => setHoverState(false)
-  }, buttonOnClick && {
-    onClick: buttonOnClick
-  }, buttonDisabled && {
-    disabled: buttonDisabled
-  }), buttonLeftIcon && iconLeft, hovering ? buttonHoverText ? buttonHoverText : buttonText : buttonText, buttonRightIcon && iconRight);
+    "aria-busy": buttonProps.isLoading,
+    onMouseOver: () => setHovering(true),
+    onMouseOut: () => setHovering(false)
+  }, buttonProps.onClick && {
+    onClick: buttonProps.onClick
+  }, buttonProps.disabled && {
+    disabled: buttonProps.disabled
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: buttonProps.isLoading && 'invisible'
+  }, buttonProps.leftIcon && iconLeft, hovering ? buttonProps.hoverText ? buttonProps.hoverText : buttonProps.text : buttonProps.text, buttonProps.rightIcon && iconRight), /*#__PURE__*/_react.default.createElement("div", {
+    className: loadingClasses
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    type: "spinner",
+    animation: "pulse"
+  }))));
 };
 
+Button.propTypes = {
+  buttonProps: _propTypes.default.shape({
+    id: _propTypes.default.string,
+    classes: _propTypes.default.string,
+    text: _propTypes.default.string,
+    onClick: _propTypes.default.func,
+    leftIcon: _propTypes.default.string,
+    rightIcon: _propTypes.default.string,
+    centerIcon: _propTypes.default.string,
+    iconHollow: _propTypes.default.bool,
+    bgColor: _propTypes.default.string,
+    textColor: _propTypes.default.string,
+    borderColor: _propTypes.default.string,
+    hoverBgColor: _propTypes.default.string,
+    hoverTextColor: _propTypes.default.string,
+    hoverBorderColor: _propTypes.default.string,
+    hoverText: _propTypes.default.string,
+    type: _propTypes.default.string,
+    url: _propTypes.default.string,
+    design: _propTypes.default.string,
+    bordered: _propTypes.default.bool,
+    rounded: _propTypes.default.bool,
+    iconBrand: _propTypes.default.string,
+    disabled: _propTypes.default.bool,
+    iconSize: _propTypes.default.string,
+    isLoading: _propTypes.default.bool
+  })
+};
 var _default = Button;
 exports.default = _default;

package/dist/components/CarouselV2/index.css

@@ -0,0 +1,3 @@
+.arrow {
+  -webkit-transform: translateY(-50%);
+}

package/dist/components/CarouselV2/index.js

@@ -0,0 +1,173 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("keen-slider/keen-slider.min.css");
+
+var _react2 = require("keen-slider/react");
+
+require("./index.css");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+//https://keen-slider.io/docs#usage-in-react
+const CarouselV2 = _ref => {
+  let {
+    id,
+    classes,
+    breakpoints,
+    defaultAnimation,
+    //disabled,
+    drag,
+    dragSpeed,
+    initial,
+    loop,
+    mode,
+    range,
+    renderMode,
+    rtl,
+    rubberband,
+    selector,
+    slides,
+    vertical,
+    animationStarted,
+    animationStopped,
+    animationEnded,
+    created,
+    destroyed,
+    detailsChanged,
+    dragged,
+    dragStarted,
+    dragChecked,
+    dragEnded,
+    beforeOptionsChanged,
+    optionsChanged,
+    slideChanged,
+    updated,
+    slidesToShow,
+    spacing,
+    number,
+    origin,
+    arrows,
+    dots
+  } = _ref;
+  const classList = "".concat(classes);
+  const dotClasses = "w-4 h-4 cursor-pointer focus:".concat(dots.activeColours, " rounded-full mx-1 ");
+  const [currentSlide, setCurrentSlide] = (0, _react.useState)(0);
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  const [sliderRef, instanceRef] = (0, _react2.useKeenSlider)({
+    initial: initial,
+    breakpoints: breakpoints,
+    defaultAnimation: defaultAnimation,
+    //disabled: disabled,
+    drag: drag,
+    dragSpeed: dragSpeed,
+    initial: initial,
+    loop: loop,
+    mode: mode,
+    range: range,
+    renderMode: renderMode,
+    rtl: rtl,
+    rubberband: rubberband,
+    // selector: selector,
+    vertical: vertical,
+
+    slideChanged(slider) {
+      setCurrentSlide(slider.track.details.rel);
+    },
+
+    created() {
+      setLoaded(true);
+    },
+
+    animationStarted: animationStarted,
+    animationStopped: animationStopped,
+    animationEnded: animationEnded,
+    // created: created,
+    destroyed: destroyed,
+    detailsChanged: detailsChanged,
+    dragged: dragged,
+    dragStarted: dragStarted,
+    dragChecked: dragChecked,
+    dragEnded: dragEnded,
+    beforeOptionsChanged: beforeOptionsChanged,
+    optionsChanged: optionsChanged,
+    // slideChanged: slideChanged,
+    updated: updated,
+    slides: {
+      perView: slidesToShow,
+      spacing: spacing,
+      origin: origin,
+      number: number
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: "relative navigation-wrapper ".concat(classList)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: sliderRef,
+    className: "keen-slider"
+  }, slides && slides), arrows.visible && loaded && instanceRef.current && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Arrow, {
+    left: true,
+    onClick: e => {
+      var _instanceRef$current;
+
+      return e.stopPropagation() || ((_instanceRef$current = instanceRef.current) === null || _instanceRef$current === void 0 ? void 0 : _instanceRef$current.prev());
+    },
+    disabled: currentSlide === 0,
+    arrows: arrows
+  }), /*#__PURE__*/_react.default.createElement(Arrow, {
+    onClick: e => {
+      var _instanceRef$current2;
+
+      return e.stopPropagation() || ((_instanceRef$current2 = instanceRef.current) === null || _instanceRef$current2 === void 0 ? void 0 : _instanceRef$current2.next());
+    },
+    disabled: currentSlide === instanceRef.current.track.details.slides.length - 1,
+    arrows: arrows
+  }))), dots.visible && loaded && instanceRef.current && /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex py-4 justify-center"
+  }, [...Array(instanceRef.current.track.details.slides.length).keys()].map(idx => {
+    return /*#__PURE__*/_react.default.createElement("button", {
+      key: idx,
+      onClick: () => {
+        var _instanceRef$current3;
+
+        (_instanceRef$current3 = instanceRef.current) === null || _instanceRef$current3 === void 0 ? void 0 : _instanceRef$current3.moveToIdx(idx);
+      },
+      className: dotClasses + (currentSlide === idx ? " active ".concat(dots.activeColours) : " ".concat(dots.colours))
+    });
+  })));
+};
+
+function Arrow(props) {
+  const disabeld = props.disabled ? " arrow--disabled ".concat(props.arrows.disabledColours) : "";
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    onClick: props.onClick,
+    className: "arrow w-12 translate-y-2/4 h-12 absolute cursor-pointer  top-1/2 ".concat(props.left ? "arrow--left left-1.5" : "arrow--right left-auto right-1.5", " ").concat(disabeld),
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, props.left && /*#__PURE__*/_react.default.createElement("path", {
+    className: "".concat(props.arrows.colours),
+    d: "M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"
+  }), !props.left && /*#__PURE__*/_react.default.createElement("path", {
+    className: "".concat(props.arrows.colours),
+    d: "M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"
+  }));
+}
+
+var _default = CarouselV2;
+exports.default = _default;

package/dist/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "Carousel", {
     return _Carousel.default;
   }
 });
+Object.defineProperty(exports, "CarouselV2", {
+  enumerable: true,
+  get: function get() {
+    return _CarouselV.default;
+  }
+});
 Object.defineProperty(exports, "ChevronCard", {
   enumerable: true,
   get: function get() {
@@ -238,6 +244,8 @@ var _CardWithTopImage = _interopRequireDefault(require("./components/CardWithTop
 
 var _Carousel = _interopRequireDefault(require("./components/Carousel"));
 
+var _CarouselV = _interopRequireDefault(require("./components/CarouselV2"));
+
 var _ChevronCard = _interopRequireDefault(require("./components/ChevronCard"));
 
 var _Collapsible = _interopRequireDefault(require("./components/Collapsible"));

package/package.json

@@ -2,7 +2,7 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "0.2.72",
+  "version": "0.3.0",
   "private": false,
   "keywords": [
     "react",
@@ -21,6 +21,7 @@
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "classnames": "^2.3.1",
+    "keen-slider": "^6.7.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.0",