@fluentui/react-charts 9.3.21 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/lib/components/Legends/Legends.js

@@ -1,323 +0,0 @@
-'use client';
-import * as React from 'react';
-import { Button } from '@fluentui/react-button';
-import { Shape } from './shape';
-import { useLegendStyles } from './useLegendsStyles.styles';
-import { Overflow, OverflowItem } from '@fluentui/react-overflow';
-import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { OverflowMenu } from './OverflowMenu';
-import { tokens } from '@fluentui/react-theme';
-import { cloneLegendsToSVG } from '../../utilities/image-export-utils';
-import { mergeClasses } from '@griffel/react';
-export const Legends = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
-    /** Boolean variable to check if one or more legends are selected */ let _isLegendSelected = false;
-    const _rootElem = React.useRef(null);
-    // set states separately for each instance of the component
-    const [activeLegend, setActiveLegend] = React.useState('');
-    const [selectedLegends, setSelectedLegends] = React.useState({});
-    const focusAttributes = useFocusableGroup();
-    const arrowAttributes = useArrowNavigationGroup({
-        axis: 'horizontal',
-        memorizeCurrent: true
-    });
-    const classes = useLegendStyles(props);
-    const toSVG = React.useCallback((svgWidth, isRTL = false)=>{
-        return cloneLegendsToSVG(props.legends, svgWidth, {
-            selectedLegends,
-            centerLegends: !!props.centerLegends,
-            textClassName: classes.text,
-            isRTL
-        }, _rootElem.current);
-    }, [
-        props.legends,
-        props.centerLegends,
-        selectedLegends,
-        classes.text
-    ]);
-    React.useImperativeHandle(props.legendRef, ()=>({
-            toSVG
-        }));
-    React.useEffect(()=>{
-        var _props_selectedLegends;
-        const initialSelectedLegends = (_props_selectedLegends = props.selectedLegends) !== null && _props_selectedLegends !== void 0 ? _props_selectedLegends : props.defaultSelectedLegends;
-        var _props_selectedLegend;
-        const initialSelectedLegend = (_props_selectedLegend = props.selectedLegend) !== null && _props_selectedLegend !== void 0 ? _props_selectedLegend : props.defaultSelectedLegend;
-        let selectedLegendsState = {};
-        if (props.canSelectMultipleLegends) {
-            var _this;
-            selectedLegendsState = ((_this = initialSelectedLegends !== null && initialSelectedLegends !== void 0 ? initialSelectedLegends : []) === null || _this === void 0 ? void 0 : _this.reduce(// eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (combineDict, key)=>({
-                    [key]: true,
-                    ...combineDict
-                }), {})) || {};
-            setSelectedLegends(selectedLegendsState);
-        } else if (initialSelectedLegend !== undefined) {
-            selectedLegendsState = {
-                [initialSelectedLegend]: true
-            };
-            setSelectedLegends(selectedLegendsState);
-        }
-    }, [
-        props.canSelectMultipleLegends,
-        props.defaultSelectedLegend,
-        props.defaultSelectedLegends,
-        props.selectedLegend,
-        props.selectedLegends
-    ]);
-    _isLegendSelected = Object.keys(selectedLegends).length > 0;
-    const dataToRender = _generateData();
-    const { overflowStyles, allowFocusOnLegends = true, canSelectMultipleLegends = false } = props;
-    const itemIds = dataToRender.map((_item, index)=>index.toString());
-    const overflowHoverCardLegends = [];
-    dataToRender.map((legend, index)=>{
-        const hoverCardElement = _renderButton(legend, index);
-        overflowHoverCardLegends.push(hoverCardElement);
-    });
-    const overflowString = props.overflowText ? props.overflowText : 'more';
-    return props.enabledWrapLines ? renderWrappedLegends() : renderLegends();
-    function renderLegends() {
-        return /*#__PURE__*/ React.createElement("div", {
-            ...focusAttributes,
-            ...arrowAttributes,
-            ...allowFocusOnLegends && {
-                role: 'listbox',
-                'aria-label': 'Legends',
-                'aria-multiselectable': canSelectMultipleLegends
-            },
-            className: classes.root,
-            ref: _rootElem
-        }, /*#__PURE__*/ React.createElement(Overflow, null, /*#__PURE__*/ React.createElement("div", {
-            className: classes.resizableArea,
-            style: {
-                textAlign: props.centerLegends ? 'center' : 'unset'
-            }
-        }, dataToRender.map((item, id)=>/*#__PURE__*/ React.createElement(OverflowItem, {
-                key: id,
-                id: id.toString()
-            }, _renderButton(item))), /*#__PURE__*/ React.createElement(OverflowMenu, {
-            itemIds: itemIds,
-            title: `${overflowString}`,
-            items: overflowHoverCardLegends
-        }))));
-    }
-    function renderWrappedLegends() {
-        return /*#__PURE__*/ React.createElement("div", {
-            ...focusAttributes,
-            ...arrowAttributes,
-            ...allowFocusOnLegends && {
-                role: 'listbox',
-                'aria-label': 'Legends',
-                'aria-multiselectable': canSelectMultipleLegends
-            },
-            style: {
-                justifyContent: props.centerLegends ? 'center' : 'unset',
-                flexWrap: 'wrap',
-                ...overflowStyles
-            },
-            className: classes.root,
-            ref: _rootElem
-        }, /*#__PURE__*/ React.createElement("div", {
-            className: classes.resizableArea,
-            style: {
-                display: 'flex',
-                flexWrap: 'wrap',
-                overflow: 'auto'
-            }
-        }, dataToRender.map((item)=>/*#__PURE__*/ React.createElement("div", {
-                className: mergeClasses(classes.legendContainer, item.legendAnnotation && classes.annotation),
-                key: item.key
-            }, _renderButton(item), item.legendAnnotation && /*#__PURE__*/ React.createElement("div", null, item.legendAnnotation())))));
-    }
-    function _generateData() {
-        const { shape } = props;
-        const dataItems = props.legends.map((legend, index)=>{
-            return {
-                /* ...(allowFocusOnLegends && {
-            nativeButtonProps: getIntrinsicElementProps(
-              'div',
-              {
-                legend,
-                ...buttonProperties,
-              },
-              ['title'],
-            ),
-            'aria-setsize': props.legends.length,
-            'aria-posinset': index + 1,
-          }), */ title: legend.title,
-                action: legend.action,
-                hoverAction: legend.hoverAction,
-                onMouseOutAction: legend.onMouseOutAction,
-                color: legend.color,
-                shape: shape ? shape : legend.shape,
-                stripePattern: legend.stripePattern,
-                isLineLegendInBarChart: legend.isLineLegendInBarChart,
-                opacity: legend.opacity,
-                key: index,
-                legendAnnotation: legend.legendAnnotation
-            };
-        });
-        return dataItems;
-    }
-    /**
-     * Determine whether the component is in "controlled" mode for selections, where the selected legend(s) are
-     * determined entirely by props passed in from the parent component.
-     */ function _isInControlledMode() {
-        return props.canSelectMultipleLegends ? props.selectedLegends !== undefined : props.selectedLegend !== undefined;
-    }
-    /**
-     * Get the new selected legends based on the legend that was clicked when multi-select is enabled.
-     * @param legend The legend that was clicked
-     * @returns An object with the new selected legend(s) state data.
-     */ function _getNewSelectedLegendsForMultiselect(legend) {
-        let legendsSelected = {
-            ...selectedLegends
-        };
-        if (legendsSelected[legend.title]) {
-            // Delete entry for the deselected legend to make
-            // the number of keys equal to the number of selected legends
-            delete legendsSelected[legend.title];
-        } else {
-            legendsSelected[legend.title] = true;
-            // Clear set if all legends are selected
-            if (Object.keys(legendsSelected).length === props.legends.length) {
-                legendsSelected = {};
-            }
-        }
-        return legendsSelected;
-    }
-    /**
-     * Get the new selected legends based on the legend that was clicked when single-select is enabled.
-     * @param legend The legend that was clicked
-     * @returns An object with the new selected legend state data.
-     */ function _getNewSelectedLegendsForSingleSelect(legend) {
-        return selectedLegends[legend.title] ? {} : {
-            [legend.title]: true
-        };
-    }
-    function _onClick(legend, event) {
-        var _props_onChange, _legend_action;
-        const { canSelectMultipleLegends = false } = props;
-        const nextSelectedLegends = canSelectMultipleLegends ? _getNewSelectedLegendsForMultiselect(legend) : _getNewSelectedLegendsForSingleSelect(legend);
-        if (!_isInControlledMode()) {
-            setSelectedLegends(nextSelectedLegends);
-        }
-        (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, Object.keys(nextSelectedLegends), event, legend);
-        (_legend_action = legend.action) === null || _legend_action === void 0 ? void 0 : _legend_action.call(legend);
-    }
-    function _onHoverOverLegend(legend) {
-        if (legend.hoverAction) {
-            setActiveLegend(legend.title);
-            legend.hoverAction();
-        }
-    }
-    function _onLeave(legend) {
-        if (legend.onMouseOutAction) {
-            setActiveLegend('');
-            legend.onMouseOutAction();
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function _renderButton(data, index) {
-        const { allowFocusOnLegends = true } = props;
-        const legend = {
-            title: data.title,
-            color: data.color,
-            shape: data.shape,
-            action: data.action,
-            hoverAction: data.hoverAction,
-            onMouseOutAction: data.onMouseOutAction,
-            stripePattern: data.stripePattern,
-            isLineLegendInBarChart: data.isLineLegendInBarChart,
-            opacity: data.opacity
-        };
-        const color = _getColor(legend.title, legend.color);
-        const onClickHandler = (event)=>{
-            _onClick(legend, event);
-        };
-        const onHoverHandler = ()=>{
-            _onHoverOverLegend(legend);
-        };
-        const onMouseOut = ()=>{
-            _onLeave(legend);
-        };
-        const shape = _getShape(legend, color);
-        return /*#__PURE__*/ React.createElement(Button, {
-            ...allowFocusOnLegends && {
-                'aria-selected': !!selectedLegends[legend.title],
-                role: 'option',
-                'aria-label': `${legend.title}`,
-                'aria-setsize': data['aria-setsize'],
-                'aria-posinset': data['aria-posinset']
-            },
-            ...data.nativeButtonProps && {
-                ...data.nativeButtonProps
-            },
-            key: index,
-            className: classes.legend,
-            onClick: onClickHandler,
-            onMouseOver: onHoverHandler,
-            onMouseOut: onMouseOut,
-            onFocus: onHoverHandler,
-            onBlur: onMouseOut,
-            appearance: 'outline',
-            size: "small",
-            style: {
-                '--rect-height': legend.isLineLegendInBarChart ? '4px' : '12px',
-                '--rect-backgroundColor': legend.stripePattern ? '' : color,
-                '--rect-borderColor': legend.color ? legend.color : tokens.colorNeutralStroke1,
-                '--rect-content': legend.stripePattern ? `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)` : ''
-            }
-        }, shape, /*#__PURE__*/ React.createElement("div", {
-            className: classes.text,
-            style: {
-                opacity: color === tokens.colorNeutralBackground1 ? '0.67' : ''
-            }
-        }, legend.title));
-    }
-    function _getShape(legend, color) {
-        const svgParentProps = {
-            className: classes.shape
-        };
-        const svgChildProps = {
-            fill: color,
-            strokeWidth: 2,
-            stroke: legend.color
-        };
-        return /*#__PURE__*/ React.createElement(Shape, {
-            svgProps: svgParentProps,
-            pathProps: svgChildProps,
-            shape: legend.shape,
-            classNameForNonSvg: classes.rect,
-            style: {
-                height: legend.isLineLegendInBarChart ? '4px' : '12px',
-                backgroundColor: legend.stripePattern ? '' : color,
-                borderColor: legend.color ? legend.color : tokens.colorNeutralStroke1,
-                content: legend.stripePattern ? `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)` : '',
-                '--rect-content-high-contrast': `linear-gradient(to right, ${color}, ${color})`,
-                '--rect-opacity-high-contrast': color === tokens.colorNeutralBackground1 ? '0.6' : ''
-            }
-        });
-    }
-    function _getColor(title, color) {
-        let legendColor = color;
-        // if one or more legends are selected
-        if (_isLegendSelected) {
-            // if the given legend (title) is one of the selected legends
-            if (selectedLegends[title]) {
-                legendColor = color;
-            } else {
-                legendColor = tokens.colorNeutralBackground1;
-            }
-        } else {
-            // if the given legend is hovered
-            // or none of the legends is hovered
-            if (activeLegend === title || activeLegend === '') {
-                legendColor = color;
-            } else {
-                legendColor = tokens.colorNeutralBackground1;
-            }
-        }
-        return legendColor;
-    }
-});
-Legends.displayName = 'Legends';

