@ayseaistudio/ui-components 3.11.9 → 3.12.1

package/dist/LineBarHorizontal/style.css

@@ -0,0 +1,44 @@
+.line-bar-horizontal {
+  align-items: flex-start;
+  border-radius: 8px;
+  box-shadow: inset 0px 0px 10px #ffffff40;
+  display: flex;
+  height: 160px;
+  justify-content: center;
+  overflow: hidden;
+  padding: 8px;
+  position: relative;
+  width: 100%;
+  min-width: 0;     
+  max-width: 100%;
+}
+
+.line-bar-horizontal .instance-node {
+  flex: 1 !important;
+  text-align: center !important;
+}
+
+.line-bar-horizontal .label-14 {
+  display: flex !important;
+  flex: 1 !important;
+  flex-grow: 1 !important;
+}
+
+.line-bar-horizontal.color-primary {
+  background-color: #b1e635;
+}
+
+.line-bar-horizontal.color-fourth {
+  background-color: #2424241a;
+  border: 1px solid;
+  border-color: #d1d1d1;
+}
+
+
+.line-bar-horizontal.color-secondary {
+  background-color: rgba(113, 163, 13, 1);
+}
+
+.line-bar-horizontal.color-tertiary {
+  background-color: rgba(70, 98, 18, 1);
+}

package/dist/LineBarVertical/LineBarVertical.d.ts

