@telegraph/style-engine 0.1.11 → 0.1.12

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @telegraph/style-engine
 
+## 0.1.12
+
+### Patch Changes
+
+- [#490](https://github.com/knocklabs/telegraph/pull/490) [`def8e98`](https://github.com/knocklabs/telegraph/commit/def8e983fe8d90d3d35f8ffe81ceb9daa46e1b30) Thanks [@kylemcd](https://github.com/kylemcd)! - deprecate and remove legacy vanilla extract style engine
+
+- Updated dependencies []:
+  - @telegraph/tokens@0.0.21
+
 ## 0.1.11
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@vanilla-extract/css"),m=require("@vanilla-extract/recipes"),y=require("@vanilla-extract/sprinkles"),v=require("react"),i=require("@telegraph/tokens"),x={transparent:"var(--tgph-transparent)",white:"var(--tgph-white)",black:"var(--tgph-black)","surface-1":"var(--tgph-surface-1)","surface-2":"var(--tgph-surface-2)","alpha-white-1":"var(--tgph-alpha-white-1)","alpha-white-2":"var(--tgph-alpha-white-2)","alpha-white-3":"var(--tgph-alpha-white-3)","alpha-white-4":"var(--tgph-alpha-white-4)","alpha-white-5":"var(--tgph-alpha-white-5)","alpha-white-6":"var(--tgph-alpha-white-6)","alpha-white-7":"var(--tgph-alpha-white-7)","alpha-white-8":"var(--tgph-alpha-white-8)","alpha-white-9":"var(--tgph-alpha-white-9)","alpha-white-10":"var(--tgph-alpha-white-10)","alpha-white-11":"var(--tgph-alpha-white-11)","alpha-white-12":"var(--tgph-alpha-white-12)","alpha-black-1":"var(--tgph-alpha-black-1)","alpha-black-2":"var(--tgph-alpha-black-2)","alpha-black-3":"var(--tgph-alpha-black-3)","alpha-black-4":"var(--tgph-alpha-black-4)","alpha-black-5":"var(--tgph-alpha-black-5)","alpha-black-6":"var(--tgph-alpha-black-6)","alpha-black-7":"var(--tgph-alpha-black-7)","alpha-black-8":"var(--tgph-alpha-black-8)","alpha-black-9":"var(--tgph-alpha-black-9)","alpha-black-10":"var(--tgph-alpha-black-10)","alpha-black-11":"var(--tgph-alpha-black-11)","alpha-black-12":"var(--tgph-alpha-black-12)","gray-1":"var(--tgph-gray-1)","gray-2":"var(--tgph-gray-2)","gray-3":"var(--tgph-gray-3)","gray-4":"var(--tgph-gray-4)","gray-5":"var(--tgph-gray-5)","gray-6":"var(--tgph-gray-6)","gray-7":"var(--tgph-gray-7)","gray-8":"var(--tgph-gray-8)","gray-9":"var(--tgph-gray-9)","gray-10":"var(--tgph-gray-10)","gray-11":"var(--tgph-gray-11)","gray-12":"var(--tgph-gray-12)","beige-1":"var(--tgph-beige-1)","beige-2":"var(--tgph-beige-2)","beige-3":"var(--tgph-beige-3)","beige-4":"var(--tgph-beige-4)","beige-5":"var(--tgph-beige-5)","beige-6":"var(--tgph-beige-6)","beige-7":"var(--tgph-beige-7)","beige-8":"var(--tgph-beige-8)","beige-9":"var(--tgph-beige-9)","beige-10":"var(--tgph-beige-10)","beige-11":"var(--tgph-beige-11)","beige-12":"var(--tgph-beige-12)","accent-1":"var(--tgph-accent-1)","accent-2":"var(--tgph-accent-2)","accent-3":"var(--tgph-accent-3)","accent-4":"var(--tgph-accent-4)","accent-5":"var(--tgph-accent-5)","accent-6":"var(--tgph-accent-6)","accent-7":"var(--tgph-accent-7)","accent-8":"var(--tgph-accent-8)","accent-9":"var(--tgph-accent-9)","accent-10":"var(--tgph-accent-10)","accent-11":"var(--tgph-accent-11)","accent-12":"var(--tgph-accent-12)","green-1":"var(--tgph-green-1)","green-2":"var(--tgph-green-2)","green-3":"var(--tgph-green-3)","green-4":"var(--tgph-green-4)","green-5":"var(--tgph-green-5)","green-6":"var(--tgph-green-6)","green-7":"var(--tgph-green-7)","green-8":"var(--tgph-green-8)","green-9":"var(--tgph-green-9)","green-10":"var(--tgph-green-10)","green-11":"var(--tgph-green-11)","green-12":"var(--tgph-green-12)","yellow-1":"var(--tgph-yellow-1)","yellow-2":"var(--tgph-yellow-2)","yellow-3":"var(--tgph-yellow-3)","yellow-4":"var(--tgph-yellow-4)","yellow-5":"var(--tgph-yellow-5)","yellow-6":"var(--tgph-yellow-6)","yellow-7":"var(--tgph-yellow-7)","yellow-8":"var(--tgph-yellow-8)","yellow-9":"var(--tgph-yellow-9)","yellow-10":"var(--tgph-yellow-10)","yellow-11":"var(--tgph-yellow-11)","yellow-12":"var(--tgph-yellow-12)","blue-1":"var(--tgph-blue-1)","blue-2":"var(--tgph-blue-2)","blue-3":"var(--tgph-blue-3)","blue-4":"var(--tgph-blue-4)","blue-5":"var(--tgph-blue-5)","blue-6":"var(--tgph-blue-6)","blue-7":"var(--tgph-blue-7)","blue-8":"var(--tgph-blue-8)","blue-9":"var(--tgph-blue-9)","blue-10":"var(--tgph-blue-10)","blue-11":"var(--tgph-blue-11)","blue-12":"var(--tgph-blue-12)","red-1":"var(--tgph-red-1)","red-2":"var(--tgph-red-2)","red-3":"var(--tgph-red-3)","red-4":"var(--tgph-red-4)","red-5":"var(--tgph-red-5)","red-6":"var(--tgph-red-6)","red-7":"var(--tgph-red-7)","red-8":"var(--tgph-red-8)","red-9":"var(--tgph-red-9)","red-10":"var(--tgph-red-10)","red-11":"var(--tgph-red-11)","red-12":"var(--tgph-red-12)","purple-1":"var(--tgph-purple-1)","purple-2":"var(--tgph-purple-2)","purple-3":"var(--tgph-purple-3)","purple-4":"var(--tgph-purple-4)","purple-5":"var(--tgph-purple-5)","purple-6":"var(--tgph-purple-6)","purple-7":"var(--tgph-purple-7)","purple-8":"var(--tgph-purple-8)","purple-9":"var(--tgph-purple-9)","purple-10":"var(--tgph-purple-10)","purple-11":"var(--tgph-purple-11)","purple-12":"var(--tgph-purple-12)"},P={0:"var(--tgph-rounded-0)",1:"var(--tgph-rounded-1)",2:"var(--tgph-rounded-2)",3:"var(--tgph-rounded-3)",4:"var(--tgph-rounded-4)",5:"var(--tgph-rounded-5)",6:"var(--tgph-rounded-6)",full:"var(--tgph-rounded-full)"},S={0:"var(--tgph-shadow-0)",1:"var(--tgph-shadow-1)",2:"var(--tgph-shadow-2)",3:"var(--tgph-shadow-3)",inner:"var(--tgph-shadow-inner)"},O={0:"var(--tgph-spacing-0)",1:"var(--tgph-spacing-1)",2:"var(--tgph-spacing-2)",3:"var(--tgph-spacing-3)",4:"var(--tgph-spacing-4)",5:"var(--tgph-spacing-5)",6:"var(--tgph-spacing-6)",7:"var(--tgph-spacing-7)",8:"var(--tgph-spacing-8)",9:"var(--tgph-spacing-9)",10:"var(--tgph-spacing-10)",11:"var(--tgph-spacing-11)",12:"var(--tgph-spacing-12)",14:"var(--tgph-spacing-14)",16:"var(--tgph-spacing-16)",20:"var(--tgph-spacing-20)",24:"var(--tgph-spacing-24)",28:"var(--tgph-spacing-28)",32:"var(--tgph-spacing-32)",36:"var(--tgph-spacing-36)",40:"var(--tgph-spacing-40)",44:"var(--tgph-spacing-44)",48:"var(--tgph-spacing-48)",52:"var(--tgph-spacing-52)",56:"var(--tgph-spacing-56)",60:"var(--tgph-spacing-60)",64:"var(--tgph-spacing-64)",72:"var(--tgph-spacing-72)",80:"var(--tgph-spacing-80)",96:"var(--tgph-spacing-96)",120:"var(--tgph-spacing-120)",140:"var(--tgph-spacing-140)",160:"var(--tgph-spacing-160)",px:"var(--tgph-spacing-px)",full:"var(--tgph-spacing-full)",auto:"var(--tgph-spacing-auto)"},j={sans:"var(--tgph-family-sans)",mono:"var(--tgph-family-mono)"},I={0:"var(--tgph-leading-0)",1:"var(--tgph-leading-1)",2:"var(--tgph-leading-2)",3:"var(--tgph-leading-3)",4:"var(--tgph-leading-4)",5:"var(--tgph-leading-5)",6:"var(--tgph-leading-6)",7:"var(--tgph-leading-7)",8:"var(--tgph-leading-8)",9:"var(--tgph-leading-9)","code-0":"var(--tgph-leading-code-0)","code-1":"var(--tgph-leading-code-1)","code-2":"var(--tgph-leading-code-2)","code-3":"var(--tgph-leading-code-3)","code-4":"var(--tgph-leading-code-4)","code-5":"var(--tgph-leading-code-5)","code-6":"var(--tgph-leading-code-6)","code-7":"var(--tgph-leading-code-7)","code-8":"var(--tgph-leading-code-8)","code-9":"var(--tgph-leading-code-9)"},V={0:"var(--tgph-tracking-0)",1:"var(--tgph-tracking-1)",2:"var(--tgph-tracking-2)",3:"var(--tgph-tracking-3)",4:"var(--tgph-tracking-4)",5:"var(--tgph-tracking-5)",6:"var(--tgph-tracking-6)",7:"var(--tgph-tracking-7)",8:"var(--tgph-tracking-8)",9:"var(--tgph-tracking-9)"},z={0:"var(--tgph-text-0)",1:"var(--tgph-text-1)",2:"var(--tgph-text-2)",3:"var(--tgph-text-3)",4:"var(--tgph-text-4)",5:"var(--tgph-text-5)",6:"var(--tgph-text-6)",7:"var(--tgph-text-7)",8:"var(--tgph-text-8)",9:"var(--tgph-text-9)","code-0":"var(--tgph-text-code-0)","code-1":"var(--tgph-text-code-1)","code-2":"var(--tgph-text-code-2)","code-4":"var(--tgph-text-code-4)","code-5":"var(--tgph-text-code-5)","code-6":"var(--tgph-text-code-6)","code-7":"var(--tgph-text-code-7)","code-8":"var(--tgph-text-code-8)","code-9":"var(--tgph-text-code-9)"},E={regular:"var(--tgph-weight-regular)",medium:"var(--tgph-weight-medium)","semi-bold":"var(--tgph-weight-semi-bold)"},R={sm:"var(--tgph-breakpoint-sm)",md:"var(--tgph-breakpoint-md)",lg:"var(--tgph-breakpoint-lg)",xl:"var(--tgph-breakpoint-xl)","2xl":"var(--tgph-breakpoint-2xl)"},q={hidden:"var(--tgph-zIndex-hidden)",base:"var(--tgph-zIndex-base)",auto:"var(--tgph-zIndex-auto)",dropdown:"var(--tgph-zIndex-dropdown)",sticky:"var(--tgph-zIndex-sticky)",banner:"var(--tgph-zIndex-banner)",overlay:"var(--tgph-zIndex-overlay)",modal:"var(--tgph-zIndex-modal)",popover:"var(--tgph-zIndex-popover)",skipLink:"var(--tgph-zIndex-skipLink)",toast:"var(--tgph-zIndex-toast)",tooltip:"var(--tgph-zIndex-tooltip)"},C={"border-style":{solid:"var(--tgph-border-style-solid)",dashed:"var(--tgph-border-style-dashed)"},color:x,rounded:P,shadow:S,spacing:O,family:j,leading:I,tracking:V,text:z,weight:E,breakpoint:R,zIndex:q},L=({props:r,stylePropsFn:e})=>{const a=v.useMemo(()=>r,[r]),p=v.useMemo(()=>{const c=e.properties,n={},t={};return a?(Object.keys(a).forEach(h=>{const l=h;c.has(l)&&Object.assign(n,{[l]:a[l]}),c.has(l)||Object.assign(t,{[l]:a[l]})}),{styleProps:n,componentProps:t}):{styleProps:n,componentProps:t}},[a,e==null?void 0:e.properties]),g=v.useMemo(()=>e(p.styleProps),[p.styleProps,e]);return{styleProps:p.styleProps,componentProps:p.componentProps,styleClassName:g}},M={conditions:{sm:{"@media":`screen and (min-width: ${i.tokens.breakpoint.sm})`},md:{"@media":`screen and (min-width: ${i.tokens.breakpoint.md})`},lg:{"@media":`screen and (min-width: ${i.tokens.breakpoint.lg})`},xl:{"@media":`screen and (min-width: ${i.tokens.breakpoint.xl})`},"2xl":{"@media":`screen and (min-width: ${i.tokens.breakpoint["2xl"]})`}},defaultCondition:"sm",responsiveArray:["sm","md","lg","xl","2xl"]},$=({currentValueOfCssVar:r="0 0 0 0",value:e,direction:a})=>{const[p,g,c,n]=r.split(" "),t={top:p,right:g,bottom:c,left:n};return a==="top"&&(t.top=e),a==="right"&&(t.right=e),a==="bottom"&&(t.bottom=e),a==="left"&&(t.left=e),a==="all"&&(t.top=e,t.right=e,t.bottom=e,t.left=e),a==="x"&&(t.left=e,t.right=e),a==="y"&&(t.top=e,t.bottom=e),a==="side-top"&&(t.top=e,t.right=e),a==="side-bottom"&&(t.bottom=e,t.left=e),a==="side-left"&&(t.top=e,t.left=e),a==="side-right"&&(t.right=e,t.bottom=e),Object.values(t).join(" ")},k=r=>{const{cssVars:e}=r;if(!(r!=null&&r.props)||Object.keys(r.props).length===0)return{styleProp:{},otherProps:{},interactive:!1};const{style:a={},...p}=r.props;let g=a;const c={};let n=!1;return Object.keys(p).forEach(t=>{const h=t,l=h,o=e==null?void 0:e[l];if(!o){Object.assign(c,{[h]:p[h]});return}const b=p==null?void 0:p[h];if(!b){Object.assign(g,{[h]:p[h]});return}const u=o.value.replace("VARIABLE",b),s=o.cssVar;if(o.interactive&&(n=!0),o.direction){const w=g==null?void 0:g[s],f=$({currentValueOfCssVar:w,value:u,direction:o.direction});g={...g,[s]:f};return}g={...g,[s]:u}}),{styleProp:g,otherProps:c,interactive:n}},N=r=>v.useMemo(()=>k(r),[r]);Object.defineProperty(exports,"globalStyle",{enumerable:!0,get:()=>d.globalStyle});Object.defineProperty(exports,"keyframes",{enumerable:!0,get:()=>d.keyframes});Object.defineProperty(exports,"style",{enumerable:!0,get:()=>d.style});Object.defineProperty(exports,"variant",{enumerable:!0,get:()=>m.recipe});Object.defineProperty(exports,"createStyleProps",{enumerable:!0,get:()=>y.createSprinkles});Object.defineProperty(exports,"defineStyleProps",{enumerable:!0,get:()=>y.defineProperties});exports.RESPONSIVE_STYLE_PROPS=M;exports.getStyleProp=k;exports.tokens=C;exports.useStyleEngine=N;exports.useStyleProps=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),w={transparent:"var(--tgph-transparent)",white:"var(--tgph-white)",black:"var(--tgph-black)","surface-1":"var(--tgph-surface-1)","surface-2":"var(--tgph-surface-2)","alpha-white-1":"var(--tgph-alpha-white-1)","alpha-white-2":"var(--tgph-alpha-white-2)","alpha-white-3":"var(--tgph-alpha-white-3)","alpha-white-4":"var(--tgph-alpha-white-4)","alpha-white-5":"var(--tgph-alpha-white-5)","alpha-white-6":"var(--tgph-alpha-white-6)","alpha-white-7":"var(--tgph-alpha-white-7)","alpha-white-8":"var(--tgph-alpha-white-8)","alpha-white-9":"var(--tgph-alpha-white-9)","alpha-white-10":"var(--tgph-alpha-white-10)","alpha-white-11":"var(--tgph-alpha-white-11)","alpha-white-12":"var(--tgph-alpha-white-12)","alpha-black-1":"var(--tgph-alpha-black-1)","alpha-black-2":"var(--tgph-alpha-black-2)","alpha-black-3":"var(--tgph-alpha-black-3)","alpha-black-4":"var(--tgph-alpha-black-4)","alpha-black-5":"var(--tgph-alpha-black-5)","alpha-black-6":"var(--tgph-alpha-black-6)","alpha-black-7":"var(--tgph-alpha-black-7)","alpha-black-8":"var(--tgph-alpha-black-8)","alpha-black-9":"var(--tgph-alpha-black-9)","alpha-black-10":"var(--tgph-alpha-black-10)","alpha-black-11":"var(--tgph-alpha-black-11)","alpha-black-12":"var(--tgph-alpha-black-12)","gray-1":"var(--tgph-gray-1)","gray-2":"var(--tgph-gray-2)","gray-3":"var(--tgph-gray-3)","gray-4":"var(--tgph-gray-4)","gray-5":"var(--tgph-gray-5)","gray-6":"var(--tgph-gray-6)","gray-7":"var(--tgph-gray-7)","gray-8":"var(--tgph-gray-8)","gray-9":"var(--tgph-gray-9)","gray-10":"var(--tgph-gray-10)","gray-11":"var(--tgph-gray-11)","gray-12":"var(--tgph-gray-12)","beige-1":"var(--tgph-beige-1)","beige-2":"var(--tgph-beige-2)","beige-3":"var(--tgph-beige-3)","beige-4":"var(--tgph-beige-4)","beige-5":"var(--tgph-beige-5)","beige-6":"var(--tgph-beige-6)","beige-7":"var(--tgph-beige-7)","beige-8":"var(--tgph-beige-8)","beige-9":"var(--tgph-beige-9)","beige-10":"var(--tgph-beige-10)","beige-11":"var(--tgph-beige-11)","beige-12":"var(--tgph-beige-12)","accent-1":"var(--tgph-accent-1)","accent-2":"var(--tgph-accent-2)","accent-3":"var(--tgph-accent-3)","accent-4":"var(--tgph-accent-4)","accent-5":"var(--tgph-accent-5)","accent-6":"var(--tgph-accent-6)","accent-7":"var(--tgph-accent-7)","accent-8":"var(--tgph-accent-8)","accent-9":"var(--tgph-accent-9)","accent-10":"var(--tgph-accent-10)","accent-11":"var(--tgph-accent-11)","accent-12":"var(--tgph-accent-12)","green-1":"var(--tgph-green-1)","green-2":"var(--tgph-green-2)","green-3":"var(--tgph-green-3)","green-4":"var(--tgph-green-4)","green-5":"var(--tgph-green-5)","green-6":"var(--tgph-green-6)","green-7":"var(--tgph-green-7)","green-8":"var(--tgph-green-8)","green-9":"var(--tgph-green-9)","green-10":"var(--tgph-green-10)","green-11":"var(--tgph-green-11)","green-12":"var(--tgph-green-12)","yellow-1":"var(--tgph-yellow-1)","yellow-2":"var(--tgph-yellow-2)","yellow-3":"var(--tgph-yellow-3)","yellow-4":"var(--tgph-yellow-4)","yellow-5":"var(--tgph-yellow-5)","yellow-6":"var(--tgph-yellow-6)","yellow-7":"var(--tgph-yellow-7)","yellow-8":"var(--tgph-yellow-8)","yellow-9":"var(--tgph-yellow-9)","yellow-10":"var(--tgph-yellow-10)","yellow-11":"var(--tgph-yellow-11)","yellow-12":"var(--tgph-yellow-12)","blue-1":"var(--tgph-blue-1)","blue-2":"var(--tgph-blue-2)","blue-3":"var(--tgph-blue-3)","blue-4":"var(--tgph-blue-4)","blue-5":"var(--tgph-blue-5)","blue-6":"var(--tgph-blue-6)","blue-7":"var(--tgph-blue-7)","blue-8":"var(--tgph-blue-8)","blue-9":"var(--tgph-blue-9)","blue-10":"var(--tgph-blue-10)","blue-11":"var(--tgph-blue-11)","blue-12":"var(--tgph-blue-12)","red-1":"var(--tgph-red-1)","red-2":"var(--tgph-red-2)","red-3":"var(--tgph-red-3)","red-4":"var(--tgph-red-4)","red-5":"var(--tgph-red-5)","red-6":"var(--tgph-red-6)","red-7":"var(--tgph-red-7)","red-8":"var(--tgph-red-8)","red-9":"var(--tgph-red-9)","red-10":"var(--tgph-red-10)","red-11":"var(--tgph-red-11)","red-12":"var(--tgph-red-12)","purple-1":"var(--tgph-purple-1)","purple-2":"var(--tgph-purple-2)","purple-3":"var(--tgph-purple-3)","purple-4":"var(--tgph-purple-4)","purple-5":"var(--tgph-purple-5)","purple-6":"var(--tgph-purple-6)","purple-7":"var(--tgph-purple-7)","purple-8":"var(--tgph-purple-8)","purple-9":"var(--tgph-purple-9)","purple-10":"var(--tgph-purple-10)","purple-11":"var(--tgph-purple-11)","purple-12":"var(--tgph-purple-12)"},k={0:"var(--tgph-rounded-0)",1:"var(--tgph-rounded-1)",2:"var(--tgph-rounded-2)",3:"var(--tgph-rounded-3)",4:"var(--tgph-rounded-4)",5:"var(--tgph-rounded-5)",6:"var(--tgph-rounded-6)",full:"var(--tgph-rounded-full)"},f={0:"var(--tgph-shadow-0)",1:"var(--tgph-shadow-1)",2:"var(--tgph-shadow-2)",3:"var(--tgph-shadow-3)",inner:"var(--tgph-shadow-inner)"},x={0:"var(--tgph-spacing-0)",1:"var(--tgph-spacing-1)",2:"var(--tgph-spacing-2)",3:"var(--tgph-spacing-3)",4:"var(--tgph-spacing-4)",5:"var(--tgph-spacing-5)",6:"var(--tgph-spacing-6)",7:"var(--tgph-spacing-7)",8:"var(--tgph-spacing-8)",9:"var(--tgph-spacing-9)",10:"var(--tgph-spacing-10)",11:"var(--tgph-spacing-11)",12:"var(--tgph-spacing-12)",14:"var(--tgph-spacing-14)",16:"var(--tgph-spacing-16)",20:"var(--tgph-spacing-20)",24:"var(--tgph-spacing-24)",28:"var(--tgph-spacing-28)",32:"var(--tgph-spacing-32)",36:"var(--tgph-spacing-36)",40:"var(--tgph-spacing-40)",44:"var(--tgph-spacing-44)",48:"var(--tgph-spacing-48)",52:"var(--tgph-spacing-52)",56:"var(--tgph-spacing-56)",60:"var(--tgph-spacing-60)",64:"var(--tgph-spacing-64)",72:"var(--tgph-spacing-72)",80:"var(--tgph-spacing-80)",96:"var(--tgph-spacing-96)",120:"var(--tgph-spacing-120)",140:"var(--tgph-spacing-140)",160:"var(--tgph-spacing-160)",px:"var(--tgph-spacing-px)",full:"var(--tgph-spacing-full)",auto:"var(--tgph-spacing-auto)"},m={sans:"var(--tgph-family-sans)",mono:"var(--tgph-family-mono)"},I={0:"var(--tgph-leading-0)",1:"var(--tgph-leading-1)",2:"var(--tgph-leading-2)",3:"var(--tgph-leading-3)",4:"var(--tgph-leading-4)",5:"var(--tgph-leading-5)",6:"var(--tgph-leading-6)",7:"var(--tgph-leading-7)",8:"var(--tgph-leading-8)",9:"var(--tgph-leading-9)","code-0":"var(--tgph-leading-code-0)","code-1":"var(--tgph-leading-code-1)","code-2":"var(--tgph-leading-code-2)","code-3":"var(--tgph-leading-code-3)","code-4":"var(--tgph-leading-code-4)","code-5":"var(--tgph-leading-code-5)","code-6":"var(--tgph-leading-code-6)","code-7":"var(--tgph-leading-code-7)","code-8":"var(--tgph-leading-code-8)","code-9":"var(--tgph-leading-code-9)"},V={0:"var(--tgph-tracking-0)",1:"var(--tgph-tracking-1)",2:"var(--tgph-tracking-2)",3:"var(--tgph-tracking-3)",4:"var(--tgph-tracking-4)",5:"var(--tgph-tracking-5)",6:"var(--tgph-tracking-6)",7:"var(--tgph-tracking-7)",8:"var(--tgph-tracking-8)",9:"var(--tgph-tracking-9)"},z={0:"var(--tgph-text-0)",1:"var(--tgph-text-1)",2:"var(--tgph-text-2)",3:"var(--tgph-text-3)",4:"var(--tgph-text-4)",5:"var(--tgph-text-5)",6:"var(--tgph-text-6)",7:"var(--tgph-text-7)",8:"var(--tgph-text-8)",9:"var(--tgph-text-9)","code-0":"var(--tgph-text-code-0)","code-1":"var(--tgph-text-code-1)","code-2":"var(--tgph-text-code-2)","code-4":"var(--tgph-text-code-4)","code-5":"var(--tgph-text-code-5)","code-6":"var(--tgph-text-code-6)","code-7":"var(--tgph-text-code-7)","code-8":"var(--tgph-text-code-8)","code-9":"var(--tgph-text-code-9)"},O={regular:"var(--tgph-weight-regular)",medium:"var(--tgph-weight-medium)","semi-bold":"var(--tgph-weight-semi-bold)"},S={sm:"var(--tgph-breakpoint-sm)",md:"var(--tgph-breakpoint-md)",lg:"var(--tgph-breakpoint-lg)",xl:"var(--tgph-breakpoint-xl)","2xl":"var(--tgph-breakpoint-2xl)"},j={hidden:"var(--tgph-zIndex-hidden)",base:"var(--tgph-zIndex-base)",auto:"var(--tgph-zIndex-auto)",dropdown:"var(--tgph-zIndex-dropdown)",sticky:"var(--tgph-zIndex-sticky)",banner:"var(--tgph-zIndex-banner)",overlay:"var(--tgph-zIndex-overlay)",modal:"var(--tgph-zIndex-modal)",popover:"var(--tgph-zIndex-popover)",skipLink:"var(--tgph-zIndex-skipLink)",toast:"var(--tgph-zIndex-toast)",tooltip:"var(--tgph-zIndex-tooltip)"},P={"border-style":{solid:"var(--tgph-border-style-solid)",dashed:"var(--tgph-border-style-dashed)"},color:w,rounded:k,shadow:f,spacing:x,family:m,leading:I,tracking:V,text:z,weight:O,breakpoint:S,zIndex:j},E=({currentValueOfCssVar:r="0 0 0 0",value:a,direction:e})=>{const[p,g,v,n]=r.split(" "),t={top:p,right:g,bottom:v,left:n};return e==="top"&&(t.top=a),e==="right"&&(t.right=a),e==="bottom"&&(t.bottom=a),e==="left"&&(t.left=a),e==="all"&&(t.top=a,t.right=a,t.bottom=a,t.left=a),e==="x"&&(t.left=a,t.right=a),e==="y"&&(t.top=a,t.bottom=a),e==="side-top"&&(t.top=a,t.right=a),e==="side-bottom"&&(t.bottom=a,t.left=a),e==="side-left"&&(t.top=a,t.left=a),e==="side-right"&&(t.right=a,t.bottom=a),Object.values(t).join(" ")},d=r=>{const{cssVars:a}=r;if(!(r!=null&&r.props)||Object.keys(r.props).length===0)return{styleProp:{},otherProps:{},interactive:!1};const{style:e={},...p}=r.props;let g=e;const v={};let n=!1;return Object.keys(p).forEach(t=>{const h=t,s=h,l=a==null?void 0:a[s];if(!l){Object.assign(v,{[h]:p[h]});return}const i=p==null?void 0:p[h];if(!i){Object.assign(g,{[h]:p[h]});return}const o=l.value.replace("VARIABLE",i),c=l.cssVar;if(l.interactive&&(n=!0),l.direction){const b=g==null?void 0:g[c],u=E({currentValueOfCssVar:b,value:o,direction:l.direction});g={...g,[c]:u};return}g={...g,[c]:o}}),{styleProp:g,otherProps:v,interactive:n}},C=r=>y.useMemo(()=>d(r),[r]);exports.getStyleProp=d;exports.tokens=P;exports.useStyleEngine=C;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/hooks/useStyleProps.ts","../../src/constants/responsive-style-props.ts","../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["import { type SprinklesProperties as StyleProperties } from \"@vanilla-extract/sprinkles\";\nimport React from \"react\";\n\nimport { type createStyleProps } from \"../index\";\n\ntype StylePropFn<StylePropFnProperties extends StyleProperties[]> = ReturnType<\n  typeof createStyleProps<StylePropFnProperties>\n>;\n\ntype StyleProps<StylePropFnProperties extends StyleProperties[]> = Parameters<\n  StylePropFn<StylePropFnProperties>\n>[0];\n\ntype ComponentProps<\n  Props,\n  StylePropFnProperties extends StyleProperties[],\n> = Omit<Props, keyof StyleProps<StylePropFnProperties>>;\n\ntype UseStylePropsParams<\n  Props,\n  StylePropFnProperties extends StyleProperties[],\n> = {\n  props: Props;\n  stylePropsFn: StylePropFn<StylePropFnProperties>;\n};\n\nexport const useStyleProps = <\n  Props,\n  StylePropFnProperties extends StyleProperties[],\n>({\n  props,\n  stylePropsFn,\n}: UseStylePropsParams<Props, StylePropFnProperties>) => {\n  // Keep this memoed to prevent unnecessary re-renders\n  const memoizedProps = React.useMemo<Props>(() => props, [props]);\n\n  // Filter the props into styleProps and componentProps so that we can\n  // pass styleProps to the stylePropsFn and componentProps to the component\n  const filteredProps = React.useMemo(() => {\n    const stylePropFnProperties = stylePropsFn.properties;\n\n    const styleProps = {} as StyleProps<StylePropFnProperties>;\n    const componentProps = {} as ComponentProps<Props, StylePropFnProperties>;\n\n    // If there are no memoized props, return the empty styleProps and componentProps objects\n    if (!memoizedProps) return { styleProps, componentProps };\n\n    Object.keys(memoizedProps).forEach((_key) => {\n      const key = _key as keyof StyleProps<StylePropFnProperties> & keyof Props;\n      if (stylePropFnProperties.has(key)) {\n        Object.assign(styleProps, {\n          [key]: memoizedProps[key],\n        });\n      }\n      if (!stylePropFnProperties.has(key)) {\n        Object.assign(componentProps, {\n          [key]: memoizedProps[key],\n        });\n      }\n    });\n\n    return { styleProps, componentProps };\n  }, [memoizedProps, stylePropsFn?.properties]);\n\n  // Generate the style class name that we can apply to the component\n  const styleClassName = React.useMemo(() => {\n    return stylePropsFn(filteredProps.styleProps);\n  }, [filteredProps.styleProps, stylePropsFn]);\n\n  return {\n    styleProps: filteredProps.styleProps,\n    componentProps: filteredProps.componentProps,\n    styleClassName,\n  };\n};\n","import t from \"@telegraph/tokens\";\n\nexport const RESPONSIVE_STYLE_PROPS = {\n  conditions: {\n    sm: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.sm})` },\n    md: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.md})` },\n    lg: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.lg})` },\n    xl: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.xl})` },\n    \"2xl\": {\n      \"@media\": `screen and (min-width: ${t.tokens.breakpoint[\"2xl\"]})`,\n    },\n  },\n  defaultCondition: \"sm\",\n  responsiveArray: [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"],\n};\n","type Direction =\n  | \"x\"\n  | \"y\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"all\"\n  | \"side-top\"\n  | \"side-bottom\"\n  | \"side-left\"\n  | \"side-right\";\n\nexport type CssVarProp = {\n  cssVar: string;\n  value: string;\n  direction?: Direction;\n  interactive?: boolean;\n};\n\ntype ApplyDirectionProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  direction?: Direction;\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n  currentValueOfCssVar = \"0 0 0 0\",\n  value,\n  direction,\n}: ApplyDirectionProps) => {\n  const [top, right, bottom, left] = currentValueOfCssVar.split(\" \");\n\n  const newValues = {\n    top,\n    right,\n    bottom,\n    left,\n  };\n\n  if (direction === \"top\") {\n    newValues.top = value;\n  }\n\n  if (direction === \"right\") {\n    newValues.right = value;\n  }\n\n  if (direction === \"bottom\") {\n    newValues.bottom = value;\n  }\n\n  if (direction === \"left\") {\n    newValues.left = value;\n  }\n\n  if (direction === \"all\") {\n    newValues.top = value;\n    newValues.right = value;\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"x\") {\n    newValues.left = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"y\") {\n    newValues.top = value;\n    newValues.bottom = value;\n  }\n\n  // \"side\" direction is used for things like border-radius\n  // where we are settings values on corners instead of sides\n  // entire sides like padding and margin provide.\n  if (direction === \"side-top\") {\n    newValues.top = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"side-bottom\") {\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-left\") {\n    newValues.top = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-right\") {\n    newValues.right = value;\n    newValues.bottom = value;\n  }\n\n  const newValuesString = Object.values(newValues).join(\" \");\n\n  return newValuesString;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n  Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n  | Omit<\n      {\n        [key in keyof Props]: Props[key];\n      },\n      CssVarPropKey<CssVars>\n    >\n  | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n  | {\n      [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n    }\n  | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n  props: Props & { style?: Record<string, string> };\n  cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: GetStylePropParams<CssVars, Props>,\n): {\n  styleProp: StyleProp<CssVars>;\n  otherProps: OtherProps<CssVars, Props>;\n  interactive: boolean;\n} => {\n  const { cssVars } = params;\n\n  if (!params?.props || Object.keys(params.props).length === 0) {\n    return { styleProp: {}, otherProps: {}, interactive: false };\n  }\n\n  // Assign the additional styles to the style object so that it can be passed\n  // to the component as a prop.\n  const { style = {}, ...props } = params.props;\n\n  let styleProp: StyleProp<CssVars> = style;\n  const otherProps: OtherProps<CssVars, Props> = {};\n  let interactive = false;\n\n  Object.keys(props).forEach((_key) => {\n    const key = _key as keyof typeof props;\n    const cssVarsKey = key as unknown as keyof typeof cssVars;\n    const matchingCssVar = cssVars?.[cssVarsKey];\n\n    // If the prop is not a css var, just add it to the otherProps\n    if (!matchingCssVar) {\n      Object.assign(otherProps, { [key]: props[key] });\n      return;\n    }\n\n    const matchingPropValue = props?.[key] as string | undefined;\n\n    if (!matchingPropValue) {\n      Object.assign(styleProp, { [key]: props[key] });\n      return;\n    }\n\n    // Replace the VARIABLE placeholder with the actual value of the prop\n    const mappedValueOfCssVar = matchingCssVar.value.replace(\n      \"VARIABLE\",\n      matchingPropValue,\n    );\n\n    const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n    // If the style contains an interactive prop, set the interactive flag to true\n    // so that the component can include the interactive class\n    if (matchingCssVar.interactive) {\n      interactive = true;\n    }\n\n    if (matchingCssVar.direction) {\n      const currentValueOfCssVar = styleProp?.[cssVarName];\n\n      const directionalValue = applyDirectionalValues({\n        currentValueOfCssVar,\n        value: mappedValueOfCssVar,\n        direction: matchingCssVar.direction,\n      });\n\n      styleProp = {\n        ...styleProp,\n        [cssVarName]: directionalValue,\n      };\n      return;\n    }\n\n    styleProp = {\n      ...styleProp,\n      [cssVarName]: mappedValueOfCssVar,\n    };\n  });\n\n  return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n  return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["useStyleProps","props","stylePropsFn","memoizedProps","React","filteredProps","stylePropFnProperties","styleProps","componentProps","_key","key","styleClassName","RESPONSIVE_STYLE_PROPS","t","applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","styleProp","otherProps","interactive","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n  | \"x\"\n  | \"y\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"all\"\n  | \"side-top\"\n  | \"side-bottom\"\n  | \"side-left\"\n  | \"side-right\";\n\nexport type CssVarProp = {\n  cssVar: string;\n  value: string;\n  direction?: Direction;\n  interactive?: boolean;\n};\n\ntype ApplyDirectionProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  direction?: Direction;\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n  currentValueOfCssVar = \"0 0 0 0\",\n  value,\n  direction,\n}: ApplyDirectionProps) => {\n  const [top, right, bottom, left] = currentValueOfCssVar.split(\" \");\n\n  const newValues = {\n    top,\n    right,\n    bottom,\n    left,\n  };\n\n  if (direction === \"top\") {\n    newValues.top = value;\n  }\n\n  if (direction === \"right\") {\n    newValues.right = value;\n  }\n\n  if (direction === \"bottom\") {\n    newValues.bottom = value;\n  }\n\n  if (direction === \"left\") {\n    newValues.left = value;\n  }\n\n  if (direction === \"all\") {\n    newValues.top = value;\n    newValues.right = value;\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"x\") {\n    newValues.left = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"y\") {\n    newValues.top = value;\n    newValues.bottom = value;\n  }\n\n  // \"side\" direction is used for things like border-radius\n  // where we are settings values on corners instead of sides\n  // entire sides like padding and margin provide.\n  if (direction === \"side-top\") {\n    newValues.top = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"side-bottom\") {\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-left\") {\n    newValues.top = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-right\") {\n    newValues.right = value;\n    newValues.bottom = value;\n  }\n\n  const newValuesString = Object.values(newValues).join(\" \");\n\n  return newValuesString;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n  Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n  | Omit<\n      {\n        [key in keyof Props]: Props[key];\n      },\n      CssVarPropKey<CssVars>\n    >\n  | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n  | {\n      [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n    }\n  | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n  props: Props & { style?: Record<string, string> };\n  cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: GetStylePropParams<CssVars, Props>,\n): {\n  styleProp: StyleProp<CssVars>;\n  otherProps: OtherProps<CssVars, Props>;\n  interactive: boolean;\n} => {\n  const { cssVars } = params;\n\n  if (!params?.props || Object.keys(params.props).length === 0) {\n    return { styleProp: {}, otherProps: {}, interactive: false };\n  }\n\n  // Assign the additional styles to the style object so that it can be passed\n  // to the component as a prop.\n  const { style = {}, ...props } = params.props;\n\n  let styleProp: StyleProp<CssVars> = style;\n  const otherProps: OtherProps<CssVars, Props> = {};\n  let interactive = false;\n\n  Object.keys(props).forEach((_key) => {\n    const key = _key as keyof typeof props;\n    const cssVarsKey = key as unknown as keyof typeof cssVars;\n    const matchingCssVar = cssVars?.[cssVarsKey];\n\n    // If the prop is not a css var, just add it to the otherProps\n    if (!matchingCssVar) {\n      Object.assign(otherProps, { [key]: props[key] });\n      return;\n    }\n\n    const matchingPropValue = props?.[key] as string | undefined;\n\n    if (!matchingPropValue) {\n      Object.assign(styleProp, { [key]: props[key] });\n      return;\n    }\n\n    // Replace the VARIABLE placeholder with the actual value of the prop\n    const mappedValueOfCssVar = matchingCssVar.value.replace(\n      \"VARIABLE\",\n      matchingPropValue,\n    );\n\n    const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n    // If the style contains an interactive prop, set the interactive flag to true\n    // so that the component can include the interactive class\n    if (matchingCssVar.interactive) {\n      interactive = true;\n    }\n\n    if (matchingCssVar.direction) {\n      const currentValueOfCssVar = styleProp?.[cssVarName];\n\n      const directionalValue = applyDirectionalValues({\n        currentValueOfCssVar,\n        value: mappedValueOfCssVar,\n        direction: matchingCssVar.direction,\n      });\n\n      styleProp = {\n        ...styleProp,\n        [cssVarName]: directionalValue,\n      };\n      return;\n    }\n\n    styleProp = {\n      ...styleProp,\n      [cssVarName]: mappedValueOfCssVar,\n    };\n  });\n\n  return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n  return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","props","styleProp","otherProps","interactive","_key","key","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine","React"],"mappings":"mjQA2BMA,EAAyB,CAAC,CAC9B,qBAAAC,EAAuB,UACvB,MAAAC,EACA,UAAAC,CACF,IAA2B,CACnB,KAAA,CAACC,EAAKC,EAAOC,EAAQC,CAAI,EAAIN,EAAqB,MAAM,GAAG,EAE3DO,EAAY,CAChB,IAAAJ,EACA,MAAAC,EACA,OAAAC,EACA,KAAAC,CACF,EAEA,OAAIJ,IAAc,QAChBK,EAAU,IAAMN,GAGdC,IAAc,UAChBK,EAAU,MAAQN,GAGhBC,IAAc,WAChBK,EAAU,OAASN,GAGjBC,IAAc,SAChBK,EAAU,KAAON,GAGfC,IAAc,QAChBK,EAAU,IAAMN,EAChBM,EAAU,MAAQN,EAClBM,EAAU,OAASN,EACnBM,EAAU,KAAON,GAGfC,IAAc,MAChBK,EAAU,KAAON,EACjBM,EAAU,MAAQN,GAGhBC,IAAc,MAChBK,EAAU,IAAMN,EAChBM,EAAU,OAASN,GAMjBC,IAAc,aAChBK,EAAU,IAAMN,EAChBM,EAAU,MAAQN,GAGhBC,IAAc,gBAChBK,EAAU,OAASN,EACnBM,EAAU,KAAON,GAGfC,IAAc,cAChBK,EAAU,IAAMN,EAChBM,EAAU,KAAON,GAGfC,IAAc,eAChBK,EAAU,MAAQN,EAClBM,EAAU,OAASN,GAGG,OAAO,OAAOM,CAAS,EAAE,KAAK,GAAG,CAG3D,EA8BaC,EAIXC,GAKG,CACG,KAAA,CAAE,QAAAC,GAAYD,EAEhB,GAAA,EAACA,GAAA,MAAAA,EAAQ,QAAS,OAAO,KAAKA,EAAO,KAAK,EAAE,SAAW,EAClD,MAAA,CAAE,UAAW,CAAC,EAAG,WAAY,CAAC,EAAG,YAAa,EAAM,EAK7D,KAAM,CAAE,MAAAE,EAAQ,GAAI,GAAGC,GAAUH,EAAO,MAExC,IAAII,EAAgCF,EACpC,MAAMG,EAAyC,CAAC,EAChD,IAAIC,EAAc,GAElB,cAAO,KAAKH,CAAK,EAAE,QAASI,GAAS,CACnC,MAAMC,EAAMD,EACNE,EAAaD,EACbE,EAAiBT,GAAA,YAAAA,EAAUQ,GAGjC,GAAI,CAACC,EAAgB,CACZ,OAAA,OAAOL,EAAY,CAAE,CAACG,CAAG,EAAGL,EAAMK,CAAG,EAAG,EAC/C,MAAA,CAGI,MAAAG,EAAoBR,GAAA,YAAAA,EAAQK,GAElC,GAAI,CAACG,EAAmB,CACf,OAAA,OAAOP,EAAW,CAAE,CAACI,CAAG,EAAGL,EAAMK,CAAG,EAAG,EAC9C,MAAA,CAII,MAAAI,EAAsBF,EAAe,MAAM,QAC/C,WACAC,CACF,EAEME,EAAaH,EAAe,OAQlC,GAJIA,EAAe,cACHJ,EAAA,IAGZI,EAAe,UAAW,CACtB,MAAAnB,EAAuBa,GAAA,YAAAA,EAAYS,GAEnCC,EAAmBxB,EAAuB,CAC9C,qBAAAC,EACA,MAAOqB,EACP,UAAWF,EAAe,SAAA,CAC3B,EAEWN,EAAA,CACV,GAAGA,EACH,CAACS,CAAU,EAAGC,CAChB,EACA,MAAA,CAGUV,EAAA,CACV,GAAGA,EACH,CAACS,CAAU,EAAGD,CAChB,CAAA,CACD,EAEM,CAAE,UAAAR,EAAW,WAAAC,EAAY,YAAAC,CAAY,CAC9C,EC3MaS,EAIXf,GAEOgB,EAAM,QAAQ,IAAMjB,EAAaC,CAAM,EAAG,CAACA,CAAM,CAAC"}

