@galaxy-io/dls 1.0.3

package/dist/avatar/Avatar.d.ts

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

package/dist/avatar/Avatar.js

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

package/dist/avatar/AvatarEmpty.d.ts

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

package/dist/avatar/AvatarEmpty.js

@@ -0,0 +1,43 @@
+import { GalaxyTheme } from "../theme/constants.js";
+import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
+import { getDarkerHexColor, getLighterHexColor, getOpaqueHexColor } from "../utils/colors.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/avatar/AvatarEmpty.tsx
+var _exp2 = () => ({ $size }) => `${$size}px`;
+var _exp3 = () => ({ theme, $hex, $galaxyTheme }) => {
+	const isDark = $galaxyTheme === GalaxyTheme.DARK;
+	const base = $hex ? $hex : isDark ? theme.color.border.tertiary : getDarkerHexColor(theme.color.border.tertiary, 25);
+	const accent = $hex ? getLighterHexColor($hex, isDark ? 120 : 130) : isDark ? getLighterHexColor(theme.color.border.tertiary, 80) : getLighterHexColor(theme.color.border.tertiary, 55);
+	const galaxy = theme.color.background.galaxy;
+	const galaxyRing = getOpaqueHexColor(galaxy, .22);
+	const galaxyRingSoft = getOpaqueHexColor(galaxy, .08);
+	return `
+      radial-gradient(circle at 50% 50%, transparent 28%, ${galaxyRingSoft} 45%, ${galaxyRing} 62%, ${galaxyRing} 85%, ${galaxyRingSoft} 96%, transparent 100%),
+      radial-gradient(ellipse 90% 40% at 30% 25%, ${accent} 0%, transparent 55%),
+      radial-gradient(ellipse 85% 35% at 75% 65%, ${accent} 0%, transparent 50%),
+      radial-gradient(ellipse 70% 50% at 55% 80%, ${base} 0%, transparent 45%),
+      radial-gradient(ellipse 80% 45% at 20% 70%, ${base} 0%, transparent 50%),
+      radial-gradient(ellipse 100% 60% at 50% 50%, ${base} 10%, ${accent} 100%)
+    `;
+};
+var StyledAvatarEmpty = withTheme(/*#__PURE__*/ styled("div")({
+	name: "StyledAvatarEmpty",
+	class: "s3y5dk3",
+	propsAsIs: false,
+	vars: {
+		"s3y5dk3-0": [_exp2()],
+		"s3y5dk3-1": [_exp3()]
+	}
+}));
+var AvatarEmpty = ({ size = 16, hex }) => {
+	const { galaxyTheme } = useGalaxyTheme();
+	return /* @__PURE__ */ jsx(StyledAvatarEmpty, {
+		$size: size,
+		$hex: hex,
+		$galaxyTheme: galaxyTheme
+	});
+};
+//#endregion
+export { StyledAvatarEmpty, AvatarEmpty as default };

package/dist/avatar/AvatarShimmer.d.ts

@@ -0,0 +1,28 @@
+export interface AvatarShimmerProps {
+    size?: number;
+}
+export declare const StyledAvatarShimmer: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $size?: number;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement> | "as" | "$size"> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $size?: number;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $size?: number;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+declare const AvatarShimmer: ({ size }: AvatarShimmerProps) => import("react").JSX.Element;
+export default AvatarShimmer;

package/dist/avatar/AvatarShimmer.js

@@ -0,0 +1,21 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+/* empty css                        */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/avatar/AvatarShimmer.tsx
+var _exp = () => ({ theme }) => theme.color.border.primary;
+var _exp3 = () => ({ $size }) => $size ?? 16;
+var StyledAvatarShimmer = withTheme(/*#__PURE__*/ styled("div")({
+	name: "StyledAvatarShimmer",
+	class: "s1o6ak6r",
+	propsAsIs: false,
+	vars: {
+		"s1o6ak6r-0": [_exp()],
+		"s1o6ak6r-1": [_exp3(), "px"]
+	}
+}));
+var AvatarShimmer = ({ size }) => {
+	return /* @__PURE__ */ jsx(StyledAvatarShimmer, { $size: size });
+};
+//#endregion
+export { StyledAvatarShimmer, AvatarShimmer as default };

package/dist/avatar/GalaxyAvatar.d.ts

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

