acrylblends 0.6.2 → 0.6.3

package/lib/context-DxFdY_un.d.ts

@@ -0,0 +1,250 @@
+import { a as DomEvent } from "./types-Lqx5BxQF.js";
+import { i as HtmlEscapedString } from "./html-SllAe0YT.js";
+import { a as JSX, o as JSXNode, p as JSX$1, r as FC, s as Props, t as Child } from "./base-BpQy2Rk7.js";
+
+//#region ../../plugins/acryl-router/src/core/jsx/components.d.ts
+type ErrorHandler = (error: Error) => void;
+type FallbackRender = (error: Error) => Child;
+/**
+ * @experimental
+ * `ErrorBoundary` is an experimental feature.
+ * The API might be changed.
+ */
+declare const ErrorBoundary: FC<PropsWithChildren<{
+  fallback?: Child;
+  fallbackRender?: FallbackRender;
+  onError?: ErrorHandler;
+}>>;
+//#endregion
+//#region ../../plugins/acryl-router/src/core/jsx/hooks/index.d.ts
+type UpdateStateFunction<T> = (newState: T | ((currentState: T) => T)) => void;
+declare const startViewTransition: (callback: () => void) => void;
+declare const useViewTransition: () => [boolean, (callback: () => void) => void];
+declare const startTransition: (callback: () => void) => void;
+declare const useTransition: () => [boolean, (callback: () => void | Promise<void>) => void];
+type UseDeferredValue = <T>(value: T, initialValue?: T) => T;
+declare const useDeferredValue: UseDeferredValue;
+type UseStateType = {
+  <T>(initialState: T | (() => T)): [T, UpdateStateFunction<T>];
+  <T = undefined>(): [T | undefined, UpdateStateFunction<T | undefined>];
+};
+declare const useState: UseStateType;
+declare const useReducer: <T, A>(reducer: (state: T, action: A) => T, initialArg: T, init?: (initialState: T) => T) => [T, (action: A) => void];
+declare const useEffect: (effect: () => void | (() => void), deps?: readonly unknown[]) => void;
+declare const useLayoutEffect: (effect: () => void | (() => void), deps?: readonly unknown[]) => void;
+declare const useInsertionEffect: (effect: () => void | (() => void), deps?: readonly unknown[]) => void;
+declare const useCallback: <T extends Function>(callback: T, deps: readonly unknown[]) => T;
+type RefObject<T> = {
+  current: T;
+};
+declare function useRef<T>(initialValue: T): RefObject<T>;
+declare function useRef<T>(initialValue: T | null): RefObject<T | null>;
+declare function useRef<T>(initialValue: T | undefined): RefObject<T | undefined>;
+declare const use: <T>(promise: Promise<T>) => T;
+declare const useMemo: <T>(factory: () => T, deps: readonly unknown[]) => T;
+declare const useId: () => string;
+declare const useDebugValue: (_value: unknown, _formatter?: (value: unknown) => string) => void;
+declare const createRef: <T>() => RefObject<T | null>;
+declare const forwardRef: <T, P = {}>(Component: (props: P, ref?: RefObject<T | null>) => JSX.Element) => ((props: P & {
+  ref?: RefObject<T | null>;
+}) => JSX.Element);
+declare const useImperativeHandle: <T>(ref: RefObject<T | null>, createHandle: () => T, deps: readonly unknown[]) => void;
+declare const useSyncExternalStore: <T>(subscribe: (callback: () => void) => () => void, getSnapshot: () => T, getServerSnapshot?: () => T) => T;
+//#endregion
+//#region ../../plugins/acryl-router/src/core/jsx/types.d.ts
+type PropsWithChildren<P = unknown> = P & {
+  children?: Child | undefined;
+};
+type CSSProperties = JSX$1.CSSProperties;
+/**
+ * React types
+ */
+type ReactElement<P = any, T = string | Function> = JSXNode & {
+  type: T;
+  props: P;
+  key: string | null;
+};
+type ReactNode = ReactElement | string | number | boolean | null | undefined;
+type ComponentClass<_P = {}, _S = {}> = unknown;
+type Event = globalThis.Event;
+type MouseEvent = DomEvent<'MouseEvent'>;
+type KeyboardEvent = DomEvent<'KeyboardEvent'>;
+type FocusEvent = DomEvent<'FocusEvent'>;
+type ClipboardEvent = DomEvent<'ClipboardEvent'>;
+type InputEvent = DomEvent<'InputEvent'>;
+type PointerEvent = DomEvent<'PointerEvent'>;
+type TouchEvent = DomEvent<'TouchEvent'>;
+type WheelEvent = DomEvent<'WheelEvent'>;
+type AnimationEvent = DomEvent<'AnimationEvent'>;
+type TransitionEvent = DomEvent<'TransitionEvent'>;
+type DragEvent = DomEvent<'DragEvent'>;
+//#endregion
+//#region ../../plugins/acryl-router/src/core/jsx/children.d.ts
+declare const Children: {
+  map: (children: Child[], fn: (child: Child, index: number) => Child) => Child[];
+  forEach: (children: Child[], fn: (child: Child, index: number) => void) => void;
+  count: (children: Child[]) => number;
+  only: (_children: Child[]) => Child;
+  toArray: (children: Child) => Child[];
+};
+//#endregion
+//#region ../../plugins/acryl-router/src/core/jsx/dom/hooks/index.d.ts
+type FormStatus = {
+  pending: false;
+  data: null;
+  method: null;
+  action: null;
+} | {
+  pending: true;
+  data: FormData;
+  method: 'get' | 'post';
+  action: string | ((formData: FormData) => void | Promise<void>);
+};
+/**
+ * This hook returns the current form status
+ * @returns FormStatus
+ */
+declare const useFormStatus: () => FormStatus;
+/**
+ * This hook returns the current state and a function to update the state optimistically
+ * The current state is updated optimistically and then reverted to the original state when all actions are resolved
+ * @param state
+ * @param updateState
+ * @returns [T, (action: N) => void]
+ */
+declare const useOptimistic: <T, N>(state: T, updateState: (currentState: T, action: N) => T) => [T, (action: N) => void];
+/**
+ * This hook returns the current state and a function to update the state by form action
+ * @param fn
+ * @param initialState
+ * @param permalink
+ * @returns [T, (data: FormData) => void]
+ */
+declare const useActionState: <T>(fn: Function, initialState: T, permalink?: string) => [T, Function];
+//#endregion
+//#region ../../plugins/acryl-router/src/core/jsx/streaming.d.ts
+/**
+ * Used to specify nonce for scripts generated by `Suspense` and `ErrorBoundary`.
+ *
+ * @example
+ * ```tsx
+ * <StreamingContext.Provider value={{ scriptNonce: 'test-nonce' }}>
+ *   <Suspense fallback={<p>Loading...</p>}>
+ *     <Content />
+ *   </Suspense>
+ * </StreamingContext.Provider>
+ * ```
+ */
+declare const StreamingContext: Context<{
+  scriptNonce: string;
+} | null>;
+/**
+ * @experimental
+ * `Suspense` is an experimental feature.
+ * The API might be changed.
+ */
+declare const Suspense: FC<PropsWithChildren<{
+  fallback: any;
+}>>;
+/**
+ * @experimental
+ * `renderToReadableStream()` is an experimental feature.
+ * The API might be changed.
+ */
+declare const renderToReadableStream: (content: HtmlEscapedString | JSXNode | Promise<HtmlEscapedString>, onError?: (e: unknown) => string | void) => ReadableStream<Uint8Array>;
+//#endregion
+//#region ../../plugins/acryl-router/src/core/jsx/index.d.ts
+declare const _default: {
+  version: string;
+  memo: <T>(component: FC<T>, propsAreEqual?: (prevProps: Readonly<T>, nextProps: Readonly<T>) => boolean) => FC<T>;
+  Fragment: ({
+    children
+  }: {
+    key?: string;
+    children?: Child | HtmlEscapedString;
+  }) => HtmlEscapedString;
+  StrictMode: ({
+    children
+  }: {
+    key?: string;
+    children?: Child | HtmlEscapedString;
+  }) => HtmlEscapedString;
+  isValidElement: (element: unknown) => element is JSXNode;
+  createElement: (tag: string | Function, props: Props | null, ...children: Child[]) => JSXNode;
+  cloneElement: <T extends JSXNode | JSX.Element>(element: T, props: Partial<Props>, ...children: Child[]) => T;
+  ErrorBoundary: FC<PropsWithChildren<{
+    fallback?: Child;
+    fallbackRender?: FallbackRender;
+    onError?: ErrorHandler;
+  }>>;
+  createContext: <T>(defaultValue: T) => Context<T>;
+  useContext: <T>(context: Context<T>) => T;
+  useState: {
+    <T>(initialState: T | (() => T)): [T, (newState: T | ((currentState: T) => T)) => void];
+    <T = undefined>(): [T | undefined, (newState: T | ((currentState: T | undefined) => T | undefined) | undefined) => void];
+  };
+  useEffect: (effect: () => void | (() => void), deps?: readonly unknown[]) => void;
+  useRef: typeof useRef;
+  useCallback: <T extends Function>(callback: T, deps: readonly unknown[]) => T;
+  useReducer: <T, A>(reducer: (state: T, action: A) => T, initialArg: T, init?: (initialState: T) => T) => [T, (action: A) => void];
+  useId: () => string;
+  useDebugValue: (_value: unknown, _formatter?: (value: unknown) => string) => void;
+  use: <T>(promise: Promise<T>) => T;
+  startTransition: (callback: () => void) => void;
+  useTransition: () => [boolean, (callback: () => void | Promise<void>) => void];
+  useDeferredValue: <T>(value: T, initialValue?: T) => T;
+  startViewTransition: (callback: () => void) => void;
+  useViewTransition: () => [boolean, (callback: () => void) => void];
+  useMemo: <T>(factory: () => T, deps: readonly unknown[]) => T;
+  useLayoutEffect: (effect: () => void | (() => void), deps?: readonly unknown[]) => void;
+  useInsertionEffect: (effect: () => void | (() => void), deps?: readonly unknown[]) => void;
+  createRef: <T>() => RefObject<T | null>;
+  forwardRef: <T, P = {}>(Component: (props: P, ref?: RefObject<T | null>) => JSX.Element) => ((props: P & {
+    ref?: RefObject<T | null>;
+  }) => JSX.Element);
+  useImperativeHandle: <T>(ref: RefObject<T | null>, createHandle: () => T, deps: readonly unknown[]) => void;
+  useSyncExternalStore: <T>(subscribe: (callback: () => void) => () => void, getSnapshot: () => T, getServerSnapshot?: () => T) => T;
+  useActionState: <T>(fn: Function, initialState: T, permalink?: string) => [T, Function];
+  useOptimistic: <T, N>(state: T, updateState: (currentState: T, action: N) => T) => [T, (action: N) => void];
+  Suspense: FC<PropsWithChildren<{
+    fallback: any;
+  }>>;
+  Children: {
+    map: (children: Child[], fn: (child: Child, index: number) => Child) => Child[];
+    forEach: (children: Child[], fn: (child: Child, index: number) => void) => void;
+    count: (children: Child[]) => number;
+    only: (_children: Child[]) => Child;
+    toArray: (children: Child) => Child[];
+  };
+};
+//#endregion
+//#region ../../plugins/acryl-router/src/core/jsx/context.d.ts
+interface Context<T> extends FC<PropsWithChildren<{
+  value: T;
+}>> {
+  values: T[];
+  Provider: FC<PropsWithChildren<{
+    value: T;
+  }>>;
+}
+/**
+ * Create a context whose value can be provided with `<Context.Provider>` and
+ * read with {@link useContext}.
+ *
+ * Server-side renders are isolated per request, so a provided value never leaks
+ * into a concurrent request — even across `await` in an async component, when
+ * `AsyncLocalStorage` is available (Node.js >= 20.16, Deno, Bun, Cloudflare
+ * Workers with `nodejs_compat`). Without it, reading context after `await`
+ * returns the default value; synchronous components and `use()`-based
+ * suspension are unaffected.
+ */
+declare const createContext: <T>(defaultValue: T) => Context<T>;
+/**
+ * Read the current value of a context created with {@link createContext}.
+ *
+ * Safe to call from async components after `await`. See {@link createContext}
+ * for the per-runtime isolation guarantees.
+ */
+declare const useContext: <T>(context: Context<T>) => T;
+//#endregion
+export { createRef as A, useImperativeHandle as B, PropsWithChildren as C, TransitionEvent as D, TouchEvent as E, useCallback as F, useRef as G, useLayoutEffect as H, useDebugValue as I, useTransition as J, useState as K, useDeferredValue as L, startTransition as M, startViewTransition as N, WheelEvent as O, use as P, FallbackRender as Q, useEffect as R, PointerEvent as S, ReactNode as T, useMemo as U, useInsertionEffect as V, useReducer as W, ErrorBoundary as X, useViewTransition as Y, ErrorHandler as Z, Event as _, StreamingContext as a, KeyboardEvent as b, useActionState as c, Children as d, AnimationEvent as f, DragEvent as g, ComponentClass as h, _default as i, forwardRef as j, RefObject as k, useFormStatus as l, ClipboardEvent as m, createContext as n, Suspense as o, CSSProperties as p, useSyncExternalStore as q, useContext as r, renderToReadableStream as s, Context as t, useOptimistic as u, FocusEvent as v, ReactElement as w, MouseEvent as x, InputEvent as y, useId as z };