package/lib/components/Legends/Legends.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Legends/Legends.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { Button } from '@fluentui/react-button';\nimport type { Legend, LegendsProps, LegendShape } from './Legends.types';\nimport { Shape } from './shape';\nimport { useLegendStyles } from './useLegendsStyles.styles';\nimport { Overflow, OverflowItem } from '@fluentui/react-overflow';\nimport { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { OverflowMenu } from './OverflowMenu';\nimport { tokens } from '@fluentui/react-theme';\nimport { cloneLegendsToSVG } from '../../utilities/image-export-utils';\nimport { mergeClasses } from '@griffel/react';\n\n// This is an internal interface used for rendering the legends with unique key\ninterface LegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  name?: string;\n  title: string;\n  action: VoidFunction;\n  hoverAction: VoidFunction;\n  onMouseOutAction: VoidFunction;\n  color: string;\n  shape?: LegendShape;\n  key: number;\n  opacity?: number;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n  legendAnnotation?: () => React.ReactNode;\n}\n\ninterface LegendMap {\n  [key: string]: boolean;\n}\n\nexport interface LegendState {\n  activeLegend: string;\n  /** Set of legends selected, both for multiple selection and single selection */\n  selectedLegends: LegendMap;\n}\nexport const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<HTMLDivElement, LegendsProps>(\n  (props, forwardedRef) => {\n    /** Boolean variable to check if one or more legends are selected */\n    let _isLegendSelected = false;\n    const _rootElem = React.useRef<HTMLDivElement | null>(null);\n\n    // set states separately for each instance of the component\n    const [activeLegend, setActiveLegend] = React.useState('');\n    const [selectedLegends, setSelectedLegends] = React.useState<LegendMap>({});\n    const focusAttributes = useFocusableGroup();\n    const arrowAttributes = useArrowNavigationGroup({ axis: 'horizontal', memorizeCurrent: true });\n    const classes = useLegendStyles(props);\n    const toSVG = React.useCallback(\n      (svgWidth: number, isRTL: boolean = false) => {\n        return cloneLegendsToSVG(\n          props.legends,\n          svgWidth,\n          {\n            selectedLegends,\n            centerLegends: !!props.centerLegends,\n            textClassName: classes.text!,\n            isRTL,\n          },\n          _rootElem.current,\n        );\n      },\n      [props.legends, props.centerLegends, selectedLegends, classes.text],\n    );\n\n    React.useImperativeHandle(props.legendRef, () => ({\n      toSVG,\n    }));\n\n    React.useEffect(() => {\n      const initialSelectedLegends = props.selectedLegends ?? props.defaultSelectedLegends;\n      const initialSelectedLegend = props.selectedLegend ?? props.defaultSelectedLegend;\n      let selectedLegendsState = {};\n      if (props.canSelectMultipleLegends) {\n        selectedLegendsState =\n          (initialSelectedLegends ?? [])?.reduce(\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (combineDict: any, key: any) => ({ [key]: true, ...combineDict }),\n            {},\n          ) || {};\n        setSelectedLegends(selectedLegendsState);\n      } else if (initialSelectedLegend !== undefined) {\n        selectedLegendsState = { [initialSelectedLegend]: true };\n        setSelectedLegends(selectedLegendsState);\n      }\n    }, [\n      props.canSelectMultipleLegends,\n      props.defaultSelectedLegend,\n      props.defaultSelectedLegends,\n      props.selectedLegend,\n      props.selectedLegends,\n    ]);\n\n    _isLegendSelected = Object.keys(selectedLegends).length > 0;\n    const dataToRender = _generateData();\n    const { overflowStyles, allowFocusOnLegends = true, canSelectMultipleLegends = false } = props;\n    const itemIds = dataToRender.map((_item, index) => index.toString());\n    const overflowHoverCardLegends: JSXElement[] = [];\n    dataToRender.map((legend, index) => {\n      const hoverCardElement = _renderButton(legend, index);\n      overflowHoverCardLegends.push(hoverCardElement);\n    });\n    const overflowString = props.overflowText ? props.overflowText : 'more';\n    return props.enabledWrapLines ? renderWrappedLegends() : renderLegends();\n\n    function renderLegends(): JSXElement {\n      return (\n        <div\n          {...focusAttributes}\n          {...arrowAttributes}\n          {...(allowFocusOnLegends && {\n            role: 'listbox',\n            'aria-label': 'Legends',\n            'aria-multiselectable': canSelectMultipleLegends,\n          })}\n          className={classes.root}\n          ref={_rootElem}\n        >\n          <Overflow>\n            <div className={classes.resizableArea} style={{ textAlign: props.centerLegends ? 'center' : 'unset' }}>\n              {dataToRender.map((item, id) => (\n                <OverflowItem key={id} id={id.toString()}>\n                  {_renderButton(item)}\n                </OverflowItem>\n              ))}\n              <OverflowMenu itemIds={itemIds} title={`${overflowString}`} items={overflowHoverCardLegends} />\n            </div>\n          </Overflow>\n        </div>\n      );\n    }\n\n    function renderWrappedLegends(): JSXElement {\n      return (\n        <div\n          {...focusAttributes}\n          {...arrowAttributes}\n          {...(allowFocusOnLegends && {\n            role: 'listbox',\n            'aria-label': 'Legends',\n            'aria-multiselectable': canSelectMultipleLegends,\n          })}\n          style={{ justifyContent: props.centerLegends ? 'center' : 'unset', flexWrap: 'wrap', ...overflowStyles }}\n          className={classes.root}\n          ref={_rootElem}\n        >\n          <div className={classes.resizableArea} style={{ display: 'flex', flexWrap: 'wrap', overflow: 'auto' }}>\n            {dataToRender.map(item => (\n              <div\n                className={mergeClasses(classes.legendContainer, item.legendAnnotation && classes.annotation)}\n                key={item.key}\n              >\n                {_renderButton(item)}\n                {item.legendAnnotation && <div>{item.legendAnnotation()}</div>}\n              </div>\n            ))}\n          </div>\n        </div>\n      );\n    }\n\n    function _generateData(): LegendItem[] {\n      const { /*allowFocusOnLegends = true,*/ shape } = props;\n      const dataItems: LegendItem[] = props.legends.map((legend: Legend, index: number) => {\n        return {\n          /* ...(allowFocusOnLegends && {\n            nativeButtonProps: getIntrinsicElementProps(\n              'div',\n              {\n                legend,\n                ...buttonProperties,\n              },\n              ['title'],\n            ),\n            'aria-setsize': props.legends.length,\n            'aria-posinset': index + 1,\n          }), */\n          title: legend.title,\n          action: legend.action!,\n          hoverAction: legend.hoverAction!,\n          onMouseOutAction: legend.onMouseOutAction!,\n          color: legend.color,\n          shape: shape ? shape : legend.shape,\n          stripePattern: legend.stripePattern,\n          isLineLegendInBarChart: legend.isLineLegendInBarChart,\n          opacity: legend.opacity,\n          key: index,\n          legendAnnotation: legend.legendAnnotation,\n        };\n      });\n      return dataItems;\n    }\n\n    /**\n     * Determine whether the component is in \"controlled\" mode for selections, where the selected legend(s) are\n     * determined entirely by props passed in from the parent component.\n     */\n    function _isInControlledMode(): boolean {\n      return props.canSelectMultipleLegends ? props.selectedLegends !== undefined : props.selectedLegend !== undefined;\n    }\n\n    /**\n     * Get the new selected legends based on the legend that was clicked when multi-select is enabled.\n     * @param legend The legend that was clicked\n     * @returns An object with the new selected legend(s) state data.\n     */\n    function _getNewSelectedLegendsForMultiselect(legend: Legend): { [key: string]: boolean } {\n      let legendsSelected = { ...selectedLegends };\n      if (legendsSelected[legend.title]) {\n        // Delete entry for the deselected legend to make\n        // the number of keys equal to the number of selected legends\n        delete legendsSelected[legend.title];\n      } else {\n        legendsSelected[legend.title] = true;\n        // Clear set if all legends are selected\n        if (Object.keys(legendsSelected).length === props.legends.length) {\n          legendsSelected = {};\n        }\n      }\n      return legendsSelected;\n    }\n\n    /**\n     * Get the new selected legends based on the legend that was clicked when single-select is enabled.\n     * @param legend The legend that was clicked\n     * @returns An object with the new selected legend state data.\n     */\n    function _getNewSelectedLegendsForSingleSelect(legend: Legend): { [key: string]: boolean } {\n      return selectedLegends[legend.title] ? {} : { [legend.title]: true };\n    }\n\n    function _onClick(legend: Legend, event: React.MouseEvent<HTMLButtonElement>): void {\n      const { canSelectMultipleLegends = false } = props;\n      const nextSelectedLegends = canSelectMultipleLegends\n        ? _getNewSelectedLegendsForMultiselect(legend)\n        : _getNewSelectedLegendsForSingleSelect(legend);\n\n      if (!_isInControlledMode()) {\n        setSelectedLegends(nextSelectedLegends);\n      }\n      props.onChange?.(Object.keys(nextSelectedLegends), event, legend);\n      legend.action?.();\n    }\n\n    function _onHoverOverLegend(legend: Legend) {\n      if (legend.hoverAction) {\n        setActiveLegend(legend.title);\n        legend.hoverAction();\n      }\n    }\n\n    function _onLeave(legend: Legend) {\n      if (legend.onMouseOutAction) {\n        setActiveLegend('');\n        legend.onMouseOutAction();\n      }\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function _renderButton(data: any, index?: number) {\n      const { allowFocusOnLegends = true } = props;\n      const legend: Legend = {\n        title: data.title,\n        color: data.color,\n        shape: data.shape,\n        action: data.action,\n        hoverAction: data.hoverAction,\n        onMouseOutAction: data.onMouseOutAction,\n        stripePattern: data.stripePattern,\n        isLineLegendInBarChart: data.isLineLegendInBarChart,\n        opacity: data.opacity,\n      };\n      const color = _getColor(legend.title, legend.color);\n      const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n        _onClick(legend, event);\n      };\n      const onHoverHandler = () => {\n        _onHoverOverLegend(legend);\n      };\n      const onMouseOut = () => {\n        _onLeave(legend);\n      };\n      const shape = _getShape(legend, color);\n      return (\n        <Button\n          {...(allowFocusOnLegends && {\n            'aria-selected': !!selectedLegends[legend.title],\n            role: 'option',\n            'aria-label': `${legend.title}`,\n            'aria-setsize': data['aria-setsize'],\n            'aria-posinset': data['aria-posinset'],\n          })}\n          {...(data.nativeButtonProps && { ...data.nativeButtonProps })}\n          key={index}\n          className={classes.legend}\n          onClick={onClickHandler}\n          onMouseOver={onHoverHandler}\n          onMouseOut={onMouseOut}\n          onFocus={onHoverHandler}\n          onBlur={onMouseOut}\n          appearance={'outline'}\n          size=\"small\"\n          style={{\n            '--rect-height': legend.isLineLegendInBarChart ? '4px' : '12px',\n            '--rect-backgroundColor': legend.stripePattern ? '' : color,\n            '--rect-borderColor': legend.color ? legend.color : tokens.colorNeutralStroke1,\n            '--rect-content': legend.stripePattern\n              ? `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)`\n              : '',\n          }}\n        >\n          {shape}\n          <div className={classes.text} style={{ opacity: color === tokens.colorNeutralBackground1 ? '0.67' : '' }}>\n            {legend.title}\n          </div>\n        </Button>\n      );\n    }\n\n    function _getShape(legend: Legend, color: string): React.ReactNode | string {\n      const svgParentProps: React.SVGAttributes<SVGElement> = {\n        className: classes.shape,\n      };\n      const svgChildProps: React.SVGAttributes<SVGElement> = {\n        fill: color,\n        strokeWidth: 2,\n        stroke: legend.color,\n      };\n      return (\n        <Shape\n          svgProps={svgParentProps}\n          pathProps={svgChildProps}\n          shape={legend.shape as LegendShape}\n          classNameForNonSvg={classes.rect}\n          style={\n            {\n              height: legend.isLineLegendInBarChart ? '4px' : '12px',\n              backgroundColor: legend.stripePattern ? '' : color,\n              borderColor: legend.color ? legend.color : tokens.colorNeutralStroke1,\n              content: legend.stripePattern\n                ? `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)`\n                : '',\n              '--rect-content-high-contrast': `linear-gradient(to right, ${color}, ${color})`,\n              '--rect-opacity-high-contrast': color === tokens.colorNeutralBackground1 ? '0.6' : '',\n            } as React.CSSProperties\n          }\n        />\n      );\n    }\n\n    function _getColor(title: string, color: string): string {\n      let legendColor = color;\n      // if one or more legends are selected\n      if (_isLegendSelected) {\n        // if the given legend (title) is one of the selected legends\n        if (selectedLegends[title]) {\n          legendColor = color;\n        }\n        // if the given legend is unselected\n        else {\n          legendColor = tokens.colorNeutralBackground1;\n        }\n      }\n      // if no legend is selected\n      else {\n        // if the given legend is hovered\n        // or none of the legends is hovered\n        if (activeLegend === title || activeLegend === '') {\n          legendColor = color;\n        }\n        // if there is a hovered legend but the given legend is not the one\n        else {\n          legendColor = tokens.colorNeutralBackground1;\n        }\n      }\n      return legendColor;\n    }\n  },\n);\nLegends.displayName = 'Legends';\n"],"names":["React","Button","Shape","useLegendStyles","Overflow","OverflowItem","useFocusableGroup","useArrowNavigationGroup","OverflowMenu","tokens","cloneLegendsToSVG","mergeClasses","Legends","forwardRef","props","forwardedRef","_isLegendSelected","_rootElem","useRef","activeLegend","setActiveLegend","useState","selectedLegends","setSelectedLegends","focusAttributes","arrowAttributes","axis","memorizeCurrent","classes","toSVG","useCallback","svgWidth","isRTL","legends","centerLegends","textClassName","text","current","useImperativeHandle","legendRef","useEffect","initialSelectedLegends","defaultSelectedLegends","initialSelectedLegend","selectedLegend","defaultSelectedLegend","selectedLegendsState","canSelectMultipleLegends","reduce","combineDict","key","undefined","Object","keys","length","dataToRender","_generateData","overflowStyles","allowFocusOnLegends","itemIds","map","_item","index","toString","overflowHoverCardLegends","legend","hoverCardElement","_renderButton","push","overflowString","overflowText","enabledWrapLines","renderWrappedLegends","renderLegends","div","role","className","root","ref","resizableArea","style","textAlign","item","id","title","items","justifyContent","flexWrap","display","overflow","legendContainer","legendAnnotation","annotation","shape","dataItems","action","hoverAction","onMouseOutAction","color","stripePattern","isLineLegendInBarChart","opacity","_isInControlledMode","_getNewSelectedLegendsForMultiselect","legendsSelected","_getNewSelectedLegendsForSingleSelect","_onClick","event","nextSelectedLegends","onChange","_onHoverOverLegend","_onLeave","data","_getColor","onClickHandler","onHoverHandler","onMouseOut","_getShape","nativeButtonProps","onClick","onMouseOver","onFocus","onBlur","appearance","size","colorNeutralStroke1","colorNeutralBackground1","svgParentProps","svgChildProps","fill","strokeWidth","stroke","svgProps","pathProps","classNameForNonSvg","rect","height","backgroundColor","borderColor","content","legendColor","displayName"],"mappings":"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"}

package/lib/components/Legends/Legends.types.js

@@ -1,3 +0,0 @@
-/**
- * {@docCategory Legends}
- */ export { };

package/lib/components/Legends/Legends.types.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Legends/Legends.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { CustomPoints, Points } from '../../utilities/utilities';\n\n/**\n * Legends styles\n * {@docCategory Legends}\n *\n * @public\n */\nexport interface LegendsStyles {\n  /**\n   * Style set for the root of the legend component\n   */\n  root?: string;\n\n  /**\n   * Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend\n   */\n  legend?: string;\n\n  /**\n   * Style set for the rectangle that represents a legend\n   */\n  rect?: string;\n\n  /**\n   * styles set for the shape that represents a legend\n   */\n  shape?: string;\n\n  /**\n   * Style set for the triangle that represents a legend\n   */\n  triangle?: string;\n\n  /**\n   * Style for the legend text\n   */\n  text?: string;\n\n  /**\n   * Style for the legend text\n   */\n  hoverChange?: string;\n\n  /**\n   * Style for the area that is resizable\n   */\n  resizableArea?: string;\n\n  /*\n   * Style for the container that holds the legend and any optional JSX annotation from client is used\n   */\n  legendContainer?: string;\n\n  /**\n   * Style for the annotation that is used in the legend\n   */\n  annotation?: string;\n}\n\n/**\n * ILegend interface\n * {@docCategory Legends}\n *\n * @public\n */\nexport interface Legend {\n  /**\n   * Defines the title of the legend\n   */\n  title: string;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  action?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverAction?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon moving the mouse away from the legend\n   */\n  onMouseOutAction?: (isLegendFocused?: boolean) => void;\n\n  /**\n   * The color for the legend\n   */\n  color: string;\n\n  /**\n   * The opacity of the legend color\n   */\n  opacity?: number;\n\n  /**\n   * The shape for the legend\n   */\n  shape?: LegendShape;\n\n  /**\n   * Indicated whether or not to apply stripe pattern\n   */\n  stripePattern?: boolean;\n\n  /**\n   * Indicates if the legend belongs to a line in the Bar Chart\n   */\n  isLineLegendInBarChart?: boolean;\n\n  /*\n   *  native button props for the legend button\n   */\n  nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n  /**\n   * The annotation for the legend, function returning a React node\n   */\n  legendAnnotation?: () => React.ReactNode;\n}\n\n/**\n * Legend style properties\n * {@docCategory Legends}\n *\n * @public\n */\nexport interface LegendStyleProps {\n  className?: string;\n  colorOnSelectedState?: string;\n  borderColor?: string;\n  opacity?: number;\n  overflow?: boolean;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n}\n\n/**\n * Legend properties\n * {@docCategory Legends}\n *\n * @public\n */\nexport interface LegendsProps {\n  /**\n   * Prop that takes list of legends\n   */\n  legends: Legend[];\n\n  /**\n   * Additional CSS class(es) to apply to the legneds component.\n   */\n  className?: string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: LegendsStyles;\n\n  /**\n   * This prop makes the legends component align itself to the center in the container it is sitting in\n   */\n  centerLegends?: boolean;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledWrapLines?: boolean;\n\n  /**\n   * style for the overflow component\n   */\n  overflowStyles?: React.CSSProperties;\n\n  /**\n   * text for overflow legends string\n   */\n  overflowText?: string;\n\n  /**\n   * prop that decides if legends are focusable\n   * @default true\n   */\n  allowFocusOnLegends?: boolean;\n\n  /**\n   * prop that decide if we can select multiple legends or single legend at a time\n   * @default false\n   */\n  canSelectMultipleLegends?: boolean;\n\n  /**\n   * Callback issued when the selected option changes.\n   */\n  onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: Legend) => void;\n\n  /**\n   * Keys (title) that will be initially used to set selected items. This prop is used for multi-select scenarios when\n   * canSelectMultipleLegends is true; for single-select, use defaultSelectedLegend.\n   *\n   * Updating this prop does not change the selection after the component has been initialized. For controlled\n   * selections, use selectedLegends instead.\n   *\n   * @see selectedLegends for setting the selected legends in controlled mode.\n   * @see defaultSelectedLegend for setting the initially selected legend when canSelectMultipleLegends is false.\n   */\n  defaultSelectedLegends?: string[];\n\n  /**\n   * Key that will be initially used to set selected item. This prop is used for single-select scenarios when\n   * canSelectMultipleLegends is false or unspecified; for multi-select, use defaultSelectedLegends.\n   *\n   * Updating this prop does not change the selection after the component has been initialized. For controlled\n   * selections, use selectedLegend instead.\n   *\n   * @see selectedLegend for setting the selected legend in controlled mode.\n   * @see defaultSelectedLegends for setting the initially selected legends when canSelectMultipleLegends is true.\n   */\n  defaultSelectedLegend?: string;\n\n  /**\n   * Keys (title) that will be used to set selected items in multi-select scenarios when canSelectMultipleLegends is\n   * true. For single-select, use selectedLegend.\n   *\n   * When this prop is provided, the component is controlled and does not automatically update the selection based on\n   * user interactions; the parent component must update the value passed to this property by handling the onChange\n   * event.\n   *\n   * @see defaultSelectedLegends for setting the initially-selected legends in uncontrolled mode.\n   * @see selectedLegends for setting the selected legends when `canSelectMultipleLegends` is `true`.\n   */\n  selectedLegends?: string[];\n\n  /**\n   * Key (title) that will be used to set the selected item in single-select scenarios when canSelectMultipleLegends is\n   * false or unspecified. For multi-select, use selectedLegends.\n   *\n   * When this prop is provided, the component is controlled and does not automatically update the selection based on\n   * user interactions; the parent component must update the value passed to this property by handling the onChange\n   * event.\n   *\n   * @see defaultSelectedLegend for setting the initially-selected legend in uncontrolled mode.\n   * @see selectedLegend for setting the selected legend when `canSelectMultipleLegends` is `false`.\n   */\n  selectedLegend?: string;\n\n  /**\n   * The shape for the legend.\n   */\n  shape?: LegendShape;\n\n  /**\n   * Callback to access the public methods and properties of the component.\n   */\n  legendRef?: React.Ref<LegendContainer>;\n}\n\n/**\n * The shape for the legend\n * default: show the rect legend\n * triangle: show the triangle legend\n * {@docCategory Legends}\n *\n * @public\n */\nexport type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;\n\n/**\n * {@docCategory Legends}\n */\nexport interface LegendContainer {\n  toSVG: (\n    svgWidth: number,\n    isRTL?: boolean,\n  ) => {\n    node: SVGSVGElement | null;\n    width: number;\n    height: number;\n  };\n}\n"],"names":[],"mappings":"AA8QA;;CAEC,GACD,WASC"}

