@galaxy-io/dls 1.3.1 → 1.3.3

package/dist/{metrics → charts}/ProgressBar.js

@@ -4,7 +4,7 @@ import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/metrics/ProgressBar.tsx
+//#region src/charts/ProgressBar.tsx
 var ProgressBarVariant = /* @__PURE__ */ function(ProgressBarVariant) {
 	ProgressBarVariant["GALAXY"] = "GALAXY";
 	ProgressBarVariant["PRIMARY"] = "PRIMARY";
@@ -17,12 +17,12 @@ var _exp2 = () => ({ theme }) => theme.color.background.tertiary;
 var _exp3 = () => ({ theme }) => theme.color.border.primary;
 var StyledProgressBar = withTheme(/*#__PURE__*/ styled("div")({
 	name: "StyledProgressBar",
-	class: "sjen46y",
+	class: "s1yc7aow",
 	propsAsIs: false,
 	vars: {
-		"sjen46y-0": [_exp()],
-		"sjen46y-1": [_exp2()],
-		"sjen46y-2": [_exp3()]
+		"s1yc7aow-0": [_exp()],
+		"s1yc7aow-1": [_exp2()],
+		"s1yc7aow-2": [_exp3()]
 	}
 }));
 var _exp4 = () => ({ $width }) => `${$width}%`;
@@ -32,14 +32,14 @@ var _exp9 = () => ({ theme, $variant }) => match($variant).returnType().with("GA
 var _exp0 = () => ({ $noAnimation }) => $noAnimation ? "shimmer 2.5s infinite" : "shimmer 2.5s infinite, pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite";
 var ProgressBarFill = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ProgressBarFill",
-	class: "pma25az",
+	class: "p1sc05jm",
 	propsAsIs: false,
 	vars: {
-		"pma25az-0": [_exp4()],
-		"pma25az-1": [_exp9()],
-		"pma25az-2": [_exp8()],
-		"pma25az-3": [_exp7()],
-		"pma25az-4": [_exp0()]
+		"p1sc05jm-0": [_exp4()],
+		"p1sc05jm-1": [_exp9()],
+		"p1sc05jm-2": [_exp8()],
+		"p1sc05jm-3": [_exp7()],
+		"p1sc05jm-4": [_exp0()]
 	}
 }));
 var ProgressBar = ({ percentage, variant = "PRIMARY", height = 4, noSliverOnZero = false, noAnimation = false }) => {

package/dist/charts/StatChart.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export declare enum StatChartVariant {
+    BASE = "BASE",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY"
+}
+interface StatChartProps {
+    label: string;
+    value: ReactNode;
+    variant?: StatChartVariant;
+    noBorder?: boolean;
+}
+declare const StatChart: ({ label, value, variant, noBorder, }: StatChartProps) => import("react").JSX.Element;
+export default StatChart;

package/dist/{metrics/MetricItem.js → charts/StatChart.js}

@@ -1,31 +1,31 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
 import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
-/* empty css                     */
+/* empty css                    */
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/metrics/MetricItem.tsx
-var MetricItemVariant = /* @__PURE__ */ function(MetricItemVariant) {
-	MetricItemVariant["BASE"] = "BASE";
-	MetricItemVariant["PRIMARY"] = "PRIMARY";
-	MetricItemVariant["SECONDARY"] = "SECONDARY";
-	MetricItemVariant["TERTIARY"] = "TERTIARY";
-	return MetricItemVariant;
+//#region src/charts/StatChart.tsx
+var StatChartVariant = /* @__PURE__ */ function(StatChartVariant) {
+	StatChartVariant["BASE"] = "BASE";
+	StatChartVariant["PRIMARY"] = "PRIMARY";
+	StatChartVariant["SECONDARY"] = "SECONDARY";
+	StatChartVariant["TERTIARY"] = "TERTIARY";
+	return StatChartVariant;
 }({});
 var _exp = () => ({ theme, $variant }) => match($variant).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 _exp2 = () => ({ theme, $noBorder }) => $noBorder ? "transparent" : theme.color.border.primary;
-var MetricItemWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "MetricItemWrapper",
-	class: "mv8otd",
+var StatChartWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "StatChartWrapper",
+	class: "slaxlp8",
 	propsAsIs: false,
 	vars: {
-		"mv8otd-0": [_exp()],
-		"mv8otd-1": [_exp2()]
+		"slaxlp8-0": [_exp()],
+		"slaxlp8-1": [_exp2()]
 	}
 }));
