@eocrm/design-system 0.6.23 → 0.7.0

package/dist/components/Sparkline/sparklineModel.d.ts

@@ -0,0 +1,34 @@
+/** Sparkline mark type. */
+export type SparklineType = 'line' | 'area' | 'bar';
+/** Px kept clear on every edge so the stroke and end dot are never clipped. */
+export declare const SPARKLINE_INSET = 3;
+/** End-dot radius in px. */
+export declare const SPARKLINE_DOT_RADIUS = 2.5;
+/** First / last / min / max of the finite values. */
+export interface SparklineSummary {
+    first: number;
+    last: number;
+    min: number;
+    max: number;
+}
+export interface SparklineRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface SparklineGeometry {
+    /** Stroke path (line + area). */
+    line?: string;
+    /** Fill path (area only). */
+    area?: string;
+    /** Bars (bar only). */
+    bars?: SparklineRect[];
+    /** Marker on the last finite value (line + area). */
+    dot?: {
+        cx: number;
+        cy: number;
+    };
+}
+export declare function summarize(values: readonly (number | null)[]): SparklineSummary | null;
+export declare function layoutSparkline(values: readonly (number | null)[], type: SparklineType, width: number, height: number): SparklineGeometry | null;

package/dist/components/Sparkline/sparklineModel.js

@@ -0,0 +1,58 @@
+import { scaleBand, scaleLinear } from "d3-scale";
+import { area, curveMonotoneX, line } from "d3-shape";
+/** End-dot radius in px. */
+var SPARKLINE_DOT_RADIUS = 2.5;
+var finite = (v) => v != null && Number.isFinite(v);
+function summarize(values) {
+	const nums = values.filter(finite);
+	if (nums.length === 0) return null;
+	let min = nums[0];
+	let max = nums[0];
+	for (const v of nums) {
+		if (v < min) min = v;
+		if (v > max) max = v;
+	}
+	return {
+		first: nums[0],
+		last: nums[nums.length - 1],
+		min,
+		max
+	};
+}
+function layoutSparkline(values, type, width, height) {
+	const s = summarize(values);
+	if (!s || width <= 0 || height <= 0) return null;
+	const pad = 3;
+	const n = values.length;
+	const lo = type !== "line" && s.min >= 0 ? 0 : s.min;
+	const hi = type === "bar" && s.max < 0 ? 0 : s.max;
+	const y = scaleLinear().domain(lo === hi ? [lo - 1, hi + 1] : [lo, hi]).range([height - pad, pad]);
+	if (type === "bar") {
+		const band = scaleBand().domain(values.map((_, i) => i)).range([0, width]).paddingInner(.2);
+		const zero = y(Math.min(Math.max(0, y.domain()[0]), y.domain()[1]));
+		const bars = [];
+		values.forEach((v, i) => {
+			if (!finite(v)) return;
+			const top = y(v);
+			bars.push({
+				x: band(i) ?? 0,
+				y: Math.min(top, zero),
+				width: Math.max(1, band.bandwidth()),
+				height: v === 0 ? 0 : Math.abs(zero - top)
+			});
+		});
+		return { bars };
+	}
+	const xs = scaleLinear().domain([0, Math.max(n - 1, 1)]).range([pad, width - pad]);
+	const x = (i) => n === 1 ? width / 2 : xs(i);
+	const geometry = { line: line().defined(finite).x((_, i) => x(i)).y((v) => y(v)).curve(curveMonotoneX)(values) ?? void 0 };
+	if (type === "area") geometry.area = area().defined(finite).x((_, i) => x(i)).y0(height - pad).y1((v) => y(v)).curve(curveMonotoneX)(values) ?? void 0;
+	let last = n - 1;
+	while (last >= 0 && !finite(values[last])) last--;
+	geometry.dot = {
+		cx: x(last),
+		cy: y(values[last])
+	};
+	return geometry;
+}
+export { SPARKLINE_DOT_RADIUS, layoutSparkline, summarize };

package/dist/components/Split/Split.css

