@eui/eds-react 22.0.0-alpha.12 → 22.0.0-alpha.14

package/eds-flex-layout/eds-flex-layout.css

@@ -0,0 +1,91 @@
+/* eds-flex-layout.css — pure-React 1:1 port of eds-flex-layout.scss.
+ * Class-based source, so `:host.eds-flex-layout` → `.eds-flex-layout` (root class); the `.eui-21`
+ * wrapper is dropped (share-ready). The gap is driven by the `--_flex-gap` custom property set
+ * inline by the component (mirrors the Angular `[style.--_flex-gap]` host binding). The
+ * `EdsFlexGrow` / `EdsFlexNoShrink` / `EdsFlexCol` items are styled inline / via the global
+ * `eds-col-*` grid utilities, so they need no rules here. */
+
+.eds-flex-layout {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: var(--_flex-gap, 0);
+}
+
+/* Direction variants */
+.eds-flex-layout--direction-column {
+    flex-direction: column;
+}
+
+.eds-flex-layout--direction-row-reverse {
+    flex-direction: row-reverse;
+}
+
+.eds-flex-layout--direction-column-reverse {
+    flex-direction: column-reverse;
+}
+
+/* Justify content variants */
+.eds-flex-layout--justify-start {
+    justify-content: flex-start;
+}
+
+.eds-flex-layout--justify-end {
+    justify-content: flex-end;
+}
+
+.eds-flex-layout--justify-center {
+    justify-content: center;
+}
+
+.eds-flex-layout--justify-between {
+    justify-content: space-between;
+}
+
+.eds-flex-layout--justify-around {
+    justify-content: space-around;
+}
+
+.eds-flex-layout--justify-evenly {
+    justify-content: space-evenly;
+}
+
+/* Align items variants */
+.eds-flex-layout--align-start {
+    align-items: flex-start;
+}
+
+.eds-flex-layout--align-end {
+    align-items: flex-end;
+}
+
+.eds-flex-layout--align-center {
+    align-items: center;
+}
+
+.eds-flex-layout--align-stretch {
+    align-items: stretch;
+}
+
+.eds-flex-layout--align-baseline {
+    align-items: baseline;
+}
+
+/* Wrap variants */
+.eds-flex-layout--wrap-wrap {
+    flex-wrap: wrap;
+}
+
+.eds-flex-layout--wrap-wrap-reverse {
+    flex-wrap: wrap-reverse;
+}
+
+/* Display variants */
+.eds-flex-layout--inline {
+    display: inline-flex;
+}
+
+/* Full width */
+.eds-flex-layout--full-width {
+    width: 100%;
+}

package/eds-flex-layout/eds-flex-layout.d.ts

