@sybilion/uilib 1.0.20

package/dist/esm/components/ui/SmartTextTruncate/SmartTextTruncate.js

@@ -0,0 +1,98 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useLayoutEffect } from 'react';
+
+const ELLIPSIS = ' ... ';
+const END_CHARS_COUNT = 10;
+function SmartTextTruncate({ children, className, ...props }) {
+    const containerRef = useRef(null);
+    const fullTextRef = useRef(null);
+    const [displayText, setDisplayText] = useState(typeof children === 'string' ? children : '');
+    const [resizeTrigger, setResizeTrigger] = useState(0);
+    useLayoutEffect(() => {
+        const container = containerRef.current;
+        const fullText = fullTextRef.current;
+        if (!container || !fullText || typeof children !== 'string') {
+            return;
+        }
+        const text = children;
+        // If text is shorter than END_CHARS_COUNT, no truncation needed
+        if (text.length <= END_CHARS_COUNT) {
+            setDisplayText(text);
+            return;
+        }
+        // Measure container width
+        const containerWidth = container.clientWidth;
+        if (containerWidth === 0) {
+            // Container not yet rendered, keep current text
+            return;
+        }
+        // Measure full text width
+        fullText.textContent = text;
+        const fullTextWidth = fullText.scrollWidth;
+        // If text fits, show full text
+        if (fullTextWidth <= containerWidth) {
+            setDisplayText(text);
+            return;
+        }
+        // Calculate truncated text: <start>...<last 10 chars>
+        const endPart = text.slice(-END_CHARS_COUNT);
+        // Binary search for optimal start length
+        let left = 0;
+        let right = text.length - END_CHARS_COUNT;
+        let bestStart = 0;
+        while (left <= right) {
+            const mid = Math.floor((left + right) / 2);
+            const startPart = text.slice(0, mid);
+            const truncated = startPart + ELLIPSIS + endPart;
+            fullText.textContent = truncated;
+            const truncatedWidth = fullText.scrollWidth;
+            if (truncatedWidth <= containerWidth) {
+                bestStart = mid;
+                left = mid + 1;
+            }
+            else {
+                right = mid - 1;
+            }
+        }
+        // Ensure we have at least some start text
+        if (bestStart === 0) {
+            // If even just ellipsis + end doesn't fit, show only end part
+            fullText.textContent = ELLIPSIS + endPart;
+            if (fullText.scrollWidth <= containerWidth) {
+                setDisplayText(ELLIPSIS + endPart);
+            }
+            else {
+                // Last resort: show only end part without ellipsis
+                setDisplayText(endPart);
+            }
+        }
+        else {
+            setDisplayText(text.slice(0, bestStart) + ELLIPSIS + endPart);
+        }
+    }, [children, resizeTrigger]);
+    // Handle ResizeObserver for container resizing
+    useLayoutEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            // Trigger recalculation by updating resizeTrigger
+            setResizeTrigger(prev => prev + 1);
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    if (typeof children !== 'string') {
+        return (jsx("span", { className: className, ...props, children: children }));
+    }
+    return (jsxs("span", { ref: containerRef, className: className, ...props, style: { position: 'relative', ...props.style }, children: [displayText, jsx("span", { ref: fullTextRef, style: {
+                    position: 'absolute',
+                    visibility: 'hidden',
+                    whiteSpace: 'nowrap',
+                    top: '-9999px',
+                }, "aria-hidden": "true", children: children })] }));
+}
+
+export { SmartTextTruncate };

package/dist/esm/components/ui/Sparkline/Sparkline.helpers.js

@@ -0,0 +1,11 @@
+const transformDataForChart = (data) => {
+    return data.map((value, index) => ({
+        index,
+        value,
+    }));
+};
+const getStrokeColor = (strokeColor) => {
+    return strokeColor || 'hsl(var(--foreground))';
+};
+
+export { getStrokeColor, transformDataForChart };

package/dist/esm/components/ui/Sparkline/Sparkline.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { forwardRef } from 'react';
+import { LineChart, Line } from 'recharts';
+import { transformDataForChart, getStrokeColor } from './Sparkline.helpers.js';
+import S from './Sparkline.styl.js';
+
+const Sparkline = forwardRef(({ className, data, width = 100, height = 30, strokeWidth = 1, strokeColor = 'hsl(var(--foreground))', fillColor = 'hsl(var(--muted))', showValue = false, showEndDot = false, valueFormatter = value => value.toString(), ...props }, ref) => {
+    if (!data || data.length === 0) {
+        return (jsx("div", { ref: ref, className: cn(S.sparklineNoData, className), style: { width, height }, ...props, children: "No data" }));
+    }
+    const chartData = transformDataForChart(data);
+    const finalStrokeColor = getStrokeColor(strokeColor);
+    const dot = showEndDot
+        ? (props) => {
+            const { index, payload } = props;
+            const isLastPoint = index === chartData.length - 1;
+            if (!isLastPoint)
+                return null;
+            return (jsx("circle", { cx: props.cx, cy: props.cy, r: 3, fill: finalStrokeColor }));
+        }
+        : false;
+    return (jsxs("div", { ref: ref, className: cn(S.sparklineContainer, className), ...props, children: [jsx(LineChart, { width: width, height: height, data: chartData, children: jsx(Line, { type: "monotone", dataKey: "value", stroke: finalStrokeColor, strokeWidth: strokeWidth, strokeDasharray: "2 2", dot: dot, activeDot: false }) }), showValue && (jsx("span", { className: cn(S.sparklineValue), children: valueFormatter(data[data.length - 1]) }))] }));
+});
+Sparkline.displayName = 'Sparkline';
+
+export { Sparkline };

