@eocrm/design-system 0.6.24 → 0.8.0

package/dist/components/ImageCrop/cropGeometry.d.ts

@@ -0,0 +1,25 @@
+import type { CropArea } from './extractCropBlob.js';
+export type Size = {
+    width: number;
+    height: number;
+};
+export type Handle = 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se';
+export declare function effectiveMin(minSize: number, image: Size): number;
+/** Contain-fit the image into the viewport minus padding (sides/top) and bottomReserve. */
+export declare function fitImage(viewport: Size, image: Size, padding: number, bottomReserve: number): {
+    scale: number;
+    offsetX: number;
+    offsetY: number;
+};
+/** Largest box of `ratio` inside the image, scaled to 80%, centered. */
+export declare function defaultCropArea(image: Size, aspectRatio?: number): CropArea;
+/** Pull a (possibly out-of-bounds) area into the image: shrink to fit holding the ratio, then clamp position. */
+export declare function normalizeCrop(area: CropArea, image: Size, aspectRatio?: number): CropArea;
+export declare function moveCrop(area: CropArea, dx: number, dy: number, image: Size): CropArea;
+/**
+ * Resize from `handle`, opposite edge/corner anchored. Edge handles only act
+ * in free mode; with a ratio they return `start` unchanged.
+ */
+export declare function resizeCrop(start: CropArea, handle: Handle, dx: number, dy: number, image: Size, minSize: number, aspectRatio?: number): CropArea;
+/** Scale around the center, clamped to image and min size, ratio held. */
+export declare function scaleCrop(area: CropArea, factor: number, image: Size, minSize: number, aspectRatio?: number): CropArea;

package/dist/components/ImageCrop/cropGeometry.js

@@ -0,0 +1,92 @@
+// src/components/ImageCrop/cropGeometry.ts
+var clamp = (v, lo, hi) => Math.min(Math.max(v, lo), hi);
+function effectiveMin(minSize, image) {
+	return Math.min(minSize, image.width, image.height);
+}
+/** Contain-fit the image into the viewport minus padding (sides/top) and bottomReserve. */
+function fitImage(viewport, image, padding, bottomReserve) {
+	const areaW = viewport.width - 2 * padding;
+	const areaH = viewport.height - padding - bottomReserve;
+	const scale = Math.min(areaW / image.width, areaH / image.height);
+	return {
+		scale,
+		offsetX: padding + (areaW - image.width * scale) / 2,
+		offsetY: padding + (areaH - image.height * scale) / 2
+	};
+}
+/** Largest box of `ratio` inside the image, scaled to 80%, centered. */
+function defaultCropArea(image, aspectRatio) {
+	const ratio = aspectRatio ?? image.width / image.height;
+	const width = (image.width / image.height > ratio ? image.height * ratio : image.width) * .8;
+	const height = width / ratio;
+	return {
+		x: (image.width - width) / 2,
+		y: (image.height - height) / 2,
+		width,
+		height
+	};
+}
+/** Pull a (possibly out-of-bounds) area into the image: shrink to fit holding the ratio, then clamp position. */
+function normalizeCrop(area, image, aspectRatio) {
+	const ratio = aspectRatio ?? area.width / area.height;
+	const width = Math.min(area.width, image.width, image.height * ratio);
+	const height = width / ratio;
+	return moveCrop({
+		...area,
+		width,
+		height
+	}, 0, 0, image);
+}
+function moveCrop(area, dx, dy, image) {
+	return {
+		...area,
+		x: clamp(area.x + dx, 0, image.width - area.width),
+		y: clamp(area.y + dy, 0, image.height - area.height)
+	};
+}
+/**
+* Resize from `handle`, opposite edge/corner anchored. Edge handles only act
+* in free mode; with a ratio they return `start` unchanged.
+*/
+function resizeCrop(start, handle, dx, dy, image, minSize, aspectRatio) {
+	const min = effectiveMin(minSize, image);
+	const east = handle.includes("e");
+	const west = handle.includes("w");
+	const north = handle.includes("n");
+	const south = handle.includes("s");
+	const right = start.x + start.width;
+	const bottom = start.y + start.height;
+	const maxW = east ? image.width - start.x : west ? right : start.width;
+	const maxH = south ? image.height - start.y : north ? bottom : start.height;
+	let width = east ? start.width + dx : west ? start.width - dx : start.width;
+	let height = south ? start.height + dy : north ? start.height - dy : start.height;
+	if (aspectRatio === void 0) {
+		if (east || west) width = clamp(width, min, maxW);
+		if (north || south) height = clamp(height, min, maxH);
+	} else {
+		if (handle.length === 1) return start;
+		if (Math.abs(width / start.width - 1) < Math.abs(height / start.height - 1)) width = height * aspectRatio;
+		width = clamp(width, Math.max(min, min * aspectRatio), Math.min(maxW, maxH * aspectRatio));
+		height = width / aspectRatio;
+	}
+	return {
+		x: west ? right - width : start.x,
+		y: north ? bottom - height : start.y,
+		width,
+		height
+	};
+}
+/** Scale around the center, clamped to image and min size, ratio held. */
+function scaleCrop(area, factor, image, minSize, aspectRatio) {
+	const min = effectiveMin(minSize, image);
+	const ratio = aspectRatio ?? area.width / area.height;
+	const width = clamp(area.width * factor, Math.max(min, min * ratio), Math.min(image.width, image.height * ratio));
+	const height = width / ratio;
+	return moveCrop({
+		x: area.x + (area.width - width) / 2,
+		y: area.y + (area.height - height) / 2,
+		width,
+		height
+	}, 0, 0, image);
+}
+export { defaultCropArea, effectiveMin, fitImage, moveCrop, normalizeCrop, resizeCrop, scaleCrop };