@@ -0,0 +1,100 @@
+import * as React from 'react';
+/**
+ * `EdsFlexLayout` — pure-React port of the Angular `eds-flex-layout` utility.
+ *
+ * A lightweight flex container that replaces verbose `eds-u-*` utility compositions with a
+ * declarative, typed API. Class-based (pre-String-Props) source, so per the migration guide
+ * (rule 9) the BEM modifier classes (`eds-flex-layout--direction-column`, etc.) are reproduced
+ * verbatim on the root `className` and the ported CSS keeps the same class selectors. The gap is
+ * driven by the `--_flex-gap` custom property (set inline), matching the Angular host binding.
+ *
+ * The rendered `<div>` IS the component — `{children}` project directly, `...rest` + `className`
+ * merge onto the root.
+ *
+ * @example
+ * ```tsx
+ * <EdsFlexLayout direction="column" gap="m" align="center">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </EdsFlexLayout>
+ * ```
+ */
+/** Valid gap size tokens matching the EDS spacing scale. */
+export type EdsFlexGap = 'none' | '5xs' | '4xs' | '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
+/** Valid flex direction options. */
+export type EdsFlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+/** Valid justify-content options. */
+export type EdsFlexJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+/** Valid align-items options. */
+export type EdsFlexAlign = 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+/** Valid flex-wrap options. */
+export type EdsFlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export interface EdsFlexLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Flex direction. @default 'row' */
+    direction?: EdsFlexDirection;
+    /** Gap between flex items using EDS spacing tokens. @default 'none' */
+    gap?: EdsFlexGap;
+    /** Justify content along the main axis. @default undefined (no explicit justify-content) */
+    justify?: EdsFlexJustify;
+    /** Align items along the cross axis. @default undefined (no explicit align-items) */
+    align?: EdsFlexAlign;
+    /** Flex wrap behavior. @default 'nowrap' */
+    wrap?: EdsFlexWrap;
+    /** Whether the container is inline-flex instead of flex. @default false */
+    inline?: boolean;
+    /** Whether the container takes full width (width: 100%). @default false */
+    fullWidth?: boolean;
+    /** The flex items. */
+    children?: React.ReactNode;
+}
+export declare const EdsFlexLayout: React.ForwardRefExoticComponent<EdsFlexLayoutProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * `EdsFlexGrow` — pure-React port of the Angular `[edsFlexGrow]` directive.
+ *
+ * Wraps a flex item so it grows to fill remaining space (`flex-grow: 1`). The Angular directive
+ * sat on an arbitrary element; in React it renders a `<div style="flex-grow:1">` wrapper (the
+ * rendered element IS the item). Merge `className`/`style`/`...rest` for full control.
+ */
+export interface EdsFlexGrowProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export declare const EdsFlexGrow: React.ForwardRefExoticComponent<EdsFlexGrowProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * `EdsFlexNoShrink` — pure-React port of the Angular `[edsFlexNoShrink]` directive.
+ *
+ * Wraps a flex item so it does not shrink (`flex-shrink: 0`).
+ */
+export interface EdsFlexNoShrinkProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export declare const EdsFlexNoShrink: React.ForwardRefExoticComponent<EdsFlexNoShrinkProps & React.RefAttributes<HTMLDivElement>>;
+/** Valid column span values (1–12) or 'auto'. */
+export type EdsFlexColSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
+/**
+ * `EdsFlexCol` — pure-React port of the Angular `[edsFlexCol]` directive.
+ *
+ * Marks a flex item as a flexible column. Without any `col` span, defaults to `flex: 1 0 0%`
+ * (equal-width). When a span is given (1–12 or 'auto'), applies the corresponding `eds-col-*`
+ * grid utility classes (and responsive `eds-col-{bp}-*` for the breakpoint props), mirroring the
+ * Angular directive's mobile-first behavior. The utility classes come from the global
+ * `@eui/eds-styles` grid CSS (already loaded by the host); no CSS is shipped by this component.
+ */
+export interface EdsFlexColProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Base column span (all viewports). When unset, item uses `flex: 1 0 0%` (equal-width). */
+    col?: EdsFlexColSpan | null;
+    /** Column span at the xs breakpoint (≥ 480px). */
+    colXs?: EdsFlexColSpan | null;
+    /** Column span at the s breakpoint (≥ 768px). */
+    colS?: EdsFlexColSpan | null;
+    /** Column span at the m breakpoint (≥ 996px). */
+    colM?: EdsFlexColSpan | null;
+    /** Column span at the l breakpoint (≥ 1140px). */
+    colL?: EdsFlexColSpan | null;
+    /** Column span at the xl breakpoint (≥ 1440px). */
+    colXl?: EdsFlexColSpan | null;
+    /** Column span at the 2xl breakpoint (≥ 1600px). */
+    col2xl?: EdsFlexColSpan | null;
+    children?: React.ReactNode;
+}
+export declare const EdsFlexCol: React.ForwardRefExoticComponent<EdsFlexColProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-flex-layout.d.ts.map

package/eds-flex-layout/eds-flex-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-flex-layout.d.ts","sourceRoot":"","sources":["../../src/eds-flex-layout/eds-flex-layout.tsx"],"names":[],"mappings":"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"}

