@alfalab/core-components-chart 3.3.3 → 3.4.0

package/moderncssm/components/Legends/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+import { LegendProps } from "../../types/legend.types";
+import { SeriaProps } from "../../types/seria.types";
+import { DataDynamicBooleanProps } from "../../types/utils/data.types";
+interface Props {
+    legend: LegendProps;
+    series: SeriaProps[];
+    id: string;
+    charts: DataDynamicBooleanProps;
+    toggleChart(item: SeriaProps): void;
+}
+declare const Legends: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLUListElement>>;
+export { Legends };

package/moderncssm/components/Legends/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import cn from 'classnames';
+import { Typography } from '@alfalab/core-components-typography/moderncssm';
+import { CircleIcon } from '../../icons/Circle.js';
+import { CircleLineIcon } from '../../icons/CircleLine.js';
+import { FilledCircleIcon } from '../../icons/FilledCircle.js';
+import { StrokeCircleIcon } from '../../icons/StrokeCircle.js';
+import styles from './index.module.css';
+
+const icons = {
+    circleLine: CircleLineIcon,
+    filledCircle: FilledCircleIcon,
+    strokeCircle: StrokeCircleIcon,
+    circle: CircleIcon,
+};
+const Legends = React.forwardRef(({ legend, series, id, charts, toggleChart }, ref) => {
+    const style = {
+        textAlign: legend.align || 'center',
+        transform: `translateY(${(legend?.marginTop ? legend.marginTop : 0) *
+            (legend.verticalAlign === 'top' ? -1 : 1)}px)`,
+    };
+    return (React.createElement("ul", { ref: ref, className: cn(styles.legendWrap), style: style }, series.map((item) => {
+        if (item.hideLegend || item.hide)
+            return null;
+        const Icon = icons[item.icon] || CircleIcon;
+        return (React.createElement("li", { role: 'presentation', key: `${id}-${item.properties.dataKey}`, className: cn(styles.legendItem, charts[`${item.properties.dataKey}`] ? '' : styles.legendUnactive), onClick: () => toggleChart(item) },
+            React.createElement("div", { className: cn(styles.legendContent) },
+                Icon ? (React.createElement("i", { className: cn(styles.legendIcon) },
+                    React.createElement(Icon, { fill: item.properties?.fill ||
+                            item.properties?.stroke ||
+                            '', height: legend.iconHeight || 16 }))) : null,
+                React.createElement(Typography.Text, { view: 'primary-medium', tag: 'span', className: cn(styles.legendValue) }, item.properties.name))));
+    })));
+});
+
+export { Legends };

package/moderncssm/components/Legends/index.module.css

