@galaxy-io/dls 1.0.3

package/dist/inputs/SliderInput.js

@@ -0,0 +1,172 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import Text from "../text/Text.js";
+import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
+import { InputLabel } from "./Input.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/inputs/SliderInput.tsx
+var _exp = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
+var _exp2 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
+var SliderWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "SliderWrapper",
+	class: "sbeizks",
+	propsAsIs: false,
+	vars: {
+		"sbeizks-0": [_exp()],
+		"sbeizks-1": [_exp2()]
+	}
+}));
+var _exp3 = () => ({ theme }) => theme.color.opacity.bw24Alt;
+var SliderTrack = withTheme(/*#__PURE__*/ styled("div")({
+	name: "SliderTrack",
+	class: "s42jcip",
+	propsAsIs: false,
+	vars: { "s42jcip-0": [_exp3()] }
+}));
+var _exp4 = () => ({ theme }) => theme.color.icon.primary;
+var SliderFill = withTheme(/*#__PURE__*/ styled("div")({
+	name: "SliderFill",
+	class: "s1b59sw7",
+	propsAsIs: false,
+	vars: { "s1b59sw7-0": [_exp4()] }
+}));
+var _exp5 = () => ({ $percentage }) => `calc(4px + ${$percentage}% - ${$percentage / 100 * 8}px)`;
+var _exp6 = () => ({ theme }) => theme.color.icon.primary;
+var _exp7 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "grab";
+var _exp8 = () => ({ $isDragging }) => $isDragging ? "none" : "left 0.1s ease-out, transform 0.1s ease-out";
+var _exp9 = () => ({ $isDisabled }) => $isDisabled ? "none" : "auto";
+var _exp0 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "grabbing";
+var _exp1 = () => ({ $isDisabled }) => $isDisabled ? "translate(-50%, -50%)" : "translate(-50%, -50%) scale(1.1)";
+var SliderHandle = withTheme(/*#__PURE__*/ styled("div")({
+	name: "SliderHandle",
+	class: "salrebx",
+	propsAsIs: false,
+	vars: {
+		"salrebx-0": [_exp5()],
+		"salrebx-1": [_exp6()],
+		"salrebx-2": [_exp7()],
+		"salrebx-3": [_exp8()],
+		"salrebx-4": [_exp9()],
+		"salrebx-5": [_exp0()],
+		"salrebx-6": [_exp1()]
+	}
+}));
+var HiddenInput = /*#__PURE__*/ styled("input")({
+	name: "HiddenInput",
+	class: "h1trli0w",
+	propsAsIs: false
+});
+var SliderInput = ({ label, labelTooltip, value, onChange, onInteractionStart, onInteractionEnd, min = 0, max = 100, step = 1, isDisabled = false, width, fillWidth }) => {
+	const [isDragging, setIsDragging] = useState(false);
+	const sliderRef = useRef(null);
+	const isInteractingRef = useRef(false);
+	const beginInteraction = useCallback(() => {
+		if (isDisabled || isInteractingRef.current) return;
+		isInteractingRef.current = true;
+		onInteractionStart?.();
+	}, [isDisabled, onInteractionStart]);
+	const endInteraction = useCallback(() => {
+		if (!isInteractingRef.current) return;
+		isInteractingRef.current = false;
+		onInteractionEnd?.();
+	}, [onInteractionEnd]);
+	useEffect(() => () => {
+		endInteraction();
+	}, [endInteraction]);
+	const percentage = max === min ? 0 : Math.max(0, Math.min(100, (value - min) / (max - min) * 100));
+	const handleChange = useCallback((newValue) => {
+		if (isDisabled) return;
+		onChange(Math.round(Math.max(min, Math.min(max, newValue)) / step) * step);
+	}, [
+		isDisabled,
+		min,
+		max,
+		step,
+		onChange
+	]);
+	const handleInputChange = useCallback((e) => {
+		handleChange(parseFloat(e.target.value));
+	}, [handleChange]);
+	const handleMouseDown = useCallback((e) => {
+		if (isDisabled) return;
+		beginInteraction();
+		setIsDragging(true);
+		const handleMouseMove = (moveEvent) => {
+			if (!sliderRef.current) return;
+			const rect = sliderRef.current.getBoundingClientRect();
+			const x = moveEvent.clientX - rect.left;
+			handleChange(min + Math.max(0, Math.min(100, x / rect.width * 100)) / 100 * (max - min));
+		};
+		const handleMouseUp = () => {
+			setIsDragging(false);
+			endInteraction();
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		};
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+		handleMouseMove(e.nativeEvent);
+	}, [
+		beginInteraction,
+		endInteraction,
+		isDisabled,
+		min,
+		max,
+		handleChange
+	]);
+	return /* @__PURE__ */ jsxs(FlexWrapper, {
+		direction: FlexDirection.COLUMN,
+		gap: 12,
+		width,
+		fillWidth,
+		children: [label && /* @__PURE__ */ jsxs(FlexWrapper, {
+			alignItems: AlignItems.CENTER,
+			justifyContent: JustifyContent.SPACE_BETWEEN,
+			fillWidth,
+			children: [/* @__PURE__ */ jsx(InputLabel, {
+				label,
+				labelTooltip
+			}), /* @__PURE__ */ jsx(Text, { children: value })]
+		}), /* @__PURE__ */ jsxs(SliderWrapper, {
+			ref: sliderRef,
+			$isDisabled: isDisabled,
+			onMouseDown: handleMouseDown,
+			children: [
+				/* @__PURE__ */ jsx(SliderTrack, {
+					$isDisabled: isDisabled,
+					children: /* @__PURE__ */ jsx(SliderFill, {
+						$percentage: percentage,
+						$isDisabled: isDisabled,
+						style: { width: `${percentage}%` }
+					})
+				}),
+				/* @__PURE__ */ jsx(SliderHandle, {
+					$percentage: percentage,
+					$isDisabled: isDisabled,
+					$isDragging: isDragging
+				}),
+				/* @__PURE__ */ jsx(HiddenInput, {
+					type: "range",
+					min,
+					max,
+					step,
+					value,
+					onChange: handleInputChange,
+					onMouseDown: beginInteraction,
+					onMouseUp: endInteraction,
+					onTouchStart: beginInteraction,
+					onTouchEnd: endInteraction,
+					onKeyDown: beginInteraction,
+					onKeyUp: endInteraction,
+					onBlur: endInteraction,
+					disabled: isDisabled,
+					"aria-label": label || "Slider"
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { SliderInput as default };

package/dist/inputs/TextAreaInput.d.ts

@@ -0,0 +1,40 @@
+export declare enum TextAreaSize {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM",
+    LARGE = "LARGE"
+}
+export declare enum TextAreaVariant {
+    TRANSPARENT = "TRANSPARENT",
+    BASE = "BASE",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY"
+}
+export interface TextAreaInputProps {
+    value?: string;
+    onChange: (value: string) => void;
+    variant?: TextAreaVariant;
+    size?: TextAreaSize;
+    lines?: number;
+    placeholder?: string;
+    label?: string;
+    labelTooltip?: string | React.ReactNode;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    min?: number;
+    max?: number;
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    width?: number | string;
+    height?: number | string;
+    fillWidth?: boolean;
+    fillHeight?: boolean;
+    noBorder?: boolean;
+    noPadding?: boolean;
+    isLoading?: boolean;
+}
+declare const TextAreaInput: import("react").ForwardRefExoticComponent<TextAreaInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default TextAreaInput;

package/dist/inputs/TextAreaInput.js

@@ -0,0 +1,238 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import TextShimmer from "../text/TextShimmer.js";
+import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
+import { InputLabel } from "./Input.js";
+/* empty css                        */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { forwardRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/inputs/TextAreaInput.tsx
+var TextAreaSize = /* @__PURE__ */ function(TextAreaSize) {
+	TextAreaSize["SMALL"] = "SMALL";
+	TextAreaSize["MEDIUM"] = "MEDIUM";
+	TextAreaSize["LARGE"] = "LARGE";
+	return TextAreaSize;
+}({});
+var TextAreaVariant = /* @__PURE__ */ function(TextAreaVariant) {
+	TextAreaVariant["TRANSPARENT"] = "TRANSPARENT";
+	TextAreaVariant["BASE"] = "BASE";
+	TextAreaVariant["PRIMARY"] = "PRIMARY";
+	TextAreaVariant["SECONDARY"] = "SECONDARY";
+	TextAreaVariant["TERTIARY"] = "TERTIARY";
+	return TextAreaVariant;
+}({});
+var _exp = () => ({ $lines, $size, theme, $height, $noPadding }) => {
+	if ($height) return "auto";
+	const lineHeight = match($size).with("SMALL", () => Number(theme.font.sans.height.body_sm.replace("px", ""))).with("MEDIUM", () => Number(theme.font.sans.height.body_md.replace("px", ""))).with("LARGE", () => Number(theme.font.sans.height.body_lg.replace("px", ""))).exhaustive();
+	if ($noPadding) return `${lineHeight * $lines}px`;
+	const padding = match($size).with("SMALL", () => 12).with("MEDIUM", () => 16).with("LARGE", () => 20).exhaustive();
+	return `${lineHeight * $lines + padding}px`;
+};
+var _exp2 = () => ({ $fillWidth, $width }) => {
+	if ($fillWidth) return "100%";
+	if ($width) return getCssSizeValue($width, "0");
+	return "auto";
+};
+var _exp3 = () => ({ $height, $fillHeight }) => {
+	if ($fillHeight) return "100%";
+	if ($height) return getCssSizeValue($height);
+	return "auto";
+};
+var _exp4 = () => ({ $fillHeight }) => $fillHeight ? "1" : "none";
+var _exp5 = () => ({ theme, $variant }) => match($variant).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 _exp6 = () => ({ theme, $variant, $error, $noBorder }) => {
+	if ($noBorder) return "none";
+	if ($error) return theme.color.border.error;
+	return match($variant).with("TRANSPARENT", () => theme.color.border.primary).with("BASE", () => theme.color.border.primary).with("PRIMARY", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.primary).with("TERTIARY", () => theme.color.border.primary).exhaustive();
+};
+var _exp7 = () => ({ theme }) => theme.color.text.primary;
+var _exp8 = () => ({ 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();
+};
+var _exp9 = () => ({ 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();
+};
+var _exp0 = () => ({ theme }) => theme.font.sans.weight.regular;
+var _exp1 = () => ({ theme }) => theme.font.sans.family;
+var _exp10 = () => ({ $size, $noPadding }) => {
+	if ($noPadding) return "0";
+	return match($size).with("SMALL", () => "6px").with("MEDIUM", () => "8px").with("LARGE", () => "10px").exhaustive();
+};
+var _exp11 = () => ({ theme }) => theme.color.border.primary;
+var _exp12 = () => ({ theme }) => theme.color.border.selected;
+var _exp13 = () => ({ theme }) => theme.color.text.disabled;
+var StyledTextArea = withTheme(/*#__PURE__*/ styled("textarea")({
+	name: "StyledTextArea",
+	class: "s1jhbbpd",
+	propsAsIs: false,
+	vars: {
+		"s1jhbbpd-0": [_exp()],
+		"s1jhbbpd-1": [_exp2()],
+		"s1jhbbpd-2": [_exp3()],
+		"s1jhbbpd-3": [_exp4()],
+		"s1jhbbpd-4": [_exp5()],
+		"s1jhbbpd-5": [_exp6()],
+		"s1jhbbpd-6": [_exp7()],
+		"s1jhbbpd-7": [_exp8()],
+		"s1jhbbpd-8": [_exp9()],
+		"s1jhbbpd-9": [_exp0()],
+		"s1jhbbpd-10": [_exp1()],
+		"s1jhbbpd-11": [_exp10()],
+		"s1jhbbpd-12": [_exp11()],
+		"s1jhbbpd-13": [_exp12()],
+		"s1jhbbpd-14": [_exp13()]
+	}
+}));
+var _exp14 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
+var _exp15 = () => ({ $fillHeight }) => $fillHeight ? "100%" : "auto";
+var _exp16 = () => ({ $fillHeight }) => $fillHeight ? "flex: 1;" : "";
+var TextAreaWrapper = /*#__PURE__*/ styled("div")({
+	name: "TextAreaWrapper",
+	class: "tu0hnok",
+	propsAsIs: false,
+	vars: {
+		"tu0hnok-0": [_exp14()],
+		"tu0hnok-1": [_exp15()],
+		"tu0hnok-2": [_exp16()]
+	}
+});
+var _exp17 = () => ({ $lines, $size, theme, $height, $noPadding }) => {
+	if ($height) return "auto";
+	const lineHeight = match($size).with("SMALL", () => Number(theme.font.sans.height.body_sm.replace("px", ""))).with("MEDIUM", () => Number(theme.font.sans.height.body_md.replace("px", ""))).with("LARGE", () => Number(theme.font.sans.height.body_lg.replace("px", ""))).exhaustive();
+	if ($noPadding) return `${lineHeight * $lines}px`;
+	const padding = match($size).with("SMALL", () => 12).with("MEDIUM", () => 16).with("LARGE", () => 20).exhaustive();
+	return `${lineHeight * $lines + padding}px`;
+};
+var _exp18 = () => ({ $fillWidth, $width }) => {
+	if ($fillWidth) return "100%";
+	if ($width) return getCssSizeValue($width, "0");
+	return "auto";
+};
+var _exp19 = () => ({ $height, $fillHeight }) => {
+	if ($fillHeight) return "100%";
+	if ($height) return getCssSizeValue($height);
+	return "auto";
+};
+var _exp20 = () => ({ $fillHeight }) => $fillHeight ? "1" : "none";
+var _exp21 = () => ({ theme, $variant }) => match($variant).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 _exp22 = () => ({ theme, $variant, $noBorder }) => {
+	if ($noBorder) return "transparent";
+	return match($variant).with("TRANSPARENT", () => theme.color.border.primary).with("BASE", () => theme.color.border.primary).with("PRIMARY", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.primary).with("TERTIARY", () => theme.color.border.primary).exhaustive();
+};
+var _exp23 = () => ({ $size, $noPadding }) => {
+	if ($noPadding) return "0";
+	return match($size).with("SMALL", () => "6px").with("MEDIUM", () => "8px").with("LARGE", () => "10px").exhaustive();
+};
+var LoadingContainer = withTheme(/*#__PURE__*/ styled("div")({
+	name: "LoadingContainer",
+	class: "l48iv0n",
+	propsAsIs: false,
+	vars: {
+		"l48iv0n-0": [_exp17()],
+		"l48iv0n-1": [_exp18()],
+		"l48iv0n-2": [_exp19()],
+		"l48iv0n-3": [_exp20()],
+		"l48iv0n-4": [_exp21()],
+		"l48iv0n-5": [_exp22()],
+		"l48iv0n-6": [_exp23()]
+	}
+}));
+var DEFAULT_STATE = { error: void 0 };
+var TEXTAREA_SIZE_TO_SHIMMER_HEIGHT_MAP = {
+	["SMALL"]: 12,
+	["MEDIUM"]: 14,
+	["LARGE"]: 16
+};
+var TextAreaInput = forwardRef(({ variant = "PRIMARY", size = "MEDIUM", lines = 3, value, min, max, placeholder, label, labelTooltip, error, required, disabled, autoFocus, onChange, onKeyDown, onBlur, onFocus, width, height, fillWidth, fillHeight, noBorder, noPadding, isLoading }, ref) => {
+	const [state, setState] = useState(DEFAULT_STATE);
+	const handleFocus = (e) => {
+		setState({
+			...state,
+			error: void 0
+		});
+		onFocus?.(e);
+	};
+	const handleBlur = (e) => {
+		if (value?.length && min && value.length < min) setState({
+			...state,
+			error: `Must be at least ${min} characters`
+		});
+		if (value?.length && max && value.length > max) setState({
+			...state,
+			error: `Must be less than ${max} characters`
+		});
+		onBlur?.(e);
+	};
+	const handleChange = (e) => {
+		onChange(e.target.value);
+	};
+	return /* @__PURE__ */ jsx(TextAreaWrapper, {
+		$fillHeight: fillHeight,
+		$fillWidth: fillWidth,
+		children: /* @__PURE__ */ jsxs(FlexWrapper, {
+			direction: FlexDirection.COLUMN,
+			gap: 4,
+			fillWidth,
+			fillHeight,
+			children: [
+				label && /* @__PURE__ */ jsx(InputLabel, {
+					label,
+					labelTooltip,
+					isRequired: required
+				}),
+				isLoading ? /* @__PURE__ */ jsxs(LoadingContainer, {
+					$variant: variant,
+					$size: size,
+					$lines: lines,
+					$width: width,
+					$height: height,
+					$fillWidth: fillWidth,
+					$fillHeight: fillHeight,
+					$noBorder: noBorder,
+					$noPadding: noPadding,
+					children: [/* @__PURE__ */ jsx(TextShimmer, {
+						height: TEXTAREA_SIZE_TO_SHIMMER_HEIGHT_MAP[size],
+						width: "100%"
+					}), /* @__PURE__ */ jsx(TextShimmer, {
+						height: TEXTAREA_SIZE_TO_SHIMMER_HEIGHT_MAP[size],
+						width: "80%"
+					})]
+				}) : /* @__PURE__ */ jsx(StyledTextArea, {
+					ref,
+					placeholder,
+					value: value ?? "",
+					required,
+					disabled,
+					onChange: handleChange,
+					autoComplete: "off",
+					autoCorrect: "off",
+					autoFocus,
+					onFocus: handleFocus,
+					onBlur: handleBlur,
+					onKeyDown,
+					$variant: variant,
+					$size: size,
+					$width: width,
+					$height: height,
+					$fillWidth: fillWidth,
+					$fillHeight: fillHeight,
+					$error: !!(state.error || error),
+					$lines: lines,
+					$noBorder: noBorder,
+					$noPadding: noPadding
+				}),
+				(state.error || error) && /* @__PURE__ */ jsx(Text, {
+					variant: TextVariant.ERROR,
+					size: TextSize.BODY_SM,
+					children: state.error || error
+				})
+			]
+		})
+	});
+});
+TextAreaInput.displayName = "TextAreaInput";
+//#endregion
+export { TextAreaSize, TextAreaVariant, TextAreaInput as default };

package/dist/inputs/TextInput.d.ts

@@ -0,0 +1,4 @@
+import { type InputProps } from "./Input";
+type TextInputProps = Omit<InputProps<string>, "type" | "parse">;
+declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default TextInput;

package/dist/inputs/TextInput.js

@@ -0,0 +1,53 @@
+import Input from "./Input.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/inputs/TextInput.tsx
+var DEFAULT_STATE = { error: "" };
+var TextInput = forwardRef(({ size, value, min, max, placeholder, label, labelTooltip, leading, trailing, error, isRequired, isDisabled, autoFocus, onChange, onKeyDown, onBlur, fillWidth, width, isMonospace }, ref) => {
+	const [state, setState] = useState(DEFAULT_STATE);
+	const handleFocus = () => {
+		setState({
+			...state,
+			error: void 0
+		});
+	};
+	const handleBlur = (e) => {
+		if (value?.length && min && value.length < min) setState({
+			...state,
+			error: `Must be at least ${min} characters`
+		});
+		if (value?.length && max && value.length > max) setState({
+			...state,
+			error: `Must be less than ${max} characters`
+		});
+		onBlur?.(e);
+	};
+	return /* @__PURE__ */ jsx(Input, {
+		parse: String,
+		onChange,
+		size,
+		ref,
+		type: "text",
+		value,
+		min,
+		max,
+		placeholder,
+		label,
+		labelTooltip,
+		leading,
+		trailing,
+		autoFocus,
+		error: state.error || error,
+		isRequired,
+		isDisabled,
+		onKeyDown,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		fillWidth,
+		width,
+		isMonospace
+	});
+});
+TextInput.displayName = "TextInput";
+//#endregion
+export { TextInput as default };

package/dist/inputs/ToggleInput.d.ts

@@ -0,0 +1,11 @@
+export interface ToggleInputProps {
+    label?: string;
+    labelTooltip?: string | React.ReactNode;
+    value: boolean;
+    onChange: (value: boolean) => void;
+    isDisabled?: boolean;
+    width?: number | string;
+    fillWidth?: boolean;
+}
+declare const ToggleInput: ({ label, labelTooltip, value, onChange, isDisabled, width, fillWidth, }: ToggleInputProps) => import("react").JSX.Element;
+export default ToggleInput;

package/dist/inputs/ToggleInput.js

@@ -0,0 +1,100 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import FlexWrapper, { AlignItems, JustifyContent } from "../containers/FlexWrapper.js";
+import { InputLabel } from "./Input.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/inputs/ToggleInput.tsx
+var _exp = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
+var _exp2 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
+var ToggleWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ToggleWrapper",
+	class: "t1t8zlu",
+	propsAsIs: false,
+	vars: {
+		"t1t8zlu-0": [_exp()],
+		"t1t8zlu-1": [_exp2()]
+	}
+}));
+var _exp3 = () => ({ theme, $isChecked }) => $isChecked ? theme.color.icon.primary : theme.color.opacity.bw24Alt;
+var _exp4 = () => ({ theme }) => theme.color.border.primary;
+var ToggleTrack = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ToggleTrack",
+	class: "t1br7yd",
+	propsAsIs: false,
+	vars: {
+		"t1br7yd-0": [_exp3()],
+		"t1br7yd-1": [_exp4()]
+	}
+}));
+var _exp5 = () => ({ $isChecked }) => $isChecked ? "calc(100% - 14px - 1.5px)" : "1.5px";
+var _exp6 = () => ({ theme }) => theme.color.background.base;
+var ToggleThumb = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ToggleThumb",
+	class: "t1xwadc7",
+	propsAsIs: false,
+	vars: {
+		"t1xwadc7-0": [_exp5()],
+		"t1xwadc7-1": [_exp6()]
+	}
+}));
+var HiddenInput = /*#__PURE__*/ styled("input")({
+	name: "HiddenInput",
+	class: "h1smouvb",
+	propsAsIs: false
+});
+var ToggleInput = ({ label, labelTooltip, value, onChange, isDisabled = false, width, fillWidth }) => {
+	const handleClick = useCallback(() => {
+		if (!isDisabled) onChange(!value);
+	}, [
+		isDisabled,
+		value,
+		onChange
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (!isDisabled && (e.key === "Enter" || e.key === " ")) {
+			e.preventDefault();
+			onChange(!value);
+		}
+	}, [
+		isDisabled,
+		value,
+		onChange
+	]);
+	return /* @__PURE__ */ jsxs(FlexWrapper, {
+		width,
+		fillWidth,
+		alignItems: AlignItems.CENTER,
+		justifyContent: fillWidth ? JustifyContent.SPACE_BETWEEN : JustifyContent.START,
+		gap: fillWidth ? 0 : 6,
+		children: [label && /* @__PURE__ */ jsx(InputLabel, {
+			label,
+			labelTooltip
+		}), /* @__PURE__ */ jsxs(ToggleWrapper, {
+			$isDisabled: isDisabled,
+			onClick: handleClick,
+			onKeyDown: handleKeyDown,
+			role: "switch",
+			"aria-checked": value,
+			"aria-disabled": isDisabled,
+			tabIndex: isDisabled ? -1 : 0,
+			children: [/* @__PURE__ */ jsx(ToggleTrack, {
+				$isChecked: value,
+				$isDisabled: isDisabled,
+				children: /* @__PURE__ */ jsx(ToggleThumb, {
+					$isChecked: value,
+					$isDisabled: isDisabled
+				})
+			}), /* @__PURE__ */ jsx(HiddenInput, {
+				type: "checkbox",
+				checked: value,
+				onChange: () => {},
+				disabled: isDisabled,
+				"aria-label": label || "Toggle"
+			})]
+		})]
+	});
+};
+//#endregion
+export { ToggleInput as default };

package/dist/inputs/hooks.d.ts

@@ -0,0 +1,10 @@
+export { useElementWidth } from "../hooks/useElementWidth";
+interface ControlledOpenStateProps {
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+export declare const useControlledOpenState: ({ isOpen: controlledIsOpen, onOpenChange, }: ControlledOpenStateProps) => {
+    isOpen: boolean;
+    setOpen: (nextIsOpen: boolean) => void;
+};
+export declare const useDebouncedValue: <T>(value: T, delayMs: number, enabled?: boolean) => T;

package/dist/inputs/hooks.js

@@ -0,0 +1,22 @@
+import { useElementWidth } from "../hooks/useElementWidth.js";
+import { useCallback, useState } from "react";
+import { useDebounce } from "react-use";
+//#region src/inputs/hooks.ts
+var useControlledOpenState = ({ isOpen: controlledIsOpen, onOpenChange }) => {
+	const [internalIsOpen, setInternalIsOpen] = useState(false);
+	const isControlled = controlledIsOpen !== void 0;
+	return {
+		isOpen: isControlled ? controlledIsOpen : internalIsOpen,
+		setOpen: useCallback((nextIsOpen) => {
+			if (!isControlled) setInternalIsOpen(nextIsOpen);
+			onOpenChange?.(nextIsOpen);
+		}, [isControlled, onOpenChange])
+	};
+};
+var useDebouncedValue = (value, delayMs, enabled = true) => {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+	useDebounce(() => setDebouncedValue(value), enabled ? delayMs : 0, [value, enabled]);
+	return debouncedValue;
+};
+//#endregion
+export { useControlledOpenState, useDebouncedValue, useElementWidth };

package/dist/links/Link.d.ts

@@ -0,0 +1,2 @@
+declare const Link: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export default Link;

package/dist/links/Link.js

@@ -0,0 +1,10 @@
+/* empty css               */
+import { styled } from "@linaria/react";
+//#region src/links/Link.tsx
+var Link = /*#__PURE__*/ styled("div")({
+	name: "Link",
+	class: "l1o22m4p",
+	propsAsIs: false
+});
+//#endregion
+export { Link as default };

package/dist/lists/BulletedList.d.ts

@@ -0,0 +1,11 @@
+export declare enum BulletedListSize {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM",
+    LARGE = "LARGE"
+}
+export interface BulletedListProps {
+    items: string[];
+    size?: BulletedListSize;
+}
+declare const BulletedList: ({ items, size }: BulletedListProps) => import("react").JSX.Element;
+export default BulletedList;