udp-react-enterprise-component-library 25.16.2-beta.1 → 25.16.2-beta.2

package/dist/widgets-BstCOckr.js

@@ -0,0 +1,281 @@
+import { t as __export } from "./chunk-Bp6m_JJh.js";
+import { t as Field } from "./Field-Cpjv208h.js";
+import { t as DateTimeField } from "./DateTimeField-U74kkJm-.js";
+import { t as FluentTextFieldAutoComplete } from "./FluentTextFieldAutoComplete-DiwMTnol.js";
+import { n as DateField, t as TimeField } from "./TimeField-CcV1O5Gd.js";
+import React from "react";
+import { InputAdornment, MenuItem, TextField, makeStyles } from "@material-ui/core";
+import pluralize from "pluralize";
+
+//#region src/UI/property/widgets/TextPropertyWidget.jsx
+var TextPropertyWidget_exports = /* @__PURE__ */ __export({
+	BaseTextPropertyWidget: () => BaseTextPropertyWidget,
+	default: () => TextPropertyWidget_default
+});
+const useStyles = makeStyles((theme) => ({
+	input: {
+		height: 34,
+		padding: 0
+	},
+	formTextInput: { fontSize: 14 },
+	labelRoot: { fontSize: 14 }
+}));
+/**
+* Base component for all property widgets that are based on TextField
+*/
+const BaseTextPropertyWidget = (props) => {
+	const { propertyType, property, initialData,...extraProps } = props;
+	const { key, label, required } = property;
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement(Field, {
+		component: TextField,
+		id: `${propertyType}:${key}`,
+		name: `${propertyType}:${key}`,
+		label,
+		variant: "outlined",
+		margin: "dense",
+		color: "primary",
+		size: "small",
+		required: !!required,
+		fullWidth: true,
+		InputProps: { classes: {
+			root: classes.input,
+			input: classes.formTextInput
+		} },
+		InputLabelProps: { classes: { root: classes.labelRoot } },
+		...extraProps
+	});
+};
+/**
+* `text` property widget
+*
+* Outputs a basic TextField
+*/
+const TextPropertyWidget = (props) => {
+	return /* @__PURE__ */ React.createElement(BaseTextPropertyWidget, props);
+};
+var TextPropertyWidget_default = TextPropertyWidget;
+
+//#endregion
+//#region src/UI/property/widgets/IntegerPropertyWidget.jsx
+var IntegerPropertyWidget_exports = /* @__PURE__ */ __export({ default: () => IntegerPropertyWidget_default });
+const parse = (value) => value && parseInt(value);
+/**
+* `integer` property widget
+*
+* Outputs a type=number TextField with an optional unit
+*/
+const IntegerPropertyWidget = (props) => {
+	const { property } = props;
+	const { unit } = property;
+	let endAdornment;
+	if (unit) endAdornment = /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, pluralize(unit));
+	return /* @__PURE__ */ React.createElement(BaseTextPropertyWidget, {
+		type: "number",
+		step: 1,
+		InputProps: { endAdornment },
+		parse,
+		...props
+	});
+};
+var IntegerPropertyWidget_default = IntegerPropertyWidget;
+
+//#endregion
+//#region src/UI/property/widgets/NumericPropertyWidget.jsx
+var NumericPropertyWidget_exports = /* @__PURE__ */ __export({ default: () => NumericPropertyWidget_default });
+/**
+* `numeric` property widget
+*
+* Outputs numeric TextField suitable for non-integer numbers like numeric identifier numbers
+*/
+const NumericPropertyWidget = (props) => {
+	return /* @__PURE__ */ React.createElement(BaseTextPropertyWidget, {
+		type: "text",
+		step: 1,
+		inputMode: "numeric",
+		pattern: "[0-9]*",
+		...props
+	});
+};
+var NumericPropertyWidget_default = NumericPropertyWidget;
+
+//#endregion
+//#region src/UI/property/widgets/DatePropertyWidget.jsx
+var DatePropertyWidget_exports = /* @__PURE__ */ __export({ default: () => DatePropertyWidget_default });
+/**
+* `date` property widget
+*
+* Outputs a DatePicker field
+*/
+const DatePropertyWidget = (props) => {
+	return /* @__PURE__ */ React.createElement(BaseTextPropertyWidget, {
+		component: DateField,
+		inputVariant: "outlined",
+		...props
+	});
+};
+var DatePropertyWidget_default = DatePropertyWidget;
+
+//#endregion
+//#region src/UI/property/widgets/MultilineTextPropertyWidget.jsx
+var MultilineTextPropertyWidget_exports = /* @__PURE__ */ __export({ default: () => MultilineTextPropertyWidget_default });
+/**
+* `multiline-text` property widget
+*
+* Outputs a multiline TextField
+*/
+const MultilineTextPropertyWidget = (props) => {
+	return /* @__PURE__ */ React.createElement(BaseTextPropertyWidget, {
+		multiline: true,
+		rows: 2,
+		rowsMax: 10,
+		...props
+	});
+};
+var MultilineTextPropertyWidget_default = MultilineTextPropertyWidget;
+
+//#endregion
+//#region src/UI/property/widgets/SelectPropertyWidget.jsx
+var SelectPropertyWidget_exports = /* @__PURE__ */ __export({ default: () => SelectPropertyWidget_default });
+/**
+* `select` property widget
+*
+* Outputs a select TextField
+*/
+const SelectPropertyWidget = (props) => {
+	const { property } = props;
+	const { options } = property;
+	return /* @__PURE__ */ React.createElement(BaseTextPropertyWidget, {
+		select: true,
+		...props
+	}, options.map((option) => /* @__PURE__ */ React.createElement(MenuItem, {
+		key: option.value,
+		value: option.value
+	}, option.label)));
+};
+var SelectPropertyWidget_default = SelectPropertyWidget;
+
+//#endregion
+//#region src/UI/property/widgets/FloatPropertyWidget.jsx
+var FloatPropertyWidget_exports = /* @__PURE__ */ __export({ default: () => FloatPropertyWidget_default });
+/**
+* `float` property widget
+*
+* Outputs a type=number TextField with an optional unit and an optional step
+*/
+const FloatPropertyWidget = (props) => {
+	const { property } = props;
+	const { unit, step } = property;
+	let endAdornment;
+	if (unit) endAdornment = /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, pluralize(unit));
+	return /* @__PURE__ */ React.createElement(BaseTextPropertyWidget, {
+		type: "number",
+		inputProps: { step: step ? step : 1 },
+		InputProps: { endAdornment },
+		...props
+	});
+};
+var FloatPropertyWidget_default = FloatPropertyWidget;
+
+//#endregion
+//#region src/UI/property/widgets/TimePropertyWidget.jsx
+var TimePropertyWidget_exports = /* @__PURE__ */ __export({ default: () => TimePropertyWidget_default });
+/**
+* `time` property widget
+*
+* Outputs a TimePicker field
+*/
+const TimePropertyWidget = (props) => {
+	return /* @__PURE__ */ React.createElement(BaseTextPropertyWidget, {
+		component: TimeField,
+		inputVariant: "outlined",
+		...props
+	});
+};
+var TimePropertyWidget_default = TimePropertyWidget;
+
+//#endregion
+//#region src/UI/property/widgets/BooleanPropertyWidget.jsx
+var BooleanPropertyWidget_exports = /* @__PURE__ */ __export({ default: () => BooleanPropertyWidget_default });
+/**
+* `boolean` property widget
+*
+* Outputs a select TextField with true/false as options
+*/
+const BooleanPropertyWidget = (props) => {
+	const { initialData } = props;
+	return /* @__PURE__ */ React.createElement(BaseTextPropertyWidget, {
+		initialValue: initialData,
+		select: true,
+		...props
+	}, /* @__PURE__ */ React.createElement(MenuItem, { value: "" }, "None"), /* @__PURE__ */ React.createElement(MenuItem, { value: true }, "True"), /* @__PURE__ */ React.createElement(MenuItem, { value: false }, "False"));
+};
+var BooleanPropertyWidget_default = BooleanPropertyWidget;
+
+//#endregion
+//#region src/UI/property/widgets/DateTimePropertyWidget.jsx
+var DateTimePropertyWidget_exports = /* @__PURE__ */ __export({ default: () => DateTimePropertyWidget_default });
+/**
+* `date` property widget
+*
+* Outputs a DateTimePicker field
+*/
+const DateTimePropertyWidget = (props) => {
+	return /* @__PURE__ */ React.createElement(BaseTextPropertyWidget, {
+		component: DateTimeField,
+		inputVariant: "outlined",
+		...props
+	});
+};
+var DateTimePropertyWidget_default = DateTimePropertyWidget;
+
+//#endregion
+//#region src/UI/property/widgets/AutoCompletePropertyWidget.jsx
+var AutoCompletePropertyWidget_exports = /* @__PURE__ */ __export({ default: () => AutoCompletePropertyWidget_default });
+/**
+* `autocomplete` property widget
+*
+* Outputs a Autocomplete field
+*/
+const AutoCompletePropertyWidget = (props) => {
+	const { property, propertyType, initialData,...extraProps } = props;
+	const { options, valueName, key, label, required } = property;
+	return /* @__PURE__ */ React.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextFieldAutoComplete,
+		id: `${propertyType}:${key}`,
+		name: `${propertyType}:${key}`,
+		label,
+		variant: "outlined",
+		margin: "dense",
+		color: "primary",
+		size: "small",
+		required: !!required,
+		fullWidth: true,
+		options,
+		optionKey: valueName,
+		...extraProps
+	}));
+};
+var AutoCompletePropertyWidget_default = AutoCompletePropertyWidget;
+
+//#endregion
+//#region src/UI/property/widgets/index.js
+/** @type {Record<string, React.ComponentType<any>>} */
+const widgets = {
+	TextWidget: TextPropertyWidget_default,
+	IntegerWidget: IntegerPropertyWidget_default,
+	NumericWidget: NumericPropertyWidget_default,
+	DateWidget: DatePropertyWidget_default,
+	MultilineWidget: MultilineTextPropertyWidget_default,
+	SelectWidget: SelectPropertyWidget_default,
+	FloatWidget: FloatPropertyWidget_default,
+	TimeWidget: TimePropertyWidget_default,
+	BooleanWidget: BooleanPropertyWidget_default,
+	DateTimeWidget: DateTimePropertyWidget_default,
+	AutoCompleteWidget: AutoCompletePropertyWidget_default
+};
+var widgets_default = widgets;
+
+//#endregion
+export { TimePropertyWidget_exports as a, MultilineTextPropertyWidget_exports as c, IntegerPropertyWidget_exports as d, TextPropertyWidget_exports as f, BooleanPropertyWidget_exports as i, DatePropertyWidget_exports as l, AutoCompletePropertyWidget_exports as n, FloatPropertyWidget_exports as o, DateTimePropertyWidget_exports as r, SelectPropertyWidget_exports as s, widgets_default as t, NumericPropertyWidget_exports as u };
+//# sourceMappingURL=widgets-BstCOckr.js.map

