@synerise/ds-condition-blocks 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.1.0 (2026-09-22)
+
+
+### Features
+
+* add @synerise/ds-condition-blocks — building blocks for filtering-condition layouts ([ed332ce](https://github.com/Synerise/synerise-design/commit/ed332cefddd418a293a73c51c57e9a4c1ed4f22f))

package/CLAUDE.md

@@ -0,0 +1,202 @@
+# ConditionBlocks (`@synerise/ds-condition-blocks`)
+
+> Presentational, composable building blocks for filtering-condition layouts — a layout skeleton
+> (group / rows / row / slot / connector) plus leaf primitives (entity / text / add / remove). All
+> state and behaviour live in the consuming app; these blocks carry only the design-system look and
+> ds-condition's grow/shrink-within-bounds sizing.
+
+## Package structure
+
+```
+src/
+  index.ts                 — public barrel (named exports only, no default export)
+  constants.ts             — CONDITION_REMOVE_CLASS, CONDITION_ROWS_GAP
+  errorMessage.styles.ts   — shared ErrorMessage = styled(ErrorText) from ds-typography
+  components/
+    ConditionGroup/        — outer wrapper: entity | rows
+    ConditionRows/         — vertical stack of rows + add button
+    ConditionRow/          — one horizontal row; renders its own connector + error
+    ConditionSlot/         — sizing wrapper for one control (the grow/shrink primitive)
+    ConditionConnector/    — tree-line connector cell (::before stub, ::after line)
+    ConditionEntity/       — flex wrapper for the entity/context chip(s)
+    ConditionTextSlot/     — inline text between controls
+    ConditionAddButton/    — "and where" / "Add another" action row
+    ConditionRemove/       — hover/focus-revealed ✕ for a row
+  __specs__/ConditionBlocks.spec.tsx
+```
+
+## Public exports
+
+All named exports (no default). Each block also re-exports its `*Props` type. Every block is a
+`forwardRef` and forwards native attributes (`data-*` / `aria-*` / `className` / `style`) via
+`WithHTMLAttributes`.
+
+### `ConditionGroup`
+Outermost wrapper — entity on the left, `ConditionRows` on the right. Forward the ref and pass the
+node as `getPopupContainer` to enclosed dropdowns so their popovers share one stacking context.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | — | Entity wrapper + `ConditionRows` |
+| `gap` | `number \| string` | `12` | Gap between entity and rows |
+
+### `ConditionRows`
+Vertical container for the rows and the add button; fills the remaining width, stays shrinkable.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | — | `ConditionRow`s + `ConditionAddButton` |
+| `gap` | `number \| string` | `16` (`CONDITION_ROWS_GAP`) | Vertical gap between rows |
+
+### `ConditionRow`
+A single horizontal row of slots/text. **Renders its own leading connector** (from `connector`) and
+its own error below the slots; reveals a descendant `ConditionRemove` on hover.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | — | The slots / text |
+| `gap` | `number \| string` | `12` | Gap between children |
+| `align` | `'start' \| 'center' \| 'baseline'` | `'start'` | Cross-axis alignment (`center`/`baseline` for text-interleaved rows) |
+| `errorMessage` | `ReactNode` | — | Rendered below the slots, aligned with the first slot |
+| `connector` | `ConditionConnectorProps` | — | When set, renders a leading `ConditionConnector` with these props |
+
+### `ConditionSlot`
+The sizing primitive — wraps one control, controls its grow/shrink within bounds, and cascades
+`min-width: 0`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | — | The control |
+| `variant` | `'rigid' \| 'fill' \| 'shrink'` | `'rigid'` | Preset flex budget (rigid=operator, fill=factor, shrink=parameter) |
+| `grow` | `number` | — | Explicit `flex-grow` (overrides `variant`) |
+| `shrink` | `number` | — | Explicit `flex-shrink` |
+| `basis` | `string` | `'auto'` | Explicit `flex-basis` |
+| `minWidth` | `number \| string` | — | Floor (pair with `shrink`) |
+| `maxWidth` | `number \| string` | — | Cap |
+| `errorMessage` | `ReactNode` | — | Rendered below the control |
+
+### `ConditionConnector`
+The tree-line connector cell. Usually rendered by `ConditionRow` / `ConditionAddButton` via their
+`connector` / `connectorProps`, not composed directly.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `first` | `boolean` | — | First row — full-width horizontal stub |
+| `last` | `boolean` | — | Last row — stops the vertical line at the stub |
+| `readOnly` | `boolean` | — | Hides the trailing line on the last row |
+
+### `ConditionEntity`
+Flex-row wrapper for the entity/context chip(s) at the start of a group (≥1 slot).
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | — | The chip(s) — a `ds-button` custom-color / `ds-context-selector` |
+| `gap` | `number \| string` | `12` | Gap between multiple slots |
+| `errorMessage` | `ReactNode` | — | Rendered below the entity |
+
+### `ConditionTextSlot`
+Inline, non-interactive text between controls.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | — | The label |
+| `muted` | `boolean` | `false` | Lighter secondary colour |
+
+### `ConditionAddButton`
+The add-condition action row; renders the consumer's control and an optional leading connector.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | — | The add control (e.g. a ghost `ds-button`) |
+| `withConnector` | `boolean` | `false` | Draw a `ConditionConnector` before the control |
+| `connectorProps` | `Pick<ConditionConnectorProps, 'first' \| 'last' \| 'readOnly'>` | — | Props for that connector |
+
+### `ConditionRemove`
+Hover/focus-revealed ✕ that removes a row. Carries `CONDITION_REMOVE_CLASS` so an enclosing
+`ConditionRow` toggles it via `:hover` / `:focus-within`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onClick` | `(event) => void` | — | Remove handler |
+| `revealOnRowHover` | `boolean` | `true` | Hidden until the row is hovered or focused; `false` = always visible |
+| `disabled` | `boolean` | `false` | |
+| `aria-label` | `string` | `DS.CONDITION-BLOCKS.REMOVE` (`'Remove'`) | Accessible label; overrides the translated default |
+
+## Usage pattern
+
+```tsx
+import {
+  ConditionGroup,
+  ConditionRows,
+  ConditionRow,
+  ConditionSlot,
+  ConditionEntity,
+  ConditionAddButton,
+  ConditionRemove,
+} from '@synerise/ds-condition-blocks';
+
+<ConditionGroup>
+  <ConditionEntity>{/* entity chip */}</ConditionEntity>
+  <ConditionRows>
+    <ConditionRow connector={{ first: true, last: true }} errorMessage={error}>
+      <ConditionSlot variant="shrink" minWidth={120}>{/* parameter */}</ConditionSlot>
+      <ConditionSlot variant="rigid">{/* operator */}</ConditionSlot>
+      <ConditionSlot variant="fill">
+        {/* value control — ds-input with autoResize.stretchToFit */}
+        <ConditionRemove />
+      </ConditionSlot>
+    </ConditionRow>
+    <ConditionAddButton withConnector>{/* ghost button */}</ConditionAddButton>
+  </ConditionRows>
+</ConditionGroup>;
+```
+
+## Styling
+
+Each block has a co-located `*.styles.ts` using `@synerise/ds-core` theme tokens. The shared
+`ErrorMessage` (`errorMessage.styles.ts`) is `styled(ErrorText)` from `@synerise/ds-typography`
+(red-600) with its default bottom margin replaced by an 8px top margin.
+
+## The sizing guarantee (grow/shrink within bounds)
+
+1. **`ConditionSlot` flex budgets** — `rigid` = `flex: 0 0`, `fill` = `flex: 30 1`,
+   `shrink` = `flex: 0 400` (+ a `minWidth` floor).
+2. **A `min-width: 0` cascade** — `ConditionRows` → `ConditionRow` → `ConditionSlot` → `& > *`, so
+   children can shrink below their intrinsic width and the row never overflows its parent.
+3. **A stretch-to-fit input** — the value control the consumer passes (`@synerise/ds-input` with
+   `autoResize.stretchToFit`) pins its `max-width` to the measured parent width.
+
+Put shrinkable controls inside a `ConditionSlot`, never as a bare child of `ConditionRow`.
+
+## Key dependencies
+
+Only what the package actually imports. The controls a consumer places inside the slots
+(`ds-button`, `ds-input`, `ds-tooltip`, `ds-context-selector`, …) are the *consumer's* dependencies,
+not this package's — do not add them here.
+
+- `@synerise/ds-icon` — `CloseS` in `ConditionRemove`
+- `@synerise/ds-typography` — `ErrorText` behind the shared error label
+- `@synerise/ds-utils` — `WithHTMLAttributes`, `toCssSize`
+- `react-intl` (peer) — the translated `aria-label` on `ConditionRemove`
+
+## Implementation notes
+
+- **`ConditionRow` owns the connector** — pass `connector={{ first, last }}`; do not compose a
+  `<ConditionConnector>` child. The row lays out `[connector | content-column]`, where the content
+  column holds the slots and the error, so the error aligns with the first slot (not the connector).
+- **The connector line is content-independent** — the connector cell `align-self: stretch`es to the
+  row's full height and its `::after` fills the cell + bridges the fixed `CONDITION_ROWS_GAP`, so a
+  multi-line or custom `errorMessage` stays connected to the next row (no per-error-height guess).
+- **`ConditionRemove` reveal is CSS-only, and visual only** — the button is hidden with
+  `opacity: 0` + `pointer-events: none`, never `visibility`/`display`, so it stays in the
+  accessibility tree and the tab order. The enclosing `ConditionRow` reveals it via
+  `:hover` **and `:focus-within`**, and the button reveals itself on `:focus-visible` so keyboard
+  focus never lands on something invisible. Hiding it with `visibility: hidden` (as an earlier
+  revision did) removed it from the focus order entirely and left keyboard and screen-reader users
+  unable to remove a row — WCAG 2.1 AA 2.1.1. In tests query it normally
+  (`getByRole('button', { name: 'Remove' })`); no `hidden: true` is needed.
+- **`ConditionRemove` carries no margin** — the container owns its spacing. Nested in the last
+  `ConditionSlot` (the usual placement) the slot's `SlotContent` offsets it by 8px; placed straight
+  in a `ConditionRow` it is spaced by that row's `gap`. A margin on the button itself stacked on top
+  of the row gap and left the ✕ too far from its control.
+- No default exports; `src/index.ts` is the only barrel.

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# @synerise/ds-condition-blocks
+
+Composable, **presentational** building blocks for filtering-condition layouts.
+
+Where `@synerise/ds-condition` bakes in one fixed structure (context chip → optional
+aggregate → rows of factor / operator / parameter), these blocks let a consuming app
+compose _any_ condition layout — including free-form, text-interleaved ones — while keeping
+the design-system look and, crucially, ds-condition's **grow/shrink-within-bounds** sizing.
+All state and behaviour (menus, values, add/remove orchestration) live in the consuming app.
+
+## Blocks
+
+| Block | Role |
+| --- | --- |
+| `ConditionGroup` | Outermost wrapper — entity on the left, rows on the right. |
+| `ConditionRows` | Vertical stack of rows (and the add button); sets the inter-row gap. |
+| `ConditionRow` | Horizontal flex row; fills its parent but never overflows. Renders its own leading `connector` and an optional `errorMessage`. |
+| `ConditionSlot` | Sizing wrapper for one control (`rigid` / `fill` / `shrink` presets or explicit `grow`/`shrink`/`basis`/`minWidth`/`maxWidth`); optional `errorMessage`. |
+| `ConditionConnector` | The tree-line connector cell (usually rendered via a row's `connector` prop). |
+| `ConditionEntity` | Flex wrapper for the entity/context chip(s); optional `errorMessage`. |
+| `ConditionTextSlot` | Inline label for text-interleaved layouts ("Show only [N] items with the same [x]"). |
+| `ConditionAddButton` | Ghost "and where" / "Add another" / "and then…" action, with an optional connector. |
+| `ConditionRemove` | Hover-revealed ✕ for a row. |
+
+## The sizing guarantee
+
+Three mechanisms, ported from `@synerise/ds-condition`, keep controls stretching and
+shrinking within bounds without the row ever overflowing its parent:
+
+1. **`ConditionSlot` flex budgets** — `rigid` = `flex: 0 0`, `fill` = `flex: 30 1`,
+   `shrink` = `flex: 0 400`; pair `shrink` with a `minWidth` floor.
+2. **A `min-width: 0` cascade** — every level (`ConditionRows` → `ConditionRow` → `ConditionSlot`
+   → its child) is `min-width: 0`, so children can shrink below their intrinsic width.
+3. **A stretch-to-fit value input** — the input the consuming app passes (`@synerise/ds-input`
+   with `autoResize.stretchToFit`) pins its `max-width` to the measured parent width, so it fills
+   the slot but never spills out.
+
+Put shrinkable controls in a `ConditionSlot` (never a bare child of `ConditionRow`) so the
+cascade applies.

package/dist/components/ConditionAddButton/ConditionAddButton.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+/**
+ * Row that hangs an "add" control off the tree line — the "and where" / "Add another" /
+ * "and then…" action. Presentational only: the consuming app passes the actual control (e.g. a
+ * ghost `ds-button`) as `children`.
+ */
+export declare const ConditionAddButton: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    withConnector?: boolean;
+    connectorProps?: Pick<import('../..').ConditionConnectorProps, "first" | "last" | "readOnly">;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, keyof {
+    children: React.ReactNode;
+    withConnector?: boolean;
+    connectorProps?: Pick<import('../..').ConditionConnectorProps, "first" | "last" | "readOnly">;
+}> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ConditionAddButton/ConditionAddButton.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ConditionConnector } from "../ConditionConnector/ConditionConnector.js";
+import { AddButtonRow } from "./ConditionAddButton.styles.js";
+const ConditionAddButton = forwardRef(({
+  children,
+  withConnector = false,
+  connectorProps,
+  ...rest
+}, ref) => /* @__PURE__ */ jsxs(AddButtonRow, { ref, ...rest, children: [
+  withConnector && /* @__PURE__ */ jsx(ConditionConnector, { last: true, ...connectorProps }),
+  children
+] }));
+ConditionAddButton.displayName = "ConditionAddButton";
+export {
+  ConditionAddButton
+};

package/dist/components/ConditionAddButton/ConditionAddButton.styles.d.ts

@@ -0,0 +1 @@
+export declare const AddButtonRow: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/components/ConditionAddButton/ConditionAddButton.styles.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+const AddButtonRow = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ConditionAddButtonstyles__AddButtonRow",
+  componentId: "sc-1u66kfc-0"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;"]);
+export {
+  AddButtonRow
+};

package/dist/components/ConditionAddButton/ConditionAddButton.types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+import { ConditionConnectorProps } from '../ConditionConnector/ConditionConnector.types';
+type ConditionAddButtonOwnProps = {
+    /** The add control rendered by the consuming app (e.g. a ghost ds-button). */
+    children: ReactNode;
+    /** Draw a `ConditionConnector` before the control so it hangs off the row tree line. */
+    withConnector?: boolean;
+    /** Props forwarded to the connector when `withConnector` is set. */
+    connectorProps?: Pick<ConditionConnectorProps, 'first' | 'last' | 'readOnly'>;
+};
+export type ConditionAddButtonProps = WithHTMLAttributes<HTMLDivElement, ConditionAddButtonOwnProps>;
+export {};

package/dist/components/ConditionAddButton/ConditionAddButton.types.js

@@ -0,0 +1 @@
+

package/dist/components/ConditionConnector/ConditionConnector.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+/**
+ * The tree-line connector that links an entity chip to its condition rows and the
+ * add-condition button. Ported from `@synerise/ds-condition`'s row connector.
+ */
+export declare const ConditionConnector: React.ForwardRefExoticComponent<{
+    first?: boolean;
+    last?: boolean;
+    readOnly?: boolean;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, keyof {
+    first?: boolean;
+    last?: boolean;
+    readOnly?: boolean;
+}> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/ConditionConnector/ConditionConnector.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Connector } from "./ConditionConnector.styles.js";
+const ConditionConnector = forwardRef(({
+  first,
+  last,
+  readOnly,
+  ...rest
+}, ref) => /* @__PURE__ */ jsx(Connector, { ref, $first: first, $last: last, $readOnly: readOnly, ...rest }));
+ConditionConnector.displayName = "ConditionConnector";
+export {
+  ConditionConnector
+};

package/dist/components/ConditionConnector/ConditionConnector.styles.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The tree-line connector cell (ported from ds-condition's `ConditionConnections`).
+ *
+ * The horizontal stub is drawn with `::before`; the vertical line with `::after`. Crucially the
+ * cell *stretches to its row's full height* (`align-self: stretch`, no fixed height) so the
+ * vertical line only ever has to fill its own cell and then bridge the fixed inter-row gap
+ * (`CONDITION_ROWS_GAP`) to reach the next connector. This makes the line length independent of
+ * the row's content — multi-line or custom error messages no longer break the connection.
+ */
+export declare const Connector: import('styled-components').StyledComponent<"span", any, {
+    $first?: boolean;
+    $last?: boolean;
+    $readOnly?: boolean;
+}, never>;

package/dist/components/ConditionConnector/ConditionConnector.styles.js

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+import { CONDITION_ROWS_GAP } from "../../constants.js";
+const Connector = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "ConditionConnectorstyles__Connector",
+  componentId: "sc-1vrdhzn-0"
+})(["display:flex;width:32px;min-width:32px;min-height:32px;margin:0;position:relative;align-self:stretch;&:before{position:absolute;content:'';width:", ";height:1px;top:16px;left:", ";background-color:", ";}&:after{display:", ";position:absolute;content:'';width:1px;left:50%;background-color:", ";top:", ";bottom:", ";}"], ({
+  $first
+}) => $first ? "100%" : "16px", ({
+  $first
+}) => $first ? "0" : "16px", ({
+  theme
+}) => theme.palette["grey-300"], ({
+  $first,
+  $last,
+  $readOnly
+}) => $first && $last || $last && $readOnly ? "none" : "flex", ({
+  theme
+}) => theme.palette["grey-300"], ({
+  $first
+}) => $first ? "16px" : "0", ({
+  $last
+}) => $last ? "calc(100% - 16px)" : `-${CONDITION_ROWS_GAP}px`);
+export {
+  Connector
+};

package/dist/components/ConditionConnector/ConditionConnector.types.d.ts

@@ -0,0 +1,11 @@
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+type ConditionConnectorOwnProps = {
+    /** First row in the group — draws a full-width horizontal stub. */
+    first?: boolean;
+    /** Last row in the group — stops the vertical line half-way down. */
+    last?: boolean;
+    /** Read-only conditions hide the trailing vertical line on the last row. */
+    readOnly?: boolean;
+};
+export type ConditionConnectorProps = WithHTMLAttributes<HTMLSpanElement, ConditionConnectorOwnProps>;
+export {};

package/dist/components/ConditionConnector/ConditionConnector.types.js

@@ -0,0 +1 @@
+

package/dist/components/ConditionEntity/ConditionEntity.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+/**
+ * Wrapper for the entity/context area at the start of a condition group. Lays out one or more
+ * chip slots in a row (12px gap by default) and renders an optional `errorMessage` below.
+ * Presentational only — the consuming app renders the actual chip(s) inside (e.g. a `ds-button`
+ * in custom-color mode, or `ds-context-selector`).
+ */
+export declare const ConditionEntity: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    gap?: number | string;
+    errorMessage?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, keyof {
+    children: React.ReactNode;
+    gap?: number | string;
+    errorMessage?: React.ReactNode;
+}> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/ConditionEntity/ConditionEntity.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { toCssSize } from "@synerise/ds-utils";
+import { ErrorMessage } from "../../errorMessage.styles.js";
+import { EntityOuter, EntityRow } from "./ConditionEntity.styles.js";
+const ConditionEntity = forwardRef(({
+  children,
+  gap = 12,
+  errorMessage,
+  ...rest
+}, ref) => /* @__PURE__ */ jsxs(EntityOuter, { ref, ...rest, children: [
+  /* @__PURE__ */ jsx(EntityRow, { $gap: toCssSize(gap), children }),
+  errorMessage && /* @__PURE__ */ jsx(ErrorMessage, { children: errorMessage })
+] }));
+ConditionEntity.displayName = "ConditionEntity";
+export {
+  ConditionEntity
+};

package/dist/components/ConditionEntity/ConditionEntity.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const EntityOuter: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const EntityRow: import('styled-components').StyledComponent<"span", any, {
+    $gap: string;
+}, never>;

package/dist/components/ConditionEntity/ConditionEntity.styles.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+const EntityOuter = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "ConditionEntitystyles__EntityOuter",
+  componentId: "sc-16cm7bd-0"
+})(["display:inline-flex;flex-direction:column;align-items:flex-start;"]);
+const EntityRow = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "ConditionEntitystyles__EntityRow",
+  componentId: "sc-16cm7bd-1"
+})(["display:inline-flex;flex-direction:row;align-items:flex-start;gap:", ";"], ({
+  $gap
+}) => $gap);
+export {
+  EntityOuter,
+  EntityRow
+};

package/dist/components/ConditionEntity/ConditionEntity.types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+type ConditionEntityOwnProps = {
+    /** The entity/context chip(s) rendered by the consuming app (e.g. a ds-button or ds-context-selector). */
+    children: ReactNode;
+    /** Gap between multiple entity slots. A number is treated as px. @default 12 */
+    gap?: number | string;
+    /** Optional error message rendered below the entity. */
+    errorMessage?: ReactNode;
+};
+export type ConditionEntityProps = WithHTMLAttributes<HTMLSpanElement, ConditionEntityOwnProps>;
+export {};

package/dist/components/ConditionEntity/ConditionEntity.types.js

@@ -0,0 +1 @@
+

package/dist/components/ConditionGroup/ConditionGroup.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+/**
+ * Outermost layout wrapper for a single condition: the entity wrapper on the left and its
+ * `ConditionRows` on the right, separated by `gap` (12px default). Forward its ref and pass the
+ * node as `getPopupContainer` for the enclosed dropdowns so their popovers share one stacking
+ * context (fixes popover z-index issues).
+ */
+export declare const ConditionGroup: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    gap?: number | string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, keyof {
+    children: React.ReactNode;
+    gap?: number | string;
+}> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ConditionGroup/ConditionGroup.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { toCssSize } from "@synerise/ds-utils";
+import { Group } from "./ConditionGroup.styles.js";
+const ConditionGroup = forwardRef(({
+  children,
+  gap = 12,
+  ...rest
+}, ref) => /* @__PURE__ */ jsx(Group, { ref, $gap: toCssSize(gap), ...rest, children }));
+ConditionGroup.displayName = "ConditionGroup";
+export {
+  ConditionGroup
+};

package/dist/components/ConditionGroup/ConditionGroup.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const Group: import('styled-components').StyledComponent<"div", any, {
+    $gap: string;
+}, never>;

package/dist/components/ConditionGroup/ConditionGroup.styles.js

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+const Group = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ConditionGroupstyles__Group",
+  componentId: "sc-pfmgu2-0"
+})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:", ";"], ({
+  $gap
+}) => $gap);
+export {
+  Group
+};

package/dist/components/ConditionGroup/ConditionGroup.types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+type ConditionGroupOwnProps = {
+    children: ReactNode;
+    /** Gap between the entity wrapper and the rows. A number is treated as px. @default 12 */
+    gap?: number | string;
+};
+export type ConditionGroupProps = WithHTMLAttributes<HTMLDivElement, ConditionGroupOwnProps>;
+export {};

package/dist/components/ConditionGroup/ConditionGroup.types.js

@@ -0,0 +1 @@
+

package/dist/components/ConditionRemove/ConditionRemove.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+/**
+ * The remove (✕) control for a condition row. Revealed when the enclosing `ConditionRow` is
+ * hovered or focused by default; set `revealOnRowHover={false}` to keep it always visible.
+ *
+ * The icon carries no text, so the accessible name comes from `aria-label` — translated, since a
+ * consuming app renders this in the user's locale. Pass `aria-label` to override it.
+ */
+export declare const ConditionRemove: React.ForwardRefExoticComponent<{
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    revealOnRowHover?: boolean;
+    disabled?: boolean;
+} & Omit<React.HTMLAttributes<HTMLButtonElement>, keyof {
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    revealOnRowHover?: boolean;
+    disabled?: boolean;
+}> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ConditionRemove/ConditionRemove.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useIntl } from "react-intl";
+import Icon, { CloseS } from "@synerise/ds-icon";
+import { CONDITION_REMOVE_CLASS } from "../../constants.js";
+import { RemoveButton } from "./ConditionRemove.styles.js";
+const ConditionRemove = forwardRef(({
+  onClick,
+  revealOnRowHover = true,
+  disabled = false,
+  "aria-label": ariaLabel,
+  className,
+  ...rest
+}, ref) => {
+  const intl = useIntl();
+  return /* @__PURE__ */ jsx(RemoveButton, { ref, $reveal: revealOnRowHover, onClick, disabled, "aria-label": ariaLabel ?? intl.formatMessage({
+    id: "DS.CONDITION-BLOCKS.REMOVE",
+    defaultMessage: "Remove"
+  }), className: [CONDITION_REMOVE_CLASS, className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseS, {}) }) });
+});
+ConditionRemove.displayName = "ConditionRemove";
+export {
+  ConditionRemove
+};

package/dist/components/ConditionRemove/ConditionRemove.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const RemoveButton: import('styled-components').StyledComponent<"button", any, {
+    type: "button";
+} & {
+    $reveal: boolean;
+}, "type">;

package/dist/components/ConditionRemove/ConditionRemove.styles.js

@@ -0,0 +1,16 @@
+import styled, { css } from "styled-components";
+const RemoveButton = /* @__PURE__ */ styled.button.attrs({
+  type: "button"
+}).withConfig({
+  displayName: "ConditionRemovestyles__RemoveButton",
+  componentId: "sc-1508kcm-0"
+})(["display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:24px;height:32px;padding:0;border:none;background:transparent;color:", ";cursor:pointer;transition:all 0.3s ease;", " &:disabled{cursor:not-allowed;color:", ";}"], ({
+  theme
+}) => theme.palette["red-600"], ({
+  $reveal
+}) => $reveal && css(["opacity:0;pointer-events:none;&:focus-visible{opacity:1;pointer-events:auto;}"]), ({
+  theme
+}) => theme.palette["grey-400"]);
+export {
+  RemoveButton
+};

package/dist/components/ConditionRemove/ConditionRemove.types.d.ts

@@ -0,0 +1,10 @@
+import { MouseEvent } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+type ConditionRemoveOwnProps = {
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Hidden until the containing `ConditionRow` is hovered. @default true */
+    revealOnRowHover?: boolean;
+    disabled?: boolean;
+};
+export type ConditionRemoveProps = WithHTMLAttributes<HTMLButtonElement, ConditionRemoveOwnProps>;
+export {};

package/dist/components/ConditionRemove/ConditionRemove.types.js

@@ -0,0 +1 @@
+

package/dist/components/ConditionRow/ConditionRow.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+/**
+ * Horizontal flex row of slots / text / triggers. Fills its parent but never overflows
+ * (`min-width: 0`); defers sizing to the `ConditionSlot`s inside it. Reveals a `ConditionRemove`
+ * descendant on hover. Pass `connector` to render a leading `ConditionConnector`; pass
+ * `errorMessage` to render an error below the slots (aligned with the first slot) — the connector's
+ * vertical line extends automatically to reach the next row.
+ */
+export declare const ConditionRow: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    gap?: number | string;
+    align?: import('./ConditionRow.types').ConditionRowAlign;
+    errorMessage?: React.ReactNode;
+    connector?: import('../..').ConditionConnectorProps;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, keyof {
+    children: React.ReactNode;
+    gap?: number | string;
+    align?: import('./ConditionRow.types').ConditionRowAlign;
+    errorMessage?: React.ReactNode;
+    connector?: import('../..').ConditionConnectorProps;
+}> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ConditionRow/ConditionRow.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { toCssSize } from "@synerise/ds-utils";
+import { ErrorMessage } from "../../errorMessage.styles.js";
+import { ConditionConnector } from "../ConditionConnector/ConditionConnector.js";
+import { RowOuter, Content, Row } from "./ConditionRow.styles.js";
+const ConditionRow = forwardRef(({
+  children,
+  gap = 12,
+  align = "start",
+  errorMessage,
+  connector,
+  ...rest
+}, ref) => /* @__PURE__ */ jsxs(RowOuter, { ref, $gap: toCssSize(gap), ...rest, children: [
+  connector && /* @__PURE__ */ jsx(ConditionConnector, { ...connector }),
+  /* @__PURE__ */ jsxs(Content, { children: [
+    /* @__PURE__ */ jsx(Row, { $gap: toCssSize(gap), $align: align, children }),
+    errorMessage && /* @__PURE__ */ jsx(ErrorMessage, { children: errorMessage })
+  ] })
+] }));
+ConditionRow.displayName = "ConditionRow";
+export {
+  ConditionRow
+};

package/dist/components/ConditionRow/ConditionRow.styles.d.ts

@@ -0,0 +1,9 @@
+import { ConditionRowAlign } from './ConditionRow.types';
+export declare const RowOuter: import('styled-components').StyledComponent<"div", any, {
+    $gap: string;
+}, never>;
+export declare const Content: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Row: import('styled-components').StyledComponent<"div", any, {
+    $gap: string;
+    $align: ConditionRowAlign;
+}, never>;

package/dist/components/ConditionRow/ConditionRow.styles.js

@@ -0,0 +1,31 @@
+import styled, { css } from "styled-components";
+import { CONDITION_REMOVE_CLASS } from "../../constants.js";
+const ALIGN_ITEMS = {
+  start: "flex-start",
+  center: "center",
+  baseline: "baseline"
+};
+const revealRemove = /* @__PURE__ */ css(["opacity:1;pointer-events:auto;"]);
+const RowOuter = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ConditionRowstyles__RowOuter",
+  componentId: "sc-19gru60-0"
+})(["display:flex;flex-direction:row;align-items:stretch;gap:", ";flex-grow:1;min-width:0;&:hover .", "{", "}&:focus-within .", "{", "}"], ({
+  $gap
+}) => $gap, CONDITION_REMOVE_CLASS, revealRemove, CONDITION_REMOVE_CLASS, revealRemove);
+const Content = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ConditionRowstyles__Content",
+  componentId: "sc-19gru60-1"
+})(["display:flex;flex-direction:column;flex-grow:1;min-width:0;"]);
+const Row = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ConditionRowstyles__Row",
+  componentId: "sc-19gru60-2"
+})(["display:flex;flex-direction:row;justify-content:flex-start;align-items:", ";gap:", ";min-width:0;"], ({
+  $align
+}) => ALIGN_ITEMS[$align], ({
+  $gap
+}) => $gap);
+export {
+  Content,
+  Row,
+  RowOuter
+};

package/dist/components/ConditionRow/ConditionRow.types.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+import { ConditionConnectorProps } from '../ConditionConnector/ConditionConnector.types';
+/** Cross-axis alignment of a row's children. */
+export type ConditionRowAlign = 'start' | 'center' | 'baseline';
+type ConditionRowOwnProps = {
+    children: ReactNode;
+    /** Gap between children. A number is treated as px. @default 12 */
+    gap?: number | string;
+    /** Cross-axis alignment. Use `center` / `baseline` for text-interleaved layouts. @default 'start' */
+    align?: ConditionRowAlign;
+    /** Optional error message rendered below the slots, aligned with the first slot. */
+    errorMessage?: ReactNode;
+    /**
+     * When set, the row renders a leading `ConditionConnector` with these props — the consumer no
+     * longer composes one as a child. The connector's line spans the row automatically, so it stays
+     * connected even with a multi-line or custom `errorMessage`.
+     */
+    connector?: ConditionConnectorProps;
+};
+export type ConditionRowProps = WithHTMLAttributes<HTMLDivElement, ConditionRowOwnProps>;
+export {};

package/dist/components/ConditionRow/ConditionRow.types.js

@@ -0,0 +1 @@
+

package/dist/components/ConditionRows/ConditionRows.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+/**
+ * Vertical container for the `ConditionRow`s (and add button) that sit next to a
+ * `ConditionEntity`. Fills the remaining width, stays shrinkable (`min-width: 0`) so the
+ * rows never overflow, and sets the inter-row gap (16px by default; a design token later).
+ */
+export declare const ConditionRows: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    gap?: number | string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, keyof {
+    children: React.ReactNode;
+    gap?: number | string;
+}> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ConditionRows/ConditionRows.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { toCssSize } from "@synerise/ds-utils";
+import { CONDITION_ROWS_GAP } from "../../constants.js";
+import { Rows } from "./ConditionRows.styles.js";
+const ConditionRows = forwardRef(({
+  children,
+  gap = CONDITION_ROWS_GAP,
+  ...rest
+}, ref) => /* @__PURE__ */ jsx(Rows, { ref, $gap: toCssSize(gap), ...rest, children }));
+ConditionRows.displayName = "ConditionRows";
+export {
+  ConditionRows
+};

package/dist/components/ConditionRows/ConditionRows.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const Rows: import('styled-components').StyledComponent<"div", any, {
+    $gap: string;
+}, never>;

package/dist/components/ConditionRows/ConditionRows.styles.js

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+const Rows = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ConditionRowsstyles__Rows",
+  componentId: "sc-1v5urct-0"
+})(["display:flex;flex-direction:column;align-items:stretch;flex-grow:1;min-width:0;gap:", ";"], ({
+  $gap
+}) => $gap);
+export {
+  Rows
+};

package/dist/components/ConditionRows/ConditionRows.types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+type ConditionRowsOwnProps = {
+    children: ReactNode;
+    /**
+     * Vertical gap between rows (and the add button). A number is treated as px.
+     * Defaults to 16px — to be replaced by a design token in follow-up work.
+     * @default 16
+     */
+    gap?: number | string;
+};
+export type ConditionRowsProps = WithHTMLAttributes<HTMLDivElement, ConditionRowsOwnProps>;
+export {};

package/dist/components/ConditionRows/ConditionRows.types.js

@@ -0,0 +1 @@
+

package/dist/components/ConditionSlot/ConditionSlot.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+/**
+ * Sizing wrapper for a single control in a `ConditionRow`. Choose a `variant` preset
+ * (`rigid` / `fill` / `shrink`) or set `grow` / `shrink` / `basis` / `minWidth` / `maxWidth`
+ * explicitly; the internal `min-width: 0` cascade lets it shrink below intrinsic width. Renders
+ * an optional `errorMessage` below the control.
+ */
+export declare const ConditionSlot: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    variant?: import('./ConditionSlot.types').ConditionSlotVariant;
+    grow?: number;
+    shrink?: number;
+    basis?: string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    errorMessage?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, keyof {
+    children: React.ReactNode;
+    variant?: import('./ConditionSlot.types').ConditionSlotVariant;
+    grow?: number;
+    shrink?: number;
+    basis?: string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    errorMessage?: React.ReactNode;
+}> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ConditionSlot/ConditionSlot.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ErrorMessage } from "../../errorMessage.styles.js";
+import { Slot, SlotContent } from "./ConditionSlot.styles.js";
+const ConditionSlot = forwardRef(({
+  children,
+  variant = "rigid",
+  grow,
+  shrink,
+  basis = "auto",
+  minWidth,
+  maxWidth,
+  errorMessage,
+  ...rest
+}, ref) => /* @__PURE__ */ jsxs(Slot, { ref, $variant: variant, $grow: grow, $shrink: shrink, $basis: basis, $minWidth: minWidth, $maxWidth: maxWidth, ...rest, children: [
+  /* @__PURE__ */ jsx(SlotContent, { children }),
+  errorMessage && /* @__PURE__ */ jsx(ErrorMessage, { children: errorMessage })
+] }));
+ConditionSlot.displayName = "ConditionSlot";
+export {
+  ConditionSlot
+};

package/dist/components/ConditionSlot/ConditionSlot.styles.d.ts

@@ -0,0 +1,10 @@
+import { ConditionSlotVariant } from './ConditionSlot.types';
+export declare const Slot: import('styled-components').StyledComponent<"div", any, {
+    $variant: ConditionSlotVariant;
+    $grow?: number;
+    $shrink?: number;
+    $basis: string;
+    $minWidth?: number | string;
+    $maxWidth?: number | string;
+}, never>;
+export declare const SlotContent: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/components/ConditionSlot/ConditionSlot.styles.js

@@ -0,0 +1,41 @@
+import styled, { css } from "styled-components";
+import { toCssSize } from "@synerise/ds-utils";
+import { CONDITION_REMOVE_CLASS } from "../../constants.js";
+const VARIANT_FLEX = {
+  rigid: {
+    grow: 0,
+    shrink: 0
+  },
+  fill: {
+    grow: 30,
+    shrink: 1
+  },
+  shrink: {
+    grow: 0,
+    shrink: 400
+  }
+};
+const Slot = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ConditionSlotstyles__Slot",
+  componentId: "sc-10scp3m-0"
+})(["display:flex;flex-direction:column;min-width:0;flex-grow:", ";flex-shrink:", ";flex-basis:", ";", " ", " .ds-input-group-item{min-width:0;}"], ({
+  $variant,
+  $grow
+}) => $grow ?? VARIANT_FLEX[$variant].grow, ({
+  $variant,
+  $shrink
+}) => $shrink ?? VARIANT_FLEX[$variant].shrink, ({
+  $basis
+}) => $basis, ({
+  $minWidth
+}) => $minWidth !== void 0 && css(["min-width:", ";"], toCssSize($minWidth)), ({
+  $maxWidth
+}) => $maxWidth !== void 0 && css(["max-width:", ";"], toCssSize($maxWidth)));
+const SlotContent = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ConditionSlotstyles__SlotContent",
+  componentId: "sc-10scp3m-1"
+})(["display:flex;min-width:0;> *{min-width:0;}> .", "{margin-left:8px;}"], CONDITION_REMOVE_CLASS);
+export {
+  Slot,
+  SlotContent
+};

package/dist/components/ConditionSlot/ConditionSlot.types.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+/**
+ * Sizing preset mirroring `@synerise/ds-condition`'s slots: `rigid`=operator, `fill`=factor,
+ * `shrink`=parameter.
+ */
+export type ConditionSlotVariant = 'rigid' | 'fill' | 'shrink';
+type ConditionSlotOwnProps = {
+    children: ReactNode;
+    /** Sizing preset. Overridden by explicit `grow` / `shrink`. @default 'rigid' */
+    variant?: ConditionSlotVariant;
+    grow?: number;
+    shrink?: number;
+    basis?: string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    /** Optional error message rendered below the control. */
+    errorMessage?: ReactNode;
+};
+export type ConditionSlotProps = WithHTMLAttributes<HTMLDivElement, ConditionSlotOwnProps>;
+export {};

package/dist/components/ConditionSlot/ConditionSlot.types.js

@@ -0,0 +1 @@
+

package/dist/components/ConditionTextSlot/ConditionTextSlot.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+/**
+ * Inline, non-interactive text slot used to interleave plain text with controls inside a
+ * `ConditionRow` — e.g. "Show only [N] items with the same [attribute]". Vertically centred
+ * against pill-height controls.
+ */
+export declare const ConditionTextSlot: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    muted?: boolean;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, keyof {
+    children: React.ReactNode;
+    muted?: boolean;
+}> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/ConditionTextSlot/ConditionTextSlot.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Text } from "./ConditionTextSlot.styles.js";
+const ConditionTextSlot = forwardRef(({
+  children,
+  muted = false,
+  ...rest
+}, ref) => /* @__PURE__ */ jsx(Text, { ref, $muted: muted, ...rest, children }));
+ConditionTextSlot.displayName = "ConditionTextSlot";
+export {
+  ConditionTextSlot
+};

package/dist/components/ConditionTextSlot/ConditionTextSlot.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const Text: import('styled-components').StyledComponent<"span", any, {
+    $muted?: boolean;
+}, never>;

package/dist/components/ConditionTextSlot/ConditionTextSlot.styles.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+const Text = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "ConditionTextSlotstyles__Text",
+  componentId: "sc-13tqdvh-0"
+})(["flex:0 0 auto;align-self:center;white-space:nowrap;font-size:13px;line-height:1.85;color:", ";"], ({
+  theme,
+  $muted
+}) => theme.palette[$muted ? "grey-500" : "grey-800"]);
+export {
+  Text
+};

package/dist/components/ConditionTextSlot/ConditionTextSlot.types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+type ConditionTextSlotOwnProps = {
+    children: ReactNode;
+    /** Render in a lighter, secondary colour. @default false */
+    muted?: boolean;
+};
+export type ConditionTextSlotProps = WithHTMLAttributes<HTMLSpanElement, ConditionTextSlotOwnProps>;
+export {};

package/dist/components/ConditionTextSlot/ConditionTextSlot.types.js

@@ -0,0 +1 @@
+

package/dist/constants.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Stable class applied to `ConditionRemove` so a parent `ConditionRow` can reveal it on hover
+ * without the two components sharing a styled-component reference across files.
+ */
+export declare const CONDITION_REMOVE_CLASS = "ds-condition-remove";
+/**
+ * Vertical gap between stacked `ConditionRow`s (and the add button). Shared so the connector's
+ * vertical line knows exactly how far to reach the next row — the only spacing it must bridge,
+ * now that the connector cell stretches to its own row's full height.
+ */
+export declare const CONDITION_ROWS_GAP = 16;

package/dist/constants.js

@@ -0,0 +1,6 @@
+const CONDITION_REMOVE_CLASS = "ds-condition-remove";
+const CONDITION_ROWS_GAP = 16;
+export {
+  CONDITION_REMOVE_CLASS,
+  CONDITION_ROWS_GAP
+};

package/dist/errorMessage.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Shared error label for the block error slots. Reuses ds-typography's `ErrorText` (red-600) and
+ * overrides its default `margin-bottom: 4px` — here the message sits *below* its slot, so it needs
+ * a top margin instead.
+ */
+export declare const ErrorMessage: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/errorMessage.styles.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+import { ErrorText } from "@synerise/ds-typography";
+const ErrorMessage = /* @__PURE__ */ styled(ErrorText).withConfig({
+  displayName: "errorMessagestyles__ErrorMessage",
+  componentId: "sc-105izfy-0"
+})(["margin-top:8px;margin-bottom:0;font-size:12px;line-height:1.34;"]);
+export {
+  ErrorMessage
+};

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+export { ConditionAddButton } from './components/ConditionAddButton/ConditionAddButton';
+export type { ConditionAddButtonProps } from './components/ConditionAddButton/ConditionAddButton.types';
+export { ConditionConnector } from './components/ConditionConnector/ConditionConnector';
+export type { ConditionConnectorProps } from './components/ConditionConnector/ConditionConnector.types';
+export { ConditionEntity } from './components/ConditionEntity/ConditionEntity';
+export type { ConditionEntityProps } from './components/ConditionEntity/ConditionEntity.types';
+export { ConditionGroup } from './components/ConditionGroup/ConditionGroup';
+export type { ConditionGroupProps } from './components/ConditionGroup/ConditionGroup.types';
+export { ConditionRemove } from './components/ConditionRemove/ConditionRemove';
+export type { ConditionRemoveProps } from './components/ConditionRemove/ConditionRemove.types';
+export { ConditionRow } from './components/ConditionRow/ConditionRow';
+export type { ConditionRowAlign, ConditionRowProps, } from './components/ConditionRow/ConditionRow.types';
+export { ConditionRows } from './components/ConditionRows/ConditionRows';
+export type { ConditionRowsProps } from './components/ConditionRows/ConditionRows.types';
+export { ConditionSlot } from './components/ConditionSlot/ConditionSlot';
+export type { ConditionSlotProps, ConditionSlotVariant, } from './components/ConditionSlot/ConditionSlot.types';
+export { ConditionTextSlot } from './components/ConditionTextSlot/ConditionTextSlot';
+export type { ConditionTextSlotProps } from './components/ConditionTextSlot/ConditionTextSlot.types';

package/dist/index.js

@@ -0,0 +1,20 @@
+import { ConditionAddButton } from "./components/ConditionAddButton/ConditionAddButton.js";
+import { ConditionConnector } from "./components/ConditionConnector/ConditionConnector.js";
+import { ConditionEntity } from "./components/ConditionEntity/ConditionEntity.js";
+import { ConditionGroup } from "./components/ConditionGroup/ConditionGroup.js";
+import { ConditionRemove } from "./components/ConditionRemove/ConditionRemove.js";
+import { ConditionRow } from "./components/ConditionRow/ConditionRow.js";
+import { ConditionRows } from "./components/ConditionRows/ConditionRows.js";
+import { ConditionSlot } from "./components/ConditionSlot/ConditionSlot.js";
+import { ConditionTextSlot } from "./components/ConditionTextSlot/ConditionTextSlot.js";
+export {
+  ConditionAddButton,
+  ConditionConnector,
+  ConditionEntity,
+  ConditionGroup,
+  ConditionRemove,
+  ConditionRow,
+  ConditionRows,
+  ConditionSlot,
+  ConditionTextSlot
+};

package/dist/modules.d.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@synerise/ds-condition-blocks",
+  "version": "0.1.0",
+  "description": "Composable building blocks for filtering-condition layouts in the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./dist/*.js": "./dist/*.js",
+    "./dist/*": "./dist/*.js"
+  },
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "CLAUDE.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
+    "prepublish": "pnpm run build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "types": "tsc --noEmit",
+    "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-icon": "^2.1.3",
+    "@synerise/ds-typography": "^2.0.5",
+    "@synerise/ds-utils": "^2.2.0"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1",
+    "react-intl": "^6.8.7",
+    "styled-components": "^5.3.3",
+    "vitest": "4"
+  },
+  "gitHead": "5e795fa4fd23f6b07277edb517a84bb9b5b6d256"
+}