@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/FormErrorSummary/FormErrorSummary.d.ts

@@ -0,0 +1,23 @@
+import { Ref } from "react";
+export interface FormErrorItem {
+  /** Hatalı alanın denetim öğesinin kimliği (bağlantı oraya odaklanır). */
+  fieldId: string;
+  /** Alanın adı (etiketi). */
+  label: string;
+  /** Hata metni. */
+  message: string;
+}
+export interface FormErrorSummaryProps {
+  errors: FormErrorItem[];
+  /** Başlık; verilmezse "Formda N hata var". */
+  title?: string;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * Hata özeti (`section`, adıyla bölge): gönderim başarısız olunca formun başında, her hatayı ilgili alana bağlayan liste.
+ * Başlığa odaklanılabilir (`tabIndex=-1`): Form, özeti gösterince odağı buraya taşır; ekran
+ * okuyucu önce özeti, sonra bağlantıları okur. Hata yokken hiçbir şey çizmez.
+ */
+export declare function FormErrorSummary({ errors, title, className, id, ref }: FormErrorSummaryProps): import("react").JSX.Element | null;

package/dist/components/FormErrorSummary/FormErrorSummary.js

@@ -0,0 +1,58 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
+import FormErrorSummary_module_default from "./FormErrorSummary.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/FormErrorSummary/FormErrorSummary.tsx
+/** Bağlantıyla alana git: alan odaklanır ve ekranın ortasına kaydırılır (hareket azaltmada anında). */
+function focusField(e, fieldId) {
+	const el = document.getElementById(fieldId);
+	if (!el) return;
+	e.preventDefault();
+	el.focus({ preventScroll: true });
+	const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	el.scrollIntoView({
+		block: "center",
+		behavior: reduce ? "auto" : "smooth"
+	});
+}
+/**
+* Hata özeti (`section`, adıyla bölge): gönderim başarısız olunca formun başında, her hatayı ilgili alana bağlayan liste.
+* Başlığa odaklanılabilir (`tabIndex=-1`): Form, özeti gösterince odağı buraya taşır; ekran
+* okuyucu önce özeti, sonra bağlantıları okur. Hata yokken hiçbir şey çizmez.
+*/
+function FormErrorSummary({ errors, title, className, id, ref }) {
+	const t = useMessages();
+	if (errors.length === 0) return null;
+	const heading = title ?? template(t.formErrors, { count: errors.length });
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		id,
+		className: [FormErrorSummary_module_default.root, className].filter(Boolean).join(" "),
+		"aria-labelledby": id ? `${id}-title` : void 0,
+		"aria-label": id ? void 0 : heading,
+		tabIndex: -1,
+		children: [/* @__PURE__ */ jsxs("p", {
+			id: id ? `${id}-title` : void 0,
+			className: FormErrorSummary_module_default.title,
+			children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: FormErrorSummary_module_default.icon }), heading]
+		}), /* @__PURE__ */ jsx("ul", {
+			className: FormErrorSummary_module_default.list,
+			children: errors.map((err) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+				href: `#${err.fieldId}`,
+				className: FormErrorSummary_module_default.link,
+				onClick: (e) => focusField(e, err.fieldId),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: FormErrorSummary_module_default.label,
+						children: err.label
+					}),
+					": ",
+					err.message
+				]
+			}) }, err.fieldId))
+		})]
+	});
+}
+export { FormErrorSummary };

package/dist/components/FormErrorSummary/FormErrorSummary.module.js

@@ -0,0 +1,11 @@
+import './FormErrorSummary.css';
+// src/components/FormErrorSummary/FormErrorSummary.module.css
+var FormErrorSummary_module_default = {
+	"root": "sti-FormErrorSummary-root-70bcd",
+	"title": "sti-FormErrorSummary-title-ef443",
+	"icon": "sti-FormErrorSummary-icon-16cc0",
+	"list": "sti-FormErrorSummary-list-e6f5f",
+	"link": "sti-FormErrorSummary-link-bf14a",
+	"label": "sti-FormErrorSummary-label-e414f"
+};
+export { FormErrorSummary_module_default as default };

package/dist/components/FormErrorSummary/index.d.ts

@@ -0,0 +1,2 @@
+import { FormErrorItem, FormErrorSummary, FormErrorSummaryProps } from "./FormErrorSummary.js";
+export { FormErrorItem, FormErrorSummary, FormErrorSummaryProps };

