@ornikar/bumper 3.12.0 → 3.14.0

package/src/system/dataDisplays/Avatar/__snapshots__/Avatar.stories.tsx.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Data Displays/Avatar Default 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    firstname="John"
+    lastname="Doe"
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#EAE3D6",
+        "borderBottomLeftRadius": 4,
+        "borderBottomRightRadius": 4,
+        "borderTopLeftRadius": 4,
+        "borderTopRightRadius": 4,
+        "height": 48,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 48,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#563B56",
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 16,
+          "letterSpacing": 0,
+          "lineHeight": 20,
+          "textAlign": "left",
+        }
+      }
+      suppressHighlighting={true}
+    >
+      JD
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;

package/src/system/dataDisplays/Avatar/__snapshots_web__/Avatar.features.stories.tsx.snap

@@ -0,0 +1,545 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Data Displays/Avatar/Features CircleSizes 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_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-32px _height-32px _btlr-t-radius-ra1854241453 _btrr-t-radius-ra1854241453 _bbrr-t-radius-ra1854241453 _bblr-t-radius-ra1854241453"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <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-labe105292 _lh-f-lineHeigh1842530171 _ls-f-letterSpa379059034 _fw-f-weight-se1074390495 _col-content--ac3049896 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+            <div
+              class="is_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-40px _height-40px _btlr-t-radius-ra1854241453 _btrr-t-radius-ra1854241453 _bbrr-t-radius-ra1854241453 _bblr-t-radius-ra1854241453"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <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-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ac3049896 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+            <div
+              class="is_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-48px _height-48px _btlr-t-radius-ra1854241453 _btrr-t-radius-ra1854241453 _bbrr-t-radius-ra1854241453 _bblr-t-radius-ra1854241453"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <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-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ac3049896 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+            <div
+              class="is_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-64px _height-64px _btlr-t-radius-ra1854241453 _btrr-t-radius-ra1854241453 _bbrr-t-radius-ra1854241453 _bblr-t-radius-ra1854241453"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <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-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ac3049896 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Data Displays/Avatar/Features Disabled 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
+              aria-disabled="true"
+              class="is_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-bg--disable93739269 _width-48px _height-48px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+              data-disable-theme="true"
+            >
+              <span
+                class="_dsp_contents"
+              >
+                <div
+                  class="css-view-g5y9jx r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010 is_Image "
+                  style="height: 100%; width: 100%;"
+                >
+                  <div
+                    class="css-view-g5y9jx r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
+                    style="background-image: url("test-file-stub");"
+                  />
+                  <img
+                    alt=""
+                    class="css-accessibilityImage-9pa8cd"
+                    draggable="false"
+                    src="test-file-stub"
+                  />
+                </div>
+              </span>
+              <div
+                class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _pos-absolute _width-10037 _height-10037 _backgroundColor-bg--base--m757972454 _o-0--5"
+              />
+            </div>
+            <div
+              aria-disabled="true"
+              class="is_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-bg--disable93739269 _width-48px _height-48px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <span
+                aria-disabled="true"
+                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-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--di396036745 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+            <div
+              aria-disabled="true"
+              class="is_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-bg--disable93739269 _width-48px _height-48px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+              data-disable-theme="true"
+              src="https://i.pravatar.cc/150?img=5"
+            >
+              <span
+                class="_dsp_contents"
+              >
+                <div
+                  class="css-view-g5y9jx r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010 is_Image "
+                  style="height: 100%; width: 100%;"
+                >
+                  <div
+                    class="css-view-g5y9jx r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
+                    style="background-image: url("https://i.pravatar.cc/150?img=5");"
+                  />
+                  <img
+                    alt=""
+                    class="css-accessibilityImage-9pa8cd"
+                    draggable="false"
+                    src="https://i.pravatar.cc/150?img=5"
+                  />
+                </div>
+              </span>
+              <div
+                class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _pos-absolute _width-10037 _height-10037 _backgroundColor-bg--base--m757972454 _o-0--5"
+              />
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Data Displays/Avatar/Features DisabledShapes 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
+              aria-disabled="true"
+              class="is_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-bg--disable93739269 _width-48px _height-48px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <span
+                aria-disabled="true"
+                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-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--di396036745 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+            <div
+              aria-disabled="true"
+              class="is_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-bg--disable93739269 _width-48px _height-48px _btlr-t-radius-ra1854241453 _btrr-t-radius-ra1854241453 _bbrr-t-radius-ra1854241453 _bblr-t-radius-ra1854241453"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <span
+                aria-disabled="true"
+                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-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--di396036745 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Data Displays/Avatar/Features Placeholder 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_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-48px _height-48px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+            data-disable-theme="true"
+          >
+            <span
+              class="_dsp_contents"
+            >
+              <div
+                class="css-view-g5y9jx r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010 is_Image "
+                style="height: 100%; width: 100%;"
+              >
+                <div
+                  class="css-view-g5y9jx r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
+                  style="background-image: url("test-file-stub");"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="test-file-stub"
+                />
+              </div>
+            </span>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Data Displays/Avatar/Features Responsive 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_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa1366020313"
+          >
+            <div
+              class="is_Avatar _width-_medium_48px _height-_medium_48px _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-32px _height-32px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <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-labe105292 _lh-f-lineHeigh1842530171 _ls-f-letterSpa379059034 _fw-f-weight-se1074390495 _col-content--ac3049896 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+            <div
+              class="is_Avatar _btlr-_medium_t-radius-ra1854241453 _btrr-_medium_t-radius-ra1854241453 _bbrr-_medium_t-radius-ra1854241453 _bblr-_medium_t-radius-ra1854241453 _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-48px _height-48px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <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-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ac3049896 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Data Displays/Avatar/Features Shapes 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_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-48px _height-48px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <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-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ac3049896 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+            <div
+              class="is_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-48px _height-48px _btlr-t-radius-ra1854241453 _btrr-t-radius-ra1854241453 _bbrr-t-radius-ra1854241453 _bblr-t-radius-ra1854241453"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <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-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ac3049896 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Data Displays/Avatar/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_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-32px _height-32px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <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-labe105292 _lh-f-lineHeigh1842530171 _ls-f-letterSpa379059034 _fw-f-weight-se1074390495 _col-content--ac3049896 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+            <div
+              class="is_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-40px _height-40px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <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-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ac3049896 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+            <div
+              class="is_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-48px _height-48px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <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-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ac3049896 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+            <div
+              class="is_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-64px _height-64px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+              data-disable-theme="true"
+              firstname="John"
+              lastname="Doe"
+            >
+              <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-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ac3049896 _textAlign-left"
+              >
+                JD
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Data Displays/Avatar/Features WithImage 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_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-48px _height-48px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+            data-disable-theme="true"
+            src="https://i.pravatar.cc/150?img=5"
+          >
+            <span
+              class="_dsp_contents"
+            >
+              <div
+                class="css-view-g5y9jx r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010 is_Image "
+                style="height: 100%; width: 100%;"
+              >
+                <div
+                  class="css-view-g5y9jx r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
+                  style="background-image: url("https://i.pravatar.cc/150?img=5");"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="https://i.pravatar.cc/150?img=5"
+                />
+              </div>
+            </span>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Data Displays/Avatar/Features WithInitials 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_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-48px _height-48px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+            data-disable-theme="true"
+            firstname="John"
+            lastname="Doe"
+          >
+            <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-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ac3049896 _textAlign-left"
+            >
+              JD
+            </span>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/system/dataDisplays/Avatar/__snapshots_web__/Avatar.stories.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Data Displays/Avatar 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_Avatar _dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _ox-hidden _oy-hidden _backgroundColor-avatar--bg _width-48px _height-48px _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+            data-disable-theme="true"
+            firstname="John"
+            lastname="Doe"
+          >
+            <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-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ac3049896 _textAlign-left"
+            >
+              JD
+            </span>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/system/dataDisplays/Avatar/components/AvatarImage.tsx

@@ -0,0 +1,34 @@
+import { styled } from '@tamagui/core';
+import type { ReactNode } from 'react';
+import { Image } from '../../../core/primitives/Image/Image';
+import { View } from '../../../core/primitives/View';
+import type { AvatarProps } from '../Avatar';
+import { context } from '../context';
+
+export type AvatarImageProps = Required<Pick<AvatarProps, 'src'>>;
+
+const StyledAvatarImage = styled(Image, {
+  width: '100%',
+  height: '100%',
+  objectFit: 'contain',
+  alt: '',
+});
+
+const DisabledOverlay = styled(View, {
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  backgroundColor: '$bg.base.mid.default',
+  opacity: 0.5,
+});
+
+export function AvatarImage({ src }: AvatarImageProps): ReactNode {
+  const { disabled } = context.useStyledContext();
+
+  return (
+    <>
+      <StyledAvatarImage src={src} />
+      {disabled ? <DisabledOverlay /> : null}
+    </>
+  );
+}