chore: Update placeholder images in stories and demos (#9395)

**Related Issue:** #9361 , #9392 

## Summary
Removes served images from stories and local demo. We keep them in `.md`
file, as these need to be hosted somewhere in order to work if the
samples are used in an external location. cc @driskull

Ideally, we could use map tiles or something
(https://codepen.io/mac_and_cheese/pen/XWwXXqx?editors=1000) for these,
but not sure how reliable those are.

packages/calcite-components/src/components/carousel/carousel.stories.ts

@@ -2,6 +2,7 @@ import { select, number, text } from "../../../.storybook/fake-knobs";
 import { modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { boolean } from "../../../.storybook/helpers";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
 
 export default {
   title: "Components/Carousel",
@@ -59,7 +60,7 @@ export const carouselAutoplayFullImageWithOverlayAndEdge = (): string =>
     <style>
       .bg-image-example {
         color: red;
-        background-image: url("https://placebear.com/3000/2000");
+        background-image: url("${placeholderImage({ width: 3000, height: 2000 })}");
         background-size: cover;
         padding: 1rem;
         height: 300px;
@@ -89,7 +90,7 @@ export const carouselAutoplayFullImageWithNoOverlay = (): string =>
     <style>
       .bg-image-example {
         color: red;
-        background-image: url("https://placebear.com/3000/2000");
+        background-image: url("${placeholderImage({ width: 3000, height: 2000 })}");
         background-size: cover;
         padding: 1rem;
         height: 300px;
@@ -119,7 +120,7 @@ export const carouselFullImageWithOverlay = (): string =>
     <style>
       .bg-image-example {
         color: red;
-        background-image: url("https://placebear.com/3000/2000");
+        background-image: url("${placeholderImage({ width: 3000, height: 2000 })}");
         background-size: cover;
         padding: 1rem;
         height: 300px;
@@ -203,7 +204,7 @@ export const themed_simple = (): string =>
     <style>
       .bg-image-example {
         color: red;
-        background-image: url("https://placebear.com/3000/2000");
+        background-image: url("${placeholderImage({ width: 3000, height: 2000 })}");
         background-size: cover;
         padding: 1rem;
         height: 300px;
@@ -264,7 +265,7 @@ export const themed_carouselFullImageWithOverlay = (): string =>
     <style>
       .bg-image-example {
         color: red;
-        background-image: url("https://placebear.com/3000/2000");
+        background-image: url("${placeholderImage({ width: 3000, height: 2000 })}");
         background-size: cover;
         padding: 1rem;
         height: 300px;

packages/calcite-components/src/custom-theme.stories.ts

@@ -53,16 +53,16 @@ export const themingInteractive = (): string => {
       <div class="demo-column">
         <calcite-accordion>
           <calcite-accordion-item heading="Accordion Item"
-            ><img src="https://placem.at/places?w=200&txt=0" />
+            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
           </calcite-accordion-item>
           <calcite-accordion-item heading="Accordion Item 2"
-            ><img src="https://placem.at/places?w=200&txt=0" />
+            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
           </calcite-accordion-item>
           <calcite-accordion-item heading="Accordion Item 3"
-            ><img src="https://placem.at/places?w=200&txt=0" />
+            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
           </calcite-accordion-item>
           <calcite-accordion-item heading="Accordion Item 4"
-            ><img src="https://placem.at/places?w=200&txt=0" />
+            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
           </calcite-accordion-item>
           <calcite-accordion-item heading="Accordion Item 5" expanded>
             <calcite-tree lines>

packages/calcite-components/src/demos/carousel.html

@@ -54,13 +54,13 @@
       }
 
       .bg-image-example {
-        background-image: url("https://placebear.com/3000/2000");
+        background-image: url("./_assets/images/placeholder.svg");
         background-size: cover;
         padding: 1.5rem 3rem;
         height: 300px;
         margin: 0;
         font-size: 32px;
-        color: white;
+        color: red;
         font-weight: 600;
         line-height: 32px;
       }