@fluentui/react-charts 1.2.0 → 9.0.1

package/lib-commonjs/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.js

@@ -0,0 +1,251 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    hbcClassNames: function() {
+        return hbcClassNames;
+    },
+    useHorizontalBarChartStyles: function() {
+        return useHorizontalBarChartStyles;
+    }
+});
+const _react = require("@griffel/react");
+const _index = require("./index");
+const hbcClassNames = {
+    root: 'fui-hbc__root',
+    items: 'fui-hbc__items',
+    chart: 'fui-hbc__chart',
+    chartTitle: 'fui-hbc__chartTitle',
+    barWrapper: 'fui-hbc__barWrapper',
+    chartTitleLeft: 'fui-hbc__chartTitleLeft',
+    chartTitleRight: 'fui-hbc__chartTitleRight',
+    chartDataTextDenominator: 'fui-hbc__textDenom',
+    benchmarkContainer: 'fui-hbc__benchmark',
+    triangle: 'fui-hbc__triangle',
+    barLabel: 'fui-hbc__barLabel',
+    chartWrapper: 'fui-hbc__chartWrapper',
+    legendContainer: 'fui-hbc__legendContainer'
+};
+/**
+ * Base Styles
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62",
+        a9b677: "fly5x3f"
+    },
+    items10pMargin: {
+        jrapky: "f1rfdi54"
+    },
+    items16pMargin: {
+        jrapky: "fbxl46w"
+    },
+    chart: {
+        a9b677: "fly5x3f",
+        Bqenvij: "fvblgha",
+        mc9l5x: "ftgm304",
+        B68tc82: 0,
+        Bmxbyg5: 0,
+        Bpg54ce: "f1gl81tg"
+    },
+    barWrapper: {},
+    chartTitle: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm",
+        mc9l5x: "f22iagw",
+        Brf1p80: "f1869bpl"
+    },
+    chartTitleLeft: {
+        ygn44y: "f1cmbuwj",
+        B68tc82: 0,
+        Bmxbyg5: 0,
+        Bpg54ce: "f1a3p1vp",
+        Huce71: "fz5stix",
+        mc9l5x: "ftgm304",
+        sj55zd: "f19n0e5"
+    },
+    chartTitleLeft4pMargin: {
+        jrapky: "fd1gkq"
+    },
+    chartTitleLeft5pMargin: {
+        jrapky: "f475ppk"
+    },
+    chartTitleRight: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "f1i3iumi",
+        sj55zd: "f19n0e5"
+    },
+    chartDataTextDenominator: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
+        sj55zd: "f19n0e5"
+    },
+    benchmarkContainer: {
+        qhf8xq: "f10pi13n",
+        Bqenvij: "f7u49ja",
+        B6of3ja: "f1h5g6v3",
+        jrapky: "fmxx68s"
+    },
+    triangle: {
+        a9b677: "f3tsq5r",
+        Bqenvij: "fniina8",
+        ibv6hh: [
+            "fbdn13q",
+            "fdo4c7f"
+        ],
+        wvpqe5: [
+            "fjik90z",
+            "fcdblym"
+        ],
+        zhjwy3: [
+            "f1pdflbu",
+            "f11589ue"
+        ],
+        Bekrc4i: [
+            "fdo4c7f",
+            "fbdn13q"
+        ],
+        vrafjx: [
+            "fcdblym",
+            "fjik90z"
+        ],
+        h3c5rm: [
+            "f11589ue",
+            "f1pdflbu"
+        ],
+        B4j52fo: "f1st6vq5",
+        icvyot: "fzkkow9",
+        g2u3we: "f1bpgvfk",
+        jrapky: "f8l5zjj",
+        qhf8xq: "f1euv43f"
+    },
+    barLabel: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "fwrc4pm",
+        Bkfmm31: "fhuob2q",
+        a6j6cd: "f1j86lqe",
+        B93v9kj: "f15mrrko"
+    },
+    chartWrapper40ppadding: {
+        z189sj: [
+            "f1emi2st",
+            "f53ee3v"
+        ]
+    },
+    chartWrapper0ppadding: {
+        z189sj: [
+            "flk2ux3",
+            "fkl3uby"
+        ]
+    },
+    legendContainer: {
+        z8tnut: "fikn0iw"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f1vx9l62{flex-direction:column;}",
+        ".fly5x3f{width:100%;}",
+        ".f1rfdi54{margin-bottom:var(--spacingVerticalMNudge);}",
+        ".fbxl46w{margin-bottom:var(--spacingVerticalL);}",
+        ".fvblgha{height:12px;}",
+        ".ftgm304{display:block;}",
+        [
+            ".f1gl81tg{overflow:visible;}",
+            {
+                p: -1
+            }
+        ],
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".f1869bpl{justify-content:space-between;}",
+        ".f1cmbuwj{text-overflow:ellipsis;}",
+        [
+            ".f1a3p1vp{overflow:hidden;}",
+            {
+                p: -1
+            }
+        ],
+        ".fz5stix{white-space:nowrap;}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".fd1gkq{margin-bottom:4px;}",
+        ".f475ppk{margin-bottom:5px;}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".f10pi13n{position:relative;}",
+        ".f7u49ja{height:7px;}",
+        ".f1h5g6v3{margin-top:-3px;}",
+        ".fmxx68s{margin-bottom:-1px;}",
+        ".f3tsq5r{width:0;}",
+        ".fniina8{height:0;}",
+        ".fbdn13q{border-left-width:4px;}",
+        ".fdo4c7f{border-right-width:4px;}",
+        ".fjik90z{border-left-style:solid;}",
+        ".fcdblym{border-right-style:solid;}",
+        ".f1pdflbu{border-left-color:transparent;}",
+        ".f11589ue{border-right-color:transparent;}",
+        ".f1st6vq5{border-top-width:7px;}",
+        ".fzkkow9{border-top-style:solid;}",
+        ".f1bpgvfk{border-top-color:var(--colorPaletteBlueBorderActive);}",
+        ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}",
+        ".f1euv43f{position:absolute;}",
+        ".fhuob2q{fill:var(--colorNeutralForeground1);}",
+        ".f1emi2st{padding-right:40p;}",
+        ".f53ee3v{padding-left:40p;}",
+        ".flk2ux3{padding-right:var(--spacingHorizontalNone);}",
+        ".fkl3uby{padding-left:var(--spacingHorizontalNone);}",
+        ".fikn0iw{padding-top:var(--spacingVerticalL);}"
+    ],
+    m: [
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1j86lqe{fill:WindowText;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f15mrrko{forced-color-adjust:none;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useHorizontalBarChartStyles = (props)=>{
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9, _props_styles10, _props_styles11, _props_styles12;
+    const { className, showTriangle, variant, hideLabels } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.
+    const baseStyles = useStyles();
+    return {
+        root: (0, _react.mergeClasses)(hbcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
+        items: (0, _react.mergeClasses)(hbcClassNames.items, showTriangle || variant === _index.HorizontalBarChartVariant.AbsoluteScale ? baseStyles.items16pMargin : baseStyles.items10pMargin, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.items),
+        chart: (0, _react.mergeClasses)(hbcClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart),
+        chartTitle: (0, _react.mergeClasses)(hbcClassNames.chartTitle, baseStyles.chartTitle, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartTitle),
+        barWrapper: (0, _react.mergeClasses)(hbcClassNames.barWrapper, baseStyles.barWrapper, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.barWrapper),
+        chartTitleLeft: (0, _react.mergeClasses)(hbcClassNames.chartTitleLeft, baseStyles.chartTitleLeft, variant === _index.HorizontalBarChartVariant.AbsoluteScale ? baseStyles.chartTitleLeft4pMargin : baseStyles.chartTitleLeft5pMargin, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.chartTitleLeft),
+        chartTitleRight: (0, _react.mergeClasses)(hbcClassNames.chartTitleRight, baseStyles.chartTitleRight, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.chartTitleRight),
+        chartDataTextDenominator: (0, _react.mergeClasses)(hbcClassNames.chartDataTextDenominator, baseStyles.chartDataTextDenominator, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.chartDataTextDenominator),
+        benchmarkContainer: (0, _react.mergeClasses)(hbcClassNames.benchmarkContainer, baseStyles.benchmarkContainer, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.benchmarkContainer),
+        triangle: (0, _react.mergeClasses)(hbcClassNames.triangle, baseStyles.triangle, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.triangle),
+        barLabel: (0, _react.mergeClasses)(hbcClassNames.barLabel, baseStyles.barLabel, (_props_styles10 = props.styles) === null || _props_styles10 === void 0 ? void 0 : _props_styles10.barLabel),
+        chartWrapper: (0, _react.mergeClasses)(hbcClassNames.chartWrapper, variant === _index.HorizontalBarChartVariant.AbsoluteScale && !hideLabels ? baseStyles.chartWrapper40ppadding : baseStyles.chartWrapper0ppadding, (_props_styles11 = props.styles) === null || _props_styles11 === void 0 ? void 0 : _props_styles11.chartWrapper),
+        legendContainer: (0, _react.mergeClasses)(hbcClassNames.legendContainer, baseStyles.legendContainer, (_props_styles12 = props.styles) === null || _props_styles12 === void 0 ? void 0 : _props_styles12.legendContainer)
+    };
+}; //# sourceMappingURL=useHorizontalBarChartStyles.styles.js.map

package/lib-commonjs/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useHorizontalBarChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HorizontalBarChartVariant } from './index';\nimport { HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const hbcClassNames = {\n    root: 'fui-hbc__root',\n    items: 'fui-hbc__items',\n    chart: 'fui-hbc__chart',\n    chartTitle: 'fui-hbc__chartTitle',\n    barWrapper: 'fui-hbc__barWrapper',\n    chartTitleLeft: 'fui-hbc__chartTitleLeft',\n    chartTitleRight: 'fui-hbc__chartTitleRight',\n    chartDataTextDenominator: 'fui-hbc__textDenom',\n    benchmarkContainer: 'fui-hbc__benchmark',\n    triangle: 'fui-hbc__triangle',\n    barLabel: 'fui-hbc__barLabel',\n    chartWrapper: 'fui-hbc__chartWrapper',\n    legendContainer: 'fui-hbc__legendContainer'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%'\n    },\n    items10pMargin: {\n        marginBottom: tokens.spacingVerticalMNudge\n    },\n    items16pMargin: {\n        marginBottom: tokens.spacingVerticalL\n    },\n    chart: {\n        width: '100%',\n        height: '12px',\n        display: 'block',\n        overflow: 'visible'\n    },\n    barWrapper: {},\n    chartTitle: {\n        ...typographyStyles.caption1,\n        display: 'flex',\n        justifyContent: 'space-between'\n    },\n    chartTitleLeft: {\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n        display: 'block',\n        color: tokens.colorNeutralForeground1\n    },\n    chartTitleLeft4pMargin: {\n        marginBottom: '4px'\n    },\n    chartTitleLeft5pMargin: {\n        marginBottom: '5px'\n    },\n    chartTitleRight: {\n        ...typographyStyles.body1Strong,\n        color: tokens.colorNeutralForeground1\n    },\n    chartDataTextDenominator: {\n        ...typographyStyles.body1,\n        color: tokens.colorNeutralForeground1\n    },\n    benchmarkContainer: {\n        position: 'relative',\n        height: '7px',\n        marginTop: '-3px',\n        marginBottom: '-1px'\n    },\n    triangle: {\n        width: '0',\n        height: '0',\n        ...shorthands.borderLeft('4px', 'solid', 'transparent'),\n        ...shorthands.borderRight('4px', 'solid', 'transparent'),\n        ...shorthands.borderTop('7px', 'solid'),\n        borderTopColor: tokens.colorPaletteBlueBorderActive,\n        marginBottom: tokens.spacingVerticalXS,\n        position: 'absolute'\n    },\n    barLabel: {\n        ...typographyStyles.caption1Strong,\n        fill: tokens.colorNeutralForeground1,\n        [HighContrastSelector]: {\n            fill: 'WindowText',\n            forcedColorAdjust: 'none'\n        }\n    },\n    chartWrapper40ppadding: {\n        paddingRight: '40p'\n    },\n    chartWrapper0ppadding: {\n        paddingRight: tokens.spacingHorizontalNone\n    },\n    legendContainer: {\n        paddingTop: tokens.spacingVerticalL\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useHorizontalBarChartStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9, _props_styles10, _props_styles11, _props_styles12;\n    const { className, showTriangle, variant, hideLabels } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(hbcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        items: mergeClasses(hbcClassNames.items, showTriangle || variant === HorizontalBarChartVariant.AbsoluteScale ? baseStyles.items16pMargin : baseStyles.items10pMargin, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.items),\n        chart: mergeClasses(hbcClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart),\n        chartTitle: mergeClasses(hbcClassNames.chartTitle, baseStyles.chartTitle, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartTitle),\n        barWrapper: mergeClasses(hbcClassNames.barWrapper, baseStyles.barWrapper, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.barWrapper),\n        chartTitleLeft: mergeClasses(hbcClassNames.chartTitleLeft, baseStyles.chartTitleLeft, variant === HorizontalBarChartVariant.AbsoluteScale ? baseStyles.chartTitleLeft4pMargin : baseStyles.chartTitleLeft5pMargin, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.chartTitleLeft),\n        chartTitleRight: mergeClasses(hbcClassNames.chartTitleRight, baseStyles.chartTitleRight, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.chartTitleRight),\n        chartDataTextDenominator: mergeClasses(hbcClassNames.chartDataTextDenominator, baseStyles.chartDataTextDenominator, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.chartDataTextDenominator),\n        benchmarkContainer: mergeClasses(hbcClassNames.benchmarkContainer, baseStyles.benchmarkContainer, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.benchmarkContainer),\n        triangle: mergeClasses(hbcClassNames.triangle, baseStyles.triangle, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.triangle),\n        barLabel: mergeClasses(hbcClassNames.barLabel, baseStyles.barLabel, (_props_styles10 = props.styles) === null || _props_styles10 === void 0 ? void 0 : _props_styles10.barLabel),\n        chartWrapper: mergeClasses(hbcClassNames.chartWrapper, variant === HorizontalBarChartVariant.AbsoluteScale && !hideLabels ? baseStyles.chartWrapper40ppadding : baseStyles.chartWrapper0ppadding, (_props_styles11 = props.styles) === null || _props_styles11 === void 0 ? void 0 : _props_styles11.chartWrapper),\n        legendContainer: mergeClasses(hbcClassNames.legendContainer, baseStyles.legendContainer, (_props_styles12 = props.styles) === null || _props_styles12 === void 0 ? void 0 : _props_styles12.legendContainer)\n    };\n};\n"],"names":["hbcClassNames","useHorizontalBarChartStyles","root","items","chart","chartTitle","barWrapper","chartTitleLeft","chartTitleRight","chartDataTextDenominator","benchmarkContainer","triangle","barLabel","chartWrapper","legendContainer","useStyles","__styles","mc9l5x","Beiy3e4","a9b677","items10pMargin","jrapky","items16pMargin","Bqenvij","B68tc82","Bmxbyg5","Bpg54ce","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Brf1p80","ygn44y","Huce71","sj55zd","chartTitleLeft4pMargin","chartTitleLeft5pMargin","qhf8xq","B6of3ja","ibv6hh","wvpqe5","zhjwy3","Bekrc4i","vrafjx","h3c5rm","B4j52fo","icvyot","g2u3we","Bkfmm31","a6j6cd","B93v9kj","chartWrapper40ppadding","z189sj","chartWrapper0ppadding","z8tnut","d","p","m","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","_props_styles6","_props_styles7","_props_styles8","_props_styles9","_props_styles10","_props_styles11","_props_styles12","className","showTriangle","variant","hideLabels","baseStyles","mergeClasses","styles","HorizontalBarChartVariant","AbsoluteScale"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/Legends/Legends.js

@@ -0,0 +1,313 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Legends", {
+    enumerable: true,
+    get: function() {
+        return Legends;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactbutton = require("@fluentui/react-button");
+const _shape = require("./shape");
+const _useLegendsStylesstyles = require("./useLegendsStyles.styles");
+const _reactoverflow = require("@fluentui/react-overflow");
+const _reacttabster = require("@fluentui/react-tabster");
+const _OverflowMenu = require("./OverflowMenu");
+const _reacttheme = require("@fluentui/react-theme");
+const Legends = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+    /** Boolean variable to check if one or more legends are selected */ let _isLegendSelected = false;
+    // set states separately for each instance of the component
+    const [activeLegend, setActiveLegend] = _react.useState('');
+    const [selectedLegends, setSelectedLegends] = _react.useState({});
+    const focusAttributes = (0, _reacttabster.useFocusableGroup)();
+    const arrowAttributes = (0, _reacttabster.useArrowNavigationGroup)({
+        axis: 'horizontal',
+        memorizeCurrent: true
+    });
+    _react.useEffect(()=>{
+        let defaultSelectedLegends = {};
+        if (props.canSelectMultipleLegends) {
+            var _props_defaultSelectedLegends;
+            defaultSelectedLegends = ((_props_defaultSelectedLegends = props.defaultSelectedLegends) === null || _props_defaultSelectedLegends === void 0 ? void 0 : _props_defaultSelectedLegends.reduce((combinedDict, key)=>({
+                    [key]: true,
+                    ...combinedDict
+                }), {})) || {};
+        } else if (props.defaultSelectedLegend) {
+            defaultSelectedLegends = {
+                [props.defaultSelectedLegend]: true
+            };
+        }
+        setSelectedLegends(defaultSelectedLegends);
+    }, [
+        props.canSelectMultipleLegends,
+        props.defaultSelectedLegend,
+        props.defaultSelectedLegends
+    ]);
+    _isLegendSelected = Object.keys(selectedLegends).length > 0;
+    const dataToRender = _generateData();
+    const { overflowStyles, allowFocusOnLegends = true, canSelectMultipleLegends = false } = props;
+    const classes = (0, _useLegendsStylesstyles.useLegendStyles)(props);
+    const itemIds = dataToRender.map((_item, index)=>index.toString());
+    const overflowHoverCardLegends = [];
+    props.legends.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
+        }, /*#__PURE__*/ _react.createElement(_reactoverflow.Overflow, null, /*#__PURE__*/ _react.createElement("div", {
+            className: classes.resizableArea,
+            style: {
+                textAlign: props.centerLegends ? 'center' : 'unset'
+            }
+        }, dataToRender.map((item, id)=>/*#__PURE__*/ _react.createElement(_reactoverflow.OverflowItem, {
+                key: id,
+                id: id.toString()
+            }, _renderButton(item))), /*#__PURE__*/ _react.createElement(_OverflowMenu.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
+        }, /*#__PURE__*/ _react.createElement("div", {
+            className: classes.resizableArea,
+            style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                overflow: 'auto'
+            }
+        }, dataToRender.map((item, id)=>/*#__PURE__*/ _react.createElement("div", {
+                key: id,
+                style: {
+                    flex: '0 1 auto',
+                    margin: '4px'
+                }
+            }, _renderButton(item)))));
+    }
+    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
+            };
+        });
+        return dataItems;
+    }
+    /**
+     * This function will get called when there is an ability to
+     * select  multiple legends
+     * @param legend ILegend
+     */ function _canSelectMultipleLegends(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 = {};
+            }
+        }
+        setSelectedLegends(legendsSelected);
+        return legendsSelected;
+    }
+    /**
+     * This function will get called when there is
+     * ability to select only single legend
+     * @param legend ILegend
+     */ function _canSelectOnlySingleLegend(legend) {
+        if (selectedLegends[legend.title]) {
+            setSelectedLegends({});
+            return false;
+        } else {
+            setSelectedLegends({
+                [legend.title]: true
+            });
+            return true;
+        }
+    }
+    function _onClick(legend, event) {
+        var _props_onChange, _legend_action;
+        const { canSelectMultipleLegends = false } = props;
+        let selectedLegends = [];
+        if (canSelectMultipleLegends) {
+            const nextSelectedLegends = _canSelectMultipleLegends(legend);
+            selectedLegends = Object.keys(nextSelectedLegends);
+        } else {
+            const isSelected = _canSelectOnlySingleLegend(legend);
+            selectedLegends = isSelected ? [
+                legend.title
+            ] : [];
+        }
+        (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, selectedLegends, 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(_reactbutton.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 : _reacttheme.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 === _reacttheme.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.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 : _reacttheme.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 === _reacttheme.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 = _reacttheme.tokens.colorNeutralBackground1;
+            }
+        } else {
+            // if the given legend is hovered
+            // or none of the legends is hovered
+            if (activeLegend === title || activeLegend === '') {
+                legendColor = color;
+            } else {
+                legendColor = _reacttheme.tokens.colorNeutralBackground1;
+            }
+        }
+        return legendColor;
+    }
+});
+Legends.displayName = 'Legends';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Legends.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from '@fluentui/react-button';\nimport { 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';\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}\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\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\n    React.useEffect(() => {\n      let defaultSelectedLegends = {};\n      if (props.canSelectMultipleLegends) {\n        defaultSelectedLegends =\n          props.defaultSelectedLegends?.reduce((combinedDict, key) => ({ [key]: true, ...combinedDict }), {}) || {};\n      } else if (props.defaultSelectedLegend) {\n        defaultSelectedLegends = { [props.defaultSelectedLegend]: true };\n      }\n\n      setSelectedLegends(defaultSelectedLegends);\n    }, [props.canSelectMultipleLegends, props.defaultSelectedLegend, props.defaultSelectedLegends]);\n\n    _isLegendSelected = Object.keys(selectedLegends).length > 0;\n    const dataToRender = _generateData();\n    const { overflowStyles, allowFocusOnLegends = true, canSelectMultipleLegends = false } = props;\n    const classes = useLegendStyles(props);\n    const itemIds = dataToRender.map((_item, index) => index.toString());\n    const overflowHoverCardLegends: JSX.Element[] = [];\n    props.legends.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(): JSX.Element {\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        >\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(): JSX.Element {\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        >\n          <div className={classes.resizableArea} style={{ display: 'flex', flexWrap: 'wrap', overflow: 'auto' }}>\n            {dataToRender.map((item, id) => (\n              <div key={id} style={{ flex: '0 1 auto', margin: '4px' }}>\n                {_renderButton(item)}\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        };\n      });\n      return dataItems;\n    }\n\n    /**\n     * This function will get called when there is an ability to\n     * select  multiple legends\n     * @param legend ILegend\n     */\n    function _canSelectMultipleLegends(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      setSelectedLegends(legendsSelected);\n      return legendsSelected;\n    }\n\n    /**\n     * This function will get called when there is\n     * ability to select only single legend\n     * @param legend ILegend\n     */\n\n    function _canSelectOnlySingleLegend(legend: Legend): boolean {\n      if (selectedLegends[legend.title]) {\n        setSelectedLegends({});\n        return false;\n      } else {\n        setSelectedLegends({ [legend.title]: true });\n        return true;\n      }\n    }\n\n    function _onClick(legend: Legend, event: React.MouseEvent<HTMLButtonElement>): void {\n      const { canSelectMultipleLegends = false } = props;\n      let selectedLegends: string[] = [];\n      if (canSelectMultipleLegends) {\n        const nextSelectedLegends = _canSelectMultipleLegends(legend);\n        selectedLegends = Object.keys(nextSelectedLegends);\n      } else {\n        const isSelected = _canSelectOnlySingleLegend(legend);\n        selectedLegends = isSelected ? [legend.title] : [];\n      }\n      props.onChange?.(selectedLegends, 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              ? // eslint-disable-next-line @fluentui/max-len\n                `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)`\n              : '',\n          }} /* eslint-enable react/jsx-no-bind */\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                ? // eslint-disable-next-line @fluentui/max-len\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":["Legends","React","forwardRef","props","forwardedRef","_isLegendSelected","activeLegend","setActiveLegend","useState","selectedLegends","setSelectedLegends","focusAttributes","useFocusableGroup","arrowAttributes","useArrowNavigationGroup","axis","memorizeCurrent","useEffect","defaultSelectedLegends","canSelectMultipleLegends","reduce","combinedDict","key","defaultSelectedLegend","Object","keys","length","dataToRender","_generateData","overflowStyles","allowFocusOnLegends","classes","useLegendStyles","itemIds","map","_item","index","toString","overflowHoverCardLegends","legends","legend","hoverCardElement","_renderButton","push","overflowString","overflowText","enabledWrapLines","renderWrappedLegends","renderLegends","createElement","div","role","className","root","Overflow","resizableArea","style","textAlign","centerLegends","item","id","OverflowItem","OverflowMenu","title","items","justifyContent","flexWrap","display","overflow","flex","margin","shape","dataItems","action","hoverAction","onMouseOutAction","color","stripePattern","isLineLegendInBarChart","opacity","_canSelectMultipleLegends","legendsSelected","_canSelectOnlySingleLegend","_onClick","event","nextSelectedLegends","isSelected","onChange","_onHoverOverLegend","_onLeave","data","_getColor","onClickHandler","onHoverHandler","onMouseOut","_getShape","Button","nativeButtonProps","onClick","onMouseOver","onFocus","onBlur","appearance","size","tokens","colorNeutralStroke1","text","colorNeutralBackground1","svgParentProps","svgChildProps","fill","strokeWidth","stroke","Shape","svgProps","pathProps","classNameForNonSvg","rect","height","backgroundColor","borderColor","content","legendColor","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));