From 9155681fe47502da4bc02f998a239b903c654ee5 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Thu, 6 Apr 2023 11:56:40 -0400
Subject: [PATCH] fix(image-with-caption): adjust image button background color
 (#10279)

### Related Ticket(s)

https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10250
https://jsw.ibm.com/browse/ADCMS-3105

### Description

Sets the background style to transparent for the `<button>` element used in the shadow DOM of the `<dds-image>` and `<dds-image-with-caption>` components, such that when used with a transparent image (SVG, transparent gif/png), the browser's default button grey does not show through.

Note that the original issue was reported for `<dds-image-with-caption>`, but the issue equally effects `<dds-image>` component as well. Note also that the `<dds-image-with-caption>` button was recently deprecated, it's features merged with `<dds-image>`. Use of `<dds-image-with-caption>` should be replaced by `<dds-image>` (see https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8839). The deprecation is documented in the [Storybook README for the Image component](https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/?path=/docs/components-image--default#image-with-caption).

### Testing Instructions

- [ ] Open Storybook to the Image > Default component.
- [ ] For the "Default image" Storybook knob, choose "SVG". A transparent SVG is used as the image for the component.
- [ ] Select Lightbox as well from the Storybook knobs
- [ ] Note the browser default button color does not show through.

### Changelog

**Changed**

- Added `background-color: transparent` to the button styles for the `<dds-image>` component when in lightbox mode.
---
 .../image-with-caption/image-with-caption.scss     |  3 ++-
 .../__stories__/content-block-simple.stories.ts    |  1 -
 .../src/components/image/__stories__/chart-svg.js  | 14 ++++++++++++++
 .../components/image/__stories__/image.stories.ts  |  2 ++
 4 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 packages/web-components/src/components/image/__stories__/chart-svg.js

diff --git a/packages/styles/scss/components/image-with-caption/image-with-caption.scss b/packages/styles/scss/components/image-with-caption/image-with-caption.scss
index 59745f4256e..a63182e2197 100644
--- a/packages/styles/scss/components/image-with-caption/image-with-caption.scss
+++ b/packages/styles/scss/components/image-with-caption/image-with-caption.scss
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -32,6 +32,7 @@
     position: relative;
     pointer-events: none;
     border: none;
+    background-color: transparent;
 
     &:hover {
       // only have lightbox functionality on bigger breakpoints
diff --git a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts
index 82ea4968b26..687556969bf 100644
--- a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts
+++ b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts
@@ -63,7 +63,6 @@ const copy = `Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean
         - list item 2a.a
 `;
 
-// TODO: Replace with <dds-image-with-caption>
 const image = html`
   <dds-image slot="media" alt="Image alt text" default-src="${imgLg16x9}">
     <dds-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
diff --git a/packages/web-components/src/components/image/__stories__/chart-svg.js b/packages/web-components/src/components/image/__stories__/chart-svg.js
new file mode 100644
index 00000000000..fe5bf6ee33a
--- /dev/null
+++ b/packages/web-components/src/components/image/__stories__/chart-svg.js
@@ -0,0 +1,14 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// SVG chart graphic used to demo proper transparency treatment in the image
+// component.
+const chartSvg =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTE0NSIgaGVpZ2h0PSI1NzYiIHZpZXdCb3g9IjAgMCAxMTQ1IDU3NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIwMzZfMjE0MTk0KSI+Cjx0ZXh0IGZpbGw9ImJsYWNrIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTQiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNTUuOTM0MSIgeT0iMTQuMjUiPkNhdGVnb3J5PC90c3Bhbj48L3RleHQ+Cjx0ZXh0IGZpbGw9ImJsYWNrIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTQiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iMTUxIiB5PSIxNC4yNSI+VGVjaG5vbG9neTwvdHNwYW4+PC90ZXh0Pgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI1MC40MTIxIiB5PSI2MC41Ij5BcHBsaWNhdGlvbjwvdHNwYW4+PC90ZXh0Pgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI4OC42NDAxIiB5PSIxMTAuNSI+RGF0YTwvdHNwYW4+PC90ZXh0Pgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI2My41ODQiIHk9IjE2MS41Ij5Db21wdXRlPC90c3Bhbj48L3RleHQ+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjcxLjI4ODEiIHk9IjIxMS41Ij5TdG9yYWdlPC90c3Bhbj48L3RleHQ+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjQ5Ljc1OTgiIHk9IjI2MS41Ij5OZXR3b3JraW5nPC90c3Bhbj48L3RleHQ+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjY4LjQyMzgiIHk9IjMxMS41Ij5TZWN1cml0eTwvdHNwYW4+PC90ZXh0Pgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI3MS4zMzIiIHk9IjM2Mi41Ij5EZXZPcHM8L3RzcGFuPjwvdGV4dD4KPHRleHQgZmlsbD0iIzE2MTYxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSJJQk0gUGxleCBTYW5zIiBmb250LXNpemU9IjEyIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNTcuMTc1OCIgeT0iNDEyLjUiPlJlc2lsaWVuY3k8L3RzcGFuPjwvdGV4dD4KPHRleHQgZmlsbD0iIzE2MTYxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSJJQk0gUGxleCBTYW5zIiBmb250LXNpemU9IjEyIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNzMuMjIwMiIgeT0iNDU0LjUiPlNlcnZpY2U8L3RzcGFuPjwvdGV4dD4KPHRleHQgZmlsbD0iIzE2MTYxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSJJQk0gUGxleCBTYW5zIiBmb250LXNpemU9IjEyIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNDAuNzQ4IiB5PSI0NjkuNSI+bWFuYWdlbWVudDwvdHNwYW4+PC90ZXh0Pgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIxMy42MDQiIHk9IjUwOC41Ij5NYW5hZ2VkIHNlcnZpY2VzPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik0yODUuNSAzNC41SDE1MS41Vjc1LjVIMjg1LjVWMzQuNVoiIHN0cm9rZT0iI0E4QThBOCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIxNjIiIHk9IjYwLjUiPk1vYmlsZTwvdHNwYW4+PC90ZXh0Pgo8cGF0aCBkPSJNMjg1LjUgODQuNUgxNTEuNVYxMjUuNUgyODUuNVY4NC41WiIgc3Ryb2tlPSIjQThBOEE4Ii8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjE2MiIgeT0iMTAyLjUiPkFwcGxpY2F0aW9uPC90c3Bhbj48L3RleHQ+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjE2MiIgeT0iMTE3LjUiPmludGVncmF0aW9uPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik0yODUuNSAxMzUuNUgxNTEuNVYxNzYuNUgyODUuNVYxMzUuNVoiIHN0cm9rZT0iI0E4QThBOCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIxNjIiIHk9IjE1My41Ij5CYXJlIG1ldGFsPC90c3Bhbj48L3RleHQ+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjE2MiIgeT0iMTY4LjUiPnNlcnZlcnM8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTI4NS41IDE4NS41SDE1MS41VjIyNi41SDI4NS41VjE4NS41WiIgZmlsbD0iI0VERjVGRiIgc3Ryb2tlPSIjMEU2MkZEIi8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIxNjIiIHk9IjIxMS41Ij5QcmltYXJ5IHN0b3JhZ2U8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTI4NS41IDIzNS41SDE1MS41VjI3Ni41SDI4NS41VjIzNS41WiIgZmlsbD0iI0VERjVGRiIgc3Ryb2tlPSIjMEU2MkZEIi8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIxNjIiIHk9IjI1NC41Ij5FbnRlcnByaXNlPC90c3Bhbj48L3RleHQ+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIxNjIiIHk9IjI2OS41Ij5jb25uZWN0aXZpdHk8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTI4NS41IDI4NS41SDE1MS41VjMyNi41SDI4NS41VjI4NS41WiIgZmlsbD0iI0VERjVGRiIgc3Ryb2tlPSIjMEU2MkZEIi8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIxNjIiIHk9IjMxMS41Ij5EYXRhIHNlY3VyaXR5PC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik0yODUuNSAzMzYuNUgxNTEuNVYzNzcuNUgyODUuNVYzMzYuNVoiIHN0cm9rZT0iI0E4QThBOCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIxNjIiIHk9IjM2Mi41Ij5CdWlsZCAmIzM4OyB0ZXN0PC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik0yODUuNSAzODYuNUgxNTEuNVY0MjcuNUgyODUuNVYzODYuNVoiIHN0cm9rZT0iI0E4QThBOCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIxNjIiIHk9IjQxMi41Ij5CYWNrdXA8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTI4NS41IDQzNi41SDE1MS41VjQ3Ny41SDI4NS41VjQzNi41WiIgZmlsbD0iI0VERjVGRiIgc3Ryb2tlPSIjMEU2MkZEIi8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIxNjIiIHk9IjQ2MS41Ij5Nb25pdG9yaW5nPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik0yODUuNSA0ODYuNUgxNTEuNVY1MjcuNUgyODUuNVY0ODYuNVoiIGZpbGw9IiNFREY1RkYiIHN0cm9rZT0iIzBFNjJGRCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iMTYyIiB5PSI1MTEuNSI+QWR2aXNlPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik00MjguNSAzNC41SDI5NC41Vjc1LjVINDI4LjVWMzQuNVoiIHN0cm9rZT0iI0E4QThBOCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIzMDUiIHk9IjYwLjUiPklvVDwvdHNwYW4+PC90ZXh0Pgo8cGF0aCBkPSJNNDI4LjUgODQuNUgyOTQuNVYxMjUuNUg0MjguNVY4NC41WiIgc3Ryb2tlPSIjQThBOEE4Ii8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjMwNSIgeT0iMTEwLjUiPkdvdmVybmFuY2U8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTQyOC41IDEzNS41SDI5NC41VjE3Ni41SDQyOC41VjEzNS41WiIgZmlsbD0iI0VERjVGRiIgc3Ryb2tlPSIjMEU2MkZEIi8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIzMDUiIHk9IjE2MS41Ij5WaXJ0dWFsIHNlcnZlcnM8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTQyOC41IDE4NS41SDI5NC41VjIyNi41SDQyOC41VjE4NS41WiIgZmlsbD0iI0VERjVGRiIgc3Ryb2tlPSIjMEU2MkZEIi8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIzMDUiIHk9IjIxMS41Ij5CYWNrdXA8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTQyOC41IDIzNS41SDI5NC41VjI3Ni41SDQyOC41VjIzNS41WiIgc3Ryb2tlPSIjQThBOEE4Ii8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjMwNSIgeT0iMjU0LjUiPkJZT0lQL0VkZ2U8L3RzcGFuPjwvdGV4dD4KPHRleHQgZmlsbD0iIzE2MTYxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSJJQk0gUGxleCBTYW5zIiBmb250LXNpemU9IjEyIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iMzA1IiB5PSIyNjkuNSI+R2F0ZXdheXM8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTQyOC41IDI4NS41SDI5NC41VjMyNi41SDQyOC41VjI4NS41WiIgZmlsbD0iI0VERjVGRiIgc3Ryb2tlPSIjMEU2MkZEIi8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIzMDUiIHk9IjMxMS41Ij5JZGVudGl0eSAmIzM4OyBhY2Nlc3M8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTQyOC41IDMzNi41SDI5NC41VjM3Ny41SDQyOC41VjMzNi41WiIgc3Ryb2tlPSIjQThBOEE4Ii8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjMwNSIgeT0iMzYyLjUiPkRlbGl2ZXJ5IHBpcGVsaW5lPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik00MjguNSAzODYuNUgyOTQuNVY0MjcuNUg0MjguNVYzODYuNVoiIGZpbGw9IiNFREY1RkYiIHN0cm9rZT0iIzBFNjJGRCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iMzA1IiB5PSI0MTIuNSI+RGlzYXN0ZXIgcmVjb3Zlcnk8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTQyOC41IDQzNi41SDI5NC41VjQ3Ny41SDQyOC41VjQzNi41WiIgZmlsbD0iI0VERjVGRiIgc3Ryb2tlPSIjMEU2MkZEIi8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIzMDUiIHk9IjQ2MS41Ij5Mb2dnaW5nPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik00MjguNSA0ODYuNUgyOTQuNVY1MjcuNUg0MjguNVY0ODYuNVoiIGZpbGw9IiNFREY1RkYiIHN0cm9rZT0iIzBFNjJGRCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iMzA1IiB5PSI1MTEuNSI+TW92ZTwvdHNwYW4+PC90ZXh0Pgo8cGF0aCBkPSJNNTcxLjUgMzQuNUg0MzcuNVY3NS41SDU3MS41VjM0LjVaIiBzdHJva2U9IiNBOEE4QTgiLz4KPHRleHQgZmlsbD0iIzE2MTYxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSJJQk0gUGxleCBTYW5zIiBmb250LXNpemU9IjEyIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNDQ4IiB5PSI1My41Ij5BcnRpZmljaWFsPC90c3Bhbj48L3RleHQ+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjQ0OCIgeT0iNjguNSI+aW50ZWxsaWdlbmNlPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik01NzEuNSA4NC41SDQzNy41VjEyNS41SDU3MS41Vjg0LjVaIiBzdHJva2U9IiNBOEE4QTgiLz4KPHRleHQgZmlsbD0iIzE2MTYxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSJJQk0gUGxleCBTYW5zIiBmb250LXNpemU9IjEyIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNDQ4IiB5PSIxMTAuNSI+QW5hbHl0aWNzPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik01NzEuNSAxMzUuNUg0MzcuNVYxNzYuNUg1NzEuNVYxMzUuNVoiIHN0cm9rZT0iI0E4QThBOCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI0NDgiIHk9IjE2MS41Ij5WTXdhcmU8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTU3MS41IDE4NS41SDQzNy41VjIyNi41SDU3MS41VjE4NS41WiIgZmlsbD0iI0VERjVGRiIgc3Ryb2tlPSIjMEU2MkZEIi8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI0NDgiIHk9IjIxMS41Ij5BcmNoaXZlPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik01NzEuNSAyMzUuNUg0MzcuNVYyNzYuNUg1NzEuNVYyMzUuNVoiIGZpbGw9IiNFREY1RkYiIHN0cm9rZT0iIzBFNjJGRCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNDQ4IiB5PSIyNjEuNSI+TG9hZCBiYWxhbmNpbmc8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTU3MS41IDI4NS41SDQzNy41VjMyNi41SDU3MS41VjI4NS41WiIgZmlsbD0iI0VERjVGRiIgc3Ryb2tlPSIjMEU2MkZEIi8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI0NDgiIHk9IjMwMy41Ij5BcHBsaWNhdGlvbjwvdHNwYW4+PC90ZXh0Pgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNDQ4IiB5PSIzMTguNSI+c2VjdXJpdHk8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTU3MS41IDMzNi41SDQzNy41VjM3Ny41SDU3MS41VjMzNi41WiIgc3Ryb2tlPSIjQThBOEE4Ii8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjQ0OCIgeT0iMzYyLjUiPkNvZGUgcmVwb3NpdG9yeTwvdHNwYW4+PC90ZXh0Pgo8cGF0aCBkPSJNNTcxLjUgMzg2LjVINDM3LjVWNDI3LjVINTcxLjVWMzg2LjVaIiBmaWxsPSIjRURGNUZGIiBzdHJva2U9IiMwRTYyRkQiLz4KPHRleHQgZmlsbD0iIzE2MTYxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSJJQk0gUGxleCBTYW5zIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0iYm9sZCIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjQ0OCIgeT0iNDEyLjUiPkhpZ2ggYXZhaWxhYmlsaXR5PC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik01NzEuNSA0MzYuNUg0MzcuNVY0NzcuNUg1NzEuNVY0MzYuNVoiIGZpbGw9IiNFREY1RkYiIHN0cm9rZT0iIzBFNjJGRCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNDQ4IiB5PSI0NTQuNSI+QXVkaXRpbmcvPC90c3Bhbj48L3RleHQ+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI0NDgiIHk9IjQ2OS41Ij50cmFja2luZzwvdHNwYW4+PC90ZXh0Pgo8cGF0aCBkPSJNNTcxLjUgNDg2LjVINDM3LjVWNTI3LjVINTcxLjVWNDg2LjVaIiBmaWxsPSIjRURGNUZGIiBzdHJva2U9IiMwRTYyRkQiLz4KPHRleHQgZmlsbD0iIzE2MTYxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSJJQk0gUGxleCBTYW5zIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0iYm9sZCIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjQ0OCIgeT0iNTExLjUiPkJ1aWxkPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik03MTQuNSAzNC41SDU4MC41Vjc1LjVINzE0LjVWMzQuNVoiIHN0cm9rZT0iI0E4QThBOCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI1OTEiIHk9IjYwLjUiPkJsb2NrY2hhaW48L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTcxNC41IDg0LjVINTgwLjVWMTI1LjVINzE0LjVWODQuNVoiIHN0cm9rZT0iI0E4QThBOCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI1OTEiIHk9IjExMC41Ij5EYXRhYmFzZXM8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTcxNC41IDEzNS41SDU4MC41VjE3Ni41SDcxNC41VjEzNS41WiIgZmlsbD0iI0VERjVGRiIgc3Ryb2tlPSIjMEU2MkZEIi8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI1OTEiIHk9IjE2MS41Ij5Db250YWluZXJzPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik03MTQuNSAxODUuNUg1ODAuNVYyMjYuNUg3MTQuNVYxODUuNVoiIHN0cm9rZT0iI0E4QThBOCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI1OTEiIHk9IjIxMS41Ij5EYXRhIG1pZ3JhdGlvbjwvdHNwYW4+PC90ZXh0Pgo8cGF0aCBkPSJNNzE0LjUgMjM1LjVINTgwLjVWMjc2LjVINzE0LjVWMjM1LjVaIiBmaWxsPSIjRURGNUZGIiBzdHJva2U9IiMwRTYyRkQiLz4KPHRleHQgZmlsbD0iIzE2MTYxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSJJQk0gUGxleCBTYW5zIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0iYm9sZCIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjU5MSIgeT0iMjU0LjUiPkNsb3VkIE5hdGl2ZTwvdHNwYW4+PC90ZXh0Pgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNTkxIiB5PSIyNjkuNSI+Q29ubmVjdGl2aXR5PC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik03MTQuNSAyODUuNUg1ODAuNVYzMjYuNUg3MTQuNVYyODUuNVoiIGZpbGw9IiNFREY1RkYiIHN0cm9rZT0iIzBFNjJGRCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNTkxIiB5PSIzMDMuNSI+SW5mcmFzdHJ1Y3R1cmUgJiMzODs8L3RzcGFuPjwvdGV4dD4KPHRleHQgZmlsbD0iIzE2MTYxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSJJQk0gUGxleCBTYW5zIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0iYm9sZCIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjU5MSIgeT0iMzE4LjUiPmVuZHBvaW50czwvdHNwYW4+PC90ZXh0Pgo8cGF0aCBkPSJNNzE0LjUgNDM2LjVINTgwLjVWNDc3LjVINzE0LjVWNDM2LjVaIiBzdHJva2U9IiNBOEE4QTgiLz4KPHRleHQgZmlsbD0iIzE2MTYxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSJJQk0gUGxleCBTYW5zIiBmb250LXNpemU9IjEyIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNTkxIiB5PSI0NjEuNSI+QWxlcnRpbmc8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTcxNC41IDQ4Ni41SDU4MC41VjUyNy41SDcxNC41VjQ4Ni41WiIgZmlsbD0iI0VERjVGRiIgc3Ryb2tlPSIjMEU2MkZEIi8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI1OTEiIHk9IjUxMS41Ij5NYW5hZ2U8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTg1Ny41IDM0LjVINzIzLjVWNzUuNUg4NTcuNVYzNC41WiIgc3Ryb2tlPSIjQThBOEE4Ii8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjczNCIgeT0iNTIuNSI+RW50ZXJwcmlzZTwvdHNwYW4+PC90ZXh0Pgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI3MzQiIHk9IjY3LjUiPmFwcGxpY2F0aW9uczwvdHNwYW4+PC90ZXh0Pgo8cGF0aCBkPSJNODU3LjUgODQuNUg3MjMuNVYxMjUuNUg4NTcuNVY4NC41WiIgc3Ryb2tlPSIjQThBOEE4Ii8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjczNCIgeT0iMTAyLjUiPlJlcG9ydGluZyAmIzM4OzwvdHNwYW4+PC90ZXh0Pgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI3MzQiIHk9IjExNy41Ij52aXN1YWxpemF0aW9uPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik04NTcuNSAxMzUuNUg3MjMuNVYxNzYuNUg4NTcuNVYxMzUuNVoiIHN0cm9rZT0iI0E4QThBOCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI3MzQiIHk9IjE2MS41Ij5DbG91ZCBGb3VuZHJ5PC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik04NTcuNSAyMzQuNUg3MjMuNVYyNzUuNUg4NTcuNVYyMzQuNVoiIGZpbGw9IiNFREY1RkYiIHN0cm9rZT0iIzBFNjJGRCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNzM0IiB5PSIyNTMuNSI+TmV0d29yazwvdHNwYW4+PC90ZXh0Pgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNzM0IiB5PSIyNjguNSI+U2VnbWVudGF0aW9uPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik04NTcuNSAyODUuNUg3MjMuNVYzMjYuNUg4NTcuNVYyODUuNVoiIGZpbGw9IiNFREY1RkYiIHN0cm9rZT0iIzBFNjJGRCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNzM0IiB5PSIzMDMuNSI+VGhyZWF0IGRldGVjdGlvbjwvdHNwYW4+PC90ZXh0Pgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iNzM0IiB5PSIzMTguNSI+JiMzODsgcmVzcG9uc2U8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTg1Ny41IDQzNi41SDcyMy41VjQ3Ny41SDg1Ny41VjQzNi41WiIgc3Ryb2tlPSIjQThBOEE4Ii8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjczNCIgeT0iNDU0LjUiPkV2ZW50PC90c3Bhbj48L3RleHQ+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9IjczNCIgeT0iNDY5LjUiPm1hbmFnZW1lbnQ8L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTEwMDAuNSAxMzUuNUg4NjYuNVYxNzYuNUgxMDAwLjVWMTM1LjVaIiBzdHJva2U9IiNBOEE4QTgiLz4KPHRleHQgZmlsbD0iIzE2MTYxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSJJQk0gUGxleCBTYW5zIiBmb250LXNpemU9IjEyIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iODc3IiB5PSIxNjEuNSI+U2VydmVybGVzczwvdHNwYW4+PC90ZXh0Pgo8cGF0aCBkPSJNMTAwMC41IDIzNC41SDg2Ni41VjI3NS41SDEwMDAuNVYyMzQuNVoiIHN0cm9rZT0iI0E4QThBOCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI4NzciIHk9IjI2MC41Ij5DRE48L3RzcGFuPjwvdGV4dD4KPHBhdGggZD0iTTEwMDAuNSAyODUuNUg4NjYuNVYzMjYuNUgxMDAwLjVWMjg1LjVaIiBzdHJva2U9IiNBOEE4QTgiLz4KPHRleHQgZmlsbD0iIzE2MTYxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSJJQk0gUGxleCBTYW5zIiBmb250LXNpemU9IjEyIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iODc3IiB5PSIzMDMuNSI+R292ZXJuYW5jZSwgcmlzazwvdHNwYW4+PC90ZXh0Pgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI4NzciIHk9IjMxOC41Ij4mIzM4OyBjb21wbGlhbmNlPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik0xMDAwLjUgNDM2LjVIODY2LjVWNDc3LjVIMTAwMC41VjQzNi41WiIgc3Ryb2tlPSIjQThBOEE4Ii8+Cjx0ZXh0IGZpbGw9IiMxNjE2MTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTogcHJlIiBmb250LWZhbWlseT0iSUJNIFBsZXggU2FucyIgZm9udC1zaXplPSIxMiIgbGV0dGVyLXNwYWNpbmc9IjBlbSI+PHRzcGFuIHg9Ijg3NyIgeT0iNDU0LjUiPkF1dG9tYXRlZDwvdHNwYW4+PC90ZXh0Pgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSI4NzciIHk9IjQ2OS41Ij5kZXBsb3ltZW50PC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik0xMTQzLjUgMjM0LjVIMTAwOS41VjI3NS41SDExNDMuNVYyMzQuNVoiIHN0cm9rZT0iI0E4QThBOCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIxMDIwIiB5PSIyNjAuNSI+RE5TPC90c3Bhbj48L3RleHQ+CjxwYXRoIGQ9Ik0xMTQzLjUgNDM2LjVIMTAwOS41VjQ3Ny41SDExNDMuNVY0MzYuNVoiIHN0cm9rZT0iI0E4QThBOCIvPgo8dGV4dCBmaWxsPSIjMTYxNjE2IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0id2hpdGUtc3BhY2U6IHByZSIgZm9udC1mYW1pbHk9IklCTSBQbGV4IFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGxldHRlci1zcGFjaW5nPSIwZW0iPjx0c3BhbiB4PSIxMDIwIiB5PSI0NjEuNSI+TWFuYWdlbWVudDwvdHNwYW4+PC90ZXh0Pgo8cGF0aCBkPSJNMTY2LjUgNTYwLjVIMTUxLjVWNTc1LjVIMTY2LjVWNTYwLjVaIiBmaWxsPSIjRURGNUZGIiBzdHJva2U9IiMwRTYyRkQiLz4KPHBhdGggZD0iTTAuNSA1NDQuNUgxMTQ0LjUiIHN0cm9rZT0iI0M2QzZDNiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIvPgo8cGF0aCBkPSJNMTM2LjUgNTI4LjVWMC41IiBzdHJva2U9IiNDNkM2QzYiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiLz4KPHRleHQgZmlsbD0iIzE2MTYxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IndoaXRlLXNwYWNlOiBwcmUiIGZvbnQtZmFtaWx5PSJJQk0gUGxleCBTYW5zIiBmb250LXNpemU9IjEyIiBsZXR0ZXItc3BhY2luZz0iMGVtIj48dHNwYW4geD0iMTc1IiB5PSI1NzMuNSI+SW5jbHVkZWQgaW4gdGhpcyBhcmNoaXRlY3R1cmU8L3RzcGFuPjwvdGV4dD4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMDM2XzIxNDE5NCI+CjxyZWN0IHdpZHRoPSIxMTQ1IiBoZWlnaHQ9IjU3NiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K';
+export default chartSvg;
diff --git a/packages/web-components/src/components/image/__stories__/image.stories.ts b/packages/web-components/src/components/image/__stories__/image.stories.ts
index 30113fa26c6..fb020dff0ee 100644
--- a/packages/web-components/src/components/image/__stories__/image.stories.ts
+++ b/packages/web-components/src/components/image/__stories__/image.stories.ts
@@ -18,12 +18,14 @@ import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480
 import imgMd2x1 from '../../../../../storybook-images/assets/480/fpo--2x1--480x240--005.jpg';
 import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--005.jpg';
 import imgSm2x1 from '../../../../../storybook-images/assets/320/fpo--2x1--320x160--005.jpg';
+import chartSvg from './chart-svg.js';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
 const images = {
   '2:1': imgLg2x1,
   '16:9': imgLg16x9,
+  'SVG (transparent background)': chartSvg,
 };
 
 const srcsets = {