@galaxy-io/dls 1.0.3

package/dist/table/VirtualizedInfiniteTable.d.ts

@@ -0,0 +1,28 @@
+import React, { type ReactNode } from "react";
+import { TableDensity, type ColumnDef } from "./InfiniteTable";
+export interface InfiniteTableProps<TData> {
+    columns: ColumnDef<TData, unknown>[];
+    totalRowCount: number;
+    getRowData: (index: number) => TData | undefined;
+    getRowId?: (row: TData, index: number) => string;
+    height?: number | string;
+    width?: number | string;
+    fillWidth?: boolean;
+    fillHeight?: boolean;
+    density?: TableDensity;
+    estimateRowHeight?: number;
+    overscan?: number;
+    hasNextPage?: boolean;
+    isFetchingNextPage?: boolean;
+    fetchNextPage?: () => void;
+    isLoading?: boolean;
+    isError?: boolean;
+    loadingRowCount?: number;
+    contentWhenEmpty?: ReactNode;
+    contentWhenError?: ReactNode | ((error?: Error) => ReactNode);
+    noLastRowBorder?: boolean;
+    noLastRowPadding?: boolean;
+}
+declare function VirtualizedInfiniteTable<TData>(props: InfiniteTableProps<TData>): React.JSX.Element;
+export default VirtualizedInfiniteTable;
+export { ColumnAlign, ColumnPin, TableDensity, type ColumnDef } from "./InfiniteTable";

package/dist/table/VirtualizedInfiniteTable.js

