@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/containers/FlexItem.d.ts

@@ -1,50 +0,0 @@
-import { type CSSProperties } from "react";
-import { AlignItems, JustifyContent } from "./FlexWrapper";
-export interface FlexItemProps {
-    /** @default "static" */
-    position?: CSSProperties["position"];
-    /** flex-grow within the parent flex container. @default 0 */
-    grow?: number;
-    /** flex-shrink within the parent flex container. @default 1 */
-    shrink?: number;
-    /** flex-basis. A number is px. @default "auto" */
-    basis?: number | string;
-    overflow?: CSSProperties["overflow"];
-    whiteSpace?: CSSProperties["whiteSpace"];
-    textOverflow?: CSSProperties["textOverflow"];
-    /** A number is px. */
-    width?: number | string;
-    /** A number is px. */
-    height?: number | string;
-    /** `width: 100%`. Takes precedence over `width`. */
-    fillWidth?: boolean;
-    /** `height: 100%`. Takes precedence over `height`. */
-    fillHeight?: boolean;
-    /**
-     * Defaults to "flex" (not "block"): a FlexItem is itself a flex container,
-     * which sidesteps inline-baseline gaps around svg/icon children and makes
-     * alignItems/justifyContent work without extra props.
-     */
-    display?: CSSProperties["display"];
-    alignItems?: AlignItems;
-    justifyContent?: JustifyContent;
-    /**
-     * Accepts 0 explicitly - `minWidth={0}` is the standard way to let a flex
-     * child shrink below its content size so nested text can ellipsize.
-     */
-    minWidth?: number | string;
-    minHeight?: number | string;
-    maxWidth?: number | string;
-    maxHeight?: number | string;
-    padding?: CSSProperties["padding"];
-    /** Also flips the cursor to `pointer`. */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-}
-/**
- * A single child of a `FlexWrapper`, for when one item needs its own grow,
- * shrink, or sizing rules. Reach for it only when the wrapper can't express it.
- */
-declare const FlexItem: import("react").ForwardRefExoticComponent<FlexItemProps & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export default FlexItem;

package/dist/containers/FlexItem.js

@@ -1,91 +0,0 @@
-import { getCssSizeValue } from "../utils/linaria.js";
-/* empty css                   */
-import { styled } from "@linaria/react";
-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 }) => $alignItems ?? "inherit";
-var _exp4 = () => ({ $justifyContent }) => $justifyContent ?? "flex-start";
-var _exp5 = () => ({ $grow }) => $grow ?? 0;
-var _exp6 = () => ({ $shrink }) => $shrink ?? 1;
-var _exp7 = () => ({ $basis }) => $basis != null ? getCssSizeValue($basis) : "auto";
-var _exp8 = () => ({ $width, $fillWidth }) => {
-	if ($fillWidth) return "100%";
-	if ($width != null) return getCssSizeValue($width, "0");
-	return "auto";
-};
-var _exp9 = () => ({ $height, $fillHeight }) => {
-	if ($fillHeight) return "100%";
-	if ($height != null) return getCssSizeValue($height);
-	return "auto";
-};
-var _exp0 = () => ({ $minWidth }) => $minWidth != null ? getCssSizeValue($minWidth) : "auto";
-var _exp1 = () => ({ $maxWidth }) => $maxWidth != null ? getCssSizeValue($maxWidth) : "none";
-var _exp10 = () => ({ $minHeight }) => $minHeight != null ? getCssSizeValue($minHeight) : "auto";
-var _exp11 = () => ({ $maxHeight }) => $maxHeight != null ? getCssSizeValue($maxHeight) : "none";
-var _exp12 = () => ({ $overflow }) => $overflow ?? "visible";
-var _exp13 = () => ({ $whiteSpace }) => $whiteSpace ?? "normal";
-var _exp14 = () => ({ $textOverflow }) => $textOverflow ?? "clip";
-var _exp15 = () => ({ $padding }) => getCssSizeValue($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()]
-	}
-});
-/**
-* A single child of a `FlexWrapper`, for when one item needs its own grow,
-* shrink, or sizing rules. Reach for it only when the wrapper can't express it.
-*/
-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