package/dist/avatar/GalaxyAvatar.js

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

package/dist/avatar/types.d.ts

@@ -0,0 +1,5 @@
+export declare enum AvatarSize {
+    SMALL = "h-[16px] w-[16px]",
+    MEDIUM = "h-[24px] w-[24px]",
+    LARGE = "h-[32px] w-[32px]"
+}

package/dist/avatar/types.js

@@ -0,0 +1,9 @@
+//#region src/avatar/types.ts
+var AvatarSize = /* @__PURE__ */ function(AvatarSize) {
+	AvatarSize["SMALL"] = "h-[16px] w-[16px]";
+	AvatarSize["MEDIUM"] = "h-[24px] w-[24px]";
+	AvatarSize["LARGE"] = "h-[32px] w-[32px]";
+	return AvatarSize;
+}({});
+//#endregion
+export { AvatarSize };

package/dist/backgrounds/CellGridBackground.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import { ThemeBackgroundColor } from "../theme/types";
+interface CellGridBackgroundProps {
+    cellSize?: number;
+    strokeWidth?: number;
+    lineColor?: string;
+    backgroundColor?: ThemeBackgroundColor[keyof ThemeBackgroundColor];
+    lineOpacity?: number;
+    fillContainer?: boolean;
+    children?: ReactNode;
+}
+declare const CellGridBackground: ({ cellSize, strokeWidth, lineColor, backgroundColor, lineOpacity, fillContainer, children, }: CellGridBackgroundProps) => import("react").JSX.Element;
+export default CellGridBackground;

package/dist/backgrounds/CellGridBackground.js

