@wrdagency/blockout 1.0.30 → 1.0.31

package/dist/components/data-view/parts/footer/actions.js

@@ -1,10 +1,9 @@
-import { jsxs as u, jsx as p } from "react/jsx-runtime";
-import { Button as v } from "../../../button/index.js";
-import { Menu as k } from "../../../menu/index.js";
-import * as c from "react";
-import { useMemo as b } from "react";
-import { p as F } from "../../../../IconBase.es-rM5tt24D.js";
-import { a as A } from "../../../../DotsThreeVertical.es-uadrGk3y.js";
+import { jsxs as s, jsx as p } from "react/jsx-runtime";
+import { Button as c } from "../../../button/index.js";
+import { Menu as f } from "../../../menu/index.js";
+import * as l from "react";
+import { p as d } from "../../../../IconBase.es-rM5tt24D.js";
+import { a as u } from "../../../../DotsThreeVertical.es-uadrGk3y.js";
 import '../../../../assets/style26.css';import '../../../../assets/styles3.css';import '../../../../assets/style18.css';import '../../../../assets/style17.css';import '../../../../assets/styles5.css';import '../../../../assets/styles4.css';import '../../../../assets/style16.css';import '../../../../assets/style19.css';import '../../../../assets/style15.css';import '../../../../assets/style14.css';import '../../../../assets/style13.css';import '../../../../assets/prosemirror.css';import '../../../../assets/style12.css';import '../../../../assets/style11.css';import '../../../../assets/style9.css';import '../../../../assets/styles.css';import '../../../../assets/style6.css';import '../../../../assets/style5.css';import '../../../../assets/style4.css';import '../../../../assets/style3.css';import '../../../../assets/style2.css';import '../../../../assets/style.css';import '../../../../assets/style10.css';import '../../../../assets/style7.css';import '../../../../assets/style8.css';import '../../../../assets/styles2.css';/* empty css                          */
 import "../../../../style-CWAa57kN.js";
 /* empty css                         */
@@ -39,67 +38,49 @@ import "../../../../match-sorter.esm-MNVE8H_6.js";
 /* empty css                         */
 /* empty css                         */
 /* empty css                          */
-import { R as w } from "../../../../index-CLl-PPjx.js";
+import { R as h } from "../../../../index-CLl-PPjx.js";
 import "../../slots/group/context.js";
 import "../../slots/item/context.js";
 import "../../slots/property/context.js";
 /* empty css                         */
 import "../../../tag/index.js";