@@ -0,0 +1,14 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    colour: "primary" | "secondary" | "fourth";
+    className: any;
+    label?: string;
+}
+export declare const LineBarVertical: {
+    ({ colour, className, label }: Props): React.JSX.Element;
+    propTypes: {
+        colour: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/LineBarVertical/LineBarVertical.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { Label } from "../Label";
+import "./style.css";
+export const LineBarVertical = ({ colour, className, label }) => {
+    return (_jsxs("div", { className: `line-bar-vertical-wrapper ${className}`, children: [_jsx("div", { className: `line-bar-vertical colour-${colour} ${className}` }), label && (_jsx(Label, { bold: "on", className: "line-bar-vertical-label", color: "black", divClassName: "design-component-instance-node", size: "small", spacing: "on", stroke: "off", text: label, version: "primary" }))] }));
+};
+LineBarVertical.propTypes = {
+    colour: PropTypes.oneOf(["primary", "secondary", "fourth"]),
+};

package/dist/LineBarVertical/index.d.ts

@@ -0,0 +1 @@
+export { LineBarVertical } from "./LineBarVertical";

package/dist/LineBarVertical/index.js

@@ -0,0 +1 @@
+export { LineBarVertical } from "./LineBarVertical";

package/dist/LineBarVertical/style.css

@@ -0,0 +1,33 @@
+.line-bar-vertical-wrapper {
+  align-items: center;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+}
+
+.line-bar-vertical {
+  border-radius: 36px;
+  box-shadow: inset 0px 0px 10px #ffffff40;
+  height: 20px;
+  position: relative;
+  width: 200px;
+}
+
+.line-bar-vertical.colour-secondary {
+  background-color: #71a30d;
+}
+
+.line-bar-vertical.colour-fourth {
+  background-color: #2424241a;
+  border: 1px solid;
+  border-color: #d1d1d1;
+}
+
+.line-bar-vertical.colour-primary {
+  background-color: #b1e635;
+}
+
+.line-bar-vertical-label {
+  padding: 2px !important;
+}

package/dist/PieChart/PieChart.d.ts

@@ -0,0 +1,38 @@
+import { type MouseEvent } from "react";
+import PropTypes from "prop-types";
+import "./style.css";
+type SliceHoverPayload = {
+    index: number;
+    value: number;
+    label?: string;
+};
+interface Props {
+    className?: string;
+    data?: number[];
+    labels?: string[];
+    backgroundColors?: string[];
+    size?: number;
+    variant?: "pie" | "donut";
+    enableTooltip?: boolean;
+    tooltipFormatter?: (payload: SliceHoverPayload) => string;
+    onSliceHover?: (payload: SliceHoverPayload | null, event?: MouseEvent<SVGPathElement | SVGSVGElement>) => void;
+    enableLegend?: boolean;
+    legendInteractive?: boolean;
+}
+export declare const PieChart: {
+    ({ className, data, labels, backgroundColors, size, variant, enableTooltip, tooltipFormatter, onSliceHover, enableLegend, legendInteractive, }: Props): React.JSX.Element;
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+        data: PropTypes.Requireable<(number | null | undefined)[]>;
+        labels: PropTypes.Requireable<(string | null | undefined)[]>;
+        backgroundColors: PropTypes.Requireable<(string | null | undefined)[]>;
+        size: PropTypes.Requireable<number>;
+        variant: PropTypes.Requireable<string>;
+        enableTooltip: PropTypes.Requireable<boolean>;
+        tooltipFormatter: PropTypes.Requireable<(...args: any[]) => any>;
+        onSliceHover: PropTypes.Requireable<(...args: any[]) => any>;
+        enableLegend: PropTypes.Requireable<boolean>;
+        legendInteractive: PropTypes.Requireable<boolean>;
+    };
+};
+export {};

package/dist/PieChart/PieChart.js

@@ -0,0 +1,285 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { InfoTooltip } from "../InfoTooltip";
+import { ValueLabel } from "../ValueLabel";
+import "./style.css";
+const DEFAULT_COLORS = [
+    "#B1E635",
+    "#71A30D",
+    "#466212",
+    "#99C24D",
+    "#567C16",
+];
+export const PieChart = ({ className = "", data, labels, backgroundColors, size = 158, variant = "donut", enableTooltip = false, tooltipFormatter, onSliceHover, enableLegend = false, legendInteractive = false, }) => {
+    const [hoveredSlice, setHoveredSlice] = useState(null);
+    const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
+    const svgRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const [hiddenIndexes, setHiddenIndexes] = useState(new Set());
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    const hideTimerRef = useRef(null);
+    const animRafRef = useRef(null);
+    const [isVisible, setIsVisible] = useState(false);
+    const [animatedValues, setAnimatedValues] = useState(() => (data ?? []).map((v) => v ?? 0));
+    const uniqueId = useId();
+    const maskId = `pie-mask-${uniqueId}`;
+    const [introProgress, setIntroProgress] = useState(0); // 0 -> 1
+    const introPlayedRef = useRef(false);
+    const handleLegendClick = (index) => {
+        if (!legendInteractive)
+            return;
+        const totalItems = (data ?? []).length;
+        const activeItems = totalItems - hiddenIndexes.size;
+        // Son kalan legend'ı kapatmayı engelle
+        if (activeItems === 1 && !hiddenIndexes.has(index)) {
+            return;
+        }
+        setHiddenIndexes((prev) => {
+            const next = new Set(prev);
+            if (next.has(index))
+                next.delete(index);
+            else
+                next.add(index);
+            return next;
+        });
+    };
+    const rawData = data ?? [];
+    const rawLabels = labels ?? [];
+    const rawColors = backgroundColors ?? [];
+    const rawDataSafe = (data ?? []).map((v) => v ?? 0);
+    const isEmpty = rawDataSafe.length === 0 || rawDataSafe.every((v) => v === 0);
+    const hasData = !isEmpty;
+    const chartData = animatedValues;
+    const chartLabels = rawLabels;
+    const chartColors = rawData.map((_, index) => rawColors[index] ?? DEFAULT_COLORS[index % DEFAULT_COLORS.length]);
+    useEffect(() => {
+        if (!wrapperRef.current)
+            return;
+        setIsVisible(false);
+        const reduceMotion = typeof window !== "undefined" &&
+            window.matchMedia &&
+            window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (reduceMotion) {
+            setIsVisible(true);
+            setIntroProgress(1);
+            return;
+        }
+        const io = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                setIsVisible(true);
+                if (!reduceMotion && !introPlayedRef.current) {
+                    introPlayedRef.current = true;
+                    setIntroProgress(0);
+                    requestAnimationFrame(() => setIntroProgress(1));
+                }
+                else {
+                    setIntroProgress(1);
+                }
+                io.disconnect();
+            }
+        }, { threshold: 0.25 });
+        io.observe(wrapperRef.current);
+        return () => io.disconnect();
+    }, []);
+    useEffect(() => {
+        const rawData = (data ?? []).map((v) => v ?? 0);
+        const target = rawData.map((v, i) => (hiddenIndexes.has(i) ? 0 : v));
+        setAnimatedValues((prev) => {
+            if (prev.length !== target.length)
+                return target;
+            return prev;
+        });
+        const DURATION = 420; // 300-600 arası oynat
+        const start = performance.now();
+        const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+        // önceki değerleri snapshot al
+        const from = animatedValues.length === target.length ? animatedValues : target;
+        if (animRafRef.current)
+            cancelAnimationFrame(animRafRef.current);
+        const tick = (now) => {
+            const t = Math.min(1, (now - start) / DURATION);
+            const e = easeOutCubic(t);
+            const next = target.map((to, i) => {
+                const fr = from[i] ?? 0;
+                return fr + (to - fr) * e;
+            });
+            setAnimatedValues(next);
+            if (t < 1) {
+                animRafRef.current = requestAnimationFrame(tick);
+            }
+            else {
+                animRafRef.current = null;
+                setAnimatedValues(target);
+            }
+        };
+        animRafRef.current = requestAnimationFrame(tick);
+        return () => {
+            if (animRafRef.current)
+                cancelAnimationFrame(animRafRef.current);
+        };
+    }, [data, hiddenIndexes]);
+    useEffect(() => {
+        return () => {
+            if (animRafRef.current)
+                cancelAnimationFrame(animRafRef.current);
+            if (hideTimerRef.current)
+                window.clearTimeout(hideTimerRef.current);
+        };
+    }, []);
+    const radius = size / 2;
+    const center = radius;
+    const innerRadius = variant === "pie" ? 0 : radius * 0.35;
+    const circumference = 2 * Math.PI * radius;
+    const dashOffset = circumference * (1 - introProgress);
+    if (!hasData) {
+        const EMPTY_COLOR = "rgba(200, 200, 200, 1)";
+        return (_jsx("div", { ref: wrapperRef, className: `pie-chart-wrapper ${className} ${isVisible ? "is-visible" : ""}`, children: _jsxs("svg", { ref: svgRef, className: "pie-chart-customers", width: size, height: size, viewBox: `0 0 ${size} ${size}`, role: "img", "aria-label": "No data", children: [_jsx("defs", { children: _jsxs("mask", { id: maskId, children: [_jsx("rect", { x: "0", y: "0", width: size, height: size, fill: "black" }), _jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "white", strokeWidth: radius * 2, strokeDasharray: circumference, strokeDashoffset: dashOffset, style: {
+                                        transition: "stroke-dashoffset 1200ms cubic-bezier(0.2, 0.9, 0.2, 1)",
+                                        transformOrigin: "50% 50%",
+                                        transform: "rotate(-90deg)",
+                                    } })] }) }), _jsx("g", { mask: `url(#${maskId})`, children: _jsx("circle", { cx: center, cy: center, r: radius, fill: EMPTY_COLOR }) }), variant === "donut" && (_jsx("circle", { cx: center, cy: center, r: innerRadius, fill: "white" }))] }) }));
+    }
+    const total = chartData.reduce((sum, value) => sum + (value || 0), 0) || 1;
+    let cumulativeAngle = -90;
+    const FULL_CIRCLE_EPS = 359.999;
+    const slices = chartData.map((value, index) => {
+        const sliceAngle = (value / total) * 360;
+        const color = chartColors[index];
+        const isTiny = value <= total * 0.002;
+        const opacity = value <= 0.0001 ? 0 : 1;
+        if (sliceAngle >= FULL_CIRCLE_EPS) {
+            const handleEnter = (event) => {
+                const payload = {
+                    index,
+                    value,
+                    label: chartLabels[index],
+                };
+                if (enableTooltip && wrapperRef.current) {
+                    const rect = wrapperRef.current.getBoundingClientRect();
+                    if (hideTimerRef.current) {
+                        window.clearTimeout(hideTimerRef.current);
+                        hideTimerRef.current = null;
+                    }
+                    setHoveredSlice(payload);
+                    setTooltipPos({
+                        x: event.clientX - rect.left,
+                        y: event.clientY - rect.top - 20,
+                    });
+                    requestAnimationFrame(() => setTooltipOpen(true));
+                }
+                onSliceHover?.(payload, event);
+            };
+            const handleLeave = (event) => {
+                if (enableTooltip) {
+                    setTooltipOpen(false);
+                    hideTimerRef.current = window.setTimeout(() => {
+                        setHoveredSlice(null);
+                    }, 220);
+                }
+                onSliceHover?.(null, event);
+            };
+            return (_jsx("circle", { cx: center, cy: center, r: radius, fill: color, style: {
+                    opacity,
+                    transition: "opacity 220ms ease",
+                    pointerEvents: opacity === 0 ? "none" : "auto",
+                }, onMouseEnter: handleEnter, onMouseLeave: handleLeave }, index));
+        }
+        const startAngle = cumulativeAngle;
+        const endAngle = cumulativeAngle + sliceAngle;
+        cumulativeAngle = endAngle;
+        const largeArcFlag = sliceAngle > 180 ? 1 : 0;
+        const startRadians = (Math.PI / 180) * startAngle;
+        const endRadians = (Math.PI / 180) * endAngle;
+        const x1 = center + radius * Math.cos(startRadians);
+        const y1 = center + radius * Math.sin(startRadians);
+        const x2 = center + radius * Math.cos(endRadians);
+        const y2 = center + radius * Math.sin(endRadians);
+        const pathData = [
+            `M ${center} ${center}`,
+            `L ${x1} ${y1}`,
+            `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
+            "Z",
+        ].join(" ");
+        const handleEnter = (event) => {
+            if (isTiny)
+                return;
+            const payload = {
+                index,
+                value,
+                label: chartLabels[index],
+            };
+            if (enableTooltip && wrapperRef.current) {
+                const rect = wrapperRef.current.getBoundingClientRect();
+                if (hideTimerRef.current) {
+                    window.clearTimeout(hideTimerRef.current);
+                    hideTimerRef.current = null;
+                }
+                setHoveredSlice(payload);
+                setTooltipPos({
+                    x: event.clientX - rect.left,
+                    y: event.clientY - rect.top - 20,
+                });
+                requestAnimationFrame(() => setTooltipOpen(true));
+            }
+            onSliceHover?.(payload, event);
+        };
+        const handleLeave = (event) => {
+            if (enableTooltip) {
+                setTooltipOpen(false);
+                hideTimerRef.current = window.setTimeout(() => {
+                    setHoveredSlice(null);
+                }, 220);
+            }
+            onSliceHover?.(null, event);
+        };
+        return (_jsx("path", { d: pathData, fill: color, style: {
+                opacity,
+                transition: "opacity 220ms ease",
+                pointerEvents: opacity === 0 ? "none" : "auto",
+            }, onMouseEnter: handleEnter, onMouseLeave: handleLeave }, index));
+    });
+    const tooltipText = enableTooltip && hoveredSlice
+        ? tooltipFormatter
+            ? tooltipFormatter(hoveredSlice)
+            : `${hoveredSlice.label ?? ""}: ${hoveredSlice.value}`
+        : "";
+    return (_jsxs("div", { ref: wrapperRef, className: `pie-chart-wrapper ${className} ${isVisible ? "is-visible" : ""}`, children: [enableTooltip && hoveredSlice && (_jsx("div", { className: `pie-chart-tooltip ${tooltipOpen ? "pie-chart-tooltip-visible" : ""}`, style: { left: `${tooltipPos.x}px`, top: `${tooltipPos.y}px` }, children: _jsx(InfoTooltip, { text: tooltipText, withIcon: false, className: "pie-chart-tooltip-content" }) })), _jsxs("svg", { ref: svgRef, className: "pie-chart-customers", width: size, height: size, viewBox: `0 0 ${size} ${size}`, role: "img", "aria-label": chartLabels.join(", "), onMouseLeave: (event) => {
+                    if (enableTooltip) {
+                        setTooltipOpen(false);
+                        hideTimerRef.current = window.setTimeout(() => {
+                            setHoveredSlice(null);
+                        }, 220);
+                    }
+                    onSliceHover?.(null, event);
+                }, children: [_jsx("defs", { children: _jsxs("mask", { id: maskId, children: [_jsx("rect", { x: "0", y: "0", width: size, height: size, fill: "black" }), _jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "white", strokeWidth: radius * 2, strokeDasharray: circumference, strokeDashoffset: dashOffset, style: {
+                                        transition: "stroke-dashoffset 1200ms cubic-bezier(0.2, 0.9, 0.2, 1)",
+                                        transformOrigin: "50% 50%",
+                                        transform: "rotate(-90deg)",
+                                    } })] }) }), _jsx("g", { mask: `url(#${maskId})`, children: slices }), variant === "donut" && (_jsx("circle", { cx: center, cy: center, r: innerRadius, fill: "white" }))] }), enableLegend && hasData && rawLabels.length > 0 && (_jsx("div", { className: "pie-chart-legend", children: rawLabels.map((label, index) => {
+                    const legendValues = [
+                        "four-hundred",
+                        "five-hundred",
+                        "six-hundred",
+                        "seven-hundred",
+                        "eight-hundred",
+                        "nine-hundred",
+                    ];
+                    const valueDotsValue = legendValues[index % legendValues.length];
+                    const isStriked = hiddenIndexes.has(index);
+                    return (_jsx(ValueLabel, { className: "value-label-instance", labelText: label, spacing: "ON", stroke: "ON", twoDot: "OFF", valueDotsSize: "x-small", valueDotsValue: valueDotsValue, isStriked: isStriked, onClick: () => handleLegendClick(index) }, index));
+                }) }))] }));
+};
+PieChart.propTypes = {
+    className: PropTypes.string,
+    data: PropTypes.arrayOf(PropTypes.number),
+    labels: PropTypes.arrayOf(PropTypes.string),
+    backgroundColors: PropTypes.arrayOf(PropTypes.string),
+    size: PropTypes.number,
+    variant: PropTypes.oneOf(["pie", "donut"]),
+    enableTooltip: PropTypes.bool,
+    tooltipFormatter: PropTypes.func,
+    onSliceHover: PropTypes.func,
+    enableLegend: PropTypes.bool,
+    legendInteractive: PropTypes.bool,
+};