package/dist/components/FormattedNumber/FormattedNumber.css

@@ -0,0 +1,9 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-FormattedNumber-root-3b456 {
+    --sti-number-font: var(--sti-font-numeric);
+    font-family: var(--sti-number-font);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+}

package/dist/components/FormattedNumber/FormattedNumber.d.ts

@@ -0,0 +1,44 @@
+import { Locale } from "../../provider/locale.js";
+export type FormattedNumberFormat = "number" | "percent" | "compact";
+export type NumberUnitDisplay = "short" | "long" | "narrow";
+interface FormattedNumberBaseProps {
+  /** Sayı; sonlu olmalıdır. Yüzde biçiminde oran olarak verilir (0,42 → "%42"). */
+  value: number;
+  /** İşaretli gösterim (değişim, fark): artı da yazılır ("+%12", "+1,2 B"). Renk verilmez. */
+  signed?: boolean;
+  /** Dil; varsayılan Türkçe. İstemci ağacında `useFormatter().context.locale` verilir. */
+  locale?: Locale;
+  className?: string;
+  id?: string;
+}
+/** Sayı: "1.234.567,5"; birimle "12,5 km". */
+interface PlainNumberProps {
+  format?: "number";
+  /** En çok ondalık basamak; varsayılan 3 (`Intl` varsayılanı). */
+  maximumFractionDigits?: number;
+  /** En az ondalık basamak (ör. 2 → "12,50"). */
+  minimumFractionDigits?: number;
+  /** `Intl` birim adı: "kilometer", "kilogram", "hour", "celsius", "kilometer-per-hour"… */
+  unit?: string;
+  /** Birimin yazımı: `short` "12,5 km" (varsayılan), `long` "12,5 kilometre", `narrow` "12,5km". */
+  unitDisplay?: NumberUnitDisplay;
+  digits?: never;
+}
+/** Yüzde: oran → "%42"; `digits` ile "%42,6". */
+interface PercentProps {
+  format: "percent";
+  /** En çok ondalık basamak; varsayılan 0. */
+  digits?: number;
+}
+/** Kısa büyük sayı: "1,2 B", "3,4 Mn" (en çok bir ondalık). */
+interface CompactProps {
+  format: "compact";
+}
+export type FormattedNumberProps = FormattedNumberBaseProps & (PlainNumberProps | PercentProps | CompactProps);
+/**
+ * Sayı gösterimi: `<data value="1234567.5">1.234.567,5</data>`. Düz sayı, yüzde, kısa büyük sayı
+ * ve birimli sayı. Rakamlar eşit genişlikte yazılır, sayı ile birimi satırda bölünmez. Sunucu
+ * bileşenidir.
+ */
+export declare function FormattedNumber(props: FormattedNumberProps): import("react").JSX.Element;
+export {};

package/dist/components/FormattedNumber/FormattedNumber.js

@@ -0,0 +1,44 @@
+import { contextOf } from "../../format/context.js";
+import { formatCompact, formatNumber, formatPercent } from "../../format/numbers.js";
+import { machineValue, signOf, signPrefix } from "./sign.js";
+import FormattedNumber_module_default from "./FormattedNumber.module.js";
+import { jsxs } from "react/jsx-runtime";
+// src/components/FormattedNumber/FormattedNumber.tsx
+function formatAbs(props, abs, ctx) {
+	switch (props.format) {
+		case "percent": return formatPercent(abs, ctx, { digits: props.digits ?? 0 });
+		case "compact": return formatCompact(abs, ctx);
+		default: {
+			const options = {};
+			if (props.maximumFractionDigits !== void 0) options.maximumFractionDigits = props.maximumFractionDigits;
+			if (props.minimumFractionDigits !== void 0) options.minimumFractionDigits = props.minimumFractionDigits;
+			if (props.unit !== void 0) {
+				options.style = "unit";
+				options.unit = props.unit;
+				options.unitDisplay = props.unitDisplay ?? "short";
+			}
+			return formatNumber(abs, ctx, options);
+		}
+	}
+}
+/**
+* Sayı gösterimi: `<data value="1234567.5">1.234.567,5</data>`. Düz sayı, yüzde, kısa büyük sayı
+* ve birimli sayı. Rakamlar eşit genişlikte yazılır, sayı ile birimi satırda bölünmez. Sunucu
+* bileşenidir.
+*/
+function FormattedNumber(props) {
+	const { value, signed = false, locale, className, id } = props;
+	const ctx = contextOf({ locale });
+	const body = formatAbs(props, Math.abs(value), ctx);
+	const roundsToZero = body === formatAbs(props, 0, ctx);
+	const sign = roundsToZero ? "zero" : signOf(value);
+	return /* @__PURE__ */ jsxs("data", {
+		id,
+		className: [FormattedNumber_module_default.root, className].filter(Boolean).join(" "),
+		value: machineValue(value),
+		"data-format": props.format ?? "number",
+		"data-sign": sign,
+		children: [signPrefix(sign, signed, roundsToZero), body]
+	});
+}
+export { FormattedNumber };