@@ -0,0 +1,39 @@
+import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
+/* empty css                             */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/backgrounds/CellGridBackground.tsx
+var _exp2 = () => ({ $fillContainer }) => $fillContainer ? "100%" : "auto";
+var _exp3 = () => ({ $backgroundColor }) => $backgroundColor;
+var _exp4 = () => ({ $backgroundImage }) => $backgroundImage;
+var _exp5 = () => ({ $backgroundSize }) => $backgroundSize;
+var StyledCellGridBackground = /*#__PURE__*/ styled("div")({
+	name: "StyledCellGridBackground",
+	class: "s3lwr7s",
+	propsAsIs: false,
+	vars: {
+		"s3lwr7s-0": [_exp2()],
+		"s3lwr7s-1": [_exp3()],
+		"s3lwr7s-2": [_exp4()],
+		"s3lwr7s-3": [_exp5()]
+	}
+});
+var generateCellSvg = (cellSize, strokeWidth, color, opacity) => {
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${cellSize}" height="${cellSize}" viewBox="0 0 ${cellSize} ${cellSize}">
+    <line x1="0" y1="0" x2="${cellSize}" y2="0" stroke="${color}" stroke-width="${strokeWidth}" opacity="${opacity}"/>
+    <line x1="0" y1="0" x2="0" y2="${cellSize}" stroke="${color}" stroke-width="${strokeWidth}" opacity="${opacity}"/>
+  </svg>`;
+	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+};
+var CellGridBackground = ({ cellSize = 24, strokeWidth = 1, lineColor, backgroundColor, lineOpacity = .5, fillContainer = true, children }) => {
+	const { theme } = useGalaxyTheme();
+	return /* @__PURE__ */ jsx(StyledCellGridBackground, {
+		$fillContainer: fillContainer,
+		$backgroundColor: backgroundColor ?? theme.color.background.base,
+		$backgroundImage: generateCellSvg(cellSize, strokeWidth, lineColor ?? theme.color.border.primary, lineOpacity),
+		$backgroundSize: `${cellSize}px ${cellSize}px`,
+		children
+	});
+};
+//#endregion
+export { CellGridBackground as default };

package/dist/backgrounds/CrossGridBackground.d.ts

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from "react";
+import { ThemeBackgroundColor } from "../theme/types";
+interface CrossGridBackgroundProps {
+    crossSize?: number;
+    spacing?: number;
+    strokeWidth?: number;
+    crossColor?: string;
+    backgroundColor?: ThemeBackgroundColor[keyof ThemeBackgroundColor];
+    crossOpacity?: number;
+    fillContainer?: boolean;
+    borderRadius?: string | number;
+}
+declare const CrossGridBackground: ({ crossSize, spacing, strokeWidth, crossColor, backgroundColor, crossOpacity, fillContainer, borderRadius, children, }: PropsWithChildren<CrossGridBackgroundProps>) => import("react").JSX.Element;
+export default CrossGridBackground;

package/dist/backgrounds/CrossGridBackground.js

@@ -0,0 +1,45 @@
+import { useGalaxyTheme } 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/backgrounds/CrossGridBackground.tsx
+var _exp2 = () => ({ $fillContainer }) => $fillContainer ? "100%" : "auto";
+var _exp3 = () => ({ $backgroundColor }) => $backgroundColor;
+var _exp4 = () => ({ $backgroundImage }) => $backgroundImage;
+var _exp5 = () => ({ $backgroundSize }) => $backgroundSize;
+var _exp6 = () => ({ $borderRadius }) => $borderRadius === void 0 ? 0 : getCssSizeValue($borderRadius);
+var StyledCrossGridBackground = /*#__PURE__*/ styled("div")({
+	name: "StyledCrossGridBackground",
+	class: "siq7g1q",
+	propsAsIs: false,
+	vars: {
+		"siq7g1q-0": [_exp2()],
+		"siq7g1q-1": [_exp3()],
+		"siq7g1q-2": [_exp4()],
+		"siq7g1q-3": [_exp5()],
+		"siq7g1q-4": [_exp6()]
+	}
+});
+var generateCrossSvg = (crossSize, spacing, strokeWidth, color, opacity) => {
+	const center = spacing / 2;
+	const halfCross = crossSize / 2;
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${spacing}" height="${spacing}" viewBox="0 0 ${spacing} ${spacing}">
+    <line x1="${center}" y1="${center - halfCross}" x2="${center}" y2="${center + halfCross}" stroke="${color}" stroke-width="${strokeWidth}" opacity="${opacity}"/>
+    <line x1="${center - halfCross}" y1="${center}" x2="${center + halfCross}" y2="${center}" stroke="${color}" stroke-width="${strokeWidth}" opacity="${opacity}"/>
+  </svg>`;
+	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+};
+var CrossGridBackground = ({ crossSize = 8, spacing = 24, strokeWidth = 1, crossColor, backgroundColor, crossOpacity = .5, fillContainer = true, borderRadius, children }) => {
+	const { theme } = useGalaxyTheme();
+	return /* @__PURE__ */ jsx(StyledCrossGridBackground, {
+		$fillContainer: fillContainer,
+		$backgroundColor: backgroundColor ?? theme.color.background.base,
+		$backgroundImage: generateCrossSvg(crossSize, spacing, strokeWidth, crossColor ?? theme.color.border.primary, crossOpacity),
+		$backgroundSize: `${spacing}px ${spacing}px`,
+		$borderRadius: borderRadius,
+		children
+	});
+};
+//#endregion
+export { CrossGridBackground as default };

package/dist/backgrounds/DotGridBackground.d.ts

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from "react";
+import { ThemeBackgroundColor } from "../theme/types";
+interface DotGridBackgroundProps {
+    dotSize?: number;
+    spacing?: number;
+    dotColor?: string;
+    backgroundColor?: ThemeBackgroundColor[keyof ThemeBackgroundColor];
+    dotOpacity?: number;
+    fillContainer?: boolean;
+    borderRadius?: string | number;
+}
+declare const DotGridBackground: ({ dotSize, spacing, dotColor, backgroundColor, dotOpacity, fillContainer, borderRadius, children, }: PropsWithChildren<DotGridBackgroundProps>) => import("react").JSX.Element;
+export default DotGridBackground;

package/dist/backgrounds/DotGridBackground.js