package/dist/components/ImageCrop/extractCropBlob.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Output MIME type and encoding options for `extractCropBlob`.
+ */
+export interface ExtractCropOptions {
+    /**
+     * Output MIME type. Default `'image/png'` (lossless).
+     * - `'image/png'` — lossless, larger file size, supports transparency.
+     * - `'image/jpeg'` — smaller, lossy, no transparency. Use for photos.
+     * - `'image/webp'` — smaller than JPEG at similar quality, good browser support since 2020.
+     */
+    type?: 'image/png' | 'image/jpeg' | 'image/webp';
+    /**
+     * Encoding quality for lossy formats (0..1). Default `0.92`. Ignored for
+     * PNG. Lower values = smaller file + more artifacts.
+     */
+    quality?: number;
+    /**
+     * Resize the output to this width in pixels (height proportional). Omit
+     * to keep the source-pixel crop dimensions (no resize). Useful for capping
+     * avatar uploads (e.g. `outputWidth: 512` for a 512×512 max). The height
+     * is computed from the source crop aspect ratio.
+     */
+    outputWidth?: number;
+}
+/**
+ * Crop region in SOURCE-IMAGE pixel coordinates (not viewport pixels). Re-
+ * exported from `./ImageCrop` to keep `extractCropBlob`'s signature self-
+ * contained (consumers can import this utility without importing the
+ * component).
+ */
+export interface CropArea {
+    /** Top-left X in source-image pixels. */
+    x: number;
+    /** Top-left Y in source-image pixels. */
+    y: number;
+    /** Crop width in source-image pixels. */
+    width: number;
+    /** Crop height in source-image pixels. */
+    height: number;
+}
+/**
+ * Extract the cropped region of an image as a Blob via an off-screen canvas.
+ *
+ * Accepts the same `src` shape as `<ImageCrop>` (string URL, File, or Blob)
+ * and a `CropArea` in source-image pixel coordinates. Returns a Promise
+ * resolving to a Blob with the configured type/quality/resize.
+ *
+ * The canonical "Save handler" recipe — the consumer's submit code calls
+ * this to produce the cropped Blob, then uploads to their backend / S3 /
+ * etc.
+ *
+ * @example
+ * const handleSave = async () => {
+ *   if (!crop) return;
+ *   const blob = await extractCropBlob(file, crop, {
+ *     type: 'image/jpeg',
+ *     quality: 0.9,
+ *     outputWidth: 512,
+ *   });
+ *   await uploadToS3(blob);
+ * };
+ *
+ * @remarks Cross-origin sources require the server to send
+ *   `Access-Control-Allow-Origin` headers. Without them, the browser taints
+ *   the canvas and `toBlob` rejects with a SecurityError. Same-origin URLs,
+ *   `data:` URLs, `blob:` URLs (from File/Blob), and properly CORS-enabled
+ *   third-party images are all safe.
+ *
+ * @throws Error if the image fails to load OR the canvas's `toBlob` returns
+ *   `null` (typically a CORS tainting failure — see `@remarks`).
+ */
+export declare function extractCropBlob(src: string | File | Blob, area: CropArea, options?: ExtractCropOptions): Promise<Blob>;

