impact-nova 1.7.1 → 1.7.3

package/dist/components/ui/ag-grid-react/index.js

@@ -1,32 +1,32 @@
-import { jsxs as P, jsx as a } from "react/jsx-runtime";
-import { lazy as V, useRef as E, useState as p, useCallback as v, useMemo as F, useEffect as W, Suspense as _ } from "react";
+import { jsxs as U, jsx as a } from "react/jsx-runtime";
+import { lazy as V, useRef as D, useState as f, useCallback as F, useMemo as y, useEffect as W, Suspense as _ } from "react";
 import { ModuleRegistry as $, AllCommunityModule as q, ValidationModule as K } from "ag-grid-community";
-import { AllEnterpriseModule as U } from "ag-grid-enterprise";
-import { AgGridReact as z } from "ag-grid-react";
-import { customAgGridTheme as J } from "./theme.js";
+import { AllEnterpriseModule as z } from "ag-grid-enterprise";
+import { AgGridReact as J } from "ag-grid-react";
+import { customAgGridTheme as X } from "./theme.js";
 import { CustomHeader as B } from "./headers/custom-header.js";
 import { CustomHeaderGroup as Q } from "./headers/custom-header-group.js";
-import { GridHeaderContext as X } from "./headers/context/grid-header-context.js";
-import { convertToAgGridFilterModel as Y, getMultiFilterIndices as Z, convertFromAgGridFilterModel as ee } from "./headers/utils/filter-utils.js";
-import { ColumnSettingsMenu as te } from "./headers/column-menu/column-settings-menu.js";
-import { AG_GRID_VALUE_FORMATTERS as re } from "./value-formatters.js";
+import { GridHeaderContext as Y } from "./headers/context/grid-header-context.js";
+import { convertToAgGridFilterModel as Z, getMultiFilterIndices as ee, convertFromAgGridFilterModel as te } from "./headers/utils/filter-utils.js";
+import { ColumnSettingsMenu as re } from "./headers/column-menu/column-settings-menu.js";
+import { AG_GRID_VALUE_FORMATTERS as ne } from "./value-formatters.js";
 /* empty css                */
