fix(security): addresses vulnerability identified by snyk

package.json

@@ -11,7 +11,7 @@
     "@commitlint/config-conventional": "^11.0.0",
     "commitizen": "^4.2.2",
     "dotenv": "8.2.0",
-    "eslint": "^7.10.0",
+    "eslint": "7.32.0",
     "handlebars": "^4.7.7",
     "lerna": "^3.22.1",
     "lodash": "^4.17.21",

packages/sage-react/lib/Breadcrumbs/Breadcrumbs.jsx

@@ -47,10 +47,11 @@ export const Breadcrumbs = ({
       </Link>
     );
 
+    const breadCrumbItemKey = `breadcrumbItem-${i.toString()}`;
     return items.length === 1 ? (
-      <p key={i.toString()} className="sage-breadcrumbs__item">{content}</p>
+      <p key={breadCrumbItemKey} className="sage-breadcrumbs__item">{content}</p>
     ) : (
-      <li key={i.toString()} className="sage-breadcrumbs__item">{content}</li>
+      <li key={breadCrumbItemKey} className="sage-breadcrumbs__item">{content}</li>
     );
   });
 

packages/sage-react/lib/Carousel/Carousel.jsx

@@ -84,7 +84,7 @@ export const Carousel = ({
           disabled={arrowPrevDisabled}
           icon="caret-left"
           id="prev"
-          onClickCallback={handlePrevArrowClick}
+          onClickCallback={() => handlePrevArrowClick}
         />
         <div className="sage-carousel__sizer">
           <div className="sage-carousel__carousel">
@@ -95,7 +95,7 @@ export const Carousel = ({
           disabled={arrowNextDisabled}
           icon="caret-right"
           id="next"
-          onClickCallback={handleNextArrowClick}
+          onClickCallback={() => handleNextArrowClick}
         />
       </div>
       {!looping && (

packages/sage-react/lib/Description/Description.jsx

@@ -148,7 +148,7 @@ Description.propTypes = {
   className: PropTypes.string,
   items: PropTypes.arrayOf(PropTypes.shape({
     action: PropTypes.shape({
-      attributes: PropTypes.objectOf(PropTypes.object),
+      attributes: PropTypes.objectOf(PropTypes.object()),
       iconOnly: PropTypes.bool,
       value: PropTypes.string,
     }),

packages/sage-react/lib/Toggle/Checkbox.story.jsx

@@ -99,7 +99,7 @@ export const MultipleCheckboxes = (args) => {
           {...args}
           id={`check-${i}`}
           itemInList={true}
-          key={i.toString()}
+          key={`check-${i.toString()}`}
           onChange={onChange}
           name="group-1"
           {...configs}

packages/sage-react/lib/Toggle/Radio.story.jsx

@@ -61,7 +61,7 @@ export const MultipleRadios = (args) => {
         <Radio
           {...args}
           id={`check-${i}`}
-          key={i.toString()}
+          key={`check-${i.toString()}`}
           onChange={onChange}
           name="group-1"
           itemInList={true}

packages/sage-react/lib/Toggle/Switch.story.jsx

@@ -86,7 +86,7 @@ export const MultiplesExample = (args) => {
         <Switch
           id={`switch-${i}`}
           itemInList={true}
-          key={i.toString()}
+          key={`switch-${i.toString()}`}
           name="group-1"
           onChange={onChange}
           type={args.type}

packages/sage-system/package.json

@@ -49,10 +49,13 @@
   },
   "gitHead": "b8c2dd5f156473667f33a4d425c501a1e3b1c578",
   "dependencies": {
-    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-env": "^7.18.10",
     "arrive": "^2.4.1",
     "babel-loader": "^8.1.0",
     "sortablejs": "^1.12.0",
     "tiny-slider": "^2.9.4"
+  },
+  "overrides": {
+    "path-parse": "^1.0.7"
   }
 }