@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/layout/Divider.d.ts

@@ -0,0 +1,25 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+import { Orientation } from "../theme/enums.js";
+export interface DividerProps extends AriaAttributes {
+    /**
+     * Direction of the rule. A vertical rule needs a flex or grid parent to stretch in.
+     * @default Orientation.HORIZONTAL
+     */
+    orientation?: Orientation;
+    /**
+     * Caption centered in a break in a horizontal rule (1.x `HorizontalDivider label`). Ignored
+     * when vertical.
+     */
+    label?: string;
+    /** DOM id on the root element. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root element. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root element. */
+    className?: string;
+    /** Inline style on the root element; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A hairline rule between content, horizontal (optionally labeled) or vertical. */
+declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLElement>>;
+export default Divider;

package/dist/layout/Divider.js

@@ -0,0 +1,70 @@
+import { Orientation } from "../theme/enums.js";
+/* empty css                  */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/layout/Divider.tsx
+/**
+* A `0.5px` hairline rule that separates content. Replaces 1.x `HorizontalDivider` and
+* `VerticalDivider` (Constitution XII.4): `orientation` picks the direction.
+*
+* - Horizontal, no label: an `<hr>` (implicit `role="separator"`) that spans its parent's width.
+* - Horizontal with a `label`: a `<div role="separator">` whose two rules (`::before` / `::after`)
+*   frame a centered `caption` / `text.tertiary` caption. A separator's children are presentational,
+*   so the label is also its accessible name (`aria-label`).
+* - Vertical: a `<div role="separator" aria-orientation="vertical">` that stretches to the height
+*   of its flex or grid parent (`align-self: stretch`); it has no height of its own.
+*
+* The line is always `border.primary`. Divider takes no `variant` (Constitution V-A).
+*/
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-Divider-rb40n7o",
+	propsAsIs: false
+});
+/** The line for each direction: the hairline mixin, kept on one side only. */
+var DIVIDER_ORIENTATION_TO_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-Divider-Orientation_HORIZONTAL-o1cvhdy5",
+	[Orientation.VERTICAL]: "gx-Divider-Orientation_VERTICAL-os39g9n"
+};
+/**
+* A horizontal rule broken by a caption: the root is a flex row, the label text its middle item,
+* and the two rules are `::before` / `::after`, each taking half the remaining width.
+*/
+var LABELED_CSS = "gx-Divider-LABELED_CSS-l1ce7i54";
+/** A hairline rule between content, horizontal (optionally labeled) or vertical. */
+var Divider = forwardRef(function Divider({ orientation = Orientation.HORIZONTAL, label, id, className, style, ...rest }, ref) {
+	const rootRef = ref;
+	if (orientation === Orientation.VERTICAL) return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref: rootRef,
+		role: "separator",
+		"aria-orientation": "vertical",
+		id,
+		className: cx(DIVIDER_ORIENTATION_TO_CSS_MAP[orientation], className),
+		style
+	});
+	if (label) return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref: rootRef,
+		role: "separator",
+		"aria-orientation": "horizontal",
+		"aria-label": rest["aria-label"] ?? label,
+		id,
+		className: cx(LABELED_CSS, className),
+		style,
+		children: label
+	});
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		as: "hr",
+		ref: rootRef,
+		id,
+		className: cx(DIVIDER_ORIENTATION_TO_CSS_MAP[orientation], className),
+		style
+	});
+});
+Divider.displayName = "Divider";
+//#endregion
+export { Divider as default };

package/dist/layout/Flex.d.ts

