@morlay/dsh-client-ui-primitives 0.0.2-alpha.0

package/dist/index.d.cts

@@ -0,0 +1,5 @@
+import { n as ReferenceSpan, r as findReferences, s as parseReferenceToken, t as Reference } from "./reference-Do8Uwujy.cjs";
+//#region src/index.d.ts
+declare function apply(): void;
+//#endregion
+export { type Reference, type ReferenceSpan, apply, findReferences, parseReferenceToken };

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+import { n as ReferenceSpan, r as findReferences, s as parseReferenceToken, t as Reference } from "./reference-Do8Uwujy.mjs";
+//#region src/index.d.ts
+declare function apply(): void;
+//#endregion
+export { type Reference, type ReferenceSpan, apply, findReferences, parseReferenceToken };

package/dist/index.mjs

@@ -0,0 +1,5 @@
+import { a as parseReferenceToken, t as findReferences } from "./reference-BLcMVsqa.mjs";
+//#region src/index.ts
+function apply() {}
+//#endregion
+export { apply, findReferences, parseReferenceToken };

package/dist/reference-BLcMVsqa.mjs

@@ -0,0 +1,406 @@
+import { fromMarkdown } from "mdast-util-from-markdown";
+import { gfmFromMarkdown } from "mdast-util-gfm";
+import { asciiAlpha, asciiAlphanumeric, asciiDigit, markdownLineEndingOrSpace, unicodePunctuation, unicodeWhitespace } from "micromark-util-character";
+import { gfm } from "micromark-extension-gfm";
+import { codes, types } from "micromark-util-symbol";
+//#region src/reference.ts
+const DEFAULT_PROTOCOL = "file";
+const EXTERNAL_PROTOCOLS = [
+	"http",
+	"https",
+	"mailto"
+];
+const LINE_FRAGMENT = /^L(\d+)(?:C(\d+))?(?:-L(\d+))?$/u;
+const SCHEME = /^([A-Za-z][A-Za-z0-9+.-]*):/u;
+const BARE_PATH = /^([^:]+):(\d+)(?::(\d+))?$/u;
+const URI_UNSAFE = /[%#()\s<>"`]/gu;
+const PATH_PUNCTUATION = [
+	codes.slash,
+	codes.dash,
+	codes.underscore,
+	codes.dot,
+	codes.plusSign,
+	codes.percentSign,
+	codes.atSign,
+	codes.tilde,
+	codes.equalsTo
+];
+const TRIGGERS = [
+	":",
+	"[",
+	"@"
+];
+function parseReference(value, title) {
+	const raw = value.trim();
+	if (raw === "") return void 0;
+	const matched = SCHEME.exec(raw);
+	const protocol = matched === null ? DEFAULT_PROTOCOL : matched[1].toLowerCase();
+	let rest = matched === null ? raw : raw.slice(matched[0].length);
+	if (matched !== null && /\s/u.test(rest)) return void 0;
+	const fragment = splitLineFragment(rest);
+	rest = fragment.head;
+	let origin;
+	if (rest.startsWith("//")) {
+		const end = authorityEnd(rest);
+		const authority = rest.slice(2, end);
+		if (authority === "") return void 0;
+		origin = `${protocol}://${authority}`;
+		rest = rest.slice(end).replace(/^\//u, "");
+	}
+	const decoded = protocol === DEFAULT_PROTOCOL ? decodeUri(rest) : rest;
+	if (decoded === void 0 || decoded === "" && origin === void 0) return void 0;
+	return {
+		protocol,
+		...origin === void 0 ? {} : { origin },
+		...decoded === "" ? {} : { path: decoded },
+		...title === void 0 || title === "" ? {} : { title },
+		...fragment.lines
+	};
+}
+function parseReferenceToken(value) {
+	return SCHEME.test(value) ? parseReference(value) : void 0;
+}
+function formatReference(reference) {
+	const protocol = reference.protocol === "" ? DEFAULT_PROTOCOL : reference.protocol;
+	const path = reference.path ?? "";
+	if (reference.origin !== void 0) return `${reference.origin}${path === "" ? "" : `/${path}`}`;
+	return `${protocol}:${encodeUri(path)}${lineFragmentOf(reference)}`;
+}
+function isLocalReference(reference) {
+	return !EXTERNAL_PROTOCOLS.includes(reference.protocol);
+}
+function findReferences(text) {
+	const spans = [];
+	if (text === "" || !TRIGGERS.some((trigger) => text.includes(trigger))) return spans;
+	collectReferences(parseReferenceDocument(text), spans);
+	return spans;
+}
+function parseReferenceDocument(text) {
+	return fromMarkdown(text, {
+		extensions: [gfm(), referenceSyntax()],
+		mdastExtensions: [gfmFromMarkdown(), referenceFromMarkdown()]
+	});
+}
+function collectReferences(node, spans) {
+	const position = node.position;
+	if (node.type === "reference" && position !== void 0) {
+		const reference = referenceOfNode(node);
+		if (reference !== void 0) spans.push({
+			start: position.start.offset,
+			end: position.end.offset,
+			reference
+		});
+	}
+	for (const child of node.children ?? []) collectReferences(child, spans);
+}
+function referenceOfNode(node) {
+	const protocol = node.protocol;
+	if (protocol === void 0) return void 0;
+	return {
+		protocol,
+		...node.origin === void 0 ? {} : { origin: node.origin },
+		...node.path === void 0 ? {} : { path: node.path },
+		...node.title === void 0 ? {} : { title: node.title },
+		...node.lineStart === void 0 ? {} : { lineStart: node.lineStart },
+		...node.lineEnd === void 0 ? {} : { lineEnd: node.lineEnd },
+		...node.column === void 0 ? {} : { column: node.column }
+	};
+}
+const previousReference = function(code) {
+	return isBoundary(code);
+};
+const tokenizeReference = function(effects, ok, nok) {
+	const { events } = this;
+	let at = false;
+	let head = "";
+	return start;
+	function start(code) {
+		if (insideLabel(events)) return nok(code);
+		effects.enter("reference");
+		if (code === codes.atSign) {
+			at = true;
+			effects.consume(code);
+			return afterAt;
+		}
+		return headStart(code);
+	}
+	function afterAt(code) {
+		return asciiAlpha(code) ? headStart(code) : pathStart(code);
+	}
+	function headStart(code) {
+		if (!asciiAlpha(code)) return nok(code);
+		head = "";
+		return headInside(code);
+	}
+	function headInside(code) {
+		if (code === null || !asciiAlpha(code)) return afterHead(code);
+		head += String.fromCodePoint(code);
+		effects.consume(code);
+		return headInside;
+	}
+	function afterHead(code) {
+		if (code === codes.colon && isKnownScheme(head)) {
+			effects.consume(code);
+			return head.toLowerCase() === "skill" ? skillInside : fileInside;
+		}
+		return at ? pathInside(code) : nok(code);
+	}
+	function pathStart(code) {
+		if (!isPathCode(code) || code === codes.atSign) return nok(code);
+		effects.consume(code);
+		return pathInside;
+	}
+	function fileInside(code) {
+		if (!isFileCode(code)) return nok(code);
+		effects.consume(code);
+		return fileRest;
+	}
+	function fileRest(code) {
+		if (isFileCode(code)) {
+			effects.consume(code);
+			return fileRest;
+		}
+		return finish(code);
+	}
+	function skillInside(code) {
+		if (!isSkillCode(code)) return nok(code);
+		effects.consume(code);
+		return skillRest;
+	}
+	function skillRest(code) {
+		if (isSkillCode(code)) {
+			effects.consume(code);
+			return skillRest;
+		}
+		return finish(code);
+	}
+	function pathInside(code) {
+		if (isPathCode(code) || code === codes.numberSign) {
+			effects.consume(code);
+			return pathInside;
+		}
+		if (code !== codes.colon) return isBoundary(code) ? finish(code) : nok(code);
+		effects.consume(code);
+		return lineInside;
+	}
+	function lineInside(code) {
+		if (!asciiDigit(code)) return nok(code);
+		effects.consume(code);
+		return lineRest;
+	}
+	function lineRest(code) {
+		if (asciiDigit(code)) {
+			effects.consume(code);
+			return lineRest;
+		}
+		if (code !== codes.colon) return finish(code);
+		effects.consume(code);
+		return columnInside;
+	}
+	function columnInside(code) {
+		if (!asciiDigit(code)) return nok(code);
+		effects.consume(code);
+		return columnRest;
+	}
+	function columnRest(code) {
+		if (asciiDigit(code)) {
+			effects.consume(code);
+			return columnRest;
+		}
+		return finish(code);
+	}
+	function finish(code) {
+		if (!isBoundary(code)) return nok(code);
+		effects.exit("reference");
+		return ok(code);
+	}
+};
+const referenceConstruct = {
+	name: "reference",
+	previous: previousReference,
+	tokenize: tokenizeReference
+};
+const referenceSyntaxExtension = { text: {
+	[codes.atSign]: referenceConstruct,
+	[codes.lowercaseF]: referenceConstruct,
+	[codes.uppercaseF]: referenceConstruct,
+	[codes.lowercaseS]: referenceConstruct,
+	[codes.uppercaseS]: referenceConstruct
+} };
+function referenceSyntax() {
+	return referenceSyntaxExtension;
+}
+function insideLabel(events) {
+	for (let index = events.length - 1; index >= 0; index -= 1) {
+		const token = events[index]?.[1];
+		if (token === void 0) continue;
+		if ((token.type === types.labelLink || token.type === types.labelImage) && token._balanced !== true) return true;
+	}
+	return false;
+}
+function isBoundary(code) {
+	return code === null || markdownLineEndingOrSpace(code) || unicodeWhitespace(code) || unicodePunctuation(code);
+}
+function isPathCode(code) {
+	if (code === null || markdownLineEndingOrSpace(code)) return false;
+	if (!unicodePunctuation(code)) return true;
+	return PATH_PUNCTUATION.includes(code);
+}
+function isFileCode(code) {
+	return isPathCode(code) || code === codes.numberSign || code === codes.colon;
+}
+function isSkillCode(code) {
+	return asciiAlphanumeric(code) || code === codes.dash || code === codes.underscore || code === codes.dot;
+}
+function enterReference(token) {
+	this.enter({ type: "reference" }, token);
+}
+function exitReference(token) {
+	const node = this.stack[this.stack.length - 1];
+	const raw = this.sliceSerialize(token);
+	const reference = parseBareReference(raw);
+	if (node !== void 0) {
+		if (reference === void 0) {
+			node.type = "text";
+			node.value = raw;
+		} else Object.assign(node, reference);
+	}
+	this.exit(token);
+}
+const transformLinks = function(tree) {
+	convertLinks(tree);
+};
+function convertLinks(parent) {
+	const children = parent.children;
+	if (children === void 0) return;
+	for (let index = 0; index < children.length; index += 1) {
+		const child = children[index];
+		if (child === void 0) continue;
+		if (child.type === "link") {
+			const reference = parseReference(child.url ?? "", labelOf(child));
+			if (reference !== void 0) {
+				children[index] = referenceNodeOf(reference, child, children[index - 1]);
+				continue;
+			}
+		}
+		convertLinks(child);
+	}
+}
+function referenceNodeOf(reference, link, previous) {
+	const node = {
+		type: "reference",
+		...reference
+	};
+	const position = link.position;
+	if (position === void 0) return node;
+	node.position = startsAfterAt(previous, position.start) ? atStart(position) : position;
+	return node;
+}
+function startsAfterAt(previous, start) {
+	if (previous?.type !== "text" || previous.value?.endsWith("@") !== true) return false;
+	const position = previous.position;
+	if (position === void 0 || position.end.offset !== start.offset) return false;
+	return position.end.offset - position.start.offset === previous.value.length;
+}
+function atStart(position) {
+	return {
+		start: {
+			line: position.start.line,
+			column: position.start.column - 1,
+			offset: position.start.offset - 1
+		},
+		end: position.end
+	};
+}
+function labelOf(node) {
+	const label = textOf(node);
+	return label === "" ? void 0 : label;
+}
+function textOf(node) {
+	if (node.value !== void 0) return node.value;
+	let text = "";
+	for (const child of node.children ?? []) text += textOf(child);
+	return text;
+}
+function parseBareReference(raw) {
+	const body = raw.startsWith("@") ? raw.slice(1) : raw;
+	if (body === "") return void 0;
+	const scheme = SCHEME.exec(body);
+	if (scheme !== null && isKnownScheme(scheme[1])) return parseReference(body);
+	const matched = BARE_PATH.exec(body);
+	const path = matched?.[1];
+	const line = matched?.[2];
+	if (path === void 0 || line === void 0) return parseReference(body);
+	const decoded = decodeUri(path);
+	if (decoded === void 0 || decoded === "") return void 0;
+	const column = matched?.[3];
+	return {
+		protocol: DEFAULT_PROTOCOL,
+		path: decoded,
+		lineStart: Number(line),
+		...column === void 0 ? {} : { column: Number(column) }
+	};
+}
+function referenceFromMarkdown() {
+	return {
+		enter: { reference: enterReference },
+		exit: { reference: exitReference },
+		transforms: [transformLinks]
+	};
+}
+function isKnownScheme(name) {
+	const protocol = name.toLowerCase();
+	return protocol === "file" || protocol === "skill";
+}
+function splitLineFragment(value) {
+	const hashAt = value.indexOf("#");
+	if (hashAt === -1) return {
+		head: value,
+		lines: {}
+	};
+	const matched = LINE_FRAGMENT.exec(value.slice(hashAt + 1));
+	if (matched === null) return {
+		head: value,
+		lines: {}
+	};
+	const lineStart = matched[1];
+	if (lineStart === void 0) return {
+		head: value,
+		lines: {}
+	};
+	const column = matched[2];
+	const lineEnd = matched[3];
+	return {
+		head: value.slice(0, hashAt),
+		lines: {
+			lineStart: Number(lineStart),
+			...column === void 0 ? {} : { column: Number(column) },
+			...lineEnd === void 0 ? {} : { lineEnd: Number(lineEnd) }
+		}
+	};
+}
+function lineFragmentOf(reference) {
+	if (reference.lineStart === void 0) return "";
+	const column = reference.column === void 0 ? "" : `C${String(reference.column)}`;
+	const lineEnd = reference.lineEnd === void 0 ? "" : `-L${String(reference.lineEnd)}`;
+	return `#L${String(reference.lineStart)}${column}${lineEnd}`;
+}
+function authorityEnd(value) {
+	for (let index = 2; index < value.length; index += 1) {
+		const char = value[index];
+		if (char === "/" || char === "?" || char === "#") return index;
+	}
+	return value.length;
+}
+function encodeUri(uri) {
+	return uri.replace(URI_UNSAFE, (char) => `%${char.charCodeAt(0).toString(16).toUpperCase().padStart(2, "0")}`);
+}
+function decodeUri(value) {
+	try {
+		return decodeURIComponent(value);
+	} catch {
+		return;
+	}
+}
+//#endregion
+export { parseReferenceToken as a, parseReference as i, formatReference as n, isLocalReference as r, findReferences as t };

package/dist/reference-Do8Uwujy.d.cts

@@ -0,0 +1,29 @@
+import "mdast-util-from-markdown";
+import "micromark-util-types";
+//#region src/reference.d.ts
+declare module "micromark-util-types" {
+  interface TokenTypeMap {
+    reference: "reference";
+  }
+}
+interface Reference {
+  readonly protocol: string;
+  readonly origin?: string;
+  readonly path?: string;
+  readonly title?: string;
+  readonly lineStart?: number;
+  readonly lineEnd?: number;
+  readonly column?: number;
+}
+interface ReferenceSpan {
+  readonly start: number;
+  readonly end: number;
+  readonly reference: Reference;
+}
+declare function parseReference(value: string, title?: string): Reference | undefined;
+declare function parseReferenceToken(value: string): Reference | undefined;
+declare function formatReference(reference: Reference): string;
+declare function isLocalReference(reference: Reference): boolean;
+declare function findReferences(text: string): readonly ReferenceSpan[];
+//#endregion
+export { isLocalReference as a, formatReference as i, ReferenceSpan as n, parseReference as o, findReferences as r, parseReferenceToken as s, Reference as t };

package/dist/reference-Do8Uwujy.d.mts

@@ -0,0 +1,29 @@
+import "mdast-util-from-markdown";
+import "micromark-util-types";
+//#region src/reference.d.ts
+declare module "micromark-util-types" {
+  interface TokenTypeMap {
+    reference: "reference";
+  }
+}
+interface Reference {
+  readonly protocol: string;
+  readonly origin?: string;
+  readonly path?: string;
+  readonly title?: string;
+  readonly lineStart?: number;
+  readonly lineEnd?: number;
+  readonly column?: number;
+}
+interface ReferenceSpan {
+  readonly start: number;
+  readonly end: number;
+  readonly reference: Reference;
+}
+declare function parseReference(value: string, title?: string): Reference | undefined;
+declare function parseReferenceToken(value: string): Reference | undefined;
+declare function formatReference(reference: Reference): string;
+declare function isLocalReference(reference: Reference): boolean;
+declare function findReferences(text: string): readonly ReferenceSpan[];
+//#endregion
+export { isLocalReference as a, formatReference as i, ReferenceSpan as n, parseReference as o, findReferences as r, parseReferenceToken as s, Reference as t };

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@morlay/dsh-client-ui-primitives",
+  "version": "0.0.2-alpha.0",
+  "description": "css-in-js styling kit (styled / Token / Styling) for the forked conversation UI: consumes the official --dsw-* design tokens, so no CSS Modules precompile step is needed.",
+  "keywords": [
+    "client",
+    "css-in-js",
+    "design-tokens",
+    "dsh",
+    "dsh-plugin",
+    "styled"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/morlay/dsh-plugin.git"
+  },
+  "files": [
+    "dist",
+    "src",
+    "cordis.patch.yml",
+    "!**/__tests__"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json",
+    "./cordis.patch.yml": "./cordis.patch.yml",
+    "./client": {
+      "types": "./dist/client.d.cts",
+      "default": "./dist/client.cjs"
+    }
+  },
+  "dependencies": {
+    "mdast-util-from-markdown": "^2.0.3",
+    "mdast-util-gfm": "^3.1.0",
+    "micromark-extension-gfm": "^3.0.0",
+    "micromark-util-character": "^2.1.1",
+    "micromark-util-symbol": "^2.0.1",
+    "micromark-util-types": "^2.0.2"
+  },
+  "devDependencies": {
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.6-alpha.2",
+    "@types/mdast": "^4.0.4",
+    "@types/react": "~18.3.1",
+    "csstype": "^3.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.2"
+  },
+  "dsh": {
+    "client": {
+      "platform": "web",
+      "inject": []
+    },
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    }
+  },
+  "scripts": {
+    "build": "pnpm exec tsdown",
+    "gen:tokens": "pnpm exec tsx scripts/gen-design-tokens.mts"
+  }
+}

