@altinn/altinn-components 0.22.3 → 0.22.4

package/dist/assets/Typography.css

@@ -1 +1 @@
-._typography_g5s4h_1{width:100%;max-width:45rem;line-height:1.5}p._typography_g5s4h_1{margin:0}._typography_g5s4h_1[data-theme=default]{background-color:transparent;color:var(--ds-color-text-default)}._typography_g5s4h_1[data-theme=subtle]{background-color:transparent;color:var(--ds-color-text-subtle)}._typography_g5s4h_1[data-size=xs]{font-size:.875rem}._typography_g5s4h_1[data-size=sm]{font-size:1rem}._typography_g5s4h_1[data-size=md]{font-size:1.125rem}._typography_g5s4h_1[data-size=lg]{font-size:1.25rem}._typography_g5s4h_1[data-size=xl]{font-size:1.5rem}._typography_g5s4h_1>*:first-child{margin-top:0}._typography_g5s4h_1>*:last-child{margin-bottom:0}._typography_g5s4h_1 strong{font-weight:500}._typography_g5s4h_1 a{color:var(--ds-color-base-default)}._typography_g5s4h_1 a:hover{color:var(--ds-color-base-hover)}._typography_g5s4h_1>p{font-size:1em;margin:1em 0}._typography_g5s4h_1>h1{font-size:1.5rem;font-weight:500;margin-top:1.5em;margin-bottom:0}._typography_g5s4h_1>h2{font-size:1.25rem;font-weight:600;margin-top:1.5em;margin-bottom:0}._typography_g5s4h_1>h3{font-size:1em;font-weight:600;margin:1em 0}._typography_g5s4h_1>h4{font-size:1em;font-weight:600;margin:1em 0 0}._typography_g5s4h_1>h5,._typography_g5s4h_1>h6{font-size:.875rem;margin:1em 0 0}._typography_g5s4h_1>h6{font-weight:500;color:var(--ds-color-text-subtle)}._typography_g5s4h_1>h6{font-weight:400;color:var(--ds-color-text-subtle)}._typography_g5s4h_1>h5+*,._typography_g5s4h_1>h6+*{margin-top:0}._typography_g5s4h_1>section{margin:1em 0}._typography_g5s4h_1 ul:not([class]),._typography_g5s4h_1 ol:not([class]){list-style-position:inside;padding-left:1rem;margin:1em 0}
+._typography_cr720_1{width:100%;line-height:1.5}p._typography_cr720_1{margin:0}._typography_cr720_1[data-theme=default]{background-color:transparent;color:var(--ds-color-text-default)}._typography_cr720_1[data-theme=subtle]{background-color:transparent;color:var(--ds-color-text-subtle)}._typography_cr720_1[data-size=xs]{font-size:.875rem}._typography_cr720_1[data-size=sm]{font-size:1rem}._typography_cr720_1[data-size=md]{font-size:1.125rem}._typography_cr720_1[data-size=lg]{font-size:1.25rem}._typography_cr720_1[data-size=xl]{font-size:1.5rem}._typography_cr720_1>*:first-child{margin-top:0}._typography_cr720_1>*:last-child{margin-bottom:0}._typography_cr720_1 strong{font-weight:500}._typography_cr720_1 a{color:var(--ds-color-base-default)}._typography_cr720_1 a:hover{color:var(--ds-color-base-hover)}._typography_cr720_1>p{font-size:1em;margin:1em 0}._typography_cr720_1>h1{font-size:1.5rem;font-weight:500;margin-top:1.5em;margin-bottom:0}._typography_cr720_1>h2{font-size:1.25rem;font-weight:600;margin-top:1.5em;margin-bottom:0}._typography_cr720_1>h3{font-size:1em;font-weight:600;margin:1em 0}._typography_cr720_1>h4{font-size:1em;font-weight:600;margin:1em 0 0}._typography_cr720_1>h5,._typography_cr720_1>h6{font-size:.875rem;margin:1em 0 0}._typography_cr720_1>h6{font-weight:500;color:var(--ds-color-text-subtle)}._typography_cr720_1>h6{font-weight:400;color:var(--ds-color-text-subtle)}._typography_cr720_1>h5+*,._typography_cr720_1>h6+*{margin-top:0}._typography_cr720_1>section{margin:1em 0}._typography_cr720_1 ul:not([class]),._typography_cr720_1 ol:not([class]){list-style-position:inside;padding-left:1rem;margin:1em 0}

package/dist/components/Dialog/DialogBody.js

@@ -1,12 +1,12 @@
-import { jsxs as i, jsx as m, Fragment as f } from "react/jsx-runtime";
+import { jsxs as i, jsx as m, Fragment as h } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { Timeline as d } from "../Timeline/Timeline.js";
-import { TimelineSection as h } from "../Timeline/TimelineSection.js";
+import { TimelineSection as f } from "../Timeline/TimelineSection.js";
 import { TimelineHeader as c } from "../Timeline/TimelineHeader.js";
 import { Typography as s } from "../Typography/Typography.js";