package/eds-flex-layout/eds-flex-layout.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+export const EdsFlexLayout = React.forwardRef(function EdsFlexLayout({ direction = 'row', gap = 'none', justify, align, wrap = 'nowrap', inline = false, fullWidth = false, children, className, style, ...rest }, ref) {
+    // Reproduce Angular `hostClasses()` verbatim (class-based source, rule 9).
+    const hostClasses = [
+        'eds-flex-layout',
+        direction !== 'row' ? `eds-flex-layout--direction-${direction}` : '',
+        justify ? `eds-flex-layout--justify-${justify}` : '',
+        align ? `eds-flex-layout--align-${align}` : '',
+        wrap !== 'nowrap' ? `eds-flex-layout--wrap-${wrap}` : '',
+        inline ? 'eds-flex-layout--inline' : '',
+        fullWidth ? 'eds-flex-layout--full-width' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Angular `[style.--_flex-gap]` host binding: null when 'none', else the spacing token.
+    const gapStyle = gap === 'none'
+        ? style
+        : { ...style, '--_flex-gap': `var(--eds-sp-${gap})` };
+    return (_jsx("div", { ref: ref, className: hostClasses, style: gapStyle, ...rest, children: children }));
+});
+export const EdsFlexGrow = React.forwardRef(function EdsFlexGrow({ children, style, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, style: { flexGrow: 1, ...style }, ...rest, children: children }));
+});
+export const EdsFlexNoShrink = React.forwardRef(function EdsFlexNoShrink({ children, style, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, style: { flexShrink: 0, ...style }, ...rest, children: children }));
+});
+/** Builds an `eds-col-[bp-]{span}` utility class for a given breakpoint prefix + span. */
+function colClass(prefix, span) {
+    if (span == null)
+        return '';
+    return span === 'auto' ? `eds-col${prefix}-auto` : `eds-col${prefix}-${span}`;
+}
+export const EdsFlexCol = React.forwardRef(function EdsFlexCol({ col, colXs, colS, colM, colL, colXl, col2xl, children, className, style, ...rest }, ref) {
+    const hasColSizing = col != null || colXs != null || colS != null || colM != null || colL != null || colXl != null || col2xl != null;
+    const hostClasses = [
+        colClass('', col),
+        colClass('-xs', colXs),
+        colClass('-s', colS),
+        colClass('-m', colM),
+        colClass('-l', colL),
+        colClass('-xl', colXl),
+        colClass('-2xl', col2xl),
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Angular applies `flex: 1 0 0%` only when no col sizing is specified (backward compat).
+    const colStyle = hasColSizing ? style : { flex: '1 0 0%', ...style };
+    return (_jsx("div", { ref: ref, className: hostClasses || undefined, style: colStyle, ...rest, children: children }));
+});
+//# sourceMappingURL=eds-flex-layout.js.map

package/eds-flex-layout/eds-flex-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-flex-layout.js","sourceRoot":"","sources":["../../src/eds-flex-layout/eds-flex-layout.tsx"],"names":[],"mappings":"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"}

package/eds-flex-layout/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsFlexLayout, EdsFlexGrow, EdsFlexNoShrink, EdsFlexCol } from './eds-flex-layout.js';
+export type { EdsFlexLayoutProps, EdsFlexGap, EdsFlexDirection, EdsFlexJustify, EdsFlexAlign, EdsFlexWrap, EdsFlexGrowProps, EdsFlexNoShrinkProps, EdsFlexColProps, EdsFlexColSpan, } from './eds-flex-layout.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-flex-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-flex-layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC/F,YAAY,EACR,kBAAkB,EAClB,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,cAAc,GACjB,MAAM,sBAAsB,CAAC"}

package/eds-flex-layout/index.js

@@ -0,0 +1,2 @@
+export { EdsFlexLayout, EdsFlexGrow, EdsFlexNoShrink, EdsFlexCol } from './eds-flex-layout.js';
+//# sourceMappingURL=index.js.map

package/eds-flex-layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-flex-layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC"}

package/eds-grid-layout/eds-grid-layout.css

