udp-react-enterprise-component-library 25.18.1-beta.37 → 25.18.1-beta.39

package/dist/ChatContainer-CXzPIP9R.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatContainer-CXzPIP9R.js","names":["useStyles","makeStyles","newMessageContent","addMessage"],"sources":["../src/chatBot/ChatMessage.jsx","../src/chatBot/ChatContainer.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { Card, CardContent, Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    borderRadius: 5,\n    background: (props) => (props.message.outgoing ? '#cdecfa' : '#e1e2e3'),\n    width: '85%',\n    padding: '3px',\n    alignSelf: (props) => props.message.outgoing && 'flex-end',\n    flexShrink: 0, \n    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'\n  },\n  userName: {\n    fontWeight: 'bold'\n  },\n  timestamp: {\n    color: '#A9A9A9',\n    margin: '0 0 0 5px',\n  },\n}));\n\nexport const ChatMessage = (props) => {\n  const classes = useStyles(props);\n  const { message } = props;\n\n  return (\n    <Card className={classes.root}>\n      <CardContent>\n        <div style={{display:'flex', flexDirection:'row'}}>\n          <Typography noWrap variant='caption' className={classes.userName}>\n            {message.createdBy.name}\n          </Typography>\n          {!message.createdBy.loading && (\n            <Typography noWrap variant='caption' className={classes.timestamp}>\n              {message.createdAt}\n            </Typography>\n          )}\n        </div>\n        <div style={{wordWrap: 'break-word'}}>\n          <Typography variant='body2' style={{whiteSpace: 'pre-line'}}>\n            {message.messageContent}\n          </Typography>\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n\n","import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport { AmbientTextField } from '../UI/inputs/textField/AmbientTextField';\nimport { FluentButton } from '../UI/inputs/buttons/FluentButton';\nimport { useUser } from '../utilities/auth/useUser';\nimport { ChatMessage } from './ChatMessage';\nimport { Link, Typography } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { apiMutate } from '../utilities/useAxiosMutate';\nimport { useChatBot } from '../utilities/chatBot/useChatBot';\nimport { useTranslation } from 'react-i18next';\nimport { useSnackbar } from 'notistack';\nimport { ConfigService } from '../configService';\n\nconst useStyles = makeStyles((theme) => ({\n  loadingContainer: {\n    display: 'inline-block',\n    fontSize: '2em', // Adjust the font size to make the whole section bigger\n  },\n  pulseEllipsis: {\n    display: 'inline-block',\n    animation: '$pulse 1.5s infinite',\n    '&:nth-of-type(2)': {\n      animationDelay: '0.5s',\n    },\n    '&:nth-of-type(3)': {\n      animationDelay: '1s',\n    },\n  },\n  '@keyframes pulse': {\n    '0%': {\n      transform: 'scale(1)',\n      opacity: 0.6,\n    },\n    '50%': {\n      transform: 'scale(1.2)',\n      opacity: 1,\n    },\n    '100%': {\n      transform: 'scale(1)',\n      opacity: 0.6,\n    },\n  },\n}));\n\n\nexport const ChatContainer = (props) => {\n  const classes = useStyles();\n  const { messageHistory, addMessage, removeMessageHistory, removeLoadingMessage } = useChatBot()\n  const user = useUser();\n  const [newMessageContent, setNewMessageContent] = useState('');\n  const messageEndRef = useRef(null);\n  const productId = ConfigService.config.UNITY_PRODUCT_ID;\n  const aiSearchUrl = ConfigService.config.AI_SEARCH_URL;\n  const aiSearchIndexName = ConfigService.config.AI_SEARCH_INDEX_NAME;\n  const aiSearchKey = ConfigService.config.AI_SEARCH_KEY;\n  const udpAiApiBase = ConfigService.config.UDPAI_API_BASE;\n  const { enqueueSnackbar } = useSnackbar();\n  const { t } = useTranslation();\n\n  const handleSendMessage = async () => {\n    addMessage(newMessageContent, { ...user, name: 'You' }, newMessageContent);\n    setNewMessageContent('');\n    addLoadingMessage();\n\n    try {\n      await sendMessage(newMessageContent, addMessage);\n      removeLoadingMessage();\n    } catch (error) {\n      console.error('Error sending message:', error);\n    }\n  };\n\n  const handleNewSession = async () => {\n    try {\n      await removeMessageHistory();\n      enqueueSnackbar(t(`Chat Session Cleared`), {\n        variant: 'success',\n        anchorOrigin: {\n          vertical: 'top',\n          horizontal: 'center',\n        }\n      });\n    } catch (error) {\n      console.error('Error create new chat session:', error);\n    }\n  }\n\n  const addLoadingMessage = () => {\n    const messageContent = (\n      <div className={classes.loadingContainer}>\n        <span className={classes.pulseEllipsis}>.</span>\n        <span className={classes.pulseEllipsis}>.</span>\n        <span className={classes.pulseEllipsis}>.</span>\n      </div>\n    );\n    addMessage(messageContent, { name: 'AI Assistant', loading: true }, \"\");\n  };\n\n\n  useEffect(() => {\n    messageEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n  }, [messageHistory]);\n\n\n  const formatCitations = (citations) => {\n    return (\n      <div>\n        <ol>\n          {citations.map((citation) => {\n            return (\n              <li>\n                <Link href={citation.url} target='_blank' rel='noopener'>\n                  <Typography variant='body2' style={{ whiteSpace: 'pre-line' }}>\n                    {citation.title}\n                  </Typography>\n                </Link>\n              </li>\n            );\n          })}\n        </ol>\n      </div>\n    );\n  };\n\n  const parseAiResponse = (response, addMessage) => {\n    try {\n      const gptResponseMessage = response.data.LLMResponse.choices[0].message;\n      const messageText = gptResponseMessage.content;\n      const citations = gptResponseMessage.context.citations;\n      const showCitations = messageText.toString().includes('[doc');\n      const textContent = messageText.toString().replaceAll('[doc', '[');\n\n      const responseMessage = (\n        <div>\n          <div style={{ wordWrap: 'break-word' }}>\n            <Typography variant='body2' style={{ whiteSpace: 'pre-line' }}>\n              {textContent}\n            </Typography>\n          </div>\n          {citations.length > 0 && showCitations && (\n            <div>\n              <br />\n              <Typography variant='body2' style={{ whiteSpace: 'pre-line' }}>\n                Refer to the XWiki documents for more info:\n              </Typography>\n              {formatCitations(citations)}\n            </div>\n          )}\n        </div>\n      );\n      addMessage(responseMessage, { name: 'AI Assistant' }, textContent);\n    } catch (e) {\n      const errorMessage = \"Sorry, an error has occurred.\"\n      addMessage(errorMessage, { name: 'AI Assistant' }, errorMessage);\n    }\n\n  };\n\n  const executeQuery = useCallback(\n    async (data, aiModelId) =>\n      apiMutate(\n        udpAiApiBase,\n        `aiservice/llm`,\n        {\n          method: 'post',\n          headers: {\n            currentProductId: productId, //temporary bypass -> //currentProductId: '1'\n          }\n        },\n        data\n      ),\n    [productId, udpAiApiBase]\n  );\n\n\n\n  const sendMessage = async (newMessageContent, addMessage) => {\n    const messageHistoryTextArray = messageHistory\n      .map(item => ({\n        role: item.createdBy.name === 'AI Assistant' ? 'assistant' : item.createdBy.name === 'You' ? 'user' : item.createdBy.name,\n        content: item.messageText\n      }));\n\n    const body = {\n      modelName: 'gpt-4o',\n      useCache: 'false',\n      payload: {\n        max_tokens: 4096,\n        temperature: 0.5,\n        n: 1,\n        presence_penalty: 0,\n        messages: [\n          {\n            role: 'system',\n            content:\n              'You are an assistant helping a user using existing knowledge supplemented by additional data.'\n          },\n          ...messageHistoryTextArray,\n          {\n            role: 'user',\n            content: newMessageContent\n          }\n        ],\n        data_sources: [\n          {\n            type: 'azure_search',\n            parameters: {\n              endpoint: aiSearchUrl,\n              // set sematic configuration name to match index name\n              semantic_configuration: aiSearchIndexName,\n              query_type: \"semantic\",\n              in_scope: false,\n              //role_information: \"You are an AI search assistant having access to wiki documentation data. Please be helpful to the user answer any questions to the best of your ability.\",\n              strictness: 1,\n              top_n_documents: 5,\n              authentication: {\n                type: 'api_key',\n                key: aiSearchKey\n              },\n              index_name: aiSearchIndexName,\n              filter: `Products/any(p: p eq '${productId}')`\n            }\n          }\n        ]\n      }\n    };\n\n    const aiResponse = await executeQuery({ data: body });\n    parseAiResponse(aiResponse, addMessage);\n  }\n\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', height: '100%'}}>\n      <FluentButton id='udpRecord-ChatContainer-NewSession' onClick={handleNewSession}>Clear Chat</FluentButton>\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: '10px',\n          padding: '3px',\n          height: '100%',\n          overflowY: 'auto',\n          flexGrow: 1\n        }}\n      >\n        {messageHistory.map((message, index) => (\n          <ChatMessage key={index} message={message} />\n        ))}\n        <div ref={messageEndRef} />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', marginTop: '5px', position: 'sticky', bottom: 0, padding: '3px', zIndex: 1, background: 'white' }}>\n        <div style={{ flexGrow: 1 }}>\n          <AmbientTextField\n            id='udpRecord-ChatContainer-Enter'\n            multiline\n            value={newMessageContent}\n            onChange={(e) => setNewMessageContent(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' && !e.shiftKey) {\n                e.preventDefault();\n                handleSendMessage();\n              }\n            }}\n          />\n        </div>\n        <FluentButton\n          id='udpRecord-ChatContainer-Send'\n          onClick={handleSendMessage}\n          autoFocus\n          variant='outlined'\n        >\n          Send\n        </FluentButton>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/ChatUDP-D8qb3QN5.js

@@ -0,0 +1,17 @@
+import { t as __export } from "./chunk-B4enJp2Q.js";
+import { t as ChatContainer } from "./ChatContainer-CXzPIP9R.js";
+import React from "react";
+
+//#region src/udp/pages/ChatUDP/ChatUDP.jsx
+const ChatUDP = () => {
+	return /* @__PURE__ */ React.createElement(ChatContainer, null);
+};
+var ChatUDP_default = ChatUDP;
+
+//#endregion
+//#region src/udp/pages/ChatUDP/index.ts
+var ChatUDP_exports = /* @__PURE__ */ __export({ default: () => ChatUDP_default });
+
+//#endregion
+export { ChatUDP_default as n, ChatUDP_exports as t };
+//# sourceMappingURL=ChatUDP-D8qb3QN5.js.map

package/dist/ChatUDP-D8qb3QN5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatUDP-D8qb3QN5.js","names":[],"sources":["../src/udp/pages/ChatUDP/ChatUDP.jsx","../src/udp/pages/ChatUDP/index.ts"],"sourcesContent":["import React from 'react';\nimport { ChatContainer } from '../../../chatBot/ChatContainer';\n\nconst ChatUDP = () => {\n  return (\n    <ChatContainer  />\n  );\n};\n\nexport default ChatUDP;\n","export { default } from './ChatUDP';\nexport * from './ChatUDP';\n"],"mappings":";;;;;AAGA,MAAM,gBAAgB;AACpB,QACE,oCAAC,oBAAiB;;AAItB,sBAAe"}

package/dist/ChipAlphabet-DCU1DsB-.js

@@ -0,0 +1,353 @@
+import { t as AvatarAlphabet } from "./AvatarAlphabet-D5klbFfJ.js";
+import React from "react";
+import { Chip, lighten } from "@material-ui/core";
+
+//#region src/UI/dataDisplay/ChipAlphabet.jsx
+const ChipAlphabet = ({ avatarCharacter, label, handleClick, avatar }) => {
+	let letter = "";
+	const highlight = .8;
+	switch (avatarCharacter) {
+		case "A":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#FFB900", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "B":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#E74856", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "C":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#0078D7", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "D":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#0099BC", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "E":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#7A7574", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "F":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#0078D7", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "G":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#FF8C00", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "H":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#E81123", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "I":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#0063B1", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				})
+			});
+			break;
+		case "J":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#2D7D9A", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "K":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#5D5A58", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "L":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#4C4A48", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "M":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#F7630C", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "N":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#EA005E", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "O":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#8E8CD8", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "P":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#00B7C3", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "Q":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#68768A", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "R":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#69797E", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "S":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#CA5010", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "T":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#C30052", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "U":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("FF4343", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "V":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#9A0089", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "W":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#10893E", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "X":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#567C73", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "Y":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#018574", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		case "Z":
+			letter = /* @__PURE__ */ React.createElement(Chip, {
+				style: { backgroundColor: lighten("#881798", highlight) },
+				label,
+				size: "small",
+				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+					size: "small",
+					avatarCharacter: avatar && avatarCharacter
+				}),
+				onClick: handleClick,
+				clickable: true
+			});
+			break;
+		default:
+	}
+	return letter;
+};
+
+//#endregion
+export { ChipAlphabet as t };
+//# sourceMappingURL=ChipAlphabet-DCU1DsB-.js.map