package/src/client/index.ts

@@ -0,0 +1,20 @@
+import type { Context } from "@deepseek-ai/cordis";
+
+export * from "./styling/index.ts";
+export * from "./theme.ts";
+export * from "./markdown-labels.ts";
+
+export {
+  findReferences,
+  formatReference,
+  isLocalReference,
+  parseReference,
+  parseReferenceToken,
+} from "../reference.ts";
+export type { Reference, ReferenceSpan } from "../reference.ts";
+export { ReferenceMarkdown, referenceMentions } from "../reference-markdown.tsx";
+export type { ReferenceActions, ReferenceMarkdownProps } from "../reference-markdown.tsx";
+
+export const inject: readonly string[] = [];
+
+export function apply(_ctx: Context): void {}

package/src/client/markdown-labels.ts

@@ -0,0 +1,10 @@
+import type { MarkdownLabels } from "@deepseek-ai/dsh-client-ui-primitives";
+
+export type MarkdownCopySeat = (key: "copy" | "copied" | "markdown.footnotes") => string;
+
+export function markdownLabels(t: MarkdownCopySeat): MarkdownLabels {
+  return {
+    code: { copyLabel: t("copy"), copiedLabel: t("copied") },
+    footnotes: t("markdown.footnotes"),
+  };
+}