@@ -0,0 +1,43 @@
+import { useGalaxyTheme } 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/backgrounds/DotGridBackground.tsx
+var _exp2 = () => ({ $fillContainer }) => $fillContainer ? "100%" : "auto";
+var _exp3 = () => ({ $backgroundColor }) => $backgroundColor;
+var _exp4 = () => ({ $backgroundImage }) => $backgroundImage;
+var _exp5 = () => ({ $backgroundSize }) => $backgroundSize;
+var _exp6 = () => ({ $borderRadius }) => $borderRadius === void 0 ? 0 : getCssSizeValue($borderRadius);
+var StyledDotGridBackground = /*#__PURE__*/ styled("div")({
+	name: "StyledDotGridBackground",
+	class: "saa8iad",
+	propsAsIs: false,
+	vars: {
+		"saa8iad-0": [_exp2()],
+		"saa8iad-1": [_exp3()],
+		"saa8iad-2": [_exp4()],
+		"saa8iad-3": [_exp5()],
+		"saa8iad-4": [_exp6()]
+	}
+});
+var generateDotSvg = (size, dotSize, color, opacity) => {
+	const center = size / 2;
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+    <circle cx="${center}" cy="${center}" r="${dotSize / 2}" fill="${color}" opacity="${opacity}"/>
+  </svg>`;
+	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+};
+var DotGridBackground = ({ dotSize = 3, spacing = 24, dotColor, backgroundColor, dotOpacity = .5, fillContainer = true, borderRadius, children }) => {
+	const { theme } = useGalaxyTheme();
+	return /* @__PURE__ */ jsx(StyledDotGridBackground, {
+		$fillContainer: fillContainer,
+		$backgroundColor: backgroundColor ?? theme.color.background.base,
+		$backgroundImage: generateDotSvg(spacing, dotSize, dotColor ?? theme.color.border.primary, dotOpacity),
+		$backgroundSize: `${spacing}px ${spacing}px`,
+		$borderRadius: borderRadius,
+		children
+	});
+};
+//#endregion
+export { DotGridBackground as default };

package/dist/badge/Badge.d.ts

@@ -0,0 +1,30 @@
+export declare enum BadgeVariant {
+    PRIMARY = "PRIMARY",
+    PRIMARY_ALT = "PRIMARY_ALT",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY",
+    SUCCESS = "SUCCESS",
+    WARNING = "WARNING",
+    ERROR = "ERROR",
+    PINK = "PINK",
+    ORANGE = "ORANGE",
+    YELLOW = "YELLOW",
+    LIME = "LIME",
+    BLUE = "BLUE",
+    PURPLE = "PURPLE",
+    TEAL = "TEAL"
+}
+export declare enum BadgeSize {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM",
+    LARGE = "LARGE"
+}
+export interface BadgeProps {
+    count: number;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    max?: number;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare const Badge: ({ count, variant, size, max, onClick, }: BadgeProps) => import("react").JSX.Element | null;
+export default Badge;

package/dist/badge/Badge.js

@@ -0,0 +1,92 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+/* empty css                */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { jsx } from "react/jsx-runtime";
+//#region src/badge/Badge.tsx
+var BadgeVariant = /* @__PURE__ */ function(BadgeVariant) {
+	BadgeVariant["PRIMARY"] = "PRIMARY";
+	BadgeVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
+	BadgeVariant["SECONDARY"] = "SECONDARY";
+	BadgeVariant["TERTIARY"] = "TERTIARY";
+	BadgeVariant["SUCCESS"] = "SUCCESS";
+	BadgeVariant["WARNING"] = "WARNING";
+	BadgeVariant["ERROR"] = "ERROR";
+	BadgeVariant["PINK"] = "PINK";
+	BadgeVariant["ORANGE"] = "ORANGE";
+	BadgeVariant["YELLOW"] = "YELLOW";
+	BadgeVariant["LIME"] = "LIME";
+	BadgeVariant["BLUE"] = "BLUE";
+	BadgeVariant["PURPLE"] = "PURPLE";
+	BadgeVariant["TEAL"] = "TEAL";
+	return BadgeVariant;
+}({});
+var BadgeSize = /* @__PURE__ */ function(BadgeSize) {
+	BadgeSize["SMALL"] = "SMALL";
+	BadgeSize["MEDIUM"] = "MEDIUM";
+	BadgeSize["LARGE"] = "LARGE";
+	return BadgeSize;
+}({});
+var BADGE_SIZE_TO_DIMENSION = {
+	["SMALL"]: "16px",
+	["MEDIUM"]: "20px",
+	["LARGE"]: "24px"
+};
+var BADGE_VARIANT_TO_TEXT_VARIANT = {
+	["PRIMARY"]: TextVariant.PRIMARY,
+	["PRIMARY_ALT"]: TextVariant.PRIMARY_ALT,
+	["SECONDARY"]: TextVariant.PRIMARY,
+	["TERTIARY"]: TextVariant.PRIMARY,
+	["SUCCESS"]: TextVariant.SUCCESS,
+	["WARNING"]: TextVariant.WARNING,
+	["ERROR"]: TextVariant.ERROR,
+	["PINK"]: TextVariant.PINK,
+	["ORANGE"]: TextVariant.ORANGE,
+	["YELLOW"]: TextVariant.YELLOW,
+	["LIME"]: TextVariant.LIME,
+	["BLUE"]: TextVariant.BLUE,
+	["PURPLE"]: TextVariant.PURPLE,
+	["TEAL"]: TextVariant.TEAL
+};
+var BADGE_SIZE_TO_TEXT_SIZE = {
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_SM,
+	["LARGE"]: TextSize.BODY_MD
+};
+var _exp = () => ({ $isClickable }) => $isClickable ? "pointer" : "inherit";
+var _exp3 = () => ({ $size }) => BADGE_SIZE_TO_DIMENSION[$size];
+var _exp4 = () => ({ theme, $variant }) => {
+	return match($variant).with("PRIMARY", () => theme.color.background.primary).with("PRIMARY_ALT", () => theme.color.background.primaryAlt).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).with("SUCCESS", () => theme.color.background.success).with("WARNING", () => theme.color.background.warning).with("ERROR", () => theme.color.background.error).with("PINK", () => theme.color.background.pink).with("ORANGE", () => theme.color.background.orange).with("YELLOW", () => theme.color.background.yellow).with("LIME", () => theme.color.background.lime).with("BLUE", () => theme.color.background.blue).with("PURPLE", () => theme.color.background.purple).with("TEAL", () => theme.color.background.teal).exhaustive();
+};
+var _exp5 = () => ({ theme, $variant }) => {
+	return match($variant).with("ERROR", () => theme.color.border.error).with("WARNING", () => theme.color.border.warning).with("SUCCESS", () => theme.color.border.success).otherwise(() => theme.color.border.primary);
+};
+var StyledBadge = withTheme(/*#__PURE__*/ styled("div")({
+	name: "StyledBadge",
+	class: "s6s20zd",
+	propsAsIs: false,
+	vars: {
+		"s6s20zd-0": [_exp()],
+		"s6s20zd-1": [_exp3()],
+		"s6s20zd-2": [_exp4()],
+		"s6s20zd-3": [_exp5()]
+	}
+}));
+var Badge = ({ count, variant = "ERROR", size = "MEDIUM", max = 99, onClick }) => {
+	if (count === 0) return null;
+	const displayValue = count > max ? `${max}+` : count;
+	return /* @__PURE__ */ jsx(StyledBadge, {
+		$variant: variant,
+		$size: size,
+		$isClickable: !!onClick,
+		onClick,
+		children: /* @__PURE__ */ jsx(Text, {
+			variant: BADGE_VARIANT_TO_TEXT_VARIANT[variant],
+			size: BADGE_SIZE_TO_TEXT_SIZE[size],
+			children: displayValue
+		})
+	});
+};
+//#endregion
+export { BadgeSize, BadgeVariant, Badge as default };

package/dist/beacons/Beacon.d.ts

@@ -0,0 +1,43 @@
+export declare enum BeaconSize {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM",
+    LARGE = "LARGE"
+}
+export declare enum BeaconVariant {
+    BASE = "BASE",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY",
+    SUCCESS = "SUCCESS",
+    ERROR = "ERROR",
+    WARNING = "WARNING",
+    LIME = "LIME",
+    YELLOW = "YELLOW",
+    BLUE = "BLUE",
+    ORANGE = "ORANGE",
+    PINK = "PINK",
+    PURPLE = "PURPLE",
+    TEAL = "TEAL",
+    DISABLED = "DISABLED"
+}
+export interface BeaconProps {
+    /**
+     * The size of the Beacon.
+     */
+    size?: BeaconSize;
+    /**
+     * The color of the Beacon.
+     */
+    variant?: BeaconVariant;
+    /**
+     * The speed of the pulse animation in seconds.
+     * @default 2
+     */
+    speed?: number;
+    /**
+     * Whether to show the pulse animation.
+     */
+    isPulse?: boolean;
+}
+declare const Beacon: ({ variant, size, speed, isPulse, }: BeaconProps) => import("react").JSX.Element;
+export default Beacon;