@@ -1,96 +0,0 @@
-/** Main-axis direction of the flex container. */
-export declare enum FlexDirection {
-    ROW = "row",
-    COLUMN = "column",
-    ROW_REVERSE = "row-reverse",
-    COLUMN_REVERSE = "column-reverse"
-}
-/** Cross-axis alignment of children (`align-items`). */
-export declare enum AlignItems {
-    START = "start",
-    CENTER = "center",
-    END = "end",
-    BASELINE = "baseline",
-    STRETCH = "stretch"
-}
-/** Main-axis distribution of children (`justify-content`). */
-export declare enum JustifyContent {
-    START = "start",
-    CENTER = "center",
-    END = "end",
-    SPACE_BETWEEN = "space-between",
-    SPACE_AROUND = "space-around",
-    SPACE_EVENLY = "space-evenly"
-}
-/** Wrapping behavior when children overflow the main axis. */
-export declare enum FlexWrap {
-    NOWRAP = "nowrap",
-    WRAP = "wrap",
-    WRAP_REVERSE = "wrap-reverse"
-}
-/** Named steps on the spacing scale. `gap` also accepts a raw number of px. */
-export declare enum FlexGap {
-    NONE = "0",
-    XXSMALL = "2px",
-    XSMALL = "4px",
-    SMALL = "8px",
-    MEDIUM = "12px",
-    LARGE = "16px",
-    XLARGE = "24px",
-    XXLARGE = "32px"
-}
-export interface FlexWrapperProps {
-    /** @default FlexDirection.ROW */
-    direction?: FlexDirection;
-    /** @default AlignItems.START */
-    alignItems?: AlignItems;
-    /** @default JustifyContent.START */
-    justifyContent?: JustifyContent;
-    /** @default FlexWrap.NOWRAP */
-    wrap?: FlexWrap;
-    /** Space between children. A number is px; use `FlexGap` for the scale. */
-    gap?: number | string;
-    /**
-     * flex-grow / -shrink / -basis of the wrapper itself, for when it is also a
-     * child of another flex container. Saves nesting it in a FlexItem.
-     */
-    grow?: number;
-    shrink?: number;
-    basis?: number | string;
-    /** A number is px. @default "auto" */
-    width?: number | string;
-    /** A number is px. @default "auto" */
-    height?: number | string;
-    /** Pass `0` to let this shrink below its content so nested text can ellipsize. */
-    minWidth?: number | string;
-    maxWidth?: number | string;
-    minHeight?: number | string;
-    maxHeight?: number | string;
-    /** `width: 100%`. Takes precedence over `width`. */
-    fillWidth?: boolean;
-    /** `height: 100%`. Takes precedence over `height`. */
-    fillHeight?: boolean;
-    /** @default "visible" */
-    overflow?: React.CSSProperties["overflow"];
-    /** Inner spacing. Use this rather than `margin` — DLS spaces with gap and padding. */
-    padding?: React.CSSProperties["padding"];
-    /** Escape hatch. DLS spaces with `gap` and `padding` — reach for those first. */
-    margin?: React.CSSProperties["margin"];
-    /** Also flips the cursor to `pointer`. */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onMouseDown?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
-}
-/**
- * The layout workhorse — a `display: flex` div with every flex and sizing knob
- * as a prop. Compose UI out of these plus whitespace rather than decorating.
- *
- * Sizing props respect an explicit `0`, so `minWidth={0}` works as the standard
- * fix for letting a flex child shrink enough for nested text to ellipsize.
- */
-declare const FlexWrapper: import("react").ForwardRefExoticComponent<FlexWrapperProps & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export default FlexWrapper;

package/dist/containers/FlexWrapper.js