@@ -0,0 +1,114 @@
+:root {
+  --split-gap-xs: var(--space-1);
+  --split-gap-sm: var(--space-2);
+  --split-gap-md: var(--space-3);
+  --split-gap-lg: var(--space-4);
+  --split-gap-xl: var(--space-6);
+  --split-gap-2xl: var(--space-8);
+}
+
+.Split__split__rFrKA {
+  display: grid;
+}
+
+.Split__sideStart__p5cFU {
+  grid-template-columns: var(--split-aside-width, auto) 1fr;
+}
+
+.Split__sideEnd__d48_H {
+  grid-template-columns: 1fr var(--split-aside-width, auto);
+}
+
+.Split__sideStart__p5cFU.Split__collapsible__jIFCa {
+  grid-template-columns: minmax(0, var(--split-aside-width, auto)) minmax(0, 1fr);
+}
+
+.Split__sideEnd__d48_H.Split__collapsible__jIFCa {
+  grid-template-columns: minmax(0, 1fr) minmax(0, var(--split-aside-width, auto));
+}
+
+.Split__split__rFrKA.Split__noAside__E_7C0 {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.Split__aside__24qPQ {
+  min-width: 0;
+}
+
+.Split__main__DbyhC {
+  min-width: 0;
+}
+
+.Split__gapXs__-nreP {
+  gap: var(--split-gap-xs);
+}
+
+.Split__gapSm__1KLfK {
+  gap: var(--split-gap-sm);
+}
+
+.Split__gapMd__vvOyq {
+  gap: var(--split-gap-md);
+}
+
+.Split__gapLg__ZOLLN {
+  gap: var(--split-gap-lg);
+}
+
+.Split__gapXl__pEIIl {
+  gap: var(--split-gap-xl);
+}
+
+.Split__gap2xl__gXj8K {
+  gap: var(--split-gap-2xl);
+}
+
+.Split__alignStart__lNVCR {
+  align-items: start;
+}
+
+.Split__alignStretch__6Ng2J {
+  align-items: stretch;
+}
+
+.Split__alignCenter__FKaD8 {
+  align-items: center;
+}
+
+.Split__collapsible__jIFCa {
+  container-type: inline-size;
+}
+
+@container (max-width: 480px) {
+  .Split__collapsible__jIFCa.Split__collapseSm__PwvWS > * {
+    grid-column: 1/-1;
+  }
+  .Split__collapsible__jIFCa.Split__collapseSm__PwvWS > .Split__aside__24qPQ > [data-sticky] {
+    position: static;
+    max-height: none;
+    overflow-y: visible;
+    overscroll-behavior: auto;
+  }
+}
+@container (max-width: 640px) {
+  .Split__collapsible__jIFCa.Split__collapseMd__kVpZ- > * {
+    grid-column: 1/-1;
+  }
+  .Split__collapsible__jIFCa.Split__collapseMd__kVpZ- > .Split__aside__24qPQ > [data-sticky] {
+    position: static;
+    max-height: none;
+    overflow-y: visible;
+    overscroll-behavior: auto;
+  }
+}
+@container (max-width: 768px) {
+  .Split__collapsible__jIFCa.Split__collapseLg__bZD1U > * {
+    grid-column: 1/-1;
+  }
+  .Split__collapsible__jIFCa.Split__collapseLg__bZD1U > .Split__aside__24qPQ > [data-sticky] {
+    position: static;
+    max-height: none;
+    overflow-y: visible;
+    overscroll-behavior: auto;
+  }
+}

package/dist/components/Split/Split.d.ts

@@ -0,0 +1,96 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type CollapseBreakpoint } from '../_internal/collapse.js';
+/** Which side the `aside` pane sits on. RTL-aware (DOM + column order flip together). */
+export type SplitSide = 'start' | 'end';
+/** Gap between the two panes. Same scale as Stack/Cluster/Grid. */
+export type SplitGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** Cross-axis (vertical) alignment of the two panes. */
+export type SplitAlign = 'start' | 'stretch' | 'center';
+export interface SplitProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The narrow, intrinsic-width pane — a vertical `Tabs` rail, filter list, or nav column.
+     * `null` / `false` / `undefined` renders no aside cell at all (no empty track or gap),
+     * so content can be conditionally moved out of the aside; `main` then fills the split.
+     */
+    aside?: ReactNode;
+    /**
+     * Which side `aside` sits on.
+     * - `'start'` (default) — leading edge (left in LTR).
+     * - `'end'` — trailing edge (right in LTR).
+     */
+    side?: SplitSide;
+    /**
+     * `aside` column width.
+     * - `'auto'` (default) — intrinsic; sizes to the pane's content.
+     * - a CSS length (e.g. `'240px'`) — pins the column so `main` doesn't reflow
+     *   when `aside` content changes width.
+     */
+    asideWidth?: string;
+    /**
+     * Gap between the two panes, in pixels:
+     * `xs` (4) / `sm` (8) / `md` (12, default) / `lg` (16) / `xl` (24) / `2xl` (32).
+     * Same scale as Stack, Cluster, and Grid.
+     */
+    gap?: SplitGap;
+    /**
+     * Cross-axis (vertical) alignment of the panes.
+     * - `'start'` (default) — panes hug the top.
+     * - `'stretch'` — `aside` matches `main`'s height (full-height bordered rail).
+     * - `'center'` — panes vertically centered.
+     */
+    align?: SplitAlign;
+    /**
+     * Stack the two panes vertically when the SPLIT'S OWN width (container
+     * query, not viewport) drops below the preset: `sm` 480px / `md` 640px /
+     * `lg` 768px. Same scale as `Grid`'s `collapseBelow`. Without it a pinned
+     * `asideWidth` rail squeezes `main` to nothing on narrow screens.
+     *
+     * A pinned `asideWidth` is preserved while the panes are side-by-side and
+     * space is available, but can shrink as the container narrows so the stacked
+     * panes stay within the split.
+     *
+     * Collapsed panes stack in **DOM order**, not always aside-first: with
+     * the default `side="start"` that's aside → main; with `side="end"` it's
+     * main → aside, because that's the order the panes are in the DOM. Forcing
+     * aside-first when collapsed would need CSS `order`, which desynchronizes
+     * visual order from tab order — an a11y defect. If you need the aside on top
+     * when stacked, use `side="start"`.
+     *
+     * A `<Sticky>` passed as the `aside` stops pinning (and drops its `scroll`
+     * height cap) while stacked, so it can't trap the page scroll on a phone.
+     *
+     * ❌ Anti-pattern: a `collapseBelow` split must get its width from its
+     * parent. `container-type: inline-size` zeroes the split's contribution to
+     * intrinsic sizing, so in an intrinsic-width context (another `Split`'s
+     * default `auto` aside track, a `Cluster` item, `width: max-content`) it
+     * renders at width 0 — give the parent a concrete width instead. The split
+     * also becomes the containing block for absolutely-positioned descendants
+     * (layout containment). Splits without the prop pay none of this.
+     */
+    collapseBelow?: CollapseBreakpoint;
+    /**
+     * Called with `true` when a `collapseBelow` split stacks and `false` when it
+     * goes back side by side — on mount with the initial state (twice under
+     * React StrictMode in development), then on
+     * every change. Ignored without `collapseBelow`.
+     *
+     * Use it to move content you own between placements so DOM order matches
+     * visual order in both states, instead of CSS `order` — e.g. render a
+     * comment thread at the end of `main` while side by side and after the
+     * `<Split>` once stacked, or a status switcher at the top of the aside vs.
+     * above the split.
+     *
+     * It measures the SPLIT'S OWN content width against the same inclusive
+     * threshold its container query uses (a `ResizeObserver`, read
+     * synchronously on mount so the first paint is already right), so it agrees
+     * with the CSS where `useBelowBreakpoint` — which measures the viewport —
+     * would not beside an app sidebar. The same state is on the root as
+     * `data-collapsed="true" | "false"`.
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+}
+/**
+ * Master-detail layout: an intrinsic-width `aside` pane beside a filling main pane, via CSS grid.
+ * @see docs/components/Split.md
+ */
+export declare const Split: import("react").ForwardRefExoticComponent<SplitProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Split/Split.js