@@ -0,0 +1,139 @@
+import { type AriaAttributes, type CSSProperties, type ElementType, type MouseEvent, type ReactNode, type UIEvent } from "react";
+import type { Space, SpaceShorthand } from "../theme/enums.js";
+/** Main-axis direction of the flex container (`flex-direction`). */
+export declare enum FlexDirection {
+    /** Left to right. */
+    ROW = "ROW",
+    /** Top to bottom. */
+    COLUMN = "COLUMN",
+    /** Right to left. */
+    ROW_REVERSE = "ROW_REVERSE",
+    /** Bottom to top. */
+    COLUMN_REVERSE = "COLUMN_REVERSE"
+}
+/** Cross-axis alignment of children (`align-items`). */
+export declare enum AlignItems {
+    /** Pack children at the cross-axis start. */
+    START = "START",
+    /** Center children on the cross axis. */
+    CENTER = "CENTER",
+    /** Pack children at the cross-axis end. */
+    END = "END",
+    /** Align children's text baselines. */
+    BASELINE = "BASELINE",
+    /** Stretch children to fill the cross axis. */
+    STRETCH = "STRETCH"
+}
+/** Main-axis distribution of children (`justify-content`). */
+export declare enum JustifyContent {
+    /** Pack children at the main-axis start. */
+    START = "START",
+    /** Center children on the main axis. */
+    CENTER = "CENTER",
+    /** Pack children at the main-axis end. */
+    END = "END",
+    /** First and last child at the edges, equal space between. */
+    SPACE_BETWEEN = "SPACE_BETWEEN",
+    /** Equal space around each child (half-size at the edges). */
+    SPACE_AROUND = "SPACE_AROUND",
+    /** Equal space between children and at the edges. */
+    SPACE_EVENLY = "SPACE_EVENLY"
+}
+/** Wrapping when children overflow the main axis (`flex-wrap`). */
+export declare enum FlexWrap {
+    /** Keep every child on one line. */
+    NOWRAP = "NOWRAP",
+    /** Wrap onto new lines below / after. */
+    WRAP = "WRAP",
+    /** Wrap onto new lines above / before. */
+    WRAP_REVERSE = "WRAP_REVERSE"
+}
+export interface FlexProps extends AriaAttributes {
+    /** Content of the flex container. */
+    children?: ReactNode;
+    /**
+     * Main-axis direction.
+     * @default FlexDirection.ROW
+     */
+    direction?: FlexDirection;
+    /**
+     * Cross-axis alignment of children.
+     * @default AlignItems.STRETCH
+     */
+    alignItems?: AlignItems;
+    /**
+     * Main-axis distribution of children.
+     * @default JustifyContent.START
+     */
+    justifyContent?: JustifyContent;
+    /**
+     * Whether children wrap onto new lines.
+     * @default FlexWrap.NOWRAP
+     */
+    wrap?: FlexWrap;
+    /** Space between children from the space scale: one value, or `[row, column]`. */
+    gap?: Space | [Space, Space];
+    /** Padding from the space scale: one value, or 2–4 in CSS shorthand order (`[12, 16]`). */
+    padding?: SpaceShorthand;
+    /** `flex-grow` of this container inside a parent flex container. */
+    grow?: number;
+    /** `flex-shrink` of this container inside a parent flex container. */
+    shrink?: number;
+    /** `flex-basis` of this container inside a parent flex container. A number is px. */
+    basis?: number | string;
+    /** CSS `width`. A number is px. `fillWidth` wins over it. */
+    width?: number | string;
+    /** CSS `height`. A number is px. Use `"100%"` to fill the parent (1.x `fillHeight`). */
+    height?: number | string;
+    /** CSS `min-width`. A number is px. Pass `0` to let nested text shrink and ellipsize. */
+    minWidth?: number | string;
+    /** CSS `max-width`. A number is px. */
+    maxWidth?: number | string;
+    /** CSS `min-height`. A number is px. */
+    minHeight?: number | string;
+    /** CSS `max-height`. A number is px. */
+    maxHeight?: number | string;
+    /**
+     * Stretch to the parent's full width (`width: 100%`). Wins over `width`.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /**
+     * CSS `overflow`.
+     * @default "visible"
+     */
+    overflow?: CSSProperties["overflow"];
+    /**
+     * Element or component to render (`"section"`, `"nav"`, `"ul"`, a router link).
+     * @default "div"
+     */
+    as?: ElementType;
+    /**
+     * Pointer-only shortcut (a clickable row or card area); also sets `cursor: pointer`. Flex never
+     * becomes a control (no role, no Tab stop, no Enter/Space), so the same action must also be a
+     * `Button` or `Link` inside or beside it. Never the only path to an action.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Mouse-down handler. Pointer-only like `onClick`: the action must also be reachable through a
+     * `Button` or `Link`.
+     */
+    onMouseDown?: (event: MouseEvent<HTMLElement>) => void;
+    /** Mouse-enter handler. */
+    onMouseEnter?: (event: MouseEvent<HTMLElement>) => void;
+    /** Mouse-leave handler. */
+    onMouseLeave?: (event: MouseEvent<HTMLElement>) => void;
+    /** Scroll handler (set `overflow` so the container scrolls). */
+    onScroll?: (event: UIEvent<HTMLElement>) => void;
+    /** DOM id on the root element. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root element. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root element. */
+    className?: string;
+    /** Inline style on the root element; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** The flexbox layout primitive: direction, alignment, wrapping, `gap`, `padding` and sizing. */
+declare const Flex: import("react").ForwardRefExoticComponent<FlexProps & import("react").RefAttributes<HTMLElement>>;
+export default Flex;

package/dist/layout/Flex.js

@@ -0,0 +1,165 @@
+import { gapToCss, getCssSizeValue, spaceToCss } from "../utils/css.js";
+/* empty css               */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/layout/Flex.tsx
+/**
+* The flexbox layout primitive: a `display: flex` element with every flex and sizing knob as a
+* prop. Replaces 1.x `FlexWrapper`. Spacing is `gap` and `padding` from the space scale; there is
+* no `margin` (Constitution II.5).
+*
+* The four flex axes are enums, each a `Record` of `css` blocks. Continuous values (`gap`,
+* `padding`, `grow` / `shrink` / `basis`, sizes, `overflow`) are set as `--gx-flex-*` custom
+* properties on the root, and a block that reads each one is switched on only when its prop is
+* set. So a nested `Flex` never inherits its parent's values, and nothing extra reaches a custom
+* `as` component (Linaria forwards `$`-props to one).
+*/
+/** Main-axis direction of the flex container (`flex-direction`). */
+var FlexDirection = /* @__PURE__ */ function(FlexDirection) {
+	/** Left to right. */
+	FlexDirection["ROW"] = "ROW";
+	/** Top to bottom. */
+	FlexDirection["COLUMN"] = "COLUMN";
+	/** Right to left. */
+	FlexDirection["ROW_REVERSE"] = "ROW_REVERSE";
+	/** Bottom to top. */
+	FlexDirection["COLUMN_REVERSE"] = "COLUMN_REVERSE";
+	return FlexDirection;
+}({});
+/** Cross-axis alignment of children (`align-items`). */
+var AlignItems = /* @__PURE__ */ function(AlignItems) {
+	/** Pack children at the cross-axis start. */
+	AlignItems["START"] = "START";
+	/** Center children on the cross axis. */
+	AlignItems["CENTER"] = "CENTER";
+	/** Pack children at the cross-axis end. */
+	AlignItems["END"] = "END";
+	/** Align children's text baselines. */
+	AlignItems["BASELINE"] = "BASELINE";
+	/** Stretch children to fill the cross axis. */
+	AlignItems["STRETCH"] = "STRETCH";
+	return AlignItems;
+}({});
+/** Main-axis distribution of children (`justify-content`). */
+var JustifyContent = /* @__PURE__ */ function(JustifyContent) {
+	/** Pack children at the main-axis start. */
+	JustifyContent["START"] = "START";
+	/** Center children on the main axis. */
+	JustifyContent["CENTER"] = "CENTER";
+	/** Pack children at the main-axis end. */
+	JustifyContent["END"] = "END";
+	/** First and last child at the edges, equal space between. */
+	JustifyContent["SPACE_BETWEEN"] = "SPACE_BETWEEN";
+	/** Equal space around each child (half-size at the edges). */
+	JustifyContent["SPACE_AROUND"] = "SPACE_AROUND";
+	/** Equal space between children and at the edges. */
+	JustifyContent["SPACE_EVENLY"] = "SPACE_EVENLY";
+	return JustifyContent;
+}({});
+/** Wrapping when children overflow the main axis (`flex-wrap`). */
+var FlexWrap = /* @__PURE__ */ function(FlexWrap) {
+	/** Keep every child on one line. */
+	FlexWrap["NOWRAP"] = "NOWRAP";
+	/** Wrap onto new lines below / after. */
+	FlexWrap["WRAP"] = "WRAP";
+	/** Wrap onto new lines above / before. */
+	FlexWrap["WRAP_REVERSE"] = "WRAP_REVERSE";
+	return FlexWrap;
+}({});
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-Flex-r22h3tg",
+	propsAsIs: false
+});
+var FLEX_DIRECTION_TO_CSS_MAP = {
+	["ROW"]: "gx-Flex-ROW-ripb3mw",
+	["COLUMN"]: "gx-Flex-COLUMN-c147zu1f",
+	["ROW_REVERSE"]: "gx-Flex-ROW_REVERSE-r5z2mdh",
+	["COLUMN_REVERSE"]: "gx-Flex-COLUMN_REVERSE-c3j35kc"
+};
+var ALIGN_ITEMS_TO_CSS_MAP = {
+	["START"]: "gx-Flex-START-s1b4y19v",
+	["CENTER"]: "gx-Flex-CENTER-cfsw75q",
+	["END"]: "gx-Flex-END-eo9axya",
+	["BASELINE"]: "gx-Flex-BASELINE-b235uy7",
+	["STRETCH"]: "gx-Flex-STRETCH-smnprdc"
+};
+var JUSTIFY_CONTENT_TO_CSS_MAP = {
+	["START"]: "gx-Flex-START-s1404740",
+	["CENTER"]: "gx-Flex-CENTER-crtrl7j",
+	["END"]: "gx-Flex-END-e1jkv0lh",
+	["SPACE_BETWEEN"]: "gx-Flex-SPACE_BETWEEN-s1qbqc8u",
+	["SPACE_AROUND"]: "gx-Flex-SPACE_AROUND-s100xdib",
+	["SPACE_EVENLY"]: "gx-Flex-SPACE_EVENLY-s3efucf"
+};
+var FLEX_WRAP_TO_CSS_MAP = {
+	["NOWRAP"]: "gx-Flex-NOWRAP-nhuum21",
+	["WRAP"]: "gx-Flex-WRAP-w8fil63",
+	["WRAP_REVERSE"]: "gx-Flex-WRAP_REVERSE-w16eom7c"
+};
+var FILL_WIDTH_CSS = "gx-Flex-FILL_WIDTH_CSS-fy5wrww";
+var CLICKABLE_CSS = "gx-Flex-CLICKABLE_CSS-cactce2";
+/** Each block reads the `--gx-flex-<property>` custom property the component sets beside it. */
+var FLEX_CSS_PROPERTY_TO_CSS_MAP = {
+	gap: "gx-Flex-gap-gykdsqa",
+	padding: "gx-Flex-padding-pa761e0",
+	"flex-grow": "gx-Flex-flex-grow-f8lz0a5",
+	"flex-shrink": "gx-Flex-flex-shrink-f13hffr4",
+	"flex-basis": "gx-Flex-flex-basis-fwerc9i",
+	width: "gx-Flex-width-wmz3cbh",
+	height: "gx-Flex-height-h1pgp62m",
+	"min-width": "gx-Flex-min-width-mo6wszl",
+	"max-width": "gx-Flex-max-width-m6qjj2a",
+	"min-height": "gx-Flex-min-height-mvgtan7",
+	"max-height": "gx-Flex-max-height-moffi4z",
+	overflow: "gx-Flex-overflow-o717o85"
+};
+/** A length prop as CSS (number → px), or `undefined` when unset. */
+var toLength = (value) => value === void 0 ? void 0 : getCssSizeValue(value);
+/** The flexbox layout primitive: direction, alignment, wrapping, `gap`, `padding` and sizing. */
+var Flex = forwardRef(function Flex({ children, direction = "ROW", alignItems = "STRETCH", justifyContent = "START", wrap = "NOWRAP", gap, padding, grow, shrink, basis, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, overflow, as = "div", onClick, onMouseDown, onMouseEnter, onMouseLeave, onScroll, id, className, style, ...rest }, ref) {
+	const values = {
+		gap: gap === void 0 ? void 0 : gapToCss(gap),
+		padding: padding === void 0 ? void 0 : spaceToCss(padding),
+		"flex-grow": grow === void 0 ? void 0 : String(grow),
+		"flex-shrink": shrink === void 0 ? void 0 : String(shrink),
+		"flex-basis": toLength(basis),
+		width: fillWidth ? void 0 : toLength(width),
+		height: toLength(height),
+		"min-width": toLength(minWidth),
+		"max-width": toLength(maxWidth),
+		"min-height": toLength(minHeight),
+		"max-height": toLength(maxHeight),
+		overflow
+	};
+	const classNames = [];
+	const variables = {};
+	for (const property of Object.keys(values)) {
+		const value = values[property];
+		if (value === void 0) continue;
+		classNames.push(FLEX_CSS_PROPERTY_TO_CSS_MAP[property]);
+		variables[`--gx-flex-${property}`] = value;
+	}
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		as,
+		ref,
+		id,
+		onClick,
+		onMouseDown,
+		onMouseEnter,
+		onMouseLeave,
+		onScroll,
+		className: cx(FLEX_DIRECTION_TO_CSS_MAP[direction], ALIGN_ITEMS_TO_CSS_MAP[alignItems], JUSTIFY_CONTENT_TO_CSS_MAP[justifyContent], FLEX_WRAP_TO_CSS_MAP[wrap], fillWidth && FILL_WIDTH_CSS, onClick !== void 0 && CLICKABLE_CSS, ...classNames, className),
+		style: {
+			...variables,
+			...style
+		},
+		children
+	});
+});
+Flex.displayName = "Flex";
+//#endregion
+export { AlignItems, FlexDirection, FlexWrap, JustifyContent, Flex as default };

