@galaxy-io/dls 1.0.3

package/dist/dropdown/Dropdown.js

@@ -0,0 +1,136 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+/* empty css                   */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Tippy from "@tippyjs/react";
+//#region src/dropdown/Dropdown.tsx
+var DropdownVariant = /* @__PURE__ */ function(DropdownVariant) {
+	DropdownVariant["TRANSPARENT"] = "TRANSPARENT";
+	DropdownVariant["BASE"] = "BASE";
+	DropdownVariant["PRIMARY"] = "PRIMARY";
+	DropdownVariant["SECONDARY"] = "SECONDARY";
+	DropdownVariant["TERTIARY"] = "TERTIARY";
+	return DropdownVariant;
+}({});
+var DropdownPosition = /* @__PURE__ */ function(DropdownPosition) {
+	DropdownPosition["TOP"] = "top";
+	DropdownPosition["BOTTOM"] = "bottom";
+	DropdownPosition["LEFT"] = "left";
+	DropdownPosition["RIGHT"] = "right";
+	DropdownPosition["TOP_START"] = "top-start";
+	DropdownPosition["TOP_END"] = "top-end";
+	DropdownPosition["BOTTOM_START"] = "bottom-start";
+	DropdownPosition["BOTTOM_END"] = "bottom-end";
+	DropdownPosition["RIGHT_START"] = "right-start";
+	DropdownPosition["RIGHT_END"] = "right-end";
+	DropdownPosition["LEFT_START"] = "left-start";
+	DropdownPosition["LEFT_END"] = "left-end";
+	DropdownPosition["AUTO"] = "auto";
+	DropdownPosition["AUTO_START"] = "auto-start";
+	DropdownPosition["AUTO_END"] = "auto-end";
+	return DropdownPosition;
+}({});
+var DropdownTrigger = /* @__PURE__ */ function(DropdownTrigger) {
+	DropdownTrigger["CLICK"] = "click";
+	DropdownTrigger["HOVER"] = "hover";
+	DropdownTrigger["FOCUS"] = "focus";
+	DropdownTrigger["MANUAL"] = "manual";
+	return DropdownTrigger;
+}({});
+var _exp = () => ({ $fillWidth }) => $fillWidth ? "100%" : "fit-content";
+var _exp2 = () => ({ $minWidth }) => getCssSizeValue($minWidth, "fit-content");
+var _exp3 = () => ({ $maxWidth }) => getCssSizeValue($maxWidth, "none");
+var _exp4 = () => ({ $maxWidth }) => $maxWidth ? "hidden" : "visible";
+var _exp5 = () => ({ $noPadding }) => $noPadding ? "0" : "4px";
+var _exp6 = () => ({ $variant, theme }) => {
+	return match($variant).returnType().with("TRANSPARENT", () => "transparent").with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).exhaustive();
+};
+var _exp7 = () => ({ $noBorder, $variant, theme }) => {
+	if ($noBorder) return "none";
+	return match($variant).returnType().with("TRANSPARENT", () => "transparent").with("BASE", () => `0.5px solid ${theme.color.border.primary}`).with("PRIMARY", () => `0.5px solid ${theme.color.border.primary}`).with("SECONDARY", () => `0.5px solid ${theme.color.border.primary}`).with("TERTIARY", () => `0.5px solid ${theme.color.border.primary}`).exhaustive();
+};
+var DropdownContent = withTheme(/*#__PURE__*/ styled("span")({
+	name: "DropdownContent",
+	class: "d1bgy4cf",
+	propsAsIs: false,
+	vars: {
+		"d1bgy4cf-0": [_exp()],
+		"d1bgy4cf-1": [_exp2()],
+		"d1bgy4cf-2": [_exp3()],
+		"d1bgy4cf-3": [_exp4()],
+		"d1bgy4cf-4": [_exp5()],
+		"d1bgy4cf-5": [_exp6()],
+		"d1bgy4cf-6": [_exp7()]
+	}
+}));
+var _exp8 = () => ({ $isOpen }) => $isOpen ? 1001 : "auto";
+var _exp9 = () => ({ $fillWidth }) => $fillWidth ? "block" : "inline-block";
+var _exp0 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
+var DropdownTriggerWrapper = /*#__PURE__*/ styled("span")({
+	name: "DropdownTriggerWrapper",
+	class: "dfdzgmt",
+	propsAsIs: false,
+	vars: {
+		"dfdzgmt-0": [_exp8()],
+		"dfdzgmt-1": [_exp9()],
+		"dfdzgmt-2": [_exp0()]
+	}
+});
+var Dropdown = ({ children, variant = "BASE", header, body, footer, position = "bottom-start", offset = [0, 6], minWidth, maxWidth, isOpen: controlledIsOpen, onClose, noPadding = false, noBorder = false, fillWidth = false, isDisabled = false }) => {
+	const [internalIsOpen, setInternalIsOpen] = useState(false);
+	const isControlled = controlledIsOpen !== void 0;
+	const visible = isControlled ? controlledIsOpen : internalIsOpen;
+	const handleVisibilityChange = (isVisible) => {
+		if (!isControlled) setInternalIsOpen(isVisible);
+		if (!isVisible && onClose) onClose();
+	};
+	const handleClick = () => {
+		if (!isControlled) setInternalIsOpen(!internalIsOpen);
+	};
+	const content = /* @__PURE__ */ jsxs(DropdownContent, {
+		$variant: variant,
+		$minWidth: minWidth,
+		$maxWidth: maxWidth,
+		$noPadding: noPadding,
+		$noBorder: noBorder,
+		$fillWidth: fillWidth,
+		children: [
+			header,
+			body,
+			footer
+		]
+	});
+	const handleClickOutside = (instance, event) => {
+		const clickedTippyRoot = event.target.closest("[data-tippy-root]");
+		if (clickedTippyRoot) {
+			const allTippyRoots = Array.from(document.querySelectorAll("[data-tippy-root]"));
+			const currentIndex = allTippyRoots.indexOf(instance.popper);
+			const clickedIndex = allTippyRoots.indexOf(clickedTippyRoot);
+			if (clickedIndex > currentIndex && clickedIndex >= 0 && currentIndex >= 0) return;
+		}
+		handleVisibilityChange(false);
+	};
+	return /* @__PURE__ */ jsx(Tippy, {
+		content,
+		visible,
+		onClickOutside: handleClickOutside,
+		placement: position,
+		offset,
+		interactive: true,
+		duration: 0,
+		appendTo: () => document.body,
+		disabled: isDisabled,
+		zIndex: 1e4,
+		children: /* @__PURE__ */ jsx(DropdownTriggerWrapper, {
+			onClick: handleClick,
+			$isOpen: visible,
+			$fillWidth: fillWidth,
+			children
+		})
+	});
+};
+//#endregion
+export { DropdownPosition, DropdownTrigger, DropdownVariant, Dropdown as default };

