@worknice/whiteboard 0.60.1 → 0.61.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

@@ -6,5 +6,5 @@ export type EmployeePeopleRow = {
     /** “Role at location” (single line, may truncate in the list). */
     line: string;
 };
-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 = [
@@ -102,21 +103,17 @@ 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",
+            href: ()=>"#"
         },
         {
             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",
+            href: ()=>"#"
         }
     ];
 const leadingSlot = {
@@ -130,10 +127,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 +141,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 +153,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;

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

@@ -1,17 +1,20 @@
 "use client";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+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_Leave_js_20fd4ebb__ from "../../../icons/components/Leave.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Profile_js_13788365__ from "../../../icons/components/Profile.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_DOCUMENT = "AssignmentDocument";
-const LEADING_FORM = "AssignmentQuestionnaire";
-const LEADING_ID_STYLE = "Profile";
+const LEADING_DOCUMENT = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentDocument_js_0e5cad31__["default"], {});
+const LEADING_FORM = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentQuestionnaire_js_065f7cd5__["default"], {});
+const LEADING_ID_STYLE = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Profile_js_13788365__["default"], {});
 const rows = [
     {
         id: "pa1",
@@ -164,11 +167,12 @@ const assigneeLinkStyle = {
     textDecoration: "none",
     zIndex: 2
 };
-const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>{
+const PaperworkApprovalsList = ({ 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",
@@ -192,10 +196,7 @@ const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, enableSor
                     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
     };
@@ -204,6 +205,7 @@ const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, enableSor
         label: "Status / timeline",
         canToggleVisibility: true,
         value: (r)=>r.statusLine,
+        enableSorting: true,
         globalFiltering: true,
         filter: {
             isMulti: true,
@@ -219,8 +221,7 @@ const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, enableSor
                 align: "center",
                 tagName: "div",
                 children: [
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
-                        symbol: "Leave",
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Leave_js_20fd4ebb__["default"], {
                         size: "small",
                         tone: "muted"
                     }),
@@ -240,6 +241,7 @@ const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, enableSor
         label: "Person",
         canToggleVisibility: true,
         value: (r)=>r.assigneeName,
+        enableSorting: true,
         globalFiltering: true,
         filter: {
             isMulti: true,
@@ -287,6 +289,7 @@ const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, enableSor
         id: "secondary",
         label: "Approver",
         value: (r)=>r.secondaryName,
+        enableSorting: true,
         globalFiltering: true,
         filter: {
             isMulti: true,
@@ -328,7 +331,6 @@ const PaperworkApprovalsList = ({ compactBreakpoint, contentAlignment, enableSor
             assigneeSlot
         ],
         data: rows,
-        enableSorting: enableSorting,
         fillContainerHeight: true,
         getRowId: (r)=>r.id,
         leadingSlot: leadingSlot,

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

@@ -15,5 +15,5 @@ export type PeopleListRow = {
     }>;
     tags: string[];
 };
-declare const PeopleList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+declare const PeopleList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
 export default PeopleList;

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

@@ -261,10 +261,11 @@ const people = [
         ]
     }
 ];
-const PeopleList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>{
+const PeopleList = ({ compactBreakpoint, contentAlignment, rowHeight })=>{
     const titleField = {
         label: "Name",
         value: (r)=>r.name,
+        enableSorting: true,
         globalFiltering: true,
         csvExport: true,
         render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
@@ -284,6 +285,7 @@ const PeopleList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHei
     const subtitleField = {
         label: "Position",
         value: (r)=>r.position,
+        enableSorting: true,
         globalFiltering: true,
         csvExport: true,
         render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
@@ -309,6 +311,7 @@ const PeopleList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHei
             label: "Employee ID",
             hiddenByDefault: true,
             value: (r)=>r.id,
+            enableSorting: true,
             render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
                     font: "small",
                     children: r.id
@@ -322,6 +325,7 @@ const PeopleList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHei
             label: "Department",
             hiddenByDefault: true,
             value: (r)=>r.department,
+            enableSorting: true,
             render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
                     font: "small",
                     children: r.department
@@ -343,6 +347,7 @@ const PeopleList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHei
         id: "tags",
         label: "Tags",
         value: (r)=>r.tags.join(" "),
+        enableSorting: true,
         render: (r)=>r.tags.map((t)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                     style: {
                         padding: "4px"
@@ -373,7 +378,6 @@ const PeopleList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHei
         fillContainerHeight: true,
         compactBreakpoint: compactBreakpoint,
         contentAlignment: contentAlignment,
-        enableSorting: enableSorting,
         rowHeight: rowHeight,
         href: ()=>"#",
         csvFilename: "people-directory.csv",