next-yak 9.4.1 → 9.4.2

package/dist/context/index.js

@@ -1,18 +1,15 @@
 "use client";
 
-// runtime/context/index.tsx
 import React, { createContext, use } from "react";
-var YakContext = createContext({});
-var useTheme = () => {
-  const context = use(YakContext);
-  return context instanceof Promise ? use(context) : context;
-};
-var YakThemeProvider = ({
-  children,
-  theme = {}
-}) => /* @__PURE__ */ React.createElement(YakContext.Provider, { value: theme }, children);
-export {
-  YakThemeProvider,
-  useTheme
+
+//#region runtime/context/index.tsx
+const YakContext = createContext({});
+const useTheme = () => {
+	const context = use(YakContext);
+	return context instanceof Promise ? use(context) : context;
 };
+const YakThemeProvider = ({ children, theme = {} }) => /* @__PURE__ */ React.createElement(YakContext.Provider, { value: theme }, children);
+
+//#endregion
+export { YakThemeProvider, useTheme };
 //# sourceMappingURL=index.js.map

package/dist/context/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../runtime/context/index.tsx"],"sourcesContent":["\"use client\";\n//\n// This file is the client component (browser & ssr) version of index.server.tsx\n//\nimport React, { ReactNode, createContext, use } from \"react\";\n\nexport interface YakTheme {}\n\n/**\n * The yak theme context\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nconst YakContext = createContext<YakTheme>({});\n\n/**\n * Returns the current yak theme context\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const useTheme = (): YakTheme => {\n  const context = use(YakContext);\n  return context instanceof Promise ? use(context) : context;\n};\n\n/**\n * Yak theme context provider\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const YakThemeProvider = ({\n  children,\n  theme = {},\n}: {\n  children: ReactNode;\n  theme?: YakTheme;\n}) => <YakContext.Provider value={theme}>{children}</YakContext.Provider>;\n"],"mappings":";;;AAIA,OAAO,SAAoB,eAAe,WAAW;AAQrD,IAAM,aAAa,cAAwB,CAAC,CAAC;AAOtC,IAAM,WAAW,MAAgB;AACtC,QAAM,UAAU,IAAI,UAAU;AAC9B,SAAO,mBAAmB,UAAU,IAAI,OAAO,IAAI;AACrD;AAOO,IAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA,QAAQ,CAAC;AACX,MAGM,oCAAC,WAAW,UAAX,EAAoB,OAAO,SAAQ,QAAS;","names":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../runtime/context/index.tsx"],"sourcesContent":["\"use client\";\n//\n// This file is the client component (browser & ssr) version of index.server.tsx\n//\nimport React, { ReactNode, createContext, use } from \"react\";\n\nexport interface YakTheme {}\n\n/**\n * The yak theme context\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nconst YakContext = createContext<YakTheme>({});\n\n/**\n * Returns the current yak theme context\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const useTheme = (): YakTheme => {\n  const context = use(YakContext);\n  return context instanceof Promise ? use(context) : context;\n};\n\n/**\n * Yak theme context provider\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md\n */\nexport const YakThemeProvider = ({\n  children,\n  theme = {},\n}: {\n  children: ReactNode;\n  theme?: YakTheme;\n}) => <YakContext.Provider value={theme}>{children}</YakContext.Provider>;\n"],"mappings":";;;;;AAYA,MAAM,aAAa,cAAwB,EAAE,CAAC;AAO9C,MAAa,iBAA2B;CACtC,MAAM,UAAU,IAAI,WAAW;AAC/B,QAAO,mBAAmB,UAAU,IAAI,QAAQ,GAAG;;AAQrD,MAAa,oBAAoB,EAC/B,UACA,QAAQ,EAAE,OAIN,oCAAC,WAAW,UAAZ,EAAqB,OAAO,OAAuC,EAA/B,SAA+B"}

package/dist/context/index.server.cjs

@@ -1,53 +1,47 @@
-"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+//#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let react = require("react");
+react = __toESM(react);
+let runtime_context_index_js = require("./index.js");
+let next_yak_context_baseContext = require("next-yak/context/baseContext");
 
-// runtime/context/index.server.tsx
-var index_server_exports = {};
-__export(index_server_exports, {
-  YakThemeProvider: () => YakThemeProvider,
-  useTheme: () => useTheme
-});
-module.exports = __toCommonJS(index_server_exports);
-var import_react = __toESM(require("react"), 1);
-var import_index = require("./index.js");
-var import_baseContext = require("next-yak/context/baseContext");
-var getYakContext = (0, import_react.cache)(() => (0, import_baseContext.getYakThemeContext)());
-var useTheme = () => {
-  const theme = getYakContext();
-  return theme instanceof Promise ? (0, import_react.use)(theme) : theme;
+//#region runtime/context/index.server.tsx
+const getYakContext = (0, react.cache)(() => (0, next_yak_context_baseContext.getYakThemeContext)());
+const useTheme = () => {
+	const theme = getYakContext();
+	return theme instanceof Promise ? (0, react.use)(theme) : theme;
 };
-var YakThemeProvider = ({ children }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_index.YakThemeProvider, { theme: getYakContext() }, children);
+const YakThemeProvider = ({ children }) => {
+	return /* @__PURE__ */ react.default.createElement(runtime_context_index_js.YakThemeProvider, { theme: getYakContext() }, children);
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  YakThemeProvider,
-  useTheme
-});
+
+//#endregion
+exports.YakThemeProvider = YakThemeProvider;
+exports.useTheme = useTheme;
 //# sourceMappingURL=index.server.cjs.map

