npm - @streamlinedfi/div - Versions diffs - 0.2.3 → 0.2.4 - Mend

@streamlinedfi/div 0.2.3 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.cjs CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);var{entries:Y}=Object,p=e=>e.charAt(0).toUpperCase()+e.slice(1),j=(e="")=>_nullishCoalesce(_optionalChain([e, 'access', _2 => _2.match, 'call', _3 => _3(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g), 'optionalAccess', _4 => _4.map, 'call', _5 => _5(t=>t.toLowerCase()), 'optionalAccess', _6 => _6.join, 'call', _7 => _7("-")]), () => (""));function s(e,t){return/(px|%)$/.test(e)||typeof e=="string"||e===0?e:t.spacing(e)}function n(e){return typeof e=="number"?`${e}px`:e}function a(e,t,...i){let o;for(let l=0;l<i.length;l++){let g=i[l];if(t){let d=e[`$${t}$${g}`];if(d){o=d;break}}let u=e[`$${g}`];if(u){o=u;break}}return o}function f(e,t,...i){return!!a(e,t,...i)}var v=null;function P(e){if(v)return v;let t={};return Y(e).forEach(([i,o])=>{i.split("|").forEach(l=>{t[l]=o})}),v=t,t}var $=null;function S(e){return $||($=new RegExp(`^\\$(${e.Breakpoints.keys.join("|")})(\\$.*)`),$)}function W(e,t){if(e){if([100,200,300,400,500,600,700,800,900].includes(e))return`color: ${t[`fill${e}`]};`;if(typeof e=="string")return t[e]?`color: ${t[e]};`:`color: ${e};`}return""}var z=e=>typeof e=="number"?`${e}px`:e;var{fromEntries:D}=Object,F=D(["display","align","vAlign","alignItems","alignContent","alignSelf","justifyContent","justifySelf","flexDirection","flexBasis","flexWrap","pointerEvents","cursor","position","opacity","backgroundColor","backgroundImage","backgroundSize","backgroundPosition","backgroundRepeat","transform","transformOrigin","textDecoration","textWrap","animation","fontWeight","gap","gridTemplateColumns","gridTemplateRows","wordBreak","whiteSpace","textOverflow","overflow","overflowX","overflowY","textAlign","transitionDelay","filter","listStyle","objectFit","objectPosition","willChange","boxSizing"].map(e=>[e,1])),I={inline:"display: inline",block:"display: block",flex:`
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);var{entries:D}=Object,p=e=>e.charAt(0).toUpperCase()+e.slice(1),P=(e="")=>_nullishCoalesce(_optionalChain([e, 'access', _2 => _2.match, 'call', _3 => _3(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g), 'optionalAccess', _4 => _4.map, 'call', _5 => _5(t=>t.toLowerCase()), 'optionalAccess', _6 => _6.join, 'call', _7 => _7("-")]), () => (""));function s(e,t){return/(px|%)$/.test(e)||typeof e=="string"||e===0?e:t.spacing(e)}function o(e){return typeof e=="number"?`${e}px`:e}function a(e,t,...i){let r;for(let l=0;l<i.length;l++){let u=i[l];if(t){let g=e[`$${t}$${u}`];if(g){r=g;break}}let f=e[`$${u}`];if(f){r=f;break}}return r}function d(e,t,...i){return!!a(e,t,...i)}var T={};function L(e,t){if(T[t])return T[t];let i={};return D(e).forEach(([r,l])=>{r.split("|").forEach(u=>{i[u]=l})}),T[t]=i,i}var w=null;function S(e){return w||(w=new RegExp(`^\\$(${e.Breakpoints.keys.join("|")})(\\$.*)`),w)}function W(e,t){if(console.log("TCL: colorMixin -> color",e),e){if([100,200,300,400,500,600,700,800,900].includes(e))return`color: ${t[`fill${e}`]};`;if(typeof e=="string")return t[e]?`color: ${t[e]};`:`color: ${e};`}return""}var z=e=>typeof e=="number"?`${e}px`:e;var{fromEntries:O}=Object,F=O(["display","align","vAlign","alignItems","alignContent","alignSelf","justifyContent","justifySelf","flexDirection","flexBasis","flexWrap","pointerEvents","cursor","position","opacity","backgroundColor","backgroundImage","backgroundSize","backgroundPosition","backgroundRepeat","transform","transformOrigin","textDecoration","textWrap","animation","fontWeight","gap","gridTemplateColumns","gridTemplateRows","wordBreak","whiteSpace","textOverflow","overflow","overflowX","overflowY","textAlign","transitionDelay","filter","listStyle","objectFit","objectPosition","willChange","boxSizing"].map(e=>[e,1])),M={inline:"display: inline",block:"display: block",flex:`
     display: flex;
     width: 100%;
   `,autoFlex:`
@@ -6,28 +6,28 @@
     width: auto;
   `,grid:`
     display: grid;
-  `,hide:"display: none",inlineBlock:"display: inline-block",inlineFlex:"display: inline-flex","column|col":"flex-direction: column;",row:"flex-direction: row;",spaceBetween:"justify-content: space-between;",wrap:"flex-wrap: wrap;",innerCenter:(e,t)=>f(e,t,"flex","inlineFlex")?`
+  `,hide:"display: none",inlineBlock:"display: inline-block",inlineFlex:"display: inline-flex","column|col":"flex-direction: column;",row:"flex-direction: row;",spaceBetween:"justify-content: space-between;",wrap:"flex-wrap: wrap;",innerCenter:(e,t)=>d(e,t,"flex","inlineFlex")?`
           justify-content: center;
           align-items: center;
         `:`
           text-align: center;
-          ${f(e,t,"h","height")?`line-height: ${a(e,t,"h","height")};`:""}
-        `,innerLeft:(e,t)=>f(e,t,"flex","inlineFlex")?f(e,t,"column","col")?"align-items: flex-start;":"justify-content: flex-start;":"text-align: left;",innerRight:(e,t)=>f(e,t,"flex","inlineFlex")?f(e,t,"column","col")?"align-items: flex-end;":"justify-content: flex-end;":"text-align: right;",innerTop:(e,t)=>f(e,t,"flex","inlineFlex")?f(e,t,"column","col")?"justify-content: flex-start;":"align-items: flex-start;":"",innerBottom:(e,t)=>f(e,t,"flex","inlineFlex")?f(e,t,"column","col")?"justify-content: flex-end;":"align-items: flex-end;":"",outerCenter:`
+          ${d(e,t,"h","height")?`line-height: ${a(e,t,"h","height")};`:""}
+        `,innerLeft:(e,t)=>d(e,t,"flex","inlineFlex")?d(e,t,"column","col")?"align-items: flex-start;":"justify-content: flex-start;":"text-align: left;",innerRight:(e,t)=>d(e,t,"flex","inlineFlex")?d(e,t,"column","col")?"align-items: flex-end;":"justify-content: flex-end;":"text-align: right;",innerTop:(e,t)=>d(e,t,"flex","inlineFlex")?d(e,t,"column","col")?"justify-content: flex-start;":"align-items: flex-start;":"",innerBottom:(e,t)=>d(e,t,"flex","inlineFlex")?d(e,t,"column","col")?"justify-content: flex-end;":"align-items: flex-end;":"",outerCenter:`
     margin-left: auto;
     margin-right: auto;
-  `,grow:{css:"flex-grow",format:Number},shrink:{css:"flex-shrink"},"colReverse|columnReverse":{css:"flex-direction: column-reverse;"},reverse:{css:"flex-direction: row-reverse;"},"width|w":{css:"width",format:n},"minWidth|minW":{css:"min-width",format:n},"maxWidth|maxW":{css:(e,t)=>`
+  `,grow:{css:"flex-grow",format:Number},shrink:{css:"flex-shrink"},"colReverse|columnReverse":{css:"flex-direction: column-reverse;"},reverse:{css:"flex-direction: row-reverse;"},"width|w":{css:"width",format:o},"minWidth|minW":{css:"min-width",format:o},"maxWidth|maxW":{css:(e,t)=>`
       width: 100%;
-      max-width: ${n(a(e,t,"maxWidth","maxW"))};
-    `},"height|h":{css:"height",format:n},"minHeight|minH":{css:"min-height",format:n},"maxHeight|maxH":{css:(e,t)=>`
+      max-width: ${o(a(e,t,"maxWidth","maxW"))};
+    `},"height|h":{css:"height",format:o},"minHeight|minH":{css:"min-height",format:o},"maxHeight|maxH":{css:(e,t)=>`
       height: 100%;
-      max-height: ${n(a(e,t,"maxHeight","maxH"))};
-    `},"lineHeight|lineH|lh":{css:"line-height",format:n},pointer:"cursor: pointer;",relative:"position: relative",absolute:"position: absolute",fixed:"position: fixed",static:"position: static",cover:`
+      max-height: ${o(a(e,t,"maxHeight","maxH"))};
+    `},"lineHeight|lineH|lh":{css:"line-height",format:o},pointer:"cursor: pointer;",relative:"position: relative",absolute:"position: absolute",fixed:"position: fixed",static:"position: static",cover:`
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-  `,"zIndex|z":{css:"z-index",withTheme:!0},top:{css:"top",format:n},right:{css:"right",format:n},bottom:{css:"bottom",format:n},left:{css:"left",format:n},"padding|p":{css:"padding",format:s},"paddingTop|pt":{css:"padding-top",format:s},"paddingRight|pr":{css:"padding-right",format:s},"paddingBottom|pb":{css:"padding-bottom",format:s},"paddingLeft|pl":{css:"padding-left",format:s},"paddingX|px":{css:(e,t)=>`
+  `,"zIndex|z":{css:"z-index",withTheme:!0},top:{css:"top",format:o},right:{css:"right",format:o},bottom:{css:"bottom",format:o},left:{css:"left",format:o},"padding|p":{css:"padding",format:s},"paddingTop|pt":{css:"padding-top",format:s},"paddingRight|pr":{css:"padding-right",format:s},"paddingBottom|pb":{css:"padding-bottom",format:s},"paddingLeft|pl":{css:"padding-left",format:s},"paddingX|px":{css:(e,t)=>`
       padding-left: ${s(a(e,t,"paddingX","px"),e.theme)};
       padding-right: ${s(a(e,t,"paddingX","px"),e.theme)};
     `},"paddingY|py":{css:(e,t)=>`
@@ -40,13 +40,13 @@
       margin-top: ${s(a(e,t,"marginY","my"),e.theme)};
       margin-bottom: ${s(a(e,t,"marginY","my"),e.theme)};
     `},"background|bg":{css:"background",withTheme:!0},"borderRadius|radius":{css:(e,t)=>{let i=a(e,t,"borderRadius","radius");return Array.isArray(i)?`
-          border-top-left-radius: ${n(i[0])};
-          border-top-right-radius: ${n(i[1])};
-          border-bottom-right-radius: ${n(i[2])};
-          border-bottom-left-radius: ${n(i[3])};
-        `:`border-radius: ${n(i)}`}},borderTopLeftRadius:{css:"border-top-left-radius",format:n},borderTopRightRadius:{css:"border-top-right-radius",format:n},borderBottomRightRadius:{css:"border-bottom-right-radius",format:n},borderBottomLeftRadius:{css:"border-bottom-left-radius",format:n},borderColor:{css:"border-color",withTheme:!0},borderImage:{css:"border-image",withTheme:!0},...[["border","border"],["borderTop","border-top"],["borderRight","border-right"],["borderBottom","border-bottom"],["borderLeft","border-left"]].reduce((e,[t,i])=>({...e,[t]:{css:(o,l,g)=>{let u=a(o,l,_optionalChain([g, 'optionalAccess', _8 => _8.length])?[t,...g].join("$"):t),d=typeof u=="function"?u(o.theme):u;return/^\d/.test(d)?`${i}: ${d}`:`${i}: 1px solid ${d}`}}}),{}),transition:(e,t)=>{let i=a(e,t,"transition");return typeof i=="string"?`transition: ${i}`:"transition: all .2s"},"boxShadow|shadow":{css:"box-shadow",withTheme:!0},textShadow:{css:"text-shadow",withTheme:!0},color:{css:"color",withTheme:!0},fill:{css:"fill",withTheme:!0},fontSize:{css:"font-size",format:n},outline:{css:"outline",withTheme:!0}};var{keys:V}=Object;function R(e,t){let i="",o=P(t),l=S(e.theme),g=-1,u=V(e);for(;++g<u.length;){let d=u[g];if(/^\$/.test(d)){let x=e[d];if(x!==!1){let E=d.match(l)||[],[,b,H]=E,T=(H||d).slice(1).split("$"),y=T[0],c=T.slice(1),C=o[y]||F[y]&&j(y);if(C){let m=C,B=m.withTheme&&typeof x=="function"?x(e.theme):x,X=m.format?m.format(B,e.theme):B,h="";typeof m=="string"?h=m:typeof m=="function"?h=m(e,b,c):typeof m.css=="function"?h=m.css(e,b,c):h=m.css;let r="",k=h.match(/:/g);k&&k.length>1?r=h:k===null?r=`${h}: ${X};`:r=`${h.replace(/;$/,"")};`,c.includes("important")&&(r=r.replace(/;/g," !important;")),c.includes("hover")&&!c.includes("focus")&&(r=`&:hover,&:focus { ${r} }`),c.includes("hover")&&c.includes("focus")&&(r=`&:hover { ${r} }`),c.includes("focus")&&(r=`&:focus { ${r} }`),c.includes("active")&&(r=`&:active { ${r} }`),c.includes("last")&&(r=`&:last-child { ${r} }`),c.includes("odd")&&(r=`&:nth-child(odd) { ${r} }`),c.includes("even")&&(r=`&:nth-child(even) { ${r} }`),b&&(r=`${e.theme.Breakpoints.getCssMedia(e.theme.Breakpoints[p(b)])} { ${r} }`),i+=r}}}}return i}var w=e=>R(e,I),G=_styledcomponents2.default.div`
-  ${e=>w(e)}
-`,M= exports.Div =G;var U={weight:"font-weight",size:{css:"font-size",format:z},color:{css:(e,t,i)=>{let o=i.includes("hover")?e.$color$hover:e.$color;return W(o,e.theme)}},tnum:'font-feature-settings: "tnum";letter-spacing:-0.04em;',breakWord:"word-break: break-word;",noBreak:"white-space: nowrap;",uppercase:"text-transform: uppercase;",serif:'font-family: "Times New Roman", Times, serif',"spacing|letterSpacing":"letter-spacing",left:"text-align: left;",right:"text-align: right;",center:"text-align: center;",lineThrough:"text-decoration: line-through",linearGradient:e=>`
+          border-top-left-radius: ${o(i[0])};
+          border-top-right-radius: ${o(i[1])};
+          border-bottom-right-radius: ${o(i[2])};
+          border-bottom-left-radius: ${o(i[3])};
+        `:`border-radius: ${o(i)}`}},borderTopLeftRadius:{css:"border-top-left-radius",format:o},borderTopRightRadius:{css:"border-top-right-radius",format:o},borderBottomRightRadius:{css:"border-bottom-right-radius",format:o},borderBottomLeftRadius:{css:"border-bottom-left-radius",format:o},borderColor:{css:"border-color",withTheme:!0},borderImage:{css:"border-image",withTheme:!0},...[["border","border"],["borderTop","border-top"],["borderRight","border-right"],["borderBottom","border-bottom"],["borderLeft","border-left"]].reduce((e,[t,i])=>({...e,[t]:{css:(r,l,u)=>{let f=a(r,l,_optionalChain([u, 'optionalAccess', _8 => _8.length])?[t,...u].join("$"):t);console.log("TCL: propValue",f);let g=typeof f=="function"?f(r.theme):f;return/^\d/.test(g)?`${i}: ${g}`:`${i}: 1px solid ${g}`}}}),{}),transition:(e,t)=>{let i=a(e,t,"transition");return typeof i=="string"?`transition: ${i}`:"transition: all .2s"},"boxShadow|shadow":{css:"box-shadow",withTheme:!0},textShadow:{css:"text-shadow",withTheme:!0},color:{css:"color",withTheme:!0},fill:{css:"fill",withTheme:!0},fontSize:{css:"font-size",format:o},outline:{css:"outline",withTheme:!0}};var{keys:Z}=Object;function y(e,t,i="div"){let r="",l=L(t,i),u=S(e.theme),f=-1,g=Z(e);for(;++f<g.length;){let x=g[f];if(/^\$/.test(x)){let b=e[x];if(b!==!1){let V=x.match(u)||[],[,$,X]=V,C=(X||x).slice(1).split("$"),v=C[0],c=C.slice(1),B=l[v]||F[v]&&P(v);if(B){let m=B,j=m.withTheme&&typeof b=="function"?b(e.theme):b,Y=m.format?m.format(j,e.theme):j,h="";typeof m=="string"?h=m:typeof m=="function"?h=m(e,$,c):typeof m.css=="function"?h=m.css(e,$,c):h=m.css;let n="",R=h.match(/:/g);R&&R.length>1?n=h:R===null?n=`${h}: ${Y};`:n=`${h.replace(/;$/,"")};`,c.includes("important")&&(n=n.replace(/;/g," !important;")),c.includes("hover")&&!c.includes("focus")&&(n=`&:hover,&:focus { ${n} }`),c.includes("hover")&&c.includes("focus")&&(n=`&:hover { ${n} }`),c.includes("focus")&&(n=`&:focus { ${n} }`),c.includes("active")&&(n=`&:active { ${n} }`),c.includes("last")&&(n=`&:last-child { ${n} }`),c.includes("odd")&&(n=`&:nth-child(odd) { ${n} }`),c.includes("even")&&(n=`&:nth-child(even) { ${n} }`),$&&(n=`${e.theme.Breakpoints.getCssMedia(e.theme.Breakpoints[p($)])} { ${n} }`),r+=n}}}}return r}var k=e=>y(e,M),U=_styledcomponents2.default.div`
+  ${e=>k(e)}
+`,I= exports.Div =U;var A={weight:"font-weight",size:{css:"font-size",format:z},color:{css:(e,t,i)=>{let r=i.includes("hover")?e.$color$hover:e.$color;return console.log("TCL: color",r),W(r,e.theme)}},tnum:'font-feature-settings: "tnum";letter-spacing:-0.04em;',breakWord:"word-break: break-word;",noBreak:"white-space: nowrap;",uppercase:"text-transform: uppercase;",serif:'font-family: "Times New Roman", Times, serif',"spacing|letterSpacing":"letter-spacing",left:"text-align: left;",right:"text-align: right;",center:"text-align: center;",lineThrough:"text-decoration: line-through",linearGradient:e=>`
     -webkit-text-fill-color: transparent;
     text-fill-color: transparent;
     -webkit-background-clip: text;
@@ -57,8 +57,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100%;
-  `,underline:"text-decoration: underline;"},N=_styledcomponents2.default.p`
-  ${e=>w(e)}
-  ${e=>R(e,U)}
-`,q= exports.Text =N;var{keys:J,entries:A,fromEntries:L}=Object,Q=()=>typeof window<"u"&&typeof document<"u"?document.body.clientWidth:0,_=e=>({getCssMedia:({min:t,max:i})=>t&&i?`@media (min-width: ${t}px) and (max-width: ${i}px)`:t?`@media (min-width: ${t}px)`:`@media (max-width: ${i}px)`,keys:J(e),...L(A(e).map(([t,{min:i,max:o}])=>[p(t),{min:i,max:o}])),...L(A(e).map(([t,{min:i=0,max:o=1/0}])=>[`is${p(t)}`,(l=Q())=>l!==0&&l>=i&&l<=o]))}),K=e=>(t,i=0,o=!0)=>(t||1)*e+i+(o?"px":0);function ee({theme:e,breakpoints:t,spacingUnit:i}){let o=_(t);return{theme:{...e,Breakpoints:o,spacing:K(i)},Breakpoints:o}}var te=ee;var we=M;exports.Div = M; exports.Text = q; exports.createUISystem = te; exports.default = we; exports.divMixin = w;
+  `,underline:"text-decoration: underline;"},q=_styledcomponents2.default.p`
+  ${e=>k(e)}
+  ${e=>(console.log("TCL: props",e),console.log("TCL: render",y(e,A,"text")),y(e,A,"text"))}
+`,J= exports.Text =q;var{keys:Q,entries:E,fromEntries:H}=Object,_=()=>typeof window<"u"&&typeof document<"u"?document.body.clientWidth:0,K=e=>({getCssMedia:({min:t,max:i})=>t&&i?`@media (min-width: ${t}px) and (max-width: ${i}px)`:t?`@media (min-width: ${t}px)`:`@media (max-width: ${i}px)`,keys:Q(e),...H(E(e).map(([t,{min:i,max:r}])=>[p(t),{min:i,max:r}])),...H(E(e).map(([t,{min:i=0,max:r=1/0}])=>[`is${p(t)}`,(l=_())=>l!==0&&l>=i&&l<=r]))}),ee=e=>(t,i=0,r=!0)=>(t||1)*e+i+(r?"px":0);function te({theme:e,breakpoints:t,spacingUnit:i}){let r=K(t);return{theme:{...e,Breakpoints:r,spacing:ee(i)},Breakpoints:r}}var ie=te;var ye=I;exports.Div = I; exports.Text = J; exports.createUISystem = ie; exports.default = ye; exports.divMixin = k;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/Div.js","../src/utils.js","../src/rules.js","../src/Text.js","../src/createUISystem.js"],"names":["entries","upperFirst","str","kebabCase","string","x","spacing","val","theme","pixelate","fromEntries"],"mappings":"AAAA,04BAAmB,GCAb,CAAE,OAAA,CAAAA,CAAQ,CAAA,CAAI,MAAA,CAEPC,CAAAA,CAAaC,CAAAA,EAAOA,CAAAA,CAAI,MAAA,CAAO,CAAC,CAAA,CAAE,WAAA,CAAY,CAAA,CAAIA,CAAAA,CAAI,KAAA,CAAM,CAAC,CAAA,CAE7DC,CAAAA,CAAY,CAACC,CAAAA,CAAS,EAAA,CAAA,mCACjCA,CAAAA,qBACG,KAAA,mBAAM,oEAAoE,CAAA,6BACzE,GAAA,mBAAIC,CAAAA,EAAKA,CAAAA,CAAE,WAAA,CAAY,CAAC,CAAA,6BACxB,IAAA,mBAAK,GAAG,GAAA,SAAK,IAAA,CAEZ,SAASC,CAAAA,CAAQC,CAAAA,CAAKC,CAAAA,CAAO,CASlC,MARI,SAAA,CAAU,IAAA,CAAKD,CAAG,CAAA,EAIlB,OAAOA,CAAAA,EAAQ,QAAA,EAIfA,CAAAA,GAAQ,CAAA,CACHA,CAAAA,CAGFC,CAAAA,CAAM,OAAA,CAAQD,CAAG,CAC1B,CAEO,SAASE,CAAAA,CAASF,CAAAA,CAAK,CAC5B,OAAI,OAAOA,CAAAA,EAAQ,QAAA,CACV,CAAA,EAAA;AC6BH;AAAA;AAII,EAAA;AAAA;AAAA;AAIJ,EAAA;AAAA;AAYA,EAAA;AAAA;AAAA;AAIA,QAAA;AAAA;AAME,UAAA;AAgB0B,QAAA;AAWrB;AAAA;AA4BY,EAAA;AAAA;AAEgD,iBAAA;AAYhD,IAAA;AAAA;AAEkD,kBAAA;AAcpE,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CP,EAAA;AASK,oBAAA;AAIA,qBAAA;AAIoB,IAAA;AAIpB,mBAAA;AAIA,sBAAA;AAwBoB,IAAA;AAIpB,mBAAA;AAIA,oBAAA;AAIoB,IAAA;AAIpB,kBAAA;AAIA,qBAAA;AAaQ,IAAA;AACwC,kCAAA;AACC,mCAAA;AACG,sCAAA;AACD,qCAAA;AA0BxD,QAAA;AFxM0B,EAAA;AGzGf;AAQc;AAAA;AAAA;AAAA;AASvB,sCAAA;AAEQ,EAAA;AAAA;AAAA;AAAA;AAAA;AASQ,EAAA;AACQ,EAAA;AACY,EAAA;ACxBjCG","file":"/Users/jason/Code/streamlined.fi/_div/dist/index.cjs","sourcesContent":["import styled from 'styled-components';\nimport { cssWhiteList, divRules } from './rules';\nimport {\n getMediaPropRegex,\n getRuleIndex,\n kebabCase,\n upperFirst,\n} from './utils';\n\nconst { keys } = Object;\n\n/*\n @example\n * <Div\n * $w={690}\n * $h={420}\n * $mobile$w={320}\n * />\n /\n\nexport function renderCss(props, rules) {\n let css = '';\n\n const ruleIndex = getRuleIndex(rules);\n const mediaPropRegex = getMediaPropRegex(props.theme);\n\n let i = -1;\n const propKeys = keys(props);\n while (++i < propKeys.length) {\n const propExt = propKeys[i];\n\n if (/^\\$/.test(propExt)) {\n const value = props[propExt];\n\n if (value !== false) {\n const match = propExt.match(mediaPropRegex) \|\| [];\n const [, media, mediaPropExt] = match;\n\n const cleanProp = (mediaPropExt \|\| propExt).slice(1);\n const parts = cleanProp.split('$');\n const prop = parts[0];\n const extensions = parts.slice(1);\n\n const foundRule =\n ruleIndex[prop] \|\| (cssWhiteList[prop] && kebabCase(prop));\n\n if (foundRule) {\n const config = foundRule;\n const outputValue =\n config.withTheme && typeof value === 'function'\n ? value(props.theme)\n : value;\n const formattedValue = config.format\n ? config.format(outputValue, props.theme)\n : outputValue;\n\n let ruleCss = '';\n if (typeof config === 'string') {\n ruleCss = config;\n } else if (typeof config === 'function') {\n ruleCss = config(props, media, extensions);\n } else if (typeof config.css === 'function') {\n ruleCss = config.css(props, media, extensions);\n } else {\n ruleCss = config.css;\n }\n\n let cssString = '';\n const colons = ruleCss.match(/:/g);\n if (colons && colons.length > 1) {\n cssString = ruleCss;\n } else if (colons === null) {\n cssString = `${ruleCss}: ${formattedValue};`;\n } else {\n cssString = `${ruleCss.replace(/;$/, '')};`;\n }\n\n if (extensions.includes('important')) {\n cssString = cssString.replace(/;/g, ' !important;');\n }\n\n if (extensions.includes('hover') && !extensions.includes('focus')) {\n cssString = `&:hover,&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('hover') && extensions.includes('focus')) {\n cssString = `&:hover { ${cssString} }`;\n }\n\n if (extensions.includes('focus')) {\n cssString = `&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('active')) {\n cssString = `&:active { ${cssString} }`;\n }\n\n if (extensions.includes('last')) {\n cssString = `&:last-child { ${cssString} }`;\n }\n\n if (extensions.includes('odd')) {\n cssString = `&:nth-child(odd) { ${cssString} }`;\n }\n\n if (extensions.includes('even')) {\n cssString = `&:nth-child(even) { ${cssString} }`;\n }\n\n if (media) {\n const cssMedia = props.theme.Breakpoints.getCssMedia(\n props.theme.Breakpoints[upperFirst(media)],\n );\n cssString = `${cssMedia} { ${cssString} }`;\n }\n\n css += cssString;\n }\n }\n }\n }\n\n return css;\n}\n\nexport const divMixin = props => renderCss(props, divRules);\n\nconst Div = styled.div`\n ${props => divMixin(props)}\n`;\n\nexport default Div;\n","const { entries } = Object;\n\nexport const upperFirst = str => str.charAt(0).toUpperCase() + str.slice(1);\n\nexport const kebabCase = (string = '') =>\n string\n .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]\|\\b)\|[A-Z]?[a-z]+[0-9]\|[A-Z]\|[0-9]+/g)\n ?.map(x => x.toLowerCase())\n ?.join('-') ?? '';\n\nexport function spacing(val, theme) {\n if (/(px\|%)$/.test(val)) {\n return val;\n }\n\n if (typeof val === 'string') {\n return val;\n }\n\n if (val === 0) {\n return val;\n }\n\n return theme.spacing(val);\n}\n\nexport function pixelate(val) {\n if (typeof val === 'number') {\n return `${val}px`;\n }\n return val;\n}\n\nexport function getPropValue(props, media, ...propKeys) {\n let value;\n for (let i = 0; i < propKeys.length; i++) {\n const key = propKeys[i];\n if (media) {\n const mediaVal = props[`$${media}$${key}`];\n if (mediaVal) {\n value = mediaVal;\n break;\n }\n }\n const val = props[`$${key}`];\n if (val) {\n value = val;\n break;\n }\n }\n\n return value;\n}\n\nexport function isPropPresent(props, media, ...propKeys) {\n return !!getPropValue(props, media, ...propKeys);\n}\n\nlet ruleIndex = null;\nexport function getRuleIndex(rules) {\n if (ruleIndex) return ruleIndex;\n\n const index = {};\n entries(rules).forEach(([ruleProp, config]) => {\n ruleProp.split('\|').forEach(prop => {\n index[prop] = config;\n });\n });\n ruleIndex = index;\n\n return index;\n}\n\nlet mediaPropRegex = null;\nexport function getMediaPropRegex(theme) {\n if (mediaPropRegex) return mediaPropRegex;\n\n mediaPropRegex = new RegExp(\n `^\\\\$(${theme.Breakpoints.keys.join('\|')})(\\\\$.)`,\n );\n\n return mediaPropRegex;\n}\n\nexport function colorMixin(color, theme) {\n if (color) {\n if ([100, 200, 300, 400, 500, 600, 700, 800, 900].includes(color)) {\n return `color: ${theme[`fill${color}`]};`;\n }\n\n if (typeof color === 'string') {\n if (theme[color]) {\n return `color: ${theme[color]};`;\n }\n return `color: ${color};`;\n }\n }\n\n return '';\n}\n\nexport const sizeFormatter = value => {\n if (typeof value === 'number') {\n return `${value}px`;\n }\n return value;\n};\n","/* eslint-disable no-nested-ternary /\nimport { getPropValue, isPropPresent, pixelate, spacing } from './utils';\n\nconst { fromEntries } = Object;\n\nexport const cssWhiteList = fromEntries(\n [\n 'display',\n 'align',\n 'vAlign',\n 'alignItems',\n 'alignContent',\n 'alignSelf',\n 'justifyContent',\n 'justifySelf',\n 'flexDirection',\n 'flexBasis',\n 'flexWrap',\n 'pointerEvents',\n 'cursor',\n 'position',\n 'opacity',\n 'backgroundColor',\n 'backgroundImage',\n 'backgroundSize',\n 'backgroundPosition',\n 'backgroundRepeat',\n 'transform',\n 'transformOrigin',\n 'textDecoration',\n 'textWrap',\n 'animation',\n 'fontWeight',\n 'gap',\n 'gridTemplateColumns',\n 'gridTemplateRows',\n 'wordBreak',\n 'whiteSpace',\n 'textOverflow',\n 'overflow',\n 'overflowX',\n 'overflowY',\n 'textAlign',\n 'transitionDelay',\n 'filter',\n 'listStyle',\n 'objectFit',\n 'objectPosition',\n 'willChange',\n 'boxSizing',\n ].map(prop => [prop, 1]),\n);\n\n// short hand rules for the div component\nexport const divRules = {\n inline: 'display: inline',\n block: 'display: block',\n flex: `\n display: flex;\n width: 100%;\n `,\n autoFlex: `\n display: flex;\n width: auto;\n `,\n grid: `\n display: grid;\n `,\n hide: 'display: none',\n inlineBlock: 'display: inline-block',\n inlineFlex: 'display: inline-flex',\n 'column\|col': 'flex-direction: column;',\n row: 'flex-direction: row;',\n spaceBetween: 'justify-content: space-between;',\n wrap: 'flex-wrap: wrap;',\n innerCenter: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? `\n justify-content: center;\n align-items: center;\n `\n : `\n text-align: center;\n ${\n isPropPresent(props, media, 'h', 'height')\n ? `line-height: ${getPropValue(props, media, 'h', 'height')};`\n : ''\n }\n `,\n innerLeft: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-start;'\n : 'justify-content: flex-start;'\n : 'text-align: left;',\n innerRight: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-end;'\n : 'justify-content: flex-end;'\n : 'text-align: right;',\n innerTop: (props, media) => {\n return isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-start;'\n : 'align-items: flex-start;'\n : '';\n },\n innerBottom: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-end;'\n : 'align-items: flex-end;'\n : '',\n outerCenter: `\n margin-left: auto;\n margin-right: auto;\n `,\n grow: {\n css: 'flex-grow',\n format: Number,\n },\n shrink: {\n css: 'flex-shrink',\n },\n 'colReverse\|columnReverse': {\n css: 'flex-direction: column-reverse;',\n },\n reverse: {\n css: 'flex-direction: row-reverse;',\n },\n\n // dimensions\n 'width\|w': {\n css: 'width',\n format: pixelate,\n },\n 'minWidth\|minW': {\n css: 'min-width',\n format: pixelate,\n },\n 'maxWidth\|maxW': {\n css: (props, media) => `\n width: 100%;\n max-width: ${pixelate(getPropValue(props, media, 'maxWidth', 'maxW'))};\n `,\n },\n 'height\|h': {\n css: 'height',\n format: pixelate,\n },\n 'minHeight\|minH': {\n css: 'min-height',\n format: pixelate,\n },\n 'maxHeight\|maxH': {\n css: (props, media) => `\n height: 100%;\n max-height: ${pixelate(getPropValue(props, media, 'maxHeight', 'maxH'))};\n `,\n },\n 'lineHeight\|lineH\|lh': {\n css: 'line-height',\n format: pixelate,\n },\n pointer: 'cursor: pointer;',\n\n // position\n relative: 'position: relative',\n absolute: 'position: absolute',\n fixed: 'position: fixed',\n static: 'position: static',\n cover: `\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n `,\n 'zIndex\|z': {\n css: 'z-index',\n withTheme: true,\n },\n top: {\n css: 'top',\n format: pixelate,\n },\n right: {\n css: 'right',\n format: pixelate,\n },\n bottom: {\n css: 'bottom',\n format: pixelate,\n },\n left: {\n css: 'left',\n format: pixelate,\n },\n\n 'padding\|p': {\n css: 'padding',\n format: spacing,\n },\n 'paddingTop\|pt': {\n css: 'padding-top',\n format: spacing,\n },\n 'paddingRight\|pr': {\n css: 'padding-right',\n format: spacing,\n },\n 'paddingBottom\|pb': {\n css: 'padding-bottom',\n format: spacing,\n },\n 'paddingLeft\|pl': {\n css: 'padding-left',\n format: spacing,\n },\n 'paddingX\|px': {\n css: (props, media) => `\n padding-left: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n padding-right: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n `,\n },\n 'paddingY\|py': {\n css: (props, media) => `\n padding-top: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n padding-bottom: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n `,\n },\n 'margin\|m': {\n css: 'margin',\n format: spacing,\n },\n 'marginTop\|mt': {\n css: 'margin-top',\n format: spacing,\n },\n 'marginRight\|mr': {\n css: 'margin-right',\n format: spacing,\n },\n 'marginBottom\|mb': {\n css: 'margin-bottom',\n format: spacing,\n },\n 'marginLeft\|ml': {\n css: 'margin-left',\n format: spacing,\n },\n 'marginX\|mx': {\n css: (props, media) => `\n margin-left: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n margin-right: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n `,\n },\n 'marginY\|my': {\n css: (props, media) => `\n margin-top: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n margin-bottom: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n `,\n },\n\n // style\n 'background\|bg': {\n css: 'background',\n withTheme: true,\n },\n 'borderRadius\|radius': {\n css: (props, media) => {\n const radius = getPropValue(props, media, 'borderRadius', 'radius');\n if (Array.isArray(radius)) {\n return `\n border-top-left-radius: ${pixelate(radius[0])};\n border-top-right-radius: ${pixelate(radius[1])};\n border-bottom-right-radius: ${pixelate(radius[2])};\n border-bottom-left-radius: ${pixelate(radius[3])};\n `;\n }\n return `border-radius: ${pixelate(radius)}`;\n },\n },\n borderTopLeftRadius: {\n css: 'border-top-left-radius',\n format: pixelate,\n },\n borderTopRightRadius: {\n css: 'border-top-right-radius',\n format: pixelate,\n },\n borderBottomRightRadius: {\n css: 'border-bottom-right-radius',\n format: pixelate,\n },\n borderBottomLeftRadius: {\n css: 'border-bottom-left-radius',\n format: pixelate,\n },\n borderColor: {\n css: 'border-color',\n withTheme: true,\n },\n borderImage: {\n css: 'border-image',\n withTheme: true,\n },\n ...[\n ['border', 'border'],\n ['borderTop', 'border-top'],\n ['borderRight', 'border-right'],\n ['borderBottom', 'border-bottom'],\n ['borderLeft', 'border-left'],\n ].reduce(\n (rules, [jsKey, cssKey]) => ({\n ...rules,\n [jsKey]: {\n css: (props, media, extensions) => {\n const propValue = getPropValue(\n props,\n media,\n extensions?.length ? [jsKey, ...extensions].join('$') : jsKey,\n );\n\n // withTheme\n const value =\n typeof propValue === 'function'\n ? propValue(props.theme)\n : propValue;\n\n if (!/^\\d/.test(value)) {\n return `${cssKey}: 1px solid ${value}`;\n }\n return `${cssKey}: ${value}`;\n },\n },\n }),\n {},\n ),\n transition: (props, media) => {\n const value = getPropValue(props, media, 'transition');\n return typeof value === 'string'\n ? `transition: ${value}`\n : 'transition: all .2s';\n },\n 'boxShadow\|shadow': {\n css: 'box-shadow',\n withTheme: true,\n },\n textShadow: {\n css: 'text-shadow',\n withTheme: true,\n },\n color: {\n css: 'color',\n withTheme: true,\n },\n fill: {\n css: 'fill',\n withTheme: true,\n },\n fontSize: {\n css: 'font-size',\n format: pixelate,\n },\n outline: {\n css: 'outline',\n withTheme: true,\n },\n};\n","import styled from 'styled-components';\nimport { colorMixin, sizeFormatter } from './utils';\n\nimport { divMixin, renderCss } from './Div';\n\nconst textRules = {\n weight: 'font-weight',\n size: {\n css: 'font-size',\n format: sizeFormatter,\n },\n color: {\n css: (props, media, extensions) => {\n const color = extensions.includes('hover')\n ? props.$color$hover\n : props.$color;\n\n return colorMixin(color, props.theme);\n },\n },\n tnum: 'font-feature-settings: \"tnum\";letter-spacing:-0.04em;',\n breakWord: 'word-break: break-word;',\n noBreak: 'white-space: nowrap;',\n uppercase: 'text-transform: uppercase;',\n serif: 'font-family: \"Times New Roman\", Times, serif',\n 'spacing\|letterSpacing': `letter-spacing`,\n left: 'text-align: left;',\n right: 'text-align: right;',\n center: 'text-align: center;',\n lineThrough: 'text-decoration: line-through',\n // underline: 'text-decoration: underline;',\n linearGradient: props => `\n -webkit-text-fill-color: transparent;\n text-fill-color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n background-image: linear-gradient(${\n typeof props.$linearGradient === 'function'\n ? props.$linearGradient(props.theme)\n : props.$linearGradient\n });\n `,\n ellipsis: `\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n `,\n underline: 'text-decoration: underline;',\n};\n\nconst Text = styled.p`\n ${props => divMixin(props)}\n ${props => renderCss(props, textRules)}\n`;\n\nexport default Text;\n","import { upperFirst } from './utils';\n\nconst { keys, entries, fromEntries } = Object;\n\nconst getDefaultWidth = () => {\n return typeof window !== 'undefined' && typeof document !== 'undefined'\n ? document.body.clientWidth\n : 0;\n};\n\nconst createBreakpoints = breakpoints => {\n return {\n getCssMedia: ({ min, max }) => {\n if (min && max) {\n return `@media (min-width: ${min}px) and (max-width: ${max}px)`;\n }\n\n if (min) {\n return `@media (min-width: ${min}px)`;\n }\n\n return `@media (max-width: ${max}px)`;\n },\n keys: keys(breakpoints),\n ...fromEntries(\n entries(breakpoints).map(([key, { min, max }]) => {\n return [upperFirst(key), { min, max }];\n }),\n ),\n ...fromEntries(\n entries(breakpoints).map(([key, { min = 0, max = Infinity }]) => {\n return [\n `is${upperFirst(key)}`,\n (width = getDefaultWidth()) =>\n width !== 0 && width >= min && width <= max,\n ];\n }),\n ),\n };\n};\n\nconst createSpacing = spacingUnit => (multiplier, adjuster = 0, usePx = true) =>\n (multiplier \|\| 1) spacingUnit + adjuster + (usePx ? 'px' : 0);\n\nfunction createUISystem({ theme, breakpoints, spacingUnit }) {\n const Breakpoints = createBreakpoints(breakpoints);\n\n return {\n theme: {\n ...theme,\n Breakpoints,\n spacing: createSpacing(spacingUnit),\n },\n Breakpoints,\n };\n}\n\nexport default createUISystem;\n"]}
1	+ {"version":3,"sources":["../src/Div.js","../src/utils.js","../src/rules.js","../src/Text.js","../src/createUISystem.js"],"names":["entries","upperFirst","str","kebabCase","string","x","spacing","val","theme","pixelate","fromEntries"],"mappings":"AAAA,04BAAmB,GCAb,CAAE,OAAA,CAAAA,CAAQ,CAAA,CAAI,MAAA,CAEPC,CAAAA,CAAaC,CAAAA,EAAOA,CAAAA,CAAI,MAAA,CAAO,CAAC,CAAA,CAAE,WAAA,CAAY,CAAA,CAAIA,CAAAA,CAAI,KAAA,CAAM,CAAC,CAAA,CAE7DC,CAAAA,CAAY,CAACC,CAAAA,CAAS,EAAA,CAAA,mCACjCA,CAAAA,qBACG,KAAA,mBAAM,oEAAoE,CAAA,6BACzE,GAAA,mBAAIC,CAAAA,EAAKA,CAAAA,CAAE,WAAA,CAAY,CAAC,CAAA,6BACxB,IAAA,mBAAK,GAAG,GAAA,SAAK,IAAA,CAEZ,SAASC,CAAAA,CAAQC,CAAAA,CAAKC,CAAAA,CAAO,CASlC,MARI,SAAA,CAAU,IAAA,CAAKD,CAAG,CAAA,EAIlB,OAAOA,CAAAA,EAAQ,QAAA,EAIfA,CAAAA,GAAQ,CAAA,CACHA,CAAAA,CAGFC,CAAAA,CAAM,OAAA,CAAQD,CAAG,CAC1B,CAEO,SAASE,CAAAA,CAASF,CAAAA,CAAK,CAC5B,OAAI,OAAOA,CAAAA,EAAQ,QAAA,CACV,CAAA,EAAA;AC6BH;AAAA;AAII,EAAA;AAAA;AAAA;AAIJ,EAAA;AAAA;AAYA,EAAA;AAAA;AAAA;AAIA,QAAA;AAAA;AAME,UAAA;AAgB0B,QAAA;AAWrB;AAAA;AA4BY,EAAA;AAAA;AAEgD,iBAAA;AAYhD,IAAA;AAAA;AAEkD,kBAAA;AAcpE,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CP,EAAA;AASK,oBAAA;AAIA,qBAAA;AAIoB,IAAA;AAIpB,mBAAA;AAIA,sBAAA;AAwBoB,IAAA;AAIpB,mBAAA;AAIA,oBAAA;AAIoB,IAAA;AAIpB,kBAAA;AAIA,qBAAA;AAaQ,IAAA;AACwC,kCAAA;AACC,mCAAA;AACG,sCAAA;AACD,qCAAA;AA0BxD,QAAA;AFxM0B,EAAA;AGxG1B;AAQyB;AAAA;AAAA;AAAA;AASvB,sCAAA;AAEQ,EAAA;AAAA;AAAA;AAAA;AAAA;AASQ,EAAA;AACQ,EAAA;AAKzB,EAAA;AC7BIG","file":"/Users/jason/Code/streamlined.fi/_div/dist/index.cjs","sourcesContent":["import styled from 'styled-components';\nimport { cssWhiteList, divRules } from './rules';\nimport {\n getMediaPropRegex,\n getRuleIndex,\n kebabCase,\n upperFirst,\n} from './utils';\n\nconst { keys } = Object;\n\n/*\n @example\n * <Div\n * $w={690}\n * $h={420}\n * $mobile$w={320}\n * />\n /\n\nexport function renderCss(props, rules, id = 'div') {\n let css = '';\n\n const ruleIndex = getRuleIndex(rules, id);\n const mediaPropRegex = getMediaPropRegex(props.theme);\n\n let i = -1;\n const propKeys = keys(props);\n while (++i < propKeys.length) {\n const propExt = propKeys[i];\n\n if (/^\\$/.test(propExt)) {\n const value = props[propExt];\n\n if (value !== false) {\n const match = propExt.match(mediaPropRegex) \|\| [];\n const [, media, mediaPropExt] = match;\n\n const cleanProp = (mediaPropExt \|\| propExt).slice(1);\n const parts = cleanProp.split('$');\n const prop = parts[0];\n const extensions = parts.slice(1);\n\n const foundRule =\n ruleIndex[prop] \|\| (cssWhiteList[prop] && kebabCase(prop));\n\n if (foundRule) {\n const config = foundRule;\n const outputValue =\n config.withTheme && typeof value === 'function'\n ? value(props.theme)\n : value;\n const formattedValue = config.format\n ? config.format(outputValue, props.theme)\n : outputValue;\n\n let ruleCss = '';\n if (typeof config === 'string') {\n ruleCss = config;\n } else if (typeof config === 'function') {\n ruleCss = config(props, media, extensions);\n } else if (typeof config.css === 'function') {\n ruleCss = config.css(props, media, extensions);\n } else {\n ruleCss = config.css;\n }\n\n let cssString = '';\n const colons = ruleCss.match(/:/g);\n if (colons && colons.length > 1) {\n cssString = ruleCss;\n } else if (colons === null) {\n cssString = `${ruleCss}: ${formattedValue};`;\n } else {\n cssString = `${ruleCss.replace(/;$/, '')};`;\n }\n\n if (extensions.includes('important')) {\n cssString = cssString.replace(/;/g, ' !important;');\n }\n\n if (extensions.includes('hover') && !extensions.includes('focus')) {\n cssString = `&:hover,&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('hover') && extensions.includes('focus')) {\n cssString = `&:hover { ${cssString} }`;\n }\n\n if (extensions.includes('focus')) {\n cssString = `&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('active')) {\n cssString = `&:active { ${cssString} }`;\n }\n\n if (extensions.includes('last')) {\n cssString = `&:last-child { ${cssString} }`;\n }\n\n if (extensions.includes('odd')) {\n cssString = `&:nth-child(odd) { ${cssString} }`;\n }\n\n if (extensions.includes('even')) {\n cssString = `&:nth-child(even) { ${cssString} }`;\n }\n\n if (media) {\n const cssMedia = props.theme.Breakpoints.getCssMedia(\n props.theme.Breakpoints[upperFirst(media)],\n );\n cssString = `${cssMedia} { ${cssString} }`;\n }\n\n css += cssString;\n }\n }\n }\n }\n\n return css;\n}\n\nexport const divMixin = props => renderCss(props, divRules);\n\nconst Div = styled.div`\n ${props => divMixin(props)}\n`;\n\nexport default Div;\n","const { entries } = Object;\n\nexport const upperFirst = str => str.charAt(0).toUpperCase() + str.slice(1);\n\nexport const kebabCase = (string = '') =>\n string\n .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]\|\\b)\|[A-Z]?[a-z]+[0-9]\|[A-Z]\|[0-9]+/g)\n ?.map(x => x.toLowerCase())\n ?.join('-') ?? '';\n\nexport function spacing(val, theme) {\n if (/(px\|%)$/.test(val)) {\n return val;\n }\n\n if (typeof val === 'string') {\n return val;\n }\n\n if (val === 0) {\n return val;\n }\n\n return theme.spacing(val);\n}\n\nexport function pixelate(val) {\n if (typeof val === 'number') {\n return `${val}px`;\n }\n return val;\n}\n\nexport function getPropValue(props, media, ...propKeys) {\n let value;\n for (let i = 0; i < propKeys.length; i++) {\n const key = propKeys[i];\n if (media) {\n const mediaVal = props[`$${media}$${key}`];\n if (mediaVal) {\n value = mediaVal;\n break;\n }\n }\n const val = props[`$${key}`];\n if (val) {\n value = val;\n break;\n }\n }\n\n return value;\n}\n\nexport function isPropPresent(props, media, ...propKeys) {\n return !!getPropValue(props, media, ...propKeys);\n}\n\nconst ruleIndexes = {};\nexport function getRuleIndex(rules, id) {\n if (ruleIndexes[id]) return ruleIndexes[id];\n\n const index = {};\n entries(rules).forEach(([ruleProp, config]) => {\n ruleProp.split('\|').forEach(prop => {\n index[prop] = config;\n });\n });\n ruleIndexes[id] = index;\n\n return index;\n}\n\nlet mediaPropRegex = null;\nexport function getMediaPropRegex(theme) {\n if (mediaPropRegex) return mediaPropRegex;\n\n mediaPropRegex = new RegExp(\n `^\\\\$(${theme.Breakpoints.keys.join('\|')})(\\\\$.)`,\n );\n\n return mediaPropRegex;\n}\n\nexport function colorMixin(color, theme) {\n console.log('TCL: colorMixin -> color', color);\n if (color) {\n if ([100, 200, 300, 400, 500, 600, 700, 800, 900].includes(color)) {\n return `color: ${theme[`fill${color}`]};`;\n }\n\n if (typeof color === 'string') {\n if (theme[color]) {\n return `color: ${theme[color]};`;\n }\n return `color: ${color};`;\n }\n }\n\n return '';\n}\n\nexport const sizeFormatter = value => {\n if (typeof value === 'number') {\n return `${value}px`;\n }\n return value;\n};\n","/* eslint-disable no-nested-ternary /\nimport { getPropValue, isPropPresent, pixelate, spacing } from './utils';\n\nconst { fromEntries } = Object;\n\nexport const cssWhiteList = fromEntries(\n [\n 'display',\n 'align',\n 'vAlign',\n 'alignItems',\n 'alignContent',\n 'alignSelf',\n 'justifyContent',\n 'justifySelf',\n 'flexDirection',\n 'flexBasis',\n 'flexWrap',\n 'pointerEvents',\n 'cursor',\n 'position',\n 'opacity',\n 'backgroundColor',\n 'backgroundImage',\n 'backgroundSize',\n 'backgroundPosition',\n 'backgroundRepeat',\n 'transform',\n 'transformOrigin',\n 'textDecoration',\n 'textWrap',\n 'animation',\n 'fontWeight',\n 'gap',\n 'gridTemplateColumns',\n 'gridTemplateRows',\n 'wordBreak',\n 'whiteSpace',\n 'textOverflow',\n 'overflow',\n 'overflowX',\n 'overflowY',\n 'textAlign',\n 'transitionDelay',\n 'filter',\n 'listStyle',\n 'objectFit',\n 'objectPosition',\n 'willChange',\n 'boxSizing',\n ].map(prop => [prop, 1]),\n);\n\n// short hand rules for the div component\nexport const divRules = {\n inline: 'display: inline',\n block: 'display: block',\n flex: `\n display: flex;\n width: 100%;\n `,\n autoFlex: `\n display: flex;\n width: auto;\n `,\n grid: `\n display: grid;\n `,\n hide: 'display: none',\n inlineBlock: 'display: inline-block',\n inlineFlex: 'display: inline-flex',\n 'column\|col': 'flex-direction: column;',\n row: 'flex-direction: row;',\n spaceBetween: 'justify-content: space-between;',\n wrap: 'flex-wrap: wrap;',\n innerCenter: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? `\n justify-content: center;\n align-items: center;\n `\n : `\n text-align: center;\n ${\n isPropPresent(props, media, 'h', 'height')\n ? `line-height: ${getPropValue(props, media, 'h', 'height')};`\n : ''\n }\n `,\n innerLeft: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-start;'\n : 'justify-content: flex-start;'\n : 'text-align: left;',\n innerRight: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-end;'\n : 'justify-content: flex-end;'\n : 'text-align: right;',\n innerTop: (props, media) => {\n return isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-start;'\n : 'align-items: flex-start;'\n : '';\n },\n innerBottom: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-end;'\n : 'align-items: flex-end;'\n : '',\n outerCenter: `\n margin-left: auto;\n margin-right: auto;\n `,\n grow: {\n css: 'flex-grow',\n format: Number,\n },\n shrink: {\n css: 'flex-shrink',\n },\n 'colReverse\|columnReverse': {\n css: 'flex-direction: column-reverse;',\n },\n reverse: {\n css: 'flex-direction: row-reverse;',\n },\n\n // dimensions\n 'width\|w': {\n css: 'width',\n format: pixelate,\n },\n 'minWidth\|minW': {\n css: 'min-width',\n format: pixelate,\n },\n 'maxWidth\|maxW': {\n css: (props, media) => `\n width: 100%;\n max-width: ${pixelate(getPropValue(props, media, 'maxWidth', 'maxW'))};\n `,\n },\n 'height\|h': {\n css: 'height',\n format: pixelate,\n },\n 'minHeight\|minH': {\n css: 'min-height',\n format: pixelate,\n },\n 'maxHeight\|maxH': {\n css: (props, media) => `\n height: 100%;\n max-height: ${pixelate(getPropValue(props, media, 'maxHeight', 'maxH'))};\n `,\n },\n 'lineHeight\|lineH\|lh': {\n css: 'line-height',\n format: pixelate,\n },\n pointer: 'cursor: pointer;',\n\n // position\n relative: 'position: relative',\n absolute: 'position: absolute',\n fixed: 'position: fixed',\n static: 'position: static',\n cover: `\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n `,\n 'zIndex\|z': {\n css: 'z-index',\n withTheme: true,\n },\n top: {\n css: 'top',\n format: pixelate,\n },\n right: {\n css: 'right',\n format: pixelate,\n },\n bottom: {\n css: 'bottom',\n format: pixelate,\n },\n left: {\n css: 'left',\n format: pixelate,\n },\n\n 'padding\|p': {\n css: 'padding',\n format: spacing,\n },\n 'paddingTop\|pt': {\n css: 'padding-top',\n format: spacing,\n },\n 'paddingRight\|pr': {\n css: 'padding-right',\n format: spacing,\n },\n 'paddingBottom\|pb': {\n css: 'padding-bottom',\n format: spacing,\n },\n 'paddingLeft\|pl': {\n css: 'padding-left',\n format: spacing,\n },\n 'paddingX\|px': {\n css: (props, media) => `\n padding-left: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n padding-right: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n `,\n },\n 'paddingY\|py': {\n css: (props, media) => `\n padding-top: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n padding-bottom: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n `,\n },\n 'margin\|m': {\n css: 'margin',\n format: spacing,\n },\n 'marginTop\|mt': {\n css: 'margin-top',\n format: spacing,\n },\n 'marginRight\|mr': {\n css: 'margin-right',\n format: spacing,\n },\n 'marginBottom\|mb': {\n css: 'margin-bottom',\n format: spacing,\n },\n 'marginLeft\|ml': {\n css: 'margin-left',\n format: spacing,\n },\n 'marginX\|mx': {\n css: (props, media) => `\n margin-left: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n margin-right: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n `,\n },\n 'marginY\|my': {\n css: (props, media) => `\n margin-top: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n margin-bottom: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n `,\n },\n\n // style\n 'background\|bg': {\n css: 'background',\n withTheme: true,\n },\n 'borderRadius\|radius': {\n css: (props, media) => {\n const radius = getPropValue(props, media, 'borderRadius', 'radius');\n if (Array.isArray(radius)) {\n return `\n border-top-left-radius: ${pixelate(radius[0])};\n border-top-right-radius: ${pixelate(radius[1])};\n border-bottom-right-radius: ${pixelate(radius[2])};\n border-bottom-left-radius: ${pixelate(radius[3])};\n `;\n }\n return `border-radius: ${pixelate(radius)}`;\n },\n },\n borderTopLeftRadius: {\n css: 'border-top-left-radius',\n format: pixelate,\n },\n borderTopRightRadius: {\n css: 'border-top-right-radius',\n format: pixelate,\n },\n borderBottomRightRadius: {\n css: 'border-bottom-right-radius',\n format: pixelate,\n },\n borderBottomLeftRadius: {\n css: 'border-bottom-left-radius',\n format: pixelate,\n },\n borderColor: {\n css: 'border-color',\n withTheme: true,\n },\n borderImage: {\n css: 'border-image',\n withTheme: true,\n },\n ...[\n ['border', 'border'],\n ['borderTop', 'border-top'],\n ['borderRight', 'border-right'],\n ['borderBottom', 'border-bottom'],\n ['borderLeft', 'border-left'],\n ].reduce(\n (rules, [jsKey, cssKey]) => ({\n ...rules,\n [jsKey]: {\n css: (props, media, extensions) => {\n const propValue = getPropValue(\n props,\n media,\n extensions?.length ? [jsKey, ...extensions].join('$') : jsKey,\n );\n console.log('TCL: propValue', propValue);\n\n // withTheme\n const value =\n typeof propValue === 'function'\n ? propValue(props.theme)\n : propValue;\n\n if (!/^\\d/.test(value)) {\n return `${cssKey}: 1px solid ${value}`;\n }\n return `${cssKey}: ${value}`;\n },\n },\n }),\n {},\n ),\n transition: (props, media) => {\n const value = getPropValue(props, media, 'transition');\n return typeof value === 'string'\n ? `transition: ${value}`\n : 'transition: all .2s';\n },\n 'boxShadow\|shadow': {\n css: 'box-shadow',\n withTheme: true,\n },\n textShadow: {\n css: 'text-shadow',\n withTheme: true,\n },\n color: {\n css: 'color',\n withTheme: true,\n },\n fill: {\n css: 'fill',\n withTheme: true,\n },\n fontSize: {\n css: 'font-size',\n format: pixelate,\n },\n outline: {\n css: 'outline',\n withTheme: true,\n },\n};\n","import styled from 'styled-components';\nimport { colorMixin, sizeFormatter } from './utils';\n\nimport { divMixin, renderCss } from './Div';\n\nconst textRules = {\n weight: 'font-weight',\n size: {\n css: 'font-size',\n format: sizeFormatter,\n },\n color: {\n css: (props, media, extensions) => {\n const color = extensions.includes('hover')\n ? props.$color$hover\n : props.$color;\n console.log('TCL: color', color);\n\n return colorMixin(color, props.theme);\n },\n },\n tnum: 'font-feature-settings: \"tnum\";letter-spacing:-0.04em;',\n breakWord: 'word-break: break-word;',\n noBreak: 'white-space: nowrap;',\n uppercase: 'text-transform: uppercase;',\n serif: 'font-family: \"Times New Roman\", Times, serif',\n 'spacing\|letterSpacing': `letter-spacing`,\n left: 'text-align: left;',\n right: 'text-align: right;',\n center: 'text-align: center;',\n lineThrough: 'text-decoration: line-through',\n // underline: 'text-decoration: underline;',\n linearGradient: props => `\n -webkit-text-fill-color: transparent;\n text-fill-color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n background-image: linear-gradient(${\n typeof props.$linearGradient === 'function'\n ? props.$linearGradient(props.theme)\n : props.$linearGradient\n });\n `,\n ellipsis: `\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n `,\n underline: 'text-decoration: underline;',\n};\n\nconst Text = styled.p`\n ${props => divMixin(props)}\n ${props => {\n console.log('TCL: props', props);\n console.log('TCL: render', renderCss(props, textRules, 'text'));\n return renderCss(props, textRules, 'text');\n }}\n`;\n\nexport default Text;\n","import { upperFirst } from './utils';\n\nconst { keys, entries, fromEntries } = Object;\n\nconst getDefaultWidth = () => {\n return typeof window !== 'undefined' && typeof document !== 'undefined'\n ? document.body.clientWidth\n : 0;\n};\n\nconst createBreakpoints = breakpoints => {\n return {\n getCssMedia: ({ min, max }) => {\n if (min && max) {\n return `@media (min-width: ${min}px) and (max-width: ${max}px)`;\n }\n\n if (min) {\n return `@media (min-width: ${min}px)`;\n }\n\n return `@media (max-width: ${max}px)`;\n },\n keys: keys(breakpoints),\n ...fromEntries(\n entries(breakpoints).map(([key, { min, max }]) => {\n return [upperFirst(key), { min, max }];\n }),\n ),\n ...fromEntries(\n entries(breakpoints).map(([key, { min = 0, max = Infinity }]) => {\n return [\n `is${upperFirst(key)}`,\n (width = getDefaultWidth()) =>\n width !== 0 && width >= min && width <= max,\n ];\n }),\n ),\n };\n};\n\nconst createSpacing = spacingUnit => (multiplier, adjuster = 0, usePx = true) =>\n (multiplier \|\| 1) spacingUnit + adjuster + (usePx ? 'px' : 0);\n\nfunction createUISystem({ theme, breakpoints, spacingUnit }) {\n const Breakpoints = createBreakpoints(breakpoints);\n\n return {\n theme: {\n ...theme,\n Breakpoints,\n spacing: createSpacing(spacingUnit),\n },\n Breakpoints,\n };\n}\n\nexport default createUISystem;\n"]}

package/dist/index.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import O from"styled-components";var{entries:Y}=Object,p=e=>e.charAt(0).toUpperCase()+e.slice(1),j=(e="")=>e.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)?.map(t=>t.toLowerCase())?.join("-")??"";function s(e,t){return/(px|%)$/.test(e)||typeof e=="string"||e===0?e:t.spacing(e)}function n(e){return typeof e=="number"?`${e}px`:e}function a(e,t,...i){let o;for(let l=0;l<i.length;l++){let g=i[l];if(t){let d=e[`$${t}$${g}`];if(d){o=d;break}}let u=e[`$${g}`];if(u){o=u;break}}return o}function f(e,t,...i){return!!a(e,t,...i)}var v=null;function P(e){if(v)return v;let t={};return Y(e).forEach(([i,o])=>{i.split("|").forEach(l=>{t[l]=o})}),v=t,t}var $=null;function S(e){return $||($=new RegExp(`^\\$(${e.Breakpoints.keys.join("|")})(\\$.*)`),$)}function W(e,t){if(e){if([100,200,300,400,500,600,700,800,900].includes(e))return`color: ${t[`fill${e}`]};`;if(typeof e=="string")return t[e]?`color: ${t[e]};`:`color: ${e};`}return""}var z=e=>typeof e=="number"?`${e}px`:e;var{fromEntries:D}=Object,F=D(["display","align","vAlign","alignItems","alignContent","alignSelf","justifyContent","justifySelf","flexDirection","flexBasis","flexWrap","pointerEvents","cursor","position","opacity","backgroundColor","backgroundImage","backgroundSize","backgroundPosition","backgroundRepeat","transform","transformOrigin","textDecoration","textWrap","animation","fontWeight","gap","gridTemplateColumns","gridTemplateRows","wordBreak","whiteSpace","textOverflow","overflow","overflowX","overflowY","textAlign","transitionDelay","filter","listStyle","objectFit","objectPosition","willChange","boxSizing"].map(e=>[e,1])),I={inline:"display: inline",block:"display: block",flex:`
+import G from"styled-components";var{entries:D}=Object,p=e=>e.charAt(0).toUpperCase()+e.slice(1),P=(e="")=>e.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)?.map(t=>t.toLowerCase())?.join("-")??"";function s(e,t){return/(px|%)$/.test(e)||typeof e=="string"||e===0?e:t.spacing(e)}function o(e){return typeof e=="number"?`${e}px`:e}function a(e,t,...i){let r;for(let l=0;l<i.length;l++){let u=i[l];if(t){let g=e[`$${t}$${u}`];if(g){r=g;break}}let f=e[`$${u}`];if(f){r=f;break}}return r}function d(e,t,...i){return!!a(e,t,...i)}var T={};function L(e,t){if(T[t])return T[t];let i={};return D(e).forEach(([r,l])=>{r.split("|").forEach(u=>{i[u]=l})}),T[t]=i,i}var w=null;function S(e){return w||(w=new RegExp(`^\\$(${e.Breakpoints.keys.join("|")})(\\$.*)`),w)}function W(e,t){if(console.log("TCL: colorMixin -> color",e),e){if([100,200,300,400,500,600,700,800,900].includes(e))return`color: ${t[`fill${e}`]};`;if(typeof e=="string")return t[e]?`color: ${t[e]};`:`color: ${e};`}return""}var z=e=>typeof e=="number"?`${e}px`:e;var{fromEntries:O}=Object,F=O(["display","align","vAlign","alignItems","alignContent","alignSelf","justifyContent","justifySelf","flexDirection","flexBasis","flexWrap","pointerEvents","cursor","position","opacity","backgroundColor","backgroundImage","backgroundSize","backgroundPosition","backgroundRepeat","transform","transformOrigin","textDecoration","textWrap","animation","fontWeight","gap","gridTemplateColumns","gridTemplateRows","wordBreak","whiteSpace","textOverflow","overflow","overflowX","overflowY","textAlign","transitionDelay","filter","listStyle","objectFit","objectPosition","willChange","boxSizing"].map(e=>[e,1])),M={inline:"display: inline",block:"display: block",flex:`
     display: flex;
     width: 100%;
   `,autoFlex:`
@@ -6,28 +6,28 @@ import O from"styled-components";var{entries:Y}=Object,p=e=>e.charAt(0).toUpperC
     width: auto;
   `,grid:`
     display: grid;
-  `,hide:"display: none",inlineBlock:"display: inline-block",inlineFlex:"display: inline-flex","column|col":"flex-direction: column;",row:"flex-direction: row;",spaceBetween:"justify-content: space-between;",wrap:"flex-wrap: wrap;",innerCenter:(e,t)=>f(e,t,"flex","inlineFlex")?`
+  `,hide:"display: none",inlineBlock:"display: inline-block",inlineFlex:"display: inline-flex","column|col":"flex-direction: column;",row:"flex-direction: row;",spaceBetween:"justify-content: space-between;",wrap:"flex-wrap: wrap;",innerCenter:(e,t)=>d(e,t,"flex","inlineFlex")?`
           justify-content: center;
           align-items: center;
         `:`
           text-align: center;
-          ${f(e,t,"h","height")?`line-height: ${a(e,t,"h","height")};`:""}
-        `,innerLeft:(e,t)=>f(e,t,"flex","inlineFlex")?f(e,t,"column","col")?"align-items: flex-start;":"justify-content: flex-start;":"text-align: left;",innerRight:(e,t)=>f(e,t,"flex","inlineFlex")?f(e,t,"column","col")?"align-items: flex-end;":"justify-content: flex-end;":"text-align: right;",innerTop:(e,t)=>f(e,t,"flex","inlineFlex")?f(e,t,"column","col")?"justify-content: flex-start;":"align-items: flex-start;":"",innerBottom:(e,t)=>f(e,t,"flex","inlineFlex")?f(e,t,"column","col")?"justify-content: flex-end;":"align-items: flex-end;":"",outerCenter:`
+          ${d(e,t,"h","height")?`line-height: ${a(e,t,"h","height")};`:""}
+        `,innerLeft:(e,t)=>d(e,t,"flex","inlineFlex")?d(e,t,"column","col")?"align-items: flex-start;":"justify-content: flex-start;":"text-align: left;",innerRight:(e,t)=>d(e,t,"flex","inlineFlex")?d(e,t,"column","col")?"align-items: flex-end;":"justify-content: flex-end;":"text-align: right;",innerTop:(e,t)=>d(e,t,"flex","inlineFlex")?d(e,t,"column","col")?"justify-content: flex-start;":"align-items: flex-start;":"",innerBottom:(e,t)=>d(e,t,"flex","inlineFlex")?d(e,t,"column","col")?"justify-content: flex-end;":"align-items: flex-end;":"",outerCenter:`
     margin-left: auto;
     margin-right: auto;
-  `,grow:{css:"flex-grow",format:Number},shrink:{css:"flex-shrink"},"colReverse|columnReverse":{css:"flex-direction: column-reverse;"},reverse:{css:"flex-direction: row-reverse;"},"width|w":{css:"width",format:n},"minWidth|minW":{css:"min-width",format:n},"maxWidth|maxW":{css:(e,t)=>`
+  `,grow:{css:"flex-grow",format:Number},shrink:{css:"flex-shrink"},"colReverse|columnReverse":{css:"flex-direction: column-reverse;"},reverse:{css:"flex-direction: row-reverse;"},"width|w":{css:"width",format:o},"minWidth|minW":{css:"min-width",format:o},"maxWidth|maxW":{css:(e,t)=>`
       width: 100%;
-      max-width: ${n(a(e,t,"maxWidth","maxW"))};
-    `},"height|h":{css:"height",format:n},"minHeight|minH":{css:"min-height",format:n},"maxHeight|maxH":{css:(e,t)=>`
+      max-width: ${o(a(e,t,"maxWidth","maxW"))};
+    `},"height|h":{css:"height",format:o},"minHeight|minH":{css:"min-height",format:o},"maxHeight|maxH":{css:(e,t)=>`
       height: 100%;
-      max-height: ${n(a(e,t,"maxHeight","maxH"))};
-    `},"lineHeight|lineH|lh":{css:"line-height",format:n},pointer:"cursor: pointer;",relative:"position: relative",absolute:"position: absolute",fixed:"position: fixed",static:"position: static",cover:`
+      max-height: ${o(a(e,t,"maxHeight","maxH"))};
+    `},"lineHeight|lineH|lh":{css:"line-height",format:o},pointer:"cursor: pointer;",relative:"position: relative",absolute:"position: absolute",fixed:"position: fixed",static:"position: static",cover:`
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-  `,"zIndex|z":{css:"z-index",withTheme:!0},top:{css:"top",format:n},right:{css:"right",format:n},bottom:{css:"bottom",format:n},left:{css:"left",format:n},"padding|p":{css:"padding",format:s},"paddingTop|pt":{css:"padding-top",format:s},"paddingRight|pr":{css:"padding-right",format:s},"paddingBottom|pb":{css:"padding-bottom",format:s},"paddingLeft|pl":{css:"padding-left",format:s},"paddingX|px":{css:(e,t)=>`
+  `,"zIndex|z":{css:"z-index",withTheme:!0},top:{css:"top",format:o},right:{css:"right",format:o},bottom:{css:"bottom",format:o},left:{css:"left",format:o},"padding|p":{css:"padding",format:s},"paddingTop|pt":{css:"padding-top",format:s},"paddingRight|pr":{css:"padding-right",format:s},"paddingBottom|pb":{css:"padding-bottom",format:s},"paddingLeft|pl":{css:"padding-left",format:s},"paddingX|px":{css:(e,t)=>`
       padding-left: ${s(a(e,t,"paddingX","px"),e.theme)};
       padding-right: ${s(a(e,t,"paddingX","px"),e.theme)};
     `},"paddingY|py":{css:(e,t)=>`
@@ -40,13 +40,13 @@ import O from"styled-components";var{entries:Y}=Object,p=e=>e.charAt(0).toUpperC
       margin-top: ${s(a(e,t,"marginY","my"),e.theme)};
       margin-bottom: ${s(a(e,t,"marginY","my"),e.theme)};
     `},"background|bg":{css:"background",withTheme:!0},"borderRadius|radius":{css:(e,t)=>{let i=a(e,t,"borderRadius","radius");return Array.isArray(i)?`
-          border-top-left-radius: ${n(i[0])};
-          border-top-right-radius: ${n(i[1])};
-          border-bottom-right-radius: ${n(i[2])};
-          border-bottom-left-radius: ${n(i[3])};
-        `:`border-radius: ${n(i)}`}},borderTopLeftRadius:{css:"border-top-left-radius",format:n},borderTopRightRadius:{css:"border-top-right-radius",format:n},borderBottomRightRadius:{css:"border-bottom-right-radius",format:n},borderBottomLeftRadius:{css:"border-bottom-left-radius",format:n},borderColor:{css:"border-color",withTheme:!0},borderImage:{css:"border-image",withTheme:!0},...[["border","border"],["borderTop","border-top"],["borderRight","border-right"],["borderBottom","border-bottom"],["borderLeft","border-left"]].reduce((e,[t,i])=>({...e,[t]:{css:(o,l,g)=>{let u=a(o,l,g?.length?[t,...g].join("$"):t),d=typeof u=="function"?u(o.theme):u;return/^\d/.test(d)?`${i}: ${d}`:`${i}: 1px solid ${d}`}}}),{}),transition:(e,t)=>{let i=a(e,t,"transition");return typeof i=="string"?`transition: ${i}`:"transition: all .2s"},"boxShadow|shadow":{css:"box-shadow",withTheme:!0},textShadow:{css:"text-shadow",withTheme:!0},color:{css:"color",withTheme:!0},fill:{css:"fill",withTheme:!0},fontSize:{css:"font-size",format:n},outline:{css:"outline",withTheme:!0}};var{keys:V}=Object;function R(e,t){let i="",o=P(t),l=S(e.theme),g=-1,u=V(e);for(;++g<u.length;){let d=u[g];if(/^\$/.test(d)){let x=e[d];if(x!==!1){let E=d.match(l)||[],[,b,H]=E,T=(H||d).slice(1).split("$"),y=T[0],c=T.slice(1),C=o[y]||F[y]&&j(y);if(C){let m=C,B=m.withTheme&&typeof x=="function"?x(e.theme):x,X=m.format?m.format(B,e.theme):B,h="";typeof m=="string"?h=m:typeof m=="function"?h=m(e,b,c):typeof m.css=="function"?h=m.css(e,b,c):h=m.css;let r="",k=h.match(/:/g);k&&k.length>1?r=h:k===null?r=`${h}: ${X};`:r=`${h.replace(/;$/,"")};`,c.includes("important")&&(r=r.replace(/;/g," !important;")),c.includes("hover")&&!c.includes("focus")&&(r=`&:hover,&:focus { ${r} }`),c.includes("hover")&&c.includes("focus")&&(r=`&:hover { ${r} }`),c.includes("focus")&&(r=`&:focus { ${r} }`),c.includes("active")&&(r=`&:active { ${r} }`),c.includes("last")&&(r=`&:last-child { ${r} }`),c.includes("odd")&&(r=`&:nth-child(odd) { ${r} }`),c.includes("even")&&(r=`&:nth-child(even) { ${r} }`),b&&(r=`${e.theme.Breakpoints.getCssMedia(e.theme.Breakpoints[p(b)])} { ${r} }`),i+=r}}}}return i}var w=e=>R(e,I),G=O.div`
-  ${e=>w(e)}
-`,M=G;import Z from"styled-components";var U={weight:"font-weight",size:{css:"font-size",format:z},color:{css:(e,t,i)=>{let o=i.includes("hover")?e.$color$hover:e.$color;return W(o,e.theme)}},tnum:'font-feature-settings: "tnum";letter-spacing:-0.04em;',breakWord:"word-break: break-word;",noBreak:"white-space: nowrap;",uppercase:"text-transform: uppercase;",serif:'font-family: "Times New Roman", Times, serif',"spacing|letterSpacing":"letter-spacing",left:"text-align: left;",right:"text-align: right;",center:"text-align: center;",lineThrough:"text-decoration: line-through",linearGradient:e=>`
+          border-top-left-radius: ${o(i[0])};
+          border-top-right-radius: ${o(i[1])};
+          border-bottom-right-radius: ${o(i[2])};
+          border-bottom-left-radius: ${o(i[3])};
+        `:`border-radius: ${o(i)}`}},borderTopLeftRadius:{css:"border-top-left-radius",format:o},borderTopRightRadius:{css:"border-top-right-radius",format:o},borderBottomRightRadius:{css:"border-bottom-right-radius",format:o},borderBottomLeftRadius:{css:"border-bottom-left-radius",format:o},borderColor:{css:"border-color",withTheme:!0},borderImage:{css:"border-image",withTheme:!0},...[["border","border"],["borderTop","border-top"],["borderRight","border-right"],["borderBottom","border-bottom"],["borderLeft","border-left"]].reduce((e,[t,i])=>({...e,[t]:{css:(r,l,u)=>{let f=a(r,l,u?.length?[t,...u].join("$"):t);console.log("TCL: propValue",f);let g=typeof f=="function"?f(r.theme):f;return/^\d/.test(g)?`${i}: ${g}`:`${i}: 1px solid ${g}`}}}),{}),transition:(e,t)=>{let i=a(e,t,"transition");return typeof i=="string"?`transition: ${i}`:"transition: all .2s"},"boxShadow|shadow":{css:"box-shadow",withTheme:!0},textShadow:{css:"text-shadow",withTheme:!0},color:{css:"color",withTheme:!0},fill:{css:"fill",withTheme:!0},fontSize:{css:"font-size",format:o},outline:{css:"outline",withTheme:!0}};var{keys:Z}=Object;function y(e,t,i="div"){let r="",l=L(t,i),u=S(e.theme),f=-1,g=Z(e);for(;++f<g.length;){let x=g[f];if(/^\$/.test(x)){let b=e[x];if(b!==!1){let V=x.match(u)||[],[,$,X]=V,C=(X||x).slice(1).split("$"),v=C[0],c=C.slice(1),B=l[v]||F[v]&&P(v);if(B){let m=B,j=m.withTheme&&typeof b=="function"?b(e.theme):b,Y=m.format?m.format(j,e.theme):j,h="";typeof m=="string"?h=m:typeof m=="function"?h=m(e,$,c):typeof m.css=="function"?h=m.css(e,$,c):h=m.css;let n="",R=h.match(/:/g);R&&R.length>1?n=h:R===null?n=`${h}: ${Y};`:n=`${h.replace(/;$/,"")};`,c.includes("important")&&(n=n.replace(/;/g," !important;")),c.includes("hover")&&!c.includes("focus")&&(n=`&:hover,&:focus { ${n} }`),c.includes("hover")&&c.includes("focus")&&(n=`&:hover { ${n} }`),c.includes("focus")&&(n=`&:focus { ${n} }`),c.includes("active")&&(n=`&:active { ${n} }`),c.includes("last")&&(n=`&:last-child { ${n} }`),c.includes("odd")&&(n=`&:nth-child(odd) { ${n} }`),c.includes("even")&&(n=`&:nth-child(even) { ${n} }`),$&&(n=`${e.theme.Breakpoints.getCssMedia(e.theme.Breakpoints[p($)])} { ${n} }`),r+=n}}}}return r}var k=e=>y(e,M),U=G.div`
+  ${e=>k(e)}
+`,I=U;import N from"styled-components";var A={weight:"font-weight",size:{css:"font-size",format:z},color:{css:(e,t,i)=>{let r=i.includes("hover")?e.$color$hover:e.$color;return console.log("TCL: color",r),W(r,e.theme)}},tnum:'font-feature-settings: "tnum";letter-spacing:-0.04em;',breakWord:"word-break: break-word;",noBreak:"white-space: nowrap;",uppercase:"text-transform: uppercase;",serif:'font-family: "Times New Roman", Times, serif',"spacing|letterSpacing":"letter-spacing",left:"text-align: left;",right:"text-align: right;",center:"text-align: center;",lineThrough:"text-decoration: line-through",linearGradient:e=>`
     -webkit-text-fill-color: transparent;
     text-fill-color: transparent;
     -webkit-background-clip: text;
@@ -57,8 +57,8 @@ import O from"styled-components";var{entries:Y}=Object,p=e=>e.charAt(0).toUpperC
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100%;
-  `,underline:"text-decoration: underline;"},N=Z.p`
-  ${e=>w(e)}
-  ${e=>R(e,U)}
-`,q=N;var{keys:J,entries:A,fromEntries:L}=Object,Q=()=>typeof window<"u"&&typeof document<"u"?document.body.clientWidth:0,_=e=>({getCssMedia:({min:t,max:i})=>t&&i?`@media (min-width: ${t}px) and (max-width: ${i}px)`:t?`@media (min-width: ${t}px)`:`@media (max-width: ${i}px)`,keys:J(e),...L(A(e).map(([t,{min:i,max:o}])=>[p(t),{min:i,max:o}])),...L(A(e).map(([t,{min:i=0,max:o=1/0}])=>[`is${p(t)}`,(l=Q())=>l!==0&&l>=i&&l<=o]))}),K=e=>(t,i=0,o=!0)=>(t||1)*e+i+(o?"px":0);function ee({theme:e,breakpoints:t,spacingUnit:i}){let o=_(t);return{theme:{...e,Breakpoints:o,spacing:K(i)},Breakpoints:o}}var te=ee;var we=M;export{M as Div,q as Text,te as createUISystem,we as default,w as divMixin};
+  `,underline:"text-decoration: underline;"},q=N.p`
+  ${e=>k(e)}
+  ${e=>(console.log("TCL: props",e),console.log("TCL: render",y(e,A,"text")),y(e,A,"text"))}
+`,J=q;var{keys:Q,entries:E,fromEntries:H}=Object,_=()=>typeof window<"u"&&typeof document<"u"?document.body.clientWidth:0,K=e=>({getCssMedia:({min:t,max:i})=>t&&i?`@media (min-width: ${t}px) and (max-width: ${i}px)`:t?`@media (min-width: ${t}px)`:`@media (max-width: ${i}px)`,keys:Q(e),...H(E(e).map(([t,{min:i,max:r}])=>[p(t),{min:i,max:r}])),...H(E(e).map(([t,{min:i=0,max:r=1/0}])=>[`is${p(t)}`,(l=_())=>l!==0&&l>=i&&l<=r]))}),ee=e=>(t,i=0,r=!0)=>(t||1)*e+i+(r?"px":0);function te({theme:e,breakpoints:t,spacingUnit:i}){let r=K(t);return{theme:{...e,Breakpoints:r,spacing:ee(i)},Breakpoints:r}}var ie=te;var ye=I;export{I as Div,J as Text,ie as createUISystem,ye as default,k as divMixin};
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/Div.js","../src/utils.js","../src/rules.js","../src/Text.js","../src/createUISystem.js","../src/index.js"],"sourcesContent":["import styled from 'styled-components';\nimport { cssWhiteList, divRules } from './rules';\nimport {\n getMediaPropRegex,\n getRuleIndex,\n kebabCase,\n upperFirst,\n} from './utils';\n\nconst { keys } = Object;\n\n/*\n @example\n * <Div\n * $w={690}\n * $h={420}\n * $mobile$w={320}\n * />\n /\n\nexport function renderCss(props, rules) {\n let css = '';\n\n const ruleIndex = getRuleIndex(rules);\n const mediaPropRegex = getMediaPropRegex(props.theme);\n\n let i = -1;\n const propKeys = keys(props);\n while (++i < propKeys.length) {\n const propExt = propKeys[i];\n\n if (/^\\$/.test(propExt)) {\n const value = props[propExt];\n\n if (value !== false) {\n const match = propExt.match(mediaPropRegex) \|\| [];\n const [, media, mediaPropExt] = match;\n\n const cleanProp = (mediaPropExt \|\| propExt).slice(1);\n const parts = cleanProp.split('$');\n const prop = parts[0];\n const extensions = parts.slice(1);\n\n const foundRule =\n ruleIndex[prop] \|\| (cssWhiteList[prop] && kebabCase(prop));\n\n if (foundRule) {\n const config = foundRule;\n const outputValue =\n config.withTheme && typeof value === 'function'\n ? value(props.theme)\n : value;\n const formattedValue = config.format\n ? config.format(outputValue, props.theme)\n : outputValue;\n\n let ruleCss = '';\n if (typeof config === 'string') {\n ruleCss = config;\n } else if (typeof config === 'function') {\n ruleCss = config(props, media, extensions);\n } else if (typeof config.css === 'function') {\n ruleCss = config.css(props, media, extensions);\n } else {\n ruleCss = config.css;\n }\n\n let cssString = '';\n const colons = ruleCss.match(/:/g);\n if (colons && colons.length > 1) {\n cssString = ruleCss;\n } else if (colons === null) {\n cssString = `${ruleCss}: ${formattedValue};`;\n } else {\n cssString = `${ruleCss.replace(/;$/, '')};`;\n }\n\n if (extensions.includes('important')) {\n cssString = cssString.replace(/;/g, ' !important;');\n }\n\n if (extensions.includes('hover') && !extensions.includes('focus')) {\n cssString = `&:hover,&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('hover') && extensions.includes('focus')) {\n cssString = `&:hover { ${cssString} }`;\n }\n\n if (extensions.includes('focus')) {\n cssString = `&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('active')) {\n cssString = `&:active { ${cssString} }`;\n }\n\n if (extensions.includes('last')) {\n cssString = `&:last-child { ${cssString} }`;\n }\n\n if (extensions.includes('odd')) {\n cssString = `&:nth-child(odd) { ${cssString} }`;\n }\n\n if (extensions.includes('even')) {\n cssString = `&:nth-child(even) { ${cssString} }`;\n }\n\n if (media) {\n const cssMedia = props.theme.Breakpoints.getCssMedia(\n props.theme.Breakpoints[upperFirst(media)],\n );\n cssString = `${cssMedia} { ${cssString} }`;\n }\n\n css += cssString;\n }\n }\n }\n }\n\n return css;\n}\n\nexport const divMixin = props => renderCss(props, divRules);\n\nconst Div = styled.div`\n ${props => divMixin(props)}\n`;\n\nexport default Div;\n","const { entries } = Object;\n\nexport const upperFirst = str => str.charAt(0).toUpperCase() + str.slice(1);\n\nexport const kebabCase = (string = '') =>\n string\n .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]\|\\b)\|[A-Z]?[a-z]+[0-9]\|[A-Z]\|[0-9]+/g)\n ?.map(x => x.toLowerCase())\n ?.join('-') ?? '';\n\nexport function spacing(val, theme) {\n if (/(px\|%)$/.test(val)) {\n return val;\n }\n\n if (typeof val === 'string') {\n return val;\n }\n\n if (val === 0) {\n return val;\n }\n\n return theme.spacing(val);\n}\n\nexport function pixelate(val) {\n if (typeof val === 'number') {\n return `${val}px`;\n }\n return val;\n}\n\nexport function getPropValue(props, media, ...propKeys) {\n let value;\n for (let i = 0; i < propKeys.length; i++) {\n const key = propKeys[i];\n if (media) {\n const mediaVal = props[`$${media}$${key}`];\n if (mediaVal) {\n value = mediaVal;\n break;\n }\n }\n const val = props[`$${key}`];\n if (val) {\n value = val;\n break;\n }\n }\n\n return value;\n}\n\nexport function isPropPresent(props, media, ...propKeys) {\n return !!getPropValue(props, media, ...propKeys);\n}\n\nlet ruleIndex = null;\nexport function getRuleIndex(rules) {\n if (ruleIndex) return ruleIndex;\n\n const index = {};\n entries(rules).forEach(([ruleProp, config]) => {\n ruleProp.split('\|').forEach(prop => {\n index[prop] = config;\n });\n });\n ruleIndex = index;\n\n return index;\n}\n\nlet mediaPropRegex = null;\nexport function getMediaPropRegex(theme) {\n if (mediaPropRegex) return mediaPropRegex;\n\n mediaPropRegex = new RegExp(\n `^\\\\$(${theme.Breakpoints.keys.join('\|')})(\\\\$.)`,\n );\n\n return mediaPropRegex;\n}\n\nexport function colorMixin(color, theme) {\n if (color) {\n if ([100, 200, 300, 400, 500, 600, 700, 800, 900].includes(color)) {\n return `color: ${theme[`fill${color}`]};`;\n }\n\n if (typeof color === 'string') {\n if (theme[color]) {\n return `color: ${theme[color]};`;\n }\n return `color: ${color};`;\n }\n }\n\n return '';\n}\n\nexport const sizeFormatter = value => {\n if (typeof value === 'number') {\n return `${value}px`;\n }\n return value;\n};\n","/* eslint-disable no-nested-ternary /\nimport { getPropValue, isPropPresent, pixelate, spacing } from './utils';\n\nconst { fromEntries } = Object;\n\nexport const cssWhiteList = fromEntries(\n [\n 'display',\n 'align',\n 'vAlign',\n 'alignItems',\n 'alignContent',\n 'alignSelf',\n 'justifyContent',\n 'justifySelf',\n 'flexDirection',\n 'flexBasis',\n 'flexWrap',\n 'pointerEvents',\n 'cursor',\n 'position',\n 'opacity',\n 'backgroundColor',\n 'backgroundImage',\n 'backgroundSize',\n 'backgroundPosition',\n 'backgroundRepeat',\n 'transform',\n 'transformOrigin',\n 'textDecoration',\n 'textWrap',\n 'animation',\n 'fontWeight',\n 'gap',\n 'gridTemplateColumns',\n 'gridTemplateRows',\n 'wordBreak',\n 'whiteSpace',\n 'textOverflow',\n 'overflow',\n 'overflowX',\n 'overflowY',\n 'textAlign',\n 'transitionDelay',\n 'filter',\n 'listStyle',\n 'objectFit',\n 'objectPosition',\n 'willChange',\n 'boxSizing',\n ].map(prop => [prop, 1]),\n);\n\n// short hand rules for the div component\nexport const divRules = {\n inline: 'display: inline',\n block: 'display: block',\n flex: `\n display: flex;\n width: 100%;\n `,\n autoFlex: `\n display: flex;\n width: auto;\n `,\n grid: `\n display: grid;\n `,\n hide: 'display: none',\n inlineBlock: 'display: inline-block',\n inlineFlex: 'display: inline-flex',\n 'column\|col': 'flex-direction: column;',\n row: 'flex-direction: row;',\n spaceBetween: 'justify-content: space-between;',\n wrap: 'flex-wrap: wrap;',\n innerCenter: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? `\n justify-content: center;\n align-items: center;\n `\n : `\n text-align: center;\n ${\n isPropPresent(props, media, 'h', 'height')\n ? `line-height: ${getPropValue(props, media, 'h', 'height')};`\n : ''\n }\n `,\n innerLeft: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-start;'\n : 'justify-content: flex-start;'\n : 'text-align: left;',\n innerRight: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-end;'\n : 'justify-content: flex-end;'\n : 'text-align: right;',\n innerTop: (props, media) => {\n return isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-start;'\n : 'align-items: flex-start;'\n : '';\n },\n innerBottom: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-end;'\n : 'align-items: flex-end;'\n : '',\n outerCenter: `\n margin-left: auto;\n margin-right: auto;\n `,\n grow: {\n css: 'flex-grow',\n format: Number,\n },\n shrink: {\n css: 'flex-shrink',\n },\n 'colReverse\|columnReverse': {\n css: 'flex-direction: column-reverse;',\n },\n reverse: {\n css: 'flex-direction: row-reverse;',\n },\n\n // dimensions\n 'width\|w': {\n css: 'width',\n format: pixelate,\n },\n 'minWidth\|minW': {\n css: 'min-width',\n format: pixelate,\n },\n 'maxWidth\|maxW': {\n css: (props, media) => `\n width: 100%;\n max-width: ${pixelate(getPropValue(props, media, 'maxWidth', 'maxW'))};\n `,\n },\n 'height\|h': {\n css: 'height',\n format: pixelate,\n },\n 'minHeight\|minH': {\n css: 'min-height',\n format: pixelate,\n },\n 'maxHeight\|maxH': {\n css: (props, media) => `\n height: 100%;\n max-height: ${pixelate(getPropValue(props, media, 'maxHeight', 'maxH'))};\n `,\n },\n 'lineHeight\|lineH\|lh': {\n css: 'line-height',\n format: pixelate,\n },\n pointer: 'cursor: pointer;',\n\n // position\n relative: 'position: relative',\n absolute: 'position: absolute',\n fixed: 'position: fixed',\n static: 'position: static',\n cover: `\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n `,\n 'zIndex\|z': {\n css: 'z-index',\n withTheme: true,\n },\n top: {\n css: 'top',\n format: pixelate,\n },\n right: {\n css: 'right',\n format: pixelate,\n },\n bottom: {\n css: 'bottom',\n format: pixelate,\n },\n left: {\n css: 'left',\n format: pixelate,\n },\n\n 'padding\|p': {\n css: 'padding',\n format: spacing,\n },\n 'paddingTop\|pt': {\n css: 'padding-top',\n format: spacing,\n },\n 'paddingRight\|pr': {\n css: 'padding-right',\n format: spacing,\n },\n 'paddingBottom\|pb': {\n css: 'padding-bottom',\n format: spacing,\n },\n 'paddingLeft\|pl': {\n css: 'padding-left',\n format: spacing,\n },\n 'paddingX\|px': {\n css: (props, media) => `\n padding-left: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n padding-right: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n `,\n },\n 'paddingY\|py': {\n css: (props, media) => `\n padding-top: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n padding-bottom: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n `,\n },\n 'margin\|m': {\n css: 'margin',\n format: spacing,\n },\n 'marginTop\|mt': {\n css: 'margin-top',\n format: spacing,\n },\n 'marginRight\|mr': {\n css: 'margin-right',\n format: spacing,\n },\n 'marginBottom\|mb': {\n css: 'margin-bottom',\n format: spacing,\n },\n 'marginLeft\|ml': {\n css: 'margin-left',\n format: spacing,\n },\n 'marginX\|mx': {\n css: (props, media) => `\n margin-left: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n margin-right: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n `,\n },\n 'marginY\|my': {\n css: (props, media) => `\n margin-top: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n margin-bottom: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n `,\n },\n\n // style\n 'background\|bg': {\n css: 'background',\n withTheme: true,\n },\n 'borderRadius\|radius': {\n css: (props, media) => {\n const radius = getPropValue(props, media, 'borderRadius', 'radius');\n if (Array.isArray(radius)) {\n return `\n border-top-left-radius: ${pixelate(radius[0])};\n border-top-right-radius: ${pixelate(radius[1])};\n border-bottom-right-radius: ${pixelate(radius[2])};\n border-bottom-left-radius: ${pixelate(radius[3])};\n `;\n }\n return `border-radius: ${pixelate(radius)}`;\n },\n },\n borderTopLeftRadius: {\n css: 'border-top-left-radius',\n format: pixelate,\n },\n borderTopRightRadius: {\n css: 'border-top-right-radius',\n format: pixelate,\n },\n borderBottomRightRadius: {\n css: 'border-bottom-right-radius',\n format: pixelate,\n },\n borderBottomLeftRadius: {\n css: 'border-bottom-left-radius',\n format: pixelate,\n },\n borderColor: {\n css: 'border-color',\n withTheme: true,\n },\n borderImage: {\n css: 'border-image',\n withTheme: true,\n },\n ...[\n ['border', 'border'],\n ['borderTop', 'border-top'],\n ['borderRight', 'border-right'],\n ['borderBottom', 'border-bottom'],\n ['borderLeft', 'border-left'],\n ].reduce(\n (rules, [jsKey, cssKey]) => ({\n ...rules,\n [jsKey]: {\n css: (props, media, extensions) => {\n const propValue = getPropValue(\n props,\n media,\n extensions?.length ? [jsKey, ...extensions].join('$') : jsKey,\n );\n\n // withTheme\n const value =\n typeof propValue === 'function'\n ? propValue(props.theme)\n : propValue;\n\n if (!/^\\d/.test(value)) {\n return `${cssKey}: 1px solid ${value}`;\n }\n return `${cssKey}: ${value}`;\n },\n },\n }),\n {},\n ),\n transition: (props, media) => {\n const value = getPropValue(props, media, 'transition');\n return typeof value === 'string'\n ? `transition: ${value}`\n : 'transition: all .2s';\n },\n 'boxShadow\|shadow': {\n css: 'box-shadow',\n withTheme: true,\n },\n textShadow: {\n css: 'text-shadow',\n withTheme: true,\n },\n color: {\n css: 'color',\n withTheme: true,\n },\n fill: {\n css: 'fill',\n withTheme: true,\n },\n fontSize: {\n css: 'font-size',\n format: pixelate,\n },\n outline: {\n css: 'outline',\n withTheme: true,\n },\n};\n","import styled from 'styled-components';\nimport { colorMixin, sizeFormatter } from './utils';\n\nimport { divMixin, renderCss } from './Div';\n\nconst textRules = {\n weight: 'font-weight',\n size: {\n css: 'font-size',\n format: sizeFormatter,\n },\n color: {\n css: (props, media, extensions) => {\n const color = extensions.includes('hover')\n ? props.$color$hover\n : props.$color;\n\n return colorMixin(color, props.theme);\n },\n },\n tnum: 'font-feature-settings: \"tnum\";letter-spacing:-0.04em;',\n breakWord: 'word-break: break-word;',\n noBreak: 'white-space: nowrap;',\n uppercase: 'text-transform: uppercase;',\n serif: 'font-family: \"Times New Roman\", Times, serif',\n 'spacing\|letterSpacing': `letter-spacing`,\n left: 'text-align: left;',\n right: 'text-align: right;',\n center: 'text-align: center;',\n lineThrough: 'text-decoration: line-through',\n // underline: 'text-decoration: underline;',\n linearGradient: props => `\n -webkit-text-fill-color: transparent;\n text-fill-color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n background-image: linear-gradient(${\n typeof props.$linearGradient === 'function'\n ? props.$linearGradient(props.theme)\n : props.$linearGradient\n });\n `,\n ellipsis: `\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n `,\n underline: 'text-decoration: underline;',\n};\n\nconst Text = styled.p`\n ${props => divMixin(props)}\n ${props => renderCss(props, textRules)}\n`;\n\nexport default Text;\n","import { upperFirst } from './utils';\n\nconst { keys, entries, fromEntries } = Object;\n\nconst getDefaultWidth = () => {\n return typeof window !== 'undefined' && typeof document !== 'undefined'\n ? document.body.clientWidth\n : 0;\n};\n\nconst createBreakpoints = breakpoints => {\n return {\n getCssMedia: ({ min, max }) => {\n if (min && max) {\n return `@media (min-width: ${min}px) and (max-width: ${max}px)`;\n }\n\n if (min) {\n return `@media (min-width: ${min}px)`;\n }\n\n return `@media (max-width: ${max}px)`;\n },\n keys: keys(breakpoints),\n ...fromEntries(\n entries(breakpoints).map(([key, { min, max }]) => {\n return [upperFirst(key), { min, max }];\n }),\n ),\n ...fromEntries(\n entries(breakpoints).map(([key, { min = 0, max = Infinity }]) => {\n return [\n `is${upperFirst(key)}`,\n (width = getDefaultWidth()) =>\n width !== 0 && width >= min && width <= max,\n ];\n }),\n ),\n };\n};\n\nconst createSpacing = spacingUnit => (multiplier, adjuster = 0, usePx = true) =>\n (multiplier \|\| 1) spacingUnit + adjuster + (usePx ? 'px' : 0);\n\nfunction createUISystem({ theme, breakpoints, spacingUnit }) {\n const Breakpoints = createBreakpoints(breakpoints);\n\n return {\n theme: {\n ...theme,\n Breakpoints,\n spacing: createSpacing(spacingUnit),\n },\n Breakpoints,\n };\n}\n\nexport default createUISystem;\n","import Div, { divMixin } from './Div';\nimport Text from './Text';\nimport createUISystem from './createUISystem';\n\nexport default Div;\n\nexport { createUISystem, Div, divMixin, Text };\n"],"mappings":"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","names":["styled","entries","upperFirst","str","kebabCase","string","x","spacing","val","theme","pixelate","getPropValue","props","media","propKeys","value","i","key","mediaVal","isPropPresent","ruleIndex","getRuleIndex","rules","index","ruleProp","config","prop","mediaPropRegex","getMediaPropRegex","colorMixin","color","sizeFormatter","fromEntries","cssWhiteList","prop","divRules","props","media","isPropPresent","getPropValue","pixelate","spacing","radius","rules","jsKey","cssKey","extensions","propValue","value","keys","renderCss","props","rules","css","ruleIndex","getRuleIndex","mediaPropRegex","getMediaPropRegex","i","propKeys","propExt","value","match","media","mediaPropExt","parts","prop","extensions","foundRule","cssWhiteList","kebabCase","config","outputValue","formattedValue","ruleCss","cssString","colons","upperFirst","divMixin","divRules","Div","styled","Div_default","styled","textRules","sizeFormatter","props","media","extensions","color","colorMixin","Text","styled","divMixin","renderCss","Text_default","keys","entries","fromEntries","getDefaultWidth","createBreakpoints","breakpoints","min","max","key","upperFirst","width","createSpacing","spacingUnit","multiplier","adjuster","usePx","createUISystem","theme","Breakpoints","createUISystem_default","index_default","Div_default"]}
1	+ {"version":3,"sources":["../src/Div.js","../src/utils.js","../src/rules.js","../src/Text.js","../src/createUISystem.js","../src/index.js"],"sourcesContent":["import styled from 'styled-components';\nimport { cssWhiteList, divRules } from './rules';\nimport {\n getMediaPropRegex,\n getRuleIndex,\n kebabCase,\n upperFirst,\n} from './utils';\n\nconst { keys } = Object;\n\n/*\n @example\n * <Div\n * $w={690}\n * $h={420}\n * $mobile$w={320}\n * />\n /\n\nexport function renderCss(props, rules, id = 'div') {\n let css = '';\n\n const ruleIndex = getRuleIndex(rules, id);\n const mediaPropRegex = getMediaPropRegex(props.theme);\n\n let i = -1;\n const propKeys = keys(props);\n while (++i < propKeys.length) {\n const propExt = propKeys[i];\n\n if (/^\\$/.test(propExt)) {\n const value = props[propExt];\n\n if (value !== false) {\n const match = propExt.match(mediaPropRegex) \|\| [];\n const [, media, mediaPropExt] = match;\n\n const cleanProp = (mediaPropExt \|\| propExt).slice(1);\n const parts = cleanProp.split('$');\n const prop = parts[0];\n const extensions = parts.slice(1);\n\n const foundRule =\n ruleIndex[prop] \|\| (cssWhiteList[prop] && kebabCase(prop));\n\n if (foundRule) {\n const config = foundRule;\n const outputValue =\n config.withTheme && typeof value === 'function'\n ? value(props.theme)\n : value;\n const formattedValue = config.format\n ? config.format(outputValue, props.theme)\n : outputValue;\n\n let ruleCss = '';\n if (typeof config === 'string') {\n ruleCss = config;\n } else if (typeof config === 'function') {\n ruleCss = config(props, media, extensions);\n } else if (typeof config.css === 'function') {\n ruleCss = config.css(props, media, extensions);\n } else {\n ruleCss = config.css;\n }\n\n let cssString = '';\n const colons = ruleCss.match(/:/g);\n if (colons && colons.length > 1) {\n cssString = ruleCss;\n } else if (colons === null) {\n cssString = `${ruleCss}: ${formattedValue};`;\n } else {\n cssString = `${ruleCss.replace(/;$/, '')};`;\n }\n\n if (extensions.includes('important')) {\n cssString = cssString.replace(/;/g, ' !important;');\n }\n\n if (extensions.includes('hover') && !extensions.includes('focus')) {\n cssString = `&:hover,&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('hover') && extensions.includes('focus')) {\n cssString = `&:hover { ${cssString} }`;\n }\n\n if (extensions.includes('focus')) {\n cssString = `&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('active')) {\n cssString = `&:active { ${cssString} }`;\n }\n\n if (extensions.includes('last')) {\n cssString = `&:last-child { ${cssString} }`;\n }\n\n if (extensions.includes('odd')) {\n cssString = `&:nth-child(odd) { ${cssString} }`;\n }\n\n if (extensions.includes('even')) {\n cssString = `&:nth-child(even) { ${cssString} }`;\n }\n\n if (media) {\n const cssMedia = props.theme.Breakpoints.getCssMedia(\n props.theme.Breakpoints[upperFirst(media)],\n );\n cssString = `${cssMedia} { ${cssString} }`;\n }\n\n css += cssString;\n }\n }\n }\n }\n\n return css;\n}\n\nexport const divMixin = props => renderCss(props, divRules);\n\nconst Div = styled.div`\n ${props => divMixin(props)}\n`;\n\nexport default Div;\n","const { entries } = Object;\n\nexport const upperFirst = str => str.charAt(0).toUpperCase() + str.slice(1);\n\nexport const kebabCase = (string = '') =>\n string\n .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]\|\\b)\|[A-Z]?[a-z]+[0-9]\|[A-Z]\|[0-9]+/g)\n ?.map(x => x.toLowerCase())\n ?.join('-') ?? '';\n\nexport function spacing(val, theme) {\n if (/(px\|%)$/.test(val)) {\n return val;\n }\n\n if (typeof val === 'string') {\n return val;\n }\n\n if (val === 0) {\n return val;\n }\n\n return theme.spacing(val);\n}\n\nexport function pixelate(val) {\n if (typeof val === 'number') {\n return `${val}px`;\n }\n return val;\n}\n\nexport function getPropValue(props, media, ...propKeys) {\n let value;\n for (let i = 0; i < propKeys.length; i++) {\n const key = propKeys[i];\n if (media) {\n const mediaVal = props[`$${media}$${key}`];\n if (mediaVal) {\n value = mediaVal;\n break;\n }\n }\n const val = props[`$${key}`];\n if (val) {\n value = val;\n break;\n }\n }\n\n return value;\n}\n\nexport function isPropPresent(props, media, ...propKeys) {\n return !!getPropValue(props, media, ...propKeys);\n}\n\nconst ruleIndexes = {};\nexport function getRuleIndex(rules, id) {\n if (ruleIndexes[id]) return ruleIndexes[id];\n\n const index = {};\n entries(rules).forEach(([ruleProp, config]) => {\n ruleProp.split('\|').forEach(prop => {\n index[prop] = config;\n });\n });\n ruleIndexes[id] = index;\n\n return index;\n}\n\nlet mediaPropRegex = null;\nexport function getMediaPropRegex(theme) {\n if (mediaPropRegex) return mediaPropRegex;\n\n mediaPropRegex = new RegExp(\n `^\\\\$(${theme.Breakpoints.keys.join('\|')})(\\\\$.)`,\n );\n\n return mediaPropRegex;\n}\n\nexport function colorMixin(color, theme) {\n console.log('TCL: colorMixin -> color', color);\n if (color) {\n if ([100, 200, 300, 400, 500, 600, 700, 800, 900].includes(color)) {\n return `color: ${theme[`fill${color}`]};`;\n }\n\n if (typeof color === 'string') {\n if (theme[color]) {\n return `color: ${theme[color]};`;\n }\n return `color: ${color};`;\n }\n }\n\n return '';\n}\n\nexport const sizeFormatter = value => {\n if (typeof value === 'number') {\n return `${value}px`;\n }\n return value;\n};\n","/* eslint-disable no-nested-ternary /\nimport { getPropValue, isPropPresent, pixelate, spacing } from './utils';\n\nconst { fromEntries } = Object;\n\nexport const cssWhiteList = fromEntries(\n [\n 'display',\n 'align',\n 'vAlign',\n 'alignItems',\n 'alignContent',\n 'alignSelf',\n 'justifyContent',\n 'justifySelf',\n 'flexDirection',\n 'flexBasis',\n 'flexWrap',\n 'pointerEvents',\n 'cursor',\n 'position',\n 'opacity',\n 'backgroundColor',\n 'backgroundImage',\n 'backgroundSize',\n 'backgroundPosition',\n 'backgroundRepeat',\n 'transform',\n 'transformOrigin',\n 'textDecoration',\n 'textWrap',\n 'animation',\n 'fontWeight',\n 'gap',\n 'gridTemplateColumns',\n 'gridTemplateRows',\n 'wordBreak',\n 'whiteSpace',\n 'textOverflow',\n 'overflow',\n 'overflowX',\n 'overflowY',\n 'textAlign',\n 'transitionDelay',\n 'filter',\n 'listStyle',\n 'objectFit',\n 'objectPosition',\n 'willChange',\n 'boxSizing',\n ].map(prop => [prop, 1]),\n);\n\n// short hand rules for the div component\nexport const divRules = {\n inline: 'display: inline',\n block: 'display: block',\n flex: `\n display: flex;\n width: 100%;\n `,\n autoFlex: `\n display: flex;\n width: auto;\n `,\n grid: `\n display: grid;\n `,\n hide: 'display: none',\n inlineBlock: 'display: inline-block',\n inlineFlex: 'display: inline-flex',\n 'column\|col': 'flex-direction: column;',\n row: 'flex-direction: row;',\n spaceBetween: 'justify-content: space-between;',\n wrap: 'flex-wrap: wrap;',\n innerCenter: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? `\n justify-content: center;\n align-items: center;\n `\n : `\n text-align: center;\n ${\n isPropPresent(props, media, 'h', 'height')\n ? `line-height: ${getPropValue(props, media, 'h', 'height')};`\n : ''\n }\n `,\n innerLeft: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-start;'\n : 'justify-content: flex-start;'\n : 'text-align: left;',\n innerRight: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-end;'\n : 'justify-content: flex-end;'\n : 'text-align: right;',\n innerTop: (props, media) => {\n return isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-start;'\n : 'align-items: flex-start;'\n : '';\n },\n innerBottom: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-end;'\n : 'align-items: flex-end;'\n : '',\n outerCenter: `\n margin-left: auto;\n margin-right: auto;\n `,\n grow: {\n css: 'flex-grow',\n format: Number,\n },\n shrink: {\n css: 'flex-shrink',\n },\n 'colReverse\|columnReverse': {\n css: 'flex-direction: column-reverse;',\n },\n reverse: {\n css: 'flex-direction: row-reverse;',\n },\n\n // dimensions\n 'width\|w': {\n css: 'width',\n format: pixelate,\n },\n 'minWidth\|minW': {\n css: 'min-width',\n format: pixelate,\n },\n 'maxWidth\|maxW': {\n css: (props, media) => `\n width: 100%;\n max-width: ${pixelate(getPropValue(props, media, 'maxWidth', 'maxW'))};\n `,\n },\n 'height\|h': {\n css: 'height',\n format: pixelate,\n },\n 'minHeight\|minH': {\n css: 'min-height',\n format: pixelate,\n },\n 'maxHeight\|maxH': {\n css: (props, media) => `\n height: 100%;\n max-height: ${pixelate(getPropValue(props, media, 'maxHeight', 'maxH'))};\n `,\n },\n 'lineHeight\|lineH\|lh': {\n css: 'line-height',\n format: pixelate,\n },\n pointer: 'cursor: pointer;',\n\n // position\n relative: 'position: relative',\n absolute: 'position: absolute',\n fixed: 'position: fixed',\n static: 'position: static',\n cover: `\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n `,\n 'zIndex\|z': {\n css: 'z-index',\n withTheme: true,\n },\n top: {\n css: 'top',\n format: pixelate,\n },\n right: {\n css: 'right',\n format: pixelate,\n },\n bottom: {\n css: 'bottom',\n format: pixelate,\n },\n left: {\n css: 'left',\n format: pixelate,\n },\n\n 'padding\|p': {\n css: 'padding',\n format: spacing,\n },\n 'paddingTop\|pt': {\n css: 'padding-top',\n format: spacing,\n },\n 'paddingRight\|pr': {\n css: 'padding-right',\n format: spacing,\n },\n 'paddingBottom\|pb': {\n css: 'padding-bottom',\n format: spacing,\n },\n 'paddingLeft\|pl': {\n css: 'padding-left',\n format: spacing,\n },\n 'paddingX\|px': {\n css: (props, media) => `\n padding-left: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n padding-right: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n `,\n },\n 'paddingY\|py': {\n css: (props, media) => `\n padding-top: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n padding-bottom: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n `,\n },\n 'margin\|m': {\n css: 'margin',\n format: spacing,\n },\n 'marginTop\|mt': {\n css: 'margin-top',\n format: spacing,\n },\n 'marginRight\|mr': {\n css: 'margin-right',\n format: spacing,\n },\n 'marginBottom\|mb': {\n css: 'margin-bottom',\n format: spacing,\n },\n 'marginLeft\|ml': {\n css: 'margin-left',\n format: spacing,\n },\n 'marginX\|mx': {\n css: (props, media) => `\n margin-left: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n margin-right: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n `,\n },\n 'marginY\|my': {\n css: (props, media) => `\n margin-top: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n margin-bottom: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n `,\n },\n\n // style\n 'background\|bg': {\n css: 'background',\n withTheme: true,\n },\n 'borderRadius\|radius': {\n css: (props, media) => {\n const radius = getPropValue(props, media, 'borderRadius', 'radius');\n if (Array.isArray(radius)) {\n return `\n border-top-left-radius: ${pixelate(radius[0])};\n border-top-right-radius: ${pixelate(radius[1])};\n border-bottom-right-radius: ${pixelate(radius[2])};\n border-bottom-left-radius: ${pixelate(radius[3])};\n `;\n }\n return `border-radius: ${pixelate(radius)}`;\n },\n },\n borderTopLeftRadius: {\n css: 'border-top-left-radius',\n format: pixelate,\n },\n borderTopRightRadius: {\n css: 'border-top-right-radius',\n format: pixelate,\n },\n borderBottomRightRadius: {\n css: 'border-bottom-right-radius',\n format: pixelate,\n },\n borderBottomLeftRadius: {\n css: 'border-bottom-left-radius',\n format: pixelate,\n },\n borderColor: {\n css: 'border-color',\n withTheme: true,\n },\n borderImage: {\n css: 'border-image',\n withTheme: true,\n },\n ...[\n ['border', 'border'],\n ['borderTop', 'border-top'],\n ['borderRight', 'border-right'],\n ['borderBottom', 'border-bottom'],\n ['borderLeft', 'border-left'],\n ].reduce(\n (rules, [jsKey, cssKey]) => ({\n ...rules,\n [jsKey]: {\n css: (props, media, extensions) => {\n const propValue = getPropValue(\n props,\n media,\n extensions?.length ? [jsKey, ...extensions].join('$') : jsKey,\n );\n console.log('TCL: propValue', propValue);\n\n // withTheme\n const value =\n typeof propValue === 'function'\n ? propValue(props.theme)\n : propValue;\n\n if (!/^\\d/.test(value)) {\n return `${cssKey}: 1px solid ${value}`;\n }\n return `${cssKey}: ${value}`;\n },\n },\n }),\n {},\n ),\n transition: (props, media) => {\n const value = getPropValue(props, media, 'transition');\n return typeof value === 'string'\n ? `transition: ${value}`\n : 'transition: all .2s';\n },\n 'boxShadow\|shadow': {\n css: 'box-shadow',\n withTheme: true,\n },\n textShadow: {\n css: 'text-shadow',\n withTheme: true,\n },\n color: {\n css: 'color',\n withTheme: true,\n },\n fill: {\n css: 'fill',\n withTheme: true,\n },\n fontSize: {\n css: 'font-size',\n format: pixelate,\n },\n outline: {\n css: 'outline',\n withTheme: true,\n },\n};\n","import styled from 'styled-components';\nimport { colorMixin, sizeFormatter } from './utils';\n\nimport { divMixin, renderCss } from './Div';\n\nconst textRules = {\n weight: 'font-weight',\n size: {\n css: 'font-size',\n format: sizeFormatter,\n },\n color: {\n css: (props, media, extensions) => {\n const color = extensions.includes('hover')\n ? props.$color$hover\n : props.$color;\n console.log('TCL: color', color);\n\n return colorMixin(color, props.theme);\n },\n },\n tnum: 'font-feature-settings: \"tnum\";letter-spacing:-0.04em;',\n breakWord: 'word-break: break-word;',\n noBreak: 'white-space: nowrap;',\n uppercase: 'text-transform: uppercase;',\n serif: 'font-family: \"Times New Roman\", Times, serif',\n 'spacing\|letterSpacing': `letter-spacing`,\n left: 'text-align: left;',\n right: 'text-align: right;',\n center: 'text-align: center;',\n lineThrough: 'text-decoration: line-through',\n // underline: 'text-decoration: underline;',\n linearGradient: props => `\n -webkit-text-fill-color: transparent;\n text-fill-color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n background-image: linear-gradient(${\n typeof props.$linearGradient === 'function'\n ? props.$linearGradient(props.theme)\n : props.$linearGradient\n });\n `,\n ellipsis: `\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n `,\n underline: 'text-decoration: underline;',\n};\n\nconst Text = styled.p`\n ${props => divMixin(props)}\n ${props => {\n console.log('TCL: props', props);\n console.log('TCL: render', renderCss(props, textRules, 'text'));\n return renderCss(props, textRules, 'text');\n }}\n`;\n\nexport default Text;\n","import { upperFirst } from './utils';\n\nconst { keys, entries, fromEntries } = Object;\n\nconst getDefaultWidth = () => {\n return typeof window !== 'undefined' && typeof document !== 'undefined'\n ? document.body.clientWidth\n : 0;\n};\n\nconst createBreakpoints = breakpoints => {\n return {\n getCssMedia: ({ min, max }) => {\n if (min && max) {\n return `@media (min-width: ${min}px) and (max-width: ${max}px)`;\n }\n\n if (min) {\n return `@media (min-width: ${min}px)`;\n }\n\n return `@media (max-width: ${max}px)`;\n },\n keys: keys(breakpoints),\n ...fromEntries(\n entries(breakpoints).map(([key, { min, max }]) => {\n return [upperFirst(key), { min, max }];\n }),\n ),\n ...fromEntries(\n entries(breakpoints).map(([key, { min = 0, max = Infinity }]) => {\n return [\n `is${upperFirst(key)}`,\n (width = getDefaultWidth()) =>\n width !== 0 && width >= min && width <= max,\n ];\n }),\n ),\n };\n};\n\nconst createSpacing = spacingUnit => (multiplier, adjuster = 0, usePx = true) =>\n (multiplier \|\| 1) spacingUnit + adjuster + (usePx ? 'px' : 0);\n\nfunction createUISystem({ theme, breakpoints, spacingUnit }) {\n const Breakpoints = createBreakpoints(breakpoints);\n\n return {\n theme: {\n ...theme,\n Breakpoints,\n spacing: createSpacing(spacingUnit),\n },\n Breakpoints,\n };\n}\n\nexport default createUISystem;\n","import Div, { divMixin } from './Div';\nimport Text from './Text';\nimport createUISystem from './createUISystem';\n\nexport default Div;\n\nexport { createUISystem, Div, divMixin, Text };\n"],"mappings":"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","names":["styled","entries","upperFirst","str","kebabCase","string","x","spacing","val","theme","pixelate","getPropValue","props","media","propKeys","value","i","key","mediaVal","isPropPresent","ruleIndexes","getRuleIndex","rules","id","index","ruleProp","config","prop","mediaPropRegex","getMediaPropRegex","colorMixin","color","sizeFormatter","fromEntries","cssWhiteList","prop","divRules","props","media","isPropPresent","getPropValue","pixelate","spacing","radius","rules","jsKey","cssKey","extensions","propValue","value","keys","renderCss","props","rules","id","css","ruleIndex","getRuleIndex","mediaPropRegex","getMediaPropRegex","i","propKeys","propExt","value","match","media","mediaPropExt","parts","prop","extensions","foundRule","cssWhiteList","kebabCase","config","outputValue","formattedValue","ruleCss","cssString","colons","upperFirst","divMixin","divRules","Div","styled","Div_default","styled","textRules","sizeFormatter","props","media","extensions","color","colorMixin","Text","styled","divMixin","renderCss","Text_default","keys","entries","fromEntries","getDefaultWidth","createBreakpoints","breakpoints","min","max","key","upperFirst","width","createSpacing","spacingUnit","multiplier","adjuster","usePx","createUISystem","theme","Breakpoints","createUISystem_default","index_default","Div_default"]}

package/dist/metafile-cjs.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"inputs":{"src/utils.js":{"bytes":~~2145~~,"imports":[],"format":"esm"},"src/rules.js":{"bytes":~~8780~~,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Div.js":{"bytes":~~3564~~,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/rules.js","kind":"import-statement","original":"./rules"},{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Text.js":{"bytes":~~1566~~,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/utils.js","kind":"import-statement","original":"./utils"},{"path":"src/Div.js","kind":"import-statement","original":"./Div"}],"format":"esm"},"src/createUISystem.js":{"bytes":1443,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/index.js":{"bytes":183,"imports":[{"path":"src/Div.js","kind":"import-statement","original":"./Div"},{"path":"src/Text.js","kind":"import-statement","original":"./Text"},{"path":"src/createUISystem.js","kind":"import-statement","original":"./createUISystem"}],"format":"esm"}},"outputs":{"dist/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":~~29438~~},"dist/index.cjs":{"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"styled-components","kind":"import-statement","external":true}],"exports":["Div","Text","createUISystem","default","divMixin"],"entryPoint":"src/index.js","inputs":{"src/Div.js":{"bytesInOutput":~~1159~~},"src/utils.js":{"bytesInOutput":~~963~~},"src/rules.js":{"bytesInOutput":~~5313~~},"src/Text.js":{"bytesInOutput":~~1053~~},"src/createUISystem.js":{"bytesInOutput":~~599~~},"src/index.js":{"bytesInOutput":9}},"bytes":~~9173~~}}}
1	+ {"inputs":{"src/utils.js":{"bytes":2219,"imports":[],"format":"esm"},"src/rules.js":{"bytes":8832,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Div.js":{"bytes":3580,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/rules.js","kind":"import-statement","original":"./rules"},{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Text.js":{"bytes":1739,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/utils.js","kind":"import-statement","original":"./utils"},{"path":"src/Div.js","kind":"import-statement","original":"./Div"}],"format":"esm"},"src/createUISystem.js":{"bytes":1443,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/index.js":{"bytes":183,"imports":[{"path":"src/Div.js","kind":"import-statement","original":"./Div"},{"path":"src/Text.js","kind":"import-statement","original":"./Text"},{"path":"src/createUISystem.js","kind":"import-statement","original":"./createUISystem"}],"format":"esm"}},"outputs":{"dist/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":30001},"dist/index.cjs":{"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"styled-components","kind":"import-statement","external":true}],"exports":["Div","Text","createUISystem","default","divMixin"],"entryPoint":"src/index.js","inputs":{"src/Div.js":{"bytesInOutput":1169},"src/utils.js":{"bytesInOutput":1014},"src/rules.js":{"bytesInOutput":5349},"src/Text.js":{"bytesInOutput":1159},"src/createUISystem.js":{"bytesInOutput":601},"src/index.js":{"bytesInOutput":9}},"bytes":9378}}}

package/dist/metafile-esm.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"inputs":{"src/utils.js":{"bytes":~~2145~~,"imports":[],"format":"esm"},"src/rules.js":{"bytes":~~8780~~,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Div.js":{"bytes":~~3564~~,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/rules.js","kind":"import-statement","original":"./rules"},{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Text.js":{"bytes":~~1566~~,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/utils.js","kind":"import-statement","original":"./utils"},{"path":"src/Div.js","kind":"import-statement","original":"./Div"}],"format":"esm"},"src/createUISystem.js":{"bytes":1443,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/index.js":{"bytes":183,"imports":[{"path":"src/Div.js","kind":"import-statement","original":"./Div"},{"path":"src/Text.js","kind":"import-statement","original":"./Text"},{"path":"src/createUISystem.js","kind":"import-statement","original":"./createUISystem"}],"format":"esm"}},"outputs":{"dist/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":~~29438~~},"dist/index.mjs":{"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"styled-components","kind":"import-statement","external":true}],"exports":["Div","Text","createUISystem","default","divMixin"],"entryPoint":"src/index.js","inputs":{"src/Div.js":{"bytesInOutput":~~1159~~},"src/utils.js":{"bytesInOutput":~~963~~},"src/rules.js":{"bytesInOutput":~~5313~~},"src/Text.js":{"bytesInOutput":~~1053~~},"src/createUISystem.js":{"bytesInOutput":~~599~~},"src/index.js":{"bytesInOutput":9}},"bytes":~~9173~~}}}
1	+ {"inputs":{"src/utils.js":{"bytes":2219,"imports":[],"format":"esm"},"src/rules.js":{"bytes":8832,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Div.js":{"bytes":3580,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/rules.js","kind":"import-statement","original":"./rules"},{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Text.js":{"bytes":1739,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/utils.js","kind":"import-statement","original":"./utils"},{"path":"src/Div.js","kind":"import-statement","original":"./Div"}],"format":"esm"},"src/createUISystem.js":{"bytes":1443,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/index.js":{"bytes":183,"imports":[{"path":"src/Div.js","kind":"import-statement","original":"./Div"},{"path":"src/Text.js","kind":"import-statement","original":"./Text"},{"path":"src/createUISystem.js","kind":"import-statement","original":"./createUISystem"}],"format":"esm"}},"outputs":{"dist/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":30001},"dist/index.mjs":{"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"styled-components","kind":"import-statement","external":true}],"exports":["Div","Text","createUISystem","default","divMixin"],"entryPoint":"src/index.js","inputs":{"src/Div.js":{"bytesInOutput":1169},"src/utils.js":{"bytesInOutput":1014},"src/rules.js":{"bytesInOutput":5349},"src/Text.js":{"bytesInOutput":1159},"src/createUISystem.js":{"bytesInOutput":601},"src/index.js":{"bytesInOutput":9}},"bytes":9378}}}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@streamlinedfi/div",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Streamlined Div is a styled-components extension of the html div for building products with speed",
   "author": "Streamlined Finance",
   "repository": {
@@ -28,6 +28,7 @@
     "package.json"
   ],
   "scripts": {
+    "prepublishOnly": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsup",
     "dev": "tsup --watch",