package/dist/esm/components/ui/Sparkline/Sparkline.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.Sparkline_sparklineContainer__2qn-X{align-items:center;display:flex;gap:var(--p-2)}.Sparkline_sparklineNoData__OErDa{align-items:center;color:var(--muted-foreground);display:flex;justify-content:center}.Sparkline_sparklineValue__CbmPQ{color:var(--muted-foreground);font-size:.75rem;font-weight:500;line-height:1rem}";
+var S = {"sparklineContainer":"Sparkline_sparklineContainer__2qn-X","sparklineNoData":"Sparkline_sparklineNoData__OErDa","sparklineValue":"Sparkline_sparklineValue__CbmPQ"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Switch/Switch.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import S from './Switch.styl.js';
+
+function Switch({ className, checked, onCheckedChange, size = 'md', ...props }) {
+    const handleCheckedChange = (checkedValue) => {
+        // Radix Switch always returns boolean, ensure we pass it correctly
+        onCheckedChange?.(checkedValue);
+    };
+    // Ensure checked is always a boolean (never undefined/null/indeterminate)
+    // Default to false if undefined/null to ensure controlled component behavior
+    // const checkedValue = checked === true || checked === false ? checked : false;
+    return (jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn(S.switchRoot, S[`size-${size}`], className), checked: checked, onCheckedChange: handleCheckedChange, ...props, children: jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: S.switchThumb }) }));
+}
+
+export { Switch };

