@droppii-org/chat-sdk 0.6.56 → 0.7.0

package/dist/components/group/GroupMemberPicker.d.ts

@@ -1,8 +1,11 @@
 import type { EligibleAccountItem } from "../../hooks/group/useEligibleAccounts";
-interface GroupMemberPickerProps {
+export interface GroupMemberPickerProps {
     selectedMembers: EligibleAccountItem[];
     onChangeSelectedMembers: (members: EligibleAccountItem[]) => void;
+    /** Existing group: people already in it show as "Đã trong nhóm" and cannot be picked (CRM). */
+    groupID?: string;
 }
-declare const GroupMemberPicker: ({ selectedMembers, onChangeSelectedMembers, }: GroupMemberPickerProps) => import("react/jsx-runtime").JSX.Element;
+/** Member picker shared by "Tạo nhóm chat" and "Thêm thành viên". */
+declare const GroupMemberPicker: (props: GroupMemberPickerProps) => import("react/jsx-runtime").JSX.Element;
 export default GroupMemberPicker;
 //# sourceMappingURL=GroupMemberPicker.d.ts.map

package/dist/components/group/GroupMemberPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupMemberPicker.d.ts","sourceRoot":"","sources":["../../../src/components/group/GroupMemberPicker.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAG7E,UAAU,sBAAsB;IAC9B,eAAe,EAAE,mBAAmB,EAAE,CAAC;IACvC,uBAAuB,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;CACnE;AAED,QAAA,MAAM,iBAAiB,GAAI,+CAGxB,sBAAsB,4CAoJxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"GroupMemberPicker.d.ts","sourceRoot":"","sources":["../../../src/components/group/GroupMemberPicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAI7E,MAAM,WAAW,sBAAsB;IACrC,eAAe,EAAE,mBAAmB,EAAE,CAAC;IACvC,uBAAuB,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;IAClE,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,qEAAqE;AACrE,QAAA,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CAUvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/group/GroupMemberPicker.js

@@ -1,45 +1,11 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useDebounce } from "ahooks";
-import { Avatar, Empty, Input, Spin } from "antd";
-import clsx from "clsx";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Icon } from "../../components/icon";
-import { useEligibleAccounts } from "../../hooks/group/useEligibleAccounts";
-import { formatMemberLabel } from "../../utils/common";
-const GroupMemberPicker = ({ selectedMembers, onChangeSelectedMembers, }) => {
-    const { t } = useTranslation("conversation-inbox");
-    const [search, setSearch] = useState("");
-    const debouncedSearch = useDebounce(search, { wait: 300 });
-    const { accounts, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useEligibleAccounts(debouncedSearch);
-    const handleListScroll = (event) => {
-        if (!hasNextPage || isFetchingNextPage)
-            return;
-        const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
-        if (scrollHeight - scrollTop - clientHeight < 80) {
-            void fetchNextPage();
-        }
-    };
-    const selectedIds = new Set(selectedMembers.map((member) => member.userID));
-    const toggleMember = (account) => {
-        if (selectedIds.has(account.userID)) {
-            onChangeSelectedMembers(selectedMembers.filter((member) => member.userID !== account.userID));
-            return;
-        }
-        onChangeSelectedMembers([...selectedMembers, account]);
-    };
-    const handleRemoveMember = (userID) => {
-        onChangeSelectedMembers(selectedMembers.filter((member) => member.userID !== userID));
-    };
-    const handleClearAll = () => {
-        onChangeSelectedMembers([]);
-    };
-    return (_jsxs("div", { className: "grid grid-cols-2 gap-3", "data-cp-name": "GroupMemberPicker", children: [_jsxs("div", { className: "flex flex-col gap-2 rounded-xl border border-gray-200 p-3", children: [_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("create_group.search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 16, className: "text-gray-400" }) }), _jsx("div", { className: "max-h-64 overflow-y-auto", onScroll: handleListScroll, children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Spin, {}) })) : accounts.length === 0 ? (_jsx(Empty, { description: t("create_group.no_member_found") })) : (_jsxs(_Fragment, { children: [accounts.map((account) => {
-                                    const isSelected = selectedIds.has(account.userID);
-                                    return (_jsxs("div", { className: "flex cursor-pointer items-center gap-3 rounded-lg px-3 py-3 transition-colors duration-150 hover:bg-[#f5f5f5]", onClick: () => toggleMember(account), children: [_jsx(Avatar, { src: account.avatar, size: 40, className: "shrink-0", children: account.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: formatMemberLabel(account.displayName, account.username) }), _jsx("span", { className: clsx("flex h-4 w-4 shrink-0 items-center justify-center rounded border", isSelected
-                                                    ? "border-[var(--dc-color-primary)] bg-[var(--dc-color-primary)]"
-                                                    : "border-gray-300 bg-white"), children: isSelected && (_jsx(Icon, { icon: "check-b", size: 11, className: "text-white" })) })] }, account.userID));
-                                }), isFetchingNextPage && (_jsx("div", { className: "flex items-center justify-center py-3", children: _jsx(Spin, { size: "small" }) }))] })) })] }), _jsxs("div", { className: "flex flex-col gap-2 rounded-xl border border-gray-200 p-3", children: [_jsxs("div", { className: "flex items-center justify-between px-1", children: [_jsx("span", { className: "text-sm text-gray-500", children: t("create_group.selected_count", { count: selectedMembers.length }) }), selectedMembers.length > 0 && (_jsx("button", { type: "button", className: "text-sm text-[var(--dc-color-primary)] hover:text-[var(--dc-color-primary-hover)] hover:underline", onClick: handleClearAll, children: t("create_group.clear_all") }))] }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: selectedMembers.length === 0 ? (_jsxs("div", { className: "flex h-full min-h-[200px] flex-col items-center justify-center gap-2 text-center", children: [_jsx(Icon, { icon: "user-three-b", size: 28, className: "text-gray-300" }), _jsx("span", { className: "text-sm text-gray-400", children: t("create_group.no_member_selected") })] })) : (selectedMembers.map((member) => (_jsxs("div", { className: "flex items-center gap-3 rounded-lg px-3 py-3", children: [_jsx(Avatar, { src: member.avatar, size: 40, className: "shrink-0", children: member.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: formatMemberLabel(member.displayName, member.username) }), _jsx(Icon, { icon: "close-b", size: 14, className: "shrink-0 cursor-pointer text-gray-400", onClick: () => handleRemoveMember(member.userID) })] }, member.userID)))) })] })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import useAuthStore from "../../store/auth";
+import GroupMemberPickerCrm from "./GroupMemberPickerCrm";
+import GroupMemberPickerLegacy from "./GroupMemberPickerLegacy";
+/** Member picker shared by "Tạo nhóm chat" and "Thêm thành viên". */
+const GroupMemberPicker = (props) => {
+    const isCrm = useAuthStore((state) => state.isCrm);
+    return isCrm ? (_jsx(GroupMemberPickerCrm, Object.assign({}, props))) : (_jsx(GroupMemberPickerLegacy, { selectedMembers: props.selectedMembers, onChangeSelectedMembers: props.onChangeSelectedMembers }));
 };
 export default GroupMemberPicker;

