@galaxy-io/dls 1.0.8 → 1.1.0

package/README.md

@@ -63,7 +63,7 @@ Access theme state in components:
 import { useGalaxyTheme } from "@galaxy-io/dls/theme/GalaxyTheme";
 
 function ThemeSwitcher() {
-  const { galaxyTheme, selectedTheme, setTheme } = useGalaxyTheme();
+  const { activeTheme, selectedTheme, setTheme } = useGalaxyTheme();
 }
 ```
 

package/dist/avatar/Avatar.d.ts

@@ -3,7 +3,6 @@ export interface AvatarProps {
     isLoading?: boolean;
     size?: number;
     hex?: string;
-    shouldShowLogo?: boolean;
 }
-declare const Avatar: ({ img, isLoading, size, hex, shouldShowLogo }: AvatarProps) => import("react").JSX.Element | null;
+declare const Avatar: ({ img, isLoading, size, hex }: AvatarProps) => import("react").JSX.Element;
 export default Avatar;

package/dist/avatar/Avatar.js

@@ -1,6 +1,4 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
 import AvatarShimmer from "./AvatarShimmer.js";
-import GalaxyLogomark from "../icons/GalaxyLogomark.js";
 import AvatarEmpty from "./AvatarEmpty.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
@@ -13,31 +11,8 @@ var StyledAvatar = /*#__PURE__*/ styled("img")({
 	propsAsIs: false,
 	vars: { "sve5wdp-0": [_exp2(), "px"] }
 });
-var _exp3 = () => ({ theme }) => theme.color.background.tertiary;
-var _exp4 = () => ({ theme }) => theme.color.border.primary;
-var _exp5 = () => ({ $size }) => {
-	if ($size <= 16) return "2px";
-	if ($size <= 24) return "3px";
-	return "4px";
-};
-var _exp7 = () => ({ $size }) => $size;
-var StyledLogoAvatar = withTheme(/*#__PURE__*/ styled("div")({
-	name: "StyledLogoAvatar",
-	class: "s3r0r1h",
-	propsAsIs: false,
-	vars: {
-		"s3r0r1h-0": [_exp3()],
-		"s3r0r1h-1": [_exp4()],
-		"s3r0r1h-2": [_exp5()],
-		"s3r0r1h-3": [_exp7(), "px"]
-	}
-}));
-var Avatar = ({ img, isLoading, size = 16, hex, shouldShowLogo }) => {
-	if (isLoading) return isLoading ? /* @__PURE__ */ jsx(AvatarShimmer, { size }) : null;
-	if (shouldShowLogo) return /* @__PURE__ */ jsx(StyledLogoAvatar, {
-		$size: size,
-		children: /* @__PURE__ */ jsx(GalaxyLogomark, { height: Math.max(8, size - (size <= 16 ? 2 : size <= 24 ? 3 : 4) * 2 - 2) })
-	});
+var Avatar = ({ img, isLoading, size = 16, hex }) => {
+	if (isLoading) return /* @__PURE__ */ jsx(AvatarShimmer, { size });
 	if (!img) return /* @__PURE__ */ jsx(AvatarEmpty, {
 		size,
 		hex

package/dist/avatar/AvatarEmpty.d.ts

@@ -1,36 +1,7 @@
-import { GalaxyTheme } from "../theme/constants";
 export interface AvatarEmptyProps {
     size: number;
     hex?: string;
+    seed?: string;
 }
-export declare const StyledAvatarEmpty: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme: import("../theme").Theme;
-} & {
-    $size: number;
-    $hex?: string;
-    $galaxyTheme: Exclude<GalaxyTheme, GalaxyTheme.SYSTEM>;
-} & {
-    as?: React.ElementType;
-}, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement> | "as" | "$size" | "$hex" | "$galaxyTheme"> & {
-    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
-}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme: import("../theme").Theme;
-} & {
-    $size: number;
-    $hex?: string;
-    $galaxyTheme: Exclude<GalaxyTheme, GalaxyTheme.SYSTEM>;
-} & {
-    as?: React.ElementType;
-}> & {
-    __wyw_meta: unknown;
-} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme: import("../theme").Theme;
-} & {
-    $size: number;
-    $hex?: string;
-    $galaxyTheme: Exclude<GalaxyTheme, GalaxyTheme.SYSTEM>;
-} & {
-    as?: React.ElementType;
-}>, {}>;
-declare const AvatarEmpty: ({ size, hex }: AvatarEmptyProps) => import("react").JSX.Element;
+declare const AvatarEmpty: ({ size, hex, seed }: AvatarEmptyProps) => import("react").JSX.Element;
 export default AvatarEmpty;

package/dist/avatar/AvatarEmpty.js

@@ -1,43 +1,99 @@
-import { GalaxyTheme } from "../theme/constants.js";
-import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
+import { withTheme } from "../theme/GalaxyTheme.js";
 import { getDarkerHexColor, getLighterHexColor, getOpaqueHexColor } from "../utils/colors.js";
 /* empty css                      */
 import { styled } from "@linaria/react";
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/avatar/AvatarEmpty.tsx
-var _exp2 = () => ({ $size }) => `${$size}px`;
-var _exp3 = () => ({ theme, $hex, $galaxyTheme }) => {
-	const isDark = $galaxyTheme === GalaxyTheme.DARK;
-	const base = $hex ? $hex : isDark ? theme.color.border.tertiary : getDarkerHexColor(theme.color.border.tertiary, 25);
-	const accent = $hex ? getLighterHexColor($hex, isDark ? 120 : 130) : isDark ? getLighterHexColor(theme.color.border.tertiary, 80) : getLighterHexColor(theme.color.border.tertiary, 55);
-	const galaxy = theme.color.background.galaxy;
-	const galaxyRing = getOpaqueHexColor(galaxy, .22);
-	const galaxyRingSoft = getOpaqueHexColor(galaxy, .08);
-	return `
-      radial-gradient(circle at 50% 50%, transparent 28%, ${galaxyRingSoft} 45%, ${galaxyRing} 62%, ${galaxyRing} 85%, ${galaxyRingSoft} 96%, transparent 100%),
-      radial-gradient(ellipse 90% 40% at 30% 25%, ${accent} 0%, transparent 55%),
-      radial-gradient(ellipse 85% 35% at 75% 65%, ${accent} 0%, transparent 50%),
-      radial-gradient(ellipse 70% 50% at 55% 80%, ${base} 0%, transparent 45%),
-      radial-gradient(ellipse 80% 45% at 20% 70%, ${base} 0%, transparent 50%),
-      radial-gradient(ellipse 100% 60% at 50% 50%, ${base} 10%, ${accent} 100%)
-    `;
-};
-var StyledAvatarEmpty = withTheme(/*#__PURE__*/ styled("div")({
-	name: "StyledAvatarEmpty",
-	class: "s3y5dk3",
+var _exp2 = () => ({ $size }) => $size;
+var _exp3 = () => ({ theme }) => theme.color.background.secondary;
+var Container = withTheme(/*#__PURE__*/ styled("div")({
+	name: "Container",
+	class: "c3y5dk3",
 	propsAsIs: false,
 	vars: {
-		"s3y5dk3-0": [_exp2()],
-		"s3y5dk3-1": [_exp3()]
+		"c3y5dk3-0": [_exp2(), "px"],
+		"c3y5dk3-1": [_exp3()]
 	}
 }));
-var AvatarEmpty = ({ size = 16, hex }) => {
-	const { galaxyTheme } = useGalaxyTheme();
-	return /* @__PURE__ */ jsx(StyledAvatarEmpty, {
+var _exp5 = () => ({ $dotSize }) => $dotSize;
+var _exp6 = () => ({ $color }) => $color;
+var _exp7 = () => ({ $x }) => $x;
+var _exp8 = () => ({ $y }) => $y;
+var Dot = /*#__PURE__*/ styled("div")({
+	name: "Dot",
+	class: "d1vohupz",
+	propsAsIs: false,
+	vars: {
+		"d1vohupz-0": [_exp5(), "px"],
+		"d1vohupz-1": [_exp6()],
+		"d1vohupz-2": [_exp7(), "px"],
+		"d1vohupz-3": [_exp8(), "px"]
+	}
+});
+var seededRandom = (seed) => {
+	let hash = 0;
+	for (let i = 0; i < seed.length; i++) {
+		const char = seed.charCodeAt(i);
+		hash = (hash << 5) - hash + char;
+		hash = hash & hash;
+	}
+	return () => {
+		hash = hash * 1103515245 + 12345 & 2147483647;
+		return hash / 2147483647;
+	};
+};
+var DEFAULT_HEX = "#6B7280";
+var AvatarEmpty = ({ size = 16, hex, seed }) => {
+	const dots = useMemo(() => {
+		const baseHex = hex ?? DEFAULT_HEX;
+		const colors = [
+			baseHex,
+			getLighterHexColor(baseHex, 30),
+			getDarkerHexColor(baseHex, 25),
+			getOpaqueHexColor(baseHex, .3),
+			getOpaqueHexColor(baseHex, .15)
+		];
+		const gridSize = size <= 24 ? 5 : size <= 48 ? 7 : 9;
+		const step = size / gridSize;
+		const dotSize = Math.round(step * .6);
+		const random = seededRandom(seed ?? hex ?? "default");
+		const halfCols = Math.ceil(gridSize / 2);
+		const pattern = [];
+		for (let row = 0; row < gridSize; row++) {
+			pattern[row] = [];
+			for (let col = 0; col < halfCols; col++) pattern[row][col] = { colorIndex: Math.floor(random() * colors.length) };
+			for (let col = halfCols; col < gridSize; col++) pattern[row][col] = pattern[row][gridSize - 1 - col];
+		}
+		const dotPositions = [];
+		for (let row = 0; row < gridSize; row++) for (let col = 0; col < gridSize; col++) {
+			const x = col * step + (step - dotSize) / 2;
+			const y = row * step + (step - dotSize) / 2;
+			dotPositions.push({
+				x,
+				y,
+				color: colors[pattern[row][col].colorIndex],
+				key: `${row}-${col}`
+			});
+		}
+		return {
+			dotSize,
+			dotPositions
+		};
+	}, [
+		size,
+		hex,
+		seed
+	]);
+	return /* @__PURE__ */ jsx(Container, {
 		$size: size,
-		$hex: hex,
-		$galaxyTheme: galaxyTheme
+		children: dots.dotPositions.map(({ x, y, color, key }) => /* @__PURE__ */ jsx(Dot, {
+			$dotSize: dots.dotSize,
+			$x: x,
+			$y: y,
+			$color: color
+		}, key))
 	});
 };
 //#endregion
-export { StyledAvatarEmpty, AvatarEmpty as default };
+export { AvatarEmpty as default };

package/dist/buttons/Button.js

@@ -81,11 +81,11 @@ var LabelWrapper = /*#__PURE__*/ styled("span")({
 		"l9yox33-1": [_exp12()]
 	}
 });
-function getTextVariant(variant, galaxyTheme) {
-	return match(variant).with("PRIMARY", () => galaxyTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("SECONDARY", () => TextVariant.PRIMARY).with("TERTIARY", () => TextVariant.PRIMARY).with("SUCCESS", () => TextVariant.PRIMARY_ALT).with("ERROR", () => TextVariant.PRIMARY_ALT).exhaustive();
+function getTextVariant(variant, activeTheme) {
+	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("SECONDARY", () => TextVariant.PRIMARY).with("TERTIARY", () => TextVariant.PRIMARY).with("SUCCESS", () => TextVariant.PRIMARY_ALT).with("ERROR", () => TextVariant.PRIMARY_ALT).exhaustive();
 }
-function getIconVariant(variant, galaxyTheme) {
-	return match(variant).with("PRIMARY", () => galaxyTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with("SECONDARY", () => IconVariant.PRIMARY).with("TERTIARY", () => IconVariant.PRIMARY).with("SUCCESS", () => IconVariant.PRIMARY_ALT).with("ERROR", () => IconVariant.PRIMARY_ALT).exhaustive();
+function getIconVariant(variant, activeTheme) {
+	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with("SECONDARY", () => IconVariant.PRIMARY).with("TERTIARY", () => IconVariant.PRIMARY).with("SUCCESS", () => IconVariant.PRIMARY_ALT).with("ERROR", () => IconVariant.PRIMARY_ALT).exhaustive();
 }
 var BUTTON_SIZE_TO_TEXT_SIZE_MAP = {
 	["SMALL"]: TextSize.BODY_SM,
@@ -98,7 +98,7 @@ var BUTTON_SIZE_TO_ICON_SIZE_MAP = {
 	["LARGE"]: 16
 };
 var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isEllipsis, cursor }) => {
-	const { galaxyTheme } = useGalaxyTheme();
+	const { activeTheme } = useGalaxyTheme();
 	const handleClick = useCallback((e) => {
 		if (isDisabled || isLoading) return;
 		onClick(e);
@@ -109,7 +109,7 @@ var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMo
 	]);
 	const renderIcon = useCallback(() => {
 		if (!icon) return null;
-		let iconVariant = getIconVariant(variant, galaxyTheme);
+		let iconVariant = getIconVariant(variant, activeTheme);
 		if (isDisabled) iconVariant = IconVariant.TERTIARY;
 		return /* @__PURE__ */ jsx(FlexItem, {
 			shrink: 0,
@@ -125,11 +125,11 @@ var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMo
 		variant,
 		size,
 		isDisabled,
-		galaxyTheme
+		activeTheme
 	]);
 	const renderLabel = useCallback(() => {
 		if (!label) return null;
-		let textVariant = getTextVariant(variant, galaxyTheme);
+		let textVariant = getTextVariant(variant, activeTheme);
 		if (isDisabled) textVariant = TextVariant.TERTIARY_ALT;
 		return /* @__PURE__ */ jsx(LabelWrapper, {
 			$isEllipsis: isEllipsis,
@@ -149,7 +149,7 @@ var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMo
 		isDisabled,
 		isEllipsis,
 		cursor,
-		galaxyTheme
+		activeTheme
 	]);
 	return /* @__PURE__ */ jsxs(StyledButton, {
 		$variant: variant,

package/dist/dropdown/DropdownButton.js

@@ -71,11 +71,11 @@ var LabelWrapper = /*#__PURE__*/ styled("span")({
 		"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 getTextVariant(variant, activeTheme) {
+	return match(variant).with(ButtonVariant.PRIMARY, () => activeTheme === 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();
+function getIconVariant(variant, activeTheme) {
+	return match(variant).with(ButtonVariant.PRIMARY, () => activeTheme === 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,
@@ -88,7 +88,7 @@ var BUTTON_SIZE_TO_ICON_SIZE_MAP = {
 	[ButtonSize.LARGE]: 16
 };
 var DropdownButton = ({ label, icon, variant = ButtonVariant.PRIMARY, size = ButtonSize.MEDIUM, onClick, isOpen, fillWidth, isLoading, isDisabled, isEllipsis, cursor }) => {
-	const { galaxyTheme } = useGalaxyTheme();
+	const { activeTheme } = useGalaxyTheme();
 	const handleClick = useCallback((e) => {
 		if (isDisabled || isLoading) return;
 		onClick(e);
@@ -99,7 +99,7 @@ var DropdownButton = ({ label, icon, variant = ButtonVariant.PRIMARY, size = But
 	]);
 	const renderIcon = useCallback(() => {
 		if (!icon) return null;
-		let iconVariant = getIconVariant(variant, galaxyTheme);
+		let iconVariant = getIconVariant(variant, activeTheme);
 		if (isDisabled) iconVariant = IconVariant.TERTIARY;
 		return /* @__PURE__ */ jsx(FlexItem, {
 			shrink: 0,
@@ -115,10 +115,10 @@ var DropdownButton = ({ label, icon, variant = ButtonVariant.PRIMARY, size = But
 		variant,
 		size,
 		isDisabled,
-		galaxyTheme
+		activeTheme
 	]);
 	const renderLabel = useCallback(() => {
-		let textVariant = getTextVariant(variant, galaxyTheme);
+		let textVariant = getTextVariant(variant, activeTheme);
 		if (isDisabled) textVariant = TextVariant.TERTIARY_ALT;
 		return /* @__PURE__ */ jsx(LabelWrapper, {
 			$isEllipsis: isEllipsis,
@@ -138,10 +138,10 @@ var DropdownButton = ({ label, icon, variant = ButtonVariant.PRIMARY, size = But
 		isDisabled,
 		isEllipsis,
 		cursor,
-		galaxyTheme
+		activeTheme
 	]);
 	const renderCaret = useCallback(() => {
-		let iconVariant = getIconVariant(variant, galaxyTheme);
+		let iconVariant = getIconVariant(variant, activeTheme);
 		if (isDisabled) iconVariant = IconVariant.TERTIARY;
 		return /* @__PURE__ */ jsx(RotateWithTransition, {
 			isRotated: isOpen,
@@ -157,7 +157,7 @@ var DropdownButton = ({ label, icon, variant = ButtonVariant.PRIMARY, size = But
 		size,
 		isDisabled,
 		isOpen,
-		galaxyTheme
+		activeTheme
 	]);
 	return /* @__PURE__ */ jsxs(StyledDropdownButton, {
 		$variant: variant,

package/dist/editor/CodeEditor.d.ts

@@ -63,6 +63,6 @@ type CodeEditorProps = {
     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;
+export declare function createCodeMirrorThemeExtension(theme: Theme, activeTheme: 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;

package/dist/editor/CodeEditor.js

@@ -109,8 +109,8 @@ function createSearchPanelThemeExtension(theme) {
 		}
 	});
 }
-function createCodeMirrorThemeExtension(theme, galaxyTheme, variant, isReadOnly) {
-	const codeMirrorTheme = match(galaxyTheme).returnType().with(GalaxyTheme.DARK, () => "dark").with(GalaxyTheme.LIGHT, () => "light").exhaustive();
+function createCodeMirrorThemeExtension(theme, activeTheme, variant, isReadOnly) {
+	const codeMirrorTheme = match(activeTheme).returnType().with(GalaxyTheme.DARK, () => "dark").with(GalaxyTheme.LIGHT, () => "light").exhaustive();
 	const settingsBackgroundColor = getBackgroundColorFromVariant(theme, variant);
 	const settingsSelectionColor = isReadOnly ? theme.color.opacity.bw0 : theme.color.opacity.bw16Alt;
 	const settingsSelectionMatchColor = getBackgroundColorFromVariant(theme, variant);
@@ -366,10 +366,10 @@ function createCodeMirrorThemeExtension(theme, galaxyTheme, variant, isReadOnly)
 	});
 }
 var CodeEditor = ({ content, placeholder, lang, customExtensions = [], onChange, onExecute, borderRadius, noBorder, isReadOnly, noLineNumbers, padding, variant = "PRIMARY" }) => {
-	const { theme, galaxyTheme } = useGalaxyTheme();
-	const codeMirrorTheme = useMemo(() => createCodeMirrorThemeExtension(theme, galaxyTheme, variant, isReadOnly), [
+	const { theme, activeTheme } = useGalaxyTheme();
+	const codeMirrorTheme = useMemo(() => createCodeMirrorThemeExtension(theme, activeTheme, variant, isReadOnly), [
 		theme,
-		galaxyTheme,
+		activeTheme,
 		variant,
 		isReadOnly
 	]);

package/dist/icons/GalaxyLogomark.js

@@ -7,14 +7,14 @@ import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/icons/GalaxyLogomark.tsx
 var GalaxyLogomark = ({ height, isDark }) => {
-	const { galaxyTheme } = useGalaxyTheme();
+	const { activeTheme } = useGalaxyTheme();
 	return useMemo(() => {
 		if (isDark) return /* @__PURE__ */ jsx(SvgGalaxyLogomarkDark, { height });
-		return match(galaxyTheme).with(GalaxyTheme.DARK, () => /* @__PURE__ */ jsx(SvgGalaxyLogomarkLight, { height })).with(GalaxyTheme.LIGHT, () => /* @__PURE__ */ jsx(SvgGalaxyLogomarkDark, { height })).exhaustive();
+		return match(activeTheme).with(GalaxyTheme.DARK, () => /* @__PURE__ */ jsx(SvgGalaxyLogomarkLight, { height })).with(GalaxyTheme.LIGHT, () => /* @__PURE__ */ jsx(SvgGalaxyLogomarkDark, { height })).exhaustive();
 	}, [
 		height,
 		isDark,
-		galaxyTheme
+		activeTheme
 	]);
 };
 //#endregion

package/dist/icons/GalaxyWordmark.js

@@ -7,14 +7,14 @@ import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/icons/GalaxyWordmark.tsx
 var GalaxyWordmark = ({ height, isDark }) => {
-	const { galaxyTheme } = useGalaxyTheme();
+	const { activeTheme } = useGalaxyTheme();
 	return useMemo(() => {
 		if (isDark) return /* @__PURE__ */ jsx(SvgGalaxyWordmarkLight, { height });
-		return match(galaxyTheme).with(GalaxyTheme.DARK, () => /* @__PURE__ */ jsx(SvgGalaxyWordmarkLight, { height })).with(GalaxyTheme.LIGHT, () => /* @__PURE__ */ jsx(SvgGalaxyWordmarkDark, { height })).exhaustive();
+		return match(activeTheme).with(GalaxyTheme.DARK, () => /* @__PURE__ */ jsx(SvgGalaxyWordmarkLight, { height })).with(GalaxyTheme.LIGHT, () => /* @__PURE__ */ jsx(SvgGalaxyWordmarkDark, { height })).exhaustive();
 	}, [
 		height,
 		isDark,
-		galaxyTheme
+		activeTheme
 	]);
 };
 //#endregion

package/dist/icons/TextIcon.js

@@ -7,10 +7,10 @@ import { jsx } from "react/jsx-runtime";
 import { TextTIcon } from "@phosphor-icons/react";
 //#region src/icons/TextIcon.tsx
 var TextIcon = ({ size = 16 }) => {
-	const { galaxyTheme } = useGalaxyTheme();
+	const { activeTheme } = useGalaxyTheme();
 	const variant = useMemo(() => {
-		return match(galaxyTheme).with(GalaxyTheme.DARK, () => IconVariant.PRIMARY_ALT).with(GalaxyTheme.LIGHT, () => IconVariant.PRIMARY).exhaustive();
-	}, [galaxyTheme]);
+		return match(activeTheme).with(GalaxyTheme.DARK, () => IconVariant.PRIMARY_ALT).with(GalaxyTheme.LIGHT, () => IconVariant.PRIMARY).exhaustive();
+	}, [activeTheme]);
 	return /* @__PURE__ */ jsx(Icon, {
 		component: TextTIcon,
 		weight: IconWeight.FILL,

package/dist/icons/WebScrapeIcon.js

@@ -7,10 +7,10 @@ import { jsx } from "react/jsx-runtime";
 import { GlobeIcon } from "@phosphor-icons/react";
 //#region src/icons/WebScrapeIcon.tsx
 var WebScrapeIcon = ({ size = 16 }) => {
-	const { galaxyTheme } = useGalaxyTheme();
+	const { activeTheme } = useGalaxyTheme();
 	const variant = useMemo(() => {
-		return match(galaxyTheme).with(GalaxyTheme.DARK, () => IconVariant.PRIMARY_ALT).with(GalaxyTheme.LIGHT, () => IconVariant.PRIMARY).exhaustive();
-	}, [galaxyTheme]);
+		return match(activeTheme).with(GalaxyTheme.DARK, () => IconVariant.PRIMARY_ALT).with(GalaxyTheme.LIGHT, () => IconVariant.PRIMARY).exhaustive();
+	}, [activeTheme]);
 	return /* @__PURE__ */ jsx(Icon, {
 		component: GlobeIcon,
 		weight: IconWeight.FILL,

package/dist/icons/WebhookIcon.js

@@ -7,10 +7,10 @@ import { jsx } from "react/jsx-runtime";
 import { WebhooksLogoIcon } from "@phosphor-icons/react";
 //#region src/icons/WebhookIcon.tsx
 var WebhookIcon = ({ size = 16 }) => {
-	const { galaxyTheme } = useGalaxyTheme();
+	const { activeTheme } = useGalaxyTheme();
 	const variant = useMemo(() => {
-		return match(galaxyTheme).with(GalaxyTheme.DARK, () => IconVariant.PRIMARY_ALT).with(GalaxyTheme.LIGHT, () => IconVariant.PRIMARY).exhaustive();
-	}, [galaxyTheme]);
+		return match(activeTheme).with(GalaxyTheme.DARK, () => IconVariant.PRIMARY_ALT).with(GalaxyTheme.LIGHT, () => IconVariant.PRIMARY).exhaustive();
+	}, [activeTheme]);
 	return /* @__PURE__ */ jsx(Icon, {
 		component: WebhooksLogoIcon,
 		weight: IconWeight.FILL,

package/dist/icons/sources/ClickhouseLogomark.js

@@ -7,10 +7,10 @@ import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/icons/sources/ClickhouseLogomark.tsx
 var ClickhouseLogomark = ({ height }) => {
-	const { galaxyTheme } = useGalaxyTheme();
+	const { activeTheme } = useGalaxyTheme();
 	return useMemo(() => {
-		return match(galaxyTheme).with(GalaxyTheme.DARK, () => /* @__PURE__ */ jsx(SvgClickhouseLogoSourceIconLight, { height })).with(GalaxyTheme.LIGHT, () => /* @__PURE__ */ jsx(SvgClickhouseLogoSourceIconDark, { height })).exhaustive();
-	}, [galaxyTheme, height]);
+		return match(activeTheme).with(GalaxyTheme.DARK, () => /* @__PURE__ */ jsx(SvgClickhouseLogoSourceIconLight, { height })).with(GalaxyTheme.LIGHT, () => /* @__PURE__ */ jsx(SvgClickhouseLogoSourceIconDark, { height })).exhaustive();
+	}, [activeTheme, height]);
 };
 //#endregion
 export { ClickhouseLogomark as default };

package/dist/icons/sources/SnowflakeLogomark.js

@@ -7,10 +7,10 @@ import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/icons/sources/SnowflakeLogomark.tsx
 var SnowflakeLogomark = ({ height }) => {
-	const { galaxyTheme } = useGalaxyTheme();
+	const { activeTheme } = useGalaxyTheme();
 	return useMemo(() => {
-		return match(galaxyTheme).with(GalaxyTheme.DARK, () => /* @__PURE__ */ jsx(SvgSnowflakeLogoSourceIconLight, { height })).with(GalaxyTheme.LIGHT, () => /* @__PURE__ */ jsx(SvgSnowflakeLogoSourceIconDark, { height })).exhaustive();
-	}, [galaxyTheme, height]);
+		return match(activeTheme).with(GalaxyTheme.DARK, () => /* @__PURE__ */ jsx(SvgSnowflakeLogoSourceIconLight, { height })).with(GalaxyTheme.LIGHT, () => /* @__PURE__ */ jsx(SvgSnowflakeLogoSourceIconDark, { height })).exhaustive();
+	}, [activeTheme, height]);
 };
 //#endregion
 export { SnowflakeLogomark as default };

package/dist/styles.css

@@ -11,10 +11,9 @@
 .s1eqyn2i{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-animation:spin-s1eqyn2i var(--s1eqyn2i-0) linear infinite;animation:spin-s1eqyn2i var(--s1eqyn2i-0) linear infinite;transform-origin:50% 50%;}@-webkit-keyframes spin-s1eqyn2i{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes spin-s1eqyn2i{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
 .s1eibpeh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.s1eibpeh >*{-webkit-animation:spinVertical-s1eibpeh var(--s1eibpeh-0) linear infinite;animation:spinVertical-s1eibpeh var(--s1eibpeh-0) linear infinite;}@-webkit-keyframes spinVertical-s1eibpeh{from{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg);}to{-webkit-transform:rotateY(360deg);-moz-transform:rotateY(360deg);-ms-transform:rotateY(360deg);transform:rotateY(360deg);}}@keyframes spinVertical-s1eibpeh{from{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg);}to{-webkit-transform:rotateY(360deg);-moz-transform:rotateY(360deg);-ms-transform:rotateY(360deg);transform:rotateY(360deg);}}
 .sve5wdp{border-radius:200px;height:var(--sve5wdp-0);width:var(--sve5wdp-0);}
-.s3r0r1h{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border-radius:4px;background-color:var(--s3r0r1h-0);border:0.5px solid var(--s3r0r1h-1);padding:var(--s3r0r1h-2);height:var(--s3r0r1h-3);width:var(--s3r0r1h-3);}
-.s3y5dk3{width:var(--s3y5dk3-0);height:var(--s3y5dk3-0);background:var(--s3y5dk3-1);border-radius:200px;}
-.s1o6ak6r{background:var(--s1o6ak6r-0);-webkit-background-size:200% 100%;background-size:200% 100%;-webkit-animation:shimmer-s1o6ak6r 2.5s infinite,pulse-s1o6ak6r 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;animation:shimmer-s1o6ak6r 2.5s infinite,pulse-s1o6ak6r 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;height:var(--s1o6ak6r-1);width:var(--s1o6ak6r-1);border-radius:4px;}@-webkit-keyframes shimmer-s1o6ak6r{0%{-webkit-background-position:-250% 0;background-position:-250% 0;}100%{-webkit-background-position:150% 0;background-position:150% 0;}}@keyframes shimmer-s1o6ak6r{0%{-webkit-background-position:-250% 0;background-position:-250% 0;}100%{-webkit-background-position:150% 0;background-position:150% 0;}}@-webkit-keyframes pulse-s1o6ak6r{0%,100%{opacity:0.75;}50%{opacity:0.25;}}@keyframes pulse-s1o6ak6r{0%,100%{opacity:0.75;}50%{opacity:0.25;}}
-.s1iz4plp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border-radius:4px;background-color:var(--s1iz4plp-0);border:0.5px solid var(--s1iz4plp-1);padding:var(--s1iz4plp-2);height:var(--s1iz4plp-3);width:var(--s1iz4plp-3);}
+.c3y5dk3{width:var(--c3y5dk3-0);height:var(--c3y5dk3-0);border-radius:50%;background:var(--c3y5dk3-1);position:relative;overflow:hidden;}
+.d1vohupz{position:absolute;width:var(--d1vohupz-0);height:var(--d1vohupz-0);border-radius:50%;background:var(--d1vohupz-1);left:var(--d1vohupz-2);top:var(--d1vohupz-3);}
+.s1o6ak6r{background:var(--s1o6ak6r-0);-webkit-background-size:200% 100%;background-size:200% 100%;-webkit-animation:shimmer-s1o6ak6r 2.5s infinite,pulse-s1o6ak6r 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;animation:shimmer-s1o6ak6r 2.5s infinite,pulse-s1o6ak6r 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;height:var(--s1o6ak6r-1);width:var(--s1o6ak6r-1);border-radius:50%;}@-webkit-keyframes shimmer-s1o6ak6r{0%{-webkit-background-position:-250% 0;background-position:-250% 0;}100%{-webkit-background-position:150% 0;background-position:150% 0;}}@keyframes shimmer-s1o6ak6r{0%{-webkit-background-position:-250% 0;background-position:-250% 0;}100%{-webkit-background-position:150% 0;background-position:150% 0;}}@-webkit-keyframes pulse-s1o6ak6r{0%,100%{opacity:0.75;}50%{opacity:0.25;}}@keyframes pulse-s1o6ak6r{0%,100%{opacity:0.75;}50%{opacity:0.25;}}
 .s3lwr7s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:var(--s3lwr7s-0);height:var(--s3lwr7s-0);background-color:var(--s3lwr7s-1);background-image:var(--s3lwr7s-2);-webkit-background-size:var(--s3lwr7s-3);background-size:var(--s3lwr7s-3);}
 .siq7g1q{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:var(--siq7g1q-0);height:var(--siq7g1q-0);background-color:var(--siq7g1q-1);background-image:var(--siq7g1q-2);-webkit-background-size:var(--siq7g1q-3);background-size:var(--siq7g1q-3);border-radius:var(--siq7g1q-4);}
 .saa8iad{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:var(--saa8iad-0);height:var(--saa8iad-0);background-color:var(--saa8iad-1);background-image:var(--saa8iad-2);-webkit-background-size:var(--saa8iad-3);background-size:var(--saa8iad-3);border-radius:var(--saa8iad-4);}

package/dist/theme/GalaxyTheme.d.ts

@@ -16,7 +16,7 @@ export interface ThemeDetector {
 export declare const BrowserThemeDetector: ThemeDetector;
 interface GalaxyThemeContextValue {
     theme: Theme;
-    galaxyTheme: Exclude<GalaxyTheme, GalaxyTheme.SYSTEM>;
+    activeTheme: Exclude<GalaxyTheme, GalaxyTheme.SYSTEM>;
     selectedTheme: GalaxyTheme;
     systemTheme: GalaxyTheme.DARK | GalaxyTheme.LIGHT;
     isSystemThemeSupported: boolean;

package/dist/theme/GalaxyTheme.js

@@ -77,7 +77,7 @@ var GalaxyThemeProvider = ({ children, initialTheme, storageKey = GALAXY_THEME_S
 	const actualTheme = GALAXY_THEME_MAP[resolvedTheme] || GALAXY_THEME_MAP[GalaxyTheme.DARK];
 	const value = useMemo(() => ({
 		theme: actualTheme,
-		galaxyTheme: resolvedTheme,
+		activeTheme: resolvedTheme,
 		selectedTheme,
 		systemTheme,
 		isSystemThemeSupported,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",

package/dist/avatar/GalaxyAvatar.d.ts

@@ -1,6 +0,0 @@
-export interface GalaxyAvatarProps {
-    isLoading?: boolean;
-    size?: number;
-}
-declare const GalaxyAvatar: ({ isLoading, size }: GalaxyAvatarProps) => import("react").JSX.Element | null;
-export default GalaxyAvatar;

package/dist/avatar/GalaxyAvatar.js

@@ -1,36 +0,0 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import AvatarShimmer from "./AvatarShimmer.js";
-import GalaxyLogomark from "../icons/GalaxyLogomark.js";
-/* empty css                       */
-import { styled } from "@linaria/react";
-import { jsx } from "react/jsx-runtime";
-//#region src/avatar/GalaxyAvatar.tsx
-var _exp = () => ({ theme }) => theme.color.background.tertiary;
-var _exp2 = () => ({ theme }) => theme.color.border.primary;
-var _exp3 = () => ({ $size }) => {
-	if ($size <= 16) return "2px";
-	if ($size <= 24) return "3px";
-	return "4px";
-};
-var _exp5 = () => ({ $size }) => $size;
-var StyledGalaxyAvatar = withTheme(/*#__PURE__*/ styled("div")({
-	name: "StyledGalaxyAvatar",
-	class: "s1iz4plp",
-	propsAsIs: false,
-	vars: {
-		"s1iz4plp-0": [_exp()],
-		"s1iz4plp-1": [_exp2()],
-		"s1iz4plp-2": [_exp3()],
-		"s1iz4plp-3": [_exp5(), "px"]
-	}
-}));
-var GalaxyAvatar = ({ isLoading, size = 16 }) => {
-	if (isLoading) return isLoading ? /* @__PURE__ */ jsx(AvatarShimmer, { size }) : null;
-	const availableInnerSize = size - (size <= 16 ? 2 : size <= 24 ? 3 : 4) * 2;
-	return /* @__PURE__ */ jsx(StyledGalaxyAvatar, {
-		$size: size,
-		children: /* @__PURE__ */ jsx(GalaxyLogomark, { height: Math.max(8, Math.round(availableInnerSize * .75)) })
-	});
-};
-//#endregion
-export { GalaxyAvatar as default };