package/dist/esm/components/ui/Switch/Switch.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".Switch_switchRoot__IDe2j{background-color:var(--input);border:none;border-radius:9999px;cursor:pointer;display:inline-flex;flex-shrink:0;outline:none;padding:2px;position:relative;transition:background-color .15s ease-in-out}.Switch_switchRoot__IDe2j[data-state=checked]{background-color:var(--primary)}.Switch_switchRoot__IDe2j:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.Switch_switchRoot__IDe2j:disabled{cursor:not-allowed;opacity:.5}.Switch_switchThumb__HVWdE{background-color:var(--card);border-radius:9999px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(16,24,40,.1);display:block;transition:transform .15s ease-in-out;will-change:transform}.Switch_size-sm__wdTd-{height:20px;width:36px}.Switch_size-sm__wdTd- .Switch_switchThumb__HVWdE{height:16px;width:16px}.Switch_size-sm__wdTd-[data-state=checked] .Switch_switchThumb__HVWdE{transform:translateX(16px)}.Switch_size-md__tJKDv{height:24px;width:44px}.Switch_size-md__tJKDv .Switch_switchThumb__HVWdE{height:20px;width:20px}.Switch_size-md__tJKDv[data-state=checked] .Switch_switchThumb__HVWdE{transform:translateX(20px)}.Switch_size-lg__syBsv{height:28px;width:52px}.Switch_size-lg__syBsv .Switch_switchThumb__HVWdE{height:24px;width:24px}.Switch_size-lg__syBsv[data-state=checked] .Switch_switchThumb__HVWdE{transform:translateX(24px)}";
+var S = {"switchRoot":"Switch_switchRoot__IDe2j","switchThumb":"Switch_switchThumb__HVWdE","size-sm":"Switch_size-sm__wdTd-","size-md":"Switch_size-md__tJKDv","size-lg":"Switch_size-lg__syBsv"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Table/Table.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './Table.styl.js';
+
+function Table({ className, withBackground = false, withPaddings = false, ...props }) {
+    return (jsx("table", { "data-slot": "table", className: cn(S.table, className, withBackground && S.withBackground, withPaddings && S.withPaddings), ...props }));
+}
+function TableHeader({ className, ...props }) {
+    return (jsx("thead", { "data-slot": "table-header", className: cn(S.tableHead, className), ...props }));
+}
+function TableBody({ className, ...props }) {
+    return (jsx("tbody", { "data-slot": "table-body", className: cn(S.tableBody, className), ...props }));
+}
+function TableFooter({ className, ...props }) {
+    return (jsx("tfoot", { "data-slot": "table-footer", className: cn(S.tableFooter, className), ...props }));
+}
+function TableRow({ className, ...props }) {
+    return (jsx("tr", { "data-slot": "table-row", className: cn(S.tableRow, className), ...props }));
+}
+function TableHead({ className, ...props }) {
+    return (jsx("th", { "data-slot": "table-head", className: cn(S.tableHead, className), ...props }));
+}
+function TableCell({ className, compact, ...props }) {
+    return (jsx("td", { "data-slot": "table-cell", className: cn(S.tableCell, compact && S.compact, className), ...props }));
+}
+function TableCellValue({ className, ...props }) {
+    return (jsx("caption", { "data-slot": "table-caption", className: cn(S.cellValue, className), ...props }));
+}
+
+export { Table, TableBody, TableCell, TableCellValue, TableFooter, TableHead, TableHeader, TableRow };

package/dist/esm/components/ui/Table/Table.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".Table_tableContainer__5D8Ht{overflow-x:auto;position:relative;width:100%}.Table_scrollContainer__8-Zr9{width:100%}.Table_scrollInner__QcOf7{display:block}.Table_scrollbar__Zs9-w{bottom:-6px}.Table_withBackground__ASHzK{background-color:var(--background);border-radius:var(--p-4);padding:0 var(--p-6)}.Table_table__OuLba{caption-side:bottom;font-size:14px;overflow:hidden;width:100%}.Table_table__OuLba.Table_withPaddings__zUGoU .Table_tableCell__rJJqf:first-child,.Table_table__OuLba.Table_withPaddings__zUGoU .Table_tableHead__SSL9f:first-child{padding-left:var(--p-6)}.Table_table__OuLba.Table_withPaddings__zUGoU .Table_tableCell__rJJqf:last-child,.Table_table__OuLba.Table_withPaddings__zUGoU .Table_tableHead__SSL9f:last-child{padding-right:var(--p-6)}.Table_tableBody__YyhVh{position:relative}.Table_tableBody__YyhVh:not(:first-child):before{background-color:var(--border);content:\"\";display:block;height:1px;left:0;position:absolute;right:0}.Table_withBackground__ASHzK .Table_tableBody__YyhVh:not(:first-child):before{left:var(--p-6);right:var(--p-6)}.Table_tableBody__YyhVh tr:last-child{border-bottom:0}.Table_tableFooter__CJXND{background-color:var(--muted-50);font-weight:500}.Table_tableFooter__CJXND tr:last-child{border-bottom:0}.Table_tableRow__CdFFX{position:relative;transition-duration:.15s;transition-property:background-color,color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Table_tableBody__YyhVh:last-child .Table_tableRow__CdFFX:last-child .Table_tableCell__rJJqf:first-child{border-bottom-left-radius:var(--p-3)}.Table_tableBody__YyhVh:last-child .Table_tableRow__CdFFX:last-child .Table_tableCell__rJJqf:last-child{border-bottom-right-radius:var(--p-3)}.Table_tableBody__YyhVh .Table_tableRow__CdFFX:hover,.Table_tableRow__CdFFX[data-state=selected]{background-color:var(--muted-50)}.Table_tableHead__SSL9f{color:var(--muted-foreground);font-weight:500;min-width:0;text-align:left;vertical-align:middle;white-space:nowrap}.Table_tableHead__SSL9f:has([role=checkbox]){padding-right:0}.Table_tableHead__SSL9f [role=checkbox]{transform:translateY(2px)}.Table_tableCell__rJJqf,.Table_tableHead__SSL9f{height:65px;min-width:0;padding-left:var(--p-2);padding-right:var(--p-2);position:relative;vertical-align:middle;white-space:nowrap;z-index:1}.Table_tableCell__rJJqf:has([role=checkbox]),.Table_tableHead__SSL9f:has([role=checkbox]){padding-right:0}.Table_tableCell__rJJqf [role=checkbox],.Table_tableHead__SSL9f [role=checkbox]{transform:translateY(2px)}.Table_compact__iXKtF{height:auto}.Table_cellValue__WCD3J{align-items:center;color:var(--muted-foreground);display:flex;gap:var(--p-1)}";
+var S = {"tableContainer":"Table_tableContainer__5D8Ht","scrollContainer":"Table_scrollContainer__8-Zr9","scrollInner":"Table_scrollInner__QcOf7","scrollbar":"Table_scrollbar__Zs9-w","withBackground":"Table_withBackground__ASHzK","table":"Table_table__OuLba","withPaddings":"Table_withPaddings__zUGoU","tableHead":"Table_tableHead__SSL9f","tableCell":"Table_tableCell__rJJqf","tableBody":"Table_tableBody__YyhVh","tableFooter":"Table_tableFooter__CJXND","tableRow":"Table_tableRow__CdFFX","compact":"Table_compact__iXKtF","cellValue":"Table_cellValue__WCD3J"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Tabs/Tabs.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import S from './Tabs.styl.js';
+
+function Tabs({ className, variant = 'button', darker = false, ...props }) {
+    return (jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn(S.root, S[`variant-${variant}`], darker && S.darker, className), ...props }));
+}
+function TabsList({ className, fullWidth, darker, ...props }) {
+    return (jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn(S.list, fullWidth && S.fullWidth, darker && S.darker, className), ...props }));
+}
+function TabsTrigger({ className, ...props }) {
+    return (jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn(S.trigger, className), ...props }));
+}
+function TabsContent({ className, ...props }) {
+    return (jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn(S.content, className), ...props }));
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/esm/components/ui/Tabs/Tabs.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".Tabs_root__cB9Au{display:flex;flex-direction:column;gap:.5rem}.Tabs_list__9Hs22{align-items:center;color:var(--muted-foreground);display:inline-flex;height:48px;justify-content:center;width:-moz-fit-content;width:fit-content}.Tabs_list__9Hs22.Tabs_fullWidth__Lj2Dd{width:100%}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22{background-color:transparent!important}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22{border-radius:1.5rem;box-shadow:none;gap:.25rem;height:auto}.Tabs_trigger__uzdqH{align-items:center;border:1px solid transparent;border-radius:.375rem;color:var(--muted-foreground);cursor:pointer;display:inline-flex;flex:1;font-size:var(--text-sm);font-weight:500;gap:.375rem;height:calc(100% - 1px);justify-content:center;padding:.25rem .5rem;transition:color .2s,box-shadow .2s;white-space:nowrap}.Tabs_trigger__uzdqH:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px var(--ring-50);outline:1px solid var(--ring);outline-offset:0}.Tabs_trigger__uzdqH:disabled{opacity:.5;pointer-events:none}.Tabs_trigger__uzdqH[data-state=active]{background-color:var(--background);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.Tabs_trigger__uzdqH:hover,.Tabs_trigger__uzdqH[data-state=active]{color:var(--foreground)!important}.Tabs_darker__l-R0I .Tabs_trigger__uzdqH{background-color:var(--muted)}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{border:none;border-radius:var(--p-4);box-shadow:none;color:var(--muted-foreground);flex-shrink:0;font-weight:600;padding:var(--p-1) var(--p-3);transition:all .15s ease-in-out}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-6);box-shadow:0 1px 2px 0 rgba(0,0,0,.05);color:var(--foreground)}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH{background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:0!important;font-size:16px;padding:12px 16px}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{box-shadow:inset 0 -3px 0 -1px var(--sb-cyan-400)!important}.Tabs_trigger__uzdqH svg{flex-shrink:0;pointer-events:none}.Tabs_trigger__uzdqH svg:not([class*=size-]){height:1rem;width:1rem}.dark .Tabs_trigger__uzdqH{color:var(--muted-foreground)}.dark .Tabs_trigger__uzdqH[data-state=active]{background-color:var(--input-30);border-color:var(--input);color:var(--foreground)}.Tabs_content__K27Vl{flex:1;outline:none}";
+var S = {"root":"Tabs_root__cB9Au","list":"Tabs_list__9Hs22","fullWidth":"Tabs_fullWidth__Lj2Dd","variant-link":"Tabs_variant-link__xOMDg","variant-button":"Tabs_variant-button__wtc8k","trigger":"Tabs_trigger__uzdqH","darker":"Tabs_darker__l-R0I","content":"Tabs_content__K27Vl"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/TextShimmer/TextShimmer.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import React__default, { useMemo } from 'react';
+import { motion } from 'motion/react';
+import S from './TextShimmer.styl.js';
+
+function TextShimmerComponent({ children, as: Component = 'p', className, duration = 2, spread = 2, inverted = false, }) {
+    const MotionComponent = motion.create(Component);
+    const { shimmerGradient, baseGradient } = useMemo(() => {
+        const dynamicSpread = children.length * spread;
+        const baseColor = inverted
+            ? 'var(--base-gradient-color)'
+            : 'var(--base-color)';
+        const baseGradientColor = inverted
+            ? 'var(--base-color)'
+            : 'var(--base-gradient-color)';
+        const shimmer = `linear-gradient(90deg, transparent calc(50% - ${dynamicSpread}px), ${baseGradientColor} calc(50% - ${dynamicSpread / 2}px), ${baseGradientColor} calc(50% + ${dynamicSpread / 2}px), transparent calc(50% + ${dynamicSpread}px))`;
+        const base = `linear-gradient(to right, ${baseColor}, ${baseColor})`;
+        return { shimmerGradient: shimmer, baseGradient: base };
+    }, [children.length, spread, inverted]);
+    return (jsx(MotionComponent, { className: cn(S.root, className), initial: { backgroundPosition: '200% center, 0% center' }, animate: { backgroundPosition: '-100% center, 0% center' }, transition: {
+            repeat: Infinity,
+            duration,
+            ease: 'linear',
+        }, style: {
+            backgroundImage: `${shimmerGradient}, ${baseGradient}`,
+        }, children: children }));
+}
+const TextShimmer = React__default.memo(TextShimmerComponent);
+
+export { TextShimmer };

package/dist/esm/components/ui/TextShimmer/TextShimmer.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".TextShimmer_root__EQnCh{-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat,repeat;background-size:200% 100%,100% 100%;color:transparent!important;display:inline-block;position:relative;--base-color:#a1a1aa;--base-gradient-color:#000}.dark .TextShimmer_root__EQnCh{--base-color:#71717a;--base-gradient-color:#fff}";
+var S = {"root":"TextShimmer_root__EQnCh"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/TextWithDeferTooltip/TextWithDeferTooltip.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
+
+function TextWithDeferTooltip({ className, children, width, maxWidth, side = 'bottom', overTrigger = false, ...props }) {
+    const [withTooltip, setWithTooltip] = useState(false);
+    const [tooltipStyles, setTooltipStyles] = useState({});
+    const ref = useRef(null);
+    const cachedFontSizeRef = useRef(null);
+    const handleMouseEnter = () => {
+        if (!ref.current)
+            return;
+        const isOverflowingHorizontally = ref.current.scrollWidth - ref.current.clientWidth > 3;
+        const isOverflowingVertically = ref.current.scrollHeight - ref.current.clientHeight > 3;
+        if (isOverflowingHorizontally || isOverflowingVertically) {
+            const styles = {
+                fontSize: cachedFontSizeRef.current || undefined,
+            };
+            if (ref.current) {
+                const { width: rectWidth, left, top, } = ref.current.getBoundingClientRect();
+                styles.width = `${width ?? rectWidth}px`;
+                if (!cachedFontSizeRef.current) {
+                    const { fontSize } = window.getComputedStyle(ref.current);
+                    cachedFontSizeRef.current = fontSize;
+                    styles.fontSize = fontSize;
+                }
+                if (overTrigger) {
+                    styles.transform = `translate(${left}px, ${top}px) !important`;
+                    // styles.translateX = `${left}px`;
+                    // styles.translateY = `${top}px`;
+                }
+            }
+            setTooltipStyles(styles);
+            setWithTooltip(true);
+        }
+    };
+    const textElement = (jsx("div", { ref: ref, className: className, onMouseEnter: handleMouseEnter, ...props, children: children }));
+    if (withTooltip) {
+        const tooltipSide = overTrigger ? 'bottom' : side;
+        return (jsxs(Tooltip, { open: withTooltip, onOpenChange: setWithTooltip, children: [jsx(TooltipTrigger, { asChild: true, children: textElement }), jsx(TooltipContent, { side: tooltipSide, style: {
+                        ...(maxWidth !== undefined && { maxWidth: `${maxWidth}px` }),
+                        ...tooltipStyles,
+                    }, children: children })] }));
+    }
+    return textElement;
+}
+
+export { TextWithDeferTooltip };

package/dist/esm/components/ui/TimeRangeControls/TimeRangeControls.constants.js

@@ -0,0 +1,3 @@
+const TIME_RANGES = ['6m', '1y', '3y', '5y', 'All'];
+
+export { TIME_RANGES };

package/dist/esm/components/ui/TimeRangeControls/TimeRangeControls.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../Select/Select.js';
+import { ToggleGroup, ToggleGroupItem } from '../ToggleGroup/ToggleGroup.js';
+import { TIME_RANGES } from './TimeRangeControls.constants.js';
+import S from './TimeRangeControls.styl.js';
+
+const TimeRangeControls = memo(({ timeRange, onTimeRangeChange, loading, }) => (jsx("div", { className: S.timeRangeContainer, children: jsx(ToggleGroup, { type: "single", value: timeRange, onValueChange: onTimeRangeChange, variant: "outline", disabled: loading, className: S.timeRangeToggleGroup, children: TIME_RANGES.map(range => (jsx(ToggleGroupItem, { value: range, className: S.timeRangeToggleItem, children: range }, range))) }) })));
+TimeRangeControls.displayName = 'TimeRangeControls';
+const TimeRangeSelect = memo(({ timeRange, onTimeRangeChange, loading, }) => (jsxs(Select, { value: timeRange, onValueChange: onTimeRangeChange, disabled: loading, children: [jsx(SelectTrigger, { className: S.timeRangeSelectTrigger, size: "sm", "aria-label": "Select a value", children: jsx(SelectValue, { placeholder: "1 year" }) }), jsx(SelectContent, { className: S.timeRangeSelectContent, children: TIME_RANGES.map(range => (jsx(SelectItem, { value: range, className: S.timeRangeSelectItem, children: range }, range))) })] })));
+TimeRangeSelect.displayName = 'TimeRangeSelect';
+
+export { TimeRangeControls, TimeRangeSelect };

package/dist/esm/components/ui/TimeRangeControls/TimeRangeControls.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.TimeRangeControls_timeRangeContainer__ZsRYF{display:flex}.TimeRangeControls_timeRangeToggleGroup__Ors-P{display:none}@media (min-width:768px){.TimeRangeControls_timeRangeToggleGroup__Ors-P{display:flex}}.TimeRangeControls_timeRangeSelectTrigger__CX-Je{display:flex;width:10rem}@media (min-width:768px){.TimeRangeControls_timeRangeSelectTrigger__CX-Je{display:none}}.TimeRangeControls_timeRangeSelectContent__rHhLB{border-radius:.75rem}.TimeRangeControls_timeRangeToggleItem__AtDjt{padding:var(--p-2) var(--p-3)}.TimeRangeControls_timeRangeSelectItem__0lCWr{border-radius:.5rem}";
+var S = {"timeRangeContainer":"TimeRangeControls_timeRangeContainer__ZsRYF","timeRangeToggleGroup":"TimeRangeControls_timeRangeToggleGroup__Ors-P","timeRangeSelectTrigger":"TimeRangeControls_timeRangeSelectTrigger__CX-Je","timeRangeSelectContent":"TimeRangeControls_timeRangeSelectContent__rHhLB","timeRangeToggleItem":"TimeRangeControls_timeRangeToggleItem__AtDjt","timeRangeSelectItem":"TimeRangeControls_timeRangeSelectItem__0lCWr"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Toggle/Toggle.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import S from './Toggle.styl.js';
+
+function Toggle({ className, variant = 'default', size = 'md', ...props }) {
+    return (jsx(TogglePrimitive.Root, { "data-slot": "toggle", className: cn(S.toggle, S[`variant-${variant}`], S[`size-${size}`], className), ...props }));
+}
+
+export { Toggle };

package/dist/esm/components/ui/Toggle/Toggle.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".Toggle_toggle__zrQdU{align-items:center;background-color:transparent;color:var(--muted-foreground);cursor:pointer;display:inline-flex;font-size:var(--text-sm);font-weight:600;gap:.5rem;justify-content:center;transition:all .15s ease-in-out;white-space:nowrap}.Toggle_toggle__zrQdU:hover{background-color:var(--muted-80);color:var(--muted-foreground)}.Toggle_toggle__zrQdU:disabled{opacity:.5;pointer-events:none}.Toggle_toggle__zrQdU[data-state=on]{background-color:var(--background);box-shadow:0 1px 2px 0 rgba(0,0,0,.05);color:var(--foreground)}.Toggle_toggle__zrQdU svg{flex-shrink:0;pointer-events:none}.Toggle_toggle__zrQdU svg:not([class*=size-]){height:1rem;width:1rem}.Toggle_toggle__zrQdU:focus-visible{box-shadow:0 0 0 2px var(--ring);outline:none}.Toggle_toggle__zrQdU[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px var(--destructive-20)}.dark .Toggle_toggle__zrQdU[aria-invalid=true]{box-shadow:0 0 0 3px var(--destructive-40)}.Toggle_variant-default__n4-yB{border-radius:.375rem}.Toggle_variant-outline__J4zWJ{background-color:transparent;border:none}.Toggle_variant-outline__J4zWJ:hover{color:var(--foreground)}.Toggle_variant-outline__J4zWJ[data-state=on]{background-color:var(--background);color:var(--foreground)}.Toggle_size-md__llTAJ,.Toggle_size-sm__hODTn{border-radius:.375rem;height:1.75rem;padding-left:.75rem;padding-right:.75rem}.Toggle_size-lg__Y6-g6{border-radius:.5rem;height:2rem;padding-left:.875rem;padding-right:.875rem}";
+var S = {"toggle":"Toggle_toggle__zrQdU","variant-default":"Toggle_variant-default__n4-yB","variant-outline":"Toggle_variant-outline__J4zWJ","size-sm":"Toggle_size-sm__hODTn","size-md":"Toggle_size-md__llTAJ","size-lg":"Toggle_size-lg__Y6-g6"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/ToggleGroup/ToggleGroup.helpers.js

@@ -0,0 +1,12 @@
+// Helper function to get context values with defaults
+const getContextValues = (context, itemVariant, itemSize) => ({
+    variant: context.variant || itemVariant || 'default',
+    size: context.size || itemSize || 'md',
+});
+// Helper function to get default context values
+const getDefaultContextValues = () => ({
+    size: 'md',
+    variant: 'default',
+});
+
+export { getContextValues, getDefaultContextValues };

package/dist/esm/components/ui/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { createContext, useContext } from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import S$1 from '../Toggle/Toggle.styl.js';
+import { getDefaultContextValues, getContextValues } from './ToggleGroup.helpers.js';
+import S from './ToggleGroup.styl.js';
+
+const ToggleGroupContext = createContext(getDefaultContextValues());
+function ToggleGroup({ className, variant, size, children, disabled, ...props }) {
+    return (jsx(ToggleGroupPrimitive.Root, { "data-slot": "toggle-group", "data-disabled": disabled ? '' : undefined, className: cn(S.container, className), ...props, children: jsx(ToggleGroupContext.Provider, { value: { variant, size }, children: children }) }));
+}
+function ToggleGroupItem({ className, children, variant, size, ...props }) {
+    const context = useContext(ToggleGroupContext);
+    const { variant: contextVariant, size: contextSize } = getContextValues(context, variant, size);
+    return (jsx(ToggleGroupPrimitive.Item, { "data-slot": "toggle-group-item", "data-variant": contextVariant, "data-size": contextSize, className: cn(S$1.toggle, S.item, S$1[`variant-${contextVariant}`], S$1[`size-${contextSize}`], className), ...props, children: children }));
+}
+
+export { ToggleGroup, ToggleGroupItem };

package/dist/esm/components/ui/ToggleGroup/ToggleGroup.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".ToggleGroup_container__HKgJE{align-items:center;border-radius:var(--p-6);display:flex;font-weight:600;gap:var(--p-1);transition:opacity .1s ease-out;width:-moz-fit-content;width:fit-content}.ToggleGroup_container__HKgJE[data-disabled]{opacity:.5;pointer-events:none}.ToggleGroup_item__Jz9yW{border:none;border-radius:var(--p-4);box-shadow:none;color:var(--muted-foreground);flex-shrink:0;transition:all .15s ease-in-out}.ToggleGroup_item__Jz9yW:focus{z-index:10}.ToggleGroup_item__Jz9yW:focus-visible{z-index:10}.ToggleGroup_item__Jz9yW[data-state=on]{border-radius:var(--p-6);color:var(--foreground)}.ToggleGroup_item__Jz9yW[data-disabled]{opacity:.5;pointer-events:none}";
+var S = {"container":"ToggleGroup_container__HKgJE","item":"ToggleGroup_item__Jz9yW"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Tooltip/Tooltip.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import S from './Tooltip.styl.js';
+
+function TooltipProvider({ delayDuration = 0, ...props }) {
+    return (jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
+}
+function Tooltip(props) {
+    return (jsx(TooltipProvider, { children: jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) }));
+}
+function TooltipTrigger({ ...props }) {
+    return jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, sideOffset = 0, children, maxWidth, ...props }) {
+    const style = { ...props.style };
+    if (maxWidth)
+        style.maxWidth = `${maxWidth}px`;
+    return (jsx(TooltipPrimitive.Portal, { children: jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn(S.tooltipContent, className), ...props, style: style, children: [children, jsx(TooltipPrimitive.Arrow, { className: S.tooltipArrow })] }) }));
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/esm/components/ui/Tooltip/Tooltip.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.Tooltip_tooltipContent__b3pS-{backdrop-filter:blur(10px);background-color:var(--popover);border:1px solid var(--border);border-radius:.375rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:var(--popover-foreground);font-size:12px;padding:6px 12px;text-wrap:balance;transform-origin:var(--radix-tooltip-content-transform-origin);width:-moz-fit-content;width:fit-content;word-break:break-word;z-index:50}.Tooltip_tooltipContent__b3pS-[data-state=delayed-open],.Tooltip_tooltipContent__b3pS-[data-state=instant-open],.Tooltip_tooltipContent__b3pS-[data-state=open]{animation:Tooltip_fade-in__ZQqZv .15s ease-out,Tooltip_zoom-in__SbWQb .15s ease-out}.Tooltip_tooltipContent__b3pS-[data-state=closed]{animation:Tooltip_fade-out__UOBET .1s ease-in,Tooltip_zoom-out__fodOk .1s ease-in}.Tooltip_tooltipContent__b3pS-[data-state=delayed-open][data-side=bottom],.Tooltip_tooltipContent__b3pS-[data-state=instant-open][data-side=bottom],.Tooltip_tooltipContent__b3pS-[data-state=open][data-side=bottom]{animation:Tooltip_fade-in__ZQqZv .15s ease-out,Tooltip_zoom-in__SbWQb .15s ease-out,Tooltip_slide-in-from-top-2__8uuS- .15s ease-out}.Tooltip_tooltipContent__b3pS-[data-state=delayed-open][data-side=left],.Tooltip_tooltipContent__b3pS-[data-state=instant-open][data-side=left],.Tooltip_tooltipContent__b3pS-[data-state=open][data-side=left]{animation:Tooltip_fade-in__ZQqZv .15s ease-out,Tooltip_zoom-in__SbWQb .15s ease-out,Tooltip_slide-in-from-right-2__Uu79F .15s ease-out}.Tooltip_tooltipContent__b3pS-[data-state=delayed-open][data-side=right],.Tooltip_tooltipContent__b3pS-[data-state=instant-open][data-side=right],.Tooltip_tooltipContent__b3pS-[data-state=open][data-side=right]{animation:Tooltip_fade-in__ZQqZv .15s ease-out,Tooltip_zoom-in__SbWQb .15s ease-out,Tooltip_slide-in-from-left-2__23kHm .15s ease-out}.Tooltip_tooltipContent__b3pS-[data-state=delayed-open][data-side=top],.Tooltip_tooltipContent__b3pS-[data-state=instant-open][data-side=top],.Tooltip_tooltipContent__b3pS-[data-state=open][data-side=top]{animation:Tooltip_fade-in__ZQqZv .15s ease-out,Tooltip_zoom-in__SbWQb .15s ease-out,Tooltip_slide-in-from-bottom-2__O-Aa8 .15s ease-out}.Tooltip_tooltipContent__b3pS-[data-state=closed][data-side=bottom],.Tooltip_tooltipContent__b3pS-[data-state=closed][data-side=left],.Tooltip_tooltipContent__b3pS-[data-state=closed][data-side=right],.Tooltip_tooltipContent__b3pS-[data-state=closed][data-side=top]{animation:Tooltip_fade-out__UOBET .1s ease-in,Tooltip_zoom-out__fodOk .1s ease-in}.Tooltip_tooltipArrow__87DVL{background-color:var(--popover);border-bottom:1px solid var(--border);border-left-width:1px;border-left:0 solid var(--border);border-radius:2px;border-right:1px solid var(--border);border-top-width:1px;border-top:0 solid var(--border);fill:var(--popover);height:10px;transform:translateY(calc(-50% + .5px)) rotate(45deg);width:10px;z-index:50}@keyframes Tooltip_fade-in__ZQqZv{0%{opacity:0}to{opacity:1}}@keyframes Tooltip_fade-out__UOBET{0%{opacity:1}to{opacity:0}}@keyframes Tooltip_zoom-in__SbWQb{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes Tooltip_zoom-out__fodOk{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes Tooltip_slide-in-from-top-2__8uuS-{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes Tooltip_slide-in-from-right-2__Uu79F{0%{opacity:0;transform:translateX(.5rem)}to{opacity:1;transform:translateX(0)}}@keyframes Tooltip_slide-in-from-left-2__23kHm{0%{opacity:0;transform:translateX(-.5rem)}to{opacity:1;transform:translateX(0)}}@keyframes Tooltip_slide-in-from-bottom-2__O-Aa8{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}";
+var S = {"tooltipContent":"Tooltip_tooltipContent__b3pS-","fade-in":"Tooltip_fade-in__ZQqZv","zoom-in":"Tooltip_zoom-in__SbWQb","fade-out":"Tooltip_fade-out__UOBET","zoom-out":"Tooltip_zoom-out__fodOk","slide-in-from-top-2":"Tooltip_slide-in-from-top-2__8uuS-","slide-in-from-right-2":"Tooltip_slide-in-from-right-2__Uu79F","slide-in-from-left-2":"Tooltip_slide-in-from-left-2__23kHm","slide-in-from-bottom-2":"Tooltip_slide-in-from-bottom-2__O-Aa8","tooltipArrow":"Tooltip_tooltipArrow__87DVL"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/VimeoEmbed/VimeoEmbed.js

@@ -0,0 +1,137 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import Player from '@vimeo/player';
+import S from './VimeoEmbed.styl.js';
+
+function parseVimeoUrl(idOrUrl) {
+    // vimeo.com/12345678/abcdef12 (unlisted)
+    const unlistedMatch = idOrUrl.match(/vimeo\.com\/(\d+)\/([a-f0-9]+)/i);
+    if (unlistedMatch) {
+        return { id: unlistedMatch[1], hash: unlistedMatch[2] };
+    }
+    // vimeo.com/12345678 or player.vimeo.com/video/12345678
+    const idMatch = idOrUrl.match(/(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(\d+)/);
+    return { id: idMatch ? idMatch[1] : idOrUrl };
+}
+function VimeoEmbed({ videoId, videoHash, gifMode = false, playButtonColor, className, ...props }) {
+    const iframeRef = useRef(null);
+    const containerRef = useRef(null);
+    const playerRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isPlayerReady, setIsPlayerReady] = useState(false);
+    const parsed = parseVimeoUrl(videoId);
+    const id = parsed.id;
+    const hash = videoHash ?? parsed.hash;
+    const hashParam = hash ? `&h=${hash}` : '';
+    const baseParams = 'title=0&byline=0&portrait=0&badge=0&dnt=1&playsinline=1';
+    const gifParams = gifMode
+        ? 'loop=1&muted=1&controls=0&transparent=1'
+        : 'controls=1&transparent=1&autoplay=0&muted=0';
+    const embedUrl = `https://player.vimeo.com/video/${id}?${baseParams}&${gifParams}${hashParam}`;
+    // Cleanup player when id/hash changes
+    useEffect(() => {
+        if (playerRef.current) {
+            playerRef.current
+                .destroy()
+                .catch(() => {
+                // Ignore destroy errors
+            })
+                .finally(() => {
+                playerRef.current = null;
+                setIsPlayerReady(false);
+                setIsPlaying(false);
+            });
+        }
+    }, [id, hash]);
+    // Initialize Player SDK when iframe loads
+    const handleIframeLoad = useCallback(() => {
+        if (!iframeRef.current)
+            return;
+        // Clean up existing player if any
+        if (playerRef.current) {
+            playerRef.current
+                .destroy()
+                .catch(() => {
+                // Ignore destroy errors
+            })
+                .finally(() => {
+                playerRef.current = null;
+            });
+        }
+        try {
+            const player = new Player(iframeRef.current);
+            playerRef.current = player;
+            // Wait for player to be ready before setting up events
+            player
+                .ready()
+                .then(() => {
+                setIsPlayerReady(true);
+                // Listen to SDK events
+                player.on('play', () => setIsPlaying(true));
+                player.on('pause', () => setIsPlaying(false));
+                player.on('ended', () => setIsPlaying(false));
+            })
+                .catch(() => {
+                // Ignore ready errors
+            });
+        }
+        catch (error) {
+            // Ignore initialization errors
+        }
+    }, []);
+    const play = useCallback(async () => {
+        if (!isPlayerReady || !playerRef.current)
+            return;
+        try {
+            await playerRef.current.play();
+        }
+        catch {
+            // Ignore play errors (e.g., if player not ready)
+        }
+    }, [isPlayerReady]);
+    const pause = useCallback(async () => {
+        if (!isPlayerReady || !playerRef.current)
+            return;
+        try {
+            await playerRef.current.pause();
+        }
+        catch {
+            // Ignore pause errors
+        }
+    }, [isPlayerReady]);
+    // Viewport-triggered playback: play when visible, pause when not
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const container = containerRef.current;
+        let playTimeout = null;
+        const observer = new IntersectionObserver(entries => {
+            const [entry] = entries;
+            if (!entry)
+                return;
+            if (entry.isIntersecting) {
+                playTimeout = setTimeout(play, 150);
+            }
+            else {
+                if (playTimeout) {
+                    clearTimeout(playTimeout);
+                    playTimeout = null;
+                }
+                pause();
+            }
+        }, {
+            rootMargin: '10% 0px 10% 0px',
+            threshold: 0.25,
+        });
+        observer.observe(container);
+        return () => {
+            if (playTimeout)
+                clearTimeout(playTimeout);
+            observer.disconnect();
+        };
+    }, [play, pause]);
+    return (jsxs("div", { ref: containerRef, className: cn(S.root, className, isPlaying && S.isPlaying), ...props, children: [jsx("iframe", { ref: iframeRef, src: embedUrl, className: S.iframe, allow: "autoplay; fullscreen; picture-in-picture; encrypted-media", allowFullScreen: true, title: "Vimeo video player", onLoad: handleIframeLoad }), !gifMode && (jsx("button", { type: "button", className: S.playButton, onClick: play, "aria-label": "Play video", children: jsx("svg", { className: S.playIcon, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M8 5v14l11-7z", fill: "currentColor" }) }) }))] }));
+}
+
+export { VimeoEmbed };

package/dist/esm/components/ui/VimeoEmbed/VimeoEmbed.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".VimeoEmbed_root__22Izc{align-self:stretch;aspect-ratio:16/9.5;border-radius:var(--p-5);box-shadow:0 0 0 1px var(--border);flex-shrink:0;height:auto!important;height:0;margin:0;min-width:0;overflow:hidden;padding-bottom:0;position:relative}.VimeoEmbed_iframe__fuiCR{border:none;border-radius:var(--p-5);display:block;height:100%;left:0;margin:0;opacity:.5;padding:0;position:absolute;top:0;transform:scale(1.01);transition:opacity .5s ease;width:100%;z-index:1}.VimeoEmbed_isPlaying__IU81- .VimeoEmbed_iframe__fuiCR{opacity:1}.VimeoEmbed_playButton__2T-Wn{align-items:center;background:var(--background-alpha-500);border:none;box-shadow:0 2px 16px var(--page-color);cursor:pointer;display:flex;height:100%;justify-content:center;position:absolute;transition:all .2s ease;width:100%;z-index:3}.VimeoEmbed_playButton__2T-Wn:hover{background:transparent}.VimeoEmbed_isPlaying__IU81- .VimeoEmbed_playButton__2T-Wn{opacity:0;pointer-events:none}.VimeoEmbed_playIcon__GlKI1{color:var(--brand-color-400);height:var(--p-16);margin-left:4px;width:var(--p-16)}";
+var S = {"root":"VimeoEmbed_root__22Izc","iframe":"VimeoEmbed_iframe__fuiCR","isPlaying":"VimeoEmbed_isPlaying__IU81-","playButton":"VimeoEmbed_playButton__2T-Wn","playIcon":"VimeoEmbed_playIcon__GlKI1"};
+styleInject(css_248z);
+
+export { S as default };