@altinn/altinn-components 0.13.4 → 0.14.0

package/dist/components/Page/Grid.js

@@ -1,34 +1,34 @@
-import { jsx as p } from "react/jsx-runtime";
-import { c as g } from "../../index-L8X2o7IH.js";
-import '../../assets/Grid.css';const l = "_grid_o95ym_1", f = {
+import { jsx as g } from "react/jsx-runtime";
+import { c as p } from "../../index-L8X2o7IH.js";
+import '../../assets/Grid.css';const l = "_grid_bzro4_1", f = {
   grid: l
-}, v = ({
+}, C = ({
   as: a = "div",
-  theme: t = "inherit",
-  color: n = "transparent",
-  cols: o = "1-2-3",
-  reverse: r = !1,
-  spacing: e = "none",
-  padding: d = "none",
-  margin: s = "none",
+  theme: t,
+  color: o,
+  cols: r = 2,
+  reverse: d = !1,
+  spacing: s,
+  padding: e,
+  margin: n,
   className: i,
   style: c,
   children: m
-}) => /* @__PURE__ */ p(
+}) => /* @__PURE__ */ g(
   a,
   {
-    className: g(f.grid, i),
+    className: p(f.grid, i),
     style: c,
     "data-theme": t,
-    "data-color": n,
-    "data-cols": o,
-    "data-reverse": r,
-    "data-spacing": e,
-    "data-padding": d,
-    "data-margin": s,
+    "data-color": o,
+    "data-cols": r,
+    "data-reverse": d,
+    "data-spacing": s,
+    "data-padding": e,
+    "data-margin": n,
     children: m
   }
 );
 export {
-  v as Grid
+  C as Grid
 };

package/dist/components/Page/PageBase.js

@@ -1,6 +1,6 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Section as e } from "./Section.js";
-const s = ({ children: o, ...r }) => /* @__PURE__ */ t(e, { as: "div", ...r, children: o });
+import { jsx as m } from "react/jsx-runtime";
+import { Flex as i } from "./Flex.js";
+const x = ({ children: o, as: r = "div", direction: e = "col", ...t }) => /* @__PURE__ */ m(i, { as: r, direction: e, ...t, children: o });
 export {
-  s as PageBase
+  x as PageBase
 };

package/dist/components/Page/PageHeader.js

@@ -1,18 +1,18 @@
 import { jsxs as r, jsx as i } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Heading as d } from "../Typography/Heading.js";
+import { Heading as s } from "../Typography/Heading.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemMedia as s } from "../List/ListItemMedia.js";
+import { ListItemMedia as a } from "../List/ListItemMedia.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as a } from "./Section.js";
 import { Flex as c } from "./Flex.js";
