@altinn/altinn-components 0.51.5 → 0.52.1

package/dist/assets/Avatar.css

@@ -1 +1 @@
-._avatar_1en7r_1{position:relative;overflow:hidden;box-sizing:border-box}._avatar_1en7r_1[data-shape=circle]{border-radius:50%}._avatar_1en7r_1[data-shape=square]{border-radius:5%}._avatar_1en7r_1{outline:1px solid #ffffff;box-sizing:border-box}._shape_1en7r_20{display:block;font-size:1em;width:1em;height:1em}._shape_1en7r_20[data-variant=outline]{border:1px solid}._label_1en7r_31{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;overflow:hidden;font-size:.575em}._image_1en7r_41{display:block;width:100%;height:100%}._deletedIcon_1en7r_47{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}@supports (-webkit-hyphens: none){._avatar_1en7r_1[data-size=lg] ._label_1en7r_31{font-size:1.58rem}._avatar_1en7r_1[data-size=md] ._label_1en7r_31{font-size:1.15rem}._avatar_1en7r_1[data-size=sm] ._label_1en7r_31{font-size:.85rem}}
+._avatar_bmli3_1{position:relative;overflow:hidden;box-sizing:border-box}._avatar_bmli3_1[data-shape=circle]{border-radius:50%}._avatar_bmli3_1[data-shape=square]{border-radius:5%}._avatar_bmli3_1{outline:1px solid #ffffff;box-sizing:border-box}._shape_bmli3_20{display:block;font-size:1em;width:1em;height:1em}._shape_bmli3_20[data-variant=outline]{border:1px solid}._label_bmli3_31{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;overflow:hidden;font-size:.575em}._icon_bmli3_41{width:100%;height:100%;display:flex;justify-content:center;align-items:center}._svg_bmli3_49{width:75%;height:75%}._image_bmli3_54{display:block;width:100%;height:100%}._deletedIcon_bmli3_60{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}@supports (-webkit-hyphens: none){._avatar_bmli3_1[data-size=lg] ._label_bmli3_31{font-size:1.58rem}._avatar_bmli3_1[data-size=md] ._label_bmli3_31{font-size:1.15rem}._avatar_bmli3_1[data-size=sm] ._label_bmli3_31{font-size:.85rem}}

package/dist/components/Avatar/Avatar.js

@@ -1,62 +1,85 @@
 "use client";
-import { jsx as a, jsxs as j } from "react/jsx-runtime";
-import { c as y } from "../../index-L8X2o7IH.js";
-import { useState as A } from "react";
-import { Skeleton as E } from "../Skeleton/Skeleton.js";
-import { fromStringToColor as q } from "./color.js";
-import '../../assets/Avatar.css';const z = "_avatar_1en7r_1", B = "_shape_1en7r_20", H = "_label_1en7r_31", L = "_image_1en7r_41", M = "_deletedIcon_1en7r_47", r = {
-  avatar: z,
-  shape: B,
-  label: H,
-  image: L,
-  deletedIcon: M
-}, J = (e) => typeof e == "object" && e !== null && "name" in e, K = ({
+import { jsx as n, jsxs as v } from "react/jsx-runtime";
+import { c as E } from "../../index-L8X2o7IH.js";
+import m, { forwardRef as k, useState as A } from "react";
+import { Skeleton as R } from "../Skeleton/Skeleton.js";
+import { fromStringToColor as M } from "./color.js";
+import { u as P } from "../../useId-BVFxCjkq.js";
+import '../../assets/Avatar.css';var B = function(e, o) {
+  var l = {};
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && o.indexOf(t) < 0 && (l[t] = e[t]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var a = 0, t = Object.getOwnPropertySymbols(e); a < t.length; a++)
+      o.indexOf(t[a]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[a]) && (l[t[a]] = e[t[a]]);
+  return l;
+};
+const L = k((e, o) => {
+  var { title: l, titleId: t } = e, a = B(e, ["title", "titleId"]);
+  let s = P();
+  return s = l ? t || "title-" + s : void 0, m.createElement(
+    "svg",
+    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: o, "aria-labelledby": s }, a),
+    l ? m.createElement("title", { id: s }, l) : null,
+    m.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M8.25 7a3.75 3.75 0 0 0 2.43 3.51l-3.692 4.923a2.75 2.75 0 1 0 1.2.9l3.062-4.083v3.104a2.751 2.751 0 1 0 1.5 0V12.25l3.063 4.083a2.75 2.75 0 1 0 1.2-.9L13.32 10.51A3.751 3.751 0 0 0 12 3.25 3.75 3.75 0 0 0 8.25 7M12 4.75a2.25 2.25 0 0 0-.008 4.5h.015A2.25 2.25 0 0 0 12 4.75m0 12a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5m-6 0a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5m12 0a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5", clipRule: "evenodd" })
+  );
+}), T = "_avatar_bmli3_1", V = "_shape_bmli3_20", q = "_label_bmli3_31", z = "_icon_bmli3_41", H = "_svg_bmli3_49", D = "_image_bmli3_54", F = "_deletedIcon_bmli3_60", r = {
+  avatar: T,
+  shape: V,
+  label: q,
+  icon: z,
+  svg: H,
+  image: D,
+  deletedIcon: F
+}, X = (e) => typeof e == "object" && e !== null && "name" in e, Y = ({
   type: e = "person",
-  isParent: n,
-  isDeleted: m = !1,
-  size: h,
-  name: l = "Avatar",
-  shape: u,
-  color: g,
-  variant: _,
-  imageUrl: t,
-  imageUrlAlt: f,
-  customLabel: v,
-  loading: c,
-  className: b,
-  colorKey: C,
-  style: i = {}
+  isParent: o,
+  isDeleted: l = !1,
+  size: t,
+  name: a = "Avatar",
+  shape: s,
+  color: b,
+  variant: g,
+  imageUrl: d,
+  imageUrlAlt: _,
+  customLabel: w,
+  loading: p,
+  className: y,
+  colorKey: I,
+  style: f = {}
 }) => {
-  const [I, w] = A(!1), x = u || e === "person" ? "circle" : "square", N = g || e === "person" ? "light" : "dark";
-  let o = _;
-  e === "company" && typeof n == "boolean" && (o = n ? "solid" : "outline");
-  const { backgroundColor: p, foregroundColor: d } = q(C ?? l, N), k = (l[0] ?? "").toUpperCase(), s = t && !I, S = !c && !s ? {
-    ...i,
-    backgroundColor: o === "outline" ? d : p,
-    color: o === "outline" ? p : d
-  } : i;
-  return /* @__PURE__ */ a(
+  const [x, O] = A(!1), j = s || e === "person" ? "circle" : "square", C = b || e === "person" ? "light" : "dark";
+  let i = g;
+  e === "company" && typeof o == "boolean" && (i = o ? "solid" : "outline");
+  const { backgroundColor: u, foregroundColor: h } = M(I ?? a, C), N = (a[0] ?? "").toUpperCase(), c = d && !x, S = !p && !c ? {
+    ...f,
+    backgroundColor: i === "outline" ? h : u,
+    color: i === "outline" ? u : h
+  } : f;
+  return /* @__PURE__ */ n(
     "div",
     {
-      className: y(r.avatar, b),
+      className: E(r.avatar, y),
       style: S,
-      "data-shape": x,
-      "data-size": h,
+      "data-shape": j,
+      "data-size": t,
       "aria-hidden": !0,
-      children: /* @__PURE__ */ j(E, { loading: c, className: r.shape, variant: "circle", children: [
-        /* @__PURE__ */ a("div", { className: r.shape, "data-variant": o, children: s && /* @__PURE__ */ a(
-          "img",
-          {
-            src: t,
-            className: r.image,
-            alt: f || t,
-            onError: () => {
-              w(!0);
+      children: /* @__PURE__ */ v(R, { loading: p, className: r.shape, variant: "circle", children: [
+        /* @__PURE__ */ v("div", { className: r.shape, "data-variant": i, children: [
+          e !== "system" && c && /* @__PURE__ */ n(
+            "img",
+            {
+              src: d,
+              className: r.image,
+              alt: _ || d,
+              onError: () => {
+                O(!0);
+              }
             }
-          }
-        ) }),
-        !s && /* @__PURE__ */ a("span", { className: r.label, children: v || k }),
-        m && /* @__PURE__ */ a(
+          ),
+          e === "system" && !c && /* @__PURE__ */ n("span", { className: r.icon, children: /* @__PURE__ */ n(L, { className: r.svg }) })
+        ] }),
+        !c && e !== "system" && /* @__PURE__ */ n("span", { className: r.label, children: w || N }),
+        l && /* @__PURE__ */ n(
           "svg",
           {
             "aria-hidden": "true",
@@ -66,7 +89,7 @@ import '../../assets/Avatar.css';const z = "_avatar_1en7r_1", B = "_shape_1en7r_
             viewBox: "0 0 24 24",
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
-            children: /* @__PURE__ */ a("path", { d: "M0 24L24 -1.20156e-06", stroke: "currentColor" })
+            children: /* @__PURE__ */ n("path", { d: "M0 24L24 -1.20156e-06", stroke: "currentColor" })
           }
         )
       ] })
@@ -74,6 +97,6 @@ import '../../assets/Avatar.css';const z = "_avatar_1en7r_1", B = "_shape_1en7r_
   );
 };
 export {
-  K as Avatar,
-  J as isAvatarProps
+  Y as Avatar,
+  X as isAvatarProps
 };

package/dist/components/Dialog/SeenByLogItem.js

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

package/dist/components/Page/Breadcrumbs.js

@@ -22,7 +22,7 @@ const h = d((e, n) => {
     "svg",
     Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: n, "aria-labelledby": i }, l),
     r ? c.createElement("title", { id: i }, r) : null,
-    c.createElement("path", { fill: "currentColor", d: "M14.087 6.873a.75.75 0 0 1 .943.097l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H5a.75.75 0 0 1-.75-.74V12a.75.75 0 0 1 .75-.75h12.19l-3.22-3.22a.75.75 0 0 1 .117-1.157" })
+    c.createElement("path", { fill: "currentColor", d: "M14.088 6.873a.75.75 0 0 1 .942.097l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H5a.75.75 0 0 1-.75-.74V12a.75.75 0 0 1 .75-.75h12.19l-3.22-3.22a.75.75 0 0 1 .118-1.157" })
   );
 }), _ = "_list_tknjf_1", b = "_item_tknjf_12", g = "_icon_tknjf_18", a = {
   list: _,

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from 'react';
-export type AvatarType = 'company' | 'person' | 'custom';
+export type AvatarType = 'company' | 'person' | 'system' | 'custom';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarShape = 'square' | 'circle';
 export type AvatarColor = 'dark' | 'light';

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

@@ -44,5 +44,6 @@ export declare const Logo: Story;
 export declare const Loading: Story;
 export declare const Sizes: ({ type, name, imageUrl }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
 export declare const People: () => import("react/jsx-runtime").JSX.Element;
+export declare const SystemUsers: () => import("react/jsx-runtime").JSX.Element;
 export declare const Companies: () => import("react/jsx-runtime").JSX.Element;
 export declare const Logos: () => import("react/jsx-runtime").JSX.Element;

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

@@ -15,6 +15,13 @@ declare const meta: {
             seenAt: string;
             seenAtLabel: string;
             isEndUser?: undefined;
+        } | {
+            id: string;
+            type: "system";
+            name: string;
+            seenAt: string;
+            seenAtLabel: string;
+            isEndUser?: undefined;
         } | {
             id: string;
             type: "person";

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

@@ -7,8 +7,9 @@ export interface SeenByLogItemProps extends AvatarProps {
     endUserLabel?: string;
     badge?: BadgeProps;
     size?: 'sm' | 'md';
+    type?: AvatarProps['type'];
 }
 /**
  * SeenByLog item
  */
-export declare const SeenByLogItem: ({ name, seenAt, seenAtLabel, isEndUser, endUserLabel, size, }: SeenByLogItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SeenByLogItem: ({ name, seenAt, seenAtLabel, isEndUser, endUserLabel, size, type, }: SeenByLogItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ name, seenAt, seenAtLabel, isEndUser, endUserLabel, size, }: import('./SeenByLogItem').SeenByLogItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ name, seenAt, seenAtLabel, isEndUser, endUserLabel, size, type, }: import('./SeenByLogItem').SeenByLogItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -19,8 +19,8 @@ declare const meta: {
         endUserLabel?: string | undefined;
         badge?: import('..').BadgeProps | undefined;
         size?: "sm" | "md" | undefined;
-        name: string;
         type?: import('..').AvatarType | undefined;
+        name: string;
         isParent?: boolean | undefined;
         isDeleted?: boolean | undefined;
         shape?: import('..').AvatarColor | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.51.5",
+  "version": "0.52.1",
   "main": "dist/index.js",
   "files": [
     "dist/",
@@ -23,7 +23,7 @@
     "@digdir/designsystemet-css": "^1.0.6",
     "@digdir/designsystemet-react": "^1.0.6",
     "@digdir/designsystemet-theme": "^1.0.6",
-    "@navikt/aksel-icons": "^7.30.1",
+    "@navikt/aksel-icons": "^7.37.0",
     "@tanstack/react-virtual": "^3.13.9",
     "classnames": "^2.5.1",
     "react": "^19.1.0",