package/dist/widgets-BstCOckr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widgets-BstCOckr.js","names":["TextPropertyWidget","IntegerPropertyWidget","NumericPropertyWidget","DatePropertyWidget","MultilineTextPropertyWidget","SelectPropertyWidget","FloatPropertyWidget","TimePropertyWidget","BooleanPropertyWidget","DateTimePropertyWidget","AutoCompletePropertyWidget"],"sources":["../src/UI/property/widgets/TextPropertyWidget.jsx","../src/UI/property/widgets/IntegerPropertyWidget.jsx","../src/UI/property/widgets/NumericPropertyWidget.jsx","../src/UI/property/widgets/DatePropertyWidget.jsx","../src/UI/property/widgets/MultilineTextPropertyWidget.jsx","../src/UI/property/widgets/SelectPropertyWidget.jsx","../src/UI/property/widgets/FloatPropertyWidget.jsx","../src/UI/property/widgets/TimePropertyWidget.jsx","../src/UI/property/widgets/BooleanPropertyWidget.jsx","../src/UI/property/widgets/DateTimePropertyWidget.jsx","../src/UI/property/widgets/AutoCompletePropertyWidget.jsx","../src/UI/property/widgets/index.js"],"sourcesContent":["import React from 'react';\nimport { Field } from '../../../utilities/form/Field.tsx';\nimport { TextField, makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  input: {\n    height: 34,\n    padding: 0\n  },\n  formTextInput: {\n    fontSize: 14\n  },\n  labelRoot: {\n    fontSize: 14\n  }\n}));\n\n/**\n * Base component for all property widgets that are based on TextField\n */\nexport const BaseTextPropertyWidget = (props) => {\n  const { propertyType, property, initialData, ...extraProps } = props;\n  const { key, label, required } = property;\n  const classes = useStyles();\n\n  return (\n    <Field\n      component={TextField}\n      id={`${propertyType}:${key}`}\n      name={`${propertyType}:${key}`}\n      label={label}\n      variant='outlined'\n      margin='dense'\n      color='primary'\n      size='small'\n      required={!!required}\n      fullWidth\n      InputProps={{\n        classes: {\n          root: classes.input,\n          input: classes.formTextInput\n        }\n      }}\n      InputLabelProps={{\n        classes: {\n          root: classes.labelRoot\n        }\n      }}\n      {...extraProps}\n    />\n  );\n};\n\n/**\n * `text` property widget\n *\n * Outputs a basic TextField\n */\nconst TextPropertyWidget = (props) => {\n  return <BaseTextPropertyWidget {...props} />;\n};\n\nexport default TextPropertyWidget;\n","import pluralize from 'pluralize';\nimport React from 'react';\nimport { BaseTextPropertyWidget } from './TextPropertyWidget';\nimport { InputAdornment } from '@material-ui/core';\n\nconst parse = value => value && parseInt(value);\n\n/**\n * `integer` property widget\n *\n * Outputs a type=number TextField with an optional unit\n */\nconst IntegerPropertyWidget = props => {\n  const { property } = props;\n  const { unit } = property;\n\n  let endAdornment;\n  if (unit) {\n    endAdornment = (\n      <InputAdornment position=\"end\">{pluralize(unit)}</InputAdornment>\n    );\n  }\n\n  return (\n    <BaseTextPropertyWidget\n      type=\"number\"\n      step={1}\n      InputProps={{ endAdornment }}\n      parse={parse}\n      {...props}\n    />\n  );\n};\n\nexport default IntegerPropertyWidget;\n","import React from 'react';\nimport { BaseTextPropertyWidget } from './TextPropertyWidget';\n\n/**\n * `numeric` property widget\n *\n * Outputs numeric TextField suitable for non-integer numbers like numeric identifier numbers\n */\nconst NumericPropertyWidget = props => {\n  return (\n    <BaseTextPropertyWidget\n      type=\"text\"\n      step={1}\n      inputMode=\"numeric\"\n      pattern=\"[0-9]*\"\n      {...props}\n    />\n  );\n};\n\nexport default NumericPropertyWidget;\n","import React from 'react';\nimport { BaseTextPropertyWidget } from './TextPropertyWidget';\nimport { DateField } from '../../inputs/datetimes/DateField';\n\n/**\n * `date` property widget\n *\n * Outputs a DatePicker field\n */\nconst DatePropertyWidget = (props) => {\n  return (\n    <BaseTextPropertyWidget\n      component={DateField}\n      inputVariant='outlined'\n      {...props}\n    />\n  );\n};\n\nexport default DatePropertyWidget;\n","import React from 'react';\nimport { BaseTextPropertyWidget } from './TextPropertyWidget';\n\n/**\n * `multiline-text` property widget\n *\n * Outputs a multiline TextField\n */\nconst MultilineTextPropertyWidget = props => {\n  return <BaseTextPropertyWidget multiline rows={2} rowsMax={10} {...props} />;\n};\n\nexport default MultilineTextPropertyWidget;\n","import React from 'react';\nimport { MenuItem } from '@material-ui/core';\nimport { BaseTextPropertyWidget } from './TextPropertyWidget';\n\n/**\n * `select` property widget\n *\n * Outputs a select TextField\n */\nconst SelectPropertyWidget = props => {\n  const { property } = props;\n  const { options } = property;\n\n  return (\n    <BaseTextPropertyWidget select {...props}>\n      {options.map(option => (\n        <MenuItem key={option.value} value={option.value}>\n          {option.label}\n        </MenuItem>\n      ))}\n    </BaseTextPropertyWidget>\n  );\n};\n\nexport default SelectPropertyWidget;\n","import pluralize from 'pluralize';\nimport React from 'react';\nimport { BaseTextPropertyWidget } from './TextPropertyWidget';\nimport { InputAdornment } from '@material-ui/core';\n\n/**\n * `float` property widget\n *\n * Outputs a type=number TextField with an optional unit and an optional step\n */\nconst FloatPropertyWidget = props => {\n  const { property } = props;\n  const { unit, step } = property;\n\n  let endAdornment;\n  if (unit) {\n    endAdornment = (\n      <InputAdornment position=\"end\">{pluralize(unit)}</InputAdornment>\n    );\n  }\n\n  return (\n    <BaseTextPropertyWidget\n      type=\"number\"\n      inputProps={{\n        step: step ? step : 1,\n      }}\n      InputProps={{ endAdornment }}\n      {...props}\n    />\n  );\n};\n\nexport default FloatPropertyWidget;\n","import React from 'react';\nimport { BaseTextPropertyWidget } from './TextPropertyWidget';\nimport { TimeField } from '../../inputs/datetimes/TimeField';\n\n/**\n * `time` property widget\n *\n * Outputs a TimePicker field\n */\nconst TimePropertyWidget = (props) => {\n  return (\n    <BaseTextPropertyWidget\n      component={TimeField}\n      inputVariant='outlined'\n      {...props}\n    />\n  );\n};\n\nexport default TimePropertyWidget;\n","import React from 'react';\nimport { MenuItem } from '@material-ui/core';\nimport { BaseTextPropertyWidget } from './TextPropertyWidget';\n\n/**\n * `boolean` property widget\n *\n * Outputs a select TextField with true/false as options\n */\nconst BooleanPropertyWidget = props => {\n  const { initialData } = props;\n\n  return (\n    <BaseTextPropertyWidget\n      initialValue={initialData}\n      select\n      // InputProps={{ endAdornment }}\n      {...props}\n    >\n      <MenuItem value={''}>None</MenuItem>\n      <MenuItem value={true}>True</MenuItem>\n      <MenuItem value={false}>False</MenuItem>\n    </BaseTextPropertyWidget>\n  );\n};\n\nexport default BooleanPropertyWidget;\n","import React from 'react';\nimport { BaseTextPropertyWidget } from './TextPropertyWidget';\nimport { DateTimeField } from '../../inputs/datetimes/DateTimeField';\n\n/**\n * `date` property widget\n *\n * Outputs a DateTimePicker field\n */\nconst DateTimePropertyWidget = (props) => {\n  return (\n    <BaseTextPropertyWidget\n      component={DateTimeField}\n      inputVariant='outlined'\n      {...props}\n    />\n  );\n};\n\nexport default DateTimePropertyWidget;\n","import React from 'react';\nimport { Field } from '../../../utilities/form/Field.tsx';\nimport { FluentTextFieldAutoComplete } from '../../inputs/textField/FluentTextFieldAutoComplete';\n\n/**\n * `autocomplete` property widget\n *\n * Outputs a Autocomplete field\n */\nconst AutoCompletePropertyWidget = (props) => {\n  const { property, propertyType, initialData, ...extraProps } = props;\n  const { options, valueName, key, label, required } = property;\n\n  return (\n    <div style={{ width: '100%' }}>\n      <Field\n        component={FluentTextFieldAutoComplete}\n        id={`${propertyType}:${key}`}\n        name={`${propertyType}:${key}`}\n        label={label}\n        variant='outlined'\n        margin='dense'\n        color='primary'\n        size='small'\n        required={!!required}\n        fullWidth\n        options={options}\n        optionKey={valueName}\n        {...extraProps}\n      />\n    </div>\n  );\n};\n\nexport default AutoCompletePropertyWidget;\n","import TextPropertyWidget from './TextPropertyWidget';\nimport IntegerPropertyWidget from './IntegerPropertyWidget';\nimport NumericPropertyWidget from './NumericPropertyWidget';\nimport DatePropertyWidget from './DatePropertyWidget';\nimport MultilineTextPropertyWidget from './MultilineTextPropertyWidget';\nimport SelectPropertyWidget from './SelectPropertyWidget';\nimport FloatPropertyWidget from './FloatPropertyWidget';\nimport TimePropertyWidget from './TimePropertyWidget';\nimport BooleanPropertyWidget from './BooleanPropertyWidget';\nimport DateTimePropertyWidget from './DateTimePropertyWidget';\nimport AutoCompletePropertyWidget from './AutoCompletePropertyWidget';\n\n// TODO: potentially implement an icon widget\n/** @type {Record<string, React.ComponentType<any>>} */\nconst widgets = {\n  TextWidget: TextPropertyWidget,\n  IntegerWidget: IntegerPropertyWidget,\n  NumericWidget: NumericPropertyWidget,\n  DateWidget: DatePropertyWidget,\n  MultilineWidget: MultilineTextPropertyWidget,\n  SelectWidget: SelectPropertyWidget,\n  FloatWidget: FloatPropertyWidget,\n  TimeWidget: TimePropertyWidget,\n  BooleanWidget: BooleanPropertyWidget,\n  DateTimeWidget: DateTimePropertyWidget,\n  AutoCompleteWidget: AutoCompletePropertyWidget,\n};\n\nexport default widgets;\n"],"mappings":"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"}

package/dist/widgets-sDcSDxcf.js

@@ -0,0 +1,246 @@
+import { r as getEllipseColor } from "./colorConverter-82j_Nyao.js";
+import { n as FUICardHeaderMenu, r as FUICard_default } from "./FUICard-DiRXnOSN.js";
+import { t as FUIMenuItem_default } from "./FUIMenuItem-DpUjPthR.js";
+import { t as useItemSubCard } from "./useItemSubCard-1iIzXY3b.js";
+import { t as AmbientCardTitle } from "./AmbientCardTitle-Bwa4acnR.js";
+import { t as EmptyStateDisplay } from "./EmptyStateDisplay-C12rU3yx.js";
+import React, { Fragment, useState } from "react";
+import { Box, CircularProgress, Divider, Fade, Grow, IconButton, List, ListItem, ListItemAvatar, ListItemText, Typography, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { DeleteIcon } from "@fluentui/react-icons";
+import { PropTypes as PropTypes$1 } from "prop-types";
+import { useTranslation } from "react-i18next";
+import { grey } from "@material-ui/core/colors";
+import { format, isValid } from "date-fns";
+import KeyboardArrowLeftIcon from "@material-ui/icons/esm/KeyboardArrowLeft";
+
+//#region src/UI/widgets/WidgetCard.jsx
+/**
+* Core component for dashboard widget cards
+*/
+const WidgetCard = (props) => {
+	const { children, headerActions, className, widgetType, id, layout, params, setParam, onDelete, loading, errors, theme,...other } = props;
+	const classes = makeStyles((theme$1) => ({
+		root: { "&.react-resizable-hide .react-resizable-handle": { display: "none" } },
+		darkRoot: {
+			"&.react-resizable-hide .react-resizable-handle": { display: "none" },
+			background: "#424242",
+			color: "white"
+		},
+		anyRoot: { "& .MuiCardContent-root": {
+			justifyContent: "space-between",
+			overflow: "auto",
+			padding: 0
+		} },
+		handle: {
+			cursor: "move",
+			"&:hover": { backgroundColor: theme$1.palette.action.hover }
+		},
+		loadingContent: {
+			flex: 1,
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		innerWidgetContentContainer: {
+			height: "100%",
+			minWidth: widgetType === "ProgressBarWidget" ? 0 : 270,
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "space-between",
+			padding: theme$1.spacing(2)
+		}
+	}))();
+	const raised = /(^|\s)react-draggable-dragging(\s|$)/.test(className ?? "");
+	let body = children;
+	if (loading) body = /* @__PURE__ */ React.createElement("div", { className: classes.loadingContent }, /* @__PURE__ */ React.createElement(CircularProgress, {
+		color: "secondary",
+		size: 64
+	}));
+	if (errors && !body) body = /* @__PURE__ */ React.createElement("div", null, "Unexpected error");
+	return /* @__PURE__ */ React.createElement(FUICard_default, {
+		...other,
+		className: clsx(className, theme === "dark" ? classes.darkRoot : classes.root, classes.anyRoot),
+		raised,
+		CardHeaderProps: {
+			className: classes.handle,
+			"data-handle": true
+		},
+		headerActions: /* @__PURE__ */ React.createElement(React.Fragment, null, headerActions, /* @__PURE__ */ React.createElement(FUICardHeaderMenu, null, /* @__PURE__ */ React.createElement(FUIMenuItem_default, {
+			onClick: onDelete,
+			fluentIcon: DeleteIcon,
+			primary: "Delete"
+		})))
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.innerWidgetContentContainer }, body));
+};
+var WidgetCard_default = WidgetCard;
+
+//#endregion
+//#region src/UI/widgets/ItemsWidgetCard.jsx
+const useStyles = makeStyles((theme) => ({
+	mainContainer: {
+		backgroundColor: theme.palette.background.paper,
+		padding: "0px",
+		gap: "0px",
+		order: 3,
+		alignSelf: "stretch"
+	},
+	secondaryContainer: {
+		backgroundColor: theme.palette.background.paper,
+		padding: "0px",
+		gap: "0px",
+		order: 0,
+		alignSelf: "stretch",
+		flexGrow: 0,
+		width: "100%"
+	},
+	listItemPrimary: {
+		fontSize: "14px",
+		fontWeight: 600
+	},
+	listItemSecondary: {
+		fontSize: "12px",
+		fontWeight: 400,
+		color: grey[500]
+	},
+	listContainer: {
+		width: "100%",
+		backgroundColor: theme.palette.background.paper,
+		padding: "0px"
+	},
+	listItem: {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "flex-start",
+		padding: "8px 16px"
+	},
+	listItemAvatar: { minWidth: "32px" },
+	listItemText: { margin: 0 },
+	itemContainer: { paddingRight: "5px" },
+	emptyStateDisplay: {
+		marginTop: theme.spacing(1),
+		marginBottom: theme.spacing(1)
+	}
+}));
+/**
+* `ItemsWidgetCard` component
+*/
+const ItemsWidgetCard = (props) => {
+	const [checked, setChecked] = useState(false);
+	const [cardItemData, setCardItemData] = useState();
+	const { cardData, subCardsList = {}, style, headerColor, emptyStatePrimaryText, emptyStateImageSrc, emptyStateIconSize, emptyStateImageWidth, emptyStateClassName, emptyStateIcon, title = "Account Items", subCardTypeField = "type" } = props;
+	const { SubCard, setSubCardType, subCardType, getSubCardInfo } = useItemSubCard(subCardsList);
+	const classes = useStyles();
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const handleChange = (accountItem) => {
+		setCardItemData(accountItem);
+		setSubCardType(accountItem?.[subCardTypeField] || "");
+		setChecked((prev) => !prev);
+	};
+	return /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "flex-start",
+		flexGrow: "1",
+		className: classes.mainContainer,
+		style: {
+			...style,
+			height: "100%"
+		}
+	}, /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center",
+		style: {
+			gap: "8px",
+			width: "100%",
+			padding: "8px",
+			backgroundColor: headerColor && getEllipseColor(theme, headerColor, "light"),
+			color: theme.palette.getContrastText(getEllipseColor(theme, headerColor, "light"))
+		}
+	}, subCardType !== "" && /* @__PURE__ */ React.createElement(IconButton, {
+		"aria-label": "delete",
+		size: "small",
+		onClick: () => handleChange(""),
+		style: { marginLeft: "10px" },
+		id: "udpRecord-ItemsWidgetCard-delete",
+		udprecordid: "udpRecord-ItemsWidgetCard-delete"
+	}, /* @__PURE__ */ React.createElement(KeyboardArrowLeftIcon, { fontSize: "inherit" })), /* @__PURE__ */ React.createElement(AmbientCardTitle, {
+		title: subCardType !== "" ? subCardType : title,
+		style: { backgroundColor: headerColor && getEllipseColor(theme, headerColor, "light") }
+	})), !checked ? /* @__PURE__ */ React.createElement(Grow, {
+		in: !checked,
+		style: {
+			transformOrigin: "0 0 0",
+			width: "100%"
+		},
+		...!checked ? { timeout: 500 } : {},
+		mountOnEnter: true,
+		unmountOnExit: true
+	}, /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "flex-start",
+		className: classes.secondaryContainer
+	}, /* @__PURE__ */ React.createElement(List, { className: classes.listContainer }, cardData?.length > 0 ? cardData?.map((cardItem, index) => {
+		const { defaultColor, textColor, backgroundColor, icon: Icon } = getSubCardInfo(cardItem?.accountItemName);
+		return /* @__PURE__ */ React.createElement(React.Fragment, { key: `${cardItem?.name}-${index}` }, /* @__PURE__ */ React.createElement(ListItem, {
+			button: true,
+			className: classes.listItem,
+			style: { backgroundColor },
+			onClick: () => handleChange(cardItem),
+			id: "udpRecord-ItemsWidgetCard-ListItem-" + cardItem?.name.replace(/\s+/g, "") + "-" + cardItem?.businessObjectKey,
+			udprecordid: "udpRecord-ItemsWidgetCard-ListItem-" + cardItem?.name.replace(/\s+/g, "") + "-" + cardItem?.businessObjectKey
+		}, /* @__PURE__ */ React.createElement(ListItemAvatar, { className: classes.listItemAvatar }, /* @__PURE__ */ React.createElement(Icon, {
+			color: defaultColor,
+			width: "22px",
+			height: "22px"
+		})), /* @__PURE__ */ React.createElement(ListItemText, {
+			className: classes.listItemText,
+			primary: /* @__PURE__ */ React.createElement(Typography, {
+				variant: "subtitle2",
+				className: classes?.listItemPrimary,
+				style: { color: textColor }
+			}, cardItem?.name),
+			secondary: /* @__PURE__ */ React.createElement(Typography, {
+				variant: "caption",
+				className: classes?.listItemSecondary
+			}, cardItem?.date ? isValid(new Date(cardItem?.date)) ? format(new Date(cardItem?.date), "MMM dd, yyyy") : "Invalid date" : "Date field is empty")
+		}), /* @__PURE__ */ React.createElement(Box, {
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+			alignItems: "flex-end",
+			className: classes.itemContainer
+		}, /* @__PURE__ */ React.createElement(Typography, {
+			variant: "subtitle2",
+			className: classes.listItemPrimary
+		}, `$${cardItem?.amount || 0}`))), /* @__PURE__ */ React.createElement(Divider, null));
+	}) : /* @__PURE__ */ React.createElement("div", { className: clsx(classes.emptyStateDisplay, emptyStateClassName) }, /* @__PURE__ */ React.createElement(EmptyStateDisplay, {
+		primaryText: emptyStatePrimaryText ?? t("No results found"),
+		icon: emptyStateIcon,
+		iconSize: emptyStateIconSize,
+		imageSrc: emptyStateImageSrc,
+		imageWidth: emptyStateImageWidth
+	}))))) : /* @__PURE__ */ React.createElement(Fade, {
+		in: checked,
+		style: {
+			transformOrigin: "0 0 0",
+			width: "100%"
+		},
+		...checked ? { timeout: 1e3 } : {},
+		mountOnEnter: true,
+		unmountOnExit: true
+	}, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(SubCard, { cardInfo: cardItemData }))));
+};
+ItemsWidgetCard.propTypes = {
+	cardData: PropTypes$1.array.isRequired,
+	subCardsList: PropTypes$1.object.isRequired,
+	style: PropTypes$1.object
+};
+
+//#endregion
+export { WidgetCard_default as n, ItemsWidgetCard as t };
+//# sourceMappingURL=widgets-sDcSDxcf.js.map

