next-yak 2.4.0 → 3.0.1

package/dist/context/baseContext.d.cts

@@ -0,0 +1,3 @@
+declare function getYakThemeContext(): {};
+
+export { getYakThemeContext };

package/dist/context/baseContext.d.ts

@@ -0,0 +1,3 @@
+declare function getYakThemeContext(): {};
+
+export { getYakThemeContext };

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";var w=Object.create;var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var J=(t,e)=>{for(var s in e)m(t,s,{get:e[s],enumerable:!0})},C=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of M(e))!E.call(t,n)&&n!==s&&m(t,n,{get:()=>e[n],enumerable:!(r=v(e,n))||r.enumerable});return t};var X=(t,e,s)=>(s=t!=null?w(B(t)):{},C(e||!t||!t.__esModule?m(s,"default",{value:t,enumerable:!0}):s,t)),_=t=>C(m({},"__esModule",{value:!0}),t);var V={};J(V,{YakThemeProvider:()=>y.YakThemeProvider,atoms:()=>R,css:()=>k,keyframes:()=>O,styled:()=>b,useTheme:()=>y.useTheme});module.exports=_(V);var y=require("next-yak/context");function k(t,...e){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++)D(r,s[n]);return{className:"",style:void 0}}}function D(t,e){let s=e(t);for(;typeof s=="function";)s=s(t);return s}var c=Symbol("yak");function I(...t){let e=[],s=[],r={};for(let n of t)if(typeof n=="string")e.push(n);else if(typeof n=="function")s.push(n);else if(typeof n=="object"&&"style"in n)for(let o in n.style){let a=n.style[o];typeof a=="function"?s.push(T=>({style:{[o]:String(x(T,a))}})):r[o]=a}if(s.length===0){let n=e.join(" ");return()=>({className:n,style:r})}return n=>{let o=[...e],a={...r};for(let T=0;T<s.length;T++)H(n,s[T],o,a);return{className:o.join(" "),style:a}}}var H=(t,e,s,r)=>{let n=e(t);for(;n;){if(typeof n=="function"){n=n(t);continue}else if(typeof n=="object"&&("className"in n&&n.className&&s.push(n.className),"style"in n&&n.style))for(let o in n.style)r[o]=n.style[o];break}},x=(t,e)=>{let s=e(t);if(typeof s=="function")return x(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)}`);return s};var g=X(require("react"),1),N=require("next-yak/context"),K={},$=(t,e)=>Object.assign(g.default.forwardRef(t),{[c]:[t,e]}),L=t=>Object.assign(h(t),{attrs:e=>h(t,e)}),h=(t,e)=>{let s=typeof t!="string"&&c in t,[r,n]=s?t[c]:[],o=W(e,n);return(a,...T)=>{let d=I(a,...T);return $((p,A)=>{let l=o||d.length?(0,N.useTheme)():K,u="$__attrs"in p?{theme:l,...p}:f({theme:l,...p,$__attrs:!0},o?.({theme:l,...p})),S=d(u),{theme:Y,...j}=u,P=Y===l?j:u,i=s?P:U(P);return i.className=F(i.className,S.className),i.style="style"in i?{...i.style,...S.style}:S.style,r?r(i,A):(i.ref=A,g.default.createElement(t,{...i}))},o)}},b=new Proxy(L,{get(t,e){return t(e)}}),U=t=>{let e={};for(let s in t)!s.startsWith("$")&&t[s]!==void 0&&(e[s]=t[s]);return e},F=(t,e)=>{if(!(!t&&!e))return t?e?t+" "+e:t:e},f=(t,e)=>e?(t.className===e.className||!e.className)&&(t.style===e.style||!e.style)?{...t,...e}:{...t,...e,className:F(t.className,e.className),style:{...t.style||{},...e.style||{}}}:t,W=(t,e)=>{let s=t&&(typeof t=="function"?t:()=>t);return s&&e?r=>{let n=e(r);return f(n,s(f(r,n)))}:s||e};var O=(t,...e)=>"";var R=(...t)=>{let e=t.join(" ");return()=>({className:e})};0&&(module.exports={YakThemeProvider,atoms,css,keyframes,styled,useTheme});
+"use strict";var Y=Object.create;var m=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var J=(t,e)=>{for(var s in e)m(t,s,{get:e[s],enumerable:!0})},C=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of B(e))!v.call(t,n)&&n!==s&&m(t,n,{get:()=>e[n],enumerable:!(r=M(e,n))||r.enumerable});return t};var X=(t,e,s)=>(s=t!=null?Y(E(t)):{},C(e||!t||!t.__esModule?m(s,"default",{value:t,enumerable:!0}):s,t)),L=t=>C(m({},"__esModule",{value:!0}),t);var V={};J(V,{YakThemeProvider:()=>p.YakThemeProvider,atoms:()=>R,css:()=>I,keyframes:()=>O,styled:()=>b,useTheme:()=>p.useTheme});module.exports=L(V);var p=require("next-yak/context");var I=(t,...e)=>{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++)_(r,s[n]);return{className:"",style:void 0}}};function _(t,e){let s=e(t);for(;typeof s=="function";)s=s(t);return s}var y=Symbol("yak");function k(...t){let e=[],s=[],r={};for(let n of t)if(typeof n=="string")e.push(n);else if(typeof n=="function")s.push(n);else if(typeof n=="object"&&"style"in n)for(let o in n.style){let a=n.style[o];typeof a=="function"?s.push(T=>({style:{[o]:String(x(T,a))}})):r[o]=a}if(s.length===0){let n=e.join(" ");return()=>({className:n,style:r})}return n=>{let o=[...e],a={...r};for(let T=0;T<s.length;T++)D(n,s[T],o,a);return{className:o.join(" "),style:a}}}var D=(t,e,s,r)=>{let n=e(t);for(;n;){if(typeof n=="function"){n=n(t);continue}else if(typeof n=="object"&&("className"in n&&n.className&&s.push(n.className),"style"in n&&n.style))for(let o in n.style)r[o]=n.style[o];break}},x=(t,e)=>{let s=e(t);if(typeof s=="function")return x(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)}`);return s};var d=X(require("react"),1),h=require("next-yak/context"),H={},K=(t,e)=>Object.assign(d.default.forwardRef(t),{[y]:[t,e]}),$=t=>Object.assign(N(t),{attrs:e=>N(t,e)}),N=(t,e)=>{let s=typeof t!="string"&&y in t,[r,n]=s?t[y]:[],o=W(e,n);return(a,...T)=>{let A=k(a,...T);return K((c,g)=>{let l=o||A.length?(0,h.useTheme)():H,u="$__attrs"in c?{theme:l,...c}:f({theme:l,...c,$__attrs:!0},o?.({theme:l,...c})),S=A(u),{theme:j,...w}=u,P=j===l?w:u,i=s?P:U(P);return i.className=F(i.className,S.className),i.style="style"in i?{...i.style,...S.style}:S.style,r?r(i,g):(i.ref=g,d.default.createElement(t,{...i}))},o)}},b=new Proxy($,{get(t,e){return t(e)}}),U=t=>{let e={};for(let s in t)!s.startsWith("$")&&t[s]!==void 0&&(e[s]=t[s]);return e},F=(t,e)=>{if(!(!t&&!e))return t?e?t+" "+e:t:e},f=(t,e)=>e?(t.className===e.className||!e.className)&&(t.style===e.style||!e.style)?{...t,...e}:{...t,...e,className:F(t.className,e.className),style:{...t.style||{},...e.style||{}}}:t,W=(t,e)=>{let s=t&&(typeof t=="function"?t:()=>t);return s&&e?r=>{let n=e(r);return f(n,s(f(r,n)))}:s||e};var O=(t,...e)=>"";var R=(...t)=>{let e=t.join(" ");return()=>({className:e})};0&&(module.exports={YakThemeProvider,atoms,css,keyframes,styled,useTheme});
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../runtime/index.ts","../runtime/mocks/cssLiteral.ts","../runtime/cssLiteral.tsx","../runtime/styled.tsx","../runtime/mocks/keyframes.ts","../runtime/atoms.tsx"],"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 Babel 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 { css } from \"./mocks/cssLiteral.js\";\nexport { styled } from \"./mocks/styled.js\";\nexport { keyframes } from \"./mocks/keyframes.js\";\nexport { atoms } from \"./atoms.js\";\n","import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"../index.d.ts\";\nimport { yakComponentSymbol } from \"../cssLiteral.js\";\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n  className: string;\n  style?: {\n    [key: string]: string;\n  };\n};\n\nexport type StaticCSSProp = {\n  className: string;\n  style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n  | string\n  | number\n  | undefined\n  | null\n  | false\n  | ComponentStyles<TProps>\n  | StaticCSSProp\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\ntype PropsToClassNameFn = (props: unknown) =>\n  | {\n      className?: string;\n      style?: Record<string, string>;\n    }\n  | PropsToClassNameFn;\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 function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\nexport function css<TProps = {}>(\n  styles: TemplateStringsArray,\n  ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n  styles: TemplateStringsArray,\n  ...args: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): StaticCSSProp | ComponentStyles<TProps> {\n  const dynamicCssFunctions: PropsToClassNameFn[] = [];\n  for (const arg of args as Array<string | CSSFunction | CSSStyles<any>>) {\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 PropsToClassNameFn);\n    }\n  }\n  if (dynamicCssFunctions.length === 0) {\n    return {\n      className: \"\",\n      style: undefined,\n    };\n  }\n  return (<T>(props: T) => {\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 ComponentStyles<TProps>;\n}\n\nfunction executeDynamicExpressionRecursively(\n  props: unknown,\n  expression: PropsToClassNameFn,\n) {\n  let result = expression(props);\n  while (typeof result === \"function\") {\n    result = result(props);\n  }\n  return result;\n}\n","import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"./index.d.ts\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n  className: string;\n  style?: {\n    [key: string]: string;\n  };\n};\n\nexport type StaticCSSProp = {\n  className: string;\n  style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n  | string\n  | number\n  | undefined\n  | null\n  | false\n  | ComponentStyles<TProps>\n  | StaticCSSProp\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\ntype PropsToClassNameFn = (props: unknown) =>\n  | {\n      className?: string;\n      style?: Record<string, string>;\n    }\n  | PropsToClassNameFn;\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 */\nexport function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\nexport function css<TProps = {}>(\n  styles: TemplateStringsArray,\n  ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]\n): ComponentStyles<TProps>;\nexport function css<TProps>(\n  ...args: Array<any>\n): StaticCSSProp | ComponentStyles<TProps> {\n  const classNames: string[] = [];\n  const dynamicCssFunctions: PropsToClassNameFn[] = [];\n  const style: Record<string, string> = {};\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      classNames.push(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 PropsToClassNameFn);\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      for (const key in arg.style) {\n        const value = arg.style[key];\n        if (typeof value === \"function\") {\n          dynamicCssFunctions.push((props: unknown) => ({\n            style: {\n              [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            },\n          }));\n        } else {\n          style[key] = value;\n        }\n      }\n    }\n  }\n\n  // Non Dynamic CSS\n  if (dynamicCssFunctions.length === 0) {\n    const className = classNames.join(\" \");\n    return () => ({ className, style });\n  }\n\n  return (props: unknown) => {\n    const allClassNames: string[] = [...classNames];\n    const allStyles: Record<string, string> = { ...style };\n    for (let i = 0; i < dynamicCssFunctions.length; i++) {\n      unwrapProps(props, dynamicCssFunctions[i], allClassNames, allStyles);\n    }\n    return {\n      className: allClassNames.join(\" \"),\n      style: allStyles,\n    };\n  };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n  props: unknown,\n  fn: PropsToClassNameFn,\n  classNames: string[],\n  style: Record<string, string>,\n) => {\n  let result = fn(props);\n  while (result) {\n    if (typeof result === \"function\") {\n      result = result(props);\n      continue;\n    } else if (typeof result === \"object\") {\n      if (\"className\" in result && result.className) {\n        classNames.push(result.className);\n      }\n      if (\"style\" in result && result.style) {\n        for (const key in result.style) {\n          style[key] = result.style[key];\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      );\n    }\n  }\n  return result;\n};\n","import { ForwardRefRenderFunction } from \"react\";\nimport { CSSInterpolation, css, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\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/** Symbols */\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 * Hack to hide {[yakComponentSymbol]:[parentComponent, parentAttributeFunction]}\n * from the type definition and to deal with ExoticComponents\n */\nconst yakForwardRef: <\n  TProps,\n  TAttrsIn extends object,\n  TAttrsOut extends AttrsMerged<TProps, TAttrsIn>,\n>(\n  component: ForwardRefRenderFunction<any, TProps>,\n  attrsFn?: (props: any) => any,\n) => YakComponent<TProps, TAttrsIn, TAttrsOut> = (component, attrsFn) =>\n  Object.assign(React.forwardRef(component), {\n    [yakComponentSymbol]: [component, attrsFn],\n  }) as any;\n\n/**\n * Minimal type for a function component that works with next-yak\n */\ntype FunctionComponent<T> = (props: T, context?: any) => React.ReactNode;\n\n/**\n * All valid html tags\n */\ntype HtmlTags = keyof JSX.IntrinsicElements;\n\n/**\n * Return type of the provided props merged with the initial props\n * where the specified props are optional\n */\ntype AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<\n  TBaseProps & { theme: YakTheme },\n  TIn\n>;\n\n/**\n * The attrs function allows to add additional props in a function that receives\n * the current props as argument.\n */\ntype AttrsFunction<\n  TBaseProps,\n  TIn extends object,\n  TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = (p: Substitute<TBaseProps & { theme: YakTheme }, TIn>) => Partial<TOut>;\n\n/**\n * The attrs function allows to add additional props to a styled component.\n * The props can be specified as an object or as a function that receives the\n * current props as argument.\n */\ntype Attrs<\n  TBaseProps,\n  TIn extends object = {},\n  TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = Partial<TOut> | AttrsFunction<TBaseProps, TIn, TOut>;\n\n//\n// The `styled()` and `styled.` API\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 = <T,>(Component: HtmlTags | FunctionComponent<T>) =>\n  Object.assign(yakStyled(Component), {\n    attrs: <\n      TAttrsIn extends object = {},\n      TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n    >(\n      attrs: Attrs<T, TAttrsIn, TAttrsOut>,\n    ) => yakStyled<T, TAttrsIn, TAttrsOut>(Component, attrs),\n  });\n\n/**\n * A yak component has a special symbol attached to it that allows to\n * target the component from a child component and to correctly handle the attrs function (if any).\n * e.g. styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`\n */\ntype YakComponent<\n  T,\n  TAttrsIn extends object = {},\n  TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n> = FunctionComponent<T> & {\n  [yakComponentSymbol]: [\n    FunctionComponent<T>,\n    AttrsFunction<T, TAttrsIn, TAttrsOut>,\n  ];\n};\n\nconst yakStyled = <\n  T,\n  TAttrsIn extends object = {},\n  TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n  Component:\n    | FunctionComponent<T>\n    | YakComponent<T, TAttrsIn, TAttrsOut>\n    | HtmlTags,\n  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => {\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 to merge it with the current attrs function so that the sequence of\n  // the attrs functions is preserved\n  const [parentYakComponent, parentAttrsFn] = isYakComponent\n    ? Component[yakComponentSymbol]\n    : [];\n\n  const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n  return <TCSSProps extends object = {}>(\n    styles: TemplateStringsArray,\n    ...values: Array<\n      CSSInterpolation<T & NoInfer<TCSSProps> & { theme: YakTheme }>\n    >\n  ) => {\n    const getRuntimeStyles = css(styles, ...values);\n    const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {\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 || getRuntimeStyles.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          ? // if the props already contain the $__attrs key, we assume that the props have already been processed\n            // and skip processing the attrs again.\n            // e.g. const Child = styled(Parent)`color: red;`\n            // We process the attrs once in the child (with all attrs functions merged (including the one from the child))\n            // and in the subsequent call in the parent we skip processing the attrs again\n            {\n              theme,\n              ...props,\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 Substitute<\n                T & { theme: YakTheme },\n                TAttrsIn\n              >),\n            );\n      // execute all functions inside the style literal\n      // e.g. styled.button`color: ${props => props.color};`\n      const runtimeStyles = getRuntimeStyles(combinedProps as T & TCSSProps);\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 as { theme?: unknown };\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      // yak provides a className and style prop that needs to be merged with the\n      // user provided className and style prop\n      (filteredProps as { className?: string }).className = mergeClassNames(\n        (filteredProps as { className?: string }).className,\n        runtimeStyles.className,\n      );\n      (filteredProps as { style?: React.CSSProperties }).style =\n        \"style\" in filteredProps\n          ? {\n              ...(filteredProps as { style?: React.CSSProperties }).style,\n              ...runtimeStyles.style,\n            }\n          : runtimeStyles.style;\n      // if the styled(Component) syntax is used and the component is a yak component\n      // we can call the yak function directly to avoid an unnecessary wrapper with an additional\n      // forwardRef call\n      if (parentYakComponent) {\n        return parentYakComponent(filteredProps as T, ref);\n      }\n      (filteredProps as { ref?: unknown }).ref = ref;\n      return <Component {...(filteredProps as any)} />;\n    };\n    return yakForwardRef(yak, mergedAttrsFn);\n  };\n};\n\n/**\n * Type for the proxy object returned by `styled` that allows to\n * access all html tags as properties.\n */\ntype StyledLiteral<T> = <TCSSProps>(\n  styles: TemplateStringsArray,\n  ...values: Array<\n    CSSInterpolation<\n      T &\n        // don't allow inference from types in the tagged template literal\n        // additional benefit is that destruction is now typed and provides hints\n        NoInfer<TCSSProps> & { theme: YakTheme }\n    >\n  >\n) => YakComponent<TCSSProps & T>;\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 = new Proxy(\n  StyledFactory as typeof StyledFactory & {\n    [Tag in HtmlTags]: StyledLiteral<JSX.IntrinsicElements[Tag]> & {\n      attrs: <\n        TAttrsIn extends object = {},\n        TAttrsOut extends AttrsMerged<\n          JSX.IntrinsicElements[Tag],\n          TAttrsIn\n        > = AttrsMerged<JSX.IntrinsicElements[Tag], TAttrsIn>,\n      >(\n        attrs: Attrs<JSX.IntrinsicElements[Tag], TAttrsIn, TAttrsOut>,\n      ) => StyledLiteral<Substitute<JSX.IntrinsicElements[Tag], TAttrsIn>>;\n    };\n  },\n  {\n    get(target, TagName: keyof JSX.IntrinsicElements) {\n      return target(TagName);\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 stylingen purposes\n * but are not be passed to the DOM element\n */\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: 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// util type to remove properties from an object\ntype FastOmit<T extends object, U extends string | number | symbol> = {\n  [K in keyof T as K extends U ? never : K]: T[K];\n};\n\n// util type to merge two objects\n// if a property is present in both objects the property from B is used\nexport type Substitute<A extends object, B extends object> = FastOmit<\n  A,\n  keyof B\n> &\n  B;\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 * 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 = (\n  styles: TemplateStringsArray,\n  ...dynamic: never[]\n): string => {\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","/**\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 = (...atoms: string[]) => {\n  const className = atoms.join(\" \");\n  return () => ({ className });\n};\n"],"mappings":"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","names":["runtime_exports","__export","atoms","css","keyframes","styled","__toCommonJS","import_context","css","styles","args","dynamicCssFunctions","arg","props","i","executeDynamicExpressionRecursively","expression","result","yakComponentSymbol","css","args","classNames","dynamicCssFunctions","style","arg","key","value","props","recursivePropExecution","className","allClassNames","allStyles","i","unwrapProps","fn","result","import_react","import_context","noTheme","yakForwardRef","component","attrsFn","React","yakComponentSymbol","StyledFactory","Component","yakStyled","attrs","isYakComponent","parentYakComponent","parentAttrsFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","getRuntimeStyles","css","props","ref","theme","combinedProps","combineProps","runtimeStyles","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","mergeClassNames","styled","target","TagName","obj","result","key","a","b","newProps","ownAttrsFn","parentProps","keyframes","styles","dynamic","atoms","className"]}
+{"version":3,"sources":["../runtime/index.ts","../runtime/mocks/cssLiteral.ts","../runtime/cssLiteral.tsx","../runtime/styled.tsx","../runtime/mocks/keyframes.ts","../runtime/atoms.tsx"],"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 Babel 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 { css } from \"./mocks/cssLiteral.js\";\nexport { styled } from \"./mocks/styled.js\";\nexport { keyframes } from \"./mocks/keyframes.js\";\nexport { atoms } from \"./atoms.js\";\n","import type { css as cssInternal, PropsToClassNameFn } from \"../cssLiteral.js\";\n\nexport type { StaticCSSProp, 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  const dynamicCssFunctions: PropsToClassNameFn[] = [];\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 PropsToClassNameFn);\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: PropsToClassNameFn,\n) {\n  let result = expression(props);\n  while (typeof result === \"function\") {\n    result = result(props);\n  }\n  return result;\n}\n","import { CSSProperties } from \"react\";\nimport type { YakTheme } from \"./index.d.ts\";\n\nexport const yakComponentSymbol = Symbol(\"yak\");\n\ntype ComponentStyles<TProps> = (props: TProps) => {\n  className: string;\n  style?: {\n    [key: string]: string;\n  };\n};\n\nexport type StaticCSSProp = {\n  className: string;\n  style?: CSSProperties;\n};\n\nexport type CSSInterpolation<TProps> =\n  | string\n  | number\n  | undefined\n  | null\n  | false\n  | ComponentStyles<TProps>\n  | StaticCSSProp\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 PropsToClassNameFn = (props: unknown) =>\n  | {\n      className?: string;\n      style?: Record<string, string>;\n    }\n  | PropsToClassNameFn;\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 */\nexport function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;\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): StaticCSSProp | ComponentStyles<TProps> {\n  const classNames: string[] = [];\n  const dynamicCssFunctions: PropsToClassNameFn[] = [];\n  const style: Record<string, string> = {};\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      classNames.push(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 PropsToClassNameFn);\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      for (const key in arg.style) {\n        const value = arg.style[key];\n        if (typeof value === \"function\") {\n          dynamicCssFunctions.push((props: unknown) => ({\n            style: {\n              [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            },\n          }));\n        } else {\n          style[key] = value;\n        }\n      }\n    }\n  }\n\n  // Non Dynamic CSS\n  if (dynamicCssFunctions.length === 0) {\n    const className = classNames.join(\" \");\n    return () => ({ className, style });\n  }\n\n  return (props: unknown) => {\n    const allClassNames: string[] = [...classNames];\n    const allStyles: Record<string, string> = { ...style };\n    for (let i = 0; i < dynamicCssFunctions.length; i++) {\n      unwrapProps(props, dynamicCssFunctions[i], allClassNames, allStyles);\n    }\n    return {\n      className: allClassNames.join(\" \"),\n      style: allStyles,\n    };\n  };\n}\n\n// Dynamic CSS with runtime logic\nconst unwrapProps = (\n  props: unknown,\n  fn: PropsToClassNameFn,\n  classNames: string[],\n  style: Record<string, string>,\n) => {\n  let result = fn(props);\n  while (result) {\n    if (typeof result === \"function\") {\n      result = result(props);\n      continue;\n    } else if (typeof result === \"object\") {\n      if (\"className\" in result && result.className) {\n        classNames.push(result.className);\n      }\n      if (\"style\" in result && result.style) {\n        for (const key in result.style) {\n          style[key] = result.style[key];\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      );\n    }\n  }\n  return result;\n};\n","import { ForwardRefRenderFunction } from \"react\";\nimport { CSSInterpolation, css, yakComponentSymbol } from \"./cssLiteral.js\";\nimport React from \"react\";\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/** Symbols */\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 * Hack to hide {[yakComponentSymbol]:[parentComponent, parentAttributeFunction]}\n * from the type definition and to deal with ExoticComponents\n */\nconst yakForwardRef: <\n  TProps,\n  TAttrsIn extends object,\n  TAttrsOut extends AttrsMerged<TProps, TAttrsIn>,\n>(\n  component: ForwardRefRenderFunction<any, TProps>,\n  attrsFn?: (props: any) => any,\n) => YakComponent<TProps, TAttrsIn, TAttrsOut> = (component, attrsFn) =>\n  Object.assign(React.forwardRef(component as any), {\n    [yakComponentSymbol]: [component, attrsFn],\n  }) as any;\n\n/**\n * Minimal type for a function component that works with next-yak\n */\ntype FunctionComponent<T> = (\n  props: T,\n  context?: any,\n) => React.ReactNode | React.ReactElement;\n\n/**\n * All valid html tags\n */\ntype HtmlTags = keyof JSX.IntrinsicElements;\n\n/**\n * Return type of the provided props merged with the initial props\n * where the specified props are optional\n */\ntype AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<\n  TBaseProps & { theme: YakTheme },\n  TIn\n>;\n\n/**\n * The attrs function allows to add additional props in a function that receives\n * the current props as argument.\n */\ntype AttrsFunction<\n  TBaseProps,\n  TIn extends object,\n  TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = (p: Substitute<TBaseProps & { theme: YakTheme }, TIn>) => Partial<TOut>;\n\n/**\n * The attrs function allows to add additional props to a styled component.\n * The props can be specified as an object or as a function that receives the\n * current props as argument.\n */\ntype Attrs<\n  TBaseProps,\n  TIn extends object = {},\n  TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>,\n> = Partial<TOut> | AttrsFunction<TBaseProps, TIn, TOut>;\n\n//\n// The `styled()` and `styled.` API\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 = <T,>(Component: HtmlTags | FunctionComponent<T>) =>\n  Object.assign(yakStyled(Component), {\n    attrs: <\n      TAttrsIn extends object = {},\n      TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n    >(\n      attrs: Attrs<T, TAttrsIn, TAttrsOut>,\n    ) => yakStyled<T, TAttrsIn, TAttrsOut>(Component, attrs),\n  });\n\n/**\n * A yak component has a special symbol attached to it that allows to\n * target the component from a child component and to correctly handle the attrs function (if any).\n * e.g. styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`\n */\ntype YakComponent<\n  T,\n  TAttrsIn extends object = {},\n  TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n> = FunctionComponent<T> & {\n  [yakComponentSymbol]: [\n    FunctionComponent<T>,\n    AttrsFunction<T, TAttrsIn, TAttrsOut>,\n  ];\n};\n\nconst yakStyled = <\n  T,\n  TAttrsIn extends object = {},\n  TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,\n>(\n  Component:\n    | FunctionComponent<T>\n    | YakComponent<T, TAttrsIn, TAttrsOut>\n    | HtmlTags,\n  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,\n) => {\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 to merge it with the current attrs function so that the sequence of\n  // the attrs functions is preserved\n  const [parentYakComponent, parentAttrsFn] = isYakComponent\n    ? Component[yakComponentSymbol]\n    : [];\n\n  const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);\n\n  return <TCSSProps extends object = {}>(\n    styles: TemplateStringsArray,\n    ...values: Array<\n      CSSInterpolation<T & NoInfer<TCSSProps> & { theme: YakTheme }>\n    >\n  ) => {\n    const getRuntimeStyles = css(styles, ...(values as any));\n    const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {\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 || getRuntimeStyles.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          ? // if the props already contain the $__attrs key, we assume that the props have already been processed\n            // and skip processing the attrs again.\n            // e.g. const Child = styled(Parent)`color: red;`\n            // We process the attrs once in the child (with all attrs functions merged (including the one from the child))\n            // and in the subsequent call in the parent we skip processing the attrs again\n            {\n              theme,\n              ...props,\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 Substitute<\n                T & { theme: YakTheme },\n                TAttrsIn\n              >),\n            );\n      // execute all functions inside the style literal\n      // e.g. styled.button`color: ${props => props.color};`\n      const runtimeStyles = getRuntimeStyles(combinedProps as T & TCSSProps);\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 as { theme?: unknown };\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      // yak provides a className and style prop that needs to be merged with the\n      // user provided className and style prop\n      (filteredProps as { className?: string }).className = mergeClassNames(\n        (filteredProps as { className?: string }).className,\n        runtimeStyles.className,\n      );\n      (filteredProps as { style?: React.CSSProperties }).style =\n        \"style\" in filteredProps\n          ? {\n              ...(filteredProps as { style?: React.CSSProperties }).style,\n              ...runtimeStyles.style,\n            }\n          : runtimeStyles.style;\n      // if the styled(Component) syntax is used and the component is a yak component\n      // we can call the yak function directly to avoid an unnecessary wrapper with an additional\n      // forwardRef call\n      if (parentYakComponent) {\n        return parentYakComponent(filteredProps as T, ref);\n      }\n      (filteredProps as { ref?: unknown }).ref = ref;\n      return <Component {...(filteredProps as any)} />;\n    };\n    return yakForwardRef(yak, mergedAttrsFn);\n  };\n};\n\n/**\n * Type for the proxy object returned by `styled` that allows to\n * access all html tags as properties.\n */\ntype StyledLiteral<T> = <TCSSProps>(\n  styles: TemplateStringsArray,\n  ...values: Array<\n    CSSInterpolation<\n      T &\n        // don't allow inference from types in the tagged template literal\n        // additional benefit is that destruction is now typed and provides hints\n        NoInfer<TCSSProps> & { theme: YakTheme }\n    >\n  >\n) => YakComponent<TCSSProps & T>;\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 = new Proxy(\n  StyledFactory as typeof StyledFactory & {\n    [Tag in HtmlTags]: StyledLiteral<JSX.IntrinsicElements[Tag]> & {\n      attrs: <\n        TAttrsIn extends object = {},\n        TAttrsOut extends AttrsMerged<\n          JSX.IntrinsicElements[Tag],\n          TAttrsIn\n        > = AttrsMerged<JSX.IntrinsicElements[Tag], TAttrsIn>,\n      >(\n        attrs: Attrs<JSX.IntrinsicElements[Tag], TAttrsIn, TAttrsOut>,\n      ) => StyledLiteral<Substitute<JSX.IntrinsicElements[Tag], TAttrsIn>>;\n    };\n  },\n  {\n    get(target, TagName: keyof JSX.IntrinsicElements) {\n      return target(TagName);\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 stylingen purposes\n * but are not be passed to the DOM element\n */\nconst removeNonDomProperties = <T extends Record<string, unknown>>(obj: 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// util type to remove properties from an object\ntype FastOmit<T extends object, U extends string | number | symbol> = {\n  [K in keyof T as K extends U ? never : K]: T[K];\n};\n\n// util type to merge two objects\n// if a property is present in both objects the property from B is used\nexport type Substitute<A extends object, B extends object> = FastOmit<\n  A,\n  keyof B\n> &\n  B;\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","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","/**\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 = (...atoms: string[]) => {\n  const className = atoms.join(\" \");\n  return () => ({ className });\n};\n"],"mappings":"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","names":["runtime_exports","__export","atoms","css","keyframes","styled","__toCommonJS","import_context","css","styles","args","dynamicCssFunctions","arg","props","i","executeDynamicExpressionRecursively","expression","result","yakComponentSymbol","css","args","classNames","dynamicCssFunctions","style","arg","key","value","props","recursivePropExecution","className","allClassNames","allStyles","i","unwrapProps","fn","result","import_react","import_context","noTheme","yakForwardRef","component","attrsFn","React","yakComponentSymbol","StyledFactory","Component","yakStyled","attrs","isYakComponent","parentYakComponent","parentAttrsFn","mergedAttrsFn","buildRuntimeAttrsProcessor","styles","values","getRuntimeStyles","css","props","ref","theme","combinedProps","combineProps","runtimeStyles","themeAfterAttr","combinedPropsWithoutTheme","propsBeforeFiltering","filteredProps","removeNonDomProperties","mergeClassNames","styled","target","TagName","obj","result","key","a","b","newProps","ownAttrsFn","parentProps","keyframes","styles","dynamic","atoms","className"]}