@@ -0,0 +1,36 @@
+/* */
+
+.legendContent {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.legendWrap {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.legendItem {
+    margin-right: var(--gap-32);
+    cursor: pointer;
+    display: inline-block;
+}
+
+.legendItem:last-child {
+    margin-right: 0;
+}
+
+.legendUnactive {
+    opacity: 0.3;
+}
+
+.legendIcon {
+    margin-right: 13px;
+    display: flex;
+}
+
+.legendValue {
+    text-transform: capitalize;
+}

package/moderncssm/components/LinearGradient.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { LinearGradientProps } from "../types/utils/gradient.types";
+declare const LinearGradient: ({ id, gid, points }: LinearGradientProps) => React.ReactElement;
+export { LinearGradient };

package/moderncssm/components/LinearGradient.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const LinearGradient = ({ id, gid, points }) => (React.createElement("linearGradient", { key: `${id}-${gid}`, id: `${id}-${gid}`, x1: '0', y1: '0', x2: '0', y2: '1' }, points.map((point, index) => (React.createElement("stop", { key: `${id}${gid}-${index.toString()}`, offset: `${point.offset}%`, stopColor: point.stopColor, stopOpacity: point.stopOpacity })))));
+
+export { LinearGradient };

package/moderncssm/components/RectBar.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const RectBar: ({ fill, x, y, width, height, radius, background }: any) => JSX.Element;
+export { RectBar };

package/moderncssm/components/RectBar.js

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react';
+import { usePathBar } from '../hooks/usePathBar/index.js';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// eslint-disable-next-line complexity
+const getPath = (x, width, height, initHeight, topRadius, bottomRadius, initY) => `
+        M${x + ((height !== 0 && bottomRadius) || 0)} ${initY + initHeight || 0}
+        Q${x} ${initY + initHeight} ${x} ${initY + initHeight - ((height !== 0 && bottomRadius) || 0)}
+        L${x} ${initY + ((height !== 0 && topRadius) || 0)}
+        Q${x} ${initY} ${x + ((height !== 0 && topRadius) || 0)} ${initY}
+        L${x + width - ((height !== 0 && topRadius) || 0)} ${initY}
+        Q${x + width} ${initY} ${x + width} ${initY + (topRadius || 0)}
+        L${x + width} ${initY + initHeight - ((height !== 0 && bottomRadius) || 0)}
+        Q${x + width} ${initY + initHeight} ${x + width - ((height !== 0 && bottomRadius) || 0)} ${initY + initHeight}
+        Z
+    `;
+const RectBar = ({ fill, x, y, width, height, radius, background }) => {
+    const [initHeight, topRadius, bottomRadius, initY] = usePathBar({
+        radius,
+        height,
+        background,
+        y,
+    });
+    return useMemo(() => (React.createElement("path", { d: getPath(x, width, height, initHeight, topRadius, bottomRadius, initY), stroke: 'none', fill: fill })), [x, width, height, initHeight, topRadius, bottomRadius, initY, fill]);
+};
+
+export { RectBar };

package/moderncssm/components/Tick/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TickProps } from "../../types/utils/tick.types";
+declare const Tick: ({ y, payload, tickFormatter, xAxis }: TickProps) => React.JSX.Element;
+export { Tick };

package/moderncssm/components/Tick/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './index.module.css';
+
+const Tick = ({ y, payload, tickFormatter, xAxis }) => {
+    const radius = 4;
+    const marginTick = xAxis?.tickMargin &&
+        (xAxis.tickMargin > 0 ? xAxis.tickMargin - radius / 2 : xAxis.tickMargin === 0)
+        ? (radius / 2) * -1
+        : null;
+    return (React.createElement("g", { className: cn(styles.tick), opacity: '1', textAnchor: 'middle', transform: `translate(${payload.coordinate}, ${y - (typeof marginTick === 'number' ? marginTick : 0) - radius * 2})` },
+        React.createElement("text", { className: cn(styles.tickText), y: '30' }, tickFormatter ? tickFormatter(payload.value) : payload.value),
+        React.createElement("circle", { r: radius, className: cn(styles.circle) })));
+};
+
+export { Tick };

package/moderncssm/components/Tick/index.module.css

@@ -0,0 +1,18 @@
+/* */
+
+.tickText {
+    fill: var(--color-light-text-primary);
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+}
+
+.circle {
+    opacity: 0.3;
+    fill: var(--color-dark-base-bg-primary);
+}
+
+.circle {
+    opacity: 0.3;
+    fill: var(--color-dark-base-bg-primary);
+}

package/moderncssm/components/TooltipContent/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import React from 'react';
+import { PayloadProps } from "../../types/payload.types";
+import { SeriaProps } from "../../types/seria.types";
+import { TooltipProps } from "../../types/tooltip.types";
+interface TooltipContentProps extends TooltipProps {
+    payload: PayloadProps[];
+    series: SeriaProps[];
+}
+declare const TooltipContent: ({ payload, separator, label, tooltipArrowSide, arrow, series, labelFormatter, labelStyle, }: TooltipContentProps) => React.JSX.Element | null;
+export { TooltipContentProps, TooltipContent };

package/moderncssm/components/TooltipContent/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import cn from 'classnames';
+import { Typography } from '@alfalab/core-components-typography/moderncssm';
+import styles from './index.module.css';
+
+const TooltipContent = ({ payload, separator, label, tooltipArrowSide, arrow, series, labelFormatter, labelStyle, }) => {
+    if (!label || payload.length === 0)
+        return null;
+    return (React.createElement("div", { className: cn(styles.tooltip) },
+        arrow && (React.createElement("span", { className: cn(styles.tooltipArrow, tooltipArrowSide ? '' : styles.tooltipArrowRight) })),
+        React.createElement("ul", { className: cn(styles.tooltipList) },
+            React.createElement("li", { className: cn(styles.tooltipItem), style: labelStyle },
+                React.createElement(Typography.Text, { view: 'primary-medium', tag: 'span', weight: 'medium', className: cn(styles.tooltipLabel) }, labelFormatter ? labelFormatter(label) : label)),
+            payload.map((entry) => {
+                const data = series.find((d) => d.properties.dataKey === entry.dataKey);
+                if (data?.hideTooltip || data?.hide)
+                    return null;
+                return (React.createElement("li", { className: cn(styles.tooltipItem), key: entry.dataKey, style: { color: entry.color } },
+                    React.createElement(Typography.Text, { view: 'primary-medium', tag: 'span', weight: 'medium', className: cn(styles.tooltipValue) },
+                        entry?.formatter ? entry.formatter(entry.value) : entry.value,
+                        separator || ' '),
+                    React.createElement(Typography.Text, { view: 'secondary-large', tag: 'span', className: cn(styles.tooltipName) }, `${entry.name}`)));
+            }))));
+};
+
+export { TooltipContent };

package/moderncssm/components/TooltipContent/index.module.css

@@ -0,0 +1,51 @@
+/* */
+
+.tooltip {
+    background-color: var(--color-light-base-bg-primary);
+    border: 1px solid var(--color-light-neutral-400);
+    box-shadow: var(--shadow-l);
+    border-radius: var(--border-radius-m);
+    padding: var(--gap-12) var(--gap-16);
+    pointer-events: none;
+    position: relative;
+}
+
+.tooltipList {
+    position: relative;
+    z-index: 5;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.tooltipItem {
+    margin-bottom: 10px;
+}
+
+.tooltipArrow {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(1, 1) rotate(45deg);
+    width: 10px;
+    height: 10px;
+    border: 1px solid var(--color-light-neutral-400);
+    background-color: var(--color-light-base-bg-primary);
+}
+
+.tooltipArrow:before {
+    content: '';
+    position: absolute;
+    left: -2px;
+    top: -2px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 24px 24px 0;
+    border-color: transparent var(--color-light-base-bg-primary) transparent transparent;
+}
+
+.tooltipArrowRight {
+    left: 100%;
+    transform: translate(-50%, -50%) scale(-1, 1) rotate(45deg);
+}

package/moderncssm/hooks/usePathBar/index.d.ts

@@ -0,0 +1,14 @@
+import { RadiusProp } from "../../types/seria.types";
+type usePathBarProps = {
+    radius?: RadiusProp;
+    height: number;
+    background?: {
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    };
+    y?: number;
+};
+declare const usePathBar: (props: usePathBarProps) => number[];
+export { usePathBarProps, usePathBar };

package/moderncssm/hooks/usePathBar/index.js

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+import { getRadius } from './utils/getRadius.js';
+
+const usePathBar = (props) => {
+    const [topRadius, setTopRadius] = useState(0);
+    const [bottomRadius, setBottomRadius] = useState(0);
+    const [initHeight, setInitHeight] = useState(0);
+    const [initY, setInitY] = useState(0);
+    useEffect(() => {
+        const { radius, height, background, y } = props;
+        const radiusTop = radius?.top ? getRadius(height, radius.top) : 0;
+        const radiusBottom = radius?.bottom ? getRadius(height, radius.bottom) : 0;
+        const heightCheck = (radius && height !== 0 && height / 2 < (radius?.top || 0)) ||
+            height / 2 < (radius?.bottom || 0);
+        // eslint-disable-next-line no-nested-ternary
+        const heightInit = heightCheck
+            ? (radiusTop || radiusBottom) && radiusTop + radiusBottom
+            : height > 0 && height < 2
+                ? 2
+                : height;
+        if (background && y) {
+            const yInit = heightCheck
+                ? background.height + background.y - (radiusTop + radiusBottom)
+                : y;
+            setInitY(yInit);
+        }
+        if (radiusTop !== 0)
+            setTopRadius(radiusTop);
+        if (radiusBottom !== 0)
+            setBottomRadius(radiusBottom);
+        if (heightInit !== 0)
+            setInitHeight(heightInit);
+    }, [props]);
+    return [initHeight, topRadius, bottomRadius, initY];
+};
+
+export { usePathBar };

package/moderncssm/hooks/usePathBar/utils/getRadius.d.ts

@@ -0,0 +1,2 @@
+declare const getRadius: (height: number, radius: number) => number;
+export { getRadius };

package/moderncssm/hooks/usePathBar/utils/getRadius.js

@@ -0,0 +1,6 @@
+const getRadius = (height, radius) => {
+    const result = radius && height / 2 < radius ? Math.ceil(height / 2) : radius || 0;
+    return result;
+};
+
+export { getRadius };

package/moderncssm/hooks/useSettings/index.d.ts

@@ -0,0 +1,19 @@
+import { Dispatch, SetStateAction } from 'react';
+import { OptionsProps } from "../../types/options.types";
+import { DataDynamicBooleanProps, DataDynamicProps } from "../../types/utils/data.types";
+type Settings = [
+    {
+        state: OptionsProps | null;
+        data: DataDynamicProps[];
+        charts: DataDynamicBooleanProps;
+        filterCount: number;
+    },
+    {
+        setState: Dispatch<SetStateAction<OptionsProps | null>>;
+        setData: Dispatch<SetStateAction<DataDynamicProps[]>>;
+        setCharts: Dispatch<SetStateAction<DataDynamicBooleanProps>>;
+        setFilterCount: Dispatch<SetStateAction<number>>;
+    }
+];
+declare const useSettings: (options: OptionsProps) => Settings;
+export { useSettings };

package/moderncssm/hooks/useSettings/index.js

@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+import { setComposedChartsMargin } from './utils/setComposedChartsMargin.js';
+import { setDatas } from './utils/setDatas.js';
+import { setGradientCharts } from './utils/setGradientCharts.js';
+import { setLegendMargin } from './utils/setLegendMargin.js';
+import { sortByIndex } from './utils/sortByIndex.js';
+
+const useSettings = (options) => {
+    const [state, setState] = useState(null);
+    const [charts, setCharts] = useState({});
+    const [data, setData] = useState([]);
+    const [filterCount, setFilterCount] = useState(0);
+    useEffect(() => {
+        const settings = { ...options };
+        const { brush, legend, series, labels, composeChart, xAxis } = settings;
+        if (settings.legend?.margin && brush && legend)
+            settings.legend.margin.top = setLegendMargin(brush, legend);
+        settings.series = setGradientCharts(series);
+        const [initData, chartsNames, count] = setDatas(settings.series, labels);
+        settings.composeChart.margin = setComposedChartsMargin(composeChart, legend, brush, xAxis);
+        settings.series = sortByIndex(settings.series);
+        setState(settings);
+        setData(initData);
+        setCharts(chartsNames);
+        setFilterCount(count);
+    }, [options]);
+    return [
+        {
+            state,
+            data,
+            charts,
+            filterCount,
+        },
+        {
+            setState,
+            setData,
+            setCharts,
+            setFilterCount,
+        },
+    ];
+};
+
+export { useSettings };

package/moderncssm/hooks/useSettings/utils/setComposedChartsMargin.d.ts

@@ -0,0 +1,12 @@
+import { BrushProps } from "../../../types/brush.types";
+import { ComposedChartProps } from "../../../types/composedChart.types";
+import { LegendProps } from "../../../types/legend.types";
+import { XAxisProps } from "../../../types/xAxis.types";
+type ComposedChartsMarginResultProps = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+declare const setComposedChartsMargin: (composeChart: ComposedChartProps, legend: LegendProps | undefined, brush: BrushProps | undefined, xAxis: XAxisProps) => ComposedChartsMarginResultProps;
+export { setComposedChartsMargin };

package/moderncssm/hooks/useSettings/utils/setComposedChartsMargin.js

@@ -0,0 +1,12 @@
+const setComposedChartsMargin = (composeChart, legend, brush, xAxis) => ({
+    top: (composeChart?.initMargin?.top || 0) +
+        (legend?.verticalAlign === 'top' && legend?.marginTop ? Math.abs(legend.marginTop) : 0),
+    bottom: (composeChart?.initMargin?.bottom || 0) +
+        (xAxis?.tickMargin || 0) +
+        (brush?.brushMargin || 0) +
+        (legend?.verticalAlign !== 'top' && legend?.marginTop ? legend.marginTop : 0),
+    left: composeChart?.initMargin?.left || 0,
+    right: composeChart?.initMargin?.right || 0,
+});
+
+export { setComposedChartsMargin };

package/moderncssm/hooks/useSettings/utils/setDatas.d.ts

@@ -0,0 +1,5 @@
+import { SeriaProps } from "../../../types/seria.types";
+import { DataDynamicBooleanProps, DataDynamicProps } from "../../../types/utils/data.types";
+type DatasResultProps = [DataDynamicProps[], DataDynamicBooleanProps, number];
+declare const setDatas: (series: SeriaProps[], labels: Array<string | number>) => DatasResultProps;
+export { setDatas };

package/moderncssm/hooks/useSettings/utils/setDatas.js

@@ -0,0 +1,32 @@
+const setDatas = (series, labels) => {
+    const initData = [];
+    const chartsNames = {};
+    let count = 0;
+    for (let i = 0; i < series.length; i++) {
+        const { properties: { dataKey = '' } = {}, data: seriaData = [], hideLegend, hide, } = series[i];
+        if (!hideLegend && !hide)
+            count += 1;
+        labels.map((label) => {
+            const item = seriaData.find((d) => d.label === label);
+            if (item) {
+                const obj = {
+                    label,
+                };
+                obj[`${dataKey}`] = item.value;
+                if (!chartsNames[`${dataKey}`])
+                    chartsNames[`${dataKey}`] = true;
+                const index = initData
+                    .map((dataItem) => dataItem.label)
+                    .indexOf(label);
+                if (index === -1)
+                    initData.push(obj);
+                else
+                    initData[index] = { ...initData[index], ...obj };
+            }
+            return null;
+        });
+    }
+    return [initData, chartsNames, count];
+};
+
+export { setDatas };

package/moderncssm/hooks/useSettings/utils/setGradientCharts.d.ts

@@ -0,0 +1,3 @@
+import { SeriaProps } from "../../../types/seria.types";
+declare const setGradientCharts: (series: SeriaProps[]) => SeriaProps[];
+export { setGradientCharts };

package/moderncssm/hooks/useSettings/utils/setGradientCharts.js

@@ -0,0 +1,35 @@
+const setGradientCharts = (series) => {
+    const filterSeries = series.filter((item) => item.chart !== 'gradient');
+    return filterSeries.reduce((accum, item) => {
+        const { chart, data: dataSeria, offset, fill } = item;
+        if (chart === 'area') {
+            let newData = null;
+            if (offset) {
+                newData = dataSeria.map((d) => {
+                    const { label, value } = d;
+                    return {
+                        label,
+                        value: Math.ceil(value - value * offset),
+                    };
+                });
+            }
+            accum.push({
+                ...item,
+                zIndex: -100,
+                chart: 'gradient',
+                hideLegend: true,
+                hideTooltip: true,
+                properties: {
+                    ...item.properties,
+                    dataKey: `${item.properties.dataKey}-gradient`,
+                    fill,
+                },
+                data: newData || item.data,
+            });
+        }
+        accum.push(item);
+        return accum;
+    }, []);
+};
+
+export { setGradientCharts };

package/moderncssm/hooks/useSettings/utils/setLegendMargin.d.ts

@@ -0,0 +1,4 @@
+import { BrushProps } from "../../../types/brush.types";
+import { LegendProps } from "../../../types/legend.types";
+declare const setLegendMargin: (brush: BrushProps, legend: LegendProps) => number;
+export { setLegendMargin };

package/moderncssm/hooks/useSettings/utils/setLegendMargin.js

@@ -0,0 +1,14 @@
+const setLegendMargin = (brush, legend) => {
+    let top = 0;
+    if (typeof brush?.brushMargin !== 'number' || !legend?.verticalAlign)
+        return top;
+    if (legend.verticalAlign === 'top') {
+        top = legend.marginTop ? Number(legend.marginTop * -1) : 0;
+    }
+    else {
+        top = legend?.marginTop ? legend.marginTop + (brush?.brushMargin || 0) : brush?.brushMargin;
+    }
+    return top;
+};
+
+export { setLegendMargin };

package/moderncssm/hooks/useSettings/utils/sortByIndex.d.ts

@@ -0,0 +1,3 @@
+import { SeriaProps } from "../../../types/seria.types";
+declare const sortByIndex: (series: SeriaProps[]) => SeriaProps[];
+export { sortByIndex };

package/moderncssm/hooks/useSettings/utils/sortByIndex.js

@@ -0,0 +1,8 @@
+const sortByIndex = (series) => series.sort((a, b) => {
+    if (a?.zIndex && b?.zIndex && a?.zIndex > b?.zIndex) {
+        return 1;
+    }
+    return -1;
+});
+
+export { sortByIndex };

package/moderncssm/icons/Circle.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const CircleIcon: ({ fill, height }: Props) => React.JSX.Element;
+export { CircleIcon };

package/moderncssm/icons/Circle.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const CircleIcon = ({ fill = '#FF5C5C', height = 16 }) => (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 16 16', fill: 'none' },
+    React.createElement("circle", { cx: '8', cy: '8', r: '8', fill: fill })));
+
+export { CircleIcon };

package/moderncssm/icons/CircleLine.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const CircleLineIcon: ({ fill, height }: Props) => React.ReactElement;
+export { CircleLineIcon };

package/moderncssm/icons/CircleLine.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const CircleLineIcon = ({ fill = '#FF5C5C', height = 16 }) => (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 22 12', fill: 'none' },
+    React.createElement("circle", { cx: '11', cy: '6', r: '6', fill: fill }),
+    React.createElement("rect", { y: '5', width: '22', height: '2', fill: fill })));
+
+export { CircleLineIcon };

