@yak/solid 0.0.0

package/runtime/styled.ts

@@ -0,0 +1,393 @@
+import { css, CSSInterpolation, Classes, yakComponentSymbol } from "./cssLiteral.js";
+import type {
+  AnyComponent,
+  Attrs,
+  AttrsMerged,
+  Styled,
+  YakComponent,
+  AttrsFunction,
+  StyledFn,
+  HtmlTags,
+  Substitute,
+  StyledLiteral,
+  RuntimeStyleProcessor,
+  StyleObject,
+} from "./publicStyledApi.js";
+import { createMemo, merge } from "solid-js";
+import { createComponent, Dynamic, type JSX } from "@solidjs/web";
+import { normalizeClass } from "./internals/mergeClasses.js";
+// the following import is not relative but the package-level "@yak/solid/context"
+// export: it keeps a single context instance shared between the bundled runtime
+// and user code (and lets the vite plugin alias the user's theme context)
+import { useTheme } from "@yak/solid/context";
+import type { YakTheme } from "./context/index.js";
+import type { Accessor } from "solid-js";
+
+//
+// The `styled()` API without `styled.` syntax
+//
+// The API design is inspired by styled-components:
+// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx
+// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts
+//
+/**
+ * Renders `props.component` (a tag name or component) with the remaining
+ * props. Loosely typed on purpose: the runtime passes lazily-merged Proxy
+ * props that no concrete component type can describe.
+ */
+const renderDynamic = (props: Record<PropertyKey, unknown>): JSX.Element =>
+  createComponent(Dynamic as (props: Record<PropertyKey, unknown>) => JSX.Element, props);
+
+const styledFactory: StyledFn = (Component) =>
+  Object.assign(yakStyled(Component), {
+    attrs: (attrs: Attrs<any>) => yakStyled(Component, attrs),
+  });
+
+/**
+ * The `styled` method works perfectly on all of your own or any third-party component,
+ * as long as they attach the passed `class` prop to a DOM element.
+ *
+ * @usage
+ *
+ * ```tsx
+ * const StyledLink = styled(Link)`
+ *  color: #BF4F74;
+ *  font-weight: bold;
+ * `;
+ * ```
+ */
+export const styled = styledFactory as Styled;
+
+type PropsWithClassAndStyle = {
+  class?: string;
+  style?: StyleObject | string;
+  theme?: Accessor<YakTheme>;
+} & Record<string, unknown>;
+
+const yakStyled: StyledInternal = (Component, attrs) => {
+  // Probe with a property read, not the `in` operator: in dev, solid-refresh
+  // wraps registered components in a Proxy that forwards `get` to the live
+  // implementation but has no `has` trap, so `in` would miss the symbol and
+  // silently skip chain flattening (breaking attrs override order).
+  const isYakComponent =
+    typeof Component === "function" &&
+    (Component as Partial<YakComponent<unknown>>)[yakComponentSymbol] !== undefined;
+
+  // if the component that is wrapped is a yak component, we can extract the attrs function
+  // and the dynamic style function to merge it with the current attrs function (or dynamic
+  // style function) so that the sequence of the attrs functions is preserved
+  const [, parentAttrsFn, parentRuntimeStylesFn, parentTarget] = isYakComponent
+    ? ((Component as YakComponent<unknown>)[yakComponentSymbol] as unknown as [
+        YakComponent<unknown>,
+        ExtractAttrsFunction<typeof attrs>,
+        RuntimeStyleProcessor<unknown>,
+        AnyComponent<any> | string,
+      ])
+    : [];
+
+  // the ultimate render target of the whole styled(styled(...)) chain:
+  // attrs and style processors are already merged at construction time, so
+  // a chain of N levels renders the target directly in ONE component instead
+  // of re-entering every parent wrapper per element
+  const targetComponent = (isYakComponent ? parentTarget : Component) as AnyComponent<any> | string;
+
+  const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);
+
+  return (styles, ...values) => {
+    // combine all interpolated logic into a single function
+    // e.g. styled.button`color: ${props => props.color}; margin: ${props => props.margin};`
+    const runtimeStylesFn = css(
+      styles,
+      ...(values as CSSInterpolation<unknown>[]),
+    ) as RuntimeStyleProcessor<unknown>;
+    const runtimeStyleProcessor = buildRuntimeStylesProcessor(
+      runtimeStylesFn,
+      parentRuntimeStylesFn,
+    );
+
+    // decided once per styled component: tag names render through Dynamic
+    // (which needs a `component` prop), component targets are called
+    // directly so a user prop named `component` reaches them (Dynamic
+    // would consume it). `targetProps` is merged BEFORE filterDomProps -
+    // the filter proxy must stay the outermost layer (see filterDomProps)
+    const isTag = typeof targetComponent === "string";
+    const targetProps = isTag ? { component: targetComponent } : {};
+    const renderTarget = isTag
+      ? renderDynamic
+      : (finalProps: Record<PropertyKey, unknown>) =>
+          createComponent(
+            targetComponent as (props: Record<PropertyKey, unknown>) => JSX.Element,
+            finalProps,
+          );
+
+    // fast path for fully static components (no attrs, no dynamic styles;
+    // the most common case): contribute the chain's class names through a
+    // single reactive `class` getter and strip $-props; skips theme lookup,
+    // memo creation and style handling entirely
+    const Yak: AnyComponent<PropsWithClassAndStyle> =
+      !mergedAttrsFn && !runtimeStyleProcessor.$dynamic
+        ? (props) =>
+            renderTarget(
+              filterDomProps(
+                merge(props, targetProps, {
+                  // reading props.class inside the getter keeps the class
+                  // binding reactive without re-creating the element
+                  get class(): string | undefined {
+                    const classes = new Classes(normalizeClass(props.class));
+                    runtimeStyleProcessor(props, classes, undefined as unknown as StyleObject);
+                    return classes.value || undefined;
+                  },
+                }),
+              ),
+            )
+        : (props) => {
+            // the component body runs ONCE in Solid: all per-update work
+            // lives in memos/getters so only the affected DOM bindings update
+
+            // attrs functions and dynamic style functions receive the theme;
+            // fully static components take the fast path above and never
+            // subscribe to the theme context
+            const theme = useTheme();
+
+            // getter-preserving merge: compiled prop functions like
+            // `({ $bottom }) => ...` destructure this proxy INSIDE the memo
+            // below, so every read is tracked at its use-site
+            const propsWithTheme = merge({ theme }, props) as PropsWithClassAndStyle & {
+              theme: Accessor<YakTheme>;
+            };
+
+            // The first component which is not wrapped in a yak component executes all attrs
+            // functions starting from the innermost yak component to the outermost (itself)
+            const attrsProps = mergedAttrsFn
+              ? createMemo(() => mergedAttrsFn(propsWithTheme as any) as PropsWithClassAndStyle)
+              : undefined;
+
+            // input for the style processor: props + theme + attrs output
+            const styleInput = attrsProps ? merge(propsWithTheme, attrsProps) : propsWithTheme;
+
+            // execute all functions inside the style literal
+            // e.g. styled.button`color: ${props => props.color};`
+            // only reads inside this memo re-run it; the element itself is
+            // never re-created, only its class/style bindings update
+            const computed = createMemo(() => {
+              const attrsResult = attrsProps?.();
+              const classes = new Classes(normalizeClass(props.class));
+              const attrsClass = normalizeClass(attrsResult?.class);
+              if (attrsClass) {
+                classes.add(attrsClass);
+              }
+              // static processors never write style values, so the incoming
+              // style object can be passed through without a defensive copy
+              const style =
+                runtimeStyleProcessor.$dynamic || attrsResult?.style
+                  ? { ...unwrapStyle(props.style), ...unwrapStyle(attrsResult?.style) }
+                  : unwrapStyle(props.style);
+              runtimeStyleProcessor(styleInput, classes, style as StyleObject);
+              return {
+                class: classes.value || undefined,
+                style: style && Object.keys(style).length > 0 ? style : undefined,
+              };
+            });
+
+            const merged = merge(props, attrsProps ?? {}, {
+              get class(): string | undefined {
+                return computed().class;
+              },
+              get style(): StyleObject | undefined {
+                return computed().style;
+              },
+            });
+
+            // keep the theme prop only if an attrs function intentionally
+            // replaced it; the context theme itself never reaches the target
+            const allowTheme = () => {
+              const attrsResult = attrsProps?.();
+              return !!attrsResult && "theme" in attrsResult && attrsResult.theme !== theme;
+            };
+
+            // render the chain's target directly; parent wrappers contribute
+            // only their (already merged) attrs and style processors
+            return renderTarget(filterDomProps(merge(merged, targetProps), allowTheme));
+          };
+
+    return Object.assign(Yak, {
+      [yakComponentSymbol]: [Yak, mergedAttrsFn, runtimeStyleProcessor, targetComponent] as [
+        unknown,
+        unknown,
+        unknown,
+        unknown,
+      ],
+    });
+  };
+};
+
+/**
+ * Normalize a Solid style prop to an object the style processor can extend.
+ * Solid allows string styles on elements; they are converted here so CSS custom
+ * properties from dynamic values can be merged in (prefer object styles).
+ */
+const unwrapStyle = (style: StyleObject | string | undefined): StyleObject | undefined => {
+  if (typeof style !== "string") {
+    return style;
+  }
+  const result: Record<string, string> = {};
+  for (const declaration of style.split(";")) {
+    const colonIndex = declaration.indexOf(":");
+    if (colonIndex === -1) continue;
+    const property = declaration.slice(0, colonIndex).trim();
+    const value = declaration.slice(colonIndex + 1).trim();
+    if (property && value) {
+      result[property] = value;
+    }
+  }
+  return result as StyleObject;
+};
+
+const isBlockedProp = (key: PropertyKey, allowTheme?: () => boolean): boolean =>
+  typeof key === "string" &&
+  (key.startsWith("$") || (key === "theme" && !(allowTheme && allowTheme())));
+
+/**
+ * Remove all props that start with a $ sign (plus the internal theme) so
+ * they reach neither DOM elements nor custom components.
+ *
+ * Implemented as a lazy Proxy instead of an eager copy: Solid's compiled
+ * spread reads props through getters, and copying would read every prop
+ * exactly once and freeze its value, killing reactivity.
+ */
+const filterDomProps = <T extends object>(props: T, allowTheme?: () => boolean): T =>
+  new Proxy(props, {
+    get: (target, key) => (isBlockedProp(key, allowTheme) ? undefined : Reflect.get(target, key)),
+    has: (target, key) => !isBlockedProp(key, allowTheme) && Reflect.has(target, key),
+    ownKeys: (target) => Reflect.ownKeys(target).filter((key) => !isBlockedProp(key, allowTheme)),
+    getOwnPropertyDescriptor: (target, key) =>
+      isBlockedProp(key, allowTheme) ? undefined : Reflect.getOwnPropertyDescriptor(target, key),
+  });
+
+// util function to merge class names, as they are concatenated with a space
+const mergeClasses = (a?: string, b?: string) => {
+  if (!a && !b) return undefined;
+  if (!a) return b;
+  if (!b) return a;
+  return a + " " + b;
+};
+
+/**
+ * merge props and processed props (including class names and styles)
+ * e.g.:\
+ * `{ class: "a", foo: 1 }` and `{ class: "b", bar: 2 }` \
+ * => `{ class: "a b", foo: 1, bar: 2 }`
+ */
+const combineProps = <
+  T extends {
+    class?: string;
+    style?: StyleObject | string;
+  },
+  TOther extends
+    | {
+        class?: string;
+        style?: StyleObject | string;
+      }
+    | null
+    | undefined,
+>(
+  props: T,
+  newProps: TOther,
+) =>
+  newProps
+    ? (props.class === newProps.class || !newProps.class) &&
+      (props.style === newProps.style || !newProps.style)
+      ? // shortcut if no style and class merging is necessary
+        {
+          ...props,
+          ...newProps,
+        }
+      : // merge class names and styles
+        {
+          ...props,
+          ...newProps,
+          class: mergeClasses(props.class, newProps.class),
+          style: { ...unwrapStyle(props.style), ...unwrapStyle(newProps.style) },
+        }
+    : // if no new props are provided, no merging is necessary
+      props;
+
+/**
+ * Merges the attrs function of the current component with the attrs function of the parent component
+ * in order to preserve the sequence of the attrs functions.
+ * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut
+ * but as this is only used internally, we can ignore and simplify this case
+ * @param attrs The attrs object or function of the current component (if any)
+ * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)
+ * @returns A function that receives the props and returns the transformed props
+ */
+const buildRuntimeAttrsProcessor = <
+  T,
+  TAttrsIn extends object,
+  TAttrsOut extends AttrsMerged<T, TAttrsIn>,
+>(
+  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,
+  parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,
+): AttrsFunction<T, TAttrsIn, TAttrsOut> | undefined => {
+  const ownAttrsFn = attrs && (typeof attrs === "function" ? attrs : () => attrs);
+
+  if (ownAttrsFn && parentAttrsFn) {
+    return (props) => {
+      const parentProps = parentAttrsFn(props);
+
+      // overwrite and merge the parent props with the props received from the attrs function
+      // after they went through the parent attrs function.
+      //
+      // This makes sure the linearity of the attrs functions is preserved and all attrs function receive
+      // the whole props object calculated from the previous attrs functions
+      return combineProps(
+        parentProps as any,
+        ownAttrsFn(combineProps(props as any, parentProps as any) as any),
+      ) as any;
+    };
+  }
+
+  return ownAttrsFn || parentAttrsFn;
+};
+
+/**
+ * Merges the runtime style function of the current component with the runtime style function of the parent component
+ * in order to preserve the sequence of the attrs functions.
+ * @param runtimeStylesFn The current runtime styles function
+ * @param parentRuntimeStylesFn The parent runtime styles function
+ * @returns The merged runtime styles function
+ */
+const buildRuntimeStylesProcessor = <T>(
+  runtimeStylesFn: RuntimeStyleProcessor<T>,
+  parentRuntimeStylesFn?: RuntimeStyleProcessor<T>,
+) => {
+  if (runtimeStylesFn && parentRuntimeStylesFn) {
+    const combined: RuntimeStyleProcessor<T> = Object.assign(
+      (props: T, classes: Parameters<RuntimeStyleProcessor<T>>[1], style: StyleObject) => {
+        parentRuntimeStylesFn(props, classes, style);
+        runtimeStylesFn(props, classes, style);
+      },
+      // the chain is dynamic if any level is dynamic
+      { $dynamic: runtimeStylesFn.$dynamic || parentRuntimeStylesFn.$dynamic },
+    );
+    return combined;
+  }
+  return runtimeStylesFn || parentRuntimeStylesFn;
+};
+
+/**
+ * Internal function where attrs are passed to be processed
+ */
+export type StyledInternal = <
+  T extends object,
+  TAttrsIn extends object = {},
+  TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,
+>(
+  Component: AnyComponent<T> | YakComponent<T> | HtmlTags | string,
+  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,
+) => StyledLiteral<Substitute<T, TAttrsIn>>;
+
+/**
+ * Utility type to extract the AttrsFunction from the Attrs type
+ */
+export type ExtractAttrsFunction<T> = T extends (p: any) => any ? T : never;