package/dist/components/ImageCrop/extractCropBlob.js

@@ -0,0 +1,74 @@
+// src/components/ImageCrop/extractCropBlob.ts
+/**
+* Internal helper — load an image source (string URL, File, or Blob) into
+* an HTMLImageElement and resolve when it's ready for canvas operations.
+*
+* Object URLs created from File/Blob are revoked after load to avoid leaks.
+*/
+function loadImage(src) {
+	return new Promise((resolve, reject) => {
+		let createdObjectUrl = false;
+		const url = typeof src === "string" ? src : (createdObjectUrl = true, URL.createObjectURL(src));
+		const img = new Image();
+		img.crossOrigin = "anonymous";
+		img.onload = () => {
+			if (createdObjectUrl) URL.revokeObjectURL(url);
+			resolve(img);
+		};
+		img.onerror = () => {
+			if (createdObjectUrl) URL.revokeObjectURL(url);
+			reject(/* @__PURE__ */ new Error("Failed to load image for cropping"));
+		};
+		img.src = url;
+	});
+}
+/**
+* Extract the cropped region of an image as a Blob via an off-screen canvas.
+*
+* Accepts the same `src` shape as `<ImageCrop>` (string URL, File, or Blob)
+* and a `CropArea` in source-image pixel coordinates. Returns a Promise
+* resolving to a Blob with the configured type/quality/resize.
+*
+* The canonical "Save handler" recipe — the consumer's submit code calls
+* this to produce the cropped Blob, then uploads to their backend / S3 /
+* etc.
+*
+* @example
+* const handleSave = async () => {
+*   if (!crop) return;
+*   const blob = await extractCropBlob(file, crop, {
+*     type: 'image/jpeg',
+*     quality: 0.9,
+*     outputWidth: 512,
+*   });
+*   await uploadToS3(blob);
+* };
+*
+* @remarks Cross-origin sources require the server to send
+*   `Access-Control-Allow-Origin` headers. Without them, the browser taints
+*   the canvas and `toBlob` rejects with a SecurityError. Same-origin URLs,
+*   `data:` URLs, `blob:` URLs (from File/Blob), and properly CORS-enabled
+*   third-party images are all safe.
+*
+* @throws Error if the image fails to load OR the canvas's `toBlob` returns
+*   `null` (typically a CORS tainting failure — see `@remarks`).
+*/
+async function extractCropBlob(src, area, options = {}) {
+	const { type = "image/png", quality = .92, outputWidth } = options;
+	const img = await loadImage(src);
+	const outW = outputWidth ?? area.width;
+	const outH = outputWidth ? outputWidth * (area.height / area.width) : area.height;
+	const canvas = document.createElement("canvas");
+	canvas.width = outW;
+	canvas.height = outH;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) throw new Error("Failed to get 2D canvas context");
+	ctx.drawImage(img, area.x, area.y, area.width, area.height, 0, 0, outW, outH);
+	return new Promise((resolve, reject) => {
+		canvas.toBlob((blob) => {
+			if (blob) resolve(blob);
+			else reject(/* @__PURE__ */ new Error("Canvas toBlob returned null"));
+		}, type, quality);
+	});
+}
+export { extractCropBlob };

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

@@ -0,0 +1,6 @@
+export { ImageCrop } from './ImageCrop.js';
+export type { ImageCropProps, ImageCropAspectOption, ImageCropAspectRatio, CropArea, } from './ImageCrop.js';
+export { extractCropBlob } from './extractCropBlob.js';
+export type { ExtractCropOptions } from './extractCropBlob.js';
+export { useCropPreview } from './useCropPreview.js';
+export type { UseCropPreviewOptions, UseCropPreviewResult } from './useCropPreview.js';

package/dist/components/ImageCrop/useCropPreview.d.ts

