@altinn/altinn-components 0.43.7 → 0.44.4

package/dist/assets/LayoutBase.css

@@ -1 +1 @@
-._base_14p9u_1{position:relative;display:flex;flex-direction:column;min-height:100vh}._base_14p9u_1[data-theme=default]{background-color:var(--ds-color-background-default)}._base_14p9u_1[data-theme=subtle]{background-color:var(--ds-color-background-tinted)}
+._base_vvp2v_1{position:relative;display:flex;flex-direction:column;min-height:100vh}._base_vvp2v_1[data-theme=default]{background-color:var(--ds-color-background-default)}._base_vvp2v_1[data-theme=subtle]{background-color:var(--ds-color-background-tinted)}._base_vvp2v_1[data-theme=neutral]{background-color:var(--ds-color-neutral-background-tinted)}

package/dist/assets/Typography.css

@@ -1 +1 @@
-._typography_1e4ji_1{width:100%;line-height:1.5}p._typography_1e4ji_1{margin:0}._typography_1e4ji_1[data-theme=default]{background-color:transparent;color:var(--ds-color-text-default)}._typography_1e4ji_1[data-theme=subtle]{background-color:transparent;color:var(--ds-color-text-subtle)}._typography_1e4ji_1[data-size=xs]{font-size:.875rem}._typography_1e4ji_1[data-size=sm]{font-size:1rem}._typography_1e4ji_1[data-size=md]{font-size:1.125rem}._typography_1e4ji_1[data-size=lg]{font-size:1.25rem}._typography_1e4ji_1[data-size=xl]{font-size:1.5rem}._typography_1e4ji_1>*:first-child{margin-top:0}._typography_1e4ji_1>*:last-child{margin-bottom:0}._typography_1e4ji_1 strong{font-weight:500}._typography_1e4ji_1 a{color:var(--ds-color-base-default)}._typography_1e4ji_1 a:hover{color:var(--ds-color-base-hover)}._typography_1e4ji_1>p{font-size:1em;margin:1em 0}._typography_1e4ji_1>h1{font-size:1.5rem;font-weight:500;margin-top:1.5em;margin-bottom:0}._typography_1e4ji_1>h2{font-size:1.25rem;font-weight:600;margin-top:1.5em;margin-bottom:0}._typography_1e4ji_1>h3{font-size:1em;font-weight:600;margin:1em 0}._typography_1e4ji_1>h4{font-size:1em;font-weight:600;margin:1em 0 0}._typography_1e4ji_1>h5,._typography_1e4ji_1>h6{font-size:.875rem;margin:1em 0 0}._typography_1e4ji_1>h6{font-weight:500;color:var(--ds-color-text-subtle)}._typography_1e4ji_1>h6{font-weight:400;color:var(--ds-color-text-subtle)}._typography_1e4ji_1>h5+*,._typography_1e4ji_1>h6+*{margin-top:0}._typography_1e4ji_1>section{margin:1em 0}._typography_1e4ji_1 ul:not([class]),._typography_1e4ji_1 ol:not([class]){list-style-position:outside;padding-left:1.5em;margin:1.5em 0}._typography_1e4ji_1 ul:not([class]) li,._typography_1e4ji_1 ol:not([class]) li{padding-left:.5em;margin:.5em 0}
+._typography_xs81l_1{width:100%;line-height:1.5}p._typography_xs81l_1{margin:0}._typography_xs81l_1[data-theme=default]{background-color:transparent;color:var(--ds-color-text-default)}._typography_xs81l_1[data-theme=subtle]{background-color:transparent;color:var(--ds-color-text-subtle)}._typography_xs81l_1[data-size=xs]{font-size:.875rem}._typography_xs81l_1[data-size=sm]{font-size:1rem}._typography_xs81l_1[data-size=md]{font-size:1.125rem}._typography_xs81l_1[data-size=lg]{font-size:1.25rem}._typography_xs81l_1[data-size=xl]{font-size:1.5rem}._typography_xs81l_1>*:first-child{margin-top:0}._typography_xs81l_1>*:last-child{margin-bottom:0}._typography_xs81l_1 strong{font-weight:500}._typography_xs81l_1 a{color:var(--ds-color-base-default)}._typography_xs81l_1 a:hover{color:var(--ds-color-base-hover)}._typography_xs81l_1>p{font-size:1em;margin:1em 0}._typography_xs81l_1>h1{font-size:1.5rem;font-weight:500;margin-top:1.5em;margin-bottom:0}._typography_xs81l_1>h2{font-size:1.25rem;font-weight:600;margin-top:1.5em;margin-bottom:0}._typography_xs81l_1>h3{font-size:1em;font-weight:600;margin:1em 0}._typography_xs81l_1>h4{font-size:1em;font-weight:600;margin:1em 0 0}._typography_xs81l_1>h5,._typography_xs81l_1>h6{font-size:.875rem;margin:1em 0 0}._typography_xs81l_1>h6{font-weight:500;color:var(--ds-color-text-subtle)}._typography_xs81l_1>h6{font-weight:400;color:var(--ds-color-text-subtle)}._typography_xs81l_1>h5+*,._typography_xs81l_1>h6+*{margin-top:0}._typography_xs81l_1>section{margin:1em 0}._typography_xs81l_1 ul:not([class]),._typography_xs81l_1 ol:not([class]){list-style-position:outside;padding-left:1.5em;margin:1.5em 0}._typography_xs81l_1 ul:not([class]) li,._typography_xs81l_1 ol:not([class]) li{padding-left:.5em;margin:.5em 0}._typography_xs81l_1 table{width:100%;font-size:.875em;font-variant-numeric:tabular-nums;border-collapse:collapse;border:1px solid;margin:1.5em 0}._typography_xs81l_1 th,._typography_xs81l_1 td{text-align:left;padding:.25em .5em;vertical-align:top}._typography_xs81l_1 thead+tbody{border-top:1px solid;border-color:var(--ds-color-border-default)}._typography_xs81l_1 tr+tr{border-top:1px solid;border-color:var(--ds-color-border-subtle)}