package/runtime/styledDom.ts

@@ -0,0 +1,139 @@
+import { styled } from "./styled.js";
+/// Internal API to create styled components
+/// Optimization for faster rendering and smaller bundle size in production
+/// thanks to better minification and dead code elimination
+///
+/// List taken from https://github.com/styled-components/styled-components/blob/e0019ba666fab4b5aaa2bff71ba6ad0005a299fd/packages/styled-components/src/utils/domElements.ts#L90
+export const __yak_a = /*#__PURE__*/ styled("a");
+export const __yak_abbr = /*#__PURE__*/ styled("abbr");
+export const __yak_address = /*#__PURE__*/ styled("address");
+export const __yak_area = /*#__PURE__*/ styled("area");
+export const __yak_article = /*#__PURE__*/ styled("article");
+export const __yak_aside = /*#__PURE__*/ styled("aside");
+export const __yak_audio = /*#__PURE__*/ styled("audio");
+export const __yak_b = /*#__PURE__*/ styled("b");
+export const __yak_base = /*#__PURE__*/ styled("base");
+export const __yak_bdi = /*#__PURE__*/ styled("bdi");
+export const __yak_bdo = /*#__PURE__*/ styled("bdo");
+export const __yak_big = /*#__PURE__*/ styled("big");
+export const __yak_blockquote = /*#__PURE__*/ styled("blockquote");
+export const __yak_body = /*#__PURE__*/ styled("body");
+export const __yak_br = /*#__PURE__*/ styled("br");
+export const __yak_button = /*#__PURE__*/ styled("button");
+export const __yak_canvas = /*#__PURE__*/ styled("canvas");
+export const __yak_caption = /*#__PURE__*/ styled("caption");
+export const __yak_cite = /*#__PURE__*/ styled("cite");
+export const __yak_code = /*#__PURE__*/ styled("code");
+export const __yak_col = /*#__PURE__*/ styled("col");
+export const __yak_colgroup = /*#__PURE__*/ styled("colgroup");
+export const __yak_data = /*#__PURE__*/ styled("data");
+export const __yak_datalist = /*#__PURE__*/ styled("datalist");
+export const __yak_dd = /*#__PURE__*/ styled("dd");
+export const __yak_del = /*#__PURE__*/ styled("del");
+export const __yak_details = /*#__PURE__*/ styled("details");
+export const __yak_dfn = /*#__PURE__*/ styled("dfn");
+export const __yak_dialog = /*#__PURE__*/ styled("dialog");
+export const __yak_div = /*#__PURE__*/ styled("div");
+export const __yak_dl = /*#__PURE__*/ styled("dl");
+export const __yak_dt = /*#__PURE__*/ styled("dt");
+export const __yak_em = /*#__PURE__*/ styled("em");
+export const __yak_embed = /*#__PURE__*/ styled("embed");
+export const __yak_fieldset = /*#__PURE__*/ styled("fieldset");
+export const __yak_figcaption = /*#__PURE__*/ styled("figcaption");
+export const __yak_figure = /*#__PURE__*/ styled("figure");
+export const __yak_footer = /*#__PURE__*/ styled("footer");
+export const __yak_form = /*#__PURE__*/ styled("form");
+export const __yak_h1 = /*#__PURE__*/ styled("h1");
+export const __yak_h2 = /*#__PURE__*/ styled("h2");
+export const __yak_h3 = /*#__PURE__*/ styled("h3");
+export const __yak_h4 = /*#__PURE__*/ styled("h4");
+export const __yak_h5 = /*#__PURE__*/ styled("h5");
+export const __yak_h6 = /*#__PURE__*/ styled("h6");
+export const __yak_header = /*#__PURE__*/ styled("header");
+export const __yak_hgroup = /*#__PURE__*/ styled("hgroup");
+export const __yak_hr = /*#__PURE__*/ styled("hr");
+export const __yak_html = /*#__PURE__*/ styled("html");
+export const __yak_i = /*#__PURE__*/ styled("i");
+export const __yak_iframe = /*#__PURE__*/ styled("iframe");
+export const __yak_img = /*#__PURE__*/ styled("img");
+export const __yak_input = /*#__PURE__*/ styled("input");
+export const __yak_ins = /*#__PURE__*/ styled("ins");
+export const __yak_kbd = /*#__PURE__*/ styled("kbd");
+export const __yak_keygen = /*#__PURE__*/ styled("keygen");
+export const __yak_label = /*#__PURE__*/ styled("label");
+export const __yak_legend = /*#__PURE__*/ styled("legend");
+export const __yak_li = /*#__PURE__*/ styled("li");
+export const __yak_link = /*#__PURE__*/ styled("link");
+export const __yak_main = /*#__PURE__*/ styled("main");
+export const __yak_map = /*#__PURE__*/ styled("map");
+export const __yak_mark = /*#__PURE__*/ styled("mark");
+export const __yak_menu = /*#__PURE__*/ styled("menu");
+export const __yak_menuitem = /*#__PURE__*/ styled("menuitem");
+export const __yak_meta = /*#__PURE__*/ styled("meta");
+export const __yak_meter = /*#__PURE__*/ styled("meter");
+export const __yak_nav = /*#__PURE__*/ styled("nav");
+export const __yak_noscript = /*#__PURE__*/ styled("noscript");
+export const __yak_object = /*#__PURE__*/ styled("object");
+export const __yak_ol = /*#__PURE__*/ styled("ol");
+export const __yak_optgroup = /*#__PURE__*/ styled("optgroup");
+export const __yak_option = /*#__PURE__*/ styled("option");
+export const __yak_output = /*#__PURE__*/ styled("output");
+export const __yak_p = /*#__PURE__*/ styled("p");
+export const __yak_param = /*#__PURE__*/ styled("param");
+export const __yak_picture = /*#__PURE__*/ styled("picture");
+export const __yak_pre = /*#__PURE__*/ styled("pre");
+export const __yak_progress = /*#__PURE__*/ styled("progress");
+export const __yak_q = /*#__PURE__*/ styled("q");
+export const __yak_rp = /*#__PURE__*/ styled("rp");
+export const __yak_rt = /*#__PURE__*/ styled("rt");
+export const __yak_ruby = /*#__PURE__*/ styled("ruby");
+export const __yak_s = /*#__PURE__*/ styled("s");
+export const __yak_samp = /*#__PURE__*/ styled("samp");
+export const __yak_script = /*#__PURE__*/ styled("script");
+export const __yak_section = /*#__PURE__*/ styled("section");
+export const __yak_select = /*#__PURE__*/ styled("select");
+export const __yak_small = /*#__PURE__*/ styled("small");
+export const __yak_source = /*#__PURE__*/ styled("source");
+export const __yak_span = /*#__PURE__*/ styled("span");
+export const __yak_strong = /*#__PURE__*/ styled("strong");
+export const __yak_style = /*#__PURE__*/ styled("style");
+export const __yak_sub = /*#__PURE__*/ styled("sub");
+export const __yak_summary = /*#__PURE__*/ styled("summary");
+export const __yak_sup = /*#__PURE__*/ styled("sup");
+export const __yak_table = /*#__PURE__*/ styled("table");
+export const __yak_tbody = /*#__PURE__*/ styled("tbody");
+export const __yak_td = /*#__PURE__*/ styled("td");
+export const __yak_textarea = /*#__PURE__*/ styled("textarea");
+export const __yak_tfoot = /*#__PURE__*/ styled("tfoot");
+export const __yak_th = /*#__PURE__*/ styled("th");
+export const __yak_thead = /*#__PURE__*/ styled("thead");
+export const __yak_time = /*#__PURE__*/ styled("time");
+export const __yak_tr = /*#__PURE__*/ styled("tr");
+export const __yak_track = /*#__PURE__*/ styled("track");
+export const __yak_u = /*#__PURE__*/ styled("u");
+export const __yak_ul = /*#__PURE__*/ styled("ul");
+export const __yak_use = /*#__PURE__*/ styled("use");
+export const __yak_var = /*#__PURE__*/ styled("var");
+export const __yak_video = /*#__PURE__*/ styled("video");
+export const __yak_wbr = /*#__PURE__*/ styled("wbr");
+export const __yak_circle = /*#__PURE__*/ styled("circle");
+export const __yak_clipPath = /*#__PURE__*/ styled("clipPath");
+export const __yak_defs = /*#__PURE__*/ styled("defs");
+export const __yak_ellipse = /*#__PURE__*/ styled("ellipse");
+export const __yak_foreignObject = /*#__PURE__*/ styled("foreignObject");
+export const __yak_g = /*#__PURE__*/ styled("g");
+export const __yak_image = /*#__PURE__*/ styled("image");
+export const __yak_line = /*#__PURE__*/ styled("line");
+export const __yak_linearGradient = /*#__PURE__*/ styled("linearGradient");
+export const __yak_marker = /*#__PURE__*/ styled("marker");
+export const __yak_mask = /*#__PURE__*/ styled("mask");
+export const __yak_path = /*#__PURE__*/ styled("path");
+export const __yak_pattern = /*#__PURE__*/ styled("pattern");
+export const __yak_polygon = /*#__PURE__*/ styled("polygon");
+export const __yak_polyline = /*#__PURE__*/ styled("polyline");
+export const __yak_radialGradient = /*#__PURE__*/ styled("radialGradient");
+export const __yak_rect = /*#__PURE__*/ styled("rect");
+export const __yak_stop = /*#__PURE__*/ styled("stop");
+export const __yak_svg = /*#__PURE__*/ styled("svg");
+export const __yak_text = /*#__PURE__*/ styled("text");
+export const __yak_tspan = /*#__PURE__*/ styled("tspan");