package/lib/components/Legends/OverflowMenu.js

@@ -1,33 +0,0 @@
-'use client';
-import * as React from 'react';
-import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu';
-import { MenuButton } from '@fluentui/react-button';
-import { useOverflowMenu } from '@fluentui/react-overflow';
-export const OverflowMenu = ({ itemIds, title, items })=>{
-    const { ref, overflowCount, isOverflowing } = useOverflowMenu();
-    let displayLabel = title;
-    displayLabel = title === '' ? `+${overflowCount} items` : `+${overflowCount} ${title}`;
-    if (!isOverflowing) {
-        return null;
-    }
-    const remainingItemsCount = itemIds.length - overflowCount;
-    const menuList = [];
-    for(let i = remainingItemsCount; i < itemIds.length; i++){
-        const buttonElement = items[i];
-        menuList.push(/*#__PURE__*/ React.createElement(MenuItem, {
-            tabIndex: -1,
-            key: i,
-            onClick: (e)=>{
-                const button = buttonElement.props;
-                if (button.onClick) {
-                    button.onClick(e);
-                }
-            }
-        }, buttonElement));
-    }
-    return /*#__PURE__*/ React.createElement(Menu, null, /*#__PURE__*/ React.createElement(MenuTrigger, {
-        disableButtonEnhancement: true
-    }, /*#__PURE__*/ React.createElement(MenuButton, {
-        ref: ref
-    }, displayLabel)), /*#__PURE__*/ React.createElement(MenuPopover, null, /*#__PURE__*/ React.createElement(MenuList, null, menuList)));
-};