@@ -0,0 +1,67 @@
+/* eds-grid-layout.css — pure-React 1:1 port of eds-grid-layout.scss + eds-grid-layout-row.scss +
+ * eds-grid-layout-cell.scss. Class-based sources, so `:host` → the component root class; the
+ * `.eui-21` wrapper is dropped (share-ready). Column count / cell span / gap are driven by the
+ * `--_grid-columns` / `--_cell-span` / `--_layout-gap` custom properties (the gap cascades from
+ * the container's `--gap-*` class down to the rows). base.media() breakpoints inlined:
+ * tablet = 768–1139px, mobile = < 768px. */
+
+/* ── container (eds-grid-layout.scss) ─────────────────────────────── */
+.eds-grid-layout {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: var(--_layout-gap, var(--eds-sp-m));
+}
+
+.eds-grid-layout.eds-grid-layout--gap-xs {
+    --_layout-gap: var(--eds-sp-xs);
+}
+
+.eds-grid-layout.eds-grid-layout--gap-s {
+    --_layout-gap: var(--eds-sp-s);
+}
+
+.eds-grid-layout.eds-grid-layout--gap-m {
+    --_layout-gap: var(--eds-sp-m);
+}
+
+.eds-grid-layout.eds-grid-layout--gap-l {
+    --_layout-gap: var(--eds-sp-l);
+}
+
+.eds-grid-layout.eds-grid-layout--gap-xl {
+    --_layout-gap: var(--eds-sp-xl);
+}
+
+/* ── row (eds-grid-layout-row.scss) ───────────────────────────────── */
+.eds-grid-layout-row {
+    display: grid;
+    grid-template-columns: repeat(var(--_grid-columns, 2), 1fr);
+    gap: var(--_layout-gap, var(--eds-sp-m));
+    width: 100%;
+}
+
+@media screen and (min-width: 768px) and (max-width: 1139px) {
+    .eds-grid-layout-row:not(.eds-grid-layout-row--fixed) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media screen and (max-width: 767px) {
+    .eds-grid-layout-row:not(.eds-grid-layout-row--fixed) {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ── cell (eds-grid-layout-cell.scss) ─────────────────────────────── */
+.eds-grid-layout-cell {
+    grid-column: span var(--_cell-span, 1);
+    display: flex;
+    min-width: 0;
+}
+
+@media screen and (max-width: 767px) {
+    .eds-grid-layout-cell:not(.eds-grid-layout-cell--no-collapse) {
+        grid-column: span 1;
+    }
+}

package/eds-grid-layout/eds-grid-layout.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+/**
+ * `EdsGridLayout` + `EdsGridLayoutRow` + `EdsGridLayoutCell` — pure-React port of the Angular
+ * `eds-grid-layout` utility (container / row / cell).
+ *
+ * A responsive grid layout: the container stacks rows vertically with a configurable gap; each row
+ * is a CSS grid of equal-width columns that collapses to 2 columns on tablet and 1 on mobile
+ * (unless `hasFixedColumns`); cells can span multiple columns.
+ *
+ * Class-based (pre-String-Props) sources, so per the migration guide (rule 9) the BEM classes are
+ * reproduced verbatim on each root `className` and the ported CSS keeps the same class selectors.
+ * The column count / cell span / cascading gap are driven by the `--_grid-columns` / `--_cell-span`
+ * / `--_layout-gap` custom properties (the gap cascades from the container's `--gap-*` class down
+ * to the rows, matching the Angular SCSS). Each rendered element IS the component; `{children}`
+ * project directly and `...rest` + `className` merge onto the root.
+ *
+ * @example
+ * ```tsx
+ * <EdsGridLayout gap="m">
+ *   <EdsGridLayoutRow columns={3}>
+ *     <EdsGridLayoutCell>…</EdsGridLayoutCell>
+ *     <EdsGridLayoutCell span={2}>…</EdsGridLayoutCell>
+ *   </EdsGridLayoutRow>
+ * </EdsGridLayout>
+ * ```
+ */
+/** Gap size token options for the grid layout. */
+export type EdsGridLayoutGap = 'xs' | 's' | 'm' | 'l' | 'xl';
+export interface EdsGridLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Vertical gap between rows. @default 'm' */
+    gap?: EdsGridLayoutGap;
+    children?: React.ReactNode;
+}
+export declare const EdsGridLayout: React.ForwardRefExoticComponent<EdsGridLayoutProps & React.RefAttributes<HTMLDivElement>>;
+export interface EdsGridLayoutRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Number of equal-width columns in this row. @default 2 */
+    columns?: number;
+    /**
+     * Prevents the responsive collapse on smaller viewports. When true, the row keeps its column
+     * count at all breakpoints. @default false
+     */
+    hasFixedColumns?: boolean;
+    children?: React.ReactNode;
+}
+export declare const EdsGridLayoutRow: React.ForwardRefExoticComponent<EdsGridLayoutRowProps & React.RefAttributes<HTMLDivElement>>;
+export interface EdsGridLayoutCellProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** How many columns this cell should span. @default 1 */
+    span?: number;
+    children?: React.ReactNode;
+}
+export declare const EdsGridLayoutCell: React.ForwardRefExoticComponent<EdsGridLayoutCellProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-grid-layout.d.ts.map