package/dist/dropdown/DropdownButton.d.ts

@@ -0,0 +1,18 @@
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { ButtonSize, ButtonVariant } from "../buttons/Button";
+export { ButtonSize, ButtonVariant };
+export interface DropdownButtonProps {
+    label: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    isOpen: boolean;
+    icon?: PhosphorIcon;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    fillWidth?: boolean;
+    isEllipsis?: boolean;
+    cursor?: React.CSSProperties["cursor"];
+}
+declare const DropdownButton: ({ label, icon, variant, size, onClick, isOpen, fillWidth, isLoading, isDisabled, isEllipsis, cursor, }: DropdownButtonProps) => import("react").JSX.Element;
+export default DropdownButton;

package/dist/dropdown/DropdownButton.js

@@ -0,0 +1,179 @@
+import { GalaxyTheme } from "../theme/constants.js";
+import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import FlexItem from "../containers/FlexItem.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import RotateWithTransition from "../animations/RotateWithTransition.js";
+/* empty css                         */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CaretDownIcon } from "@phosphor-icons/react";
+//#region src/dropdown/DropdownButton.tsx
+var _exp = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
+var _exp2 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
+var _exp3 = () => ({ $isEllipsis }) => $isEllipsis ? "hidden" : "visible";
+var _exp4 = () => ({ $size }) => {
+	return match($size).with(ButtonSize.SMALL, () => "4px").with(ButtonSize.MEDIUM, () => "6px").with(ButtonSize.LARGE, () => "6px").exhaustive();
+};
+var _exp5 = () => ({ $size }) => {
+	return match($size).with(ButtonSize.SMALL, () => "0 6px").with(ButtonSize.MEDIUM, () => "0 8px").with(ButtonSize.LARGE, () => "0 12px").exhaustive();
+};
+var _exp6 = () => ({ $size }) => {
+	return match($size).with(ButtonSize.SMALL, () => "24px").with(ButtonSize.MEDIUM, () => "28px").with(ButtonSize.LARGE, () => "32px").exhaustive();
+};
+var _exp7 = () => ({ theme, $variant, $isOpen }) => {
+	if ($isOpen) return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.background.galaxyAlt).with(ButtonVariant.SECONDARY, () => theme.color.background.tertiary).with(ButtonVariant.TERTIARY, () => theme.color.background.secondary).with(ButtonVariant.SUCCESS, () => theme.color.background.successAlt).with(ButtonVariant.ERROR, () => theme.color.background.errorAlt).exhaustive();
+	return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.background.galaxy).with(ButtonVariant.SECONDARY, () => theme.color.background.primary).with(ButtonVariant.TERTIARY, () => "transparent").with(ButtonVariant.SUCCESS, () => theme.color.icon.success).with(ButtonVariant.ERROR, () => theme.color.icon.error).exhaustive();
+};
+var _exp8 = () => ({ theme, $variant, $isOpen }) => {
+	return `0.5px solid ${match($variant).with(ButtonVariant.PRIMARY, () => $isOpen ? theme.color.border.primary : "transparent").with(ButtonVariant.SECONDARY, () => theme.color.border.primary).with(ButtonVariant.TERTIARY, () => $isOpen ? theme.color.border.primary : "transparent").with(ButtonVariant.SUCCESS, () => "transparent").with(ButtonVariant.ERROR, () => "transparent").exhaustive()}`;
+};
+var _exp9 = () => ({ $cursor }) => $cursor ?? "pointer";
+var _exp0 = () => ({ theme, $variant }) => {
+	return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.background.galaxyAlt).with(ButtonVariant.SECONDARY, () => theme.color.background.tertiary).with(ButtonVariant.TERTIARY, () => theme.color.background.secondary).with(ButtonVariant.SUCCESS, () => theme.color.background.successAlt).with(ButtonVariant.ERROR, () => theme.color.background.errorAlt).exhaustive();
+};
+var _exp1 = () => ({ theme, $variant }) => {
+	return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.border.primary).with(ButtonVariant.SECONDARY, () => theme.color.border.primary).with(ButtonVariant.TERTIARY, () => theme.color.border.primary).with(ButtonVariant.SUCCESS, () => "transparent").with(ButtonVariant.ERROR, () => "transparent").exhaustive();
+};
+var _exp10 = () => ({ theme, $variant }) => {
+	return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.background.disabled).with(ButtonVariant.SECONDARY, () => theme.color.background.disabled).with(ButtonVariant.TERTIARY, () => "transparent").with(ButtonVariant.SUCCESS, () => theme.color.background.successAlt).with(ButtonVariant.ERROR, () => theme.color.background.errorAlt).exhaustive();
+};
+var StyledDropdownButton = withTheme(/*#__PURE__*/ styled("button")({
+	name: "StyledDropdownButton",
+	class: "sobaxfi",
+	propsAsIs: false,
+	vars: {
+		"sobaxfi-0": [_exp()],
+		"sobaxfi-1": [_exp2()],
+		"sobaxfi-2": [_exp3()],
+		"sobaxfi-3": [_exp4()],
+		"sobaxfi-4": [_exp5()],
+		"sobaxfi-5": [_exp6()],
+		"sobaxfi-6": [_exp7()],
+		"sobaxfi-7": [_exp8()],
+		"sobaxfi-8": [_exp9()],
+		"sobaxfi-9": [_exp0()],
+		"sobaxfi-10": [_exp1()],
+		"sobaxfi-11": [_exp10()]
+	}
+}));
+var _exp11 = () => ({ $isEllipsis }) => $isEllipsis ? "1" : "0 1 auto";
+var _exp12 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
+var LabelWrapper = /*#__PURE__*/ styled("span")({
+	name: "LabelWrapper",
+	class: "l147oxln",
+	propsAsIs: false,
+	vars: {
+		"l147oxln-0": [_exp11()],
+		"l147oxln-1": [_exp12()]
+	}
+});
+function getTextVariant(variant, galaxyTheme) {
+	return match(variant).with(ButtonVariant.PRIMARY, () => galaxyTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with(ButtonVariant.SECONDARY, () => TextVariant.PRIMARY).with(ButtonVariant.TERTIARY, () => TextVariant.PRIMARY).with(ButtonVariant.SUCCESS, () => TextVariant.PRIMARY_ALT).with(ButtonVariant.ERROR, () => TextVariant.PRIMARY_ALT).exhaustive();
+}
+function getIconVariant(variant, galaxyTheme) {
+	return match(variant).with(ButtonVariant.PRIMARY, () => galaxyTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with(ButtonVariant.SECONDARY, () => IconVariant.PRIMARY).with(ButtonVariant.TERTIARY, () => IconVariant.PRIMARY).with(ButtonVariant.SUCCESS, () => IconVariant.PRIMARY_ALT).with(ButtonVariant.ERROR, () => IconVariant.PRIMARY_ALT).exhaustive();
+}
+var BUTTON_SIZE_TO_TEXT_SIZE_MAP = {
+	[ButtonSize.SMALL]: TextSize.BODY_SM,
+	[ButtonSize.MEDIUM]: TextSize.BODY_MD,
+	[ButtonSize.LARGE]: TextSize.BODY_LG
+};
+var BUTTON_SIZE_TO_ICON_SIZE_MAP = {
+	[ButtonSize.SMALL]: 12,
+	[ButtonSize.MEDIUM]: 14,
+	[ButtonSize.LARGE]: 16
+};
+var DropdownButton = ({ label, icon, variant = ButtonVariant.PRIMARY, size = ButtonSize.MEDIUM, onClick, isOpen, fillWidth, isLoading, isDisabled, isEllipsis, cursor }) => {
+	const { galaxyTheme } = useGalaxyTheme();
+	const handleClick = useCallback((e) => {
+		if (isDisabled || isLoading) return;
+		onClick(e);
+	}, [
+		isDisabled,
+		isLoading,
+		onClick
+	]);
+	const renderIcon = useCallback(() => {
+		if (!icon) return null;
+		let iconVariant = getIconVariant(variant, galaxyTheme);
+		if (isDisabled) iconVariant = IconVariant.TERTIARY;
+		return /* @__PURE__ */ jsx(FlexItem, {
+			shrink: 0,
+			grow: 0,
+			children: /* @__PURE__ */ jsx(Icon, {
+				component: icon,
+				variant: iconVariant,
+				size: BUTTON_SIZE_TO_ICON_SIZE_MAP[size]
+			})
+		});
+	}, [
+		icon,
+		variant,
+		size,
+		isDisabled,
+		galaxyTheme
+	]);
+	const renderLabel = useCallback(() => {
+		let textVariant = getTextVariant(variant, galaxyTheme);
+		if (isDisabled) textVariant = TextVariant.TERTIARY_ALT;
+		return /* @__PURE__ */ jsx(LabelWrapper, {
+			$isEllipsis: isEllipsis,
+			children: /* @__PURE__ */ jsx(Text, {
+				variant: textVariant,
+				weight: TextWeight.MEDIUM,
+				size: BUTTON_SIZE_TO_TEXT_SIZE_MAP[size],
+				cursor: isDisabled ? "not-allowed" : cursor,
+				isEllipsis,
+				children: label
+			})
+		});
+	}, [
+		label,
+		variant,
+		size,
+		isDisabled,
+		isEllipsis,
+		cursor,
+		galaxyTheme
+	]);
+	const renderCaret = useCallback(() => {
+		let iconVariant = getIconVariant(variant, galaxyTheme);
+		if (isDisabled) iconVariant = IconVariant.TERTIARY;
+		return /* @__PURE__ */ jsx(RotateWithTransition, {
+			isRotated: isOpen,
+			deg: -180,
+			children: /* @__PURE__ */ jsx(Icon, {
+				component: CaretDownIcon,
+				variant: iconVariant,
+				size: BUTTON_SIZE_TO_ICON_SIZE_MAP[size]
+			})
+		});
+	}, [
+		variant,
+		size,
+		isDisabled,
+		isOpen,
+		galaxyTheme
+	]);
+	return /* @__PURE__ */ jsxs(StyledDropdownButton, {
+		$variant: variant,
+		$size: size,
+		$isOpen: isOpen,
+		$fillWidth: fillWidth,
+		$isEllipsis: isEllipsis,
+		$cursor: cursor,
+		onClick: handleClick,
+		disabled: isDisabled || isLoading,
+		children: [
+			renderIcon(),
+			renderLabel(),
+			renderCaret()
+		]
+	});
+};
+//#endregion
+export { ButtonSize, ButtonVariant, DropdownButton as default };

package/dist/dropdown/DropdownFooter.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties, PropsWithChildren } from "react";
+interface DropdownFooterProps {
+    gap?: number | string;
+    padding?: CSSProperties["padding"];
+    justifyContent?: CSSProperties["justifyContent"];
+    alignItems?: CSSProperties["alignItems"];
+    fillWidth?: boolean;
+}
+declare const DropdownFooter: ({ children, gap, padding, justifyContent, alignItems, fillWidth, }: PropsWithChildren<DropdownFooterProps>) => import("react").JSX.Element;
+export default DropdownFooter;

package/dist/dropdown/DropdownFooter.js

@@ -0,0 +1,35 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+/* empty css                         */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/dropdown/DropdownFooter.tsx
+var _exp = () => ({ $alignItems }) => $alignItems ?? "center";
+var _exp2 = () => ({ $justifyContent }) => $justifyContent ?? "flex-start";
+var _exp3 = () => ({ $gap }) => getCssSizeValue($gap, "0");
+var _exp4 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
+var _exp5 = () => ({ $padding }) => $padding ?? "0";
+var DropdownFooterWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "DropdownFooterWrapper",
+	class: "d1egzp74",
+	propsAsIs: false,
+	vars: {
+		"d1egzp74-0": [_exp()],
+		"d1egzp74-1": [_exp2()],
+		"d1egzp74-2": [_exp3()],
+		"d1egzp74-3": [_exp4()],
+		"d1egzp74-4": [_exp5()]
+	}
+}));
+var DropdownFooter = ({ children, gap, padding, justifyContent, alignItems, fillWidth = false }) => {
+	return /* @__PURE__ */ jsx(DropdownFooterWrapper, {
+		$gap: gap,
+		$padding: padding,
+		$justifyContent: justifyContent,
+		$alignItems: alignItems,
+		$fillWidth: fillWidth,
+		children
+	});
+};
+//#endregion
+export { DropdownFooter as default };