@@ -0,0 +1,359 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import { ColumnAlign, ColumnPin, TableDensity } from "./InfiniteTable.js";
+/* empty css                                   */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import React, { useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/table/VirtualizedInfiniteTable.tsx
+var _exp = () => ({ $width, $fillWidth }) => {
+	if ($fillWidth) return "100%";
+	if ($width) return getCssSizeValue($width);
+	return "auto";
+};
+var _exp2 = () => ({ $height, $fillHeight }) => {
+	if ($fillHeight) return "100%";
+	if ($height) return getCssSizeValue($height);
+	return "auto";
+};
+var TableOuterContainer = withTheme(/*#__PURE__*/ styled("div")({
+	name: "TableOuterContainer",
+	class: "t1y8ggf1",
+	propsAsIs: false,
+	vars: {
+		"t1y8ggf1-0": [_exp()],
+		"t1y8ggf1-1": [_exp2()]
+	}
+}));
+var _exp3 = () => ({ $noLastRowPadding }) => $noLastRowPadding ? "0" : "8px";
+var TableScrollContainer = /*#__PURE__*/ styled("div")({
+	name: "TableScrollContainer",
+	class: "t1c28u93",
+	propsAsIs: false,
+	vars: { "t1c28u93-0": [_exp3()] }
+});
+var StyledTable = /*#__PURE__*/ styled("table")({
+	name: "StyledTable",
+	class: "st2i0og",
+	propsAsIs: false
+});
+var TableHead = /*#__PURE__*/ styled("thead")({
+	name: "TableHead",
+	class: "t1w1rmks",
+	propsAsIs: false
+});
+var _exp4 = () => ({ $virtualHeight }) => `${$virtualHeight}px`;
+var TableBody = /*#__PURE__*/ styled("tbody")({
+	name: "TableBody",
+	class: "trwv5lb",
+	propsAsIs: false,
+	vars: { "trwv5lb-0": [_exp4()] }
+});
+var _exp5 = () => ({ $translateY }) => $translateY !== void 0 ? "absolute" : "static";
+var _exp6 = () => ({ $translateY }) => $translateY !== void 0 ? `translateY(${$translateY}px)` : "none";
+var _exp7 = () => ({ $rowHeight }) => $rowHeight !== void 0 ? `${$rowHeight}px` : "auto";
+var _exp8 = () => ({ $isLastRow, theme }) => $isLastRow ? "none" : `0.5px solid ${theme.color.border.primary}`;
+var _exp0 = () => ({ theme }) => theme.color.background.primary;
+var TableRow = withTheme(/*#__PURE__*/ styled("tr")({
+	name: "TableRow",
+	class: "tokkvsw",
+	propsAsIs: false,
+	vars: {
+		"tokkvsw-0": [_exp5()],
+		"tokkvsw-1": [_exp6()],
+		"tokkvsw-2": [_exp7()],
+		"tokkvsw-3": [_exp8()],
+		"tokkvsw-4": [_exp0()]
+	}
+}));
+var TableHeaderRow = withTheme(/*#__PURE__*/ styled("tr")({
+	name: "TableHeaderRow",
+	class: "t88dj0a",
+	propsAsIs: false
+}));
+var _exp1 = () => ({ $width }) => {
+	if ($width) return `0 0 ${$width}px`;
+	return "1 1 0";
+};
+var _exp10 = () => ({ $minWidth }) => {
+	if ($minWidth) return `${$minWidth}px`;
+	return "0";
+};
+var _exp11 = () => ({ $maxWidth }) => {
+	if ($maxWidth) return `${$maxWidth}px`;
+	return "none";
+};
+var _exp12 = () => ({ $align }) => match($align).with(ColumnAlign.LEFT, () => "left").with(ColumnAlign.CENTER, () => "center").with(ColumnAlign.RIGHT, () => "right").with(void 0, () => "left").exhaustive();
+var _exp13 = () => ({ theme }) => theme.color.border.primary;
+var _exp14 = () => ({ theme }) => theme.color.background.primary;
+var _exp15 = () => ({ $align }) => match($align).with(ColumnAlign.LEFT, () => "flex-start").with(ColumnAlign.CENTER, () => "center").with(ColumnAlign.RIGHT, () => "flex-end").with(void 0, () => "flex-start").exhaustive();
+var _exp16 = () => ({ $pin }) => {
+	if ($pin) return 25;
+	return 20;
+};
+var _exp17 = () => ({ $pin, $pinnedOffset }) => {
+	if ($pin === ColumnPin.LEFT && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
+	return "auto";
+};
+var _exp18 = () => ({ $pin, $pinnedOffset }) => {
+	if ($pin === ColumnPin.RIGHT && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
+	return "auto";
+};
+var _exp19 = () => ({ $pin, theme }) => {
+	if ($pin === ColumnPin.LEFT) return `0.5px solid ${theme.color.border.primary}`;
+	return "none";
+};
+var _exp20 = () => ({ $pin, theme }) => {
+	if ($pin === ColumnPin.RIGHT) return `0.5px solid ${theme.color.border.primary}`;
+	return "none";
+};
+var TableHeaderCell = withTheme(/*#__PURE__*/ styled("th")({
+	name: "TableHeaderCell",
+	class: "t1yes6uf",
+	propsAsIs: false,
+	vars: {
+		"t1yes6uf-0": [_exp1()],
+		"t1yes6uf-1": [_exp10()],
+		"t1yes6uf-2": [_exp11()],
+		"t1yes6uf-3": [_exp12()],
+		"t1yes6uf-4": [_exp13()],
+		"t1yes6uf-5": [_exp14()],
+		"t1yes6uf-6": [_exp15()],
+		"t1yes6uf-7": [_exp16()],
+		"t1yes6uf-8": [_exp17()],
+		"t1yes6uf-9": [_exp18()],
+		"t1yes6uf-10": [_exp19()],
+		"t1yes6uf-11": [_exp20()]
+	}
+}));
+var _exp21 = () => ({ theme }) => theme.color.text.primary;
+var _exp22 = () => ({ $width }) => {
+	if ($width) return `0 0 ${$width}px`;
+	return "1 1 0";
+};
+var _exp23 = () => ({ $minWidth }) => {
+	if ($minWidth) return `${$minWidth}px`;
+	return "0";
+};
+var _exp24 = () => ({ $maxWidth }) => {
+	if ($maxWidth) return `${$maxWidth}px`;
+	return "none";
+};
+var _exp25 = () => ({ $align }) => match($align).with(ColumnAlign.LEFT, () => "left").with(ColumnAlign.CENTER, () => "center").with(ColumnAlign.RIGHT, () => "right").with(void 0, () => "left").exhaustive();
+var _exp26 = () => ({ $align }) => match($align).with(ColumnAlign.LEFT, () => "flex-start").with(ColumnAlign.CENTER, () => "center").with(ColumnAlign.RIGHT, () => "flex-end").with(void 0, () => "flex-start").exhaustive();
+var _exp27 = () => ({ $pin, theme }) => {
+	if ($pin) return theme.color.background.primary;
+	return "transparent";
+};
+var _exp28 = () => ({ $pin }) => {
+	if ($pin) return "sticky";
+	return "static";
+};
+var _exp29 = () => ({ $pin }) => {
+	if ($pin) return 5;
+	return "auto";
+};
+var _exp30 = () => ({ $pin, $pinnedOffset }) => {
+	if ($pin === ColumnPin.LEFT && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
+	return "auto";
+};
+var _exp31 = () => ({ $pin, $pinnedOffset }) => {
+	if ($pin === ColumnPin.RIGHT && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
+	return "auto";
+};
+var _exp32 = () => ({ $pin, theme }) => {
+	if ($pin === ColumnPin.LEFT) return `0.5px solid ${theme.color.border.primary}`;
+	return "none";
+};
+var _exp33 = () => ({ $pin, theme }) => {
+	if ($pin === ColumnPin.RIGHT) return `0.5px solid ${theme.color.border.primary}`;
+	return "none";
+};
+var TableDataCell = withTheme(/*#__PURE__*/ styled("td")({
+	name: "TableDataCell",
+	class: "ttzb9kx",
+	propsAsIs: false,
+	vars: {
+		"ttzb9kx-0": [_exp21()],
+		"ttzb9kx-1": [_exp22()],
+		"ttzb9kx-2": [_exp23()],
+		"ttzb9kx-3": [_exp24()],
+		"ttzb9kx-4": [_exp25()],
+		"ttzb9kx-5": [_exp26()],
+		"ttzb9kx-6": [_exp27()],
+		"ttzb9kx-7": [_exp28()],
+		"ttzb9kx-8": [_exp29()],
+		"ttzb9kx-9": [_exp30()],
+		"ttzb9kx-10": [_exp31()],
+		"ttzb9kx-11": [_exp32()],
+		"ttzb9kx-12": [_exp33()]
+	}
+}));
+var HeaderContentWrapper = /*#__PURE__*/ styled("div")({
+	name: "HeaderContentWrapper",
+	class: "hu950cn",
+	propsAsIs: false
+});
+var EmptyContentWrapper = /*#__PURE__*/ styled("div")({
+	name: "EmptyContentWrapper",
+	class: "ey3ss0i",
+	propsAsIs: false
+});
+var _exp34 = () => ({ theme }) => theme.color.border.primary;
+var _exp35 = () => ({ theme }) => theme.color.background.primary;
+var LoadingRowWrapper = withTheme(/*#__PURE__*/ styled("tr")({
+	name: "LoadingRowWrapper",
+	class: "l1wwts9q",
+	propsAsIs: false,
+	vars: {
+		"l1wwts9q-0": [_exp34()],
+		"l1wwts9q-1": [_exp35()]
+	}
+}));
+function VirtualizedRowInner({ rowData, rowIndex, translateY, rowHeight, density, isLastRow, columns, pinnedOffsets }) {
+	return /* @__PURE__ */ jsx(TableRow, {
+		$density: density,
+		$isLastRow: isLastRow,
+		$translateY: translateY,
+		$rowHeight: rowHeight,
+		children: columns.map((col) => /* @__PURE__ */ jsx(TableDataCell, {
+			$width: col.size,
+			$minWidth: col.minSize,
+			$maxWidth: col.maxSize,
+			$pin: col.pin,
+			$pinnedOffset: pinnedOffsets.get(col.id),
+			$align: col.align,
+			$density: density,
+			children: rowData && col.cell ? col.cell({
+				value: void 0,
+				row: {
+					original: rowData,
+					index: rowIndex
+				}
+			}) : null
+		}, col.id))
+	});
+}
+var VirtualizedRow = React.memo(VirtualizedRowInner, (prev, next) => {
+	return prev.rowData === next.rowData && prev.translateY === next.translateY && prev.isLastRow === next.isLastRow && prev.columns === next.columns;
+});
+function VirtualizedInfiniteTable(props) {
+	const { columns, totalRowCount, getRowData, getRowId, height, width, fillWidth, fillHeight, density = TableDensity.MEDIUM, estimateRowHeight, overscan = 25, hasNextPage, isFetchingNextPage, fetchNextPage, isLoading = false, isError = false, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noLastRowBorder = false, noLastRowPadding = false } = props;
+	const scrollContainerRef = useRef(null);
+	const pinnedOffsets = useMemo(() => {
+		const offsets = /* @__PURE__ */ new Map();
+		let leftOffset = 0;
+		let rightOffset = 0;
+		columns.forEach((col) => {
+			if (col.pin === ColumnPin.LEFT) {
+				offsets.set(col.id, leftOffset);
+				leftOffset += col.size ?? 150;
+			}
+		});
+		[...columns].reverse().forEach((col) => {
+			if (col.pin === ColumnPin.RIGHT) {
+				offsets.set(col.id, rightOffset);
+				rightOffset += col.size ?? 150;
+			}
+		});
+		return offsets;
+	}, [columns]);
+	const rowHeight = estimateRowHeight ?? match(density).with(TableDensity.SMALL, () => 32).with(TableDensity.MEDIUM, () => 48).with(TableDensity.LARGE, () => 56).exhaustive();
+	const virtualizer = useVirtualizer({
+		count: totalRowCount,
+		getScrollElement: () => scrollContainerRef.current,
+		estimateSize: () => rowHeight,
+		overscan
+	});
+	const virtualRows = virtualizer.getVirtualItems();
+	useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (!container || !fetchNextPage) return;
+		const onScroll = () => {
+			const { scrollHeight, scrollTop, clientHeight } = container;
+			if (scrollHeight - scrollTop - clientHeight < 500 && hasNextPage && !isFetchingNextPage) fetchNextPage();
+		};
+		container.addEventListener("scroll", onScroll, { passive: true });
+		return () => container.removeEventListener("scroll", onScroll);
+	}, [
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage
+	]);
+	useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const onWheel = (e) => {
+			container.scrollTop += e.deltaY;
+			container.scrollLeft += e.deltaX;
+		};
+		container.addEventListener("wheel", onWheel, { passive: true });
+		return () => container.removeEventListener("wheel", onWheel);
+	}, []);
+	const renderLoadingRows = () => {
+		return Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(LoadingRowWrapper, { children: columns.map((col) => /* @__PURE__ */ jsx(TableDataCell, {
+			$width: col.size,
+			$minWidth: col.minSize,
+			$maxWidth: col.maxSize,
+			$pin: col.pin,
+			$pinnedOffset: pinnedOffsets.get(col.id),
+			$align: col.align,
+			$density: density,
+			children: col.cellLoading ? col.cellLoading() : null
+		}, col.id)) }, `loading-${rowIndex}`));
+	};
+	const isEmpty = totalRowCount === 0 && !isLoading;
+	const showLoading = isLoading && totalRowCount === 0;
+	const showError = isError && totalRowCount === 0;
+	return /* @__PURE__ */ jsxs(TableOuterContainer, {
+		$width: width,
+		$height: height,
+		$fillWidth: fillWidth,
+		$fillHeight: fillHeight,
+		children: [/* @__PURE__ */ jsx(TableScrollContainer, {
+			ref: scrollContainerRef,
+			$noLastRowPadding: noLastRowPadding,
+			children: /* @__PURE__ */ jsxs(StyledTable, { children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableHeaderRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableHeaderCell, {
+				$width: col.size,
+				$minWidth: col.minSize,
+				$maxWidth: col.maxSize,
+				$pin: col.pin,
+				$pinnedOffset: pinnedOffsets.get(col.id),
+				$align: col.align,
+				children: /* @__PURE__ */ jsx(HeaderContentWrapper, { children: typeof col.header === "function" ? col.header({ table: null }) : /* @__PURE__ */ jsx(Text, {
+					variant: TextVariant.TERTIARY,
+					weight: TextWeight.MEDIUM,
+					size: TextSize.BODY_SM,
+					children: col.header ?? col.id
+				}) })
+			}, col.id)) }) }), /* @__PURE__ */ jsxs(TableBody, {
+				$virtualHeight: virtualizer.getTotalSize(),
+				children: [showLoading ? renderLoadingRows() : showError ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+					colSpan: columns.length,
+					children: typeof contentWhenError === "function" ? contentWhenError() : contentWhenError ?? /* @__PURE__ */ jsx(Text, {
+						variant: TextVariant.ERROR,
+						children: "Error loading data"
+					})
+				}) }) : virtualRows.map((virtualRow) => {
+					const rowData = getRowData(virtualRow.index);
+					const rowId = rowData && getRowId ? getRowId(rowData, virtualRow.index) : String(virtualRow.index);
+					return /* @__PURE__ */ jsx(VirtualizedRow, {
+						rowData,
+						rowIndex: virtualRow.index,
+						translateY: virtualRow.start,
+						rowHeight,
+						density,
+						isLastRow: noLastRowBorder && virtualRow.index === totalRowCount - 1,
+						columns,
+						pinnedOffsets
+					}, rowId);
+				}), isFetchingNextPage && renderLoadingRows()]
+			})] })
+		}), isEmpty && contentWhenEmpty && /* @__PURE__ */ jsx(EmptyContentWrapper, { children: contentWhenEmpty })]
+	});
+}
+//#endregion
+export { ColumnAlign, ColumnPin, TableDensity, VirtualizedInfiniteTable as default };

