@altinn/altinn-components 0.7.5 → 0.8.1

package/dist/components/List/ListItemBase.js

@@ -1,66 +1,32 @@
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { c as v } from "../../index-L8X2o7IH.js";
-import { ListItemSelect as w } from "./ListItemSelect.js";
-import '../../assets/ListItemBase.css';const B = "_item_i2afq_1", E = "_link_i2afq_78", d = {
-  item: B,
-  link: E
-}, z = ({
-  as: c,
-  size: t,
-  color: l,
-  shadow: o = "xs",
-  className: n,
-  style: f,
-  href: p,
-  onClick: a,
-  onKeyPress: e,
-  tabIndex: x,
-  loading: _,
-  disabled: h,
-  hidden: j = !1,
-  active: q = !1,
-  select: i,
-  selected: I,
-  expanded: s,
-  controls: L,
-  children: N
-}) => {
-  const b = c || "a";
-  return /* @__PURE__ */ u(
-    "article",
-    {
-      className: d.item,
-      "data-color": l,
-      "data-size": t,
-      "data-shadow": o,
-      "data-active": q,
-      "aria-hidden": j,
-      "aria-disabled": h || _,
-      "aria-selected": I,
-      "aria-expanded": s,
-      children: [
-        i && /* @__PURE__ */ r(w, { ...i, size: t }),
-        /* @__PURE__ */ r(
-          b,
-          {
-            className: v(d.link, n),
-            "data-size": t,
-            "aria-expanded": s,
-            style: f,
-            href: p,
-            onKeyPress: (m) => {
-              m.key === "Enter" && (a == null || a()), e == null || e(m);
-            },
-            onClick: a,
-            tabIndex: x,
-            children: N
-          }
-        ),
-        L
-      ]
-    }
-  );
-};
+import { jsx as o } from "react/jsx-runtime";
+import '../../assets/ListItemBase.css';const c = "_item_1isz3_1", f = {
+  item: c
+}, x = ({
+  size: e,
+  color: a = "default",
+  shadow: t = "xs",
+  loading: s,
+  disabled: i,
+  hidden: d = !1,
+  active: r = !1,
+  selected: n,
+  expanded: l,
+  children: m
+}) => /* @__PURE__ */ o(
+  "article",
+  {
+    className: f.item,
+    "data-color": a,
+    "data-size": e,
+    "data-shadow": a === "transparent" ? "none" : t,
+    "data-active": r,
+    "aria-hidden": d,
+    "aria-disabled": i || s,
+    "aria-selected": n,
+    "aria-expanded": l,
+    children: m
+  }
+);
 export {
-  z as ListItemBase
+  x as ListItemBase
 };

package/dist/components/List/ListItemControls.js

@@ -1,9 +1,9 @@
 import "react/jsx-runtime";
 import "../Badge/Badge.js";
-import { L as e } from "../../Autocomplete-hEFuiN2u.js";
+import { a } from "../../Autocomplete-Cb9fQrzy.js";
 import "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
 export {
-  e as ListItemControls
+  a as ListItemControls
 };

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

@@ -1,12 +1,35 @@
-import { ReactNode } from 'react';
+import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
 import { AvatarGroupProps, AvatarProps } from '../Avatar';
+import { BadgeProps } from '../Badge';
 import { IconName } from '../Icon';
 import { ListItemColor, ListItemSize } from './ListItemBase';