package/dist/layout/FlexItem.d.ts

@@ -0,0 +1,72 @@
+import { type AriaAttributes, type CSSProperties, type ElementType, type MouseEvent, type ReactNode } from "react";
+import type { SpaceShorthand } from "../theme/enums.js";
+export interface FlexItemProps extends AriaAttributes {
+    /** Content of the item. Laid out in normal flow; nest a `Flex` to arrange it. */
+    children?: ReactNode;
+    /**
+     * `flex-grow`: this item's share of the parent's spare main-axis space.
+     * @default 0
+     */
+    grow?: number;
+    /**
+     * `flex-shrink`: how much this item gives up when the parent is too small. `0` keeps its size.
+     * @default 1
+     */
+    shrink?: number;
+    /**
+     * `flex-basis`: the main-axis size before growing or shrinking. A number is px.
+     * @default auto
+     */
+    basis?: number | string;
+    /** CSS `width`. A number is px. `fillWidth` wins over it. */
+    width?: number | string;
+    /** CSS `height`. A number is px. Use `"100%"` to fill the parent (1.x `fillHeight`). */
+    height?: number | string;
+    /** CSS `min-width`. A number is px. Pass `0` to let nested text shrink and ellipsize. */
+    minWidth?: number | string;
+    /** CSS `max-width`. A number is px. */
+    maxWidth?: number | string;
+    /** CSS `min-height`. A number is px. */
+    minHeight?: number | string;
+    /** CSS `max-height`. A number is px. */
+    maxHeight?: number | string;
+    /**
+     * Stretch to the parent's full width (`width: 100%`). Wins over `width`.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /** Padding from the space scale: one value, or 2–4 in CSS shorthand order (`[12, 16]`). */
+    padding?: SpaceShorthand;
+    /**
+     * CSS `overflow`.
+     * @default "visible"
+     */
+    overflow?: CSSProperties["overflow"];
+    /**
+     * CSS `position`.
+     * @default static
+     */
+    position?: CSSProperties["position"];
+    /**
+     * Element or component to render (`"li"`, `"section"`, a router link).
+     * @default "div"
+     */
+    as?: ElementType;
+    /**
+     * Pointer-only shortcut (a clickable cell or card area); also sets `cursor: pointer`. FlexItem
+     * never becomes a control (no role, no Tab stop, no Enter/Space), so the same action must also be
+     * a `Button` or `Link` inside or beside it. Never the only path to an action.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /** DOM id on the root element. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root element. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root element. */
+    className?: string;
+    /** Inline style on the root element; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** One child of a `Flex` with its own grow, shrink, basis and sizing. Not a flex container. */
+declare const FlexItem: import("react").ForwardRefExoticComponent<FlexItemProps & import("react").RefAttributes<HTMLElement>>;
+export default FlexItem;

package/dist/layout/FlexItem.js

@@ -0,0 +1,84 @@
+import { getCssSizeValue, spaceToCss } from "../utils/css.js";
+/* empty css                   */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/layout/FlexItem.tsx
+/**
+* One child of a `Flex` that needs its own `grow` / `shrink` / `basis` or sizing. Replaces 1.x
+* `FlexItem`. It is not a flex container: it renders a plain block, and its children lay out in
+* normal flow. To arrange an item's children, nest a `Flex` (or use a `Flex` with `grow` as the
+* item itself).
+*
+* Every value is continuous, so each one is set as a `--gx-flex-item-*` custom property on the
+* root, and a block that reads it is switched on only when its prop is set. So a nested item never
+* inherits its parent's values, unset props fall back to the CSS initial values (`flex: 0 1 auto`,
+* `width: auto`, `position: static`, `overflow: visible`), and nothing extra reaches a custom `as`
+* component (Linaria forwards `$`-props to one).
+*/
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-FlexItem-r10jnoxq",
+	propsAsIs: false
+});
+var FILL_WIDTH_CSS = "gx-FlexItem-FILL_WIDTH_CSS-f11ur0tg";
+var CLICKABLE_CSS = "gx-FlexItem-CLICKABLE_CSS-c1phfxjv";
+/** Each block reads the `--gx-flex-item-<property>` custom property the component sets beside it. */
+var FLEX_ITEM_CSS_PROPERTY_TO_CSS_MAP = {
+	"flex-grow": "gx-FlexItem-flex-grow-f19z5ofo",
+	"flex-shrink": "gx-FlexItem-flex-shrink-f1ubwkdb",
+	"flex-basis": "gx-FlexItem-flex-basis-f1lmdfjo",
+	width: "gx-FlexItem-width-wpfo0uk",
+	height: "gx-FlexItem-height-hjbuyhl",
+	"min-width": "gx-FlexItem-min-width-md3yo4w",
+	"max-width": "gx-FlexItem-max-width-mxr0aw9",
+	"min-height": "gx-FlexItem-min-height-m13lhdnj",
+	"max-height": "gx-FlexItem-max-height-m1bfjjj5",
+	padding: "gx-FlexItem-padding-p1ye3txw",
+	overflow: "gx-FlexItem-overflow-o1gw7qyr",
+	position: "gx-FlexItem-position-pzd5vzh"
+};
+/** A length prop as CSS (number → px), or `undefined` when unset. */
+var toLength = (value) => value === void 0 ? void 0 : getCssSizeValue(value);
+/** One child of a `Flex` with its own grow, shrink, basis and sizing. Not a flex container. */
+var FlexItem = forwardRef(function FlexItem({ children, grow, shrink, basis, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, padding, overflow, position, as = "div", onClick, id, className, style, ...rest }, ref) {
+	const values = {
+		"flex-grow": grow === void 0 ? void 0 : String(grow),
+		"flex-shrink": shrink === void 0 ? void 0 : String(shrink),
+		"flex-basis": toLength(basis),
+		width: fillWidth ? void 0 : toLength(width),
+		height: toLength(height),
+		"min-width": toLength(minWidth),
+		"max-width": toLength(maxWidth),
+		"min-height": toLength(minHeight),
+		"max-height": toLength(maxHeight),
+		padding: padding === void 0 ? void 0 : spaceToCss(padding),
+		overflow,
+		position
+	};
+	const classNames = [];
+	const variables = {};
+	for (const property of Object.keys(values)) {
+		const value = values[property];
+		if (value === void 0) continue;
+		classNames.push(FLEX_ITEM_CSS_PROPERTY_TO_CSS_MAP[property]);
+		variables[`--gx-flex-item-${property}`] = value;
+	}
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		as,
+		ref,
+		id,
+		onClick,
+		className: cx(fillWidth && FILL_WIDTH_CSS, onClick !== void 0 && CLICKABLE_CSS, ...classNames, className),
+		style: {
+			...variables,
+			...style
+		},
+		children
+	});
+});
+FlexItem.displayName = "FlexItem";
+//#endregion
+export { FlexItem as default };