@techsio/ui-kit 0.38.0 → 0.40.0

package/dist/.storybook/manager.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=manager.d.ts.map

package/dist/.storybook/manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manager.d.ts","sourceRoot":"","sources":["../../.storybook/manager.tsx"],"names":[],"mappings":""}

package/dist/.storybook/preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../.storybook/preview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAU1D,OAAO,yBAAyB,CAAA;AA2ChC,QAAA,MAAM,OAAO,EAAE,OA0Dd,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../.storybook/preview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAU1D,OAAO,yBAAyB,CAAA;AAqChC,QAAA,MAAM,OAAO,EAAE,OAyDd,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/atoms/action-icon.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { ActionIcon } from "./action-icon.js";
-code_connect.connect(ActionIcon, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=2668-36", {
+code_connect.connect(ActionIcon, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=2668-36", {
     imports: [
         'import { ActionIcon } from "@techsio/ui-kit/atoms/action-icon"'
     ],

package/dist/atoms/badge.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Badge } from "./badge.js";
-code_connect.connect(Badge, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1-7735", {
+code_connect.connect(Badge, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1-7735", {
     imports: [
         'import { Badge } from "@techsio/ui-kit/atoms/badge"'
     ],

package/dist/atoms/button.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Button } from "./button.js";
-code_connect.connect(Button, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1-5627", {
+code_connect.connect(Button, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1-5627", {
     imports: [
         'import { Button } from "@techsio/ui-kit/atoms/button"'
     ],

package/dist/atoms/checkbox.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Checkbox } from "./checkbox.js";
-code_connect.connect(Checkbox, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=428-9", {
+code_connect.connect(Checkbox, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=428-9", {
     imports: [
         'import { Checkbox } from "@techsio/ui-kit/atoms/checkbox"'
     ],

package/dist/atoms/icon.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Icon } from "./icon.js";
-code_connect.connect(Icon, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=365-170", {
+code_connect.connect(Icon, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=365-170", {
     imports: [
         'import { Icon } from "@techsio/ui-kit/atoms/icon"'
     ],

package/dist/atoms/image.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Image } from "./image.js";
-code_connect.connect(Image, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=484-19", {
+code_connect.connect(Image, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=484-19", {
     imports: [
         'import { Image } from "@techsio/ui-kit/atoms/image"'
     ],

package/dist/atoms/input.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Input } from "./input.js";
-code_connect.connect(Input, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=304-107", {
+code_connect.connect(Input, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=304-107", {
     imports: [
         'import { Input } from "@techsio/ui-kit/atoms/input"'
     ],

package/dist/atoms/label.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Label } from "./label.js";
-code_connect.connect(Label, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1-7840", {
+code_connect.connect(Label, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1-7840", {
     imports: [
         'import { Label } from "@techsio/ui-kit/atoms/label"'
     ],

package/dist/atoms/link-button.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { LinkButton } from "./link-button.js";
-code_connect.connect(LinkButton, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1358-1944", {
+code_connect.connect(LinkButton, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1358-1944", {
     imports: [
         'import { LinkButton } from "@techsio/ui-kit/atoms/link-button"'
     ],

package/dist/atoms/link.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Link } from "./link.js";
-code_connect.connect(Link, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1355-13", {
+code_connect.connect(Link, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1355-13", {
     imports: [
         'import { Link } from "@techsio/ui-kit/atoms/link"'
     ],

package/dist/atoms/numeric-input.figma.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { NumericInput } from "./numeric-input.js";
-code_connect.connect(NumericInput, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=607-107", {
+code_connect.connect(NumericInput, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=607-107", {
     imports: [
         'import { NumericInput } from "@techsio/ui-kit/atoms/numeric-input"'
     ],

package/dist/atoms/rating.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Rating } from "./rating.js";
-code_connect.connect(Rating, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=521-336", {
+code_connect.connect(Rating, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=521-336", {
     imports: [
         'import { Rating } from "@techsio/ui-kit/atoms/rating"'
     ],

package/dist/atoms/skeleton.figma.js

@@ -5,7 +5,7 @@ const placeholderBgClassByVariant = {
     primary: "bg-skeleton-bg-primary",
     secondary: "bg-skeleton-bg-secondary"
 };
-code_connect.connect(Skeleton.Rectangle, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=565-101", {
+code_connect.connect(Skeleton.Rectangle, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=565-101", {
     imports: [
         'import { Skeleton } from "@techsio/ui-kit/atoms/skeleton"'
     ],
@@ -31,7 +31,7 @@ code_connect.connect(Skeleton.Rectangle, "https://www.figma.com/design/12xb1pqXK
         });
     }
 });
-code_connect.connect(Skeleton.Circle, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=565-198", {
+code_connect.connect(Skeleton.Circle, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=565-198", {
     imports: [
         'import { Skeleton } from "@techsio/ui-kit/atoms/skeleton"'
     ],
@@ -64,7 +64,7 @@ code_connect.connect(Skeleton.Circle, "https://www.figma.com/design/12xb1pqXKwE2
         });
     }
 });
-code_connect.connect(Skeleton.Text, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=565-2143", {
+code_connect.connect(Skeleton.Text, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=565-2143", {
     imports: [
         'import { Skeleton } from "@techsio/ui-kit/atoms/skeleton"'
     ],

package/dist/atoms/status-text.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { StatusText } from "./status-text.js";
-code_connect.connect(StatusText, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=304-35", {
+code_connect.connect(StatusText, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=304-35", {
     imports: [
         'import { StatusText } from "@libs/ui/atoms/status-text"'
     ],

package/dist/atoms/textarea.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Textarea } from "./textarea.js";
-code_connect.connect(Textarea, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=502-93", {
+code_connect.connect(Textarea, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=502-93", {
     imports: [
         'import { Textarea } from "@techsio/ui-kit/atoms/textarea"'
     ],

package/dist/atoms/tooltip.figma.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Button } from "./button.js";
 import { Tooltip } from "./tooltip.js";
-code_connect.connect(Tooltip, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=340-436", {
+code_connect.connect(Tooltip, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=340-436", {
     imports: [
         'import { Tooltip } from "@techsio/ui-kit/atoms/tooltip"',
         'import { Button } from "@techsio/ui-kit/atoms/button"'

package/dist/molecules/accordion.figma.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Accordion } from "./accordion.js";
-code_connect.connect(Accordion, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=993-936", {
+code_connect.connect(Accordion, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=993-936", {
     imports: [
         'import { Accordion } from "@libs/ui/molecules/accordion"'
     ],

package/dist/molecules/breadcrumb.figma.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Breadcrumb } from "./breadcrumb.js";
-code_connect.connect(Breadcrumb, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=828-162", {
+code_connect.connect(Breadcrumb, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=828-162", {
     imports: [
         'import { Breadcrumb } from "@libs/ui/molecules/breadcrumb"'
     ],

package/dist/molecules/carousel.figma.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Carousel } from "./carousel.js";
-code_connect.connect(Carousel, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1190-50", {
+code_connect.connect(Carousel, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1190-50", {
     imports: [
         'import { Carousel } from "@libs/ui/molecules/carousel"'
     ],

package/dist/molecules/chart.js

@@ -0,0 +1,393 @@
+import { jsx } from "react/jsx-runtime";
+import { areaY, barX, barY, colorLegend, d3Curve, defineChart, dot, group, lineY, stack } from "@tanstack/charts";
+import { polar, radialArc } from "@tanstack/charts/polar";
+import { tooltip as tooltip_tooltip } from "@tanstack/charts/tooltip";
+import { scaleBand } from "@tanstack/charts-scales/band";
+import { scaleLinear } from "@tanstack/charts-scales/linear";
+import { scalePoint } from "@tanstack/charts-scales/point";
+import { Chart } from "@tanstack/react-charts";
+import { scaleUtc } from "d3-scale";
+import { curveMonotoneX, pie } from "d3-shape";
+import { useMemo } from "react";
+import { tv } from "../utils.js";
+const chartVariants = tv({
+    slots: {
+        root: "chart-base block w-full text-chart-fg",
+        tooltip: "chart-tooltip"
+    }
+});
+const SERIES_1_PAINT = "var(--color-chart-series-1)";
+const SERIES_STROKE_FROM_COLOR = null;
+const DONUT_INNER_RADIUS_RATIO = 0.6;
+const POLAR_INSET = 8;
+function toAccessor(accessor) {
+    if ("function" == typeof accessor) return accessor;
+    return (datum)=>datum[accessor];
+}
+const defineChartSpec = defineChart;
+const MAX_SERIES = 6;
+function resolveXAxis(data, getX, xLabel) {
+    const values = data.map(getX);
+    if (values.length > 0 && values.every((value)=>value instanceof Date)) return {
+        scale: ()=>scaleUtc(),
+        nice: true,
+        axis: {
+            label: xLabel
+        }
+    };
+    if (values.length > 0 && values.every((value)=>"number" == typeof value)) return {
+        scale: scaleLinear,
+        nice: true,
+        axis: {
+            label: xLabel
+        }
+    };
+    return {
+        scale: ()=>scalePoint().padding(0.1),
+        axis: {
+            label: xLabel
+        }
+    };
+}
+function resolveBuild(config) {
+    const getX = toAccessor(config.x);
+    const getY = toAccessor(config.y);
+    const getSeries = null == config.series ? void 0 : toAccessor(config.series);
+    const isPolar = "pie" === config.type || "donut" === config.type;
+    const showLegend = config.legend ?? (null != config.series || isPolar);
+    const { formatValue } = config;
+    const valueTicks = formatValue ? {
+        format: formatValue
+    } : void 0;
+    warnOnSeriesOverflow(config.data, isPolar ? getX : getSeries);
+    const tooltipBase = {
+        use: tooltip_tooltip,
+        className: config.tooltipClassName
+    };
+    const channelName = (accessor, label)=>label ?? ("string" == typeof accessor ? accessor : void 0);
+    const xName = channelName(config.x, config.xLabel);
+    const yName = channelName(config.y, config.yLabel);
+    const formatChannel = (point, channel)=>{
+        const value = "x" === channel ? point.xValue : point.yValue;
+        if ("number" == typeof value && formatValue) return formatValue(value);
+        return String(value ?? "");
+    };
+    const tooltipFor = (valueChannel, swapped = false)=>{
+        if (!config.showTooltip) return false;
+        const dataValueChannel = swapped ? "y" : valueChannel;
+        const valueName = "x" === dataValueChannel ? xName : yName;
+        const categoryName = "x" === dataValueChannel ? yName : xName;
+        const valueItem = {
+            channel: valueChannel,
+            label: valueName,
+            text: formatValue ? (point)=>formatChannel(point, valueChannel) : void 0
+        };
+        const categoryChannel = "x" === valueChannel ? "y" : "x";
+        const categoryItem = {
+            channel: categoryChannel,
+            label: categoryName
+        };
+        return {
+            ...tooltipBase,
+            items: "x" === valueChannel ? [
+                valueItem,
+                categoryItem
+            ] : [
+                categoryItem,
+                valueItem
+            ]
+        };
+    };
+    const polarTooltip = ()=>{
+        if (!config.showTooltip) return false;
+        return {
+            ...tooltipBase,
+            items: [
+                {
+                    id: "value",
+                    label: yName,
+                    text: (point)=>{
+                        const row = point.datum.data;
+                        const value = getY(row);
+                        return formatValue ? formatValue(value) : String(value);
+                    }
+                }
+            ]
+        };
+    };
+    const valueAxis = {
+        scale: scaleLinear,
+        nice: true,
+        grid: config.grid,
+        axis: {
+            label: config.yLabel,
+            ticks: valueTicks
+        }
+    };
+    const xAxis = resolveXAxis(config.data, getX, config.xLabel);
+    return {
+        data: config.data,
+        getX,
+        getY,
+        getSeries,
+        stacked: config.stacked,
+        points: config.points,
+        curve: config.smooth ? d3Curve(curveMonotoneX) : void 0,
+        grid: config.grid,
+        xLabel: config.xLabel,
+        yLabel: config.yLabel,
+        valueTicks,
+        valueAxis,
+        xAxis,
+        bandAxis: {
+            scale: ()=>scaleBand().padding(0.3),
+            axis: {
+                label: config.xLabel
+            }
+        },
+        tooltipFor,
+        polarTooltip,
+        shared: {
+            color: showLegend ? {
+                legend: colorLegend({
+                    label: config.legendLabel
+                })
+            } : void 0,
+            animate: config.animate
+        }
+    };
+}
+function warnOnSeriesOverflow(data, getColorIdentity) {
+    const isProduction = "undefined" != typeof process && process.env?.NODE_ENV === "production";
+    if (null == getColorIdentity || isProduction) return;
+    const distinct = new Set(data.map((datum)=>String(getColorIdentity(datum))));
+    if (distinct.size > MAX_SERIES) console.warn(`Chart: ${distinct.size} distinct colors exceeds the ${MAX_SERIES}-color palette; everything beyond the sixth reuses an earlier color and cannot be told apart. Group the long tail into an “Other” bucket, or split into small multiples.`);
+}
+function buildLine(build) {
+    const { data, getX, getY, getSeries } = build;
+    return defineChartSpec({
+        marks: [
+            lineY(data, {
+                x: getX,
+                y: getY,
+                z: getSeries,
+                color: getSeries,
+                points: build.points,
+                curve: build.curve,
+                stroke: null == getSeries ? SERIES_1_PAINT : void 0
+            })
+        ],
+        x: build.xAxis,
+        y: build.valueAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("y")
+    });
+}
+function buildArea(build) {
+    const { data, getX, getY, getSeries } = build;
+    const isStacked = build.stacked ?? true;
+    return defineChartSpec({
+        marks: [
+            areaY(data, {
+                x: getX,
+                ...null != getSeries && isStacked ? {
+                    y: getY
+                } : {
+                    y1: 0,
+                    y2: getY
+                },
+                z: getSeries,
+                color: getSeries,
+                curve: build.curve,
+                fill: null == getSeries ? SERIES_1_PAINT : void 0,
+                fillOpacity: null != getSeries && isStacked ? 0.85 : 0.25,
+                stroke: null == getSeries ? SERIES_1_PAINT : SERIES_STROKE_FROM_COLOR,
+                strokeWidth: 2
+            })
+        ],
+        x: build.xAxis,
+        y: build.valueAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("y")
+    });
+}
+function barLayout(hasSeries, isStacked) {
+    if (!hasSeries) return;
+    return isStacked ? stack() : group({
+        padding: 0.15
+    });
+}
+function buildBars(build, horizontal) {
+    const { data, getX, getY, getSeries } = build;
+    const isStacked = build.stacked ?? false;
+    const barOptions = {
+        z: getSeries,
+        color: getSeries,
+        fill: null == getSeries ? SERIES_1_PAINT : void 0,
+        layout: barLayout(null != getSeries, isStacked),
+        radius: null != getSeries && isStacked ? 0 : 4
+    };
+    if (horizontal) return defineChartSpec({
+        marks: [
+            barX(data, {
+                x: getY,
+                y: getX,
+                ...barOptions
+            })
+        ],
+        x: {
+            scale: scaleLinear,
+            nice: true,
+            grid: build.grid,
+            axis: {
+                label: build.yLabel,
+                ticks: build.valueTicks
+            }
+        },
+        y: build.bandAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("x", true)
+    });
+    return defineChartSpec({
+        marks: [
+            barY(data, {
+                x: getX,
+                y: getY,
+                ...barOptions
+            })
+        ],
+        x: build.bandAxis,
+        y: build.valueAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("y")
+    });
+}
+function buildScatter(build) {
+    const { data, getX, getY, getSeries } = build;
+    return defineChartSpec({
+        marks: [
+            dot(data, {
+                x: getX,
+                y: getY,
+                z: getSeries,
+                color: getSeries,
+                r: 4,
+                fill: null == getSeries ? SERIES_1_PAINT : void 0
+            })
+        ],
+        x: {
+            ...build.xAxis,
+            grid: build.grid
+        },
+        y: build.valueAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("y")
+    });
+}
+function buildPolar(build, donut) {
+    const { data, getX, getY } = build;
+    const sliceLabel = (slice)=>String(getX(slice.data));
+    const slices = pie().sort(null).padAngle(0.02).value((datum)=>getY(datum))([
+        ...data
+    ]);
+    return defineChartSpec({
+        x: null,
+        y: null,
+        marks: [
+            polar({
+                inset: POLAR_INSET,
+                marks: [
+                    radialArc(slices, {
+                        startAngle: "startAngle",
+                        endAngle: "endAngle",
+                        padAngle: "padAngle",
+                        innerRadius: donut ? ({ radius })=>radius * DONUT_INNER_RADIUS_RATIO : 0,
+                        cornerRadius: 2,
+                        z: sliceLabel,
+                        color: sliceLabel
+                    })
+                ]
+            })
+        ],
+        ...build.shared,
+        tooltip: build.polarTooltip()
+    });
+}
+function buildChartDefinition(config) {
+    const build = resolveBuild(config);
+    switch(config.type){
+        case "area":
+            return buildArea(build);
+        case "bar":
+            return buildBars(build, false);
+        case "bar-horizontal":
+            return buildBars(build, true);
+        case "scatter":
+            return buildScatter(build);
+        case "pie":
+            return buildPolar(build, false);
+        case "donut":
+            return buildPolar(build, true);
+        default:
+            return buildLine(build);
+    }
+}
+function chart_Chart({ type = "line", data, x, y, series, stacked, points = false, smooth = false, grid = true, legend, legendLabel, xLabel, yLabel, formatValue, height, aspectRatio, initialWidth = 640, animate = true, tooltip = true, ariaLabel, ariaDescription, className, onSelect }) {
+    const { root, tooltip: tooltipSlot } = chartVariants();
+    const tooltipClassName = tooltipSlot();
+    const definition = useMemo(()=>buildChartDefinition({
+            type,
+            data,
+            x,
+            y,
+            series,
+            stacked,
+            points,
+            smooth,
+            grid,
+            legend,
+            legendLabel,
+            xLabel,
+            yLabel,
+            formatValue,
+            animate,
+            showTooltip: tooltip,
+            tooltipClassName
+        }), [
+        type,
+        data,
+        x,
+        y,
+        series,
+        stacked,
+        points,
+        smooth,
+        grid,
+        legend,
+        legendLabel,
+        xLabel,
+        yLabel,
+        formatValue,
+        animate,
+        tooltip,
+        tooltipClassName
+    ]);
+    const isPolar = "pie" === type || "donut" === type;
+    const handleSelect = onSelect ? (point)=>{
+        if (null == point) return void onSelect(null);
+        onSelect(isPolar ? point.datum.data : point.datum);
+    } : void 0;
+    return /*#__PURE__*/ jsx(Chart, {
+        ariaDescription: ariaDescription,
+        ariaLabel: ariaLabel,
+        aspectRatio: null == height ? aspectRatio ?? 16 / 9 : void 0,
+        className: root({
+            className
+        }),
+        definition: definition,
+        height: height,
+        initialWidth: initialWidth,
+        onSelect: handleSelect
+    });
+}
+export { chart_Chart as Chart };

package/dist/molecules/combobox.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Combobox } from "./combobox.js";
-code_connect.connect(Combobox, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1189-153", {
+code_connect.connect(Combobox, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1189-153", {
     imports: [
         'import { Combobox } from "@techsio/ui-kit/molecules/combobox"'
     ],