@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/icons/Icon.d.ts

@@ -1,51 +1,78 @@
-import type { Icon as PhosphorIcon, IconWeight as PhosphorIconWeight } from "@phosphor-icons/react";
-/** Icon color role. Resolves to a `theme.color.icon.*` token in both themes. */
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+import type { Hex } from "../theme/tokens/types.js";
+/** Color role of the icon (color set, Constitution V-A). Resolves to `color.text.*`. */
 export declare enum IconVariant {
+    /** `text.primary`. The default. */
     PRIMARY = "PRIMARY",
-    PRIMARY_ALT = "PRIMARY_ALT",
+    /** `text.secondary`. */
     SECONDARY = "SECONDARY",
-    SECONDARY_ALT = "SECONDARY_ALT",
+    /** `text.tertiary`. */
     TERTIARY = "TERTIARY",
-    TERTIARY_ALT = "TERTIARY_ALT",
+    /** `text.disabled`. */
+    DISABLED = "DISABLED",
+    /** The parent's color (`currentColor`); used inside Button, Chip and other colored controls. */
+    INHERIT = "INHERIT",
+    /** Status: success, `text.success`. */
     SUCCESS = "SUCCESS",
-    ERROR = "ERROR",
+    /** Status: warning, `text.warning`. */
     WARNING = "WARNING",
-    LOADING = "LOADING",
-    DISABLED = "DISABLED",
-    BLUE = "BLUE",
-    LIME = "LIME",
-    TEAL = "TEAL",
-    YELLOW = "YELLOW",
-    ORANGE = "ORANGE",
-    PURPLE = "PURPLE",
-    PINK = "PINK"
+    /** Status: error, `text.error`. */
+    ERROR = "ERROR"
 }
-/**
- * Direct mapping to the Phosphor Icons `IconWeight` type.
- */
+/** Stroke weight: Phosphor's six styles of the same glyph. */
 export declare enum IconWeight {
-    THIN = "thin",
-    LIGHT = "light",
-    REGULAR = "regular",
-    BOLD = "bold",
-    FILL = "fill",
-    DUOTONE = "duotone"
+    /** Hairline strokes. */
+    THIN = "THIN",
+    /** Light strokes. */
+    LIGHT = "LIGHT",
+    /** Phosphor's default stroke. */
+    REGULAR = "REGULAR",
+    /** Heavier strokes; reads well at 12–18px beside 400/500 text. */
+    BOLD = "BOLD",
+    /** Solid fill. */
+    FILL = "FILL",
+    /** Stroke over a 20% fill. */
+    DUOTONE = "DUOTONE"
 }