-var MetricItem = ({ label, value, variant = "PRIMARY", noBorder }) => {
-	return /* @__PURE__ */ jsx(MetricItemWrapper, {
+var StatChart = ({ label, value, variant = "PRIMARY", noBorder }) => {
+	return /* @__PURE__ */ jsx(StatChartWrapper, {
 		$variant: variant,
 		$noBorder: noBorder,
 		children: /* @__PURE__ */ jsxs(FlexWrapper, {
@@ -50,4 +50,4 @@ var MetricItem = ({ label, value, variant = "PRIMARY", noBorder }) => {
 	});
 };
 //#endregion
-export { MetricItemVariant, MetricItem as default };
+export { StatChartVariant, StatChart as default };

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 };

package/dist/styles.css

@@ -46,6 +46,21 @@
 .cjirv6a{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;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;border-radius:2px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.cjirv6a[data-state="muted"]{opacity:0.1;}.cjirv6a[data-state="faded"]{opacity:0.04;}@media (prefers-reduced-motion: reduce){.cjirv6a{-webkit-transition:none;transition:none;}}.cjirv6a:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
 .c1armna5{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;gap:6px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c1armna5[data-state="muted"]{opacity:0.1;}.c1armna5[data-state="faded"]{opacity:0.04;}@media (prefers-reduced-motion: reduce){.c1armna5{-webkit-transition:none;transition:none;}}
 .cmbdg2q{width:var(--cmbdg2q-0);height:var(--cmbdg2q-0);border-radius:50%;background-color:var(--cmbdg2q-1);}
+.s1yc7aow{position:relative;height:var(--s1yc7aow-0);width:100%;background-color:var(--s1yc7aow-1);border:0.5px solid var(--s1yc7aow-2);border-radius:4px;overflow:hidden;}
+.p1sc05jm{position:absolute;top:0;left:0;height:100%;width:var(--p1sc05jm-0);background:linear-gradient(
+    90deg,
+    var(--p1sc05jm-1)
+      0%,
+    var(--p1sc05jm-2)
+      20%,
+    var(--p1sc05jm-3)
+      50%,
+    var(--p1sc05jm-2)
+      80%,
+    var(--p1sc05jm-1)
+      100%
+  );-webkit-background-size:200% 100%;background-size:200% 100%;-webkit-animation:var(--p1sc05jm-4);animation:var(--p1sc05jm-4);-webkit-transition:width 0.075s ease-in-out;transition:width 0.075s ease-in-out;}@-webkit-keyframes shimmer-p1sc05jm{0%{-webkit-background-position:150% 0;background-position:150% 0;}100%{-webkit-background-position:-250% 0;background-position:-250% 0;}}@keyframes shimmer-p1sc05jm{0%{-webkit-background-position:150% 0;background-position:150% 0;}100%{-webkit-background-position:-250% 0;background-position:-250% 0;}}@-webkit-keyframes pulse-p1sc05jm{0%,100%{opacity:0.9;}50%{opacity:0.6;}}@keyframes pulse-p1sc05jm{0%,100%{opacity:0.9;}50%{opacity:0.6;}}
+.slaxlp8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;min-width:140px;background-color:var(--slaxlp8-0);padding:12px 16px;border:0.5px solid var(--slaxlp8-1);border-radius:5px;}
 .shdcix9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;gap:4px;-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;box-sizing:border-box;min-width:16px;cursor:var(--shdcix9-0);-webkit-transition:border-color 0.1s ease-out;transition:border-color 0.1s ease-out;height:var(--shdcix9-1);padding:var(--shdcix9-2);background-color:var(--shdcix9-3);border:0.5px solid var(--shdcix9-4);border-radius:var(--shdcix9-5);}
 .szfsuud{margin-left:0.5px;}.szfsuud>span{display:inline-block;-webkit-animation:ellipsisPulse-szfsuud var(--szfsuud-0) infinite ease-in-out both;animation:ellipsisPulse-szfsuud var(--szfsuud-0) infinite ease-in-out both;-webkit-animation-play-state:var(--szfsuud-1);animation-play-state:var(--szfsuud-1);}.szfsuud>span:nth-child(1){-webkit-animation-delay:0s;animation-delay:0s;}.szfsuud>span:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}.szfsuud>span:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes ellipsisPulse-szfsuud{0%,80%,100%{opacity:0.5;}40%{opacity:1;}}@keyframes ellipsisPulse-szfsuud{0%,80%,100%{opacity:0.5;}40%{opacity:1;}}
 .s1p67zkf{display:inline-block;background:linear-gradient(
@@ -125,21 +140,6 @@
 .l1o22m4p{height:auto;}
 .s1o45025{margin:0;padding-left:8px;list-style:none;}.s1o45025 li{position:relative;padding-left:16px;margin:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.s1o45025 li::before{content:"•";position:absolute;left:0;top:0;color:var(--s1o45025-0);font-weight:var(--s1o45025-1);line-height:inherit;}
 
-.mv8otd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;min-width:140px;background-color:var(--mv8otd-0);padding:12px 16px;border:0.5px solid var(--mv8otd-1);border-radius:5px;}
-.sjen46y{position:relative;height:var(--sjen46y-0);width:100%;background-color:var(--sjen46y-1);border:0.5px solid var(--sjen46y-2);border-radius:4px;overflow:hidden;}
-.pma25az{position:absolute;top:0;left:0;height:100%;width:var(--pma25az-0);background:linear-gradient(
-    90deg,
-    var(--pma25az-1)
-      0%,
-    var(--pma25az-2)
-      20%,
-    var(--pma25az-3)
-      50%,
-    var(--pma25az-2)
-      80%,
-    var(--pma25az-1)
-      100%
-  );-webkit-background-size:200% 100%;background-size:200% 100%;-webkit-animation:var(--pma25az-4);animation:var(--pma25az-4);-webkit-transition:width 0.075s ease-in-out;transition:width 0.075s ease-in-out;}@-webkit-keyframes shimmer-pma25az{0%{-webkit-background-position:150% 0;background-position:150% 0;}100%{-webkit-background-position:-250% 0;background-position:-250% 0;}}@keyframes shimmer-pma25az{0%{-webkit-background-position:150% 0;background-position:150% 0;}100%{-webkit-background-position:-250% 0;background-position:-250% 0;}}@-webkit-keyframes pulse-pma25az{0%,100%{opacity:0.9;}50%{opacity:0.6;}}@keyframes pulse-pma25az{0%,100%{opacity:0.9;}50%{opacity:0.6;}}
 .sepkv8n{position:fixed;inset:0;opacity:var(--sepkv8n-0);visibility:var(--sepkv8n-1);pointer-events:none;}
 .m1l9qfn{position:absolute;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;inset:0;pointer-events:none;}
 .m1jgo9vf{position:relative;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;pointer-events:auto;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",
@@ -99,10 +99,6 @@
       "types": "./dist/lists/*.d.ts",
       "import": "./dist/lists/*.js"
     },
-    "./metrics/*": {
-      "types": "./dist/metrics/*.d.ts",
-      "import": "./dist/metrics/*.js"
-    },
     "./modal/*": {
       "types": "./dist/modal/*.d.ts",
       "import": "./dist/modal/*.js"

package/dist/metrics/MetricItem.d.ts

@@ -1,15 +0,0 @@
-import type { ReactNode } from "react";
-export declare enum MetricItemVariant {
-    BASE = "BASE",
-    PRIMARY = "PRIMARY",
-    SECONDARY = "SECONDARY",
-    TERTIARY = "TERTIARY"
-}
-interface MetricItemProps {
-    label: string;
-    value: ReactNode;
-    variant?: MetricItemVariant;
-    noBorder?: boolean;
-}
-declare const MetricItem: ({ label, value, variant, noBorder, }: MetricItemProps) => import("react").JSX.Element;
-export default MetricItem;