@worknice/whiteboard 0.60.1 → 0.62.0

package/dist/presentation/RichList/stories/EmployeePaperwork.js

@@ -1,7 +1,12 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentCertificate_js_feafbcda__ from "../../../icons/components/AssignmentCertificate.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentDocument_js_0e5cad31__ from "../../../icons/components/AssignmentDocument.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentQuestionnaire_js_065f7cd5__ from "../../../icons/components/AssignmentQuestionnaire.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Calendar_js_1bfa8ee4__ from "../../../icons/components/Calendar.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Paperwork_js_7e1b2821__ from "../../../icons/components/Paperwork.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Warning_js_100033e0__ from "../../../icons/components/Warning.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Badge_js_56d6dba9__ from "../../Badge.js";
 import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__ from "../../HStack.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__ from "../../Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__ from "../../PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
 import * as __WEBPACK_EXTERNAL_MODULE__shared_bulkActionStubs_js_0d607dd0__ from "./shared/bulkActionStubs.js";
@@ -9,7 +14,7 @@ const items = [
     {
         id: "doc-1",
         title: "Superannuation Choice Form",
-        leadingSymbol: "AssignmentQuestionnaire",
+        leadingIcon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentQuestionnaire_js_065f7cd5__["default"], {}),
         statusBadge: {
             id: "s1",
             text: "Missing",
@@ -21,7 +26,7 @@ const items = [
     {
         id: "doc-2",
         title: "Code of Conduct",
-        leadingSymbol: "AssignmentDocument",
+        leadingIcon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentDocument_js_0e5cad31__["default"], {}),
         statusBadge: {
             id: "s1",
             text: "Expired",
@@ -33,7 +38,7 @@ const items = [
     {
         id: "doc-3",
         title: "Work Rights Entitlement Certificate",
-        leadingSymbol: "AssignmentCertificate",
+        leadingIcon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentCertificate_js_feafbcda__["default"], {}),
         statusBadge: {
             id: "s1",
             text: "Expiring soon",
@@ -45,7 +50,7 @@ const items = [
     {
         id: "doc-4",
         title: "Payroll Form",
-        leadingSymbol: "AssignmentQuestionnaire",
+        leadingIcon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentQuestionnaire_js_065f7cd5__["default"], {}),
         statusBadge: {
             id: "s1",
             text: "Assigned",
@@ -57,7 +62,7 @@ const items = [
     {
         id: "doc-5",
         title: "TFN Declaration",
-        leadingSymbol: "AssignmentQuestionnaire",
+        leadingIcon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentQuestionnaire_js_065f7cd5__["default"], {}),
         statusBadge: {
             id: "s1",
             text: "Submitted",
@@ -69,7 +74,7 @@ const items = [
     {
         id: "doc-6",
         title: "Working from Home Policy",
-        leadingSymbol: "Paperwork",
+        leadingIcon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Paperwork_js_7e1b2821__["default"], {}),
         statusBadge: null,
         statusTone: "muted",
         statusLine: "Expires in 8 months"
@@ -77,7 +82,7 @@ const items = [
     {
         id: "doc-7",
         title: "National Police Check",
-        leadingSymbol: "AssignmentCertificate",
+        leadingIcon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentCertificate_js_feafbcda__["default"], {}),
         statusBadge: null,
         statusTone: "muted",
         statusLine: "Expires in 9 months"
@@ -85,7 +90,7 @@ const items = [
     {
         id: "doc-8",
         title: "Policy - IT Use and Internet",
-        leadingSymbol: "Paperwork",
+        leadingIcon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Paperwork_js_7e1b2821__["default"], {}),
         statusBadge: null,
         statusTone: "muted",
         statusLine: "Expires in 6 months"
@@ -93,19 +98,20 @@ const items = [
     {
         id: "doc-9",
         title: "Fair Work Information Statement",
-        leadingSymbol: "Paperwork",
+        leadingIcon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Paperwork_js_7e1b2821__["default"], {}),
         statusBadge: null,
         statusTone: "muted",
         statusLine: "Expires in 11 months"
     }
 ];
-function statusLineIconForRow(statusTone) {
-    return "muted" === statusTone ? "Calendar" : "Warning";
+function statusLineIconComponentForRow(statusTone) {
+    return "muted" === statusTone ? __WEBPACK_EXTERNAL_MODULE__icons_components_Calendar_js_1bfa8ee4__["default"] : __WEBPACK_EXTERNAL_MODULE__icons_components_Warning_js_100033e0__["default"];
 }
-const EmployeePaperworkList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>{
+const EmployeePaperworkList = ({ compactBreakpoint, contentAlignment, rowHeight })=>{
     const titleField = {
         label: "Title",
         value: (r)=>r.title,
+        enableSorting: true,
         globalFiltering: true,
         render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
                 font: "regular-bold",
@@ -122,14 +128,13 @@ const EmployeePaperworkList = ({ compactBreakpoint, contentAlignment, enableSort
         globalFiltering: false,
         csvExport: false,
         render: (r)=>{
-            const lineIcon = statusLineIconForRow(r.statusTone);
+            const LineIcon = statusLineIconComponentForRow(r.statusTone);
             return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
                 spacing: "n3",
                 align: "center",
                 tagName: "span",
                 children: [
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                        symbol: lineIcon,
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(LineIcon, {
                         size: "small",
                         tone: r.statusTone
                     }),
@@ -151,10 +156,7 @@ const EmployeePaperworkList = ({ compactBreakpoint, contentAlignment, enableSort
                     borderRadius: "var(--size-n2)",
                     padding: "var(--size-n2)"
                 },
-                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                    symbol: r.leadingSymbol,
-                    size: "default"
-                })
+                children: r.leadingIcon
             }),
         size: 32
     };
@@ -162,16 +164,16 @@ const EmployeePaperworkList = ({ compactBreakpoint, contentAlignment, enableSort
         id: "status",
         label: "Status",
         value: (r)=>r.statusLine,
+        enableSorting: true,
         globalFiltering: true,
         render: (r)=>{
-            const lineIcon = statusLineIconForRow(r.statusTone);
+            const LineIcon = statusLineIconComponentForRow(r.statusTone);
             return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
                 spacing: "n2",
                 align: "center",
                 children: [
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                        symbol: lineIcon,
-                        size: "Warning" === lineIcon ? "default" : "small",
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(LineIcon, {
+                        size: "danger" === r.statusTone ? "default" : "small",
                         tone: r.statusTone
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
@@ -205,7 +207,6 @@ const EmployeePaperworkList = ({ compactBreakpoint, contentAlignment, enableSort
         secondaryBulkActions: (0, __WEBPACK_EXTERNAL_MODULE__shared_bulkActionStubs_js_0d607dd0__.richListStorySecondaryBulkActions)(),
         compactBreakpoint: compactBreakpoint,
         contentAlignment: contentAlignment,
-        enableSorting: enableSorting,
         rowHeight: rowHeight,
         csvFilename: "employee-paperwork.csv",
         mainSlot: {

package/dist/presentation/RichList/stories/EmployeePeople.d.ts

@@ -5,6 +5,8 @@ export type EmployeePeopleRow = {
     imageUrl: string | null;
     /** “Role at location” (single line, may truncate in the list). */
     line: string;
+    workEmail: string | null;
+    workPhone: string | null;
 };
-declare const EmployeePeopleList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+declare const EmployeePeopleList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
 export default EmployeePeopleList;

package/dist/presentation/RichList/stories/EmployeePeople.js

@@ -1,8 +1,9 @@
 "use client";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Email_js_c0058dca__ from "../../../icons/components/Email.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Phone_js_aed4f2f1__ from "../../../icons/components/Phone.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__ from "../../../utils/storybook.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Avatar_js_1229b6e4__ from "../../Avatar.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__ from "../../Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__ from "../../PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
 const employees = [
@@ -10,91 +11,121 @@ const employees = [
         id: "e1",
         name: "Sarah Jenkins",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(19),
-        line: "VP of Engineering at New York"
+        line: "VP of Engineering at New York",
+        workEmail: "sarah.jenkins@example.com",
+        workPhone: "+1 212 555 0101"
     },
     {
         id: "e2",
         name: "David Miller",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(20),
-        line: "Product Manager at London"
+        line: "Product Manager at London",
+        workEmail: "david.miller@example.com",
+        workPhone: null
     },
     {
         id: "e3",
         name: "Emily Chen",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(21),
-        line: "Frontend Developer at Remote"
+        line: "Frontend Developer at Remote",
+        workEmail: null,
+        workPhone: "+1 415 555 0103"
     },
     {
         id: "e4",
         name: "James Washington",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(22),
-        line: "HR Specialist at Chicago"
+        line: "HR Specialist at Chicago",
+        workEmail: null,
+        workPhone: null
     },
     {
         id: "e5",
         name: "Priya Shah",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(23),
-        line: "Director of Finance at Sydney"
+        line: "Director of Finance at Sydney",
+        workEmail: "priya.shah@example.com",
+        workPhone: "+61 2 5555 0105"
     },
     {
         id: "e6",
         name: "Marcus Webb",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(24),
-        line: "Warehouse Lead at Melbourne"
+        line: "Warehouse Lead at Melbourne",
+        workEmail: "marcus.webb@example.com",
+        workPhone: null
     },
     {
         id: "e7",
         name: "Nina Okonkwo",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(25),
-        line: "Legal Counsel at Head Office"
+        line: "Legal Counsel at Head Office",
+        workEmail: null,
+        workPhone: "+44 20 7946 0107"
     },
     {
         id: "e8",
         name: "Oliver Grant",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(26),
-        line: "Sales Manager at Remote"
+        line: "Sales Manager at Remote",
+        workEmail: null,
+        workPhone: null
     },
     {
         id: "e9",
         name: "Rachel Kim",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(27),
-        line: "UX Researcher at San Francisco"
+        line: "UX Researcher at San Francisco",
+        workEmail: "rachel.kim@example.com",
+        workPhone: "+1 415 555 0109"
     },
     {
         id: "e10",
         name: "Samuel Ortiz",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(28),
-        line: "DevOps Engineer at Austin"
+        line: "DevOps Engineer at Austin",
+        workEmail: "samuel.ortiz@example.com",
+        workPhone: null
     },
     {
         id: "e11",
         name: "Tessa Bloom",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(29),
-        line: "Chief of Staff at Seattle"
+        line: "Chief of Staff at Seattle",
+        workEmail: null,
+        workPhone: "+1 206 555 0111"
     },
     {
         id: "e12",
         name: "Victor Ng",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(30),
-        line: "Data Analyst at Singapore"
+        line: "Data Analyst at Singapore",
+        workEmail: null,
+        workPhone: null
     },
     {
         id: "e13",
         name: "Yuki Tanaka",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(31),
-        line: "Account Executive at Tokyo"
+        line: "Account Executive at Tokyo",
+        workEmail: "yuki.tanaka@example.com",
+        workPhone: "+81 3 5555 0113"
     },
     {
         id: "e14",
         name: "Zara Ali",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(32),
-        line: "Customer Success at Dubai"
+        line: "Customer Success at Dubai",
+        workEmail: "zara.ali@example.com",
+        workPhone: null
     },
     {
         id: "e15",
         name: "Ben Carter",
         imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(33),
-        line: "Facilities Coordinator at Manchester"
+        line: "Facilities Coordinator at Manchester",
+        workEmail: null,
+        workPhone: "+44 161 555 0115"
     }
 ];
 const rowActions = ()=>[
@@ -102,21 +133,19 @@ const rowActions = ()=>[
             id: "email",
             label: "Email",
             alwaysVisible: true,
-            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                symbol: "Email"
-            }),
-            type: "onClick",
-            onClick: ()=>void 0
+            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Email_js_c0058dca__["default"], {}),
+            type: "link",
+            predicate: (row)=>Boolean(row.workEmail),
+            href: (row)=>`mailto:${row.workEmail}`
         },
         {
             id: "phone",
             label: "Call",
             alwaysVisible: true,
-            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                symbol: "Phone"
-            }),
-            type: "onClick",
-            onClick: ()=>void 0
+            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Phone_js_aed4f2f1__["default"], {}),
+            type: "link",
+            predicate: (row)=>Boolean(row.workPhone),
+            href: (row)=>`tel:${row.workPhone}`
         }
     ];
 const leadingSlot = {
@@ -130,10 +159,11 @@ const leadingSlot = {
         }),
     size: 48
 };
-const EmployeePeopleList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>{
+const EmployeePeopleList = ({ compactBreakpoint, contentAlignment, rowHeight })=>{
     const titleField = {
         label: "Name",
         value: (r)=>r.name,
+        enableSorting: true,
         globalFiltering: true,
         render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
                 font: "h6",
@@ -143,6 +173,7 @@ const EmployeePeopleList = ({ compactBreakpoint, contentAlignment, enableSorting
     const subtitleField = {
         label: "Role",
         value: (r)=>r.line,
+        enableSorting: true,
         globalFiltering: true,
         render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
                 font: "small",
@@ -154,7 +185,6 @@ const EmployeePeopleList = ({ compactBreakpoint, contentAlignment, enableSorting
         compactBreakpoint: compactBreakpoint,
         contentAlignment: contentAlignment,
         data: employees,
-        enableSorting: enableSorting,
         fillContainerHeight: true,
         getRowId: (r)=>r.id,
         rowActions: rowActions,

package/dist/presentation/RichList/stories/Leave.d.ts

@@ -17,5 +17,5 @@ export type LeaveRow = {
     /** `null` means show an em dash (no approver). */
     approverImageUrl: string | null;
 };
-declare const LeaveList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+declare const LeaveList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
 export default LeaveList;

package/dist/presentation/RichList/stories/Leave.js

@@ -1,11 +1,12 @@
 "use client";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Calendar_js_1bfa8ee4__ from "../../../icons/components/Calendar.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Comment_js_158e39fb__ from "../../../icons/components/Comment.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__ from "../../../utils/storybook.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_b4604910__ from "../../../utils/useNextContext.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Avatar_js_1229b6e4__ from "../../Avatar.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Badge_js_56d6dba9__ from "../../Badge.js";
 import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__ from "../../HStack.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__ from "../../Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__ from "../../PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
 const rows = [
@@ -173,11 +174,12 @@ const personSlotLinkStyle = {
     textDecoration: "none",
     zIndex: 2
 };
-const LeaveList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>{
+const LeaveList = ({ compactBreakpoint, contentAlignment, rowHeight })=>{
     const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_b4604910__["default"])();
     const titleField = {
         label: "Leave",
         value: (r)=>r.kind,
+        enableSorting: true,
         globalFiltering: true,
         filter: {
             isMulti: true,
@@ -201,6 +203,7 @@ const LeaveList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeig
     const subtitleField = {
         label: "Dates",
         value: (r)=>r.dateLine,
+        enableSorting: true,
         globalFiltering: true,
         render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
                 spacing: "n2",
@@ -212,8 +215,7 @@ const LeaveList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeig
                         align: "center",
                         tagName: "div",
                         children: [
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                                symbol: "Calendar",
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Calendar_js_1bfa8ee4__["default"], {
                                 size: "small",
                                 tone: "muted"
                             }),
@@ -224,8 +226,7 @@ const LeaveList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeig
                             })
                         ]
                     }),
-                    r.hasComment ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                        symbol: "Comment",
+                    r.hasComment ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Comment_js_158e39fb__["default"], {
                         size: "small",
                         tone: "muted"
                     }) : null
@@ -237,6 +238,7 @@ const LeaveList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeig
         label: "Requester",
         canToggleVisibility: true,
         value: (r)=>r.requesterName,
+        enableSorting: true,
         globalFiltering: true,
         filter: {
             isMulti: true,
@@ -278,6 +280,7 @@ const LeaveList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeig
         id: "approver",
         label: "Approver",
         value: (r)=>r.approverImageUrl ? "set" : "—",
+        enableSorting: true,
         globalFiltering: true,
         render: (r)=>r.approverImageUrl ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                 style: {
@@ -315,7 +318,6 @@ const LeaveList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeig
             requesterSlot
         ],
         data: rows,
-        enableSorting: enableSorting,
         fillContainerHeight: true,
         getRowId: (r)=>r.id,
         href: ()=>"#",

package/dist/presentation/RichList/stories/Paperwork.d.ts

@@ -1,13 +1,11 @@
-import type { ComponentProps } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import Badge from "../../Badge";
-import Icon from "../../Icon";
 import { type CommonProps } from "./shared";
 type NameBadgeColor = NonNullable<ComponentProps<typeof Badge>["color"]>;
-type IconSymbol = ComponentProps<typeof Icon>["symbol"];
 export type PaperworkRow = {
     id: string;
     title: string;
-    leadingIcon: IconSymbol;
+    leadingIcon: ReactNode;
     statusBadge: {
         id: string;
         text: string;
@@ -18,5 +16,5 @@ export type PaperworkRow = {
     assigneeName: string;
     assigneeImageUrl: string | null;
 };
-declare const PaperworkList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+declare const PaperworkList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
 export default PaperworkList;

package/dist/presentation/RichList/stories/Paperwork.js

@@ -1,16 +1,19 @@
 "use client";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentCertificate_js_feafbcda__ from "../../../icons/components/AssignmentCertificate.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentDocument_js_0e5cad31__ from "../../../icons/components/AssignmentDocument.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Calendar_js_1bfa8ee4__ from "../../../icons/components/Calendar.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Warning_js_100033e0__ from "../../../icons/components/Warning.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__ from "../../../utils/storybook.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_b4604910__ from "../../../utils/useNextContext.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Avatar_js_1229b6e4__ from "../../Avatar.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Badge_js_56d6dba9__ from "../../Badge.js";
 import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__ from "../../HStack.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__ from "../../Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__ from "../../PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
 import * as __WEBPACK_EXTERNAL_MODULE__shared_bulkActionStubs_js_0d607dd0__ from "./shared/bulkActionStubs.js";
-const LEADING_CERTIFICATE = "AssignmentCertificate";
-const LEADING_DOCUMENT = "AssignmentDocument";
+const LEADING_CERTIFICATE = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentCertificate_js_feafbcda__["default"], {});
+const LEADING_DOCUMENT = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentDocument_js_0e5cad31__["default"], {});
 const rows = [
     {
         id: "p1",
@@ -262,14 +265,15 @@ const assigneeLinkStyle = {
     textDecoration: "none",
     zIndex: 2
 };
-function statusLineIconForRow(statusTone) {
-    return "muted" === statusTone ? "Calendar" : "Warning";
+function statusLineIconComponentForRow(statusTone) {
+    return "muted" === statusTone ? __WEBPACK_EXTERNAL_MODULE__icons_components_Calendar_js_1bfa8ee4__["default"] : __WEBPACK_EXTERNAL_MODULE__icons_components_Warning_js_100033e0__["default"];
 }
-const PaperworkList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>{
+const PaperworkList = ({ compactBreakpoint, contentAlignment, rowHeight })=>{
     const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_b4604910__["default"])();
     const titleField = {
         label: "Document",
         value: (r)=>r.title,
+        enableSorting: true,
         globalFiltering: true,
         render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
                 font: "regular-bold",
@@ -293,10 +297,7 @@ const PaperworkList = ({ compactBreakpoint, contentAlignment, enableSorting, row
                     justifyContent: "center",
                     padding: "var(--size-n2)"
                 },
-                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                    symbol: r.leadingIcon,
-                    size: "default"
-                })
+                children: r.leadingIcon
             }),
         size: 32
     };
@@ -305,6 +306,7 @@ const PaperworkList = ({ compactBreakpoint, contentAlignment, enableSorting, row
         label: "Status / timeline",
         canToggleVisibility: true,
         value: (r)=>r.statusLine,
+        enableSorting: true,
         globalFiltering: true,
         filter: {
             isMulti: true,
@@ -316,15 +318,14 @@ const PaperworkList = ({ compactBreakpoint, contentAlignment, enableSorting, row
                 }))
         },
         render: (r)=>{
-            const lineIcon = statusLineIconForRow(r.statusTone);
+            const LineIcon = statusLineIconComponentForRow(r.statusTone);
             return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
                 spacing: "n2",
                 align: "center",
                 tagName: "div",
                 children: [
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                        symbol: lineIcon,
-                        size: "Warning" === lineIcon ? "default" : "small",
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(LineIcon, {
+                        size: "danger" === r.statusTone ? "default" : "small",
                         tone: r.statusTone
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
@@ -345,14 +346,13 @@ const PaperworkList = ({ compactBreakpoint, contentAlignment, enableSorting, row
         globalFiltering: false,
         csvExport: false,
         render: (r)=>{
-            const lineIcon = statusLineIconForRow(r.statusTone);
+            const LineIcon = statusLineIconComponentForRow(r.statusTone);
             return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
                 spacing: "n3",
                 align: "center",
                 tagName: "span",
                 children: [
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                        symbol: lineIcon,
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(LineIcon, {
                         size: "small",
                         tone: r.statusTone
                     }),
@@ -369,6 +369,7 @@ const PaperworkList = ({ compactBreakpoint, contentAlignment, enableSorting, row
         id: "assignee",
         label: "Person",
         value: (r)=>r.assigneeName,
+        enableSorting: true,
         globalFiltering: true,
         filter: {
             isMulti: true,
@@ -426,7 +427,6 @@ const PaperworkList = ({ compactBreakpoint, contentAlignment, enableSorting, row
             statusSlot
         ],
         data: rows,
-        enableSorting: enableSorting,
         fillContainerHeight: true,
         getRowId: (r)=>r.id,
         leadingSlot: leadingSlot,

package/dist/presentation/RichList/stories/PaperworkApprovals.d.ts

@@ -1,13 +1,11 @@
-import type { ComponentProps } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import Badge from "../../Badge";
-import Icon from "../../Icon";
 import { type CommonProps } from "./shared";
 type NameBadgeColor = NonNullable<ComponentProps<typeof Badge>["color"]>;
-type IconSymbol = ComponentProps<typeof Icon>["symbol"];
 export type PaperworkApprovalsRow = {
     id: string;
     title: string;
-    leadingIcon: IconSymbol;
+    leadingIcon: ReactNode;
     statusBadge: {
         id: string;
         text: string;
@@ -19,5 +17,5 @@ export type PaperworkApprovalsRow = {
     secondaryName: string;
     secondaryImageUrl: string | null;
 };
-declare const PaperworkApprovalsList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+declare const PaperworkApprovalsList: ({ compactBreakpoint, contentAlignment, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
 export default PaperworkApprovalsList;