package/dist/text/Bold.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from "react";
+declare const Bold: ({ children }: PropsWithChildren) => import("react").JSX.Element;
+export default Bold;

package/dist/text/Bold.js

@@ -0,0 +1,17 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+/* empty css               */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/text/Bold.tsx
+var _exp = () => ({ theme }) => theme.font.sans.weight.medium;
+var StyledBoldText = withTheme(/*#__PURE__*/ styled("span")({
+	name: "StyledBoldText",
+	class: "s10i74tu",
+	propsAsIs: false,
+	vars: { "s10i74tu-0": [_exp()] }
+}));
+var Bold = ({ children }) => {
+	return /* @__PURE__ */ jsx(StyledBoldText, { children });
+};
+//#endregion
+export { Bold as default };

package/dist/text/Code.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from "react";
+declare const Code: ({ children }: PropsWithChildren) => import("react").JSX.Element;
+export default Code;

package/dist/text/Code.js

@@ -0,0 +1,27 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+/* empty css               */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/text/Code.tsx
+var _exp = () => ({ theme }) => theme.font.mono.family;
+var _exp2 = () => ({ theme }) => theme.font.mono.weight.regular;
+var _exp3 = () => ({ theme }) => theme.font.mono.size.body_sm;
+var _exp4 = () => ({ theme }) => theme.color.border.primary;
+var _exp5 = () => ({ theme }) => theme.color.background.tertiary;
+var StyledCodeText = withTheme(/*#__PURE__*/ styled("span")({
+	name: "StyledCodeText",
+	class: "sdpyy92",
+	propsAsIs: false,
+	vars: {
+		"sdpyy92-0": [_exp()],
+		"sdpyy92-1": [_exp2()],
+		"sdpyy92-2": [_exp3()],
+		"sdpyy92-3": [_exp4()],
+		"sdpyy92-4": [_exp5()]
+	}
+}));
+var Code = ({ children }) => {
+	return /* @__PURE__ */ jsx(StyledCodeText, { children });
+};
+//#endregion
+export { Code as default };

