@galaxy-io/dls 1.0.3

package/dist/charts/types.d.ts

@@ -0,0 +1,80 @@
+import type { ReactNode } from "react";
+/** A single data point with a category label and series values */
+export interface ChartDatum {
+    /** Category label (x-axis for bar/line, slice label for pie) */
+    label: string;
+    /** Numeric values keyed by series key. e.g. { revenue: 150, cost: 80 } */
+    values: Record<string, number>;
+}
+/** Describes one series in the chart */
+export interface ChartSeriesConfig {
+    /** Unique key matching a key in ChartDatum.values */
+    key: string;
+    /** Human-readable name shown in legend/tooltip */
+    name: string;
+    /** Override color (hex). Falls back to palette order. */
+    color?: string;
+}
+/** A single slice in a pie/donut chart */
+export interface PieSlice {
+    /** Slice label shown in legend/tooltip */
+    label: string;
+    /** Numeric value determining slice size */
+    value: number;
+    /** Override color (hex). Falls back to palette order. */
+    color?: string;
+}
+export interface ChartMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export type ChartValueFormatter = (value: number) => string;
+export type ChartLabelFormatter = (label: string) => string;
+export interface ChartTooltipItem {
+    seriesKey: string;
+    seriesName: string;
+    value: number;
+    color: string;
+}
+export interface ChartTooltipData {
+    /** The category label */
+    label: string;
+    /** Series values for this datum */
+    items: ChartTooltipItem[];
+    /** Pixel position for tooltip anchor */
+    x: number;
+    y: number;
+}
+/** Custom render function for tooltip body */
+export type ChartTooltipRenderer = (data: ChartTooltipData) => ReactNode;
+/** Base props shared by all chart components */
+export interface BaseChartProps {
+    /** The data to render */
+    data: ChartDatum[];
+    /** Series configuration (order determines stacking/legend order) */
+    series: ChartSeriesConfig[];
+    /** Chart width in pixels. Optional when fillWidth is true. */
+    width?: number;
+    /** Chart height in pixels. Optional when aspectRatio is provided. */
+    height?: number;
+    /** Margins around the plot area */
+    margin?: Partial<ChartMargin>;
+    /** When true, chart fills container width */
+    fillWidth?: boolean;
+    /** Aspect ratio (width/height). Used to auto-calculate height when fillWidth is true. */
+    aspectRatio?: number;
+    /** Format y-axis / value labels. Default: toLocaleString() */
+    valueFormatter?: ChartValueFormatter;
+    /** Format x-axis / category labels. Default: identity */
+    labelFormatter?: ChartLabelFormatter;
+    /** Custom tooltip renderer. If omitted, uses default ChartTooltip */
+    tooltipRenderer?: ChartTooltipRenderer;
+    /** Disable tooltip entirely */
+    noTooltip?: boolean;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Accessible label for the chart SVG */
+    ariaLabel?: string;
+}

package/dist/charts/utils.d.ts

@@ -0,0 +1,29 @@
+import type { ChartDatum, ChartMargin, ChartSeriesConfig } from "./types";
+/** Resolve partial margin with defaults */
+export declare const resolveMargin: (partial?: Partial<ChartMargin>) => ChartMargin;
+/** Compute the inner plot dimensions */
+export declare const getPlotDimensions: (width: number, height: number, margin: ChartMargin) => {
+    plotWidth: number;
+    plotHeight: number;
+};
+/** Build a band scale for categories */
+export declare const buildBandScale: (labels: string[], range: [number, number], paddingInner: number, paddingOuter: number) => import("d3-scale").ScaleBand<string>;
+/** Build a point scale for categorical labels (line charts) */
+export declare const buildPointScale: (labels: string[], range: [number, number], padding?: number) => import("d3-scale").ScalePoint<string>;
+/** Build a linear scale for values */
+export declare const buildLinearScale: (domainMax: number, range: [number, number]) => import("d3-scale").ScaleLinear<number, number, never>;
+/** Compute the max stacked total across all data points */
+export declare const getStackedMax: (data: ChartDatum[], seriesKeys: string[]) => number;
+/** Compute the max single-series value across all data points */
+export declare const getGroupedMax: (data: ChartDatum[], seriesKeys: string[]) => number;
+/** Default value formatter */
+export declare const defaultValueFormatter: (value: number) => string;
+/** Default label formatter (identity) */
+export declare const defaultLabelFormatter: (label: string) => string;
+/** Resolve series color from explicit color or palette index */
+export declare const resolveSeriesColor: (config: ChartSeriesConfig, index: number, palette: string[]) => string;
+/**
+ * Build an SVG path for a rectangle with only top corners rounded.
+ * Used for the topmost bar segment in a stack.
+ */
+export declare const roundedTopRectPath: (x: number, y: number, width: number, height: number, radius: number) => string;

