@galaxy-io/dls 1.3.0 → 1.3.2

package/dist/charts/useCartesianChartLayout.d.ts

@@ -0,0 +1,70 @@
+import type { ChartLabelFormatter, ChartMargin, ChartValueDomain, ChartValueFormatter, ChartValueUnit } from "./types";
+import type { ChartDimensions } from "./useChartDimensions";
+/**
+ * Everything a cartesian chart resolves *before* it can be measured.
+ *
+ * There is a hard ordering inside bar and line alike:
+ *
+ * ```
+ * domain → ticks → left margin → dimensions → plot size → geometry
+ * ```
+ *
+ * The gutter has to fit the tick labels, the ticks come from the domain, and
+ * the domain comes from the data — none of which needs the plot. Everything
+ * after `geometry` does need it, which is why this hook stops there rather than
+ * trying to own the whole chart: the geometry builders are generic over the
+ * chart's own key types, and threading those through here would buy nothing.
+ *
+ * Deliberately **not generic**. `getBarValueDomain` and `getLineValueDomain`
+ * have already erased the key types by the time they return an extent, so
+ * nothing in this phase needs them.
+ */
+interface UseCartesianChartLayoutOptions {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /**
+     * The data's own extent, before any override or nicing.
+     *
+     * Free to be a fresh array each render — the memo below keys on the two
+     * numbers, not the array's identity.
+     */
+    rawDomain: [number, number];
+    valueDomain?: Partial<ChartValueDomain>;
+    width?: number;
+    height?: number;
+    fillWidth?: boolean;
+    fillHeight?: boolean;
+    aspectRatio?: number;
+    margin?: Partial<ChartMargin>;
+    valueUnit?: ChartValueUnit;
+    valueFormatter?: ChartValueFormatter;
+    labelFormatter?: ChartLabelFormatter;
+    /**
+     * Rewrites the resolved value formatter for the axis alone.
+     *
+     * Takes the resolved formatter rather than replacing it, because the only
+     * caller — a percent-normalized bar chart — falls back to it whenever the
+     * consumer asked for something specific. Applies to the tick labels *and* the
+     * gutter estimate, which is the point: sizing the gutter with a different
+     * formatter than the one that renders into it is how a gutter ends up too
+     * narrow for its own labels.
+     *
+     * Must be stable; memoize it at the call site.
+     */
+    deriveAxisFormatter?: (formatValue: ChartValueFormatter) => ChartValueFormatter;
+    valueAxisTitle?: string;
+    categoryAxisTitle?: string;
+}
+export interface CartesianChartLayout {
+    dimensions: ChartDimensions;
+    /** Override applied, zero included, degenerate widened, `nice()` applied. */
+    domain: [number, number];
+    valueTicks: number[];
+    /** Tooltip rows and value labels. */
+    formatValue: ChartValueFormatter;
+    /** Category names — the axis and the tooltip heading. */
+    formatLabel: ChartLabelFormatter;
+    /** Axis ticks. Identical to `formatValue` unless `deriveAxisFormatter` said otherwise. */
+    formatAxisValue: ChartValueFormatter;
+}
+export declare function useCartesianChartLayout({ containerRef, rawDomain, valueDomain, width, height, fillWidth, fillHeight, aspectRatio, margin, valueUnit, valueFormatter, labelFormatter, deriveAxisFormatter, valueAxisTitle, categoryAxisTitle, }: UseCartesianChartLayoutOptions): CartesianChartLayout;
+export {};

package/dist/charts/useCartesianChartLayout.js