package/dist/context/index.server.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../runtime/context/index.server.tsx"],"sourcesContent":["//\n// This file is the react-server component version of index.tsx\n//\n\n// @ts-ignore - in the current @types/react \"cache\" is not typed\nimport React, { ReactNode, cache, use } from \"react\";\nimport {\n  YakTheme,\n  YakThemeProvider as YakThemeClientProvider,\n} from \"./index.js\";\n\n// the following import might be changed by\n// the user config in withYak to point to their own\n// context\nimport { getYakThemeContext } from \"next-yak/context/baseContext\";\n\n/** Request based RSC YAK Context */\nconst getYakContext = cache(() => getYakThemeContext());\nexport const useTheme = (): YakTheme | undefined => {\n  const theme: YakTheme | undefined | Promise<YakTheme> = getYakContext();\n  return theme instanceof Promise ? use(theme) : theme;\n};\nexport const YakThemeProvider = ({ children }: { children: ReactNode }) => {\n  return (\n    <YakThemeClientProvider theme={getYakContext()}>\n      {children}\n    </YakThemeClientProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,mBAA6C;AAC7C,mBAGO;AAKP,yBAAmC;AAGnC,IAAM,oBAAgB,oBAAM,UAAM,uCAAmB,CAAC;AAC/C,IAAM,WAAW,MAA4B;AAClD,QAAM,QAAkD,cAAc;AACtE,SAAO,iBAAiB,cAAU,kBAAI,KAAK,IAAI;AACjD;AACO,IAAM,mBAAmB,CAAC,EAAE,SAAS,MAA+B;AACzE,SACE,6BAAAA,QAAA,cAAC,aAAAC,kBAAA,EAAuB,OAAO,cAAc,KAC1C,QACH;AAEJ;","names":["React","YakThemeClientProvider"]}
+{"version":3,"file":"index.server.cjs","names":["YakThemeClientProvider"],"sources":["../../runtime/context/index.server.tsx"],"sourcesContent":["//\n// This file is the react-server component version of index.tsx\n//\n\n// @ts-ignore - in the current @types/react \"cache\" is not typed\nimport React, { ReactNode, cache, use } from \"react\";\nimport { YakTheme, YakThemeProvider as YakThemeClientProvider } from \"./index.js\";\n\n// the following import might be changed by\n// the user config in withYak to point to their own\n// context\nimport { getYakThemeContext } from \"next-yak/context/baseContext\";\n\n/** Request based RSC YAK Context */\nconst getYakContext = cache(() => getYakThemeContext());\nexport const useTheme = (): YakTheme | undefined => {\n  const theme: YakTheme | undefined | Promise<YakTheme> = getYakContext();\n  return theme instanceof Promise ? use(theme) : theme;\n};\nexport const YakThemeProvider = ({ children }: { children: ReactNode }) => {\n  return <YakThemeClientProvider theme={getYakContext()}>{children}</YakThemeClientProvider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,6FAAgD,CAAC;AACvD,MAAa,iBAAuC;CAClD,MAAM,QAAkD,eAAe;AACvE,QAAO,iBAAiB,yBAAc,MAAM,GAAG;;AAEjD,MAAa,oBAAoB,EAAE,eAAwC;AACzE,QAAO,4CAACA,2CAAD,EAAwB,OAAO,eAAe,EAAqC,EAAlC,SAAkC"}

package/dist/context/index.server.d.cts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+import { YakTheme } from "./index.js";
+
+//#region runtime/context/index.server.d.ts
+declare const useTheme: () => YakTheme | undefined;
+declare const YakThemeProvider: ({
+  children
+}: {
+  children: ReactNode;
+}) => React.JSX.Element;
+//#endregion
+export { YakThemeProvider, useTheme };
+//# sourceMappingURL=index.server.d.cts.map

package/dist/context/index.server.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+import { YakTheme } from "./index.js";
+
+//#region runtime/context/index.server.d.ts
+declare const useTheme: () => YakTheme | undefined;
+declare const YakThemeProvider: ({
+  children
+}: {
+  children: ReactNode;
+}) => React.JSX.Element;
+//#endregion
+export { YakThemeProvider, useTheme };
+//# sourceMappingURL=index.server.d.ts.map

package/dist/context/index.server.js

@@ -1,19 +1,17 @@
-// runtime/context/index.server.tsx
 import React, { cache, use } from "react";
-import {
-  YakThemeProvider as YakThemeClientProvider
-} from "./index.js";
+import { YakThemeProvider as YakThemeProvider$1 } from "./index.js";
 import { getYakThemeContext } from "next-yak/context/baseContext";
-var getYakContext = cache(() => getYakThemeContext());
-var useTheme = () => {
-  const theme = getYakContext();
-  return theme instanceof Promise ? use(theme) : theme;
+
+//#region runtime/context/index.server.tsx
+const getYakContext = cache(() => getYakThemeContext());
+const useTheme = () => {
+	const theme = getYakContext();
+	return theme instanceof Promise ? use(theme) : theme;
 };
-var YakThemeProvider = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(YakThemeClientProvider, { theme: getYakContext() }, children);
-};
-export {
-  YakThemeProvider,
-  useTheme
+const YakThemeProvider = ({ children }) => {
+	return /* @__PURE__ */ React.createElement(YakThemeProvider$1, { theme: getYakContext() }, children);
 };
+
+//#endregion
+export { YakThemeProvider, useTheme };
 //# sourceMappingURL=index.server.js.map

package/dist/context/index.server.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../runtime/context/index.server.tsx"],"sourcesContent":["//\n// This file is the react-server component version of index.tsx\n//\n\n// @ts-ignore - in the current @types/react \"cache\" is not typed\nimport React, { ReactNode, cache, use } from \"react\";\nimport {\n  YakTheme,\n  YakThemeProvider as YakThemeClientProvider,\n} from \"./index.js\";\n\n// the following import might be changed by\n// the user config in withYak to point to their own\n// context\nimport { getYakThemeContext } from \"next-yak/context/baseContext\";\n\n/** Request based RSC YAK Context */\nconst getYakContext = cache(() => getYakThemeContext());\nexport const useTheme = (): YakTheme | undefined => {\n  const theme: YakTheme | undefined | Promise<YakTheme> = getYakContext();\n  return theme instanceof Promise ? use(theme) : theme;\n};\nexport const YakThemeProvider = ({ children }: { children: ReactNode }) => {\n  return (\n    <YakThemeClientProvider theme={getYakContext()}>\n      {children}\n    </YakThemeClientProvider>\n  );\n};\n"],"mappings":";AAKA,OAAO,SAAoB,OAAO,WAAW;AAC7C;AAAA,EAEE,oBAAoB;AAAA,OACf;AAKP,SAAS,0BAA0B;AAGnC,IAAM,gBAAgB,MAAM,MAAM,mBAAmB,CAAC;AAC/C,IAAM,WAAW,MAA4B;AAClD,QAAM,QAAkD,cAAc;AACtE,SAAO,iBAAiB,UAAU,IAAI,KAAK,IAAI;AACjD;AACO,IAAM,mBAAmB,CAAC,EAAE,SAAS,MAA+B;AACzE,SACE,oCAAC,0BAAuB,OAAO,cAAc,KAC1C,QACH;AAEJ;","names":[]}
+{"version":3,"file":"index.server.js","names":["YakThemeClientProvider"],"sources":["../../runtime/context/index.server.tsx"],"sourcesContent":["//\n// This file is the react-server component version of index.tsx\n//\n\n// @ts-ignore - in the current @types/react \"cache\" is not typed\nimport React, { ReactNode, cache, use } from \"react\";\nimport { YakTheme, YakThemeProvider as YakThemeClientProvider } from \"./index.js\";\n\n// the following import might be changed by\n// the user config in withYak to point to their own\n// context\nimport { getYakThemeContext } from \"next-yak/context/baseContext\";\n\n/** Request based RSC YAK Context */\nconst getYakContext = cache(() => getYakThemeContext());\nexport const useTheme = (): YakTheme | undefined => {\n  const theme: YakTheme | undefined | Promise<YakTheme> = getYakContext();\n  return theme instanceof Promise ? use(theme) : theme;\n};\nexport const YakThemeProvider = ({ children }: { children: ReactNode }) => {\n  return <YakThemeClientProvider theme={getYakContext()}>{children}</YakThemeClientProvider>;\n};\n"],"mappings":";;;;;AAcA,MAAM,gBAAgB,YAAY,oBAAoB,CAAC;AACvD,MAAa,iBAAuC;CAClD,MAAM,QAAkD,eAAe;AACvE,QAAO,iBAAiB,UAAU,IAAI,MAAM,GAAG;;AAEjD,MAAa,oBAAoB,EAAE,eAAwC;AACzE,QAAO,oCAACA,oBAAD,EAAwB,OAAO,eAAe,EAAqC,EAAlC,SAAkC"}

package/dist/index.cjs

@@ -1,5 +1,2 @@
-"use strict";var E=Object.create;var u=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var H=(t,e)=>{for(var s in e)u(t,s,{get:e[s],enumerable:!0})},R=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of D(e))!M.call(t,n)&&n!==s&&u(t,n,{get:()=>e[n],enumerable:!(r=$(e,n))||r.enumerable});return t};var J=(t,e,s)=>(s=t!=null?E(L(t)):{},R(e||!t||!t.__esModule?u(s,"default",{value:t,enumerable:!0}):s,t)),W=t=>R(u({},"__esModule",{value:!0}),t);var U={};H(U,{YakThemeProvider:()=>S.YakThemeProvider,atoms:()=>N,css:()=>b,keyframes:()=>I,styled:()=>O,useTheme:()=>S.useTheme});module.exports=W(U);var S=require("next-yak/context");var p=Symbol("yak");function f(...t){let e,s=[];for(let r of t)typeof r=="string"?e=r:typeof r=="function"?s.push(r):typeof r=="object"&&"style"in r&&s.push((n,o,i)=>{for(let c in r.style){let y=r.style[c];typeof y=="function"?i[c]=String(h(n,y)):i[c]=String(y)}});return s.length===0?(r,n)=>(e&&n.add(e),()=>{}):(r,n,o)=>{e&&n.add(e);for(let i=0;i<s.length;i++)B(r,s[i],n,o)}}var B=(t,e,s,r)=>{let n=e(t,s,r);for(;n;){if(typeof n=="function"){n=n(t,s,r);continue}else if(typeof n=="object"&&("className"in n&&n.className&&s.add(n.className),"style"in n&&n.style))for(let o in n.style)r[o]=n.style[o];break}},h=(t,e)=>{let s=e(t);if(typeof s=="function")return h(t,s);if(process.env.NODE_ENV==="development"&&typeof s!="string"&&typeof s!="number"&&!(s instanceof String))throw new Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(s)}
-
-Dynamic CSS function: ${e.toString()}
-`);return s};var N=(...t)=>{let e=[],s=[];for(let n of t)typeof n=="string"?e.push(...n.split(" ")):typeof n=="function"&&s.push(n);let r=e.length>0?[(n,o)=>{e.forEach(i=>o.add(i))},...s]:s;return f(...r)};var b=(t,...e)=>{if(Array.isArray(t)&&"raw"in t){let r=t[0];for(let n=0;n<e.length;n++){let o=e[n];r+=o&&typeof o=="object"&&"__yak"in o?o.__yak:String(o),r+=t[n+1]}return{__yak:r}}let s=[];for(let r of e)typeof r=="function"&&s.push(r);return s.length===0?{className:"",style:void 0}:(r=>{for(let n=0;n<s.length;n++)G(r,s[n]);return{className:"",style:void 0}})};function G(t,e){let s=new Set,r={},n=e(t,s,r);for(;typeof n=="function";)n=n(t,s,r);return n}var I=(t,...e)=>"";var _=J(require("react"),1),F=require("next-yak/context"),V={},X=t=>Object.assign(w(t),{attrs:e=>w(t,e)}),Y=X,w=(t,e)=>{let s=typeof t!="string"&&p in t,[r,n,o]=s?t[p]:[],i=K(e,n);return(c,...y)=>{let T=f(c,...y),g=Q(T,o),k=l=>{let m=i||T.length?(0,F.useTheme)():V,a="$__attrs"in l?{theme:m,...l}:d({theme:m,...l,$__attrs:!0},i?.({theme:m,...l})),P=new Set("className"in a?a.className?.split(" "):[]),C={..."style"in a?a.style:{}};"$__runtimeStylesProcessed"in a||(g(a,P,C),a.$__runtimeStylesProcessed=!0),a.className=Array.from(P).join(" ")||void 0,a.style=C;let{theme:j,...v}=a,A=j===m?v:a,x=s?A:q(A);return r?r(x):_.default.createElement(t,{...x})};return Object.assign(k,{[p]:[k,i,g]})}},q=t=>{let e={};for(let s in t)!s.startsWith("$")&&t[s]!==void 0&&(e[s]=t[s]);return e},z=(t,e)=>{if(!(!t&&!e))return t?e?t+" "+e:t:e},d=(t,e)=>e?(t.className===e.className||!e.className)&&(t.style===e.style||!e.style)?{...t,...e}:{...t,...e,className:z(t.className,e.className),style:{...t.style||{},...e.style||{}}}:t,K=(t,e)=>{let s=t&&(typeof t=="function"?t:()=>t);return s&&e?r=>{let n=e(r);return d(n,s(d(r,n)))}:s||e},Q=(t,e)=>t&&e?(r,n,o)=>{e(r,n,o),t(r,n,o)}:t||e;var O=new Proxy(Y,{get(t,e){return t(e)}});0&&(module.exports={YakThemeProvider,atoms,css,keyframes,styled,useTheme});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`next-yak/context`),l=require(`react`);l=s(l);const u=Symbol(`yak`);function d(...e){let t,n=[];for(let r of e)typeof r==`string`?t=r:typeof r==`function`?n.push(r):typeof r==`object`&&`style`in r&&n.push((e,t,n)=>{for(let t in r.style){let i=r.style[t];typeof i==`function`?n[t]=String(p(e,i)):n[t]=String(i)}});return n.length===0?(e,n)=>(t&&n.add(t),()=>{}):(e,r,i)=>{t&&r.add(t);for(let t=0;t<n.length;t++)f(e,n[t],r,i)}}const f=(e,t,n,r)=>{let i=t(e,n,r);for(;i;){if(typeof i==`function`){i=i(e,n,r);continue}else if(typeof i==`object`&&(`className`in i&&i.className&&n.add(i.className),`style`in i&&i.style))for(let e in i.style)r[e]=i.style[e];break}},p=(e,t)=>{let n=t(e);if(typeof n==`function`)return p(e,n);if(process.env.NODE_ENV===`development`&&typeof n!=`string`&&typeof n!=`number`&&!(n instanceof String))throw Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(n)}\n\nDynamic CSS function: ${t.toString()}\n`);return n},m=(...e)=>{let t=[],n=[];for(let r of e)typeof r==`string`?t.push(...r.split(` `)):typeof r==`function`&&n.push(r);return d(...t.length>0?[(e,n)=>{t.forEach(e=>n.add(e))},...n]:n)},h=(e,...t)=>{if(Array.isArray(e)&&`raw`in e){let n=e[0];for(let r=0;r<t.length;r++){let i=t[r];n+=i&&typeof i==`object`&&`__yak`in i?i.__yak:String(i),n+=e[r+1]}return{__yak:n}}let n=[];for(let e of t)typeof e==`function`&&n.push(e);return n.length===0?{className:``,style:void 0}:(e=>{for(let t=0;t<n.length;t++)g(e,n[t]);return{className:``,style:void 0}})};function g(e,t){let n=new Set,r={},i=t(e,n,r);for(;typeof i==`function`;)i=i(e,n,r);return i}const _=(e,...t)=>``,v={},y=e=>Object.assign(b(e),{attrs:t=>b(e,t)}),b=(e,t)=>{let n=typeof e!=`string`&&u in e,[r,i,a]=n?e[u]:[],o=w(t,i);return(t,...i)=>{let s=d(t,...i),f=T(s,a),p=t=>{let i=o||s.length?(0,c.useTheme)():v,a=`$__attrs`in t?{theme:i,...t}:C({theme:i,...t,$__attrs:!0},o?.({theme:i,...t})),u=new Set(`className`in a?a.className?.split(` `):[]),d={...`style`in a?a.style:{}};`$__runtimeStylesProcessed`in a||(f(a,u,d),a.$__runtimeStylesProcessed=!0),a.className=Array.from(u).join(` `)||void 0,a.style=d;let{theme:p,...m}=a,h=p===i?m:a,g=n?h:x(h);return r?r(g):l.default.createElement(e,g)};return Object.assign(p,{[u]:[p,o,f]})}},x=e=>{let t={};for(let n in e)!n.startsWith(`$`)&&e[n]!==void 0&&(t[n]=e[n]);return t},S=(e,t)=>{if(!(!e&&!t))return e?t?e+` `+t:e:t},C=(e,t)=>t?(e.className===t.className||!t.className)&&(e.style===t.style||!t.style)?{...e,...t}:{...e,...t,className:S(e.className,t.className),style:{...e.style,...t.style}}:e,w=(e,t)=>{let n=e&&(typeof e==`function`?e:()=>e);return n&&t?e=>{let r=t(e);return C(r,n(C(e,r)))}:n||t},T=(e,t)=>e&&t?(n,r,i)=>{t(n,r,i),e(n,r,i)}:e||t,E=new Proxy(y,{get(e,t){return e(t)}});Object.defineProperty(exports,`YakThemeProvider`,{enumerable:!0,get:function(){return c.YakThemeProvider}}),exports.atoms=m,exports.css=h,exports.keyframes=_,exports.styled=E,Object.defineProperty(exports,`useTheme`,{enumerable:!0,get:function(){return c.useTheme}});
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../runtime/index.ts","../runtime/cssLiteral.tsx","../runtime/atoms.tsx","../runtime/mocks/cssLiteral.ts","../runtime/mocks/keyframes.ts","../runtime/styled.tsx","../runtime/mocks/styled.ts"],"sourcesContent":["/**\n * This file contains the typings for the public API for next-yak and testing mocks\n *\n * IMPORTANT: In production builds, imports to this file should be replaced by the Babel plugin.\n * If you're seeing this code in a production environment, your build process may not be configured correctly.\n *\n * Purpose:\n * 1. Provide a test-friendly version of the next-yak API\n * 2. Offer type definitions for the public API\n *\n * Usage in tests:\n * - Import from \"next-yak\" as usual in your test files\n * - These mock implementations will be used instead of the actual runtime\n *\n * Warning for production:\n * - If these exports are used in a production build, styles will not be applied correctly\n * - Ensure your build process is configured to use the next-yak SWC plugin\n *\n * For maintainers:\n * - Keep this API surface in sync with the actual implementation in next-yak/internal\n * - Ensure mock implementations here are suitable for testing purposes\n */\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nexport { useTheme, YakThemeProvider } from \"next-yak/context\";\nexport type { YakTheme } from \"./context/index.d.ts\";\n\nexport type { GenericYakComponentOf, YakComponent } from \"./publicStyledApi.ts\";\n\nexport { atoms } from \"./atoms.js\";\nexport { css } from \"./mocks/cssLiteral.js\";\nexport { keyframes } from \"./mocks/keyframes.js\";\nexport { styled } from \"./mocks/styled.js\";\n","import type { YakTheme } from \"./index.d.ts\";\nimport { RuntimeStyleProcessor } from \"./publicStyledApi.js\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\nexport type ComponentStyles<TProps> = (props: TProps) => {\n  className: string;\n  style?: {\n    [key: string]: string;\n  };\n};\n\nexport type CSSInterpolation<TProps> =\n  | string\n  | number\n  | undefined\n  | null\n  | false\n  | ComponentStyles<TProps>\n  | {\n      // type only identifier to allow targeting components\n      // e.g. styled.svg`${Button}:hover & { fill: red; }`\n      [yakComponentSymbol]: any;\n    }\n  | ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n  style: { [key: string]: string | ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n  styles: TemplateStringsArray,\n  ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\nexport type NestedRuntimeStyleProcessor = (\n  props: unknown,\n  classNames: Set<string>,\n  style: React.CSSProperties,\n) =>\n  | {\n      className?: string;\n      style?: React.CSSProperties;\n    }\n  | void\n  | NestedRuntimeStyleProcessor;\n\n/**\n * css() runtime factory of css``\n *\n * /!\\ next-yak transpiles css`` and styled``\n *\n * This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n *\n * Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n *\n * The internal functioning of css`` is to return a single callback function that runs all functions\n * (or creates new ones if needed) that are passed as arguments. These functions receive the props, classNames, and style object as arguments\n * and operate directly on the classNames and style objects.\n */\nexport function css<TProps>(\n  styles: TemplateStringsArray,\n  ...values: CSSInterpolation<NoInfer<TProps> & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n  ...args: Array<any>\n): RuntimeStyleProcessor<TProps> {\n  // Normally this  could be an array of strings passed, but as we transpile the usage of css`` ourselves, we control the arguments\n  // and ensure that only the first argument is a string (class name of the non-dynamic styles)\n  let className: string | undefined;\n  const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];\n  for (const arg of args as Array<string | CSSFunction | CSSStyles<any>>) {\n    // A CSS-module class name which got auto generated during build from static css\n    // e.g. css`color: red;`\n    // compiled -> css(\"yak31e4\")\n    if (typeof arg === \"string\") {\n      className = arg;\n    }\n    // Dynamic CSS e.g.\n    // css`${props => props.active && css`color: red;`}`\n    // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n    else if (typeof arg === \"function\") {\n      dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);\n    }\n    // Dynamic CSS with css variables e.g.\n    // css`transform: translate(${props => props.x}, ${props => props.y});`\n    // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n    else if (typeof arg === \"object\" && \"style\" in arg) {\n      dynamicCssFunctions.push((props, _, style) => {\n        for (const key in arg.style) {\n          const value = arg.style[key];\n          if (typeof value === \"function\") {\n            // @ts-expect-error CSSProperties don't allow css variables\n            style[key] = String(\n              // The value for a css value can be a theme dependent function e.g.:\n              // const borderColor = (props: { theme: { mode: \"dark\" | \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n              // css`border-color: ${borderColor};`\n              // Therefore the value has to be extracted recursively\n              recursivePropExecution(props, value),\n            );\n          } else {\n            // @ts-expect-error CSSProperties don't allow css variables\n            style[key] = String(value);\n          }\n        }\n      });\n    }\n  }\n\n  // Non Dynamic CSS\n  // This is just an optimization for the common case where there are no dynamic css functions\n  if (dynamicCssFunctions.length === 0) {\n    return (_, classNames) => {\n      if (className) {\n        classNames.add(className);\n      }\n      return () => {};\n    };\n  }\n\n  return (props, classNames, allStyles) => {\n    if (className) {\n      classNames.add(className);\n    }\n    for (let i = 0; i < dynamicCssFunctions.length; i++) {\n      unwrapProps(props, dynamicCssFunctions[i], classNames, allStyles);\n    }\n  };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n  props: unknown,\n  fn: NestedRuntimeStyleProcessor,\n  classNames: Set<string>,\n  style: React.CSSProperties,\n) => {\n  let result = fn(props, classNames, style);\n  while (result) {\n    if (typeof result === \"function\") {\n      result = result(props, classNames, style);\n      continue;\n    } else if (typeof result === \"object\") {\n      if (\"className\" in result && result.className) {\n        classNames.add(result.className);\n      }\n      if (\"style\" in result && result.style) {\n        for (const key in result.style) {\n          // This is hard for typescript to infer\n          style[key as keyof React.CSSProperties] = result.style[\n            key as keyof React.CSSProperties\n          ] as any;\n        }\n      }\n    }\n    break;\n  }\n};\n\nconst recursivePropExecution = (\n  props: unknown,\n  fn: (props: unknown) => any,\n): string | number => {\n  const result = fn(props);\n  if (typeof result === \"function\") {\n    return recursivePropExecution(props, result);\n  }\n  if (process.env.NODE_ENV === \"development\") {\n    if (\n      typeof result !== \"string\" &&\n      typeof result !== \"number\" &&\n      !(result instanceof String)\n    ) {\n      throw new Error(\n        `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n          result,\n        )}\\n\\nDynamic CSS function: ${fn.toString()}\\n`,\n      );\n    }\n  }\n  return result;\n};\n","import { ComponentStyles, css } from \"./cssLiteral.js\";\nimport { RuntimeStyleProcessor as RuntimeStyleProcessor } from \"./publicStyledApi.js\";\n\n/**\n * Allows to use atomic CSS classes in a styled or css block\n *\n * @usage\n *\n * ```tsx\n * import { styled, atoms } from \"next-yak\";\n *\n * const Button = styled.button<{ $primary?: boolean }>`\n *  ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n *  ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n */\nexport const atoms = <T,>(\n  ...atoms: (string | RuntimeStyleProcessor<T> | false)[]\n): ComponentStyles<T> => {\n  const staticClasses: string[] = [];\n  const dynamicFunctions: RuntimeStyleProcessor<T>[] = [];\n\n  for (const atom of atoms) {\n    if (typeof atom === \"string\") {\n      staticClasses.push(...atom.split(\" \"));\n    } else if (typeof atom === \"function\") {\n      dynamicFunctions.push(atom);\n    }\n  }\n\n  const runtimeFunctions: RuntimeStyleProcessor<T>[] =\n    staticClasses.length > 0\n      ? [\n          (_, classNames) => {\n            staticClasses.forEach((cls) => classNames.add(cls));\n          },\n          ...dynamicFunctions,\n        ]\n      : dynamicFunctions;\n\n  // @ts-expect-error the internal implementation of css is not typed\n  return css(...runtimeFunctions);\n};\n","import type {\n  css as cssInternal,\n  NestedRuntimeStyleProcessor,\n} from \"../cssLiteral.js\";\n\nexport type { ComponentStyles, CSSInterpolation } from \"../cssLiteral.js\";\n\n/**\n * Allows to use CSS styles in a styled or css block\n *\n * e.g.\n *\n * ```tsx\n * const Component = styled.div`\n *  color: black;\n *  ${({$active}) => $active && css`color: red;`}\n * `;\n * ```\n */\nexport const css: typeof cssInternal = (\n  styles: TemplateStringsArray,\n  ...args: unknown[]\n) => {\n  // When called in yak files as a template tag (without SWC transformation),\n  // return { __yak: rawCss } so the cross-file resolver can\n  // extract the mixin value from evaluated .yak files.\n  if (Array.isArray(styles) && \"raw\" in styles) {\n    let rawCss = styles[0];\n    for (let i = 0; i < args.length; i++) {\n      const interpolation = args[i];\n      rawCss +=\n        interpolation &&\n        typeof interpolation === \"object\" &&\n        \"__yak\" in interpolation\n          ? (interpolation as { __yak: string }).__yak\n          : String(interpolation);\n      rawCss += styles[i + 1];\n    }\n    return { __yak: rawCss } as any;\n  }\n\n  const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];\n  for (const arg of args as Array<string | Function | object>) {\n    // Dynamic CSS e.g.\n    // css`${props => props.active && css`color: red;`}`\n    // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n    if (typeof arg === \"function\") {\n      dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);\n    }\n  }\n  if (dynamicCssFunctions.length === 0) {\n    return {\n      className: \"\",\n      style: undefined,\n    };\n  }\n  return ((props: unknown) => {\n    for (let i = 0; i < dynamicCssFunctions.length; i++) {\n      // run the dynamic expressions and ignore the return value\n      // the execution is important to ensure that the user code is executed\n      // the same way as in the real runtime\n      executeDynamicExpressionRecursively(props, dynamicCssFunctions[i]);\n    }\n    return {\n      className: \"\",\n      style: undefined,\n    };\n  }) as any;\n};\n\nfunction executeDynamicExpressionRecursively(\n  props: unknown,\n  expression: NestedRuntimeStyleProcessor,\n) {\n  const classNames = new Set<string>();\n  const style = {};\n  let result = expression(props, classNames, style);\n  while (typeof result === \"function\") {\n    result = result(props, classNames, style);\n  }\n  return result;\n}\n","import type { keyframes as keyframesInternal } from \"../keyframes.js\";\n\n/**\n * Allows to use CSS keyframe animations in a styled or css block\n *\n * @usage\n *\n * ```tsx\n * import { styled, keyframes } from \"next-yak\";\n *\n * const rotate = keyframes`\n *  from {\n *   transform: rotate(0deg);\n *  }\n *  to {\n *   transform: rotate(360deg);\n *  }\n * `;\n *\n * const Spinner = styled.div`\n *   animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n */\nexport const keyframes: typeof keyframesInternal = (styles, ...dynamic) => {\n  // the keyframes function is a no-op in the mock\n  // as it has no dynamic runtime behavior but only css\n  return \"\";\n};\n","import { css, CSSInterpolation, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\nimport type {\n  Attrs,\n  AttrsMerged,\n  Styled,\n  YakComponent,\n  AttrsFunction,\n  StyledFn,\n  HtmlTags,\n  Substitute,\n  StyledLiteral,\n  RuntimeStyleProcessor,\n} from \"./publicStyledApi.js\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.d.ts\";\n\n/**\n * This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n */\nconst noTheme: YakTheme = {};\n\n//\n// The `styled()` API without `styled.` syntax\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst styledFactory: StyledFn = (Component) =>\n  Object.assign(yakStyled(Component), {\n    attrs: (attrs: Attrs<any>) => yakStyled(Component, attrs),\n  });\n\n/**\n * The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n *\n * @usage\n *\n * ```tsx\n * const StyledLink = styled(Link)`\n *  color: #BF4F74;\n *  font-weight: bold;\n * `;\n * ```\n */\nexport const styled = styledFactory as Styled;\n\nconst yakStyled: StyledInternal = (Component, attrs) => {\n  const isYakComponent =\n    typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n  // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n  // and we can also extract the attrs function and the dynamic style function to merge it with the current attrs function (or dynamic style function)\n  // so that the sequence of the attrs functions is preserved\n  const [parentYakComponent, parentAttrsFn, parentRuntimeStylesFn] =\n    isYakComponent\n      ? (Component[yakComponentSymbol] as [\n          YakComponent<unknown>,\n          ExtractAttrsFunction<typeof attrs>,\n          RuntimeStyleProcessor<unknown>,\n        ])\n      : [];\n\n  const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n  return (styles, ...values) => {\n    // combine all interpolated logic into a single function\n    // e.g. styled.button`color: ${props => props.color}; margin: ${props => props.margin};`\n    const runtimeStylesFn = css(\n      styles,\n      ...(values as CSSInterpolation<unknown>[]),\n    ) as RuntimeStyleProcessor<unknown>;\n    const runtimeStyleProcessor = buildRuntimeStylesProcessor(\n      runtimeStylesFn,\n      parentRuntimeStylesFn,\n    );\n    const Yak: React.FunctionComponent = (props) => {\n      // if the css component does not require arguments\n      // it can be called without arguments and we skip calling useTheme()\n      //\n      // `attrsFn || getRuntimeStyles.length` is NOT against the rule of hooks as\n      // getRuntimeStyles and attrsFn are constants defined outside of the component\n      //\n      // for example\n      //\n      // const Button = styled.button`color: red;`\n      //       ^ does not need to have access to theme, so we skip calling useTheme()\n      //\n      // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n      //       ^ must be have access to theme, so we call useTheme()\n      const theme =\n        mergedAttrsFn || runtimeStylesFn.length ? useTheme() : noTheme;\n\n      // The first components which is not wrapped in a yak component will execute all attrs functions\n      // starting from the innermost yak component to the outermost yak component (itself)\n      const combinedProps =\n        \"$__attrs\" in props\n          ? ({\n              theme,\n              ...props,\n            } as {\n              theme: YakTheme;\n              className?: string;\n              style?: React.CSSProperties;\n            })\n          : // overwrite and merge the current props with the processed attrs\n            combineProps(\n              {\n                theme,\n                ...(props as {\n                  className?: string;\n                  style?: React.CSSProperties;\n                }),\n                // mark the props as processed\n                $__attrs: true,\n              },\n              mergedAttrsFn?.({ theme, ...(props as any) }),\n            );\n\n      const classNames = new Set<string>(\n        \"className\" in combinedProps ? combinedProps.className?.split(\" \") : [],\n      );\n      const styles = {\n        ...(\"style\" in combinedProps ? combinedProps.style : {}),\n      };\n\n      // execute all functions inside the style literal if not already executed\n      // e.g. styled.button`color: ${props => props.color};`\n      if (!(\"$__runtimeStylesProcessed\" in combinedProps)) {\n        runtimeStyleProcessor(combinedProps, classNames, styles);\n        // @ts-expect-error this is not typed correctly\n        combinedProps.$__runtimeStylesProcessed = true;\n      }\n\n      combinedProps.className = Array.from(classNames).join(\" \") || undefined;\n      combinedProps.style = styles;\n\n      // delete the yak theme from the props\n      // this must happen after the runtimeStyles are calculated\n      // prevents passing the theme prop to the DOM element of a styled component\n      const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } =\n        combinedProps;\n      const propsBeforeFiltering =\n        themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n      // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n      // so that they are not passed to the DOM element\n      const filteredProps = !isYakComponent\n        ? removeNonDomProperties(propsBeforeFiltering)\n        : propsBeforeFiltering;\n\n      return parentYakComponent ? (\n        // if the styled(Component) syntax is used and the component is a yak component\n        // we can call the yak function directly without running through react createElement\n        parentYakComponent(filteredProps)\n      ) : (\n        // if the final component is a string component e.g. styled(\"div\") or a custom non yak fn e.g. styled(MyComponent)\n        <Component\n          {...(filteredProps as React.ComponentProps<\n            Exclude<typeof Component, string>\n          >)}\n        />\n      );\n    };\n\n    // Assign the yakComponentSymbol directly without forwardRef\n    return Object.assign(Yak, {\n      [yakComponentSymbol]: [Yak, mergedAttrsFn, runtimeStyleProcessor] as [\n        unknown,\n        unknown,\n        unknown,\n      ],\n    });\n  };\n};\n\n/**\n * Remove all entries that start with a $ sign\n *\n * This allows to have props that are used for internal styling purposes\n * but are not be passed to the DOM element\n */\nconst removeNonDomProperties = <T extends Record<string, unknown>>(\n  obj: T,\n): T => {\n  const result = {} as T;\n  for (const key in obj) {\n    if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n      result[key] = obj[key];\n    }\n  }\n  return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n  if (!a && !b) return undefined;\n  if (!a) return b;\n  if (!b) return a;\n  return a + \" \" + b;\n};\n\n/**\n * merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n */\nconst combineProps = <\n  T extends {\n    className?: string;\n    style?: React.CSSProperties;\n  },\n  TOther extends\n    | {\n        className?: string;\n        style?: React.CSSProperties;\n      }\n    | null\n    | undefined,\n>(\n  props: T,\n  newProps: TOther,\n) =>\n  newProps\n    ? (props.className === newProps.className || !newProps.className) &&\n      (props.style === newProps.style || !newProps.style)\n      ? // shortcut if no style and class merging is necessary\n        {\n          ...props,\n          ...newProps,\n        }\n      : // merge class names and styles\n        {\n          ...props,\n          ...newProps,\n          className: mergeClassNames(props.className, newProps.className),\n          style: { ...(props.style || {}), ...(newProps.style || {}) },\n        }\n    : // if no new props are provided, no merging is necessary\n      props;\n\n/**\n * Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n */\nconst buildRuntimeAttrsProcessor = <\n  T,\n  TAttrsIn extends object,\n  TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n  parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> | undefined => {\n  const ownAttrsFn =\n    attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n  if (ownAttrsFn && parentAttrsFn) {\n    return (props) => {\n      const parentProps = parentAttrsFn(props);\n\n      // overwrite and merge the parent props with the props received from the attrs function\n      // after they went through the parent attrs function.\n      //\n      // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n      // the whole props object calculated from the previous attrs functions\n      return combineProps(\n        parentProps,\n        ownAttrsFn(combineProps(props, parentProps)),\n      );\n    };\n  }\n\n  return ownAttrsFn || parentAttrsFn;\n};\n\n/**\n * Merges the runtime style function of the current component with the runtime style function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * @param runtimeStylesFn The current runtime styles function\n * @param parentRuntimeStylesFn The parent runtime styles function\n * @returns The merged runtime styles function\n */\nconst buildRuntimeStylesProcessor = <T,>(\n  runtimeStylesFn: RuntimeStyleProcessor<T>,\n  parentRuntimeStylesFn?: RuntimeStyleProcessor<T>,\n) => {\n  if (runtimeStylesFn && parentRuntimeStylesFn) {\n    const combined: RuntimeStyleProcessor<T> = (props, classNames, style) => {\n      parentRuntimeStylesFn(props, classNames, style);\n      runtimeStylesFn(props, classNames, style);\n    };\n    return combined;\n  }\n  return runtimeStylesFn || parentRuntimeStylesFn;\n};\n\n/**\n * Internal function where attrs are passed to be processed\n */\nexport type StyledInternal = <\n  T extends object,\n  TAttrsIn extends object = {},\n  TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n  Component: React.FunctionComponent<T> | YakComponent<T> | HtmlTags | string,\n  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => StyledLiteral<Substitute<T, TAttrsIn>>;\n\n/**\n * Utility type to extract the AttrsFunction from the Attrs type\n */\nexport type ExtractAttrsFunction<T> = T extends (p: any) => any ? T : never;\n","import React from \"react\";\nimport { styled as StyledFactory } from \"../styled.js\";\n\nexport const styled = new Proxy(StyledFactory, {\n  get(target, TagName: keyof React.JSX.IntrinsicElements) {\n    return target(TagName);\n  },\n}) as typeof StyledFactory;\n"],"mappings":"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","names":["index_exports","__export","atoms","css","keyframes","styled","__toCommonJS","import_context","yakComponentSymbol","css","args","className","dynamicCssFunctions","arg","props","_","style","key","value","recursivePropExecution","classNames","allStyles","unwrapProps","fn","result","atoms","staticClasses","dynamicFunctions","atom","runtimeFunctions","_","classNames","cls","css","css","styles","args","rawCss","i","interpolation","dynamicCssFunctions","arg","props","executeDynamicExpressionRecursively","expression","classNames","style","result","keyframes","styles","dynamic","import_react","import_context","noTheme","styledFactory","Component","yakStyled","attrs","styled","isYakComponent","yakComponentSymbol","parentYakComponent","parentAttrsFn","parentRuntimeStylesFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","runtimeStylesFn","css","runtimeStyleProcessor","buildRuntimeStylesProcessor","Yak","props","theme","combinedProps","combineProps","classNames","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","React","obj","result","key","mergeClassNames","a","b","newProps","ownAttrsFn","parentProps","style","styled","target","TagName"]}
+{"version":3,"file":"index.cjs","names":["css","css","styled","css","StyledFactory"],"sources":["../runtime/cssLiteral.tsx","../runtime/atoms.tsx","../runtime/mocks/cssLiteral.ts","../runtime/mocks/keyframes.ts","../runtime/styled.tsx","../runtime/mocks/styled.ts"],"sourcesContent":["import type { YakTheme } from \"./index.ts\";\nimport { RuntimeStyleProcessor } from \"./publicStyledApi.js\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\nexport type ComponentStyles<TProps> = (props: TProps) => {\n  className: string;\n  style?: {\n    [key: string]: string;\n  };\n};\n\nexport type CSSInterpolation<TProps> =\n  | string\n  | number\n  | undefined\n  | null\n  | false\n  | ComponentStyles<TProps>\n  | {\n      // type only identifier to allow targeting components\n      // e.g. styled.svg`${Button}:hover & { fill: red; }`\n      [yakComponentSymbol]: any;\n    }\n  | ((props: TProps) => CSSInterpolation<TProps>);\n\ntype CSSStyles<TProps = {}> = {\n  style: { [key: string]: string | ((props: TProps) => string) };\n};\n\ntype CSSFunction = <TProps = {}>(\n  styles: TemplateStringsArray,\n  ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n) => ComponentStyles<TProps>;\n\nexport type NestedRuntimeStyleProcessor = (\n  props: unknown,\n  classNames: Set<string>,\n  style: React.CSSProperties,\n) =>\n  | {\n      className?: string;\n      style?: React.CSSProperties;\n    }\n  | void\n  | NestedRuntimeStyleProcessor;\n\n/**\n * css() runtime factory of css``\n *\n * /!\\ next-yak transpiles css`` and styled``\n *\n * This changes the typings of the css`` and styled`` functions.\n * During development the user of next-yak wants to work with the\n * typings BEFORE compilation.\n *\n * Therefore this is only an internal function only and it must be cast to any\n * before exported to the user.\n *\n * The internal functioning of css`` is to return a single callback function that runs all functions\n * (or creates new ones if needed) that are passed as arguments. These functions receive the props, classNames, and style object as arguments\n * and operate directly on the classNames and style objects.\n */\nexport function css<TProps>(\n  styles: TemplateStringsArray,\n  ...values: CSSInterpolation<NoInfer<TProps> & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(...args: Array<any>): RuntimeStyleProcessor<TProps> {\n  // Normally this  could be an array of strings passed, but as we transpile the usage of css`` ourselves, we control the arguments\n  // and ensure that only the first argument is a string (class name of the non-dynamic styles)\n  let className: string | undefined;\n  const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];\n  for (const arg of args as Array<string | CSSFunction | CSSStyles<any>>) {\n    // A CSS-module class name which got auto generated during build from static css\n    // e.g. css`color: red;`\n    // compiled -> css(\"yak31e4\")\n    if (typeof arg === \"string\") {\n      className = arg;\n    }\n    // Dynamic CSS e.g.\n    // css`${props => props.active && css`color: red;`}`\n    // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n    else if (typeof arg === \"function\") {\n      dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);\n    }\n    // Dynamic CSS with css variables e.g.\n    // css`transform: translate(${props => props.x}, ${props => props.y});`\n    // compiled -> css(\"yak31e4\", { style: { \"--yakVarX\": props => props.x }, \"--yakVarY\": props => props.y }})\n    else if (typeof arg === \"object\" && \"style\" in arg) {\n      dynamicCssFunctions.push((props, _, style) => {\n        for (const key in arg.style) {\n          const value = arg.style[key];\n          if (typeof value === \"function\") {\n            // @ts-expect-error CSSProperties don't allow css variables\n            style[key] = String(\n              // The value for a css value can be a theme dependent function e.g.:\n              // const borderColor = (props: { theme: { mode: \"dark\" | \"light\" } }) => props.theme === \"dark\" ? \"black\" : \"white\";\n              // css`border-color: ${borderColor};`\n              // Therefore the value has to be extracted recursively\n              recursivePropExecution(props, value),\n            );\n          } else {\n            // @ts-expect-error CSSProperties don't allow css variables\n            style[key] = String(value);\n          }\n        }\n      });\n    }\n  }\n\n  // Non Dynamic CSS\n  // This is just an optimization for the common case where there are no dynamic css functions\n  if (dynamicCssFunctions.length === 0) {\n    return (_, classNames) => {\n      if (className) {\n        classNames.add(className);\n      }\n      return () => {};\n    };\n  }\n\n  return (props, classNames, allStyles) => {\n    if (className) {\n      classNames.add(className);\n    }\n    for (let i = 0; i < dynamicCssFunctions.length; i++) {\n      unwrapProps(props, dynamicCssFunctions[i], classNames, allStyles);\n    }\n  };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n  props: unknown,\n  fn: NestedRuntimeStyleProcessor,\n  classNames: Set<string>,\n  style: React.CSSProperties,\n) => {\n  let result = fn(props, classNames, style);\n  while (result) {\n    if (typeof result === \"function\") {\n      result = result(props, classNames, style);\n      continue;\n    } else if (typeof result === \"object\") {\n      if (\"className\" in result && result.className) {\n        classNames.add(result.className);\n      }\n      if (\"style\" in result && result.style) {\n        for (const key in result.style) {\n          // This is hard for typescript to infer\n          style[key as keyof React.CSSProperties] = result.style[\n            key as keyof React.CSSProperties\n          ] as any;\n        }\n      }\n    }\n    break;\n  }\n};\n\nconst recursivePropExecution = (props: unknown, fn: (props: unknown) => any): string | number => {\n  const result = fn(props);\n  if (typeof result === \"function\") {\n    return recursivePropExecution(props, result);\n  }\n  if (process.env.NODE_ENV === \"development\") {\n    if (typeof result !== \"string\" && typeof result !== \"number\" && !(result instanceof String)) {\n      throw new Error(\n        `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(\n          result,\n        )}\\n\\nDynamic CSS function: ${fn.toString()}\\n`,\n      );\n    }\n  }\n  return result;\n};\n","import { ComponentStyles, css } from \"./cssLiteral.js\";\nimport { RuntimeStyleProcessor } from \"./publicStyledApi.js\";\n\n/**\n * Allows to use atomic CSS classes in a styled or css block\n *\n * @usage\n *\n * ```tsx\n * import { styled, atoms } from \"next-yak\";\n *\n * const Button = styled.button<{ $primary?: boolean }>`\n *  ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n *  ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n */\nexport const atoms = <T,>(\n  ...atoms: (string | RuntimeStyleProcessor<T> | false)[]\n): ComponentStyles<T> => {\n  const staticClasses: string[] = [];\n  const dynamicFunctions: RuntimeStyleProcessor<T>[] = [];\n\n  for (const atom of atoms) {\n    if (typeof atom === \"string\") {\n      staticClasses.push(...atom.split(\" \"));\n    } else if (typeof atom === \"function\") {\n      dynamicFunctions.push(atom);\n    }\n  }\n\n  const runtimeFunctions: RuntimeStyleProcessor<T>[] =\n    staticClasses.length > 0\n      ? [\n          (_, classNames) => {\n            staticClasses.forEach((cls) => classNames.add(cls));\n          },\n          ...dynamicFunctions,\n        ]\n      : dynamicFunctions;\n\n  // @ts-expect-error the internal implementation of css is not typed\n  return css(...runtimeFunctions);\n};\n","import type { css as cssInternal, NestedRuntimeStyleProcessor } from \"../cssLiteral.js\";\n\nexport type { ComponentStyles, CSSInterpolation } from \"../cssLiteral.js\";\n\n/**\n * Allows to use CSS styles in a styled or css block\n *\n * e.g.\n *\n * ```tsx\n * const Component = styled.div`\n *  color: black;\n *  ${({$active}) => $active && css`color: red;`}\n * `;\n * ```\n */\nexport const css: typeof cssInternal = (styles: TemplateStringsArray, ...args: unknown[]) => {\n  // When called in yak files as a template tag (without SWC transformation),\n  // return { __yak: rawCss } so the cross-file resolver can\n  // extract the mixin value from evaluated .yak files.\n  if (Array.isArray(styles) && \"raw\" in styles) {\n    let rawCss = styles[0];\n    for (let i = 0; i < args.length; i++) {\n      const interpolation = args[i];\n      rawCss +=\n        interpolation && typeof interpolation === \"object\" && \"__yak\" in interpolation\n          ? (interpolation as { __yak: string }).__yak\n          : String(interpolation);\n      rawCss += styles[i + 1];\n    }\n    return { __yak: rawCss } as any;\n  }\n\n  const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];\n  for (const arg of args as Array<string | Function | object>) {\n    // Dynamic CSS e.g.\n    // css`${props => props.active && css`color: red;`}`\n    // compiled -> css((props: { active: boolean }) => props.active && css(\"yak31e4\"))\n    if (typeof arg === \"function\") {\n      dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);\n    }\n  }\n  if (dynamicCssFunctions.length === 0) {\n    return {\n      className: \"\",\n      style: undefined,\n    };\n  }\n  return ((props: unknown) => {\n    for (let i = 0; i < dynamicCssFunctions.length; i++) {\n      // run the dynamic expressions and ignore the return value\n      // the execution is important to ensure that the user code is executed\n      // the same way as in the real runtime\n      executeDynamicExpressionRecursively(props, dynamicCssFunctions[i]);\n    }\n    return {\n      className: \"\",\n      style: undefined,\n    };\n  }) as any;\n};\n\nfunction executeDynamicExpressionRecursively(\n  props: unknown,\n  expression: NestedRuntimeStyleProcessor,\n) {\n  const classNames = new Set<string>();\n  const style = {};\n  let result = expression(props, classNames, style);\n  while (typeof result === \"function\") {\n    result = result(props, classNames, style);\n  }\n  return result;\n}\n","import type { keyframes as keyframesInternal } from \"../keyframes.js\";\n\n/**\n * Allows to use CSS keyframe animations in a styled or css block\n *\n * @usage\n *\n * ```tsx\n * import { styled, keyframes } from \"next-yak\";\n *\n * const rotate = keyframes`\n *  from {\n *   transform: rotate(0deg);\n *  }\n *  to {\n *   transform: rotate(360deg);\n *  }\n * `;\n *\n * const Spinner = styled.div`\n *   animation: ${rotate} 1s linear infinite;\n * `;\n * ```\n */\nexport const keyframes: typeof keyframesInternal = (_styles, ..._dynamic) => {\n  // the keyframes function is a no-op in the mock\n  // as it has no dynamic runtime behavior but only css\n  return \"\";\n};\n","import { css, CSSInterpolation, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\nimport type {\n  Attrs,\n  AttrsMerged,\n  Styled,\n  YakComponent,\n  AttrsFunction,\n  StyledFn,\n  HtmlTags,\n  Substitute,\n  StyledLiteral,\n  RuntimeStyleProcessor,\n} from \"./publicStyledApi.js\";\n\n// the following export is not relative as \"next-yak/context\"\n// links to one file for react server components and\n// to another file for classic react components\nimport { useTheme } from \"next-yak/context\";\nimport type { YakTheme } from \"./context/index.tsx\";\n\n/**\n * This Symbol is a fake theme which was used instead of the real one from the context\n * to speed up rendering\n */\nconst noTheme: YakTheme = {};\n\n//\n// The `styled()` API without `styled.` syntax\n//\n// The API design is inspired by styled-components:\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx\n// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts\n//\nconst styledFactory: StyledFn = (Component) =>\n  Object.assign(yakStyled(Component), {\n    attrs: (attrs: Attrs<any>) => yakStyled(Component, attrs),\n  });\n\n/**\n * The `styled` method works perfectly on all of your own or any third-party component,\n * as long as they attach the passed className prop to a DOM element.\n *\n * @usage\n *\n * ```tsx\n * const StyledLink = styled(Link)`\n *  color: #BF4F74;\n *  font-weight: bold;\n * `;\n * ```\n */\nexport const styled = styledFactory as Styled;\n\nconst yakStyled: StyledInternal = (Component, attrs) => {\n  const isYakComponent = typeof Component !== \"string\" && yakComponentSymbol in Component;\n\n  // if the component that is wrapped is a yak component, we can extract it to render the underlying component directly\n  // and we can also extract the attrs function and the dynamic style function to merge it with the current attrs function (or dynamic style function)\n  // so that the sequence of the attrs functions is preserved\n  const [parentYakComponent, parentAttrsFn, parentRuntimeStylesFn] = isYakComponent\n    ? (Component[yakComponentSymbol] as [\n        YakComponent<unknown>,\n        ExtractAttrsFunction<typeof attrs>,\n        RuntimeStyleProcessor<unknown>,\n      ])\n    : [];\n\n  const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n  return (styles, ...values) => {\n    // combine all interpolated logic into a single function\n    // e.g. styled.button`color: ${props => props.color}; margin: ${props => props.margin};`\n    const runtimeStylesFn = css(\n      styles,\n      ...(values as CSSInterpolation<unknown>[]),\n    ) as RuntimeStyleProcessor<unknown>;\n    const runtimeStyleProcessor = buildRuntimeStylesProcessor(\n      runtimeStylesFn,\n      parentRuntimeStylesFn,\n    );\n    const Yak: React.FunctionComponent = (props) => {\n      // if the css component does not require arguments\n      // it can be called without arguments and we skip calling useTheme()\n      //\n      // `attrsFn || getRuntimeStyles.length` is NOT against the rule of hooks as\n      // getRuntimeStyles and attrsFn are constants defined outside of the component\n      //\n      // for example\n      //\n      // const Button = styled.button`color: red;`\n      //       ^ does not need to have access to theme, so we skip calling useTheme()\n      //\n      // const Button = styled.button`${({ theme }) => css`color: ${theme.color};`}`\n      //       ^ must be have access to theme, so we call useTheme()\n      const theme = mergedAttrsFn || runtimeStylesFn.length ? useTheme() : noTheme;\n\n      // The first components which is not wrapped in a yak component will execute all attrs functions\n      // starting from the innermost yak component to the outermost yak component (itself)\n      const combinedProps =\n        \"$__attrs\" in props\n          ? ({\n              theme,\n              ...props,\n            } as {\n              theme: YakTheme;\n              className?: string;\n              style?: React.CSSProperties;\n            })\n          : // overwrite and merge the current props with the processed attrs\n            combineProps(\n              {\n                theme,\n                ...(props as {\n                  className?: string;\n                  style?: React.CSSProperties;\n                }),\n                // mark the props as processed\n                $__attrs: true,\n              },\n              mergedAttrsFn?.({ theme, ...(props as any) }),\n            );\n\n      const classNames = new Set<string>(\n        \"className\" in combinedProps ? combinedProps.className?.split(\" \") : [],\n      );\n      const styles = {\n        ...(\"style\" in combinedProps ? combinedProps.style : {}),\n      };\n\n      // execute all functions inside the style literal if not already executed\n      // e.g. styled.button`color: ${props => props.color};`\n      if (!(\"$__runtimeStylesProcessed\" in combinedProps)) {\n        runtimeStyleProcessor(combinedProps, classNames, styles);\n        // @ts-expect-error this is not typed correctly\n        combinedProps.$__runtimeStylesProcessed = true;\n      }\n\n      combinedProps.className = Array.from(classNames).join(\" \") || undefined;\n      combinedProps.style = styles;\n\n      // delete the yak theme from the props\n      // this must happen after the runtimeStyles are calculated\n      // prevents passing the theme prop to the DOM element of a styled component\n      const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } = combinedProps;\n      const propsBeforeFiltering =\n        themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;\n\n      // remove all props that start with a $ sign for string components e.g. \"button\" or \"div\"\n      // so that they are not passed to the DOM element\n      const filteredProps = !isYakComponent\n        ? removeNonDomProperties(propsBeforeFiltering)\n        : propsBeforeFiltering;\n\n      return parentYakComponent ? (\n        // if the styled(Component) syntax is used and the component is a yak component\n        // we can call the yak function directly without running through react createElement\n        parentYakComponent(filteredProps)\n      ) : (\n        // if the final component is a string component e.g. styled(\"div\") or a custom non yak fn e.g. styled(MyComponent)\n        <Component\n          {...(filteredProps as React.ComponentProps<Exclude<typeof Component, string>>)}\n        />\n      );\n    };\n\n    // Assign the yakComponentSymbol directly without forwardRef\n    return Object.assign(Yak, {\n      [yakComponentSymbol]: [Yak, mergedAttrsFn, runtimeStyleProcessor] as [\n        unknown,\n        unknown,\n        unknown,\n      ],\n    });\n  };\n};\n\n/**\n * Remove all entries that start with a $ sign\n *\n * This allows to have props that are used for internal styling purposes\n * but are not be passed to the DOM element\n */\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: T): T => {\n  const result = {} as T;\n  for (const key in obj) {\n    if (!key.startsWith(\"$\") && obj[key] !== undefined) {\n      result[key] = obj[key];\n    }\n  }\n  return result;\n};\n\n// util function to merge class names, as they are concatenated with a space\nconst mergeClassNames = (a?: string, b?: string) => {\n  if (!a && !b) return undefined;\n  if (!a) return b;\n  if (!b) return a;\n  return a + \" \" + b;\n};\n\n/**\n * merge props and processed props (including class names and styles)\n * e.g.:\\\n * `{ className: \"a\", foo: 1 }` and `{ className: \"b\", bar: 2 }` \\\n * => `{ className: \"a b\", foo: 1, bar: 2 }`\n */\nconst combineProps = <\n  T extends {\n    className?: string;\n    style?: React.CSSProperties;\n  },\n  TOther extends\n    | {\n        className?: string;\n        style?: React.CSSProperties;\n      }\n    | null\n    | undefined,\n>(\n  props: T,\n  newProps: TOther,\n) =>\n  newProps\n    ? (props.className === newProps.className || !newProps.className) &&\n      (props.style === newProps.style || !newProps.style)\n      ? // shortcut if no style and class merging is necessary\n        {\n          ...props,\n          ...newProps,\n        }\n      : // merge class names and styles\n        {\n          ...props,\n          ...newProps,\n          className: mergeClassNames(props.className, newProps.className),\n          style: { ...props.style, ...newProps.style },\n        }\n    : // if no new props are provided, no merging is necessary\n      props;\n\n/**\n * Merges the attrs function of the current component with the attrs function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut\n * but as this is only used internally, we can ignore and simplify this case\n * @param attrs The attrs object or function of the current component (if any)\n * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)\n * @returns A function that receives the props and returns the transformed props\n */\nconst buildRuntimeAttrsProcessor = <\n  T,\n  TAttrsIn extends object,\n  TAttrsOut extends AttrsMerged<T, TAttrsIn>,\n>(\n  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n  parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,\n): AttrsFunction<T, TAttrsIn, TAttrsOut> | undefined => {\n  const ownAttrsFn = attrs && (typeof attrs === \"function\" ? attrs : () => attrs);\n\n  if (ownAttrsFn && parentAttrsFn) {\n    return (props) => {\n      const parentProps = parentAttrsFn(props);\n\n      // overwrite and merge the parent props with the props received from the attrs function\n      // after they went through the parent attrs function.\n      //\n      // This makes sure the linearity of the attrs functions is preserved and all attrs function receive\n      // the whole props object calculated from the previous attrs functions\n      return combineProps(parentProps, ownAttrsFn(combineProps(props, parentProps)));\n    };\n  }\n\n  return ownAttrsFn || parentAttrsFn;\n};\n\n/**\n * Merges the runtime style function of the current component with the runtime style function of the parent component\n * in order to preserve the sequence of the attrs functions.\n * @param runtimeStylesFn The current runtime styles function\n * @param parentRuntimeStylesFn The parent runtime styles function\n * @returns The merged runtime styles function\n */\nconst buildRuntimeStylesProcessor = <T,>(\n  runtimeStylesFn: RuntimeStyleProcessor<T>,\n  parentRuntimeStylesFn?: RuntimeStyleProcessor<T>,\n) => {\n  if (runtimeStylesFn && parentRuntimeStylesFn) {\n    const combined: RuntimeStyleProcessor<T> = (props, classNames, style) => {\n      parentRuntimeStylesFn(props, classNames, style);\n      runtimeStylesFn(props, classNames, style);\n    };\n    return combined;\n  }\n  return runtimeStylesFn || parentRuntimeStylesFn;\n};\n\n/**\n * Internal function where attrs are passed to be processed\n */\nexport type StyledInternal = <\n  T extends object,\n  TAttrsIn extends object = {},\n  TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n  Component: React.FunctionComponent<T> | YakComponent<T> | HtmlTags | string,\n  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => StyledLiteral<Substitute<T, TAttrsIn>>;\n\n/**\n * Utility type to extract the AttrsFunction from the Attrs type\n */\nexport type ExtractAttrsFunction<T> = T extends (p: any) => any ? T : never;\n","import React from \"react\";\nimport { styled as StyledFactory } from \"../styled.js\";\n\nexport const styled = new Proxy(StyledFactory, {\n  get(target, TagName: keyof React.JSX.IntrinsicElements) {\n    return target(TagName);\n  },\n}) as typeof StyledFactory;\n"],"mappings":"6lBAGA,MAAa,EAAqB,OAAO,MAAM,CAgE/C,SAAgBA,EAAY,GAAG,EAAiD,CAG9E,IAAI,EACE,EAAqD,EAAE,CAC7D,IAAK,IAAM,KAAO,EAIZ,OAAO,GAAQ,SACjB,EAAY,EAKL,OAAO,GAAQ,WACtB,EAAoB,KAAK,EAA8C,CAKhE,OAAO,GAAQ,UAAY,UAAW,GAC7C,EAAoB,MAAM,EAAO,EAAG,IAAU,CAC5C,IAAK,IAAM,KAAO,EAAI,MAAO,CAC3B,IAAM,EAAQ,EAAI,MAAM,GACpB,OAAO,GAAU,WAEnB,EAAM,GAAO,OAKX,EAAuB,EAAO,EAAM,CACrC,CAGD,EAAM,GAAO,OAAO,EAAM,GAG9B,CAeN,OATI,EAAoB,SAAW,GACzB,EAAG,KACL,GACF,EAAW,IAAI,EAAU,KAEd,KAIT,EAAO,EAAY,IAAc,CACnC,GACF,EAAW,IAAI,EAAU,CAE3B,IAAK,IAAI,EAAI,EAAG,EAAI,EAAoB,OAAQ,IAC9C,EAAY,EAAO,EAAoB,GAAI,EAAY,EAAU,EAMvE,MAAM,GACJ,EACA,EACA,EACA,IACG,CACH,IAAI,EAAS,EAAG,EAAO,EAAY,EAAM,CACzC,KAAO,GAAQ,CACb,GAAI,OAAO,GAAW,WAAY,CAChC,EAAS,EAAO,EAAO,EAAY,EAAM,CACzC,iBACS,OAAO,GAAW,WACvB,cAAe,GAAU,EAAO,WAClC,EAAW,IAAI,EAAO,UAAU,CAE9B,UAAW,GAAU,EAAO,OAC9B,IAAK,IAAM,KAAO,EAAO,MAEvB,EAAM,GAAoC,EAAO,MAC/C,GAKR,QAIE,GAA0B,EAAgB,IAAiD,CAC/F,IAAM,EAAS,EAAG,EAAM,CACxB,GAAI,OAAO,GAAW,WACpB,OAAO,EAAuB,EAAO,EAAO,CAE9C,GAAI,QAAQ,IAAI,WAAa,eACvB,OAAO,GAAW,UAAY,OAAO,GAAW,UAAY,EAAE,aAAkB,QAClF,MAAU,MACR,qEAAqE,KAAK,UACxE,EACD,CAAC,4BAA4B,EAAG,UAAU,CAAC,IAC7C,CAGL,OAAO,GC7JI,GACX,GAAG,IACoB,CACvB,IAAM,EAA0B,EAAE,CAC5B,EAA+C,EAAE,CAEvD,IAAK,IAAM,KAAQ,EACb,OAAO,GAAS,SAClB,EAAc,KAAK,GAAG,EAAK,MAAM,IAAI,CAAC,CAC7B,OAAO,GAAS,YACzB,EAAiB,KAAK,EAAK,CAe/B,OAAOC,EAAI,GAVT,EAAc,OAAS,EACnB,EACG,EAAG,IAAe,CACjB,EAAc,QAAS,GAAQ,EAAW,IAAI,EAAI,CAAC,EAErD,GAAG,EACJ,CACD,EAGyB,EC1BpB,GAA2B,EAA8B,GAAG,IAAoB,CAI3F,GAAI,MAAM,QAAQ,EAAO,EAAI,QAAS,EAAQ,CAC5C,IAAI,EAAS,EAAO,GACpB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAK,OAAQ,IAAK,CACpC,IAAM,EAAgB,EAAK,GAC3B,GACE,GAAiB,OAAO,GAAkB,UAAY,UAAW,EAC5D,EAAoC,MACrC,OAAO,EAAc,CAC3B,GAAU,EAAO,EAAI,GAEvB,MAAO,CAAE,MAAO,EAAQ,CAG1B,IAAM,EAAqD,EAAE,CAC7D,IAAK,IAAM,KAAO,EAIZ,OAAO,GAAQ,YACjB,EAAoB,KAAK,EAA8C,CAS3E,OANI,EAAoB,SAAW,EAC1B,CACL,UAAW,GACX,MAAO,IAAA,GACR,EAEM,GAAmB,CAC1B,IAAK,IAAI,EAAI,EAAG,EAAI,EAAoB,OAAQ,IAI9C,EAAoC,EAAO,EAAoB,GAAG,CAEpE,MAAO,CACL,UAAW,GACX,MAAO,IAAA,GACR,IAIL,SAAS,EACP,EACA,EACA,CACA,IAAM,EAAa,IAAI,IACjB,EAAQ,EAAE,CACZ,EAAS,EAAW,EAAO,EAAY,EAAM,CACjD,KAAO,OAAO,GAAW,YACvB,EAAS,EAAO,EAAO,EAAY,EAAM,CAE3C,OAAO,EChDT,MAAa,GAAuC,EAAS,GAAG,IAGvD,GCFH,EAAoB,EAAE,CA2BfC,EAlBoB,GAC/B,OAAO,OAAO,EAAU,EAAU,CAAE,CAClC,MAAQ,GAAsB,EAAU,EAAW,EAAM,CAC1D,CAAC,CAiBE,GAA6B,EAAW,IAAU,CACtD,IAAM,EAAiB,OAAO,GAAc,UAAY,KAAsB,EAKxE,CAAC,EAAoB,EAAe,GAAyB,EAC9D,EAAU,GAKX,EAAE,CAEA,EAAgB,EAA2B,EAAO,EAAc,CAEtE,OAAQ,EAAQ,GAAG,IAAW,CAG5B,IAAM,EAAkBC,EACtB,EACA,GAAI,EACL,CACK,EAAwB,EAC5B,EACA,EACD,CACK,EAAgC,GAAU,CAc9C,IAAM,EAAQ,GAAiB,EAAgB,QAAA,EAAA,EAAA,WAAmB,CAAG,EAI/D,EACJ,aAAc,EACT,CACC,QACA,GAAG,EACJ,CAMD,EACE,CACE,QACA,GAAI,EAKJ,SAAU,GACX,CACD,IAAgB,CAAE,QAAO,GAAI,EAAe,CAAC,CAC9C,CAED,EAAa,IAAI,IACrB,cAAe,EAAgB,EAAc,WAAW,MAAM,IAAI,CAAG,EAAE,CACxE,CACK,EAAS,CACb,GAAI,UAAW,EAAgB,EAAc,MAAQ,EAAE,CACxD,CAIK,8BAA+B,IACnC,EAAsB,EAAe,EAAY,EAAO,CAExD,EAAc,0BAA4B,IAG5C,EAAc,UAAY,MAAM,KAAK,EAAW,CAAC,KAAK,IAAI,EAAI,IAAA,GAC9D,EAAc,MAAQ,EAKtB,GAAM,CAAE,MAAO,EAAgB,GAAG,GAA8B,EAC1D,EACJ,IAAmB,EAAQ,EAA4B,EAInD,EAAiB,EAEnB,EADA,EAAuB,EAAqB,CAGhD,OAAO,EAGL,EAAmB,EAAc,CAGjC,EAAA,QAAA,cAAC,EACM,EACL,EAKN,OAAO,OAAO,OAAO,EAAK,EACvB,GAAqB,CAAC,EAAK,EAAe,EAAsB,CAKlE,CAAC,GAUA,EAA6D,GAAc,CAC/E,IAAM,EAAS,EAAE,CACjB,IAAK,IAAM,KAAO,EACZ,CAAC,EAAI,WAAW,IAAI,EAAI,EAAI,KAAS,IAAA,KACvC,EAAO,GAAO,EAAI,IAGtB,OAAO,GAIH,GAAmB,EAAY,IAAe,CAC9C,MAAC,GAAK,CAAC,GAGX,OAFK,EACA,EACE,EAAI,IAAM,EADF,EADA,GAWX,GAaJ,EACA,IAEA,GACK,EAAM,YAAc,EAAS,WAAa,CAAC,EAAS,aACpD,EAAM,QAAU,EAAS,OAAS,CAAC,EAAS,OAE3C,CACE,GAAG,EACH,GAAG,EACJ,CAED,CACE,GAAG,EACH,GAAG,EACH,UAAW,EAAgB,EAAM,UAAW,EAAS,UAAU,CAC/D,MAAO,CAAE,GAAG,EAAM,MAAO,GAAG,EAAS,MAAO,CAC7C,CAEH,EAWA,GAKJ,EACA,IACsD,CACtD,IAAM,EAAa,IAAU,OAAO,GAAU,WAAa,MAAc,GAezE,OAbI,GAAc,EACR,GAAU,CAChB,IAAM,EAAc,EAAc,EAAM,CAOxC,OAAO,EAAa,EAAa,EAAW,EAAa,EAAO,EAAY,CAAC,CAAC,EAI3E,GAAc,GAUjB,GACJ,EACA,IAEI,GAAmB,GACuB,EAAO,EAAY,IAAU,CACvE,EAAsB,EAAO,EAAY,EAAM,CAC/C,EAAgB,EAAO,EAAY,EAAM,EAItC,GAAmB,ECnSf,EAAS,IAAI,MAAMC,EAAe,CAC7C,IAAI,EAAQ,EAA4C,CACtD,OAAO,EAAO,EAAQ,EAEzB,CAAC"}