package/dist/components/FormattedNumber/FormattedNumber.module.js

@@ -0,0 +1,4 @@
+import './FormattedNumber.css';
+// src/components/FormattedNumber/FormattedNumber.module.css
+var FormattedNumber_module_default = { "root": "sti-FormattedNumber-root-3b456" };
+export { FormattedNumber_module_default as default };

package/dist/components/FormattedNumber/sign.js

@@ -0,0 +1,14 @@
+/** Değerin işareti; -0 ve ±0 sıfırdır. */
+const signOf = (value) => value > 0 ? "positive" : value < 0 ? "negative" : "zero";
+/**
+* Önek: eksi her zaman yazılır; artı yalnız `signed` iken. Sıfır işaretsizdir. Biçimlendirilmiş
+* mutlak değer sıfıra yuvarlanıyorsa ("−₺0,00" yazılmasın diye) işaret kullanılmaz.
+*/
+function signPrefix(sign, signed, roundsToZero) {
+	if (sign === "zero" || roundsToZero) return "";
+	if (sign === "negative") return "−";
+	return signed ? "+" : "";
+}
+/** Makine değeri (`<data value>`): JavaScript sayısının ondalık noktalı yazımı; -0 → "0". */
+const machineValue = (value) => Object.is(value, -0) ? "0" : String(value);
+export { machineValue, signOf, signPrefix };

package/dist/components/FullscreenOverlay/FullscreenOverlay.d.ts

@@ -0,0 +1,15 @@
+import { OverlayBaseProps } from "../_internal/overlay/OverlayFrame.js";
+export interface FullscreenOverlayProps extends Omit<OverlayBaseProps, "isDismissable"> {
+  /**
+   * Gövdenin en büyük genişliği (geniş ekranda ortalanır): sm 32rem, md 48rem (varsayılan),
+   * lg 64rem, xl sınırsız.
+   */
+  size?: "sm" | "md" | "lg" | "xl";
+}
+/**
+ * Tam ekran katman (kipli): bütün ekranı kaplayan pencere; uzun düzenleme, çok adımlı iş, mobilde
+ * kapsamlı form ya da odaklanılması gereken içerik için. Üstte başlık ve kapatma düğmesi, altta
+ * sabit eylemler; gövde kendi kayar. Dialog'un bütün davranışları geçerlidir (odak tutma, Escape,
+ * odağın açan öğeye dönmesi); dışarısı olmadığından dışarı tıklama yoktur.
+ */
+export declare function FullscreenOverlay({ size, ...props }: FullscreenOverlayProps): import("react").JSX.Element;

package/dist/components/FullscreenOverlay/FullscreenOverlay.js

@@ -0,0 +1,19 @@
+"use client";
+import { OverlayFrame } from "../_internal/overlay/OverlayFrame.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/FullscreenOverlay/FullscreenOverlay.tsx
+/**
+* Tam ekran katman (kipli): bütün ekranı kaplayan pencere; uzun düzenleme, çok adımlı iş, mobilde
+* kapsamlı form ya da odaklanılması gereken içerik için. Üstte başlık ve kapatma düğmesi, altta
+* sabit eylemler; gövde kendi kayar. Dialog'un bütün davranışları geçerlidir (odak tutma, Escape,
+* odağın açan öğeye dönmesi); dışarısı olmadığından dışarı tıklama yoktur.
+*/
+function FullscreenOverlay({ size = "md", ...props }) {
+	return /* @__PURE__ */ jsx(OverlayFrame, {
+		kind: "fullscreen",
+		size,
+		...props,
+		isDismissable: false
+	});
+}
+export { FullscreenOverlay };

package/dist/components/FullscreenOverlay/index.d.ts

@@ -0,0 +1,2 @@
+import { FullscreenOverlay, FullscreenOverlayProps } from "./FullscreenOverlay.js";
+export { FullscreenOverlay, FullscreenOverlayProps };