@@ -0,0 +1,56 @@
+import { addAxisTitleSpace, estimateValueAxisMargin, getValueTicks, resolveValueDomain } from "./chartScales.js";
+import { useChartFormatters } from "./useChartFormatters.js";
+import { useChartDimensions } from "./useChartDimensions.js";
+import { useMemo } from "react";
+//#region src/charts/useCartesianChartLayout.ts
+function useCartesianChartLayout({ containerRef, rawDomain, valueDomain, width, height, fillWidth, fillHeight, aspectRatio, margin, valueUnit, valueFormatter, labelFormatter, deriveAxisFormatter, valueAxisTitle, categoryAxisTitle }) {
+	const { formatValue, formatLabel } = useChartFormatters({
+		valueFormatter,
+		valueUnit,
+		labelFormatter
+	});
+	const formatAxisValue = useMemo(() => deriveAxisFormatter?.(formatValue) ?? formatValue, [deriveAxisFormatter, formatValue]);
+	const [rawMin, rawMax] = rawDomain;
+	const domain = useMemo(() => resolveValueDomain([rawMin, rawMax], valueDomain), [
+		rawMin,
+		rawMax,
+		valueDomain
+	]);
+	const valueTicks = useMemo(() => getValueTicks(domain, valueDomain), [domain, valueDomain]);
+	const dimensions = useChartDimensions({
+		containerRef,
+		width,
+		height,
+		fillWidth,
+		fillHeight,
+		aspectRatio,
+		margin: addAxisTitleSpace(useMemo(() => ({
+			...margin,
+			left: margin?.left ?? estimateValueAxisMargin(valueTicks, formatAxisValue)
+		}), [
+			margin,
+			valueTicks,
+			formatAxisValue
+		]), {
+			hasValueTitle: Boolean(valueAxisTitle),
+			hasCategoryTitle: Boolean(categoryAxisTitle)
+		})
+	});
+	return useMemo(() => ({
+		dimensions,
+		domain,
+		valueTicks,
+		formatValue,
+		formatLabel,
+		formatAxisValue
+	}), [
+		dimensions,
+		domain,
+		valueTicks,
+		formatValue,
+		formatLabel,
+		formatAxisValue
+	]);
+}
+//#endregion
+export { useCartesianChartLayout };

package/dist/charts/useChartDimensions.d.ts

