@altinn/altinn-components 0.33.6 → 0.33.7

package/dist/components/Avatar/Avatar.js

@@ -1,15 +1,15 @@
 "use client";
-import { jsx as s, jsxs as x } from "react/jsx-runtime";
+import { jsx as s, jsxs as y } from "react/jsx-runtime";
 import { c as C } from "../../index-L8X2o7IH.js";
 import { useState as S } from "react";
 import { Skeleton as j } from "../Skeleton/Skeleton.js";
-import { fromStringToColor as y } from "./color.js";
-import '../../assets/Avatar.css';const A = "_avatar_1k073_1", E = "_shape_1k073_20", I = "_label_1k073_27", q = "_image_1k073_37", r = {
-  avatar: A,
-  shape: E,
-  label: I,
-  image: q
-}, B = (a) => typeof a == "object" && a !== null && "name" in a, D = ({
+import { fromStringToColor as A } from "./color.js";
+import '../../assets/Avatar.css';const E = "_avatar_1k073_1", I = "_shape_1k073_20", q = "_label_1k073_27", z = "_image_1k073_37", r = {
+  avatar: E,
+  shape: I,
+  label: q,
+  image: z
+}, D = (a) => typeof a == "object" && a !== null && "name" in a, F = ({
   type: a = "person",
   size: i,
   name: o = "Avatar",
@@ -20,40 +20,42 @@ import '../../assets/Avatar.css';const A = "_avatar_1k073_1", E = "_shape_1k073_
   loading: l,
   className: d,
   style: c = {},
-  innerContainerStyle: h = {}
+  innerContainerStyle: h = {},
+  avatarImageStyle: u = {}
 }) => {
-  const [u, v] = S(!1), _ = a === "person" ? "circle" : "square", f = a === "person" ? "light" : "dark", { backgroundColor: g, foregroundColor: k } = y(o, f), b = (o[0] ?? "").toUpperCase(), t = e && !u, N = !l && !t ? {
+  const [v, _] = S(!1), f = a === "person" ? "circle" : "square", g = a === "person" ? "light" : "dark", { backgroundColor: k, foregroundColor: b } = A(o, g), N = (o[0] ?? "").toUpperCase(), t = e && !v, x = !l && !t ? {
     ...c,
-    backgroundColor: g,
-    color: k
+    backgroundColor: k,
+    color: b
   } : c;
   return /* @__PURE__ */ s(
     "div",
     {
       className: C(r.avatar, { [r.outline]: n }, d),
-      style: N,
-      "data-variant": _,
+      style: x,
+      "data-variant": f,
       "data-size": i,
       "data-outline": n,
       "aria-hidden": !0,
-      children: /* @__PURE__ */ x(j, { loading: l, className: r.shape, variant: "circle", children: [
+      children: /* @__PURE__ */ y(j, { loading: l, className: r.shape, variant: "circle", children: [
         /* @__PURE__ */ s("div", { className: r.shape, style: h, children: t && /* @__PURE__ */ s(
           "img",
           {
             src: e,
             className: r.image,
             alt: m || e,
+            style: u,
             onError: () => {
-              v(!0);
+              _(!0);
             }
           }
         ) }),
-        !t && /* @__PURE__ */ s("span", { className: r.label, children: p || b })
+        !t && /* @__PURE__ */ s("span", { className: r.label, children: p || N })
       ] })
     }
   );
 };
 export {
-  D as Avatar,
-  B as isAvatarProps
+  F as Avatar,
+  D as isAvatarProps
 };

package/dist/components/Byline/Byline.js

@@ -7,33 +7,34 @@ import "../RootProvider/RootProvider.js";
 import { Skeleton as l } from "../Skeleton/Skeleton.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/Byline.css';const d = "_byline_zacbk_1", y = "_avatar_zacbk_7", f = "_avatarGroup_zacbk_11", k = "_label_zacbk_19", t = {
+import '../../assets/Byline.css';const d = "_byline_zacbk_1", y = "_avatar_zacbk_7", h = "_avatarGroup_zacbk_11", u = "_label_zacbk_19", t = {
   byline: d,
   avatar: y,
-  avatarGroup: f,
-  label: k
-}, w = ({
+  avatarGroup: h,
+  label: u
+}, A = ({
   loading: n,
   color: i = "neutral",
-  size: r = "xs",
-  avatar: e,
+  size: e = "xs",
+  avatar: r,
   avatarGroup: o,
-  datetime: c,
-  children: m,
+  datetime: m,
+  children: c,
   as: s,
   ...p
-}) => /* @__PURE__ */ b(s || "div", { ...p, className: t.byline, "data-color": i, "data-size": r, children: [
-  (o || e) && /* @__PURE__ */ a(l, { variant: "circle", className: t.avatar, loading: n, children: o ? /* @__PURE__ */ a(v, { ...o, size: r, className: t.avatarGroup }) : e && /* @__PURE__ */ a(
+}) => /* @__PURE__ */ b(s || "div", { ...p, className: t.byline, "data-color": i, "data-size": e, children: [
+  (o || r) && /* @__PURE__ */ a(l, { variant: "circle", className: t.avatar, loading: n, children: o ? /* @__PURE__ */ a(v, { ...o, size: e, className: t.avatarGroup }) : r && /* @__PURE__ */ a(
     _,
     {
-      ...e,
-      size: r,
+      ...r,
+      size: e,
       className: t.avatar,
-      innerContainerStyle: { width: "fit-content" }
+      innerContainerStyle: { width: "fit-content" },
+      avatarImageStyle: { height: "1em", width: "auto" }
     }
   ) }),
-  /* @__PURE__ */ a("time", { "data-size": r, dateTime: c, className: t.label, children: /* @__PURE__ */ a(l, { loading: n, children: m }) })
+  /* @__PURE__ */ a("time", { "data-size": e, dateTime: m, className: t.label, children: /* @__PURE__ */ a(l, { loading: n, children: c }) })
 ] });
 export {
-  w as Byline
+  A as Byline
 };

package/dist/types/lib/components/Avatar/Avatar.d.ts

@@ -25,10 +25,13 @@ export interface AvatarProps {
     style?: CSSProperties;
     /** Whether the avatar is loading. */
     loading?: boolean;
+    /** Avatar image container styles */
     innerContainerStyle?: CSSProperties;
+    /** Avatar image inner styles */
+    avatarImageStyle?: CSSProperties;
 }
 export declare const isAvatarProps: (icon: unknown) => icon is AvatarProps;
 /**
  * Avatar component to display user or company avatars with various customization options.
  */
-export declare const Avatar: ({ type, size, name, outline, imageUrl, imageUrlAlt, customLabel, loading, className, style, innerContainerStyle, }: AvatarProps) => ReactElement;
+export declare const Avatar: ({ type, size, name, outline, imageUrl, imageUrlAlt, customLabel, loading, className, style, innerContainerStyle, avatarImageStyle, }: AvatarProps) => ReactElement;

package/dist/types/lib/components/Avatar/Avatar.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { AvatarProps } from '..';
 declare const meta: {
     title: string;
-    component: ({ type, size, name, outline, imageUrl, imageUrlAlt, customLabel, loading, className, style, innerContainerStyle, }: AvatarProps) => React.ReactElement;
+    component: ({ type, size, name, outline, imageUrl, imageUrlAlt, customLabel, loading, className, style, innerContainerStyle, avatarImageStyle, }: AvatarProps) => React.ReactElement;
     tags: string[];
     parameters: {
         layout: string;

package/dist/types/lib/components/Dialog/SeenByLogItem.stories.d.ts

@@ -29,6 +29,7 @@ declare const meta: {
         style?: React.CSSProperties | undefined;
         loading?: boolean | undefined;
         innerContainerStyle?: React.CSSProperties | undefined;
+        avatarImageStyle?: React.CSSProperties | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.33.6",
+  "version": "0.33.7",
   "main": "dist/index.js",
   "files": [
     "dist/",