@worknice/whiteboard 0.60.0 → 0.61.0

package/dist/layouts/FullLayout.js

@@ -5,7 +5,6 @@ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE__hud_SidebarIcon_js_fabd050a__ from "../hud/SidebarIcon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__hud_ToolbarButton_js_e9a8b3bc__ from "../hud/ToolbarButton.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__ from "../utils/useNextContext.js";
-import * as __WEBPACK_EXTERNAL_MODULE__BaseLayout_js_b37d1475__ from "./BaseLayout.js";
 import * as __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__ from "./FullLayout.module.js";
 const FullLayout = ({ aside, asidePosition = {
     desktop: "asideLast",
@@ -79,85 +78,83 @@ const FullLayout = ({ aside, asidePosition = {
     }, [
         setMenuState
     ]);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__BaseLayout_js_b37d1475__["default"], {
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].container, {
-                [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].open]: "open" === menuState,
-                [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].closed]: "closed" === menuState
-            }),
-            children: [
-                mainNavChildren ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
-                    children: [
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                            ref: toggleRef,
-                            className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].toggle,
-                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__hud_ToolbarButton_js_e9a8b3bc__["default"], {
-                                onClick: ()=>{
-                                    setMenuState((current)=>"open" === current ? "closed" : "open");
-                                },
-                                title: "Toggle Sidebar",
-                                type: "ghost",
-                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__hud_SidebarIcon_js_fabd050a__["default"], {})
-                            })
-                        }),
-                        backLink ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                            className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].back,
-                            children: backLink
-                        }) : null,
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("nav", {
-                            ref: navRef,
-                            className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].nav,
-                            children: [
-                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                                    className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].toolbar,
-                                    children: toolbarChildren
-                                }),
-                                navTitle ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                                    className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].navTitle,
-                                    children: navTitle
-                                }) : null,
-                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                                    className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].navContent,
-                                    children: mainNavChildren
-                                })
-                            ]
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].container, {
+            [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].open]: "open" === menuState,
+            [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].closed]: "closed" === menuState
+        }),
+        children: [
+            mainNavChildren ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        ref: toggleRef,
+                        className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].toggle,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__hud_ToolbarButton_js_e9a8b3bc__["default"], {
+                            onClick: ()=>{
+                                setMenuState((current)=>"open" === current ? "closed" : "open");
+                            },
+                            title: "Toggle Sidebar",
+                            type: "ghost",
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__hud_SidebarIcon_js_fabd050a__["default"], {})
                         })
-                    ]
-                }) : null,
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-                    className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].content, "default" === padding && __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].padded, aside && {
-                        [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideFirstDesktop]: "asideFirst" === asidePosition.desktop,
-                        [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideLastDesktop]: "asideLast" === asidePosition.desktop,
-                        [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideFirstMobile]: "asideFirst" === asidePosition.mobile,
-                        [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideLastMobile]: "asideLast" === asidePosition.mobile
                     }),
-                    children: [
-                        header ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                            className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].header,
-                            children: header
-                        }) : null,
-                        navigation ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("nav", {
-                            className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].navigation,
-                            children: navigation
-                        }) : null,
-                        summary ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("aside", {
-                            className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].summary,
-                            children: summary
-                        }) : null,
-                        aside ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("aside", {
-                            className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].aside,
-                            children: aside
-                        }) : null,
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("main", {
-                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].main, {
-                                [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].full]: null == aside
+                    backLink ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].back,
+                        children: backLink
+                    }) : null,
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("nav", {
+                        ref: navRef,
+                        className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].nav,
+                        children: [
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].toolbar,
+                                children: toolbarChildren
                             }),
