@altinn/altinn-components 0.35.5 → 0.35.7

package/dist/assets/TimelineHeader.css

@@ -1 +1 @@
-._header_ffjwj_1{width:100%;display:flex;align-items:center;column-gap:.5rem;min-height:1.5rem}._sidebar_ffjwj_9{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:.375rem}._content_ffjwj_18{flex-grow:1;display:flex;flex-direction:column}
+._header_177gq_1{width:100%;display:flex;align-items:center;column-gap:.5rem;min-height:1.5rem}._sidebar_177gq_9{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:.375rem;width:2.25rem}._content_177gq_19{flex-grow:1;display:flex;flex-direction:column}

package/dist/components/ActivityLog/ActivityLog.js

@@ -1,10 +1,10 @@
 "use client";
-import { jsxs as g, jsx as e } from "react/jsx-runtime";
-import { useState as f, createElement as u } from "react";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as f, createElement as m } from "react";
 import "../../index-L8X2o7IH.js";
-import { Button as h } from "../Button/Button.js";
+import { Button as u } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { Timeline as m } from "../Timeline/Timeline.js";
+import { Timeline as h } from "../Timeline/Timeline.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Section as y } from "../Page/Section.js";
@@ -17,12 +17,12 @@ const b = ({
 }) => {
   if (!(o != null && o.length))
     return null;
-  const [n, p] = f(!1), c = () => {
-    p((r) => !r);
-  }, d = t ? o.slice(0, t) : o, s = n ? o : d, a = t && o.length > t;
-  return /* @__PURE__ */ g(y, { spacing: 4, children: [
-    /* @__PURE__ */ e(m, { children: s.map((r) => /* @__PURE__ */ u(v, { ...r, key: r.id })) }),
-    a && /* @__PURE__ */ e(h, { variant: "outline", onClick: c, children: n ? l : i })
+  const [r, c] = f(!1), p = () => {
+    c((n) => !n);
+  }, d = t ? o.slice(0, t) : o, g = r ? o : d, s = t && o.length > t;
+  return /* @__PURE__ */ a(y, { spacing: 4, children: [
+    /* @__PURE__ */ e(h, { children: g.map((n) => /* @__PURE__ */ m(v, { ...n, key: "activitylog-segment-" + n.id })) }),
+    s && /* @__PURE__ */ e(u, { variant: "outline", onClick: p, children: r ? l : i })
   ] });
 };
 export {

package/dist/components/ActivityLog/ActivityLogSegment.js

@@ -7,10 +7,10 @@ import { Typography as l } from "../Typography/Typography.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { ActivityLogItem as y } from "./ActivityLogItem.js";
-const T = ({ id: i, items: r, datetime: p, byline: m, children: e, summary: o }) => /* @__PURE__ */ n(f, { datetime: p, byline: m, spacing: 2, id: i, children: [
-  o && /* @__PURE__ */ c(l, { children: o }),
+const T = ({ id: i, items: o, datetime: m, byline: p, children: e, summary: r }) => /* @__PURE__ */ n(f, { datetime: m, byline: p, spacing: 2, id: i, children: [
+  r && /* @__PURE__ */ c(l, { children: r }),
   e,
-  r == null ? void 0 : r.map((t) => /* @__PURE__ */ g(y, { ...t, key: t.id }))
+  o == null ? void 0 : o.map((t) => /* @__PURE__ */ g(y, { ...t, key: "activity-log-item" + t.id }))
 ] });
 export {
   T as ActivityLogSegment

package/dist/components/Avatar/Avatar.js

@@ -1,61 +1,58 @@
 "use client";
-import { jsx as e, 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 = ({
+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 = ({
   type: a = "person",
   size: i,
   name: o = "Avatar",
   outline: n = !1,
-  imageUrl: t,
+  imageUrl: e,
   imageUrlAlt: m,
   customLabel: p,
   loading: l,
   className: d,
-  style: c = {},
-  innerContainerStyle: h = {},
-  avatarImageStyle: u = {}
+  style: c = {}
 }) => {
-  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(), s = t && !v, x = !l && !s ? {
+  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 ? {
     ...c,
-    backgroundColor: k,
-    color: b
+    backgroundColor: f,
+    color: g
   } : c;
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: C(r.avatar, { [r.outline]: n }, d),
-      style: x,
-      "data-variant": f,
+      className: x(r.avatar, { [r.outline]: n }, d),
+      style: b,
+      "data-variant": v,
       "data-size": i,
       "data-outline": n,
       "aria-hidden": !0,
-      children: /* @__PURE__ */ y(j, { loading: l, className: r.shape, variant: "circle", children: [
-        /* @__PURE__ */ e("div", { className: r.shape, style: s ? h : {}, children: s && /* @__PURE__ */ e(
+      children: /* @__PURE__ */ N(S, { loading: l, className: r.shape, variant: "circle", children: [
+        /* @__PURE__ */ s("div", { className: r.shape, children: t && /* @__PURE__ */ s(
           "img",
           {
-            src: t,
+            src: e,
             className: r.image,
-            alt: m || t,
-            style: u,
+            alt: m || e,
             onError: () => {
-              _(!0);
+              u(!0);
             }
           }
         ) }),
-        !s && /* @__PURE__ */ e("span", { className: r.label, children: p || N })
+        !t && /* @__PURE__ */ s("span", { className: r.label, children: p || k })
       ] })
     }
   );
 };
 export {
-  F as Avatar,
-  D as isAvatarProps
+  B as Avatar,
+  w as isAvatarProps
 };

package/dist/components/Byline/Byline.js

@@ -4,37 +4,28 @@ import "react";
 import { Avatar as _ } from "../Avatar/Avatar.js";
 import { AvatarGroup as v } from "../Avatar/AvatarGroup.js";
 import "../RootProvider/RootProvider.js";
-import { Skeleton as l } from "../Skeleton/Skeleton.js";
+import { Skeleton as c } 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", h = "_avatarGroup_zacbk_11", u = "_label_zacbk_19", t = {
+import '../../assets/Byline.css';const d = "_byline_zacbk_1", y = "_avatar_zacbk_7", k = "_avatarGroup_zacbk_11", u = "_label_zacbk_19", t = {
   byline: d,
   avatar: y,
-  avatarGroup: h,
+  avatarGroup: k,
   label: u
-}, A = ({
-  loading: n,
-  color: i = "neutral",
-  size: e = "xs",
-  avatar: r,
-  avatarGroup: o,
-  datetime: m,
-  children: c,
-  as: s,
+}, S = ({
+  loading: l,
+  color: m = "neutral",
+  size: r = "xs",
+  avatar: o,
+  avatarGroup: e,
+  datetime: n,
+  children: s,
+  as: i,
   ...p
-}) => /* @__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 }) })
+}) => /* @__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 }) })
 ] });
 export {
-  A as Byline
+  S as Byline
 };

package/dist/components/Dialog/DialogList.js

@@ -1,14 +1,14 @@
-import { jsx as l } from "react/jsx-runtime";
-import { createElement as t } from "react";
+import { jsx as f } from "react/jsx-runtime";
+import { createElement as r } from "react";
 import "../../index-L8X2o7IH.js";
 import { useMenu as y } from "../../hooks/useMenu.js";
 import "../RootProvider/RootProvider.js";
-import { DialogListGroup as u } from "./DialogListGroup.js";
-import { DialogListItem as d } from "./DialogListItem.js";
+import { DialogListGroup as d } from "./DialogListGroup.js";
+import { DialogListItem as g } from "./DialogListItem.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as g } from "../Page/Section.js";
-const v = ({ items: i, groups: m = {}, sortGroupBy: e, isLoading: p }) => {
+import { Section as u } from "../Page/Section.js";
+const v = ({ items: i, groups: m = {}, sortGroupBy: e, isLoading: s }) => {
   const { menu: o } = y({
     items: i,
     groups: m,
@@ -16,11 +16,11 @@ const v = ({ items: i, groups: m = {}, sortGroupBy: e, isLoading: p }) => {
     keyboardEvents: !1,
     sortGroupBy: e
   });
-  return /* @__PURE__ */ l(g, { spacing: 3, margin: "section", "aria-busy": p, children: o == null ? void 0 : o.map((r, s) => {
-    const n = r.props || {};
-    return /* @__PURE__ */ t(u, { ...n, key: s }, r == null ? void 0 : r.items.map((a, c) => {
-      const f = a.props || {};
-      return /* @__PURE__ */ t(d, { ...f, key: c });
+  return /* @__PURE__ */ f(u, { spacing: 3, margin: "section", "aria-busy": s, children: o == null ? void 0 : o.map((t, p) => {
+    const a = t.props || {};
+    return /* @__PURE__ */ r(d, { ...a, key: "dialog-list-item" + p }, t == null ? void 0 : t.items.map((n, l) => {
+      const c = n.props || {};
+      return /* @__PURE__ */ r(g, { ...c, key: "dialog-list-item" + l });
     }));
   }) });
 };

package/dist/components/Timeline/TimelineHeader.js

@@ -8,14 +8,14 @@ import { TimelineIcon as l } from "./TimelineIcon.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as d } from "../Page/Flex.js";
-import '../../assets/TimelineHeader.css';const f = "_header_ffjwj_1", p = "_sidebar_ffjwj_9", h = "_content_ffjwj_18", r = {
-  header: f,
-  sidebar: p,
-  content: h
-}, g = ({ as: t = "li", loading: i, color: o, icon: s, children: n }) => /* @__PURE__ */ m(d, { as: t, className: r.header, color: o, children: [
+import '../../assets/TimelineHeader.css';const p = "_header_177gq_1", h = "_sidebar_177gq_9", _ = "_content_177gq_19", r = {
+  header: p,
+  sidebar: h,
+  content: _
+}, T = ({ as: t = "li", loading: i, color: o, icon: s, children: n }) => /* @__PURE__ */ m(d, { as: t, className: r.header, color: o, children: [
   /* @__PURE__ */ e("aside", { className: r.sidebar, children: /* @__PURE__ */ e(c, { variant: "circle", loading: i, children: /* @__PURE__ */ e(l, { icon: s, theme: "base", size: "lg" }) }) }),
   /* @__PURE__ */ e("div", { className: r.content, children: /* @__PURE__ */ e(a, { loading: i, size: "lg", children: n }) })
 ] });
 export {
-  g as TimelineHeader
+  T as TimelineHeader
 };

package/dist/components/Timeline/TimelineIcon.js

@@ -1,27 +1,20 @@
-import { jsx as o } from "react/jsx-runtime";
-import { isValidElement as n } from "react";
-import { Icon as e, isIconProps as p } from "../Icon/Icon.js";
+import { jsx as t } from "react/jsx-runtime";
+import { isValidElement as p } from "react";
+import { Icon as s, isIconProps as n } from "../Icon/Icon.js";
 import "../../index-L8X2o7IH.js";
 import { isAvatarProps as l, Avatar as f } from "../Avatar/Avatar.js";
-import { isAvatarGroupProps as g, AvatarGroup as u } from "../Avatar/AvatarGroup.js";
+import { isAvatarGroupProps as c, AvatarGroup as u } from "../Avatar/AvatarGroup.js";
 import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { S as c } from "../../XMark-DIqxCTTQ.js";
-import '../../assets/TimelineIcon.css';const d = "_icon_13w5g_1", a = {
-  icon: d
+import { S as d } from "../../XMark-DIqxCTTQ.js";
+import '../../assets/TimelineIcon.css';const g = "_icon_13w5g_1", a = {
+  icon: g
 };
-function h(t) {
-  return typeof t == "string" || typeof t == "number" || typeof t == "boolean" || t === null || n(t);
+function v(o) {
+  return typeof o == "string" || typeof o == "number" || typeof o == "boolean" || o === null || p(o);
 }
-const _ = ({ loading: t, size: m, color: s, theme: i, icon: r }) => r ? t ? /* @__PURE__ */ o(e, { className: a.icon, svgElement: c, loading: !0 }) : /* @__PURE__ */ o("div", { className: a.icon, "data-color": s, "data-size": m, children: l(r) && /* @__PURE__ */ o(
-  f,
-  {
-    ...r,
-    innerContainerStyle: { width: "unset", height: "1em" },
-    avatarImageStyle: { height: "1.75rem", width: "auto", marginTop: "0.25rem" }
-  }
-) || g(r) && /* @__PURE__ */ o(u, { ...r, className: a.avatarGroup }) || p(r) && /* @__PURE__ */ o(e, { ...r, theme: i }) || h(r) && r || /* @__PURE__ */ o(e, { theme: i, svgElement: r }) }) : null;
+const S = ({ loading: o, size: i, color: e, theme: m, icon: r }) => r ? o ? /* @__PURE__ */ t(s, { className: a.icon, svgElement: d, loading: !0 }) : /* @__PURE__ */ t("div", { className: a.icon, "data-color": e, "data-size": i, children: l(r) && /* @__PURE__ */ t(f, { ...r }) || c(r) && /* @__PURE__ */ t(u, { ...r, className: a.avatarGroup }) || n(r) && /* @__PURE__ */ t(s, { ...r, theme: m }) || v(r) && r || /* @__PURE__ */ t(s, { theme: m, svgElement: r }) }) : null;
 export {
-  _ as TimelineIcon
+  S as TimelineIcon
 };

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

@@ -25,13 +25,9 @@ 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, avatarImageStyle, }: AvatarProps) => ReactElement;
+export declare const Avatar: ({ type, size, name, outline, imageUrl, imageUrlAlt, customLabel, loading, className, style, }: 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, avatarImageStyle, }: AvatarProps) => React.ReactElement;
+    component: ({ type, size, name, outline, imageUrl, imageUrlAlt, customLabel, loading, className, style, }: AvatarProps) => React.ReactElement;
     tags: string[];
     parameters: {
         layout: string;

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

@@ -43,5 +43,4 @@ export declare const Loading: Story;
 export declare const Summary: Story;
 export declare const ExtendedContent: Story;
 export declare const WithAttachments: Story;
-export declare const WithWideLogo: Story;
 export declare const WithActions: Story;

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

@@ -28,8 +28,6 @@ declare const meta: {
         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;

package/package.json

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