@altinn/altinn-components 0.9.1 → 0.10.1

package/dist/components/List/ListItemHeader.stories.js

@@ -1,27 +1,27 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Fragment as s, useState as g } from "react";
+import { Fragment as d, useState as g } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
+import { Button as k } from "../Button/Button.js";
 import { MetaItem as r } from "../Meta/MetaItem.js";
-import { ListItemHeader as t } from "./ListItemHeader.js";
 import "../RootProvider/RootProvider.js";
-import { ListBase as d } from "./ListBase.js";
-import { Button as k } from "../Button/Button.js";
-const l = ["lg", "md", "sm", "xs"], w = {
+import { ListItemHeader as t } from "./ListItemHeader.js";
+import { ListBase as c } from "./ListBase.js";
+import { List as b } from "./List.js";
+const l = ["lg", "md", "sm", "xs"], T = {
   title: "List/ListItemHeader",
   component: t,
   tags: ["autodocs"],
   parameters: {},
   args: {
-    id: "id",
     title: "Title",
     description: "Description",
     size: "md"
   }
-}, D = {
+}, B = {
   args: {}
-}, T = (n) => /* @__PURE__ */ a(d, { children: [
+}, E = (n) => /* @__PURE__ */ a(c, { children: [
   /* @__PURE__ */ e(t, { ...n }),
   /* @__PURE__ */ e(r, { children: "No media" }),
   /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear" }),
@@ -106,11 +106,11 @@ const l = ["lg", "md", "sm", "xs"], w = {
     }
   ),
   /* @__PURE__ */ e(r, { children: "Company group" })
-] }), B = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
+] }), S = (n) => /* @__PURE__ */ e(c, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(d, { children: [
   /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", size: i, loading: !0 }),
   /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", size: i, loading: !1 }),
   /* @__PURE__ */ e(r, { children: i })
-] }, i)) }), E = (n) => /* @__PURE__ */ a(d, { children: [
+] }, i)) }), M = (n) => /* @__PURE__ */ a(c, { children: [
   /* @__PURE__ */ e(t, { ...n, linkIcon: "chevron-right" }),
   /* @__PURE__ */ e(r, { children: "Link icon, emphasising that this will take you somewhere" }),
   /* @__PURE__ */ e(t, { ...n, linkIcon: "chevron-right", linkText: "Åpne" }),
@@ -126,9 +126,10 @@ const l = ["lg", "md", "sm", "xs"], w = {
       badge: { label: "Admin" },
       linkIcon: "chevron-right",
       menu: {
+        id: "menu",
         items: [
-          { title: "Innstillinger", icon: "cog" },
-          { title: "Aktivitetslogg", icon: "clock-dashed" }
+          { id: "settings", title: "Innstillinger", icon: "cog" },
+          { id: "log", title: "Aktivitetslogg", icon: "clock-dashed" }
         ]
       }
     }
@@ -142,7 +143,7 @@ const l = ["lg", "md", "sm", "xs"], w = {
     }
   ),
   /* @__PURE__ */ e(r, { children: "List item with custom controls" })
-] }), M = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
+] }), _ = (n) => /* @__PURE__ */ e(c, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(d, { children: [
   /* @__PURE__ */ e(
     t,
     {
@@ -165,27 +166,18 @@ const l = ["lg", "md", "sm", "xs"], w = {
     }
   ),
   /* @__PURE__ */ e(r, { children: i })
-] }, i)) }), S = (n) => /* @__PURE__ */ a(d, { children: [
+] }, i)) }), j = (n) => /* @__PURE__ */ a(c, { children: [
   /* @__PURE__ */ e(t, { ...n }),
   /* @__PURE__ */ e(r, { children: "Default" }),
-  /* @__PURE__ */ e(t, { ...n, color: "accent" }),
+  /* @__PURE__ */ e(t, { ...n }),
   /* @__PURE__ */ e(r, { children: "Accent" })
-] }), _ = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
-  /* @__PURE__ */ e(
-    t,
-    {
-      ...n,
-      icon: "teddy-bear",
-      size: i,
-      selected: i === (n == null ? void 0 : n.size),
-      linkIcon: "chevron-right"
-    }
-  ),
+] }), P = (n) => /* @__PURE__ */ e(c, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(d, { children: [
+  /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", selected: i === (n == null ? void 0 : n.size), linkIcon: "chevron-right" }),
   /* @__PURE__ */ e(r, { children: i })
-] }, i)) }), j = (n) => {
-  const [i, p] = g(!1), m = () => {
-    p((o) => !o);
-  }, c = [
+] }, i)) }), G = (n) => {
+  const [i, s] = g(!1), m = () => {
+    s((o) => !o);
+  }, p = [
     {
       name: "Per Ove Ludvigsen",
       role: "Sportlig leder",
@@ -206,7 +198,7 @@ const l = ["lg", "md", "sm", "xs"], w = {
       role: "Toppspillerutvikler",
       rights: "Ingen rettigheter"
     }
-  ], h = c == null ? void 0 : c.map((o) => ({
+  ], h = p.map((o) => ({
     avatar: {
       ...o,
       type: "person"
@@ -216,12 +208,12 @@ const l = ["lg", "md", "sm", "xs"], w = {
     badge: { label: o == null ? void 0 : o.rights },
     linkIcon: "menu-elipsis-horizontal"
   })), u = {
-    items: c == null ? void 0 : c.map((o) => ({
+    items: p.map((o) => ({
       name: o == null ? void 0 : o.name,
       type: "person"
     }))
   };
-  return /* @__PURE__ */ a(s, { children: [
+  return /* @__PURE__ */ a(d, { children: [
     /* @__PURE__ */ e(
       t,
       {
@@ -233,17 +225,17 @@ const l = ["lg", "md", "sm", "xs"], w = {
         as: "button"
       }
     ),
-    i && /* @__PURE__ */ e(List, { size: "sm", spacing: "none", items: h })
+    i && /* @__PURE__ */ e(b, { defaultItemSize: "sm", spacing: "none", items: h })
   ] });
 };
 export {
-  j as Collapsible,
-  S as Colors,
-  E as Controls,
-  D as Default,
-  B as Loading,
-  T as MediaTypes,
-  M as Selectable,
-  _ as Sizes,
-  w as default
+  G as Collapsible,
+  j as Colors,
+  M as Controls,
+  B as Default,
+  S as Loading,
+  E as MediaTypes,
+  _ as Selectable,
+  P as Sizes,
+  T as default
 };

package/dist/components/List/ListItemLabel.js

@@ -1,14 +1,14 @@
 import { jsx as e, jsxs as r, Fragment as o } from "react/jsx-runtime";
 import { Skeleton as a } from "../Skeleton/Skeleton.js";
-import '../../assets/ListItemLabel.css';const d = "_label_1uuk4_3", m = "_title_1uuk4_36", p = "_description_1uuk4_42", s = {
+import '../../assets/ListItemLabel.css';const d = "_label_5sijq_3", m = "_title_5sijq_27", p = "_description_5sijq_34", s = {
   label: d,
   title: m,
   description: p
-}, h = ({ loading: l = !1, size: t = "sm", title: c, description: n, children: i }) => /* @__PURE__ */ e("span", { className: s.label, "data-size": t, children: i || /* @__PURE__ */ r(o, { children: [
-  /* @__PURE__ */ e("h2", { className: s.title, "data-size": t, children: /* @__PURE__ */ e(a, { loading: l, children: c }) }),
+}, b = ({ loading: i = !1, size: t = "sm", title: c, description: n, children: l }) => /* @__PURE__ */ e("span", { className: s.label, "data-size": t, children: l || /* @__PURE__ */ r(o, { children: [
+  /* @__PURE__ */ e("h2", { className: s.title, "data-size": t, children: /* @__PURE__ */ e(a, { loading: i, children: c }) }),
   " ",
-  /* @__PURE__ */ e("p", { className: s.description, "data-size": t, children: /* @__PURE__ */ e(a, { loading: l, children: n }) })
+  /* @__PURE__ */ e("p", { className: s.description, "data-size": t, children: /* @__PURE__ */ e(a, { loading: i, children: n }) })
 ] }) });
 export {
-  h as ListItemLabel
+  b as ListItemLabel
 };

package/dist/components/List/ListItemLink.d.ts

@@ -0,0 +1,16 @@
+import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
+import { ListItemSize } from './ListItemBase';
+export interface ListItemLinkProps {
+    size?: ListItemSize;
+    as?: ElementType;
+    href?: string;
+    onClick?: () => void;
+    onKeyPress?: KeyboardEventHandler;
+    tabIndex?: number;
+    loading?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const ListItemLink: ({ size, as, loading, disabled, selected, href, onClick, onKeyPress, tabIndex, className, children, }: ListItemLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItemLink.js

@@ -0,0 +1,35 @@
+import { jsx as c } from "react/jsx-runtime";
+import { c as x } from "../../index-L8X2o7IH.js";
+import '../../assets/ListItemLink.css';const _ = "_link_4l8am_1", b = {
+  link: _
+}, j = ({
+  size: n,
+  as: s,
+  loading: e,
+  disabled: i,
+  selected: r,
+  href: o,
+  onClick: t,
+  onKeyPress: a,
+  tabIndex: p,
+  className: d,
+  children: l
+}) => /* @__PURE__ */ c(
+  s || "button",
+  {
+    className: x(b.link, d),
+    href: o,
+    onKeyPress: (m) => {
+      m.key === "Enter" && (t == null || t()), a == null || a(m);
+    },
+    onClick: t,
+    tabIndex: p,
+    "aria-disabled": e || i,
+    "aria-selected": r,
+    "data-size": n,
+    children: l
+  }
+);
+export {
+  j as ListItemLink
+};

package/dist/components/List/ListItemMedia.d.ts

@@ -1,15 +1,13 @@
 import { ReactNode } from 'react';
 import { AvatarGroupProps, AvatarProps } from '../Avatar';
 import { IconName } from '../Icon';
-import { ListItemColor, ListItemSize } from './ListItemBase';
-interface ListItemMediaProps {
+import { ListItemSize } from './ListItemBase';
+export interface ListItemMediaProps {
     loading?: boolean;
-    color?: ListItemColor;
     size?: ListItemSize;
     icon?: IconName;
     avatar?: AvatarProps;
     avatarGroup?: AvatarGroupProps;
     children?: ReactNode;
 }
-export declare const ListItemMedia: ({ loading, size, color, icon, avatar, avatarGroup, children, }: ListItemMediaProps) => false | import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const ListItemMedia: ({ loading, size, icon, avatar, avatarGroup, children }: ListItemMediaProps) => false | import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItemMedia.js

@@ -1,47 +1,39 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { Avatar as x } from "../Avatar/Avatar.js";
-import { AvatarGroup as f } from "../Avatar/AvatarGroup.js";
-import { Icon as n } from "../Icon/Icon.js";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { Avatar as d } from "../Avatar/Avatar.js";
+import { AvatarGroup as v } from "../Avatar/AvatarGroup.js";
+import { Icon as l } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
-import { Skeleton as u } from "../Skeleton/Skeleton.js";
-import '../../assets/ListItemMedia.css';const p = "_media_14b0z_3", v = "_icon_14b0z_24", a = {
+import { Skeleton as f } from "../Skeleton/Skeleton.js";
+import '../../assets/ListItemMedia.css';const p = "_media_1hvg4_3", u = "_icon_1hvg4_21", m = {
   media: p,
-  icon: v
-}, m = {
+  icon: u
+}, a = {
   avatar: {
-    xs: "xs",
+    xs: "sm",
     sm: "sm",
     md: "md",
-    lg: "lg",
-    xl: "xl"
+    lg: "md",
+    xl: "lg"
   },
   avatarGroup: {
-    xs: "xs",
-    sm: "xs",
-    md: "sm",
+    xs: "sm",
+    sm: "sm",
+    md: "md",
     lg: "md",
     xl: "lg"
   }
-}, I = ({
-  loading: l,
-  size: t = "sm",
-  color: c = "default",
-  icon: s,
-  avatar: o,
-  avatarGroup: e,
-  children: i
-}) => !s && !o && !e && !i ? !1 : l ? /* @__PURE__ */ r(u, { loading: l, variant: "circle", size: t, className: a.media, children: /* @__PURE__ */ r(n, { name: "airplane", variant: "outline", className: a.icon }) }) : /* @__PURE__ */ d("div", { className: a.media, "data-size": t, "data-color": s ? c : null, children: [
-  s && /* @__PURE__ */ r(n, { name: s, variant: "outline", className: a.icon }) || o && /* @__PURE__ */ r(x, { ...o, size: m == null ? void 0 : m.avatar[t], className: a.avatar }) || e && /* @__PURE__ */ r(
-    f,
+}, G = ({ loading: i, size: s = "sm", icon: t, avatar: o, avatarGroup: e, children: n }) => !t && !o && !e && !n ? !1 : i ? /* @__PURE__ */ r(f, { loading: i, variant: "circle", size: s, className: m.media, children: /* @__PURE__ */ r(l, { name: "airplane", variant: "outline", className: m.icon }) }) : /* @__PURE__ */ c("div", { className: m.media, "data-size": s, children: [
+  t && /* @__PURE__ */ r(l, { name: t, variant: "outline", className: m.icon }) || o && /* @__PURE__ */ r(d, { ...o, size: a == null ? void 0 : a.avatar[s], className: m.avatar }) || e && /* @__PURE__ */ r(
+    v,
     {
       ...e,
-      size: m == null ? void 0 : m.avatarGroup[t],
-      className: a.avatarGroup
+      size: a == null ? void 0 : a.avatarGroup[s],
+      className: m.avatarGroup
     }
   ),
-  i
+  n
 ] });
 export {
-  I as ListItemMedia
+  G as ListItemMedia
 };

package/dist/components/List/ListItemSelect.js

@@ -1,15 +1,15 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { c as a } from "../../index-L8X2o7IH.js";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { CheckboxIcon as i } from "../Icon/CheckboxIcon.js";
-import '../../assets/ListItemSelect.css';const r = "_label_hd89l_1", m = "_input_hd89l_38", p = "_icon_hd89l_43", t = {
-  label: r,
-  input: m,
-  icon: p
-}, h = ({ size: l, checked: e = !1, onChange: s, className: c }) => /* @__PURE__ */ n("label", { className: a(t.label, c), "data-size": l, children: [
-  /* @__PURE__ */ o("input", { type: "checkbox", checked: e, onChange: s, className: t.input, tabIndex: -1 }),
-  /* @__PURE__ */ o(i, { hover: !0, checked: e, className: t.icon })
+import { CheckboxIcon as a } from "../Icon/CheckboxIcon.js";
+import '../../assets/ListItemSelect.css';const i = "_label_1gmbm_1", r = "_input_1gmbm_32", b = "_icon_1gmbm_37", t = {
+  label: i,
+  input: r,
+  icon: b
+}, f = ({ size: s, checked: e = !1, onChange: c, className: n }) => /* @__PURE__ */ l("label", { className: m(t.label, n), "data-size": s, children: [
+  /* @__PURE__ */ o("input", { type: "checkbox", checked: e, onChange: c, className: t.input, tabIndex: -1 }),
+  /* @__PURE__ */ o(a, { hover: !0, checked: e, className: t.icon })
 ] });
 export {
-  h as ListItemSelect
+  f as ListItemSelect
 };

package/dist/components/List/index.d.ts

@@ -1,4 +1,5 @@
 export * from './ListItemBase';
+export * from './ListItemLink';
 export * from './ListItemHeader';
 export * from './ListItemLabel';
 export * from './ListItemMedia';

package/dist/components/List/index.js

@@ -1,20 +1,22 @@
 import { ListItemBase as o } from "./ListItemBase.js";
-import { ListItemHeader as m } from "./ListItemHeader.js";
-import { ListItemLabel as i } from "./ListItemLabel.js";
-import { ListItemMedia as f } from "./ListItemMedia.js";
-import { ListItemControls as x } from "./ListItemControls.js";
-import { ListItemSelect as a } from "./ListItemSelect.js";
-import { ListItem as d } from "./ListItem.js";
-import { ListBase as b } from "./ListBase.js";
-import { List as n } from "./List.js";
+import { ListItemLink as m } from "./ListItemLink.js";
+import { ListItemHeader as i } from "./ListItemHeader.js";
+import { ListItemLabel as f } from "./ListItemLabel.js";
+import { ListItemMedia as x } from "./ListItemMedia.js";
+import { ListItemControls as a } from "./ListItemControls.js";
+import { ListItemSelect as d } from "./ListItemSelect.js";
+import { ListItem as B } from "./ListItem.js";
+import { ListBase as c } from "./ListBase.js";
+import { List as C } from "./List.js";
 export {
-  n as List,
-  b as ListBase,
-  d as ListItem,
+  C as List,
+  c as ListBase,
+  B as ListItem,
   o as ListItemBase,
-  x as ListItemControls,
-  m as ListItemHeader,
-  i as ListItemLabel,
-  f as ListItemMedia,
-  a as ListItemSelect
+  a as ListItemControls,
+  i as ListItemHeader,
+  f as ListItemLabel,
+  m as ListItemLink,
+  x as ListItemMedia,
+  d as ListItemSelect
 };

package/dist/components/Menu/MenuItem.stories.js

@@ -5,10 +5,10 @@ import "../../index-L8X2o7IH.js";
 import "react";
 import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
-import { MetaItem as p } from "../Meta/MetaItem.js";
-import "../RootProvider/RootProvider.js";
 import { MenuItem as o } from "./MenuItem.js";
-import { MenuBase as m } from "./MenuBase.js";
+import { MenuBase as p } from "./MenuBase.js";
+import { MetaItem as m } from "../Meta/MetaItem.js";
+import "../RootProvider/RootProvider.js";
 const I = {
   title: "Menu/MenuItem",
   component: o,
@@ -117,9 +117,9 @@ const I = {
   }
 }, L = () => {
   const t = ["global", "neutral", "company", "person", "global-dark"], a = ["neutral", "subtle", "strong", "company", "person"];
-  return /* @__PURE__ */ n("div", { style: { display: "flex", width: "100%" }, children: t.map((e) => /* @__PURE__ */ n("div", { style: { flexGrow: 1 }, children: /* @__PURE__ */ n(l, { theme: e, children: /* @__PURE__ */ n(m, { children: a.map((r) => /* @__PURE__ */ s("div", { children: [
+  return /* @__PURE__ */ n("div", { style: { display: "flex", width: "100%" }, children: t.map((e) => /* @__PURE__ */ n("div", { style: { flexGrow: 1 }, children: /* @__PURE__ */ n(l, { theme: e, children: /* @__PURE__ */ n(p, { children: a.map((r) => /* @__PURE__ */ s("div", { children: [
     /* @__PURE__ */ n(o, { icon: "inbox", title: "Title", color: r, id: "inbox" }),
-    /* @__PURE__ */ n(p, { children: e + "/" + r })
+    /* @__PURE__ */ n(m, { children: e + "/" + r })
   ] }, r)) }) }) }, e)) });
 };
 export {

package/dist/components/Menu/MenuItems.js

@@ -5,11 +5,11 @@ import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import { useMenu as B } from "../../hooks/useMenu.js";
 import "../Autocomplete/AutocompleteBase.js";
-import "../RootProvider/RootProvider.js";
 import { MenuItem as E } from "./MenuItem.js";
 import { MenuSearch as G } from "./MenuSearch.js";
 import { MenuHeader as H } from "./MenuHeader.js";
 import { MenuList as K, MenuListItem as d } from "./MenuBase.js";
+import "../RootProvider/RootProvider.js";
 const S = ({
   level: l = 0,
   expanded: v,
@@ -30,7 +30,7 @@ const S = ({
     h.map((t, s) => {
       const n = (t == null ? void 0 : t.props) || {}, { title: I, divider: y = !0 } = n, F = h[s + 1];
       return /* @__PURE__ */ a(k, { children: [
-        (l ?? s) > 0 && y ? /* @__PURE__ */ i(d, { role: "separator" }) : "",
+        (l > 0 || s) && y ? /* @__PURE__ */ i(d, { role: "separator" }) : "",
         I && /* @__PURE__ */ i(d, { children: /* @__PURE__ */ i(H, { title: I }) }),
         t == null ? void 0 : t.items.filter((r) => {
           var m;

package/dist/components/Menu/MenuSearch.js

@@ -4,8 +4,8 @@ import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import "../RootProvider/RootProvider.js";
 import { IconButton as m } from "../Button/IconButton.js";
+import "../RootProvider/RootProvider.js";
 import '../../assets/MenuSearch.css';const p = "_field_10py0_2", l = "_icon_10py0_7", _ = "_input_10py0_16", f = "_clear_10py0_33", o = {
   field: p,
   icon: l,

package/dist/components/Meta/MetaBase.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { MetaItemSize } from './MetaItemBase';
 export interface MetaBaseProps {
     size?: MetaItemSize;
+    className?: string;
     children?: ReactNode;
 }
-export declare const MetaBase: ({ size, children }: MetaBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetaBase: ({ size, className, children }: MetaBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Meta/MetaBase.js

@@ -1,7 +1,8 @@
-import { jsx as s } from "react/jsx-runtime";
-import '../../assets/MetaBase.css';const a = "_meta_1hcve_1", m = {
-  meta: a
-}, c = ({ size: t = "xs", children: e }) => /* @__PURE__ */ s("div", { className: m.meta, "data-size": t, children: e });
+import { jsx as a } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
+import '../../assets/MetaBase.css';const o = "_meta_17kd2_1", c = {
+  meta: o
+}, i = ({ size: t = "xs", className: s, children: e }) => /* @__PURE__ */ a("section", { className: m(c.meta, s), "data-size": t, children: e });
 export {
-  c as MetaBase
+  i as MetaBase
 };

package/dist/components/Meta/MetaItem.d.ts

@@ -3,6 +3,7 @@ import { IconName } from '../Icon';
 import { MetaItemSize, MetaItemVariant } from './MetaItemBase';
 export interface MetaItemProps {
     loading?: boolean;
+    reverse?: boolean;
     /**  Render as element */
     as?: ElementType;
     /** Meta size */
@@ -18,4 +19,4 @@ export interface MetaItemProps {
     /** OnClick handler */
     onClick?: () => void;
 }
-export declare const MetaItem: ({ loading, size, variant, icon, children, ...rest }: MetaItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetaItem: ({ loading, reverse, size, variant, icon, children, ...rest }: MetaItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Meta/MetaItem.js

@@ -1,12 +1,20 @@
-import { jsx as e, jsxs as x } from "react/jsx-runtime";
-import { Skeleton as M } from "../Skeleton/Skeleton.js";
-import { MetaItemBase as a } from "./MetaItemBase.js";
-import { MetaItemLabel as s } from "./MetaItemLabel.js";
-import { MetaItemMedia as I } from "./MetaItemMedia.js";
-const j = ({ loading: m, size: t = "xs", variant: r = "text", icon: o, children: p, ...f }) => /* @__PURE__ */ e(a, { variant: r, size: t, ...f, children: /* @__PURE__ */ x(M, { loading: m, children: [
-  !m && o && /* @__PURE__ */ e(I, { size: t, icon: o }),
-  /* @__PURE__ */ e(s, { variant: r, size: t, children: p })
+import { jsx as e, jsxs as M } from "react/jsx-runtime";
+import { Skeleton as a } from "../Skeleton/Skeleton.js";
+import { MetaItemBase as s } from "./MetaItemBase.js";
+import { MetaItemLabel as I } from "./MetaItemLabel.js";
+import { MetaItemMedia as i } from "./MetaItemMedia.js";
+const n = ({
+  loading: m,
+  reverse: p,
+  size: t = "xs",
+  variant: r = "text",
+  icon: o,
+  children: f,
+  ...x
+}) => /* @__PURE__ */ e(s, { reverse: p, variant: r, size: t, ...x, children: /* @__PURE__ */ M(a, { loading: m, children: [
+  !m && o && /* @__PURE__ */ e(i, { size: t, icon: o }),
+  /* @__PURE__ */ e(I, { variant: r, size: t, children: f })
 ] }) });
 export {
-  j as MetaItem
+  n as MetaItem
 };

package/dist/components/Meta/MetaItem.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ loading, size, variant, icon, children, ...rest }: import('./MetaItem').MetaItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, reverse, size, variant, icon, children, ...rest }: import('./MetaItem').MetaItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/dist/components/Meta/MetaItemBase.d.ts

@@ -4,6 +4,7 @@ export type MetaItemSize = 'xs';
 export type MetaItemColor = 'subtle';
 export interface MetaItemBaseProps {
     as?: ElementType;
+    reverse?: boolean;
     variant?: MetaItemVariant;
     size?: MetaItemSize;
     color?: MetaItemColor;
@@ -12,4 +13,4 @@ export interface MetaItemBaseProps {
     className?: string;
     children?: ReactNode;
 }
-export declare const MetaItemBase: ({ as, variant, size, color, progress, datetime, className, children, ...rest }: MetaItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetaItemBase: ({ as, reverse, variant, size, color, progress, datetime, className, children, ...rest }: MetaItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Meta/MetaItemBase.js

@@ -1,30 +1,32 @@
-import { jsx as i } from "react/jsx-runtime";
-import { c as p } from "../../index-L8X2o7IH.js";
-import '../../assets/MetaItemBase.css';const d = "_item_2agc0_1", x = {
-  item: d
-}, g = ({
+import { jsx as _ } from "react/jsx-runtime";
+import { c as d } from "../../index-L8X2o7IH.js";
+import '../../assets/MetaItemBase.css';const v = "_item_suzps_1", x = "_reverse_suzps_27", e = {
+  item: v,
+  reverse: x
+}, f = ({
   as: t,
-  variant: a = "text",
-  size: e,
+  reverse: s,
+  variant: r = "text",
+  size: a,
   color: o,
-  progress: s,
-  datetime: m,
-  className: n,
-  children: r,
-  ...c
-}) => /* @__PURE__ */ i(
+  progress: m,
+  datetime: n,
+  className: c,
+  children: i,
+  ...p
+}) => /* @__PURE__ */ _(
   t || "span",
   {
-    "data-size": e,
+    "data-size": a,
     "data-color": o,
-    "data-variant": a,
-    "data-progress": s,
-    dateTime: m,
-    className: p(x.item, n),
-    ...c,
-    children: r
+    "data-variant": r,
+    "data-progress": m,
+    dateTime: n,
+    className: d(e.item, { [e.reverse]: s }, c),
+    ...p,
+    children: i
   }
 );
 export {
-  g as MetaItemBase
+  f as MetaItemBase
 };

package/dist/components/Meta/MetaItemLabel.js

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
-import '../../assets/MetaItemLabel.css';const s = "_label_8r5nb_1", n = {
+import '../../assets/MetaItemLabel.css';const s = "_label_g4t18_1", n = {
   label: s
-}, b = ({ size: a = "xs", variant: t = "text", children: e }) => /* @__PURE__ */ l("span", { className: n.label, "data-variant": t, "data-size": a, children: e });
+}, r = ({ size: a = "xs", variant: t = "text", children: e }) => /* @__PURE__ */ l("span", { className: n.label, "data-variant": t, "data-size": a, children: e });
 export {
-  b as MetaItemLabel
+  r as MetaItemLabel
 };

package/dist/components/Page/Article.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { SectionProps } from './Section';
+export interface ArticleProps extends SectionProps {
+    children?: ReactNode;
+}
+export declare const Article: ({ theme, children, ...props }: ArticleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Page/Article.js

@@ -0,0 +1,6 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Section as i } from "./Section.js";
+const a = ({ theme: r = "article", children: t, ...o }) => /* @__PURE__ */ e(i, { as: "article", theme: r, ...o, children: t });
+export {
+  a as Article
+};