package/dist/text/EditableText.d.ts

@@ -0,0 +1,7 @@
+import { type TextProps } from "./Text";
+type EditableTextProps = TextProps & {
+    label: string;
+    onSave: (text: string) => void;
+};
+declare const EditableText: ({ label, onSave, size, variant, weight, align, isMonospace, ...textProps }: EditableTextProps) => import("react").JSX.Element;
+export default EditableText;

package/dist/text/EditableText.js

@@ -0,0 +1,141 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextVariant, TextWeight } from "./Text.js";
+import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
+/* empty css                       */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/text/EditableText.tsx
+var EditableTextWrapper = /*#__PURE__*/ styled("div")({
+	name: "EditableTextWrapper",
+	class: "et5f6jm",
+	propsAsIs: false
+});
+var _exp2 = () => ({ theme, $variant }) => {
+	return match($variant).with(TextVariant.PRIMARY, () => theme.color.text.primary).with(TextVariant.PRIMARY_ALT, () => theme.color.text.primaryAlt).with(TextVariant.SECONDARY, () => theme.color.text.secondary).with(TextVariant.SECONDARY_ALT, () => theme.color.text.secondaryAlt).with(TextVariant.TERTIARY, () => theme.color.text.tertiary).with(TextVariant.TERTIARY_ALT, () => theme.color.text.tertiaryAlt).with(TextVariant.DISABLED, () => theme.color.text.disabled).with(TextVariant.SUCCESS, () => theme.color.text.success).with(TextVariant.ERROR, () => theme.color.text.error).with(TextVariant.WARNING, () => theme.color.text.warning).with(TextVariant.LIME, () => theme.color.text.lime).with(TextVariant.PURPLE, () => theme.color.text.purple).with(TextVariant.TEAL, () => theme.color.text.teal).with(TextVariant.YELLOW, () => theme.color.text.yellow).with(TextVariant.ORANGE, () => theme.color.text.orange).with(TextVariant.PINK, () => theme.color.text.pink).with(TextVariant.BLUE, () => theme.color.text.blue).exhaustive();
+};
+var _exp3 = () => ({ theme, $isMonospace }) => $isMonospace ? theme.font.mono.family : theme.font.sans.family;
+var _exp4 = () => ({ theme, $size }) => {
+	return match($size).with(TextSize.CAPTION, () => theme.font.sans.size.caption).with(TextSize.BODY_SM, () => theme.font.sans.size.body_sm).with(TextSize.BODY_MD, () => theme.font.sans.size.body_md).with(TextSize.BODY_LG, () => theme.font.sans.size.body_lg).with(TextSize.HEADING_SM, () => theme.font.sans.size.heading_sm).with(TextSize.HEADING_MD, () => theme.font.sans.size.heading_md).with(TextSize.HEADING_LG, () => theme.font.sans.size.heading_lg).exhaustive();
+};
+var _exp5 = () => ({ theme, $weight }) => {
+	return match($weight).with(TextWeight.REGULAR, () => theme.font.sans.weight.regular).with(TextWeight.MEDIUM, () => theme.font.sans.weight.medium).exhaustive();
+};
+var _exp6 = () => ({ theme, $size }) => {
+	return match($size).with(TextSize.CAPTION, () => theme.font.sans.height.caption).with(TextSize.BODY_SM, () => theme.font.sans.height.body_sm).with(TextSize.BODY_MD, () => theme.font.sans.height.body_md).with(TextSize.BODY_LG, () => theme.font.sans.height.body_lg).with(TextSize.HEADING_SM, () => theme.font.sans.height.heading_sm).with(TextSize.HEADING_MD, () => theme.font.sans.height.heading_md).with(TextSize.HEADING_LG, () => theme.font.sans.height.heading_lg).exhaustive();
+};
+var _exp7 = () => ({ theme, $size }) => {
+	return match($size).with(TextSize.CAPTION, () => theme.font.sans.spacing.caption).with(TextSize.BODY_SM, () => theme.font.sans.spacing.body_sm).with(TextSize.BODY_MD, () => theme.font.sans.spacing.body_md).with(TextSize.BODY_LG, () => theme.font.sans.spacing.body_lg).with(TextSize.HEADING_SM, () => theme.font.sans.spacing.heading_sm).with(TextSize.HEADING_MD, () => theme.font.sans.spacing.heading_md).with(TextSize.HEADING_LG, () => theme.font.sans.spacing.heading_lg).exhaustive();
+};
+var _exp8 = () => ({ $align }) => $align ?? "left";
+var EditableTextInput = withTheme(/*#__PURE__*/ styled("input")({
+	name: "EditableTextInput",
+	class: "ekaqvqt",
+	propsAsIs: false,
+	vars: {
+		"ekaqvqt-0": [_exp6()],
+		"ekaqvqt-1": [_exp2()],
+		"ekaqvqt-2": [_exp3()],
+		"ekaqvqt-3": [_exp4()],
+		"ekaqvqt-4": [_exp5()],
+		"ekaqvqt-5": [_exp7()],
+		"ekaqvqt-6": [_exp8()]
+	}
+}));
+var _exp9 = () => ({ theme }) => theme.color.border.tertiary;
+var EditableTextText = withTheme(/*#__PURE__*/ styled("span")({
+	name: "EditableTextText",
+	class: "e1j2x5d3",
+	propsAsIs: false,
+	vars: { "e1j2x5d3-0": [_exp9()] }
+}));
+var EditableText = ({ label, onSave, size = TextSize.BODY_MD, variant = TextVariant.PRIMARY, weight = TextWeight.REGULAR, align = "left", isMonospace = false, ...textProps }) => {
+	const [state, setState] = useState(() => ({
+		localLabel: label,
+		editedLabel: label,
+		isEditing: false,
+		isHovered: false
+	}));
+	const handleClick = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setState((prev) => ({
+			...prev,
+			isHovered: false,
+			isEditing: true
+		}));
+	};
+	const handleMouseEnter = () => {
+		setState((prev) => ({
+			...prev,
+			isHovered: true
+		}));
+	};
+	const handleMouseLeave = () => {
+		setState((prev) => ({
+			...prev,
+			isHovered: false
+		}));
+	};
+	const handleInputFocus = (e) => {
+		e.target.select();
+	};
+	const handleChange = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setState((prev) => ({
+			...prev,
+			editedLabel: e.target.value
+		}));
+	};
+	const handleSave = () => {
+		setState((prev) => ({
+			...prev,
+			isEditing: false
+		}));
+		onSave(state.editedLabel);
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") handleSave();
+		else if (e.key === "Escape") setState((prev) => ({
+			...prev,
+			isEditing: false,
+			editedLabel: label
+		}));
+	};
+	return /* @__PURE__ */ jsx(EditableTextWrapper, { children: state.isEditing ? /* @__PURE__ */ jsx(EditableTextInput, {
+		value: state.editedLabel,
+		onChange: handleChange,
+		onBlur: handleSave,
+		onFocus: handleInputFocus,
+		onKeyDown: handleKeyDown,
+		maxLength: 128,
+		$size: size,
+		$variant: variant,
+		$weight: weight,
+		$align: align,
+		$isMonospace: isMonospace,
+		autoFocus: true,
+		placeholder: label
+	}) : /* @__PURE__ */ jsx(EditableTextText, {
+		onClick: handleClick,
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: /* @__PURE__ */ jsx(FlexWrapper, {
+			alignItems: AlignItems.END,
+			gap: 4,
+			children: /* @__PURE__ */ jsx(Text, {
+				...textProps,
+				size,
+				variant,
+				weight,
+				align,
+				isMonospace,
+				children: state.editedLabel
+			})
+		})
+	}) });
+};
+//#endregion
+export { EditableText as default };

