@orfium/ictinus 5.45.1 → 5.46.0

package/dist/components/Table/components/TH/TH.js

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as l } from "@emotion/react/jsx-runtime";
 import O from "react";
-import { thContainer as H, thContent as V, optionsContainer as g } from "./TH.style.js";
+import { optionsContainer as H, thContent as V, thContainer as g } from "./TH.style.js";
 import j from "./components/THOptions/THOptions.js";
 import w from "./components/SortingButton/SortingButton.js";
 var y = {
@@ -27,7 +27,7 @@ const z = ({
   } = r ?? {}, {
     contentAlign: v = "left"
   } = d, x = () => /* @__PURE__ */ n(w, { id: t, isDesc: i, onClick: () => i === !0 ? m() : e(i === !1, o), badge: B, dataTestPrefixId: s });
-  return /* @__PURE__ */ n("th", { css: H({
+  return /* @__PURE__ */ n("th", { css: g({
     isCheckbox: b,
     isExpandedButton: C,
     rowSize: h,
@@ -39,7 +39,7 @@ const z = ({
     contentAlign: v
   }), children: [
     /* @__PURE__ */ n("div", { css: y, "data-testid": `${s}_table_th_${t}_title`, children: p }),
-    c && /* @__PURE__ */ l("div", { css: g(), "data-header-role": "options", "data-testid": `${s}_table_th_${t}_options`, children: [
+    c && /* @__PURE__ */ l("div", { css: H(), "data-header-role": "options", "data-testid": `${s}_table_th_${t}_options`, children: [
       x(),
       /* @__PURE__ */ n(j, { onSort: e, isMultiSortable: o, onButtonClick: (a) => k(a), dataTestPrefixId: `${s}_sort_${t}` })
     ] })

package/dist/components/Table/components/TH/TH.style.js

@@ -1,7 +1,7 @@
 import { css as s } from "@emotion/react";
 import { generateStylesFromTokens as a } from "../../../Typography/utils.js";
-import { ACTIONS_CELL_WIDTH as g, contentAlignToFlex as d } from "../../constants.js";
-import { rem as m, vars as t } from "@orfium/tokens";
+import { contentAlignToFlex as g, ACTIONS_CELL_WIDTH as d } from "../../constants.js";
+import { vars as t, rem as m } from "@orfium/tokens";
 import { lineEllipsis as y } from "../../../../theme/functions.js";
 const f = {
   sm: t.sizing[11],
@@ -15,9 +15,9 @@ const f = {
   hasVisibleOptions: r,
   isSortable: n,
   sx: c
-}) => (i) => /* @__PURE__ */ s("width:", o || l ? m(g) : e ? `${e}%` : "100%", ";height:", f[p], ";align-content:center;box-sizing:border-box;padding:", t.spacing[4], " ", t.spacing[6], ";color:", t.color.text.default[r ? "primary" : "secondary"], ";", a(i.tokens.typography.get("normal.body02")), ";[data-header-role='options'],[data-header-role='sorting-button']{opacity:", r ? 1 : 0, ";}&:hover,&:focus-visible{color:", n && t.color.text.default.primary, ";", n && a(i.tokens.typography.get("normal.label02")), ";[data-header-role='options'],[data-header-role='sorting-button']{opacity:1;}}button:focus-visible{opacity:1;}", c, ";", ""), z = ({
+}) => (i) => /* @__PURE__ */ s("width:", o || l ? m(d) : e ? `${e}%` : "100%", ";height:", f[p], ";align-content:center;box-sizing:border-box;padding:", t.spacing[4], " ", t.spacing[6], ";color:", t.color.text.default[r ? "primary" : "secondary"], ";", a(i.tokens.typography.get("normal.body02")), ";[data-header-role='options'],[data-header-role='sorting-button']{opacity:", r ? 1 : 0, ";}&:hover,&:focus-visible{color:", n && t.color.text.default.primary, ";", n && a(i.tokens.typography.get("normal.label02")), ";[data-header-role='options'],[data-header-role='sorting-button']{opacity:1;}}button:focus-visible{opacity:1;}", c, ";", ""), z = ({
   contentAlign: o
-}) => /* @__PURE__ */ s("display:flex;align-items:center;justify-content:", d[o], ";gap:", t.spacing[4], ";", y, ";", "");
+}) => /* @__PURE__ */ s("display:flex;align-items:center;justify-content:", g[o], ";gap:", t.spacing[4], ";", y, ";", "");
 var u = {
   name: "unrh3l",
   styles: "display:flex;justify-content:space-between;width:100%"

package/dist/components/Table/components/TPagination/TPagination.js

@@ -1,5 +1,5 @@
 import { jsxs as n, jsx as e } from "@emotion/react/jsx-runtime";
-import { paginationContainer as h, itemsPerPageContainer as y, counterContainer as v, counterWrapper as C, buttonsContainer as f } from "./TPagination.style.js";
+import { itemsPerPageContainer as h, counterWrapper as y, buttonsContainer as v, counterContainer as C, paginationContainer as f } from "./TPagination.style.js";
 import $ from "../../../Select/Select.js";
 import s from "../../../Typography/Typography.js";
 import r from "../../../IconButton/IconButton.js";
@@ -19,18 +19,18 @@ const k = ({
     isNextPageDisabled: _,
     isPrevPageDisabled: d
   } = g;
-  return /* @__PURE__ */ n("div", { css: h({
+  return /* @__PURE__ */ n("div", { css: f({
     isSticky: m
   }), children: [
-    /* @__PURE__ */ e("div", { css: y(), children: c && l && /* @__PURE__ */ e($, { label: "", size: "compact", options: l, selectedOption: c, isSearchable: !1, onChange: b, dataTestId: `${t}_table_show_items` }) }),
-    /* @__PURE__ */ n("div", { css: v(), children: [
-      /* @__PURE__ */ n("div", { css: C(), "data-testid": `${t}_table_pages_info`, children: [
+    /* @__PURE__ */ e("div", { css: h(), children: c && l && /* @__PURE__ */ e($, { label: "", size: "compact", options: l, selectedOption: c, isSearchable: !1, onChange: b, dataTestId: `${t}_table_show_items` }) }),
+    /* @__PURE__ */ n("div", { css: C(), children: [
+      /* @__PURE__ */ n("div", { css: y(), "data-testid": `${t}_table_pages_info`, children: [
         /* @__PURE__ */ e(s, { type: "secondary", variant: "body03", children: "page" }),
         /* @__PURE__ */ e(s, { variant: "label03", "data-testid": `${t}_table_current_page`, children: a }),
         /* @__PURE__ */ e(s, { type: "secondary", variant: "body03", children: "of" }),
         /* @__PURE__ */ e(s, { variant: "label03", "data-testid": `${t}_table_total_pages`, children: i })
       ] }),
-      /* @__PURE__ */ n("div", { css: f(), children: [
+      /* @__PURE__ */ n("div", { css: v(), children: [
         p && /* @__PURE__ */ e(r, { iconName: "pageFirst", size: "compact", type: "tertiary", onClick: () => o(1), isDisabled: a === 1 || d, dataTestPrefixId: `${t}_table_go_to_first_page` }),
         /* @__PURE__ */ e(r, { iconName: "chevronLeft", size: "compact", type: "tertiary", onClick: () => o(a - 1), isDisabled: a === 1 || d, dataTestPrefixId: `${t}_table_go_to_prev_page` }),
         /* @__PURE__ */ e(r, { iconName: "chevronRight", size: "compact", type: "tertiary", onClick: () => o(a + 1), isDisabled: a === i || _, dataTestPrefixId: `${t}_table_go_to_next_page` }),

package/dist/components/Table/components/TTitle/TTitle.js

@@ -1,7 +1,7 @@
 import { jsxs as e, jsx as s, Fragment as f } from "@emotion/react/jsx-runtime";
 import T, { useMemo as j } from "react";
 import w from "react-fast-compare";
-import { tTitleContainer as A, titleContent as $, actionsContent as g } from "./TTitle.style.js";
+import { titleContent as A, actionsContent as $, tTitleContainer as g } from "./TTitle.style.js";
 import a from "../../../Typography/Typography.js";
 import k from "./components/ColumnChooser/ColumnChooser.js";
 const R = ({
@@ -28,12 +28,12 @@ const R = ({
       t ? "selected" : ""
     ] })
   ] }), [i, t, n, o]);
-  return /* @__PURE__ */ e("div", { css: A(), children: [
-    /* @__PURE__ */ s("div", { css: $(), children: y && /* @__PURE__ */ e(f, { children: [
+  return /* @__PURE__ */ e("div", { css: g(), children: [
+    /* @__PURE__ */ s("div", { css: A(), children: y && /* @__PURE__ */ e(f, { children: [
       _,
       C && b
     ] }) }),
-    /* @__PURE__ */ e("div", { css: g(), children: [
+    /* @__PURE__ */ e("div", { css: $(), children: [
       v,
       l && /* @__PURE__ */ s(k, { columns: d, columnsConfig: l, containerRef: u, dataTestPrefixId: i })
     ] })

package/dist/components/Table/hooks/useTable.js

@@ -1,62 +1,61 @@
-import { jsx as g, Fragment as y } from "@emotion/react/jsx-runtime";
-import { useReactTable as P, getExpandedRowModel as M, getCoreRowModel as E, createColumnHelper as H } from "@tanstack/react-table";
-import T from "../../../hooks/useTheme.js";
-import { concat as v } from "lodash-es";
-import V, { useMemo as f } from "react";
-import { vars as A } from "@orfium/tokens";
-import { lineEllipsis as $ } from "../../../theme/functions.js";
-import k from "../../Typography/Typography.js";
-import b from "../../Controls/CheckBox/CheckBox.js";
-import z from "../../Icon/Icon.js";
-const x = (m, r, i, s, a) => {
-  const n = H(), c = r ? [{
+import { jsx as d, Fragment as _ } from "@emotion/react/jsx-runtime";
+import { useReactTable as y, getExpandedRowModel as P, getCoreRowModel as M, createColumnHelper as E } from "@tanstack/react-table";
+import { concat as H } from "lodash-es";
+import T, { useMemo as h } from "react";
+import { vars as f } from "@orfium/tokens";
+import { lineEllipsis as v } from "../../../theme/functions.js";
+import V from "../../Typography/Typography.js";
+import A from "../../Controls/CheckBox/CheckBox.js";
+import $ from "../../Icon/Icon.js";
+const b = (S, g, r, l) => {
+  const i = E(), n = g ? [{
     id: "checkbox_select",
     header: ({
       table: e
-    }) => /* @__PURE__ */ g(b, { isSelected: e.getIsAllPageRowsSelected(), isIndeterminate: e.getIsSomePageRowsSelected() && !e.getIsAllPageRowsSelected(), onChange: () => {
+    }) => /* @__PURE__ */ d(A, { isSelected: e.getIsAllPageRowsSelected(), isIndeterminate: e.getIsSomePageRowsSelected() && !e.getIsAllPageRowsSelected(), onChange: () => {
       const t = e.getIsAllPageRowsSelected();
       e.toggleAllPageRowsSelected(!t);
-    }, dataTestPrefixId: `${a}_table_select_all` }),
+    }, dataTestPrefixId: `${l}_table_select_all` }),
     cell: ({
       row: e
-    }) => /* @__PURE__ */ g("div", { className: "px-1", children: /* @__PURE__ */ g(
-      b,
+    }) => /* @__PURE__ */ d("div", { className: "px-1", children: /* @__PURE__ */ d(
+      A,
       {
         isSelected: e.getIsSelected(),
         isDisabled: !e.getCanSelect(),
         onChange: e.getToggleSelectedHandler(),
-        dataTestPrefixId: `${a}_table_select_${e.id}`
+        dataTestPrefixId: `${l}_table_select_${e.id}`
       }
     ) }),
     meta: {
       contentAlign: "left"
     }
-  }] : [], p = i ? [{
+  }] : [], c = r ? [{
     id: "details_iconButton",
-    header: () => /* @__PURE__ */ g(y, {}),
+    header: () => /* @__PURE__ */ d(_, {}),
     cell: ({
       row: e
-    }) => /* @__PURE__ */ g(z, { name: e.getIsExpanded() ? "triangleDown" : "triangleRight", size: A.sizing[5], color: A.color.text.default.secondary, onClick: () => {
+    }) => /* @__PURE__ */ d($, { name: e.getIsExpanded() ? "triangleDown" : "triangleRight", size: f.sizing[5], color: f.color.text.default.secondary, onClick: () => {
       const t = e.getIsExpanded();
       e.toggleExpanded(!t);
-    }, dataTestId: `${a}_table_expand_${e.id}` }),
+    }, dataTestId: `${l}_table_expand_${e.id}` }),
     meta: {
       contentAlign: "left"
     }
-  }] : [], S = m.reduce((e, t) => {
+  }] : [], p = S.reduce((e, t) => {
     if ("columns" in t) {
-      const d = {
+      const a = {
         id: t.id,
         header: t.header,
-        columns: x(t.columns, !1, !1, s, a)
+        columns: b(t.columns, !1, !1, l)
       };
-      e.push(n.group(d));
+      e.push(i.group(a));
     } else
-      e.push(n.accessor(t.id, {
+      e.push(i.accessor(t.id, {
         header: t.header,
-        cell: (d) => {
-          const o = d.getValue();
-          return typeof o == "string" || typeof o == "number" ? /* @__PURE__ */ g(k, { variant: "body02", component: "span", css: $, children: o }) : o;
+        cell: (a) => {
+          const s = a.getValue();
+          return typeof s == "string" || typeof s == "number" ? /* @__PURE__ */ d(V, { variant: "body02", component: "span", css: v, children: s }) : s;
         },
         size: t.width ?? "auto",
         minSize: t.width,
@@ -66,26 +65,26 @@ const x = (m, r, i, s, a) => {
         }
       }));
     return e;
-  }, c);
-  return v(S, p);
-}, O = ({
-  type: m = "read-only",
-  data: r,
-  columns: i,
-  sorting: s,
-  rowsConfig: a,
+  }, n);
+  return H(p, c);
+}, q = ({
+  type: S = "read-only",
+  data: g,
+  columns: r,
+  sorting: l,
+  rowsConfig: i,
   columnsConfig: n,
   dataTestPrefixId: c,
   ...p
 }) => {
-  const S = T(), e = m === "interactive", {
+  const e = S === "interactive", {
     rowSelection: t,
-    setRowSelection: d,
-    expanded: o,
-    setExpanded: R
-  } = a ?? {}, w = r.some((u) => u.details) && !!o, I = f(() => r.map((u) => u.cells), [r]), h = !!(t && e), C = f(() => x(i, h, w, S, c), [i, h, w, S, c]), _ = V.useMemo(() => ({
-    ...s && {
-      sorting: s.sortingColumn
+    setRowSelection: a,
+    expanded: s,
+    setExpanded: u
+  } = i ?? {}, R = g.some((m) => m.details) && !!s, x = h(() => g.map((m) => m.cells), [g]), w = !!(t && e), I = h(() => b(r, w, R, c), [r, w, R, c]), C = T.useMemo(() => ({
+    ...l && {
+      sorting: l.sortingColumn
     },
     ...t && e && {
       rowSelection: t
@@ -93,32 +92,32 @@ const x = (m, r, i, s, a) => {
     ...n && {
       columnVisibility: n.columnVisibility
     },
-    ...o && {
-      expanded: o
+    ...s && {
+      expanded: s
     }
-  }), [n, o, e, t, s]), l = P({
+  }), [n, s, e, t, l]), o = y({
     /** Basic Functionality */
-    data: I,
-    columns: C,
-    getCoreRowModel: E(),
+    data: x,
+    columns: I,
+    getCoreRowModel: M(),
     /** States */
-    state: _,
+    state: C,
     /** States callbacks and extra config */
     /** Sorting */
-    ...s && {
+    ...l && {
       manualSorting: !0,
-      onSortingChange: s.handleSorting,
-      enableMultiSort: s.isMultiSortable ?? !1
+      onSortingChange: l.handleSorting,
+      enableMultiSort: l.isMultiSortable ?? !1
     },
     /** Row Selection */
-    ...d && e && {
+    ...a && e && {
       enableRowSelection: !0,
-      onRowSelectionChange: d
+      onRowSelectionChange: a
     },
     /** Row Details */
-    ...o && R && {
-      getExpandedRowModel: M(),
-      onExpandedChange: R
+    ...s && u && {
+      getExpandedRowModel: P(),
+      onExpandedChange: u
     },
     /** Column Visibility */
     ...n && {
@@ -127,19 +126,19 @@ const x = (m, r, i, s, a) => {
     ...p
   });
   return {
-    getHeaderGroups: l.getHeaderGroups,
-    getRowModel: l.getRowModel,
-    getIsAllRowsSelected: l.getIsAllRowsSelected,
-    getIsSomeRowsSelected: l.getIsSomeRowsSelected,
-    getToggleAllRowsSelectedHandler: l.getToggleAllRowsSelectedHandler,
-    toggleAllRowsSelected: l.toggleAllRowsSelected,
-    getAllLeafColumns: l.getAllLeafColumns,
-    getIsAllPageRowsSelected: l.getIsAllPageRowsSelected,
-    getIsSomePageRowsSelected: l.getIsSomePageRowsSelected,
-    getToggleAllPageRowsSelectedHandler: l.getToggleAllPageRowsSelectedHandler,
-    toggleAllPageRowsSelected: l.toggleAllPageRowsSelected
+    getHeaderGroups: o.getHeaderGroups,
+    getRowModel: o.getRowModel,
+    getIsAllRowsSelected: o.getIsAllRowsSelected,
+    getIsSomeRowsSelected: o.getIsSomeRowsSelected,
+    getToggleAllRowsSelectedHandler: o.getToggleAllRowsSelectedHandler,
+    toggleAllRowsSelected: o.toggleAllRowsSelected,
+    getAllLeafColumns: o.getAllLeafColumns,
+    getIsAllPageRowsSelected: o.getIsAllPageRowsSelected,
+    getIsSomePageRowsSelected: o.getIsSomePageRowsSelected,
+    getToggleAllPageRowsSelectedHandler: o.getToggleAllPageRowsSelectedHandler,
+    toggleAllPageRowsSelected: o.toggleAllPageRowsSelected
   };
 };
 export {
-  O as default
+  q as default
 };

package/dist/components/TableV4/TableV4.js

@@ -1,16 +1,16 @@
 import { jsxs as p, jsx as o } from "@emotion/react/jsx-runtime";
-import { useBreakpoints as G } from "../../hooks/useBreakpoints.js";
+import G from "../../hooks/useBreakpoints.js";
 import { head as E } from "lodash-es";
 import I from "pluralize";
 import h, { memo as J, useState as j, useEffect as R } from "react";
 import Q from "react-fast-compare";
-import { tableCTAStyle as U, tableStyle as X, tableRowHeadersStyle as Y } from "./TableV4.style.js";
+import { tableCTAStyle as U, tableRowHeadersStyle as X, tableStyle as Y } from "./TableV4.style.js";
 import V from "./components/TableRow/TableRow.js";
 import u from "./components/TableCell/TableCell.js";
 import Z from "../Controls/CheckBox/CheckBox.js";
+import { isItemString as f } from "./utils/utils.js";
 import W from "./components/ExtendedColumnItem/ExtendedColumnItem.js";
 import H from "./components/TableRowWrapper/TableRowWrapper.js";
-import { isItemString as f } from "./utils/utils.js";
 const D = (n, i, c) => !i && !c ? n.length : i && c ? n.length + 2 : n.length + 1;
 function T({
   data: n,
@@ -32,58 +32,58 @@ function T({
   isInitiallyExpanded: v = !1,
   dataTestIdPrefix: s
 }) {
-  const x = G(), z = B ? `${B}%` : x.des1920 ? "5%" : "7%", [r, S] = j(void 0), [M, A] = j(q), N = n.some((e) => !!e.expanded), O = D(i, t, N);
+  const x = G(), z = B ? `${B}%` : x.des1920 ? "5%" : "7%", [l, d] = j(void 0), [M, A] = j(q), N = n.some((e) => !!e.expanded), O = D(i, t, N);
   R(() => {
-    t && r && t(r);
-  }, [t, r]), R(() => {
-    S(void 0);
+    t && l && t(l);
+  }, [t, l]), R(() => {
+    d(void 0);
   }, [n]);
   const C = h.useCallback((e) => {
-    S((l = []) => l.indexOf(e) === -1 ? [...l, e] : l.filter((k) => k !== e));
-  }, []), d = h.useMemo(() => E(n)?.cells?.map(({
+    d((r = []) => r.indexOf(e) === -1 ? [...r, e] : r.filter((k) => k !== e));
+  }, []), S = h.useMemo(() => E(n)?.cells?.map(({
     content: e
-  }) => !Number.isNaN(Number(e))) || [], [n]), $ = h.useMemo(() => E(n)?.cells?.map(({
+  }) => !Number.isNaN(Number(e))) || [], [n]), _ = h.useMemo(() => E(n)?.cells?.map(({
     align: e
-  }) => e) || [], [n]), _ = h.useMemo(() => E(n)?.cells?.map(({
+  }) => e) || [], [n]), $ = h.useMemo(() => E(n)?.cells?.map(({
     widthPercentage: e
   }) => e) || [], [n]), L = (e) => {
-    A((l) => w ? (y?.(e, w), {
+    A((r) => w ? (y?.(e, w), {
       column: e,
       order: w
-    }) : l.column !== e ? (y?.(e, "asc"), {
+    }) : r.column !== e ? (y?.(e, "asc"), {
       column: e,
       order: "asc"
-    }) : (y?.(e, l.order === "asc" ? "desc" : "asc"), {
+    }) : (y?.(e, r.order === "asc" ? "desc" : "asc"), {
       column: e,
-      order: l.order === "asc" ? "desc" : "asc"
+      order: r.order === "asc" ? "desc" : "asc"
     }));
   };
   return /* @__PURE__ */ p(h.Fragment, { children: [
     (t || b || K) && /* @__PURE__ */ o("table", { css: U(a), children: /* @__PURE__ */ o("thead", { children: /* @__PURE__ */ p(V, { children: [
-      t && /* @__PURE__ */ o(u, { component: "th", width: 50, isPadded: m, dataTestIdPrefix: s, rowIndex: 0, index: 0, children: /* @__PURE__ */ o(Z, { isSelected: !!(r && r.length > 0), isIndeterminate: r && r.length > 0 && r?.length !== n.length, onChange: () => {
-        r?.length === n.length ? S([]) : S(n.map(({
+      t && /* @__PURE__ */ o(u, { component: "th", width: 50, isPadded: m, dataTestIdPrefix: s, rowIndex: 0, index: 0, children: /* @__PURE__ */ o(Z, { isSelected: !!(l && l.length > 0), isIndeterminate: l && l.length > 0 && l?.length !== n.length, onChange: () => {
+        l?.length === n.length ? d([]) : d(n.map(({
           id: e
         }) => e));
       } }) }),
-      /* @__PURE__ */ o(u, { isPadded: m, dataTestIdPrefix: s, rowIndex: 0, index: 1, children: r && r?.length > 0 ? /* @__PURE__ */ p("span", { children: [
-        /* @__PURE__ */ o("b", { children: r.length }),
+      /* @__PURE__ */ o(u, { isPadded: m, dataTestIdPrefix: s, rowIndex: 0, index: 1, children: l && l?.length > 0 ? /* @__PURE__ */ p("span", { children: [
+        /* @__PURE__ */ o("b", { children: l.length }),
         " ",
-        I("item", r.length),
+        I("item", l.length),
         " selected"
       ] }) : K }),
-      b && /* @__PURE__ */ o(u, { textAlign: "right", isPadded: m, colSpan: O - (t ? 2 : 1), dataTestIdPrefix: s, rowIndex: 0, index: 2, children: b(n, r) })
+      b && /* @__PURE__ */ o(u, { textAlign: "right", isPadded: m, colSpan: O - (t ? 2 : 1), dataTestIdPrefix: s, rowIndex: 0, index: 2, children: b(n, l) })
     ] }) }) }),
-    /* @__PURE__ */ p("table", { css: X(), children: [
-      (t || b || c === "normal") && /* @__PURE__ */ o("thead", { children: c === "normal" && /* @__PURE__ */ p(V, { css: Y(N, !!t, g), children: [
+    /* @__PURE__ */ p("table", { css: Y(), children: [
+      (t || b || c === "normal") && /* @__PURE__ */ o("thead", { children: c === "normal" && /* @__PURE__ */ p(V, { css: X(N, !!t, g), children: [
         t && /* @__PURE__ */ o(u, { component: "th", isPaddedSticky: a, isSticky: g, width: 50, isPadded: m, dataTestIdPrefix: s }),
-        i.map((e, l) => /* @__PURE__ */ o(u, { textAlign: $ && $[l] ? $[l] : d && d[l] ? "right" : "left", component: "th", isSticky: g, isPaddedSticky: a, isPadded: m, width: _[l] ? `${_[l]}%` : "initial", isSortable: !f(e) && e.isSortable, isActive: !f(e) && e.content.sortingKey === M.column, onClick: () => {
+        i.map((e, r) => /* @__PURE__ */ o(u, { textAlign: _ && _[r] ? _[r] : S && S[r] ? "right" : "left", component: "th", isSticky: g, isPaddedSticky: a, isPadded: m, width: $[r] ? `${$[r]}%` : "initial", isSortable: !f(e) && e.isSortable, isActive: !f(e) && e.content.sortingKey === M.column, onClick: () => {
           !f(e) && e.isSortable && L(e.content.sortingKey);
-        }, dataTestIdPrefix: `${s}_${f(e) ? e.trim().toLowerCase().replace(/ /g, "_") : e.content.sortingKey.trim().toLowerCase().replace(/ /g, "_")}`, children: f(e) ? /* @__PURE__ */ o(W, { item: e }) : /* @__PURE__ */ o(W, { sorting: M, isNumerical: d && d[l], item: e }) }, `${f(e) ? e : e.content.sortingKey}`)),
+        }, dataTestIdPrefix: `${s}_${f(e) ? e.trim().toLowerCase().replace(/ /g, "_") : e.content.sortingKey.trim().toLowerCase().replace(/ /g, "_")}`, children: f(e) ? /* @__PURE__ */ o(W, { item: e }) : /* @__PURE__ */ o(W, { sorting: M, isNumerical: S && S[r], item: e }) }, `${f(e) ? e : e.content.sortingKey}`)),
         N && /* @__PURE__ */ o(u, { component: "th", isSticky: g, isPaddedSticky: a, width: z, dataTestIdPrefix: s })
       ] }) }),
-      /* @__PURE__ */ o("tbody", { children: n.map((e, l) => (
+      /* @__PURE__ */ o("tbody", { children: n.map((e, r) => (
         // @ts-expect-error - this is a test component
-        /* @__PURE__ */ o(H, { row: e, isRowSelected: r ? r.indexOf(e.id) !== -1 : !1, onSelectionAdd: C, isPadded: m, columns: i, hasFixedHeader: g, type: c, columnCount: O, columnsWithWidth: _, hasOnSelectionChange: !!t, isExpanded: !!e.expanded, actionWidth: B, isInitiallyExpanded: v, dataTestIdPrefix: s, rowIndex: l + 1 }, e.id)
+        /* @__PURE__ */ o(H, { row: e, isRowSelected: l ? l.indexOf(e.id) !== -1 : !1, onSelectionAdd: C, isPadded: m, columns: i, hasFixedHeader: g, type: c, columnCount: O, columnsWithWidth: $, hasOnSelectionChange: !!t, isExpanded: !!e.expanded, actionWidth: B, isInitiallyExpanded: v, dataTestIdPrefix: s, rowIndex: r + 1 }, e.id)
       )) })
     ] })
   ] });

package/dist/components/TableV4/components/RenderRowOrNestedRow/components/ExpandedButtonCell/ExpandedButtonCell.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "@emotion/react/jsx-runtime";
 import { css as n } from "@emotion/react";
-import { useBreakpoints as f } from "../../../../../../hooks/useBreakpoints.js";
+import f from "../../../../../../hooks/useBreakpoints.js";
 import u from "react";
 import { vars as e } from "@orfium/tokens";
 import h from "../../../TableCell/TableCell.js";

package/dist/components/TextArea/TextArea.js

@@ -1,4 +1,4 @@
-import { jsxs as n, jsx as d } from "@emotion/react/jsx-runtime";
+import { jsxs as d, jsx as n } from "@emotion/react/jsx-runtime";
 import * as m from "react";
 import R from "react-fast-compare";
 import { inputStyle as w } from "../TextInputBase/TextInputBase.style.js";
@@ -23,7 +23,7 @@ const x = m.forwardRef((c, f) => {
     ...l
   } = c, r = e?.type === "read-only", h = q({
     isResizeEnabled: !t && !r && v
-  }), p = i && e?.type != "error", b = p ? /* @__PURE__ */ n("div", { css: E({
+  }), p = i && e?.type != "error", b = p ? /* @__PURE__ */ d("div", { css: E({
     isDisabled: t
   }), children: [
     l.value?.length,
@@ -33,22 +33,22 @@ const x = m.forwardRef((c, f) => {
     ...e,
     hintMessage: p ? void 0 : e.hintMessage
   } : void 0;
-  return /* @__PURE__ */ n(m.Fragment, { children: [
-    /* @__PURE__ */ d(A, { ...c, status: g, sx: h, children: /* @__PURE__ */ n("div", { css: T, children: [
-      /* @__PURE__ */ d("textarea", { role: "textbox", "aria-multiline": !0, readOnly: r || y, css: w({
+  return /* @__PURE__ */ d(m.Fragment, { children: [
+    /* @__PURE__ */ n(A, { ...c, status: g, sx: h, children: /* @__PURE__ */ d("div", { css: T, children: [
+      /* @__PURE__ */ n("textarea", { role: "textbox", "aria-multiline": !0, readOnly: r || y, css: w({
         placeholder: a,
         label: s,
         sx: h,
         isLocked: r,
         isDisabled: t
       }), placeholder: a ? `${a} ${o ? "*" : ""}` : s, required: o, id: u, maxLength: i, disabled: t || r, ...l, ref: f }),
-      /* @__PURE__ */ d(S, { htmlFor: u, label: s, isRequired: o, isAnimated: !!l.value, hasError: !t && e?.type === "error" })
+      /* @__PURE__ */ n(S, { htmlFor: u, label: s, isRequired: o, isAnimated: !!l.value, hasError: !t && e?.type === "error" })
     ] }) }),
     b
   ] });
 });
 x.displayName = "TextArea";
-const C = m.memo(x, R);
+const F = m.memo(x, R);
 export {
-  C as default
+  F as default
 };

package/dist/components/TextInputBase/TextInputBase.js

@@ -3,7 +3,7 @@ import c from "react";
 import g from "react-fast-compare";
 import { generateTestDataId as f } from "../../utils/helpers.js";
 import { vars as n } from "@orfium/tokens";
-import { hintMessageStyle as h, wrapperStyle as y, textFieldStyle as w } from "./TextInputBase.style.js";
+import { hintMessageStyle as h, textFieldStyle as y, wrapperStyle as w } from "./TextInputBase.style.js";
 import x from "../Icon/Icon.js";
 const M = ({
   isDisabled: o,
@@ -27,13 +27,13 @@ const M = ({
     /* @__PURE__ */ e("span", { id: r.id, children: r.hintMessage })
   ] });
   return /* @__PURE__ */ m(c.Fragment, { children: [
-    /* @__PURE__ */ e("div", { "data-testid": t, css: y({
+    /* @__PURE__ */ e("div", { "data-testid": t, css: w({
       isDisabled: o,
       status: r,
       size: i,
       sx: a,
       isInteractive: l
-    }), children: /* @__PURE__ */ e("div", { css: w({
+    }), children: /* @__PURE__ */ e("div", { css: y({
       sx: a
     }), children: p }) }),
     r.hintMessage && s

package/dist/components/Toast/Toast.js

@@ -2,7 +2,7 @@ import { jsx as n, jsxs as k } from "@emotion/react/jsx-runtime";
 import T, { forwardRef as l } from "react";
 import { useToastRegion as A, useToast as I } from "react-aria";
 import { createPortal as R, flushSync as b } from "react-dom";
-import { ToastQueue as w, useToastQueue as P } from "react-stately";
+import { useToastQueue as w, ToastQueue as P } from "react-stately";
 import { SlotProvider as h } from "../utils/Slots.js";
 import { useDOMRef as y } from "../utils/useDOMRef.js";
 import { styles as a, getIconColor as V } from "./Toast.style.js";
@@ -14,7 +14,7 @@ function S(o) {
   }).ready.catch(() => {
   }) : o();
 }
-const m = new w({
+const m = new P({
   maxVisibleToasts: E,
   wrapUpdate: S
 }), x = (o, {
@@ -74,7 +74,7 @@ const z = l(({
   placement: o = "bottom right",
   ...t
 }, e) => {
-  const s = P(m);
+  const s = w(m);
   return s.visibleToasts.length > 0 ? R(/* @__PURE__ */ n(g, { ref: e, ...t, placement: o, state: s }), document.body) : null;
 });
 z.displayName = "ToastContainer";

package/dist/components/ToastV4/ToastV4.js

@@ -4,7 +4,7 @@ import { useState as C } from "react";
 import { generateTestDataId as c } from "../../utils/helpers.js";
 import { typeToColorStyle as h, actionContainer as u } from "../Notification/Notification.style.js";
 import { typeToIconName as I } from "../Notification/subcomponents/CompactNotification/CompactNotification.js";
-import { toastContainer as S, topContainer as z, infoContainer as T, infoIconContainer as g, actionIconsContainer as j, chevronIconContainer as k, expandedContainer as w } from "./ToastV4.style.js";
+import { infoIconContainer as S, infoContainer as z, chevronIconContainer as T, actionIconsContainer as g, topContainer as j, expandedContainer as k, toastContainer as w } from "./ToastV4.style.js";
 import d from "../Icon/Icon.js";
 const t = (r) => ["success", "error", "warning", "info"].includes(r), B = ({
   message: r,
@@ -17,20 +17,20 @@ const t = (r) => ["success", "error", "warning", "info"].includes(r), B = ({
   dataTestId: i
 }) => {
   const [s, x] = C(m);
-  return /* @__PURE__ */ e("div", { css: S(o, f), ...t(o) && {
+  return /* @__PURE__ */ e("div", { css: w(o, f), ...t(o) && {
     "notification-type": "toast"
   }, children: [
-    /* @__PURE__ */ e("div", { css: z(o), children: [
-      /* @__PURE__ */ e("div", { css: T(), children: [
-        t(o) && /* @__PURE__ */ n("div", { css: g(), children: /* @__PURE__ */ n(d, { name: I(o), color: a.color.text.default[h(o)], size: 24 }) }),
+    /* @__PURE__ */ e("div", { css: j(o), children: [
+      /* @__PURE__ */ e("div", { css: z(), children: [
+        t(o) && /* @__PURE__ */ n("div", { css: S(), children: /* @__PURE__ */ n(d, { name: I(o), color: a.color.text.default[h(o)], size: 24 }) }),
         /* @__PURE__ */ n("div", { children: r })
       ] }),
-      /* @__PURE__ */ e("div", { css: j(), children: [
-        /* @__PURE__ */ n("span", { css: k(s), onClick: () => x(!s), "data-testid": c("toast-expand", i), children: /* @__PURE__ */ n(d, { name: "chevronDown", color: t(o) ? a.color.text.default.secondary : "#ffffff", size: 24 }) }),
+      /* @__PURE__ */ e("div", { css: g(), children: [
+        /* @__PURE__ */ n("span", { css: T(s), onClick: () => x(!s), "data-testid": c("toast-expand", i), children: /* @__PURE__ */ n(d, { name: "chevronDown", color: t(o) ? a.color.text.default.secondary : "#ffffff", size: 24 }) }),
         /* @__PURE__ */ n("span", { css: u(), onClick: l, "data-testid": c("toast-close", i), children: /* @__PURE__ */ n(d, { name: "close", color: t(o) ? a.color.text.default.secondary : "#ffffff", size: 24 }) })
       ] })
     ] }),
-    /* @__PURE__ */ n("div", { css: w(o, s, p), "data-testid": c("expanded-container", i), children: v })
+    /* @__PURE__ */ n("div", { css: k(o, s, p), "data-testid": c("expanded-container", i), children: v })
   ] });
 };
 export {

package/dist/components/ToastV4/ToastV4.style.js

@@ -1,5 +1,5 @@
 import { css as r } from "@emotion/react";
-import { rem as e, vars as t } from "@orfium/tokens";
+import { vars as t, rem as e } from "@orfium/tokens";
 import { typeToColorStyle as s, typeToBackgroundStyle as g } from "../Notification/Notification.style.js";
 import { label01 as f } from "../Typography/Typography.config.styles.js";
 import { flexCenter as m, transition as l } from "../../theme/functions.js";

package/dist/components/TopAppBar/TopAppBar.js

@@ -1,5 +1,5 @@
 import { jsxs as s, jsx as o } from "@emotion/react/jsx-runtime";
-import { useBreakpoints as B } from "../../hooks/useBreakpoints.js";
+import B from "../../hooks/useBreakpoints.js";
 import r from "./TopAppBar.style.js";
 import u from "./components/SidebarMenuIcon/SidebarMenuIcon.js";
 import S from "./components/Logo/Logo.wrapper.js";

package/dist/components/TopAppBar/components/Search/Search.js

@@ -1,7 +1,7 @@
 import { jsxs as o, jsx as a } from "@emotion/react/jsx-runtime";
 import { vars as t } from "@orfium/tokens";
 import { iconWrapperStyle as n } from "../../../TextField/TextField.style.js";
-import { searchWrapper as d, customInputStyle as p } from "./Search.style.js";
+import { customInputStyle as d, searchWrapper as p } from "./Search.style.js";
 import f from "../../../Icon/Icon.js";
 const x = ({
   searchPlaceholder: r = "Search",
@@ -10,14 +10,14 @@ const x = ({
   onKeyPressHandler: c,
   isSearchDisabled: l = !1,
   isDark: e = !1
-}) => /* @__PURE__ */ o("div", { "aria-disabled": l, css: d(e), children: [
+}) => /* @__PURE__ */ o("div", { "aria-disabled": l, css: p(e), children: [
   /* @__PURE__ */ o("div", { css: n({
     iconPosition: "left"
   }), children: [
     /* @__PURE__ */ a(f, { name: "search", color: e ? t.color.text.inverted.primary : t.color.text.default.secondary, size: 20 }),
     " "
   ] }),
-  /* @__PURE__ */ a("input", { readOnly: !1, css: p(r, e), placeholder: r, defaultValue: s, id: "top-nav-search", "data-testid": "top-nav-search", disabled: !1, onChange: i, onKeyPress: c })
+  /* @__PURE__ */ a("input", { readOnly: !1, css: d(r, e), placeholder: r, defaultValue: s, id: "top-nav-search", "data-testid": "top-nav-search", disabled: !1, onChange: i, onKeyPress: c })
 ] });
 export {
   x as default

package/dist/components/TopAppBar/components/Search/Search.style.js

@@ -1,5 +1,5 @@
 import { css as c } from "@emotion/react";
-import { rem as n, vars as t } from "@orfium/tokens";
+import { vars as t, rem as n } from "@orfium/tokens";
 import { lighten as i, darken as a } from "polished";
 import { inputStyle as s } from "../../../TextInputBase/TextInputBase.style.js";
 import { flex as u, flexCenterVertical as p } from "../../../../theme/functions.js";