@pega/cosmos-react-build 2.0.0-dev.9.3 → 2.0.0-rc.3

package/lib/components/FlowModeller/NodeLibrary.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { Icon, Menu, menuHelpers, Popover, SearchInput, useI18n, escapeRegExp } from '@pega/cosmos-react-core';
+import { StyledIcon } from './Node/NodeTemplate.styles';
+const StyledPopover = styled(Popover) `
+  min-width: 40ch;
+`;
+const NodeLibrary = forwardRef(({ show, target, items, onClick }, ref) => {
+    const [search, setSearch] = useState('');
+    const t = useI18n();
+    const searchEleRef = useRef(null);
+    useEffect(() => {
+        if (show) {
+            setSearch('');
+            searchEleRef?.current?.focus();
+        }
+    }, [show, searchEleRef.current]);
+    const searchRegex = useMemo(() => {
+        return new RegExp(escapeRegExp(search));
+    }, [search]);
+    const itemsToRender = useMemo(() => {
+        return menuHelpers.mapTree(search
+            ? menuHelpers.flatten(items).filter(({ primary }) => {
+                return searchRegex.test(primary);
+            })
+            : items, node => {
+            let selectable = false;
+            if (!node.items) {
+                selectable = true;
+            }
+            const nodeItem = node;
+            return {
+                ...node,
+                visual: nodeItem.type ? (_jsx(StyledIcon, { id: node.id, color: nodeItem.type.color, children: _jsx(Icon, { name: nodeItem.type.icon }, void 0) }, void 0)) : undefined,
+                count: node.items ? node.items.length : undefined,
+                secondary: node.secondary,
+                selected: selectable ? !!node.selected : undefined
+            };
+        });
+    }, [items, searchRegex]);
+    const onItemSelect = useCallback((id) => {
+        const selectedNode = menuHelpers.getItem(items, id);
+        onClick(selectedNode);
+    }, [onClick]);
+    return (_jsx(StyledPopover, { show: show, target: target, ref: ref, children: _jsx(Menu, { items: itemsToRender, onItemClick: onItemSelect, header: _jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, searchInputAriaLabel: t('search_nodes'), placeholder: t('search_nodes') }, void 0) }, void 0) }, void 0));
+});
+export default NodeLibrary;
+//# sourceMappingURL=NodeLibrary.js.map

package/lib/components/FlowModeller/NodeLibrary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeLibrary.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/NodeLibrary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  ForwardProps,\n  Icon,\n  Menu,\n  MenuGroupProps,\n  menuHelpers,\n  MenuItemProps,\n  Popover,\n  SearchInput,\n  useI18n,\n  escapeRegExp\n} from '@pega/cosmos-react-core';\n\nimport { NodeLibraryItem } from './Node/Node.types';\nimport { StyledIcon } from './Node/NodeTemplate.styles';\n\nconst StyledPopover: typeof Popover = styled(Popover)`\n  min-width: 40ch;\n`;\n\nexport interface NodeLibraryProps {\n  show: boolean;\n  target: HTMLElement | null;\n  items: NodeLibraryItem[];\n  onClick: (libItem: NodeLibraryItem) => void;\n}\n\nconst NodeLibrary: FC<NodeLibraryProps & ForwardProps> = forwardRef(\n  (\n    { show, target, items, onClick }: PropsWithoutRef<NodeLibraryProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const [search, setSearch] = useState('');\n\n    const t = useI18n();\n    const searchEleRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (show) {\n        setSearch('');\n        searchEleRef?.current?.focus();\n      }\n    }, [show, searchEleRef.current]);\n\n    const searchRegex = useMemo(() => {\n      return new RegExp(escapeRegExp(search));\n    }, [search]);\n\n    const itemsToRender: (MenuItemProps | MenuGroupProps)[] = useMemo(() => {\n      return menuHelpers.mapTree(\n        search\n          ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n              return searchRegex.test(primary);\n            })\n          : items,\n        node => {\n          let selectable = false;\n          if (!node.items) {\n            selectable = true;\n          }\n\n          const nodeItem: NodeLibraryItem = node as NodeLibraryItem;\n          return {\n            ...node,\n            visual: nodeItem.type ? (\n              <StyledIcon id={node.id} color={nodeItem.type.color}>\n                <Icon name={nodeItem.type.icon} />\n              </StyledIcon>\n            ) : undefined,\n            count: node.items ? node.items.length : undefined,\n            secondary: node.secondary,\n            selected: selectable ? !!node.selected : undefined\n          };\n        }\n      );\n    }, [items, searchRegex]);\n\n    const onItemSelect = useCallback(\n      (id: MenuItemProps['id']) => {\n        const selectedNode = menuHelpers.getItem(items, id) as NodeLibraryItem;\n        onClick(selectedNode);\n      },\n      [onClick]\n    );\n\n    return (\n      <StyledPopover show={show} target={target} ref={ref}>\n        <Menu\n          items={itemsToRender}\n          onItemClick={onItemSelect}\n          header={\n            <SearchInput\n              ref={searchEleRef}\n              onSearchChange={setSearch}\n              value={search}\n              searchInputAriaLabel={t('search_nodes')}\n              placeholder={t('search_nodes')}\n            />\n          }\n        />\n      </StyledPopover>\n    );\n  }\n);\n\nexport default NodeLibrary;\n"]}