package/dist/components/group/GroupMemberPickerCrm.d.ts

@@ -0,0 +1,4 @@
+import type { GroupMemberPickerProps } from "./GroupMemberPicker";
+declare const GroupMemberPickerCrm: ({ selectedMembers, onChangeSelectedMembers, groupID, }: GroupMemberPickerProps) => import("react/jsx-runtime").JSX.Element;
+export default GroupMemberPickerCrm;
+//# sourceMappingURL=GroupMemberPickerCrm.d.ts.map

package/dist/components/group/GroupMemberPickerCrm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupMemberPickerCrm.d.ts","sourceRoot":"","sources":["../../../src/components/group/GroupMemberPickerCrm.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAKlE,QAAA,MAAM,oBAAoB,GAAI,wDAI3B,sBAAsB,4CAqIxB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/group/GroupMemberPickerCrm.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useDebounce } from "ahooks";
+import { Empty, Spin } from "antd";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import { useEligibleAccounts } from "../../hooks/group/useEligibleAccounts";
+import { useEligibleAccountsForGroup } from "../../hooks/group/useEligibleAccountsForGroup";
+import { useGroupMembers } from "../../hooks/group/useGroupMembers";
+import { FOCUS_RING_CLASS } from "../../utils/a11yClickable";
+import PersonAvatar from "./PersonAvatar";
+/** In a small group the existing members stay listed; in a big one only while searching. */
+const MAX_LOCKED_WITHOUT_SEARCH = 6;
+const GroupMemberPickerCrm = ({ selectedMembers, onChangeSelectedMembers, groupID, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const [search, setSearch] = useState("");
+    const debouncedSearch = useDebounce(search, { wait: 300 });
+    const forNewGroup = useEligibleAccounts(debouncedSearch, !groupID);
+    const forGroup = useEligibleAccountsForGroup(debouncedSearch, groupID !== null && groupID !== void 0 ? groupID : "", Boolean(groupID));
+    const { accounts, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = groupID ? forGroup : forNewGroup;
+    const { members: groupMembers } = useGroupMembers(groupID);
+    const keyword = search.trim().toLowerCase();
+    const lockedAll = groupMembers.filter((member) => (member.nickname || member.userID).toLowerCase().includes(keyword));
+    const showLocked = keyword !== "" || groupMembers.length <= MAX_LOCKED_WITHOUT_SEARCH;
+    const locked = showLocked ? lockedAll : [];
+    const selectedIds = new Set(selectedMembers.map((member) => member.userID));
+    const toggle = (account) => onChangeSelectedMembers(selectedIds.has(account.userID)
+        ? selectedMembers.filter((member) => member.userID !== account.userID)
+        : [...selectedMembers, account]);
+    const handleScroll = (event) => {
+        if (!hasNextPage || isFetchingNextPage)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+        if (scrollHeight - scrollTop - clientHeight < 80)
+            void fetchNextPage();
+    };
+    const rowClass = "flex items-center gap-2.5 rounded-lg px-2 py-1.5";
+    return (_jsxs("div", { className: "grid grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)] items-stretch gap-3", "data-cp-name": "GroupMemberPicker", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1.5 rounded-xl border border-gray-25 p-2", children: [_jsxs("label", { className: "flex h-9 items-center gap-2 rounded-lg bg-gray-5 px-2.5 text-gray-600 focus-within:outline focus-within:outline-2 focus-within:outline-primary-200", children: [_jsx("span", { className: "sr-only", children: t("create_group.search_label") }), _jsx(StrokeIcon, { name: "search", size: 16 }), _jsx("input", { type: "search", value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("create_group.search_by_name"), className: "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-gray-900 outline-none placeholder:text-gray-600" })] }), _jsx("div", { className: "h-[300px] overflow-y-auto", onScroll: handleScroll, children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Spin, {}) })) : accounts.length === 0 && locked.length === 0 ? (_jsx(Empty, { description: t("create_group.no_member_found") })) : (_jsxs("ul", { className: "m-0 flex list-none flex-col gap-0.5 p-0", children: [locked.map((member) => {
+                                    const name = member.nickname || member.userID;
+                                    return (_jsx("li", { children: _jsxs("label", { className: clsx(rowClass, "cursor-not-allowed opacity-70"), children: [_jsx("input", { type: "checkbox", checked: true, disabled: true, className: "m-0 h-[18px] w-[18px] shrink-0 accent-primary-400" }), _jsx(PersonAvatar, { name: name, src: member.faceURL, size: 32 }), _jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-gray-900", children: name }), _jsx("span", { className: "shrink-0 text-xs text-gray-600", children: t("create_group.already_in_group") })] }) }, `locked-${member.userID}`));
+                                }), accounts.map((account) => {
+                                    const isSelected = selectedIds.has(account.userID);
+                                    return (_jsx("li", { children: _jsxs("label", { className: clsx(rowClass, "cursor-pointer focus-within:outline focus-within:outline-2 focus-within:outline-primary-200", isSelected ? "bg-primary-25" : "hover:bg-gray-10"), children: [_jsx("input", { type: "checkbox", checked: isSelected, onChange: () => toggle(account), className: "m-0 h-[18px] w-[18px] shrink-0 accent-primary-400" }), _jsx(PersonAvatar, { name: account.displayName, src: account.avatar, size: 32 }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "truncate text-sm leading-[18px] text-gray-900", children: account.displayName }), _jsx("span", { className: "truncate text-xs leading-4 text-gray-600", children: account.username })] })] }) }, account.userID));
+                                }), isFetchingNextPage && (_jsx("li", { className: "flex justify-center py-3", children: _jsx(Spin, { size: "small" }) }))] })) })] }), _jsxs("div", { className: "flex min-w-0 flex-col gap-2 rounded-xl bg-gray-5 p-3", children: [_jsx("span", { className: "text-[13px] font-semibold text-gray-900", children: t("create_group.selected_title", { count: selectedMembers.length }) }), selectedMembers.length === 0 ? (_jsx("span", { className: "text-sm text-gray-600", children: t("create_group.no_member_selected") })) : (_jsx("ul", { className: "m-0 flex list-none flex-col gap-1 overflow-y-auto p-0", children: selectedMembers.map((member) => (_jsxs("li", { className: "flex items-center gap-2 rounded-lg bg-white py-1 pl-1.5 pr-1", children: [_jsx(PersonAvatar, { name: member.displayName, src: member.avatar, size: 24 }), _jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] text-gray-900", children: member.displayName }), _jsx("button", { type: "button", "aria-label": t("create_group.remove_selected", { name: member.displayName }), title: t("create_group.remove_selected", { name: member.displayName }), onClick: () => toggle(member), className: `flex h-6 w-6 shrink-0 items-center justify-center rounded text-gray-600 hover:bg-gray-25 ${FOCUS_RING_CLASS}`, children: _jsx(StrokeIcon, { name: "x", size: 14 }) })] }, member.userID))) }))] })] }));
+};
+export default GroupMemberPickerCrm;

package/dist/components/group/GroupMemberPickerLegacy.d.ts

@@ -0,0 +1,8 @@
+import type { EligibleAccountItem } from "../../hooks/group/useEligibleAccounts";
+interface GroupMemberPickerProps {
+    selectedMembers: EligibleAccountItem[];
+    onChangeSelectedMembers: (members: EligibleAccountItem[]) => void;
+}
+declare const GroupMemberPickerLegacy: ({ selectedMembers, onChangeSelectedMembers, }: GroupMemberPickerProps) => import("react/jsx-runtime").JSX.Element;
+export default GroupMemberPickerLegacy;
+//# sourceMappingURL=GroupMemberPickerLegacy.d.ts.map

package/dist/components/group/GroupMemberPickerLegacy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupMemberPickerLegacy.d.ts","sourceRoot":"","sources":["../../../src/components/group/GroupMemberPickerLegacy.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAG7E,UAAU,sBAAsB;IAC9B,eAAe,EAAE,mBAAmB,EAAE,CAAC;IACvC,uBAAuB,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;CACnE;AAED,QAAA,MAAM,uBAAuB,GAAI,+CAG9B,sBAAsB,4CAqJxB,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/group/GroupMemberPickerLegacy.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { clickableProps, FOCUS_RING_CLASS } from "../../utils/a11yClickable";
+import { useDebounce } from "ahooks";
+import { Avatar, Empty, Input, Spin } from "antd";
+import clsx from "clsx";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../components/icon";
+import { useEligibleAccounts } from "../../hooks/group/useEligibleAccounts";
+import { formatMemberLabel } from "../../utils/common";
+const GroupMemberPickerLegacy = ({ selectedMembers, onChangeSelectedMembers, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const [search, setSearch] = useState("");
+    const debouncedSearch = useDebounce(search, { wait: 300 });
+    const { accounts, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useEligibleAccounts(debouncedSearch);
+    const handleListScroll = (event) => {
+        if (!hasNextPage || isFetchingNextPage)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+        if (scrollHeight - scrollTop - clientHeight < 80) {
+            void fetchNextPage();
+        }
+    };
+    const selectedIds = new Set(selectedMembers.map((member) => member.userID));
+    const toggleMember = (account) => {
+        if (selectedIds.has(account.userID)) {
+            onChangeSelectedMembers(selectedMembers.filter((member) => member.userID !== account.userID));
+            return;
+        }
+        onChangeSelectedMembers([...selectedMembers, account]);
+    };
+    const handleRemoveMember = (userID) => {
+        onChangeSelectedMembers(selectedMembers.filter((member) => member.userID !== userID));
+    };
+    const handleClearAll = () => {
+        onChangeSelectedMembers([]);
+    };
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-3", "data-cp-name": "GroupMemberPicker", children: [_jsxs("div", { className: "flex flex-col gap-2 rounded-xl border border-gray-200 p-3", children: [_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("create_group.search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 16, className: "text-gray-400" }) }), _jsx("div", { className: "max-h-64 overflow-y-auto", onScroll: handleListScroll, children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Spin, {}) })) : accounts.length === 0 ? (_jsx(Empty, { description: t("create_group.no_member_found") })) : (_jsxs(_Fragment, { children: [accounts.map((account) => {
+                                    const isSelected = selectedIds.has(account.userID);
+                                    return (_jsxs("div", Object.assign({ className: `flex cursor-pointer items-center gap-3 rounded-lg px-3 py-3 transition-colors duration-150 hover:bg-[#f5f5f5] ${FOCUS_RING_CLASS}` }, clickableProps(() => toggleMember(account)), { "aria-pressed": isSelected, children: [_jsx(Avatar, { src: account.avatar, size: 40, className: "shrink-0", children: account.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: formatMemberLabel(account.displayName, account.username) }), _jsx("span", { className: clsx("flex h-4 w-4 shrink-0 items-center justify-center rounded border", isSelected
+                                                    ? "border-[var(--dc-color-primary)] bg-[var(--dc-color-primary)]"
+                                                    : "border-gray-300 bg-white"), children: isSelected && (_jsx(Icon, { icon: "check-b", size: 11, className: "text-white" })) })] }), account.userID));
+                                }), isFetchingNextPage && (_jsx("div", { className: "flex items-center justify-center py-3", children: _jsx(Spin, { size: "small" }) }))] })) })] }), _jsxs("div", { className: "flex flex-col gap-2 rounded-xl border border-gray-200 p-3", children: [_jsxs("div", { className: "flex items-center justify-between px-1", children: [_jsx("span", { className: "text-sm text-gray-500", children: t("create_group.selected_count", { count: selectedMembers.length }) }), selectedMembers.length > 0 && (_jsx("button", { type: "button", className: "text-sm text-[var(--dc-color-primary)] hover:text-[var(--dc-color-primary-hover)] hover:underline", onClick: handleClearAll, children: t("create_group.clear_all") }))] }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: selectedMembers.length === 0 ? (_jsxs("div", { className: "flex h-full min-h-[200px] flex-col items-center justify-center gap-2 text-center", children: [_jsx(Icon, { icon: "user-three-b", size: 28, className: "text-gray-300" }), _jsx("span", { className: "text-sm text-gray-400", children: t("create_group.no_member_selected") })] })) : (selectedMembers.map((member) => (_jsxs("div", { className: "flex items-center gap-3 rounded-lg px-3 py-3", children: [_jsx(Avatar, { src: member.avatar, size: 40, className: "shrink-0", children: member.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: formatMemberLabel(member.displayName, member.username) }), _jsx(Icon, { icon: "close-b", size: 14, className: "shrink-0 cursor-pointer text-gray-400", onClick: () => handleRemoveMember(member.userID) })] }, member.userID)))) })] })] }));
+};
+export default GroupMemberPickerLegacy;