@@ -0,0 +1,90 @@
+'use client';
+import Split_module_default from "./Split.module.js";
+import { COLLAPSE_BREAKPOINT_PX } from "../_internal/collapse.js";
+import { mergeRefs } from "../_internal/refs.js";
+import { forwardRef, useLayoutEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/Split/Split.tsx
+/**
+* Content-box inline size — what `container-type: inline-size` queries. Read
+* from the computed (layout) width, not `getBoundingClientRect()`, which a
+* CSS transform scales: a Split inside a Modal mid-`scale(0.96)` entrance
+* measured ~4% narrow, and a ResizeObserver never re-fires for transforms.
+*/
+function contentWidth(el) {
+	const cs = getComputedStyle(el);
+	const px = (v) => parseFloat(v) || 0;
+	const width = px(cs.width);
+	if (cs.boxSizing !== "border-box") return width;
+	return width - px(cs.paddingLeft) - px(cs.paddingRight) - px(cs.borderLeftWidth) - px(cs.borderRightWidth);
+}
+var gapClass = {
+	xs: Split_module_default.gapXs,
+	sm: Split_module_default.gapSm,
+	md: Split_module_default.gapMd,
+	lg: Split_module_default.gapLg,
+	xl: Split_module_default.gapXl,
+	"2xl": Split_module_default.gap2xl
+};
+var collapseClass = {
+	sm: Split_module_default.collapseSm,
+	md: Split_module_default.collapseMd,
+	lg: Split_module_default.collapseLg
+};
+var alignClass = {
+	start: Split_module_default.alignStart,
+	stretch: Split_module_default.alignStretch,
+	center: Split_module_default.alignCenter
+};
+/**
+* Master-detail layout: an intrinsic-width `aside` pane beside a filling main pane, via CSS grid.
+* @see docs/components/Split.md
+*/
+var Split = forwardRef(function Split({ aside, children, side = "start", asideWidth = "auto", gap = "md", align = "start", collapseBelow, onCollapsedChange, className, style, ...props }, ref) {
+	const rootRef = useRef(null);
+	const [collapsed, setCollapsed] = useState();
+	const onChangeRef = useRef(onCollapsedChange);
+	onChangeRef.current = onCollapsedChange;
+	useLayoutEffect(() => {
+		const el = rootRef.current;
+		if (!collapseBelow || !el) {
+			setCollapsed(void 0);
+			return;
+		}
+		let last;
+		const measure = () => {
+			const next = contentWidth(el) <= COLLAPSE_BREAKPOINT_PX[collapseBelow];
+			if (next === last) return;
+			last = next;
+			setCollapsed(next);
+			onChangeRef.current?.(next);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [collapseBelow]);
+	const hasAside = aside !== null && aside !== void 0 && aside !== false;
+	const asideCell = hasAside ? /* @__PURE__ */ jsx("div", {
+		className: Split_module_default.aside,
+		children: aside
+	}) : null;
+	const mainCell = /* @__PURE__ */ jsx("div", {
+		className: Split_module_default.main,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: mergeRefs(ref, rootRef),
+		"data-collapsed": collapsed === void 0 ? void 0 : String(collapsed),
+		className: clsx(Split_module_default.split, side === "end" ? Split_module_default.sideEnd : Split_module_default.sideStart, gapClass[gap], alignClass[align], !hasAside && Split_module_default.noAside, collapseBelow && Split_module_default.collapsible, collapseBelow && collapseClass[collapseBelow], className),
+		style: {
+			"--split-aside-width": asideWidth,
+			...style
+		},
+		...props,
+		children: side === "end" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [mainCell, asideCell] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [asideCell, mainCell] })
+	});
+});
+export { Split };

package/dist/components/Split/Split.module.js

@@ -0,0 +1,43 @@
+import "./Split.css";
+// src/components/Split/Split.module.scss
+var split = "Split__split__rFrKA";
+var sideStart = "Split__sideStart__p5cFU";
+var sideEnd = "Split__sideEnd__d48_H";
+var collapsible = "Split__collapsible__jIFCa";
+var noAside = "Split__noAside__E_7C0";
+var aside = "Split__aside__24qPQ";
+var main = "Split__main__DbyhC";
+var gapXs = "Split__gapXs__-nreP";
+var gapSm = "Split__gapSm__1KLfK";
+var gapMd = "Split__gapMd__vvOyq";
+var gapLg = "Split__gapLg__ZOLLN";
+var gapXl = "Split__gapXl__pEIIl";
+var gap2xl = "Split__gap2xl__gXj8K";
+var alignStart = "Split__alignStart__lNVCR";
+var alignStretch = "Split__alignStretch__6Ng2J";
+var alignCenter = "Split__alignCenter__FKaD8";
+var collapseSm = "Split__collapseSm__PwvWS";
+var collapseMd = "Split__collapseMd__kVpZ-";
+var collapseLg = "Split__collapseLg__bZD1U";
+var Split_module_default = {
+	split,
+	sideStart,
+	sideEnd,
+	collapsible,
+	noAside,
+	aside,
+	main,
+	gapXs,
+	gapSm,
+	gapMd,
+	gapLg,
+	gapXl,
+	gap2xl,
+	alignStart,
+	alignStretch,
+	alignCenter,
+	collapseSm,
+	collapseMd,
+	collapseLg
+};
+export { alignCenter, alignStart, alignStretch, aside, collapseLg, collapseMd, collapseSm, collapsible, Split_module_default as default, gap2xl, gapLg, gapMd, gapSm, gapXl, gapXs, main, noAside, sideEnd, sideStart, split };

package/dist/components/Split/index.d.ts

@@ -0,0 +1,2 @@
+export { Split } from './Split.js';
+export type { SplitProps, SplitSide, SplitGap, SplitAlign } from './Split.js';

package/dist/components/Stack/Stack.css

@@ -0,0 +1,57 @@
+:root {
+  --stack-gap-xs: var(--space-1);
+  --stack-gap-sm: var(--space-2);
+  --stack-gap-md: var(--space-3);
+  --stack-gap-lg: var(--space-4);
+  --stack-gap-xl: var(--space-6);
+  --stack-gap-2xl: var(--space-8);
+}
+
+.Stack__stack__0jSI- {
+  display: flex;
+  flex-direction: column;
+}
+
+.Stack__minWidth0__M2OqR {
+  min-width: 0;
+}
+
+.Stack__gapXs___hIKA {
+  gap: var(--stack-gap-xs);
+}
+
+.Stack__gapSm__8B27k {
+  gap: var(--stack-gap-sm);
+}
+
+.Stack__gapMd__rlM-l {
+  gap: var(--stack-gap-md);
+}
+
+.Stack__gapLg__8x92f {
+  gap: var(--stack-gap-lg);
+}
+
+.Stack__gapXl__VceaF {
+  gap: var(--stack-gap-xl);
+}
+
+.Stack__gap2xl__vQ_vj {
+  gap: var(--stack-gap-2xl);
+}
+
+.Stack__alignStart__QLPzg {
+  align-items: flex-start;
+}
+
+.Stack__alignCenter__Hu_YD {
+  align-items: center;
+}
+
+.Stack__alignEnd__WeckK {
+  align-items: flex-end;
+}
+
+.Stack__alignStretch__oDIlg {
+  align-items: stretch;
+}

package/dist/components/Stack/Stack.d.ts

@@ -0,0 +1,61 @@
+import { type HTMLAttributes } from 'react';
+/** Vertical gap between children. Values in pixels: 4 / 8 / 12 / 16 / 24 / 32. */
+export type StackGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** Cross-axis (horizontal) alignment of children inside the stack. */
+export type StackAlign = 'start' | 'center' | 'end' | 'stretch';
+export interface StackProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Gap between children, in pixels:
+     * `xs` (4) / `sm` (8) / `md` (12, default) / `lg` (16) / `xl` (24) / `2xl` (32).
+     */
+    gap?: StackGap;
+    /**
+     * Cross-axis alignment.
+     * - `stretch` (default) — children fill the stack's horizontal width.
+     * - `start` / `center` / `end` — left, center, right alignment.
+     */
+    align?: StackAlign;
+    /**
+     * Lets the container shrink below its content's intrinsic width
+     * (`min-width: 0`), so a `<Text truncate>` inside can ellipsize instead of
+     * being hard-cut by a clipping ancestor.
+     *
+     * Only bites when the Stack is itself an item of a **row** flex container (or
+     * a grid item) that clips — what decides is the PARENT's main axis, not the
+     * Stack's own direction. That is the two-line label beside a fixed badge, or
+     * a detail column in a squeezed toolbar. Without it the flex default
+     * (`min-width: auto`) floors the Stack at its widest line and the ellipsis
+     * never appears. That floor applies because a Stack sets no `overflow` — per CSS
+     * Flexbox §4.5 a flex item keeps its automatic minimum size while its computed
+     * `overflow` is non-scrollable (`visible` or `clip`); the scrollable values
+     * (`hidden`/`auto`/`scroll`) drop it to `0`.
+     *
+     * It is a **no-op** when the Stack sits in another `Stack` (the automatic
+     * minimum size applies only on the flex MAIN axis, so there is no horizontal
+     * floor), or in a plain block or table cell (that minimum applies to flex and
+     * grid ITEMS only, so `min-width: auto` is just `0` there). A table cell is
+     * a no-op for a different reason than it looks: auto table layout floors the
+     * cell at its content's min-content width regardless, so what makes text
+     * truncate there is `table-layout: fixed` or a `max-width` on the cell — not
+     * this prop.
+     *
+     * Opt-in rather than the default on purpose: a container that CAN shrink
+     * also VOLUNTEERS for shrink, so turning it on where the content is NOT
+     * truncatable (buttons, badges, icons) lets that content be clipped
+     * instead. Set it on the container whose text should give way, not on one
+     * holding controls.
+     *
+     * Related: `<Constrain flex="grow">` applies the same `min-width: 0` but
+     * also forces `flex: 1 1 0`, and renders a `<div>` — reach for this prop
+     * when you want only the shrink permission, or when you are inside a
+     * `<button>`/`<a>`/`<label>` where a `<div>` is invalid HTML.
+     *
+     * @default false
+     */
+    minWidth0?: boolean;
+}
+/**
+ * Vertical layout primitive that stacks children with consistent spacing.
+ * @see docs/components/Stack.md
+ */
+export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Stack/Stack.js