package/eds-grid-layout/eds-grid-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-grid-layout.d.ts","sourceRoot":"","sources":["../../src/eds-grid-layout/eds-grid-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,kDAAkD;AAClD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAE7D,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,8CAA8C;IAC9C,GAAG,CAAC,EAAE,gBAAgB,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,2FAYxB,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,gBAAgB,8FAkB3B,CAAC;AAEH,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,iBAAiB,+FAY5B,CAAC"}

package/eds-grid-layout/eds-grid-layout.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+export const EdsGridLayout = React.forwardRef(function EdsGridLayout({ gap = 'm', children, className, ...rest }, ref) {
+    const hostClasses = ['eds-grid-layout', `eds-grid-layout--gap-${gap}`, className ?? '']
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { ref: ref, className: hostClasses, "data-e2e": "eds-grid-layout", ...rest, children: children }));
+});
+export const EdsGridLayoutRow = React.forwardRef(function EdsGridLayoutRow({ columns = 2, hasFixedColumns = false, children, className, style, ...rest }, ref) {
+    const hostClasses = [
+        'eds-grid-layout-row',
+        hasFixedColumns ? 'eds-grid-layout-row--fixed' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Angular `[style.--_grid-columns]` host binding.
+    const rowStyle = { ...style, '--_grid-columns': columns };
+    return (_jsx("div", { ref: ref, className: hostClasses, style: rowStyle, "data-e2e": "eds-grid-layout-row", ...rest, children: children }));
+});
+export const EdsGridLayoutCell = React.forwardRef(function EdsGridLayoutCell({ span = 1, children, className, style, ...rest }, ref) {
+    const hostClasses = ['eds-grid-layout-cell', className ?? ''].filter(Boolean).join(' ');
+    // Angular `[style.--_cell-span]` host binding.
+    const cellStyle = { ...style, '--_cell-span': span };
+    return (_jsx("div", { ref: ref, className: hostClasses, style: cellStyle, "data-e2e": "eds-grid-layout-cell", ...rest, children: children }));
+});
+//# sourceMappingURL=eds-grid-layout.js.map

package/eds-grid-layout/eds-grid-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-grid-layout.js","sourceRoot":"","sources":["../../src/eds-grid-layout/eds-grid-layout.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqC/B,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAqC,SAAS,aAAa,CACpG,EAAE,GAAG,GAAG,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAC3C,GAAG;IAEH,MAAM,WAAW,GAAG,CAAC,iBAAiB,EAAE,wBAAwB,GAAG,EAAE,EAAE,SAAS,IAAI,EAAE,CAAC;SAClF,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,OAAO,CACH,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,cAAW,iBAAiB,KAAK,IAAI,YACrE,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AAaH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAwC,SAAS,gBAAgB,CAC7G,EAAE,OAAO,GAAG,CAAC,EAAE,eAAe,GAAG,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAC7E,GAAG;IAEH,MAAM,WAAW,GAAG;QAChB,qBAAqB;QACrB,eAAe,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE;QACnD,SAAS,IAAI,EAAE;KAClB;SACI,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,kDAAkD;IAClD,MAAM,QAAQ,GAAG,EAAE,GAAG,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAyB,CAAC;IACjF,OAAO,CACH,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,cAAW,qBAAqB,KAAK,IAAI,YAC1F,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAyC,SAAS,iBAAiB,CAChH,EAAE,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EACjD,GAAG;IAEH,MAAM,WAAW,GAAG,CAAC,sBAAsB,EAAE,SAAS,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxF,+CAA+C;IAC/C,MAAM,SAAS,GAAG,EAAE,GAAG,KAAK,EAAE,cAAc,EAAE,IAAI,EAAyB,CAAC;IAC5E,OAAO,CACH,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,cAAW,sBAAsB,KAAK,IAAI,YAC5F,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-grid-layout/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsGridLayout, EdsGridLayoutRow, EdsGridLayoutCell } from './eds-grid-layout.js';
+export type { EdsGridLayoutProps, EdsGridLayoutGap, EdsGridLayoutRowProps, EdsGridLayoutCellProps, } from './eds-grid-layout.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-grid-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-grid-layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC1F,YAAY,EACR,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,EACrB,sBAAsB,GACzB,MAAM,sBAAsB,CAAC"}