package/dist/components/group/GroupPanelHeader.d.ts

@@ -0,0 +1,10 @@
+interface GroupPanelHeaderProps {
+    title: string;
+    onClose?: () => void;
+    onBack?: () => void;
+    backLabel?: string;
+}
+/** CRM side-panel header: 56px bar with an optional back button and a close button. */
+declare const GroupPanelHeader: ({ title, onClose, onBack, backLabel, }: GroupPanelHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default GroupPanelHeader;
+//# sourceMappingURL=GroupPanelHeader.d.ts.map

package/dist/components/group/GroupPanelHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupPanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/group/GroupPanelHeader.tsx"],"names":[],"mappings":"AAIA,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,uFAAuF;AACvF,QAAA,MAAM,gBAAgB,GAAI,wCAKvB,qBAAqB,4CAmCvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/group/GroupPanelHeader.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { CrmIcon as Icon } from "../../components/group/crmIcon";
+const ICON_BUTTON = "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200";
+/** CRM side-panel header: 56px bar with an optional back button and a close button. */
+const GroupPanelHeader = ({ title, onClose, onBack, backLabel, }) => {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: `flex h-14 shrink-0 items-center gap-1 border-b border-gray-25 pr-2 ${onBack ? "pl-2" : "pl-4"}`, children: [onBack && (_jsx("button", { type: "button", className: ICON_BUTTON, onClick: onBack, "aria-label": backLabel, title: backLabel, children: _jsx(Icon, { icon: "arrow-left-o", size: 20 }) })), _jsx("h2", { className: "m-0 min-w-0 flex-1 truncate text-base font-bold text-gray-900", children: title }), onClose && (_jsx("button", { type: "button", className: ICON_BUTTON, onClick: onClose, "aria-label": t("close"), title: t("close"), children: _jsx(Icon, { icon: "close-o", size: 20 }) }))] }));
+};
+export default GroupPanelHeader;