package/dist/PieChart/index.d.ts

@@ -0,0 +1 @@
+export { PieChart } from "./PieChart";

package/dist/PieChart/index.js

@@ -0,0 +1 @@
+export { PieChart } from "./PieChart";

package/dist/PieChart/style.css

@@ -0,0 +1,59 @@
+.pie-chart-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+
+}
+
+.pie-chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.pie-chart-wrapper .pie-chart-tooltip {
+  position: absolute;
+  pointer-events: none;
+  z-index: 2;
+  opacity: 0;
+  transform: translate(-50%, -55%) scale(0.96);
+  filter: blur(1px);
+  transition:
+    opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
+    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
+    filter 220ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: opacity, transform, filter;
+}
+
+.pie-chart-wrapper .pie-chart-tooltip-visible {
+  opacity: 1;
+  transform: translate(-50%, -75%) scale(1);
+  filter: blur(0);
+}
+
+.pie-chart-customers {
+  opacity: 0;
+  transform: translateY(6px);
+  transition: opacity 0.35s ease, transform 0.35s ease;
+}
+
+.pie-chart-wrapper.is-visible .pie-chart-customers {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  .pie-chart-customers {
+    transition: none;
+    transform: none;
+    opacity: 1;
+  }
+}

package/dist/ValueDots/ValueDots.d.ts

