@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/avatar/__snapshots__/Avatar.test.tsx.snap

@@ -0,0 +1,681 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Avatar> Snapshots and structure should render story 'Clickable' 1`] = `
+[
+  <div
+    className="lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="avatar2"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar2.jpg"
+      loading="lazy"
+      onClick={[Function]}
+      size="l"
+      theme="light"
+    />
+  </div>,
+  <div
+    className="lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="avatar2"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar2.jpg"
+      linkProps={
+        {
+          "href": "https://example.com",
+        }
+      }
+      loading="lazy"
+      size="l"
+      theme="light"
+    />
+  </div>,
+  <div
+    className="lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="avatar2"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar2.jpg"
+      linkAs={[Function]}
+      loading="lazy"
+      size="l"
+      theme="light"
+    />
+  </div>,
+]
+`;
+
+exports[`<Avatar> Snapshots and structure should render story 'Sizes' 1`] = `
+[
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="xs"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar1.jpg"
+      loading="lazy"
+      size="xs"
+      theme="light"
+    />
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-s lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="s"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar1.jpg"
+      loading="lazy"
+      size="s"
+      theme="light"
+    />
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-m lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="m"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar1.jpg"
+      loading="lazy"
+      size="m"
+      theme="light"
+    />
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="l"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar1.jpg"
+      loading="lazy"
+      size="l"
+      theme="light"
+    />
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xl lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="xl"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar1.jpg"
+      loading="lazy"
+      size="xl"
+      theme="light"
+    />
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xxl lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="xxl"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar1.jpg"
+      loading="lazy"
+      size="xxl"
+      theme="light"
+    />
+  </div>,
+]
+`;
+
+exports[`<Avatar> Snapshots and structure should render story 'WithActions' 1`] = `
+[
+  <div
+    className="lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="xs"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar2.jpg"
+      loading="lazy"
+      size="xs"
+      theme="light"
+    />
+    <div
+      className="lumx-avatar__actions"
+    >
+      <FlexBox
+        gap="regular"
+        orientation="horizontal"
+        vAlign="center"
+      >
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
+          label="Edit"
+          size="s"
+          theme="light"
+        />
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
+          label="See"
+          size="s"
+          theme="light"
+        />
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
+          label="Delete"
+          size="s"
+          theme="light"
+        />
+      </FlexBox>
+    </div>
+  </div>,
+  <div
+    className="lumx-avatar lumx-avatar--size-s lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="s"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar2.jpg"
+      loading="lazy"
+      size="s"
+      theme="light"
+    />
+    <div
+      className="lumx-avatar__actions"
+    >
+      <FlexBox
+        gap="regular"
+        orientation="horizontal"
+        vAlign="center"
+      >
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
+          label="Edit"
+          size="s"
+          theme="light"
+        />
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
+          label="See"
+          size="s"
+          theme="light"
+        />
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
+          label="Delete"
+          size="s"
+          theme="light"
+        />
+      </FlexBox>
+    </div>
+  </div>,
+  <div
+    className="lumx-avatar lumx-avatar--size-m lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="m"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar2.jpg"
+      loading="lazy"
+      size="m"
+      theme="light"
+    />
+    <div
+      className="lumx-avatar__actions"
+    >
+      <FlexBox
+        gap="regular"
+        orientation="horizontal"
+        vAlign="center"
+      >
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
+          label="Edit"
+          size="s"
+          theme="light"
+        />
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
+          label="See"
+          size="s"
+          theme="light"
+        />
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
+          label="Delete"
+          size="s"
+          theme="light"
+        />
+      </FlexBox>
+    </div>
+  </div>,
+  <div
+    className="lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="l"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar2.jpg"
+      loading="lazy"
+      size="l"
+      theme="light"
+    />
+    <div
+      className="lumx-avatar__actions"
+    >
+      <FlexBox
+        gap="regular"
+        orientation="horizontal"
+        vAlign="center"
+      >
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
+          label="Edit"
+          size="s"
+          theme="light"
+        />
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
+          label="See"
+          size="s"
+          theme="light"
+        />
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
+          label="Delete"
+          size="s"
+          theme="light"
+        />
+      </FlexBox>
+    </div>
+  </div>,
+  <div
+    className="lumx-avatar lumx-avatar--size-xl lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="xl"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar2.jpg"
+      loading="lazy"
+      size="xl"
+      theme="light"
+    />
+    <div
+      className="lumx-avatar__actions"
+    >
+      <FlexBox
+        gap="regular"
+        orientation="horizontal"
+        vAlign="center"
+      >
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
+          label="Edit"
+          size="s"
+          theme="light"
+        />
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
+          label="See"
+          size="s"
+          theme="light"
+        />
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
+          label="Delete"
+          size="s"
+          theme="light"
+        />
+      </FlexBox>
+    </div>
+  </div>,
+  <div
+    className="lumx-avatar lumx-avatar--size-xxl lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="xxl"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar2.jpg"
+      loading="lazy"
+      size="xxl"
+      theme="light"
+    />
+    <div
+      className="lumx-avatar__actions"
+    >
+      <FlexBox
+        gap="regular"
+        orientation="horizontal"
+        vAlign="center"
+      >
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
+          label="Edit"
+          size="s"
+          theme="light"
+        />
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
+          label="See"
+          size="s"
+          theme="light"
+        />
+        <IconButton
+          emphasis="low"
+          hasBackground={true}
+          icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
+          label="Delete"
+          size="s"
+          theme="light"
+        />
+      </FlexBox>
+    </div>
+  </div>,
+]
+`;
+
+exports[`<Avatar> Snapshots and structure should render story 'WithBadge' 1`] = `
+[
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="xs"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar3.jpg"
+      loading="lazy"
+      size="xs"
+      theme="light"
+    />
+    <div
+      className="lumx-avatar__badge"
+    >
+      <Badge
+        color="blue"
+      >
+        <Icon
+          icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+        />
+      </Badge>
+    </div>
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-s lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="s"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar3.jpg"
+      loading="lazy"
+      size="s"
+      theme="light"
+    />
+    <div
+      className="lumx-avatar__badge"
+    >
+      <Badge
+        color="blue"
+      >
+        <Icon
+          icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+        />
+      </Badge>
+    </div>
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-m lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="m"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar3.jpg"
+      loading="lazy"
+      size="m"
+      theme="light"
+    />
+    <div
+      className="lumx-avatar__badge"
+    >
+      <Badge
+        color="blue"
+      >
+        <Icon
+          icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+        />
+      </Badge>
+    </div>
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="l"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar3.jpg"
+      loading="lazy"
+      size="l"
+      theme="light"
+    />
+    <div
+      className="lumx-avatar__badge"
+    >
+      <Badge
+        color="blue"
+      >
+        <Icon
+          icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+        />
+      </Badge>
+    </div>
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xl lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="xl"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar3.jpg"
+      loading="lazy"
+      size="xl"
+      theme="light"
+    />
+    <div
+      className="lumx-avatar__badge"
+    >
+      <Badge
+        color="blue"
+      >
+        <Icon
+          icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+        />
+      </Badge>
+    </div>
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xxl lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="xxl"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/avatar3.jpg"
+      loading="lazy"
+      size="xxl"
+      theme="light"
+    />
+    <div
+      className="lumx-avatar__badge"
+    >
+      <Badge
+        color="blue"
+      >
+        <Icon
+          icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+        />
+      </Badge>
+    </div>
+  </div>,
+]
+`;
+
+exports[`<Avatar> Snapshots and structure should render story 'WithRectangularImage' 1`] = `
+[
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="xs"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/portrait3.jpg"
+      loading="lazy"
+      size="xs"
+      theme="light"
+    />
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-s lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="s"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/portrait3.jpg"
+      loading="lazy"
+      size="s"
+      theme="light"
+    />
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-m lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="m"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/portrait3.jpg"
+      loading="lazy"
+      size="m"
+      theme="light"
+    />
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="l"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/portrait3.jpg"
+      loading="lazy"
+      size="l"
+      theme="light"
+    />
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xl lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="xl"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/portrait3.jpg"
+      loading="lazy"
+      size="xl"
+      theme="light"
+    />
+  </div>,
+  <div
+    className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xxl lumx-avatar--theme-light"
+  >
+    <Thumbnail
+      alt="xxl"
+      aspectRatio="square"
+      className="lumx-avatar__thumbnail"
+      fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
+      image="/demo-assets/portrait3.jpg"
+      loading="lazy"
+      size="xxl"
+      theme="light"
+    />
+  </div>,
+]
+`;

package/dist/src/components/avatar/index.ts

@@ -0,0 +1 @@
+export * from './Avatar';