package/dist/index.d.cts

@@ -19,20 +19,6 @@ declare const YakThemeProvider: ({ children, theme, }: {
 }) => React.JSX.Element;
 
 declare const yakComponentSymbol: unique symbol;
-type ComponentStyles$1<TProps> = (props: TProps) => {
-    className: string;
-    style?: {
-        [key: string]: string;
-    };
-};
-type StaticCSSProp$1 = {
-    className: string;
-    style?: CSSProperties;
-};
-type CSSInterpolation$1<TProps> = string | number | undefined | null | false | ComponentStyles$1<TProps> | StaticCSSProp$1 | {
-    [yakComponentSymbol]: any;
-} | ((props: TProps) => CSSInterpolation$1<TProps>);
-
 type ComponentStyles<TProps> = (props: TProps) => {
     className: string;
     style?: {
@@ -46,6 +32,23 @@ type StaticCSSProp = {
 type CSSInterpolation<TProps> = string | number | undefined | null | false | ComponentStyles<TProps> | StaticCSSProp | {
     [yakComponentSymbol]: any;
 } | ((props: TProps) => CSSInterpolation<TProps>);
+/**
+ * css() runtime factory of css``
+ *
+ * /!\ next-yak transpiles css`` and styled``
+ *
+ * This changes the typings of the css`` and styled`` functions.
+ * During development the user of next-yak wants to work with the
+ * typings BEFORE compilation.
+ *
+ * Therefore this is only an internal function only and it must be cast to any
+ * before exported to the user.
+ */
+declare function css$1(styles: TemplateStringsArray, ...values: []): StaticCSSProp;
+declare function css$1<TProps = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<NoInfer<TProps> & {
+    theme: YakTheme;
+}>[]): ComponentStyles<TProps>;
+
 /**
  * Allows to use CSS styles in a styled or css block
  *
@@ -58,15 +61,12 @@ type CSSInterpolation<TProps> = string | number | undefined | null | false | Com
  * `;
  * ```
  */
-declare function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;
-declare function css<TProps = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps & {
-    theme: YakTheme;
-}>[]): ComponentStyles<TProps>;
+declare const css: typeof css$1;
 
 /**
  * Minimal type for a function component that works with next-yak
  */
-type FunctionComponent<T> = (props: T, context?: any) => React.ReactNode;
+type FunctionComponent<T> = (props: T, context?: any) => React.ReactNode | React.ReactElement;
 /**
  * All valid html tags
  */
@@ -106,7 +106,7 @@ type YakComponent<T, TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged
  * Type for the proxy object returned by `styled` that allows to
  * access all html tags as properties.
  */
-type StyledLiteral<T> = <TCSSProps>(styles: TemplateStringsArray, ...values: Array<CSSInterpolation$1<T & NoInfer<TCSSProps> & {
+type StyledLiteral<T> = <TCSSProps>(styles: TemplateStringsArray, ...values: Array<CSSInterpolation<T & NoInfer<TCSSProps> & {
     theme: YakTheme;
 }>>) => YakComponent<TCSSProps & T>;
 /**
@@ -122,10 +122,10 @@ type StyledLiteral<T> = <TCSSProps>(styles: TemplateStringsArray, ...values: Arr
  * `;
  * ```
  */
-declare const styled: (<T>(Component: HtmlTags | FunctionComponent<T>) => (<TCSSProps extends object = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation$1<T & NoInfer<TCSSProps> & {
+declare const styled: (<T>(Component: HtmlTags | FunctionComponent<T>) => (<TCSSProps extends object = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<T & NoInfer<TCSSProps> & {
     theme: YakTheme;
 }>[]) => YakComponent<FastOmit<TCSSProps & T, never>, object, AttrsMerged<FastOmit<TCSSProps & T, never>, object>>) & {
-    attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>>(attrs: Attrs<T, TAttrsIn, TAttrsOut>) => <TCSSProps extends object = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation$1<T & NoInfer<TCSSProps> & {
+    attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>>(attrs: Attrs<T, TAttrsIn, TAttrsOut>) => <TCSSProps extends object = {}>(styles: TemplateStringsArray, ...values: CSSInterpolation<T & NoInfer<TCSSProps> & {
         theme: YakTheme;
     }>[]) => YakComponent<Substitute<TCSSProps & T, TAttrsIn>, object, AttrsMerged<Substitute<TCSSProps & T, TAttrsIn>, object>>;
 }) & {
@@ -153,6 +153,9 @@ declare const styled: (<T>(Component: HtmlTags | FunctionComponent<T>) => (<TCSS
     sup: StyledLiteral<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> & {
         attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn> = AttrsMerged<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn>>(attrs: Attrs<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["sup"], TAttrsIn>>;
     };
+    input: StyledLiteral<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>> & {
+        attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, TAttrsIn> = AttrsMerged<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, TAttrsIn>>(attrs: Attrs<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["input"], TAttrsIn>>;
+    };
     a: StyledLiteral<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>> & {
         attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, TAttrsIn> = AttrsMerged<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, TAttrsIn>>(attrs: Attrs<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["a"], TAttrsIn>>;
     };
@@ -312,9 +315,6 @@ declare const styled: (<T>(Component: HtmlTags | FunctionComponent<T>) => (<TCSS
     img: StyledLiteral<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>> & {
         attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, TAttrsIn> = AttrsMerged<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, TAttrsIn>>(attrs: Attrs<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["img"], TAttrsIn>>;
     };
-    input: StyledLiteral<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>> & {
-        attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, TAttrsIn> = AttrsMerged<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, TAttrsIn>>(attrs: Attrs<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["input"], TAttrsIn>>;
-    };
     ins: StyledLiteral<React.DetailedHTMLProps<React.InsHTMLAttributes<HTMLModElement>, HTMLModElement>> & {
         attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.DetailedHTMLProps<React.InsHTMLAttributes<HTMLModElement>, HTMLModElement>, TAttrsIn> = AttrsMerged<React.DetailedHTMLProps<React.InsHTMLAttributes<HTMLModElement>, HTMLModElement>, TAttrsIn>>(attrs: Attrs<React.DetailedHTMLProps<React.InsHTMLAttributes<HTMLModElement>, HTMLModElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["ins"], TAttrsIn>>;
     };
@@ -357,9 +357,6 @@ declare const styled: (<T>(Component: HtmlTags | FunctionComponent<T>) => (<TCSS
     nav: StyledLiteral<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> & {
         attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn> = AttrsMerged<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn>>(attrs: Attrs<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["nav"], TAttrsIn>>;
     };
-    noindex: StyledLiteral<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> & {
-        attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn> = AttrsMerged<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn>>(attrs: Attrs<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["noindex"], TAttrsIn>>;
-    };
     noscript: StyledLiteral<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> & {
         attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn> = AttrsMerged<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn>>(attrs: Attrs<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["noscript"], TAttrsIn>>;
     };
@@ -489,18 +486,9 @@ declare const styled: (<T>(Component: HtmlTags | FunctionComponent<T>) => (<TCSS
     webview: StyledLiteral<React.DetailedHTMLProps<React.WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>> & {
         attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.DetailedHTMLProps<React.WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>, TAttrsIn> = AttrsMerged<React.DetailedHTMLProps<React.WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>, TAttrsIn>>(attrs: Attrs<React.DetailedHTMLProps<React.WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["webview"], TAttrsIn>>;
     };
-    svg: StyledLiteral<React.SVGProps<SVGSVGElement>> & {
-        attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGSVGElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGSVGElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGSVGElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["svg"], TAttrsIn>>;
-    };
     animate: StyledLiteral<React.SVGProps<SVGElement>> & {
         attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["animate"], TAttrsIn>>;
     };
-    animateMotion: StyledLiteral<React.SVGProps<SVGElement>> & {
-        attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["animateMotion"], TAttrsIn>>;
-    };
-    animateTransform: StyledLiteral<React.SVGProps<SVGElement>> & {
-        attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["animateTransform"], TAttrsIn>>;
-    };
     circle: StyledLiteral<React.SVGProps<SVGCircleElement>> & {
         attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGCircleElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGCircleElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGCircleElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["circle"], TAttrsIn>>;
     };
@@ -618,9 +606,6 @@ declare const styled: (<T>(Component: HtmlTags | FunctionComponent<T>) => (<TCSS
     metadata: StyledLiteral<React.SVGProps<SVGMetadataElement>> & {
         attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGMetadataElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGMetadataElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGMetadataElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["metadata"], TAttrsIn>>;
     };
-    mpath: StyledLiteral<React.SVGProps<SVGElement>> & {
-        attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["mpath"], TAttrsIn>>;
-    };
     path: StyledLiteral<React.SVGProps<SVGPathElement>> & {
         attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGPathElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGPathElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGPathElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["path"], TAttrsIn>>;
     };
@@ -642,6 +627,9 @@ declare const styled: (<T>(Component: HtmlTags | FunctionComponent<T>) => (<TCSS
     stop: StyledLiteral<React.SVGProps<SVGStopElement>> & {
         attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGStopElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGStopElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGStopElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["stop"], TAttrsIn>>;
     };
+    svg: StyledLiteral<React.SVGProps<SVGSVGElement>> & {
+        attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGSVGElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGSVGElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGSVGElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["svg"], TAttrsIn>>;
+    };
     switch: StyledLiteral<React.SVGProps<SVGSwitchElement>> & {
         attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGSwitchElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGSwitchElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGSwitchElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["switch"], TAttrsIn>>;
     };
@@ -660,6 +648,21 @@ declare const styled: (<T>(Component: HtmlTags | FunctionComponent<T>) => (<TCSS
     view: StyledLiteral<React.SVGProps<SVGViewElement>> & {
         attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGViewElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGViewElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGViewElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["view"], TAttrsIn>>;
     };
+    noindex: StyledLiteral<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> & {
+        attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn> = AttrsMerged<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn>>(attrs: Attrs<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["noindex"], TAttrsIn>>;
+    };
+    animateMotion: StyledLiteral<React.SVGProps<SVGElement>> & {
+        attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["animateMotion"], TAttrsIn>>;
+    };
+    animateTransform: StyledLiteral<React.SVGProps<SVGElement>> & {
+        attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["animateTransform"], TAttrsIn>>;
+    };
+    mpath: StyledLiteral<React.SVGProps<SVGElement>> & {
+        attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["mpath"], TAttrsIn>>;
+    };
+    set: StyledLiteral<React.SVGProps<SVGSetElement>> & {
+        attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<React.SVGProps<SVGSetElement>, TAttrsIn> = AttrsMerged<React.SVGProps<SVGSetElement>, TAttrsIn>>(attrs: Attrs<React.SVGProps<SVGSetElement>, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<JSX.IntrinsicElements["set"], TAttrsIn>>;
+    };
 };
 type FastOmit<T extends object, U extends string | number | symbol> = {
     [K in keyof T as K extends U ? never : K]: T[K];
@@ -688,7 +691,31 @@ type Substitute<A extends object, B extends object> = FastOmit<A, keyof B> & B;
  * `;
  * ```
  */
-declare const keyframes: (styles: TemplateStringsArray, ...dynamic: never[]) => string;
+declare const keyframes$1: <T extends (string | number | bigint)[] = never>(styles: TemplateStringsArray, ...dynamic: T) => string;
+
+/**
+ * Allows to use CSS keyframe animations in a styled or css block
+ *
+ * @usage
+ *
+ * ```tsx
+ * import { styled, keyframes } from "next-yak";
+ *
+ * const rotate = keyframes`
+ *  from {
+ *   transform: rotate(0deg);
+ *  }
+ *  to {
+ *   transform: rotate(360deg);
+ *  }
+ * `;
+ *
+ * const Spinner = styled.div`
+ *   animation: ${rotate} 1s linear infinite;
+ * `;
+ * ```
+ */
+declare const keyframes: typeof keyframes$1;
 
 /**
  * Allows to use atomic CSS classes in a styled or css block