package/lib/components/Legends/OverflowMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Legends/OverflowMenu.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu';\nimport { MenuButton } from '@fluentui/react-button';\nimport { useOverflowMenu } from '@fluentui/react-overflow';\n\nexport const OverflowMenu: React.FC<{\n  itemIds: string[];\n  title: string;\n  items: JSXElement[];\n}> = ({ itemIds, title, items }) => {\n  const { ref, overflowCount, isOverflowing } = useOverflowMenu<HTMLButtonElement>();\n  let displayLabel = title;\n  displayLabel = title === '' ? `+${overflowCount} items` : `+${overflowCount} ${title}`;\n\n  if (!isOverflowing) {\n    return null;\n  }\n  const remainingItemsCount = itemIds.length - overflowCount;\n  const menuList = [];\n  for (let i = remainingItemsCount; i < itemIds.length; i++) {\n    const buttonElement = items[i];\n    menuList.push(\n      <MenuItem\n        tabIndex={-1}\n        key={i}\n        onClick={e => {\n          const button = buttonElement.props;\n          if (button.onClick) {\n            button.onClick(e);\n          }\n        }}\n      >\n        {buttonElement}\n      </MenuItem>,\n    );\n  }\n  return (\n    <Menu>\n      <MenuTrigger disableButtonEnhancement>\n        <MenuButton ref={ref}>{displayLabel}</MenuButton>\n      </MenuTrigger>\n\n      <MenuPopover>\n        <MenuList>{menuList}</MenuList>\n      </MenuPopover>\n    </Menu>\n  );\n};\n"],"names":["React","Menu","MenuTrigger","MenuPopover","MenuList","MenuItem","MenuButton","useOverflowMenu","OverflowMenu","itemIds","title","items","ref","overflowCount","isOverflowing","displayLabel","remainingItemsCount","length","menuList","i","buttonElement","push","tabIndex","key","onClick","e","button","props","disableButtonEnhancement"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,IAAI,EAAEC,WAAW,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,uBAAuB;AAC1F,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,OAAO,MAAMC,eAIR,CAAC,EAAEC,OAAO,EAAEC,KAAK,EAAEC,KAAK,EAAE;IAC7B,MAAM,EAAEC,GAAG,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAAGP;IAC9C,IAAIQ,eAAeL;IACnBK,eAAeL,UAAU,KAAK,CAAC,CAAC,EAAEG,cAAc,MAAM,CAAC,GAAG,CAAC,CAAC,EAAEA,cAAc,CAAC,EAAEH,OAAO;IAEtF,IAAI,CAACI,eAAe;QAClB,OAAO;IACT;IACA,MAAME,sBAAsBP,QAAQQ,MAAM,GAAGJ;IAC7C,MAAMK,WAAW,EAAE;IACnB,IAAK,IAAIC,IAAIH,qBAAqBG,IAAIV,QAAQQ,MAAM,EAAEE,IAAK;QACzD,MAAMC,gBAAgBT,KAAK,CAACQ,EAAE;QAC9BD,SAASG,IAAI,eACX,oBAAChB;YACCiB,UAAU,CAAC;YACXC,KAAKJ;YACLK,SAASC,CAAAA;gBACP,MAAMC,SAASN,cAAcO,KAAK;gBAClC,IAAID,OAAOF,OAAO,EAAE;oBAClBE,OAAOF,OAAO,CAACC;gBACjB;YACF;WAECL;IAGP;IACA,qBACE,oBAACnB,0BACC,oBAACC;QAAY0B,0BAAAA;qBACX,oBAACtB;QAAWM,KAAKA;OAAMG,8BAGzB,oBAACZ,iCACC,oBAACC,gBAAUc;AAInB,EAAE"}