@@ -1,143 +0,0 @@
-import { getCssSizeValue } from "../utils/linaria.js";
-/* empty css                      */
-import { styled } from "@linaria/react";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/containers/FlexWrapper.tsx
-/** Main-axis direction of the flex container. */
-var FlexDirection = /* @__PURE__ */ function(FlexDirection) {
-	FlexDirection["ROW"] = "row";
-	FlexDirection["COLUMN"] = "column";
-	FlexDirection["ROW_REVERSE"] = "row-reverse";
-	FlexDirection["COLUMN_REVERSE"] = "column-reverse";
-	return FlexDirection;
-}({});
-/** Cross-axis alignment of children (`align-items`). */
-var AlignItems = /* @__PURE__ */ function(AlignItems) {
-	AlignItems["START"] = "start";
-	AlignItems["CENTER"] = "center";
-	AlignItems["END"] = "end";
-	AlignItems["BASELINE"] = "baseline";
-	AlignItems["STRETCH"] = "stretch";
-	return AlignItems;
-}({});
-/** Main-axis distribution of children (`justify-content`). */
-var JustifyContent = /* @__PURE__ */ function(JustifyContent) {
-	JustifyContent["START"] = "start";
-	JustifyContent["CENTER"] = "center";
-	JustifyContent["END"] = "end";
-	JustifyContent["SPACE_BETWEEN"] = "space-between";
-	JustifyContent["SPACE_AROUND"] = "space-around";
-	JustifyContent["SPACE_EVENLY"] = "space-evenly";
-	return JustifyContent;
-}({});
-/** Wrapping behavior when children overflow the main axis. */
-var FlexWrap = /* @__PURE__ */ function(FlexWrap) {
-	FlexWrap["NOWRAP"] = "nowrap";
-	FlexWrap["WRAP"] = "wrap";
-	FlexWrap["WRAP_REVERSE"] = "wrap-reverse";
-	return FlexWrap;
-}({});
-/** Named steps on the spacing scale. `gap` also accepts a raw number of px. */
-var FlexGap = /* @__PURE__ */ function(FlexGap) {
-	FlexGap["NONE"] = "0";
-	FlexGap["XXSMALL"] = "2px";
-	FlexGap["XSMALL"] = "4px";
-	FlexGap["SMALL"] = "8px";
-	FlexGap["MEDIUM"] = "12px";
-	FlexGap["LARGE"] = "16px";
-	FlexGap["XLARGE"] = "24px";
-	FlexGap["XXLARGE"] = "32px";
-	return FlexGap;
-}({});
-var _exp = () => ({ direction = "row" }) => direction;
-var _exp2 = () => ({ alignItems = "start" }) => alignItems;
-var _exp3 = () => ({ justifyContent = "start" }) => justifyContent;
-var _exp4 = () => ({ gap }) => getCssSizeValue(gap);
-var _exp5 = () => ({ wrap = "nowrap" }) => wrap;
-var _exp6 = () => ({ grow }) => grow ?? "initial";
-var _exp7 = () => ({ shrink }) => shrink ?? "initial";
-var _exp8 = () => ({ basis }) => basis != null ? getCssSizeValue(basis) : "initial";
-var _exp9 = () => ({ width, fillWidth }) => {
-	if (fillWidth) return "100%";
-	if (width != null) return getCssSizeValue(width, "0");
-	return "auto";
-};
-var _exp0 = () => ({ height, fillHeight }) => {
-	if (fillHeight) return "100%";
-	if (height != null) return getCssSizeValue(height);
-	return "auto";
-};
-var _exp1 = () => ({ minWidth }) => minWidth != null ? getCssSizeValue(minWidth) : "auto";
-var _exp10 = () => ({ maxWidth }) => maxWidth != null ? getCssSizeValue(maxWidth) : "none";
-var _exp11 = () => ({ minHeight }) => minHeight != null ? getCssSizeValue(minHeight) : "auto";
-var _exp12 = () => ({ maxHeight }) => maxHeight != null ? getCssSizeValue(maxHeight) : "none";
-var _exp13 = () => ({ overflow = "visible" }) => overflow;
-var _exp14 = () => ({ padding }) => getCssSizeValue(padding, "0");
-var _exp15 = () => ({ margin }) => getCssSizeValue(margin, "0");
-var _exp16 = () => ({ onClick }) => onClick ? "pointer" : "inherit";
-var StyledFlexWrapper = /*#__PURE__*/ styled("div")({
-	name: "StyledFlexWrapper",
-	class: "s12krdms",
-	propsAsIs: false,
-	vars: {
-		"s12krdms-0": [_exp()],
-		"s12krdms-1": [_exp2()],
-		"s12krdms-2": [_exp3()],
-		"s12krdms-3": [_exp4()],
-		"s12krdms-4": [_exp5()],
-		"s12krdms-5": [_exp6()],
-		"s12krdms-6": [_exp7()],
-		"s12krdms-7": [_exp8()],
-		"s12krdms-8": [_exp9()],
-		"s12krdms-9": [_exp0()],
-		"s12krdms-10": [_exp1()],
-		"s12krdms-11": [_exp10()],
-		"s12krdms-12": [_exp11()],
-		"s12krdms-13": [_exp12()],
-		"s12krdms-14": [_exp13()],
-		"s12krdms-15": [_exp14()],
-		"s12krdms-16": [_exp15()],
-		"s12krdms-17": [_exp16()]
-	}
-});
-/**
-* The layout workhorse — a `display: flex` div with every flex and sizing knob
-* as a prop. Compose UI out of these plus whitespace rather than decorating.
-*
-* Sizing props respect an explicit `0`, so `minWidth={0}` works as the standard
-* fix for letting a flex child shrink enough for nested text to ellipsize.
-*/
-var FlexWrapper = forwardRef(({ children, direction, alignItems, justifyContent, wrap, gap, grow, shrink, basis, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, fillHeight = false, overflow, padding, margin, onClick, onMouseDown, onMouseEnter, onMouseLeave, onScroll }, ref) => {
-	return /* @__PURE__ */ jsx(StyledFlexWrapper, {
-		ref,
-		direction,
-		alignItems,
-		justifyContent,
-		wrap,
-		gap,
-		grow,
-		shrink,
-		basis,
-		width,
-		height,
-		minWidth,
-		maxWidth,
-		minHeight,
-		maxHeight,
-		fillWidth,
-		fillHeight,
-		overflow,
-		padding,
-		margin,
-		onClick,
-		onMouseDown,
-		onMouseEnter,
-		onMouseLeave,
-		onScroll,
-		children
-	});
-});
-FlexWrapper.displayName = "FlexWrapper";
-//#endregion
-export { AlignItems, FlexDirection, FlexGap, FlexWrap, JustifyContent, FlexWrapper as default };