package/dist/dropdown/DropdownItem.d.ts

@@ -0,0 +1,10 @@
+import { type TextVariant } from "../text/Text";
+export interface DropdownItemButton {
+    icon?: React.ReactNode;
+    label: string;
+    variant?: TextVariant;
+    isDisabled?: boolean;
+    onClick: () => void;
+}
+declare const DropdownItem: ({ icon, label, variant, isDisabled, onClick }: DropdownItemButton) => import("react").JSX.Element;
+export default DropdownItem;

package/dist/dropdown/DropdownItem.js

@@ -0,0 +1,38 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import Text from "../text/Text.js";
+/* empty css                       */
+import { styled } from "@linaria/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/dropdown/DropdownItem.tsx
+var StyledDropdownItemButton = withTheme(/*#__PURE__*/ styled("button")({
+	name: "StyledDropdownItemButton",
+	class: "syosvbj",
+	propsAsIs: false
+}));
+var _exp2 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp3 = () => ({ theme }) => theme.color.border.primary;
+var DropdownItemWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "DropdownItemWrapper",
+	class: "d189jx24",
+	propsAsIs: false,
+	vars: {
+		"d189jx24-0": [_exp2()],
+		"d189jx24-1": [_exp3()]
+	}
+}));
+var DropdownItem = ({ icon, label, variant, isDisabled, onClick }) => {
+	const handleClick = (e) => {
+		e.stopPropagation();
+		onClick();
+	};
+	return /* @__PURE__ */ jsx(StyledDropdownItemButton, {
+		onClick: handleClick,
+		disabled: isDisabled,
+		children: /* @__PURE__ */ jsxs(DropdownItemWrapper, { children: [icon, /* @__PURE__ */ jsx(Text, {
+			variant,
+			children: label
+		})] })
+	});
+};
+//#endregion
+export { DropdownItem as default };

