@altinn/altinn-components 0.8.2 → 0.8.3

package/dist/components/Dropdown/DrawerButton.js

@@ -5,7 +5,7 @@ import "react";
 import { ButtonBase as m } from "../Button/ButtonBase.js";
 import { ButtonLabel as n } from "../Button/ButtonLabel.js";
 import "../RootProvider/RootProvider.js";
-import "../../Autocomplete-Cb9fQrzy.js";
+import "../Searchbar/AutocompleteBase.js";
 import '../../assets/DrawerButton.css';const s = "_button_19v2d_1", e = {
   button: s
 }, f = ({ label: o, children: r, onClick: i }) => /* @__PURE__ */ t(m, { variant: "solid", size: "md", className: e.button, onClick: i, children: /* @__PURE__ */ t(n, { size: "md", children: r || o }) });

package/dist/components/Dropdown/DrawerOrDropdown.d.ts

@@ -1,10 +1,10 @@
 import { MouseEventHandler, ReactNode } from 'react';
 import { DrawerButtonProps } from '../';
 export interface DrawerOrDropdownProps {
-    title: string;
+    drawerTitle: string;
     children: ReactNode;
-    expanded?: boolean;
+    open?: boolean;
     onClose?: MouseEventHandler;
-    button?: DrawerButtonProps;
+    drawerButton?: DrawerButtonProps;
 }