package/lib/components/Legends/index.js

@@ -1,3 +0,0 @@
-export * from './Legends';
-export * from './Legends.types';
-export * from './shape';

package/lib/components/Legends/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Legends/index.ts"],"sourcesContent":["export * from './Legends';\nexport * from './Legends.types';\nexport * from './shape';\n"],"names":[],"mappings":"AAAA,cAAc,YAAY;AAC1B,cAAc,kBAAkB;AAChC,cAAc,UAAU"}

package/lib/components/Legends/shape.js

@@ -1,36 +0,0 @@
-'use client';
-import * as React from 'react';
-import { CustomPoints, Points, getSecureProps } from '../../utilities/utilities';
-const pointPath = {
-    [`${Points[Points.circle]}`]: 'M1 6 A5 5 0 1 0  12 6 M1 6 A5 5 0 0 1  12 6',
-    [`${Points[Points.square]}`]: 'M1 1 L12 1 L12 12  L1 12 L1 1 Z',
-    [`${Points[Points.triangle]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',
-    [`${Points[Points.pyramid]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',
-    [`${Points[Points.diamond]}`]: 'M2 2 L10 2 L10 10  L2 10 L2 2 Z',
-    [`${Points[Points.hexagon]}`]: 'M9 0H3L0 5L3 10H9L12 5L9 0Z',
-    [`${Points[Points.pentagon]}`]: 'M6.06061 0L0 4.21277L2.30303 11H9.69697L12 4.21277L6.06061 0Z',
-    [`${Points[Points.octagon]}`]: 'M7.08333 0H2.91667L0 2.91667V7.08333L2.91667 10H7.08333L10 7.08333V2.91667L7.08333 0Z',
-    [`${CustomPoints[CustomPoints.dottedLine]}`]: 'M0 6 H3 M5 6 H8 M10 6 H13'
-};
-export const Shape = /*#__PURE__*/ React.forwardRef(({ svgProps, pathProps, shape, classNameForNonSvg, style }, forwardedRef)=>{
-    if (Object.keys(pointPath).indexOf(shape) === -1) {
-        return /*#__PURE__*/ React.createElement("div", {
-            className: classNameForNonSvg,
-            style: style
-        });
-    }
-    return /*#__PURE__*/ React.createElement("svg", {
-        width: 14,
-        height: 14,
-        viewBox: '-1 -1 14 14',
-        ...getSecureProps(svgProps),
-        transform: `rotate(${shape === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0}, 0, 0)`,
-        style: {
-            width: '14px',
-            height: '14px'
-        }
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: pointPath[shape],
-        ...getSecureProps(pathProps)
-    }));
-});

package/lib/components/Legends/shape.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Legends/shape.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { LegendShape } from './Legends.types';\nimport { CustomPoints, Points, getSecureProps } from '../../utilities/utilities';\n\nexport interface ShapeProps {\n  svgProps: React.SVGAttributes<SVGElement>;\n  pathProps: React.SVGAttributes<SVGPathElement>;\n  shape: LegendShape;\n  classNameForNonSvg?: string;\n  style?: React.CSSProperties | undefined;\n}\n\ntype PointPathType = {\n  [key: string]: string;\n};\n\nconst pointPath: PointPathType = {\n  [`${Points[Points.circle]}`]: 'M1 6 A5 5 0 1 0  12 6 M1 6 A5 5 0 0 1  12 6',\n  [`${Points[Points.square]}`]: 'M1 1 L12 1 L12 12  L1 12 L1 1 Z',\n  [`${Points[Points.triangle]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',\n  [`${Points[Points.pyramid]}`]: 'M6 10L8.74228e-07 -1.04907e-06L12 0L6 10Z',\n  [`${Points[Points.diamond]}`]: 'M2 2 L10 2 L10 10  L2 10 L2 2 Z',\n  [`${Points[Points.hexagon]}`]: 'M9 0H3L0 5L3 10H9L12 5L9 0Z',\n  [`${Points[Points.pentagon]}`]: 'M6.06061 0L0 4.21277L2.30303 11H9.69697L12 4.21277L6.06061 0Z',\n  [`${Points[Points.octagon]}`]:\n    'M7.08333 0H2.91667L0 2.91667V7.08333L2.91667 10H7.08333L10 7.08333V2.91667L7.08333 0Z',\n  [`${CustomPoints[CustomPoints.dottedLine]}`]: 'M0 6 H3 M5 6 H8 M10 6 H13',\n};\n\nexport const Shape: React.FunctionComponent<ShapeProps> = React.forwardRef<HTMLDivElement, ShapeProps>(\n  ({ svgProps, pathProps, shape, classNameForNonSvg, style }, forwardedRef) => {\n    if (Object.keys(pointPath).indexOf(shape) === -1) {\n      return <div className={classNameForNonSvg} style={style} />;\n    }\n    return (\n      <svg\n        width={14}\n        height={14}\n        viewBox={'-1 -1 14 14'}\n        {...getSecureProps(svgProps)}\n        transform={`rotate(${\n          shape === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0\n        }, 0, 0)`}\n        style={{\n          width: '14px',\n          height: '14px',\n        }}\n      >\n        <path d={pointPath[shape]} {...getSecureProps(pathProps)} />\n      </svg>\n    );\n  },\n);\n"],"names":["React","CustomPoints","Points","getSecureProps","pointPath","circle","square","triangle","pyramid","diamond","hexagon","pentagon","octagon","dottedLine","Shape","forwardRef","svgProps","pathProps","shape","classNameForNonSvg","style","forwardedRef","Object","keys","indexOf","div","className","svg","width","height","viewBox","transform","path","d"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,YAAY,EAAEC,MAAM,EAAEC,cAAc,QAAQ,4BAA4B;AAcjF,MAAMC,YAA2B;IAC/B,CAAC,GAAGF,MAAM,CAACA,OAAOG,MAAM,CAAC,EAAE,CAAC,EAAE;IAC9B,CAAC,GAAGH,MAAM,CAACA,OAAOI,MAAM,CAAC,EAAE,CAAC,EAAE;IAC9B,CAAC,GAAGJ,MAAM,CAACA,OAAOK,QAAQ,CAAC,EAAE,CAAC,EAAE;IAChC,CAAC,GAAGL,MAAM,CAACA,OAAOM,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGN,MAAM,CAACA,OAAOO,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGP,MAAM,CAACA,OAAOQ,OAAO,CAAC,EAAE,CAAC,EAAE;IAC/B,CAAC,GAAGR,MAAM,CAACA,OAAOS,QAAQ,CAAC,EAAE,CAAC,EAAE;IAChC,CAAC,GAAGT,MAAM,CAACA,OAAOU,OAAO,CAAC,EAAE,CAAC,EAC3B;IACF,CAAC,GAAGX,YAAY,CAACA,aAAaY,UAAU,CAAC,EAAE,CAAC,EAAE;AAChD;AAEA,OAAO,MAAMC,sBAA6Cd,MAAMe,UAAU,CACxE,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,EAAEC;IAC1D,IAAIC,OAAOC,IAAI,CAACnB,WAAWoB,OAAO,CAACN,WAAW,CAAC,GAAG;QAChD,qBAAO,oBAACO;YAAIC,WAAWP;YAAoBC,OAAOA;;IACpD;IACA,qBACE,oBAACO;QACCC,OAAO;QACPC,QAAQ;QACRC,SAAS;QACR,GAAG3B,eAAea,SAAS;QAC5Be,WAAW,CAAC,OAAO,EACjBb,UAAUhB,MAAM,CAACA,OAAOO,OAAO,CAAC,GAAG,KAAKS,UAAUhB,MAAM,CAACA,OAAOM,OAAO,CAAC,GAAG,MAAM,EAClF,OAAO,CAAC;QACTY,OAAO;YACLQ,OAAO;YACPC,QAAQ;QACV;qBAEA,oBAACG;QAAKC,GAAG7B,SAAS,CAACc,MAAM;QAAG,GAAGf,eAAec,UAAU;;AAG9D,GACA"}