-export interface IconProps {
-    /** Phosphor icon *component* — pass `PlusIcon`, not `<PlusIcon />`. */
+export interface IconProps extends AriaAttributes {
+    /** Phosphor icon *component*: pass `PlusIcon`, not `<PlusIcon />`. */
     component: PhosphorIcon;
-    /** Square size in px. @default 16 */
+    /**
+     * Square size in px. Parents pick it from their rung (`BUTTON_SIZE_TO_ICON_PX_MAP`).
+     * @default 16
+     */
     size?: number;
-    /** Stroke weight. @default IconWeight.BOLD */
-    weight?: PhosphorIconWeight;
-    /** Color role. @default IconVariant.PRIMARY */
+    /**
+     * Stroke weight.
+     * @default IconWeight.REGULAR
+     */
+    weight?: IconWeight;
+    /**
+     * Color role. `INHERIT` follows the parent's color (used inside Button).
+     * @default IconVariant.PRIMARY
+     */
     variant?: IconVariant;
-    /** Accessible label. Set it when the icon is the only content. */
-    alt?: string;
+    /** Raw color override that bypasses `variant`. Discouraged: prefer a `variant`. */
+    hex?: Hex;
+    /** Accessible name. Set it when the icon carries meaning on its own; when absent the icon is `aria-hidden`. */
+    ariaLabel?: string;
+    /** Hover hint, shown in a `Tooltip`. */
+    tooltip?: string | ReactNode;
+    /**
+     * Rotates continuously (a loading glyph). Static under reduced motion.
+     * @default false
+     */
+    isSpinning?: boolean;
+    /** DOM id on the `<svg>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<svg>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the `<svg>`. */
+    className?: string;
+    /** Inline style on the `<svg>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/**
- * Wraps a Phosphor icon so its color comes from a theme token rather than a
- * hardcoded `color` prop. Never render a Phosphor icon bare.
- */
-declare const Icon: ({ component: IconComponent, variant, size, weight, alt, }: IconProps) => import("react").JSX.Element;
+/** Wraps a Phosphor icon so its color, weight and motion come from the DLS. Never render a Phosphor icon bare. */
+declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
 export default Icon;

package/dist/icons/Icon.js

@@ -1,56 +1,115 @@
-import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
-import { match } from "ts-pattern";
+import LazyTooltip from "../tooltip/internal/LazyTooltip.js";
+/* empty css               */
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/icons/Icon.tsx
-/** Icon color role. Resolves to a `theme.color.icon.*` token in both themes. */
+/**
+* The one way to draw a Phosphor icon. Color is CSS, not JS: `ICON_VARIANT_TO_CSS_MAP` sets
+* `color` on the `<svg>` from `color.text.*`, and Phosphor paints with `currentColor`, so a theme
+* switch needs no React re-render (1.x read the theme with `useGalaxyTheme()`).
+*
+* `size` stays a number in px: an icon sizes to its container's rung through the parent's
+* `<PARENT>_SIZE_TO_ICON_PX_MAP` (`BUTTON_SIZE_TO_ICON_PX_MAP`). Parents that own the color
+* (`Button`, `Chip`) pass `IconVariant.INHERIT` so the icon follows their `color`.
+*
+* `hex` is set as the `--gx-icon-hex` custom property in `style` and read by a block switched on
+* only when the prop is set (the Text pattern).
+*
+* `tooltip` renders through `LazyTooltip`, so an icon without one never loads `Tooltip` (and
+* floating-ui) into the bundle that draws it.
+*/
+/** Color role of the icon (color set, Constitution V-A). Resolves to `color.text.*`. */
 var IconVariant = /* @__PURE__ */ function(IconVariant) {
+	/** `text.primary`. The default. */
 	IconVariant["PRIMARY"] = "PRIMARY";
-	IconVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
+	/** `text.secondary`. */
 	IconVariant["SECONDARY"] = "SECONDARY";
-	IconVariant["SECONDARY_ALT"] = "SECONDARY_ALT";
+	/** `text.tertiary`. */
 	IconVariant["TERTIARY"] = "TERTIARY";
-	IconVariant["TERTIARY_ALT"] = "TERTIARY_ALT";
+	/** `text.disabled`. */
+	IconVariant["DISABLED"] = "DISABLED";
+	/** The parent's color (`currentColor`); used inside Button, Chip and other colored controls. */
+	IconVariant["INHERIT"] = "INHERIT";
+	/** Status: success, `text.success`. */
 	IconVariant["SUCCESS"] = "SUCCESS";
-	IconVariant["ERROR"] = "ERROR";
+	/** Status: warning, `text.warning`. */
 	IconVariant["WARNING"] = "WARNING";
-	IconVariant["LOADING"] = "LOADING";
-	IconVariant["DISABLED"] = "DISABLED";
-	IconVariant["BLUE"] = "BLUE";
-	IconVariant["LIME"] = "LIME";
-	IconVariant["TEAL"] = "TEAL";
-	IconVariant["YELLOW"] = "YELLOW";
-	IconVariant["ORANGE"] = "ORANGE";
-	IconVariant["PURPLE"] = "PURPLE";
-	IconVariant["PINK"] = "PINK";
+	/** Status: error, `text.error`. */
+	IconVariant["ERROR"] = "ERROR";
 	return IconVariant;
 }({});
-/**
-* Direct mapping to the Phosphor Icons `IconWeight` type.
-*/
+/** Stroke weight: Phosphor's six styles of the same glyph. */
 var IconWeight = /* @__PURE__ */ function(IconWeight) {
-	IconWeight["THIN"] = "thin";
-	IconWeight["LIGHT"] = "light";
-	IconWeight["REGULAR"] = "regular";
-	IconWeight["BOLD"] = "bold";
-	IconWeight["FILL"] = "fill";
-	IconWeight["DUOTONE"] = "duotone";
+	/** Hairline strokes. */
+	IconWeight["THIN"] = "THIN";
+	/** Light strokes. */
+	IconWeight["LIGHT"] = "LIGHT";
+	/** Phosphor's default stroke. */
+	IconWeight["REGULAR"] = "REGULAR";
+	/** Heavier strokes; reads well at 12–18px beside 400/500 text. */
+	IconWeight["BOLD"] = "BOLD";
+	/** Solid fill. */
+	IconWeight["FILL"] = "FILL";
+	/** Stroke over a 20% fill. */
+	IconWeight["DUOTONE"] = "DUOTONE";
 	return IconWeight;
 }({});
-function getIconColor(variant, theme) {
-	return match(variant).with("PRIMARY", () => theme.color.icon.primary).with("PRIMARY_ALT", () => theme.color.icon.primaryAlt).with("SECONDARY", () => theme.color.icon.secondary).with("SECONDARY_ALT", () => theme.color.icon.secondaryAlt).with("TERTIARY", () => theme.color.icon.tertiary).with("TERTIARY_ALT", () => theme.color.icon.tertiaryAlt).with("SUCCESS", () => theme.color.icon.success).with("ERROR", () => theme.color.icon.error).with("WARNING", () => theme.color.icon.warning).with("LOADING", () => theme.color.icon.primary).with("LIME", () => theme.color.icon.lime).with("BLUE", () => theme.color.icon.blue).with("TEAL", () => theme.color.icon.teal).with("YELLOW", () => theme.color.icon.yellow).with("ORANGE", () => theme.color.icon.orange).with("PURPLE", () => theme.color.icon.purple).with("PINK", () => theme.color.icon.pink).with("DISABLED", () => theme.color.text.disabled).with(void 0, () => theme.color.icon.primary).exhaustive();
-}
+/** The Phosphor weight each `IconWeight` draws. */
+var ICON_WEIGHT_TO_PHOSPHOR_WEIGHT_MAP = {
+	["THIN"]: "thin",
+	["LIGHT"]: "light",
+	["REGULAR"]: "regular",
+	["BOLD"]: "bold",
+	["FILL"]: "fill",
+	["DUOTONE"]: "duotone"
+};
+/** Never squeezed by a flex row; color changes on the `duration.fast` curve like Text. */
+var ROOT_CSS = "gx-Icon-ROOT_CSS-rjgxn1p";
+var ICON_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-Icon-PRIMARY-p1o2vka7",
+	["SECONDARY"]: "gx-Icon-SECONDARY-smpvpdm",
+	["TERTIARY"]: "gx-Icon-TERTIARY-t1j7b465",
+	["DISABLED"]: "gx-Icon-DISABLED-d1bri864",
+	["INHERIT"]: "gx-Icon-INHERIT-iky75km",
+	["SUCCESS"]: "gx-Icon-SUCCESS-s1oor3li",
+	["WARNING"]: "gx-Icon-WARNING-w1awu5xi",
+	["ERROR"]: "gx-Icon-ERROR-e1ucpgem"
+};
+/** Declared after the variant map so `hex` wins over it. */
+var HEX_CSS = "gx-Icon-HEX_CSS-h8mope0";
 /**
-* Wraps a Phosphor icon so its color comes from a theme token rather than a
-* hardcoded `color` prop. Never render a Phosphor icon bare.
+* One turn every six `duration.base` steps (900ms), linear, forever. The keyframes are global, so
+* the name is `gx-` prefixed. `REDUCED_MOTION` stops it.
 */
-var Icon = ({ component: IconComponent, variant = "PRIMARY", size = 16, weight = "bold", alt }) => {
-	const { theme } = useGalaxyTheme();
-	return /* @__PURE__ */ jsx(IconComponent, {
+var SPINNING_CSS = "gx-Icon-SPINNING_CSS-s1uiuyxj";
+/** Wraps a Phosphor icon so its color, weight and motion come from the DLS. Never render a Phosphor icon bare. */
+var Icon = forwardRef(function Icon({ component: PhosphorComponent, size = 16, weight = "REGULAR", variant = "PRIMARY", hex, ariaLabel, tooltip, isSpinning = false, id, className, style, ...rest }, ref) {
+	const variables = {};
+	if (hex !== void 0) variables["--gx-icon-hex"] = hex;
+	const hasTooltip = tooltip !== void 0 && tooltip !== null && tooltip !== false && tooltip !== "";
+	const icon = /* @__PURE__ */ jsx(PhosphorComponent, {
+		...ariaLabel === void 0 ? { "aria-hidden": true } : {
+			role: "img",
+			"aria-label": ariaLabel
+		},
+		...rest,
+		ref,
+		id,
 		size,
-		weight,
-		color: getIconColor(variant, theme),
-		alt
+		weight: ICON_WEIGHT_TO_PHOSPHOR_WEIGHT_MAP[weight],
+		color: "currentColor",
+		className: cx(ROOT_CSS, ICON_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, isSpinning && SPINNING_CSS, className),
+		style: {
+			...variables,
+			...style
+		}
 	});
-};
+	return hasTooltip ? /* @__PURE__ */ jsx(LazyTooltip, {
+		body: tooltip,
+		children: icon
+	}) : icon;
+});
+Icon.displayName = "Icon";
 //#endregion
 export { IconVariant, IconWeight, Icon as default };

package/dist/icons/internal/IconSlot.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+/** @internal Props of `IconSlot`. */
+export interface IconSlotProps {
+    /** The glyph size in px; the slot is that rounded up to even. */
+    px: number;
+    /** The `Icon` (or spinning ring) at `px`. */
+    children: ReactNode;
+}
+/** @internal An even, fixed-size box for an odd-sized icon: crisp at 1x, centered at 2x. */
+export default function IconSlot({ px, children }: IconSlotProps): import("react").JSX.Element;

package/dist/icons/internal/IconSlot.js

@@ -0,0 +1,32 @@
+/* empty css                   */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/icons/internal/IconSlot.tsx
+/**
+* @internal The box a content icon sits in when its size is odd (Button's and Widget's 13 / 15 /
+* 17px icons), private to the DLS (an `internal/` module: built, never a package export).
+*
+* An odd glyph centered in an even row (or an even icon-only square) lands on a half pixel, which
+* blurs its strokes at 1x. The slot is the glyph's size rounded up to even, so it centers on whole
+* pixels; inside it the glyph sits at the top-left on 1x screens (whole pixels, half a pixel off
+* the true center) and centered from 1.5x up (half a CSS pixel is a whole device pixel there, so
+* it is both crisp and exactly centered). The glyph's own center is then a half pixel, where an
+* odd Phosphor glyph draws its middle strokes, so those land on whole pixels too.
+*
+* Fixed size whatever it holds, so a host can swap the icon for a spinning ring of the same px
+* (Button `isLoading`) without changing its width.
+*/
+var Root = /*#__PURE__*/ styled("span")({
+	name: "Root",
+	class: "gx-IconSlot-ryqtygb",
+	propsAsIs: false
+});
+/** @internal An even, fixed-size box for an odd-sized icon: crisp at 1x, centered at 2x. */
+function IconSlot({ px, children }) {
+	return /* @__PURE__ */ jsx(Root, {
+		style: { "--gx-icon-slot": `${px % 2 === 0 ? px : px + 1}px` },
+		children
+	});
+}
+//#endregion
+export { IconSlot as default };

package/dist/inputs/CheckboxGroup.d.ts

@@ -0,0 +1,115 @@
+import { type AriaAttributes, type CSSProperties, type ReactElement, type ReactNode, type RefAttributes } from "react";
+import { Orientation } from "../theme/enums.js";
+/** Rung of the group's checkboxes (Constitution III-A.4). Mapped to CheckboxInputSize and FieldSize one to one. */
+export declare enum CheckboxGroupSize {
+    /** 12px boxes, caption labels. */
+    X_SMALL = "X_SMALL",
+    /** 14px boxes, body_sm labels. */
+    SMALL = "SMALL",
+    /** 16px boxes, body_md labels. The default. */
+    MEDIUM = "MEDIUM",
+    /** 16px boxes, body_lg labels. */
+    LARGE = "LARGE",
+    /** 18px boxes, body_lg labels. */
+    X_LARGE = "X_LARGE"
+}
+/** Fill of the unchecked boxes (Constitution V-A surface set). Mapped to CheckboxInputVariant one to one. */
+export declare enum CheckboxGroupVariant {
+    /** `background.base`. */
+    BASE = "BASE",
+    /** `background.primary`. The default. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary`. */
+    TERTIARY = "TERTIARY"
+}
+/** One choice in a CheckboxGroup. */
+export interface CheckboxGroupOption<TId extends string = string> {
+    /** Stable identifier; what `value` holds. */
+    id: TId;
+    /** Text beside the box. */
+    label: string;
+    /** Help copy under the label. Text and inline `Link`s only. */
+    description?: ReactNode;
+    /**
+     * Disables this option only.
+     * @default false
+     */
+    isDisabled?: boolean;
+}
+export interface CheckboxGroupProps<TId extends string = string> extends AriaAttributes {
+    /** The choices, in display order. */
+    options: CheckboxGroupOption<TId>[];
+    /** Controlled ids of the checked options. Pass it with `onChange`. */
+    value?: TId[];
+    /**
+     * Initial checked ids while uncontrolled.
+     * @default []
+     */
+    defaultValue?: TId[];
+    /** Called with the new array of checked ids, in `options` order. */
+    onChange?: (value: TId[]) => void;
+    /** The question, rendered through `Field` above the options. For a description, a tooltip or a horizontal layout, wrap the group in `Field` instead. */
+    label?: string;
+    /** Message from the app, shown under the options through `Field`. It also marks every box invalid. */
+    error?: string;
+    /**
+     * Error border and `aria-invalid` on every box, without a message. `error` implies it.
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * Asterisk on the `label` (via `Field`). It does no validation.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * `VERTICAL` stacks the options; `HORIZONTAL` puts them in a row that wraps.
+     * @default Orientation.VERTICAL
+     */
+    orientation?: Orientation;
+    /**
+     * Rung of every box and label, of the gaps, and of the `label` and `error` type.
+     * @default CheckboxGroupSize.MEDIUM
+     */
+    size?: CheckboxGroupSize;
+    /**
+     * Fill of every unchecked box, from the surface set. Ignored with `isGhost`.
+     * @default CheckboxGroupVariant.PRIMARY
+     */
+    variant?: CheckboxGroupVariant;
+    /**
+     * Ghost items: every unchecked box has no fill and keeps its hairline (1.x `TRANSPARENT`);
+     * passed to each CheckboxInput as `isGhost`.
+     * @default false
+     */
+    isGhost?: boolean;
+    /**
+     * Disables every option.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /** Accessible name of the group when there is no `label` and no wrapping `Field` label. */
+    ariaLabel?: string;
+    /**
+     * DOM id of the group element. A wrapping `Field`'s id wins.
+     * @default useId()
+     */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the group element. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root: the `Field` wrapper when the group renders one, otherwise the group element. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/**
+ * The public, generic call signature (`TId` inferred from `options`). Never called: it only types
+ * the default export. An arrow function rather than a type literal, so react-docgen-typescript
+ * reads the props for the Docs tab.
+ */
+declare const CHECKBOX_GROUP_SIGNATURE: <TId extends string = string>(_props: CheckboxGroupProps<TId> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+/** A set of checkboxes answering one question; the value is the array of checked ids. */
+declare const CheckboxGroup: typeof CHECKBOX_GROUP_SIGNATURE;
+export default CheckboxGroup;

package/dist/inputs/CheckboxGroup.js

@@ -0,0 +1,183 @@
+import { Orientation } from "../theme/enums.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { FieldContext } from "../hooks/useField.js";
+import { useFieldWiring } from "./internal/fieldWiring.js";
+import CheckboxInput, { CheckboxInputSize, CheckboxInputVariant } from "./CheckboxInput.js";
+import Field, { FieldSize } from "./Field.js";
+import { rootStyle, useOwnField } from "./internal/ownField.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/inputs/CheckboxGroup.tsx
+/**
+* One question whose answer is any number of options ("Notify me about", "Sync these tables"). It
+* renders a `CheckboxInput` per option, in a column or a wrapping row, holds the checked ids as one
+* array with `value` / `defaultValue` / `onChange`, and names the set for assistive tech as a
+* `group`. Like the text inputs, it takes `label` and `error` directly and renders them through
+* `Field`; for a description, a label tooltip or a horizontal label column, wrap it in a `Field`.
+*
+* It does not validate ("choose at least one" is the app's `error`), draws no "select all" (a parent
+* `CheckboxInput` with `isIndeterminate` does that), and is not a multi-select menu
+* (`MultiSelectInput`). Exactly one choice is `RadioGroup`. New in 2.0 (1.x laid out
+* `CheckboxInput`s by hand with one boolean per box).
+*/
+/** Rung of the group's checkboxes (Constitution III-A.4). Mapped to CheckboxInputSize and FieldSize one to one. */
+var CheckboxGroupSize = /* @__PURE__ */ function(CheckboxGroupSize) {
+	/** 12px boxes, caption labels. */
+	CheckboxGroupSize["X_SMALL"] = "X_SMALL";
+	/** 14px boxes, body_sm labels. */
+	CheckboxGroupSize["SMALL"] = "SMALL";
+	/** 16px boxes, body_md labels. The default. */
+	CheckboxGroupSize["MEDIUM"] = "MEDIUM";
+	/** 16px boxes, body_lg labels. */
+	CheckboxGroupSize["LARGE"] = "LARGE";
+	/** 18px boxes, body_lg labels. */
+	CheckboxGroupSize["X_LARGE"] = "X_LARGE";
+	return CheckboxGroupSize;
+}({});
+/** Fill of the unchecked boxes (Constitution V-A surface set). Mapped to CheckboxInputVariant one to one. */
+var CheckboxGroupVariant = /* @__PURE__ */ function(CheckboxGroupVariant) {
+	/** `background.base`. */
+	CheckboxGroupVariant["BASE"] = "BASE";
+	/** `background.primary`. The default. */
+	CheckboxGroupVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary`. */
+	CheckboxGroupVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary`. */
+	CheckboxGroupVariant["TERTIARY"] = "TERTIARY";
+	return CheckboxGroupVariant;
+}({});
+/** The group element. The first row sits in a control-height band (block inset = Field's label offset). */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-CheckboxGroup-r121frsz",
+	propsAsIs: false
+});
+/** A column, or a row that wraps. */
+var CHECKBOX_GROUP_ORIENTATION_TO_CSS_MAP = {
+	[Orientation.VERTICAL]: "gx-CheckboxGroup-Orientation_VERTICAL-o112a0gt",
+	[Orientation.HORIZONTAL]: "gx-CheckboxGroup-Orientation_HORIZONTAL-o1y9waz3"
+};
+/** Row gap, column gap and block inset per rung (inset = (control rung − label line) / 2). */
+var CHECKBOX_GROUP_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-CheckboxGroup-X_SMALL-x1vxye07",
+	["SMALL"]: "gx-CheckboxGroup-SMALL-sxibfpp",
+	["MEDIUM"]: "gx-CheckboxGroup-MEDIUM-m6pqkmw",
+	["LARGE"]: "gx-CheckboxGroup-LARGE-l1wbobiu",
+	["X_LARGE"]: "gx-CheckboxGroup-X_LARGE-xtetomk"
+};
+/** Every box takes the group's rung. */
+var CHECKBOX_GROUP_SIZE_TO_CHECKBOX_INPUT_SIZE_MAP = {
+	["X_SMALL"]: CheckboxInputSize.X_SMALL,
+	["SMALL"]: CheckboxInputSize.SMALL,
+	["MEDIUM"]: CheckboxInputSize.MEDIUM,
+	["LARGE"]: CheckboxInputSize.LARGE,
+	["X_LARGE"]: CheckboxInputSize.X_LARGE
+};
+/** Every box takes the group's fill. */
+var CHECKBOX_GROUP_VARIANT_TO_CHECKBOX_INPUT_VARIANT_MAP = {
+	["BASE"]: CheckboxInputVariant.BASE,
+	["PRIMARY"]: CheckboxInputVariant.PRIMARY,
+	["SECONDARY"]: CheckboxInputVariant.SECONDARY,
+	["TERTIARY"]: CheckboxInputVariant.TERTIARY
+};
+/** The `Field` the group renders for its own `label` / `error` uses the same rung. */
+var CHECKBOX_GROUP_SIZE_TO_FIELD_SIZE_MAP = {
+	["X_SMALL"]: FieldSize.X_SMALL,
+	["SMALL"]: FieldSize.SMALL,
+	["MEDIUM"]: FieldSize.MEDIUM,
+	["LARGE"]: FieldSize.LARGE,
+	["X_LARGE"]: FieldSize.X_LARGE
+};
+/** The uncontrolled default; never mutated. */
+var EMPTY_IDS = [];
+/** The group element and its boxes, wired to the nearest Field (the group's own or the app's). */
+function GroupBody({ groupProps, forwardedRef, isRoot }) {
+	const { options, value, defaultValue, onChange, label: _label, error, isError = false, isRequired = false, orientation = Orientation.VERTICAL, size = "MEDIUM", variant = "PRIMARY", isGhost = false, isDisabled = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = groupProps;
+	const wiring = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute: rest["aria-label"],
+		ariaLabelledBy: rest["aria-labelledby"],
+		ariaDescribedBy,
+		error,
+		isError,
+		isRequired
+	});
+	const { field, controlId: groupId, describedBy, hasName } = wiring;
+	const [checked, setChecked] = useControlledState({
+		value,
+		defaultValue: defaultValue ?? EMPTY_IDS,
+		onChange
+	});
+	const isInvalid = error !== void 0 || wiring.isInvalid;
+	useDevWarning(!hasName, "[@galaxy-io/dls] CheckboxGroup has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`.");
+	/** The checked ids after one toggle: rendered options in `options` order, then unknown ids kept. */
+	const toggle = (optionId, isChecked) => {
+		const isOn = (candidate) => candidate === optionId ? isChecked : checked.includes(candidate);
+		const known = new Set(options.map((option) => option.id));
+		setChecked([...options.map((option) => option.id).filter(isOn), ...checked.filter((candidate) => !known.has(candidate))]);
+	};
+	return /* @__PURE__ */ jsx(Root, {
+		ref: forwardedRef,
+		role: "group",
+		id: groupId,
+		"aria-labelledby": field?.labelId,
+		"aria-label": ariaLabel,
+		"aria-describedby": describedBy,
+		"aria-disabled": isDisabled ? true : void 0,
+		...rest,
+		className: cx(CHECKBOX_GROUP_ORIENTATION_TO_CSS_MAP[orientation], CHECKBOX_GROUP_SIZE_TO_CSS_MAP[size], isRoot && className),
+		...rootStyle(isRoot, style),
+		children: /* @__PURE__ */ jsx(FieldContext.Provider, {
+			value: null,
+			children: options.map((option) => /* @__PURE__ */ jsx(CheckboxInput, {
+				label: option.label,
+				...option.description === void 0 ? {} : { description: option.description },
+				size: CHECKBOX_GROUP_SIZE_TO_CHECKBOX_INPUT_SIZE_MAP[size],
+				variant: CHECKBOX_GROUP_VARIANT_TO_CHECKBOX_INPUT_VARIANT_MAP[variant],
+				isGhost,
+				isChecked: checked.includes(option.id),
+				isDisabled: isDisabled || option.isDisabled === true,
+				isError: isInvalid,
+				onChange: (isChecked) => toggle(option.id, isChecked)
+			}, option.id))
+		})
+	});
+}
+/** A set of checkboxes answering one question; the value is the array of checked ids. */
+var CheckboxGroupBase = forwardRef(function CheckboxGroup(props, ref) {
+	const { label, error, isRequired = false, size = "MEDIUM" } = props;
+	const { id, className, style } = props;
+	const ownField = useOwnField({
+		componentName: "CheckboxGroup",
+		label,
+		error,
+		isRequired,
+		size: CHECKBOX_GROUP_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(GroupBody, {
+			groupProps: props,
+			forwardedRef: ref,
+			isRoot: false
+		})
+	});
+	return /* @__PURE__ */ jsx(GroupBody, {
+		groupProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
+});
+CheckboxGroupBase.displayName = "CheckboxGroup";
+/** A set of checkboxes answering one question; the value is the array of checked ids. */
+var CheckboxGroup = CheckboxGroupBase;
+//#endregion
+export { CheckboxGroupSize, CheckboxGroupVariant, CheckboxGroup as default };