-const h = c.forwardRef((m, e) => /* @__PURE__ */ c.createElement(F, { ref: e, ...m, weights: A }));
-h.displayName = "DotsThreeVerticalIcon";
-const hr = ({}) => {
-  const { items: m, primaryKey: e, selection: i, actions: o } = w.use(), s = i && i.count() > 1, l = i && i.count() === 1, g = b(
-    () => o.filter((r) => r.variant === "primary").filter(
-      (r) => s && !!r.bulkFn || l && !!r.singleFn
+const n = l.forwardRef((i, m) => /* @__PURE__ */ l.createElement(d, { ref: m, ...i, weights: u }));
+n.displayName = "DotsThreeVerticalIcon";
+const ar = ({}) => {
+  const { items: i, primaryKey: m, selection: t, actions: o } = h.use();
+  if (!t || t.count() === 0 || o.length < 1)
+    return;
+  const e = i.filter(
+    (r) => t == null ? void 0 : t.has(r[m])
+  );
+  return /* @__PURE__ */ s("div", { className: "data-view-part-footer__actions", children: [
+    o.length > 0 && /* @__PURE__ */ p(
+      f,
+      {
+        iconOnly: !0,
+        variant: "quiet",
+        "aria-label": "More Actions",
+        context: e,
+        items: o,
+        children: /* @__PURE__ */ p(n, {})
+      }
     ),
-    [o, i]
-  ), n = b(
-    () => o.filter((r) => r.variant === "secondary").filter(
-      (r) => s && !!r.bulkFn || l && !!r.singleFn
-    ),
-    [o, i]
-  ), a = (r) => {
-    var d, f;
-    const t = m.filter(
-      (y) => i == null ? void 0 : i.has(y[e])
-    );
-    t.length > 1 ? (d = r.bulkFn) == null || d.call(r, t) : t.length === 1 && ((f = r.singleFn) == null || f.call(r, t[0]));
-  };
-  if (!(!i || i.count() === 0 || o.length < 1))
-    return /* @__PURE__ */ u("div", { className: "data-view-part-footer__actions", children: [
-      n.length > 0 && /* @__PURE__ */ p(
-        k,
-        {
-          iconOnly: !0,
-          variant: "quiet",
-          "aria-label": "More Actions",
-          items: n.map((r) => ({
-            id: r.id,
-            type: "action",
-            label: r.label,
-            icon: r.icon,
-            disabled: r.disabled,
-            onClick: () => a(r)
-          })),
-          children: /* @__PURE__ */ p(h, {})
-        }
-      ),
-      g.reverse().map((r, t) => /* @__PURE__ */ u(
-        v,
-        {
-          variant: t === 0 ? "neutral" : "quiet",
-          size: "small",
-          onClick: () => a(r),
-          disabled: r.disabled,
-          children: [
-            r.icon && /* @__PURE__ */ p(r.icon, {}),
-            r.label
-          ]
-        },
-        r.id
-      ))
-    ] });
+    o.filter((r) => r.type === "action").filter((r) => r.primary).reverse().map((r, a) => /* @__PURE__ */ s(
+      c,
+      {
+        variant: a === 0 ? "neutral" : "quiet",
+        size: "small",
+        onClick: () => r.onClick(e),
+        disabled: r.disabled,
+        children: [
+          r.icon && /* @__PURE__ */ p(r.icon, {}),
+          r.label
+        ]
+      },
+      a
+    ))
+  ] });
 };
 export {
-  hr as Actions
+  ar as Actions
 };

package/dist/components/data-view/parts/footer/index.js

@@ -38,6 +38,7 @@ import "../../../../match-sorter.esm-MNVE8H_6.js";
 /* empty css                          */
 import { R as n } from "../../../../index-CLl-PPjx.js";
 import "../../slots/group/context.js";
+import "../../../menu/context.js";
 /* empty css                         */
 import "../../slots/item/context.js";
 import "../../slots/property/context.js";
@@ -45,7 +46,7 @@ import "../../slots/property/context.js";
 import "../../../tag/index.js";
 import { Actions as s } from "./actions.js";
 import { Selection as g } from "./selection.js";
-const po = ({}) => {
+const mo = ({}) => {
   const { view: o, items: r, setView: i } = n.use(), p = (m) => {
     i({ ...o, page: m });
   };
@@ -65,5 +66,5 @@ const po = ({}) => {
   ] });
 };
 export {
-  po as Footer
+  mo as Footer
 };

package/dist/components/data-view/parts/footer/selection.js

@@ -37,12 +37,13 @@ import "../../../../match-sorter.esm-MNVE8H_6.js";
 /* empty css                          */
 import { R as m } from "../../../../index-CLl-PPjx.js";
 import "../../slots/group/context.js";
+import "../../../menu/context.js";
 /* empty css                         */
 import "../../slots/item/context.js";
 import "../../slots/property/context.js";
 /* empty css                         */
 import "../../../tag/index.js";
-const U = ({}) => {
+const W = ({}) => {
   const { selection: o } = m.use();
   if (o)
     return /* @__PURE__ */ r("div", { className: "data-view-part-footer__selection", children: [
@@ -58,5 +59,5 @@ const U = ({}) => {
     ] });
 };
 export {
-  U as Selection
+  W as Selection
 };

package/dist/components/data-view/parts/view-control/index.js

@@ -41,6 +41,7 @@ import { ToggleGroupControl as n } from "../../../controls/toggle-group-control/
 import { viewFieldsToListItems as _, getLayoutOptions as y, getSortDirectionOptions as H, getRelationshipVisiblityOptions as C, listItemsToViewFields as F } from "../../data/options.js";
 import { R as N } from "../../../../index-CLl-PPjx.js";
 import "../../slots/group/context.js";
+import "../../../menu/context.js";
 /* empty css                         */
 import "../../slots/item/context.js";
 import "../../slots/property/context.js";
@@ -100,27 +101,27 @@ const S = /* @__PURE__ */ new Map([
   ]
 ]), A = a.forwardRef((m, t) => /* @__PURE__ */ a.createElement(u, { ref: t, ...m, weights: S }));
 A.displayName = "SelectionSlashIcon";
-const _0 = ({ className: m }) => {
-  const { view: t, setView: d, fields: r, hierarchy: g } = N.use(), l = (e, w) => {
+const y0 = ({ className: m }) => {
+  const { view: t, setView: d, fields: l, hierarchy: g } = N.use(), r = (e, w) => {
     d({
       ...t,
       [e]: w
     });
   }, V = c(
-    () => r.filter((e) => e.sorting.sortable).map((e) => ({
+    () => l.filter((e) => e.sorting.sortable).map((e) => ({
       value: e.id,
       label: e.display.label
     })),
-    [t, r]
+    [t, l]
   ), i = c(
-    () => r.filter((e) => e.sorting.groupable).map((e) => ({
+    () => l.filter((e) => e.sorting.groupable).map((e) => ({
       value: e.id,
       label: e.display.label
     })),
-    [r]
+    [l]
   ), M = c(
-    () => _(t.fields, r),
-    [r]
+    () => _(t.fields, l),
+    [l]
   ), p = !!t.search;
   return /* @__PURE__ */ s("div", { className: b("component-view-control", m), children: [
     /* @__PURE__ */ o("fieldset", { className: "component-view-control__row", children: /* @__PURE__ */ o(
@@ -128,7 +129,7 @@ const _0 = ({ className: m }) => {
       {
         label: "Layout",
         value: t.layout,
-        onChangeValue: (e) => l("layout", e),
+        onChangeValue: (e) => r("layout", e),
         options: y(i.length > 0)
       }
     ) }),
@@ -139,7 +140,7 @@ const _0 = ({ className: m }) => {
           className: "component-view-control__row__grow",
           label: "Sort by",
           value: t.sortBy,
-          onChangeValue: (e) => l("sortBy", e),
+          onChangeValue: (e) => r("sortBy", e),
           options: V,
           disabled: p,
           help: p && "Sorting by search relevance."
@@ -149,7 +150,7 @@ const _0 = ({ className: m }) => {
         n,
         {
           value: t.sortOrder,
-          onChangeValue: (e) => l("sortOrder", e),
+          onChangeValue: (e) => r("sortOrder", e),
           options: H(),
           disabled: p,
           noLabels: !0
@@ -163,7 +164,7 @@ const _0 = ({ className: m }) => {
           className: "component-view-control__row__grow",
           label: "Group by",
           value: t.groupBy || "",
-          onChangeValue: (e) => l("groupBy", e),
+          onChangeValue: (e) => r("groupBy", e),
           options: [{ value: "", label: "" }, ...i]
         }
       ),
@@ -174,7 +175,7 @@ const _0 = ({ className: m }) => {
           onLabel: /* @__PURE__ */ o(v, {}),
           offLabel: /* @__PURE__ */ o(A, {}),
           value: !t.includeEmptyGroups,
-          onChangeValue: (e) => l("includeEmptyGroups", !e),
+          onChangeValue: (e) => r("includeEmptyGroups", !e),
           disabled: !t.groupBy
         }
       ) }),
@@ -182,7 +183,7 @@ const _0 = ({ className: m }) => {
         n,
         {
           value: t.groupOrder,
-          onChangeValue: (e) => l("groupOrder", e),
+          onChangeValue: (e) => r("groupOrder", e),
           options: H(),
           noLabels: !0,
           disabled: !t.groupBy
@@ -195,7 +196,7 @@ const _0 = ({ className: m }) => {
         className: "component-view-control__row__grow",
         label: "Sub-items",
         value: t.relationships,
-        onChangeValue: (e) => l("relationships", e),
+        onChangeValue: (e) => r("relationships", e),
         options: C()
       }
     ) }),
@@ -205,12 +206,12 @@ const _0 = ({ className: m }) => {
         className: "component-view-control__row__grow",
         label: "Properties",
         value: M,
-        onChangeValue: (e) => l("fields", F(e)),
+        onChangeValue: (e) => r("fields", F(e)),
         multiple: !0
       }
     ) })
   ] });
 };
 export {
-  _0 as ViewControl
+  y0 as ViewControl
 };

package/dist/components/data-view/root.js

@@ -47,13 +47,14 @@ import "../../match-sorter.esm-MNVE8H_6.js";
 /* empty css                    */
 import { R as N } from "../../index-CLl-PPjx.js";
 import "./slots/group/context.js";
+import "../menu/context.js";
 /* empty css                   */
 import "./slots/item/context.js";
 import "./slots/property/context.js";
 /* empty css                   */
 import "../tag/index.js";
 import "./parts/view-control/index.js";
-const qo = ({
+const yo = ({
   className: s,
   items: p,
   primaryKey: i,
@@ -106,5 +107,5 @@ const qo = ({
   ] }) });
 };
 export {
-  qo as Root
+  yo as Root
 };

package/dist/components/data-view/slots/item/actions.js

@@ -1,44 +1,30 @@
-import { jsx as m } from "react/jsx-runtime";
-import { Menu as c } from "../../../menu/index.js";
-import { cn as f } from "../../../../utils/css.js";
-import * as i from "react";
-import { useMemo as p } from "react";
-import { w as d } from "../../../../SSRBase.es-BUXS72ra.js";
-import { a as u } from "../../../../DotsThreeVertical.es-uadrGk3y.js";
-import { R as h } from "../../../../index-CLl-PPjx.js";
-import { useItem as b } from "./context.js";
-const n = i.forwardRef((t, o) => /* @__PURE__ */ i.createElement(d, { ref: o, ...t, weights: u }));
-n.displayName = "DotsThreeVerticalIcon";
-const v = ({ className: t }) => {
-  const { actions: o } = h.use(), { item: l } = b(), r = p(
-    () => o.filter((e) => !!e.singleFn).map(
-      (e) => ({
-        type: "action",
-        label: e.label,
-        icon: e.icon,
-        disabled: e.disabled,
-        onClick: () => a(e)
-      })
-    ),
-    [o]
-  ), a = (e) => {
-    var s;
-    (s = e.singleFn) == null || s.call(e, l);
-  };
-  if (r.length !== 0)
-    return /* @__PURE__ */ m(
-      c,
+import { jsx as r } from "react/jsx-runtime";
+import { Menu as s } from "../../../menu/index.js";
+import { cn as a } from "../../../../utils/css.js";
+import * as e from "react";
+import { w as n } from "../../../../SSRBase.es-BUXS72ra.js";
+import { a as c } from "../../../../DotsThreeVertical.es-uadrGk3y.js";
+import { R as l } from "../../../../index-CLl-PPjx.js";
+import { useItem as f } from "./context.js";
+const i = e.forwardRef((o, t) => /* @__PURE__ */ e.createElement(n, { ref: t, ...o, weights: c }));
+i.displayName = "DotsThreeVerticalIcon";
+const x = ({ className: o }) => {
+  const { actions: t } = l.use(), { item: m } = f();
+  if (t.length !== 0)
+    return /* @__PURE__ */ r(
+      s,
       {
-        className: f("data-view-slot__item__actions", t),
+        className: a("data-view-slot__item__actions", o),
         iconOnly: !0,
         variant: "ghost",
         size: "small",
         "aria-label": "More Actions",
-        items: r,
-        children: /* @__PURE__ */ m(n, {})
+        context: [m],
+        items: t,
+        children: /* @__PURE__ */ r(i, {})
       }
     );
 };
 export {
-  v as Actions
+  x as Actions
 };

package/dist/components/data-view/types/actions.d.ts

@@ -1,15 +1,5 @@
-import { FC } from 'react';
-export type Action<TData extends object = object> = {
-    id: string;
-    label: string;
-    variant: "primary" | "secondary";
-    icon?: FC<{
-        className?: string;
-    }>;
-    disabled: boolean;
-    singleFn?: (item: TData) => Promise<void> | void;
-    bulkFn?: (item: TData[]) => Promise<void> | void;
-};
-export type PartialAction<TData extends object = object> = Partial<Action<TData>> & {
-    id: string;
+import { AnyMenuItem } from '../../menu/types';
+export type Action<TData extends object = object> = AnyMenuItem<TData[]> & {
+    primary?: boolean;
+    disabled?: boolean;
 };

package/dist/components/menu/context.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+type MenuContext<Context = any> = {
+    actionContext: Context;
+};
+export declare const MenuProvider: FC<PropsWithChildren & MenuContext>;
+export declare const useMenu: () => MenuContext<any>;
+export {};

package/dist/components/menu/context.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createContext as n, useContext as s } from "react";
+const e = n(void 0), c = ({
+  children: o,
+  actionContext: r
+}) => /* @__PURE__ */ t(e.Provider, { value: { actionContext: r }, children: o }), m = () => s(e);
+export {
+  c as MenuProvider,
+  m as useMenu
+};

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

@@ -1,12 +1,13 @@
-import { FC, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { ButtonProps } from '../button/button';
 import { AnyMenuItem } from './types';
-interface MenuProps extends PropsWithChildren {
+interface MenuProps<Context> extends PropsWithChildren {
     className?: string;
     iconOnly?: boolean;
     variant?: ButtonProps["variant"];
     size?: ButtonProps["size"];
-    items: AnyMenuItem[];
+    items: AnyMenuItem<Context>[];
+    context?: Context;
 }
-export declare const Menu: FC<MenuProps>;
+export declare function Menu<Context>({ className, iconOnly, items, variant, size, children, context, }: MenuProps<Context>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/menu/index.js

@@ -1,30 +1,32 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { cn as d } from "../../utils/css.js";
-import { useState as M } from "react";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { cn as M } from "../../utils/css.js";
+import { useState as w } from "react";
 import { Button as r } from "../button/index.js";
-import { M as w } from "../../item-CmTk8eHD.js";
+import { MenuProvider as _ } from "./context.js";
+import { M as h } from "../../item-CmTk8eHD.js";
 import '../../assets/style20.css';/* empty css                   */
-import { M as _, a as h, b as v } from "../../menu-button-GQO5dB3U.js";
-const I = ({
+import { M as v, a as x, b as P } from "../../menu-button-GQO5dB3U.js";
+function C({
   className: n,
   iconOnly: t = !1,
   items: m,
   variant: s,
   size: a,
-  children: p
-}) => {
-  const [o, u] = M(!1), c = t ? r.Icon : r;
-  return /* @__PURE__ */ l(_, { open: o, setOpen: u, children: [
+  children: p,
+  context: i
+}) {
+  const [o, u] = w(!1), c = t ? r.Icon : r;
+  return /* @__PURE__ */ e(_, { actionContext: i, children: /* @__PURE__ */ l(v, { open: o, setOpen: u, children: [
     /* @__PURE__ */ e(
-      h,
+      x,
       {
-        className: d("component-menu__button", n),
+        className: M("component-menu__button", n),
         render: /* @__PURE__ */ e(c, { variant: s, size: a }),
         children: p
       }
     ),
     o && /* @__PURE__ */ e(
-      v,
+      P,
       {
         wrapperProps: {
           className: "component-menu__menu-wrapper"
@@ -34,11 +36,11 @@ const I = ({
         gutter: 8,
         overflowPadding: 4,
         className: "component-menu__window",
-        children: m.map((i, f) => /* @__PURE__ */ e(w, { item: i }, f))
+        children: m.map((f, d) => /* @__PURE__ */ e(h, { item: f }, d))
       }
     )
-  ] });
-};
+  ] }) });
+}
 export {
-  I as Menu
+  C as Menu
 };

package/dist/components/menu/item.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { AnyMenuItem } from './types';
 interface MenuItemProps {
-    item: AnyMenuItem;
+    item: AnyMenuItem<any>;
 }
 export declare const MenuItem: FC<MenuItemProps>;
 export {};

package/dist/components/menu/items/action.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { MenuItemAction } from '../types';
 interface ActionMenuItemProps {
-    item: MenuItemAction;
+    item: MenuItemAction<any>;
 }
 export declare const ActionMenuItem: FC<ActionMenuItemProps>;
 export {};

package/dist/components/menu/items/action.js

@@ -1,13 +1,16 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { EmptyIcon as c } from "../icon.js";
-import { M as t } from "../../../2NBKRL7C-DBbnghCe.js";
-const l = ({ item: n }) => {
-  const m = n.icon || c;
+import { useMenu as t } from "../context.js";
+import { EmptyIcon as i } from "../icon.js";
+import { M as _ } from "../../../2NBKRL7C-DBbnghCe.js";
+const d = ({ item: n }) => {
+  const { actionContext: c } = t(), m = n.icon || i;
   return /* @__PURE__ */ o(
-    t,
+    _,
     {
       className: "component-menu__item component-menu__item--action",
-      onClick: n.onClick,
+      onClick: () => {
+        n.onClick(c);
+      },
       disabled: n.disabled,
       children: [
         /* @__PURE__ */ e(m, { className: "component-menu__item__icon component-menu__item__icon--pictoral" }),
@@ -20,5 +23,5 @@ const l = ({ item: n }) => {
   );
 };
 export {
-  l as ActionMenuItem
+  d as ActionMenuItem
 };

package/dist/components/menu/items/submenu.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { MenuItemSubmenu } from '../types';
 interface SubmenuMenuItemProps {
-    item: MenuItemSubmenu;
+    item: MenuItemSubmenu<any>;
 }
 export declare const SubmenuMenuItem: FC<SubmenuMenuItemProps>;
 export {};

package/dist/components/menu/items/toggle.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { MenuItemToggle } from '../types';
 interface ToggleMenuItemProps {
-    item: MenuItemToggle;
+    item: MenuItemToggle<any>;
 }
 export declare const ToggleMenuItem: FC<ToggleMenuItemProps>;
 export {};

package/dist/components/menu/items/toggle.js

@@ -1,29 +1,30 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
-import { cn as r } from "../../../utils/css.js";
-import { r as a, a as i } from "../../../Square.es-KJLdY11q.js";
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { cn as i } from "../../../utils/css.js";
+import { r as a, a as p } from "../../../Square.es-KJLdY11q.js";
 import "react";
-import { EmptyIcon as p } from "../icon.js";
-import { M as d } from "../../../2NBKRL7C-DBbnghCe.js";
-const x = ({ item: e }) => {
-  const t = e.icon || p, s = () => {
-    var _, m, l;
-    const c = !e.checked;
-    return (_ = e.onToggle) == null || _.call(e, c), c ? (m = e.onCheck) == null ? void 0 : m.call(e) : (l = e.onUncheck) == null ? void 0 : l.call(e);
+import { useMenu as d } from "../context.js";
+import { EmptyIcon as u } from "../icon.js";
+import { M as h } from "../../../2NBKRL7C-DBbnghCe.js";
+const I = ({ item: e }) => {
+  const { actionContext: o } = d(), l = e.icon || u, r = () => {
+    var m, t, s;
+    const _ = !e.checked;
+    return (m = e.onToggle) == null || m.call(e, _, o), _ ? (t = e.onCheck) == null ? void 0 : t.call(e, o) : (s = e.onUncheck) == null ? void 0 : s.call(e, o);
   };
-  return /* @__PURE__ */ o(
-    d,
+  return /* @__PURE__ */ c(
+    h,
     {
       hideOnClick: !1,
-      className: r(
+      className: i(
         "component-menu__item component-menu__item--toggle",
         e.checked && "component-menu__item--toggle--checked"
       ),
       disabled: e.disabled,
-      onClick: s,
+      onClick: r,
       children: [
-        /* @__PURE__ */ n(t, { className: "component-menu__item__icon component-menu__item__icon--pictoral" }),
-        /* @__PURE__ */ o("div", { className: "component-menu__item__text", children: [
-          /* @__PURE__ */ o("div", { className: "component-menu__item__text__header", children: [
+        /* @__PURE__ */ n(l, { className: "component-menu__item__icon component-menu__item__icon--pictoral" }),
+        /* @__PURE__ */ c("div", { className: "component-menu__item__text", children: [
+          /* @__PURE__ */ c("div", { className: "component-menu__item__text__header", children: [
             /* @__PURE__ */ n("div", { className: "component-menu__item__label", children: e.label }),
             e.checked ? /* @__PURE__ */ n(
               a,
@@ -31,7 +32,7 @@ const x = ({ item: e }) => {
                 weight: "fill",
                 className: "component-menu__item__icon component-menu__item__icon--checkbox"
               }
-            ) : /* @__PURE__ */ n(i, { className: "component-menu__item__icon component-menu__item__icon--checkbox" })
+            ) : /* @__PURE__ */ n(p, { className: "component-menu__item__icon component-menu__item__icon--checkbox" })
           ] }),
           /* @__PURE__ */ n("p", { className: "component-menu__item__description", children: e.description })
         ] })
@@ -40,5 +41,5 @@ const x = ({ item: e }) => {
   );
 };
 export {
-  x as ToggleMenuItem
+  I as ToggleMenuItem
 };