@@ -0,0 +1,100 @@
+import { type CropArea, type ExtractCropOptions } from './extractCropBlob.js';
+/**
+ * Options for `useCropPreview`. All optional; sensible defaults match the
+ * canonical "avatar picker" recipe (JPEG, q=0.9, 256-wide preview).
+ */
+export interface UseCropPreviewOptions extends ExtractCropOptions {
+    /**
+     * Milliseconds to wait after the latest crop change before encoding.
+     * Default `120`. Set higher for very large source images (4K phone
+     * photos can spend ~100ms inside `drawImage` + `toBlob`); set to `0` to
+     * encode synchronously on every change (useful in tests).
+     */
+    debounceMs?: number;
+}
+/**
+ * Result of `useCropPreview`. `encoding` is `true` between a crop change
+ * and the matching preview's arrival; consumers can fade the `<img>` or
+ * overlay a spinner during that window.
+ */
+export interface UseCropPreviewResult {
+    /**
+     * Object URL of the latest preview Blob. `null` until the first encode
+     * completes (or when `src`/`crop` is null). The URL is owned by the
+     * hook — it auto-revokes the previous URL whenever a new one is set
+     * AND on unmount. Do NOT call `URL.revokeObjectURL` on it yourself.
+     */
+    previewUrl: string | null;
+    /**
+     * The latest encoded Blob itself. Same content as the URL; useful when
+     * the Save handler needs to POST the cropped result — no need to call
+     * `extractCropBlob` a second time, just `formData.append('file', previewBlob, 'cropped.jpg')`.
+     * `null` before the first encode completes.
+     */
+    previewBlob: Blob | null;
+    /** Latest preview's encoded byte size, or `null` before the first encode. */
+    previewSize: number | null;
+    /**
+     * `true` from the moment `crop` (or any option) changes until the new
+     * preview lands. Use to drive a loading affordance (CircularProgress,
+     * opacity fade, "Re-encoding…" label).
+     */
+    encoding: boolean;
+}
+/**
+ * Live-encoded preview of a cropped image. Produces a Blob via
+ * `extractCropBlob` on every `crop` change (debounced), exposes the
+ * resulting object URL, byte size, and an `encoding` flag for loading UI.
+ *
+ * Designed for the canonical CRM "avatar / cover photo" pick → crop → save
+ * flow: the user sees the cropped result update live as they drag/zoom,
+ * and the consumer's Save handler can `await extractCropBlob(...)` once
+ * the user confirms (the hook does NOT keep the Blob around — only the
+ * URL — so the Save call re-encodes; that's fine because the user only
+ * Saves once per session).
+ *
+ * Internally:
+ * - Debounces the encode by `debounceMs` (default 120) so rapid drags/zooms
+ *   don't spam the encoder.
+ * - Uses a generation counter to discard stale in-flight encodes — without
+ *   this, a slow encode from an older crop could resolve AFTER a newer one
+ *   and overwrite the preview img with the wrong frame.
+ * - Auto-revokes its object URLs on replacement and on unmount.
+ *
+ * @example
+ * // Avatar picker:
+ * const [file, setFile] = useState<File | null>(null);
+ * const [crop, setCrop] = useState<CropArea | null>(null);
+ * const { previewUrl, encoding } = useCropPreview(file, crop, {
+ *   type: 'image/jpeg',
+ *   quality: 0.9,
+ *   outputWidth: 256,
+ * });
+ *
+ * return (
+ *   <Stack gap="md">
+ *     <FileUpload onFilesAdded={([f]) => setFile(f)} ... />
+ *     {file && (
+ *       <>
+ *         <ImageCrop src={file} value={crop} onChange={setCrop} aspectRatio={1} />
+ *         {previewUrl && (
+ *           <img src={previewUrl} style={{ opacity: encoding ? 0.5 : 1 }} />
+ *         )}
+ *       </>
+ *     )}
+ *   </Stack>
+ * );
+ *
+ * @remarks When NOT to use
+ * - For one-shot extraction (the user clicks "Save" and you need the Blob
+ *   once). Call `extractCropBlob` directly in the Save handler.
+ * - For server-side cropping. Send the `crop` coordinates instead.
+ *
+ * @remarks Anti-patterns
+ * - ❌ Calling `URL.revokeObjectURL(previewUrl)` manually. The hook owns
+ *   the URL lifecycle. Revoking it yourself produces broken-image renders.
+ * - ❌ Using the hook with `outputWidth` matching the source image (e.g.,
+ *   4080 for a 4080×3072 photo). The encode becomes expensive on every
+ *   drag tick; cap `outputWidth` at the display size you actually need.
+ */
+export declare function useCropPreview(src: string | File | Blob | null | undefined, crop: CropArea | null, options?: UseCropPreviewOptions): UseCropPreviewResult;