package/dist/containers/GridWrapper.d.ts

@@ -1,79 +0,0 @@
-import type { PropsWithChildren } from "react";
-/** Block-axis alignment of each item inside its own grid area (`align-items`). */
-export declare enum GridAlignItems {
-    START = "START",
-    CENTER = "CENTER",
-    END = "END",
-    STRETCH = "STRETCH"
-}
-/** Inline-axis alignment of each item inside its own grid area (`justify-items`). */
-export declare enum GridJustifyItems {
-    START = "START",
-    CENTER = "CENTER",
-    END = "END",
-    STRETCH = "STRETCH"
-}
-/** Inline-axis distribution of the whole grid when it's narrower than its container. */
-export declare enum GridJustifyContent {
-    START = "START",
-    CENTER = "CENTER",
-    END = "END",
-    SPACE_BETWEEN = "SPACE_BETWEEN",
-    SPACE_AROUND = "SPACE_AROUND",
-    SPACE_EVENLY = "SPACE_EVENLY",
-    STRETCH = "STRETCH"
-}
-/** Block-axis distribution of the whole grid when it's shorter than its container. */
-export declare enum GridAlignContent {
-    START = "START",
-    CENTER = "CENTER",
-    END = "END",
-    SPACE_BETWEEN = "SPACE_BETWEEN",
-    SPACE_AROUND = "SPACE_AROUND",
-    SPACE_EVENLY = "SPACE_EVENLY",
-    STRETCH = "STRETCH"
-}
-export interface GridWrapperProps {
-    /** A number becomes `repeat(n, 1fr)`; a string is used as-is ("200px 1fr"). @default 1 */
-    columns?: number | string;
-    /** A number becomes `repeat(n, 1fr)`; a string is used as-is. @default "auto" */
-    rows?: number | string;
-    /** Space between items on both axes. A number is px. */
-    gap?: number | string;
-    /** Overrides `gap` on the row axis only. */
-    rowGap?: number | string;
-    /** Overrides `gap` on the column axis only. */
-    columnGap?: number | string;
-    /** @default GridAlignItems.STRETCH */
-    alignItems?: GridAlignItems;
-    /** @default GridJustifyItems.STRETCH */
-    justifyItems?: GridJustifyItems;
-    /** @default GridAlignContent.START */
-    alignContent?: GridAlignContent;
-    /** @default GridJustifyContent.START */
-    justifyContent?: GridJustifyContent;
-    /** A number is px. @default "auto" */
-    width?: number | string;
-    /** A number is px. @default "auto" */
-    height?: number | string;
-    minWidth?: number | string;
-    maxWidth?: number | string;
-    minHeight?: number | string;
-    maxHeight?: number | string;
-    /** `width: 100%`. Takes precedence over `width`. */
-    fillWidth?: boolean;
-    /** `height: 100%`. Takes precedence over `height`. */
-    fillHeight?: boolean;
-    /** Inner spacing. A number is px. */
-    padding?: number | string;
-    /** Escape hatch. DLS spaces with `gap` and `padding` — reach for those first. */
-    margin?: number | string;
-    /** @default "visible" */
-    overflow?: React.CSSProperties["overflow"];
-}
-/**
- * A `display: grid` container. Use it when children need to line up across both
- * axes; for a single row or column `FlexWrapper` is the lighter choice.
- */
-declare const GridWrapper: ({ children, columns, rows, gap, rowGap, columnGap, alignItems, justifyItems, alignContent, justifyContent, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth, fillHeight, padding, margin, overflow, }: PropsWithChildren<GridWrapperProps>) => import("react").JSX.Element;
-export default GridWrapper;