package/dist/ChipAlphabet-DCU1DsB-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipAlphabet-DCU1DsB-.js","names":[],"sources":["../src/UI/dataDisplay/ChipAlphabet.jsx"],"sourcesContent":["import React from 'react'\nimport { Chip, lighten } from '@material-ui/core'\nimport { AvatarAlphabet } from './AvatarAlphabet'\n\nexport const ChipAlphabet = ({\n  avatarCharacter,\n  label,\n  handleClick,\n  avatar\n}) => {\n  let letter = ''\n  const highlight = 0.8\n\n  switch (avatarCharacter) {\n    case 'A':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#FFB900', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'B':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#E74856', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'C':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#0078D7', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'D':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#0099BC', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'E':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#7A7574', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'F':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#0078D7', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'G':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#FF8C00', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'H':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#E81123', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'I':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#0063B1', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n        />\n      )\n      break\n    case 'J':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#2D7D9A', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'K':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#5D5A58', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'L':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#4C4A48', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'M':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#F7630C', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'N':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#EA005E', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'O':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#8E8CD8', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'P':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#00B7C3', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'Q':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#68768A', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'R':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#69797E', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'S':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#CA5010', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'T':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#C30052', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'U':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('FF4343', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'V':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#9A0089', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'W':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#10893E', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'X':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#567C73', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'Y':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#018574', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'Z':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#881798', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n\n    default:\n  }\n\n  return letter\n}\n"],"mappings":"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"}

package/dist/CircleGaugeWidget-Dbn-Hfs9.js

@@ -0,0 +1,111 @@
+import { t as SummaryBlock } from "./SummaryBlock-BjUNDl4q.js";
+import React from "react";
+import { Box, Typography, makeStyles } from "@material-ui/core";
+import { PropTypes as PropTypes$1 } from "prop-types";
+
+//#region src/UI/widgets/library/CircleGaugeWidget/CircleGaugeWidget.jsx
+const useStyles = makeStyles((theme) => ({
+	circle: {
+		width: (props) => props.width || "134px",
+		minHeight: (props) => props.height || "134px",
+		borderRadius: "50%",
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		alignItems: "center",
+		padding: "8px 0px",
+		background: (props) => props?.background || theme.palette.background.paper,
+		border: (props) => props?.borderColor ? `2px solid ${props.borderColor}` : `2px solid #BDBDBD`
+	},
+	cardStat: {
+		fontSize: "1.5rem",
+		fontWeight: "700",
+		color: "#000",
+		textAlign: "center",
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		alignItems: "center",
+		padding: "0px",
+		width: (props) => props.width || "134px",
+		height: "50%"
+	},
+	primaryText: {
+		display: "flex",
+		flexDirection: "row",
+		justifyContent: "center",
+		alignItems: "center",
+		padding: "0px",
+		gap: "8px",
+		fontWeight: "400",
+		fontSize: "22px",
+		fontStyle: "normal",
+		width: (props) => props.width || "134px",
+		height: "32px",
+		margin: "-4px 0px"
+	},
+	secondaryText: {
+		fontStyle: "normal",
+		fontWeight: "400",
+		fontSize: "12px",
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		padding: "0px",
+		width: (props) => props.width || "134px",
+		height: "20px",
+		color: "rgba(0, 0, 0, 0.6)"
+	},
+	keySummary: {
+		fontSize: "1rem",
+		fontWeight: "700",
+		color: "#000",
+		textAlign: "center",
+		lineHeight: "50px",
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		alignItems: "center",
+		padding: "0px",
+		width: (props) => props.width || "134px",
+		height: "50%",
+		borderTop: (props) => props?.borderColor ? `2px solid ${props.borderColor}` : `2px solid #BDBDBD`
+	}
+}));
+const DEFAULT_SUMMARY_BLOCK = {
+	border: "none",
+	width: "69px",
+	height: "32px",
+	fontStyle: "normal",
+	fontWeight: 400,
+	fontSize: "22px",
+	label: { color: "#000" }
+};
+const CircleGaugeWidget = (props) => {
+	const { value, label, textVariant = "h5", secondaryValue, secondaryStartLabel, background, style: styleProps } = props;
+	const classes = useStyles(props);
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: classes.circle,
+		style: styleProps
+	}, /* @__PURE__ */ React.createElement(Box, { className: classes.cardStat }, /* @__PURE__ */ React.createElement(Typography, { className: classes.primaryText }, value), /* @__PURE__ */ React.createElement(Typography, { className: classes.secondaryText }, label)), /* @__PURE__ */ React.createElement(Box, { className: classes.keySummary }, secondaryValue && /* @__PURE__ */ React.createElement(SummaryBlock, {
+		value: secondaryValue,
+		startLabel: secondaryStartLabel || "",
+		textVariant,
+		backgroundColor: background,
+		style: styleProps?.summaryBlock || DEFAULT_SUMMARY_BLOCK
+	})));
+};
+CircleGaugeWidget.propTypes = {
+	value: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]).isRequired,
+	label: PropTypes$1.string,
+	textVariant: PropTypes$1.string,
+	secondaryValue: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]).isRequired,
+	secondaryStartLabel: PropTypes$1.string,
+	background: PropTypes$1.string,
+	style: PropTypes$1.object
+};
+
+//#endregion
+export { CircleGaugeWidget as t };
+//# sourceMappingURL=CircleGaugeWidget-Dbn-Hfs9.js.map