package/lib/context-storage.d.ts

@@ -1,4 +1,4 @@
-import { I as MiddlewareHandler, _ as Env, t as Context } from "./context-B5Y1lLha.js";
+import { I as MiddlewareHandler, _ as Env, t as Context } from "./context-DVQBjuns.js";
 
 //#region ../../plugins/acryl-router/src/core/middleware/context-storage/index.d.ts
 /**

package/lib/{cookie-D9_nQbsM.d.ts → cookie-CCelEqky.d.ts}

@@ -1,4 +1,4 @@
-import { n as BufferSource } from "./types-D9DEXMjE.js";
+import { n as BufferSource } from "./types-Lqx5BxQF.js";
 
 //#region ../../plugins/acryl-router/src/core/utils/cookie.d.ts
 type Cookie = Record<string, string>;

package/lib/cookie.d.ts

@@ -1,6 +1,6 @@
-import { t as Context } from "./context-B5Y1lLha.js";
-import { n as BufferSource } from "./types-D9DEXMjE.js";
-import { a as SignedCookie, i as CookiePrefixOptions, r as CookieOptions, t as Cookie } from "./cookie-D9_nQbsM.js";
+import { t as Context } from "./context-DVQBjuns.js";
+import { n as BufferSource } from "./types-Lqx5BxQF.js";
+import { a as SignedCookie, i as CookiePrefixOptions, r as CookieOptions, t as Cookie } from "./cookie-CCelEqky.js";
 
 //#region ../../plugins/acryl-router/src/core/helper/cookie/index.d.ts
 interface GetCookie {

package/lib/cors.d.ts

@@ -1,4 +1,4 @@
-import { I as MiddlewareHandler, t as Context } from "./context-B5Y1lLha.js";
+import { I as MiddlewareHandler, t as Context } from "./context-DVQBjuns.js";
 
 //#region ../../plugins/acryl-router/src/core/middleware/cors/index.d.ts
 type CORSOptions = {

package/lib/csrf.d.ts

@@ -1,4 +1,4 @@
-import { I as MiddlewareHandler, t as Context } from "./context-B5Y1lLha.js";
+import { I as MiddlewareHandler, t as Context } from "./context-DVQBjuns.js";
 
 //#region ../../plugins/acryl-router/src/core/middleware/csrf/index.d.ts
 type IsAllowedOriginHandler = (origin: string, context: Context) => boolean | Promise<boolean>;

package/lib/css-D2jb7X8b.js

@@ -0,0 +1,320 @@
+//#region ../../plugins/acryl-router/src/core/helper/css/common.ts
+const PSEUDO_GLOBAL_SELECTOR = ":-acryl-global";
+const isPseudoGlobalSelectorRe = new RegExp(`^${PSEUDO_GLOBAL_SELECTOR}{(.*)}$`);
+const DEFAULT_STYLE_ID = "acryl-css";
+const SELECTOR = Symbol();
+const CLASS_NAME = Symbol();
+const STYLE_STRING = Symbol();
+const SELECTORS = Symbol();
+const EXTERNAL_CLASS_NAMES = Symbol();
+const CSS_ESCAPED = Symbol();
+/**
+* @experimental
+* `rawCssString` is an experimental feature.
+* The API might be changed.
+*/
+const rawCssString = (value) => {
+	return { [CSS_ESCAPED]: value };
+};
+/**
+* Used the goober'code as a reference:
+* https://github.com/cristianbote/goober/blob/master/src/core/to-hash.js
+* MIT License, Copyright (c) 2019 Cristian Bote
+*/
+const toHash = (str) => {
+	let i = 0, out = 11;
+	while (i < str.length) out = 101 * out + str.charCodeAt(i++) >>> 0;
+	return "css-" + out;
+};
+const normalizeLabel = (label) => {
+	return label.trim().replace(/\s+/g, "-");
+};
+const isValidClassName = (name) => /^-?[_a-zA-Z][_a-zA-Z0-9-]*$/.test(name);
+const hasUnsafeSelectorChar = (name) => /[<{}]/.test(name);
+const RESERVED_KEYFRAME_NAMES = /* @__PURE__ */ new Set([
+	"default",
+	"inherit",
+	"initial",
+	"none",
+	"revert",
+	"revert-layer",
+	"unset"
+]);
+const isValidKeyframeName = (name) => isValidClassName(name) && !RESERVED_KEYFRAME_NAMES.has(name.toLowerCase());
+const defaultOnInvalidSlug = (slug) => {
+	console.warn(`Invalid slug: ${slug}`);
+};
+const cssStringReStr = [
+	"\"(?:(?:\\\\[\\s\\S]|[^\"\\\\])*)\"",
+	"'(?:(?:\\\\[\\s\\S]|[^'\\\\])*)'",
+	"url\\(\\s*[^)\"'\\s]*\\s*\\)"
+].join("|");
+const minifyCssRe = new RegExp([
+	"(" + cssStringReStr + ")",
+	"(?:" + [
+		"^\\s+",
+		"\\/\\*.*?\\*\\/\\s*",
+		"\\/\\/.*\\n\\s*",
+		"\\s+$"
+	].join("|") + ")",
+	"\\s*;\\s*(}|$)\\s*",
+	"\\s*([{};,])\\s*",
+	"(:)\\s*",
+	"(\\s)\\s+"
+].join("|"), "g");
+const minify = (css) => {
+	return css.replace(minifyCssRe, (_, $1, $2, $3, $4, $5) => $1 || $2 || $3 || $4 || $5 || "");
+};
+const buildStyleString = (strings, values) => {
+	const selectors = [];
+	const externalClassNames = [];
+	const label = strings[0].match(/^\s*\/\*(.*?)\*\//)?.[1] || "";
+	let styleString = "";
+	for (let i = 0, len = strings.length; i < len; i++) {
+		styleString += strings[i];
+		let vArray = values[i];
+		if (typeof vArray === "boolean" || vArray === null || vArray === void 0) continue;
+		if (!Array.isArray(vArray)) vArray = [vArray];
+		for (let j = 0, len = vArray.length; j < len; j++) {
+			let value = vArray[j];
+			if (typeof value === "boolean" || value === null || value === void 0) continue;
+			if (typeof value === "string") if (/([\\"'\/])/.test(value)) styleString += value.replace(/([\\"']|(?<=<)\/)/g, "\\$1");
+			else styleString += value;
+			else if (typeof value === "number") styleString += value;
+			else if (value[CSS_ESCAPED]) styleString += value[CSS_ESCAPED];
+			else if (value[CLASS_NAME].startsWith("@keyframes ")) {
+				selectors.push(value);
+				styleString += ` ${value[CLASS_NAME].substring(11)} `;
+			} else {
+				if (strings[i + 1]?.match(/^\s*{/)) {
+					selectors.push(value);
+					value = `.${value[CLASS_NAME]}`;
+				} else {
+					selectors.push(...value[SELECTORS]);
+					externalClassNames.push(...value[EXTERNAL_CLASS_NAMES]);
+					value = value[STYLE_STRING];
+					const valueLen = value.length;
+					if (valueLen > 0) {
+						const lastChar = value[valueLen - 1];
+						if (lastChar !== ";" && lastChar !== "}") value += ";";
+					}
+				}
+				styleString += `${value || ""}`;
+			}
+		}
+	}
+	return [
+		label,
+		minify(styleString),
+		selectors,
+		externalClassNames
+	];
+};
+const cssCommon = (strings, values, classNameSlug, onInvalidSlug) => {
+	let [label, thisStyleString, selectors, externalClassNames] = buildStyleString(strings, values);
+	const isPseudoGlobal = isPseudoGlobalSelectorRe.exec(thisStyleString);
+	if (isPseudoGlobal) thisStyleString = isPseudoGlobal[1];
+	const hash = toHash(label + thisStyleString);
+	let customSlug;
+	if (classNameSlug) {
+		const slug = classNameSlug(hash, normalizeLabel(label), thisStyleString);
+		if (slug) if (isValidClassName(slug)) customSlug = slug;
+		else (onInvalidSlug || defaultOnInvalidSlug)(slug);
+	}
+	const selector = (isPseudoGlobal ? PSEUDO_GLOBAL_SELECTOR : "") + (customSlug || hash);
+	const className = (isPseudoGlobal ? selectors.map((s) => s[CLASS_NAME]) : [selector, ...externalClassNames]).join(" ");
+	return {
+		[SELECTOR]: selector,
+		[CLASS_NAME]: className,
+		[STYLE_STRING]: thisStyleString,
+		[SELECTORS]: selectors,
+		[EXTERNAL_CLASS_NAMES]: externalClassNames
+	};
+};
+const cxCommon = (args) => {
+	for (let i = 0, len = args.length; i < len; i++) {
+		const arg = args[i];
+		if (typeof arg === "string") args[i] = {
+			[SELECTOR]: "",
+			[CLASS_NAME]: "",
+			[STYLE_STRING]: "",
+			[SELECTORS]: [],
+			[EXTERNAL_CLASS_NAMES]: hasUnsafeSelectorChar(arg) ? [] : [arg]
+		};
+	}
+	return args;
+};
+const keyframesCommon = (strings, values, classNameSlug, onInvalidSlug) => {
+	const [label, styleString] = buildStyleString(strings, values);
+	const hash = toHash(label + styleString);
+	let customSlug;
+	if (classNameSlug) {
+		const slug = classNameSlug(hash, normalizeLabel(label), styleString);
+		if (slug) if (isValidKeyframeName(slug)) customSlug = slug;
+		else (onInvalidSlug || defaultOnInvalidSlug)(slug);
+	}
+	return {
+		[SELECTOR]: "",
+		[CLASS_NAME]: `@keyframes ${customSlug || hash}`,
+		[STYLE_STRING]: styleString,
+		[SELECTORS]: [],
+		[EXTERNAL_CLASS_NAMES]: []
+	};
+};
+let viewTransitionNameIndex = 0;
+const viewTransitionCommon = ((strings, values, classNameSlug, onInvalidSlug) => {
+	if (!strings) strings = [`/* h-v-t ${viewTransitionNameIndex++} */`];
+	const content = Array.isArray(strings) ? cssCommon(strings, values, classNameSlug, onInvalidSlug) : strings;
+	const transitionName = content[CLASS_NAME];
+	const res = cssCommon(["view-transition-name:", ""], [transitionName], classNameSlug, onInvalidSlug);
+	content[CLASS_NAME] = PSEUDO_GLOBAL_SELECTOR + content[CLASS_NAME];
+	content[STYLE_STRING] = content[STYLE_STRING].replace(/(?<=::view-transition(?:[a-z-]*)\()(?=\))/g, transitionName);
+	res[CLASS_NAME] = res[SELECTOR] = transitionName;
+	res[SELECTORS] = [...content[SELECTORS], content];
+	return res;
+});
+//#endregion
+//#region ../../plugins/acryl-router/src/core/jsx/dom/css.ts
+const splitRule = (rule) => {
+	const result = [];
+	let startPos = 0;
+	let depth = 0;
+	for (let i = 0, len = rule.length; i < len; i++) {
+		const char = rule[i];
+		if (char === "'" || char === "\"") {
+			const quote = char;
+			i++;
+			for (; i < len; i++) {
+				if (rule[i] === "\\") {
+					i++;
+					continue;
+				}
+				if (rule[i] === quote) break;
+			}
+			continue;
+		}
+		if (char === "{") {
+			depth++;
+			continue;
+		}
+		if (char === "}") {
+			depth--;
+			if (depth === 0) {
+				result.push(rule.slice(startPos, i + 1));
+				startPos = i + 1;
+			}
+			continue;
+		}
+	}
+	return result;
+};
+const createCssJsxDomObjects = ({ id }) => {
+	let styleSheet = void 0;
+	const findStyleSheet = () => {
+		if (!styleSheet) {
+			styleSheet = document.querySelector(`style#${id}`)?.sheet;
+			if (styleSheet) styleSheet.addedStyles = /* @__PURE__ */ new Set();
+		}
+		return styleSheet ? [styleSheet, styleSheet.addedStyles] : [];
+	};
+	const insertRule = (className, styleString) => {
+		const [sheet, addedStyles] = findStyleSheet();
+		if (!sheet || !addedStyles) {
+			Promise.resolve().then(() => {
+				if (!findStyleSheet()[0]) throw new Error("style sheet not found");
+				insertRule(className, styleString);
+			});
+			return;
+		}
+		if (!addedStyles.has(className)) {
+			addedStyles.add(className);
+			(className.startsWith(":-acryl-global") ? splitRule(styleString) : [`${className[0] === "@" ? "" : "."}${className}{${styleString}}`]).forEach((rule) => {
+				sheet.insertRule(rule, sheet.cssRules.length);
+			});
+		}
+	};
+	const cssObject = { toString() {
+		const selector = this[SELECTOR];
+		insertRule(selector, this[STYLE_STRING]);
+		this[SELECTORS].forEach(({ [CLASS_NAME]: className, [STYLE_STRING]: styleString }) => {
+			insertRule(className, styleString);
+		});
+		return this[CLASS_NAME];
+	} };
+	const Style = ({ children, nonce }) => ({
+		tag: "style",
+		props: {
+			id,
+			nonce,
+			children: children && (Array.isArray(children) ? children : [children]).map((c) => c[STYLE_STRING])
+		}
+	});
+	return [cssObject, Style];
+};
+/**
+* @experimental
+* `createCssContext` is an experimental feature.
+* The API might be changed.
+*
+* @param options.id - The ID for the style element
+* @param options.classNameSlug - Optional function to customize generated CSS class names
+* @param options.onInvalidSlug - Optional callback function called when an invalid slug is returned from ClassNameSlug
+*/
+const createCssContext = ({ id, classNameSlug, onInvalidSlug }) => {
+	const [cssObject, Style] = createCssJsxDomObjects({ id });
+	const newCssClassNameObject = (cssClassName) => {
+		cssClassName.toString = cssObject.toString;
+		return cssClassName;
+	};
+	const css = (strings, ...values) => {
+		return newCssClassNameObject(cssCommon(strings, values, classNameSlug, onInvalidSlug));
+	};
+	const cx = (...args) => {
+		args = cxCommon(args);
+		return css(Array(args.length).fill(""), ...args);
+	};
+	const keyframes = (strings, ...values) => keyframesCommon(strings, values, classNameSlug, onInvalidSlug);
+	const viewTransition = ((strings, ...values) => {
+		return newCssClassNameObject(viewTransitionCommon(strings, values, classNameSlug, onInvalidSlug));
+	});
+	return {
+		css,
+		cx,
+		keyframes,
+		viewTransition,
+		Style
+	};
+};
+const defaultContext = createCssContext({ id: DEFAULT_STYLE_ID });
+/**
+* @experimental
+* `css` is an experimental feature.
+* The API might be changed.
+*/
+const css = defaultContext.css;
+/**
+* @experimental
+* `cx` is an experimental feature.
+* The API might be changed.
+*/
+const cx = defaultContext.cx;
+/**
+* @experimental
+* `keyframes` is an experimental feature.
+* The API might be changed.
+*/
+const keyframes = defaultContext.keyframes;
+/**
+* @experimental
+* `viewTransition` is an experimental feature.
+* The API might be changed.
+*/
+const viewTransition = defaultContext.viewTransition;
+/**
+* @experimental
+* `Style` is an experimental feature.
+* The API might be changed.
+*/
+const Style = defaultContext.Style;
+//#endregion
+export { rawCssString as _, cx as a, CLASS_NAME as c, SELECTOR as d, SELECTORS as f, keyframesCommon as g, cxCommon as h, css as i, DEFAULT_STYLE_ID as l, cssCommon as m, createCssContext as n, keyframes as o, STYLE_STRING as p, createCssJsxDomObjects as r, viewTransition as s, Style as t, PSEUDO_GLOBAL_SELECTOR as u, viewTransitionCommon as v };