package/dist/components/group/MemberPermissionPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MemberPermissionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/group/MemberPermissionPanel.tsx"],"names":[],"mappings":"AAkBA,UAAU,0BAA0B;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAuBD,QAAA,MAAM,qBAAqB,GAAI,4BAA4B,0BAA0B,mDA2FpF,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"MemberPermissionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/group/MemberPermissionPanel.tsx"],"names":[],"mappings":"AAqBA,UAAU,0BAA0B;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA8BD,QAAA,MAAM,qBAAqB,GAAI,4BAA4B,0BAA0B,mDA0IpF,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/group/MemberPermissionPanel.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { ConfigProvider, Switch, message } from "antd";
 import { useTranslation } from "react-i18next";
@@ -7,6 +7,9 @@ import { GroupMemberRole } from "@droppii-org/wasm-client-sdk";
 import { useGroupMembers } from "../../hooks/group/useGroupMembers";
 import { useSetMemberRolePermissions } from "../../hooks/group/useGroupMemberActions";
 import { Icon } from "../../components/icon";
+import useAuthStore from "../../store/auth";
+import PermissionPanelCrm from "./PermissionPanelCrm";
+import DisableSendPermissionConfirm from "./DisableSendPermissionConfirm";
 import { ANTD_PRIMARY_COLOR_VAR } from "../../constants";
 import { GROUP_PERMISSION_KEY } from "../../constants/im";
 import { changedSwitches, commonSwitchStates, toRolePermissionChange, } from "../../utils/groupPermissionSwitches";