+import { ListItemMenuProps } from './ListItemMenu';
+import { ListItemSelectProps } from './ListItemSelect';
 export interface ListItemHeaderProps {
+    as?: ElementType;
+    href?: string;
+    onClick?: () => void;
+    onKeyPress?: KeyboardEventHandler;
+    tabIndex?: number;
+    /** Header is loading */
     loading?: boolean;
+    /** Header is disabled */
+    disabled?: boolean;
+    /** Header size */
     size?: ListItemSize;
+    /** Optional color */
     color?: ListItemColor;
+    /** Optional classname */
     className?: string;
+    /** Select controls */
+    select?: ListItemSelectProps;
+    /** Collapsible item, sets linkIcon to "chevron down" */
+    collapsible?: boolean;
+    /** Item is expanded, sets linkIcon to "chevron up" */
+    expanded?: boolean;
+    /** Title */
+    title?: string;
+    /** Description */
     description?: string;
     /** List item icon */
     icon?: IconName;
@@ -15,6 +38,16 @@ export interface ListItemHeaderProps {
     /** List item avatarGroup */
     avatarGroup?: AvatarGroupProps;
     /** Optional text indicating behaviour */
+    linkText?: string;
+    /** Optional icon indicating behaviour */
+    linkIcon?: IconName;
+    /** Optional badge */
+    badge?: BadgeProps;
+    /** Context menu */
+    menu?: ListItemMenuProps;
+    /** Custom controls */
+    controls?: ReactNode;
+    /** Custom label */
     children?: ReactNode;
 }
-export declare const ListItemHeader: ({ loading, size, color, icon, avatar, avatarGroup, className, children, }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemHeader: ({ as, loading, disabled, select, href, onClick, onKeyPress, tabIndex, collapsible, expanded, size, color, title, description, icon, avatar, avatarGroup, linkIcon, linkText, badge, menu, controls, className, children, }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItemHeader.js

@@ -1,31 +1,9 @@
-import { jsxs as c, jsx as h } from "react/jsx-runtime";
-import { c as i } from "../../index-L8X2o7IH.js";
-import { ListItemMedia as n } from "./ListItemMedia.js";
-import '../../assets/ListItemHeader.css';const p = "_header_70chu_1", x = {
-  header: p
-}, j = ({
-  loading: r,
-  size: e = "sm",
-  color: s,
-  icon: t,
-  avatar: a,
-  avatarGroup: m,
-  className: o,
-  children: d
-}) => /* @__PURE__ */ c("header", { className: i(x.header, o), "data-size": e, children: [
-  /* @__PURE__ */ h(
-    n,
-    {
-      loading: r,
-      size: e,
-      color: s,
-      icon: t,
-      avatar: a,
-      avatarGroup: m
-    }
-  ),
-  d
-] });
+import "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import { L as a } from "../../Autocomplete-Cb9fQrzy.js";
+import "./ListItemLabel.js";
+import "./ListItemMedia.js";
+import "./ListItemSelect.js";
 export {
-  j as ListItemHeader
+  a as ListItemHeader
 };

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

@@ -0,0 +1,248 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Fragment as s, useState as g } from "react";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { Button as k } from "../Button/Button.js";
+import "../RootProvider/RootProvider.js";
+import { MetaItem as r } from "../Meta/MetaItem.js";
+import { L as t } from "../../Autocomplete-Cb9fQrzy.js";
+import { ListBase as d } from "./ListBase.js";
+const l = ["lg", "md", "sm", "xs"], H = {
+  title: "List/ListItemHeader",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    id: "id",
+    title: "Title",
+    description: "Description",
+    size: "md"
+  }
+}, w = {
+  args: {}
+}, D = (n) => /* @__PURE__ */ a(d, { children: [
+  /* @__PURE__ */ e(t, { ...n }),
+  /* @__PURE__ */ e(r, { children: "No media" }),
+  /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear" }),
+  /* @__PURE__ */ e(r, { children: "Icon" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      avatar: {
+        type: "person",
+        name: "Erik Huseklepp"
+      }
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: "Person" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      avatar: {
+        type: "company",
+        name: "Sportsklubben Brann"
+      }
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: "Company" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      avatar: {
+        type: "company",
+        name: "Politiets sikkerhetstjeneste",
+        imageUrl: "https://media.licdn.com/dms/image/v2/D4D0BAQH7Yv86kmHN5g/company-logo_200_200/company-logo_200_200/0/1688735908848?e=1738195200&v=beta&t=f-Mkzd03bqzdQN4IT0h89VQ9_Jri1iJ6XphYYnjsgEo"
+      }
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: "Logo" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      avatarGroup: {
+        items: [
+          {
+            type: "person",
+            name: "Albert Åberg"
+          },
+          {
+            type: "person",
+            name: "Birger Meling"
+          },
+          {
+            type: "person",
+            name: "Celine Dion"
+          }
+        ]
+      }
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: "People group" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      avatarGroup: {
+        items: [
+          {
+            type: "company",
+            name: "Albert Åberg"
+          },
+          {
+            type: "company",
+            name: "Birger Meling"
+          },
+          {
+            type: "company",
+            name: "Celine Dion"
+          }
+        ]
+      }
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: "Company group" })
+] }), T = (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, loading: !0 }),
+  /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", size: i, loading: !1 }),
+  /* @__PURE__ */ e(r, { children: i })
+] }, i)) }), B = (n) => /* @__PURE__ */ a(d, { 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" }),
+  /* @__PURE__ */ e(r, { children: "Link icon + link text, emphasising that this will take you somewhere" }),
+  /* @__PURE__ */ e(t, { ...n, collapsible: !0, badge: { label: "Admin" } }),
+  /* @__PURE__ */ e(r, { children: "Collapsible item with badge" }),
+  /* @__PURE__ */ e(t, { ...n, collapsible: !0, expanded: !0 }),
+  /* @__PURE__ */ e(r, { children: "Collapsible and expanded item" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      badge: { label: "Admin" },
+      linkIcon: "chevron-right",
+      menu: {
+        items: [
+          { title: "Innstillinger", icon: "cog" },
+          { title: "Aktivitetslogg", icon: "clock-dashed" }
+        ]
+      }
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: "List item with badge, linkIcon and context menu" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      controls: /* @__PURE__ */ e("div", { style: { position: "absolute", right: 0, display: "flex", alignItems: "center", margin: "0.625rem" }, children: /* @__PURE__ */ e(k, { icon: "pencil", size: "sm", variant: "outline", children: "Rediger" }) })
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: "List item with custom controls" })
+] }), E = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      size: i,
+      select: {
+        checked: !1
+      }
+    }
+  ),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      size: i,
+      select: {
+        checked: !0
+      },
+      selected: !0
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: i })
+] }, i)) }), M = (n) => /* @__PURE__ */ a(d, { children: [
+  /* @__PURE__ */ e(t, { ...n }),
+  /* @__PURE__ */ e(r, { children: "Default" }),
+  /* @__PURE__ */ e(t, { ...n, color: "accent" }),
+  /* @__PURE__ */ e(r, { children: "Accent" })
+] }), S = (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"
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: i })
+] }, i)) }), _ = (n) => {
+  const [i, p] = g(!1), m = () => {
+    p((o) => !o);
+  }, c = [
+    {
+      name: "Per Ove Ludvigsen",
+      role: "Sportlig leder",
+      rights: "Admin"
+    },
+    {
+      name: "Eirik Horneland",
+      role: "Trener",
+      rights: "Admin"
+    },
+    {
+      name: "Erik Huseklepp",
+      role: "Assistenttrener",
+      rights: "Lese og skrive"
+    },
+    {
+      name: "Hassan El Fakiri",
+      role: "Toppspillerutvikler",
+      rights: "Ingen rettigheter"
+    }
+  ], h = c == null ? void 0 : c.map((o) => ({
+    avatar: {
+      ...o,
+      type: "person"
+    },
+    title: o == null ? void 0 : o.name,
+    description: o == null ? void 0 : o.role,
+    badge: { label: o == null ? void 0 : o.rights },
+    linkIcon: "menu-elipsis-horizontal"
+  })), u = {
+    items: c == null ? void 0 : c.map((o) => ({
+      name: o == null ? void 0 : o.name,
+      type: "person"
+    }))
+  };
+  return /* @__PURE__ */ a(s, { children: [
+    /* @__PURE__ */ e(
+      t,
+      {
+        ...n,
+        avatarGroup: u,
+        collapsible: !0,
+        expanded: i,
+        onClick: m,
+        as: "button"
+      }
+    ),
+    i && /* @__PURE__ */ e(List, { size: "sm", spacing: "none", items: h })
+  ] });
+};
+export {
+  _ as Collapsible,
+  M as Colors,
+  B as Controls,
+  w as Default,
+  T as Loading,
+  D as MediaTypes,
+  E as Selectable,
+  S as Sizes,
+  H as default
+};

