@mailstep/design-system 0.8.52 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.52",
+  "version": "0.9.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -39,14 +39,20 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@lingui/core": "^5.0.0",
     "@lingui/react": "^5.0.0",
+    "@nivo/bar": "^0.79.1",
+    "@nivo/colors": "^0.73.0",
+    "@nivo/core": "^0.73.0",
+    "@nivo/legends": "^0.73.0",
+    "@nivo/pie": "^0.73.0",
     "@popperjs/core": "^2.11.8",
     "@storybook/addon-designs": "^11.1.3",
-    "@storybook/addon-docs": "10.4.2",
-    "@storybook/addon-links": "10.4.2",
-    "@storybook/react-webpack5": "10.4.2",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/addon-links": "10.4.6",
+    "@storybook/react-webpack5": "10.4.6",
     "@svgr/rollup": "^8.0.1",
     "@swc/core": "^1.15.30",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@tsdown/css": "^0.22.3",
     "@types/faker": "^4.1.11",
     "@types/lodash": "^4.17.13",
     "@types/luxon": "^3.4.2",
@@ -54,6 +60,7 @@
     "@types/react": "^19.2.2",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^19.2.2",
+    "@types/react-grid-layout": "^1",
     "@types/react-helmet": "^6.1.11",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
@@ -73,7 +80,7 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-perf": "^3.3.2",
-    "eslint-plugin-storybook": "10.4.2",
+    "eslint-plugin-storybook": "10.4.6",
     "faker": "^5.1.0",
     "husky": "^9.1.7",
     "immer": "^9.0.19",
@@ -84,11 +91,13 @@
     "prettier": "2.8.8",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-grid-layout": "^1.2.5",
     "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",
     "react-onclickoutside": "^6.13.0",
     "react-popper": "^2.3.0",
     "react-redux": "*",
+    "react-resizable": "^3.0.4",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-script": "^2.0.5",
@@ -96,7 +105,7 @@
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
     "reselect": "5.0.0-alpha.2",
-    "storybook": "10.4.2",
+    "storybook": "10.4.6",
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
@@ -118,6 +127,11 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@lingui/core": "^5.0.0",
     "@lingui/react": "^5.0.0",
+    "@nivo/bar": "^0.79.1",
+    "@nivo/colors": "^0.73.0",
+    "@nivo/core": "^0.73.0",
+    "@nivo/legends": "^0.73.0",
+    "@nivo/pie": "^0.73.0",
     "@popperjs/core": "^2.11.8",
     "@xstyled/styled-components": "^3.8.0",
     "@xstyled/system": "^3.8.0",
@@ -127,11 +141,13 @@
     "moment": "^2.30.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-grid-layout": "^1.2.5",
     "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",
     "react-onclickoutside": "^6.13.0",
     "react-popper": "^2.3.0",
     "react-redux": ">=4.0.5",
+    "react-resizable": "^3.0.4",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-select": "^5.10.0",

package/ui/Blocks/CommonGrid/components/ActionHead/ActionHead.js

@@ -33,7 +33,7 @@ const ActionsWrap = styled$1.div`
 const StyledText = styled$1.span`
   font-size: 14px;
   line-height: 18px;
-  color: blue2;
+  color: textPrimary;
   font-weight: 600;
 `;
 const ContentWrap = styled$1.div`