package/dist/widgets-sDcSDxcf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widgets-sDcSDxcf.js","names":["theme","FUICard","FUIMenuItem","PropTypes"],"sources":["../src/UI/widgets/WidgetCard.jsx","../src/UI/widgets/ItemsWidgetCard.jsx"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { DeleteIcon } from '@fluentui/react-icons';\nimport { makeStyles, CircularProgress } from '@material-ui/core';\nimport clsx from 'clsx';\nimport FUICard, { FUICardHeaderMenu } from '../surfaces/cards/FUICard';\nimport FUIMenuItem from './FluentComponents/FUIMenuItem';\n\n/**\n * Core component for dashboard widget cards\n */\nconst WidgetCard = (props) => {\n  const {\n    children,\n    headerActions,\n    className,\n    widgetType,\n    id,\n    layout,\n    params,\n    setParam,\n    onDelete,\n    loading,\n    errors,\n    theme,\n    ...other\n  } = props;\n\n  const useStyles = makeStyles((theme) => ({\n    root: {\n      '&.react-resizable-hide .react-resizable-handle': {\n        display: 'none'\n      }\n    },\n    darkRoot: {\n      '&.react-resizable-hide .react-resizable-handle': {\n        display: 'none'\n      },\n      background: '#424242',\n      color: 'white'\n    },\n    anyRoot: {\n      '& .MuiCardContent-root': {\n        justifyContent: 'space-between',\n        overflow: 'auto',\n        padding: 0\n      }\n    },\n    handle: {\n      cursor: 'move',\n      '&:hover': {\n        backgroundColor: theme.palette.action.hover\n      }\n    },\n    loadingContent: {\n      flex: 1,\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center'\n    },\n    innerWidgetContentContainer: {\n      height: '100%',\n      minWidth: widgetType === 'ProgressBarWidget' ? 0 : 270,\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n      padding: theme.spacing(2)\n    }\n  }));\n  const classes = useStyles();\n\n  const raised = /(^|\\s)react-draggable-dragging(\\s|$)/.test(className ?? '');\n  let body = children;\n  if (loading) {\n    body = (\n      <div className={classes.loadingContent}>\n        <CircularProgress color='secondary' size={64} />\n      </div>\n    );\n  }\n  if (errors && !body) {\n    body = <div>Unexpected error</div>;\n  }\n  return (\n    <FUICard\n      {...other}\n      className={clsx(\n        className,\n        theme === 'dark' ? classes.darkRoot : classes.root,\n        classes.anyRoot\n      )}\n      raised={raised}\n      CardHeaderProps={{\n        className: classes.handle,\n        'data-handle': true\n      }}\n      headerActions={\n        <>\n          {headerActions}\n          <FUICardHeaderMenu>\n            <FUIMenuItem\n              onClick={onDelete}\n              fluentIcon={DeleteIcon}\n              primary='Delete'\n            />\n          </FUICardHeaderMenu>\n        </>\n      }\n    >\n      <div className={classes.innerWidgetContentContainer}>{body}</div>\n    </FUICard>\n  );\n};\n\nexport default WidgetCard;\n","import React, { useState } from 'react';\nimport { useItemSubCard } from '../../hooks/useItemSubCard';\nimport {\n  Box,\n  Divider,\n  Fade,\n  Grow,\n  IconButton,\n  List,\n  ListItem,\n  ListItemAvatar,\n  ListItemText,\n  makeStyles,\n  Typography,\n  useTheme\n} from '@material-ui/core';\nimport { format, isValid } from 'date-fns';\nimport { grey } from '@material-ui/core/colors';\nimport { AmbientCardTitle } from '../surfaces/cards/AmbientCardTitle';\nimport { PropTypes } from 'prop-types';\nimport KeyboardArrowLeftIcon from '@material-ui/icons/esm/KeyboardArrowLeft';\nimport { getEllipseColor } from '../../utilities/style/colorConverter';\nimport { useTranslation } from 'react-i18next';\nimport clsx from 'clsx';\nimport { EmptyStateDisplay } from '../dataDisplay/EmptyStateDisplay';\n\nconst useStyles = makeStyles((theme) => ({\n  mainContainer: {\n    backgroundColor: theme.palette.background.paper,\n    padding: '0px',\n    gap: '0px',\n    order: 3,\n    alignSelf: 'stretch'\n  },\n  secondaryContainer: {\n    backgroundColor: theme.palette.background.paper,\n    padding: '0px',\n    gap: '0px',\n    order: 0,\n    alignSelf: 'stretch',\n    flexGrow: 0,\n    width: '100%'\n  },\n  listItemPrimary: {\n    fontSize: '14px',\n    fontWeight: 600\n  },\n  listItemSecondary: {\n    fontSize: '12px',\n    fontWeight: 400,\n    color: grey[500]\n  },\n  listContainer: {\n    width: '100%',\n    backgroundColor: theme.palette.background.paper,\n    padding: '0px'\n  },\n  listItem: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    padding: '8px 16px'\n  },\n  listItemAvatar: {\n    minWidth: '32px'\n  },\n  listItemText: {\n    margin: 0\n  },\n  itemContainer: {\n    paddingRight: '5px'\n  },\n  emptyStateDisplay: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  }\n}));\n\n/**\n * `ItemsWidgetCard` component\n */\nexport const ItemsWidgetCard = (props) => {\n  const [checked, setChecked] = useState(false);\n  const [cardItemData, setCardItemData] = useState();\n\n  const {\n    cardData,\n    subCardsList = {},\n    style,\n    headerColor,\n    emptyStatePrimaryText,\n    emptyStateImageSrc,\n    emptyStateIconSize,\n    emptyStateImageWidth,\n    emptyStateClassName,\n    emptyStateIcon,\n    title = 'Account Items',\n    subCardTypeField = 'type'\n  } = props;\n\n  const { SubCard, setSubCardType, subCardType, getSubCardInfo } =\n    useItemSubCard(subCardsList);\n  const classes = useStyles();\n  const theme = useTheme();\n  const { t } = useTranslation();\n\n  const handleChange = (accountItem) => {\n    setCardItemData(accountItem);\n    setSubCardType(accountItem?.[subCardTypeField] || '');\n    setChecked((prev) => !prev);\n  };\n\n  return (\n    <Box\n      display='flex'\n      flexDirection='column'\n      alignItems='flex-start'\n      flexGrow='1'\n      className={classes.mainContainer}\n      style={{\n        ...style,\n        height: '100%'\n      }}\n    >\n      <Box\n        display='flex'\n        flexDirection='row'\n        alignItems='center'\n        style={{\n          gap: '8px',\n          width: '100%',\n          padding: '8px',\n          backgroundColor:\n            headerColor && getEllipseColor(theme, headerColor, 'light'),\n          color: theme.palette.getContrastText(\n            getEllipseColor(theme, headerColor, 'light')\n          )\n        }}\n      >\n        {subCardType !== '' && (\n          <IconButton\n            aria-label='delete'\n            size='small'\n            onClick={() => handleChange('')}\n            style={{ marginLeft: '10px' }}\n            id='udpRecord-ItemsWidgetCard-delete'\n            udprecordid='udpRecord-ItemsWidgetCard-delete'\n          >\n            <KeyboardArrowLeftIcon fontSize='inherit' />\n          </IconButton>\n        )}\n        <AmbientCardTitle\n          title={subCardType !== '' ? subCardType : title}\n          style={{\n            backgroundColor:\n              headerColor && getEllipseColor(theme, headerColor, 'light')\n          }}\n        />\n      </Box>\n\n      {!checked ? (\n        <Grow\n          in={!checked}\n          style={{ transformOrigin: '0 0 0', width: '100%' }}\n          {...(!checked ? { timeout: 500 } : {})}\n          mountOnEnter\n          unmountOnExit\n        >\n          <Box\n            display='flex'\n            flexDirection='column'\n            alignItems='flex-start'\n            className={classes.secondaryContainer}\n          >\n            <List className={classes.listContainer}>\n              {cardData?.length > 0 ? (\n                cardData?.map((cardItem, index) => {\n                  const {\n                    defaultColor,\n                    textColor,\n                    backgroundColor,\n                    icon: Icon\n                  } = getSubCardInfo(cardItem?.accountItemName);\n\n                  return (\n                    <React.Fragment key={`${cardItem?.name}-${index}`}>\n                      <ListItem\n                        button\n                        className={classes.listItem}\n                        style={{\n                          backgroundColor\n                        }}\n                        onClick={() => handleChange(cardItem)}\n                        id={\n                          'udpRecord-ItemsWidgetCard-ListItem-' +\n                          cardItem?.name.replace(/\\s+/g, '') +\n                          '-' +\n                          cardItem?.businessObjectKey\n                        }\n                        udprecordid={\n                          'udpRecord-ItemsWidgetCard-ListItem-' +\n                          cardItem?.name.replace(/\\s+/g, '') +\n                          '-' +\n                          cardItem?.businessObjectKey\n                        }\n                      >\n                        <ListItemAvatar className={classes.listItemAvatar}>\n                          <Icon\n                            color={defaultColor}\n                            width='22px'\n                            height='22px'\n                          />\n                        </ListItemAvatar>\n                        <ListItemText\n                          className={classes.listItemText}\n                          primary={\n                            <Typography\n                              variant='subtitle2'\n                              className={classes?.listItemPrimary}\n                              style={{ color: textColor }}\n                            >\n                              {cardItem?.name}\n                            </Typography>\n                          }\n                          secondary={\n                            <Typography\n                              variant='caption'\n                              className={classes?.listItemSecondary}\n                            >\n                              {cardItem?.date\n                                ? isValid(new Date(cardItem?.date))\n                                  ? format(\n                                      new Date(cardItem?.date),\n                                      'MMM dd, yyyy'\n                                    )\n                                  : 'Invalid date'\n                                : 'Date field is empty'}\n                            </Typography>\n                          }\n                        />\n                        <Box\n                          display='flex'\n                          flexDirection='column'\n                          justifyContent='center'\n                          alignItems='flex-end'\n                          className={classes.itemContainer}\n                        >\n                          <Typography\n                            variant='subtitle2'\n                            className={classes.listItemPrimary}\n                          >\n                            {`$${cardItem?.amount || 0.0}`}\n                          </Typography>\n                        </Box>\n                      </ListItem>\n                      <Divider />\n                    </React.Fragment>\n                  );\n                })\n              ) : (\n                <div\n                  className={clsx(\n                    classes.emptyStateDisplay,\n                    emptyStateClassName\n                  )}\n                >\n                  <EmptyStateDisplay\n                    primaryText={emptyStatePrimaryText ?? t('No results found')}\n                    icon={emptyStateIcon}\n                    iconSize={emptyStateIconSize}\n                    imageSrc={emptyStateImageSrc}\n                    imageWidth={emptyStateImageWidth}\n                  />\n                </div>\n              )}\n            </List>\n          </Box>\n        </Grow>\n      ) : (\n        <Fade\n          in={checked}\n          style={{ transformOrigin: '0 0 0', width: '100%' }}\n          {...(checked ? { timeout: 1000 } : {})}\n          mountOnEnter\n          unmountOnExit\n        >\n          <Box>\n            <SubCard cardInfo={cardItemData} />\n          </Box>\n        </Fade>\n      )}\n    </Box>\n  );\n};\n\nItemsWidgetCard.propTypes = {\n  /**\n   * @type {?array} list of flags to render, required array object structure e.g\n   * [{\n   *  name: string, --> must be correspond with the name of the subCard object name\n   *  date: date | string,\n   *  amount: number | string\n   * }]\n   */\n  cardData: PropTypes.array.isRequired,\n\n  /**\n   * @type {?object} sub-cards detail content object, e.g\n   *\n   * CardNameXX and CardNameYY must be specified and corresponding with the name attribute in the card data\n   *\n     const subCardsList = {\n      CardNameXX: {\n        defaultColor: theme.palette.primary.main,\n        textColor: theme.palette.secondary.main,\n        component: props => {\n              return <PredefinedReactComponent {...props} />;\n        },\n        icon: LoanIcon,\n      },\n      CardNameYY: {\n        defaultColor: '#73368E',\n        textColor: '#FF9800',\n        component: props => {\n              return <PredefinedReactComponentTwo {...props} />;\n        },\n        icon: LoanIcon,\n      },\n   * }]\n  */\n  subCardsList: PropTypes.object.isRequired,\n\n  /**\n   * Optional, additional properties to apply some styles over the main container\n   */\n  style: PropTypes.object\n};\n"],"mappings":"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"}