package/src/client/markdown-text.ts

@@ -0,0 +1,6 @@
+export { MarkdownText } from "@deepseek-ai/dsh-client-ui-primitives";
+export type {
+  MarkdownFileMentions,
+  MarkdownLabels,
+  MarkdownPathImages,
+} from "@deepseek-ai/dsh-client-ui-primitives";

package/src/client/styling/css.ts

@@ -0,0 +1,27 @@
+import type { StandardProperties, VendorProperties } from "csstype";
+
+type NonStandardProperties = {
+  cornerShape?: CSSValue<string>;
+  clip?: CSSValue<string>;
+  WebkitBoxOrient?: CSSValue<string>;
+};
+
+type Properties = Omit<StandardProperties & VendorProperties, keyof NonStandardProperties> &
+  NonStandardProperties;
+
+export type CSSVar = `--${string}`;
+export type CSSSelector = `&${string}` | `${string}&` | `@${string}`;
+
+export type CSSValue<Fallback = string | number> = Fallback | (() => Iterable<Fallback>);
+
+export type CSSObject<Props extends object, Fallback = string | number> = {
+  [K in keyof Props]?: Props[K] | CSSValue<Fallback>;
+} & {
+  [K in CSSVar]?: CSSValue<Fallback>;
+};
+
+type Nested<Props extends object> = CSSObject<Props> & {
+  [K in CSSSelector]?: Nested<Props>;
+};
+
+export type CSSProps = Nested<Properties>;