@@ -0,0 +1,32 @@
+'use client';
+import Stack_module_default from "./Stack.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+// src/components/Stack/Stack.tsx
+var gapClass = {
+	xs: Stack_module_default.gapXs,
+	sm: Stack_module_default.gapSm,
+	md: Stack_module_default.gapMd,
+	lg: Stack_module_default.gapLg,
+	xl: Stack_module_default.gapXl,
+	"2xl": Stack_module_default.gap2xl
+};
+var alignClass = {
+	start: Stack_module_default.alignStart,
+	center: Stack_module_default.alignCenter,
+	end: Stack_module_default.alignEnd,
+	stretch: Stack_module_default.alignStretch
+};
+/**
+* Vertical layout primitive that stacks children with consistent spacing.
+* @see docs/components/Stack.md
+*/
+var Stack = forwardRef(function Stack({ gap = "md", align = "stretch", minWidth0 = false, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: clsx(Stack_module_default.stack, gapClass[gap], alignClass[align], minWidth0 && Stack_module_default.minWidth0, className),
+		...props
+	});
+});
+export { Stack };

package/dist/components/Stack/Stack.module.js

@@ -0,0 +1,29 @@
+import "./Stack.css";
+// src/components/Stack/Stack.module.scss
+var stack = "Stack__stack__0jSI-";
+var minWidth0 = "Stack__minWidth0__M2OqR";
+var gapXs = "Stack__gapXs___hIKA";
+var gapSm = "Stack__gapSm__8B27k";
+var gapMd = "Stack__gapMd__rlM-l";
+var gapLg = "Stack__gapLg__8x92f";
+var gapXl = "Stack__gapXl__VceaF";
+var gap2xl = "Stack__gap2xl__vQ_vj";
+var alignStart = "Stack__alignStart__QLPzg";
+var alignCenter = "Stack__alignCenter__Hu_YD";
+var alignEnd = "Stack__alignEnd__WeckK";
+var alignStretch = "Stack__alignStretch__oDIlg";
+var Stack_module_default = {
+	stack,
+	minWidth0,
+	gapXs,
+	gapSm,
+	gapMd,
+	gapLg,
+	gapXl,
+	gap2xl,
+	alignStart,
+	alignCenter,
+	alignEnd,
+	alignStretch
+};
+export { alignCenter, alignEnd, alignStart, alignStretch, Stack_module_default as default, gap2xl, gapLg, gapMd, gapSm, gapXl, gapXs, minWidth0, stack };

package/dist/components/Stack/index.d.ts

@@ -0,0 +1,2 @@
+export { Stack } from './Stack.js';
+export type { StackProps, StackGap, StackAlign } from './Stack.js';