package/dist/text/Ellipsis.d.ts

@@ -0,0 +1,10 @@
+export interface EllipsisProps {
+    isPulse?: boolean;
+    /**
+     * The speed of the pulse animation in seconds.
+     * @default 1.4
+     */
+    speed?: number;
+}
+declare const Ellipsis: ({ isPulse, speed }: EllipsisProps) => import("react").JSX.Element;
+export default Ellipsis;

package/dist/text/Ellipsis.js

@@ -0,0 +1,28 @@
+/* empty css                   */
+import { styled } from "@linaria/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/text/Ellipsis.tsx
+var _exp = () => ({ $speed }) => $speed;
+var _exp2 = () => ({ $isPulse }) => $isPulse ? "running" : "paused";
+var StyledEllipsis = /*#__PURE__*/ styled("span")({
+	name: "StyledEllipsis",
+	class: "szfsuud",
+	propsAsIs: false,
+	vars: {
+		"szfsuud-0": [_exp(), "s"],
+		"szfsuud-1": [_exp2()]
+	}
+});
+var Ellipsis = ({ isPulse = false, speed = 1 }) => {
+	return /* @__PURE__ */ jsxs(StyledEllipsis, {
+		$isPulse: isPulse,
+		$speed: speed,
+		children: [
+			/* @__PURE__ */ jsx("span", { children: "." }),
+			/* @__PURE__ */ jsx("span", { children: "." }),
+			/* @__PURE__ */ jsx("span", { children: "." })
+		]
+	});
+};
+//#endregion
+export { Ellipsis as default };

package/dist/text/MarkdownText.d.ts

@@ -0,0 +1,7 @@
+import { type Components } from "react-markdown";
+interface MarkdownTextProps {
+    content: string;
+    componentOverrides?: Partial<Components>;
+}
+declare const MarkdownText: ({ content, componentOverrides }: MarkdownTextProps) => import("react").JSX.Element;
+export default MarkdownText;