@stisocial/ui 0.2.0 → 0.3.0

package/dist/components/DocumentToc/DocumentToc.css

@@ -0,0 +1,86 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-DocumentToc-root-791dd {
+    gap: var(--sti-space-3);
+    font-size: var(--sti-document-font-size, var(--sti-font-size-md));
+    display: grid;
+  }
+
+  .sti-DocumentToc-title-6ad98 {
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-DocumentToc-list-2a945 {
+    gap: var(--sti-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-DocumentToc-item-dcbb4[data-level="1"] {
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-DocumentToc-item-dcbb4[data-level="1"]:not(:first-child) {
+    margin-block-start: var(--sti-space-2);
+  }
+
+  .sti-DocumentToc-item-dcbb4[data-level="2"] {
+    color: var(--sti-fg-muted);
+    padding-inline-start: var(--sti-space-6);
+  }
+
+  .sti-DocumentToc-link-e276b {
+    align-items: baseline;
+    gap: var(--sti-space-2);
+    border-radius: var(--sti-radius-xs);
+    color: inherit;
+    text-decoration: none;
+    display: flex;
+  }
+
+  .sti-DocumentToc-link-e276b:hover .sti-DocumentToc-label-25670 {
+    text-underline-offset: .2em;
+    text-decoration: underline;
+  }
+
+  .sti-DocumentToc-link-e276b:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-DocumentToc-num-022e9 {
+    font-variant-numeric: tabular-nums;
+    flex: none;
+    min-inline-size: 2rem;
+  }
+
+  .sti-DocumentToc-label-25670 {
+    min-inline-size: 0;
+  }
+
+  .sti-DocumentToc-leader-8b584 {
+    min-inline-size: var(--sti-space-4);
+    border-block-end: var(--sti-border-width) dotted var(--sti-border-strong);
+    translate: 0 calc(var(--sti-space-1) * -1);
+    flex: 1;
+  }
+
+  .sti-DocumentToc-page-e8e01 {
+    font-variant-numeric: tabular-nums;
+    flex: none;
+  }
+
+  .sti-DocumentToc-srOnly-e1216 {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+}

package/dist/components/DocumentToc/DocumentToc.d.ts

@@ -0,0 +1,30 @@
+import { Locale } from "../../provider/locale.js";
+import { UIMessages } from "../../messages/messages.js";
+export interface DocumentTocItem {
+  /** Bölümün kimliği (`#id` bağlantısı). */
+  id: string;
+  label: string;
+  /** Basılı sayfa numarası. */
+  page?: number;
+  /** Düzey: 1 bölüm, 2 alt bölüm. */
+  level?: 1 | 2;
+}
+export interface DocumentTocProps {
+  items: readonly DocumentTocItem[];
+  title?: string;
+  /** Bölüm numaraları (1, 1.1). Varsayılan `true`. */
+  numbered?: boolean;
+  titleLevel?: 2 | 3;
+  locale?: Locale;
+  labels?: Partial<UIMessages>;
+  className?: string;
+  id?: string;
+}
+/** Bölüm numaraları: düzey 1 → "1", düzey 2 → "1.1". */
+export declare function tocNumbers(items: readonly Pick<DocumentTocItem, "level">[]): string[];
+/**
+ * Belge içindekiler tablosu: numaralı bölümler, alt bölümler girintili, noktalı kılavuz çizgisi ve
+ * sayfa numarası. Bölümler bağlantıdır (ekranda gezinme); yazdırınca bağlantı görünümü kalkar.
+ * Sunucu bileşenidir.
+ */
+export declare function DocumentToc({ items, title, numbered, titleLevel, locale, labels, className, id }: DocumentTocProps): import("react").JSX.Element;

package/dist/components/DocumentToc/DocumentToc.js

@@ -0,0 +1,72 @@
+import { createFormatter } from "../../format/formatter.js";
+import { documentText, fill } from "../_document/text.js";
+import DocumentToc_module_default from "./DocumentToc.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/DocumentToc/DocumentToc.tsx
+/** Bölüm numaraları: düzey 1 → "1", düzey 2 → "1.1". */
+function tocNumbers(items) {
+	let major = 0;
+	let minor = 0;
+	return items.map((it) => {
+		if ((it.level ?? 1) === 1) {
+			major += 1;
+			minor = 0;
+			return String(major);
+		}
+		minor += 1;
+		return `${Math.max(major, 1)}.${minor}`;
+	});
+}
+/**
+* Belge içindekiler tablosu: numaralı bölümler, alt bölümler girintili, noktalı kılavuz çizgisi ve
+* sayfa numarası. Bölümler bağlantıdır (ekranda gezinme); yazdırınca bağlantı görünümü kalkar.
+* Sunucu bileşenidir.
+*/
+function DocumentToc({ items, title, numbered = true, titleLevel = 2, locale, labels, className, id }) {
+	const t = documentText(locale, labels);
+	const f = createFormatter({ locale });
+	const nums = tocNumbers(items);
+	const Heading = `h${titleLevel}`;
+	const name = title ?? t.documentToc;
+	return /* @__PURE__ */ jsxs("nav", {
+		id,
+		className: [DocumentToc_module_default.root, className].filter(Boolean).join(" "),
+		"aria-label": name,
+		children: [/* @__PURE__ */ jsx(Heading, {
+			className: DocumentToc_module_default.title,
+			children: name
+		}), /* @__PURE__ */ jsx("ol", {
+			className: DocumentToc_module_default.list,
+			children: items.map((it, i) => /* @__PURE__ */ jsx("li", {
+				className: DocumentToc_module_default.item,
+				"data-level": it.level ?? 1,
+				children: /* @__PURE__ */ jsxs("a", {
+					className: DocumentToc_module_default.link,
+					href: `#${it.id}`,
+					children: [
+						numbered ? /* @__PURE__ */ jsx("span", {
+							className: DocumentToc_module_default.num,
+							children: nums[i]
+						}) : null,
+						/* @__PURE__ */ jsx("span", {
+							className: DocumentToc_module_default.label,
+							children: it.label
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: DocumentToc_module_default.leader,
+							"aria-hidden": "true"
+						}),
+						it.page !== void 0 ? /* @__PURE__ */ jsxs("span", {
+							className: DocumentToc_module_default.page,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: DocumentToc_module_default.srOnly,
+								children: `, ${fill(t.documentPageOnly, { page: "" }).trim()} `
+							}), f.number(it.page)]
+						}) : null
+					]
+				})
+			}, it.id))
+		})]
+	});
+}
+export { DocumentToc, tocNumbers };

package/dist/components/DocumentToc/DocumentToc.module.js

@@ -0,0 +1,15 @@
+import './DocumentToc.css';
+// src/components/DocumentToc/DocumentToc.module.css
+var DocumentToc_module_default = {
+	"root": "sti-DocumentToc-root-791dd",
+	"title": "sti-DocumentToc-title-6ad98",
+	"list": "sti-DocumentToc-list-2a945",
+	"item": "sti-DocumentToc-item-dcbb4",
+	"link": "sti-DocumentToc-link-e276b",
+	"label": "sti-DocumentToc-label-25670",
+	"num": "sti-DocumentToc-num-022e9",
+	"leader": "sti-DocumentToc-leader-8b584",
+	"page": "sti-DocumentToc-page-e8e01",
+	"srOnly": "sti-DocumentToc-srOnly-e1216"
+};
+export { DocumentToc_module_default as default };

package/dist/components/EmailField/EmailField.js

@@ -1,8 +1,8 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
-import { TextField } from "../TextField/TextField.js";
 import { Button } from "../Button/Button.js";
+import { TextField } from "../TextField/TextField.js";
 import EmailField_module_default from "./EmailField.module.js";
 import { COMMON_EMAIL_DOMAINS, suggestEmail } from "./emailSuggestion.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/ErrorPage/ErrorPage.js

@@ -1,12 +1,12 @@
 "use client";
 import { useFormatter, useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
-import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { Button } from "../Button/Button.js";
+import { parseInstant } from "../DateTime/instant.js";
+import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
 import { ArrowLeftIcon } from "../../icons/generated/ArrowLeftIcon.js";
 import { ClockIcon } from "../../icons/generated/ClockIcon.js";
-import { parseInstant } from "../DateTime/instant.js";
 import { SearchIcon } from "../../icons/generated/SearchIcon.js";
 import { RefreshIcon } from "../../icons/generated/RefreshIcon.js";
 import { HomeIcon } from "../../icons/generated/HomeIcon.js";

package/dist/components/ErrorState/ErrorState.js

@@ -1,8 +1,8 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
+import { Button } from "../Button/Button.js";
 import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
 import { useAnnouncement } from "../Alert/useAnnouncement.js";
-import { Button } from "../Button/Button.js";
 import { EmptyState } from "../EmptyState/EmptyState.js";
 import { RefreshIcon } from "../../icons/generated/RefreshIcon.js";
 import ErrorState_module_default from "./ErrorState.module.js";

package/dist/components/FeedbackWidget/FeedbackWidget.js

@@ -1,16 +1,16 @@
 "use client";
 import { useLocale, useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
+import { Button } from "../Button/Button.js";
 import { characterCount } from "../CharacterCounter/CharacterCounter.js";
 import { TextArea } from "../TextArea/TextArea.js";
 import { CheckCircleIcon } from "../../icons/generated/CheckCircleIcon.js";
 import { announce } from "../Alert/announcer.js";
 import { Alert } from "../Alert/Alert.js";
-import { Button } from "../Button/Button.js";
+import { SegmentedControl, SegmentedControlItem } from "../SegmentedControl/SegmentedControl.js";
 import { Popover } from "../Popover/Popover.js";
 import { MessageIcon } from "../../icons/generated/MessageIcon.js";
 import { Rating } from "../Rating/Rating.js";
-import { SegmentedControl, SegmentedControlItem } from "../SegmentedControl/SegmentedControl.js";
 import FeedbackWidget_module_default from "./FeedbackWidget.module.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";

package/dist/components/Field/Field.css

@@ -1,6 +1,6 @@
 @layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
 @layer sti.components {
-  .sti-Field-root-0c253 {
+  .sti-Field-root-3a9d6 {
     --sti-field-gap: var(--sti-space-2);
     --sti-field-control-h: var(--sti-control-h-md);
     --sti-field-control-px: var(--sti-space-4);
@@ -14,24 +14,24 @@
     display: grid;
   }
 
-  .sti-Field-root-0c253[data-size="sm"] {
+  .sti-Field-root-3a9d6[data-size="sm"] {
     --sti-field-control-h: var(--sti-control-h-sm);
     --sti-field-control-px: var(--sti-space-3);
     --sti-field-gap: var(--sti-space-1);
   }
 
-  .sti-Field-root-0c253[data-size="lg"] {
+  .sti-Field-root-3a9d6[data-size="lg"] {
     --sti-field-control-h: var(--sti-control-h-lg);
     --sti-field-control-px: var(--sti-space-5);
   }
 
   @media (pointer: coarse) {
-    .sti-Field-root-0c253[data-size="sm"] {
+    .sti-Field-root-3a9d6[data-size="sm"] {
       --sti-field-control-h: var(--sti-control-h-md);
     }
   }
 
-  .sti-Field-label-31a20 {
+  .sti-Field-label-760f8 {
     color: var(--sti-fg-muted);
     font-size: var(--sti-font-size-sm);
     font-weight: var(--sti-font-weight-medium);
@@ -39,29 +39,29 @@
     transition: color var(--sti-duration-fast) var(--sti-ease-snap);
   }
 
-  .sti-Field-root-0c253:focus-within .sti-Field-label-31a20 {
+  .sti-Field-root-3a9d6:focus-within .sti-Field-label-760f8 {
     color: var(--sti-fg-signal);
   }
 
-  .sti-Field-root-0c253[data-invalid] .sti-Field-label-31a20 {
+  .sti-Field-root-3a9d6[data-invalid] .sti-Field-label-760f8 {
     color: var(--sti-fg-danger);
   }
 
-  .sti-Field-optional-081bf {
+  .sti-Field-optional-22118 {
     font-weight: var(--sti-font-weight-regular);
   }
 
-  .sti-Field-description-b837d {
+  .sti-Field-description-628e2 {
     color: var(--sti-fg-muted);
     font-size: var(--sti-font-size-sm);
     line-height: var(--sti-line-height-sm);
   }
 
-  .sti-Field-description-b837d:empty {
+  .sti-Field-description-628e2:empty {
     display: none;
   }
 
-  .sti-Field-error-a5e5f {
+  .sti-Field-error-9dce4 {
     align-items: flex-start;
     gap: var(--sti-space-1);
     color: var(--sti-fg-danger);
@@ -71,13 +71,13 @@
     display: flex;
   }
 
-  .sti-Field-errorIcon-32192 {
+  .sti-Field-errorIcon-0fe03 {
     font-size: var(--sti-icon-sm);
     flex: none;
     margin-block-start: .125em;
   }
 
-  .sti-Field-control-2a809 {
+  .sti-Field-control-2df75 {
     width: 100%;
     min-width: 0;
     min-height: var(--sti-field-control-h);
@@ -89,76 +89,77 @@
     font-family: var(--sti-font-text);
     font-size: var(--sti-field-font-size);
     line-height: var(--sti-line-height-md);
+    text-overflow: ellipsis;
     transition: border-color var(--sti-duration-fast) var(--sti-ease-snap),
       box-shadow var(--sti-duration-fast) var(--sti-ease-snap);
     margin: 0;
   }
 
-  .sti-Field-control-2a809::placeholder {
+  .sti-Field-control-2df75::placeholder {
     color: var(--sti-fg-muted);
     opacity: 1;
   }
 
   @media (hover: hover) {
-    .sti-Field-control-2a809[data-hovered]:not([data-disabled], [data-focused]) {
+    .sti-Field-control-2df75[data-hovered]:not([data-disabled], [data-focused]) {
       border-color: var(--sti-border-strong);
     }
   }
 
-  .sti-Field-control-2a809[data-focused] {
+  .sti-Field-control-2df75[data-focused] {
     border-color: var(--sti-focus-ring);
     box-shadow: 0 0 0 var(--sti-field-halo)
       color-mix(in oklab, var(--sti-focus-ring) 25%, transparent);
     outline: none;
   }
 
-  .sti-Field-control-2a809[data-invalid] {
+  .sti-Field-control-2df75[data-invalid] {
     border-color: var(--sti-fg-danger);
   }
 
-  .sti-Field-control-2a809[data-invalid][data-focused] {
+  .sti-Field-control-2df75[data-invalid][data-focused] {
     box-shadow: 0 0 0 var(--sti-field-halo)
       color-mix(in oklab, var(--sti-fg-danger) 25%, transparent);
   }
 
-  .sti-Field-control-2a809[data-disabled] {
+  .sti-Field-control-2df75[data-disabled] {
     opacity: var(--sti-opacity-disabled);
     cursor: not-allowed;
   }
 
-  .sti-Field-control-2a809[readonly] {
+  .sti-Field-control-2df75[readonly] {
     background: var(--sti-bg-subtle);
     border-style: dashed;
   }
 
-  .sti-Field-control-2a809:-webkit-autofill {
+  .sti-Field-control-2df75:-webkit-autofill {
     -webkit-text-fill-color: var(--sti-fg);
     caret-color: var(--sti-fg);
     box-shadow: inset 0 0 0 100vmax var(--sti-bg-canvas);
   }
 
-  .sti-Field-control-2a809:-webkit-autofill[data-focused] {
+  .sti-Field-control-2df75:-webkit-autofill[data-focused] {
     box-shadow: inset 0 0 0 100vmax var(--sti-bg-canvas),
       0 0 0 var(--sti-field-halo) color-mix(in oklab, var(--sti-focus-ring) 25%, transparent);
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .sti-Field-label-31a20, .sti-Field-control-2a809 {
+    .sti-Field-label-760f8, .sti-Field-control-2df75 {
       transition: none;
     }
   }
 
   @media (forced-colors: active) {
-    .sti-Field-control-2a809 {
+    .sti-Field-control-2df75 {
       border-color: fieldtext;
     }
 
-    .sti-Field-control-2a809[data-focused] {
+    .sti-Field-control-2df75[data-focused] {
       outline: var(--sti-focus-ring-width) solid Highlight;
       outline-offset: 0;
     }
 
-    .sti-Field-control-2a809[data-invalid] {
+    .sti-Field-control-2df75[data-invalid] {
       border-width: var(--sti-border-width-strong);
     }
   }

package/dist/components/Field/Field.module.js

@@ -1,12 +1,12 @@
 import './Field.css';
 // src/components/Field/Field.module.css
 var Field_module_default = {
-	"root": "sti-Field-root-0c253",
-	"label": "sti-Field-label-31a20",
-	"optional": "sti-Field-optional-081bf",
-	"description": "sti-Field-description-b837d",
-	"error": "sti-Field-error-a5e5f",
-	"errorIcon": "sti-Field-errorIcon-32192",
-	"control": "sti-Field-control-2a809"
+	"root": "sti-Field-root-3a9d6",
+	"label": "sti-Field-label-760f8",
+	"optional": "sti-Field-optional-22118",
+	"description": "sti-Field-description-628e2",
+	"error": "sti-Field-error-9dce4",
+	"errorIcon": "sti-Field-errorIcon-0fe03",
+	"control": "sti-Field-control-2df75"
 };
 export { Field_module_default as default };

package/dist/components/FilePreview/FilePreview.css

@@ -0,0 +1,213 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-FilePreview-root-eefc6 {
+    --sti-file-preview-h: 24rem;
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    grid-template-rows: auto auto;
+    display: grid;
+    overflow: hidden;
+  }
+
+  .sti-FilePreview-root-eefc6[data-height="sm"] {
+    --sti-file-preview-h: 16rem;
+  }
+
+  .sti-FilePreview-root-eefc6[data-height="lg"] {
+    --sti-file-preview-h: 36rem;
+  }
+
+  .sti-FilePreview-head-66e06 {
+    align-items: center;
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    padding: var(--sti-space-3) var(--sti-space-3) var(--sti-space-3) var(--sti-space-4);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    display: flex;
+  }
+
+  .sti-FilePreview-icon-25d02 {
+    inline-size: var(--sti-space-8);
+    block-size: var(--sti-space-8);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent);
+    font-size: var(--sti-icon-md);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-FilePreview-names-95a7c {
+    flex: auto;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-FilePreview-name-04b8f {
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-sm);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .sti-FilePreview-meta-2016f {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+  }
+
+  .sti-FilePreview-actions-28a94 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    flex: none;
+    display: inline-flex;
+  }
+
+  .sti-FilePreview-action-761f1 {
+    inline-size: var(--sti-control-h-sm);
+    block-size: var(--sti-control-h-sm);
+    border-radius: var(--sti-radius-pill);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-sm);
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap);
+    outline: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  @media (pointer: coarse) {
+    .sti-FilePreview-action-761f1 {
+      inline-size: var(--sti-control-h-md);
+      block-size: var(--sti-control-h-md);
+    }
+  }
+
+  @media (hover: hover) {
+    .sti-FilePreview-action-761f1:hover {
+      background: var(--sti-bg-surface-hover);
+      color: var(--sti-fg);
+    }
+  }
+
+  .sti-FilePreview-action-761f1:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-FilePreview-viewer-7c2a7 {
+    min-inline-size: 0;
+    block-size: var(--sti-file-preview-h);
+    background: var(--sti-bg-subtle);
+    display: grid;
+    overflow: hidden;
+  }
+
+  .sti-FilePreview-image-d38b8 {
+    object-fit: contain;
+    block-size: 100%;
+    min-block-size: 0;
+    inline-size: 100%;
+  }
+
+  .sti-FilePreview-frame-55ba1, .sti-FilePreview-media-a43f8 {
+    background: var(--sti-bg-canvas);
+    border: 0;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .sti-FilePreview-media-a43f8 {
+    background: var(--sti-bg-inverse);
+  }
+
+  .sti-FilePreview-audioBox-b73ac {
+    padding: var(--sti-space-4);
+    place-items: center;
+    display: grid;
+  }
+
+  .sti-FilePreview-audio-e32f0 {
+    inline-size: 100%;
+    max-inline-size: 32rem;
+  }
+
+  .sti-FilePreview-root-eefc6[data-kind="audio"] .sti-FilePreview-viewer-7c2a7 {
+    block-size: auto;
+  }
+
+  .sti-FilePreview-csv-60484 {
+    align-content: start;
+    gap: var(--sti-space-2);
+    min-inline-size: 0;
+    padding: var(--sti-space-3);
+    display: grid;
+    overflow: auto;
+  }
+
+  .sti-FilePreview-note-47f0a {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    margin: 0;
+  }
+
+  .sti-FilePreview-code-c30c8 {
+    border: 0;
+    border-radius: 0;
+    min-inline-size: 0;
+  }
+
+  .sti-FilePreview-root-eefc6[data-kind="json"] .sti-FilePreview-viewer-7c2a7, .sti-FilePreview-root-eefc6[data-kind="code"] .sti-FilePreview-viewer-7c2a7, .sti-FilePreview-root-eefc6[data-kind="text"] .sti-FilePreview-viewer-7c2a7, .sti-FilePreview-viewer-7c2a7[data-notice] {
+    block-size: auto;
+    overflow: visible;
+  }
+
+  .sti-FilePreview-notice-eb990 {
+    align-content: center;
+    justify-items: center;
+    gap: var(--sti-space-2);
+    padding: var(--sti-space-8) var(--sti-space-4);
+    text-align: center;
+    display: grid;
+  }
+
+  .sti-FilePreview-noticeIcon-873fe {
+    inline-size: var(--sti-space-12);
+    block-size: var(--sti-space-12);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-surface);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-lg);
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-FilePreview-noticeText-2db2e {
+    max-inline-size: 28rem;
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-FilePreview-action-761f1 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-FilePreview-root-eefc6 {
+      border-color: canvastext;
+    }
+
+    .sti-FilePreview-action-761f1:focus-visible {
+      outline-color: highlight;
+    }
+  }
+}