package/src/client/styling/index.ts

@@ -0,0 +1,6 @@
+export type * from "./css.ts";
+export { Styling, styling } from "./styling.ts";
+export { Token } from "./token.ts";
+export type { CSSVarRef, TokenVars, Tokens } from "./token.ts";
+export { styled, styleOf } from "./styled.tsx";
+export type { StyledComponent } from "./styled.tsx";

package/src/client/styling/styled.tsx

@@ -0,0 +1,56 @@
+// 轻量 styled：intrinsic / 组件 + ref，样式走 data-css 属性（不做 polymorphic，
+// 参考实现里的 asChild 由 ark-ui 提供，我们不需要）。
+
+import { createElement, forwardRef, useMemo } from "react";
+import type {
+  ComponentProps,
+  ComponentPropsWithRef,
+  ElementType,
+  ForwardRefExoticComponent,
+  Ref,
+  RefAttributes,
+} from "react";
+import type { CSSProps } from "./css.ts";
+import { styling } from "./styling.ts";
+import { toMerged } from "./toolkit.ts";
+
+type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "ref">;
+type StyledRef<T extends ElementType> =
+  ComponentPropsWithRef<T>["ref"] extends Ref<infer R> ? R : never;
+
+const sxSymbol: unique symbol = Symbol("styled.sx");
+
+export type StyledComponent<T extends ElementType> = ForwardRefExoticComponent<
+  StyledProps<T> & RefAttributes<StyledRef<T>>
+> & { readonly [sxSymbol]: CSSProps };
+
+/**
+ * `styled('div')({ padding: '4px' }, { '&:hover': { … } })` → 带 `data-css-*` 的组件。
+ * 多个样式对象按顺序深合并（后者覆盖前者），便于把变体叠在基样式上。
+ */
+export function styled<T extends ElementType>(
+  Component: T,
+  defaultProps: Partial<ComponentProps<T>> = {},
+) {
+  return (...styles: CSSProps[]): StyledComponent<T> => {
+    const sx = styles.reduce<CSSProps>((merged, style) => toMerged(merged, style), {});
+
+    const Styled = forwardRef<StyledRef<T>, StyledProps<T>>((props, ref) => {
+      const styleProps = useMemo(() => styling.props(sx), []);
+      return createElement(Component as ElementType, {
+        ...defaultProps,
+        ...props,
+        ...styleProps,
+        ref,
+      });
+    });
+    Styled.displayName = `styled(${typeof Component === "string" ? Component : (Component.displayName ?? Component.name ?? "Component")})`;
+
+    return Object.assign(Styled, { [sxSymbol]: sx }) as StyledComponent<T>;
+  };
+}
+
+/** 取回 styled 组件携带的样式对象（需要在其之上继续组合时用）。 */
+export function styleOf(component: StyledComponent<ElementType>): CSSProps {
+  return component[sxSymbol];
+}