package/dist/esm/index.mjs

@@ -1,117 +1,73 @@
-import { globalStyle as B, keyframes as D, style as K } from "@vanilla-extract/css";
-import { recipe as Y } from "@vanilla-extract/recipes";
-import { createSprinkles as G, defineProperties as H } from "@vanilla-extract/sprinkles";
-import i from "react";
-import c from "@telegraph/tokens";
-const w = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)", black: "var(--tgph-black)", "surface-1": "var(--tgph-surface-1)", "surface-2": "var(--tgph-surface-2)", "alpha-white-1": "var(--tgph-alpha-white-1)", "alpha-white-2": "var(--tgph-alpha-white-2)", "alpha-white-3": "var(--tgph-alpha-white-3)", "alpha-white-4": "var(--tgph-alpha-white-4)", "alpha-white-5": "var(--tgph-alpha-white-5)", "alpha-white-6": "var(--tgph-alpha-white-6)", "alpha-white-7": "var(--tgph-alpha-white-7)", "alpha-white-8": "var(--tgph-alpha-white-8)", "alpha-white-9": "var(--tgph-alpha-white-9)", "alpha-white-10": "var(--tgph-alpha-white-10)", "alpha-white-11": "var(--tgph-alpha-white-11)", "alpha-white-12": "var(--tgph-alpha-white-12)", "alpha-black-1": "var(--tgph-alpha-black-1)", "alpha-black-2": "var(--tgph-alpha-black-2)", "alpha-black-3": "var(--tgph-alpha-black-3)", "alpha-black-4": "var(--tgph-alpha-black-4)", "alpha-black-5": "var(--tgph-alpha-black-5)", "alpha-black-6": "var(--tgph-alpha-black-6)", "alpha-black-7": "var(--tgph-alpha-black-7)", "alpha-black-8": "var(--tgph-alpha-black-8)", "alpha-black-9": "var(--tgph-alpha-black-9)", "alpha-black-10": "var(--tgph-alpha-black-10)", "alpha-black-11": "var(--tgph-alpha-black-11)", "alpha-black-12": "var(--tgph-alpha-black-12)", "gray-1": "var(--tgph-gray-1)", "gray-2": "var(--tgph-gray-2)", "gray-3": "var(--tgph-gray-3)", "gray-4": "var(--tgph-gray-4)", "gray-5": "var(--tgph-gray-5)", "gray-6": "var(--tgph-gray-6)", "gray-7": "var(--tgph-gray-7)", "gray-8": "var(--tgph-gray-8)", "gray-9": "var(--tgph-gray-9)", "gray-10": "var(--tgph-gray-10)", "gray-11": "var(--tgph-gray-11)", "gray-12": "var(--tgph-gray-12)", "beige-1": "var(--tgph-beige-1)", "beige-2": "var(--tgph-beige-2)", "beige-3": "var(--tgph-beige-3)", "beige-4": "var(--tgph-beige-4)", "beige-5": "var(--tgph-beige-5)", "beige-6": "var(--tgph-beige-6)", "beige-7": "var(--tgph-beige-7)", "beige-8": "var(--tgph-beige-8)", "beige-9": "var(--tgph-beige-9)", "beige-10": "var(--tgph-beige-10)", "beige-11": "var(--tgph-beige-11)", "beige-12": "var(--tgph-beige-12)", "accent-1": "var(--tgph-accent-1)", "accent-2": "var(--tgph-accent-2)", "accent-3": "var(--tgph-accent-3)", "accent-4": "var(--tgph-accent-4)", "accent-5": "var(--tgph-accent-5)", "accent-6": "var(--tgph-accent-6)", "accent-7": "var(--tgph-accent-7)", "accent-8": "var(--tgph-accent-8)", "accent-9": "var(--tgph-accent-9)", "accent-10": "var(--tgph-accent-10)", "accent-11": "var(--tgph-accent-11)", "accent-12": "var(--tgph-accent-12)", "green-1": "var(--tgph-green-1)", "green-2": "var(--tgph-green-2)", "green-3": "var(--tgph-green-3)", "green-4": "var(--tgph-green-4)", "green-5": "var(--tgph-green-5)", "green-6": "var(--tgph-green-6)", "green-7": "var(--tgph-green-7)", "green-8": "var(--tgph-green-8)", "green-9": "var(--tgph-green-9)", "green-10": "var(--tgph-green-10)", "green-11": "var(--tgph-green-11)", "green-12": "var(--tgph-green-12)", "yellow-1": "var(--tgph-yellow-1)", "yellow-2": "var(--tgph-yellow-2)", "yellow-3": "var(--tgph-yellow-3)", "yellow-4": "var(--tgph-yellow-4)", "yellow-5": "var(--tgph-yellow-5)", "yellow-6": "var(--tgph-yellow-6)", "yellow-7": "var(--tgph-yellow-7)", "yellow-8": "var(--tgph-yellow-8)", "yellow-9": "var(--tgph-yellow-9)", "yellow-10": "var(--tgph-yellow-10)", "yellow-11": "var(--tgph-yellow-11)", "yellow-12": "var(--tgph-yellow-12)", "blue-1": "var(--tgph-blue-1)", "blue-2": "var(--tgph-blue-2)", "blue-3": "var(--tgph-blue-3)", "blue-4": "var(--tgph-blue-4)", "blue-5": "var(--tgph-blue-5)", "blue-6": "var(--tgph-blue-6)", "blue-7": "var(--tgph-blue-7)", "blue-8": "var(--tgph-blue-8)", "blue-9": "var(--tgph-blue-9)", "blue-10": "var(--tgph-blue-10)", "blue-11": "var(--tgph-blue-11)", "blue-12": "var(--tgph-blue-12)", "red-1": "var(--tgph-red-1)", "red-2": "var(--tgph-red-2)", "red-3": "var(--tgph-red-3)", "red-4": "var(--tgph-red-4)", "red-5": "var(--tgph-red-5)", "red-6": "var(--tgph-red-6)", "red-7": "var(--tgph-red-7)", "red-8": "var(--tgph-red-8)", "red-9": "var(--tgph-red-9)", "red-10": "var(--tgph-red-10)", "red-11": "var(--tgph-red-11)", "red-12": "var(--tgph-red-12)", "purple-1": "var(--tgph-purple-1)", "purple-2": "var(--tgph-purple-2)", "purple-3": "var(--tgph-purple-3)", "purple-4": "var(--tgph-purple-4)", "purple-5": "var(--tgph-purple-5)", "purple-6": "var(--tgph-purple-6)", "purple-7": "var(--tgph-purple-7)", "purple-8": "var(--tgph-purple-8)", "purple-9": "var(--tgph-purple-9)", "purple-10": "var(--tgph-purple-10)", "purple-11": "var(--tgph-purple-11)", "purple-12": "var(--tgph-purple-12)" }, k = { 0: "var(--tgph-rounded-0)", 1: "var(--tgph-rounded-1)", 2: "var(--tgph-rounded-2)", 3: "var(--tgph-rounded-3)", 4: "var(--tgph-rounded-4)", 5: "var(--tgph-rounded-5)", 6: "var(--tgph-rounded-6)", full: "var(--tgph-rounded-full)" }, m = { 0: "var(--tgph-shadow-0)", 1: "var(--tgph-shadow-1)", 2: "var(--tgph-shadow-2)", 3: "var(--tgph-shadow-3)", inner: "var(--tgph-shadow-inner)" }, f = { 0: "var(--tgph-spacing-0)", 1: "var(--tgph-spacing-1)", 2: "var(--tgph-spacing-2)", 3: "var(--tgph-spacing-3)", 4: "var(--tgph-spacing-4)", 5: "var(--tgph-spacing-5)", 6: "var(--tgph-spacing-6)", 7: "var(--tgph-spacing-7)", 8: "var(--tgph-spacing-8)", 9: "var(--tgph-spacing-9)", 10: "var(--tgph-spacing-10)", 11: "var(--tgph-spacing-11)", 12: "var(--tgph-spacing-12)", 14: "var(--tgph-spacing-14)", 16: "var(--tgph-spacing-16)", 20: "var(--tgph-spacing-20)", 24: "var(--tgph-spacing-24)", 28: "var(--tgph-spacing-28)", 32: "var(--tgph-spacing-32)", 36: "var(--tgph-spacing-36)", 40: "var(--tgph-spacing-40)", 44: "var(--tgph-spacing-44)", 48: "var(--tgph-spacing-48)", 52: "var(--tgph-spacing-52)", 56: "var(--tgph-spacing-56)", 60: "var(--tgph-spacing-60)", 64: "var(--tgph-spacing-64)", 72: "var(--tgph-spacing-72)", 80: "var(--tgph-spacing-80)", 96: "var(--tgph-spacing-96)", 120: "var(--tgph-spacing-120)", 140: "var(--tgph-spacing-140)", 160: "var(--tgph-spacing-160)", px: "var(--tgph-spacing-px)", full: "var(--tgph-spacing-full)", auto: "var(--tgph-spacing-auto)" }, x = { sans: "var(--tgph-family-sans)", mono: "var(--tgph-family-mono)" }, P = { 0: "var(--tgph-leading-0)", 1: "var(--tgph-leading-1)", 2: "var(--tgph-leading-2)", 3: "var(--tgph-leading-3)", 4: "var(--tgph-leading-4)", 5: "var(--tgph-leading-5)", 6: "var(--tgph-leading-6)", 7: "var(--tgph-leading-7)", 8: "var(--tgph-leading-8)", 9: "var(--tgph-leading-9)", "code-0": "var(--tgph-leading-code-0)", "code-1": "var(--tgph-leading-code-1)", "code-2": "var(--tgph-leading-code-2)", "code-3": "var(--tgph-leading-code-3)", "code-4": "var(--tgph-leading-code-4)", "code-5": "var(--tgph-leading-code-5)", "code-6": "var(--tgph-leading-code-6)", "code-7": "var(--tgph-leading-code-7)", "code-8": "var(--tgph-leading-code-8)", "code-9": "var(--tgph-leading-code-9)" }, I = { 0: "var(--tgph-tracking-0)", 1: "var(--tgph-tracking-1)", 2: "var(--tgph-tracking-2)", 3: "var(--tgph-tracking-3)", 4: "var(--tgph-tracking-4)", 5: "var(--tgph-tracking-5)", 6: "var(--tgph-tracking-6)", 7: "var(--tgph-tracking-7)", 8: "var(--tgph-tracking-8)", 9: "var(--tgph-tracking-9)" }, V = { 0: "var(--tgph-text-0)", 1: "var(--tgph-text-1)", 2: "var(--tgph-text-2)", 3: "var(--tgph-text-3)", 4: "var(--tgph-text-4)", 5: "var(--tgph-text-5)", 6: "var(--tgph-text-6)", 7: "var(--tgph-text-7)", 8: "var(--tgph-text-8)", 9: "var(--tgph-text-9)", "code-0": "var(--tgph-text-code-0)", "code-1": "var(--tgph-text-code-1)", "code-2": "var(--tgph-text-code-2)", "code-4": "var(--tgph-text-code-4)", "code-5": "var(--tgph-text-code-5)", "code-6": "var(--tgph-text-code-6)", "code-7": "var(--tgph-text-code-7)", "code-8": "var(--tgph-text-code-8)", "code-9": "var(--tgph-text-code-9)" }, z = { regular: "var(--tgph-weight-regular)", medium: "var(--tgph-weight-medium)", "semi-bold": "var(--tgph-weight-semi-bold)" }, S = { sm: "var(--tgph-breakpoint-sm)", md: "var(--tgph-breakpoint-md)", lg: "var(--tgph-breakpoint-lg)", xl: "var(--tgph-breakpoint-xl)", "2xl": "var(--tgph-breakpoint-2xl)" }, O = { hidden: "var(--tgph-zIndex-hidden)", base: "var(--tgph-zIndex-base)", auto: "var(--tgph-zIndex-auto)", dropdown: "var(--tgph-zIndex-dropdown)", sticky: "var(--tgph-zIndex-sticky)", banner: "var(--tgph-zIndex-banner)", overlay: "var(--tgph-zIndex-overlay)", modal: "var(--tgph-zIndex-modal)", popover: "var(--tgph-zIndex-popover)", skipLink: "var(--tgph-zIndex-skipLink)", toast: "var(--tgph-zIndex-toast)", tooltip: "var(--tgph-zIndex-tooltip)" }, L = {
+import u from "react";
+const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)", black: "var(--tgph-black)", "surface-1": "var(--tgph-surface-1)", "surface-2": "var(--tgph-surface-2)", "alpha-white-1": "var(--tgph-alpha-white-1)", "alpha-white-2": "var(--tgph-alpha-white-2)", "alpha-white-3": "var(--tgph-alpha-white-3)", "alpha-white-4": "var(--tgph-alpha-white-4)", "alpha-white-5": "var(--tgph-alpha-white-5)", "alpha-white-6": "var(--tgph-alpha-white-6)", "alpha-white-7": "var(--tgph-alpha-white-7)", "alpha-white-8": "var(--tgph-alpha-white-8)", "alpha-white-9": "var(--tgph-alpha-white-9)", "alpha-white-10": "var(--tgph-alpha-white-10)", "alpha-white-11": "var(--tgph-alpha-white-11)", "alpha-white-12": "var(--tgph-alpha-white-12)", "alpha-black-1": "var(--tgph-alpha-black-1)", "alpha-black-2": "var(--tgph-alpha-black-2)", "alpha-black-3": "var(--tgph-alpha-black-3)", "alpha-black-4": "var(--tgph-alpha-black-4)", "alpha-black-5": "var(--tgph-alpha-black-5)", "alpha-black-6": "var(--tgph-alpha-black-6)", "alpha-black-7": "var(--tgph-alpha-black-7)", "alpha-black-8": "var(--tgph-alpha-black-8)", "alpha-black-9": "var(--tgph-alpha-black-9)", "alpha-black-10": "var(--tgph-alpha-black-10)", "alpha-black-11": "var(--tgph-alpha-black-11)", "alpha-black-12": "var(--tgph-alpha-black-12)", "gray-1": "var(--tgph-gray-1)", "gray-2": "var(--tgph-gray-2)", "gray-3": "var(--tgph-gray-3)", "gray-4": "var(--tgph-gray-4)", "gray-5": "var(--tgph-gray-5)", "gray-6": "var(--tgph-gray-6)", "gray-7": "var(--tgph-gray-7)", "gray-8": "var(--tgph-gray-8)", "gray-9": "var(--tgph-gray-9)", "gray-10": "var(--tgph-gray-10)", "gray-11": "var(--tgph-gray-11)", "gray-12": "var(--tgph-gray-12)", "beige-1": "var(--tgph-beige-1)", "beige-2": "var(--tgph-beige-2)", "beige-3": "var(--tgph-beige-3)", "beige-4": "var(--tgph-beige-4)", "beige-5": "var(--tgph-beige-5)", "beige-6": "var(--tgph-beige-6)", "beige-7": "var(--tgph-beige-7)", "beige-8": "var(--tgph-beige-8)", "beige-9": "var(--tgph-beige-9)", "beige-10": "var(--tgph-beige-10)", "beige-11": "var(--tgph-beige-11)", "beige-12": "var(--tgph-beige-12)", "accent-1": "var(--tgph-accent-1)", "accent-2": "var(--tgph-accent-2)", "accent-3": "var(--tgph-accent-3)", "accent-4": "var(--tgph-accent-4)", "accent-5": "var(--tgph-accent-5)", "accent-6": "var(--tgph-accent-6)", "accent-7": "var(--tgph-accent-7)", "accent-8": "var(--tgph-accent-8)", "accent-9": "var(--tgph-accent-9)", "accent-10": "var(--tgph-accent-10)", "accent-11": "var(--tgph-accent-11)", "accent-12": "var(--tgph-accent-12)", "green-1": "var(--tgph-green-1)", "green-2": "var(--tgph-green-2)", "green-3": "var(--tgph-green-3)", "green-4": "var(--tgph-green-4)", "green-5": "var(--tgph-green-5)", "green-6": "var(--tgph-green-6)", "green-7": "var(--tgph-green-7)", "green-8": "var(--tgph-green-8)", "green-9": "var(--tgph-green-9)", "green-10": "var(--tgph-green-10)", "green-11": "var(--tgph-green-11)", "green-12": "var(--tgph-green-12)", "yellow-1": "var(--tgph-yellow-1)", "yellow-2": "var(--tgph-yellow-2)", "yellow-3": "var(--tgph-yellow-3)", "yellow-4": "var(--tgph-yellow-4)", "yellow-5": "var(--tgph-yellow-5)", "yellow-6": "var(--tgph-yellow-6)", "yellow-7": "var(--tgph-yellow-7)", "yellow-8": "var(--tgph-yellow-8)", "yellow-9": "var(--tgph-yellow-9)", "yellow-10": "var(--tgph-yellow-10)", "yellow-11": "var(--tgph-yellow-11)", "yellow-12": "var(--tgph-yellow-12)", "blue-1": "var(--tgph-blue-1)", "blue-2": "var(--tgph-blue-2)", "blue-3": "var(--tgph-blue-3)", "blue-4": "var(--tgph-blue-4)", "blue-5": "var(--tgph-blue-5)", "blue-6": "var(--tgph-blue-6)", "blue-7": "var(--tgph-blue-7)", "blue-8": "var(--tgph-blue-8)", "blue-9": "var(--tgph-blue-9)", "blue-10": "var(--tgph-blue-10)", "blue-11": "var(--tgph-blue-11)", "blue-12": "var(--tgph-blue-12)", "red-1": "var(--tgph-red-1)", "red-2": "var(--tgph-red-2)", "red-3": "var(--tgph-red-3)", "red-4": "var(--tgph-red-4)", "red-5": "var(--tgph-red-5)", "red-6": "var(--tgph-red-6)", "red-7": "var(--tgph-red-7)", "red-8": "var(--tgph-red-8)", "red-9": "var(--tgph-red-9)", "red-10": "var(--tgph-red-10)", "red-11": "var(--tgph-red-11)", "red-12": "var(--tgph-red-12)", "purple-1": "var(--tgph-purple-1)", "purple-2": "var(--tgph-purple-2)", "purple-3": "var(--tgph-purple-3)", "purple-4": "var(--tgph-purple-4)", "purple-5": "var(--tgph-purple-5)", "purple-6": "var(--tgph-purple-6)", "purple-7": "var(--tgph-purple-7)", "purple-8": "var(--tgph-purple-8)", "purple-9": "var(--tgph-purple-9)", "purple-10": "var(--tgph-purple-10)", "purple-11": "var(--tgph-purple-11)", "purple-12": "var(--tgph-purple-12)" }, w = { 0: "var(--tgph-rounded-0)", 1: "var(--tgph-rounded-1)", 2: "var(--tgph-rounded-2)", 3: "var(--tgph-rounded-3)", 4: "var(--tgph-rounded-4)", 5: "var(--tgph-rounded-5)", 6: "var(--tgph-rounded-6)", full: "var(--tgph-rounded-full)" }, k = { 0: "var(--tgph-shadow-0)", 1: "var(--tgph-shadow-1)", 2: "var(--tgph-shadow-2)", 3: "var(--tgph-shadow-3)", inner: "var(--tgph-shadow-inner)" }, f = { 0: "var(--tgph-spacing-0)", 1: "var(--tgph-spacing-1)", 2: "var(--tgph-spacing-2)", 3: "var(--tgph-spacing-3)", 4: "var(--tgph-spacing-4)", 5: "var(--tgph-spacing-5)", 6: "var(--tgph-spacing-6)", 7: "var(--tgph-spacing-7)", 8: "var(--tgph-spacing-8)", 9: "var(--tgph-spacing-9)", 10: "var(--tgph-spacing-10)", 11: "var(--tgph-spacing-11)", 12: "var(--tgph-spacing-12)", 14: "var(--tgph-spacing-14)", 16: "var(--tgph-spacing-16)", 20: "var(--tgph-spacing-20)", 24: "var(--tgph-spacing-24)", 28: "var(--tgph-spacing-28)", 32: "var(--tgph-spacing-32)", 36: "var(--tgph-spacing-36)", 40: "var(--tgph-spacing-40)", 44: "var(--tgph-spacing-44)", 48: "var(--tgph-spacing-48)", 52: "var(--tgph-spacing-52)", 56: "var(--tgph-spacing-56)", 60: "var(--tgph-spacing-60)", 64: "var(--tgph-spacing-64)", 72: "var(--tgph-spacing-72)", 80: "var(--tgph-spacing-80)", 96: "var(--tgph-spacing-96)", 120: "var(--tgph-spacing-120)", 140: "var(--tgph-spacing-140)", 160: "var(--tgph-spacing-160)", px: "var(--tgph-spacing-px)", full: "var(--tgph-spacing-full)", auto: "var(--tgph-spacing-auto)" }, x = { sans: "var(--tgph-family-sans)", mono: "var(--tgph-family-mono)" }, m = { 0: "var(--tgph-leading-0)", 1: "var(--tgph-leading-1)", 2: "var(--tgph-leading-2)", 3: "var(--tgph-leading-3)", 4: "var(--tgph-leading-4)", 5: "var(--tgph-leading-5)", 6: "var(--tgph-leading-6)", 7: "var(--tgph-leading-7)", 8: "var(--tgph-leading-8)", 9: "var(--tgph-leading-9)", "code-0": "var(--tgph-leading-code-0)", "code-1": "var(--tgph-leading-code-1)", "code-2": "var(--tgph-leading-code-2)", "code-3": "var(--tgph-leading-code-3)", "code-4": "var(--tgph-leading-code-4)", "code-5": "var(--tgph-leading-code-5)", "code-6": "var(--tgph-leading-code-6)", "code-7": "var(--tgph-leading-code-7)", "code-8": "var(--tgph-leading-code-8)", "code-9": "var(--tgph-leading-code-9)" }, I = { 0: "var(--tgph-tracking-0)", 1: "var(--tgph-tracking-1)", 2: "var(--tgph-tracking-2)", 3: "var(--tgph-tracking-3)", 4: "var(--tgph-tracking-4)", 5: "var(--tgph-tracking-5)", 6: "var(--tgph-tracking-6)", 7: "var(--tgph-tracking-7)", 8: "var(--tgph-tracking-8)", 9: "var(--tgph-tracking-9)" }, V = { 0: "var(--tgph-text-0)", 1: "var(--tgph-text-1)", 2: "var(--tgph-text-2)", 3: "var(--tgph-text-3)", 4: "var(--tgph-text-4)", 5: "var(--tgph-text-5)", 6: "var(--tgph-text-6)", 7: "var(--tgph-text-7)", 8: "var(--tgph-text-8)", 9: "var(--tgph-text-9)", "code-0": "var(--tgph-text-code-0)", "code-1": "var(--tgph-text-code-1)", "code-2": "var(--tgph-text-code-2)", "code-4": "var(--tgph-text-code-4)", "code-5": "var(--tgph-text-code-5)", "code-6": "var(--tgph-text-code-6)", "code-7": "var(--tgph-text-code-7)", "code-8": "var(--tgph-text-code-8)", "code-9": "var(--tgph-text-code-9)" }, z = { regular: "var(--tgph-weight-regular)", medium: "var(--tgph-weight-medium)", "semi-bold": "var(--tgph-weight-semi-bold)" }, O = { sm: "var(--tgph-breakpoint-sm)", md: "var(--tgph-breakpoint-md)", lg: "var(--tgph-breakpoint-lg)", xl: "var(--tgph-breakpoint-xl)", "2xl": "var(--tgph-breakpoint-2xl)" }, j = { hidden: "var(--tgph-zIndex-hidden)", base: "var(--tgph-zIndex-base)", auto: "var(--tgph-zIndex-auto)", dropdown: "var(--tgph-zIndex-dropdown)", sticky: "var(--tgph-zIndex-sticky)", banner: "var(--tgph-zIndex-banner)", overlay: "var(--tgph-zIndex-overlay)", modal: "var(--tgph-zIndex-modal)", popover: "var(--tgph-zIndex-popover)", skipLink: "var(--tgph-zIndex-skipLink)", toast: "var(--tgph-zIndex-toast)", tooltip: "var(--tgph-zIndex-tooltip)" }, E = {
   "border-style": { solid: "var(--tgph-border-style-solid)", dashed: "var(--tgph-border-style-dashed)" },