package/dist/components/List/ListItemLabel.js

@@ -1,12 +1,13 @@
-import { jsx as e, jsxs as c, Fragment as o } from "react/jsx-runtime";
-import { Skeleton as l } from "../Skeleton/Skeleton.js";
-import '../../assets/ListItemLabel.css';const d = "_label_7jiaq_3", m = "_title_7jiaq_38", p = "_description_7jiaq_44", s = {
+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 = {
   label: d,
   title: m,
   description: p
-}, h = ({ loading: a = !1, size: t = "sm", title: n, description: r, children: i }) => /* @__PURE__ */ e("span", { className: s.label, "data-size": t, children: i || /* @__PURE__ */ c(o, { children: [
-  /* @__PURE__ */ e("strong", { className: s.title, "data-size": t, children: /* @__PURE__ */ e(l, { loading: a, children: n }) }),
-  /* @__PURE__ */ e("span", { className: s.description, "data-size": t, children: /* @__PURE__ */ e(l, { loading: a, children: r }) })
+}, 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 }) }),
+  " ",
+  /* @__PURE__ */ e("p", { className: s.description, "data-size": t, children: /* @__PURE__ */ e(a, { loading: l, children: n }) })
 ] }) });
 export {
   h as ListItemLabel

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

@@ -0,0 +1,8 @@
+import { ContextMenuProps } from '../ContextMenu';
+export interface ListItemMenuProps extends ContextMenuProps {
+    id: string;
+}
+/**
+ * List item context menu
+ */
+export declare const ListItemMenu: ({ id, ...props }: ListItemMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItemMenu.js

@@ -0,0 +1,5 @@
+import "react/jsx-runtime";
+import { d as o } from "../../Autocomplete-Cb9fQrzy.js";
+export {
+  o as ListItemMenu
+};

package/dist/components/List/index.js

@@ -1,19 +1,18 @@
 import { ListItemBase as o } from "./ListItemBase.js";
-import { ListItemHeader as m } from "./ListItemHeader.js";
-import { ListItemLabel as L } from "./ListItemLabel.js";
-import { ListItemMedia as a } from "./ListItemMedia.js";
-import { a as p, L as x } from "../../Autocomplete-hEFuiN2u.js";
-import { ListItemSelect as l } from "./ListItemSelect.js";
-import { ListBase as B } from "./ListBase.js";
-import { List as c } from "./List.js";
+import { b as s, a as m, L } from "../../Autocomplete-Cb9fQrzy.js";
+import { ListItemLabel as a } from "./ListItemLabel.js";
+import { ListItemMedia as p } from "./ListItemMedia.js";
+import { ListItemSelect as I } from "./ListItemSelect.js";
+import { ListBase as b } from "./ListBase.js";
+import { List as B } from "./List.js";
 export {
-  c as List,
-  B as ListBase,
-  p as ListItem,
+  B as List,
+  b as ListBase,
+  s as ListItem,
   o as ListItemBase,
-  x as ListItemControls,
-  m as ListItemHeader,
-  L as ListItemLabel,
-  a as ListItemMedia,
-  l as ListItemSelect
+  m as ListItemControls,
+  L as ListItemHeader,
+  a as ListItemLabel,
+  p as ListItemMedia,
+  I as ListItemSelect
 };

package/dist/components/Menu/Menu.js

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { MenuBase as u } from "./MenuBase.js";
-import { M as p } from "../../Autocomplete-hEFuiN2u.js";
+import { M as p } from "../../Autocomplete-Cb9fQrzy.js";
 import { MenuSearch as M } from "./MenuSearch.js";
 const h = ({
   theme: m = "inherit",

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

@@ -8,7 +8,7 @@ import "../RootProvider/RootProvider.js";
 import { MetaItem as p } from "../Meta/MetaItem.js";
 import { MenuItem as o } from "./MenuItem.js";
 import { MenuBase as m } from "./MenuBase.js";
-import "../../Autocomplete-hEFuiN2u.js";
+import "../../Autocomplete-Cb9fQrzy.js";
 const I = {
   title: "Menu/MenuItem",
   component: o,

package/dist/components/Menu/MenuItems.js

@@ -5,7 +5,7 @@ import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
 import "./MenuItem.js";
 import "./MenuHeader.js";
-import { M as n } from "../../Autocomplete-hEFuiN2u.js";
+import { M as n } from "../../Autocomplete-Cb9fQrzy.js";
 import "./MenuBase.js";
 import "../../hooks/useMenu.js";
 export {

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

@@ -1,4 +1,4 @@
-import { M as r } from "../../Autocomplete-hEFuiN2u.js";
+import { M as r } from "../../Autocomplete-Cb9fQrzy.js";
 const o = {
   title: "Menu/MenuItems",
   component: r,

package/dist/components/Menu/MenuSearch.js

@@ -5,7 +5,7 @@ import "../../index-L8X2o7IH.js";
 import "react";
 import { IconButton as a } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
-import "../../Autocomplete-hEFuiN2u.js";
+import "../../Autocomplete-Cb9fQrzy.js";
 import '../../assets/MenuSearch.css';const l = "_field_mo7y9_1", p = "_icon_mo7y9_5", _ = "_input_mo7y9_14", f = "_clear_mo7y9_31", o = {
   field: l,
   icon: p,

package/dist/components/Menu/index.js

@@ -6,7 +6,7 @@ import { MenuInputField as x } from "./MenuInputField.js";
 import { MenuOption as I } from "./MenuOption.js";
 import { MenuSearch as i } from "./MenuSearch.js";
 import { MenuHeader as L } from "./MenuHeader.js";
-import { M as B } from "../../Autocomplete-hEFuiN2u.js";
+import { M as B } from "../../Autocomplete-Cb9fQrzy.js";
 import { MenuBase as c, MenuList as h, MenuListItem as F } from "./MenuBase.js";
 import { Menu as O } from "./Menu.js";
 export {

package/dist/components/Meta/MetaBase.js

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

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

@@ -15,5 +15,7 @@ export interface MetaItemProps {
     children?: ReactNode;
     /** classname */
     className?: string;
+    /** OnClick handler */
+    onClick?: () => void;
 }
 export declare const MetaItem: ({ loading, size, variant, icon, children, ...rest }: MetaItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Meta/MetaItemBase.js

@@ -1,30 +1,30 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import { c as p } from "../../index-L8X2o7IH.js";
-import '../../assets/MetaItemBase.css';const d = "_item_o4xu8_1", x = {
+import '../../assets/MetaItemBase.css';const d = "_item_2agc0_1", x = {
   item: d
-}, u = ({
+}, g = ({
   as: t,
-  variant: e = "text",
-  size: a,
+  variant: a = "text",
+  size: e,
   color: o,
   progress: s,
   datetime: m,
   className: n,
   children: r,
-  ...i
-}) => /* @__PURE__ */ c(
+  ...c
+}) => /* @__PURE__ */ i(
   t || "span",
   {
-    "data-size": a,
+    "data-size": e,
     "data-color": o,
-    "data-variant": e,
+    "data-variant": a,
     "data-progress": s,
     dateTime: m,
     className: p(x.item, n),
-    ...i,
+    ...c,
     children: r
   }
 );
 export {
-  u as MetaItemBase
+  g 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_8431v_1", n = {
+import '../../assets/MetaItemLabel.css';const s = "_label_8r5nb_1", n = {
   label: s
-}, r = ({ size: a = "xs", variant: t = "text", children: e }) => /* @__PURE__ */ l("span", { className: n.label, "data-variant": t, "data-size": a, children: e });
+}, b = ({ size: a = "xs", variant: t = "text", children: e }) => /* @__PURE__ */ l("span", { className: n.label, "data-variant": t, "data-size": a, children: e });
 export {
-  r as MetaItemLabel
+  b as MetaItemLabel
 };