package/dist/charts/utils.js

@@ -0,0 +1,62 @@
+import { DEFAULT_CHART_MARGIN } from "./constants.js";
+import { scaleBand, scaleLinear, scalePoint } from "d3-scale";
+//#region src/charts/utils.ts
+/** Resolve partial margin with defaults */
+var resolveMargin = (partial) => ({
+	...DEFAULT_CHART_MARGIN,
+	...partial
+});
+/** Compute the inner plot dimensions */
+var getPlotDimensions = (width, height, margin) => ({
+	plotWidth: Math.max(0, width - margin.left - margin.right),
+	plotHeight: Math.max(0, height - margin.top - margin.bottom)
+});
+/** Build a band scale for categories */
+var buildBandScale = (labels, range, paddingInner, paddingOuter) => scaleBand().domain(labels).range(range).paddingInner(paddingInner).paddingOuter(paddingOuter);
+/** Build a point scale for categorical labels (line charts) */
+var buildPointScale = (labels, range, padding = 0) => scalePoint().domain(labels).range(range).padding(padding);
+/** Build a linear scale for values */
+var buildLinearScale = (domainMax, range) => scaleLinear().domain([0, domainMax]).nice().range(range);
+/** Compute the max stacked total across all data points */
+var getStackedMax = (data, seriesKeys) => {
+	let m = 0;
+	for (const d of data) {
+		let total = 0;
+		for (const key of seriesKeys) total += d.values[key] ?? 0;
+		if (total > m) m = total;
+	}
+	return m;
+};
+/** Compute the max single-series value across all data points */
+var getGroupedMax = (data, seriesKeys) => {
+	let m = 0;
+	for (const d of data) for (const key of seriesKeys) {
+		const v = d.values[key] ?? 0;
+		if (v > m) m = v;
+	}
+	return m;
+};
+/** Default value formatter */
+var defaultValueFormatter = (value) => value.toLocaleString();
+/** Default label formatter (identity) */
+var defaultLabelFormatter = (label) => label;
+/** Resolve series color from explicit color or palette index */
+var resolveSeriesColor = (config, index, palette) => config.color ?? palette[index % palette.length];
+/**
+* Build an SVG path for a rectangle with only top corners rounded.
+* Used for the topmost bar segment in a stack.
+*/
+var roundedTopRectPath = (x, y, width, height, radius) => {
+	const r = Math.min(radius, width / 2, height);
+	return [
+		`M${x},${y + r}`,
+		`a${r},${r} 0 0 1 ${r},${-r}`,
+		`h${width - 2 * r}`,
+		`a${r},${r} 0 0 1 ${r},${r}`,
+		`v${height - r}`,
+		`h${-width}`,
+		`z`
+	].join(" ");
+};
+//#endregion
+export { buildBandScale, buildLinearScale, buildPointScale, defaultLabelFormatter, defaultValueFormatter, getGroupedMax, getPlotDimensions, getStackedMax, resolveMargin, resolveSeriesColor, roundedTopRectPath };

package/dist/chips/Chip.d.ts