package/dist/components/ImageCrop/useCropPreview.js

@@ -0,0 +1,122 @@
+'use client';
+import { extractCropBlob } from "./extractCropBlob.js";
+import { useEffect, useRef, useState } from "react";
+// src/components/ImageCrop/useCropPreview.ts
+/**
+* Live-encoded preview of a cropped image. Produces a Blob via
+* `extractCropBlob` on every `crop` change (debounced), exposes the
+* resulting object URL, byte size, and an `encoding` flag for loading UI.
+*
+* Designed for the canonical CRM "avatar / cover photo" pick → crop → save
+* flow: the user sees the cropped result update live as they drag/zoom,
+* and the consumer's Save handler can `await extractCropBlob(...)` once
+* the user confirms (the hook does NOT keep the Blob around — only the
+* URL — so the Save call re-encodes; that's fine because the user only
+* Saves once per session).
+*
+* Internally:
+* - Debounces the encode by `debounceMs` (default 120) so rapid drags/zooms
+*   don't spam the encoder.
+* - Uses a generation counter to discard stale in-flight encodes — without
+*   this, a slow encode from an older crop could resolve AFTER a newer one
+*   and overwrite the preview img with the wrong frame.
+* - Auto-revokes its object URLs on replacement and on unmount.
+*
+* @example
+* // Avatar picker:
+* const [file, setFile] = useState<File | null>(null);
+* const [crop, setCrop] = useState<CropArea | null>(null);
+* const { previewUrl, encoding } = useCropPreview(file, crop, {
+*   type: 'image/jpeg',
+*   quality: 0.9,
+*   outputWidth: 256,
+* });
+*
+* return (
+*   <Stack gap="md">
+*     <FileUpload onFilesAdded={([f]) => setFile(f)} ... />
+*     {file && (
+*       <>
+*         <ImageCrop src={file} value={crop} onChange={setCrop} aspectRatio={1} />
+*         {previewUrl && (
+*           <img src={previewUrl} style={{ opacity: encoding ? 0.5 : 1 }} />
+*         )}
+*       </>
+*     )}
+*   </Stack>
+* );
+*
+* @remarks When NOT to use
+* - For one-shot extraction (the user clicks "Save" and you need the Blob
+*   once). Call `extractCropBlob` directly in the Save handler.
+* - For server-side cropping. Send the `crop` coordinates instead.
+*
+* @remarks Anti-patterns
+* - ❌ Calling `URL.revokeObjectURL(previewUrl)` manually. The hook owns
+*   the URL lifecycle. Revoking it yourself produces broken-image renders.
+* - ❌ Using the hook with `outputWidth` matching the source image (e.g.,
+*   4080 for a 4080×3072 photo). The encode becomes expensive on every
+*   drag tick; cap `outputWidth` at the display size you actually need.
+*/
+function useCropPreview(src, crop, options = {}) {
+	const { type = "image/jpeg", quality = .9, outputWidth, debounceMs = 120 } = options;
+	const [previewUrl, setPreviewUrl] = useState(null);
+	const [previewBlob, setPreviewBlob] = useState(null);
+	const [previewSize, setPreviewSize] = useState(null);
+	const [encoding, setEncoding] = useState(false);
+	const urlRef = useRef(null);
+	const genRef = useRef(0);
+	useEffect(() => {
+		if (!src || !crop) {
+			if (urlRef.current) {
+				URL.revokeObjectURL(urlRef.current);
+				urlRef.current = null;
+			}
+			setPreviewUrl(null);
+			setPreviewBlob(null);
+			setPreviewSize(null);
+			setEncoding(false);
+			return;
+		}
+		const gen = ++genRef.current;
+		setEncoding(true);
+		const handle = setTimeout(async () => {
+			try {
+				const blob = await extractCropBlob(src, crop, {
+					type,
+					quality,
+					outputWidth
+				});
+				if (gen !== genRef.current) return;
+				if (urlRef.current) URL.revokeObjectURL(urlRef.current);
+				const url = URL.createObjectURL(blob);
+				urlRef.current = url;
+				setPreviewUrl(url);
+				setPreviewBlob(blob);
+				setPreviewSize(blob.size);
+				setEncoding(false);
+			} catch {
+				if (gen !== genRef.current) return;
+				setEncoding(false);
+			}
+		}, debounceMs);
+		return () => clearTimeout(handle);
+	}, [
+		src,
+		crop,
+		type,
+		quality,
+		outputWidth,
+		debounceMs
+	]);
+	useEffect(() => () => {
+		if (urlRef.current) URL.revokeObjectURL(urlRef.current);
+	}, []);
+	return {
+		previewUrl,
+		previewBlob,
+		previewSize,
+		encoding
+	};
+}
+export { useCropPreview };