-                            children: children
-                        })
-                    ]
-                })
-            ]
-        })
+                            navTitle ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].navTitle,
+                                children: navTitle
+                            }) : null,
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].navContent,
+                                children: mainNavChildren
+                            })
+                        ]
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].content, "default" === padding && __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].padded, aside && {
+                    [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideFirstDesktop]: "asideFirst" === asidePosition.desktop,
+                    [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideLastDesktop]: "asideLast" === asidePosition.desktop,
+                    [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideFirstMobile]: "asideFirst" === asidePosition.mobile,
+                    [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideLastMobile]: "asideLast" === asidePosition.mobile
+                }),
+                children: [
+                    header ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].header,
+                        children: header
+                    }) : null,
+                    navigation ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("nav", {
+                        className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].navigation,
+                        children: navigation
+                    }) : null,
+                    summary ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("aside", {
+                        className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].summary,
+                        children: summary
+                    }) : null,
+                    aside ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("aside", {
+                        className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].aside,
+                        children: aside
+                    }) : null,
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("main", {
+                        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].main, {
+                            [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].full]: null == aside
+                        }),
+                        children: children
+                    })
+                ]
+            })
+        ]
     });
 };
 const FullLayout_rslib_entry_ = FullLayout;

package/dist/layouts/MinimalLayout.js

@@ -1,7 +1,6 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import * as __WEBPACK_EXTERNAL_MODULE__BaseLayout_js_b37d1475__ from "./BaseLayout.js";
 import * as __WEBPACK_EXTERNAL_MODULE__MinimalLayout_module_js_ad0496a2__ from "./MinimalLayout.module.js";