@@ -0,0 +1,39 @@
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+export declare enum ChipVariant {
+    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 ChipSize {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM",
+    LARGE = "LARGE"
+}
+export interface ChipProps {
+    label?: string | number;
+    variant?: ChipVariant;
+    size?: ChipSize;
+    svg?: React.ReactNode;
+    icon?: PhosphorIcon;
+    onDismiss?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    isPill?: boolean;
+    noBackground?: boolean;
+    isLoading?: boolean;
+    isEllipsis?: boolean;
+    /** When true, shows active/selected styling with variant-colored border */
+    isActive?: boolean;
+}
+declare const Chip: ({ label, variant, size, svg, icon, onDismiss, onClick, isPill, noBackground, isLoading, isEllipsis, isActive, }: ChipProps) => import("react").JSX.Element | null;
+export default Chip;

package/dist/chips/Chip.js

@@ -0,0 +1,185 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import TextShimmer from "../text/TextShimmer.js";
+import Ellipsis from "../text/Ellipsis.js";
+import FlexWrapper from "../containers/FlexWrapper.js";
+import FlexItem from "../containers/FlexItem.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import AvatarShimmer from "../avatar/AvatarShimmer.js";
+/* empty css               */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "@phosphor-icons/react";
+//#region src/chips/Chip.tsx
+var ChipVariant = /* @__PURE__ */ function(ChipVariant) {
+	ChipVariant["PRIMARY"] = "PRIMARY";
+	ChipVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
+	ChipVariant["SECONDARY"] = "SECONDARY";
+	ChipVariant["TERTIARY"] = "TERTIARY";
+	ChipVariant["SUCCESS"] = "SUCCESS";
+	ChipVariant["WARNING"] = "WARNING";
+	ChipVariant["ERROR"] = "ERROR";
+	ChipVariant["PINK"] = "PINK";
+	ChipVariant["ORANGE"] = "ORANGE";
+	ChipVariant["YELLOW"] = "YELLOW";
+	ChipVariant["LIME"] = "LIME";
+	ChipVariant["BLUE"] = "BLUE";
+	ChipVariant["PURPLE"] = "PURPLE";
+	ChipVariant["TEAL"] = "TEAL";
+	return ChipVariant;
+}({});
+var ChipSize = /* @__PURE__ */ function(ChipSize) {
+	ChipSize["SMALL"] = "SMALL";
+	ChipSize["MEDIUM"] = "MEDIUM";
+	ChipSize["LARGE"] = "LARGE";
+	return ChipSize;
+}({});
+var _exp = () => ({ $isClickable }) => $isClickable ? "pointer" : "inherit";
+var _exp2 = () => ({ $size }) => {
+	return match($size).with("SMALL", () => "18px").with("MEDIUM", () => "20px").with("LARGE", () => "24px").exhaustive();
+};
+var _exp3 = () => ({ $size }) => {
+	return match($size).with("SMALL", () => "0 4px").with("MEDIUM", () => "0 6px").with("LARGE", () => "0 8px").exhaustive();
+};
+var _exp4 = () => ({ theme, $variant, $noBackground }) => {
+	if ($noBackground) return "transparent";
+	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, $isActive }) => {
+	if (!$isActive) return match($variant).with("SUCCESS", () => theme.color.border.success).with("WARNING", () => theme.color.border.warning).with("ERROR", () => theme.color.border.error).with("PINK", () => theme.color.border.pink).with("ORANGE", () => theme.color.border.orange).with("YELLOW", () => theme.color.border.yellow).with("LIME", () => theme.color.border.lime).with("BLUE", () => theme.color.border.blue).with("PURPLE", () => theme.color.border.purple).with("TEAL", () => theme.color.border.teal).otherwise(() => theme.color.border.primary);
+	return match($variant).with("PRIMARY", () => theme.color.icon.primary).with("PRIMARY_ALT", () => theme.color.icon.primaryAlt).with("SECONDARY", () => theme.color.icon.secondary).with("TERTIARY", () => theme.color.icon.tertiary).with("SUCCESS", () => theme.color.icon.success).with("WARNING", () => theme.color.icon.warning).with("ERROR", () => theme.color.icon.error).with("PINK", () => theme.color.icon.pink).with("ORANGE", () => theme.color.icon.orange).with("YELLOW", () => theme.color.icon.yellow).with("LIME", () => theme.color.icon.lime).with("BLUE", () => theme.color.icon.blue).with("PURPLE", () => theme.color.icon.purple).with("TEAL", () => theme.color.icon.teal).exhaustive();
+};
+var _exp6 = () => ({ $isPill }) => $isPill ? "200px" : "4px";
+var StyledChip = withTheme(/*#__PURE__*/ styled("div")({
+	name: "StyledChip",
+	class: "shdcix9",
+	propsAsIs: false,
+	vars: {
+		"shdcix9-0": [_exp()],
+		"shdcix9-1": [_exp2()],
+		"shdcix9-2": [_exp3()],
+		"shdcix9-3": [_exp4()],
+		"shdcix9-4": [_exp5()],
+		"shdcix9-5": [_exp6()]
+	}
+}));
+var CHIP_SIZE_TO_SHIMMER_HEIGHT = {
+	["SMALL"]: 10,
+	["MEDIUM"]: 12,
+	["LARGE"]: 14
+};
+var CHIP_SIZE_TO_SHIMMER_WIDTH = {
+	["SMALL"]: 14,
+	["MEDIUM"]: 18,
+	["LARGE"]: 22
+};
+var CHIP_SIZE_TO_ICON_SIZE = {
+	["SMALL"]: 10,
+	["MEDIUM"]: 12,
+	["LARGE"]: 14
+};
+var CHIP_VARIANT_TO_ICON_VARIANT = {
+	["PRIMARY"]: IconVariant.PRIMARY,
+	["PRIMARY_ALT"]: IconVariant.PRIMARY_ALT,
+	["SECONDARY"]: IconVariant.SECONDARY,
+	["TERTIARY"]: IconVariant.TERTIARY,
+	["SUCCESS"]: IconVariant.SUCCESS,
+	["WARNING"]: IconVariant.WARNING,
+	["ERROR"]: IconVariant.ERROR,
+	["PINK"]: IconVariant.PINK,
+	["ORANGE"]: IconVariant.ORANGE,
+	["YELLOW"]: IconVariant.YELLOW,
+	["LIME"]: IconVariant.LIME,
+	["BLUE"]: IconVariant.BLUE,
+	["PURPLE"]: IconVariant.PURPLE,
+	["TEAL"]: IconVariant.TEAL
+};
+var CHIP_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 CHIP_SIZE_TO_TEXT_SIZE = {
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG
+};
+var Chip = ({ label, variant = "SECONDARY", size = "MEDIUM", svg, icon, onDismiss, onClick, isPill, noBackground, isLoading, isEllipsis, isActive }) => {
+	if (!label && !icon) return null;
+	if (isLoading) return /* @__PURE__ */ jsxs(StyledChip, {
+		$variant: variant,
+		$size: size,
+		$isPill: isPill,
+		$isClickable: false,
+		$noBackground: noBackground,
+		$isActive: isActive,
+		children: [(icon || svg) && /* @__PURE__ */ jsx(FlexItem, {
+			shrink: 0,
+			grow: 0,
+			children: /* @__PURE__ */ jsx(AvatarShimmer, { size: CHIP_SIZE_TO_ICON_SIZE[size] })
+		}), /* @__PURE__ */ jsx(FlexItem, {
+			shrink: 0,
+			grow: 0,
+			children: /* @__PURE__ */ jsx(TextShimmer, {
+				height: CHIP_SIZE_TO_SHIMMER_HEIGHT[size],
+				width: CHIP_SIZE_TO_SHIMMER_WIDTH[size]
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs(StyledChip, {
+		$variant: variant,
+		$size: size,
+		$isPill: isPill,
+		$isClickable: !!onClick,
+		$noBackground: noBackground,
+		$isActive: isActive,
+		onClick,
+		children: [
+			icon && /* @__PURE__ */ jsx(FlexItem, {
+				shrink: 0,
+				grow: 0,
+				children: /* @__PURE__ */ jsx(Icon, {
+					component: icon,
+					size: CHIP_SIZE_TO_ICON_SIZE[size],
+					variant: CHIP_VARIANT_TO_ICON_VARIANT[variant]
+				})
+			}),
+			svg && /* @__PURE__ */ jsx(FlexItem, {
+				shrink: 0,
+				grow: 0,
+				children: svg
+			}),
+			label && /* @__PURE__ */ jsx(FlexItem, {
+				shrink: 0,
+				grow: 0,
+				children: /* @__PURE__ */ jsxs(Text, {
+					variant: CHIP_VARIANT_TO_TEXT_VARIANT[variant],
+					size: CHIP_SIZE_TO_TEXT_SIZE[size],
+					children: [label, isEllipsis && /* @__PURE__ */ jsx(Ellipsis, { isPulse: true })]
+				})
+			}),
+			onDismiss && /* @__PURE__ */ jsx(FlexWrapper, {
+				onClick: onDismiss,
+				children: /* @__PURE__ */ jsx(Icon, {
+					component: XIcon,
+					size: 12,
+					variant: IconVariant.TERTIARY
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { ChipSize, ChipVariant, Chip as default };

package/dist/containers/FlexItem.d.ts

@@ -0,0 +1,28 @@
+import { type CSSProperties } from "react";
+import { AlignItems, JustifyContent } from "./FlexWrapper";
+interface FlexItemProps {
+    position?: CSSProperties["position"];
+    grow?: number;
+    shrink?: number;
+    basis?: number | string;
+    overflow?: CSSProperties["overflow"];
+    whiteSpace?: CSSProperties["whiteSpace"];
+    textOverflow?: CSSProperties["textOverflow"];
+    width?: number | string;
+    height?: number | string;
+    fillWidth?: boolean;
+    fillHeight?: boolean;
+    display?: CSSProperties["display"];
+    alignItems?: AlignItems;
+    justifyContent?: JustifyContent;
+    minWidth?: number | string;
+    minHeight?: number | string;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    padding?: CSSProperties["padding"];
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare const FlexItem: import("react").ForwardRefExoticComponent<FlexItemProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default FlexItem;

package/dist/containers/FlexItem.js

@@ -0,0 +1,93 @@
+import { getCssSizeValue } from "../utils/linaria.js";
+import { AlignItems, JustifyContent } from "./FlexWrapper.js";
+/* empty css                   */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/containers/FlexItem.tsx
+var _exp = () => ({ $position }) => $position ?? "static";
+var _exp2 = () => ({ $display }) => $display ?? "flex";
+var _exp3 = () => ({ $alignItems }) => {
+	return match($alignItems).with(AlignItems.START, () => "flex-start").with(AlignItems.CENTER, () => "center").with(AlignItems.END, () => "flex-end").with(AlignItems.BASELINE, () => "baseline").with(AlignItems.STRETCH, () => "stretch").otherwise(() => "inherit");
+};
+var _exp4 = () => ({ $justifyContent }) => {
+	return match($justifyContent).with(JustifyContent.START, () => "flex-start").with(JustifyContent.CENTER, () => "center").with(JustifyContent.END, () => "flex-end").otherwise(() => "flex-start");
+};
+var _exp5 = () => ({ $grow }) => $grow ?? 1;
+var _exp6 = () => ({ $shrink }) => $shrink ?? 1;
+var _exp7 = () => ({ $basis }) => $basis ?? "auto";
+var _exp8 = () => ({ $width, $fillWidth }) => {
+	if ($fillWidth) return "100%";
+	if ($width) return getCssSizeValue($width, "0");
+	return "auto";
+};
+var _exp9 = () => ({ $height, $fillHeight }) => {
+	if ($fillHeight) return "100%";
+	if ($height) return getCssSizeValue($height);
+	return "auto";
+};
+var _exp0 = () => ({ $minWidth }) => $minWidth ? getCssSizeValue($minWidth) : "auto";
+var _exp1 = () => ({ $maxWidth }) => $maxWidth ? getCssSizeValue($maxWidth) : "none";
+var _exp10 = () => ({ $minHeight }) => $minHeight ? getCssSizeValue($minHeight) : "auto";
+var _exp11 = () => ({ $maxHeight }) => $maxHeight ? getCssSizeValue($maxHeight) : "none";
+var _exp12 = () => ({ $overflow }) => $overflow ?? "visible";
+var _exp13 = () => ({ $whiteSpace }) => $whiteSpace ?? "normal";
+var _exp14 = () => ({ $textOverflow }) => $textOverflow ?? "clip";
+var _exp15 = () => ({ $padding }) => $padding ?? "0";
+var _exp16 = () => ({ $onClick }) => $onClick ? "pointer" : "inherit";
+var StyledFlexItem = /*#__PURE__*/ styled("div")({
+	name: "StyledFlexItem",
+	class: "s1he36jx",
+	propsAsIs: false,
+	vars: {
+		"s1he36jx-0": [_exp()],
+		"s1he36jx-1": [_exp2()],
+		"s1he36jx-2": [_exp3()],
+		"s1he36jx-3": [_exp4()],
+		"s1he36jx-4": [_exp5()],
+		"s1he36jx-5": [_exp6()],
+		"s1he36jx-6": [_exp7()],
+		"s1he36jx-7": [_exp8()],
+		"s1he36jx-8": [_exp9()],
+		"s1he36jx-9": [_exp0()],
+		"s1he36jx-10": [_exp1()],
+		"s1he36jx-11": [_exp10()],
+		"s1he36jx-12": [_exp11()],
+		"s1he36jx-13": [_exp12()],
+		"s1he36jx-14": [_exp13()],
+		"s1he36jx-15": [_exp14()],
+		"s1he36jx-16": [_exp15()],
+		"s1he36jx-17": [_exp16()]
+	}
+});
+var FlexItem = forwardRef(({ children, position, grow, shrink, basis, overflow, whiteSpace, textOverflow, width, height, fillWidth, fillHeight, display, alignItems, justifyContent, minWidth, minHeight, maxWidth, maxHeight, padding, onClick }, ref) => {
+	return /* @__PURE__ */ jsx(StyledFlexItem, {
+		ref,
+		$position: position,
+		$grow: grow,
+		$shrink: shrink,
+		$basis: basis,
+		$overflow: overflow,
+		$whiteSpace: whiteSpace,
+		$textOverflow: textOverflow,
+		$width: width,
+		$height: height,
+		$fillWidth: fillWidth,
+		$fillHeight: fillHeight,
+		$display: display,
+		$alignItems: alignItems,
+		$justifyContent: justifyContent,
+		$minWidth: minWidth,
+		$minHeight: minHeight,
+		$maxWidth: maxWidth,
+		$maxHeight: maxHeight,
+		$padding: padding,
+		$onClick: onClick,
+		onClick,
+		children
+	});
+});
+FlexItem.displayName = "FlexItem";
+//#endregion
+export { FlexItem as default };

package/dist/containers/FlexWrapper.d.ts

@@ -0,0 +1,147 @@
+export declare enum FlexDirection {
+    ROW = "row",
+    COLUMN = "column",
+    ROW_REVERSE = "row-reverse",
+    COLUMN_REVERSE = "column-reverse"
+}
+export declare enum AlignItems {
+    START = "start",
+    CENTER = "center",
+    END = "end",
+    BASELINE = "baseline",
+    STRETCH = "stretch"
+}
+export declare enum JustifyContent {
+    START = "start",
+    CENTER = "center",
+    END = "end",
+    SPACE_BETWEEN = "space-between",
+    SPACE_AROUND = "space-around",
+    SPACE_EVENLY = "space-evenly"
+}
+export declare enum FlexWrap {
+    NOWRAP = "nowrap",
+    WRAP = "wrap",
+    WRAP_REVERSE = "wrap-reverse"
+}
+export declare enum FlexGap {
+    NONE = "0",
+    XXSMALL = "2px",
+    XSMALL = "4px",
+    SMALL = "8px",
+    MEDIUM = "12px",
+    LARGE = "16px",
+    XLARGE = "24px",
+    XXLARGE = "32px"
+}
+interface FlexWrapperProps {
+    /**
+     * Sets the direction of the flex container
+     * - ROW: Items are placed in a row (default)
+     * - COLUMN: Items are placed in a column
+     * - ROW_REVERSE: Items are placed in a row, from right to left
+     * - COLUMN_REVERSE: Items are placed in a column, from bottom to top
+     */
+    direction?: FlexDirection;
+    /**
+     * Defines how flex items are aligned along the cross axis
+     * - START: Items are aligned at the start (default)
+     * - CENTER: Items are centered
+     * - END: Items are aligned at the end
+     * - BASELINE: Items are aligned at their baselines
+     * - STRETCH: Items are stretched to fill the container
+     */
+    alignItems?: AlignItems;
+    /**
+     * Defines how flex items are aligned along the main axis
+     * - START: Items are aligned at the start (default)
+     * - CENTER: Items are centered
+     * - END: Items are aligned at the end
+     * - SPACE_BETWEEN: Items are evenly distributed with equal space between them
+     * - SPACE_AROUND: Items are evenly distributed with equal space around them
+     * - SPACE_EVENLY: Items are evenly distributed with equal space between and around them
+     */
+    justifyContent?: JustifyContent;
+    /**
+     * Controls whether flex items should wrap when there isn't enough space
+     * - NOWRAP: Items will not wrap (default)
+     * - WRAP: Items will wrap onto multiple lines if needed
+     * - WRAP_REVERSE: Items will wrap onto multiple lines in reverse order
+     */
+    wrap?: FlexWrap;
+    /**
+     * Sets the gap between flex items in pixels or string (for other units)
+     */
+    gap?: number | string;
+    /**
+     * Sets the width of the flex container in pixels
+     */
+    width?: number | string;
+    /**
+     * Sets the height of the flex container in pixels
+     */
+    height?: number | string;
+    /**
+     * Sets the minimum width of the flex container in pixels
+     */
+    minWidth?: number | string;
+    /**
+     * Sets the maximum width of the flex container in pixels
+     */
+    maxWidth?: number | string;
+    /**
+     * Sets the minimum height of the flex container in pixels
+     */
+    minHeight?: number | string;
+    /**
+     * Sets the maximum height of the flex container in pixels
+     */
+    maxHeight?: number | string;
+    /**
+     * When true, the container will fill its parent's width (equivalent to width: 100%)
+     */
+    fillWidth?: boolean;
+    /**
+     * When true, the container will fill its parent's height (equivalent to height: 100%)
+     */
+    fillHeight?: boolean;
+    /**
+     * Controls how content that overflows the container should be handled
+     * Default is 'visible'
+     */
+    overflow?: React.CSSProperties["overflow"];
+    /**
+     * Sets the padding inside the container
+     * Can be a number (for pixels) or a string (for other units)
+     */
+    padding?: React.CSSProperties["padding"];
+    /**
+     * Sets the margin inside the container
+     * Can be a number (for pixels) or a string (for other units)
+     */
+    margin?: React.CSSProperties["margin"];
+    /**
+     * Optional click handler for the flex container
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Optional mousedown handler for the flex container
+     */
+    onMouseDown?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Optional mouseenter handler for the flex container
+     */
+    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Optional mouseleave handler for the flex container
+     */
+    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Optional scroll handler for the flex container
+     */
+    onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+}
+declare const FlexWrapper: import("react").ForwardRefExoticComponent<FlexWrapperProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default FlexWrapper;