@payfit/unity-components 1.2.0 → 2.0.0

package/dist/esm/components/table/parts/TableCell.js

@@ -1,8 +1,8 @@
-import { jsx as h } from "react/jsx-runtime";
-import { memo as v, forwardRef as g } from "react";
-import { uyTv as C } from "@payfit/unity-themes";
-import { useTableContext as T } from "../Table.context.js";
-const w = C({
+import { jsx as C } from "react/jsx-runtime";
+import { memo as v, forwardRef as g, useMemo as T } from "react";
+import { uyTv as w } from "@payfit/unity-themes";
+import { useTableContext as k } from "../Table.context.js";
+const D = w({
   base: [
     "uy:px-200 uy:py-150 uy:text-content-neutral uy:typography-body",
     "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"
@@ -14,46 +14,49 @@ const w = C({
       right: "uy:text-right"
     }
   }
-}), k = v(
+}), K = v(
   g(
     ({
-      children: a,
+      children: s,
       colIndex: t = 0,
-      rowIndex: n = 0,
-      align: i,
-      onKeyDown: u,
+      rowIndex: u = 0,
+      align: o,
+      onKeyDown: i,
       onFocus: r,
-      className: s,
-      isRowHeader: o = !1,
-      isFocusable: l = !0,
+      className: l,
+      isRowHeader: a = !1,
+      isFocusable: n = !0,
       ...y
     }, c) => {
-      const { keyboardNavigation: f } = T(), { isCellFocused: d, handleCellKeyDown: b, handleCellFocus: m } = f, p = l && d(n, t), x = (e) => {
-        e.key !== "Tab" && (b(e), u?.(e));
+      const { keyboardNavigation: f } = k(), { isCellFocused: b, handleCellKeyDown: d, handleCellFocus: m } = f, p = T(
+        () => D({ align: o, className: l }),
+        [o, l]
+      ), x = n && b(u, t), h = (e) => {
+        e.key !== "Tab" && (d(e), i?.(e));
       };
-      return /* @__PURE__ */ h(
-        o ? "th" : "td",
+      return /* @__PURE__ */ C(
+        a ? "th" : "td",
         {
           ref: c,
-          role: o ? "rowheader" : "gridcell",
+          role: a ? "rowheader" : "gridcell",
           "aria-colindex": t + 1,
-          tabIndex: p ? 0 : -1,
-          "data-focusable": l,
-          className: w({ align: i, className: s }),
-          onKeyDown: x,
+          tabIndex: x ? 0 : -1,
+          "data-focusable": n,
+          className: p,
+          onKeyDown: h,
           onFocus: (e) => {
             m(e), r?.(e);
           },
           "data-dd-privacy": "mask",
           ...y,
-          children: a
+          children: s
         }
       );
     }
   )
 );
-k.displayName = "TableCell";
+K.displayName = "TableCell";
 export {
-  k as TableCell,
-  w as tableCell
+  K as TableCell,
+  D as tableCell
 };

package/dist/esm/components/table/parts/TablePagination.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { PaginationProps } from '../../pagination/Pagination.js';
+import { ClientSidePaginationProps } from '../../client-side-pagination/ClientSidePagination.js';
 export declare const tablePagination: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
 type PageSizeOption = {
     value: string;
@@ -44,22 +44,22 @@ export interface TablePaginationProps extends PropsWithChildren<VariantProps<typ
      * This function is intended for handling hover events on individual pagination controls or elements.
      * It is derived from the `onPageHover` property in the `Pagination` component.
      */
-    onPageHover?: PaginationProps['onPageHover'];
+    onPageHover?: ClientSidePaginationProps['onPageHover'];
     /**
      * Callback fired when the page changes
      * @param page - The new page number
      * @param previous - The previous page number
      * @param direction - The direction of navigation (1 for forward, -1 for backward)
      */
-    onPageChange?: PaginationProps['onPageChange'];
+    onPageChange?: ClientSidePaginationProps['onPageChange'];
     /**
      * Optional callback for next button press
      */
-    onNextPress?: PaginationProps['onNextPress'];
+    onNextPress?: ClientSidePaginationProps['onNextPress'];
     /**
      * Optional callback for previous button press
      */
-    onPreviousPress?: PaginationProps['onPreviousPress'];
+    onPreviousPress?: ClientSidePaginationProps['onPreviousPress'];
     /**
      * The options for the number of rows per page selection dropdown.
      * If not provided, the default options will be used.

package/dist/esm/components/table/parts/TablePagination.js

@@ -1,12 +1,12 @@
 import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { forwardRef as I, useState as j } from "react";
-import { uyTv as C } from "@payfit/unity-themes";
+import { forwardRef as C, useState as I } from "react";
+import { uyTv as j } from "@payfit/unity-themes";
 import { useId as L } from "react-aria";
 import { useIntl as T } from "react-intl";
-import { Pagination as O } from "../../pagination/Pagination.js";
+import { ClientSidePagination as O } from "../../client-side-pagination/ClientSidePagination.js";
 import { SelectOption as R } from "../../select/parts/SelectOption.js";
 import { Select as E } from "../../select/Select.js";
-const _ = C({
+const _ = j({
   base: [
     "uy:bg-surface-neutral-lowest",
     "uy:sticky uy:bottom-0",
@@ -18,7 +18,7 @@ const _ = C({
   { value: "50", label: "50" },
   { value: "100", label: "100" },
   { value: "200", label: "200" }
-], A = I(
+], A = C(
   (b, y) => {
     const {
       pageCount: i,
@@ -31,18 +31,18 @@ const _ = C({
       onPageChange: P,
       onNextPress: v,
       onPreviousPress: N,
-      onPageSizeChange: z,
-      onPageHover: S,
+      onPageSizeChange: S,
+      onPageHover: z,
       itemLabel: g = "unity:component:table:pagination:item",
       ...w
-    } = b, a = L(), t = T(), [M, $] = j(h), x = {
+    } = b, a = L(), t = T(), [M, $] = I(h), x = {
       pageCount: i,
       defaultPage: u,
       currentPage: r,
       onPageChange: P,
       onNextPress: v,
       onPreviousPress: N,
-      onPageHover: S
+      onPageHover: z
     }, o = Math.max(((r ?? u ?? 1) - 1) * s + 1, 1), p = Math.min(o + s - 1, n), c = {
       singular: t.formatMessage(
         {
@@ -122,7 +122,7 @@ const _ = C({
                 value: `${M}`,
                 onChange: (l) => {
                   const m = parseInt(l, 10);
-                  z?.(m), $(m);
+                  S?.(m), $(m);
                 },
                 "aria-labelledby": `table-pagination-${a}-pagesize-label`,
                 children: (l) => /* @__PURE__ */ e(R, { id: l.value, children: l.label })

package/dist/esm/components/table/parts/TableRow.js

@@ -1,7 +1,7 @@
-import { jsx as b } from "react/jsx-runtime";
-import d, { memo as y, forwardRef as c, useMemo as f, Children as m, cloneElement as p } from "react";
-import { uyTv as v } from "@payfit/unity-themes";
-const w = v({
+import { jsx as y } from "react/jsx-runtime";
+import c, { memo as f, forwardRef as m, useMemo as a, Children as p, cloneElement as v } from "react";
+import { uyTv as w } from "@payfit/unity-themes";
+const R = w({
   base: [
     "uy:group uy:h-500",
     "uy:bg-surface-neutral uy:border-b uy:border-solid uy:border-b-border-neutral-enabled",
@@ -10,32 +10,35 @@ const w = v({
     "uy:aria-[selected=true]:bg-surface-neutral-selected uy:aria-[selected=true]:border-b-border-neutral-selected",
     "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"
   ]
-}), g = y(
-  c(
-    ({ children: o, className: t, rowIndex: r = 0, onKeyDown: a, isSelected: u, ...s }, l) => {
-      const i = f(() => m.map(o, (e, n) => d.isValidElement(e) ? p(
+}), g = f(
+  m(
+    ({ children: o, className: u, rowIndex: r = 0, onKeyDown: s, isSelected: t, ...l }, i) => {
+      const n = a(
+        () => R({ className: u }),
+        [u]
+      ), b = a(() => p.map(o, (e, d) => c.isValidElement(e) ? v(
         e,
         {
           rowIndex: r,
-          colIndex: n,
+          colIndex: d,
           ...e.props
         }
       ) : e), [o, r]);
-      return /* @__PURE__ */ b(
+      return /* @__PURE__ */ y(
         "tr",
         {
-          ref: l,
+          ref: i,
           role: "row",
-          className: w({ className: t }),
+          className: n,
           "aria-rowindex": r + 1,
-          "aria-selected": u,
+          "aria-selected": t,
           onKeyDown: (e) => {
-            a?.(e);
+            s?.(e);
           },
           "data-dd-privacy": "mask",
-          "data-selectable": u !== void 0,
-          ...s,
-          children: i
+          "data-selectable": t !== void 0,
+          ...l,
+          children: b
         }
       );
     }
@@ -44,5 +47,5 @@ const w = v({
 g.displayName = "TableRow";
 export {
   g as TableRow,
-  w as tableRow
+  R as tableRow
 };

package/dist/esm/components/tabs/parts/{Tab.d.ts → RawTab.d.ts}

@@ -4,7 +4,7 @@ export interface TabProps extends Omit<AriaTabProps, 'isDisabled' | 'className'
     id: Key | undefined;
     suffix?: ReactNode;
 }
-declare const Tab: import('react').ForwardRefExoticComponent<TabProps & {
+declare const RawTab: import('react').ForwardRefExoticComponent<TabProps & {
     children?: ReactNode | undefined;
 } & import('react').RefAttributes<HTMLDivElement>>;
-export { Tab };
+export { RawTab };

package/dist/esm/components/tabs/parts/{Tab.js → RawTab.js}

@@ -1,18 +1,18 @@
 import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import { Tab as p } from "react-aria-components";
+import { forwardRef as p } from "react";
+import { Tab as b } from "react-aria-components";
 import { useTabsContext as c } from "../Tabs.context.js";
 import { tabsVariant as f } from "../Tabs.variant.js";
-const T = b(
+const d = p(
   ({ children: a, suffix: r, id: o, ...t }, s) => {
     const { variant: m, scrollable: n } = c(), { tab: e } = f({ variant: m, scrollable: n });
-    return /* @__PURE__ */ i(p, { ref: s, id: o, ...t, className: e(), children: [
+    return /* @__PURE__ */ i(b, { ...t, ref: s, id: o, className: e(), children: [
       a,
       r ? /* @__PURE__ */ l("span", { children: r }) : null
     ] });
   }
 );
-T.displayName = "Tab";
+d.displayName = "RawTab";
 export {
-  T as Tab
+  d as RawTab
 };

package/dist/esm/components/task-menu/TaskMenu.d.ts

@@ -38,14 +38,14 @@ export interface TaskMenuProps extends PropsWithChildren<VariantProps<typeof tas
  * import { TaskMenu, Task, TaskGroup, SubTask } from '@payfit/unity-components'
  *
  * <TaskMenu>
- *  <Task
+ *  <RawTask
  *    uniqueId="task1"
  *    label="Complete Profile"
  *    taskNumber={1}
  *    taskStatus="completed"
  *    href="/profile"
  *   />
- *  <Task
+ *  <RawTask
  *    uniqueId="task2"
  *    label="Upload Documents"
  *    taskNumber={2}
@@ -58,13 +58,13 @@ export interface TaskMenuProps extends PropsWithChildren<VariantProps<typeof tas
  *    taskNumber={3}
  *    taskStatus="uncompleted"
  *  >
- *    <SubTask
+ *    <RawSubTask
  *      uniqueId="step1"
  *      label="Welcome Video"
  *      href="/onboarding/welcome"
  *      taskStatus="completed"
  *    />
- *    <SubTask
+ *    <RawSubTask
  *      uniqueId="step2"
  *      label="Company Policies"
  *      href="/onboarding/policies"

package/dist/esm/components/task-menu/parts/{SubTask.d.ts → RawSubTask.d.ts}

@@ -1,5 +1,5 @@
-import { TaskProps } from './Task.js';
-export declare const subTask: import('tailwind-variants').TVReturnType<{
+import { TaskProps } from './RawTask.js';
+export declare const rawSubTask: import('tailwind-variants').TVReturnType<{
     taskStatus: {
         uncompleted: {
             dot: string[];
@@ -138,7 +138,7 @@ export interface SubTaskProps extends Omit<TaskProps, 'taskNumber'> {
  *
  * ```tsx
  * // Link-based subtask for navigation within a task group
- * <SubTask
+ * <RawSubTask
  *   uniqueId="profile-setup"
  *   label="Complete Profile Information"
  *   taskStatus="uncompleted"
@@ -146,7 +146,7 @@ export interface SubTaskProps extends Omit<TaskProps, 'taskNumber'> {
  * />
  *
  * // Button-based subtask for custom interactions
- * <SubTask
+ * <RawSubTask
  *   uniqueId="validate-email"
  *   label="Validate Email Address"
  *   taskStatus="completed"
@@ -154,7 +154,7 @@ export interface SubTaskProps extends Omit<TaskProps, 'taskNumber'> {
  * />
  *
  * // Locked subtask that cannot be interacted with
- * <SubTask
+ * <RawSubTask
  *   uniqueId="final-approval"
  *   label="Manager Approval"
  *   taskStatus="locked"
@@ -162,5 +162,5 @@ export interface SubTaskProps extends Omit<TaskProps, 'taskNumber'> {
  * ```
  * @see {@link SubTaskProps} for all available props
  */
-declare const SubTask: import('react').ForwardRefExoticComponent<SubTaskProps & import('react').RefAttributes<HTMLLIElement>>;
-export { SubTask };
+declare const RawSubTask: import('react').ForwardRefExoticComponent<SubTaskProps & import('react').RefAttributes<HTMLLIElement>>;
+export { RawSubTask };

package/dist/esm/components/task-menu/parts/{SubTask.js → RawSubTask.js}

@@ -1,15 +1,15 @@
 import { jsxs as a, jsx as e, Fragment as d } from "react/jsx-runtime";
-import { forwardRef as L, useEffect as j } from "react";
-import { uyTv as O } from "@payfit/unity-themes";
-import { Link as z, Button as E } from "react-aria-components";
-import { useIntl as F, FormattedMessage as i } from "react-intl";
-import { useRouter as P } from "../../../providers/router/RouterProvider.js";
+import { forwardRef as L, useEffect as R } from "react";
+import { uyTv as j } from "@payfit/unity-themes";
+import { Link as O, Button as z } from "react-aria-components";
+import { useIntl as E, FormattedMessage as i } from "react-intl";
+import { useRouter as F } from "../../../providers/router/RouterProvider.js";
 import { Icon as p } from "../../icon/Icon.js";
-import { Text as R } from "../../text/Text.js";
+import { Text as P } from "../../text/Text.js";
 import { useTaskMenuContext as A } from "../TaskMenu.context.js";
 import D from "./dot.svg.js";
 import { commonTask as I } from "./task.variants.js";
-const V = O({
+const V = j({
   extend: I,
   slots: {
     base: ["uy:gap-300 uy:py-100", "uy:md:py-50"],
@@ -134,20 +134,20 @@ const V = O({
     uniqueId: r,
     ...c
   }, g) => {
-    const k = F(), u = P(), { currentTask: b, setCurrentTask: m, state: h } = A();
-    j(() => {
+    const k = E(), u = F(), { currentTask: b, setCurrentTask: m, state: h } = A();
+    R(() => {
       t && u?.isActive(t.toString(), l) && m?.({ uniqueId: r, label: o });
     }, [t, l, u, r, o]);
-    const s = b?.uniqueId === r, { base: v, element: S, text: x, dot: N, lock: M } = V({
+    const s = b?.uniqueId === r, { base: v, element: S, text: x, dot: N, lock: w } = V({
       isSelected: s,
       taskStatus: n
-    }), T = Object.assign(
+    }), M = Object.assign(
       {},
       s !== void 0 && {
         "data-current": s,
         "aria-current": s ? "page" : void 0
       }
-    ), w = t ? z : E;
+    ), T = t ? O : z;
     return /* @__PURE__ */ a(
       "li",
       {
@@ -158,7 +158,7 @@ const V = O({
         children: [
           /* @__PURE__ */ e(D, { width: 8, height: 8, className: N(), role: "presentation" }),
           /* @__PURE__ */ a(
-            w,
+            T,
             {
               className: S(),
               href: t,
@@ -166,11 +166,11 @@ const V = O({
                 m?.({ uniqueId: r, label: o }), h?.toggle(), f?.(C);
               },
               isDisabled: y,
-              ...T,
+              ...M,
               ...c,
               children: [
                 /* @__PURE__ */ e(
-                  R,
+                  P,
                   {
                     asElement: "span",
                     className: x(),
@@ -179,7 +179,7 @@ const V = O({
                   }
                 ),
                 B(n, k, {
-                  locked: M(),
+                  locked: w(),
                   completed: "uy:self-center"
                 })
               ]
@@ -190,8 +190,8 @@ const V = O({
     );
   }
 );
-G.displayName = "SubTask";
+G.displayName = "RawSubTask";
 export {
-  G as SubTask,
-  V as subTask
+  G as RawSubTask,
+  V as rawSubTask
 };

package/dist/esm/components/task-menu/parts/{Task.d.ts → RawTask.d.ts}

@@ -1,7 +1,7 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
 import { AriaButtonProps } from 'react-aria';
-export declare const task: import('tailwind-variants').TVReturnType<{
+export declare const rawTask: import('tailwind-variants').TVReturnType<{
     isSelected: {
         false: string;
         true: string;
@@ -117,7 +117,7 @@ export declare const task: import('tailwind-variants').TVReturnType<{
  * Props for the Task component, defining the configuration options for individual task items.
  * Supports both link-based navigation and button-based interactions with various visual states.
  */
-export interface TaskProps extends PropsWithChildren<Omit<VariantProps<typeof task>, 'isSelected'>> {
+export interface TaskProps extends PropsWithChildren<Omit<VariantProps<typeof rawTask>, 'isSelected'>> {
     /**
      * Unique identifier for the task, used for state management and accessibility.
      * This ID is used to track the current selected task and manage focus states.
@@ -148,7 +148,7 @@ export interface TaskProps extends PropsWithChildren<Omit<VariantProps<typeof ta
  *
  * ```tsx
  * // Link-based task for navigation
- * <Task
+ * <RawTask
  *   uniqueId="setup-profile"
  *   label="Complete Profile Setup"
  *   taskNumber={1}
@@ -157,7 +157,7 @@ export interface TaskProps extends PropsWithChildren<Omit<VariantProps<typeof ta
  * />
  *
  * // Button-based task for custom interactions
- * <Task
+ * <RawTask
  *   uniqueId="validate-data"
  *   label="Validate Information"
  *   taskNumber={2}
@@ -166,7 +166,7 @@ export interface TaskProps extends PropsWithChildren<Omit<VariantProps<typeof ta
  * />
  *
  * // Locked task that cannot be interacted with
- * <Task
+ * <RawTask
  *   uniqueId="final-review"
  *   label="Final Review"
  *   taskNumber={3}
@@ -175,5 +175,5 @@ export interface TaskProps extends PropsWithChildren<Omit<VariantProps<typeof ta
  * ```
  * @see {@link TaskProps} for all available props
  */
-declare const Task: import('react').ForwardRefExoticComponent<TaskProps & import('react').RefAttributes<HTMLLIElement>>;
-export { Task };
+declare const RawTask: import('react').ForwardRefExoticComponent<TaskProps & import('react').RefAttributes<HTMLLIElement>>;
+export { RawTask };

package/dist/esm/components/task-menu/parts/{Task.js → RawTask.js}

@@ -1,14 +1,14 @@
 import { jsxs as r, jsx as e, Fragment as p } from "react/jsx-runtime";
-import { forwardRef as G, useEffect as P } from "react";
-import { uyTv as R } from "@payfit/unity-themes";
-import { Link as w, Button as z } from "react-aria-components";
+import { forwardRef as O, useEffect as F } from "react";
+import { uyTv as G } from "@payfit/unity-themes";
+import { Link as P, Button as z } from "react-aria-components";
 import { useIntl as A, FormattedMessage as g } from "react-intl";
 import { useRouter as B } from "../../../providers/router/RouterProvider.js";
 import { Icon as y } from "../../icon/Icon.js";
 import { Text as k } from "../../text/Text.js";
 import { useTaskMenuContext as V } from "../TaskMenu.context.js";
 import { commonTask as D } from "./task.variants.js";
-const H = R({
+const H = G({
   extend: D,
   slots: {
     base: [],
@@ -55,7 +55,7 @@ const H = R({
       }
     }
   ]
-}), I = G(
+}), I = O(
   ({
     href: s,
     isExact: l = !1,
@@ -73,8 +73,8 @@ const H = R({
       state: N,
       expandedTaskGroup: i,
       toggleTaskGroup: T
-    } = V(), S = s ? w : z;
-    P(() => {
+    } = V(), S = s ? P : z;
+    F(() => {
       s && c?.isActive(s.toString(), l) && d?.({ uniqueId: n, label: a });
     }, [s, l, c, a, n]);
     const t = x?.uniqueId === n, M = Object.assign(
@@ -83,7 +83,7 @@ const H = R({
         "data-current": t,
         "aria-current": t ? "page" : void 0
       }
-    ), { base: C, number: L, element: j, text: E, lock: O } = H({
+    ), { base: C, number: w, element: L, text: R, lock: j } = H({
       isSelected: t,
       taskStatus: o
     });
@@ -91,15 +91,15 @@ const H = R({
       /* @__PURE__ */ r(
         S,
         {
-          className: j(),
+          className: L(),
           href: s,
-          onPress: (F) => {
-            d?.({ uniqueId: n, label: a }), N?.toggle(), i && T?.(i), f?.(F);
+          onPress: (E) => {
+            d?.({ uniqueId: n, label: a }), N?.toggle(), i && T?.(i), f?.(E);
           },
           ...M,
           ...u,
           children: [
-            /* @__PURE__ */ e("div", { className: L(), children: o === "completed" ? /* @__PURE__ */ r(p, { children: [
+            /* @__PURE__ */ e("div", { className: w(), children: o === "completed" ? /* @__PURE__ */ r(p, { children: [
               /* @__PURE__ */ e(
                 y,
                 {
@@ -132,7 +132,7 @@ const H = R({
               k,
               {
                 asElement: "span",
-                className: E(),
+                className: R(),
                 variant: t ? "bodyStrong" : "body",
                 children: a
               }
@@ -142,7 +142,7 @@ const H = R({
                 y,
                 {
                   "aria-hidden": "true",
-                  className: O(),
+                  className: j(),
                   src: "LockOutlined",
                   alt: m.formatMessage({
                     id: "unity:component:task-menu:task:lock:label",
@@ -165,8 +165,8 @@ const H = R({
     ] });
   }
 );
-I.displayName = "Task";
+I.displayName = "RawTask";
 export {
-  I as Task,
-  H as task
+  I as RawTask,
+  H as rawTask
 };

package/dist/esm/components/task-menu/parts/TaskGroup.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { DataAttributes } from '../../../types/DataAttributes.js';
-import { SubTaskProps } from './SubTask.js';
-import { TaskProps } from './Task.js';
+import { SubTaskProps } from './RawSubTask.js';
+import { TaskProps } from './RawTask.js';
 export interface TaskGroupProps extends Omit<TaskProps, 'href' | 'isExact' | 'isCurrent' | 'onPress' | 'isSelected'>, DataAttributes {
     /**
      * The subtasks that belong to this task group. Can be a single SubTask or an array of SubTask components.
@@ -19,9 +19,9 @@ export interface TaskGroupProps extends Omit<TaskProps, 'href' | 'isExact' | 'is
  *   taskNumber={1}
  *   taskStatus="uncompleted"
  * >
- *   <SubTask uniqueId="profile" label="Complete Profile" href="/profile" />
- *   <SubTask uniqueId="documents" label="Upload Documents" href="/documents" />
- *   <SubTask uniqueId="training" label="Complete Training" href="/training" />
+ *   <RawSubTask uniqueId="profile" label="Complete Profile" href="/profile" />
+ *   <RawSubTask uniqueId="documents" label="Upload Documents" href="/documents" />
+ *   <RawSubTask uniqueId="training" label="Complete Training" href="/training" />
  * </TaskGroup>
  * ```
  * @see {@link TaskGroupProps} for all available props