@altinn/altinn-components 0.42.3 → 0.42.5

package/dist/assets/Avatar.css

@@ -1 +1 @@
-._avatar_128b0_1{position:relative;overflow:hidden;box-sizing:border-box}._avatar_128b0_1[data-shape=circle]{border-radius:50%}._avatar_128b0_1[data-shape=square]{border-radius:5%}._avatar_128b0_1[data-outline=true]{outline:1px solid #ffffff;box-sizing:border-box}._shape_128b0_20{display:block;font-size:1em;width:1em;height:1em}._shape_128b0_20[data-variant=outline]{border:1px solid}._label_128b0_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_128b0_41{display:block;width:100%;height:100%}@supports (-webkit-hyphens: none){._avatar_128b0_1[data-size=lg] ._label_128b0_31{font-size:1.58rem}._avatar_128b0_1[data-size=md] ._label_128b0_31{font-size:1.15rem}._avatar_128b0_1[data-size=sm] ._label_128b0_31{font-size:.85rem}}
+._avatar_9mmgv_1{position:relative;overflow:hidden;box-sizing:border-box}._avatar_9mmgv_1[data-shape=circle]{border-radius:50%}._avatar_9mmgv_1[data-shape=square]{border-radius:5%}._avatar_9mmgv_1[data-outline=true]{outline:1px solid #ffffff;box-sizing:border-box}._shape_9mmgv_20{display:block;font-size:1em;width:1em;height:1em}._shape_9mmgv_20[data-variant=outline]{border:1px solid}._label_9mmgv_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_9mmgv_41{display:block;width:100%;height:100%}._deletedIcon_9mmgv_47{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}@supports (-webkit-hyphens: none){._avatar_9mmgv_1[data-size=lg] ._label_9mmgv_31{font-size:1.58rem}._avatar_9mmgv_1[data-size=md] ._label_9mmgv_31{font-size:1.15rem}._avatar_9mmgv_1[data-size=sm] ._label_9mmgv_31{font-size:.85rem}}

package/dist/assets/GlobalMenuButton.css

@@ -1 +1 @@
-._button_234vz_1{flex-shrink:0;position:relative;z-index:2;display:inline-flex;align-items:center;column-gap:.625rem;padding:.625rem;border:none;border-radius:4px}._label_234vz_13{font-size:1.125rem;font-weight:500;padding:.25rem}._loginIcon_234vz_19,._closeIcon_234vz_20,._avatar_234vz_21{font-size:1.5rem;width:2.25rem;height:2.25rem;border-radius:2px}._loginIcon_234vz_19{background-color:#fff;color:#000}._closeIcon_234vz_20{outline:1px solid white}._badge_234vz_37{position:absolute;top:0;right:0;margin-top:-.75rem;margin-right:-.75rem}@supports (-webkit-hyphens: none){._loginIcon_234vz_19,._closeIcon_234vz_20,._avatar_234vz_21{font-size:unset}._loginIcon_234vz_19 svg,._loginIcon_234vz_19 img,._closeIcon_234vz_20 svg,._closeIcon_234vz_20 img{width:1.5rem;height:1.5rem}}
+._button_1uh95_1{flex-shrink:0;position:relative;z-index:2;display:inline-flex;align-items:center;column-gap:.625rem;padding:.625rem;border:none;border-radius:4px}._label_1uh95_13{font-size:1.125rem;font-weight:500;padding:.25rem}._avatarIcon_1uh95_19,._loginIcon_1uh95_20,._closeIcon_1uh95_21{width:2.25rem;height:2.25rem;border-radius:2px;font-size:unset}._closeIcon_1uh95_21{outline:1px solid white}._loginIcon_1uh95_20{background-color:#fff;color:#000;outline:1px solid white}._avatar_1uh95_19{font-size:2.25rem;width:2.25rem;height:2.25rem}._icon_1uh95_44{font-size:1.5rem;width:1.5rem;height:1.5rem}._badge_1uh95_50{position:absolute;top:0;right:0;margin-top:-.75rem;margin-right:-.75rem}

package/dist/components/Avatar/Avatar.js

@@ -1,61 +1,77 @@
 "use client";
-import { jsx as e, jsxs as x } from "react/jsx-runtime";
-import { c as j } from "../../index-L8X2o7IH.js";
-import { useState as A } from "react";
-import { Skeleton as E } from "../Skeleton/Skeleton.js";
-import { fromStringToColor as I } from "./color.js";
-import '../../assets/Avatar.css';const y = "_avatar_128b0_1", q = "_shape_128b0_20", z = "_label_128b0_31", H = "_image_128b0_41", r = {
-  avatar: y,
-  shape: q,
-  label: z,
-  image: H
-}, F = (a) => typeof a == "object" && a !== null && "name" in a, G = ({
-  type: a = "person",
-  size: m,
+import { jsx as a, jsxs as j } from "react/jsx-runtime";
+import { c as A } from "../../index-L8X2o7IH.js";
+import { useState as E } from "react";
+import { Skeleton as y } from "../Skeleton/Skeleton.js";
+import { fromStringToColor as q } from "./color.js";
+import '../../assets/Avatar.css';const z = "_avatar_9mmgv_1", B = "_shape_9mmgv_20", H = "_label_9mmgv_31", L = "_image_9mmgv_41", M = "_deletedIcon_9mmgv_47", r = {
+  avatar: z,
+  shape: B,
+  label: H,
+  image: L,
+  deletedIcon: M
+}, G = (e) => typeof e == "object" && e !== null && "name" in e, J = ({
+  type: e = "person",
+  isParent: d = !0,
+  isDeleted: p = !1,
+  size: h,
   name: l = "Avatar",
-  shape: d,
+  shape: g,
   color: u,
-  variant: o = "solid",
-  outline: h = !0,
-  imageUrl: s,
-  imageUrlAlt: b,
-  customLabel: _,
+  variant: v,
+  outline: _ = !0,
+  imageUrl: t,
+  imageUrlAlt: f,
+  customLabel: b,
   loading: n,
-  className: g,
+  className: C,
   style: c = {}
 }) => {
-  const [f, v] = A(!1), C = d || a === "person" ? "circle" : "square", N = u || a === "person" ? "light" : "dark", { backgroundColor: i, foregroundColor: p } = I(l, N), S = (l[0] ?? "").toUpperCase(), t = s && !f, k = !n && !t ? {
+  const [I, w] = E(!1), x = g || e === "person" ? "circle" : "square", N = u || e === "person" ? "light" : "dark", o = v || !d ? "outline" : "solid", { backgroundColor: i, foregroundColor: m } = q(l, N), k = (l[0] ?? "").toUpperCase(), s = t && !I, S = !n && !s ? {
     ...c,
-    backgroundColor: o === "outline" ? p : i,
-    color: o === "outline" ? i : p
+    backgroundColor: o === "outline" ? m : i,
+    color: o === "outline" ? i : m
   } : c;
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: j(r.avatar, g),
-      style: k,
-      "data-shape": C,
-      "data-size": m,
-      "data-outline": h,
+      className: A(r.avatar, C),
+      style: S,
+      "data-shape": x,
+      "data-size": h,
+      "data-outline": _,
       "aria-hidden": !0,
-      children: /* @__PURE__ */ x(E, { loading: n, className: r.shape, variant: "circle", children: [
-        /* @__PURE__ */ e("div", { className: r.shape, "data-variant": o, children: t && /* @__PURE__ */ e(
+      children: /* @__PURE__ */ j(y, { loading: n, className: r.shape, variant: "circle", children: [
+        /* @__PURE__ */ a("div", { className: r.shape, "data-variant": o, children: s && /* @__PURE__ */ a(
           "img",
           {
-            src: s,
+            src: t,
             className: r.image,
-            alt: b || s,
+            alt: f || t,
             onError: () => {
-              v(!0);
+              w(!0);
             }
           }
         ) }),
-        !t && /* @__PURE__ */ e("span", { className: r.label, children: _ || S })
+        !s && /* @__PURE__ */ a("span", { className: r.label, children: b || k }),
+        p && /* @__PURE__ */ a(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: r.deletedIcon,
+            width: "24",
+            height: "24",
+            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" })
+          }
+        )
       ] })
     }
   );
 };
 export {
-  G as Avatar,
-  F as isAvatarProps
+  J as Avatar,
+  G as isAvatarProps
 };

package/dist/components/GlobalMenu/GlobalMenuButton.js

@@ -1,49 +1,58 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import { c as _ } from "../../index-L8X2o7IH.js";
 import "react";
-import { Badge as d } from "../Badge/Badge.js";
-import { ButtonBase as I } from "../Button/ButtonBase.js";
-import { ButtonLabel as f } from "../Button/ButtonLabel.js";
-import { ButtonIcon as p } from "../Button/ButtonIcon.js";
+import { Avatar as u } from "../Avatar/Avatar.js";
+import { Badge as I } from "../Badge/Badge.js";
+import { ButtonBase as h } from "../Button/ButtonBase.js";
+import { ButtonLabel as d } from "../Button/ButtonLabel.js";
+import { ButtonIcon as f } from "../Button/ButtonIcon.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { S as v } from "../../XMark-tKk6aExO.js";
-import { S as N } from "../../PadlockLocked-XL1IB5Ae.js";
-import '../../assets/GlobalMenuButton.css';const b = "_button_234vz_1", h = "_loginIcon_234vz_19", B = "_closeIcon_234vz_20", z = "_avatar_234vz_21", u = "_badge_234vz_37", a = {
-  button: b,
-  loginIcon: h,
-  closeIcon: B,
-  avatar: z,
-  badge: u
-}, w = ({
+import { S as N } from "../../XMark-tKk6aExO.js";
+import { S as g } from "../../PadlockLocked-XL1IB5Ae.js";
+import '../../assets/GlobalMenuButton.css';const v = "_button_1uh95_1", b = "_avatarIcon_1uh95_19", B = "_loginIcon_1uh95_20", x = "_closeIcon_1uh95_21", S = "_avatar_1uh95_19", k = "_icon_1uh95_44", L = "_badge_1uh95_50", a = {
+  button: v,
+  avatarIcon: b,
+  loginIcon: B,
+  closeIcon: x,
+  avatar: S,
+  icon: k,
+  badge: L
+}, H = ({
   className: t,
-  as: c = "button",
+  as: s = "button",
   color: i = "accent",
-  variant: e = "solid",
-  currentAccount: s,
-  expanded: g,
-  label: l = "Menu",
+  variant: m = "solid",
+  currentAccount: c,
+  expanded: p,
+  label: r = "Menu",
   badge: n,
-  ...m
-}) => g ? /* @__PURE__ */ r(I, { ...m, as: c, variant: e, color: i, className: _(a.button, t), children: [
-  /* @__PURE__ */ o(f, { children: l }),
-  /* @__PURE__ */ o(p, { className: a.closeIcon, icon: /* @__PURE__ */ o(v, { className: a.icon, "aria-label": "Close Icon" }) }),
-  n && /* @__PURE__ */ o(d, { ...n, className: a.badge })
-] }) : s ? /* @__PURE__ */ r(I, { ...m, as: c, variant: e, color: i, className: _(a.button, t), children: [
-  /* @__PURE__ */ o(f, { children: l }),
-  /* @__PURE__ */ o(p, { className: a.avatar, icon: s == null ? void 0 : s.icon }),
-  n && /* @__PURE__ */ o(d, { ...n, className: a.badge })
-] }) : /* @__PURE__ */ r(I, { ...m, as: c, variant: e, color: i, className: _(a.button, t), children: [
-  /* @__PURE__ */ o(f, { children: l }),
+  ...e
+}) => p ? /* @__PURE__ */ l(h, { ...e, as: s, variant: m, color: i, className: _(a.button, t), children: [
+  /* @__PURE__ */ o(d, { children: r }),
+  /* @__PURE__ */ o(f, { className: a.closeIcon, icon: /* @__PURE__ */ o(N, { className: a.icon, "aria-label": "Close Icon" }) }),
+  n && /* @__PURE__ */ o(I, { ...n, className: a.badge })
+] }) : c ? /* @__PURE__ */ l(h, { ...e, as: s, variant: m, color: i, className: _(a.button, t), children: [
+  /* @__PURE__ */ o(d, { children: r }),
   /* @__PURE__ */ o(
-    p,
+    f,
+    {
+      className: a.avatarIcon,
+      icon: /* @__PURE__ */ o(u, { ...c == null ? void 0 : c.icon, className: a.avatar })
+    }
+  ),
+  n && /* @__PURE__ */ o(I, { ...n, className: a.badge })
+] }) : /* @__PURE__ */ l(h, { ...e, as: s, variant: m, color: i, className: _(a.button, t), children: [
+  /* @__PURE__ */ o(d, { children: r }),
+  /* @__PURE__ */ o(
+    f,
     {
       className: a.loginIcon,
-      icon: /* @__PURE__ */ o(N, { className: a.icon, "aria-label": "Login Icon" })
+      icon: /* @__PURE__ */ o(g, { className: a.icon, "aria-label": "Login Icon" })
     }
   ),
-  n && /* @__PURE__ */ o(d, { ...n, className: a.badge })
+  n && /* @__PURE__ */ o(I, { ...n, className: a.badge })
 ] });
 export {
-  w as GlobalMenuButton
+  H as GlobalMenuButton
 };

package/dist/components/Settings/SettingsItem.js

@@ -3,22 +3,22 @@ import "../../index-L8X2o7IH.js";
 import { useState as b } from "react";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { Input as x } from "../Forms/Input.js";
+import { Input as w } from "../Forms/Input.js";
 import { SettingsItemBase as n } from "./SettingsItemBase.js";
-import { SettingsModal as I } from "./SettingsModal.js";
-const O = ({
-  loading: a,
+import { SettingsModal as x } from "./SettingsModal.js";
+const M = ({
+  loading: u,
   variant: f = "default",
   id: c = "settings",
-  name: m,
-  checked: g,
-  onChange: h,
+  name: h,
+  checked: m,
+  onChange: g,
   modalProps: e,
   children: v,
   ...t
 }) => {
-  const [l, u] = b(!1);
-  if (a)
+  const [l, a] = b(!1);
+  if (u)
     return /* @__PURE__ */ i(n, { icon: t == null ? void 0 : t.icon, title: t == null ? void 0 : t.title, loading: !0 });
   switch (f) {
     case "switch":
@@ -34,36 +34,61 @@ const O = ({
           value: void 0,
           interactive: !1,
           controls: /* @__PURE__ */ i(
-            x,
+            w,
             {
               type: "checkbox",
               role: "switch",
               "aria-labelledby": c,
-              name: m,
+              name: h,
               value: t == null ? void 0 : t.value,
-              checked: g,
-              onChange: h,
+              checked: m,
+              onChange: g,
               style: { marginRight: "0.5em" }
             }
           )
         }
       );
     case "modal":
-      return /* @__PURE__ */ i(n, { ...t, as: "button", linkIcon: !0, onClick: () => u(!0), expanded: l, children: l && /* @__PURE__ */ i(
-        I,
+      return /* @__PURE__ */ i(
+        n,
         {
-          ...e,
-          icon: (e == null ? void 0 : e.icon) || (t == null ? void 0 : t.icon),
-          title: (e == null ? void 0 : e.title) || (t == null ? void 0 : t.title),
-          open: l,
-          onClose: () => u(!1),
-          children: v
+          ...t,
+          title: {
+            variant: "subtle",
+            weight: "normal",
+            children: t == null ? void 0 : t.title
+          },
+          as: "button",
+          linkIcon: !0,
+          onClick: () => a(!0),
+          expanded: l,
+          children: l && /* @__PURE__ */ i(
+            x,
+            {
+              ...e,
+              icon: (e == null ? void 0 : e.icon) || (t == null ? void 0 : t.icon),
+              title: (e == null ? void 0 : e.title) || (t == null ? void 0 : t.title),
+              open: l,
+              onClose: () => a(!1),
+              children: v
+            }
+          )
         }
-      ) });
+      );
     default:
-      return /* @__PURE__ */ i(n, { ...t });
+      return /* @__PURE__ */ i(
+        n,
+        {
+          ...t,
+          title: {
+            variant: "subtle",
+            weight: "normal",
+            children: t == null ? void 0 : t.title
+          }
+        }
+      );
   }
 };
 export {
-  O as SettingsItem
+  M as SettingsItem
 };

package/dist/types/lib/components/Account/AccountListItem.d.ts

@@ -13,6 +13,7 @@ export interface AccountListItemProps extends ListItemProps, AccountListItemCont
     accountIds?: string[];
     isCurrentEndUser?: boolean;
     isDeleted?: boolean;
+    isParent?: boolean;
     contextMenu?: ContextMenuProps;
     label?: string;
 }

package/dist/types/lib/components/Account/AccountListItem.stories.d.ts

@@ -25,6 +25,7 @@ declare const meta: {
         accountIds?: string[] | undefined;
         isCurrentEndUser?: boolean | undefined;
         isDeleted?: boolean | undefined;
+        isParent?: boolean | undefined;
         contextMenu?: import('..').ContextMenuProps | undefined;
         label?: string | undefined;
         variant?: import('..').ListItemVariant | undefined;

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

@@ -14,6 +14,10 @@ export interface AvatarProps {
     name: string;
     /** The type of avatar. */
     type?: AvatarType;
+    /** Company is a parent. */
+    isParent?: boolean;
+    /** Company is a deleted. */
+    isDeleted?: boolean;
     /** Avatar shape. */
     shape?: AvatarColor;
     /** Avatar color. */
@@ -41,4 +45,4 @@ 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, shape, color, variant, outline, imageUrl, imageUrlAlt, customLabel, loading, className, style, }: AvatarProps) => ReactElement;
+export declare const Avatar: ({ type, isParent, isDeleted, size, name, shape, color, variant, 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, shape, color, variant, outline, imageUrl, imageUrlAlt, customLabel, loading, className, style, }: AvatarProps) => React.ReactElement;
+    component: ({ type, isParent, isDeleted, size, name, shape, color, variant, outline, imageUrl, imageUrlAlt, customLabel, loading, className, style, }: AvatarProps) => React.ReactElement;
     tags: string[];
     parameters: {
         layout: string;
@@ -10,12 +10,20 @@ declare const meta: {
     args: {
         name: string;
         type: "person";
+        style: {
+            fontSize: string;
+            width: string;
+            height: string;
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Person: Story;
 export declare const Company: Story;
+export declare const DeletedCompany: Story;
+export declare const Subunit: Story;
+export declare const DeletedSubunit: Story;
 export declare const Logo: Story;
 export declare const Loading: Story;
 export declare const Sizes: ({ type, name, imageUrl }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -21,6 +21,8 @@ declare const meta: {
         size?: "sm" | "md" | undefined;
         name: string;
         type?: import('..').AvatarType | undefined;
+        isParent?: boolean | undefined;
+        isDeleted?: boolean | undefined;
         shape?: import('..').AvatarColor | undefined;
         color?: import('..').AvatarColor | undefined;
         variant?: import('..').AvatarVariant | undefined;

package/package.json

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