package/ui/Blocks/CommonGrid/hooks/useManageColumn.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 const useManageColumn = ({ columns, gridSelectors, gridActions, onClose }) => {
 	const { resetGrid, setColumnConfig, setColumnsOrder } = gridActions;
 	const { columnConfig, columnsOrder } = gridSelectors;
-	const initialColumnsOrder = useMemo(() => columns?.map((col) => col.name), [columns]);
+	const initialColumnsOrder = useMemo(() => columns?.map?.((col) => col.name), [columns]);
 	const columnsOrderValue = columnsOrder?.length ? columnsOrder : initialColumnsOrder;
 	const [columnsConfigOptions, setColumnsConfigOptions] = useState({ ...columnConfig ?? {} });
 	const [updatedColumnsOrder, setUpdatedColumnsOrder] = useState(columnsOrderValue);

package/ui/Blocks/Header/components/UserMenu/index.js

@@ -23,7 +23,7 @@ const UserMenu = ({ user, onLogout, hasUserMenu, userMenuOverride, withInitials,
 		ref: parentRef,
 		children: [/* @__PURE__ */ jsx(Avatar_default, {
 			user,
-			colorFront: withInitials ? th.color("white")({ theme }) : th.color("blue2")({ theme }),
+			colorFront: withInitials ? "#ffffff" : th.color("blue2")({ theme }),
 			colorBack: withInitials ? th.color("red1")({ theme }) : isDropdownOpen ? th.color("lightGray7")({ theme }) : th.color("neutral20")({ theme }),
 			hoverColorBack: withInitials ? "" : th.color("lightGray7")({ theme }),
 			size: 34,

package/ui/Blocks/Header/styles.js

@@ -14,7 +14,7 @@ const Container = styled$1.header`
   border-bottom: 1px solid ${th.color("lightGray7")};
   ${({ $variant }) => $variant === "dark" && css`
       background-color: ${th.color("blue3")};
-      color: white;
+      color: #fff;
     `}
 
   @media (min-width: 768px) {

package/ui/Elements/Avatar/Avatar.js

@@ -32,7 +32,7 @@ const Avatar = ({ user, src, size = 34, colorFront, colorBack, className, hoverC
 			/* @__PURE__ */ jsxs("div", { children: [withName && user?.username, children] }),
 			withChevron && /* @__PURE__ */ jsx(Chevron, { children: /* @__PURE__ */ jsx(Icon, {
 				icon: "goDown",
-				fill: "white",
+				fill: "#ffffff",
 				size: 10
 			}) })
 		]

package/ui/Elements/Avatar/styles.js

@@ -19,7 +19,7 @@ const StyledAvatarWrap = styled$1.div`
   overflow: hidden;
   font-size: 14px;
   white-space: nowrap;
-  color: ${(props) => props.$colorFront ? th.color(props.$colorFront) : th.color("blue2")};
+  color: ${(props) => props.$colorFront ? th.color(props.$colorFront) : th.color("typoPrimary")};
   background-color: ${(props) => props.$colorBack ? th.color(props.$colorBack) : ""};
   width: ${(props) => `${props.size}px`};
   height: ${(props) => `${props.size}px`};

package/ui/Elements/Button/styles.js

@@ -80,7 +80,7 @@ const StyledButton = styled$1.button`
 
   &[data-variant='success'] {
     background-color: successColor;
-    color: white;
+    color: #ffffff;
 
     @media (hover: hover) {
       :hover {

package/ui/Modules/Dashboard/Hoc/LoadingBoundary.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+export type Props = {
+    error?: boolean;
+    isLoading?: boolean;
+    children: JSX.Element;
+};
+declare const LoadingBoundary: ({ error, isLoading, children }: Props) => JSX.Element;
+export default LoadingBoundary;

package/ui/Modules/Dashboard/Hoc/LoadingBoundary.js

@@ -0,0 +1,11 @@
+import Spinner_default from "../../../Elements/Spinner/index.js";
+import ErrorMessage from "../errors/ErrorMessage.js";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/Hoc/LoadingBoundary.tsx
+const LoadingBoundary = ({ error, isLoading, children }) => {
+	if (isLoading) return /* @__PURE__ */ jsx(Spinner_default, {});
+	if (error) return /* @__PURE__ */ jsx(ErrorMessage, { children: "An error occured while loading." });
+	return children;
+};
+//#endregion
+export { LoadingBoundary as default };

package/ui/Modules/Dashboard/Hoc/index.d.ts

@@ -0,0 +1,3 @@
+export * from './withConfig';
+export * from './withFetch';
+export * from './withProps';

package/ui/Modules/Dashboard/Hoc/index.js

@@ -0,0 +1,4 @@
+import { withConfig } from "./withConfig.js";
+import { withFetch } from "./withFetch.js";
+import { withProps, withPropsWDefinition } from "./withProps.js";
+export { withConfig, withFetch, withProps, withPropsWDefinition };

package/ui/Modules/Dashboard/Hoc/storybook/withReduxProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { JSX } from 'react';
+export declare const withProvider: (initialState?: Record<string, any>) => (Story: React.ComponentType) => JSX.Element;
+export default withProvider;

package/ui/Modules/Dashboard/Hoc/storybook/withReduxProvider.js

@@ -0,0 +1,14 @@
+import dashboardReducer from "../../store/reducers/index.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Provider } from "react-redux";
+import { combineReducers, createStore } from "redux";
+//#region packages/ui/Modules/Dashboard/Hoc/storybook/withReduxProvider.tsx
+const withProvider = (initialState = {}) => (Story) => {
+	return /* @__PURE__ */ jsx(Provider, {
+		store: createStore(combineReducers({ dashboard: dashboardReducer }), initialState),
+		children: /* @__PURE__ */ jsx(Story, {})
+	});
+};
+//#endregion
+export { withProvider as default, withProvider };

package/ui/Modules/Dashboard/Hoc/withConfig.d.ts

@@ -0,0 +1,7 @@
+import { WidgetConfig, WidgetDefinition } from '../types';
+type ConfigHOC = (config?: WidgetConfig) => (widget: WidgetDefinition) => WidgetDefinition;
+/**
+ * Add to widget config component additional props
+ */
+export declare const withConfig: ConfigHOC;
+export {};

package/ui/Modules/Dashboard/Hoc/withConfig.js

@@ -0,0 +1,22 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/Hoc/withConfig.tsx
+/**
+* Add to widget config component additional props
+*/
+const withConfig = (config) => (widget) => {
+	const WithConfigComponent = (props) => {
+		if (!widget.configComponent) return null;
+		const Configcomponent = widget.configComponent;
+		return /* @__PURE__ */ jsx(Configcomponent, {
+			...props,
+			...config
+		});
+	};
+	return {
+		...widget,
+		configComponent: WithConfigComponent
+	};
+};
+//#endregion
+export { withConfig };

package/ui/Modules/Dashboard/Hoc/withFetch.d.ts

@@ -0,0 +1,26 @@
+import { WidgetConfig, WidgetDefinition } from '../types';
+type FetchHOC = (fetch: (config?: WidgetConfig) => Promise<any>) => (widget: WidgetDefinition) => WidgetDefinition;
+/**
+ * Replaces the origin component with an enhanced one
+ *  ~ having data, loading state, fetch errors & optionally other custom props.
+ *
+ * Lifecycle:
+ *  ~ Data is fetched on mount and then on every widget config change
+ *
+ * Note:
+ * Passed fetch function should return a promise
+ *  ~ The data payload can either be:
+ *     1) Raw widget data - will result in a passed prop - data={data}
+ *        Example:
+ *          [
+ *            { id: 1, label: 'Delivered', value: 206 },
+ *            { id: 2, label: 'Returned', value: 64 },
+ *          ]
+ *
+ *     2) Object with explicitely named data property
+ *        This method allows you to pass other custom fetched props
+ *         Example:
+ *          { data: [YOUR_DATA], fetchedProp1: 'whatever', fetchedProp2: 23123 }
+ */
+export declare const withFetch: FetchHOC;
+export {};

package/ui/Modules/Dashboard/Hoc/withFetch.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/Hoc/withFetch.tsx
+/**
+* Replaces the origin component with an enhanced one
+*  ~ having data, loading state, fetch errors & optionally other custom props.
+*
+* Lifecycle:
+*  ~ Data is fetched on mount and then on every widget config change
+*
+* Note:
+* Passed fetch function should return a promise
+*  ~ The data payload can either be:
+*     1) Raw widget data - will result in a passed prop - data={data}
+*        Example:
+*          [
+*            { id: 1, label: 'Delivered', value: 206 },
+*            { id: 2, label: 'Returned', value: 64 },
+*          ]
+*
+*     2) Object with explicitely named data property
+*        This method allows you to pass other custom fetched props
+*         Example:
+*          { data: [YOUR_DATA], fetchedProp1: 'whatever', fetchedProp2: 23123 }
+*/
+const withFetch = (fetch) => (widget) => {
+	const WithDataComponent = (props) => {
+		const [data, setData] = React.useState([]);
+		const [isLoading, setIsLoading] = React.useState(false);
+		const [error, setError] = React.useState(false);
+		React.useEffect(() => {
+			setIsLoading(true);
+			fetch(props.config).then(setData).then(() => setIsLoading(false)).catch(setError);
+		}, [JSON.stringify(props.config)]);
+		const dataProps = React.useMemo(() => data?.data ? { ...data } : { data }, [data]);
+		const Component = widget.component;
+		return /* @__PURE__ */ jsx(Component, {
+			...props,
+			...dataProps,
+			isLoading,
+			error
+		});
+	};
+	return {
+		...widget,
+		component: WithDataComponent
+	};
+};
+//#endregion
+export { withFetch };

package/ui/Modules/Dashboard/Hoc/withProps.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { WidgetDefinition } from '../types';
+export declare const withProps: (extraProps: any) => <P extends object>(Component: React.ComponentType<P>) => React.ComponentType<P>;
+export declare const withPropsWDefinition: (extraProps: any) => (widget: WidgetDefinition) => WidgetDefinition;

package/ui/Modules/Dashboard/Hoc/withProps.js

@@ -0,0 +1,25 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/Hoc/withProps.tsx
+const withProps = (extraProps) => (Component) => function ComponentWithProps(props) {
+	return /* @__PURE__ */ jsx(Component, {
+		...props,
+		...extraProps
+	});
+};
+const withPropsWDefinition = (extraProps) => (widget) => {
+	const Component = widget.component;
+	function ComponentWithProps(props) {
+		const additional = typeof extraProps === "function" ? extraProps(props) : extraProps;
+		return /* @__PURE__ */ jsx(Component, {
+			...props,
+			...additional
+		});
+	}
+	return {
+		...widget,
+		component: ComponentWithProps
+	};
+};
+//#endregion
+export { withProps, withPropsWDefinition };

package/ui/Modules/Dashboard/assets/move.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.006 512.006" style="enable-background:new 0 0 512.006 512.006;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M508.247,246.756l-72.457-72.465c-5.009-5.009-13.107-5.009-18.116,0c-5.009,5.009-5.009,13.107,0,18.116l50.594,50.594
+			H268.811V43.748l50.594,50.594c5.009,5.009,13.107,5.009,18.116,0c5.009-5.009,5.009-13.107,0-18.116L265.056,3.761
+			c-5.001-5.009-13.107-5.009-18.116,0l-72.457,72.457c-5.009,5.009-5.009,13.107,0,18.116c5.001,5.009,13.107,5.009,18.116,0
+			l50.594-50.594v199.27H43.744l50.594-50.594c5.009-5.009,5.009-13.107,0-18.116c-5.009-5.009-13.107-5.009-18.116,0L3.757,246.756
+			c-5.009,5.001-5.009,13.107,0,18.116l72.465,72.457c5.009,5.009,13.107,5.009,18.116,0c5.009-5.001,5.009-13.107,0-18.116
+			l-50.594-50.594h199.458v199.646l-50.594-50.594c-5.009-5.001-13.107-5.001-18.116,0c-5.009,5.009-5.009,13.107,0,18.116
+			l72.457,72.465c5,5,13.107,5,18.116,0l72.465-72.457c5.009-5.009,5.009-13.107,0-18.116c-5.009-5-13.107-5-18.116,0
+			l-50.594,50.594V268.627h199.458l-50.594,50.594c-5.009,5.009-5.009,13.107,0,18.116s13.107,5.009,18.116,0l72.465-72.457
+			C513.257,259.872,513.257,251.765,508.247,246.756z"/>
+	</g>
+</g>
+</svg>

package/ui/Modules/Dashboard/components/Config/MultiConfig.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import { ConfigProps, Source } from '../../types';
+export type MultiConfigProps = ConfigProps & {
+    sources?: Source[];
+};
+export declare const MultiConfig: ({ onChange, config, sources }: MultiConfigProps) => JSX.Element;

package/ui/Modules/Dashboard/components/Config/MultiConfig.js

@@ -0,0 +1,51 @@
+import { useText } from "../Text/Text.js";
+import CommonConfig from "./components/CommonConfig.js";
+import InputConfig from "./components/InputConfig.js";
+import { useCallback, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { omit } from "lodash";
+//#region packages/ui/Modules/Dashboard/components/Config/MultiConfig.tsx
+const defaultSources = [];
+const MultiConfig = ({ onChange, config, sources = defaultSources }) => {
+	const labelSelectSource = useText("widgets.selectSource");
+	const filters = useMemo(() => sources.find((source) => source.value === config?.source), [sources, config])?.filters || [];
+	const hasFilters = filters.length !== 0;
+	const onChangeInput = useCallback((updatedConfig) => onChange(updatedConfig), [onChange]);
+	const onSourceInput = useCallback((processed) => {
+		const filterNames = filters.map((filter) => filter.name);
+		const filterLabels = filterNames.map((name) => `${name}Label`);
+		return onChange(omit(processed, [
+			...filterNames,
+			...filterLabels,
+			"sort"
+		]));
+	}, [filters, onChange]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(CommonConfig, {
+			onChange: onChangeInput,
+			config
+		}),
+		/* @__PURE__ */ jsx(InputConfig, {
+			label: labelSelectSource,
+			name: "source",
+			onChange: onSourceInput,
+			config,
+			options: sources
+		}),
+		hasFilters && filters.map((filter) => {
+			const { name, label, placeholder, input, options, isMulti } = filter;
+			return /* @__PURE__ */ jsx(InputConfig, {
+				name,
+				label,
+				placeholder,
+				input,
+				options,
+				isMulti,
+				onChange,
+				config
+			}, name);
+		})
+	] });
+};
+//#endregion
+export { MultiConfig };

package/ui/Modules/Dashboard/components/Config/components/CommonConfig.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+import { ConfigProps } from '../../../types';
+declare const CommonConfig: ({ onChange, config }: ConfigProps) => JSX.Element;
+export default CommonConfig;

package/ui/Modules/Dashboard/components/Config/components/CommonConfig.js

@@ -0,0 +1,20 @@
+import styles_default from "../../../styles.js";
+import Text from "../../Text/Text.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Config/components/CommonConfig.tsx
+const CommonConfig = ({ onChange, config }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(styles_default.ConfigRow, { children: [/* @__PURE__ */ jsxs(styles_default.ConfigLabel, { children: [
+	/* @__PURE__ */ jsx(Text, { code: "widgets.name" }),
+	":",
+	" "
+] }), /* @__PURE__ */ jsx(styles_default.ConfigInput, { children: /* @__PURE__ */ jsx(styles_default.Input, {
+	name: "name",
+	onChange: (e) => onChange({
+		...config,
+		[e.target.name]: e.target.value
+	}),
+	defaultValue: config?.name || "",
+	type: "text"
+}) })] }) });
+//#endregion
+export { CommonConfig as default };

package/ui/Modules/Dashboard/components/Config/components/InputConfig.d.ts

@@ -0,0 +1,5 @@
+import type { JSX } from 'react';
+import { ConfigProps, LayoutWidgetFilter } from '../../../types';
+type InputConfigProps = ConfigProps & LayoutWidgetFilter;
+declare const InputConfig: ({ onChange, config, label, name, input, isMulti, options, placeholder }: InputConfigProps) => JSX.Element;
+export default InputConfig;

package/ui/Modules/Dashboard/components/Config/components/InputConfig.js

@@ -0,0 +1,104 @@
+import Button_default from "../../../../../Elements/Button/index.js";
+import styles_default from "../../../styles.js";
+import { useText } from "../../Text/Text.js";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import omit from "lodash/omit";
+//#region packages/ui/Modules/Dashboard/components/Config/components/InputConfig.tsx
+const getSelectValue = (currentValue, targetValue, isMulti, isChecked = false) => {
+	if (isMulti) {
+		const asserted = currentValue ?? [];
+		if (isChecked) return asserted.concat(targetValue);
+		return asserted.filter((val) => val !== targetValue);
+	}
+	return targetValue;
+};
+const createConfigField = (fieldName, value, label) => ({
+	[fieldName]: value,
+	...label && { [`${fieldName}Label`]: label }
+});
+const InputConfig = ({ onChange, config, label, name, input, isMulti = false, options = [], placeholder }) => {
+	const none = useText("widgets.none");
+	const clear = useText("widgets.clear");
+	const selectAll = useText("widgets.selectAll");
+	const value = config?.[name];
+	const handleChange = useCallback((e) => {
+		const selectOption = options.find((option) => option.value === e.target.value);
+		const selectValue = getSelectValue(value, selectOption?.value || "", isMulti, e.target.checked);
+		const configField = createConfigField(name, input ? e.target.value : selectValue, input ? void 0 : selectOption?.label);
+		onChange({
+			...config,
+			...configField
+		});
+	}, [
+		name,
+		options,
+		onChange,
+		value,
+		isMulti,
+		config,
+		input
+	]);
+	const handleSelectAll = useCallback(() => {
+		const configFields = createConfigField(name, options.map((opt) => opt.value));
+		onChange({
+			...config,
+			...configFields
+		});
+	}, [
+		name,
+		options,
+		config,
+		onChange
+	]);
+	const handleRemoveAll = useCallback(() => {
+		onChange({ ...omit(config, name) });
+	}, [
+		name,
+		config,
+		onChange
+	]);
+	return /* @__PURE__ */ jsxs(styles_default.ConfigRow, {
+		isBlock: isMulti,
+		children: [/* @__PURE__ */ jsxs(styles_default.ConfigLabel, { children: [label, ": "] }), /* @__PURE__ */ jsx(styles_default.ConfigInput, { children: input ? /* @__PURE__ */ jsx(styles_default.Input, {
+			type: input,
+			defaultValue: value || "",
+			onChange: handleChange
+		}) : isMulti ? /* @__PURE__ */ jsxs(styles_default.CheckboxContent, { children: [/* @__PURE__ */ jsxs(styles_default.CheckboxControls, { children: [
+			/* @__PURE__ */ jsx(Button_default, {
+				onClick: handleSelectAll,
+				children: selectAll
+			}),
+			" ",
+			/* @__PURE__ */ jsx(Button_default, {
+				appearance: "secondary",
+				onClick: handleRemoveAll,
+				children: clear
+			})
+		] }), options.map((option) => {
+			const isChecked = (value || []).includes(option.value);
+			return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("input", {
+				id: option.value,
+				type: "checkbox",
+				value: option.value,
+				onChange: handleChange,
+				checked: isChecked
+			}), /* @__PURE__ */ jsx("label", {
+				htmlFor: option.value,
+				children: option.label
+			})] }, option.value);
+		})] }) : /* @__PURE__ */ jsxs(styles_default.Select, {
+			onChange: handleChange,
+			value: value || "",
+			children: [/* @__PURE__ */ jsx("option", {
+				value: "",
+				children: placeholder || none
+			}), options.map((option) => /* @__PURE__ */ jsx("option", {
+				value: option.value,
+				children: option.label
+			}, option.value))]
+		}) })]
+	});
+};
+//#endregion
+export { InputConfig as default };

package/ui/Modules/Dashboard/components/Config/types.d.ts

@@ -0,0 +1 @@
+export type { MultiConfigProps } from './MultiConfig';

package/ui/Modules/Dashboard/components/Config/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Modules/Dashboard/components/Dashboard/Dashboard.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+import type { DashboardProps } from '../../types';
+import './dashboard.css';
+type Props = {
+    title?: DashboardProps['title'];
+    widgetDefinitions: DashboardProps['widgetDefinitions'];
+};
+declare const DashboardComponent: ({ title, widgetDefinitions }: Props) => JSX.Element;
+export default DashboardComponent;

package/ui/Modules/Dashboard/components/Dashboard/Dashboard.js

@@ -0,0 +1,16 @@
+import styles_default from "../../styles.js";
+import Header_default from "../Header/index.js";
+import Layout_default from "../Layout/index.js";
+import DashboardBody from "./components/Body.js";
+import LayoutErrorBoundary from "./components/LayoutErrorBoundary.js";
+/* empty css           */
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Dashboard/Dashboard.tsx
+const emptyWidgetDefinitions = [];
+const DashboardComponent = ({ title, widgetDefinitions = emptyWidgetDefinitions }) => /* @__PURE__ */ jsxs(styles_default.Wrapper, { children: [/* @__PURE__ */ jsx(Header_default, {
+	title,
+	widgetDefinitions
+}), /* @__PURE__ */ jsx(DashboardBody, { children: /* @__PURE__ */ jsx(LayoutErrorBoundary, { children: /* @__PURE__ */ jsx(Layout_default, { widgetDefinitions }) }) })] });
+//#endregion
+export { DashboardComponent as default };

package/ui/Modules/Dashboard/components/Dashboard/DashboardContainer.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+import type { DashboardProps } from '../../types';
+declare const DashboardContainer: ({ initialWidgets, onChange, lang, components, ...rest }: DashboardProps) => JSX.Element;
+export default DashboardContainer;