package/dist/containers/GridWrapper.js

@@ -1,125 +0,0 @@
-import { getCssSizeValue } from "../utils/linaria.js";
-/* empty css                      */
-import { styled } from "@linaria/react";
-import { jsx } from "react/jsx-runtime";
-//#region src/containers/GridWrapper.tsx
-/** Block-axis alignment of each item inside its own grid area (`align-items`). */
-var GridAlignItems = /* @__PURE__ */ function(GridAlignItems) {
-	GridAlignItems["START"] = "START";
-	GridAlignItems["CENTER"] = "CENTER";
-	GridAlignItems["END"] = "END";
-	GridAlignItems["STRETCH"] = "STRETCH";
-	return GridAlignItems;
-}({});
-/** Inline-axis alignment of each item inside its own grid area (`justify-items`). */
-var GridJustifyItems = /* @__PURE__ */ function(GridJustifyItems) {
-	GridJustifyItems["START"] = "START";
-	GridJustifyItems["CENTER"] = "CENTER";
-	GridJustifyItems["END"] = "END";
-	GridJustifyItems["STRETCH"] = "STRETCH";
-	return GridJustifyItems;
-}({});
-/** Inline-axis distribution of the whole grid when it's narrower than its container. */
-var GridJustifyContent = /* @__PURE__ */ function(GridJustifyContent) {
-	GridJustifyContent["START"] = "START";
-	GridJustifyContent["CENTER"] = "CENTER";
-	GridJustifyContent["END"] = "END";
-	GridJustifyContent["SPACE_BETWEEN"] = "SPACE_BETWEEN";
-	GridJustifyContent["SPACE_AROUND"] = "SPACE_AROUND";
-	GridJustifyContent["SPACE_EVENLY"] = "SPACE_EVENLY";
-	GridJustifyContent["STRETCH"] = "STRETCH";
-	return GridJustifyContent;
-}({});
-/** Block-axis distribution of the whole grid when it's shorter than its container. */
-var GridAlignContent = /* @__PURE__ */ function(GridAlignContent) {
-	GridAlignContent["START"] = "START";
-	GridAlignContent["CENTER"] = "CENTER";
-	GridAlignContent["END"] = "END";
-	GridAlignContent["SPACE_BETWEEN"] = "SPACE_BETWEEN";
-	GridAlignContent["SPACE_AROUND"] = "SPACE_AROUND";
-	GridAlignContent["SPACE_EVENLY"] = "SPACE_EVENLY";
-	GridAlignContent["STRETCH"] = "STRETCH";
-	return GridAlignContent;
-}({});
-var _exp = () => ({ columns = 1 }) => typeof columns === "number" ? `repeat(${columns}, 1fr)` : columns;
-var _exp2 = () => ({ rows }) => rows ? typeof rows === "number" ? `repeat(${rows}, 1fr)` : rows : "auto";
-var _exp3 = () => ({ gap }) => getCssSizeValue(gap);
-var _exp4 = () => ({ rowGap, gap }) => getCssSizeValue(rowGap ?? gap);
-var _exp5 = () => ({ columnGap, gap }) => getCssSizeValue(columnGap ?? gap);
-var _exp6 = () => ({ alignItems = "STRETCH" }) => alignItems;
-var _exp7 = () => ({ justifyItems = "STRETCH" }) => justifyItems;
-var _exp8 = () => ({ alignContent = "START" }) => alignContent;
-var _exp9 = () => ({ justifyContent = "START" }) => justifyContent;
-var _exp0 = () => ({ width, fillWidth }) => {
-	if (fillWidth) return "100%";
-	if (width) return getCssSizeValue(width);
-	return "auto";
-};
-var _exp1 = () => ({ height, fillHeight }) => {
-	if (fillHeight) return "100%";
-	if (height) return getCssSizeValue(height);
-	return "auto";
-};
-var _exp10 = () => ({ minWidth }) => minWidth ? getCssSizeValue(minWidth) : "auto";
-var _exp11 = () => ({ maxWidth }) => maxWidth ? getCssSizeValue(maxWidth) : "none";
-var _exp12 = () => ({ minHeight }) => minHeight ? getCssSizeValue(minHeight) : "auto";
-var _exp13 = () => ({ maxHeight }) => maxHeight ? getCssSizeValue(maxHeight) : "none";
-var _exp14 = () => ({ overflow = "visible" }) => overflow;
-var _exp15 = () => ({ padding }) => padding ? getCssSizeValue(padding) : "0";
-var _exp16 = () => ({ margin }) => margin ? getCssSizeValue(margin) : "0";
-var StyledGridWrapper = /*#__PURE__*/ styled("div")({
-	name: "StyledGridWrapper",
-	class: "s40bxfr",
-	propsAsIs: false,
-	vars: {
-		"s40bxfr-0": [_exp()],
-		"s40bxfr-1": [_exp2()],
-		"s40bxfr-2": [_exp3()],
-		"s40bxfr-3": [_exp4()],
-		"s40bxfr-4": [_exp5()],
-		"s40bxfr-5": [_exp6()],
-		"s40bxfr-6": [_exp7()],
-		"s40bxfr-7": [_exp8()],
-		"s40bxfr-8": [_exp9()],
-		"s40bxfr-9": [_exp0()],
-		"s40bxfr-10": [_exp1()],
-		"s40bxfr-11": [_exp10()],
-		"s40bxfr-12": [_exp11()],
-		"s40bxfr-13": [_exp12()],
-		"s40bxfr-14": [_exp13()],
-		"s40bxfr-15": [_exp14()],
-		"s40bxfr-16": [_exp15()],
-		"s40bxfr-17": [_exp16()]
-	}
-});
-/**
-* A `display: grid` container. Use it when children need to line up across both
-* axes; for a single row or column `FlexWrapper` is the lighter choice.
-*/
-var GridWrapper = ({ children, columns, rows, gap, rowGap, columnGap, alignItems, justifyItems, alignContent, justifyContent, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, fillHeight = false, padding, margin, overflow }) => {
-	return /* @__PURE__ */ jsx(StyledGridWrapper, {
-		columns,
-		rows,
-		gap,
-		rowGap,
-		columnGap,
-		alignItems,
-		justifyItems,
-		alignContent,
-		justifyContent,
-		width,
-		height,
-		minWidth,
-		maxWidth,
-		minHeight,
-		maxHeight,
-		fillWidth,
-		fillHeight,
-		padding,
-		margin,
-		overflow,
-		children
-	});
-};
-//#endregion
-export { GridAlignContent, GridAlignItems, GridJustifyContent, GridJustifyItems, GridWrapper as default };

