@galaxy-io/dls 1.3.6 → 1.4.1

package/dist/charts/constants.js

@@ -214,83 +214,6 @@ var CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
 var CHART_LEGEND_SIDE_GAP = 16;
 /**
-* Ghost bar heights, one inner array per group — three bars each, so the
-* skeleton reads as the grouped chart it usually stands in for rather than a
-* sparse row of lone bars.
-*/
-var SKELETON_BAR_GROUPS = [
-	[
-		65,
-		45,
-		25
-	],
-	[
-		80,
-		55,
-		30
-	],
-	[
-		45,
-		70,
-		35
-	],
-	[
-		70,
-		50,
-		40
-	],
-	[
-		55,
-		75,
-		30
-	]
-];
-/**
-* Ghost lines, one inner array per line, offset from each other and drawn with
-* their area fills so the skeleton has the layered depth of a real multi-series
-* chart instead of a single bare stroke.
-*/
-var SKELETON_LINE_SERIES = [
-	[
-		30,
-		55,
-		45,
-		70,
-		60,
-		85,
-		75
-	],
-	[
-		20,
-		35,
-		50,
-		40,
-		60,
-		55,
-		70
-	],
-	[
-		10,
-		25,
-		20,
-		35,
-		30,
-		45,
-		40
-	]
-];
-/** Ghost donut shares — three arcs, halving. */
-var SKELETON_PIE_VALUES = [
-	5,
-	3,
-	2
-];
-/**
-* Skeleton pulse period, matching the cadence of `TextShimmer` and
-* `AvatarShimmer` so charts load in step with everything else on the page.
-*/
-var CHART_SKELETON_PULSE_MS = 2500;
-/**
 * Approximate width of one CAPTION-size character.
 *
 * Axis sizing estimates label widths arithmetically rather than measuring the
@@ -338,4 +261,4 @@ var CHART_PALETTE_ORDER = [
 	ChartPalette.RED
 ];
 //#endregion
-export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_RESTORE_DELAY_MS, CHART_SKELETON_PULSE_MS, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, SKELETON_BAR_GROUPS, SKELETON_LINE_SERIES, SKELETON_PIE_VALUES, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };
+export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_RESTORE_DELAY_MS, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };

package/dist/charts/useChartInteraction.d.ts

@@ -25,6 +25,16 @@ interface UseChartInteractionOptions {
     seriesKeys?: string[];
     /** Suppress all interaction — used while loading and when the tooltip is off. */
     disabled?: boolean;
+    /**
+     * Render every mark muted, whatever the two axes say.
+     *
+     * Distinct from {@link disabled}, which suppresses *input*. Loading suppresses
+     * *emphasis*: there is nothing yet worth drawing attention to. Folded in here
+     * rather than left to each mark, because the alternative is the same
+     * `isLoading ? MUTED : getMarkState(…)` ternary hand-copied at every mark —
+     * which is exactly how one of them came to be missing it.
+     */
+    isLoading?: boolean;
 }
 interface MarkStateArgs {
     /** Omit for marks that belong to no particular category, such as a line. */
@@ -55,5 +65,5 @@ export interface ChartInteraction {
     onSeriesEnter: (seriesKey: string) => void;
     onSeriesLeave: () => void;
 }
-export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, }: UseChartInteractionOptions): ChartInteraction;
+export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, isLoading, }: UseChartInteractionOptions): ChartInteraction;
 export {};

package/dist/charts/useChartInteraction.js

@@ -1,7 +1,7 @@
 import { ChartMarkState } from "./types.js";
 import { useCallback, useMemo, useState } from "react";
 //#region src/charts/useChartInteraction.ts