package/dist/components/Grid/Grid.css

@@ -0,0 +1,380 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Grid-root-1e51b {
+    inline-size: 100%;
+    min-inline-size: 0;
+    container: sti-grid / inline-size;
+  }
+
+  .sti-Grid-grid-fe98c {
+    --sti-grid-gap: var(--sti-space-4);
+    --sti-grid-row-gap: var(--sti-grid-gap);
+    --sti-grid-columns: 1;
+    --sti-grid-min-item: calc(var(--sti-space-16) * 4);
+    column-gap: var(--sti-grid-gap);
+    row-gap: var(--sti-grid-row-gap);
+    align-items: stretch;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-Grid-grid-fe98c[data-mode="columns"] {
+    grid-template-columns: repeat(var(--sti-grid-columns), minmax(0, 1fr));
+  }
+
+  .sti-Grid-grid-fe98c[data-mode="auto"] {
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sti-grid-min-item)), 1fr));
+  }
+
+  .sti-Grid-grid-fe98c[data-min-item-width="xs"] {
+    --sti-grid-min-item: calc(var(--sti-space-16) * 3);
+  }
+
+  .sti-Grid-grid-fe98c[data-min-item-width="sm"] {
+    --sti-grid-min-item: calc(var(--sti-space-16) * 4);
+  }
+
+  .sti-Grid-grid-fe98c[data-min-item-width="md"] {
+    --sti-grid-min-item: calc(var(--sti-space-16) * 5);
+  }
+
+  .sti-Grid-grid-fe98c[data-min-item-width="lg"] {
+    --sti-grid-min-item: calc(var(--sti-space-16) * 6);
+  }
+
+  .sti-Grid-grid-fe98c[data-columns="1"] {
+    --sti-grid-columns: 1;
+  }
+
+  .sti-Grid-grid-fe98c[data-columns="2"] {
+    --sti-grid-columns: 2;
+  }
+
+  .sti-Grid-grid-fe98c[data-columns="3"] {
+    --sti-grid-columns: 3;
+  }
+
+  .sti-Grid-grid-fe98c[data-columns="4"] {
+    --sti-grid-columns: 4;
+  }
+
+  .sti-Grid-grid-fe98c[data-columns="5"] {
+    --sti-grid-columns: 5;
+  }
+
+  .sti-Grid-grid-fe98c[data-columns="6"] {
+    --sti-grid-columns: 6;
+  }
+
+  .sti-Grid-grid-fe98c[data-columns="7"] {
+    --sti-grid-columns: 7;
+  }
+
+  .sti-Grid-grid-fe98c[data-columns="8"] {
+    --sti-grid-columns: 8;
+  }
+
+  .sti-Grid-grid-fe98c[data-columns="9"] {
+    --sti-grid-columns: 9;
+  }
+
+  .sti-Grid-grid-fe98c[data-columns="10"] {
+    --sti-grid-columns: 10;
+  }
+
+  .sti-Grid-grid-fe98c[data-columns="11"] {
+    --sti-grid-columns: 11;
+  }
+
+  .sti-Grid-grid-fe98c[data-columns="12"] {
+    --sti-grid-columns: 12;
+  }
+
+  @container sti-grid (width >= 40rem) {
+    .sti-Grid-grid-fe98c[data-columns-sm="1"] {
+      --sti-grid-columns: 1;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-sm="2"] {
+      --sti-grid-columns: 2;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-sm="3"] {
+      --sti-grid-columns: 3;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-sm="4"] {
+      --sti-grid-columns: 4;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-sm="5"] {
+      --sti-grid-columns: 5;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-sm="6"] {
+      --sti-grid-columns: 6;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-sm="7"] {
+      --sti-grid-columns: 7;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-sm="8"] {
+      --sti-grid-columns: 8;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-sm="9"] {
+      --sti-grid-columns: 9;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-sm="10"] {
+      --sti-grid-columns: 10;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-sm="11"] {
+      --sti-grid-columns: 11;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-sm="12"] {
+      --sti-grid-columns: 12;
+    }
+  }
+
+  @container sti-grid (width >= 48rem) {
+    .sti-Grid-grid-fe98c[data-columns-md="1"] {
+      --sti-grid-columns: 1;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-md="2"] {
+      --sti-grid-columns: 2;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-md="3"] {
+      --sti-grid-columns: 3;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-md="4"] {
+      --sti-grid-columns: 4;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-md="5"] {
+      --sti-grid-columns: 5;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-md="6"] {
+      --sti-grid-columns: 6;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-md="7"] {
+      --sti-grid-columns: 7;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-md="8"] {
+      --sti-grid-columns: 8;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-md="9"] {
+      --sti-grid-columns: 9;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-md="10"] {
+      --sti-grid-columns: 10;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-md="11"] {
+      --sti-grid-columns: 11;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-md="12"] {
+      --sti-grid-columns: 12;
+    }
+  }
+
+  @container sti-grid (width >= 64rem) {
+    .sti-Grid-grid-fe98c[data-columns-lg="1"] {
+      --sti-grid-columns: 1;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-lg="2"] {
+      --sti-grid-columns: 2;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-lg="3"] {
+      --sti-grid-columns: 3;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-lg="4"] {
+      --sti-grid-columns: 4;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-lg="5"] {
+      --sti-grid-columns: 5;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-lg="6"] {
+      --sti-grid-columns: 6;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-lg="7"] {
+      --sti-grid-columns: 7;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-lg="8"] {
+      --sti-grid-columns: 8;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-lg="9"] {
+      --sti-grid-columns: 9;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-lg="10"] {
+      --sti-grid-columns: 10;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-lg="11"] {
+      --sti-grid-columns: 11;
+    }
+
+    .sti-Grid-grid-fe98c[data-columns-lg="12"] {
+      --sti-grid-columns: 12;
+    }
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="0"] {
+    --sti-grid-gap: var(--sti-space-0);
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="0-5"] {
+    --sti-grid-gap: var(--sti-space-0-5);
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="1"] {
+    --sti-grid-gap: var(--sti-space-1);
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="2"] {
+    --sti-grid-gap: var(--sti-space-2);
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="3"] {
+    --sti-grid-gap: var(--sti-space-3);
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="4"] {
+    --sti-grid-gap: var(--sti-space-4);
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="5"] {
+    --sti-grid-gap: var(--sti-space-5);
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="6"] {
+    --sti-grid-gap: var(--sti-space-6);
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="8"] {
+    --sti-grid-gap: var(--sti-space-8);
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="10"] {
+    --sti-grid-gap: var(--sti-space-10);
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="12"] {
+    --sti-grid-gap: var(--sti-space-12);
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="16"] {
+    --sti-grid-gap: var(--sti-space-16);
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="20"] {
+    --sti-grid-gap: var(--sti-space-20);
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="24"] {
+    --sti-grid-gap: var(--sti-space-24);
+  }
+
+  .sti-Grid-grid-fe98c[data-gap="32"] {
+    --sti-grid-gap: var(--sti-space-32);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="0"] {
+    --sti-grid-row-gap: var(--sti-space-0);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="0-5"] {
+    --sti-grid-row-gap: var(--sti-space-0-5);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="1"] {
+    --sti-grid-row-gap: var(--sti-space-1);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="2"] {
+    --sti-grid-row-gap: var(--sti-space-2);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="3"] {
+    --sti-grid-row-gap: var(--sti-space-3);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="4"] {
+    --sti-grid-row-gap: var(--sti-space-4);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="5"] {
+    --sti-grid-row-gap: var(--sti-space-5);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="6"] {
+    --sti-grid-row-gap: var(--sti-space-6);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="8"] {
+    --sti-grid-row-gap: var(--sti-space-8);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="10"] {
+    --sti-grid-row-gap: var(--sti-space-10);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="12"] {
+    --sti-grid-row-gap: var(--sti-space-12);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="16"] {
+    --sti-grid-row-gap: var(--sti-space-16);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="20"] {
+    --sti-grid-row-gap: var(--sti-space-20);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="24"] {
+    --sti-grid-row-gap: var(--sti-space-24);
+  }
+
+  .sti-Grid-grid-fe98c[data-row-gap="32"] {
+    --sti-grid-row-gap: var(--sti-space-32);
+  }
+
+  .sti-Grid-grid-fe98c[data-align-items="stretch"] {
+    align-items: stretch;
+  }
+
+  .sti-Grid-grid-fe98c[data-align-items="start"] {
+    align-items: start;
+  }
+
+  .sti-Grid-grid-fe98c[data-align-items="center"] {
+    align-items: center;
+  }
+
+  .sti-Grid-grid-fe98c[data-align-items="end"] {
+    align-items: end;
+  }
+}