-const MinimalLayout = ({ backLink, children, toolbarItems })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__BaseLayout_js_b37d1475__["default"], {
+const MinimalLayout = ({ backLink, children, toolbarItems })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
         children: [
             toolbarItems || backLink ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
                 className: __WEBPACK_EXTERNAL_MODULE__MinimalLayout_module_js_ad0496a2__["default"].toolbar,

package/dist/presentation/Avatar.d.ts

@@ -1,6 +1,5 @@
-import type { ComponentProps, MouseEvent, ReactNode } from "react";
-import Icon from "./Icon";
-export type IconSymbol = ComponentProps<typeof Icon>["symbol"];
+import type { ComponentType, MouseEvent, ReactNode } from "react";
+import type { IconProps } from "../icons/types";
 type AvatarBaseProps = {
     id: string;
     size?: keyof typeof SIZES;
@@ -14,12 +13,12 @@ type AvatarBaseProps = {
     /**
      * Small icon displayed on the bottom right of the avatar.
      */
-    badgeIcon?: IconSymbol;
+    badgeIconComponent?: ComponentType<IconProps>;
     /**
      * Icon displayed on over the avatar when hovered.
      * Useful for indicating an action.
      */
-    hoverIcon?: IconSymbol;
+    hoverIconComponent?: ComponentType<IconProps>;
     onClick?: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
 };
 type Props = (AvatarBaseProps & {
@@ -39,5 +38,5 @@ declare const SIZES: {
     readonly large: 96;
     readonly xlarge: 192;
 };
-declare const Avatar: ({ id, size, name, imageUrl, hue, badgeIcon, hoverIcon, href, onClick, children, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Avatar: ({ id, size, name, imageUrl, hue, badgeIconComponent: BadgeIconComponent, hoverIconComponent: HoverIconComponent, href, onClick, children, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Avatar;

package/dist/presentation/Avatar.js

@@ -2,9 +2,9 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Profile_js_26196ea3__ from "../icons/components/Profile.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__ from "../utils/useNextContext.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__ from "./Avatar.module.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
 const DEFAULT_HUE = "280";
 const SIZES = {
     xtiny: 16,
@@ -57,7 +57,7 @@ const badgeIconSize = (avatarPx)=>{
     if (badgePx < 46) return "large";
     return "xlarge";
 };
-const Avatar = ({ id, size = "large", name, imageUrl, hue = DEFAULT_HUE, badgeIcon, hoverIcon, href, onClick, children })=>{
+const Avatar = ({ id, size = "large", name, imageUrl, hue = DEFAULT_HUE, badgeIconComponent: BadgeIconComponent, hoverIconComponent: HoverIconComponent, href, onClick, children })=>{
     const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
     const [showChildren, setShowChildren] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     const px = SIZES[size];
@@ -141,8 +141,7 @@ const Avatar = ({ id, size = "large", name, imageUrl, hue = DEFAULT_HUE, badgeIc
             svg,
             isPlaceholder ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
                 className: __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].placeholderIconWrap,
-                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                    symbol: "Profile",
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Profile_js_26196ea3__["default"], {
                     size: placeholderIconSize(px),
                     tone: "muted"
                 })
@@ -176,29 +175,26 @@ const Avatar = ({ id, size = "large", name, imageUrl, hue = DEFAULT_HUE, badgeIc
                 style: rootStyle,
                 children: [
                     media,
-                    badgeIcon ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                    BadgeIconComponent ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
                         "aria-hidden": true,
                         className: __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].badge,
                         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
                             className: __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].badgeGlyph,
-                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                                symbol: badgeIcon,
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(BadgeIconComponent, {
                                 size: badgeIconSize(px),
                                 tone: "default"
                             })
                         })
                     }) : null,
-                    hoverIcon && interactive ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                    HoverIconComponent && interactive ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
                         "aria-hidden": true,
                         className: __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].hoverIconOverlay,
                         children: iconLayout.scaled ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
                             className: __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].hoverIconScaled,
-                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                                symbol: hoverIcon,
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(HoverIconComponent, {
                                 size: iconLayout.size
                             })
-                        }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                            symbol: hoverIcon,
+                        }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(HoverIconComponent, {
                             size: iconLayout.size
                         })
                     }) : null

package/dist/presentation/Avatar.stories.d.ts

@@ -1,13 +1,13 @@
 import type { StoryObj } from "@storybook/nextjs-vite";
 declare const meta: {
-    component: ({ id, size, name, imageUrl, hue, badgeIcon, hoverIcon, href, onClick, children, }: ({
+    component: ({ id, size, name, imageUrl, hue, badgeIconComponent: BadgeIconComponent, hoverIconComponent: HoverIconComponent, href, onClick, children, }: ({
         id: string;
         size?: "small" | "large" | "xlarge" | "tiny" | "xtiny";
         name?: string;
         imageUrl?: string | null;
         hue?: string;
-        badgeIcon?: import("./Avatar").IconSymbol;
-        hoverIcon?: import("./Avatar").IconSymbol;
+        badgeIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
+        hoverIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
         onClick?: (event: import("react").MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
     } & {
         href: string;
@@ -18,8 +18,8 @@ declare const meta: {
         name?: string;
         imageUrl?: string | null;
         hue?: string;
-        badgeIcon?: import("./Avatar").IconSymbol;
-        hoverIcon?: import("./Avatar").IconSymbol;
+        badgeIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
+        hoverIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
         onClick?: (event: import("react").MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
     } & {
         href?: never;
@@ -30,8 +30,8 @@ declare const meta: {
         name?: string;
         imageUrl?: string | null;
         hue?: string;
-        badgeIcon?: import("./Avatar").IconSymbol;
-        hoverIcon?: import("./Avatar").IconSymbol;
+        badgeIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
+        hoverIconComponent?: import("react").ComponentType<import("../icons/types").IconProps>;
         onClick?: (event: import("react").MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
     } & {
         href?: never;

package/dist/presentation/Avatar.stories.js

@@ -1,5 +1,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__ from "../controls/Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_ArrowTurnLeftUp_js_d3de637f__ from "../icons/components/ArrowTurnLeftUp.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Edit_js_9dd13ede__ from "../icons/components/Edit.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Plus_js_05a3fe06__ from "../icons/components/Plus.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_3cc1ba9c__ from "../utils/storybook.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Avatar_js_7e0bab6d__ from "./Avatar.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__ from "./Card.js";
@@ -33,7 +36,7 @@ const Placeholder = {
 };
 const WithBadgeIcon = {
     args: {
-        badgeIcon: "ArrowTurnLeftUp"
+        badgeIconComponent: __WEBPACK_EXTERNAL_MODULE__icons_components_ArrowTurnLeftUp_js_d3de637f__["default"]
     }
 };
 const WithHref = {
@@ -43,13 +46,13 @@ const WithHref = {
 };
 const WithHoverIcon = {
     args: {
-        hoverIcon: "Edit",
+        hoverIconComponent: __WEBPACK_EXTERNAL_MODULE__icons_components_Edit_js_9dd13ede__["default"],
         href: "#edit-profile"
     }
 };
 const PlaceholderAddAction = {
     args: {
-        hoverIcon: "Plus",
+        hoverIconComponent: __WEBPACK_EXTERNAL_MODULE__icons_components_Plus_js_05a3fe06__["default"],
         href: "#add-person",
         imageUrl: void 0,
         name: void 0,
@@ -68,7 +71,7 @@ const Xlarge = {
 };
 const WithOnClickModal = {
     args: {
-        hoverIcon: "Edit",
+        hoverIconComponent: __WEBPACK_EXTERNAL_MODULE__icons_components_Edit_js_9dd13ede__["default"],
         children: (onClose)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__["default"], {
                 onClose: onClose,
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"], {

package/dist/presentation/Card.js

@@ -2,8 +2,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_ChevronDown_js_606de891__ from "../icons/components/ChevronDown.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__ from "./Card.module.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__ from "./VStack.js";
 const Card = ({ children, header, description, footer, hasShadow = false, tagName: Tag = "section", ariaLabel, expander, defaultExpanded, actions })=>{
     const [isExpanded, setIsExpanded] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(defaultExpanded);
@@ -38,9 +38,7 @@ const Card = ({ children, header, description, footer, hasShadow = false, tagNam
                             "aria-hidden": true,
                             children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
                                 className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].expanderIcon, isExpanded && __WEBPACK_EXTERNAL_MODULE__Card_module_js_75ab42d8__["default"].expanderIconOpen),
-                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                                    symbol: "ChevronDown"
-                                })
+                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_ChevronDown_js_606de891__["default"], {})
                             })
                         })
                     ]

package/dist/presentation/ConfirmationModal.js

@@ -3,7 +3,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__ from "../co
 import * as __WEBPACK_EXTERNAL_MODULE__forms_FormButtonSet_js_c160eb1a__ from "../forms/FormButtonSet.js";
 import * as __WEBPACK_EXTERNAL_MODULE__forms_FormErrorList_js_bc080ab1__ from "../forms/FormErrorList.js";
 import * as __WEBPACK_EXTERNAL_MODULE__forms_useForm_js_e756b4e7__ from "../forms/useForm.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Close_js_7809217d__ from "../icons/components/Close.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__ from "./Modal.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Sheet_js_764c2a36__ from "./Sheet.js";
 import * as __WEBPACK_EXTERNAL_MODULE__SheetContent_js_e6295f57__ from "./SheetContent.js";
@@ -25,9 +25,7 @@ const ConfirmationModal = ({ title, primaryLabel = "Save", secondaryLabel = "Can
                 actions: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
                     type: "ghost",
                     size: "small",
-                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                        symbol: "Close"
-                    }),
+                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Close_js_7809217d__["default"], {}),
                     onClick: onClose
                 }),
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Subheading_js_09c49e3b__["default"], {

package/dist/presentation/CustomizableTable/CustomizableTable.js

@@ -13,6 +13,16 @@ import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__ from "../..
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_07249afc__ from "../../controls/Disclosure.js";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_FilterModal_js_c5dcd344__ from "../../controls/FilterModal.js";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_fa7c5c89__ from "../../controls/MenuButton.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Close_js_387b6f2b__ from "../../icons/components/Close.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Columns_js_41cfa163__ from "../../icons/components/Columns.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Download_js_486a4eac__ from "../../icons/components/Download.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Filter_js_7e0f51a7__ from "../../icons/components/Filter.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Loading_js_ac2aabae__ from "../../icons/components/Loading.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Overflow_js_e85d27d7__ from "../../icons/components/Overflow.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_Search_js_cc9f4c8e__ from "../../icons/components/Search.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_SortAsc_js_fb3d8907__ from "../../icons/components/SortAsc.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_SortDefault_js_14260daf__ from "../../icons/components/SortDefault.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_SortDes_js_49fadfe4__ from "../../icons/components/SortDes.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_0c849015__ from "../../inputs/CheckboxInput.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_StringInput_js_39dae7d5__ from "../../inputs/StringInput.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_tables_js_ad146866__ from "../../utils/tables.js";
@@ -20,7 +30,6 @@ import * as __WEBPACK_EXTERNAL_MODULE__Badge_js_a2cbb2b8__ from "../Badge.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Card_js_2e00482a__ from "../Card.js";
 import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_bacbf899__ from "../CardContent.js";
 import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_5c2eb952__ from "../HStack.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__ from "../Icon.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_6d36b5d5__ from "../PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__ from "../Table.module.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ConfigureColumnsModal_js_cdac33d6__ from "./ConfigureColumnsModal.js";
@@ -52,18 +61,12 @@ const DraggableColumnHeader = ({ header, getColumnStyle, showResizer = true })=>
             title: "asc" === header.column.getIsSorted() ? "Sorted by ascending order" : "desc" === header.column.getIsSorted() ? "Sorted by descending order" : "Default sorting order",
             children: [
                 (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(header.column.columnDef.header, header.getContext()),
-                "asc" === header.column.getIsSorted() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                    size: "small",
-                    symbol: "SortAsc",
-                    className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].sortIcon, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].headerSortIcon)
-                }) : "desc" === header.column.getIsSorted() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                    size: "small",
-                    symbol: "SortDes",
-                    className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].sortIcon, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].headerSortIcon)
-                }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                    size: "small",
-                    symbol: "SortDefault",
-                    className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].sortIcon, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].headerSortIcon)
+                "asc" === header.column.getIsSorted() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_SortAsc_js_fb3d8907__["default"], {
+                    size: "small"
+                }) : "desc" === header.column.getIsSorted() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_SortDes_js_49fadfe4__["default"], {
+                    size: "small"
+                }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_SortDefault_js_14260daf__["default"], {
+                    size: "small"
                 })
             ]
         })