@@ -0,0 +1,15 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    size: "XX-small" | "x-small" | "small";
+    value: "none" | "one-thousand" | "nine-hundred-and-fifty" | "ten" | "three-hundred" | "eight-hundred" | "five" | "five-hundred" | "sixty" | "thirty" | "twenty" | "two-hundred" | "forty" | "six-hundred" | "nine-hundred" | "four-hundred" | "fifty_1" | "eighty" | "one-hundred" | "fifty" | "seven-hundred" | "seventy";
+    className?: any;
+}
+export declare const ValueDots: {
+    ({ size, value, className }: Props): React.JSX.Element;
+    propTypes: {
+        size: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/ValueDots/ValueDots.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+export const ValueDots = ({ size, value, className }) => {
+    return _jsx("div", { className: `value-dots ${value} ${size} ${className}` });
+};
+ValueDots.propTypes = {
+    size: PropTypes.oneOf(["XX-small", "x-small", "small"]),
+    value: PropTypes.oneOf([
+        "none",
+        "one-thousand",
+        "nine-hundred-and-fifty",
+        "ten",
+        "three-hundred",
+        "eight-hundred",
+        "five",
+        "five-hundred",
+        "sixty",
+        "thirty",
+        "twenty",
+        "two-hundred",
+        "forty",
+        "six-hundred",
+        "nine-hundred",
+        "four-hundred",
+        "fifty_1",
+        "eighty",
+        "one-hundred",
+        "fifty",
+        "seven-hundred",
+        "seventy",
+    ]),
+};

package/dist/ValueDots/index.d.ts

@@ -0,0 +1 @@
+export { ValueDots } from "./ValueDots";

package/dist/ValueDots/index.js

@@ -0,0 +1 @@
+export { ValueDots } from "./ValueDots";

package/dist/ValueDots/style.css

@@ -0,0 +1,129 @@
+.value-dots {
+  border: 1px solid;
+  border-radius: 96px;
+  position: relative;
+}
+
+.value-dots.three-hundred {
+  background-color: #caf264;
+  border-color: #24242433;
+}
+
+.value-dots.six-hundred {
+  background-color: #71a30d;
+  border-color: #24242433;
+}
+
+.value-dots.forty {
+  background-color: #71a30d66;
+  border-color: #24242433;
+}
+
+.value-dots.seventy {
+  background-color: #71a30db2;
+  border-color: #24242433;
+}
+
+.value-dots.eight-hundred {
+  background-color: #466212;
+  border-color: #24242433;
+}
+
+.value-dots.twenty {
+  background-color: #71a30d33;
+  border-color: #24242433;
+}
+
+.value-dots.seven-hundred {
+  background-color: #567c0f;
+  border-color: #24242433;
+}
+
+.value-dots.two-hundred {
+  background-color: #e1f99d;
+  border-color: #24242433;
+}
+
+.value-dots.sixty {
+  background-color: #71a30d99;
+  border-color: #24242433;
+}
+
+.value-dots.one-hundred {
+  background-color: #f0fccb;
+  border-color: #24242433;
+}
+
+.value-dots.x-small {
+  height: 8px;
+  width: 8px;
+}
+
+.value-dots.five-hundred {
+  background-color: #98d317;
+  border-color: #24242433;
+}
+
+.value-dots.XX-small {
+  height: 6px;
+  width: 6px;
+}
+
+.value-dots.nine-hundred-and-fifty {
+  background-color: #1d2e05;
+  border-color: #24242433;
+}
+
+.value-dots.none {
+  border-color: #d1d1d1;
+}
+
+.value-dots.nine-hundred {
+  background-color: #3b5314;
+  border-color: #24242433;
+}
+
+.value-dots.eighty {
+  background-color: #71a30dcc;
+  border-color: #24242433;
+}
+
+.value-dots.thirty {
+  background-color: #71a30d4c;
+  border-color: #24242433;
+}
+
+.value-dots.fifty_1 {
+  background-color: #f9fee7;
+  border-color: #24242433;
+}
+
+.value-dots.five {
+  background-color: #71a30d0d;
+  border-color: #24242433;
+}
+
+.value-dots.fifty {
+  background-color: #71a30d80;
+  border-color: #24242433;
+}
+
+.value-dots.small {
+  height: 14px;
+  width: 14px;
+}
+
+.value-dots.ten {
+  background-color: #71a30d1a;
+  border-color: #24242433;
+}
+
+.value-dots.one-thousand {
+  background-color: #3d3d3d;
+  border-color: #24242433;
+}
+
+.value-dots.four-hundred {
+  background-color: #b1e635;
+  border-color: #24242433;
+}