package/dist/withEngineComponent-C7SZN5hy.js

@@ -0,0 +1,28 @@
+import { a as DonutWrapper, c as BarChartWrapper, i as LineGraphWrapper, l as DisplayCardWrapper, n as AgGridSimpleWrapper, s as HistogramWrapper, t as BioCardWrapper, u as PrimaryActionHeaderWrapper } from "./BioCardWrapper-D-WfBVpM.js";
+import React from "react";
+
+//#region src/componentSystems/pageRenderer/hocs/withEngineComponent.jsx
+const Other = (props) => {
+	return /* @__PURE__ */ React.createElement("div", null, "Test");
+};
+const engineWrapper = {
+	PrimaryActionHeader: (props) => PrimaryActionHeaderWrapper(props),
+	DisplayCard: (props) => DisplayCardWrapper(props),
+	BarChart: (props) => BarChartWrapper(props),
+	Histogram: (props) => HistogramWrapper(props),
+	DonutChart: (props) => DonutWrapper(props),
+	LineGraph: (props) => LineGraphWrapper(props),
+	agGridSimple: (props) => AgGridSimpleWrapper(props),
+	BioCard: (props) => BioCardWrapper(props),
+	Other
+};
+function withEngineComponent(WrappedComponent) {
+	const hocComponent = (hocProps) => {
+		return (engineWrapper[WrappedComponent] || engineWrapper["Other"])(hocProps);
+	};
+	return hocComponent;
+}
+
+//#endregion
+export { withEngineComponent as t };
+//# sourceMappingURL=withEngineComponent-C7SZN5hy.js.map