@@ -649,8 +652,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                                                     {
                                                         id: "download-selected-rows",
                                                         label: "Download CSV",
-                                                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                                                            symbol: "Download",
+                                                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Download_js_486a4eac__["default"], {
                                                             size: "small"
                                                         }),
                                                         type: "onClick",
@@ -658,14 +660,10 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                                                     }
                                                 ] : []
                                             ],
-                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                                                symbol: "Overflow"
-                                            })
+                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Overflow_js_e85d27d7__["default"], {})
                                         }) : null,
                                         /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
-                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                                                symbol: "Close"
-                                            }),
+                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Close_js_387b6f2b__["default"], {}),
                                             onClick: ()=>{
                                                 reactTable.resetRowSelection(true);
                                             },
@@ -690,9 +688,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                                 0 !== globalFilterableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                                     className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].filterBarSearch,
                                     children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_StringInput_js_39dae7d5__["default"], {
-                                        prefix: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                                            symbol: "Search"
-                                        }),
+                                        prefix: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Search_js_cc9f4c8e__["default"], {}),
                                         placeholder: "Search",
                                         id: "globalSearch",
                                         value: searchTerm,
@@ -709,9 +705,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                                         0 !== filterableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
                                             type: "secondary",
                                             onClick: ()=>setIsFilterModalOpen(true),