package/eds-grid-layout/index.js

@@ -0,0 +1,2 @@
+export { EdsGridLayout, EdsGridLayoutRow, EdsGridLayoutCell } from './eds-grid-layout.js';
+//# sourceMappingURL=index.js.map

package/eds-grid-layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-grid-layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/eds-growl/eds-growl.css

@@ -0,0 +1,200 @@
+/*
+ * eds-growl — pure React port of eds-growl.scss.
+ * :host -> .eds-growl ; &.eds-growl--<pos> -> .eds-growl.eds-growl--<pos> (position kept as a
+ * class, matching the Angular hostClasses() BEM string, not a reflected attribute).
+ * base.media(base.$eds-bkp-mobile) -> @media (max-width: 767px) (mobile is < 768px).
+ * The .eui-21 wrapper is dropped (share-ready, per Part 2). Tokens/privates copied verbatim.
+ */
+
+.eds-growl {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    width: 22rem;
+    z-index: 9000;
+    gap: var(--eds-sp-xs);
+    pointer-events: none;
+}
+
+/* Position variants */
+.eds-growl.eds-growl--bottom-left {
+    bottom: var(--eds-sp-l);
+    left: var(--eds-sp-l);
+}
+
+.eds-growl.eds-growl--bottom-center {
+    bottom: var(--eds-sp-l);
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.eds-growl.eds-growl--bottom-right {
+    bottom: var(--eds-sp-l);
+    right: var(--eds-sp-l);
+}
+
+.eds-growl.eds-growl--top-left {
+    top: var(--eds-sp-l);
+    left: var(--eds-sp-l);
+}
+
+.eds-growl.eds-growl--top-center {
+    top: var(--eds-sp-l);
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.eds-growl.eds-growl--top-right {
+    top: var(--eds-sp-l);
+    right: var(--eds-sp-l);
+}
+
+/* Item base */
+.eds-growl .eds-growl__item {
+    --_eds-growl-surface: var(--eds-c-surface-info-subtler);
+    --_eds-growl-on-surface: var(--eds-c-on-surface-info-subtler);
+    --_eds-growl-border-color: var(--eds-c-border-info);
+
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: var(--eds-sp-m);
+    background-color: var(--_eds-growl-surface);
+    color: var(--_eds-growl-on-surface);
+    border-left: var(--eds-bw-m) solid var(--_eds-growl-border-color);
+    border-radius: var(--eds-br-s);
+    box-shadow: var(--eds-sh-3);
+    pointer-events: auto;
+    animation: eds-growl-fade-in 0.2s ease-out;
+}
+
+/* Severity color variants */
+.eds-growl .eds-growl__item--info {
+    --_eds-growl-surface: var(--eds-c-surface-info-subtler);
+    --_eds-growl-on-surface: var(--eds-c-on-surface-info-subtler);
+    --_eds-growl-border-color: var(--eds-c-border-info);
+}
+
+.eds-growl .eds-growl__item--success {
+    --_eds-growl-surface: var(--eds-c-surface-success-subtler);
+    --_eds-growl-on-surface: var(--eds-c-on-surface-success-subtler);
+    --_eds-growl-border-color: var(--eds-c-border-success);
+}
+
+.eds-growl .eds-growl__item--warning {
+    --_eds-growl-surface: var(--eds-c-surface-warning-subtler);
+    --_eds-growl-on-surface: var(--eds-c-on-surface-warning-subtler);
+    --_eds-growl-border-color: var(--eds-c-border-warning);
+}
+
+.eds-growl .eds-growl__item--critical {
+    --_eds-growl-surface: var(--eds-c-surface-critical-subtler);
+    --_eds-growl-on-surface: var(--eds-c-on-surface-critical-subtler);
+    --_eds-growl-border-color: var(--eds-c-border-critical);
+}
+
+.eds-growl .eds-growl__item--dismiss-all {
+    --_eds-growl-surface: var(--eds-c-surface-neutral-subtler);
+    --_eds-growl-on-surface: var(--eds-c-foreground-default);
+    --_eds-growl-border-color: var(--eds-c-border-divider);
+}
+
+/* Slide animations */
+.eds-growl .eds-growl__item--slide-up {
+    animation-name: eds-growl-slide-up;
+}
+
+.eds-growl .eds-growl__item--slide-down {
+    animation-name: eds-growl-slide-down;
+}
+
+/* Header row */
+.eds-growl .eds-growl__header {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    padding-right: var(--eds-sp-xl);
+}
+
+/* Title */
+.eds-growl .eds-growl__title {
+    font: var(--eds-f-label-m-semi-bold);
+    color: var(--_eds-growl-on-surface);
+}
+
+/* Content / detail area */
+.eds-growl .eds-growl__content {
+    margin-top: var(--eds-sp-2xs);
+    padding-left: calc(var(--eds-sp-xs) + 1.25rem);
+    font: var(--eds-f-paragraph-s);
+    color: var(--_eds-growl-on-surface);
+    max-height: 60vh;
+    overflow-y: auto;
+    overflow-wrap: break-word;
+}
+
+.eds-growl .eds-growl__content a {
+    text-decoration: underline;
+}
+
+/* Close button */
+.eds-growl .eds-growl__close {
+    position: absolute;
+    top: var(--eds-sp-xs);
+    right: var(--eds-sp-xs);
+}
+
+@keyframes eds-growl-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes eds-growl-slide-up {
+    from {
+        opacity: 0;
+        transform: translateY(1rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes eds-growl-slide-down {
+    from {
+        opacity: 0;
+        transform: translateY(-1rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@media (max-width: 767px) {
+    .eds-growl {
+        width: calc(100vw - 2 * var(--eds-sp-m));
+    }
+
+    .eds-growl.eds-growl--bottom-left,
+    .eds-growl.eds-growl--bottom-center,
+    .eds-growl.eds-growl--bottom-right {
+        bottom: var(--eds-sp-m);
+        left: var(--eds-sp-m);
+        right: var(--eds-sp-m);
+        transform: none;
+    }
+
+    .eds-growl.eds-growl--top-left,
+    .eds-growl.eds-growl--top-center,
+    .eds-growl.eds-growl--top-right {
+        top: var(--eds-sp-m);
+        left: var(--eds-sp-m);
+        right: var(--eds-sp-m);
+        transform: none;
+    }
+}