@altinn/altinn-components 0.61.2 → 0.62.0

package/dist/components/Layout/index.js

@@ -1,14 +1,14 @@
-import { LayoutBase as t } from "./LayoutBase.js";
-import { LayoutGrid as a } from "./LayoutGrid.js";
-import { LayoutBody as f } from "./LayoutBody.js";
-import { LayoutContent as p } from "./LayoutContent.js";
-import { LayoutSidebar as x } from "./LayoutSidebar.js";
+import { L as t } from "../../LayoutBase-CAdjuw9Q.js";
+import { LayoutGrid as e } from "./LayoutGrid.js";
+import { LayoutBody as L } from "./LayoutBody.js";
+import { LayoutContent as m } from "./LayoutContent.js";
+import { LayoutSidebar as u } from "./LayoutSidebar.js";
 import { Layout as d } from "./Layout.js";
 export {
   d as Layout,
   t as LayoutBase,
-  f as LayoutBody,
-  p as LayoutContent,
-  a as LayoutGrid,
-  x as LayoutSidebar
+  L as LayoutBody,
+  m as LayoutContent,
+  e as LayoutGrid,
+  u as LayoutSidebar
 };

package/dist/components/Settings/SettingsItem.js

@@ -1,38 +1,40 @@
 import { jsx as t } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
-import { useState as g } from "react";
-import { Input as b } from "../Forms/Input.js";
+import { useState as b } from "react";
+import { Input as P } from "../Forms/Input.js";
 import "../../ToolbarSearch-56Sm2j7P.js";
 import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