-import { SeenByLog as y } from "./SeenByLog.js";
+import { SeenByLog as x } from "./SeenByLog.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 const H = ({
@@ -24,16 +24,16 @@ const H = ({
     n + " " + (o == null ? void 0 : o.name)
   ] }),
   /* @__PURE__ */ m(
-    h,
+    f,
     {
       loading: r,
       datetime: p,
       byline: a,
       spacing: 4,
       color: r ? "neutral" : void 0,
-      children: !r && /* @__PURE__ */ i(f, { children: [
-        /* @__PURE__ */ m(s, { children: l }),
-        e && /* @__PURE__ */ m(y, { ...e })
+      children: !r && /* @__PURE__ */ i(h, { children: [
+        /* @__PURE__ */ m(s, { maxWidth: "60ch", children: l }),
+        e && /* @__PURE__ */ m(x, { ...e })
       ] })
     }
   )

package/dist/components/Page/ContactSection.js

@@ -1,24 +1,25 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { createElement as l } from "react";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { createElement as s } from "react";
 import "../../index-L8X2o7IH.js";
-import { Button as s } from "../Button/Button.js";
+import { Button as f } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { Typography as f } from "../Typography/Typography.js";
-import { Heading as g } from "../Typography/Heading.js";
+import { Typography as g } from "../Typography/Typography.js";
+import { Heading as h } from "../Typography/Heading.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as h } from "./Flex.js";
-import { Section as x } from "./Section.js";
-const H = ({
+import { Flex as x } from "./Flex.js";
+import { Section as u } from "./Section.js";
+const T = ({
+  variant: o = "inline",
   theme: t,
   color: e,
-  variant: o = "inline",
+  typographyProps: p,
   title: i,
-  description: p,
-  children: m,
+  description: m,
+  children: c,
   items: n
-}) => /* @__PURE__ */ d(
-  x,
+}) => /* @__PURE__ */ l(
+  u,
   {
     direction: "col",
     theme: t,
@@ -27,12 +28,12 @@ const H = ({
     shadow: o === "card" ? "xs" : "none",
     spacing: 4,
     children: [
-      i && /* @__PURE__ */ r(g, { size: "lg", children: i }),
-      /* @__PURE__ */ r(f, { children: m || /* @__PURE__ */ r("p", { children: p }) }),
-      n && /* @__PURE__ */ r(h, { spacing: 2, children: n.map((c, a) => /* @__PURE__ */ l(s, { ...c, variant: "outline", key: a })) })
+      i && /* @__PURE__ */ r(h, { size: "lg", children: i }),
+      /* @__PURE__ */ r(g, { ...p, children: c || /* @__PURE__ */ r("p", { children: m }) }),
+      n && /* @__PURE__ */ r(x, { spacing: 2, children: n.map((a, d) => /* @__PURE__ */ s(f, { ...a, variant: "outline", key: d })) })
     ]
   }
 );
 export {
-  H as ContactSection
+  T as ContactSection
 };

package/dist/components/Transmission/Transmission.js

@@ -1,59 +1,61 @@
 "use client";
 import { jsx as i, jsxs as l } from "react/jsx-runtime";
-import { useState as L } from "react";
+import { useState as y } from "react";
 import "../../index-L8X2o7IH.js";
-import { AttachmentList as d } from "../Attachment/AttachmentList.js";
-import { Byline as I } from "../Byline/Byline.js";
+import { AttachmentList as b } from "../Attachment/AttachmentList.js";
+import { Byline as d } from "../Byline/Byline.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemLabel as j } from "../List/ListItemLabel.js";
-import { ListItem as k } from "../List/ListItem.js";
-import { Typography as A } from "../Typography/Typography.js";
+import { ListItemLabel as I } from "../List/ListItemLabel.js";
+import { ListItem as j } from "../List/ListItem.js";
+import { Typography as k } from "../Typography/Typography.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as S } from "../Page/Section.js";
+import { Section as A } from "../Page/Section.js";
 const J = ({
-  size: e = "xs",
-  theme: n = "subtle",
-  color: s = "neutral",
-  title: f,
-  createdAt: T,
+  size: n = "xs",
+  theme: s = "subtle",
+  color: f = "neutral",
+  title: p,
+  createdAt: S,
   createdAtLabel: u,
   badge: o,
   sender: r,
   summary: c,
   attachments: t,
-  type: x,
+  type: a,
   children: m,
-  ...a
+  ...x
 }) => {
-  const [p, h] = L(!1);
+  const [e, L] = y(!1);
   return /* @__PURE__ */ i(
-    k,
+    j,
     {
-      ...a,
+      ...x,
       avatar: r,
       badge: o && {
         ...o,
         theme: (o == null ? void 0 : o.theme) || "surface"
       },
-      size: e,
-      theme: n,
-      color: s,
-      label: /* @__PURE__ */ i(j, { title: f, weight: x === "submission" ? "normal" : "bold" }),
-      expanded: p,
-      onClick: () => h((y) => !y),
+      size: n,
+      theme: s,
+      color: f,
+      label: /* @__PURE__ */ i(I, { title: p, weight: a === "submission" ? "normal" : "bold" }),
+      expanded: e,
+      onClick: () => L((h) => !h),
       collapsible: !0,
       linkIcon: !0,
-      children: /* @__PURE__ */ l(S, { padding: 4, children: [
-        /* @__PURE__ */ l(I, { children: [
+      as: "button",
+      ariaLabel: p,
+      children: /* @__PURE__ */ l(A, { padding: 4, children: [
+        /* @__PURE__ */ l(d, { children: [
           /* @__PURE__ */ i("strong", { children: (r == null ? void 0 : r.name) + ", " }),
           " ",
           u
         ] }),
-        /* @__PURE__ */ l(A, { size: "md", children: [
+        /* @__PURE__ */ l(k, { size: "md", children: [
           /* @__PURE__ */ i("p", { children: c }),
-          p ? typeof m == "function" ? m() : m : null,
-          (t == null ? void 0 : t.items) && /* @__PURE__ */ i(d, { ...t })
+          e ? typeof m == "function" ? m() : m : null,
+          (t == null ? void 0 : t.items) && /* @__PURE__ */ i(b, { ...t })
         ] })
       ] })
     }

package/dist/components/Typography/Typography.js

@@ -1,9 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
-import { c } from "../../index-L8X2o7IH.js";
-import { Skeleton as h } from "../Skeleton/Skeleton.js";
-import '../../assets/Typography.css';const d = "_typography_g5s4h_1", i = {
-  typography: d
-}, _ = ({
+import { c as d } from "../../index-L8X2o7IH.js";
+import { Skeleton as i } from "../Skeleton/Skeleton.js";
+import '../../assets/Typography.css';const l = "_typography_cr720_1", g = {
+  typography: l
+}, j = ({
   loading: o,
   loadingText: r = "Loading ...",
   as: p = "div",
@@ -11,19 +11,25 @@ import '../../assets/Typography.css';const d = "_typography_g5s4h_1", i = {
   color: e,
   theme: n,
   className: s,
+  style: y = {},
+  maxWidth: c,
   children: m,
-  ...y
+  ...h
 }) => /* @__PURE__ */ t(
   p,
   {
-    className: c(i.typography, s),
+    className: d(g.typography, s),
+    style: {
+      maxWidth: c,
+      ...y
+    },
     "data-size": a,
     "data-color": e,
     "data-theme": n,
-    ...y,
-    children: o && /* @__PURE__ */ t(h, { loading: o, children: r }) || m
+    ...h,
+    children: o && /* @__PURE__ */ t(i, { loading: o, children: r }) || m
   }
 );
 export {
-  _ as Typography
+  j as Typography
 };

package/dist/types/lib/components/Page/ContactSection.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonProps, Color, Theme } from '..';
+import { ButtonProps, Color, Theme, TypographyProps } from '..';
 export type ContactSectionVariant = 'inline' | 'card';
 export interface ContactSectionProps {
     id?: string;
@@ -8,7 +8,8 @@ export interface ContactSectionProps {
     children?: ReactNode;
     items: ButtonProps[];
     variant?: ContactSectionVariant;
+    typographyProps?: TypographyProps;
     color?: Color;
     theme?: Theme;
 }
-export declare const ContactSection: ({ theme, color, variant, title, description, children, items, }: ContactSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactSection: ({ variant, theme, color, typographyProps, title, description, children, items, }: ContactSectionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { ElementType, ReactNode } from 'react';
+import { CSSProperties, ElementType, ReactNode } from 'react';
 export type TypographyColor = 'neutral' | 'company' | 'person' | 'article';
 export type TypographyTheme = 'default' | 'subtle';
 export type TypographySize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -12,5 +12,7 @@ export interface TypographyProps {
     className?: string;
     children?: ReactNode;
     href?: string;
+    style?: CSSProperties;
+    maxWidth?: string;
 }
-export declare const Typography: ({ loading, loadingText, as, size, color, theme, className, children, ...restProps }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Typography: ({ loading, loadingText, as, size, color, theme, className, style, maxWidth, children, ...restProps }: TypographyProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ loading, loadingText, as, size, color, theme, className, children, ...restProps }: import('./Typography').TypographyProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, loadingText, as, size, color, theme, className, style, maxWidth, children, ...restProps }: import('./Typography').TypographyProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/package.json

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