-                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                                                symbol: "Filter"
-                                            }),
+                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Filter_js_7e0f51a7__["default"], {}),
                                             disabled: isLoading || !hasFilterableColumns,
                                             children: [
                                                 "Filters",
@@ -721,9 +715,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                                         0 !== availableColumnGroups.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_07249afc__["default"], {
                                             disabled: isLoading,
                                             id: "columnVisibility",
-                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                                                symbol: "Columns"
-                                            }),
+                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Columns_js_41cfa163__["default"], {}),
                                             type: "secondary",
                                             render: (onClose)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__ConfigureColumnsModal_js_cdac33d6__.ConfigureColumnsModal, {
                                                     selectedColumns: selectedConfigureColumns,
@@ -737,9 +729,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                                         }) : null,
                                         data.length > 0 && shouldShowCsvExport ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
                                             type: "secondary",
-                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                                                symbol: "Download"
-                                            }),
+                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Download_js_486a4eac__["default"], {}),
                                             tooltip: "Download as CSV",
                                             onClick: ()=>(0, __WEBPACK_EXTERNAL_MODULE__utils_tables_js_ad146866__.handleDownloadCsv)(csvFilename, csvExportableColumns, rows)
                                         }) : null
@@ -825,8 +815,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                                                                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
                                                                     className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].noRows, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].loadingCell),
                                                                     colSpan: Math.max(visibleLeafColumns.length, 1),
