Theme-2.1.3 (#2577)

package.json

@@ -36,33 +36,29 @@
     "/.cache/*",
     "/node_modules/*"
   ],
-  "resolutions": {
-    "carbon-components": "^10.45.0-rc.0",
-    "carbon-components-react": "^7.45.0-rc.0",
-    "@carbon/elements": "^10.44.0-rc.0",
-    "@carbon/icons": "^10.39.0",
-    "@carbon/icons-react": "^10.39.0"
-  },
   "dependencies": {
-    "@carbon/charts-react": "0.50.5",
-    "@carbon/elements": "^10.44.0-rc.0",
-    "@carbon/icons": "^10.39.0",
-    "@carbon/icons-react": "^10.39.0",
-    "@carbon/pictograms": "^11.18.0",
-    "@carbon/pictograms-react": "^11.18.0",
+    "@babel/core": "^7.15.8",
+    "@carbon/charts-react": "0.50.8",
+    "@carbon/elements": "^10.45.0",
+    "@carbon/icons": "^10.41.0",
+    "@carbon/icons-react": "^10.41.0",
+    "@carbon/pictograms": "^11.19.0",
+    "@carbon/pictograms-react": "^11.19.0",
     "@loadable/component": "^5.15.0",
     "@slack/web-api": "^5.11.0",
-    "carbon-components": "^10.45.0-rc.0",
-    "carbon-components-react": "^7.45.0-rc.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-gatsby": "^1.14.0",
+    "carbon-components": "^10.46.0",
+    "carbon-components-react": "^7.46.0",
     "change-case": "^4.1.1",
     "classnames": "^2.2.6",
     "codesandbox": "^2.1.10",
     "copy-to-clipboard": "^3.2.1",
     "fuse.js": "^6.4.1",
-    "gatsby": "^3.7.2",
+    "gatsby": "^3.14.3",
     "gatsby-image": "^3.7.1",
-    "gatsby-plugin-image": "^1.12.0",
-    "gatsby-theme-carbon": "^2.0.0-next.3",
+    "gatsby-plugin-image": "^1.14.1",
+    "gatsby-theme-carbon": "^2.1.4-next.0",
     "lodash-es": "^4.17.15",
     "markdown-it": "^9.0.1",
     "nanoid": "^2.1.11",
@@ -72,33 +68,33 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^17.0.2",
     "react-live": "^2.2.1",
-    "use-media": "^1.4.0"
+    "use-media": "^1.4.0",
+    "webpack": "^5.59.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
     "@loadable/babel-plugin": "^5.12.0",
     "@loadable/webpack-plugin": "^5.15.0",
     "@now/node": "^1.6.1",
     "@philpl/buble": "^0.19.7",
     "babel-eslint": "^10.1.0",
-    "babel-preset-gatsby": "^1.7.1",
+    "core-js": "^3.18.3",
     "d3": "7.0.0",
     "dotenv": "^8.2.0",
     "eslint": "^7.32.0",
     "eslint-config-carbon": "^2.8.0",
     "fs-extra": "^9.0.1",
-    "gatsby-plugin-lodash": "^4.7.1",
-    "gatsby-plugin-manifest": "^3.7.1",
+    "gatsby-plugin-lodash": "^4.14.0",
+    "gatsby-plugin-manifest": "^3.14.0",
     "gatsby-plugin-remove-serviceworker": "^1.0.0",
-    "gatsby-plugin-sharp": "^3.7.1",
-    "gatsby-plugin-sitemap": "^4.3.1",
-    "gatsby-remark-images": "^5.4.1",
-    "gatsby-source-filesystem": "^3.7.1",
-    "gatsby-transformer-sharp": "^3.7.1",
-    "html-loader": "^0.5.5",
+    "gatsby-plugin-sharp": "^3.14.1",
+    "gatsby-plugin-sitemap": "^4.10.0",
+    "gatsby-remark-images": "^5.11.0",
+    "gatsby-source-filesystem": "^3.14.0",
+    "gatsby-transformer-sharp": "^3.14.0",
+    "html-loader": "^2.1.2",
     "husky": "^4.2.3",
     "lint-staged": ">=10.0.9",
-    "markdown-loader": "^5.0.0",
+    "markdown-loader": "^6.0.0",
     "node-fetch": "^2.6.1",
     "prettier": "^2.0.2",
     "prismjs": "^1.17.1",

src/pages/case-studies/consistency-in-the-cloud.mdx

@@ -89,7 +89,7 @@ patterns.
 <Row>
 <Column colLg={8}>
 
-![Design jam](images/design-jam.png)
+![Design jam](images/design-jam.jpg)
 
 <Caption>Cloud Design Jam, May 2019.</Caption>
 

src/pages/data-visualization/complex-charts/index.mdx

@@ -175,7 +175,8 @@ Here's an example using elkjs in react
   style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
   title="carbon-charts-react-elkjs-diagram"
   allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>
 
 <Row>
 <Column  colLg={12} colMd={8} colSm={4} >
@@ -475,7 +476,7 @@ accessible results.
 <Row>
 <Column  colLg={12} colMd={8} colSm={4} >
 
-![Mapbox white style](images/15_adv_geo_mapbox_a_928.png)
+![Mapbox white style](images/15_adv_geo_mapbox_a_928.jpg)
 
 <Caption>Example of a Carbon’s White theme style in Mapbox</Caption>
 

src/pages/guidelines/2x-grid/implementation.mdx

@@ -1327,7 +1327,7 @@ for every image or container to be one of these sizes. However it's important to
 use them to set the foundation of your layouts, especially in the case of same
 size tiles.
 
-![Aspect ratio](images/Aspect_Ratio.png)
+![Aspect ratio](images/Aspect_Ratio.jpg)
 
 <br />
 

src/pages/patterns/login-pattern/index.mdx

@@ -159,7 +159,7 @@ alternative logins include:
 <Row>
 <Column colLg={12}>
 
-![Example of login form with alternate login options](./images/3_Login_alternates_1120.png)
+![Example of login form with alternate login options](./images/3_Login_alternates_1120.jpg)
 
 <Caption>Example of a login form with alternate login options</Caption>
 

src/pages/whats-happening/meetups/index.mdx

@@ -40,7 +40,8 @@ along to see other work in progress and learn that way.
   <Button
     kind="tertiary"
     renderIcon={ArrowRight16}
-    href="https://ec.yourlearning.ibm.com/w3/series/10163237">
+    href="https://ec.yourlearning.ibm.com/w3/series/10163237"
+  >
     Subscribe
   </Button>
 </Row>
@@ -69,7 +70,8 @@ requirements, and determine next steps on requested components or functionality.
   <Button
     kind="tertiary"
     renderIcon={ArrowRight16}
-    onClick={() => (window.location.href = 'mailto:iliadm@ca.ibm.com')}>
+    onClick={() => (window.location.href = 'mailto:iliadm@ca.ibm.com')}
+  >
     Email us
   </Button>
 </Row>
@@ -98,7 +100,8 @@ release cycles to detect breaking changes.
   <Button
     kind="tertiary"
     renderIcon={ArrowRight16}
-    onClick={() => (window.location.href = 'mailto:carbon@us.ibm.com')}>
+    onClick={() => (window.location.href = 'mailto:carbon@us.ibm.com')}
+  >
     Email us
   </Button>
 </Row>
@@ -108,7 +111,7 @@ release cycles to detect breaking changes.
 <Row className="meetups-list">
 <Column colLg={4} colMd={2}>
 
-![](/images/events_pinup.png)
+![](/images/events_pinup.jpg)
 
 </Column>
 <Column colLg={7} colMd={5}>
@@ -127,7 +130,8 @@ the big picture to the smallest detail! Usually two or more hours.
   <Button
     kind="tertiary"
     renderIcon={ArrowRight16}
-    onClick={() => (window.location.href = 'mailto:carbon@us.ibm.com')}>
+    onClick={() => (window.location.href = 'mailto:carbon@us.ibm.com')}
+  >
     Email us
   </Button>
 </Row>

src/pages/whats-happening/news-and-articles/index.mdx

@@ -33,7 +33,7 @@ about design systems.
     href="https://medium.com/design-ibm/design-open-source-lessons-from-a-year-of-contributing-to-the-kubernetes-project-a85120acc890"
     >
 
-![](/images/kubernetes_16x9.png)
+![](/images/kubernetes_16x9.jpg)
 
 </ArticleCard>
 </Column>