@@ -21,6 +21,15 @@ interface UseChartDimensionsOptions {
     fillHeight?: boolean;
     aspectRatio?: number;
     margin?: Partial<ChartMargin>;
+    /**
+     * Fallback for whichever fields `margin` leaves out.
+     *
+     * Radial charts pass their own, since the cartesian default reserves gutters
+     * for axes they do not draw. Merged per field, so a caller's partial margin
+     * lands on top of *this* rather than reverting the chart to the cartesian
+     * defaults.
+     */
+    defaultMargin?: ChartMargin;
 }
 export interface ChartDimensions {
     width: number;
@@ -33,8 +42,6 @@ export interface ChartDimensions {
     /** Handed to the plot box so it reserves space before measurement lands. */
     reservedHeight?: number;
     reservedAspectRatio?: number;
-    /** Makes the plot box claim the flex track instead of reserving a height. */
-    fillHeight?: boolean;
 }
-export declare function useChartDimensions({ containerRef, width, height, fillWidth, fillHeight, aspectRatio, margin: marginOverride, }: UseChartDimensionsOptions): ChartDimensions;
+export declare function useChartDimensions({ containerRef, width, height, fillWidth, fillHeight, aspectRatio, margin: marginOverride, defaultMargin, }: UseChartDimensionsOptions): ChartDimensions;
 export {};

package/dist/charts/useChartDimensions.js

@@ -1,22 +1,33 @@
 import { useElementClientSize } from "../hooks/useElementClientSize.js";
+import { DEFAULT_CHART_MARGIN } from "./constants.js";
 import { getPlotDimensions, resolveMargin } from "./chartScales.js";
 import { useEffect, useMemo } from "react";
 //#region src/charts/useChartDimensions.ts
-function useChartDimensions({ containerRef, width, height, fillWidth = false, fillHeight = false, aspectRatio, margin: marginOverride }) {
+function useChartDimensions({ containerRef, width, height, fillWidth = false, fillHeight = false, aspectRatio, margin: marginOverride, defaultMargin }) {
 	const { width: measuredWidth, height: measuredHeight } = useElementClientSize(containerRef);
 	const resolvedWidth = fillWidth ? measuredWidth ?? 0 : width ?? 0;
 	const resolvedHeight = fillHeight ? measuredHeight ?? 0 : aspectRatio ? resolvedWidth / aspectRatio : height ?? 0;
 	const { top: marginTop, right: marginRight, bottom: marginBottom, left: marginLeft } = marginOverride ?? {};
+	const { top: defaultTop, right: defaultRight, bottom: defaultBottom, left: defaultLeft } = defaultMargin ?? DEFAULT_CHART_MARGIN;
 	const margin = useMemo(() => resolveMargin({
 		top: marginTop,
 		right: marginRight,
 		bottom: marginBottom,
 		left: marginLeft
+	}, {
+		top: defaultTop,
+		right: defaultRight,
+		bottom: defaultBottom,
+		left: defaultLeft
 	}), [
 		marginTop,
 		marginRight,
 		marginBottom,
-		marginLeft
+		marginLeft,
+		defaultTop,
+		defaultRight,
+		defaultBottom,
+		defaultLeft
 	]);
 	const { plotWidth, plotHeight } = useMemo(() => getPlotDimensions(resolvedWidth, resolvedHeight, margin), [
 		resolvedWidth,
@@ -36,8 +47,7 @@ function useChartDimensions({ containerRef, width, height, fillWidth = false, fi
 		margin,
 		isMeasured: resolvedWidth > 0 && resolvedHeight > 0,
 		reservedHeight: fillHeight || aspectRatio ? void 0 : height,
-		reservedAspectRatio: fillHeight ? void 0 : aspectRatio,
-		fillHeight
+		reservedAspectRatio: fillHeight ? void 0 : aspectRatio
 	}), [
 		resolvedWidth,
 		resolvedHeight,

package/dist/charts/useChartInteraction.d.ts

@@ -11,8 +11,8 @@ import { ChartMarkState } from "./types";
  *
  * Both live here rather than one of them in the charts, so there is a single
  * `isEngaged` boolean. That matters more than it looks: `ChartPlotGroup` uses it
- * to cancel a 300ms restore delay, and a second hover source that didn't feed it
- * would sit through that delay before muting anything and feel broken.
+ * to cancel the mark restore delay, and a second hover source that didn't feed
+ * it would sit through that delay before muting anything and feel broken.
  *
  * Escape or a click on the plot background clears both pins.
  */
@@ -23,10 +23,18 @@ 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;
     /** Notified when the pinned category changes. */
     onPinnedChange?: (index: number | null) => void;
-    /** Notified when the pinned series changes. */
-    onPinnedSeriesChange?: (seriesKey: string | null) => void;
 }
 interface MarkStateArgs {
     /** Omit for marks that belong to no particular category, such as a line. */
@@ -35,14 +43,11 @@ interface MarkStateArgs {
     seriesKey?: string;
 }
 export interface ChartInteraction {
-    hoveredIndex: number | null;
     pinnedIndex: number | null;
     /** Pinned wins over hovered — this is what the tooltip follows. */
     activeIndex: number | null;
     hoveredSeriesKey: string | null;
     pinnedSeriesKey: string | null;
-    /** Pinned wins over hovered, matching the category axis. */
-    activeSeriesKey: string | null;
     /** True while *either* axis is engaged; cancels the mark restore delay. */
     isEngaged: boolean;
     /**
@@ -67,5 +72,5 @@ export interface ChartInteraction {
     /** Attach to the plot backdrop; clears both pins. */
     onBackdropClick: () => void;
 }
-export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, onPinnedChange, onPinnedSeriesChange, }: UseChartInteractionOptions): ChartInteraction;
+export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, isLoading, onPinnedChange, }: UseChartInteractionOptions): ChartInteraction;
 export {};

package/dist/charts/useChartInteraction.js

@@ -1,21 +1,19 @@
 import { ChartMarkState } from "./types.js";
+import { match } from "ts-pattern";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region src/charts/useChartInteraction.ts
 /** How far back a state sits, so two axes can be compared and the worse taken. */
-var severity = (state) => {
-	if (state === ChartMarkState.ACTIVE) return 0;
-	return state === ChartMarkState.MUTED ? 1 : 2;
-};
-function useChartInteraction({ categoryCount, seriesKeys, disabled = false, onPinnedChange, onPinnedSeriesChange }) {
+function severity(state) {
+	return match(state).with(ChartMarkState.ACTIVE, () => 0).with(ChartMarkState.MUTED, () => 1).with(ChartMarkState.FADED, () => 2).exhaustive();
+}
+function useChartInteraction({ categoryCount, seriesKeys, disabled = false, isLoading = false, onPinnedChange }) {
 	const [hoveredIndex, setHoveredIndex] = useState(null);
 	const [pinnedIndex, setPinnedIndex] = useState(null);
 	const [hoveredSeriesKey, setHoveredSeriesKey] = useState(null);
 	const [pinnedSeriesKey, setPinnedSeriesKey] = useState(null);
 	const onPinnedChangeRef = useRef(onPinnedChange);
-	const onPinnedSeriesChangeRef = useRef(onPinnedSeriesChange);
 	useEffect(() => {
 		onPinnedChangeRef.current = onPinnedChange;
-		onPinnedSeriesChangeRef.current = onPinnedSeriesChange;
 	});
 	const safeHovered = hoveredIndex !== null && hoveredIndex < categoryCount ? hoveredIndex : null;
 	const safePinned = pinnedIndex !== null && pinnedIndex < categoryCount ? pinnedIndex : null;
@@ -26,7 +24,6 @@ function useChartInteraction({ categoryCount, seriesKeys, disabled = false, onPi
 		setPinnedIndex(null);
 		setPinnedSeriesKey(null);
 		onPinnedChangeRef.current?.(null);
-		onPinnedSeriesChangeRef.current?.(null);
 	}, []);
 	const hasPin = safePinned !== null || safePinnedSeries !== null;
 	useEffect(() => {
@@ -65,9 +62,9 @@ function useChartInteraction({ categoryCount, seriesKeys, disabled = false, onPi
 		const next = pinnedSeriesKey === seriesKey ? null : seriesKey;
 		setPinnedSeriesKey(next);
 		if (next === null) setHoveredSeriesKey(null);
-		onPinnedSeriesChangeRef.current?.(next);
 	}, [pinnedSeriesKey]);
 	const getMarkState = useCallback(({ categoryIndex, seriesKey }) => {
+		if (isLoading) return ChartMarkState.MUTED;
 		const categoryState = (() => {
 			if (categoryIndex === void 0) return ChartMarkState.ACTIVE;
 			if (safePinned !== null) {
@@ -90,18 +87,17 @@ function useChartInteraction({ categoryCount, seriesKeys, disabled = false, onPi
 		})();
 		return severity(categoryState) >= severity(seriesState) ? categoryState : seriesState;
 	}, [
+		isLoading,
 		safePinned,
 		safeHovered,
 		safePinnedSeries,
 		safeHoveredSeries
 	]);
 	return useMemo(() => ({
-		hoveredIndex: safeHovered,
 		pinnedIndex: safePinned,
 		activeIndex: safePinned ?? safeHovered,
 		hoveredSeriesKey: safeHoveredSeries,
 		pinnedSeriesKey: safePinnedSeries,
-		activeSeriesKey: safePinnedSeries ?? safeHoveredSeries,
 		isEngaged: safePinned !== null || safeHovered !== null || safePinnedSeries !== null || safeHoveredSeries !== null,
 		getMarkState,
 		onCategoryEnter,

package/dist/charts/useSeriesColorResolver.d.ts

@@ -0,0 +1,37 @@
+import type { ChartPalette, ChartSeriesStyles } from "./types";
+/**
+ * Palette assignment for a chart's series, shared by all three charts.
+ *
+ * Every chart resolved colour the same way — look the key up in the `series`
+ * record, take its slot, fall back to the palette — but each spelled it
+ * differently and each rebuilt the key list itself. Doing it once here is what
+ * makes "adding a series never recolours the existing ones" a property of the
+ * design rather than of three separate call sites remembering to use
+ * `indexOf` instead of the loop counter.
+ */
+export interface SeriesColorResolver<TKey extends string> {
+    /**
+     * Series keys in `series` record order.
+     *
+     * Insertion order is what makes a key's palette slot stable regardless of
+     * which data happens to contain it, so this is never sorted.
+     */
+    keys: TKey[];
+    /** Colour for a series. The record's own `color` wins over the slot. */
+    resolve: (key: TKey, explicit?: ChartPalette) => string;
+    /**
+     * Colour by palette position, for marks that are not series.
+     *
+     * A stacked bar's segments are a second dimension with no record of their
+     * own, so they take the ramp by position rather than by key.
+     */
+    resolveByIndex: (index: number, explicit?: ChartPalette) => string;
+    /**
+     * Neutral, for a mark that names no series at all.
+     *
+     * The pie's folded bucket is not one of the slices, so borrowing a hue would
+     * imply it is.
+     */
+    neutral: string;
+}
+export declare function useSeriesColorResolver<TKey extends string>(series: ChartSeriesStyles<TKey>): SeriesColorResolver<TKey>;

package/dist/charts/useSeriesColorResolver.js

@@ -0,0 +1,27 @@
+import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
+import { resolveChartPaletteColor, resolveSeriesColor } from "./chartTheme.js";
+import { useCallback, useMemo } from "react";
+//#region src/charts/useSeriesColorResolver.ts
+function useSeriesColorResolver(series) {
+	const { theme } = useGalaxyTheme();
+	const keys = useMemo(() => Object.keys(series), [series]);
+	const resolveByIndex = useCallback((index, explicit) => explicit ? resolveChartPaletteColor(theme, explicit) : resolveSeriesColor(theme, index), [theme]);
+	const resolve = useCallback((key, explicit) => resolveSeriesColor(theme, keys.indexOf(key), explicit ?? series[key]?.color), [
+		theme,
+		keys,
+		series
+	]);
+	return useMemo(() => ({
+		keys,
+		resolve,
+		resolveByIndex,
+		neutral: theme.color.text.tertiary
+	}), [
+		keys,
+		resolve,
+		resolveByIndex,
+		theme
+	]);
+}
+//#endregion
+export { useSeriesColorResolver };

package/dist/inputs/DateInput.js

@@ -7,7 +7,7 @@ import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import GridWrapper from "../containers/GridWrapper.js";
 import Spacing from "../containers/Spacing.js";
 import { InputLabel, InputSize } from "./Input.js";
-import SelectInput, { SelectInputSize, SelectInputVariant } from "./SelectInput.js";
+import SelectInput, { SelectInputVariant } from "./SelectInput.js";
 /* empty css                    */
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
@@ -379,7 +379,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 					onMouseDown: (e) => e.stopPropagation(),
 					children: [/* @__PURE__ */ jsx(SelectInput, {
 						variant: SelectInputVariant.SECONDARY,
-						size: SelectInputSize.SMALL,
+						size: InputSize.SMALL,
 						options: monthOptions,
 						value: selectedMonthOption,
 						onChange: handleMonthChange,
@@ -388,7 +388,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 						width: 120
 					}), /* @__PURE__ */ jsx(SelectInput, {
 						variant: SelectInputVariant.SECONDARY,
-						size: SelectInputSize.SMALL,
+						size: InputSize.SMALL,
 						options: yearOptions,
 						value: selectedYearOption,
 						onChange: handleYearChange,

package/dist/inputs/MultiSelectInput.d.ts

@@ -1,7 +1,8 @@
 import { type ReactNode } from "react";
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { DropdownPosition } from "../dropdown/Dropdown";
-import { SelectInputSize, SelectInputVariant, type SelectInputOption } from "./SelectInput";
+import { InputSize } from "./Input";
+import { SelectInputVariant, type SelectInputOption } from "./SelectInput";
 export interface PinnedOptions {
     id: string;
     label: string;
@@ -11,7 +12,7 @@ export interface MultiSelectInputProps {
     label?: string;
     icon?: PhosphorIcon;
     variant?: SelectInputVariant;
-    size?: SelectInputSize;
+    size?: InputSize;
     options: SelectInputOption[];
     value: SelectInputOption[];
     placeholder?: string;

package/dist/inputs/MultiSelectInput.js

@@ -6,12 +6,12 @@ import Icon, { IconVariant } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import CheckboxInput, { CheckboxInputVariant } from "./CheckboxInput.js";
 import Dropdown, { DropdownPosition, DropdownVariant } from "../dropdown/Dropdown.js";
-import { InputLabel } from "./Input.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";
-import { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInputSize, SelectInputVariant } from "./SelectInput.js";
+import { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInputVariant } from "./SelectInput.js";
 /* empty css                           */
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
@@ -20,10 +20,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowCounterClockwiseIcon, CaretDownIcon } from "@phosphor-icons/react";
 //#region src/inputs/MultiSelectInput.tsx
 var _exp = () => ({ $size }) => {
-	return match($size).with(SelectInputSize.SMALL, () => "0 6px").with(SelectInputSize.MEDIUM, () => "0 8px").with(SelectInputSize.LARGE, () => "0 10px").exhaustive();
+	return match($size).with(InputSize.SMALL, () => "0 6px").with(InputSize.MEDIUM, () => "0 8px").with(InputSize.LARGE, () => "0 10px").exhaustive();
 };
 var _exp2 = () => ({ $size }) => {
-	return match($size).with(SelectInputSize.SMALL, () => "24px").with(SelectInputSize.MEDIUM, () => "28px").with(SelectInputSize.LARGE, () => "32px").exhaustive();
+	return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
 };
 var _exp3 = () => ({ $fillWidth, $width }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
 var _exp4 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
@@ -51,14 +51,14 @@ var StyledMultiSelectInput = withTheme(/*#__PURE__*/ styled("div")({
 	}
 }));
 var _exp9 = () => ({ $size }) => {
-	return match($size).with(SelectInputSize.SMALL, () => "24px").with(SelectInputSize.MEDIUM, () => "28px").with(SelectInputSize.LARGE, () => "32px").exhaustive();
+	return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
 };
 var _exp0 = () => ({ theme }) => theme.color.text.primary;
 var _exp1 = () => ({ theme, $size }) => {
-	return match($size).with(SelectInputSize.SMALL, () => theme.font.sans.size.body_sm).with(SelectInputSize.MEDIUM, () => theme.font.sans.size.body_md).with(SelectInputSize.LARGE, () => theme.font.sans.size.body_lg).exhaustive();
+	return match($size).with(InputSize.SMALL, () => theme.font.sans.size.body_sm).with(InputSize.MEDIUM, () => theme.font.sans.size.body_md).with(InputSize.LARGE, () => theme.font.sans.size.body_lg).exhaustive();
 };
 var _exp10 = () => ({ theme, $size }) => {
-	return match($size).with(SelectInputSize.SMALL, () => theme.font.sans.height.body_sm).with(SelectInputSize.MEDIUM, () => theme.font.sans.height.body_md).with(SelectInputSize.LARGE, () => theme.font.sans.height.body_lg).exhaustive();
+	return match($size).with(InputSize.SMALL, () => theme.font.sans.height.body_sm).with(InputSize.MEDIUM, () => theme.font.sans.height.body_md).with(InputSize.LARGE, () => theme.font.sans.height.body_lg).exhaustive();
 };
 var _exp11 = () => ({ theme }) => theme.font.sans.weight.medium;
 var _exp12 = () => ({ theme }) => theme.font.sans.family;
@@ -131,7 +131,7 @@ var SELECT_INPUT_VARIANT_TO_CHECKBOX_INPUT_VARIANT = {
 	[SelectInputVariant.SECONDARY]: CheckboxInputVariant.SECONDARY,
 	[SelectInputVariant.TERTIARY]: CheckboxInputVariant.PRIMARY
 };
-var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, size = SelectInputSize.MEDIUM, options, value, placeholder = "Select options...", onChange, width, fillWidth, dropdownWidth, dropdownPlacement = DropdownPosition.BOTTOM_START, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, isIconTrailing, onOpenChange, onReset, pinnedOptions = [], maxDisplayItems = 3, renderSelectedText, renderSelectedContent, error, onSearch, debounceMs = 300 }) => {
+var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, size = InputSize.MEDIUM, options, value, placeholder = "Select options...", onChange, width, fillWidth, dropdownWidth, dropdownPlacement = DropdownPosition.BOTTOM_START, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, isIconTrailing, onOpenChange, onReset, pinnedOptions = [], maxDisplayItems = 3, renderSelectedText, renderSelectedContent, error, onSearch, debounceMs = 300 }) => {
 	const isSearchable = !!onSearch;
 	const [isHovered, setIsHovered] = useState(false);
 	const [searchTerm, setSearchTerm] = useState("");

package/dist/inputs/SelectInput.d.ts

@@ -1,16 +1,12 @@
 import { IconVariant } from "../icons/Icon";
 import { TextSize, TextVariant } from "../text/Text";
+import { InputSize } from "./Input";
 export declare enum SelectInputVariant {
     BASE = "BASE",
     PRIMARY = "PRIMARY",
     SECONDARY = "SECONDARY",
     TERTIARY = "TERTIARY"
 }
-export declare enum SelectInputSize {
-    SMALL = "SMALL",
-    MEDIUM = "MEDIUM",
-    LARGE = "LARGE"
-}
 export interface SelectInputOption {
     id: string;
     label: string;
@@ -26,7 +22,7 @@ export interface PinnedOption {
 export interface SelectInputProps {
     label?: string;
     variant?: SelectInputVariant;
-    size?: SelectInputSize;
+    size?: InputSize;
     options: SelectInputOption[];
     value?: SelectInputOption | null;
     placeholder?: string;
@@ -45,7 +41,7 @@ export interface SelectInputProps {
     debounceMs?: number;
 }
 export declare const SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP: Record<SelectInputVariant, IconVariant>;
-export declare const SELECT_INPUT_SIZE_TO_ICON_SIZE: Record<SelectInputSize, number>;
-export declare const SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP: Record<SelectInputSize, TextSize>;
+export declare const SELECT_INPUT_SIZE_TO_ICON_SIZE: Record<InputSize, number>;
+export declare const SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP: Record<InputSize, TextSize>;
 declare const SelectInput: ({ label, variant, size, options, value, placeholder, onChange, width, fillWidth, dropdownWidth, isDisabled, isRequired, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions, error, onSearch, debounceMs, }: SelectInputProps) => import("react").JSX.Element;
 export default SelectInput;

package/dist/inputs/SelectInput.js

@@ -6,7 +6,7 @@ import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import Spacing from "../containers/Spacing.js";
-import { InputLabel } from "./Input.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";
@@ -25,17 +25,11 @@ var SelectInputVariant = /* @__PURE__ */ function(SelectInputVariant) {
 	SelectInputVariant["TERTIARY"] = "TERTIARY";
 	return SelectInputVariant;
 }({});
-var SelectInputSize = /* @__PURE__ */ function(SelectInputSize) {
-	SelectInputSize["SMALL"] = "SMALL";
-	SelectInputSize["MEDIUM"] = "MEDIUM";
-	SelectInputSize["LARGE"] = "LARGE";
-	return SelectInputSize;
-}({});
 var _exp = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "0 6px").with("MEDIUM", () => "0 8px").with("LARGE", () => "0 10px").exhaustive();
+	return match($size).with(InputSize.SMALL, () => "0 6px").with(InputSize.MEDIUM, () => "0 8px").with(InputSize.LARGE, () => "0 10px").exhaustive();
 };
 var _exp2 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
+	return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
 };
 var _exp3 = () => ({ $fillWidth, $width }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
 var _exp4 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
@@ -63,14 +57,14 @@ var StyledSelectInput = withTheme(/*#__PURE__*/ styled("div")({
 	}
 }));
 var _exp9 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
+	return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
 };
 var _exp0 = () => ({ theme }) => theme.color.text.primary;
 var _exp1 = () => ({ theme, $size }) => {
-	return match($size).with("SMALL", () => theme.font.sans.size.body_sm).with("MEDIUM", () => theme.font.sans.size.body_md).with("LARGE", () => theme.font.sans.size.body_lg).exhaustive();
+	return match($size).with(InputSize.SMALL, () => theme.font.sans.size.body_sm).with(InputSize.MEDIUM, () => theme.font.sans.size.body_md).with(InputSize.LARGE, () => theme.font.sans.size.body_lg).exhaustive();
 };
 var _exp10 = () => ({ theme, $size }) => {
-	return match($size).with("SMALL", () => theme.font.sans.height.body_sm).with("MEDIUM", () => theme.font.sans.height.body_md).with("LARGE", () => theme.font.sans.height.body_lg).exhaustive();
+	return match($size).with(InputSize.SMALL, () => theme.font.sans.height.body_sm).with(InputSize.MEDIUM, () => theme.font.sans.height.body_md).with(InputSize.LARGE, () => theme.font.sans.height.body_lg).exhaustive();
 };
 var _exp11 = () => ({ theme }) => theme.font.sans.weight.medium;
 var _exp12 = () => ({ theme }) => theme.font.sans.family;
@@ -150,16 +144,16 @@ var SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP = {
 	["TERTIARY"]: IconVariant.PRIMARY
 };
 var SELECT_INPUT_SIZE_TO_ICON_SIZE = {
-	["SMALL"]: 12,
-	["MEDIUM"]: 14,
-	["LARGE"]: 16
+	[InputSize.SMALL]: 12,
+	[InputSize.MEDIUM]: 14,
+	[InputSize.LARGE]: 16
 };
 var SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
-	["SMALL"]: TextSize.BODY_MD,
-	["MEDIUM"]: TextSize.BODY_MD,
-	["LARGE"]: TextSize.BODY_MD
+	[InputSize.SMALL]: TextSize.BODY_MD,
+	[InputSize.MEDIUM]: TextSize.BODY_MD,
+	[InputSize.LARGE]: TextSize.BODY_MD
 };
-var SelectInput = ({ label, variant = "PRIMARY", size = "MEDIUM", options, value, placeholder = "Select an option...", onChange, width, fillWidth, dropdownWidth, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions = [], error, onSearch, debounceMs = 300 }) => {
+var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, options, value, placeholder = "Select an option...", onChange, width, fillWidth, dropdownWidth, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions = [], error, onSearch, debounceMs = 300 }) => {
 	const isSearchable = !!onSearch;
 	const [isHovered, setIsHovered] = useState(false);
 	const [searchTerm, setSearchTerm] = useState("");
@@ -525,4 +519,4 @@ var SelectInput = ({ label, variant = "PRIMARY", size = "MEDIUM", options, value
 	});
 };
 //#endregion
-export { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInputSize, SelectInputVariant, SelectInput as default };
+export { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInputVariant, SelectInput as default };