package/dist/components/Indent/Indent.css

@@ -0,0 +1,36 @@
+:root {
+  --indent-gutter-xs: var(--space-1);
+  --indent-gutter-sm: var(--space-2);
+  --indent-gutter-md: var(--space-3);
+  --indent-gutter-lg: var(--space-4);
+  --indent-gutter-xl: var(--space-6);
+  --indent-gutter-2xl: var(--space-8);
+}
+
+.Indent__indent__KrpWS {
+  padding-inline-start: calc(var(--indent-level, 1) * var(--indent-gutter));
+}
+
+.Indent__gutter-xs__8ovkm {
+  --indent-gutter: var(--indent-gutter-xs);
+}
+
+.Indent__gutter-sm__nW4Ec {
+  --indent-gutter: var(--indent-gutter-sm);
+}
+
+.Indent__gutter-md__x6sS8 {
+  --indent-gutter: var(--indent-gutter-md);
+}
+
+.Indent__gutter-lg__62_hL {
+  --indent-gutter: var(--indent-gutter-lg);
+}
+
+.Indent__gutter-xl__CXf3h {
+  --indent-gutter: var(--indent-gutter-xl);
+}
+
+.Indent__gutter-2xl__xC6zH {
+  --indent-gutter: var(--indent-gutter-2xl);
+}

package/dist/components/Indent/Indent.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Per-level indent size — a spacing step. */
+export type IndentGutter = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface IndentProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Nesting depth — multiplies the gutter. `0` = flush (no indent, e.g. a
+     * root-level comment). Defaults to `1` (one gutter). Negative values clamp to `0`.
+     */
+    level?: number;
+    /**
+     * Per-level indent size — a spacing step. Defaults to `'lg'` (16px per level).
+     * - `xs` 4px · `sm` 8px · `md` 12px · `lg` 16px · `xl` 24px · `2xl` 32px
+     */
+    gutter?: IndentGutter;
+    /** The nested content to indent. Required — an Indent with nothing inside indents nothing. */
+    children: ReactNode;
+}
+/**
+ * Indentation primitive — indents its own box by `level × gutter`.
+ * @see docs/components/Indent.md
+ */
+export declare const Indent: import("react").ForwardRefExoticComponent<IndentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Indent/Indent.js

@@ -0,0 +1,24 @@
+'use client';
+import Indent_module_default from "./Indent.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+// src/components/Indent/Indent.tsx
+/**
+* Indentation primitive — indents its own box by `level × gutter`.
+* @see docs/components/Indent.md
+*/
+var Indent = forwardRef(function Indent({ level = 1, gutter = "lg", className, style, children, ...rest }, ref) {
+	const indentLevel = Number.isFinite(level) ? Math.max(0, level) : 0;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: clsx(Indent_module_default.indent, Indent_module_default[`gutter-${gutter}`], className),
+		style: {
+			...style,
+			["--indent-level"]: indentLevel
+		},
+		...rest,
+		children
+	});
+});
+export { Indent };

package/dist/components/Indent/Indent.module.js

@@ -0,0 +1,13 @@
+import "./Indent.css";
+// src/components/Indent/Indent.module.scss
+var indent = "Indent__indent__KrpWS";
+var Indent_module_default = {
+	indent,
+	"gutter-xs": "Indent__gutter-xs__8ovkm",
+	"gutter-sm": "Indent__gutter-sm__nW4Ec",
+	"gutter-md": "Indent__gutter-md__x6sS8",
+	"gutter-lg": "Indent__gutter-lg__62_hL",
+	"gutter-xl": "Indent__gutter-xl__CXf3h",
+	"gutter-2xl": "Indent__gutter-2xl__xC6zH"
+};
+export { Indent_module_default as default, indent };

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

@@ -0,0 +1,2 @@
+export { Indent } from './Indent.js';
+export type { IndentProps, IndentGutter } from './Indent.js';