-export declare const DrawerOrDropdown: ({ expanded, title, onClose, button, children }: DrawerOrDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DrawerOrDropdown: ({ open, onClose, drawerButton, children, drawerTitle, }: DrawerOrDropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dropdown/DrawerOrDropdown.js

@@ -1,26 +1,32 @@
-import { jsxs as p, Fragment as w, jsx as o } from "react/jsx-runtime";
+import { jsxs as e, Fragment as a, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { DropdownBase as s } from "./DropdownBase.js";
-import { Backdrop as c } from "./Backdrop.js";
-import { DrawerBase as l } from "./DrawerBase.js";
+import { DropdownBase as l } from "./DropdownBase.js";
+import { Backdrop as d } from "./Backdrop.js";
+import { DrawerBase as t } from "./DrawerBase.js";
 import { DrawerHeader as f } from "./DrawerHeader.js";
 import { DrawerFooter as n } from "./DrawerFooter.js";
-import { DrawerButton as t } from "./DrawerButton.js";
-import { DrawerBody as D } from "./DrawerBody.js";
-import "../../Autocomplete-Cb9fQrzy.js";
-import '../../assets/DrawerOrDropdown.css';const _ = "_dropdown_1mzzo_1", B = "_drawer_1mzzo_5", i = {
+import { DrawerButton as D } from "./DrawerButton.js";
+import { DrawerBody as w } from "./DrawerBody.js";
+import "../Searchbar/AutocompleteBase.js";
+import '../../assets/DrawerOrDropdown.css';const _ = "_dropdown_1mzzo_1", k = "_drawer_1mzzo_5", s = {
   dropdown: _,
-  drawer: B
-}, v = ({ expanded: m = !1, title: d, onClose: e, button: r, children: a }) => /* @__PURE__ */ p(w, { children: [
-  m && /* @__PURE__ */ o(c, { onClick: e }),
-  /* @__PURE__ */ o(s, { className: i.dropdown, padding: !0, expanded: m, children: a }),
-  /* @__PURE__ */ p(l, { className: i.drawer, placement: "bottom", expanded: m, children: [
-    /* @__PURE__ */ o(f, { title: d, onClose: e }),
-    /* @__PURE__ */ o(D, { children: a }),
-    /* @__PURE__ */ o(n, { children: r && /* @__PURE__ */ o(t, { onClick: r == null ? void 0 : r.onClick, children: r == null ? void 0 : r.label }) })
+  drawer: k
+}, v = ({
+  open: m = !1,
+  onClose: i,
+  drawerButton: r,
+  children: p,
+  drawerTitle: c
+}) => /* @__PURE__ */ e(a, { children: [
+  m && /* @__PURE__ */ o(d, { onClick: i }),
+  /* @__PURE__ */ o(l, { className: s.dropdown, padding: !0, open: m, children: p }),
+  /* @__PURE__ */ e(t, { className: s.drawer, placement: "bottom", open: m, children: [
+    /* @__PURE__ */ o(f, { title: c, onClose: i }),
+    /* @__PURE__ */ o(w, { children: p }),
+    /* @__PURE__ */ o(n, { children: r && /* @__PURE__ */ o(D, { onClick: r == null ? void 0 : r.onClick, children: r == null ? void 0 : r.label }) })
   ] })
 ] });
 export {

package/dist/components/Dropdown/DropdownBase.d.ts

@@ -3,8 +3,9 @@ export type DropdownPlacement = 'left' | 'right';
 export interface DropdownBaseProps {
     placement?: DropdownPlacement;
     padding?: boolean;
-    expanded?: boolean;
+    open?: boolean;
     className?: string;
     children?: ReactNode;
+    onClose?: () => void;
 }
-export declare const DropdownBase: ({ placement, padding, expanded, className, children, }: DropdownBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownBase: ({ placement, padding, open, className, children, onClose, }: DropdownBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dropdown/DropdownBase.js

@@ -1,25 +1,32 @@
-import { jsx as a } from "react/jsx-runtime";
-import { c as n } from "../../index-L8X2o7IH.js";
-import '../../assets/DropdownBase.css';const p = "_dropdown_tp90e_1", s = "_drawer_tp90e_33", c = "_button_tp90e_33", _ = {
-  dropdown: p,
-  drawer: s,
-  button: c
-}, i = ({
+import { jsx as s } from "react/jsx-runtime";
+import { c as p } from "../../index-L8X2o7IH.js";
+import { useRef as c } from "react";
+import { useClickOutside as m } from "../../hooks/useClickOutside.js";
+import '../../assets/DropdownBase.css';const i = "_dropdown_tp90e_1", u = "_drawer_tp90e_33", _ = "_button_tp90e_33", f = {
+  dropdown: i,
+  drawer: u,
+  button: _
+}, g = ({
   placement: t = "left",
-  padding: o = !0,
-  expanded: r = !1,
+  padding: r = !0,
+  open: e = !1,
   className: d,
-  children: e
-}) => /* @__PURE__ */ a(
-  "div",
-  {
-    className: n(_.dropdown, d),
-    "data-placement": t,
-    "data-padding": o,
-    "aria-expanded": r,
-    children: e
-  }
-);
+  children: n,
+  onClose: a
+}) => {
+  const o = c(null);
+  return m(o, a), /* @__PURE__ */ s(
+    "div",
+    {
+      ref: o,
+      className: p(f.dropdown, d),
+      "data-placement": t,
+      "data-padding": r,
+      "aria-expanded": e,
+      children: n
+    }
+  );
+};
 export {
-  i as DropdownBase
+  g as DropdownBase
 };

package/dist/components/GlobalMenu/AccountButton.js

@@ -6,7 +6,7 @@ import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import "../../Autocomplete-Cb9fQrzy.js";
+import "../Searchbar/AutocompleteBase.js";
 const b = ({ account: e, linkText: t, onClick: l, multipleAccounts: d }) => d ? /* @__PURE__ */ r(m, { size: "lg", onClick: l, linkText: t, linkIcon: "chevron-right", as: "button", children: [
   /* @__PURE__ */ i(
     s,

package/dist/components/GlobalMenu/AccountMenu.js

@@ -4,7 +4,7 @@ import { useState as y } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
-import "../../Autocomplete-Cb9fQrzy.js";
+import "../Searchbar/AutocompleteBase.js";
 import { Menu as L } from "../Menu/Menu.js";
 const M = (p) => `${p} hits`, k = ({
   accounts: p = [],

package/dist/components/GlobalMenu/BackButton.js

@@ -4,7 +4,7 @@ import "../Icon/SvgIcon.js";
 import "react";
 import { MenuItem as i } from "../Menu/MenuItem.js";
 import "../RootProvider/RootProvider.js";
-import "../../Autocomplete-Cb9fQrzy.js";
+import "../Searchbar/AutocompleteBase.js";
 const u = ({ label: t, onClick: o }) => /* @__PURE__ */ r(i, { id: "back", icon: "arrow-left", title: t, onClick: o });
 export {
   u as BackButton

package/dist/components/GlobalMenu/GlobalMenu.js

@@ -8,7 +8,7 @@ import { AccountMenu as v } from "./AccountMenu.js";
 import { AccountButton as C } from "./AccountButton.js";
 import { BackButton as j } from "./BackButton.js";
 import { LogoutButton as A } from "./LogoutButton.js";
-import "../../Autocomplete-Cb9fQrzy.js";
+import "../Searchbar/AutocompleteBase.js";
 import { MenuListItem as l } from "../Menu/MenuBase.js";
 import { Menu as d } from "../Menu/Menu.js";
 import { GlobalMenuBase as m, GlobalMenuHeader as f, GlobalMenuFooter as F } from "./GlobalMenuBase.js";

package/dist/components/Header/Header.js

@@ -1,39 +1,36 @@
 "use client";
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import "react";
-import { useEscapeKey as x } from "../../hooks/useEscapeKey.js";
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
 import { DropdownBase as g } from "../Dropdown/DropdownBase.js";
 import "../../index-L8X2o7IH.js";
-import { DrawerBase as H } from "../Dropdown/DrawerBase.js";
+import { DrawerBase as x } from "../Dropdown/DrawerBase.js";
 import "../Icon/SvgIcon.js";
-import { useRootContext as _ } from "../RootProvider/RootProvider.js";
-import { GlobalMenu as p } from "../GlobalMenu/GlobalMenu.js";
-import { HeaderBase as C } from "./HeaderBase.js";
-import { HeaderLogo as b } from "./HeaderLogo.js";
-import { HeaderButton as y } from "./HeaderButton.js";
+import "react";
+import { useRootContext as H } from "../RootProvider/RootProvider.js";
+import { GlobalMenu as m } from "../GlobalMenu/GlobalMenu.js";
+import { HeaderBase as _ } from "./HeaderBase.js";
+import { HeaderLogo as C } from "./HeaderLogo.js";
+import { HeaderButton as b } from "./HeaderButton.js";
 import { Searchbar as B } from "../Searchbar/Searchbar.js";
 import { HeaderMenu as N } from "./HeaderMenu.js";
 import { HeaderSearch as S } from "./HeaderSearch.js";
-import '../../assets/Header.css';const u = "_drawer_ft5v3_1", v = "_dropdown_ft5v3_5", d = {
-  drawer: u,
-  dropdown: v
-}, O = ({ search: s, menu: r, currentAccount: a, logo: l = {}, badge: i }) => {
-  const { currentId: e, toggleId: n, openId: c, closeAll: t } = _();
-  x(t);
-  const f = () => {
-    c("search");
-  }, h = () => {
+import '../../assets/Header.css';const v = "_drawer_ft5v3_1", y = "_dropdown_ft5v3_5", s = {
+  drawer: v,
+  dropdown: y
+}, J = ({ search: d, menu: r, currentAccount: a, logo: p = {}, badge: l }) => {
+  const { currentId: e, toggleId: n, openId: i, closeAll: c } = H(), h = () => {
+    i("search");
+  }, f = () => {
     n("search");
   }, w = () => {
     n("menu");
   };
-  return /* @__PURE__ */ m(C, { currentId: e, open: e === "search" || e === "menu", onClose: t, children: [
-    /* @__PURE__ */ o(b, { ...l, className: d.logo }),
-    /* @__PURE__ */ m(N, { className: d.menu, children: [
+  return /* @__PURE__ */ t(_, { currentId: e, open: e === "search" || e === "menu", onClose: c, children: [
+    /* @__PURE__ */ o(C, { ...p, className: s.logo }),
+    /* @__PURE__ */ t(N, { className: s.menu, children: [
       /* @__PURE__ */ o(
-        y,
+        b,
         {
-          badge: i,
+          badge: l,
           avatar: a && {
             type: a.type,
             name: a.name
@@ -43,12 +40,12 @@ import '../../assets/Header.css';const u = "_drawer_ft5v3_1", v = "_dropdown_ft5
           label: r == null ? void 0 : r.menuLabel
         }
       ),
-      r && /* @__PURE__ */ o(g, { padding: !0, placement: "right", expanded: e === "menu", className: d.dropdown, children: /* @__PURE__ */ o(p, { ...r, currentAccount: a }) })
+      r && /* @__PURE__ */ o(g, { padding: !0, placement: "right", open: e === "menu", className: s.dropdown, children: /* @__PURE__ */ o(m, { ...r, currentAccount: a }) })
     ] }),
-    s && /* @__PURE__ */ o(S, { expanded: e === "search", children: /* @__PURE__ */ o(B, { ...s, expanded: e === "search", onClose: h, onFocus: f }) }),
-    r && /* @__PURE__ */ o(H, { expanded: e === "menu", className: d.drawer, children: /* @__PURE__ */ o(p, { ...r, currentAccount: a }) })
+    d && /* @__PURE__ */ o(S, { expanded: e === "search", children: /* @__PURE__ */ o(B, { ...d, expanded: e === "search", onClose: f, onFocus: h }) }),
+    r && /* @__PURE__ */ o(x, { open: e === "menu", className: s.drawer, children: /* @__PURE__ */ o(m, { ...r, currentAccount: a }) })
   ] });
 };
 export {
-  O as Header
+  J as Header
 };

package/dist/components/Header/HeaderBase.js

@@ -4,7 +4,7 @@ import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { Backdrop as m } from "../Dropdown/Backdrop.js";
-import "../../Autocomplete-Cb9fQrzy.js";
+import "../Searchbar/AutocompleteBase.js";
 import '../../assets/HeaderBase.css';const i = "_header_5ao8r_1", n = "_backdrop_5ao8r_11", r = {
   header: i,
   backdrop: n

package/dist/components/History/HistoryItem.js

@@ -6,7 +6,7 @@ import "../Icon/SvgIcon.js";
 import { AttachmentSection as E } from "../Attachment/AttachmentSection.js";
 import { HistoryItemBase as H } from "./HistoryItemBase.js";
 import "../RootProvider/RootProvider.js";
-import "../../Autocomplete-Cb9fQrzy.js";
+import "../Searchbar/AutocompleteBase.js";
 import { TransmissionSection as S } from "../Transmission/TransmissionSection.js";
 import { HistoryMetadata as b } from "./HistoryMetadata.js";
 const T = ({

package/dist/components/Layout/Layout.js

@@ -11,7 +11,7 @@ import "../Icon/SvgIcon.js";
 import "react";
 import { useRootContext as B } from "../RootProvider/RootProvider.js";
 import { Menu as C } from "../Menu/Menu.js";
-import "../../Autocomplete-Cb9fQrzy.js";
+import "../Searchbar/AutocompleteBase.js";
 const A = ({ theme: n = "global", header: p, footer: u, sidebar: o = {}, content: t = {}, children: e }) => {
   const { currentId: f } = B(), { menu: h, ...l } = o;
   return /* @__PURE__ */ r(i, { theme: n, currentId: f, children: [

package/dist/components/Layout/Layout.stories.js

@@ -4,7 +4,8 @@ import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
 import { ListBase as A } from "../List/ListBase.js";
-import { D as S } from "../../Autocomplete-Cb9fQrzy.js";
+import { DialogListItem as S } from "../Dialog/DialogListItem.js";
+import "../Searchbar/AutocompleteBase.js";
 import { Layout as k } from "./Layout.js";
 import { ActionHeader as v } from "../LayoutAction/ActionHeader.js";
 import { ActionFooter as L } from "../LayoutAction/ActionFooter.js";
@@ -189,7 +190,7 @@ const m = {
       title: "Papirkurv"
     }
   ]
-}, G = {
+}, H = {
   title: "Layout/Layout",
   component: k,
   tags: ["autodocs"],
@@ -204,9 +205,9 @@ const m = {
       menu: f
     }
   }
-}, H = {
+}, N = {
   args: {}
-}, N = (l) => {
+}, Q = (l) => {
   const [r, s] = h(""), u = (t) => {
     s(t.target.value);
   }, g = [
@@ -265,7 +266,7 @@ const m = {
       }
     }
   );
-}, Q = (l) => {
+}, U = (l) => {
   const [r, s] = h([]), [u, g] = h({
     1: {
       id: "1",
@@ -350,8 +351,8 @@ const m = {
   );
 };
 export {
-  N as ControlledStateSearch,
-  H as Default,
-  Q as InboxBulkMode,
-  G as default
+  Q as ControlledStateSearch,
+  N as Default,
+  U as InboxBulkMode,
+  H as default
 };

package/dist/components/LayoutAction/ActionMenu.js

@@ -4,7 +4,7 @@ import "../Icon/SvgIcon.js";
 import "react";
 import { MenuItem as o } from "../Menu/MenuItem.js";
 import "../RootProvider/RootProvider.js";
-import "../../Autocomplete-Cb9fQrzy.js";
+import "../Searchbar/AutocompleteBase.js";
 import { MenuBase as n } from "../Menu/MenuBase.js";
 import '../../assets/ActionMenu.css';const s = "_menu_12gbo_1", l = "_list_12gbo_14", e = {
   menu: s,

package/dist/components/List/List.js

@@ -3,9 +3,10 @@ import { createElement as s } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
-import { b as n } from "../../Autocomplete-Cb9fQrzy.js";
-import { ListBase as a } from "./ListBase.js";
-const b = ({ theme: r, size: t = "md", spacing: m = "md", items: o = [] }) => /* @__PURE__ */ p(a, { theme: r, spacing: m, children: o.map((e, i) => /* @__PURE__ */ s(n, { ...e, size: t, key: "item" + i })) });
+import "../Searchbar/AutocompleteBase.js";
+import { ListItem as n } from "./ListItem.js";
+import { ListBase as f } from "./ListBase.js";
+const j = ({ theme: r, size: t = "md", spacing: m = "md", items: o = [] }) => /* @__PURE__ */ p(f, { theme: r, spacing: m, children: o.map((i, e) => /* @__PURE__ */ s(n, { ...i, size: t, key: "item" + e })) });
 export {
-  b as List
+  j as List
 };

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

@@ -3,7 +3,7 @@ import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import "../../Autocomplete-Cb9fQrzy.js";
+import "../Searchbar/AutocompleteBase.js";
 import { List as t } from "./List.js";
 const a = {
   title: "List/List",

package/dist/components/List/ListItem.js

@@ -1,6 +1,49 @@
-import "react/jsx-runtime";
-import "./ListItemBase.js";
-import { b as i } from "../../Autocomplete-Cb9fQrzy.js";
+import { jsx as e } from "react/jsx-runtime";
+import { ListItemBase as H } from "./ListItemBase.js";
+import { ListItemHeader as b } from "./ListItemHeader.js";
+const v = ({
+  className: o,
+  color: i,
+  loading: t,
+  collapsible: s,
+  expanded: p,
+  size: m = "sm",
+  icon: f,
+  avatar: I,
+  avatarGroup: L,
+  title: c,
+  description: n,
+  badge: x,
+  linkText: a,
+  linkIcon: d,
+  menu: h,
+  select: j,
+  controls: u,
+  children: B,
+  ...r
+}) => /* @__PURE__ */ e(H, { size: m, color: i, loading: t, ...r, children: /* @__PURE__ */ e(
+  b,
+  {
+    className: o,
+    loading: t,
+    collapsible: s,
+    expanded: p,
+    select: j,
+    size: m,
+    title: c,
+    description: n,
+    icon: f,
+    avatar: I,
+    avatarGroup: L,
+    linkIcon: d,
+    linkText: a,
+    badge: x,
+    controls: u,
+    menu: h,
+    ...r,
+    children: B
+  }
+) });
 export {
-  i as ListItem
+  v as ListItem
 };

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

@@ -2,14 +2,16 @@ 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 b } from "../Button/Button.js";
+import { Button as k } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import { MetaItem as r } from "../Meta/MetaItem.js";
-import { ListItemBase as k } from "./ListItemBase.js";
-import { b as t, L as y } from "../../Autocomplete-Cb9fQrzy.js";
+import { ListItemBase as b } from "./ListItemBase.js";
+import { ListItemHeader as y } from "./ListItemHeader.js";
+import { ListItem as t } from "./ListItem.js";
 import { ListBase as d } from "./ListBase.js";
 import { List as v } from "./List.js";
-const l = ["lg", "md", "sm", "xs"], E = {
+import "../Searchbar/AutocompleteBase.js";
+const l = ["lg", "md", "sm", "xs"], S = {
   title: "List/ListItem",
   component: t,
   tags: ["autodocs"],
@@ -20,9 +22,9 @@ const l = ["lg", "md", "sm", "xs"], E = {
     description: "Description",
     size: "md"
   }
-}, M = {
+}, _ = {
   args: {}
-}, S = (n) => /* @__PURE__ */ a(d, { children: [
+}, j = (n) => /* @__PURE__ */ a(d, { children: [
   /* @__PURE__ */ e(t, { ...n }),
   /* @__PURE__ */ e(r, { children: "No media" }),
   /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear" }),
@@ -107,11 +109,11 @@ const l = ["lg", "md", "sm", "xs"], E = {
     }
   ),
   /* @__PURE__ */ e(r, { children: "Company group" })
-] }), _ = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
+] }), P = (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)) }), j = (n) => /* @__PURE__ */ a(d, { children: [
+] }, i)) }), G = (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" }),
@@ -139,11 +141,11 @@ const l = ["lg", "md", "sm", "xs"], E = {
     t,
     {
       ...n,
-      controls: /* @__PURE__ */ e("div", { style: { position: "absolute", right: 0, display: "flex", alignItems: "center", margin: "0.625rem" }, children: /* @__PURE__ */ e(b, { icon: "pencil", size: "sm", variant: "outline", children: "Rediger" }) })
+      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" })
-] }), P = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
+] }), N = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
   /* @__PURE__ */ e(
     t,
     {
@@ -166,15 +168,15 @@ const l = ["lg", "md", "sm", "xs"], E = {
     }
   ),
   /* @__PURE__ */ e(r, { children: i })
-] }, i)) }), G = (n) => /* @__PURE__ */ a(d, { children: [
+] }, i)) }), Q = (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" })
-] }), N = (n) => /* @__PURE__ */ e(d, { children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ a(s, { children: [
+] }), Y = (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)) }), Q = (n) => {
+] }, i)) }), F = (n) => {
   const [i, p] = g(!1), m = () => {
     p((o) => !o);
   }, c = [
@@ -213,7 +215,7 @@ const l = ["lg", "md", "sm", "xs"], E = {
       type: "person"
     }))
   };
-  return /* @__PURE__ */ a(k, { children: [
+  return /* @__PURE__ */ a(b, { children: [
     /* @__PURE__ */ e(
       y,
       {
@@ -229,13 +231,13 @@ const l = ["lg", "md", "sm", "xs"], E = {
   ] });
 };
 export {
-  Q as Collapsible,
-  G as Colors,
-  j as Controls,
-  M as Default,
-  _ as Loading,
-  S as MediaTypes,
-  P as Selectable,
-  N as Sizes,
-  E as default
+  F as Collapsible,
+  Q as Colors,
+  G as Controls,
+  _ as Default,
+  P as Loading,
+  j as MediaTypes,
+  N as Selectable,
+  Y as Sizes,
+  S as default
 };

package/dist/components/List/ListItemControls.js

@@ -1,9 +1,19 @@
-import "react/jsx-runtime";
-import "../Badge/Badge.js";
-import { a } from "../../Autocomplete-Cb9fQrzy.js";
-import "../Icon/Icon.js";
+import { jsx as n, jsxs as e, Fragment as m } from "react/jsx-runtime";
+import { Badge as i } from "../Badge/Badge.js";
+import { ContextMenu as a } from "../ContextMenu/ContextMenu.js";
+import { Icon as _ } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
+import '../../assets/ListItemControls.css';const p = "_controls_n31lc_1", x = "_linkText_n31lc_11", k = "_linkIcon_n31lc_16", o = {
+  controls: p,
+  linkText: x,
+  linkIcon: k
+}, h = ({ badge: s, linkText: c, linkIcon: r, menu: t, children: l }) => /* @__PURE__ */ n("div", { className: o.controls, "data-menu": t && !0, children: l || /* @__PURE__ */ e(m, { children: [
+  s && /* @__PURE__ */ n(i, { ...s }),
+  c && /* @__PURE__ */ n("span", { className: o.linkText, children: c }),
+  r && /* @__PURE__ */ n(_, { name: r, className: o.linkIcon }),
+  t && /* @__PURE__ */ n(a, { ...t, className: o.menu })
+] }) });
 export {
-  a as ListItemControls
+  h as ListItemControls
 };