-import { SettingsItemBase as n } from "./SettingsItemBase.js";
-import { SettingsModal as x } from "./SettingsModal.js";
-const M = ({
-  loading: c,
-  variant: m = "default",
-  id: d = "settings",
-  name: h,
+import { SettingsItemBase as r } from "./SettingsItemBase.js";
+import { SettingsModal as w } from "./SettingsModal.js";
+const O = ({
+  loading: d,
+  variant: h = "default",
+  id: u = "settings",
+  name: p,
   title: e,
-  value: r,
+  value: n,
   description: s,
-  checked: p,
-  onChange: u,
+  checked: f,
+  onChange: g,
   modalProps: o,
-  children: f,
+  expanded: a,
+  children: c,
   ...i
 }) => {
-  const [l, a] = g(!1);
-  if (c)
-    return /* @__PURE__ */ t(n, { icon: i?.icon, titleProps: { children: e }, loading: !0 });
-  switch (m) {
+  const [l, m] = b(!1);
+  if (d)
+    return /* @__PURE__ */ t(r, { icon: i?.icon, titleProps: { children: e }, loading: !0 });
+  switch (h) {
     case "link":
       return /* @__PURE__ */ t(
-        n,
+        r,
         {
           ...i,
           titleProps: {
+            size: "md",
             children: e
           },
           descriptionProps: {
@@ -45,7 +47,7 @@ const M = ({
       );
     case "switch":
       return /* @__PURE__ */ t(
-        n,
+        r,
         {
           ...i,
           as: "div",
@@ -59,27 +61,48 @@ const M = ({
             children: s
           },
           controls: /* @__PURE__ */ t(
-            b,
+            P,
             {
               type: "checkbox",
               role: "switch",
-              "aria-labelledby": d,
-              name: h,
-              value: r,
-              checked: p,
-              onChange: u,
+              "aria-labelledby": u,
+              name: p,
+              value: n,
+              checked: f,
+              onChange: g,
               style: { marginRight: "0.5em" }
             }
           )
         }
       );
+    case "accordion":
+      return /* @__PURE__ */ t(
+        r,
+        {
+          ...i,
+          as: "button",
+          linkIcon: !0,
+          collapsible: !0,
+          expanded: a,
+          titleProps: {
+            children: e
+          },
+          descriptionProps: {
+            size: "xs",
+            weight: "normal",
+            variant: "subtle",
+            children: s
+          },
+          children: a && /* @__PURE__ */ t("div", { children: c })
+        }
+      );
     case "modal":
       return /* @__PURE__ */ t(
-        n,
+        r,
         {
           ...i,
           titleProps: {
-            size: r ? "xs" : "sm",
+            size: n ? "xs" : "sm",
             variant: "subtle",
             weight: "normal",
             children: e
@@ -87,32 +110,32 @@ const M = ({
           descriptionProps: {
             size: "sm",
             variant: "default",
-            children: s || r
+            children: s || n
           },
           as: "button",
           linkIcon: !0,
-          onClick: () => a(!0),
+          onClick: () => m(!0),
           expanded: l,
           children: l && /* @__PURE__ */ t(
-            x,
+            w,
             {
               ...o,
               icon: o?.icon || i?.icon,
               title: o?.title || e,
               open: l,
-              onClose: () => a(!1),
-              children: f
+              onClose: () => m(!1),
+              children: c
             }
           )
         }
       );
     default:
       return /* @__PURE__ */ t(
-        n,
+        r,
         {
           ...i,
           titleProps: {
-            size: r ? "xs" : "sm",
+            size: n ? "xs" : "sm",
             variant: "subtle",
             weight: "normal",
             children: e
@@ -120,12 +143,12 @@ const M = ({
           descriptionProps: {
             size: "sm",
             variant: "default",
-            children: s || r
+            children: s || n
           }
         }
       );
   }
 };
 export {
-  M as SettingsItem
+  O as SettingsItem
 };

package/dist/components/Settings/SettingsItemBase.js

@@ -1,73 +1,84 @@
-import { jsxs as a, jsx as s } from "react/jsx-runtime";
-import { h as f, H as m, B as h, v as B } from "../../ToolbarSearch-56Sm2j7P.js";
+import { jsxs as m, jsx as a, Fragment as g } from "react/jsx-runtime";
+import { h as u, H as c, B, v as C } from "../../ToolbarSearch-56Sm2j7P.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
+import { Typography as b } from "../Typography/Typography.js";
 import "../Typography/Link.js";
-import { ItemControls as b } from "../Item/ItemControls.js";
-import { ItemBase as v } from "../Item/ItemBase.js";
-import { ItemLink as R } from "../Item/ItemLink.js";
+import { ItemControls as w } from "../Item/ItemControls.js";
+import { ItemBase as R } from "../Item/ItemBase.js";
+import { ItemLink as j } from "../Item/ItemLink.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/SettingsItemBase.css';const j = "_item_1xpqe_1", w = "_media_1xpqe_24", C = "_link_1xpqe_38", H = "_linkIcon_1xpqe_48", S = "_label_1xpqe_54", g = "_controls_1xpqe_67", e = {
-  item: j,
-  media: w,
-  link: C,
-  linkIcon: H,
-  label: S,
-  controls: g
-}, O = ({
-  as: n,
-  ref: l,
-  hidden: r,
+import { S as H } from "../../ChevronUp-hn05LboH.js";
+import { S as z } from "../../ChevronDown-D_a7nb-G.js";
+import '../../assets/SettingsItemBase.css';const D = "_listItem_1p24v_1", F = "_summary_1p24v_23", L = "_item_1p24v_27", M = "_media_1p24v_45", T = "_link_1p24v_59", U = "_linkIcon_1p24v_69", q = "_label_1p24v_75", A = "_controls_1p24v_88", s = {
+  listItem: D,
+  summary: F,
+  item: L,
+  media: M,
+  link: T,
+  linkIcon: U,
+  label: q,
+  controls: A
+}, as = ({
+  as: p,
+  ref: _,
+  hidden: v,
+  disabled: e,
   loading: t,
-  color: c,
-  expanded: u,
-  icon: p,
-  label: _,
-  titleProps: d = {},
-  descriptionProps: x = {},
-  children: k,
-  highlightWords: o,
-  badge: i,
-  linkIcon: I,
-  controls: N,
-  ...q
-}) => /* @__PURE__ */ a(v, { as: "li", ref: l, className: e.item, color: c, "aria-hidden": r, "data-loading": t, children: [
-  /* @__PURE__ */ a(R, { ...q, className: e.link, as: n, children: [
-    /* @__PURE__ */ s(f, { icon: p, className: e.media }),
-    _ || /* @__PURE__ */ a("span", { className: e.label, children: [
-      /* @__PURE__ */ s(
-        m,
-        {
-          ...d,
-          as: "span",
-          highlightWords: o,
-          loading: t,
-          maxRows: 2,
-          className: e.title
-        }
-      ),
-      /* @__PURE__ */ s(
-        m,
-        {
-          ...x,
-          as: "span",
-          highlightWords: o,
-          loading: t,
-          maxRows: 2,
-          className: e.description
-        }
-      )
+  color: d,
+  collapsible: o,
+  expanded: i,
+  icon: I,
+  label: N,
+  titleProps: h = {},
+  descriptionProps: k = {},
+  summary: n,
+  children: f,
+  highlightWords: l,
+  badge: r,
+  linkIcon: x,
+  controls: y,
+  ...S
+}) => /* @__PURE__ */ m("li", { className: s.listItem, "data-collapsible": o, "data-expanded": i, children: [
+  /* @__PURE__ */ m(R, { ref: _, as: "div", className: s.item, color: d, "aria-hidden": v, "data-loading": t, children: [
+    /* @__PURE__ */ m(j, { ...S, className: s.link, disabled: e, as: p, children: [
+      /* @__PURE__ */ a(u, { icon: I, className: s.media }),
+      N || /* @__PURE__ */ m("span", { className: s.label, children: [
+        /* @__PURE__ */ a(
+          c,
+          {
+            ...h,
+            as: "span",
+            highlightWords: l,
+            loading: t,
+            maxRows: 2,
+            className: s.title
+          }
+        ),
+        /* @__PURE__ */ a(
+          c,
+          {
+            ...k,
+            as: "span",
+            highlightWords: l,
+            loading: t,
+            maxRows: 2,
+            className: s.description
+          }
+        )
+      ] })
+    ] }),
+    !e && /* @__PURE__ */ m(g, { children: [
+      /* @__PURE__ */ a(w, { className: s.controls, children: y }),
+      r && /* @__PURE__ */ a(B, { ...r }),
+      o && (i ? /* @__PURE__ */ a(H, { className: s.linkIcon }) : /* @__PURE__ */ a(z, { className: s.linkIcon })) || x && /* @__PURE__ */ a(C, { className: s.linkIcon })
     ] })
   ] }),
-  /* @__PURE__ */ a(b, { className: e.controls, children: [
-    N,
-    i && /* @__PURE__ */ s(h, { ...i }),
-    I && /* @__PURE__ */ s(B, { className: e.linkIcon })
-  ] }),
-  k
+  n && /* @__PURE__ */ a(b, { className: s.summary, size: "xs", variant: "subtle", children: n }),
+  f
 ] });
 export {
-  O as SettingsItemBase
+  as as SettingsItemBase
 };

package/dist/components/Settings/SettingsList.js

@@ -1,39 +1,42 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import { Fragment as m, createElement as d } from "react";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { Fragment as c, createElement as d } from "react";
 import "../../index-p1eeF8LQ.js";
-import { useMenu as f } from "../../hooks/useMenu.js";
+import { useMenu as N } from "../../hooks/useMenu.js";
 import { H as u } from "../../ToolbarSearch-56Sm2j7P.js";
 import "../Typography/Link.js";
 import "../Button/Button.js";
+import { s } from "../../settlingsList.module-So3_AYgj.js";
 import "react-dom";
-import { Divider as h } from "../Divider/Divider.js";
-import { List as y } from "../List/List.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as S } from "../Page/Flex.js";
-import { SettingsItem as v } from "./SettingsItem.js";
-import { SettingsSection as j } from "./SettingsSection.js";
-const q = ({ items: s, groups: p = {}, sortGroupBy: n }) => {
-  const { menu: c } = f({
-    items: s,
-    groups: p,
+import { SettingsItem as g } from "./SettingsItem.js";
+const w = ({ items: h, variant: i = "default", groups: f = {}, sortGroupBy: y }) => {
+  const { menu: p } = N({
+    items: h,
+    groups: f,
     groupByKey: "groupId",
     keyboardEvents: !1,
-    sortGroupBy: n
+    sortGroupBy: y
   });
-  return /* @__PURE__ */ r(S, { as: "div", spacing: "page", direction: "col", children: c?.map((i, l) => {
-    const e = i.props || {};
-    return /* @__PURE__ */ o(m, { children: [
-      e?.title && /* @__PURE__ */ r(u, { size: "lg", children: e.title }),
-      /* @__PURE__ */ r(j, { children: /* @__PURE__ */ r(y, { size: "sm", children: i?.items.map((a, t) => {
-        const g = a.props || {};
-        return /* @__PURE__ */ o(m, { children: [
-          t > 0 && /* @__PURE__ */ r(h, { as: "li" }),
-          /* @__PURE__ */ d(v, { ...g, key: "settings-list-item" + t })
-        ] }, t);
+  return i === "menu" ? /* @__PURE__ */ t("div", { className: s.section, "data-variant": i, children: p?.map((e, o) => {
+    const r = e.props || {};
+    return /* @__PURE__ */ a(c, { children: [
+      r?.title && /* @__PURE__ */ t(u, { size: "xs", weight: "normal", variant: "subtle", children: r.title }),
+      /* @__PURE__ */ t("ul", { className: s.list, children: e?.items.map((m, n) => {
+        const l = m.props || {};
+        return /* @__PURE__ */ d(g, { ...l, key: "settings-list-item" + n });
+      }) })
+    ] }, o);
+  }) }) : /* @__PURE__ */ t("div", { className: s.section, "data-variant": i, children: p?.map((e, o) => {
+    const r = e.props || {};
+    return /* @__PURE__ */ a(c, { children: [
+      r?.title && /* @__PURE__ */ t(u, { size: "lg", children: r.title }),
+      /* @__PURE__ */ t("section", { className: s.group, children: /* @__PURE__ */ t("ul", { className: s.list, children: e?.items.map((m, n) => {
+        const l = m.props || {};
+        return /* @__PURE__ */ d(g, { ...l, key: "settings-list-item" + n });
       }) }) })
-    ] }, l);
+    ] }, o);
   }) });
 };
 export {
-  q as SettingsList
+  w as SettingsList
 };

package/dist/components/Settings/SettingsSection.js

@@ -6,17 +6,17 @@ import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
-import { Section as n } from "../Page/Section.js";
-import '../../assets/SettingsSection.css';const c = "_section_13ero_1", p = {
-  section: c
+import { Section as e } from "../Page/Section.js";
+import '../../assets/SettingsSection.css';const n = "_section_1ccux_1", p = {
+  section: n
 }, j = ({
   size: t = "sm",
   theme: o = "default",
   shadow: i = "xs",
   as: s,
   color: r,
-  children: e
-}) => /* @__PURE__ */ m(n, { as: s, size: t, color: r, theme: o, shadow: i, className: p.section, spacing: 2, children: e });
+  children: c
+}) => /* @__PURE__ */ m(e, { as: s, size: t, color: r, theme: o, shadow: i, className: p.section, spacing: 2, children: c });
 export {
   j as SettingsSection
 };

package/dist/components/index.js

@@ -69,7 +69,7 @@ import { ItemControls as ae } from "./Item/ItemControls.js";
 import { ItemSelect as xe } from "./Item/ItemSelect.js";
 import { ItemBase as ie } from "./Item/ItemBase.js";
 import { ItemLink as ne } from "./Item/ItemLink.js";
-import { LayoutBase as ce } from "./Layout/LayoutBase.js";
+import { L as ce } from "../LayoutBase-CAdjuw9Q.js";
 import { LayoutGrid as de } from "./Layout/LayoutGrid.js";
 import { LayoutBody as De } from "./Layout/LayoutBody.js";
 import { LayoutContent as Be } from "./Layout/LayoutContent.js";

package/dist/index.js

@@ -69,7 +69,7 @@ import { ItemControls as ae } from "./components/Item/ItemControls.js";
 import { ItemSelect as xe } from "./components/Item/ItemSelect.js";
 import { ItemBase as ie } from "./components/Item/ItemBase.js";
 import { ItemLink as ne } from "./components/Item/ItemLink.js";
-import { LayoutBase as ce } from "./components/Layout/LayoutBase.js";
+import { L as ce } from "./LayoutBase-CAdjuw9Q.js";
 import { LayoutGrid as de } from "./components/Layout/LayoutGrid.js";
 import { LayoutBody as De } from "./components/Layout/LayoutBody.js";
 import { LayoutContent as Be } from "./components/Layout/LayoutContent.js";

package/dist/settlingsList.module-So3_AYgj.js

@@ -0,0 +1,8 @@
+import './assets/settlingsList.css';const s = "_section_ncfus_1", t = "_group_ncfus_14", o = "_list_ncfus_21", c = {
+  section: s,
+  group: t,
+  list: o
+};
+export {
+  c as s
+};

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

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react';
-import { AccountListItemProps, AccountListProps } from '..';
+import { AccountListItemProps, AccountListProps, LayoutProps } from '..';
 import { UseAccountsProps } from '../../../examples';
 declare const meta: {
     title: string;
@@ -13,18 +13,26 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ includeGroups }: UseAccountsProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
-interface ControlledProps {
+interface ControlledPageQuery {
+    q?: string;
+}
+interface ControlledPageProps {
+    layout?: LayoutProps;
+    title?: string;
     includeGroups?: boolean;
     contextMenu?: boolean;
     collapsible?: boolean;
     color?: 'neutral';
     variant?: 'subtle' | 'tinted' | 'default';
     virtualized?: boolean;
+    query?: ControlledPageQuery;
 }
-export declare const Controlled: ({ includeGroups, collapsible, contextMenu, variant, color, virtualized, }: ControlledProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ControlledTinted: () => import("react/jsx-runtime").JSX.Element;
-export declare const Collapsible: () => import("react/jsx-runtime").JSX.Element;
-export declare const CollapsibleWithGroups: () => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledPage: ({ layout, title, includeGroups, collapsible, contextMenu, variant, virtualized, query, }: ControlledPageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CollapsiblePage: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountSelector: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountSettings: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountUserSettings: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountCompanySettings: () => import("react/jsx-runtime").JSX.Element;
 interface AccountDetailsProps extends AccountListItemProps {
     smsAlerts?: boolean;
     emailAlerts?: boolean;

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

@@ -1,11 +1,14 @@
 declare const meta: {
     title: string;
     tags: string[];
-    parameters: {};
+    parameters: {
+        layout: string;
+    };
     args: {};
 };
 export default meta;
 export declare const Default: () => import("react/jsx-runtime").JSX.Element;
 export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;
+export declare const ProfileActivityLog: () => import("react/jsx-runtime").JSX.Element;
 export declare const ActivityLogModal: () => import("react/jsx-runtime").JSX.Element;
 export declare const ActivityLogModalAdvanced: () => import("react/jsx-runtime").JSX.Element;

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

@@ -22,3 +22,4 @@ export declare const InfoExpanded: Story;
 export declare const ErrorBanner: Story;
 export declare const ErrorExpanded: Story;
 export declare const Colors: (args: BannerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StrongCompany: (args: BannerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Item/ItemBase.d.ts

@@ -2,11 +2,11 @@ import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
 import { Color } from '..';
 export type ItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ItemColor = Color;
-export type ItemBaseProps<T extends ElementType = 'li'> = {
+export type ItemBaseProps = {
     /** The element type to render as. */
-    as?: T;
+    as?: ElementType;
     /** Optional ref */
-    ref?: React.Ref<T>;
+    ref?: React.Ref<ElementType>;
     /** The tab index of the list item. */
     tabIndex?: number;
     /** The size of item. */
@@ -25,5 +25,5 @@ export type ItemBaseProps<T extends ElementType = 'li'> = {
     children?: ReactNode;
     /** Id of list item. */
     id?: string;
-} & Omit<ComponentPropsWithRef<T>, 'color' | 'size'>;
+} & Omit<ComponentPropsWithRef<ElementType>, 'color' | 'size'>;
 export declare const ItemBase: ({ id, ref, as, size, color, variant, hidden, disabled, className, children, ...rest }: ItemBaseProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
 import { LayoutColor, LayoutSidebarProps, LayoutTheme } from '.';
+import { BannerColor, BannerVariant } from '../Banner';
 import { BreadcrumbsProps } from '../Breadcrumbs';
 import { FooterProps } from '../Footer';
 import { GlobalHeaderProps } from '../GlobalHeader';
+import { SvgElement } from '../Icon';
 import { MenuProps } from '../Menu';
 import { SkipLinkProps } from '../SkipLink';
 interface SidebarProps extends LayoutSidebarProps {
@@ -12,7 +14,18 @@ interface SidebarProps extends LayoutSidebarProps {
 interface ContentProps {
     color?: LayoutColor;
 }
+export interface LayoutBannerProps {
+    title: string;
+    link?: {
+        label: string;
+        href: string;
+    };
+    color?: BannerColor;
+    variant?: BannerVariant;
+    icon?: SvgElement;
+}
 export interface LayoutProps {
+    banner?: LayoutBannerProps;
     color?: LayoutColor;
     theme?: LayoutTheme;
     header?: GlobalHeaderProps;
@@ -23,5 +36,5 @@ export interface LayoutProps {
     skipLink?: SkipLinkProps;
     breadcrumbs?: BreadcrumbsProps;
 }
-export declare const Layout: ({ color, theme, header, footer, sidebar, content, children, skipLink, breadcrumbs, }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Layout: ({ banner, color, theme, header, footer, sidebar, content, children, skipLink, breadcrumbs, }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,7 +4,7 @@ interface LayoutStoryArgs extends LayoutProps {
 }
 declare const meta: {
     title: string;
-    component: ({ color, theme, header, footer, sidebar, content, children, skipLink, breadcrumbs, }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ banner, color, theme, header, footer, sidebar, content, children, skipLink, breadcrumbs, }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };
@@ -46,4 +46,6 @@ export declare const HiddenSidebar: (args: LayoutStoryArgs) => import("react/jsx
 export declare const Fullscreen: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const Profile: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const SidebarReference: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const WithBanner: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomBanner: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const InboxLayout: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
 export type LayoutColor = 'neutral' | 'company' | 'person';
-export type LayoutTheme = 'default' | 'subtle' | 'neutral' | 'inbox';
+export type LayoutTheme = 'default' | 'subtle' | 'neutral' | 'inbox' | 'settings';
 export interface LayoutBaseProps {
     color?: LayoutColor;
     theme?: LayoutTheme /** TODO: Should be renamed to variant */;
     currentId?: string;
+    bannerHeight?: number;
     children?: ReactNode;
 }
 /**
@@ -20,4 +21,4 @@ export interface LayoutBaseProps {
  *  - Footer
  *
  */
-export declare const LayoutBase: ({ currentId, color, theme, children }: LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LayoutBase: ({ currentId, color, theme, bannerHeight, children }: LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Settings/SettingsItem.d.ts

@@ -1,6 +1,6 @@
 import { InputProps, SettingsItemBaseProps, SettingsModalProps } from '..';
 import { ReactNode } from 'react';
-export type SettingsItemVariant = 'default' | 'link' | 'modal' | 'switch';
+export type SettingsItemVariant = 'default' | 'link' | 'modal' | 'accordion' | 'switch';
 export interface SettingsItemModalProps {
     icon?: SettingsModalProps['icon'];
     title?: SettingsModalProps['title'];
@@ -19,4 +19,4 @@ export interface SettingsItemProps extends SettingsItemBaseProps {
     modalProps?: SettingsItemModalProps;
     children?: ReactNode;
 }
-export declare const SettingsItem: ({ loading, variant, id, name, title, value, description, checked, onChange, modalProps, children, ...props }: SettingsItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsItem: ({ loading, variant, id, name, title, value, description, checked, onChange, modalProps, expanded, children, ...props }: SettingsItemProps) => import("react/jsx-runtime").JSX.Element;