package/dist/components/Bookmarks/BookmarksListItem.js

@@ -1,20 +1,22 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { QueryLabel as e } from "../Searchbar/QueryLabel.js";
+import { QueryLabel as i } from "../Searchbar/QueryLabel.js";
 import { ListItem as s } from "../List/ListItem.js";
 import "../Snackbar/useSnackbar.js";
-const I = ({ loading: r, title: m, ariaLabel: t, params: p, ...i }) => /* @__PURE__ */ o(
+const j = ({ loading: r, title: m, ariaLabel: e, params: o, icon: p, ...f }) => /* @__PURE__ */ t(
   s,
   {
-    ...i,
+    ...f,
     loading: r,
+    icon: p,
     title: m,
-    ariaLabel: t,
-    label: !m && !r && /* @__PURE__ */ o(e, { params: p })
+    ariaLabel: e,
+    description: !r && o && /* @__PURE__ */ t(i, { params: o }),
+    label: !m && !r && !o && /* @__PURE__ */ t(i, { params: o })
   }
 );
 export {
-  I as BookmarksListItem
+  j as BookmarksListItem
 };

package/dist/components/Bookmarks/BookmarksSection.js

@@ -1,40 +1,36 @@
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
-import { createElement as f } from "react";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { createElement as a } from "react";
 import "../../index-L8X2o7IH.js";
-import { Typography as h } from "../Typography/Typography.js";
+import { Typography as c } from "../Typography/Typography.js";
 import { Heading as k } from "../Typography/Heading.js";
 import { BookmarksListItem as l } from "./BookmarksListItem.js";
-import { EditableBookmark as x } from "./EditableBookmark.js";
+import { EditableBookmark as f } from "./EditableBookmark.js";
 import "../RootProvider/RootProvider.js";
-import { List as p } from "../List/List.js";
+import { List as t } from "../List/List.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as z } from "../Page/Section.js";
-const U = ({
+import { Section as h } from "../Page/Section.js";
+const H = ({
   loading: o,
-  title: e,
-  description: s,
-  items: t,
-  untitled: d = "Untitled bookmark",
-  titleField: a,
-  expandedId: n,
-  onToggle: m
-}) => /* @__PURE__ */ c(z, { padding: 6, theme: "surface-hover", spacing: 4, bleed: !0, children: [
-  /* @__PURE__ */ i(k, { size: "md", children: e }),
-  o ? /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i(l, { title: e, loading: o, size: "sm" }) }) : t.length > 0 && /* @__PURE__ */ i(p, { spacing: "xs", children: t.map((r) => /* @__PURE__ */ f(
-    x,
+  title: m,
+  description: p,
+  items: e,
+  untitled: s = "Untitled bookmark",
+  titleField: n
+}) => /* @__PURE__ */ d(h, { padding: 6, spacing: 4, bleed: !0, children: [
+  /* @__PURE__ */ r(k, { size: "md", children: m }),
+  o ? /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(l, { title: m, loading: o, size: "sm" }) }) : e.length > 0 && /* @__PURE__ */ r(t, { spacing: "xs", children: e.map((i) => /* @__PURE__ */ a(
+    f,
     {
-      ...r,
-      key: r.id,
-      loading: o || r.loading,
-      onToggle: () => m == null ? void 0 : m(r.id),
-      expanded: n === r.id,
-      untitled: d,
-      titleField: a,
+      ...i,
+      key: i.id,
+      loading: o || i.loading,
+      untitled: s,
+      titleField: n,
       size: "sm"
     }
   )) }),
-  /* @__PURE__ */ i(h, { size: "xs", children: s })
+  /* @__PURE__ */ r(c, { size: "xs", children: p })
 ] });
 export {
-  U as BookmarksSection
+  H as BookmarksSection
 };

package/dist/components/Bookmarks/EditableBookmark.js

@@ -1,74 +1,89 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import { useState as b } from "react";
+import { jsxs as s, Fragment as b, jsx as o } from "react/jsx-runtime";
+import { useState as g } from "react";
+import { Icon as d } from "../Icon/Icon.js";
 import "../../index-L8X2o7IH.js";
-import { Button as p } from "../Button/Button.js";
-import { IconButton as h } from "../Button/IconButton.js";
-import { BookmarksListItem as y } from "./BookmarksListItem.js";
+import { Button as u } from "../Button/Button.js";
+import { IconButton as C } from "../Button/IconButton.js";
+import { BookmarksListItem as L } from "./BookmarksListItem.js";
 import "../RootProvider/RootProvider.js";
-import { QueryLabel as I } from "../Searchbar/QueryLabel.js";
+import { QueryLabel as j } from "../Searchbar/QueryLabel.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as L } from "../Page/Flex.js";
-import { Section as d } from "../Page/Section.js";
-import { TextField as j } from "../Forms/TextField.js";
-import { S as v } from "../../XMark-tKk6aExO.js";
-import { S as T } from "../../Pencil-BVHLEoQy.js";
-const H = ({
-  id: g,
-  title: r,
+import { Flex as x } from "../Page/Flex.js";
+import { TextField as F } from "../Forms/TextField.js";
+import { SettingsModal as M } from "../Settings/SettingsModal.js";
+import { S as O } from "../../Pencil-BVHLEoQy.js";
+import { S as h } from "../../MagnifyingGlass-bwVhw07z.js";
+const U = ({
+  id: k,
+  title: t,
   untitled: e,
-  params: n,
-  expanded: i,
-  onToggle: k,
-  titleField: s,
-  saveButton: t,
-  removeButton: m,
-  inputValue: a,
-  onChange: l,
-  expandIconAltText: S,
-  ...u
+  params: m,
+  titleField: a,
+  saveButton: i,
+  removeButton: n,
+  inputValue: l,
+  onChange: c,
+  editIconAltText: S = "Edit",
+  ...v
 }) => {
-  const [x, z] = b("");
-  return /* @__PURE__ */ o(
-    y,
-    {
-      ...u,
-      expanded: i,
-      id: g,
-      title: i ? r || e : r,
-      ariaLabel: r || e,
-      params: n,
-      controls: /* @__PURE__ */ o(
-        h,
-        {
-          variant: "outline",
-          size: "xs",
-          icon: i ? v : T,
-          onClick: k,
-          iconAltText: S
-        }
-      ),
-      children: /* @__PURE__ */ f(d, { padding: 4, spacing: 4, children: [
-        /* @__PURE__ */ o(I, { params: n }),
-        s && /* @__PURE__ */ o(
-          j,
+  const [I, y] = g(""), [p, f] = g(!1), z = (r) => {
+    r.preventDefault(), r.stopPropagation(), f(!0);
+  }, E = () => {
+    f(!1);
+  };
+  return /* @__PURE__ */ s(b, { children: [
+    /* @__PURE__ */ o(
+      L,
+      {
+        ...v,
+        id: k,
+        title: t || e,
+        ariaLabel: t || e,
+        params: m,
+        icon: /* @__PURE__ */ o(d, { svgElement: h }),
+        linkIcon: !0,
+        controls: /* @__PURE__ */ o(
+          C,
           {
-            ...s,
-            size: "sm",
-            name: "title",
-            value: typeof a == "string" ? a : x,
-            onChange: (c) => {
-              typeof l == "function" ? l(c) : z(c.target.value);
-            }
+            variant: "outline",
+            size: "xs",
+            icon: O,
+            onClick: z,
+            iconAltText: S
           }
-        ),
-        (t || m) && /* @__PURE__ */ f(L, { as: "footer", direction: "row", spacing: 2, children: [
-          t && /* @__PURE__ */ o(p, { ...t, size: "sm" }),
-          m && /* @__PURE__ */ o(p, { ...m, variant: "outline", size: "sm" })
+        )
+      }
+    ),
+    p && /* @__PURE__ */ o(
+      M,
+      {
+        icon: /* @__PURE__ */ o(d, { svgElement: h }),
+        title: t || e,
+        open: p,
+        onClose: E,
+        children: /* @__PURE__ */ s(x, { direction: "col", spacing: 4, children: [
+          /* @__PURE__ */ o(j, { params: m }),
+          a && /* @__PURE__ */ o(
+            F,
+            {
+              ...a,
+              size: "sm",
+              name: "title",
+              value: typeof l == "string" ? l : I,
+              onChange: (r) => {
+                typeof c == "function" ? c(r) : y(r.target.value);
+              }
+            }
+          ),
+          (i || n) && /* @__PURE__ */ s(x, { as: "footer", direction: "row", spacing: 2, children: [
+            i && /* @__PURE__ */ o(u, { ...i, size: "sm" }),
+            n && /* @__PURE__ */ o(u, { ...n, variant: "outline", size: "sm" })
+          ] })
         ] })
-      ] })
-    }
-  );
+      }
+    )
+  ] });
 };
 export {
-  H as EditableBookmark
+  U as EditableBookmark
 };

package/dist/components/Layout/LayoutBase.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import '../../assets/LayoutBase.css';const r = "_base_14p9u_1", c = {
+import '../../assets/LayoutBase.css';const r = "_base_vvp2v_1", c = {
   base: r
 }, n = ({ currentId: a, color: s, theme: t, children: e }) => /* @__PURE__ */ o("div", { className: c.base, "data-color": s, "data-theme": t, "data-current-id": a, children: e });
 export {

package/dist/components/Typography/Typography.js

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
-import { c as h } from "../../index-L8X2o7IH.js";
-import { Skeleton as l } from "../Skeleton/Skeleton.js";
+import { c as g } from "../../index-L8X2o7IH.js";
+import { Skeleton as h } from "../Skeleton/Skeleton.js";
 import { useHighlightedText as x } from "./useHighlightedText.js";
-import '../../assets/Typography.css';const f = "_typography_1e4ji_1", T = {
+import '../../assets/Typography.css';const f = "_typography_xs81l_1", T = {
   typography: f
 }, z = ({
   loading: o,
@@ -12,26 +12,26 @@ import '../../assets/Typography.css';const f = "_typography_1e4ji_1", T = {
   size: e = "md",
   color: n,
   variant: p,
-  className: i,
-  style: s = {},
+  className: s,
+  style: i = {},
   maxWidth: c,
   children: y,
   ...m
 }) => {
-  const d = a, g = x(y, r || []);
+  const d = a, l = x(y, r || []);
   return /* @__PURE__ */ t(
     d,
     {
-      className: h(T.typography, i),
+      className: g(T.typography, s),
       style: {
         maxWidth: c,
-        ...s
+        ...i
       },
       "data-size": e,
       "data-color": n,
       "data-variant": p,
       ...m,
-      children: /* @__PURE__ */ t(l, { loading: o, children: g })
+      children: /* @__PURE__ */ t(h, { loading: o, children: l })
     }
   );
 };

package/dist/types/lib/components/Bookmarks/BookmarksListItem.d.ts

@@ -3,5 +3,6 @@ export interface BookmarksListItemProps extends ListItemProps {
     /** Query params */
     params?: QueryItemProps[];
     ariaLabel?: string;
+    icon?: ListItemProps['icon'];
 }
-export declare const BookmarksListItem: ({ loading, title, ariaLabel, params, ...rest }: BookmarksListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BookmarksListItem: ({ loading, title, ariaLabel, params, icon, ...rest }: BookmarksListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Bookmarks/BookmarksListItem.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ loading, title, ariaLabel, params, ...rest }: import('./BookmarksListItem').BookmarksListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, title, ariaLabel, params, icon, ...rest }: import('./BookmarksListItem').BookmarksListItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Bookmarks/BookmarksSection.d.ts

@@ -5,8 +5,6 @@ export interface BookmarksSectionProps {
     items: EditableBookmarkProps[];
     untitled?: string;
     titleField?: TextFieldProps;
-    expandedId?: string;
-    onToggle?: (id: string) => void;
     loading?: boolean;
 }
-export declare const BookmarksSection: ({ loading, title, description, items, untitled, titleField, expandedId, onToggle, }: BookmarksSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BookmarksSection: ({ loading, title, description, items, untitled, titleField, }: BookmarksSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Bookmarks/BookmarksSection.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { BookmarksSectionProps } from './BookmarksSection';
 declare const meta: {
     title: string;
-    component: ({ loading, title, description, items, untitled, titleField, expandedId, onToggle, }: BookmarksSectionProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, title, description, items, untitled, titleField, }: BookmarksSectionProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -30,7 +30,6 @@ declare const meta: {
                 type: "filter";
                 label: string;
             })[];
-            expandIconAltText: string;
         } | {
             id: string;
             params: ({
@@ -47,22 +46,6 @@ declare const meta: {
                 label: string;
                 onClick: () => void;
             };
-            expandIconAltText: string;
-            title?: undefined;
-        } | {
-            id: string;
-            params: {
-                type: "filter";
-                label: string;
-            }[];
-            saveButton: {
-                label: string;
-            };
-            removeButton: {
-                label: string;
-                onClick?: undefined;
-            };
-            expandIconAltText: string;
             title?: undefined;
         })[];
     };
@@ -70,7 +53,6 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const ExpandedItem: Story;
 export declare const ControlledState: (args: BookmarksSectionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const LoadingState: Story;
 export declare const EmptyState: Story;

package/dist/types/lib/components/Bookmarks/EditableBookmark.d.ts

@@ -2,24 +2,20 @@ import { ButtonProps, TextFieldProps, BookmarksListItemProps, QueryItemProps } f
 export interface EditableBookmarkProps extends BookmarksListItemProps {
     /** Bookmark id */
     id: string;
-    /** discernible text for expand icon */
-    expandIconAltText: string;
+    /** Accessible label for the edit button icon */
+    editIconAltText?: string;
     /** Input value */
     inputValue?: string;
     /** On change */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /** Loading */
     loading?: boolean;
-    /** Expanded */
-    expanded?: boolean;
     /** Optional title */
     title?: string;
     /** Untitled */
     untitled?: string;
     /** Query params */
     params?: QueryItemProps[];
-    /** Toggle function */
-    onToggle?: () => void;
     /** Title field */
     titleField?: TextFieldProps;
     /** Save button */
@@ -29,4 +25,4 @@ export interface EditableBookmarkProps extends BookmarksListItemProps {
     /** Render as **/
     as?: React.ElementType;
 }
-export declare const EditableBookmark: ({ id, title, untitled, params, expanded, onToggle, titleField, saveButton, removeButton, inputValue, onChange, expandIconAltText, ...rest }: EditableBookmarkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditableBookmark: ({ id, title, untitled, params, titleField, saveButton, removeButton, inputValue, onChange, editIconAltText, ...rest }: EditableBookmarkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Layout/LayoutBase.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 export type LayoutColor = 'neutral' | 'company' | 'person';
-export type LayoutTheme = 'default' | 'subtle';
+export type LayoutTheme = 'default' | 'subtle' | 'neutral';
 export interface LayoutBaseProps {
     color?: LayoutColor;
-    theme?: LayoutTheme;
+    theme?: LayoutTheme /** TODO: Should be renamed to variant */;
     currentId?: string;
     children?: ReactNode;
 }

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

@@ -12,3 +12,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const HighlightWords: Story;
+export declare const Tables: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.43.7",
+  "version": "0.44.4",
   "main": "dist/index.js",
   "files": [
     "dist/",
@@ -66,6 +66,10 @@
   "lint-staged": {
     "**/*.*": "biome check --staged --no-errors-on-unmatched --write"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Altinn/altinn-components.git"
+  },
   "scripts": {
     "test": "vitest run",
     "storybook": "storybook dev -p 6006",