-                                                                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
-                                                                        symbol: "Loading",
+                                                                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_Loading_js_ac2aabae__["default"], {
                                                                         size: "large",
                                                                         animate: true
                                                                     })

package/dist/presentation/CustomizableTable/CustomizableTable.module.js

@@ -15,7 +15,6 @@ const CustomizableTable_module_rslib_entry_ = {
     loadingCell: "loadingCell-iYJfPV",
     headerCell: "headerCell-HsDaea",
     headerSortable: "headerSortable-fnjI8P",
-    headerSortIcon: "headerSortIcon-bQ1b0E",
     headerRow: "headerRow-svcYtY",
     columnResizer: "columnResizer-geDiQ7",
     dragOverlayHeader: "dragOverlayHeader-iH8r0z"

package/dist/presentation/CustomizableTable/CustomizableTable_module.css

@@ -118,7 +118,7 @@
   overflow: hidden;
 }
 
-.headerSortIcon-bQ1b0E {
+.headerSortable-fnjI8P svg {
   flex-shrink: 0;
 }
 

package/dist/presentation/File.js

@@ -2,9 +2,9 @@ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/j
 import * as __WEBPACK_EXTERNAL_MODULE__worknice_utils_KNOWN_MIME_TYPES_b9649129__ from "@worknice/utils/KNOWN_MIME_TYPES";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_ButtonLink_js_1677d8df__ from "../controls/ButtonLink.js";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Link_js_2eb7bf0e__ from "../controls/Link.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_External_js_6244f0ef__ from "../icons/components/External.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__ from "../utils/useNextContext.js";
 import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__ from "./HStack.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
 const File = ({ url, type })=>{
     const { Image } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
     switch(type){
@@ -37,9 +37,7 @@ const File = ({ url, type })=>{
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_ButtonLink_js_1677d8df__["default"], {
                         href: url,
                         external: true,
-                        iconRight: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                            symbol: "External"
-                        }),
+                        iconRight: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_External_js_6244f0ef__["default"], {}),
                         children: "Open"
                     })
                 ]

package/dist/presentation/IconBadge.d.ts

@@ -1,8 +1,8 @@
-import type { ComponentProps } from "react";
-import Icon from "./Icon";
-type Props = Pick<ComponentProps<typeof Icon>, "symbol"> & {
+import type { ReactNode } from "react";
+type Props = {
+    icon: ReactNode;
     id?: string;
     color: "blue" | "green" | "grey" | "maroon" | "orange" | "purple" | "red" | "teal" | "yellow";
 };
-declare const IconBadge: ({ symbol, id, color }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const IconBadge: ({ icon, id, color }: Props) => import("react/jsx-runtime").JSX.Element;
 export default IconBadge;