@ornikar/bumper 2.7.2-canary.1768566928.e85c568dc49c9180e37b7aec8792b1e8d45968a6.0 → 2.8.1-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0

package/src/system/content/icon/__snapshots_web__/Icon.features.stories.tsx.snap

@@ -0,0 +1,309 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Content/Icon/Features Colors 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-g5y9jx 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_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--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </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"
+              >
+                base.hi
+              </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_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--base--mid)"
+                  data-file-name="star.inline.svg"
+                />
+              </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"
+              >
+                base.mid
+              </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_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--base--low)"
+                  data-file-name="star.inline.svg"
+                />
+              </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"
+              >
+                base.low
+              </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_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>
+              <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"
+              >
+                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_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>
+              <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"
+              >
+                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_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>
+              <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"
+              >
+                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_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>
+              <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"
+              >
+                danger
+              </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_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--info)"
+                  data-file-name="info.inline.svg"
+                />
+              </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"
+              >
+                info
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Content/Icon/Features Sizes 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-g5y9jx 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_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--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </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"
+              >
+                16
+              </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_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>
+              <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"
+              >
+                20
+              </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_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--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </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"
+              >
+                24
+              </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_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--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </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"
+              >
+                32
+              </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_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385508 _height-t-size-size1385508"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </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"
+              >
+                48
+              </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_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385566 _height-t-size-size1385566"
+              >
+                <svg
+                  color="var(--content--base--hi)"
+                  data-file-name="star.inline.svg"
+                />
+              </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"
+              >
+                64
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/system/content/icon/__snapshots_web__/Icon.stories.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Content/Icon Default 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-g5y9jx 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_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>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/system/content/typography/Typography.features.stories.tsx

@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { VStack } from '../../core/primitives/Stack';
+import { Typography } from './Typography';
+
+const meta: Meta<typeof Typography.Text> = {
+  title: 'Bumper/Content/Typography/Features',
+  component: Typography.Text,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const HeadingVariants: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="heading-2xl">Heading 2XL - Semibold</Typography.Text>
+      <Typography.Text variant="heading-xl">Heading XL - Semibold</Typography.Text>
+      <Typography.Text variant="heading-l">Heading L - Semibold</Typography.Text>
+      <Typography.Text variant="heading-m">Heading M - Semibold</Typography.Text>
+      <Typography.Text variant="heading-s">Heading S - Semibold</Typography.Text>
+      <Typography.Text variant="heading-xs">Heading XS - Semibold</Typography.Text>
+      <Typography.Text variant="heading-2xs">Heading 2XS - Semibold</Typography.Text>
+    </VStack>
+  ),
+};
+
+export const BodyVariants: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="body-xl" weight="regular">
+        Body XL Regular - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-l" weight="regular">
+        Body L Regular - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-m" weight="regular">
+        Body M Regular - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-s" weight="regular">
+        Body S Regular - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-xs" weight="regular">
+        Body XS Regular - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+    </VStack>
+  ),
+};
+
+export const BodyVariantsBold: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="body-xl" weight="bold">
+        Body XL Bold - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-l" weight="bold">
+        Body L Bold - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-m" weight="bold">
+        Body M Bold - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-s" weight="bold">
+        Body S Bold - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-xs" weight="bold">
+        Body XS Bold - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+    </VStack>
+  ),
+};
+
+export const LabelVariants: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="label-xl">Label XL - Semibold</Typography.Text>
+      <Typography.Text variant="label-l">Label L - Semibold</Typography.Text>
+      <Typography.Text variant="label-m">Label M - Semibold</Typography.Text>
+      <Typography.Text variant="label-s">Label S - Semibold</Typography.Text>
+    </VStack>
+  ),
+};
+
+export const ContentCapsVariants: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="content-caps-3xl">CONTENT CAPS 3XL</Typography.Text>
+      <Typography.Text variant="content-caps-2xl">CONTENT CAPS 2XL</Typography.Text>
+      <Typography.Text variant="content-caps-xl">CONTENT CAPS XL</Typography.Text>
+      <Typography.Text variant="content-caps-l">CONTENT CAPS L</Typography.Text>
+      <Typography.Text variant="content-caps-m">CONTENT CAPS M</Typography.Text>
+      <Typography.Text variant="content-caps-s">CONTENT CAPS S</Typography.Text>
+      <Typography.Text variant="content-caps-xs">CONTENT CAPS XS</Typography.Text>
+    </VStack>
+  ),
+};
+
+export const HeaderComponents: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Header1 variant="heading-2xl">Header 1 - heading-2xl</Typography.Header1>
+      <Typography.Header2 variant="heading-xl">Header 2 - heading-xl</Typography.Header2>
+      <Typography.Header3 variant="heading-l">Header 3 - heading-l</Typography.Header3>
+      <Typography.Header4 variant="heading-m">Header 4 - heading-m</Typography.Header4>
+      <Typography.Header5 variant="heading-s">Header 5 - heading-s</Typography.Header5>
+      <Typography.Header6 variant="heading-xs">Header 6 - heading-xs</Typography.Header6>
+    </VStack>
+  ),
+};
+
+export const ContextInheritance: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" weight="regular" color="$content.base.mid">
+          Parent variant
+        </Typography.Text>
+        <Typography.Text variant="body-l" weight="bold" color="$content.accent">
+          Parent: body-l bold accent
+          <Typography.Text> - Child inherits all (variant, weight, color)</Typography.Text>
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" weight="regular" color="$content.base.mid">
+          Weight inheritance
+        </Typography.Text>
+        <Typography.Text variant="body-m" weight="bold">
+          Parent: body-m bold
+          <Typography.Text> - Child inherits weight</Typography.Text>
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" weight="regular" color="$content.base.mid">
+          Color inheritance
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.success">
+          Parent: success color
+          <Typography.Text> - Child inherits color</Typography.Text>
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" weight="regular" color="$content.base.mid">
+          Override inherited values
+        </Typography.Text>
+        <Typography.Text variant="body-m" weight="bold" color="$content.accent">
+          Parent: body-m bold accent
+          <Typography.Text variant="body-s" weight="regular" color="$content.danger">
+            {' '}
+            - Child overrides all
+          </Typography.Text>
+        </Typography.Text>
+      </VStack>
+    </VStack>
+  ),
+};