@streamlinedfi/div 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -0,0 +1,64 @@
+"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,h=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:`
+    display: flex;
+    width: 100%;
+  `,autoFlex:`
+    display: flex;
+    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")?`
+          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:`
+    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)=>`
+      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)=>`
+      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:`
+    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)=>`
+      padding-left: ${s(a(e,t,"paddingX","px"))};
+      padding-right: ${s(a(e,t,"paddingX","px"))};
+    `},"paddingY|py":{css:(e,t)=>`
+      padding-top: ${s(a(e,t,"paddingY","py"))};
+      padding-bottom: ${s(a(e,t,"paddingY","py"))};
+    `},"margin|m":{css:"margin",format:s},"marginTop|mt":{css:"margin-top",format:s},"marginRight|mr":{css:"margin-right",format:s},"marginBottom|mb":{css:"margin-bottom",format:s},"marginLeft|ml":{css:"margin-left",format:s},"marginX|mx":{css:(e,t)=>`
+      margin-left: ${s(a(e,t,"marginX","mx"))};
+      margin-right: ${s(a(e,t,"marginX","mx"))};
+    `},"marginY|my":{css:(e,t)=>`
+      margin-top: ${s(a(e,t,"marginY","my"))};
+      margin-bottom: ${s(a(e,t,"marginY","my"))};
+    `},"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,p="";typeof m=="string"?p=m:typeof m=="function"?p=m(e,b,c):typeof m.css=="function"?p=m.css(e,b,c):p=m.css;let r="",k=p.match(/:/g);k&&k.length>1?r=p:k===null?r=`${p}: ${X};`:r=`${p.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[h(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=>`
+    -webkit-text-fill-color: transparent;
+    text-fill-color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+    background-image: linear-gradient(${typeof e.$linearGradient=="function"?e.$linearGradient(e.theme):e.$linearGradient});
+  `,ellipsis:`
+    white-space: nowrap;
+    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}])=>[h(t),{min:i,max:o}])),...L(A(e).map(([t,{min:i=0,max:o=1/0}])=>[`is${h(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;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +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;AAMyE,oBAAA;AACC,qBAAA;AAIjD,IAAA;AAC+C,mBAAA;AACG,sBAAA;AAwBlD,IAAA;AAC8C,mBAAA;AACC,oBAAA;AAI/C,IAAA;AAC6C,kBAAA;AACG,qBAAA;AAa5D,IAAA;AACwC,kCAAA;AACC,mCAAA;AACG,sCAAA;AACD,qCAAA;AA0BxD,QAAA;AFhL0B,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(getPropValue(props, media, 'paddingX', 'px'))};\n      padding-right: ${spacing(getPropValue(props, media, 'paddingX', 'px'))};\n    `,\n  },\n  'paddingY|py': {\n    css: (props, media) => `\n      padding-top: ${spacing(getPropValue(props, media, 'paddingY', 'py'))};\n      padding-bottom: ${spacing(getPropValue(props, media, 'paddingY', 'py'))};\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(getPropValue(props, media, 'marginX', 'mx'))};\n      margin-right: ${spacing(getPropValue(props, media, 'marginX', 'mx'))};\n    `,\n  },\n  'marginY|my': {\n    css: (props, media) => `\n      margin-top: ${spacing(getPropValue(props, media, 'marginY', 'my'))};\n      margin-bottom: ${spacing(getPropValue(props, media, 'marginY', 'my'))};\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"]}

package/dist/index.mjs

@@ -0,0 +1,64 @@
+import O from"styled-components";var{entries:Y}=Object,h=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:`
+    display: flex;
+    width: 100%;
+  `,autoFlex:`
+    display: flex;
+    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")?`
+          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:`
+    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)=>`
+      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)=>`
+      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:`
+    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)=>`
+      padding-left: ${s(a(e,t,"paddingX","px"))};
+      padding-right: ${s(a(e,t,"paddingX","px"))};
+    `},"paddingY|py":{css:(e,t)=>`
+      padding-top: ${s(a(e,t,"paddingY","py"))};
+      padding-bottom: ${s(a(e,t,"paddingY","py"))};
+    `},"margin|m":{css:"margin",format:s},"marginTop|mt":{css:"margin-top",format:s},"marginRight|mr":{css:"margin-right",format:s},"marginBottom|mb":{css:"margin-bottom",format:s},"marginLeft|ml":{css:"margin-left",format:s},"marginX|mx":{css:(e,t)=>`
+      margin-left: ${s(a(e,t,"marginX","mx"))};
+      margin-right: ${s(a(e,t,"marginX","mx"))};
+    `},"marginY|my":{css:(e,t)=>`
+      margin-top: ${s(a(e,t,"marginY","my"))};
+      margin-bottom: ${s(a(e,t,"marginY","my"))};
+    `},"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,p="";typeof m=="string"?p=m:typeof m=="function"?p=m(e,b,c):typeof m.css=="function"?p=m.css(e,b,c):p=m.css;let r="",k=p.match(/:/g);k&&k.length>1?r=p:k===null?r=`${p}: ${X};`:r=`${p.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[h(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=>`
+    -webkit-text-fill-color: transparent;
+    text-fill-color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+    background-image: linear-gradient(${typeof e.$linearGradient=="function"?e.$linearGradient(e.theme):e.$linearGradient});
+  `,ellipsis:`
+    white-space: nowrap;
+    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}])=>[h(t),{min:i,max:o}])),...L(A(e).map(([t,{min:i=0,max:o=1/0}])=>[`is${h(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};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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(getPropValue(props, media, 'paddingX', 'px'))};\n      padding-right: ${spacing(getPropValue(props, media, 'paddingX', 'px'))};\n    `,\n  },\n  'paddingY|py': {\n    css: (props, media) => `\n      padding-top: ${spacing(getPropValue(props, media, 'paddingY', 'py'))};\n      padding-bottom: ${spacing(getPropValue(props, media, 'paddingY', 'py'))};\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(getPropValue(props, media, 'marginX', 'mx'))};\n      margin-right: ${spacing(getPropValue(props, media, 'marginX', 'mx'))};\n    `,\n  },\n  'marginY|my': {\n    css: (props, media) => `\n      margin-top: ${spacing(getPropValue(props, media, 'marginY', 'my'))};\n      margin-bottom: ${spacing(getPropValue(props, media, 'marginY', 'my'))};\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"]}

package/dist/metafile-cjs.json

@@ -0,0 +1 @@
+{"inputs":{"src/utils.js":{"bytes":2145,"imports":[],"format":"esm"},"src/rules.js":{"bytes":8476,"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":29018},"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":5249},"src/Text.js":{"bytesInOutput":1053},"src/createUISystem.js":{"bytesInOutput":599},"src/index.js":{"bytesInOutput":9}},"bytes":9109}}}

package/dist/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/utils.js":{"bytes":2145,"imports":[],"format":"esm"},"src/rules.js":{"bytes":8476,"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":29018},"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":5249},"src/Text.js":{"bytesInOutput":1053},"src/createUISystem.js":{"bytesInOutput":599},"src/index.js":{"bytesInOutput":9}},"bytes":9109}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlinedfi/div",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Streamlined Div is a styled-components extension of the html div for building products with speed",
   "author": "Streamlined Finance",
   "repository": {
@@ -12,11 +12,34 @@
     "url": "https://github.com/streamlinedfi/div/issues"
   },
   "homepage": "https://github.com/streamlinedfi/div#readme",
-  "main": "src/index.js",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "package.json"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "analyze": "npx esbuild-visualizer --metadata ./dist/metafile-esm.json"
   },
   "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "styled-components": "^6.1.19"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
   }
 }

package/src/Div.js

@@ -1,132 +0,0 @@
-import styled from 'styled-components';
-import { cssWhiteList, divRules } from './rules';
-import {
-  getMediaPropRegex,
-  getRuleIndex,
-  kebabCase,
-  upperFirst,
-} from './utils';
-
-const { keys } = Object;
-
-/**
- * @example
- * <Div
- *   $w={690}
- *   $h={420}
- *   $mobile$w={320}
- * />
- */
-
-export function renderCss(props, rules) {
-  let css = '';
-
-  const ruleIndex = getRuleIndex(rules);
-  const mediaPropRegex = getMediaPropRegex(props.theme);
-
-  let i = -1;
-  const propKeys = keys(props);
-  while (++i < propKeys.length) {
-    const propExt = propKeys[i];
-
-    if (/^\$/.test(propExt)) {
-      const value = props[propExt];
-
-      if (value !== false) {
-        const match = propExt.match(mediaPropRegex) || [];
-        const [, media, mediaPropExt] = match;
-
-        const cleanProp = (mediaPropExt || propExt).slice(1);
-        const parts = cleanProp.split('$');
-        const prop = parts[0];
-        const extensions = parts.slice(1);
-
-        const foundRule =
-          ruleIndex[prop] || (cssWhiteList[prop] && kebabCase(prop));
-
-        if (foundRule) {
-          const config = foundRule;
-          const outputValue =
-            config.withTheme && typeof value === 'function'
-              ? value(props.theme)
-              : value;
-          const formattedValue = config.format
-            ? config.format(outputValue, props.theme)
-            : outputValue;
-
-          let ruleCss = '';
-          if (typeof config === 'string') {
-            ruleCss = config;
-          } else if (typeof config === 'function') {
-            ruleCss = config(props, media, extensions);
-          } else if (typeof config.css === 'function') {
-            ruleCss = config.css(props, media, extensions);
-          } else {
-            ruleCss = config.css;
-          }
-
-          let cssString = '';
-          const colons = ruleCss.match(/:/g);
-          if (colons && colons.length > 1) {
-            cssString = ruleCss;
-          } else if (colons === null) {
-            cssString = `${ruleCss}: ${formattedValue};`;
-          } else {
-            cssString = `${ruleCss.replace(/;$/, '')};`;
-          }
-
-          if (extensions.includes('important')) {
-            cssString = cssString.replace(/;/g, ' !important;');
-          }
-
-          if (extensions.includes('hover') && !extensions.includes('focus')) {
-            cssString = `&:hover,&:focus { ${cssString} }`;
-          }
-
-          if (extensions.includes('hover') && extensions.includes('focus')) {
-            cssString = `&:hover { ${cssString} }`;
-          }
-
-          if (extensions.includes('focus')) {
-            cssString = `&:focus { ${cssString} }`;
-          }
-
-          if (extensions.includes('active')) {
-            cssString = `&:active { ${cssString} }`;
-          }
-
-          if (extensions.includes('last')) {
-            cssString = `&:last-child { ${cssString} }`;
-          }
-
-          if (extensions.includes('odd')) {
-            cssString = `&:nth-child(odd) { ${cssString} }`;
-          }
-
-          if (extensions.includes('even')) {
-            cssString = `&:nth-child(even) { ${cssString} }`;
-          }
-
-          if (media) {
-            const cssMedia = props.theme.Breakpoints.getCssMedia(
-              props.theme.Breakpoints[upperFirst(media)],
-            );
-            cssString = `${cssMedia} { ${cssString} }`;
-          }
-
-          css += cssString;
-        }
-      }
-    }
-  }
-
-  return css;
-}
-
-export const divMixin = props => renderCss(props, divRules);
-
-const Div = styled.div`
-  ${props => divMixin(props)}
-`;
-
-export default Div;

package/src/Text.js

@@ -1,58 +0,0 @@
-import isFunction from 'lodash/isFunction';
-import styled from 'styled-components';
-import { colorMixin, sizeFormatter } from './utils';
-
-import { divMixin, renderCss } from './Div';
-
-const textRules = {
-  weight: 'font-weight',
-  size: {
-    css: 'font-size',
-    format: sizeFormatter,
-  },
-  color: {
-    css: (props, media, extensions) => {
-      const color = extensions.includes('hover')
-        ? props.$color$hover
-        : props.$color;
-
-      return colorMixin(color, props.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',
-  // underline: 'text-decoration: underline;',
-  linearGradient: props => `
-    -webkit-text-fill-color: transparent;
-    text-fill-color: transparent;
-    -webkit-background-clip: text;
-    background-clip: text;
-    background-image: linear-gradient(${
-      isFunction(props.$linearGradient)
-        ? props.$linearGradient(props.theme)
-        : props.$linearGradient
-    });
-  `,
-  ellipsis: `
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-  `,
-  underline: 'text-decoration: underline;',
-};
-
-const Text = styled.p`
-  ${props => divMixin(props)}
-  ${props => renderCss(props, textRules)}
-`;
-
-export default Text;

package/src/createUISystem.js

@@ -1,58 +0,0 @@
-import { upperFirst } from './utils';
-
-const { keys, entries, fromEntries } = Object;
-
-const getDefaultWidth = () => {
-  return typeof window !== 'undefined' && typeof document !== 'undefined'
-    ? document.body.clientWidth
-    : 0;
-};
-
-const createBreakpoints = breakpoints => {
-  return {
-    getCssMedia: ({ min, max }) => {
-      if (min && max) {
-        return `@media (min-width: ${min}px) and (max-width: ${max}px)`;
-      }
-
-      if (min) {
-        return `@media (min-width: ${min}px)`;
-      }
-
-      return `@media (max-width: ${max}px)`;
-    },
-    keys: keys(breakpoints),
-    ...fromEntries(
-      entries(breakpoints).map(([key, { min, max }]) => {
-        return [upperFirst(key), { min, max }];
-      }),
-    ),
-    ...fromEntries(
-      entries(breakpoints).map(([key, { min = 0, max = Infinity }]) => {
-        return [
-          `is${upperFirst(key)}`,
-          (width = getDefaultWidth()) =>
-            width !== 0 && width >= min && width <= max,
-        ];
-      }),
-    ),
-  };
-};
-
-const createSpacing = spacingUnit => (multiplier, adjuster = 0, usePx = true) =>
-  (multiplier || 1) * spacingUnit + adjuster + (usePx ? 'px' : 0);
-
-function createUISystem({ theme, breakpoints, spacingUnit }) {
-  const Breakpoints = createBreakpoints(breakpoints);
-
-  return {
-    theme: {
-      ...theme,
-      Breakpoints,
-      spacing: createSpacing(spacingUnit),
-    },
-    Breakpoints,
-  };
-}
-
-export default createUISystem;

package/src/index.js

@@ -1,7 +0,0 @@
-import Div, { divMixin } from './Div';
-import Text from './Text';
-import createUISystem from './createUISystem';
-
-export default Div;
-
-export { createUISystem, Div, divMixin, Text };