package/dist/index.d.cts

@@ -1,7 +1,7 @@
-import React, { ReactNode } from 'react';
+import React$1, { ReactNode } from "react";
 
-interface YakTheme {
-}
+//#region runtime/context/index.d.ts
+interface YakTheme {}
 /**
  * Returns the current yak theme context
  *
@@ -13,20 +13,24 @@ declare const useTheme: () => YakTheme;
  *
  * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md
  */
-declare const YakThemeProvider: ({ children, theme, }: {
-    children: ReactNode;
-    theme?: YakTheme;
-}) => React.JSX.Element;
-
+declare const YakThemeProvider: ({
+  children,
+  theme
+}: {
+  children: ReactNode;
+  theme?: YakTheme;
+}) => React$1.JSX.Element;
+//#endregion
+//#region runtime/cssLiteral.d.ts
 declare const yakComponentSymbol: unique symbol;
 type ComponentStyles<TProps> = (props: TProps) => {
-    className: string;
-    style?: {
-        [key: string]: string;
-    };
+  className: string;
+  style?: {
+    [key: string]: string;
+  };
 };
 type CSSInterpolation<TProps> = string | number | undefined | null | false | ComponentStyles<TProps> | {
-    [yakComponentSymbol]: any;
+  [yakComponentSymbol]: any;
 } | ((props: TProps) => CSSInterpolation<TProps>);
 /**
  * css() runtime factory of css``
@@ -45,69 +49,67 @@ type CSSInterpolation<TProps> = string | number | undefined | null | false | Com
  * and operate directly on the classNames and style objects.
  */
 declare function css$1<TProps>(styles: TemplateStringsArray, ...values: CSSInterpolation<NoInfer<TProps> & {
-    theme: YakTheme;
+  theme: YakTheme;
 }>[]): ComponentStyles<TProps>;