package/dist/containers/Spacing.d.ts

@@ -1,23 +0,0 @@
-import type { PropsWithChildren } from "react";
-/** A length. A number is px; a string is used as-is ("1rem", "auto"). */
-export type SpacingSize = string | number;
-export interface SpacingProps {
-    /** CSS margin shorthand. An array joins with spaces: `[8, 16]` → `8px 16px`. */
-    margin?: SpacingSize | SpacingSize[];
-    /** Single-side margin. Ignored when `margin` is set. */
-    top?: SpacingSize;
-    right?: SpacingSize;
-    bottom?: SpacingSize;
-    left?: SpacingSize;
-    fillWidth?: boolean;
-    fillHeight?: boolean;
-}
-/**
- * Applies margin to its children. Legacy escape hatch — DLS layouts space with
- * `gap` and `padding`, so prefer `FlexWrapper`/`GridWrapper` for new work.
- *
- * `margin` and the per-side props are mutually exclusive: setting `margin` makes
- * `top`/`right`/`bottom`/`left` no-ops.
- */
-declare const Spacing: ({ children, margin, top, right, bottom, left, fillWidth, fillHeight, }: PropsWithChildren<SpacingProps>) => import("react").JSX.Element;
-export default Spacing;

package/dist/containers/Spacing.js