package/dist/withEngineComponent-C7SZN5hy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withEngineComponent-C7SZN5hy.js","names":[],"sources":["../src/componentSystems/pageRenderer/hocs/withEngineComponent.jsx"],"sourcesContent":["import React from 'react';\nimport { PrimaryActionHeaderWrapper } from '../wrappers/PrimaryActionHeaderWrapper';\nimport { DisplayCardWrapper } from '../wrappers/DisplayCardWrapper';\nimport { BarChartWrapper } from '../wrappers/BarChartWrapper';\nimport { HistogramWrapper } from '../wrappers/HistogramWrapper';\nimport { DonutWrapper } from '../wrappers/DonutWrapper';\nimport { LineGraphWrapper } from '../wrappers/LineGraphWrapper';\nimport { AgGridSimpleWrapper } from '../wrappers/AgGridSimpleWrapper';\nimport { BioCardWrapper } from '../wrappers/BioCardWrapper';\n\nconst Other = props => {\n  return <div>Test</div>;\n};\n\nconst engineWrapper = {\n  PrimaryActionHeader: props => PrimaryActionHeaderWrapper(props),\n  DisplayCard: props => DisplayCardWrapper(props),\n  BarChart: props => BarChartWrapper(props),\n  Histogram: props => HistogramWrapper(props),\n  DonutChart: props => DonutWrapper(props),\n  LineGraph: props => LineGraphWrapper(props),\n  agGridSimple: props => AgGridSimpleWrapper(props),\n  BioCard: props => BioCardWrapper(props),\n  Other,\n};\n\nexport function withEngineComponent(WrappedComponent) {\n  const hocComponent = hocProps => {\n    const wrappedComponent =\n      engineWrapper[WrappedComponent] || engineWrapper['Other'];\n\n    return wrappedComponent(hocProps);\n  };\n  return hocComponent;\n}\n"],"mappings":";;;;AAUA,MAAM,SAAQ,UAAS;AACrB,QAAO,oCAAC,aAAI,OAAU;;AAGxB,MAAM,gBAAgB;CACpB,sBAAqB,UAAS,2BAA2B,MAAM;CAC/D,cAAa,UAAS,mBAAmB,MAAM;CAC/C,WAAU,UAAS,gBAAgB,MAAM;CACzC,YAAW,UAAS,iBAAiB,MAAM;CAC3C,aAAY,UAAS,aAAa,MAAM;CACxC,YAAW,UAAS,iBAAiB,MAAM;CAC3C,eAAc,UAAS,oBAAoB,MAAM;CACjD,UAAS,UAAS,eAAe,MAAM;CACvC;CACD;AAED,SAAgB,oBAAoB,kBAAkB;CACpD,MAAM,gBAAe,aAAY;AAI/B,UAFE,cAAc,qBAAqB,cAAc,UAE3B,SAAS;;AAEnC,QAAO"}