-const ne = V(() => import("./headers/advanced-filter/advanced-filter-dialog.js"));
-$.registerModules([q, U, K]);
-function Fe({
+const oe = V(() => import("./headers/advanced-filter/advanced-filter-dialog.js"));
+$.registerModules([q, z, K]);
+function ye({
   children: c,
-  defaultColDef: l,
+  defaultColDef: o,
   defaultColGroupDef: i,
-  columnDefs: f,
+  columnDefs: g,
   valueFormatters: d,
   onGridReady: m,
   ...u
 }) {
-  const r = E(null), s = E(null), [g, M] = p(null), [G, h] = p(!1), [y, x] = p(null), [R, S] = p(!1), [b, k] = p(null), [I, O] = p(null), D = v((e) => {
+  const r = D(null), s = D(null), [h, M] = f(null), [G, C] = f(!1), [b, x] = f(null), [R, S] = f(!1), [A, k] = f(null), [N, E] = f(null), O = F((e) => {
     if (!r.current) return;
-    const t = Y(e);
+    const t = Z(e);
     r.current.setFilterModel(t), r.current.onFilterChanged();
-  }, []), C = F(() => ({
+  }, []), v = y(() => ({
     openSearch: (e) => {
       if (!r.current) return;
       const t = r.current.getGridOption("context") || {};
@@ -38,76 +38,78 @@ function Fe({
       r.current.setGridOption("context", { ...e, activeSearchColumnId: null }), r.current.refreshHeader();
     },
     openAdvancedFilter: (e) => {
-      x(e || null), h(!0);
+      x(e || null), C(!0);
     },
     closeAdvancedFilter: () => {
-      h(!1), x(null);
+      C(!1), x(null);
     },
     applyAdvancedFilter: (e) => {
-      D(e);
+      O(e);
     },
     openMenu: (e, t) => {
-      k(e), O(t), S(!0);
+      k(e), E(t), S(!0);
     },
     closeMenu: () => {
-      S(!1), k(null), O(null);
+      S(!1), k(null), E(null);
     },
-    activeMenuColumnId: b
-  }), [D, b]), H = v((e) => {
+    activeMenuColumnId: A
+  }), [O, A]), T = F((e) => {
     r.current = e.api, M(e.api), e.api.setGridOption("context", { activeSearchColumnId: null }), m && m(e);
   }, [m]);
   W(() => {
     const e = s.current;
     if (!e) return;
-    const t = (o) => {
-      if (o.key !== "Enter" && o.key !== " ") return;
-      const n = o.target;
-      if (!n.classList.contains("ag-cell") && !n.classList.contains("ag-header-cell")) return;
-      const A = n.querySelector(
+    const t = (n) => {
+      if (n.key !== "Enter" && n.key !== " ") return;
+      const l = n.target;
+      if (!l.classList.contains("ag-cell") && !l.classList.contains("ag-header-cell")) return;
+      const p = l.querySelector(
         'button, [role="checkbox"], [role="switch"], [role="combobox"], [role="button"], [role="link"], a, input, select, textarea, .cursor-pointer'
       );
-      A && (o.preventDefault(), o.stopPropagation(), A.click(), A.focus());
+      p && (n.preventDefault(), n.stopPropagation(), p.click(), p.focus());
     };
     return e.addEventListener("keydown", t, !0), () => e.removeEventListener("keydown", t, !0);
   }, []);
-  const N = F(() => ({
+  const H = y(() => ({
     headerComponent: B,
-    ...l,
+    ...o,
     suppressHeaderKeyboardEvent: (e) => {
-      const { event: t } = e;
+      const { event: t } = e, n = t.target;
+      if (n.tagName === "INPUT" || n.tagName === "TEXTAREA")
+        return !(t.key === "Enter" || t.key === "Escape" || t.key === "Tab");
       if (t.key === "Enter" || t.key === " ") {
-        const o = t.target.closest(".ag-header-cell");
-        if (o) {
-          const n = o.querySelector('[role="checkbox"], button, [role="switch"], input');
-          if (n)
-            return t.preventDefault(), n.click(), !0;
+        const p = n.closest(".ag-header-cell");
+        if (p) {
+          const I = p.querySelector('[role="checkbox"], button, [role="switch"], input');
+          if (I)
+            return t.preventDefault(), I.click(), !0;
         }
       }
-      return l?.suppressHeaderKeyboardEvent?.(e) ?? !1;
+      return o?.suppressHeaderKeyboardEvent?.(e) ?? !1;
     },
     headerComponentParams: {
-      ...l?.headerComponentParams
+      ...o?.headerComponentParams
     }
-  }), [l]), j = F(() => ({
+  }), [o]), j = y(() => ({
     headerGroupComponent: Q,
     ...i,
     headerGroupComponentParams: {
       ...i?.headerGroupComponentParams
     }
-  }), [i]), L = F(() => ({
-    ...re,
+  }), [i]), L = y(() => ({
+    ...ne,
     // Always available - value formatters
     ...u.components,
     // User components override
     ...d
     // Optional custom formatters override defaults
-  }), [d, u.components]), T = v((e) => {
+  }), [d, u.components]), P = F((e) => {
     if (e.value !== null && e.value !== void 0 && typeof e.value == "object") {
-      const t = Object.entries(e.value).map(([o, n]) => n && typeof n == "object" && "value" in n ? n.value : typeof n != "object" && typeof n < "u" ? n : null).filter((o) => o != null);
+      const t = Object.entries(e.value).map(([n, l]) => l && typeof l == "object" && "value" in l ? l.value : typeof l != "object" && typeof l < "u" ? l : null).filter((n) => n != null);
       return t.length > 0 ? t.join("	") : "";
     }
     return e.value;
-  }, []), w = v((e) => {
+  }, []), w = F((e) => {
     if (typeof e.value == "string") {
       const t = e.value.trim();
       if (t.startsWith("{") || t.startsWith("["))
@@ -119,18 +121,18 @@ function Fe({
     }
     return e.value;
   }, []);
-  return /* @__PURE__ */ P(X.Provider, { value: C, children: [
+  return /* @__PURE__ */ U(Y.Provider, { value: v, children: [
     /* @__PURE__ */ a("div", { ref: s, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ a(
-      z,
+      J,
       {
-        theme: J,
-        defaultColDef: N,
-        columnDefs: f,
+        theme: X,
+        defaultColDef: H,
+        columnDefs: g,
         cellSelection: !0,
         defaultColGroupDef: j,
-        onGridReady: H,
+        onGridReady: T,
         components: L,
-        processCellForClipboard: T,
+        processCellForClipboard: P,
         processCellFromClipboard: w,
         ensureDomOrder: !0,
         suppressHeaderFocus: !1,
@@ -163,73 +165,73 @@ function Fe({
     ) }),
     c,
     /* @__PURE__ */ a(
-      oe,
+      le,
       {
         isOpen: G,
-        columnId: y,
-        gridApi: g,
-        onClose: C.closeAdvancedFilter,
-        onApply: C.applyAdvancedFilter
+        columnId: b,
+        gridApi: h,
+        onClose: v.closeAdvancedFilter,
+        onApply: v.applyAdvancedFilter
       }
     ),
     /* @__PURE__ */ a(
-      le,
+      ie,
       {
         isOpen: R,
-        columnId: b,
-        gridApi: g,
-        anchor: I,
-        onClose: C.closeMenu
+        columnId: A,
+        gridApi: h,
+        anchor: N,
+        onClose: v.closeMenu
       }
     )
   ] });
 }
-function oe({
+function le({
   isOpen: c,
-  columnId: l,
+  columnId: o,
   gridApi: i,
-  onClose: f,
+  onClose: g,
   onApply: d
 }) {
-  if (!c || !l || !i) return null;
-  const m = i.getColumn(l);
+  if (!c || !o || !i) return null;
+  const m = i.getColumn(o);
   if (!m) return null;
-  const u = m.getColDef(), r = u.headerComponentParams, s = Z(u), g = s.text !== -1 || s.number !== -1 || s.date !== -1, M = s.set !== -1, h = u.filter === "agMultiColumnFilter" && (g || M) ? "multi" : u.filter === "agNumberColumnFilter" ? "number" : u.filter === "agDateColumnFilter" ? "date" : u.filter === "agSetColumnFilter" || r?.selectOptions ? "select" : "text", y = ee(i.getFilterModel());
+  const u = m.getColDef(), r = u.headerComponentParams, s = ee(u), h = s.text !== -1 || s.number !== -1 || s.date !== -1, M = s.set !== -1, C = u.filter === "agMultiColumnFilter" && (h || M) ? "multi" : u.filter === "agNumberColumnFilter" ? "number" : u.filter === "agDateColumnFilter" ? "date" : u.filter === "agSetColumnFilter" || r?.selectOptions ? "select" : "text", b = te(i.getFilterModel());
   return /* @__PURE__ */ a(_, { fallback: null, children: /* @__PURE__ */ a(
-    ne,
+    oe,
     {
       isOpen: c,
-      onClose: f,
+      onClose: g,
       onApply: d,
-      columnId: l,
-      columnLabel: u.headerName || l,
-      columnType: h,
+      columnId: o,
+      columnLabel: u.headerName || o,
+      columnType: C,
       selectOptions: r?.selectOptions,
       isMultiSelect: r?.isMultiSelect,
-      initialModel: y,
+      initialModel: b,
       api: i
     }
   ) });
 }
-function le({
+function ie({
   isOpen: c,
-  columnId: l,
+  columnId: o,
   gridApi: i,
-  anchor: f,
+  anchor: g,
   onClose: d
 }) {
-  return !c || !l || !i ? null : /* @__PURE__ */ a(
-    te,
+  return !c || !o || !i ? null : /* @__PURE__ */ a(
+    re,
     {
       isOpen: c,
-      columnId: l,
+      columnId: o,
       gridApi: i,
-      anchor: f,
+      anchor: g,
       onClose: d
     }
   );
 }
 export {
-  Fe as AgGridWrapper,
-  Fe as default
+  ye as AgGridWrapper,
+  ye as default
 };

package/dist/components/ui/ag-grid-react/theme.js

@@ -9,6 +9,9 @@ const d = e.withPart(r).withParams({
   checkboxCheckedBackgroundColor: "#ECEEFD",
   checkboxCheckedBorderColor: "#4259EE",
   checkboxCheckedShapeColor: "#4259EE",
+  checkboxIndeterminateBackgroundColor: "transparent",
+  checkboxIndeterminateBorderColor: "#4259EE",
+  checkboxIndeterminateShapeColor: "#4259EE",
   columnBorder: !0,
   columnDropCellBorder: !0,
   fontFamily: "inherit",
@@ -38,6 +41,7 @@ const d = e.withPart(r).withParams({
   menuShadow: "#00000040 0px 0px 2px 0px",
   menuTextColor: "#1F2B4D",
   pinnedRowBackgroundColor: "#F4F1F9",
+  pinnedSourceRowBackgroundColor: "#F4F1F9",
   pinnedRowBorder: !1
 });
 export {

package/dist/components/ui/data-table/data-table-column-list.js

@@ -1,82 +1,82 @@
 import { jsx as M } from "react/jsx-runtime";
-import { useState as z, useRef as P, useCallback as h, useEffect as _ } from "react";
-import { useDataTable as q } from "./data-table-context.js";
-import { NestedList as B } from "../nested-list/nested-list.js";
-import { SelectionMode as H } from "../types/nested-list.types.js";
-import { mergePartialOrderedColumnState as J } from "./data-table-column-state.js";
-import { useImpactNovaI18n as K } from "../../../i18n/ImpactNovaI18nContext.js";
-const le = ({
+import { useState as E, useRef as P, useCallback as m, useEffect as q } from "react";
+import { useDataTable as B } from "./data-table-context.js";
+import { NestedList as H } from "../nested-list/nested-list.js";
+import { SelectionMode as J } from "../types/nested-list.types.js";
+import { mergePartialOrderedColumnState as Q } from "./data-table-column-state.js";
+import { useImpactNovaI18n as X } from "../../../i18n/ImpactNovaI18nContext.js";
+const ne = ({
   enableApplyDiscard: b = !1,
   showSearch: R = !0,
   showSelectAll: w = !0,
   showCollapse: L = !0
 }) => {
-  const { gridApi: l } = q(), { t: d } = K(), [j, N] = z([]), [A, F] = z(!1), m = P(!1), U = P(/* @__PURE__ */ new Map()), D = h(() => {
-    if (!l || m.current) return;
-    const n = l.getColumnState(), a = new Map(n.map((t) => [t.colId, t]));
-    U.current = a;
-    const o = l.getColumns() || [], u = new Map(o.map((t) => [t.getColId(), t])), c = [], e = [], S = /* @__PURE__ */ new Map(), T = (t, i) => {
+  const { gridApi: l } = B(), { t: f } = X(), [j, x] = E([]), [A, F] = E(!1), d = P(!1), [K, V] = E(!1), U = P(/* @__PURE__ */ new Map()), y = m(() => {
+    if (!l || d.current) return;
+    const o = l.getColumnState(), c = new Map(o.map((t) => [t.colId, t]));
+    U.current = c;
+    const n = l.getColumns() || [], u = new Map(n.map((t) => [t.getColId(), t])), a = [], e = [], S = /* @__PURE__ */ new Map(), D = (t, s) => {
       const r = t.getGroupId();
-      let s = S.get(r);
-      if (s) return s;
-      const f = t.getOriginalParent(), g = f ? T(f, i).children : i, C = t.getColGroupDef();
-      return s = {
+      let i = S.get(r);
+      if (i) return i;
+      const h = t.getOriginalParent(), g = h ? D(h, s).children : s, C = t.getColGroupDef();
+      return i = {
         id: r,
         label: C?.headerName || r,
         checked: !0,
         children: [],
         category: "group"
-      }, S.set(r, s), g.push(s), s;
+      }, S.set(r, i), g.push(i), i;
     };
-    let v = 0, O = 0, I = 0, x = 0;
-    n.forEach((t) => {
-      const i = u.get(t.colId);
-      if (!i) return;
-      let r = l.getDisplayNameForColumn(i, "header");
+    let T = 0, O = 0, v = 0, z = 0;
+    o.forEach((t) => {
+      const s = u.get(t.colId);
+      if (!s) return;
+      let r = l.getDisplayNameForColumn(s, "header");
       if (r === "") return;
       if (r == null) {
-        const G = i.getColDef();
+        const G = s.getColDef();
         if (G.headerName === "") return;
         r = G.headerName || G.field || t.colId;
       }
       if (!r || r.trim() === "")
         return;
-      const s = !t.hide, f = {
+      const i = !t.hide, h = {
         id: t.colId,
         label: r,
-        checked: s
+        checked: i
       };
-      t.pinned ? (v++, s && O++) : (I++, s && x++);
-      const g = t.pinned ? c : e, C = i.getOriginalParent();
-      C?.getColGroupDef().children ? T(C, g).children.push(f) : g.push(f);
+      t.pinned ? (T++, i && O++) : (v++, i && z++);
+      const g = t.pinned ? a : e, C = s.getOriginalParent();
+      C?.getColGroupDef().children ? D(C, g).children.push(h) : g.push(h);
     });
-    const k = (t) => {
-      let i = t.length > 0;
+    const I = (t) => {
+      let s = t.length > 0;
       for (const r of t)
-        r.children && (r.checked = k(r.children)), r.checked || (i = !1);
-      return i;
+        r.children && (r.checked = I(r.children)), r.checked || (s = !1);
+      return s;
     };
-    k(c), k(e);
-    const y = [];
-    c.length > 0 && y.push({
+    I(a), I(e);
+    const k = [];
+    a.length > 0 && k.push({
       id: "root-frozen",
-      label: d("dataTable.frozenColumns"),
-      checked: v > 0 && O === v,
-      children: c,
+      label: f("dataTable.frozenColumns"),
+      checked: T > 0 && O === T,
+      children: a,
       category: "structure",
       isDragDisabled: !0
-    }), e.length > 0 && y.push({
+    }), e.length > 0 && k.push({
       id: "root-scrollable",
-      label: d("dataTable.scrollableColumns"),
-      checked: I > 0 && x === I,
+      label: f("dataTable.scrollableColumns"),
+      checked: v > 0 && z === v,
       children: e,
       category: "structure",
       isDragDisabled: !0
-    }), N(y), F(!0);
-  }, [l, d]);
-  _(() => {
+    }), x(k), F(!0);
+  }, [l, f]);
+  q(() => {
     if (!l) return;
-    const n = setTimeout(() => D(), 0), a = [
+    const o = setTimeout(() => y(), 0), c = [
       "columnVisible",
       "columnPinned",
       "columnMoved",
@@ -85,77 +85,83 @@ const le = ({
       "columnGroupOpened",
       "columnRowGroupChanged",
       "columnPivotModeChanged",
-      "columnEverythingChanged"
+      "columnEverythingChanged",
+      "dragStopped",
+      "columnValueChanged",
+      "displayedColumnsChanged"
     ];
-    let o = null;
+    let n = null;
     const u = () => {
-      o && clearTimeout(o), o = setTimeout(() => {
-        o = null, D();
+      n && clearTimeout(n), n = setTimeout(() => {
+        n = null;
+        const a = !d.current;
+        d.current = !1, y(), a && V((e) => !e);
       }, 150);
     };
-    return l.isDestroyed() || a.forEach((c) => l.addEventListener(c, u)), () => {
-      clearTimeout(n), o && clearTimeout(o), l.isDestroyed() || a.forEach((c) => l.removeEventListener(c, u));
+    return l.isDestroyed() || c.forEach((a) => l.addEventListener(a, u)), () => {
+      clearTimeout(o), n && clearTimeout(n), l.isDestroyed() || c.forEach((a) => l.removeEventListener(a, u));
     };
-  }, [l, D]);
-  const E = h((n) => {
-    const a = [], o = (u, c) => {
+  }, [l, y]);
+  const N = m((o) => {
+    const c = [], n = (u, a) => {
       u.forEach((e) => {
         if (e.id === "root-frozen") {
-          e.children && o(e.children, "left");
+          e.children && n(e.children, "left");
           return;
         }
         if (e.id === "root-scrollable") {
-          e.children && o(e.children, null);
+          e.children && n(e.children, null);
           return;
         }
-        e.category === "group" || e.children && e.children.length > 0 ? e.children && o(e.children, c) : l?.getColumn(e.id) && a.push({
+        e.category === "group" || e.children && e.children.length > 0 ? e.children && n(e.children, a) : l?.getColumn(e.id) && c.push({
           colId: e.id,
-          pinned: c,
+          pinned: a,
           hide: !e.checked
         });
       });
     };
-    return o(n, null), a;
-  }, [l]), p = h((n) => {
+    return n(o, null), c;
+  }, [l]), p = m((o) => {
     if (!l) return;
-    m.current = !0;
-    const a = E(n);
-    if (a.length === 0) {
+    d.current = !0;
+    const c = N(o);
+    if (c.length === 0) {
       setTimeout(() => {
-        m.current = !1;
+        d.current = !1;
       }, 300);
       return;
     }
-    const o = l.getColumnState(), u = J(o, a);
+    const n = l.getColumnState(), u = Q(n, c);
     l.applyColumnState({
       state: u,
       applyOrder: !0
     }), setTimeout(() => {
-      m.current = !1;
+      d.current = !1;
     }, 300);
-  }, [l, E]), V = h((n) => {
-    p(n);
-  }, [p]), W = h((n) => {
-    b || p(n), N(n);
+  }, [l, N]), W = m((o) => {
+    p(o);
+  }, [p]), _ = m((o) => {
+    b || p(o), x(o);
   }, [b, p]);
   return A ? /* @__PURE__ */ M("div", { className: "flex flex-col h-full bg-canvas-elevated", children: /* @__PURE__ */ M(
-    B,
+    H,
     {
       items: j,
-      onChange: W,
-      onSubmit: V,
+      onChange: _,
+      onSubmit: W,
       enableApplyDiscard: b,
       enableSearch: R,
       enableSelectAll: w,
       enableDragDrop: !0,
       enableCollapse: !0,
       enableGlobalCollapse: L,
-      selectionMode: H.CASCADE_DOWN,
-      searchPlaceholder: d("dataTable.searchColumnsPlaceholder"),
+      selectionMode: J.CASCADE_DOWN,
+      searchPlaceholder: f("dataTable.searchColumnsPlaceholder"),
       className: "h-full"
-    }
-  ) }) : /* @__PURE__ */ M("div", { className: "p-4 text-[13px] text-content-placeholder", children: d("dataTable.loadingColumns") });
+    },
+    K ? "sync-a" : "sync-b"
+  ) }) : /* @__PURE__ */ M("div", { className: "p-4 text-[13px] text-content-placeholder", children: f("dataTable.loadingColumns") });
 };
 export {
-  le as DataTableColumnList
+  ne as DataTableColumnList
 };

package/dist/components/ui/expandable-sku/expandable-sku.d.ts

@@ -0,0 +1,38 @@
+import { SkuRowSelection, SkuRowSection } from './expandable-sku.types';
+import * as React from "react";
+export type { SkuRowAttributesSection, SkuRowCustomSection, SkuRowMetricColumn, SkuRowMetricsSection, SkuRowSelection, SkuRowSection, } from './expandable-sku.types';
+export interface ExpandableSkuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
+    /** Primary line (e.g. SKU code). */
+    sku: string;
+    /** Secondary line (e.g. product title). */
+    subtitle?: React.ReactNode;
+    /** Optional slot next to the SKU (e.g. Mapped badge). */
+    badge?: React.ReactNode;
+    /**
+     * When set, a checkbox is shown. Omit entirely to hide selection (read-only / detail rows).
+     */
+    selection?: SkuRowSelection;
+    /**
+     * Row highlight (lavender shell + white detail card). Also applied when `selection.checked` is true
+     * so checkbox-only usage picks up the same UI without passing `selected`.
+     */
+    selected?: boolean;
+    /** Controlled expanded state. */
+    expanded?: boolean;
+    /** Uncontrolled default. Ignored when `expanded` is passed. */
+    defaultExpanded?: boolean;
+    onExpandedChange?: (open: boolean) => void;
+    /** Disable expand/collapse interaction. */
+    disabled?: boolean;
+    /** Ordered blocks inside the expanded panel. */
+    sections?: ReadonlyArray<SkuRowSection>;
+    /** Extra content after preset `sections` (inside the panel card). */
+    panelFooter?: React.ReactNode;
+    expandAriaLabel?: string;
+    collapseAriaLabel?: string;
+}
+/**
+ * Expandable SKU : optional checkbox, title stack, chevron when there is panel content,
+ * and a collapsible body with metrics, attribute pills, or custom sections.
+ */
+export declare const ExpandableSku: React.ForwardRefExoticComponent<ExpandableSkuProps & React.RefAttributes<HTMLDivElement>>;