@@ -22,6 +25,12 @@ const SWITCH_LABELS = {
     pinMessage: "permission_pin_message",
     viewMemberInformation: "permission_view_member_info",
 };
+const SWITCH_DESCRIPTIONS = {
+    sendMessage: "permission_desc_send_message",
+    addMember: "permission_desc_add_member",
+    pinMessage: "permission_desc_pin_message",
+    viewMemberInformation: "permission_desc_view_member_info",
+};
 const SWITCHES = Object.keys(SWITCH_PERMISSION_KEYS);
 // "Configure Member Permissions", inline in the "Thông tin" sidebar. Switches
 // start from what every ordinary member already shares, and "Lưu" sends only
@@ -30,7 +39,9 @@ const MemberPermissionPanel = ({ open, groupID, onClose }) => {
     const { t } = useTranslation();
     const { members: groupMembers, isLoading } = useGroupMembers(open ? groupID : undefined);
     const { mutateAsync: setMemberRolePermissions } = useSetMemberRolePermissions();
+    const isCrm = useAuthStore((state) => state.isCrm);
     const [isSaving, setIsSaving] = useState(false);
+    const [isConfirmOpen, setIsConfirmOpen] = useState(false);
     const [edits, setEdits] = useState({});
     useEffect(() => {
         if (open)
@@ -41,9 +52,17 @@ const MemberPermissionPanel = ({ open, groupID, onClose }) => {
     const pending = Object.assign(Object.assign({}, baseline), edits);
     const changes = changedSwitches(baseline, pending);
     const hasChanges = Object.keys(changes).length > 0;
+    const requestSave = () => {
+        if (isCrm && changes.sendMessage === false) {
+            setIsConfirmOpen(true);
+            return;
+        }
+        void handleSave();
+    };
     const handleSave = async () => {
         if (!groupID || !hasChanges)
             return;
+        setIsConfirmOpen(false);
         setIsSaving(true);
         try {
             await setMemberRolePermissions(Object.assign({ groupID }, toRolePermissionChange(SWITCH_PERMISSION_KEYS, changes)));
@@ -60,6 +79,16 @@ const MemberPermissionPanel = ({ open, groupID, onClose }) => {
     };
     if (!open)
         return null;
-    return (_jsxs("div", { className: "absolute inset-0 bg-white flex flex-col z-10", "data-cp-name": "MemberPermissionPanel", children: [_jsxs("div", { className: "flex w-full items-center border-b border-gray-100 p-2", children: [_jsx("button", { type: "button", className: "flex shrink-0 cursor-pointer items-center justify-center p-2 text-[var(--dc-color-nav-icon)]", onClick: onClose, children: _jsx(Icon, { icon: "arrow-left-o", size: 24 }) }), _jsx("p", { className: "min-w-0 flex-1 truncate px-2 text-[18px] font-bold leading-[1.6] text-gray-900", children: t("member_permission_settings") })] }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx(ConfigProvider, { theme: { token: { colorPrimary: ANTD_PRIMARY_COLOR_VAR } }, children: _jsx("div", { className: "flex flex-col py-2", children: SWITCHES.map((name) => (_jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t(SWITCH_LABELS[name]) }), _jsx(Switch, { checked: pending[name], disabled: isLoading, onChange: (checked) => setEdits((prev) => (Object.assign(Object.assign({}, prev), { [name]: checked }))) })] }, name))) }) }) }), _jsxs("div", { className: "flex items-center justify-end gap-2 px-4 py-3 border-t border-gray-100", children: [_jsx("button", { type: "button", className: "px-4 py-1.5 rounded-full border border-gray-300 text-gray-700 text-sm font-medium", onClick: onClose, children: t("cancel") }), _jsx("button", { type: "button", className: "px-4 py-1.5 rounded-full bg-[var(--dc-color-primary)] text-white text-sm font-medium disabled:bg-gray-200 disabled:text-gray-400", disabled: !hasChanges || isSaving || isLoading, onClick: handleSave, children: t("save") })] })] }));
+    if (isCrm) {
+        return (_jsxs(_Fragment, { children: [_jsx(PermissionPanelCrm, { title: t("member_permission_row"), rows: SWITCHES.map((name) => ({
+                        key: name,
+                        label: t(SWITCH_LABELS[name]),
+                        description: t(SWITCH_DESCRIPTIONS[name]),
+                        checked: pending[name],
+                        disabled: isLoading,
+                        onChange: (checked) => setEdits((prev) => (Object.assign(Object.assign({}, prev), { [name]: checked }))),
+                    })), canSave: hasChanges && !isLoading, isSaving: isSaving, onBack: onClose, onSave: requestSave }), _jsx(DisableSendPermissionConfirm, { open: isConfirmOpen, title: t("disable_send_permission_title_all_members"), loading: isSaving, onConfirm: handleSave, onCancel: () => setIsConfirmOpen(false) })] }));
+    }
+    return (_jsxs("div", { className: "absolute inset-0 bg-white flex flex-col z-10", "data-cp-name": "MemberPermissionPanel", children: [_jsxs("div", { className: "flex w-full items-center border-b border-gray-100 p-2", children: [_jsx("button", { type: "button", className: "flex shrink-0 cursor-pointer items-center justify-center p-2 text-[var(--dc-color-nav-icon)]", onClick: onClose, children: _jsx(Icon, { icon: "arrow-left-o", size: 24 }) }), _jsx("p", { className: "min-w-0 flex-1 truncate px-2 text-[18px] font-bold leading-[1.6] text-gray-900", children: t("member_permission_settings") })] }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx(ConfigProvider, { theme: { token: { colorPrimary: ANTD_PRIMARY_COLOR_VAR } }, children: _jsx("div", { className: "flex flex-col py-2", children: SWITCHES.map((name) => (_jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t(SWITCH_LABELS[name]) }), _jsx(Switch, { checked: pending[name], disabled: isLoading, onChange: (checked) => setEdits((prev) => (Object.assign(Object.assign({}, prev), { [name]: checked }))) })] }, name))) }) }) }), _jsxs("div", { className: "flex items-center justify-end gap-2 px-4 py-3 border-t border-gray-100", children: [_jsx("button", { type: "button", className: "px-4 py-1.5 rounded-full border border-gray-300 text-gray-700 text-sm font-medium", onClick: onClose, children: t("cancel") }), _jsx("button", { type: "button", className: "px-4 py-1.5 rounded-full bg-[var(--dc-color-primary)] text-white text-sm font-medium disabled:bg-gray-200 disabled:text-gray-400", disabled: !hasChanges || isSaving || isLoading, onClick: requestSave, children: t("save") })] }), _jsx(DisableSendPermissionConfirm, { open: isConfirmOpen, title: t("disable_send_permission_title_all_members"), loading: isSaving, onConfirm: handleSave, onCancel: () => setIsConfirmOpen(false) })] }));
 };
 export default MemberPermissionPanel;

