@altinn/altinn-components 0.33.5 → 0.33.7

package/dist/components/Avatar/Avatar.js

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

package/dist/components/Byline/Byline.js

@@ -4,28 +4,37 @@ import "react";
 import { Avatar as _ } from "../Avatar/Avatar.js";
 import { AvatarGroup as v } from "../Avatar/AvatarGroup.js";
 import "../RootProvider/RootProvider.js";
-import { Skeleton as c } from "../Skeleton/Skeleton.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", k = "_avatarGroup_zacbk_11", u = "_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: k,
+  avatarGroup: h,
   label: u
-}, S = ({
-  loading: l,
-  color: m = "neutral",
-  size: r = "xs",
-  avatar: o,
-  avatarGroup: e,
-  datetime: n,
-  children: s,
-  as: i,
+}, A = ({
+  loading: n,
+  color: i = "neutral",
+  size: e = "xs",
+  avatar: r,
+  avatarGroup: o,
+  datetime: m,
+  children: c,
+  as: s,
   ...p
-}) => /* @__PURE__ */ b(i || "div", { ...p, className: t.byline, "data-color": m, "data-size": r, children: [
-  (e || o) && /* @__PURE__ */ a(c, { variant: "circle", className: t.avatar, loading: l, children: e ? /* @__PURE__ */ a(v, { ...e, size: r, className: t.avatarGroup }) : o && /* @__PURE__ */ a(_, { ...o, size: r, className: t.avatar }) }),
-  /* @__PURE__ */ a("time", { "data-size": r, dateTime: n, className: t.label, children: /* @__PURE__ */ a(c, { loading: l, children: s }) })
+}) => /* @__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(
+    _,
+    {
+      ...r,
+      size: e,
+      className: t.avatar,
+      innerContainerStyle: { width: "fit-content" },
+      avatarImageStyle: { height: "1em", width: "auto" }
+    }
+  ) }),
+  /* @__PURE__ */ a("time", { "data-size": e, dateTime: m, className: t.label, children: /* @__PURE__ */ a(l, { loading: n, children: c }) })
 ] });
 export {
-  S as Byline
+  A as Byline
 };

package/dist/components/Dialog/SeenByLogItem.js

@@ -1,4 +1,4 @@
-import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import { Badge as s } from "../Badge/Badge.js";
@@ -7,15 +7,15 @@ import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as l } from "../Page/Flex.js";
-const j = ({ name: r, seenAt: i, seenAtLabel: m, isEndUser: n, endUserLabel: p }) => {
+const j = ({ name: r, seenAt: o, seenAtLabel: m, isEndUser: n, endUserLabel: p }) => {
   const t = n && { label: p };
-  return /* @__PURE__ */ e(l, { align: "center", spacing: 2, children: [
-    /* @__PURE__ */ e(a, { size: "sm", datetime: i, avatar: { name: r, type: "person" }, children: [
-      /* @__PURE__ */ o("strong", { children: r + "," }),
+  return /* @__PURE__ */ e(l, { align: "center", spacing: 2, as: "li", children: [
+    /* @__PURE__ */ e(a, { size: "sm", datetime: o, avatar: { name: r, type: "person" }, children: [
+      /* @__PURE__ */ i("strong", { children: r + "," }),
       " ",
       m
     ] }),
-    t && /* @__PURE__ */ o(s, { variant: "subtle", ...t })
+    t && /* @__PURE__ */ i(s, { variant: "subtle", ...t })
   ] });
 };
 export {

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

@@ -25,9 +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, }: 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, }: 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

@@ -11,6 +11,26 @@ declare const meta: {
         seenAt: string;
         seenAtLabel: string;
     };
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react-vite').ReactRenderer, {
+        id: string;
+        seenAt: string;
+        seenAtLabel: string;
+        isEndUser?: boolean | undefined;
+        endUserLabel?: string | undefined;
+        badge?: import('..').BadgeProps | undefined;
+        name: string;
+        type?: import('..').AvatarType | undefined;
+        size?: import('..').AvatarSize | undefined;
+        className?: string | undefined;
+        imageUrl?: string | undefined;
+        imageUrlAlt?: string | undefined;
+        outline?: boolean | undefined;
+        customLabel?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        loading?: boolean | undefined;
+        innerContainerStyle?: React.CSSProperties | undefined;
+        avatarImageStyle?: React.CSSProperties | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/package.json

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