-  color: w,
-  rounded: k,
-  shadow: m,
+  color: y,
+  rounded: w,
+  shadow: k,
   spacing: f,
   family: x,
-  leading: P,
+  leading: m,
   tracking: I,
   text: V,
   weight: z,
-  breakpoint: S,
-  zIndex: O
-}, M = ({
-  props: r,
-  stylePropsFn: a
-}) => {
-  const e = i.useMemo(() => r, [r]), p = i.useMemo(() => {
-    const v = a.properties, n = {}, t = {};
-    return e ? (Object.keys(e).forEach((h) => {
-      const l = h;
-      v.has(l) && Object.assign(n, {
-        [l]: e[l]
-      }), v.has(l) || Object.assign(t, {
-        [l]: e[l]
-      });
-    }), { styleProps: n, componentProps: t }) : { styleProps: n, componentProps: t };
-  }, [e, a == null ? void 0 : a.properties]), g = i.useMemo(() => a(p.styleProps), [p.styleProps, a]);
-  return {
-    styleProps: p.styleProps,
-    componentProps: p.componentProps,
-    styleClassName: g
-  };
-}, R = {
-  conditions: {
-    sm: { "@media": `screen and (min-width: ${c.tokens.breakpoint.sm})` },
-    md: { "@media": `screen and (min-width: ${c.tokens.breakpoint.md})` },
-    lg: { "@media": `screen and (min-width: ${c.tokens.breakpoint.lg})` },
-    xl: { "@media": `screen and (min-width: ${c.tokens.breakpoint.xl})` },
-    "2xl": {
-      "@media": `screen and (min-width: ${c.tokens.breakpoint["2xl"]})`
-    }
-  },
-  defaultCondition: "sm",
-  responsiveArray: ["sm", "md", "lg", "xl", "2xl"]
-}, j = ({
+  breakpoint: O,
+  zIndex: j
+}, P = ({
   currentValueOfCssVar: r = "0 0 0 0",
   value: a,
   direction: e
 }) => {
-  const [p, g, v, n] = r.split(" "), t = {
-    top: p,
-    right: g,
+  const [g, p, v, n] = r.split(" "), t = {
+    top: g,
+    right: p,
     bottom: v,
     left: n
   };
   return e === "top" && (t.top = a), e === "right" && (t.right = a), e === "bottom" && (t.bottom = a), e === "left" && (t.left = a), e === "all" && (t.top = a, t.right = a, t.bottom = a, t.left = a), e === "x" && (t.left = a, t.right = a), e === "y" && (t.top = a, t.bottom = a), e === "side-top" && (t.top = a, t.right = a), e === "side-bottom" && (t.bottom = a, t.left = a), e === "side-left" && (t.top = a, t.left = a), e === "side-right" && (t.right = a, t.bottom = a), Object.values(t).join(" ");
-}, E = (r) => {
+}, S = (r) => {
   const { cssVars: a } = r;
   if (!(r != null && r.props) || Object.keys(r.props).length === 0)
     return { styleProp: {}, otherProps: {}, interactive: !1 };
-  const { style: e = {}, ...p } = r.props;
-  let g = e;
+  const { style: e = {}, ...g } = r.props;
+  let p = e;
   const v = {};
   let n = !1;
-  return Object.keys(p).forEach((t) => {
-    const h = t, l = h, o = a == null ? void 0 : a[l];
-    if (!o) {
-      Object.assign(v, { [h]: p[h] });
+  return Object.keys(g).forEach((t) => {
+    const h = t, d = h, l = a == null ? void 0 : a[d];
+    if (!l) {
+      Object.assign(v, { [h]: g[h] });
       return;
     }
-    const d = p == null ? void 0 : p[h];
-    if (!d) {
-      Object.assign(g, { [h]: p[h] });
+    const i = g == null ? void 0 : g[h];
+    if (!i) {
+      Object.assign(p, { [h]: g[h] });
       return;
     }
-    const b = o.value.replace(
+    const o = l.value.replace(
       "VARIABLE",
-      d
-    ), s = o.cssVar;
-    if (o.interactive && (n = !0), o.direction) {
-      const u = g == null ? void 0 : g[s], y = j({
-        currentValueOfCssVar: u,
-        value: b,
-        direction: o.direction
+      i
+    ), c = l.cssVar;
+    if (l.interactive && (n = !0), l.direction) {
+      const s = p == null ? void 0 : p[c], b = P({
+        currentValueOfCssVar: s,
+        value: o,
+        direction: l.direction
       });
-      g = {
-        ...g,
-        [s]: y
+      p = {
+        ...p,
+        [c]: b
       };
       return;
     }
-    g = {
-      ...g,
-      [s]: b
+    p = {
+      ...p,
+      [c]: o
     };
-  }), { styleProp: g, otherProps: v, interactive: n };
-}, A = (r) => i.useMemo(() => E(r), [r]);
+  }), { styleProp: p, otherProps: v, interactive: n };
+}, L = (r) => u.useMemo(() => S(r), [r]);
 export {
-  R as RESPONSIVE_STYLE_PROPS,
-  G as createStyleProps,
-  H as defineStyleProps,
-  E as getStyleProp,
-  B as globalStyle,
-  D as keyframes,
-  K as style,
-  L as tokens,
-  A as useStyleEngine,
-  M as useStyleProps,
-  Y as variant
+  S as getStyleProp,
+  E as tokens,
+  L as useStyleEngine
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/hooks/useStyleProps.ts","../../src/constants/responsive-style-props.ts","../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["import { type SprinklesProperties as StyleProperties } from \"@vanilla-extract/sprinkles\";\nimport React from \"react\";\n\nimport { type createStyleProps } from \"../index\";\n\ntype StylePropFn<StylePropFnProperties extends StyleProperties[]> = ReturnType<\n  typeof createStyleProps<StylePropFnProperties>\n>;\n\ntype StyleProps<StylePropFnProperties extends StyleProperties[]> = Parameters<\n  StylePropFn<StylePropFnProperties>\n>[0];\n\ntype ComponentProps<\n  Props,\n  StylePropFnProperties extends StyleProperties[],\n> = Omit<Props, keyof StyleProps<StylePropFnProperties>>;\n\ntype UseStylePropsParams<\n  Props,\n  StylePropFnProperties extends StyleProperties[],\n> = {\n  props: Props;\n  stylePropsFn: StylePropFn<StylePropFnProperties>;\n};\n\nexport const useStyleProps = <\n  Props,\n  StylePropFnProperties extends StyleProperties[],\n>({\n  props,\n  stylePropsFn,\n}: UseStylePropsParams<Props, StylePropFnProperties>) => {\n  // Keep this memoed to prevent unnecessary re-renders\n  const memoizedProps = React.useMemo<Props>(() => props, [props]);\n\n  // Filter the props into styleProps and componentProps so that we can\n  // pass styleProps to the stylePropsFn and componentProps to the component\n  const filteredProps = React.useMemo(() => {\n    const stylePropFnProperties = stylePropsFn.properties;\n\n    const styleProps = {} as StyleProps<StylePropFnProperties>;\n    const componentProps = {} as ComponentProps<Props, StylePropFnProperties>;\n\n    // If there are no memoized props, return the empty styleProps and componentProps objects\n    if (!memoizedProps) return { styleProps, componentProps };\n\n    Object.keys(memoizedProps).forEach((_key) => {\n      const key = _key as keyof StyleProps<StylePropFnProperties> & keyof Props;\n      if (stylePropFnProperties.has(key)) {\n        Object.assign(styleProps, {\n          [key]: memoizedProps[key],\n        });\n      }\n      if (!stylePropFnProperties.has(key)) {\n        Object.assign(componentProps, {\n          [key]: memoizedProps[key],\n        });\n      }\n    });\n\n    return { styleProps, componentProps };\n  }, [memoizedProps, stylePropsFn?.properties]);\n\n  // Generate the style class name that we can apply to the component\n  const styleClassName = React.useMemo(() => {\n    return stylePropsFn(filteredProps.styleProps);\n  }, [filteredProps.styleProps, stylePropsFn]);\n\n  return {\n    styleProps: filteredProps.styleProps,\n    componentProps: filteredProps.componentProps,\n    styleClassName,\n  };\n};\n","import t from \"@telegraph/tokens\";\n\nexport const RESPONSIVE_STYLE_PROPS = {\n  conditions: {\n    sm: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.sm})` },\n    md: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.md})` },\n    lg: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.lg})` },\n    xl: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.xl})` },\n    \"2xl\": {\n      \"@media\": `screen and (min-width: ${t.tokens.breakpoint[\"2xl\"]})`,\n    },\n  },\n  defaultCondition: \"sm\",\n  responsiveArray: [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"],\n};\n","type Direction =\n  | \"x\"\n  | \"y\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"all\"\n  | \"side-top\"\n  | \"side-bottom\"\n  | \"side-left\"\n  | \"side-right\";\n\nexport type CssVarProp = {\n  cssVar: string;\n  value: string;\n  direction?: Direction;\n  interactive?: boolean;\n};\n\ntype ApplyDirectionProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  direction?: Direction;\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n  currentValueOfCssVar = \"0 0 0 0\",\n  value,\n  direction,\n}: ApplyDirectionProps) => {\n  const [top, right, bottom, left] = currentValueOfCssVar.split(\" \");\n\n  const newValues = {\n    top,\n    right,\n    bottom,\n    left,\n  };\n\n  if (direction === \"top\") {\n    newValues.top = value;\n  }\n\n  if (direction === \"right\") {\n    newValues.right = value;\n  }\n\n  if (direction === \"bottom\") {\n    newValues.bottom = value;\n  }\n\n  if (direction === \"left\") {\n    newValues.left = value;\n  }\n\n  if (direction === \"all\") {\n    newValues.top = value;\n    newValues.right = value;\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"x\") {\n    newValues.left = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"y\") {\n    newValues.top = value;\n    newValues.bottom = value;\n  }\n\n  // \"side\" direction is used for things like border-radius\n  // where we are settings values on corners instead of sides\n  // entire sides like padding and margin provide.\n  if (direction === \"side-top\") {\n    newValues.top = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"side-bottom\") {\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-left\") {\n    newValues.top = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-right\") {\n    newValues.right = value;\n    newValues.bottom = value;\n  }\n\n  const newValuesString = Object.values(newValues).join(\" \");\n\n  return newValuesString;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n  Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n  | Omit<\n      {\n        [key in keyof Props]: Props[key];\n      },\n      CssVarPropKey<CssVars>\n    >\n  | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n  | {\n      [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n    }\n  | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n  props: Props & { style?: Record<string, string> };\n  cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: GetStylePropParams<CssVars, Props>,\n): {\n  styleProp: StyleProp<CssVars>;\n  otherProps: OtherProps<CssVars, Props>;\n  interactive: boolean;\n} => {\n  const { cssVars } = params;\n\n  if (!params?.props || Object.keys(params.props).length === 0) {\n    return { styleProp: {}, otherProps: {}, interactive: false };\n  }\n\n  // Assign the additional styles to the style object so that it can be passed\n  // to the component as a prop.\n  const { style = {}, ...props } = params.props;\n\n  let styleProp: StyleProp<CssVars> = style;\n  const otherProps: OtherProps<CssVars, Props> = {};\n  let interactive = false;\n\n  Object.keys(props).forEach((_key) => {\n    const key = _key as keyof typeof props;\n    const cssVarsKey = key as unknown as keyof typeof cssVars;\n    const matchingCssVar = cssVars?.[cssVarsKey];\n\n    // If the prop is not a css var, just add it to the otherProps\n    if (!matchingCssVar) {\n      Object.assign(otherProps, { [key]: props[key] });\n      return;\n    }\n\n    const matchingPropValue = props?.[key] as string | undefined;\n\n    if (!matchingPropValue) {\n      Object.assign(styleProp, { [key]: props[key] });\n      return;\n    }\n\n    // Replace the VARIABLE placeholder with the actual value of the prop\n    const mappedValueOfCssVar = matchingCssVar.value.replace(\n      \"VARIABLE\",\n      matchingPropValue,\n    );\n\n    const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n    // If the style contains an interactive prop, set the interactive flag to true\n    // so that the component can include the interactive class\n    if (matchingCssVar.interactive) {\n      interactive = true;\n    }\n\n    if (matchingCssVar.direction) {\n      const currentValueOfCssVar = styleProp?.[cssVarName];\n\n      const directionalValue = applyDirectionalValues({\n        currentValueOfCssVar,\n        value: mappedValueOfCssVar,\n        direction: matchingCssVar.direction,\n      });\n\n      styleProp = {\n        ...styleProp,\n        [cssVarName]: directionalValue,\n      };\n      return;\n    }\n\n    styleProp = {\n      ...styleProp,\n      [cssVarName]: mappedValueOfCssVar,\n    };\n  });\n\n  return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n  return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["useStyleProps","props","stylePropsFn","memoizedProps","React","filteredProps","stylePropFnProperties","styleProps","componentProps","_key","key","styleClassName","RESPONSIVE_STYLE_PROPS","t","applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","styleProp","otherProps","interactive","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n  | \"x\"\n  | \"y\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"all\"\n  | \"side-top\"\n  | \"side-bottom\"\n  | \"side-left\"\n  | \"side-right\";\n\nexport type CssVarProp = {\n  cssVar: string;\n  value: string;\n  direction?: Direction;\n  interactive?: boolean;\n};\n\ntype ApplyDirectionProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  direction?: Direction;\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n  currentValueOfCssVar = \"0 0 0 0\",\n  value,\n  direction,\n}: ApplyDirectionProps) => {\n  const [top, right, bottom, left] = currentValueOfCssVar.split(\" \");\n\n  const newValues = {\n    top,\n    right,\n    bottom,\n    left,\n  };\n\n  if (direction === \"top\") {\n    newValues.top = value;\n  }\n\n  if (direction === \"right\") {\n    newValues.right = value;\n  }\n\n  if (direction === \"bottom\") {\n    newValues.bottom = value;\n  }\n\n  if (direction === \"left\") {\n    newValues.left = value;\n  }\n\n  if (direction === \"all\") {\n    newValues.top = value;\n    newValues.right = value;\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"x\") {\n    newValues.left = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"y\") {\n    newValues.top = value;\n    newValues.bottom = value;\n  }\n\n  // \"side\" direction is used for things like border-radius\n  // where we are settings values on corners instead of sides\n  // entire sides like padding and margin provide.\n  if (direction === \"side-top\") {\n    newValues.top = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"side-bottom\") {\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-left\") {\n    newValues.top = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-right\") {\n    newValues.right = value;\n    newValues.bottom = value;\n  }\n\n  const newValuesString = Object.values(newValues).join(\" \");\n\n  return newValuesString;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n  Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n  | Omit<\n      {\n        [key in keyof Props]: Props[key];\n      },\n      CssVarPropKey<CssVars>\n    >\n  | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n  | {\n      [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n    }\n  | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n  props: Props & { style?: Record<string, string> };\n  cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: GetStylePropParams<CssVars, Props>,\n): {\n  styleProp: StyleProp<CssVars>;\n  otherProps: OtherProps<CssVars, Props>;\n  interactive: boolean;\n} => {\n  const { cssVars } = params;\n\n  if (!params?.props || Object.keys(params.props).length === 0) {\n    return { styleProp: {}, otherProps: {}, interactive: false };\n  }\n\n  // Assign the additional styles to the style object so that it can be passed\n  // to the component as a prop.\n  const { style = {}, ...props } = params.props;\n\n  let styleProp: StyleProp<CssVars> = style;\n  const otherProps: OtherProps<CssVars, Props> = {};\n  let interactive = false;\n\n  Object.keys(props).forEach((_key) => {\n    const key = _key as keyof typeof props;\n    const cssVarsKey = key as unknown as keyof typeof cssVars;\n    const matchingCssVar = cssVars?.[cssVarsKey];\n\n    // If the prop is not a css var, just add it to the otherProps\n    if (!matchingCssVar) {\n      Object.assign(otherProps, { [key]: props[key] });\n      return;\n    }\n\n    const matchingPropValue = props?.[key] as string | undefined;\n\n    if (!matchingPropValue) {\n      Object.assign(styleProp, { [key]: props[key] });\n      return;\n    }\n\n    // Replace the VARIABLE placeholder with the actual value of the prop\n    const mappedValueOfCssVar = matchingCssVar.value.replace(\n      \"VARIABLE\",\n      matchingPropValue,\n    );\n\n    const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n    // If the style contains an interactive prop, set the interactive flag to true\n    // so that the component can include the interactive class\n    if (matchingCssVar.interactive) {\n      interactive = true;\n    }\n\n    if (matchingCssVar.direction) {\n      const currentValueOfCssVar = styleProp?.[cssVarName];\n\n      const directionalValue = applyDirectionalValues({\n        currentValueOfCssVar,\n        value: mappedValueOfCssVar,\n        direction: matchingCssVar.direction,\n      });\n\n      styleProp = {\n        ...styleProp,\n        [cssVarName]: directionalValue,\n      };\n      return;\n    }\n\n    styleProp = {\n      ...styleProp,\n      [cssVarName]: mappedValueOfCssVar,\n    };\n  });\n\n  return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n  return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","props","styleProp","otherProps","interactive","_key","key","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine","React"],"mappings":";;;;;;;;;;;;;;GA2BMA,IAAyB,CAAC;AAAA,EAC9B,sBAAAC,IAAuB;AAAA,EACvB,OAAAC;AAAA,EACA,WAAAC;AACF,MAA2B;AACnB,QAAA,CAACC,GAAKC,GAAOC,GAAQC,CAAI,IAAIN,EAAqB,MAAM,GAAG,GAE3DO,IAAY;AAAA,IAChB,KAAAJ;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,EACF;AAEA,SAAIJ,MAAc,UAChBK,EAAU,MAAMN,IAGdC,MAAc,YAChBK,EAAU,QAAQN,IAGhBC,MAAc,aAChBK,EAAU,SAASN,IAGjBC,MAAc,WAChBK,EAAU,OAAON,IAGfC,MAAc,UAChBK,EAAU,MAAMN,GAChBM,EAAU,QAAQN,GAClBM,EAAU,SAASN,GACnBM,EAAU,OAAON,IAGfC,MAAc,QAChBK,EAAU,OAAON,GACjBM,EAAU,QAAQN,IAGhBC,MAAc,QAChBK,EAAU,MAAMN,GAChBM,EAAU,SAASN,IAMjBC,MAAc,eAChBK,EAAU,MAAMN,GAChBM,EAAU,QAAQN,IAGhBC,MAAc,kBAChBK,EAAU,SAASN,GACnBM,EAAU,OAAON,IAGfC,MAAc,gBAChBK,EAAU,MAAMN,GAChBM,EAAU,OAAON,IAGfC,MAAc,iBAChBK,EAAU,QAAQN,GAClBM,EAAU,SAASN,IAGG,OAAO,OAAOM,CAAS,EAAE,KAAK,GAAG;AAG3D,GA8BaC,IAAe,CAI1BC,MAKG;AACG,QAAA,EAAE,SAAAC,MAAYD;AAEhB,MAAA,EAACA,KAAA,QAAAA,EAAQ,UAAS,OAAO,KAAKA,EAAO,KAAK,EAAE,WAAW;AAClD,WAAA,EAAE,WAAW,CAAC,GAAG,YAAY,CAAC,GAAG,aAAa,GAAM;AAK7D,QAAM,EAAE,OAAAE,IAAQ,IAAI,GAAGC,MAAUH,EAAO;AAExC,MAAII,IAAgCF;AACpC,QAAMG,IAAyC,CAAC;AAChD,MAAIC,IAAc;AAElB,gBAAO,KAAKH,CAAK,EAAE,QAAQ,CAACI,MAAS;AACnC,UAAMC,IAAMD,GACNE,IAAaD,GACbE,IAAiBT,KAAA,gBAAAA,EAAUQ;AAGjC,QAAI,CAACC,GAAgB;AACZ,aAAA,OAAOL,GAAY,EAAE,CAACG,CAAG,GAAGL,EAAMK,CAAG,GAAG;AAC/C;AAAA,IAAA;AAGI,UAAAG,IAAoBR,KAAA,gBAAAA,EAAQK;AAElC,QAAI,CAACG,GAAmB;AACf,aAAA,OAAOP,GAAW,EAAE,CAACI,CAAG,GAAGL,EAAMK,CAAG,GAAG;AAC9C;AAAA,IAAA;AAII,UAAAI,IAAsBF,EAAe,MAAM;AAAA,MAC/C;AAAA,MACAC;AAAA,IACF,GAEME,IAAaH,EAAe;AAQlC,QAJIA,EAAe,gBACHJ,IAAA,KAGZI,EAAe,WAAW;AACtB,YAAAnB,IAAuBa,KAAA,gBAAAA,EAAYS,IAEnCC,IAAmBxB,EAAuB;AAAA,QAC9C,sBAAAC;AAAA,QACA,OAAOqB;AAAA,QACP,WAAWF,EAAe;AAAA,MAAA,CAC3B;AAEW,MAAAN,IAAA;AAAA,QACV,GAAGA;AAAA,QACH,CAACS,CAAU,GAAGC;AAAA,MAChB;AACA;AAAA,IAAA;AAGU,IAAAV,IAAA;AAAA,MACV,GAAGA;AAAA,MACH,CAACS,CAAU,GAAGD;AAAA,IAChB;AAAA,EAAA,CACD,GAEM,EAAE,WAAAR,GAAW,YAAAC,GAAY,aAAAC,EAAY;AAC9C,GC3MaS,IAAiB,CAI5Bf,MAEOgB,EAAM,QAAQ,MAAMjB,EAAaC,CAAM,GAAG,CAACA,CAAM,CAAC;"}

package/dist/types/index.d.ts

@@ -1,9 +1,4 @@
-export { style, keyframes, globalStyle } from '@vanilla-extract/css';
-export { recipe as variant, type RecipeVariants as StyleVariant, } from '@vanilla-extract/recipes';
-export { defineProperties as defineStyleProps, createSprinkles as createStyleProps, } from '@vanilla-extract/sprinkles';
 export { default as tokens } from '@telegraph/tokens/css-variables-map';
-export { useStyleProps } from './hooks/useStyleProps';
-export { RESPONSIVE_STYLE_PROPS } from './constants/responsive-style-props';
 export { getStyleProp, type CssVarProp } from './helpers/getStyleProp';
 export { useStyleEngine } from './hooks/useStyleEngine';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EACL,MAAM,IAAI,OAAO,EACjB,KAAK,cAAc,IAAI,YAAY,GACpC,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,gBAAgB,IAAI,gBAAgB,EACpC,eAAe,IAAI,gBAAgB,GACpC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAG5E,OAAO,EAAE,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAGxE,OAAO,EAAE,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/style-engine",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "A wrappar around vanilla extract to style telegraph",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/style-engine",
   "author": "@knocklabs",
@@ -38,16 +38,13 @@
   },
   "dependencies": {
     "@telegraph/tokens": "^0.0.21",
-    "@vanilla-extract/css": "^1.15.3",
-    "@vanilla-extract/recipes": "^0.5.3",
-    "@vanilla-extract/sprinkles": "^1.6.2",
     "postcss": "^8.5.3"
   },
   "devDependencies": {
     "@knocklabs/eslint-config": "^0.0.4",
     "@knocklabs/typescript-config": "^0.0.2",
     "@telegraph/prettier-config": "^0.0.7",
-    "@telegraph/vite-config": "^0.0.14",
+    "@telegraph/vite-config": "^0.0.15",
     "@types/node": "^22.13.11",
     "@types/postcss-import": "^14.0.3",
     "@types/react": "^18.3.18",