package/dist/components/group/PermissionPanelCrm.d.ts

@@ -0,0 +1,24 @@
+export interface PermissionRowDef {
+    key: string;
+    label: string;
+    description: string;
+    checked: boolean;
+    disabled?: boolean;
+    onChange: (checked: boolean) => void;
+}
+/** One permission per row: name, one-line description, switch. */
+export declare const PermissionRowList: ({ rows }: {
+    rows: PermissionRowDef[];
+}) => import("react/jsx-runtime").JSX.Element;
+interface PermissionPanelCrmProps {
+    title: string;
+    rows: PermissionRowDef[];
+    canSave: boolean;
+    isSaving: boolean;
+    onBack: () => void;
+    onSave: () => void;
+}
+/** CRM sub-panel of Thông tin nhóm: back header, permission rows, footer pinned to the bottom. */
+declare const PermissionPanelCrm: ({ title, rows, canSave, isSaving, onBack, onSave }: PermissionPanelCrmProps) => import("react/jsx-runtime").JSX.Element;
+export default PermissionPanelCrm;
+//# sourceMappingURL=PermissionPanelCrm.d.ts.map

package/dist/components/group/PermissionPanelCrm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionPanelCrm.d.ts","sourceRoot":"","sources":["../../../src/components/group/PermissionPanelCrm.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,kEAAkE;AAClE,eAAO,MAAM,iBAAiB,GAAI,UAAU;IAAE,IAAI,EAAE,gBAAgB,EAAE,CAAA;CAAE,4CAevE,CAAC;AAEF,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,kGAAkG;AAClG,QAAA,MAAM,kBAAkB,GAAI,oDAAoD,uBAAuB,4CAgBtG,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/group/PermissionPanelCrm.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Switch } from "antd";
+import { useTranslation } from "react-i18next";
+import GroupPanelHeader from "./GroupPanelHeader";
+/** One permission per row: name, one-line description, switch. */
+export const PermissionRowList = ({ rows }) => (_jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: rows.map((row) => {
+        const id = `permission-${row.key}`;
+        return (_jsxs("li", { className: "flex items-center gap-3 px-4 py-3", children: [_jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { id: id, className: "text-sm text-gray-900", children: row.label }), _jsx("span", { className: "text-xs leading-snug text-gray-600", children: row.description })] }), _jsx(Switch, { checked: row.checked, disabled: row.disabled, onChange: row.onChange, "aria-labelledby": id })] }, row.key));
+    }) }));
+/** CRM sub-panel of Thông tin nhóm: back header, permission rows, footer pinned to the bottom. */
+const PermissionPanelCrm = ({ title, rows, canSave, isSaving, onBack, onSave }) => {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "absolute inset-0 z-10 flex flex-col bg-white", "data-cp-name": "PermissionPanelCrm", children: [_jsx(GroupPanelHeader, { title: title, onBack: onBack, backLabel: t("back") }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto py-1", children: _jsx(PermissionRowList, { rows: rows }) }), _jsxs("div", { className: "flex shrink-0 justify-end gap-2 border-t border-gray-25 bg-gray-10 px-4 py-3", children: [_jsx(Button, { onClick: onBack, children: t("action_cancel") }), _jsx(Button, { type: "primary", disabled: !canSave, loading: isSaving, onClick: onSave, children: t("save") })] })] }));
+};
+export default PermissionPanelCrm;

package/dist/components/group/PersonAvatar.d.ts

@@ -0,0 +1,11 @@
+interface PersonAvatarProps {
+    name: string;
+    src?: string | null;
+    /** Pixel size of the round avatar. */
+    size: 24 | 32 | 36;
+    className?: string;
+}
+/** Photo when it loads, otherwise tinted initials. */
+declare const PersonAvatar: ({ name, src, size, className }: PersonAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default PersonAvatar;
+//# sourceMappingURL=PersonAvatar.d.ts.map

package/dist/components/group/PersonAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/group/PersonAvatar.tsx"],"names":[],"mappings":"AAQA,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,sCAAsC;IACtC,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,sDAAsD;AACtD,QAAA,MAAM,YAAY,GAAI,gCAAgC,iBAAiB,4CA8BtE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/group/PersonAvatar.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import clsx from "clsx";
+import { getAvatarTint, getInitials, } from "../../components/conversation/avatarTint";
+const SIZE_CLASS = {
+    24: "h-6 w-6 text-[9px]",
+    32: "h-8 w-8 text-xs",
+    36: "h-9 w-9 text-[13px]",
+};
+/** Photo when it loads, otherwise tinted initials. */
+const PersonAvatar = ({ name, src, size, className }) => {
+    const [failedSrc, setFailedSrc] = useState(null);
+    if (src && src !== failedSrc) {
+        return (
+        // eslint-disable-next-line @next/next/no-img-element
+        _jsx("img", { src: src, alt: "", className: clsx("shrink-0 rounded-full object-cover", SIZE_CLASS[size], className), onError: () => setFailedSrc(src) }));
+    }
+    return (_jsx("span", { "aria-hidden": "true", className: clsx("flex shrink-0 items-center justify-center rounded-full font-semibold", SIZE_CLASS[size], getAvatarTint(name), className), children: getInitials(name) }));
+};
+export default PersonAvatar;

package/dist/components/group/crmIcon.d.ts

@@ -0,0 +1,9 @@
+interface CrmIconProps {
+    icon: string;
+    size?: number;
+    className?: string;
+}
+/** CRM-only icon: renders the mockup line icon for a legacy icon-font name. */
+export declare const CrmIcon: ({ icon, size, className }: CrmIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=crmIcon.d.ts.map

package/dist/components/group/crmIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"crmIcon.d.ts","sourceRoot":"","sources":["../../../src/components/group/crmIcon.tsx"],"names":[],"mappings":"AAmCA,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,+EAA+E;AAC/E,eAAO,MAAM,OAAO,GAAI,2BAAgC,YAAY,4CAEnE,CAAC"}

package/dist/components/group/crmIcon.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+// Droppii icon-font names used by shared group markup -> the mockups' line icons.
+const MAP = {
+    "arrow-left-o": "chevron-left",
+    "close-o": "x",
+    "close-b": "x",
+    "angle-right-o": "chevron-right",
+    "bell-o": "bell",
+    "bell-off-o": "bell-off",
+    "chat-square-o": "message-circle",
+    "shield-o": "shield",
+    "shield-fail-o": "shield",
+    "link-alt-o": "link",
+    "trash-o": "trash",
+    "logout-o": "log-out",
+    "user-del-o": "x-circle",
+    "camera-o": "camera",
+    "edit-o": "edit",
+    "plus-o": "plus",
+    "globe-o": "globe",
+    "globe-b": "globe",
+    "lock-o": "lock",
+    "lock-b": "lock",
+    "user-two-o": "users",
+    "search-o": "search",
+    "user-add-o": "user-plus",
+    "more-horizontal-b": "more",
+    "key-o": "key",
+    "check-b": "check",
+    "camera-b": "camera",
+    "user-x": "user-x",
+};
+/** CRM-only icon: renders the mockup line icon for a legacy icon-font name. */
+export const CrmIcon = ({ icon, size = 20, className }) => {
+    var _a;
+    return (_jsx(StrokeIcon, { name: (_a = MAP[icon]) !== null && _a !== void 0 ? _a : "info", size: size, className: className }));
+};

package/dist/components/icon/AdaptiveIcon.d.ts

@@ -0,0 +1,15 @@
+import type { StrokeIconName } from "./strokeIconNodes";
+interface AdaptiveIconProps {
+    /** Line icon shown in CRM. */
+    stroke: StrokeIconName;
+    /** Icon-font glyph every other host keeps. */
+    font: string;
+    size?: number;
+    /** Size of the line icon when it differs from the font glyph's. */
+    strokeSize?: number;
+    className?: string;
+}
+/** Mockup line icon in CRM, the icon-font glyph elsewhere. */
+export declare const AdaptiveIcon: ({ stroke, font, size, strokeSize, className }: AdaptiveIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AdaptiveIcon.d.ts.map

package/dist/components/icon/AdaptiveIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdaptiveIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/AdaptiveIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,UAAU,iBAAiB;IACzB,8BAA8B;IAC9B,MAAM,EAAE,cAAc,CAAC;IACvB,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,8DAA8D;AAC9D,eAAO,MAAM,YAAY,GAAI,+CAAoD,iBAAiB,4CAOjG,CAAC"}

package/dist/components/icon/AdaptiveIcon.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import useAuthStore from "../../store/auth";
+import { Icon } from "./index";
+import { StrokeIcon } from "./StrokeIcon";
+/** Mockup line icon in CRM, the icon-font glyph elsewhere. */
+export const AdaptiveIcon = ({ stroke, font, size = 20, strokeSize, className }) => {
+    const isCrm = useAuthStore((state) => state.isCrm);
+    return isCrm ? (_jsx(StrokeIcon, { name: stroke, size: strokeSize !== null && strokeSize !== void 0 ? strokeSize : size, className: className })) : (_jsx(Icon, { icon: font, size: size, className: className }));
+};

package/dist/components/icon/StrokeIcon.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from "react";
+import { StrokeIconName } from "./strokeIconNodes";
+export interface StrokeIconProps {
+    name: StrokeIconName;
+    size?: number;
+    strokeWidth?: number;
+    className?: string;
+    style?: CSSProperties;
+    /** Gives the icon an accessible name; without it the icon is decorative. */
+    title?: string;
+}
+/** Line icons from the approved CRM mockups. Colour follows `currentColor`. */
+export declare const StrokeIcon: ({ name, size, strokeWidth, className, style, title, }: StrokeIconProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StrokeIcon.d.ts.map

package/dist/components/icon/StrokeIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StrokeIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/StrokeIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,aAAa,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAqB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEtE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,+EAA+E;AAC/E,eAAO,MAAM,UAAU,GAAI,uDAOxB,eAAe,4CAqBjB,CAAC"}

package/dist/components/icon/StrokeIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import { STROKE_ICON_NODES } from "./strokeIconNodes";
+/** Line icons from the approved CRM mockups. Colour follows `currentColor`. */
+export const StrokeIcon = ({ name, size = 20, strokeWidth = 1.75, className, style, title, }) => (_jsx("svg", { "data-cp-name": "StrokeIcon", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className: className, style: Object.assign({ flexShrink: 0, display: "block" }, style), role: title ? "img" : undefined, "aria-hidden": title ? undefined : true, "aria-label": title, children: STROKE_ICON_NODES[name].map(([tag, attrs], index) => createElement(tag, Object.assign({ key: index }, attrs))) }));