@@ -1,59 +0,0 @@
-/* empty css                  */
-import { styled } from "@linaria/react";
-import { jsx } from "react/jsx-runtime";
-//#region src/containers/Spacing.tsx
-function getSpacingSizeValue(value) {
-	if (typeof value === "number") return `${value}px`;
-	return value;
-}
-function getSpacingSizeValueFromShorthand(margin) {
-	if (Array.isArray(margin)) return margin.map((val) => getSpacingSizeValue(val)).join(" ");
-	return getSpacingSizeValue(margin);
-}
-var _exp = () => ({ $margin }) => $margin || "unset";
-var _exp2 = () => ({ $marginTop }) => $marginTop || "unset";
-var _exp3 = () => ({ $marginRight }) => $marginRight || "unset";
-var _exp4 = () => ({ $marginBottom }) => $marginBottom || "unset";
-var _exp5 = () => ({ $marginLeft }) => $marginLeft || "unset";
-var _exp6 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var _exp7 = () => ({ $fillHeight }) => $fillHeight ? "100%" : "auto";
-var StyledSpacing = /*#__PURE__*/ styled("div")({
-	name: "StyledSpacing",
-	class: "s2h3guw",
-	propsAsIs: false,
-	vars: {
-		"s2h3guw-0": [_exp()],
-		"s2h3guw-1": [_exp2()],
-		"s2h3guw-2": [_exp3()],
-		"s2h3guw-3": [_exp4()],
-		"s2h3guw-4": [_exp5()],
-		"s2h3guw-5": [_exp6()],
-		"s2h3guw-6": [_exp7()]
-	}
-});
-/**
-* Applies margin to its children. Legacy escape hatch — DLS layouts space with
-* `gap` and `padding`, so prefer `FlexWrapper`/`GridWrapper` for new work.
-*
-* `margin` and the per-side props are mutually exclusive: setting `margin` makes
-* `top`/`right`/`bottom`/`left` no-ops.
-*/
-var Spacing = ({ children, margin, top, right, bottom, left, fillWidth, fillHeight }) => {
-	if (margin !== void 0) return /* @__PURE__ */ jsx(StyledSpacing, {
-		$margin: getSpacingSizeValueFromShorthand(margin),
-		$fillWidth: fillWidth,
-		$fillHeight: fillHeight,
-		children
-	});
-	return /* @__PURE__ */ jsx(StyledSpacing, {
-		$marginTop: getSpacingSizeValue(top),
-		$marginRight: getSpacingSizeValue(right),
-		$marginBottom: getSpacingSizeValue(bottom),
-		$marginLeft: getSpacingSizeValue(left),
-		$fillWidth: fillWidth,
-		$fillHeight: fillHeight,
-		children
-	});
-};
-//#endregion
-export { Spacing as default };