@ornikar/bumper 2.8.1-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0 → 2.8.1-canary.1769087114.a46790da1b5b6361954b6ad25766074d3ed69784.0

package/src/system/content/typography/__snapshots_web__/TypographyIcon.features.stories.tsx.snap

@@ -0,0 +1,543 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Content/TypographyIcon/Features DifferentSizes 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa1366020313"
+          >
+            <span
+              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-head100347201 _lh-f-lineHeigh1544154440 _ls-f-letterSpa1195674547 _col-content--ac3049896 _fw-f-weight-se1074390495"
+              data-disable-theme="true"
+            >
+              <div
+                class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+              >
+                <div
+                  class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385471 _height-t-size-size1385471"
+                >
+                  <svg
+                    color="var(--content--accent)"
+                    data-file-name="star.inline.svg"
+                  />
+                </div>
+              </div>
+               Large heading with size 32 icon
+            </span>
+            <span
+              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _col-content--ac3049896"
+              data-disable-theme="true"
+            >
+              <div
+                class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+              >
+                <div
+                  class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385438 _height-t-size-size1385438"
+                >
+                  <svg
+                    color="var(--content--accent)"
+                    data-file-name="star.inline.svg"
+                  />
+                </div>
+              </div>
+               Body text with size 20 icon
+            </span>
+            <span
+              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ac3049896"
+              data-disable-theme="true"
+            >
+              <div
+                class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+              >
+                <div
+                  class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385413 _height-t-size-size1385413"
+                >
+                  <svg
+                    color="var(--content--accent)"
+                    data-file-name="star.inline.svg"
+                  />
+                </div>
+              </div>
+               Small text with size 16 icon
+            </span>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Content/TypographyIcon/Features InheritFromTypography 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa1366020284"
+          >
+            <div
+              class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                Icon inherits accent color from Typography
+              </span>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _col-content--ac3049896"
+                data-disable-theme="true"
+              >
+                <div
+                  class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+                >
+                  <div
+                    class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385438 _height-t-size-size1385438"
+                  >
+                    <svg
+                      color="var(--content--accent)"
+                      data-file-name="star.inline.svg"
+                    />
+                  </div>
+                </div>
+                 This icon inherits the accent color
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                Icon inherits success color from Typography
+              </span>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _col-content--su94478629"
+                data-disable-theme="true"
+              >
+                <div
+                  class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+                >
+                  <div
+                    class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385438 _height-t-size-size1385438"
+                  >
+                    <svg
+                      color="var(--content--success)"
+                      data-file-name="check-circle.inline.svg"
+                    />
+                  </div>
+                </div>
+                 Operation completed successfully
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                Icon inherits danger color from Typography
+              </span>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _col-content--da3379238"
+                data-disable-theme="true"
+              >
+                <div
+                  class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+                >
+                  <div
+                    class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385438 _height-t-size-size1385438"
+                  >
+                    <svg
+                      color="var(--content--danger)"
+                      data-file-name="warning.inline.svg"
+                    />
+                  </div>
+                </div>
+                 Error: Something went wrong
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                Icon inherits warning color from Typography
+              </span>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _col-content--wa108662822"
+                data-disable-theme="true"
+              >
+                <div
+                  class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+                >
+                  <div
+                    class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385438 _height-t-size-size1385438"
+                  >
+                    <svg
+                      color="var(--content--warning)"
+                      data-file-name="info.inline.svg"
+                    />
+                  </div>
+                </div>
+                 Warning: Please review this item
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Content/TypographyIcon/Features NestedTypographyInheritance 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa1366020284"
+          >
+            <div
+              class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                Nested Typography components - icon inherits from parent
+              </span>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1503 _lh-f-lineHeigh201793146 _ls-f-letterSpa1099960303 _col-content--ac3049896"
+                data-disable-theme="true"
+              >
+                <div
+                  class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+                >
+                  <div
+                    class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385438 _height-t-size-size1385438"
+                  >
+                    <svg
+                      color="var(--content--accent)"
+                      data-file-name="star.inline.svg"
+                    />
+                  </div>
+                </div>
+                 Parent text with icon
+                <span
+                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-inherit _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _ls-f-letterSpa1099960304 _tt-inherit _fs-f-size-body1504 _lh-f-lineHeigh201793147 _col-content--ac3049896"
+                  data-disable-theme="true"
+                >
+                  <div
+                    class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+                  >
+                    <div
+                      class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385413 _height-t-size-size1385413"
+                    >
+                      <svg
+                        color="var(--content--accent)"
+                        data-file-name="check-circle.inline.svg"
+                      />
+                    </div>
+                  </div>
+                   Nested text - icon inherits parent color
+                </span>
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                Nested with override - child overrides parent color
+              </span>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1503 _lh-f-lineHeigh201793146 _ls-f-letterSpa1099960303 _col-content--ac3049896"
+                data-disable-theme="true"
+              >
+                <div
+                  class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+                >
+                  <div
+                    class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385438 _height-t-size-size1385438"
+                  >
+                    <svg
+                      color="var(--content--accent)"
+                      data-file-name="star.inline.svg"
+                    />
+                  </div>
+                </div>
+                 Parent accent color
+                <span
+                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-inherit _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _ls-f-letterSpa1099960304 _tt-inherit _fs-f-size-body1504 _lh-f-lineHeigh201793147 _col-content--su94478629"
+                  data-disable-theme="true"
+                >
+                  <div
+                    class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+                  >
+                    <div
+                      class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385413 _height-t-size-size1385413"
+                    >
+                      <svg
+                        color="var(--content--success)"
+                        data-file-name="check-circle.inline.svg"
+                      />
+                    </div>
+                  </div>
+                   Child overrides to success
+                </span>
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Content/TypographyIcon/Features OverrideInheritedColor 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa1366020284"
+          >
+            <div
+              class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                Typography is accent, but icon explicitly uses success color
+              </span>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _col-content--ac3049896"
+                data-disable-theme="true"
+              >
+                <div
+                  class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+                >
+                  <div
+                    class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385438 _height-t-size-size1385438"
+                  >
+                    <svg
+                      color="var(--content--success)"
+                      data-file-name="check-circle.inline.svg"
+                    />
+                  </div>
+                </div>
+                 Icon overrides inherited color
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                Typography is success, but icon explicitly uses danger color
+              </span>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _col-content--su94478629"
+                data-disable-theme="true"
+              >
+                <div
+                  class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+                >
+                  <div
+                    class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385438 _height-t-size-size1385438"
+                  >
+                    <svg
+                      color="var(--content--danger)"
+                      data-file-name="warning.inline.svg"
+                    />
+                  </div>
+                </div>
+                 Mixed color scenario
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+          >
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+              >
+                <div
+                  class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385442 _height-t-size-size1385442"
+                >
+                  <svg
+                    color="var(--content--accent)"
+                    data-file-name="star.inline.svg"
+                  />
+                </div>
+              </div>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                Explicit accent
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+              >
+                <div
+                  class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385442 _height-t-size-size1385442"
+                >
+                  <svg
+                    color="var(--content--success)"
+                    data-file-name="check-circle.inline.svg"
+                  />
+                </div>
+              </div>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                Explicit success
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+              >
+                <div
+                  class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385442 _height-t-size-size1385442"
+                >
+                  <svg
+                    color="var(--content--warning)"
+                    data-file-name="warning.inline.svg"
+                  />
+                </div>
+              </div>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                Explicit warning
+              </span>
+            </div>
+            <div
+              class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _alignItems-center _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+              >
+                <div
+                  class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385442 _height-t-size-size1385442"
+                >
+                  <svg
+                    color="var(--content--danger)"
+                    data-file-name="warning.inline.svg"
+                  />
+                </div>
+              </div>
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body47080 _lh-f-lineHeigh1960620717 _ls-f-letterSpa260968488 _col-content--ba1918259606"
+                data-disable-theme="true"
+              >
+                Explicit danger
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/system/content/typography/__snapshots_web__/TypographyIcon.stories.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Content/TypographyIcon Default 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
+          >
+            <div
+              class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385438 _height-t-size-size1385438"
+            >
+              <svg
+                color="var(--content--base--hi)"
+                data-file-name="star.inline.svg"
+              />
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;