-
+//#endregion
+//#region runtime/publicStyledApi.d.ts
 /**
  * Main styled interface that combines HTML tag mappings with the styled function.
  * This is the primary entry point for creating styled components.
  */
-interface Styled extends MappedHtmlTags, StyledFn {
-}
+interface Styled extends MappedHtmlTags, StyledFn {}
 /**
  * Function interface for creating styled components from any component or HTML tag.
  * Supports React components, HTML tags, and custom web components.
  */
 interface StyledFn {
-    <TProps extends object = React.DOMAttributes<Element> & React.RefAttributes<Element>>(Component: HtmlTags | React.FunctionComponent<TProps> | CustomWebComponentTag): LiteralWithAttrs<TProps>;
+  <TProps extends object = React$1.DOMAttributes<Element> & React$1.RefAttributes<Element>>(Component: HtmlTags | React$1.FunctionComponent<TProps> | CustomWebComponentTag): LiteralWithAttrs<TProps>;
 }
 /**
  * A yak component with a special symbol that allows component targeting
  * and proper attrs function handling.
  * @example styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`
  */
-interface YakComponent<T> extends React.FunctionComponent<T> {
-    [yakComponentSymbol]: [unknown, unknown, unknown];
+interface YakComponent<T> extends React$1.FunctionComponent<T> {
+  [yakComponentSymbol]: [unknown, unknown, unknown];
 }
 /**
  * Styled component with attrs method for adding default props.
  * Extends StyledLiteral with the ability to specify default attributes.
  */
 interface LiteralWithAttrs<T extends object> extends StyledLiteral<T> {
-    attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>>(attrs: Attrs<T, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<T, TAttrsIn>>;
+  attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>>(attrs: Attrs<T, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<T, TAttrsIn>>;
 }
 /**
  * Template literal function for defining CSS styles with interpolation support.
  * Accepts CSS template strings and interpolated values with proper typing.
  */
 interface StyledLiteral<T> {
-    <TCSSProps>(styles: TemplateStringsArray, ...values: Array<CSSInterpolation<T & NoInfer<TCSSProps> & {
-        theme: YakTheme;
-    }>>): YakComponent<TCSSProps & T>;
+  <TCSSProps>(styles: TemplateStringsArray, ...values: Array<CSSInterpolation<T & NoInfer<TCSSProps> & {
+    theme: YakTheme;
+  }>>): YakComponent<TCSSProps & T>;
 }
 /**
  * Function variant of attrs that receives current props and returns additional props.
  * Allows for dynamic prop generation based on component state.
  */
 interface AttrsFunction<TBaseProps, TIn extends object = {}, TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>> {
-    (p: Substitute<TBaseProps & {
-        theme: YakTheme;
-    }, TIn>): Partial<TOut>;
+  (p: Substitute<TBaseProps & {
+    theme: YakTheme;
+  }, TIn>): Partial<TOut>;
 }
 /**
  * Merges provided props with initial props, making specified props optional.
  * Includes theme support for styled components.
  */
 type AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<TBaseProps & {
-    theme?: YakTheme;
+  theme?: YakTheme;
 }, TIn>;
 /**
  * Maps all HTML tag names to their corresponding styled component types with attributes support.
  * Provides typed access to all standard HTML elements through the styled interface.
  */
-type MappedHtmlTags = {
-    [Tag in HtmlTags]: LiteralWithAttrs<React.JSX.IntrinsicElements[Tag]>;
-};
+type MappedHtmlTags = { [Tag in HtmlTags]: LiteralWithAttrs<React$1.JSX.IntrinsicElements[Tag]> };
 /**
  * The attrs function allows adding additional props to a styled component.
  * Props can be specified as an object or as a function that receives current props.
@@ -122,7 +124,7 @@ type Substitute<A extends object, B extends object> = FastOmit<A, keyof B> & B;
  * Union type of all valid HTML element tag names.
  * Derived from React's JSX intrinsic elements.
  */
-type HtmlTags = keyof React.JSX.IntrinsicElements;
+type HtmlTags = keyof React$1.JSX.IntrinsicElements;
 /**
  * Custom web component tag pattern that must contain at least one hyphen.
  * Follows the web component naming convention.
@@ -132,20 +134,19 @@ type CustomWebComponentTag = `${string}-${string}`;
  * Utility type to efficiently remove properties from an object type.
  * More performant than the built-in Omit type for large object types.
  */
-type FastOmit<T extends object, U extends string | number | symbol> = {
-    [K in keyof T as K extends U ? never : K]: T[K];
-};
+type FastOmit<T extends object, U extends string | number | symbol> = { [K in keyof T as K extends U ? never : K]: T[K] };
 /**
  * Type of all functions that can be passed to manipulate styles
  */
-type RuntimeStyleProcessor<T> = (props: T, classNames: Set<string>, style: React.CSSProperties) => void;
+type RuntimeStyleProcessor<T> = (props: T, classNames: Set<string>, style: React$1.CSSProperties) => void;
 /**
  * Utility type to keep the generic API of a component while still being able to use it in a selector
  */
 type GenericYakComponentOf<T, P = {}> = T & YakComponent<P> & {
-    <G = {}>(props: P & G): React.ReactElement | null;
+  <G = {}>(props: P & G): React$1.ReactElement | null;
 };
-
+//#endregion
+//#region runtime/atoms.d.ts
 /**
  * Allows to use atomic CSS classes in a styled or css block
  *
@@ -161,7 +162,8 @@ type GenericYakComponentOf<T, P = {}> = T & YakComponent<P> & {
  * ```
  */
 declare const atoms: <T>(...atoms: (string | RuntimeStyleProcessor<T> | false)[]) => ComponentStyles<T>;
-
+//#endregion
+//#region runtime/mocks/cssLiteral.d.ts
 /**
  * Allows to use CSS styles in a styled or css block
  *
@@ -175,7 +177,8 @@ declare const atoms: <T>(...atoms: (string | RuntimeStyleProcessor<T> | false)[]
  * ```
  */
 declare const css: typeof css$1;
-
+//#endregion
+//#region runtime/keyframes.d.ts
 /**
  * Allows to use CSS keyframe animations in a styled or css block
  *
@@ -198,8 +201,9 @@ declare const css: typeof css$1;
  * `;
  * ```
  */
-declare const keyframes$1: <T extends (string | number | bigint)[] = never>(styles: TemplateStringsArray, ...dynamic: T) => string;
-
+declare const keyframes$1: <T extends (string | number | bigint)[] = never>(styles: TemplateStringsArray, ..._dynamic: T) => string;
+//#endregion
+//#region runtime/mocks/keyframes.d.ts
 /**
  * Allows to use CSS keyframe animations in a styled or css block
  *
@@ -223,7 +227,8 @@ declare const keyframes$1: <T extends (string | number | bigint)[] = never>(styl
  * ```
  */
 declare const keyframes: typeof keyframes$1;
-
+//#endregion
+//#region runtime/styled.d.ts
 /**
  * The `styled` method works perfectly on all of your own or any third-party component,
  * as long as they attach the passed className prop to a DOM element.
@@ -238,7 +243,8 @@ declare const keyframes: typeof keyframes$1;
  * ```
  */
 declare const styled$1: Styled;
-
+//#endregion
+//#region runtime/mocks/styled.d.ts
 declare const styled: typeof styled$1;
-
-export { type GenericYakComponentOf, type YakComponent, type YakTheme, YakThemeProvider, atoms, css, keyframes, styled, useTheme };
+//#endregion
+export { type GenericYakComponentOf, type YakComponent, type YakTheme, YakThemeProvider, atoms, css, keyframes, styled, useTheme };