package/lib/components/FlowModeller/Renderer/AddNode.d.ts

@@ -0,0 +1,10 @@
+import { FC, MouseEvent } from 'react';
+export declare const StyledDot: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+interface AddBtnProps {
+    addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const AddButton: FC<AddBtnProps>;
+export {};
+//# sourceMappingURL=AddNode.d.ts.map

package/lib/components/FlowModeller/Renderer/AddNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddNode.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/AddNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAWvC,eAAO,MAAM,SAAS,mOAKpB,CAAC;AAIH,eAAO,MAAM,aAAa,yGASxB,CAAC;AAIH,eAAO,MAAM,YAAY,qOAcvB,CAAC;AAIH,UAAU,WAAW;IACnB,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,WAAW,CAWrC,CAAC"}

package/lib/components/FlowModeller/Renderer/AddNode.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Button, defaultThemeProp, Flex, Icon, useI18n, StyledTooltip } from '@pega/cosmos-react-core';
+export const StyledDot = styled(Icon)(({ theme }) => {
+    return css `
+    position: absolute;
+    color: ${theme.base.colors.slate.dark};
+  `;
+});
+StyledDot.defaultProps = defaultThemeProp;
+export const StyledWrapper = styled.div(() => {
+    return css `
+    ${StyledTooltip} {
+      ${css `
+        min-width: 12ch;
+        text-align: center;
+      `}
+    }
+  `;
+});
+StyledWrapper.defaultProps = defaultThemeProp;
+export const StyledButton = styled(Button)(({ theme }) => {
+    return css `
+    opacity: 0;
+    top: -0.25rem;
+    border: 0;
+    color: ${theme.base.colors.black};
+    background: ${theme.base.colors.white};
+    &:hover,
+    &:active,
+    &:focus {
+      opacity: 1;
+      background: ${theme.base.colors.white};
+    }
+  `;
+});
+StyledButton.defaultProps = defaultThemeProp;
+export const AddButton = ({ addNodeHandler }) => {
+    const t = useI18n();
+    return (_jsxs(Flex, { container: { justify: 'center' }, as: StyledWrapper, children: [_jsx(StyledDot, { name: 'circle-solid' }, void 0), _jsx(StyledButton, { label: t('add_node'), icon: true, onClick: addNodeHandler, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0));
+};
+//# sourceMappingURL=AddNode.js.map

package/lib/components/FlowModeller/Renderer/AddNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddNode.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/AddNode.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;aAEC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;GACtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAC3C,OAAO,GAAG,CAAA;MACN,aAAa;QACX,GAAG,CAAA;;;OAGJ;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;;aAIC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;kBAClB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;oBAKrB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAM7C,MAAM,CAAC,MAAM,SAAS,GAAoB,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE;IAC/D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,aAAa,aACvD,KAAC,SAAS,IAAC,IAAI,EAAC,cAAc,WAAG,EACjC,KAAC,YAAY,IAAC,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,QAAC,OAAO,EAAE,cAAc,YAC9D,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,WACP,YACV,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { FC, MouseEvent } from 'react';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Flex,\n  Icon,\n  useI18n,\n  StyledTooltip\n} from '@pega/cosmos-react-core';\n\nexport const StyledDot = styled(Icon)(({ theme }) => {\n  return css`\n    position: absolute;\n    color: ${theme.base.colors.slate.dark};\n  `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledWrapper = styled.div(() => {\n  return css`\n    ${StyledTooltip} {\n      ${css`\n        min-width: 12ch;\n        text-align: center;\n      `}\n    }\n  `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)(({ theme }) => {\n  return css`\n    opacity: 0;\n    top: -0.25rem;\n    border: 0;\n    color: ${theme.base.colors.black};\n    background: ${theme.base.colors.white};\n    &:hover,\n    &:active,\n    &:focus {\n      opacity: 1;\n      background: ${theme.base.colors.white};\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\ninterface AddBtnProps {\n  addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const AddButton: FC<AddBtnProps> = ({ addNodeHandler }) => {\n  const t = useI18n();\n\n  return (\n    <Flex container={{ justify: 'center' }} as={StyledWrapper}>\n      <StyledDot name='circle-solid' />\n      <StyledButton label={t('add_node')} icon onClick={addNodeHandler}>\n        <Icon name='plus' />\n      </StyledButton>\n    </Flex>\n  );\n};\n"]}

package/lib/components/FlowModeller/Renderer/Connector.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { RendererConnectorProps } from './Renderer.types';
+declare const Connector: FC<RendererConnectorProps>;
+export default Connector;
+//# sourceMappingURL=Connector.d.ts.map

package/lib/components/FlowModeller/Renderer/Connector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Connector.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Connector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAgE1D,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,sBAAsB,CAoBzC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/FlowModeller/Renderer/Connector.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Flex, Label, useTheme } from '@pega/cosmos-react-core';
+const CURVE_RADIUS = 16;
+const genLine = (points) => {
+    const lineStr = points
+        .map((point, idx, arr) => {
+        const { x, y } = point;
+        const prev = arr[idx - 1];
+        const next = arr[idx + 1];
+        const line = `L${x},${y}`;
+        // if the point is extream end, no need to add a curve
+        if (!prev || !next)
+            return line;
+        // if point is colinear with prev and next, no need to add a curve
+        if (prev.x === next.x || prev.y === next.y)
+            return line;
+        if (point.x > next.x)
+            // BOTTOM-RIGHT ↲
+            return `L${x},${y - CURVE_RADIUS}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 -${CURVE_RADIUS},${CURVE_RADIUS}`;
+        // BOTTOM-LEFT ↳
+        if (point.x < next.x)
+            return `L${x},${y - CURVE_RADIUS}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 ${CURVE_RADIUS},${CURVE_RADIUS}`;
+        // TOP-LEFT ↱
+        if (point.x < prev.x)
+            return `L${x + CURVE_RADIUS},${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 -${CURVE_RADIUS},${CURVE_RADIUS}`;
+        // TOP-RIGHT ↴
+        if (point.x > prev.x)
+            return `L${x - CURVE_RADIUS},${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 ${CURVE_RADIUS},${CURVE_RADIUS}`;
+        return `L${x},${y}`;
+    })
+        .join('');
+    return `M${lineStr.substr(1)}`;
+};
+const StyledLabel = styled(Label)(({ theme }) => {
+    return css `
+    border-radius: ${theme.base['border-radius']};
+    background: ${theme.base.colors.slate.dark};
+    color: ${theme.base.colors.white};
+    text-align: center;
+    padding: calc(0.5 * ${theme.base.spacing});
+  `;
+});
+StyledLabel.defaultProps = defaultThemeProp;
+const Connector = ({ points, labelLayout }) => {
+    const theme = useTheme();
+    return (_jsxs("g", { children: [_jsx("path", { d: genLine(points), stroke: theme.base.colors.slate.dark, strokeWidth: '1', fill: 'none' }, void 0), labelLayout?.value && (_jsx("foreignObject", { x: labelLayout.x - labelLayout.width, y: labelLayout.y + 15, width: labelLayout.width, height: labelLayout.height, children: _jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { children: labelLayout.value }, void 0) }, void 0) }, void 0))] }, void 0));
+};
+export default Connector;
+//# sourceMappingURL=Connector.js.map

package/lib/components/FlowModeller/Renderer/Connector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Connector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Label, useTheme } from '@pega/cosmos-react-core';\n\nimport { RendererConnectorProps } from './Renderer.types';\n\ninterface Points {\n  x: number;\n  y: number;\n}\n\nconst CURVE_RADIUS = 16;\nconst genLine = (points: Points[]) => {\n  const lineStr: string = points\n    .map((point: Points, idx: number, arr: Points[]) => {\n      const { x, y } = point;\n      const prev = arr[idx - 1];\n      const next = arr[idx + 1];\n      const line = `L${x},${y}`;\n\n      // if the point is extream end, no need to add a curve\n      if (!prev || !next) return line;\n\n      // if point is colinear with prev and next, no need to add a curve\n      if (prev.x === next.x || prev.y === next.y) return line;\n\n      if (point.x > next.x)\n        // BOTTOM-RIGHT ↲\n        return `L${x},${\n          y - CURVE_RADIUS\n        }a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 -${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // BOTTOM-LEFT ↳\n      if (point.x < next.x)\n        return `L${x},${\n          y - CURVE_RADIUS\n        }a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 ${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // TOP-LEFT ↱\n      if (point.x < prev.x)\n        return `L${\n          x + CURVE_RADIUS\n        },${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 -${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // TOP-RIGHT ↴\n      if (point.x > prev.x)\n        return `L${\n          x - CURVE_RADIUS\n        },${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 ${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      return `L${x},${y}`;\n    })\n    .join('');\n  return `M${lineStr.substr(1)}`;\n};\n\nconst StyledLabel = styled(Label)(({ theme }) => {\n  return css`\n    border-radius: ${theme.base['border-radius']};\n    background: ${theme.base.colors.slate.dark};\n    color: ${theme.base.colors.white};\n    text-align: center;\n    padding: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nconst Connector: FC<RendererConnectorProps> = ({ points, labelLayout }) => {\n  const theme = useTheme();\n\n  return (\n    <g>\n      <path d={genLine(points)} stroke={theme.base.colors.slate.dark} strokeWidth='1' fill='none' />\n      {labelLayout?.value && (\n        <foreignObject\n          x={labelLayout.x - labelLayout.width}\n          y={labelLayout.y + 15}\n          width={labelLayout.width}\n          height={labelLayout.height}\n        >\n          <Flex container={{ justify: 'center' }}>\n            <StyledLabel>{labelLayout.value}</StyledLabel>\n          </Flex>\n        </foreignObject>\n      )}\n    </g>\n  );\n};\n\nexport default Connector;\n"]}

package/lib/components/FlowModeller/Renderer/ConnectorsContainer.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { RendererConnectorProps } from './Renderer.types';
+export interface ConnectorsContainerProps {
+    items: RendererConnectorProps[];
+    dimensions: {
+        width: number;
+        height: number;
+    };
+}
+declare const ConnectorsContainer: FC<ConnectorsContainerProps>;
+export default ConnectorsContainer;
+//# sourceMappingURL=ConnectorsContainer.d.ts.map

package/lib/components/FlowModeller/Renderer/ConnectorsContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectorsContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/ConnectorsContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAQ1D,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,sBAAsB,EAAE,CAAC;IAChC,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,QAAA,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAerD,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/FlowModeller/Renderer/ConnectorsContainer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import Connector from './Connector';
+const StyledConnectorContainer = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const ConnectorsContainer = ({ items, dimensions }) => {
+    return (_jsx(StyledConnectorContainer, { children: _jsx("svg", { width: dimensions.width, height: dimensions.height, xmlns: 'http://www.w3.org/2000/svg', viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: items.map(item => {
+                return _jsx(Connector, { ...item }, item.id);
+            }) }, void 0) }, void 0));
+};
+export default ConnectorsContainer;
+//# sourceMappingURL=ConnectorsContainer.js.map

package/lib/components/FlowModeller/Renderer/ConnectorsContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectorsContainer.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/ConnectorsContainer.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,SAAS,MAAM,aAAa,CAAC;AAGpC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI1C,CAAC;AAUF,MAAM,mBAAmB,GAAiC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE;IAClF,OAAO,CACL,KAAC,wBAAwB,cACvB,cACE,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,MAAM,EAAE,UAAU,CAAC,MAAM,EACzB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,OAAO,UAAU,CAAC,KAAK,IAAI,UAAU,CAAC,MAAM,EAAE,YAEtD,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAChB,OAAO,KAAC,SAAS,OAAmB,IAAI,IAAjB,IAAI,CAAC,EAAE,CAAc,CAAC;YAC/C,CAAC,CAAC,WACE,WACmB,CAC5B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled from 'styled-components';\n\nimport Connector from './Connector';\nimport { RendererConnectorProps } from './Renderer.types';\n\nconst StyledConnectorContainer = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\n\nexport interface ConnectorsContainerProps {\n  items: RendererConnectorProps[];\n  dimensions: {\n    width: number;\n    height: number;\n  };\n}\n\nconst ConnectorsContainer: FC<ConnectorsContainerProps> = ({ items, dimensions }) => {\n  return (\n    <StyledConnectorContainer>\n      <svg\n        width={dimensions.width}\n        height={dimensions.height}\n        xmlns='http://www.w3.org/2000/svg'\n        viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}\n      >\n        {items.map(item => {\n          return <Connector key={item.id} {...item} />;\n        })}\n      </svg>\n    </StyledConnectorContainer>\n  );\n};\n\nexport default ConnectorsContainer;\n"]}

package/lib/components/FlowModeller/Renderer/Node.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { RendererNodeProps } from './Renderer.types';
+declare const Node: FC<RendererNodeProps>;
+export default Node;
+//# sourceMappingURL=Node.d.ts.map

package/lib/components/FlowModeller/Renderer/Node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAgBrD,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAM/B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/FlowModeller/Renderer/Node.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Flex } from '@pega/cosmos-react-core';
+const StyledNodeWrapper = styled.div(({ dimensions, position }) => {
+    return css `
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: ${dimensions.width}px;
+    height: ${dimensions.height}px;
+    transform: translate(${position.x}px, ${position.y}px);
+  `;
+});
+const Node = ({ children, ...restprops }) => {
+    return (_jsx(Flex, { as: StyledNodeWrapper, ...restprops, container: { justify: 'center' }, children: _jsx("div", { children: children }, void 0) }, void 0));
+};
+export default Node;
+//# sourceMappingURL=Node.js.map

package/lib/components/FlowModeller/Renderer/Node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Node.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Node.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAI/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAGjC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9B,OAAO,GAAG,CAAA;;;;aAIC,UAAU,CAAC,KAAK;cACf,UAAU,CAAC,MAAM;2BACJ,QAAQ,CAAC,CAAC,OAAO,QAAQ,CAAC,CAAC;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,IAAI,GAA0B,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IACjE,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,KAAM,SAAS,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAC1E,wBAAM,QAAQ,WAAO,WAChB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex } from '@pega/cosmos-react-core';\n\nimport { RendererNodeProps } from './Renderer.types';\n\nconst StyledNodeWrapper = styled.div<{\n  dimensions: RendererNodeProps['dimensions'];\n  position: RendererNodeProps['position'];\n}>(({ dimensions, position }) => {\n  return css`\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: ${dimensions.width}px;\n    height: ${dimensions.height}px;\n    transform: translate(${position.x}px, ${position.y}px);\n  `;\n});\n\nconst Node: FC<RendererNodeProps> = ({ children, ...restprops }) => {\n  return (\n    <Flex as={StyledNodeWrapper} {...restprops} container={{ justify: 'center' }}>\n      <div>{children}</div>\n    </Flex>\n  );\n};\n\nexport default Node;\n"]}

package/lib/components/FlowModeller/Renderer/NodesContainer.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { RendererNodeProps } from './Renderer.types';
+export interface NodesContainerProps {
+    items: RendererNodeProps[];
+}
+declare const NodesContainer: FC<NodesContainerProps>;
+export default NodesContainer;
+//# sourceMappingURL=NodesContainer.d.ts.map

package/lib/components/FlowModeller/Renderer/NodesContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodesContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/NodesContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAQrD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,iBAAiB,EAAE,CAAC;CAC5B;AAED,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAQ3C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/FlowModeller/Renderer/NodesContainer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import Node from './Node';
+const StyledNodeContainer = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const NodesContainer = ({ items }) => {
+    return (_jsx(StyledNodeContainer, { children: items.map(item => {
+            return _jsx(Node, { ...item }, item.id);
+        }) }, void 0));
+};
+export default NodesContainer;
+//# sourceMappingURL=NodesContainer.js.map

package/lib/components/FlowModeller/Renderer/NodesContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodesContainer.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/NodesContainer.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,IAAI,MAAM,QAAQ,CAAC;AAG1B,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIrC,CAAC;AAMF,MAAM,cAAc,GAA4B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,CACL,KAAC,mBAAmB,cACjB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,KAAC,IAAI,OAAmB,IAAI,IAAjB,IAAI,CAAC,EAAE,CAAc,CAAC;QAC1C,CAAC,CAAC,WACkB,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled from 'styled-components';\n\nimport Node from './Node';\nimport { RendererNodeProps } from './Renderer.types';\n\nconst StyledNodeContainer = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\n\nexport interface NodesContainerProps {\n  items: RendererNodeProps[];\n}\n\nconst NodesContainer: FC<NodesContainerProps> = ({ items }) => {\n  return (\n    <StyledNodeContainer>\n      {items.map(item => {\n        return <Node key={item.id} {...item} />;\n      })}\n    </StyledNodeContainer>\n  );\n};\n\nexport default NodesContainer;\n"]}

package/lib/components/FlowModeller/Renderer/Renderer.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { RendererProps } from './Renderer.types';
+declare const Renderer: FC<RendererProps>;
+export default Renderer;
+//# sourceMappingURL=Renderer.d.ts.map

package/lib/components/FlowModeller/Renderer/Renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAUjD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAU/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/FlowModeller/Renderer/Renderer.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import ConnectorsContainer from './ConnectorsContainer';
+import NodesContainer from './NodesContainer';
+import GraphLayout from './Utils/GraphLayout';
+const StyledWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
+const Renderer = ({ graphData }) => {
+    // apply the plotted positions
+    const graphDimensions = GraphLayout.plot(graphData);
+    return (_jsxs(StyledWrapper, { children: [_jsx(ConnectorsContainer, { items: graphData.connectors, dimensions: graphDimensions }, void 0), _jsx(NodesContainer, { items: graphData.nodes }, void 0)] }, void 0));
+};
+export default Renderer;
+//# sourceMappingURL=Renderer.js.map

package/lib/components/FlowModeller/Renderer/Renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Renderer.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,WAAW,MAAM,qBAAqB,CAAC;AAE9C,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI/B,CAAC;AAEF,MAAM,QAAQ,GAAsB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACpD,8BAA8B;IAC9B,MAAM,eAAe,GAAG,WAAW,CAAC,IAAI,CAA6B,SAAS,CAAC,CAAC;IAEhF,OAAO,CACL,MAAC,aAAa,eACZ,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,CAAC,UAAU,EAAE,UAAU,EAAE,eAAe,WAAI,EACjF,KAAC,cAAc,IAAC,KAAK,EAAE,SAAS,CAAC,KAAK,WAAI,YAC5B,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled from 'styled-components';\n\nimport ConnectorsContainer from './ConnectorsContainer';\nimport { RendererProps } from './Renderer.types';\nimport NodesContainer from './NodesContainer';\nimport GraphLayout from './Utils/GraphLayout';\n\nconst StyledWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\n\nconst Renderer: FC<RendererProps> = ({ graphData }) => {\n  // apply the plotted positions\n  const graphDimensions = GraphLayout.plot<RendererProps['graphData']>(graphData);\n\n  return (\n    <StyledWrapper>\n      <ConnectorsContainer items={graphData.connectors} dimensions={graphDimensions} />\n      <NodesContainer items={graphData.nodes} />\n    </StyledWrapper>\n  );\n};\n\nexport default Renderer;\n"]}

package/lib/components/FlowModeller/Renderer/Renderer.types.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { GraphData } from './Utils/Graph';
+import { PlottedGraphConnector, PlottedGraphNode } from './Utils/GraphLayout';
+export interface AddNodeHandlerParams {
+    refType: 'node' | 'connector';
+    refId: string;
+}
+export interface RendererNodeProps extends PlottedGraphNode {
+    children: ReactNode;
+}
+export interface RendererConnectorProps extends PlottedGraphConnector {
+    children?: ReactNode;
+}
+export interface RendererProps {
+    graphData: GraphData<RendererNodeProps, RendererConnectorProps>;
+    disableAutoLayout?: boolean;
+}
+//# sourceMappingURL=Renderer.types.d.ts.map

package/lib/components/FlowModeller/Renderer/Renderer.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Renderer.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,sBAAuB,SAAQ,qBAAqB;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,SAAS,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,CAAC;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B"}

package/lib/components/FlowModeller/Renderer/Renderer.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Renderer.types.js.map

package/lib/components/FlowModeller/Renderer/Renderer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Renderer.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nimport { GraphData } from './Utils/Graph';\nimport { PlottedGraphConnector, PlottedGraphNode } from './Utils/GraphLayout';\n\nexport interface AddNodeHandlerParams {\n  refType: 'node' | 'connector';\n  refId: string;\n}\n\nexport interface RendererNodeProps extends PlottedGraphNode {\n  children: ReactNode;\n}\n\nexport interface RendererConnectorProps extends PlottedGraphConnector {\n  children?: ReactNode;\n}\n\nexport interface RendererProps {\n  graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n  disableAutoLayout?: boolean;\n}\n"]}

package/lib/components/FlowModeller/Renderer/Utils/Graph.d.ts

@@ -0,0 +1,51 @@
+export interface ConnectorProps<T = unknown> {
+    id: string;
+    fromNodeId: string;
+    toNodeId: string;
+    label?: string;
+    data?: T;
+}
+export interface Node<T = unknown> {
+    id: string;
+    data?: T;
+}
+export interface GraphData<T extends Node, U extends ConnectorProps> {
+    nodes: T[];
+    connectors: U[];
+}
+export declare class DirectedGraph<T extends Node = Node, U extends ConnectorProps = ConnectorProps, D1 = unknown, // Can be any here.. because nodeData is optional and each node may need to carry its own Data type.
+D2 = unknown> {
+    private nodes;
+    private connectors;
+    private nodeData;
+    private connectorData;
+    private inConnectors;
+    private prevNodesCount;
+    private outConnectors;
+    private nextNodesCount;
+    private nodeCount;
+    private connectorsCount;
+    constructor(graphData?: GraphData<T, U>);
+    getGraphData(): GraphData<T, U>;
+    getNodeCount(): number;
+    getNodes(): T[];
+    addNode(node: T, data?: D1): DirectedGraph;
+    getNode(nodeId: string): T;
+    hasNode(nodeId: string): boolean;
+    deleteNode(nodeId: string, ignoreConnectors?: boolean): DirectedGraph<T, U>;
+    getPrevNodes(nodeId: string): T[];
+    getNextNodes(nodeId: string): T[];
+    getPrevNodesCount(nodeId: string): number;
+    getNextNodesCount(nodeId: string): number;
+    isLeaf(nodeId: string): boolean;
+    getConnectorsCount(): number;
+    getConnectors(): U[];
+    addConnector(connector: U, data?: D2): DirectedGraph<T, U>;
+    hasConnector(id: string): boolean;
+    getConnector(id: string): U;
+    removeConnector(id: string): DirectedGraph<T, U>;
+    getInConnectors(toNodeId: string, fromNodeId?: string): ConnectorProps[];
+    getOutConnectors(fromNodeId: string, toNodeId?: string): ConnectorProps[];
+    getAllNodeConnectors(nodeId: string): ConnectorProps<unknown>[] | undefined;
+}
+//# sourceMappingURL=Graph.d.ts.map

package/lib/components/FlowModeller/Renderer/Utils/Graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Graph.d.ts","sourceRoot":"","sources":["../../../../../src/components/FlowModeller/Renderer/Utils/Graph.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,OAAO;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,CAAC,CAAC;CACV;AAED,MAAM,WAAW,IAAI,CAAC,CAAC,GAAG,OAAO;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,CAAC,CAAC;CACV;AAED,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,cAAc;IACjE,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,CAAC,EAAE,CAAC;CACjB;AAED,qBAAa,aAAa,CACxB,CAAC,SAAS,IAAI,GAAG,IAAI,EACrB,CAAC,SAAS,cAAc,GAAG,cAAc,EACzC,EAAE,GAAG,OAAO,EAAE,oGAAoG;AAClH,EAAE,GAAG,OAAO;IAEZ,OAAO,CAAC,KAAK,CAAyB;IACtC,OAAO,CAAC,UAAU,CAAyB;IAG3C,OAAO,CAAC,QAAQ,CAAoC;IACpD,OAAO,CAAC,aAAa,CAAoC;IAEzD,OAAO,CAAC,YAAY,CAAyC;IAC7D,OAAO,CAAC,cAAc,CAA8C;IAEpE,OAAO,CAAC,aAAa,CAAyC;IAC9D,OAAO,CAAC,cAAc,CAA8C;IAEpE,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,eAAe,CAAK;gBAEhB,SAAS,GAAE,SAAS,CAAC,CAAC,EAAE,CAAC,CAAiC;IAOtE,YAAY,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;IAO/B,YAAY,IAAI,MAAM;IAItB,QAAQ;IAIR,OAAO,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,aAAa;IAoB1C,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC;IAI1B,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAIhC,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,UAAQ,GAAG,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;IAyBzE,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE;IAMjC,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE;IAMjC,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAOzC,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAOzC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAK/B,kBAAkB,IAAI,MAAM;IAI5B,aAAa;IAIb,YAAY,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;IAgD1D,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAIjC,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,CAAC;IAI3B,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;IA+BhD,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE;IAkBxE,gBAAgB,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE;IAkBzE,oBAAoB,CAAC,MAAM,EAAE,MAAM;CAOpC"}