-function useChartInteraction({ categoryCount, seriesKeys, disabled = false }) {
+function useChartInteraction({ categoryCount, seriesKeys, disabled = false, isLoading = false }) {
 	const [hoveredIndex, setHoveredIndex] = useState(null);
 	const [hoveredSeriesKey, setHoveredSeriesKey] = useState(null);
 	const safeHovered = hoveredIndex !== null && hoveredIndex < categoryCount ? hoveredIndex : null;
@@ -21,8 +21,13 @@ function useChartInteraction({ categoryCount, seriesKeys, disabled = false }) {
 		setHoveredSeriesKey(null);
 	}, []);
 	const getMarkState = useCallback(({ categoryIndex, seriesKey }) => {
+		if (isLoading) return ChartMarkState.MUTED;
 		return categoryIndex !== void 0 && safeHovered !== null && categoryIndex !== safeHovered || seriesKey !== void 0 && safeHoveredSeries !== null && seriesKey !== safeHoveredSeries ? ChartMarkState.MUTED : ChartMarkState.ACTIVE;
-	}, [safeHovered, safeHoveredSeries]);
+	}, [
+		isLoading,
+		safeHovered,
+		safeHoveredSeries
+	]);
 	return useMemo(() => ({
 		activeIndex: safeHovered,
 		hoveredSeriesKey: safeHoveredSeries,

package/dist/charts/useSeriesColorResolver.d.ts

@@ -33,12 +33,5 @@ export interface SeriesColorResolver<TKey extends string> {
      * imply it is.
      */
     neutral: string;
-    /**
-     * Ghost colour for skeleton marks while the chart is loading.
-     *
-     * The same token the shimmer components use, so the loading vocabulary is
-     * one colour everywhere.
-     */
-    placeholder: string;
 }
 export declare function useSeriesColorResolver<TKey extends string>(series: ChartSeriesStyles<TKey>): SeriesColorResolver<TKey>;

package/dist/charts/useSeriesColorResolver.js

@@ -15,8 +15,7 @@ function useSeriesColorResolver(series) {
 		keys,
 		resolve,
 		resolveByIndex,
-		neutral: theme.color.text.tertiary,
-		placeholder: theme.color.border.primary
+		neutral: theme.color.text.tertiary
 	}), [
 		keys,
 		resolve,

package/dist/dividers/HorizontalDivider.d.ts

@@ -1,2 +1,5 @@
-declare const HorizontalDivider: () => import("react").JSX.Element;
+export interface HorizontalDividerProps {
+    label?: string;
+}
+declare const HorizontalDivider: ({ label }: HorizontalDividerProps) => import("react").JSX.Element;
 export default HorizontalDivider;

package/dist/dividers/HorizontalDivider.js

@@ -1,17 +1,38 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
 /* empty css                            */
 import { styled } from "@linaria/react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/dividers/HorizontalDivider.tsx
-var _exp = () => ({ theme }) => theme.color.border.primary;
-var HorizontalDividerWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "HorizontalDividerWrapper",
+var _exp = () => ({ $flex }) => $flex ? "auto" : "100%";
+var _exp2 = () => ({ $flex }) => $flex ? "1 1 0%" : "0 0 auto";
+var _exp3 = () => ({ theme }) => theme.color.border.primary;
+var HorizontalDividerLine = withTheme(/*#__PURE__*/ styled("div")({
+	name: "HorizontalDividerLine",
 	class: "h1sww5hz",
 	propsAsIs: false,
-	vars: { "h1sww5hz-0": [_exp()] }
+	vars: {
+		"h1sww5hz-0": [_exp()],
+		"h1sww5hz-1": [_exp2()],
+		"h1sww5hz-2": [_exp3()]
+	}
 }));
-var HorizontalDivider = () => {
-	return /* @__PURE__ */ jsx(HorizontalDividerWrapper, {});
+var LabeledDividerWrapper = /*#__PURE__*/ styled("div")({
+	name: "LabeledDividerWrapper",
+	class: "l44ah51",
+	propsAsIs: false
+});
+var HorizontalDivider = ({ label }) => {
+	if (!label) return /* @__PURE__ */ jsx(HorizontalDividerLine, {});
+	return /* @__PURE__ */ jsxs(LabeledDividerWrapper, { children: [
+		/* @__PURE__ */ jsx(HorizontalDividerLine, { $flex: true }),
+		/* @__PURE__ */ jsx(Text, {
+			size: TextSize.CAPTION,
+			variant: TextVariant.TERTIARY,
+			children: label
+		}),
+		/* @__PURE__ */ jsx(HorizontalDividerLine, { $flex: true })
+	] });
 };
 //#endregion
 export { HorizontalDivider as default };

package/dist/icons/GalaxyLogomark3D.js

@@ -4,7 +4,7 @@ import galaxy_logomark_default from "../assets/models/galaxy-logomark.js";
 /* empty css                           */
 import { styled } from "@linaria/react";
 import { Suspense, useEffect, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Center, Environment, OrbitControls } from "@react-three/drei";
 import { Canvas, useFrame, useLoader } from "@react-three/fiber";
 import * as THREE from "three";
@@ -139,7 +139,7 @@ function LogoMesh({ color, isDark, isAutoRotate = false, isHoverable = true, isH
 	});
 }
 function SimpleLighting() {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("ambientLight", { intensity: .5 }),
 		/* @__PURE__ */ jsx("directionalLight", {
 			position: [
@@ -160,7 +160,7 @@ function SimpleLighting() {
 	] });
 }
 function DramaticLighting({ backlight, spotlight, fillLight }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("ambientLight", { intensity: .15 }),
 		/* @__PURE__ */ jsx("directionalLight", {
 			position: [
@@ -227,7 +227,7 @@ function DramaticLighting({ backlight, spotlight, fillLight }) {
 	] });
 }
 function Scene({ color, isDark, isAutoRotate, isInteractive, isHoverable, isHovered, speed, isDramaticMode, backlight, spotlight, fillLight, material, environmentPreset }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		isDramaticMode && backlight && spotlight && fillLight ? /* @__PURE__ */ jsx(DramaticLighting, {
 			backlight,
 			spotlight,

package/dist/inputs/ColorInput.js

@@ -12,7 +12,7 @@ import { InputLabel, InputSize } from "./Input.js";
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CaretDownIcon } from "@phosphor-icons/react";
 import { Hue, Saturation } from "@uiw/react-color";
 //#region src/inputs/ColorInput.tsx
@@ -339,7 +339,7 @@ var ColorInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 						/* @__PURE__ */ jsxs(FlexWrapper, {
 							alignItems: AlignItems.CENTER,
 							gap: 8,
-							children: [value && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorInputPreviewSwatch, { $color: value }), /* @__PURE__ */ jsx(Spacing, { left: 4 })] }), /* @__PURE__ */ jsx(Text, {
+							children: [value && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ColorInputPreviewSwatch, { $color: value }), /* @__PURE__ */ jsx(Spacing, { left: 4 })] }), /* @__PURE__ */ jsx(Text, {
 								variant: textVariant,
 								size: COLOR_INPUT_SIZE_TO_TEXT_SIZE[size],
 								isEllipsis: true,

package/dist/inputs/CopyInput.js

@@ -2,7 +2,7 @@ import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
 import { InputSize } from "./Input.js";
 import TextInput from "./TextInput.js";
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
 //#region src/inputs/CopyInput.tsx
@@ -13,7 +13,9 @@ var INPUT_SIZE_TO_BUTTON_SIZE = {
 };
 var CopyInput = ({ value, label, labelTooltip, size = InputSize.MEDIUM, width, fillWidth, isMonospace = false }) => {
 	const [copied, setCopied] = useState(false);
+	const inputRef = useRef(null);
 	const handleCopy = useCallback(() => {
+		inputRef.current?.select();
 		navigator.clipboard.writeText(value).then(() => {
 			setCopied(true);
 			setTimeout(() => setCopied(false), 2e3);
@@ -24,6 +26,7 @@ var CopyInput = ({ value, label, labelTooltip, size = InputSize.MEDIUM, width, f
 		gap: 8,
 		fillWidth,
 		children: [/* @__PURE__ */ jsx(TextInput, {
+			ref: inputRef,
 			label,
 			labelTooltip,
 			value,

package/dist/inputs/Input.d.ts

@@ -24,7 +24,7 @@ export declare const StyledInput: import("react").ComponentType<Pick<import("rea
     theme: import("../theme").Theme;
 } & {
     as?: React.ElementType;
-}, "$width" | "$fillWidth" | "as" | "$size" | "$isMonospace" | "$isError" | "$hasLeadingIcon" | "$hasTrailingAction" | "$isDisabled" | keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
+}, "$width" | "$fillWidth" | "$size" | "$isMonospace" | "as" | "$isError" | "$hasLeadingIcon" | "$hasTrailingAction" | "$isDisabled" | keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
     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<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
     $size: InputSize;

package/dist/inputs/MultiSelectInput.js

@@ -1,5 +1,6 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
+import Rotate from "../transform/Rotate.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
@@ -7,7 +8,6 @@ import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrappe
 import CheckboxInput, { CheckboxInputVariant } from "./CheckboxInput.js";
 import Dropdown, { DropdownPosition, DropdownVariant } from "../dropdown/Dropdown.js";
 import { InputLabel, InputSize } from "./Input.js";
-import RotateWithTransition from "../animations/RotateWithTransition.js";
 import HorizontalDivider from "../dividers/HorizontalDivider.js";
 import { useElementWidth } from "../hooks/useElementWidth.js";
 import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
@@ -16,7 +16,7 @@ import { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SEL
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowCounterClockwiseIcon, CaretDownIcon } from "@phosphor-icons/react";
 //#region src/inputs/MultiSelectInput.tsx
 var _exp = () => ({ $size }) => {
@@ -324,7 +324,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 		$fillWidth: fillWidth,
 		$width: resolvedDropdownWidth,
 		children: [
-			filteredPinnedOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [filteredPinnedOptions.map((pinnedOption, index) => /* @__PURE__ */ jsx(PinnedOptionButton, {
+			filteredPinnedOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [filteredPinnedOptions.map((pinnedOption, index) => /* @__PURE__ */ jsx(PinnedOptionButton, {
 				ref: (el) => {
 					optionsRefs.current[index] = el;
 				},
@@ -409,7 +409,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 					})
 				})
 			}),
-			onReset && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FlexItem, {
+			onReset && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FlexItem, {
 				shrink: 0,
 				children: /* @__PURE__ */ jsx(HorizontalDivider, {})
 			}), /* @__PURE__ */ jsx(PinnedOptionButton, {
@@ -503,7 +503,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 							disabled: effectiveIsDisabled,
 							onClick: (e) => e.stopPropagation()
 						}),
-						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(RotateWithTransition, {
+						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(Rotate, {
 							isRotated: visible,
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {
@@ -541,7 +541,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 							isEllipsis: true,
 							children: displayValue
 						}),
-						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(RotateWithTransition, {
+						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(Rotate, {
 							isRotated: visible,
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {

package/dist/inputs/SelectInput.js

@@ -1,5 +1,6 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
+import Rotate from "../transform/Rotate.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
@@ -7,7 +8,6 @@ import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrappe
 import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import Spacing from "../containers/Spacing.js";
 import { InputLabel, InputSize } from "./Input.js";
-import RotateWithTransition from "../animations/RotateWithTransition.js";
 import HorizontalDivider from "../dividers/HorizontalDivider.js";
 import { useElementWidth } from "../hooks/useElementWidth.js";
 import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
@@ -15,7 +15,7 @@ import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowCounterClockwiseIcon, CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 //#region src/inputs/SelectInput.tsx
 var SelectInputVariant = /* @__PURE__ */ function(SelectInputVariant) {
@@ -301,7 +301,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 		$fillWidth: fillWidth,
 		$width: resolvedDropdownWidth,
 		children: [
-			filteredPinnedOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [filteredPinnedOptions.map((pinnedOption, index) => /* @__PURE__ */ jsxs(PinnedOptionButton, {
+			filteredPinnedOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [filteredPinnedOptions.map((pinnedOption, index) => /* @__PURE__ */ jsxs(PinnedOptionButton, {
 				ref: (el) => {
 					optionsRefs.current[index] = el;
 				},
@@ -369,7 +369,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 					})
 				})
 			}),
-			onReset && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HorizontalDivider, {}), /* @__PURE__ */ jsx(PinnedOptionButton, {
+			onReset && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HorizontalDivider, {}), /* @__PURE__ */ jsx(PinnedOptionButton, {
 				onClick: handleReset,
 				$isSelected: false,
 				$isFocused: false,
@@ -451,7 +451,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 							onClick: (e) => e.stopPropagation()
 						}),
 						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
-						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(RotateWithTransition, {
+						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(Rotate, {
 							isRotated: visible,
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {
@@ -498,7 +498,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 							})]
 						}),
 						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
-						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(RotateWithTransition, {
+						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(Rotate, {
 							isRotated: visible,
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {

package/dist/inputs/SwitcherInput.d.ts

@@ -0,0 +1,11 @@
+export interface SwitcherInputItem {
+    id: string;
+    label: string;
+    onClick: () => void;
+}
+interface SwitcherInputProps {
+    items: SwitcherInputItem[];
+    selectedId: string;
+}
+declare const SwitcherInput: ({ items, selectedId }: SwitcherInputProps) => import("react").JSX.Element;
+export default SwitcherInput;

package/dist/inputs/SwitcherInput.js

@@ -0,0 +1,41 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextWeight } from "../text/Text.js";
+/* empty css                        */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/inputs/SwitcherInput.tsx
+var _exp = () => ({ theme }) => theme.color.background.primary;
+var _exp2 = () => ({ theme }) => theme.color.border.primary;
+var StyledSwitcherInput = withTheme(/*#__PURE__*/ styled("div")({
+	name: "StyledSwitcherInput",
+	class: "sx2momv",
+	propsAsIs: false,
+	vars: {
+		"sx2momv-0": [_exp()],
+		"sx2momv-1": [_exp2()]
+	}
+}));
+var _exp3 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.background.secondary : "transparent";
+var _exp4 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.border.primary : "transparent";
+var StyledSwitcherInputItem = withTheme(/*#__PURE__*/ styled("div")({
+	name: "StyledSwitcherInputItem",
+	class: "s1pe4aqp",
+	propsAsIs: false,
+	vars: {
+		"s1pe4aqp-0": [_exp3()],
+		"s1pe4aqp-1": [_exp4()]
+	}
+}));
+var SwitcherInput = ({ items, selectedId }) => {
+	return /* @__PURE__ */ jsx(StyledSwitcherInput, { children: items.map((item) => /* @__PURE__ */ jsx(StyledSwitcherInputItem, {
+		onClick: item.onClick,
+		$isSelected: item.id === selectedId,
+		children: /* @__PURE__ */ jsx(Text, {
+			weight: TextWeight.MEDIUM,
+			cursor: "pointer",
+			children: item.label
+		})
+	}, item.label)) });
+};
+//#endregion
+export { SwitcherInput as default };

package/dist/shapes/Square.d.ts

@@ -0,0 +1,6 @@
+interface SquareProps {
+    size: number | string;
+    hex?: string;
+}
+declare const Square: ({ size, hex }: SquareProps) => import("react").JSX.Element;
+export default Square;

package/dist/shapes/Square.js

@@ -0,0 +1,25 @@
+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/shapes/Square.tsx
+var _exp2 = () => ({ $size }) => getCssSizeValue($size);
+var _exp3 = () => ({ theme, $hex }) => $hex ?? theme.color.text.tertiary;
+var SquareWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "SquareWrapper",
+	class: "s1ibzzfh",
+	propsAsIs: false,
+	vars: {
+		"s1ibzzfh-0": [_exp2()],
+		"s1ibzzfh-1": [_exp3()]
+	}
+}));
+var Square = ({ size, hex }) => {
+	return /* @__PURE__ */ jsx(SquareWrapper, {
+		$size: size,
+		$hex: hex
+	});
+};
+//#endregion
+export { Square as default };