-const I = ({ title: o, icon: e, avatar: m, avatarGroup: t, children: p, ...n }) => /* @__PURE__ */ r(a, { as: "header", spacing: "md", ...n, children: [
-  /* @__PURE__ */ r(c, { direction: "row", align: "center", spacing: "md", children: [
-    /* @__PURE__ */ i(s, { avatar: m, avatarGroup: t, icon: e, size: "lg" }),
-    /* @__PURE__ */ i(d, { size: "xl", children: o })
+import { Section as d } from "./Section.js";
+const I = ({ title: o, icon: e, avatar: t, avatarGroup: m, children: p, ...n }) => /* @__PURE__ */ r(d, { as: "header", spacing: 3, ...n, children: [
+  /* @__PURE__ */ r(c, { direction: "row", align: "center", spacing: 3, children: [
+    /* @__PURE__ */ i(a, { avatar: t, avatarGroup: m, icon: e, size: "xl" }),
+    /* @__PURE__ */ i(s, { size: "xl", children: o })
   ] }),
   p
 ] });

package/dist/components/Page/PageMenu.js

@@ -0,0 +1,16 @@
+import { jsx as t } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import { MenuItem as n } from "../Menu/MenuItem.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/PageMenu.css';const o = "_menu_1wsjl_1", l = "_list_1wsjl_6", a = "_item_1wsjl_29", e = {
+  menu: o,
+  list: l,
+  item: a
+}, N = ({ theme: m = "transparent", color: r, items: i = [] }) => /* @__PURE__ */ t("nav", { "data-theme": m, "data-color": r, className: e.menu, children: /* @__PURE__ */ t("ul", { className: e.list, children: i.map((s) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(n, { ...s, theme: m, className: e.item }) }, s.id)) }) });
+export {
+  N as PageMenu
+};

package/dist/components/Page/PageNav.js

@@ -1,32 +1,32 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import { Button as m } from "../Button/Button.js";
+import { Button as l } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import { ContextMenu as a } from "../ContextMenu/ContextMenu.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as c } from "./Flex.js";
 import { Breadcrumbs as p } from "./Breadcrumbs.js";
-import '../../assets/PageNav.css';const f = "_nav_9bu1z_1", v = "_controls_9bu1z_7", d = {
+import '../../assets/PageNav.css';const f = "_nav_9bu1z_1", v = "_controls_9bu1z_7", x = {
   nav: f,
   controls: v
 }, M = ({
-  padding: i = "none",
-  margin: s = "none",
+  color: n,
+  padding: s,
   breadcrumbs: t,
-  backButton: o = {
+  backButton: r = {
     as: "a",
     label: "Back"
   },
-  menu: e,
-  children: l
-}) => /* @__PURE__ */ n(c, { as: "nav", direction: "row", align: "center", justify: "between", padding: i, margin: s, children: [
-  t ? /* @__PURE__ */ r(p, { items: t }) : /* @__PURE__ */ r(m, { ...o, variant: "text", color: "secondary", icon: "arrow-left", children: (o == null ? void 0 : o.label) || "Back" }),
-  /* @__PURE__ */ n("div", { className: d.controls, children: [
-    l,
-    e && /* @__PURE__ */ r(a, { ...e })
+  menu: i,
+  children: m
+}) => /* @__PURE__ */ e(c, { as: "nav", direction: "row", align: "center", justify: "between", color: n, padding: s, children: [
+  t ? /* @__PURE__ */ o(p, { items: t }) : /* @__PURE__ */ o(l, { ...r, variant: "text", icon: "arrow-left", children: (r == null ? void 0 : r.label) || "Back" }),
+  /* @__PURE__ */ e("div", { className: x.controls, children: [
+    m,
+    i && /* @__PURE__ */ o(a, { ...i })
   ] })
 ] });
 export {

package/dist/components/Page/Section.js

@@ -1,25 +1,12 @@
-import { jsx as e } from "react/jsx-runtime";
-import { c as a } from "../../index-L8X2o7IH.js";
+import { jsx as m } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as n } from "./Flex.js";
-import '../../assets/Section.css';const p = "_section_1u2zl_1", l = {
-  section: p
-}, j = ({ as: o = "section", className: t, bg: r, color: s, shadow: i, children: c, ...m }) => /* @__PURE__ */ e(
-  n,
-  {
-    as: o,
-    "data-bg": r,
-    "data-color": s,
-    "data-shadow": i,
-    className: a(l.section, t),
-    ...m,
-    children: c
-  }
-);
+import { Flex as p } from "./Flex.js";
+const u = ({ as: o = "section", direction: r = "col", children: t, ...i }) => /* @__PURE__ */ m(p, { as: o, direction: r, ...i, children: t });
 export {
-  j as Section
+  u as Section
 };

package/dist/components/Page/index.js

@@ -1,20 +1,22 @@
 import { PageBase as o } from "./PageBase.js";
 import { PageNav as t } from "./PageNav.js";
-import { PageHeader as f } from "./PageHeader.js";
-import { Article as a } from "./Article.js";
-import { Section as d } from "./Section.js";
-import { Flex as g } from "./Flex.js";
-import { Grid as B } from "./Grid.js";
+import { PageMenu as f } from "./PageMenu.js";
+import { PageHeader as a } from "./PageHeader.js";
+import { Article as d } from "./Article.js";
+import { Section as i } from "./Section.js";
+import { Flex as n } from "./Flex.js";
+import { Grid as u } from "./Grid.js";
 import { Breadcrumbs as b } from "./Breadcrumbs.js";
-import { BreadcrumbsLink as n } from "./BreadcrumbsLink.js";
+import { BreadcrumbsLink as k } from "./BreadcrumbsLink.js";
 export {
-  a as Article,
+  d as Article,
   b as Breadcrumbs,
-  n as BreadcrumbsLink,
-  g as Flex,
-  B as Grid,
+  k as BreadcrumbsLink,
+  n as Flex,
+  u as Grid,
   o as PageBase,
-  f as PageHeader,
+  a as PageHeader,
+  f as PageMenu,
   t as PageNav,
-  d as Section
+  i as Section
 };

package/dist/components/Searchbar/SearchField.js

@@ -1,79 +1,78 @@
 "use client";
-import { jsxs as k, jsx as i } from "react/jsx-runtime";
-import { c as q } from "../../index-L8X2o7IH.js";
-import { useRef as b } from "react";
-import { Icon as w } from "../Icon/Icon.js";
+import { jsxs as b, jsx as c } from "react/jsx-runtime";
+import { c as I } from "../../index-L8X2o7IH.js";
+import { useRef as N } from "react";
+import { Icon as g } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import { IconButton as l } from "../Button/IconButton.js";
-import '../../assets/SearchField.css';const I = "_field_1wjpq_1", N = "_icon_1wjpq_10", g = "_input_1wjpq_17", C = "_dismiss_1wjpq_41", K = "_clear_1wjpq_47", s = {
-  field: I,
-  icon: N,
-  input: g,
-  dismiss: C,
-  clear: K
-}, F = ({
+import '../../assets/SearchField.css';const C = "_field_1y3oc_1", j = "_icon_1y3oc_10", K = "_input_1y3oc_17", S = "_dismiss_1y3oc_41", T = "_clear_1y3oc_47", s = {
+  field: C,
+  icon: j,
+  input: K,
+  dismiss: S,
+  clear: T
+}, O = ({
   className: m,
-  expanded: a,
+  expanded: i,
   name: p = "q",
-  value: e,
+  value: t,
   placeholder: u = "Søk",
   onFocus: d,
   onBlur: f,
   onChange: _,
-  onClear: x,
-  onClose: y,
-  onEnter: c,
+  onClear: y,
+  onClose: x,
+  onEnter: a,
   tabIndex: h
 }) => {
-  const t = b(null), j = (o) => {
+  const o = N(null), k = (e) => {
     var r, n;
-    o.key === "Escape" && ((r = t.current) == null || r.blur()), o.key === "Enter" && ((n = t.current) == null || n.blur(), c == null || c());
+    e.key === "Escape" && ((r = o.current) == null || r.blur()), e.key === "Enter" && ((n = o.current) == null || n.blur(), a == null || a());
   };
-  return /* @__PURE__ */ k("div", { className: q(s.field, m), "aria-expanded": a, children: [
-    /* @__PURE__ */ i(
+  return /* @__PURE__ */ b("div", { className: I(s.field, m), "aria-expanded": i, children: [
+    /* @__PURE__ */ c(
       "input",
       {
-        ref: t,
+        ref: o,
         onFocus: d,
         onBlur: f,
         name: p,
-        value: e,
+        value: t,
         onChange: _,
         placeholder: u,
         className: s.input,
-        onKeyUp: j,
+        onKeyUp: k,
         type: "search",
         "aria-haspopup": !0,
         autoComplete: "off",
         "aria-autocomplete": "list",
-        "aria-expanded": a,
+        "aria-expanded": i,
         tabIndex: h ?? 0
       }
     ),
-    /* @__PURE__ */ i(w, { name: "magnifying-glass", className: s.icon }),
-    e && /* @__PURE__ */ i(
+    /* @__PURE__ */ c(g, { name: "magnifying-glass", className: s.icon }),
+    t && /* @__PURE__ */ c(
       l,
       {
         icon: "x-mark",
-        color: "secondary",
         variant: "solid",
         size: "custom",
         className: s.clear,
-        onClick: x,
+        onClick: y,
         dataTestId: "search-button-clear"
       }
-    ) || a && /* @__PURE__ */ i(
+    ) || i && /* @__PURE__ */ c(
       l,
       {
         icon: "x-mark",
         variant: "text",
         className: s.dismiss,
-        onClick: y,
+        onClick: x,
         dataTestId: "search-button-close"
       }
     )
   ] });
 };
 export {
-  F as SearchField
+  O as SearchField
 };

package/dist/components/Searchbar/SearchbarBase.js

@@ -1,17 +1,17 @@
-import { jsx as t } from "react/jsx-runtime";
-import { c } from "../../index-L8X2o7IH.js";
-import '../../assets/SearchbarBase.css';const o = "_searchbar_1jrvc_1", m = {
+import { jsx as c } from "react/jsx-runtime";
+import { c as t } from "../../index-L8X2o7IH.js";
+import '../../assets/SearchbarBase.css';const o = "_searchbar_1jrvc_1", l = {
   searchbar: o
-}, n = ({ className: a, children: r, expanded: e = !1, autocomplete: s = !1 }) => /* @__PURE__ */ t(
+}, b = ({ className: a, children: r, expanded: e = !1, autocomplete: s = !1 }) => /* @__PURE__ */ c(
   "div",
   {
-    className: c(m.searchbar, a),
+    className: t(l.searchbar, a),
     "aria-expanded": e,
     "data-autocomplete": s,
-    "data-theme": "neutral",
+    "data-color": "neutral",
     children: r
   }
 );
 export {
-  n as SearchbarBase
+  b as SearchbarBase
 };

package/dist/components/TextField/FieldBase.js

@@ -1,16 +1,16 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
 import { c } from "../../index-L8X2o7IH.js";
 import { Typography as m } from "../Typography/Typography.js";
 import { Heading as p } from "../Typography/Heading.js";
-import '../../assets/FieldBase.css';const d = "_field_5tnbv_1", x = "_label_5tnbv_7", _ = "_helperText_5tnbv_11", e = {
+import '../../assets/FieldBase.css';const d = "_field_1g06w_1", x = "_label_1g06w_7", _ = "_helperText_1g06w_11", e = {
   field: d,
   label: x,
   helperText: _
-}, y = ({ as: o, size: n, classname: r, label: s, helperText: l, children: a }) => /* @__PURE__ */ i(o || "label", { className: c(e.field, r), "data-size": n, children: [
-  s && /* @__PURE__ */ t(p, { size: "xs", className: e.label, children: s }),
-  a,
-  l && /* @__PURE__ */ t(m, { className: e.helperText, size: "xs", children: l })
+}, w = ({ as: t, size: r, classname: a, label: s, helperText: l, children: i }) => /* @__PURE__ */ n(t || "label", { className: c(e.field, a), "data-size": r, children: [
+  s && /* @__PURE__ */ o(p, { size: "xs", className: e.label, children: s }),
+  i,
+  l && /* @__PURE__ */ o(m, { className: e.helperText, size: "xs", children: l })
 ] });
 export {
-  y as FieldBase
+  w as FieldBase
 };

package/dist/components/TextField/InputBase.js

@@ -1,14 +1,14 @@
 import { jsx as c } from "react/jsx-runtime";
 import { c as m } from "../../index-L8X2o7IH.js";
-import '../../assets/InputBase.css';const x = "_input_dxhtf_1", f = {
+import '../../assets/InputBase.css';const x = "_input_8iwo6_1", _ = {
   input: x
-}, l = ({
+}, d = ({
   type: t = "text",
   name: s,
   value: n,
-  placeholder: p,
-  onChange: i,
-  onFocus: o,
+  placeholder: i,
+  onChange: o,
+  onFocus: p,
   onBlur: e,
   size: r,
   className: u,
@@ -16,18 +16,18 @@ import '../../assets/InputBase.css';const x = "_input_dxhtf_1", f = {
 }) => /* @__PURE__ */ c(
   "input",
   {
-    className: m(f.input, u),
+    className: m(_.input, u),
     "data-size": r,
     type: t,
     name: s,
     value: n,
-    placeholder: p,
-    onChange: i,
-    onFocus: o,
+    placeholder: i,
+    onChange: o,
+    onFocus: p,
     onBlur: e,
     ...a
   }
 );
 export {
-  l as InputBase
+  d as InputBase
 };

package/dist/components/Timeline/TimelineSection.js

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
@@ -7,31 +7,31 @@ import { Avatar as _ } from "../Avatar/Avatar.js";
 import "../RootProvider/RootProvider.js";
 import { Byline as p } from "../Byline/Byline.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/TimelineSection.css';const u = "_section_1nusr_1", h = "_sidebar_1nusr_6", l = "_media_1nusr_19", N = "_dot_1nusr_26", v = "_border_1nusr_37", x = "_content_1nusr_52", o = {
-  section: u,
-  sidebar: h,
-  media: l,
-  dot: N,
-  border: v,
-  content: x
+import '../../assets/TimelineSection.css';const x = "_section_8ux85_1", l = "_sidebar_8ux85_6", h = "_media_8ux85_19", u = "_dot_8ux85_26", N = "_content_8ux85_33", v = "_border_8ux85_44", r = {
+  section: x,
+  sidebar: l,
+  media: h,
+  dot: u,
+  content: N,
+  border: v
 }, q = ({
-  loading: e,
-  size: s = "xs",
-  seen: c = !0,
-  datetime: i,
-  dateline: n,
+  loading: i,
+  color: a,
+  size: o = "xs",
+  datetime: n,
+  dateline: c,
   byline: t,
-  avatar: d,
+  avatar: e,
   children: m
-}) => /* @__PURE__ */ a("section", { className: o.section, "data-size": s, "data-seen": c, children: [
-  /* @__PURE__ */ a("aside", { className: o.sidebar, "data-size": s, children: [
-    (t || n) && /* @__PURE__ */ r("div", { className: o.media, "data-size": s, children: d && /* @__PURE__ */ r(_, { ...d, size: s }) || /* @__PURE__ */ r("div", { className: o.dot, "data-seen": c }) }),
-    /* @__PURE__ */ r("div", { className: o.border, "data-seen": c })
+}) => /* @__PURE__ */ d("section", { className: r.section, "data-color": a, "data-size": o, children: [
+  /* @__PURE__ */ d("aside", { className: r.sidebar, "data-size": o, children: [
+    (t || c) && /* @__PURE__ */ s("div", { className: r.media, "data-size": o, children: e && /* @__PURE__ */ s(_, { ...e, size: o }) || /* @__PURE__ */ s("div", { className: r.dot }) }),
+    /* @__PURE__ */ s("div", { className: r.border })
   ] }),
-  /* @__PURE__ */ a("div", { className: o.content, "data-size": s, children: [
-    (t || n) && /* @__PURE__ */ a(p, { loading: e, datetime: i, size: s, children: [
-      t && /* @__PURE__ */ r("strong", { children: t && n ? t + ", " : t }),
-      n && /* @__PURE__ */ r("span", { children: n })
+  /* @__PURE__ */ d("div", { className: r.content, "data-size": o, children: [
+    (t || c) && /* @__PURE__ */ d(p, { loading: i, datetime: n, size: o, children: [
+      t && /* @__PURE__ */ s("strong", { children: t && c ? t + ", " : t }),
+      c && /* @__PURE__ */ s("span", { children: c })
     ] }),
     m
   ] })

package/dist/components/Toolbar/ToolbarAdd.js

@@ -3,17 +3,17 @@ import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import { Menu as d } from "../Menu/Menu.js";
-import { ToolbarButton as s } from "./ToolbarButton.js";
-import { useRootContext as c } from "../RootProvider/RootProvider.js";
-import { ToolbarFilterBase as g } from "./ToolbarFilterBase.js";
-import { DrawerOrDropdown as a } from "../Dropdown/DrawerOrDropdown.js";
+import { ToolbarButton as d } from "./ToolbarButton.js";
+import { useRootContext as s } from "../RootProvider/RootProvider.js";
+import { ToolbarFilterBase as c } from "./ToolbarFilterBase.js";
+import { Menu as a } from "../Menu/Menu.js";
+import { DrawerOrDropdown as g } from "../Dropdown/DrawerOrDropdown.js";
 import "../Snackbar/useSnackbar.js";
-const I = ({ label: r = "Legg til", items: m, id: t }) => {
-  const { closeAll: n, currentId: i, toggleId: l } = c(), e = i === t;
-  return /* @__PURE__ */ p(g, { expanded: e, children: [
-    /* @__PURE__ */ o(s, { type: "add", onToggle: () => l(t), children: r }),
-    /* @__PURE__ */ o(a, { drawerTitle: r, onClose: n, open: e, children: /* @__PURE__ */ o(d, { theme: "global", items: m }) })
+const I = ({ label: r = "Legg til", items: n, id: t }) => {
+  const { closeAll: m, currentId: i, toggleId: l } = s(), e = i === t;
+  return /* @__PURE__ */ p(c, { expanded: e, children: [
+    /* @__PURE__ */ o(d, { type: "add", onToggle: () => l(t), children: r }),
+    /* @__PURE__ */ o(g, { drawerTitle: r, onClose: m, open: e, children: /* @__PURE__ */ o(a, { color: "neutral", items: n }) })
   ] });
 };
 export {

package/dist/components/Toolbar/ToolbarButton.js

@@ -1,44 +1,46 @@
 import { jsx as i } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
 import "../Icon/SvgIcon.js";
 import { Button as m } from "../Button/Button.js";
-import { ComboButton as u } from "../Button/ComboButton.js";
-import '../../assets/ToolbarButton.css';const c = "_removeButton_fxc8_1", l = {
-  removeButton: c
-}, C = ({
+import { ComboButton as a } from "../Button/ComboButton.js";
+import '../../assets/ToolbarButton.css';const p = "_removeButton_fxc8_1", c = {
+  removeButton: p
+}, z = ({
   type: e = "select",
   selected: o = !1,
   removable: s = !1,
   active: n,
-  children: r,
-  onToggle: t,
-  onRemove: a
+  children: t,
+  onToggle: r,
+  onRemove: u
 }) => s ? /* @__PURE__ */ i(
-  u,
+  a,
   {
-    className: l.removeButton,
+    className: c.removeButton,
     variant: n ? "solid" : "outline",
-    color: "primary",
     size: "sm",
     icon: "x-mark",
     selected: o,
-    onLabelClick: t,
-    onIconClick: a,
-    children: r
+    onLabelClick: r,
+    onIconClick: u,
+    children: t
   }
-) : e === "add" ? /* @__PURE__ */ i(m, { variant: "dotted", color: "primary", size: "sm", icon: "plus", selected: o, onClick: t, children: r }) : /* @__PURE__ */ i(
+) : e === "add" ? /* @__PURE__ */ i(m, { variant: "dotted", size: "sm", icon: "plus", selected: o, onClick: r, children: t }) : /* @__PURE__ */ i(
   m,
   {
     variant: n ? "solid" : "outline",
-    color: "primary",
     size: "sm",
     icon: "chevron-up-down",
     selected: o,
-    onClick: t,
+    onClick: r,
     reverse: !0,
-    children: r
+    children: t
   }
 );
 export {
-  C as ToolbarButton
+  z as ToolbarButton
 };