package/moderncssm/icons/FilledCircle.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const FilledCircleIcon: ({ fill, height }: Props) => React.JSX.Element;
+export { FilledCircleIcon };

package/moderncssm/icons/FilledCircle.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const FilledCircleIcon = ({ fill = '#5A8ECF', height = 16 }) => (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 22 22', fill: 'none' },
+    React.createElement("circle", { cx: '11', cy: '11', r: '10', fill: 'url(#paint0_linear)', stroke: fill, strokeWidth: '2' }),
+    React.createElement("defs", null,
+        React.createElement("linearGradient", { id: 'paint0_linear', x1: '11', y1: '1', x2: '11', y2: '21', gradientUnits: 'userSpaceOnUse' },
+            React.createElement("stop", { stopColor: fill, stopOpacity: '0.2' }),
+            React.createElement("stop", { offset: '1', stopColor: fill, stopOpacity: '0' })))));
+
+export { FilledCircleIcon };

package/moderncssm/icons/Point.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const PointIcon: ({ fill, height }: Props) => React.JSX.Element;
+export { PointIcon };

package/moderncssm/icons/Point.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const PointIcon = ({ fill = '#5A8ECF', height = 16 }) => (React.createElement("svg", { height: height, viewBox: '0 0 18 18' },
+    React.createElement("circle", { cx: '9', cy: '9', r: '9', strokeWidth: '1', fill: fill, fillOpacity: '0.4' }),
+    React.createElement("circle", { cx: '9', cy: '9', r: '3', strokeWidth: '2', stroke: '#fff', fill: fill })));
+
+export { PointIcon };

package/moderncssm/icons/StrokeCircle.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+type Props = {
+    fill?: string;
+    height?: number;
+};
+declare const StrokeCircleIcon: ({ fill, height }: Props) => React.JSX.Element;
+export { StrokeCircleIcon };

package/moderncssm/icons/StrokeCircle.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const StrokeCircleIcon = ({ fill = '#5A8ECF', height = 16 }) => (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 22 22', fill: 'none' },
+    React.createElement("circle", { cx: '11', cy: '11', r: '10', stroke: fill, strokeWidth: '2', strokeDasharray: '8 8' })));
+
+export { StrokeCircleIcon };

package/moderncssm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./types/index";