package/dist/editor/CodeEditor.d.ts

@@ -0,0 +1,68 @@
+import { Extension } from "@codemirror/state";
+import { LanguageName } from "@uiw/codemirror-extensions-langs";
+import { GalaxyTheme } from "../theme/constants";
+import { Theme } from "../theme/types";
+export declare enum CodeEditorVariant {
+    BASE = "BASE",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY"
+}
+export type CodeEditorLanguage = LanguageName;
+type CodeEditorProps = {
+    /**
+     * The content of the code editor.
+     */
+    content: string;
+    /**
+     * The placeholder of the code editor.
+     */
+    placeholder?: string;
+    /**
+     * The content type of the code editor.
+     */
+    lang?: CodeEditorLanguage;
+    /**
+     * Whether the code editor is read only.
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether to show line numbers.
+     */
+    noLineNumbers?: boolean;
+    /**
+     * Custom CodeMirror extensions to add to the editor.
+     * Use this for template decorations, custom keymaps, etc.
+     */
+    customExtensions?: Extension[];
+    /**
+     * Callback fired when the content changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback fired when Cmd/Ctrl+Enter is pressed.
+     */
+    onExecute?: () => void;
+    /**
+     * Border radius for the editor wrapper.
+     */
+    borderRadius?: string | number;
+    /**
+     * Whether to show a border around the editor.
+     */
+    noBorder?: boolean;
+    /**
+     * Sets the padding inside the code editor content area.
+     * Can be a number (for pixels) or a string (for other units).
+     */
+    padding?: React.CSSProperties["padding"];
+    /**
+     * The background color variant of the code editor.
+     * Defaults to PRIMARY.
+     */
+    variant?: CodeEditorVariant;
+};
+export declare function createSearchPanelThemeExtension(theme: Theme): Extension;
+export declare function createCodeMirrorThemeExtension(theme: Theme, galaxyTheme: Exclude<GalaxyTheme, GalaxyTheme.SYSTEM>, variant: CodeEditorVariant, isReadOnly?: boolean): Extension;
+declare const CodeEditor: ({ content, placeholder, lang, customExtensions, onChange, onExecute, borderRadius, noBorder, isReadOnly, noLineNumbers, padding, variant, }: CodeEditorProps) => import("react").JSX.Element;
+export default CodeEditor;