@altinn/altinn-components 0.51.5 → 0.52.0

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,86 @@
 "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 u } from "react/jsx-runtime";
+import { c as H } from "../../index-L8X2o7IH.js";
+import m, { forwardRef as N, useState as A } from "react";
+import { Skeleton as k } from "../Skeleton/Skeleton.js";
+import { fromStringToColor as M } from "./color.js";
+import { u as R } from "../../useId-BVFxCjkq.js";
+import '../../assets/Avatar.css';var z = 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 q = N((e, o) => {
+  var { title: l, titleId: t } = e, a = z(e, ["title", "titleId"]);
+  let s = R();
+  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", d: "M8.22 13.72a.75.75 0 0 1 1.06 0l.029.025q.041.039.132.111c.122.097.308.23.548.364a4.14 4.14 0 0 0 2.011.53 4.14 4.14 0 0 0 2.01-.53 4 4 0 0 0 .681-.475l.028-.025.057-.052a.751.751 0 0 1 1.056 1.056l-.052.056-.01.011-.018.017-.059.054a5.647 5.647 0 0 1-.954.668c-.642.357-1.58.72-2.739.72a5.64 5.64 0 0 1-2.74-.72 5.7 5.7 0 0 1-.748-.496 4 4 0 0 1-.205-.172q-.037-.032-.059-.054l-.018-.017-.01-.01a.75.75 0 0 1 0-1.061M9.5 9a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M14.5 9a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3" }),
+    m.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M12 .5a1.5 1.5 0 0 1 .75 2.798V5h5.5a.75.75 0 0 1 .75.75v3.5h2.24a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-.75.75H19v3.5a.75.75 0 0 1-.75.75H5.75a.75.75 0 0 1-.75-.75v-3.5H2.75A.75.75 0 0 1 2 14v-4a.75.75 0 0 1 .75-.75H5v-3.5A.75.75 0 0 1 5.75 5h5.5V3.298A1.498 1.498 0 0 1 12 .5m-5.5 17h11v-11h-11zm-3-4.25H5v-2.5H3.5zm15.5 0h1.49v-2.5H19z", clipRule: "evenodd" })
+  );
+}), P = "_avatar_bmli3_1", V = "_shape_bmli3_20", B = "_label_bmli3_31", L = "_icon_bmli3_41", T = "_svg_bmli3_49", D = "_image_bmli3_54", F = "_deletedIcon_bmli3_60", r = {
+  avatar: P,
+  shape: V,
+  label: B,
+  icon: L,
+  svg: T,
+  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), C = s || e === "person" ? "circle" : "square", S = b || e === "person" ? "light" : "dark";
+  let i = g;
+  e === "company" && typeof o == "boolean" && (i = o ? "solid" : "outline");
+  const { backgroundColor: v, foregroundColor: h } = M(I ?? a, S), j = (a[0] ?? "").toUpperCase(), c = d && !x, E = !p && !c ? {
+    ...f,
+    backgroundColor: i === "outline" ? h : v,
+    color: i === "outline" ? v : h
+  } : f;
+  return /* @__PURE__ */ n(
     "div",
     {
-      className: y(r.avatar, b),
-      style: S,
-      "data-shape": x,
-      "data-size": h,
+      className: H(r.avatar, y),
+      style: E,
+      "data-shape": C,
+      "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__ */ u(k, { loading: p, className: r.shape, variant: "circle", children: [
+        /* @__PURE__ */ u("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(q, { className: r.svg }) })
+        ] }),
+        !c && e !== "system" && /* @__PURE__ */ n("span", { className: r.label, children: w || j }),
+        l && /* @__PURE__ */ n(
           "svg",
           {
             "aria-hidden": "true",
@@ -66,7 +90,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 +98,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.51.5",
+  "version": "0.52.0",
   "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",