package/dist/CircleGaugeWidget-Dbn-Hfs9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleGaugeWidget-Dbn-Hfs9.js","names":["PropTypes"],"sources":["../src/UI/widgets/library/CircleGaugeWidget/CircleGaugeWidget.jsx"],"sourcesContent":["import React from 'react';\nimport { Box, Typography, makeStyles } from '@material-ui/core';\nimport { SummaryBlock } from '../../../dataDisplay/SummaryBlock';\nimport { PropTypes } from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  circle: {\n    width: (props) => props.width || '134px',\n    minHeight: (props) => props.height || '134px',\n    borderRadius: '50%',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: '8px 0px',\n    background: (props) => props?.background || theme.palette.background.paper,\n    border: (props) =>\n      props?.borderColor\n        ? `2px solid ${props.borderColor}`\n        : `2px solid #BDBDBD`\n  },\n  cardStat: {\n    fontSize: '1.5rem',\n    fontWeight: '700',\n    color: '#000',\n    textAlign: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: '0px',\n    width: (props) => props.width || '134px',\n    height: '50%'\n  },\n  primaryText: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: '0px',\n    gap: '8px',\n    fontWeight: '400',\n    fontSize: '22px',\n    fontStyle: 'normal',\n    width: (props) => props.width || '134px',\n    height: '32px',\n    margin: '-4px 0px'\n  },\n  secondaryText: {\n    fontStyle: 'normal',\n    fontWeight: '400',\n    fontSize: '12px',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    padding: '0px',\n    width: (props) => props.width || '134px',\n    height: '20px',\n    color: 'rgba(0, 0, 0, 0.6)'\n  },\n  keySummary: {\n    fontSize: '1rem',\n    fontWeight: '700',\n    color: '#000',\n    textAlign: 'center',\n    lineHeight: '50px',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: '0px',\n    width: (props) => props.width || '134px',\n    height: '50%',\n    borderTop: (props) =>\n      props?.borderColor\n        ? `2px solid ${props.borderColor}`\n        : `2px solid #BDBDBD`\n  }\n}));\n\nconst DEFAULT_SUMMARY_BLOCK = {\n  border: 'none',\n  width: '69px',\n  height: '32px',\n  fontStyle: 'normal',\n  fontWeight: 400,\n  fontSize: '22px',\n  label: { color: '#000' }\n};\n\nexport const CircleGaugeWidget = (props) => {\n  const {\n    value,\n    label,\n    textVariant = 'h5',\n    secondaryValue,\n    secondaryStartLabel,\n    background,\n    style: styleProps\n  } = props;\n  const classes = useStyles(props);\n\n  return (\n    <Box className={classes.circle} style={styleProps}>\n      <Box className={classes.cardStat}>\n        <Typography className={classes.primaryText}>{value}</Typography>\n        <Typography className={classes.secondaryText}>{label}</Typography>\n      </Box>\n      <Box className={classes.keySummary}>\n        {secondaryValue && (\n          <SummaryBlock\n            value={secondaryValue}\n            startLabel={secondaryStartLabel || ''}\n            textVariant={textVariant}\n            backgroundColor={background}\n            style={styleProps?.summaryBlock || DEFAULT_SUMMARY_BLOCK}\n          />\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nCircleGaugeWidget.propTypes = {\n  /** @type {string, number} label showed in the bottom part of the circle gauge */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n\n  /** @type {?string} optional label */\n  label: PropTypes.string,\n\n  /** @type {?string} optional icon to display ticks in the graph */\n  textVariant: PropTypes.string,\n\n  /** @type {string, number} optional second value */\n  secondaryValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    .isRequired,\n\n  /** @type {?string}  optional started label */\n  secondaryStartLabel: PropTypes.string,\n\n  /** @type {?string} custom background color */\n  background: PropTypes.string,\n\n  /** @type {object} optional additional css properties */\n  style: PropTypes.object\n};\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,YAAY,WAAW;CACvC,QAAQ;EACN,QAAQ,UAAU,MAAM,SAAS;EACjC,YAAY,UAAU,MAAM,UAAU;EACtC,cAAc;EACd,WAAW;EACX,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,SAAS;EACT,aAAa,UAAU,OAAO,cAAc,MAAM,QAAQ,WAAW;EACrE,SAAS,UACP,OAAO,cACH,aAAa,MAAM,gBACnB;EACP;CACD,UAAU;EACR,UAAU;EACV,YAAY;EACZ,OAAO;EACP,WAAW;EACX,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,SAAS;EACT,QAAQ,UAAU,MAAM,SAAS;EACjC,QAAQ;EACT;CACD,aAAa;EACX,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,SAAS;EACT,KAAK;EACL,YAAY;EACZ,UAAU;EACV,WAAW;EACX,QAAQ,UAAU,MAAM,SAAS;EACjC,QAAQ;EACR,QAAQ;EACT;CACD,eAAe;EACb,WAAW;EACX,YAAY;EACZ,UAAU;EACV,SAAS;EACT,eAAe;EACf,YAAY;EACZ,SAAS;EACT,QAAQ,UAAU,MAAM,SAAS;EACjC,QAAQ;EACR,OAAO;EACR;CACD,YAAY;EACV,UAAU;EACV,YAAY;EACZ,OAAO;EACP,WAAW;EACX,YAAY;EACZ,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,SAAS;EACT,QAAQ,UAAU,MAAM,SAAS;EACjC,QAAQ;EACR,YAAY,UACV,OAAO,cACH,aAAa,MAAM,gBACnB;EACP;CACF,EAAE;AAEH,MAAM,wBAAwB;CAC5B,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,WAAW;CACX,YAAY;CACZ,UAAU;CACV,OAAO,EAAE,OAAO,QAAQ;CACzB;AAED,MAAa,qBAAqB,UAAU;CAC1C,MAAM,EACJ,OACA,OACA,cAAc,MACd,gBACA,qBACA,YACA,OAAO,eACL;CACJ,MAAM,UAAU,UAAU,MAAM;AAEhC,QACE,oCAAC;EAAI,WAAW,QAAQ;EAAQ,OAAO;IACrC,oCAAC,OAAI,WAAW,QAAQ,YACtB,oCAAC,cAAW,WAAW,QAAQ,eAAc,MAAmB,EAChE,oCAAC,cAAW,WAAW,QAAQ,iBAAgB,MAAmB,CAC9D,EACN,oCAAC,OAAI,WAAW,QAAQ,cACrB,kBACC,oCAAC;EACC,OAAO;EACP,YAAY,uBAAuB;EACtB;EACb,iBAAiB;EACjB,OAAO,YAAY,gBAAgB;GACnC,CAEA,CACF;;AAIV,kBAAkB,YAAY;CAE5B,OAAOA,YAAU,UAAU,CAACA,YAAU,QAAQA,YAAU,OAAO,CAAC,CAAC;CAGjE,OAAOA,YAAU;CAGjB,aAAaA,YAAU;CAGvB,gBAAgBA,YAAU,UAAU,CAACA,YAAU,QAAQA,YAAU,OAAO,CAAC,CACtE;CAGH,qBAAqBA,YAAU;CAG/B,YAAYA,YAAU;CAGtB,OAAOA,YAAU;CAClB"}

package/dist/CircularProgress-D9GixVnK.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { CircularProgress } from "@material-ui/core";
+import clsx from "clsx";
+import { makeStyles as makeStyles$1 } from "@material-ui/core/styles";
+
+//#region src/UI/loading/CircularProgress.jsx
+const useStyles = makeStyles$1((theme) => ({
+	circleColorPrimary: { color: theme.palette.primary.main },
+	circleColorSecondary: { color: theme.palette.secondary.main },
+	circleColorSuccess: { color: theme.palette.success.main },
+	circleColorError: { color: theme.palette.error.main },
+	circleColorWarning: { color: theme.palette.warning.main },
+	circleColorInfo: { color: theme.palette.info.main },
+	customColorCircle: (props) => ({ backgroundColor: props.color })
+}));
+const CircularProgress$1 = (props) => {
+	const { variant = "indeterminate", value, color = "primary", ...otherProps } = props;
+	const isPredefinedColor = [
+		"primary",
+		"secondary",
+		"success",
+		"error",
+		"warning",
+		"info"
+	].includes(color);
+	const classes = useStyles({ color });
+	return /* @__PURE__ */ React.createElement(CircularProgress, {
+		...otherProps,
+		variant,
+		value,
+		classes: {
+			root: classes.root,
+			circle: clsx({
+				[classes.circleColorPrimary]: color === "primary",
+				[classes.circleColorSecondary]: color === "secondary",
+				[classes.circleColorSuccess]: color === "success",
+				[classes.circleColorError]: color === "error",
+				[classes.circleColorWarning]: color === "warning",
+				[classes.circleColorInfo]: color === "info",
+				[classes.customColorCircle]: !isPredefinedColor
+			})
+		}
+	});
+};
+
+//#endregion
+export { CircularProgress$1 as t };
+//# sourceMappingURL=CircularProgress-D9GixVnK.js.map

package/dist/CircularProgress-D9GixVnK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress-D9GixVnK.js","names":["makeStyles","CircularProgress","MuiCircularProgress"],"sources":["../src/UI/loading/CircularProgress.jsx"],"sourcesContent":["import React from 'react';\nimport { CircularProgress as MuiCircularProgress } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles(theme => ({\n  circleColorPrimary: {\n    color: theme.palette.primary.main,\n  },\n  circleColorSecondary: {\n    color: theme.palette.secondary.main,\n  },\n  circleColorSuccess: {\n    color: theme.palette.success.main,\n  },\n  circleColorError: {\n    color: theme.palette.error.main,\n  },\n  circleColorWarning: {\n    color: theme.palette.warning.main,\n  },\n  circleColorInfo: {\n    color: theme.palette.info.main,\n  },\n  // Custom circle color class\n  customColorCircle: props => ({\n    backgroundColor: props.color,\n  }),\n}));\n\nexport const CircularProgress = props => {\n  const {\n    variant = 'indeterminate',\n    value,\n    color = 'primary',\n    ...otherProps\n  } = props;\n\n  const isPredefinedColor = [\n    'primary',\n    'secondary',\n    'success',\n    'error',\n    'warning',\n    'info',\n  ].includes(color);\n  const classes = useStyles({ color });\n\n  return (\n    <MuiCircularProgress\n      {...otherProps}\n      variant={variant}\n      value={value}\n      classes={{\n        root: classes.root,\n        circle: clsx({\n          [classes.circleColorPrimary]: color === 'primary',\n          [classes.circleColorSecondary]: color === 'secondary',\n          [classes.circleColorSuccess]: color === 'success',\n          [classes.circleColorError]: color === 'error',\n          [classes.circleColorWarning]: color === 'warning',\n          [classes.circleColorInfo]: color === 'info',\n          [classes.customColorCircle]: !isPredefinedColor,\n        }),\n      }}\n    />\n  );\n};\n"],"mappings":";;;;;;AAKA,MAAM,YAAYA,cAAW,WAAU;CACrC,oBAAoB,EAClB,OAAO,MAAM,QAAQ,QAAQ,MAC9B;CACD,sBAAsB,EACpB,OAAO,MAAM,QAAQ,UAAU,MAChC;CACD,oBAAoB,EAClB,OAAO,MAAM,QAAQ,QAAQ,MAC9B;CACD,kBAAkB,EAChB,OAAO,MAAM,QAAQ,MAAM,MAC5B;CACD,oBAAoB,EAClB,OAAO,MAAM,QAAQ,QAAQ,MAC9B;CACD,iBAAiB,EACf,OAAO,MAAM,QAAQ,KAAK,MAC3B;CAED,oBAAmB,WAAU,EAC3B,iBAAiB,MAAM,OACxB;CACF,EAAE;AAEH,MAAaC,sBAAmB,UAAS;CACvC,MAAM,EACJ,UAAU,iBACV,OACA,QAAQ,WACR,GAAG,eACD;CAEJ,MAAM,oBAAoB;EACxB;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,SAAS,MAAM;CACjB,MAAM,UAAU,UAAU,EAAE,OAAO,CAAC;AAEpC,QACE,oCAACC;EACC,GAAI;EACK;EACF;EACP,SAAS;GACP,MAAM,QAAQ;GACd,QAAQ,KAAK;KACV,QAAQ,qBAAqB,UAAU;KACvC,QAAQ,uBAAuB,UAAU;KACzC,QAAQ,qBAAqB,UAAU;KACvC,QAAQ,mBAAmB,UAAU;KACrC,QAAQ,qBAAqB,UAAU;KACvC,QAAQ,kBAAkB,UAAU;KACpC,QAAQ,oBAAoB,CAAC;IAC/B,CAAC;GACH;GACD"}

package/dist/ClientSideUdpGrid-D5fGumO-.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { ClientSideGrid } from "udp-react-stencil-component-library";
+
+//#region src/UI/templates/newGrid/ClientSideUdpGrid.jsx
+const ClientSideUdpGrid = (props) => {
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(ClientSideGrid, props));
+};
+
+//#endregion
+export { ClientSideUdpGrid as t };
+//# sourceMappingURL=ClientSideUdpGrid-D5fGumO-.js.map

package/dist/ClientSideUdpGrid-D5fGumO-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientSideUdpGrid-D5fGumO-.js","names":[],"sources":["../src/UI/templates/newGrid/ClientSideUdpGrid.jsx"],"sourcesContent":["import React from 'react'\nimport { ClientSideGrid } from 'udp-react-stencil-component-library'\n\nexport const ClientSideUdpGrid = (props) => {\n\n  return (\n   <div >\n      <ClientSideGrid {...props}/>\n   </div>\n  )\n}\n"],"mappings":";;;;AAGA,MAAa,qBAAqB,UAAU;AAE1C,QACC,oCAAC,aACE,oCAAC,gBAAmB,MAAQ,CACzB"}