@slimr/styled 2.0.2 → 2.0.3

package/README.md

@@ -62,7 +62,7 @@ function Button(props: ButtonProps) {
   return (
     <button
       {...props}
-      onClick={(e) => {
+      onClick={e => {
         console.log(`Button ${props.id} clicked`)
         props.onClick?.(e)
       }}
@@ -96,11 +96,11 @@ export function App() {
         // Any attr with '_' prefix will be passed to zx
         _fontWeight="var(--font-weight)"
         // like _zx, but applies only on :hover
-        _hover={{ bg: 'lightblue' }}
+        _hover={{bg: 'lightblue'}}
         // like _zx, but applies only on :active
-        _active={{ bg: 'lightblue' }}
+        _active={{bg: 'lightblue'}}
         // like _zx, but applies only when browser prefers dark modes
-        _dark={{ bg: 'lightblue' }}
+        _dark={{bg: 'lightblue'}}
       >
         Click me!
       </ButtonP>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slimr/styled",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "author": "Brian Dombrowski",
   "license": "ISC",
   "private": false,

package/src/core.cjs

@@ -1,35 +1,35 @@
-"use strict";var P=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var T=(s,e)=>{for(var t in e)P(s,t,{get:e[t],enumerable:!0})},A=(s,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of b(e))!$.call(s,i)&&i!==t&&P(s,i,{get:()=>e[i],enumerable:!(r=S(e,i))||r.enumerable});return s};var j=s=>A(P({},"__esModule",{value:!0}),s);var z={};T(z,{styledBase:()=>w});module.exports=j(z);var p=require("react"),l=require("@slimr/css");function M(s){return s.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function N(s){return s.replace(/-./g,e=>e[1].toUpperCase())}function L(s){return Object.entries(s).reduce((e,[t,r])=>(t==="mx"?(e.marginLeft=r,e.marginRight=r):t==="my"?(e.marginTop=r,e.marginBottom=r):t==="px"?(e.paddingLeft=r,e.paddingRight=r):t==="py"?(e.paddingTop=r,e.paddingBottom=r):t in l.shorthandPropsMap?e[N(l.shorthandPropsMap[t])]=r:e[t]=r,e),{})}function o(s){return Object.entries(s).map(([e,t])=>t?(e=M(e),typeof t=="number"&&(t=t+"px"),Array.isArray(t)&&(t="["+t.map(r=>typeof r=="number"?r+"px":r).join(",")+"]"),e+":"+t+";"):"").join(`
-`)}function w(s){return(...e)=>{let t=(0,l.css)(...e),r=(0,p.forwardRef)((i,h)=>{let{_active:Z,_css:u,_dark:d,_focus:m,_focusVisible:k,_focusWithin:c,_hover:y,_target:_,_visited:g,_zx:a={},...f}=i;Object.entries(i).forEach(([x,C])=>{x.startsWith("_")&&(a[x.slice(1)]=C,delete f[x])});let n="";return Z&&(n+=`
+"use strict";var Z=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var T=(s,e)=>{for(var t in e)Z(s,t,{get:e[t],enumerable:!0})},w=(s,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of A(e))!$.call(s,o)&&o!==t&&Z(s,o,{get:()=>e[o],enumerable:!(r=b(e,o))||r.enumerable});return s};var j=s=>w(Z({},"__esModule",{value:!0}),s);var O={};T(O,{styledBase:()=>z});module.exports=j(O);var l=require("@slimr/css"),p=require("react");function M(s){return s.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function N(s){return s.replace(/-./g,e=>e[1].toUpperCase())}function L(s){return Object.entries(s).reduce((e,[t,r])=>(t==="mx"?(e.marginLeft=r,e.marginRight=r):t==="my"?(e.marginTop=r,e.marginBottom=r):t==="px"?(e.paddingLeft=r,e.paddingRight=r):t==="py"?(e.paddingTop=r,e.paddingBottom=r):t in l.shorthandPropsMap?e[N(l.shorthandPropsMap[t])]=r:e[t]=r,e),{})}function i(s){return Object.entries(s).map(([e,t])=>t?(e=M(e),typeof t=="number"&&(t=t+"px"),Array.isArray(t)&&(t="["+t.map(r=>typeof r=="number"?r+"px":r).join(",")+"]"),e+":"+t+";"):"").join(`
+`)}function z(s){return(...e)=>{let t=(0,l.css)(...e),r=(0,p.forwardRef)(function(P,C){let{_active:d,_css:u,_dark:m,_focus:y,_focusVisible:c,_focusWithin:k,_hover:g,_target:_,_visited:h,_zx:a={},...f}=P;Object.entries(P).forEach(([x,S])=>{x.startsWith("_")&&(a[x.slice(1)]=S,delete f[x])});let n="";return d&&(n+=`
           &:active {
-          ${o(Z)}
+          ${i(d)}
           }
-        `),d&&(n+=`
+        `),m&&(n+=`
           @media (prefers-color-scheme: dark) {
-          ${o(d)}
+          ${i(m)}
           }
-        `),m&&(n+=`
+        `),y&&(n+=`
           &:focus {
-          ${o(m)}
+          ${i(y)}
           }
-        `),k&&(n+=`
+        `),c&&(n+=`
           &:focus-visible {
-          ${o(k)}
+          ${i(c)}
           }
-        `),c&&(n+=`
+        `),k&&(n+=`
           &:focus-within {
-          ${o(c)}
+          ${i(k)}
           }
-        `),y&&(n+=`
+        `),g&&(n+=`
           &:hover {
-          ${o(y)}
+          ${i(g)}
           }
         `),_&&(n+=`
           &:target {
-          ${o(_)}
+          ${i(_)}
           }
-        `),g&&(n+=`
+        `),h&&(n+=`
           &:visited {
-          ${o(g)}
+          ${i(h)}
           }
-        `),Object.values(a).some(x=>Array.isArray(x))||n?n=o(a)+n:(a=L(a),f.style={...f.style,...a}),(0,p.createElement)(s,{ref:h,...f,className:(0,l.classJoin)(t,u?u.includes(":")?(0,l.css)(u):u:void 0,n?(0,l.css)(n):void 0,i.className)})});return r.toString=()=>"."+t,r}}0&&(module.exports={styledBase});
+        `),Object.values(a).some(x=>Array.isArray(x))||n?n=i(a)+n:(a=L(a),f.style={...f.style,...a}),(0,p.createElement)(s,{ref:C,...f,className:(0,l.classJoin)(t,u?u.includes(":")?(0,l.css)(u):u:void 0,n?(0,l.css)(n):void 0,P.className)})});return r.toString=()=>"."+t,r}}0&&(module.exports={styledBase});
 //# sourceMappingURL=core.cjs.map

package/src/core.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["core.ts"],"sourcesContent":["import { createElement, CSSProperties, FC, forwardRef, HTMLAttributes } from 'react'\nimport { classJoin, css, ShorthandProps, shorthandPropsMap, TemplateStringProps } from '@slimr/css'\n\n/** A type that represents all the css properties + shorthand props */\nexport interface ZxProps extends CSSProperties, ShorthandProps {}\ntype ZxP = ZxProps\n\ntype Zx = {\n  [k in keyof ZxP]:\n    | ZxP[k]\n    | [ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n}\n\ntype _Props = {\n  [k in keyof Zx as `_${k}`]?: Zx[k]\n}\n\nexport interface SCProps extends _Props {\n  /** Like zx prop, but applies only on :active */\n  _active?: Zx\n  className?: string\n  /** A string of css or classname to be added to the component */\n  _css?: string\n  /** Like zx prop, but applies only when user prefers dark theme */\n  _dark?: Zx\n  /** Like zx prop, but applies only on :focus */\n  _focus?: Zx\n  /** Like zx prop, but applies only on :focus-visible */\n  _focusVisible?: Zx\n  /** Like zx prop, but applies only on :focus-within */\n  _focusWithin?: Zx\n  /** Like zx prop, but applies only on :hover */\n  _hover?: Zx\n  style?: CSSProperties\n  /** Like zx prop, but applies only on :target */\n  _target?: Zx\n  /** Like zx prop, but applies only on :visited */\n  _visited?: Zx\n  /**\n   * Like style prop, but enhanced with features like chakra\n   *  - Array values are converted to media query breakpoints\n   *  - Numbers are converted to px\n   *  - Shorthand props are supported\n   */\n  _zx?: Zx\n}\n\n/** Styled Component: Like FunctionalComponent but adds SCProps */\nexport type SC<T extends { className?: HTMLAttributes<any>['className'] }> = FC<T & SCProps>\n\nfunction toKebabCase(str: string) {\n  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\nfunction toCamelCase(str: string) {\n  return str.replace(/-./g, (x) => x[1].toUpperCase())\n}\n\nfunction expandShorthandProps(zx: Zx) {\n  return Object.entries(zx).reduce((acc, [k, v]) => {\n    if (k === 'mx') {\n      acc.marginLeft = v\n      acc.marginRight = v\n    } else if (k === 'my') {\n      acc.marginTop = v\n      acc.marginBottom = v\n    } else if (k === 'px') {\n      acc.paddingLeft = v\n      acc.paddingRight = v\n    } else if (k === 'py') {\n      acc.paddingTop = v\n      acc.paddingBottom = v\n    } else if (k in shorthandPropsMap) {\n      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v\n    } else {\n      acc[k] = v\n    }\n    return acc\n  }, {} as any)\n}\n\nfunction zxToCss(zx: Zx): string {\n  return Object.entries(zx)\n    .map(([k, v]) => {\n      if (!v) return ''\n      k = toKebabCase(k)\n      if (typeof v === 'number') v = v + 'px'\n      if (Array.isArray(v)) {\n        // @ts-ignore\n        v = '[' + v.map((v) => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'\n      }\n      return k + ':' + v + ';'\n    })\n    .join('\\n')\n}\n\n/**\n * A lightweight alternative to styled-components\n * @param function - a functional component to be styled; must accept a className prop\n * @returns a function that accepts a template string of css returns a decorated functional component\n */\nexport function styledBase<C extends FC<any>>(Component: C) {\n  return (...cssProps: TemplateStringProps) => {\n    const className = css(...cssProps)\n    /**\n     * A functional component that accepts Styled Props\n     */\n    const CStyled = forwardRef((props: SCProps, ref) => {\n      let {\n        _active,\n        _css,\n        _dark,\n        _focus,\n        _focusVisible,\n        _focusWithin,\n        _hover,\n        _target,\n        _visited,\n        _zx = {},\n        ...rest\n      } = props\n\n      // Pluck out $ prefixed props\n      Object.entries(props).forEach(([k, v]) => {\n        if (k.startsWith('_')) {\n          // @ts-ignore\n          _zx[k.slice(1)] = v\n          // @ts-ignore\n          delete rest[k]\n        }\n      })\n\n      let cssStr = ''\n\n      if (_active) {\n        cssStr += `\n          &:active {\n          ${zxToCss(_active)}\n          }\n        `\n      }\n      if (_dark) {\n        cssStr += `\n          @media (prefers-color-scheme: dark) {\n          ${zxToCss(_dark)}\n          }\n        `\n      }\n      if (_focus) {\n        cssStr += `\n          &:focus {\n          ${zxToCss(_focus)}\n          }\n        `\n      }\n      if (_focusVisible) {\n        cssStr += `\n          &:focus-visible {\n          ${zxToCss(_focusVisible)}\n          }\n        `\n      }\n      if (_focusWithin) {\n        cssStr += `\n          &:focus-within {\n          ${zxToCss(_focusWithin)}\n          }\n        `\n      }\n      if (_hover) {\n        cssStr += `\n          &:hover {\n          ${zxToCss(_hover)}\n          }\n        `\n      }\n      if (_target) {\n        cssStr += `\n          &:target {\n          ${zxToCss(_target)}\n          }\n        `\n      }\n      if (_visited) {\n        cssStr += `\n          &:visited {\n          ${zxToCss(_visited)}\n          }\n        `\n      }\n\n      const hasMediaQuery = Object.values(_zx).some((v) => Array.isArray(v))\n      // If has media query styles, use css class. Otherwise favor inline styles\n      if (hasMediaQuery || cssStr) {\n        cssStr = zxToCss(_zx) + cssStr\n      } else {\n        _zx = expandShorthandProps(_zx)\n        rest.style = { ...rest.style, ..._zx } as CSSProperties\n      }\n\n      return createElement(Component, {\n        ref,\n        ...rest,\n        className: classJoin(\n          className,\n          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,\n          cssStr ? css(cssStr) : undefined,\n          props.className\n        ),\n      })\n    })\n    CStyled.toString = () => '.' + className\n    return CStyled as unknown as SC<Parameters<C>[0]>\n  }\n}\n"],"mappings":"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","names":["core_exports","__export","styledBase","__toCommonJS","import_react","import_css","toKebabCase","str","toCamelCase","x","expandShorthandProps","zx","acc","k","v","zxToCss","Component","cssProps","className","CStyled","props","ref","_active","_css","_dark","_focus","_focusVisible","_focusWithin","_hover","_target","_visited","_zx","rest","cssStr"]}
+{"version":3,"sources":["core.ts"],"sourcesContent":["/* eslint-disable prefer-const */\nimport {ShorthandProps, TemplateStringProps, classJoin, css, shorthandPropsMap} from '@slimr/css'\n\nimport {CSSProperties, FC, HTMLAttributes, createElement, forwardRef} from 'react'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype allowableAny = any\n\n/** A type that represents all the css properties + shorthand props */\nexport interface ZxProps extends CSSProperties, ShorthandProps {}\ntype ZxP = ZxProps\n\ntype Zx = {\n  [k in keyof ZxP]:\n    | ZxP[k]\n    | [ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n}\n\ntype _Props = {\n  [k in keyof Zx as `_${k}`]?: Zx[k]\n}\n\nexport interface SCProps extends _Props {\n  /** Like zx prop, but applies only on :active */\n  _active?: Zx\n  className?: string\n  /** A string of css or classname to be added to the component */\n  _css?: string\n  /** Like zx prop, but applies only when user prefers dark theme */\n  _dark?: Zx\n  /** Like zx prop, but applies only on :focus */\n  _focus?: Zx\n  /** Like zx prop, but applies only on :focus-visible */\n  _focusVisible?: Zx\n  /** Like zx prop, but applies only on :focus-within */\n  _focusWithin?: Zx\n  /** Like zx prop, but applies only on :hover */\n  _hover?: Zx\n  style?: CSSProperties\n  /** Like zx prop, but applies only on :target */\n  _target?: Zx\n  /** Like zx prop, but applies only on :visited */\n  _visited?: Zx\n  /**\n   * Like style prop, but enhanced with features like chakra\n   *  - Array values are converted to media query breakpoints\n   *  - Numbers are converted to px\n   *  - Shorthand props are supported\n   */\n  _zx?: Zx\n}\n\n/** Styled Component: Like FunctionalComponent but adds SCProps */\nexport type SC<T extends {className?: HTMLAttributes<allowableAny>['className']}> = FC<T & SCProps>\n\n/** Converts a string to kebab case */\nfunction toKebabCase(str: string) {\n  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\n/** Converts a string to camel case */\nfunction toCamelCase(str: string) {\n  return str.replace(/-./g, x => x[1].toUpperCase())\n}\n\n/** Expands the shorthand props of a zx prop into css full */\nfunction expandShorthandProps(zx: Zx) {\n  return Object.entries(zx).reduce((acc, [k, v]) => {\n    if (k === 'mx') {\n      acc.marginLeft = v\n      acc.marginRight = v\n    } else if (k === 'my') {\n      acc.marginTop = v\n      acc.marginBottom = v\n    } else if (k === 'px') {\n      acc.paddingLeft = v\n      acc.paddingRight = v\n    } else if (k === 'py') {\n      acc.paddingTop = v\n      acc.paddingBottom = v\n    } else if (k in shorthandPropsMap) {\n      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v\n    } else {\n      acc[k] = v\n    }\n    return acc\n  }, {} as Record<string, allowableAny>)\n}\n\n/** Converts a zx prop into css string */\nfunction zxToCss(zx: Zx): string {\n  return Object.entries(zx)\n    .map(([k, v]) => {\n      if (!v) return ''\n      k = toKebabCase(k)\n      if (typeof v === 'number') v = v + 'px'\n      if (Array.isArray(v)) {\n        // @ts-expect-error - TS gets confused by the complexity\n        v = '[' + v.map(v => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'\n      }\n      return k + ':' + v + ';'\n    })\n    .join('\\n')\n}\n\n/**\n * A lightweight alternative to styled-components\n * @param function - a functional component to be styled; must accept a className prop\n * @returns a function that accepts a template string of css returns a decorated functional component\n */\nexport function styledBase<C extends FC<allowableAny>>(Component: C) {\n  return (...cssProps: TemplateStringProps) => {\n    const className = css(...cssProps)\n    /**\n     * A functional component that accepts Styled Props\n     */\n    const CStyled = forwardRef(function CStyled(props: SCProps, ref) {\n      let {\n        _active,\n        _css,\n        _dark,\n        _focus,\n        _focusVisible,\n        _focusWithin,\n        _hover,\n        _target,\n        _visited,\n        _zx = {},\n        ...rest\n      } = props\n\n      // Pluck out $ prefixed props\n      Object.entries(props).forEach(([k, v]) => {\n        if (k.startsWith('_')) {\n          // @ts-expect-error - We know the key exists but ts doesn't\n          _zx[k.slice(1)] = v\n          // @ts-expect-error - We know the key exists but ts doesn't\n          delete rest[k]\n        }\n      })\n\n      let cssStr = ''\n\n      if (_active) {\n        cssStr += `\n          &:active {\n          ${zxToCss(_active)}\n          }\n        `\n      }\n      if (_dark) {\n        cssStr += `\n          @media (prefers-color-scheme: dark) {\n          ${zxToCss(_dark)}\n          }\n        `\n      }\n      if (_focus) {\n        cssStr += `\n          &:focus {\n          ${zxToCss(_focus)}\n          }\n        `\n      }\n      if (_focusVisible) {\n        cssStr += `\n          &:focus-visible {\n          ${zxToCss(_focusVisible)}\n          }\n        `\n      }\n      if (_focusWithin) {\n        cssStr += `\n          &:focus-within {\n          ${zxToCss(_focusWithin)}\n          }\n        `\n      }\n      if (_hover) {\n        cssStr += `\n          &:hover {\n          ${zxToCss(_hover)}\n          }\n        `\n      }\n      if (_target) {\n        cssStr += `\n          &:target {\n          ${zxToCss(_target)}\n          }\n        `\n      }\n      if (_visited) {\n        cssStr += `\n          &:visited {\n          ${zxToCss(_visited)}\n          }\n        `\n      }\n\n      const hasMediaQuery = Object.values(_zx).some(v => Array.isArray(v))\n      // If has media query styles, use css class. Otherwise favor inline styles\n      if (hasMediaQuery || cssStr) {\n        cssStr = zxToCss(_zx) + cssStr\n      } else {\n        _zx = expandShorthandProps(_zx)\n        rest.style = {...rest.style, ..._zx} as CSSProperties\n      }\n\n      return createElement(Component, {\n        ref,\n        ...rest,\n        className: classJoin(\n          className,\n          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,\n          cssStr ? css(cssStr) : undefined,\n          props.className\n        ),\n      })\n    })\n    CStyled.toString = () => '.' + className\n    return CStyled as unknown as SC<Parameters<C>[0]>\n  }\n}\n"],"mappings":"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","names":["core_exports","__export","styledBase","__toCommonJS","import_css","import_react","toKebabCase","str","toCamelCase","x","expandShorthandProps","zx","acc","k","v","zxToCss","Component","cssProps","className","CStyled","props","ref","_active","_css","_dark","_focus","_focusVisible","_focusWithin","_hover","_target","_visited","_zx","rest","cssStr"]}

package/src/core.d.ts

@@ -1,6 +1,7 @@
-import { CSSProperties, HTMLAttributes, FC } from 'react';
 import { ShorthandProps } from '@slimr/css';
+import { CSSProperties, HTMLAttributes, FC } from 'react';
 
+type allowableAny = any;
 /** A type that represents all the css properties + shorthand props */
 interface ZxProps extends CSSProperties, ShorthandProps {
 }
@@ -42,13 +43,13 @@ interface SCProps extends _Props {
 }
 /** Styled Component: Like FunctionalComponent but adds SCProps */
 type SC<T extends {
-    className?: HTMLAttributes<any>['className'];
+    className?: HTMLAttributes<allowableAny>['className'];
 }> = FC<T & SCProps>;
 /**
  * A lightweight alternative to styled-components
  * @param function - a functional component to be styled; must accept a className prop
  * @returns a function that accepts a template string of css returns a decorated functional component
  */
-declare function styledBase<C extends FC<any>>(Component: C): (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<Parameters<C>[0]>;
+declare function styledBase<C extends FC<allowableAny>>(Component: C): (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<Parameters<C>[0]>;
 
 export { SC, SCProps, ZxProps, styledBase };

package/src/core.js

@@ -1,5 +1,5 @@
-import{createElement as C,forwardRef as S}from"react";import{classJoin as b,css as f,shorthandPropsMap as _}from"@slimr/css";function $(n){return n.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function T(n){return n.replace(/-./g,e=>e[1].toUpperCase())}function A(n){return Object.entries(n).reduce((e,[t,r])=>(t==="mx"?(e.marginLeft=r,e.marginRight=r):t==="my"?(e.marginTop=r,e.marginBottom=r):t==="px"?(e.paddingLeft=r,e.paddingRight=r):t==="py"?(e.paddingTop=r,e.paddingBottom=r):t in _?e[T(_[t])]=r:e[t]=r,e),{})}function i(n){return Object.entries(n).map(([e,t])=>t?(e=$(e),typeof t=="number"&&(t=t+"px"),Array.isArray(t)&&(t="["+t.map(r=>typeof r=="number"?r+"px":r).join(",")+"]"),e+":"+t+";"):"").join(`
-`)}function F(n){return(...e)=>{let t=f(...e),r=S((u,g)=>{let{_active:p,_css:a,_dark:P,_focus:Z,_focusVisible:d,_focusWithin:m,_hover:k,_target:c,_visited:y,_zx:o={},...x}=u;Object.entries(u).forEach(([l,h])=>{l.startsWith("_")&&(o[l.slice(1)]=h,delete x[l])});let s="";return p&&(s+=`
+import{classJoin as C,css as f,shorthandPropsMap as g}from"@slimr/css";import{createElement as S,forwardRef as b}from"react";function A(n){return n.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function $(n){return n.replace(/-./g,e=>e[1].toUpperCase())}function T(n){return Object.entries(n).reduce((e,[t,r])=>(t==="mx"?(e.marginLeft=r,e.marginRight=r):t==="my"?(e.marginTop=r,e.marginBottom=r):t==="px"?(e.paddingLeft=r,e.paddingRight=r):t==="py"?(e.paddingTop=r,e.paddingBottom=r):t in g?e[$(g[t])]=r:e[t]=r,e),{})}function i(n){return Object.entries(n).map(([e,t])=>t?(e=A(e),typeof t=="number"&&(t=t+"px"),Array.isArray(t)&&(t="["+t.map(r=>typeof r=="number"?r+"px":r).join(",")+"]"),e+":"+t+";"):"").join(`
+`)}function F(n){return(...e)=>{let t=f(...e),r=b(function(u,_){let{_active:p,_css:a,_dark:P,_focus:Z,_focusVisible:d,_focusWithin:m,_hover:y,_target:c,_visited:k,_zx:l={},...x}=u;Object.entries(u).forEach(([o,h])=>{o.startsWith("_")&&(l[o.slice(1)]=h,delete x[o])});let s="";return p&&(s+=`
           &:active {
           ${i(p)}
           }
@@ -19,17 +19,17 @@ import{createElement as C,forwardRef as S}from"react";import{classJoin as b,css
           &:focus-within {
           ${i(m)}
           }
-        `),k&&(s+=`
+        `),y&&(s+=`
           &:hover {
-          ${i(k)}
+          ${i(y)}
           }
         `),c&&(s+=`
           &:target {
           ${i(c)}
           }
-        `),y&&(s+=`
+        `),k&&(s+=`
           &:visited {
-          ${i(y)}
+          ${i(k)}
           }
-        `),Object.values(o).some(l=>Array.isArray(l))||s?s=i(o)+s:(o=A(o),x.style={...x.style,...o}),C(n,{ref:g,...x,className:b(t,a?a.includes(":")?f(a):a:void 0,s?f(s):void 0,u.className)})});return r.toString=()=>"."+t,r}}export{F as styledBase};
+        `),Object.values(l).some(o=>Array.isArray(o))||s?s=i(l)+s:(l=T(l),x.style={...x.style,...l}),S(n,{ref:_,...x,className:C(t,a?a.includes(":")?f(a):a:void 0,s?f(s):void 0,u.className)})});return r.toString=()=>"."+t,r}}export{F as styledBase};
 //# sourceMappingURL=core.js.map

package/src/core.js.map

@@ -1 +1 @@
-{"version":3,"sources":["core.ts"],"sourcesContent":["import { createElement, CSSProperties, FC, forwardRef, HTMLAttributes } from 'react'\nimport { classJoin, css, ShorthandProps, shorthandPropsMap, TemplateStringProps } from '@slimr/css'\n\n/** A type that represents all the css properties + shorthand props */\nexport interface ZxProps extends CSSProperties, ShorthandProps {}\ntype ZxP = ZxProps\n\ntype Zx = {\n  [k in keyof ZxP]:\n    | ZxP[k]\n    | [ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n}\n\ntype _Props = {\n  [k in keyof Zx as `_${k}`]?: Zx[k]\n}\n\nexport interface SCProps extends _Props {\n  /** Like zx prop, but applies only on :active */\n  _active?: Zx\n  className?: string\n  /** A string of css or classname to be added to the component */\n  _css?: string\n  /** Like zx prop, but applies only when user prefers dark theme */\n  _dark?: Zx\n  /** Like zx prop, but applies only on :focus */\n  _focus?: Zx\n  /** Like zx prop, but applies only on :focus-visible */\n  _focusVisible?: Zx\n  /** Like zx prop, but applies only on :focus-within */\n  _focusWithin?: Zx\n  /** Like zx prop, but applies only on :hover */\n  _hover?: Zx\n  style?: CSSProperties\n  /** Like zx prop, but applies only on :target */\n  _target?: Zx\n  /** Like zx prop, but applies only on :visited */\n  _visited?: Zx\n  /**\n   * Like style prop, but enhanced with features like chakra\n   *  - Array values are converted to media query breakpoints\n   *  - Numbers are converted to px\n   *  - Shorthand props are supported\n   */\n  _zx?: Zx\n}\n\n/** Styled Component: Like FunctionalComponent but adds SCProps */\nexport type SC<T extends { className?: HTMLAttributes<any>['className'] }> = FC<T & SCProps>\n\nfunction toKebabCase(str: string) {\n  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\nfunction toCamelCase(str: string) {\n  return str.replace(/-./g, (x) => x[1].toUpperCase())\n}\n\nfunction expandShorthandProps(zx: Zx) {\n  return Object.entries(zx).reduce((acc, [k, v]) => {\n    if (k === 'mx') {\n      acc.marginLeft = v\n      acc.marginRight = v\n    } else if (k === 'my') {\n      acc.marginTop = v\n      acc.marginBottom = v\n    } else if (k === 'px') {\n      acc.paddingLeft = v\n      acc.paddingRight = v\n    } else if (k === 'py') {\n      acc.paddingTop = v\n      acc.paddingBottom = v\n    } else if (k in shorthandPropsMap) {\n      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v\n    } else {\n      acc[k] = v\n    }\n    return acc\n  }, {} as any)\n}\n\nfunction zxToCss(zx: Zx): string {\n  return Object.entries(zx)\n    .map(([k, v]) => {\n      if (!v) return ''\n      k = toKebabCase(k)\n      if (typeof v === 'number') v = v + 'px'\n      if (Array.isArray(v)) {\n        // @ts-ignore\n        v = '[' + v.map((v) => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'\n      }\n      return k + ':' + v + ';'\n    })\n    .join('\\n')\n}\n\n/**\n * A lightweight alternative to styled-components\n * @param function - a functional component to be styled; must accept a className prop\n * @returns a function that accepts a template string of css returns a decorated functional component\n */\nexport function styledBase<C extends FC<any>>(Component: C) {\n  return (...cssProps: TemplateStringProps) => {\n    const className = css(...cssProps)\n    /**\n     * A functional component that accepts Styled Props\n     */\n    const CStyled = forwardRef((props: SCProps, ref) => {\n      let {\n        _active,\n        _css,\n        _dark,\n        _focus,\n        _focusVisible,\n        _focusWithin,\n        _hover,\n        _target,\n        _visited,\n        _zx = {},\n        ...rest\n      } = props\n\n      // Pluck out $ prefixed props\n      Object.entries(props).forEach(([k, v]) => {\n        if (k.startsWith('_')) {\n          // @ts-ignore\n          _zx[k.slice(1)] = v\n          // @ts-ignore\n          delete rest[k]\n        }\n      })\n\n      let cssStr = ''\n\n      if (_active) {\n        cssStr += `\n          &:active {\n          ${zxToCss(_active)}\n          }\n        `\n      }\n      if (_dark) {\n        cssStr += `\n          @media (prefers-color-scheme: dark) {\n          ${zxToCss(_dark)}\n          }\n        `\n      }\n      if (_focus) {\n        cssStr += `\n          &:focus {\n          ${zxToCss(_focus)}\n          }\n        `\n      }\n      if (_focusVisible) {\n        cssStr += `\n          &:focus-visible {\n          ${zxToCss(_focusVisible)}\n          }\n        `\n      }\n      if (_focusWithin) {\n        cssStr += `\n          &:focus-within {\n          ${zxToCss(_focusWithin)}\n          }\n        `\n      }\n      if (_hover) {\n        cssStr += `\n          &:hover {\n          ${zxToCss(_hover)}\n          }\n        `\n      }\n      if (_target) {\n        cssStr += `\n          &:target {\n          ${zxToCss(_target)}\n          }\n        `\n      }\n      if (_visited) {\n        cssStr += `\n          &:visited {\n          ${zxToCss(_visited)}\n          }\n        `\n      }\n\n      const hasMediaQuery = Object.values(_zx).some((v) => Array.isArray(v))\n      // If has media query styles, use css class. Otherwise favor inline styles\n      if (hasMediaQuery || cssStr) {\n        cssStr = zxToCss(_zx) + cssStr\n      } else {\n        _zx = expandShorthandProps(_zx)\n        rest.style = { ...rest.style, ..._zx } as CSSProperties\n      }\n\n      return createElement(Component, {\n        ref,\n        ...rest,\n        className: classJoin(\n          className,\n          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,\n          cssStr ? css(cssStr) : undefined,\n          props.className\n        ),\n      })\n    })\n    CStyled.toString = () => '.' + className\n    return CStyled as unknown as SC<Parameters<C>[0]>\n  }\n}\n"],"mappings":"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","names":["createElement","forwardRef","classJoin","css","shorthandPropsMap","toKebabCase","str","toCamelCase","x","expandShorthandProps","zx","acc","k","v","zxToCss","styledBase","Component","cssProps","className","CStyled","props","ref","_active","_css","_dark","_focus","_focusVisible","_focusWithin","_hover","_target","_visited","_zx","rest","cssStr"]}
+{"version":3,"sources":["core.ts"],"sourcesContent":["/* eslint-disable prefer-const */\nimport {ShorthandProps, TemplateStringProps, classJoin, css, shorthandPropsMap} from '@slimr/css'\n\nimport {CSSProperties, FC, HTMLAttributes, createElement, forwardRef} from 'react'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype allowableAny = any\n\n/** A type that represents all the css properties + shorthand props */\nexport interface ZxProps extends CSSProperties, ShorthandProps {}\ntype ZxP = ZxProps\n\ntype Zx = {\n  [k in keyof ZxP]:\n    | ZxP[k]\n    | [ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n}\n\ntype _Props = {\n  [k in keyof Zx as `_${k}`]?: Zx[k]\n}\n\nexport interface SCProps extends _Props {\n  /** Like zx prop, but applies only on :active */\n  _active?: Zx\n  className?: string\n  /** A string of css or classname to be added to the component */\n  _css?: string\n  /** Like zx prop, but applies only when user prefers dark theme */\n  _dark?: Zx\n  /** Like zx prop, but applies only on :focus */\n  _focus?: Zx\n  /** Like zx prop, but applies only on :focus-visible */\n  _focusVisible?: Zx\n  /** Like zx prop, but applies only on :focus-within */\n  _focusWithin?: Zx\n  /** Like zx prop, but applies only on :hover */\n  _hover?: Zx\n  style?: CSSProperties\n  /** Like zx prop, but applies only on :target */\n  _target?: Zx\n  /** Like zx prop, but applies only on :visited */\n  _visited?: Zx\n  /**\n   * Like style prop, but enhanced with features like chakra\n   *  - Array values are converted to media query breakpoints\n   *  - Numbers are converted to px\n   *  - Shorthand props are supported\n   */\n  _zx?: Zx\n}\n\n/** Styled Component: Like FunctionalComponent but adds SCProps */\nexport type SC<T extends {className?: HTMLAttributes<allowableAny>['className']}> = FC<T & SCProps>\n\n/** Converts a string to kebab case */\nfunction toKebabCase(str: string) {\n  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\n/** Converts a string to camel case */\nfunction toCamelCase(str: string) {\n  return str.replace(/-./g, x => x[1].toUpperCase())\n}\n\n/** Expands the shorthand props of a zx prop into css full */\nfunction expandShorthandProps(zx: Zx) {\n  return Object.entries(zx).reduce((acc, [k, v]) => {\n    if (k === 'mx') {\n      acc.marginLeft = v\n      acc.marginRight = v\n    } else if (k === 'my') {\n      acc.marginTop = v\n      acc.marginBottom = v\n    } else if (k === 'px') {\n      acc.paddingLeft = v\n      acc.paddingRight = v\n    } else if (k === 'py') {\n      acc.paddingTop = v\n      acc.paddingBottom = v\n    } else if (k in shorthandPropsMap) {\n      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v\n    } else {\n      acc[k] = v\n    }\n    return acc\n  }, {} as Record<string, allowableAny>)\n}\n\n/** Converts a zx prop into css string */\nfunction zxToCss(zx: Zx): string {\n  return Object.entries(zx)\n    .map(([k, v]) => {\n      if (!v) return ''\n      k = toKebabCase(k)\n      if (typeof v === 'number') v = v + 'px'\n      if (Array.isArray(v)) {\n        // @ts-expect-error - TS gets confused by the complexity\n        v = '[' + v.map(v => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'\n      }\n      return k + ':' + v + ';'\n    })\n    .join('\\n')\n}\n\n/**\n * A lightweight alternative to styled-components\n * @param function - a functional component to be styled; must accept a className prop\n * @returns a function that accepts a template string of css returns a decorated functional component\n */\nexport function styledBase<C extends FC<allowableAny>>(Component: C) {\n  return (...cssProps: TemplateStringProps) => {\n    const className = css(...cssProps)\n    /**\n     * A functional component that accepts Styled Props\n     */\n    const CStyled = forwardRef(function CStyled(props: SCProps, ref) {\n      let {\n        _active,\n        _css,\n        _dark,\n        _focus,\n        _focusVisible,\n        _focusWithin,\n        _hover,\n        _target,\n        _visited,\n        _zx = {},\n        ...rest\n      } = props\n\n      // Pluck out $ prefixed props\n      Object.entries(props).forEach(([k, v]) => {\n        if (k.startsWith('_')) {\n          // @ts-expect-error - We know the key exists but ts doesn't\n          _zx[k.slice(1)] = v\n          // @ts-expect-error - We know the key exists but ts doesn't\n          delete rest[k]\n        }\n      })\n\n      let cssStr = ''\n\n      if (_active) {\n        cssStr += `\n          &:active {\n          ${zxToCss(_active)}\n          }\n        `\n      }\n      if (_dark) {\n        cssStr += `\n          @media (prefers-color-scheme: dark) {\n          ${zxToCss(_dark)}\n          }\n        `\n      }\n      if (_focus) {\n        cssStr += `\n          &:focus {\n          ${zxToCss(_focus)}\n          }\n        `\n      }\n      if (_focusVisible) {\n        cssStr += `\n          &:focus-visible {\n          ${zxToCss(_focusVisible)}\n          }\n        `\n      }\n      if (_focusWithin) {\n        cssStr += `\n          &:focus-within {\n          ${zxToCss(_focusWithin)}\n          }\n        `\n      }\n      if (_hover) {\n        cssStr += `\n          &:hover {\n          ${zxToCss(_hover)}\n          }\n        `\n      }\n      if (_target) {\n        cssStr += `\n          &:target {\n          ${zxToCss(_target)}\n          }\n        `\n      }\n      if (_visited) {\n        cssStr += `\n          &:visited {\n          ${zxToCss(_visited)}\n          }\n        `\n      }\n\n      const hasMediaQuery = Object.values(_zx).some(v => Array.isArray(v))\n      // If has media query styles, use css class. Otherwise favor inline styles\n      if (hasMediaQuery || cssStr) {\n        cssStr = zxToCss(_zx) + cssStr\n      } else {\n        _zx = expandShorthandProps(_zx)\n        rest.style = {...rest.style, ..._zx} as CSSProperties\n      }\n\n      return createElement(Component, {\n        ref,\n        ...rest,\n        className: classJoin(\n          className,\n          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,\n          cssStr ? css(cssStr) : undefined,\n          props.className\n        ),\n      })\n    })\n    CStyled.toString = () => '.' + className\n    return CStyled as unknown as SC<Parameters<C>[0]>\n  }\n}\n"],"mappings":"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","names":["classJoin","css","shorthandPropsMap","createElement","forwardRef","toKebabCase","str","toCamelCase","x","expandShorthandProps","zx","acc","k","v","zxToCss","styledBase","Component","cssProps","className","CStyled","props","ref","_active","_css","_dark","_focus","_focusVisible","_focusWithin","_hover","_target","_visited","_zx","rest","cssStr"]}

package/src/core.ts

@@ -1,5 +1,10 @@
-import { createElement, CSSProperties, FC, forwardRef, HTMLAttributes } from 'react'
-import { classJoin, css, ShorthandProps, shorthandPropsMap, TemplateStringProps } from '@slimr/css'
+/* eslint-disable prefer-const */
+import {ShorthandProps, TemplateStringProps, classJoin, css, shorthandPropsMap} from '@slimr/css'
+
+import {CSSProperties, FC, HTMLAttributes, createElement, forwardRef} from 'react'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type allowableAny = any
 
 /** A type that represents all the css properties + shorthand props */
 export interface ZxProps extends CSSProperties, ShorthandProps {}
@@ -51,16 +56,19 @@ export interface SCProps extends _Props {
 }
 
 /** Styled Component: Like FunctionalComponent but adds SCProps */
-export type SC<T extends { className?: HTMLAttributes<any>['className'] }> = FC<T & SCProps>
+export type SC<T extends {className?: HTMLAttributes<allowableAny>['className']}> = FC<T & SCProps>
 
+/** Converts a string to kebab case */
 function toKebabCase(str: string) {
   return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
 }
 
+/** Converts a string to camel case */
 function toCamelCase(str: string) {
-  return str.replace(/-./g, (x) => x[1].toUpperCase())
+  return str.replace(/-./g, x => x[1].toUpperCase())
 }
 
+/** Expands the shorthand props of a zx prop into css full */
 function expandShorthandProps(zx: Zx) {
   return Object.entries(zx).reduce((acc, [k, v]) => {
     if (k === 'mx') {
@@ -81,9 +89,10 @@ function expandShorthandProps(zx: Zx) {
       acc[k] = v
     }
     return acc
-  }, {} as any)
+  }, {} as Record<string, allowableAny>)
 }
 
+/** Converts a zx prop into css string */
 function zxToCss(zx: Zx): string {
   return Object.entries(zx)
     .map(([k, v]) => {
@@ -91,8 +100,8 @@ function zxToCss(zx: Zx): string {
       k = toKebabCase(k)
       if (typeof v === 'number') v = v + 'px'
       if (Array.isArray(v)) {
-        // @ts-ignore
-        v = '[' + v.map((v) => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'
+        // @ts-expect-error - TS gets confused by the complexity
+        v = '[' + v.map(v => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'
       }
       return k + ':' + v + ';'
     })
@@ -104,13 +113,13 @@ function zxToCss(zx: Zx): string {
  * @param function - a functional component to be styled; must accept a className prop
  * @returns a function that accepts a template string of css returns a decorated functional component
  */
-export function styledBase<C extends FC<any>>(Component: C) {
+export function styledBase<C extends FC<allowableAny>>(Component: C) {
   return (...cssProps: TemplateStringProps) => {
     const className = css(...cssProps)
     /**
      * A functional component that accepts Styled Props
      */
-    const CStyled = forwardRef((props: SCProps, ref) => {
+    const CStyled = forwardRef(function CStyled(props: SCProps, ref) {
       let {
         _active,
         _css,
@@ -128,9 +137,9 @@ export function styledBase<C extends FC<any>>(Component: C) {
       // Pluck out $ prefixed props
       Object.entries(props).forEach(([k, v]) => {
         if (k.startsWith('_')) {
-          // @ts-ignore
+          // @ts-expect-error - We know the key exists but ts doesn't
           _zx[k.slice(1)] = v
-          // @ts-ignore
+          // @ts-expect-error - We know the key exists but ts doesn't
           delete rest[k]
         }
       })
@@ -194,13 +203,13 @@ export function styledBase<C extends FC<any>>(Component: C) {
         `
       }
 
-      const hasMediaQuery = Object.values(_zx).some((v) => Array.isArray(v))
+      const hasMediaQuery = Object.values(_zx).some(v => Array.isArray(v))
       // If has media query styles, use css class. Otherwise favor inline styles
       if (hasMediaQuery || cssStr) {
         cssStr = zxToCss(_zx) + cssStr
       } else {
         _zx = expandShorthandProps(_zx)
-        rest.style = { ...rest.style, ..._zx } as CSSProperties
+        rest.style = {...rest.style, ..._zx} as CSSProperties
       }
 
       return createElement(Component, {

package/src/index.cjs

@@ -1,35 +1,35 @@
-"use strict";var F=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var j=Object.prototype.hasOwnProperty;var A=(s,e)=>{for(var n in e)F(s,n,{get:e[n],enumerable:!0})},d=(s,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of $(e))!j.call(s,r)&&r!==n&&F(s,r,{get:()=>e[r],enumerable:!(t=_(e,r))||t.enumerable});return s},l=(s,e,n)=>(d(s,e,"default"),n&&d(n,e,"default"));var q=s=>d(F({},"__esModule",{value:!0}),s);var o={};A(o,{styled:()=>L,styledBase:()=>a});module.exports=q(o);var C=require("react"),T=require("@slimr/css");function M(s){return s.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function N(s){return s.replace(/-./g,e=>e[1].toUpperCase())}function w(s){return Object.entries(s).reduce((e,[n,t])=>(n==="mx"?(e.marginLeft=t,e.marginRight=t):n==="my"?(e.marginTop=t,e.marginBottom=t):n==="px"?(e.paddingLeft=t,e.paddingRight=t):n==="py"?(e.paddingTop=t,e.paddingBottom=t):n in T.shorthandPropsMap?e[N(T.shorthandPropsMap[n])]=t:e[n]=t,e),{})}function u(s){return Object.entries(s).map(([e,n])=>n?(e=M(e),typeof n=="number"&&(n=n+"px"),Array.isArray(n)&&(n="["+n.map(t=>typeof t=="number"?t+"px":t).join(",")+"]"),e+":"+n+";"):"").join(`
-`)}function a(s){return(...e)=>{let n=(0,T.css)(...e),t=(0,C.forwardRef)((r,Z)=>{let{_active:H,_css:p,_dark:m,_focus:f,_focusVisible:x,_focusWithin:c,_hover:b,_target:g,_visited:h,_zx:i={},...S}=r;Object.entries(r).forEach(([k,y])=>{k.startsWith("_")&&(i[k.slice(1)]=y,delete S[k])});let P="";return H&&(P+=`
+"use strict";var H=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var j=Object.prototype.hasOwnProperty;var w=(s,e)=>{for(var n in e)H(s,n,{get:e[n],enumerable:!0})},F=(s,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of $(e))!j.call(s,o)&&o!==n&&H(s,o,{get:()=>e[o],enumerable:!(t=A(e,o))||t.enumerable});return s},l=(s,e,n)=>(F(s,e,"default"),n&&F(n,e,"default"));var q=s=>F(H({},"__esModule",{value:!0}),s);var T={};w(T,{styled:()=>O,styledBase:()=>a});module.exports=q(T);var u=require("@slimr/css"),C=require("react");function M(s){return s.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function N(s){return s.replace(/-./g,e=>e[1].toUpperCase())}function L(s){return Object.entries(s).reduce((e,[n,t])=>(n==="mx"?(e.marginLeft=t,e.marginRight=t):n==="my"?(e.marginTop=t,e.marginBottom=t):n==="px"?(e.paddingLeft=t,e.paddingRight=t):n==="py"?(e.paddingTop=t,e.paddingBottom=t):n in u.shorthandPropsMap?e[N(u.shorthandPropsMap[n])]=t:e[n]=t,e),{})}function r(s){return Object.entries(s).map(([e,n])=>n?(e=M(e),typeof n=="number"&&(n=n+"px"),Array.isArray(n)&&(n="["+n.map(t=>typeof t=="number"?t+"px":t).join(",")+"]"),e+":"+n+";"):"").join(`
+`)}function a(s){return(...e)=>{let n=(0,u.css)(...e),t=(0,C.forwardRef)(function(d,y){let{_active:m,_css:p,_dark:f,_focus:c,_focusVisible:x,_focusWithin:b,_hover:g,_target:h,_visited:Z,_zx:i={},...S}=d;Object.entries(d).forEach(([k,_])=>{k.startsWith("_")&&(i[k.slice(1)]=_,delete S[k])});let P="";return m&&(P+=`
           &:active {
-          ${u(H)}
+          ${r(m)}
           }
-        `),m&&(P+=`
+        `),f&&(P+=`
           @media (prefers-color-scheme: dark) {
-          ${u(m)}
+          ${r(f)}
           }
-        `),f&&(P+=`
+        `),c&&(P+=`
           &:focus {
-          ${u(f)}
+          ${r(c)}
           }
         `),x&&(P+=`
           &:focus-visible {
-          ${u(x)}
+          ${r(x)}
           }
-        `),c&&(P+=`
+        `),b&&(P+=`
           &:focus-within {
-          ${u(c)}
+          ${r(b)}
           }
-        `),b&&(P+=`
+        `),g&&(P+=`
           &:hover {
-          ${u(b)}
+          ${r(g)}
           }
-        `),g&&(P+=`
+        `),h&&(P+=`
           &:target {
-          ${u(g)}
+          ${r(h)}
           }
-        `),h&&(P+=`
+        `),Z&&(P+=`
           &:visited {
-          ${u(h)}
+          ${r(Z)}
           }
-        `),Object.values(i).some(k=>Array.isArray(k))||P?P=u(i)+P:(i=w(i),S.style={...S.style,...i}),(0,C.createElement)(s,{ref:Z,...S,className:(0,T.classJoin)(n,p?p.includes(":")?(0,T.css)(p):p:void 0,P?(0,T.css)(P):void 0,r.className)})});return t.toString=()=>"."+n,t}}l(o,require("@slimr/css"),module.exports);var L=Object.assign(a,{a:(...s)=>a("a")(...s),abbr:(...s)=>a("abbr")(...s),address:(...s)=>a("address")(...s),area:(...s)=>a("area")(...s),article:(...s)=>a("article")(...s),aside:(...s)=>a("aside")(...s),audio:(...s)=>a("audio")(...s),b:(...s)=>a("b")(...s),blockquote:(...s)=>a("blockquote")(...s),br:(...s)=>a("br")(...s),button:(...s)=>a("button")(...s),caption:(...s)=>a("caption")(...s),cite:(...s)=>a("cite")(...s),code:(...s)=>a("code")(...s),col:(...s)=>a("col")(...s),colgroup:(...s)=>a("colgroup")(...s),dd:(...s)=>a("dd")(...s),del:(...s)=>a("del")(...s),details:(...s)=>a("details")(...s),dfn:(...s)=>a("dfn")(...s),dialog:(...s)=>a("dialog")(...s),div:(...s)=>a("div")(...s),dl:(...s)=>a("dl")(...s),dt:(...s)=>a("dt")(...s),em:(...s)=>a("em")(...s),embed:(...s)=>a("embed")(...s),fieldset:(...s)=>a("fieldset")(...s),figcaption:(...s)=>a("figcaption")(...s),figure:(...s)=>a("figure")(...s),footer:(...s)=>a("footer")(...s),form:(...s)=>a("form")(...s),h1:(...s)=>a("h1")(...s),h2:(...s)=>a("h2")(...s),h3:(...s)=>a("h3")(...s),h4:(...s)=>a("h4")(...s),h5:(...s)=>a("h5")(...s),h6:(...s)=>a("h6")(...s),header:(...s)=>a("header")(...s),hgroup:(...s)=>a("hgroup")(...s),hr:(...s)=>a("hr")(...s),i:(...s)=>a("i")(...s),iframe:(...s)=>a("iframe")(...s),img:(...s)=>a("img")(...s),input:(...s)=>a("input")(...s),ins:(...s)=>a("ins")(...s),kbd:(...s)=>a("kbd")(...s),label:(...s)=>a("label")(...s),legend:(...s)=>a("legend")(...s),li:(...s)=>a("li")(...s),main:(...s)=>a("main")(...s),map:(...s)=>a("map")(...s),mark:(...s)=>a("mark")(...s),meter:(...s)=>a("meter")(...s),nav:(...s)=>a("nav")(...s),object:(...s)=>a("object")(...s),ol:(...s)=>a("ol")(...s),optgroup:(...s)=>a("optgroup")(...s),option:(...s)=>a("option")(...s),output:(...s)=>a("output")(...s),p:(...s)=>a("p")(...s),picture:(...s)=>a("picture")(...s),pre:(...s)=>a("pre")(...s),progress:(...s)=>a("progress")(...s),q:(...s)=>a("q")(...s),rp:(...s)=>a("rp")(...s),rt:(...s)=>a("rt")(...s),ruby:(...s)=>a("ruby")(...s),s:(...s)=>a("s")(...s),samp:(...s)=>a("samp")(...s),section:(...s)=>a("section")(...s),select:(...s)=>a("select")(...s),small:(...s)=>a("small")(...s),span:(...s)=>a("span")(...s),strong:(...s)=>a("strong")(...s),sub:(...s)=>a("sub")(...s),summary:(...s)=>a("summary")(...s),sup:(...s)=>a("sup")(...s),table:(...s)=>a("table")(...s),tbody:(...s)=>a("tbody")(...s),td:(...s)=>a("td")(...s),textarea:(...s)=>a("textarea")(...s),tfoot:(...s)=>a("tfoot")(...s),th:(...s)=>a("th")(...s),thead:(...s)=>a("thead")(...s),time:(...s)=>a("time")(...s),tr:(...s)=>a("tr")(...s),u:(...s)=>a("u")(...s),ul:(...s)=>a("ul")(...s),video:(...s)=>a("video")(...s)});0&&(module.exports={styled,styledBase});
+        `),Object.values(i).some(k=>Array.isArray(k))||P?P=r(i)+P:(i=L(i),S.style={...S.style,...i}),(0,C.createElement)(s,{ref:y,...S,className:(0,u.classJoin)(n,p?p.includes(":")?(0,u.css)(p):p:void 0,P?(0,u.css)(P):void 0,d.className)})});return t.toString=()=>"."+n,t}}l(T,require("@slimr/css"),module.exports);var O=Object.assign(a,{a:(...s)=>a("a")(...s),abbr:(...s)=>a("abbr")(...s),address:(...s)=>a("address")(...s),area:(...s)=>a("area")(...s),article:(...s)=>a("article")(...s),aside:(...s)=>a("aside")(...s),audio:(...s)=>a("audio")(...s),b:(...s)=>a("b")(...s),blockquote:(...s)=>a("blockquote")(...s),br:(...s)=>a("br")(...s),button:(...s)=>a("button")(...s),caption:(...s)=>a("caption")(...s),cite:(...s)=>a("cite")(...s),code:(...s)=>a("code")(...s),col:(...s)=>a("col")(...s),colgroup:(...s)=>a("colgroup")(...s),dd:(...s)=>a("dd")(...s),del:(...s)=>a("del")(...s),details:(...s)=>a("details")(...s),dfn:(...s)=>a("dfn")(...s),dialog:(...s)=>a("dialog")(...s),div:(...s)=>a("div")(...s),dl:(...s)=>a("dl")(...s),dt:(...s)=>a("dt")(...s),em:(...s)=>a("em")(...s),embed:(...s)=>a("embed")(...s),fieldset:(...s)=>a("fieldset")(...s),figcaption:(...s)=>a("figcaption")(...s),figure:(...s)=>a("figure")(...s),footer:(...s)=>a("footer")(...s),form:(...s)=>a("form")(...s),h1:(...s)=>a("h1")(...s),h2:(...s)=>a("h2")(...s),h3:(...s)=>a("h3")(...s),h4:(...s)=>a("h4")(...s),h5:(...s)=>a("h5")(...s),h6:(...s)=>a("h6")(...s),header:(...s)=>a("header")(...s),hgroup:(...s)=>a("hgroup")(...s),hr:(...s)=>a("hr")(...s),i:(...s)=>a("i")(...s),iframe:(...s)=>a("iframe")(...s),img:(...s)=>a("img")(...s),input:(...s)=>a("input")(...s),ins:(...s)=>a("ins")(...s),kbd:(...s)=>a("kbd")(...s),label:(...s)=>a("label")(...s),legend:(...s)=>a("legend")(...s),li:(...s)=>a("li")(...s),main:(...s)=>a("main")(...s),map:(...s)=>a("map")(...s),mark:(...s)=>a("mark")(...s),meter:(...s)=>a("meter")(...s),nav:(...s)=>a("nav")(...s),object:(...s)=>a("object")(...s),ol:(...s)=>a("ol")(...s),optgroup:(...s)=>a("optgroup")(...s),option:(...s)=>a("option")(...s),output:(...s)=>a("output")(...s),p:(...s)=>a("p")(...s),picture:(...s)=>a("picture")(...s),pre:(...s)=>a("pre")(...s),progress:(...s)=>a("progress")(...s),q:(...s)=>a("q")(...s),rp:(...s)=>a("rp")(...s),rt:(...s)=>a("rt")(...s),ruby:(...s)=>a("ruby")(...s),s:(...s)=>a("s")(...s),samp:(...s)=>a("samp")(...s),section:(...s)=>a("section")(...s),select:(...s)=>a("select")(...s),small:(...s)=>a("small")(...s),span:(...s)=>a("span")(...s),strong:(...s)=>a("strong")(...s),sub:(...s)=>a("sub")(...s),summary:(...s)=>a("summary")(...s),sup:(...s)=>a("sup")(...s),table:(...s)=>a("table")(...s),tbody:(...s)=>a("tbody")(...s),td:(...s)=>a("td")(...s),textarea:(...s)=>a("textarea")(...s),tfoot:(...s)=>a("tfoot")(...s),th:(...s)=>a("th")(...s),thead:(...s)=>a("thead")(...s),time:(...s)=>a("time")(...s),tr:(...s)=>a("tr")(...s),u:(...s)=>a("u")(...s),ul:(...s)=>a("ul")(...s),video:(...s)=>a("video")(...s)});0&&(module.exports={styled,styledBase});
 //# sourceMappingURL=index.cjs.map

package/src/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts","core.ts"],"sourcesContent":["import { FC } from 'react'\nimport { TemplateStringProps } from '@slimr/css'\nimport { styledBase as s } from './core.js'\n\nexport * from '@slimr/css'\nexport * from './core.js'\n\n/** Shorthand type */\ntype unk = unknown\n/** Shorthand type */\ntype TSP = TemplateStringProps\n/** Shorthand type */\ntype HTP = JSX.IntrinsicElements\n\nexport const styled = Object.assign(s, {\n  /** creates a 'a' component with css applied */\n  a: (...p: TSP) => s('a' as unk as FC<HTP['a']>)(...p),\n  /** creates a 'abbr' component with css applied */\n  abbr: (...p: TSP) => s('abbr' as unk as FC<HTP['abbr']>)(...p),\n  /** creates a 'address' component with css applied */\n  address: (...p: TSP) => s('address' as unk as FC<HTP['address']>)(...p),\n  /** creates a 'area' component with css applied */\n  area: (...p: TSP) => s('area' as unk as FC<HTP['area']>)(...p),\n  /** creates a 'article' component with css applied */\n  article: (...p: TSP) => s('article' as unk as FC<HTP['article']>)(...p),\n  /** creates a 'aside' component with css applied */\n  aside: (...p: TSP) => s('aside' as unk as FC<HTP['aside']>)(...p),\n  /** creates a 'audio' component with css applied */\n  audio: (...p: TSP) => s('audio' as unk as FC<HTP['audio']>)(...p),\n  /** creates a 'b' component with css applied */\n  b: (...p: TSP) => s('b' as unk as FC<HTP['b']>)(...p),\n  /** creates a 'big' component with css applied; Deprecated so left out */\n  // big: (...p: TSP) => styled('big' as unk as FC<HTP['big']>)(...p),\n  /** creates a 'blockquote' component with css applied */\n  blockquote: (...p: TSP) => s('blockquote' as unk as FC<HTP['blockquote']>)(...p),\n  /** creates a 'body' component with css applied; omitted bc doesnt seem useful */\n  // body: (...p: TSP) => styled('body' as unk as FC<HTP['body']>)(...p),\n  /** creates a 'br' component with css applied; omitted bc doesnt seem useful */\n  br: (...p: TSP) => s('br' as unk as FC<HTP['br']>)(...p),\n  /** creates a 'button' component with css applied */\n  button: (...p: TSP) => s('button' as unk as FC<HTP['button']>)(...p),\n  /** creates a 'caption' component with css applied */\n  caption: (...p: TSP) => s('caption' as unk as FC<HTP['caption']>)(...p),\n  /** creates a 'cite' component with css applied */\n  cite: (...p: TSP) => s('cite' as unk as FC<HTP['cite']>)(...p),\n  /** creates a 'code' component with css applied */\n  code: (...p: TSP) => s('code' as unk as FC<HTP['code']>)(...p),\n  /** creates a 'col' component with css applied */\n  col: (...p: TSP) => s('col' as unk as FC<HTP['col']>)(...p),\n  /** creates a 'colgroup' component with css applied */\n  colgroup: (...p: TSP) => s('colgroup' as unk as FC<HTP['colgroup']>)(...p),\n  /** creates a 'dd' component with css applied */\n  dd: (...p: TSP) => s('dd' as unk as FC<HTP['dd']>)(...p),\n  /** creates a 'del' component with css applied */\n  del: (...p: TSP) => s('del' as unk as FC<HTP['del']>)(...p),\n  /** creates a 'details' component with css applied */\n  details: (...p: TSP) => s('details' as unk as FC<HTP['details']>)(...p),\n  /** creates a 'dfn' component with css applied */\n  dfn: (...p: TSP) => s('dfn' as unk as FC<HTP['dfn']>)(...p),\n  /** creates a 'dialog' component with css applied */\n  dialog: (...p: TSP) => s('dialog' as unk as FC<HTP['dialog']>)(...p),\n  /** creates a 'div' component with css applied */\n  div: (...p: TSP) => s('div' as unk as FC<HTP['div']>)(...p),\n  /** creates a 'dl' component with css applied */\n  dl: (...p: TSP) => s('dl' as unk as FC<HTP['dl']>)(...p),\n  /** creates a 'dt' component with css applied */\n  dt: (...p: TSP) => s('dt' as unk as FC<HTP['dt']>)(...p),\n  /** creates a 'em' component with css applied */\n  em: (...p: TSP) => s('em' as unk as FC<HTP['em']>)(...p),\n  /** creates a 'embed' component with css applied */\n  embed: (...p: TSP) => s('embed' as unk as FC<HTP['embed']>)(...p),\n  /** creates a 'fieldset' component with css applied */\n  fieldset: (...p: TSP) => s('fieldset' as unk as FC<HTP['fieldset']>)(...p),\n  /** creates a 'figcaption' component with css applied */\n  figcaption: (...p: TSP) => s('figcaption' as unk as FC<HTP['figcaption']>)(...p),\n  /** creates a 'figure' component with css applied */\n  figure: (...p: TSP) => s('figure' as unk as FC<HTP['figure']>)(...p),\n  /** creates a 'footer' component with css applied */\n  footer: (...p: TSP) => s('footer' as unk as FC<HTP['footer']>)(...p),\n  /** creates a 'form' component with css applied */\n  form: (...p: TSP) => s('form' as unk as FC<HTP['form']>)(...p),\n  /** creates a 'h1' component with css applied */\n  h1: (...p: TSP) => s('h1' as unk as FC<HTP['h1']>)(...p),\n  /** creates a 'h2' component with css applied */\n  h2: (...p: TSP) => s('h2' as unk as FC<HTP['h2']>)(...p),\n  /** creates a 'h3' component with css applied */\n  h3: (...p: TSP) => s('h3' as unk as FC<HTP['h3']>)(...p),\n  /** creates a 'h4' component with css applied */\n  h4: (...p: TSP) => s('h4' as unk as FC<HTP['h4']>)(...p),\n  /** creates a 'h5' component with css applied */\n  h5: (...p: TSP) => s('h5' as unk as FC<HTP['h5']>)(...p),\n  /** creates a 'h6' component with css applied */\n  h6: (...p: TSP) => s('h6' as unk as FC<HTP['h6']>)(...p),\n  /** creates a 'header' component with css applied */\n  header: (...p: TSP) => s('header' as unk as FC<HTP['header']>)(...p),\n  /** creates a 'hgroup' component with css applied */\n  hgroup: (...p: TSP) => s('hgroup' as unk as FC<HTP['hgroup']>)(...p),\n  /** creates a 'hr' component with css applied */\n  hr: (...p: TSP) => s('hr' as unk as FC<HTP['hr']>)(...p),\n  /** creates a 'i' component with css applied */\n  i: (...p: TSP) => s('i' as unk as FC<HTP['i']>)(...p),\n  /** creates a 'iframe' component with css applied */\n  iframe: (...p: TSP) => s('iframe' as unk as FC<HTP['iframe']>)(...p),\n  /** creates a 'img' component with css applied */\n  img: (...p: TSP) => s('img' as unk as FC<HTP['img']>)(...p),\n  /** creates a 'input' component with css applied */\n  input: (...p: TSP) => s('input' as unk as FC<HTP['input']>)(...p),\n  /** creates a 'ins' component with css applied */\n  ins: (...p: TSP) => s('ins' as unk as FC<HTP['ins']>)(...p),\n  /** creates a 'kbd' component with css applied */\n  kbd: (...p: TSP) => s('kbd' as unk as FC<HTP['kbd']>)(...p),\n  /** creates a 'label' component with css applied */\n  label: (...p: TSP) => s('label' as unk as FC<HTP['label']>)(...p),\n  /** creates a 'legend' component with css applied */\n  legend: (...p: TSP) => s('legend' as unk as FC<HTP['legend']>)(...p),\n  /** creates a 'li' component with css applied */\n  li: (...p: TSP) => s('li' as unk as FC<HTP['li']>)(...p),\n  /** creates a 'main' component with css applied */\n  main: (...p: TSP) => s('main' as unk as FC<HTP['main']>)(...p),\n  /** creates a 'map' component with css applied */\n  map: (...p: TSP) => s('map' as unk as FC<HTP['map']>)(...p),\n  /** creates a 'mark' component with css applied */\n  mark: (...p: TSP) => s('mark' as unk as FC<HTP['mark']>)(...p),\n  /** creates a 'meter' component with css applied */\n  meter: (...p: TSP) => s('meter' as unk as FC<HTP['meter']>)(...p),\n  /** creates a 'nav' component with css applied */\n  nav: (...p: TSP) => s('nav' as unk as FC<HTP['nav']>)(...p),\n  /** creates a 'object' component with css applied */\n  object: (...p: TSP) => s('object' as unk as FC<HTP['object']>)(...p),\n  /** creates a 'ol' component with css applied */\n  ol: (...p: TSP) => s('ol' as unk as FC<HTP['ol']>)(...p),\n  /** creates a 'optgroup' component with css applied */\n  optgroup: (...p: TSP) => s('optgroup' as unk as FC<HTP['optgroup']>)(...p),\n  /** creates a 'option' component with css applied */\n  option: (...p: TSP) => s('option' as unk as FC<HTP['option']>)(...p),\n  /** creates a 'output' component with css applied */\n  output: (...p: TSP) => s('output' as unk as FC<HTP['output']>)(...p),\n  /** creates a 'p' component with css applied */\n  p: (...p: TSP) => s('p' as unk as FC<HTP['p']>)(...p),\n  /** creates a 'picture' component with css applied */\n  picture: (...p: TSP) => s('picture' as unk as FC<HTP['picture']>)(...p),\n  /** creates a 'pre' component with css applied */\n  pre: (...p: TSP) => s('pre' as unk as FC<HTP['pre']>)(...p),\n  /** creates a 'progress' component with css applied */\n  progress: (...p: TSP) => s('progress' as unk as FC<HTP['progress']>)(...p),\n  /** creates a 'q' component with css applied */\n  q: (...p: TSP) => s('q' as unk as FC<HTP['q']>)(...p),\n  /** creates a 'rp' component with css applied */\n  rp: (...p: TSP) => s('rp' as unk as FC<HTP['rp']>)(...p),\n  /** creates a 'rt' component with css applied */\n  rt: (...p: TSP) => s('rt' as unk as FC<HTP['rt']>)(...p),\n  /** creates a 'ruby' component with css applied */\n  ruby: (...p: TSP) => s('ruby' as unk as FC<HTP['ruby']>)(...p),\n  /** creates a 's' component with css applied */\n  s: (...p: TSP) => s('s' as unk as FC<HTP['s']>)(...p),\n  /** creates a 'samp' component with css applied */\n  samp: (...p: TSP) => s('samp' as unk as FC<HTP['samp']>)(...p),\n  /** creates a 'section' component with css applied */\n  section: (...p: TSP) => s('section' as unk as FC<HTP['section']>)(...p),\n  /** creates a 'select' component with css applied */\n  select: (...p: TSP) => s('select' as unk as FC<HTP['select']>)(...p),\n  /** creates a 'small' component with css applied */\n  small: (...p: TSP) => s('small' as unk as FC<HTP['small']>)(...p),\n  /** creates a 'span' component with css applied */\n  span: (...p: TSP) => s('span' as unk as FC<HTP['span']>)(...p),\n  /** creates a 'strong' component with css applied */\n  strong: (...p: TSP) => s('strong' as unk as FC<HTP['strong']>)(...p),\n  /** creates a 'sub' component with css applied */\n  sub: (...p: TSP) => s('sub' as unk as FC<HTP['sub']>)(...p),\n  /** creates a 'summary' component with css applied */\n  summary: (...p: TSP) => s('summary' as unk as FC<HTP['summary']>)(...p),\n  /** creates a 'sup' component with css applied */\n  sup: (...p: TSP) => s('sup' as unk as FC<HTP['sup']>)(...p),\n  /** creates a 'table' component with css applied */\n  table: (...p: TSP) => s('table' as unk as FC<HTP['table']>)(...p),\n  /** creates a 'tbody' component with css applied */\n  tbody: (...p: TSP) => s('tbody' as unk as FC<HTP['tbody']>)(...p),\n  /** creates a 'td' component with css applied */\n  td: (...p: TSP) => s('td' as unk as FC<HTP['td']>)(...p),\n  /** creates a 'textarea' component with css applied */\n  textarea: (...p: TSP) => s('textarea' as unk as FC<HTP['textarea']>)(...p),\n  /** creates a 'tfoot' component with css applied */\n  tfoot: (...p: TSP) => s('tfoot' as unk as FC<HTP['tfoot']>)(...p),\n  /** creates a 'th' component with css applied */\n  th: (...p: TSP) => s('th' as unk as FC<HTP['th']>)(...p),\n  /** creates a 'thead' component with css applied */\n  thead: (...p: TSP) => s('thead' as unk as FC<HTP['thead']>)(...p),\n  /** creates a 'time' component with css applied */\n  time: (...p: TSP) => s('time' as unk as FC<HTP['time']>)(...p),\n  /** creates a 'tr' component with css applied */\n  tr: (...p: TSP) => s('tr' as unk as FC<HTP['tr']>)(...p),\n  /** creates a 'u' component with css applied */\n  u: (...p: TSP) => s('u' as unk as FC<HTP['u']>)(...p),\n  /** creates a 'ul' component with css applied */\n  ul: (...p: TSP) => s('ul' as unk as FC<HTP['ul']>)(...p),\n  /** creates a 'video' component with css applied */\n  video: (...p: TSP) => s('video' as unk as FC<HTP['video']>)(...p),\n})\n","import { createElement, CSSProperties, FC, forwardRef, HTMLAttributes } from 'react'\nimport { classJoin, css, ShorthandProps, shorthandPropsMap, TemplateStringProps } from '@slimr/css'\n\n/** A type that represents all the css properties + shorthand props */\nexport interface ZxProps extends CSSProperties, ShorthandProps {}\ntype ZxP = ZxProps\n\ntype Zx = {\n  [k in keyof ZxP]:\n    | ZxP[k]\n    | [ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n}\n\ntype _Props = {\n  [k in keyof Zx as `_${k}`]?: Zx[k]\n}\n\nexport interface SCProps extends _Props {\n  /** Like zx prop, but applies only on :active */\n  _active?: Zx\n  className?: string\n  /** A string of css or classname to be added to the component */\n  _css?: string\n  /** Like zx prop, but applies only when user prefers dark theme */\n  _dark?: Zx\n  /** Like zx prop, but applies only on :focus */\n  _focus?: Zx\n  /** Like zx prop, but applies only on :focus-visible */\n  _focusVisible?: Zx\n  /** Like zx prop, but applies only on :focus-within */\n  _focusWithin?: Zx\n  /** Like zx prop, but applies only on :hover */\n  _hover?: Zx\n  style?: CSSProperties\n  /** Like zx prop, but applies only on :target */\n  _target?: Zx\n  /** Like zx prop, but applies only on :visited */\n  _visited?: Zx\n  /**\n   * Like style prop, but enhanced with features like chakra\n   *  - Array values are converted to media query breakpoints\n   *  - Numbers are converted to px\n   *  - Shorthand props are supported\n   */\n  _zx?: Zx\n}\n\n/** Styled Component: Like FunctionalComponent but adds SCProps */\nexport type SC<T extends { className?: HTMLAttributes<any>['className'] }> = FC<T & SCProps>\n\nfunction toKebabCase(str: string) {\n  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\nfunction toCamelCase(str: string) {\n  return str.replace(/-./g, (x) => x[1].toUpperCase())\n}\n\nfunction expandShorthandProps(zx: Zx) {\n  return Object.entries(zx).reduce((acc, [k, v]) => {\n    if (k === 'mx') {\n      acc.marginLeft = v\n      acc.marginRight = v\n    } else if (k === 'my') {\n      acc.marginTop = v\n      acc.marginBottom = v\n    } else if (k === 'px') {\n      acc.paddingLeft = v\n      acc.paddingRight = v\n    } else if (k === 'py') {\n      acc.paddingTop = v\n      acc.paddingBottom = v\n    } else if (k in shorthandPropsMap) {\n      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v\n    } else {\n      acc[k] = v\n    }\n    return acc\n  }, {} as any)\n}\n\nfunction zxToCss(zx: Zx): string {\n  return Object.entries(zx)\n    .map(([k, v]) => {\n      if (!v) return ''\n      k = toKebabCase(k)\n      if (typeof v === 'number') v = v + 'px'\n      if (Array.isArray(v)) {\n        // @ts-ignore\n        v = '[' + v.map((v) => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'\n      }\n      return k + ':' + v + ';'\n    })\n    .join('\\n')\n}\n\n/**\n * A lightweight alternative to styled-components\n * @param function - a functional component to be styled; must accept a className prop\n * @returns a function that accepts a template string of css returns a decorated functional component\n */\nexport function styledBase<C extends FC<any>>(Component: C) {\n  return (...cssProps: TemplateStringProps) => {\n    const className = css(...cssProps)\n    /**\n     * A functional component that accepts Styled Props\n     */\n    const CStyled = forwardRef((props: SCProps, ref) => {\n      let {\n        _active,\n        _css,\n        _dark,\n        _focus,\n        _focusVisible,\n        _focusWithin,\n        _hover,\n        _target,\n        _visited,\n        _zx = {},\n        ...rest\n      } = props\n\n      // Pluck out $ prefixed props\n      Object.entries(props).forEach(([k, v]) => {\n        if (k.startsWith('_')) {\n          // @ts-ignore\n          _zx[k.slice(1)] = v\n          // @ts-ignore\n          delete rest[k]\n        }\n      })\n\n      let cssStr = ''\n\n      if (_active) {\n        cssStr += `\n          &:active {\n          ${zxToCss(_active)}\n          }\n        `\n      }\n      if (_dark) {\n        cssStr += `\n          @media (prefers-color-scheme: dark) {\n          ${zxToCss(_dark)}\n          }\n        `\n      }\n      if (_focus) {\n        cssStr += `\n          &:focus {\n          ${zxToCss(_focus)}\n          }\n        `\n      }\n      if (_focusVisible) {\n        cssStr += `\n          &:focus-visible {\n          ${zxToCss(_focusVisible)}\n          }\n        `\n      }\n      if (_focusWithin) {\n        cssStr += `\n          &:focus-within {\n          ${zxToCss(_focusWithin)}\n          }\n        `\n      }\n      if (_hover) {\n        cssStr += `\n          &:hover {\n          ${zxToCss(_hover)}\n          }\n        `\n      }\n      if (_target) {\n        cssStr += `\n          &:target {\n          ${zxToCss(_target)}\n          }\n        `\n      }\n      if (_visited) {\n        cssStr += `\n          &:visited {\n          ${zxToCss(_visited)}\n          }\n        `\n      }\n\n      const hasMediaQuery = Object.values(_zx).some((v) => Array.isArray(v))\n      // If has media query styles, use css class. Otherwise favor inline styles\n      if (hasMediaQuery || cssStr) {\n        cssStr = zxToCss(_zx) + cssStr\n      } else {\n        _zx = expandShorthandProps(_zx)\n        rest.style = { ...rest.style, ..._zx } as CSSProperties\n      }\n\n      return createElement(Component, {\n        ref,\n        ...rest,\n        className: classJoin(\n          className,\n          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,\n          cssStr ? css(cssStr) : undefined,\n          props.className\n        ),\n      })\n    })\n    CStyled.toString = () => '.' + className\n    return CStyled as unknown as SC<Parameters<C>[0]>\n  }\n}\n"],"mappings":"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","names":["src_exports","__export","styled","styledBase","__toCommonJS","import_react","import_css","toKebabCase","str","toCamelCase","x","expandShorthandProps","zx","acc","k","v","zxToCss","styledBase","Component","cssProps","className","CStyled","props","ref","_active","_css","_dark","_focus","_focusVisible","_focusWithin","_hover","_target","_visited","_zx","rest","cssStr","__reExport","src_exports","styled","styledBase","p"]}
+{"version":3,"sources":["index.ts","core.ts"],"sourcesContent":["import {TemplateStringProps} from '@slimr/css'\n\nimport {FC} from 'react'\n\nimport {styledBase as s} from './core.js'\n\nexport * from '@slimr/css'\nexport * from './core.js'\n\n/** Shorthand type */\ntype unk = unknown\n/** Shorthand type */\ntype TSP = TemplateStringProps\n/** Shorthand type */\ntype HTP = JSX.IntrinsicElements\n\nexport const styled = Object.assign(s, {\n  /** creates a 'a' component with css applied */\n  a: (...p: TSP) => s('a' as unk as FC<HTP['a']>)(...p),\n  /** creates a 'abbr' component with css applied */\n  abbr: (...p: TSP) => s('abbr' as unk as FC<HTP['abbr']>)(...p),\n  /** creates a 'address' component with css applied */\n  address: (...p: TSP) => s('address' as unk as FC<HTP['address']>)(...p),\n  /** creates a 'area' component with css applied */\n  area: (...p: TSP) => s('area' as unk as FC<HTP['area']>)(...p),\n  /** creates a 'article' component with css applied */\n  article: (...p: TSP) => s('article' as unk as FC<HTP['article']>)(...p),\n  /** creates a 'aside' component with css applied */\n  aside: (...p: TSP) => s('aside' as unk as FC<HTP['aside']>)(...p),\n  /** creates a 'audio' component with css applied */\n  audio: (...p: TSP) => s('audio' as unk as FC<HTP['audio']>)(...p),\n  /** creates a 'b' component with css applied */\n  b: (...p: TSP) => s('b' as unk as FC<HTP['b']>)(...p),\n  /** creates a 'big' component with css applied; Deprecated so left out */\n  // big: (...p: TSP) => styled('big' as unk as FC<HTP['big']>)(...p),\n  /** creates a 'blockquote' component with css applied */\n  blockquote: (...p: TSP) => s('blockquote' as unk as FC<HTP['blockquote']>)(...p),\n  /** creates a 'body' component with css applied; omitted bc doesnt seem useful */\n  // body: (...p: TSP) => styled('body' as unk as FC<HTP['body']>)(...p),\n  /** creates a 'br' component with css applied; omitted bc doesnt seem useful */\n  br: (...p: TSP) => s('br' as unk as FC<HTP['br']>)(...p),\n  /** creates a 'button' component with css applied */\n  button: (...p: TSP) => s('button' as unk as FC<HTP['button']>)(...p),\n  /** creates a 'caption' component with css applied */\n  caption: (...p: TSP) => s('caption' as unk as FC<HTP['caption']>)(...p),\n  /** creates a 'cite' component with css applied */\n  cite: (...p: TSP) => s('cite' as unk as FC<HTP['cite']>)(...p),\n  /** creates a 'code' component with css applied */\n  code: (...p: TSP) => s('code' as unk as FC<HTP['code']>)(...p),\n  /** creates a 'col' component with css applied */\n  col: (...p: TSP) => s('col' as unk as FC<HTP['col']>)(...p),\n  /** creates a 'colgroup' component with css applied */\n  colgroup: (...p: TSP) => s('colgroup' as unk as FC<HTP['colgroup']>)(...p),\n  /** creates a 'dd' component with css applied */\n  dd: (...p: TSP) => s('dd' as unk as FC<HTP['dd']>)(...p),\n  /** creates a 'del' component with css applied */\n  del: (...p: TSP) => s('del' as unk as FC<HTP['del']>)(...p),\n  /** creates a 'details' component with css applied */\n  details: (...p: TSP) => s('details' as unk as FC<HTP['details']>)(...p),\n  /** creates a 'dfn' component with css applied */\n  dfn: (...p: TSP) => s('dfn' as unk as FC<HTP['dfn']>)(...p),\n  /** creates a 'dialog' component with css applied */\n  dialog: (...p: TSP) => s('dialog' as unk as FC<HTP['dialog']>)(...p),\n  /** creates a 'div' component with css applied */\n  div: (...p: TSP) => s('div' as unk as FC<HTP['div']>)(...p),\n  /** creates a 'dl' component with css applied */\n  dl: (...p: TSP) => s('dl' as unk as FC<HTP['dl']>)(...p),\n  /** creates a 'dt' component with css applied */\n  dt: (...p: TSP) => s('dt' as unk as FC<HTP['dt']>)(...p),\n  /** creates a 'em' component with css applied */\n  em: (...p: TSP) => s('em' as unk as FC<HTP['em']>)(...p),\n  /** creates a 'embed' component with css applied */\n  embed: (...p: TSP) => s('embed' as unk as FC<HTP['embed']>)(...p),\n  /** creates a 'fieldset' component with css applied */\n  fieldset: (...p: TSP) => s('fieldset' as unk as FC<HTP['fieldset']>)(...p),\n  /** creates a 'figcaption' component with css applied */\n  figcaption: (...p: TSP) => s('figcaption' as unk as FC<HTP['figcaption']>)(...p),\n  /** creates a 'figure' component with css applied */\n  figure: (...p: TSP) => s('figure' as unk as FC<HTP['figure']>)(...p),\n  /** creates a 'footer' component with css applied */\n  footer: (...p: TSP) => s('footer' as unk as FC<HTP['footer']>)(...p),\n  /** creates a 'form' component with css applied */\n  form: (...p: TSP) => s('form' as unk as FC<HTP['form']>)(...p),\n  /** creates a 'h1' component with css applied */\n  h1: (...p: TSP) => s('h1' as unk as FC<HTP['h1']>)(...p),\n  /** creates a 'h2' component with css applied */\n  h2: (...p: TSP) => s('h2' as unk as FC<HTP['h2']>)(...p),\n  /** creates a 'h3' component with css applied */\n  h3: (...p: TSP) => s('h3' as unk as FC<HTP['h3']>)(...p),\n  /** creates a 'h4' component with css applied */\n  h4: (...p: TSP) => s('h4' as unk as FC<HTP['h4']>)(...p),\n  /** creates a 'h5' component with css applied */\n  h5: (...p: TSP) => s('h5' as unk as FC<HTP['h5']>)(...p),\n  /** creates a 'h6' component with css applied */\n  h6: (...p: TSP) => s('h6' as unk as FC<HTP['h6']>)(...p),\n  /** creates a 'header' component with css applied */\n  header: (...p: TSP) => s('header' as unk as FC<HTP['header']>)(...p),\n  /** creates a 'hgroup' component with css applied */\n  hgroup: (...p: TSP) => s('hgroup' as unk as FC<HTP['hgroup']>)(...p),\n  /** creates a 'hr' component with css applied */\n  hr: (...p: TSP) => s('hr' as unk as FC<HTP['hr']>)(...p),\n  /** creates a 'i' component with css applied */\n  i: (...p: TSP) => s('i' as unk as FC<HTP['i']>)(...p),\n  /** creates a 'iframe' component with css applied */\n  iframe: (...p: TSP) => s('iframe' as unk as FC<HTP['iframe']>)(...p),\n  /** creates a 'img' component with css applied */\n  img: (...p: TSP) => s('img' as unk as FC<HTP['img']>)(...p),\n  /** creates a 'input' component with css applied */\n  input: (...p: TSP) => s('input' as unk as FC<HTP['input']>)(...p),\n  /** creates a 'ins' component with css applied */\n  ins: (...p: TSP) => s('ins' as unk as FC<HTP['ins']>)(...p),\n  /** creates a 'kbd' component with css applied */\n  kbd: (...p: TSP) => s('kbd' as unk as FC<HTP['kbd']>)(...p),\n  /** creates a 'label' component with css applied */\n  label: (...p: TSP) => s('label' as unk as FC<HTP['label']>)(...p),\n  /** creates a 'legend' component with css applied */\n  legend: (...p: TSP) => s('legend' as unk as FC<HTP['legend']>)(...p),\n  /** creates a 'li' component with css applied */\n  li: (...p: TSP) => s('li' as unk as FC<HTP['li']>)(...p),\n  /** creates a 'main' component with css applied */\n  main: (...p: TSP) => s('main' as unk as FC<HTP['main']>)(...p),\n  /** creates a 'map' component with css applied */\n  map: (...p: TSP) => s('map' as unk as FC<HTP['map']>)(...p),\n  /** creates a 'mark' component with css applied */\n  mark: (...p: TSP) => s('mark' as unk as FC<HTP['mark']>)(...p),\n  /** creates a 'meter' component with css applied */\n  meter: (...p: TSP) => s('meter' as unk as FC<HTP['meter']>)(...p),\n  /** creates a 'nav' component with css applied */\n  nav: (...p: TSP) => s('nav' as unk as FC<HTP['nav']>)(...p),\n  /** creates a 'object' component with css applied */\n  object: (...p: TSP) => s('object' as unk as FC<HTP['object']>)(...p),\n  /** creates a 'ol' component with css applied */\n  ol: (...p: TSP) => s('ol' as unk as FC<HTP['ol']>)(...p),\n  /** creates a 'optgroup' component with css applied */\n  optgroup: (...p: TSP) => s('optgroup' as unk as FC<HTP['optgroup']>)(...p),\n  /** creates a 'option' component with css applied */\n  option: (...p: TSP) => s('option' as unk as FC<HTP['option']>)(...p),\n  /** creates a 'output' component with css applied */\n  output: (...p: TSP) => s('output' as unk as FC<HTP['output']>)(...p),\n  /** creates a 'p' component with css applied */\n  p: (...p: TSP) => s('p' as unk as FC<HTP['p']>)(...p),\n  /** creates a 'picture' component with css applied */\n  picture: (...p: TSP) => s('picture' as unk as FC<HTP['picture']>)(...p),\n  /** creates a 'pre' component with css applied */\n  pre: (...p: TSP) => s('pre' as unk as FC<HTP['pre']>)(...p),\n  /** creates a 'progress' component with css applied */\n  progress: (...p: TSP) => s('progress' as unk as FC<HTP['progress']>)(...p),\n  /** creates a 'q' component with css applied */\n  q: (...p: TSP) => s('q' as unk as FC<HTP['q']>)(...p),\n  /** creates a 'rp' component with css applied */\n  rp: (...p: TSP) => s('rp' as unk as FC<HTP['rp']>)(...p),\n  /** creates a 'rt' component with css applied */\n  rt: (...p: TSP) => s('rt' as unk as FC<HTP['rt']>)(...p),\n  /** creates a 'ruby' component with css applied */\n  ruby: (...p: TSP) => s('ruby' as unk as FC<HTP['ruby']>)(...p),\n  /** creates a 's' component with css applied */\n  s: (...p: TSP) => s('s' as unk as FC<HTP['s']>)(...p),\n  /** creates a 'samp' component with css applied */\n  samp: (...p: TSP) => s('samp' as unk as FC<HTP['samp']>)(...p),\n  /** creates a 'section' component with css applied */\n  section: (...p: TSP) => s('section' as unk as FC<HTP['section']>)(...p),\n  /** creates a 'select' component with css applied */\n  select: (...p: TSP) => s('select' as unk as FC<HTP['select']>)(...p),\n  /** creates a 'small' component with css applied */\n  small: (...p: TSP) => s('small' as unk as FC<HTP['small']>)(...p),\n  /** creates a 'span' component with css applied */\n  span: (...p: TSP) => s('span' as unk as FC<HTP['span']>)(...p),\n  /** creates a 'strong' component with css applied */\n  strong: (...p: TSP) => s('strong' as unk as FC<HTP['strong']>)(...p),\n  /** creates a 'sub' component with css applied */\n  sub: (...p: TSP) => s('sub' as unk as FC<HTP['sub']>)(...p),\n  /** creates a 'summary' component with css applied */\n  summary: (...p: TSP) => s('summary' as unk as FC<HTP['summary']>)(...p),\n  /** creates a 'sup' component with css applied */\n  sup: (...p: TSP) => s('sup' as unk as FC<HTP['sup']>)(...p),\n  /** creates a 'table' component with css applied */\n  table: (...p: TSP) => s('table' as unk as FC<HTP['table']>)(...p),\n  /** creates a 'tbody' component with css applied */\n  tbody: (...p: TSP) => s('tbody' as unk as FC<HTP['tbody']>)(...p),\n  /** creates a 'td' component with css applied */\n  td: (...p: TSP) => s('td' as unk as FC<HTP['td']>)(...p),\n  /** creates a 'textarea' component with css applied */\n  textarea: (...p: TSP) => s('textarea' as unk as FC<HTP['textarea']>)(...p),\n  /** creates a 'tfoot' component with css applied */\n  tfoot: (...p: TSP) => s('tfoot' as unk as FC<HTP['tfoot']>)(...p),\n  /** creates a 'th' component with css applied */\n  th: (...p: TSP) => s('th' as unk as FC<HTP['th']>)(...p),\n  /** creates a 'thead' component with css applied */\n  thead: (...p: TSP) => s('thead' as unk as FC<HTP['thead']>)(...p),\n  /** creates a 'time' component with css applied */\n  time: (...p: TSP) => s('time' as unk as FC<HTP['time']>)(...p),\n  /** creates a 'tr' component with css applied */\n  tr: (...p: TSP) => s('tr' as unk as FC<HTP['tr']>)(...p),\n  /** creates a 'u' component with css applied */\n  u: (...p: TSP) => s('u' as unk as FC<HTP['u']>)(...p),\n  /** creates a 'ul' component with css applied */\n  ul: (...p: TSP) => s('ul' as unk as FC<HTP['ul']>)(...p),\n  /** creates a 'video' component with css applied */\n  video: (...p: TSP) => s('video' as unk as FC<HTP['video']>)(...p),\n})\n","/* eslint-disable prefer-const */\nimport {ShorthandProps, TemplateStringProps, classJoin, css, shorthandPropsMap} from '@slimr/css'\n\nimport {CSSProperties, FC, HTMLAttributes, createElement, forwardRef} from 'react'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype allowableAny = any\n\n/** A type that represents all the css properties + shorthand props */\nexport interface ZxProps extends CSSProperties, ShorthandProps {}\ntype ZxP = ZxProps\n\ntype Zx = {\n  [k in keyof ZxP]:\n    | ZxP[k]\n    | [ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n}\n\ntype _Props = {\n  [k in keyof Zx as `_${k}`]?: Zx[k]\n}\n\nexport interface SCProps extends _Props {\n  /** Like zx prop, but applies only on :active */\n  _active?: Zx\n  className?: string\n  /** A string of css or classname to be added to the component */\n  _css?: string\n  /** Like zx prop, but applies only when user prefers dark theme */\n  _dark?: Zx\n  /** Like zx prop, but applies only on :focus */\n  _focus?: Zx\n  /** Like zx prop, but applies only on :focus-visible */\n  _focusVisible?: Zx\n  /** Like zx prop, but applies only on :focus-within */\n  _focusWithin?: Zx\n  /** Like zx prop, but applies only on :hover */\n  _hover?: Zx\n  style?: CSSProperties\n  /** Like zx prop, but applies only on :target */\n  _target?: Zx\n  /** Like zx prop, but applies only on :visited */\n  _visited?: Zx\n  /**\n   * Like style prop, but enhanced with features like chakra\n   *  - Array values are converted to media query breakpoints\n   *  - Numbers are converted to px\n   *  - Shorthand props are supported\n   */\n  _zx?: Zx\n}\n\n/** Styled Component: Like FunctionalComponent but adds SCProps */\nexport type SC<T extends {className?: HTMLAttributes<allowableAny>['className']}> = FC<T & SCProps>\n\n/** Converts a string to kebab case */\nfunction toKebabCase(str: string) {\n  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\n/** Converts a string to camel case */\nfunction toCamelCase(str: string) {\n  return str.replace(/-./g, x => x[1].toUpperCase())\n}\n\n/** Expands the shorthand props of a zx prop into css full */\nfunction expandShorthandProps(zx: Zx) {\n  return Object.entries(zx).reduce((acc, [k, v]) => {\n    if (k === 'mx') {\n      acc.marginLeft = v\n      acc.marginRight = v\n    } else if (k === 'my') {\n      acc.marginTop = v\n      acc.marginBottom = v\n    } else if (k === 'px') {\n      acc.paddingLeft = v\n      acc.paddingRight = v\n    } else if (k === 'py') {\n      acc.paddingTop = v\n      acc.paddingBottom = v\n    } else if (k in shorthandPropsMap) {\n      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v\n    } else {\n      acc[k] = v\n    }\n    return acc\n  }, {} as Record<string, allowableAny>)\n}\n\n/** Converts a zx prop into css string */\nfunction zxToCss(zx: Zx): string {\n  return Object.entries(zx)\n    .map(([k, v]) => {\n      if (!v) return ''\n      k = toKebabCase(k)\n      if (typeof v === 'number') v = v + 'px'\n      if (Array.isArray(v)) {\n        // @ts-expect-error - TS gets confused by the complexity\n        v = '[' + v.map(v => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'\n      }\n      return k + ':' + v + ';'\n    })\n    .join('\\n')\n}\n\n/**\n * A lightweight alternative to styled-components\n * @param function - a functional component to be styled; must accept a className prop\n * @returns a function that accepts a template string of css returns a decorated functional component\n */\nexport function styledBase<C extends FC<allowableAny>>(Component: C) {\n  return (...cssProps: TemplateStringProps) => {\n    const className = css(...cssProps)\n    /**\n     * A functional component that accepts Styled Props\n     */\n    const CStyled = forwardRef(function CStyled(props: SCProps, ref) {\n      let {\n        _active,\n        _css,\n        _dark,\n        _focus,\n        _focusVisible,\n        _focusWithin,\n        _hover,\n        _target,\n        _visited,\n        _zx = {},\n        ...rest\n      } = props\n\n      // Pluck out $ prefixed props\n      Object.entries(props).forEach(([k, v]) => {\n        if (k.startsWith('_')) {\n          // @ts-expect-error - We know the key exists but ts doesn't\n          _zx[k.slice(1)] = v\n          // @ts-expect-error - We know the key exists but ts doesn't\n          delete rest[k]\n        }\n      })\n\n      let cssStr = ''\n\n      if (_active) {\n        cssStr += `\n          &:active {\n          ${zxToCss(_active)}\n          }\n        `\n      }\n      if (_dark) {\n        cssStr += `\n          @media (prefers-color-scheme: dark) {\n          ${zxToCss(_dark)}\n          }\n        `\n      }\n      if (_focus) {\n        cssStr += `\n          &:focus {\n          ${zxToCss(_focus)}\n          }\n        `\n      }\n      if (_focusVisible) {\n        cssStr += `\n          &:focus-visible {\n          ${zxToCss(_focusVisible)}\n          }\n        `\n      }\n      if (_focusWithin) {\n        cssStr += `\n          &:focus-within {\n          ${zxToCss(_focusWithin)}\n          }\n        `\n      }\n      if (_hover) {\n        cssStr += `\n          &:hover {\n          ${zxToCss(_hover)}\n          }\n        `\n      }\n      if (_target) {\n        cssStr += `\n          &:target {\n          ${zxToCss(_target)}\n          }\n        `\n      }\n      if (_visited) {\n        cssStr += `\n          &:visited {\n          ${zxToCss(_visited)}\n          }\n        `\n      }\n\n      const hasMediaQuery = Object.values(_zx).some(v => Array.isArray(v))\n      // If has media query styles, use css class. Otherwise favor inline styles\n      if (hasMediaQuery || cssStr) {\n        cssStr = zxToCss(_zx) + cssStr\n      } else {\n        _zx = expandShorthandProps(_zx)\n        rest.style = {...rest.style, ..._zx} as CSSProperties\n      }\n\n      return createElement(Component, {\n        ref,\n        ...rest,\n        className: classJoin(\n          className,\n          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,\n          cssStr ? css(cssStr) : undefined,\n          props.className\n        ),\n      })\n    })\n    CStyled.toString = () => '.' + className\n    return CStyled as unknown as SC<Parameters<C>[0]>\n  }\n}\n"],"mappings":"2dAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,YAAAE,EAAA,eAAAC,IAAA,eAAAC,EAAAJ,GCCA,IAAAK,EAAqF,sBAErFC,EAA2E,iBA0D3E,SAASC,EAAYC,EAAa,CAChC,OAAOA,EAAI,QAAQ,kBAAmB,OAAO,EAAE,YAAY,CAC7D,CAGA,SAASC,EAAYD,EAAa,CAChC,OAAOA,EAAI,QAAQ,MAAOE,GAAKA,EAAE,GAAG,YAAY,CAAC,CACnD,CAGA,SAASC,EAAqBC,EAAQ,CACpC,OAAO,OAAO,QAAQA,CAAE,EAAE,OAAO,CAACC,EAAK,CAACC,EAAGC,CAAC,KACtCD,IAAM,MACRD,EAAI,WAAaE,EACjBF,EAAI,YAAcE,GACTD,IAAM,MACfD,EAAI,UAAYE,EAChBF,EAAI,aAAeE,GACVD,IAAM,MACfD,EAAI,YAAcE,EAClBF,EAAI,aAAeE,GACVD,IAAM,MACfD,EAAI,WAAaE,EACjBF,EAAI,cAAgBE,GACXD,KAAK,oBACdD,EAAIJ,EAAY,oBAAkBK,EAAoC,GAAKC,EAE3EF,EAAIC,GAAKC,EAEJF,GACN,CAAC,CAAiC,CACvC,CAGA,SAASG,EAAQJ,EAAgB,CAC/B,OAAO,OAAO,QAAQA,CAAE,EACrB,IAAI,CAAC,CAACE,EAAGC,CAAC,IACJA,GACLD,EAAIP,EAAYO,CAAC,EACb,OAAOC,GAAM,WAAUA,EAAIA,EAAI,MAC/B,MAAM,QAAQA,CAAC,IAEjBA,EAAI,IAAMA,EAAE,IAAIA,GAAM,OAAOA,GAAM,SAAWA,EAAI,KAAOA,CAAE,EAAE,KAAK,GAAG,EAAI,KAEpED,EAAI,IAAMC,EAAI,KAPN,EAQhB,EACA,KAAK;AAAA,CAAI,CACd,CAOO,SAASE,EAAuCC,EAAc,CACnE,MAAO,IAAIC,IAAkC,CAC3C,IAAMC,KAAY,OAAI,GAAGD,CAAQ,EAI3BE,KAAU,cAAW,SAAiBC,EAAgBC,EAAK,CAC/D,GAAI,CACF,QAAAC,EACA,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,cAAAC,EACA,aAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,IAAAC,EAAM,CAAC,KACJC,CACL,EAAIZ,EAGJ,OAAO,QAAQA,CAAK,EAAE,QAAQ,CAAC,CAAC,EAAGP,CAAC,IAAM,CACpC,EAAE,WAAW,GAAG,IAElBkB,EAAI,EAAE,MAAM,CAAC,GAAKlB,EAElB,OAAOmB,EAAK,GAEhB,CAAC,EAED,IAAIC,EAAS,GAEb,OAAIX,IACFW,GAAU;AAAA;AAAA,YAENnB,EAAQQ,CAAO;AAAA;AAAA,WAIjBE,IACFS,GAAU;AAAA;AAAA,YAENnB,EAAQU,CAAK;AAAA;AAAA,WAIfC,IACFQ,GAAU;AAAA;AAAA,YAENnB,EAAQW,CAAM;AAAA;AAAA,WAIhBC,IACFO,GAAU;AAAA;AAAA,YAENnB,EAAQY,CAAa;AAAA;AAAA,WAIvBC,IACFM,GAAU;AAAA;AAAA,YAENnB,EAAQa,CAAY;AAAA;AAAA,WAItBC,IACFK,GAAU;AAAA;AAAA,YAENnB,EAAQc,CAAM;AAAA;AAAA,WAIhBC,IACFI,GAAU;AAAA;AAAA,YAENnB,EAAQe,CAAO;AAAA;AAAA,WAIjBC,IACFG,GAAU;AAAA;AAAA,YAENnB,EAAQgB,CAAQ;AAAA;AAAA,WAKA,OAAO,OAAOC,CAAG,EAAE,KAAKlB,GAAK,MAAM,QAAQA,CAAC,CAAC,GAE9CoB,EACnBA,EAASnB,EAAQiB,CAAG,EAAIE,GAExBF,EAAMtB,EAAqBsB,CAAG,EAC9BC,EAAK,MAAQ,CAAC,GAAGA,EAAK,MAAO,GAAGD,CAAG,MAG9B,iBAAcf,EAAW,CAC9B,IAAAK,EACA,GAAGW,EACH,aAAW,aACTd,EACAK,EAAQA,EAAK,SAAS,GAAG,KAAI,OAAIA,CAAI,EAAIA,EAAQ,OACjDU,KAAS,OAAIA,CAAM,EAAI,OACvBb,EAAM,SACR,CACF,CAAC,CACH,CAAC,EACD,OAAAD,EAAQ,SAAW,IAAM,IAAMD,EACxBC,CACT,CACF,CD9NAe,EAAAC,EAAc,sBANd,gBAgBO,IAAMC,EAAS,OAAO,OAAOC,EAAG,CAErC,EAAG,IAAIC,IAAWD,EAAE,GAA0B,EAAE,GAAGC,CAAC,EAEpD,KAAM,IAAIA,IAAWD,EAAE,MAAgC,EAAE,GAAGC,CAAC,EAE7D,QAAS,IAAIA,IAAWD,EAAE,SAAsC,EAAE,GAAGC,CAAC,EAEtE,KAAM,IAAIA,IAAWD,EAAE,MAAgC,EAAE,GAAGC,CAAC,EAE7D,QAAS,IAAIA,IAAWD,EAAE,SAAsC,EAAE,GAAGC,CAAC,EAEtE,MAAO,IAAIA,IAAWD,EAAE,OAAkC,EAAE,GAAGC,CAAC,EAEhE,MAAO,IAAIA,IAAWD,EAAE,OAAkC,EAAE,GAAGC,CAAC,EAEhE,EAAG,IAAIA,IAAWD,EAAE,GAA0B,EAAE,GAAGC,CAAC,EAIpD,WAAY,IAAIA,IAAWD,EAAE,YAA4C,EAAE,GAAGC,CAAC,EAI/E,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,OAAQ,IAAIA,IAAWD,EAAE,QAAoC,EAAE,GAAGC,CAAC,EAEnE,QAAS,IAAIA,IAAWD,EAAE,SAAsC,EAAE,GAAGC,CAAC,EAEtE,KAAM,IAAIA,IAAWD,EAAE,MAAgC,EAAE,GAAGC,CAAC,EAE7D,KAAM,IAAIA,IAAWD,EAAE,MAAgC,EAAE,GAAGC,CAAC,EAE7D,IAAK,IAAIA,IAAWD,EAAE,KAA8B,EAAE,GAAGC,CAAC,EAE1D,SAAU,IAAIA,IAAWD,EAAE,UAAwC,EAAE,GAAGC,CAAC,EAEzE,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,IAAK,IAAIA,IAAWD,EAAE,KAA8B,EAAE,GAAGC,CAAC,EAE1D,QAAS,IAAIA,IAAWD,EAAE,SAAsC,EAAE,GAAGC,CAAC,EAEtE,IAAK,IAAIA,IAAWD,EAAE,KAA8B,EAAE,GAAGC,CAAC,EAE1D,OAAQ,IAAIA,IAAWD,EAAE,QAAoC,EAAE,GAAGC,CAAC,EAEnE,IAAK,IAAIA,IAAWD,EAAE,KAA8B,EAAE,GAAGC,CAAC,EAE1D,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,MAAO,IAAIA,IAAWD,EAAE,OAAkC,EAAE,GAAGC,CAAC,EAEhE,SAAU,IAAIA,IAAWD,EAAE,UAAwC,EAAE,GAAGC,CAAC,EAEzE,WAAY,IAAIA,IAAWD,EAAE,YAA4C,EAAE,GAAGC,CAAC,EAE/E,OAAQ,IAAIA,IAAWD,EAAE,QAAoC,EAAE,GAAGC,CAAC,EAEnE,OAAQ,IAAIA,IAAWD,EAAE,QAAoC,EAAE,GAAGC,CAAC,EAEnE,KAAM,IAAIA,IAAWD,EAAE,MAAgC,EAAE,GAAGC,CAAC,EAE7D,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,OAAQ,IAAIA,IAAWD,EAAE,QAAoC,EAAE,GAAGC,CAAC,EAEnE,OAAQ,IAAIA,IAAWD,EAAE,QAAoC,EAAE,GAAGC,CAAC,EAEnE,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,EAAG,IAAIA,IAAWD,EAAE,GAA0B,EAAE,GAAGC,CAAC,EAEpD,OAAQ,IAAIA,IAAWD,EAAE,QAAoC,EAAE,GAAGC,CAAC,EAEnE,IAAK,IAAIA,IAAWD,EAAE,KAA8B,EAAE,GAAGC,CAAC,EAE1D,MAAO,IAAIA,IAAWD,EAAE,OAAkC,EAAE,GAAGC,CAAC,EAEhE,IAAK,IAAIA,IAAWD,EAAE,KAA8B,EAAE,GAAGC,CAAC,EAE1D,IAAK,IAAIA,IAAWD,EAAE,KAA8B,EAAE,GAAGC,CAAC,EAE1D,MAAO,IAAIA,IAAWD,EAAE,OAAkC,EAAE,GAAGC,CAAC,EAEhE,OAAQ,IAAIA,IAAWD,EAAE,QAAoC,EAAE,GAAGC,CAAC,EAEnE,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,KAAM,IAAIA,IAAWD,EAAE,MAAgC,EAAE,GAAGC,CAAC,EAE7D,IAAK,IAAIA,IAAWD,EAAE,KAA8B,EAAE,GAAGC,CAAC,EAE1D,KAAM,IAAIA,IAAWD,EAAE,MAAgC,EAAE,GAAGC,CAAC,EAE7D,MAAO,IAAIA,IAAWD,EAAE,OAAkC,EAAE,GAAGC,CAAC,EAEhE,IAAK,IAAIA,IAAWD,EAAE,KAA8B,EAAE,GAAGC,CAAC,EAE1D,OAAQ,IAAIA,IAAWD,EAAE,QAAoC,EAAE,GAAGC,CAAC,EAEnE,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,SAAU,IAAIA,IAAWD,EAAE,UAAwC,EAAE,GAAGC,CAAC,EAEzE,OAAQ,IAAIA,IAAWD,EAAE,QAAoC,EAAE,GAAGC,CAAC,EAEnE,OAAQ,IAAIA,IAAWD,EAAE,QAAoC,EAAE,GAAGC,CAAC,EAEnE,EAAG,IAAIA,IAAWD,EAAE,GAA0B,EAAE,GAAGC,CAAC,EAEpD,QAAS,IAAIA,IAAWD,EAAE,SAAsC,EAAE,GAAGC,CAAC,EAEtE,IAAK,IAAIA,IAAWD,EAAE,KAA8B,EAAE,GAAGC,CAAC,EAE1D,SAAU,IAAIA,IAAWD,EAAE,UAAwC,EAAE,GAAGC,CAAC,EAEzE,EAAG,IAAIA,IAAWD,EAAE,GAA0B,EAAE,GAAGC,CAAC,EAEpD,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,KAAM,IAAIA,IAAWD,EAAE,MAAgC,EAAE,GAAGC,CAAC,EAE7D,EAAG,IAAIA,IAAWD,EAAE,GAA0B,EAAE,GAAGC,CAAC,EAEpD,KAAM,IAAIA,IAAWD,EAAE,MAAgC,EAAE,GAAGC,CAAC,EAE7D,QAAS,IAAIA,IAAWD,EAAE,SAAsC,EAAE,GAAGC,CAAC,EAEtE,OAAQ,IAAIA,IAAWD,EAAE,QAAoC,EAAE,GAAGC,CAAC,EAEnE,MAAO,IAAIA,IAAWD,EAAE,OAAkC,EAAE,GAAGC,CAAC,EAEhE,KAAM,IAAIA,IAAWD,EAAE,MAAgC,EAAE,GAAGC,CAAC,EAE7D,OAAQ,IAAIA,IAAWD,EAAE,QAAoC,EAAE,GAAGC,CAAC,EAEnE,IAAK,IAAIA,IAAWD,EAAE,KAA8B,EAAE,GAAGC,CAAC,EAE1D,QAAS,IAAIA,IAAWD,EAAE,SAAsC,EAAE,GAAGC,CAAC,EAEtE,IAAK,IAAIA,IAAWD,EAAE,KAA8B,EAAE,GAAGC,CAAC,EAE1D,MAAO,IAAIA,IAAWD,EAAE,OAAkC,EAAE,GAAGC,CAAC,EAEhE,MAAO,IAAIA,IAAWD,EAAE,OAAkC,EAAE,GAAGC,CAAC,EAEhE,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,SAAU,IAAIA,IAAWD,EAAE,UAAwC,EAAE,GAAGC,CAAC,EAEzE,MAAO,IAAIA,IAAWD,EAAE,OAAkC,EAAE,GAAGC,CAAC,EAEhE,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,MAAO,IAAIA,IAAWD,EAAE,OAAkC,EAAE,GAAGC,CAAC,EAEhE,KAAM,IAAIA,IAAWD,EAAE,MAAgC,EAAE,GAAGC,CAAC,EAE7D,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,EAAG,IAAIA,IAAWD,EAAE,GAA0B,EAAE,GAAGC,CAAC,EAEpD,GAAI,IAAIA,IAAWD,EAAE,IAA4B,EAAE,GAAGC,CAAC,EAEvD,MAAO,IAAIA,IAAWD,EAAE,OAAkC,EAAE,GAAGC,CAAC,CAClE,CAAC","names":["src_exports","__export","styled","styledBase","__toCommonJS","import_css","import_react","toKebabCase","str","toCamelCase","x","expandShorthandProps","zx","acc","k","v","zxToCss","styledBase","Component","cssProps","className","CStyled","props","ref","_active","_css","_dark","_focus","_focusVisible","_focusWithin","_hover","_target","_visited","_zx","rest","cssStr","__reExport","src_exports","styled","styledBase","p"]}

package/src/index.js

@@ -1,5 +1,5 @@
-import{createElement as g,forwardRef as h}from"react";import{classJoin as Z,css as k,shorthandPropsMap as x}from"@slimr/css";function y(s){return s.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function _(s){return s.replace(/-./g,e=>e[1].toUpperCase())}function $(s){return Object.entries(s).reduce((e,[n,t])=>(n==="mx"?(e.marginLeft=t,e.marginRight=t):n==="my"?(e.marginTop=t,e.marginBottom=t):n==="px"?(e.paddingLeft=t,e.paddingRight=t):n==="py"?(e.paddingTop=t,e.paddingBottom=t):n in x?e[_(x[n])]=t:e[n]=t,e),{})}function r(s){return Object.entries(s).map(([e,n])=>n?(e=y(e),typeof n=="number"&&(n=n+"px"),Array.isArray(n)&&(n="["+n.map(t=>typeof t=="number"?t+"px":t).join(",")+"]"),e+":"+n+";"):"").join(`
-`)}function a(s){return(...e)=>{let n=k(...e),t=h((l,c)=>{let{_active:p,_css:o,_dark:S,_focus:C,_focusVisible:d,_focusWithin:F,_hover:H,_target:m,_visited:f,_zx:u={},...i}=l;Object.entries(l).forEach(([T,b])=>{T.startsWith("_")&&(u[T.slice(1)]=b,delete i[T])});let P="";return p&&(P+=`
+import{classJoin as g,css as k,shorthandPropsMap as c}from"@slimr/css";import{createElement as h,forwardRef as Z}from"react";function y(s){return s.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function _(s){return s.replace(/-./g,e=>e[1].toUpperCase())}function A(s){return Object.entries(s).reduce((e,[n,t])=>(n==="mx"?(e.marginLeft=t,e.marginRight=t):n==="my"?(e.marginTop=t,e.marginBottom=t):n==="px"?(e.paddingLeft=t,e.paddingRight=t):n==="py"?(e.paddingTop=t,e.paddingBottom=t):n in c?e[_(c[n])]=t:e[n]=t,e),{})}function r(s){return Object.entries(s).map(([e,n])=>n?(e=y(e),typeof n=="number"&&(n=n+"px"),Array.isArray(n)&&(n="["+n.map(t=>typeof t=="number"?t+"px":t).join(",")+"]"),e+":"+n+";"):"").join(`
+`)}function a(s){return(...e)=>{let n=k(...e),t=Z(function(l,x){let{_active:p,_css:o,_dark:S,_focus:C,_focusVisible:d,_focusWithin:F,_hover:H,_target:m,_visited:f,_zx:u={},...i}=l;Object.entries(l).forEach(([T,b])=>{T.startsWith("_")&&(u[T.slice(1)]=b,delete i[T])});let P="";return p&&(P+=`
           &:active {
           ${r(p)}
           }
@@ -31,5 +31,5 @@ import{createElement as g,forwardRef as h}from"react";import{classJoin as Z,css
           &:visited {
           ${r(f)}
           }
-        `),Object.values(u).some(T=>Array.isArray(T))||P?P=r(u)+P:(u=$(u),i.style={...i.style,...u}),g(s,{ref:c,...i,className:Z(n,o?o.includes(":")?k(o):o:void 0,P?k(P):void 0,l.className)})});return t.toString=()=>"."+n,t}}export*from"@slimr/css";var E=Object.assign(a,{a:(...s)=>a("a")(...s),abbr:(...s)=>a("abbr")(...s),address:(...s)=>a("address")(...s),area:(...s)=>a("area")(...s),article:(...s)=>a("article")(...s),aside:(...s)=>a("aside")(...s),audio:(...s)=>a("audio")(...s),b:(...s)=>a("b")(...s),blockquote:(...s)=>a("blockquote")(...s),br:(...s)=>a("br")(...s),button:(...s)=>a("button")(...s),caption:(...s)=>a("caption")(...s),cite:(...s)=>a("cite")(...s),code:(...s)=>a("code")(...s),col:(...s)=>a("col")(...s),colgroup:(...s)=>a("colgroup")(...s),dd:(...s)=>a("dd")(...s),del:(...s)=>a("del")(...s),details:(...s)=>a("details")(...s),dfn:(...s)=>a("dfn")(...s),dialog:(...s)=>a("dialog")(...s),div:(...s)=>a("div")(...s),dl:(...s)=>a("dl")(...s),dt:(...s)=>a("dt")(...s),em:(...s)=>a("em")(...s),embed:(...s)=>a("embed")(...s),fieldset:(...s)=>a("fieldset")(...s),figcaption:(...s)=>a("figcaption")(...s),figure:(...s)=>a("figure")(...s),footer:(...s)=>a("footer")(...s),form:(...s)=>a("form")(...s),h1:(...s)=>a("h1")(...s),h2:(...s)=>a("h2")(...s),h3:(...s)=>a("h3")(...s),h4:(...s)=>a("h4")(...s),h5:(...s)=>a("h5")(...s),h6:(...s)=>a("h6")(...s),header:(...s)=>a("header")(...s),hgroup:(...s)=>a("hgroup")(...s),hr:(...s)=>a("hr")(...s),i:(...s)=>a("i")(...s),iframe:(...s)=>a("iframe")(...s),img:(...s)=>a("img")(...s),input:(...s)=>a("input")(...s),ins:(...s)=>a("ins")(...s),kbd:(...s)=>a("kbd")(...s),label:(...s)=>a("label")(...s),legend:(...s)=>a("legend")(...s),li:(...s)=>a("li")(...s),main:(...s)=>a("main")(...s),map:(...s)=>a("map")(...s),mark:(...s)=>a("mark")(...s),meter:(...s)=>a("meter")(...s),nav:(...s)=>a("nav")(...s),object:(...s)=>a("object")(...s),ol:(...s)=>a("ol")(...s),optgroup:(...s)=>a("optgroup")(...s),option:(...s)=>a("option")(...s),output:(...s)=>a("output")(...s),p:(...s)=>a("p")(...s),picture:(...s)=>a("picture")(...s),pre:(...s)=>a("pre")(...s),progress:(...s)=>a("progress")(...s),q:(...s)=>a("q")(...s),rp:(...s)=>a("rp")(...s),rt:(...s)=>a("rt")(...s),ruby:(...s)=>a("ruby")(...s),s:(...s)=>a("s")(...s),samp:(...s)=>a("samp")(...s),section:(...s)=>a("section")(...s),select:(...s)=>a("select")(...s),small:(...s)=>a("small")(...s),span:(...s)=>a("span")(...s),strong:(...s)=>a("strong")(...s),sub:(...s)=>a("sub")(...s),summary:(...s)=>a("summary")(...s),sup:(...s)=>a("sup")(...s),table:(...s)=>a("table")(...s),tbody:(...s)=>a("tbody")(...s),td:(...s)=>a("td")(...s),textarea:(...s)=>a("textarea")(...s),tfoot:(...s)=>a("tfoot")(...s),th:(...s)=>a("th")(...s),thead:(...s)=>a("thead")(...s),time:(...s)=>a("time")(...s),tr:(...s)=>a("tr")(...s),u:(...s)=>a("u")(...s),ul:(...s)=>a("ul")(...s),video:(...s)=>a("video")(...s)});export{E as styled,a as styledBase};
+        `),Object.values(u).some(T=>Array.isArray(T))||P?P=r(u)+P:(u=A(u),i.style={...i.style,...u}),h(s,{ref:x,...i,className:g(n,o?o.includes(":")?k(o):o:void 0,P?k(P):void 0,l.className)})});return t.toString=()=>"."+n,t}}export*from"@slimr/css";var E=Object.assign(a,{a:(...s)=>a("a")(...s),abbr:(...s)=>a("abbr")(...s),address:(...s)=>a("address")(...s),area:(...s)=>a("area")(...s),article:(...s)=>a("article")(...s),aside:(...s)=>a("aside")(...s),audio:(...s)=>a("audio")(...s),b:(...s)=>a("b")(...s),blockquote:(...s)=>a("blockquote")(...s),br:(...s)=>a("br")(...s),button:(...s)=>a("button")(...s),caption:(...s)=>a("caption")(...s),cite:(...s)=>a("cite")(...s),code:(...s)=>a("code")(...s),col:(...s)=>a("col")(...s),colgroup:(...s)=>a("colgroup")(...s),dd:(...s)=>a("dd")(...s),del:(...s)=>a("del")(...s),details:(...s)=>a("details")(...s),dfn:(...s)=>a("dfn")(...s),dialog:(...s)=>a("dialog")(...s),div:(...s)=>a("div")(...s),dl:(...s)=>a("dl")(...s),dt:(...s)=>a("dt")(...s),em:(...s)=>a("em")(...s),embed:(...s)=>a("embed")(...s),fieldset:(...s)=>a("fieldset")(...s),figcaption:(...s)=>a("figcaption")(...s),figure:(...s)=>a("figure")(...s),footer:(...s)=>a("footer")(...s),form:(...s)=>a("form")(...s),h1:(...s)=>a("h1")(...s),h2:(...s)=>a("h2")(...s),h3:(...s)=>a("h3")(...s),h4:(...s)=>a("h4")(...s),h5:(...s)=>a("h5")(...s),h6:(...s)=>a("h6")(...s),header:(...s)=>a("header")(...s),hgroup:(...s)=>a("hgroup")(...s),hr:(...s)=>a("hr")(...s),i:(...s)=>a("i")(...s),iframe:(...s)=>a("iframe")(...s),img:(...s)=>a("img")(...s),input:(...s)=>a("input")(...s),ins:(...s)=>a("ins")(...s),kbd:(...s)=>a("kbd")(...s),label:(...s)=>a("label")(...s),legend:(...s)=>a("legend")(...s),li:(...s)=>a("li")(...s),main:(...s)=>a("main")(...s),map:(...s)=>a("map")(...s),mark:(...s)=>a("mark")(...s),meter:(...s)=>a("meter")(...s),nav:(...s)=>a("nav")(...s),object:(...s)=>a("object")(...s),ol:(...s)=>a("ol")(...s),optgroup:(...s)=>a("optgroup")(...s),option:(...s)=>a("option")(...s),output:(...s)=>a("output")(...s),p:(...s)=>a("p")(...s),picture:(...s)=>a("picture")(...s),pre:(...s)=>a("pre")(...s),progress:(...s)=>a("progress")(...s),q:(...s)=>a("q")(...s),rp:(...s)=>a("rp")(...s),rt:(...s)=>a("rt")(...s),ruby:(...s)=>a("ruby")(...s),s:(...s)=>a("s")(...s),samp:(...s)=>a("samp")(...s),section:(...s)=>a("section")(...s),select:(...s)=>a("select")(...s),small:(...s)=>a("small")(...s),span:(...s)=>a("span")(...s),strong:(...s)=>a("strong")(...s),sub:(...s)=>a("sub")(...s),summary:(...s)=>a("summary")(...s),sup:(...s)=>a("sup")(...s),table:(...s)=>a("table")(...s),tbody:(...s)=>a("tbody")(...s),td:(...s)=>a("td")(...s),textarea:(...s)=>a("textarea")(...s),tfoot:(...s)=>a("tfoot")(...s),th:(...s)=>a("th")(...s),thead:(...s)=>a("thead")(...s),time:(...s)=>a("time")(...s),tr:(...s)=>a("tr")(...s),u:(...s)=>a("u")(...s),ul:(...s)=>a("ul")(...s),video:(...s)=>a("video")(...s)});export{E as styled,a as styledBase};
 //# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["core.ts","index.ts"],"sourcesContent":["import { createElement, CSSProperties, FC, forwardRef, HTMLAttributes } from 'react'\nimport { classJoin, css, ShorthandProps, shorthandPropsMap, TemplateStringProps } from '@slimr/css'\n\n/** A type that represents all the css properties + shorthand props */\nexport interface ZxProps extends CSSProperties, ShorthandProps {}\ntype ZxP = ZxProps\n\ntype Zx = {\n  [k in keyof ZxP]:\n    | ZxP[k]\n    | [ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n}\n\ntype _Props = {\n  [k in keyof Zx as `_${k}`]?: Zx[k]\n}\n\nexport interface SCProps extends _Props {\n  /** Like zx prop, but applies only on :active */\n  _active?: Zx\n  className?: string\n  /** A string of css or classname to be added to the component */\n  _css?: string\n  /** Like zx prop, but applies only when user prefers dark theme */\n  _dark?: Zx\n  /** Like zx prop, but applies only on :focus */\n  _focus?: Zx\n  /** Like zx prop, but applies only on :focus-visible */\n  _focusVisible?: Zx\n  /** Like zx prop, but applies only on :focus-within */\n  _focusWithin?: Zx\n  /** Like zx prop, but applies only on :hover */\n  _hover?: Zx\n  style?: CSSProperties\n  /** Like zx prop, but applies only on :target */\n  _target?: Zx\n  /** Like zx prop, but applies only on :visited */\n  _visited?: Zx\n  /**\n   * Like style prop, but enhanced with features like chakra\n   *  - Array values are converted to media query breakpoints\n   *  - Numbers are converted to px\n   *  - Shorthand props are supported\n   */\n  _zx?: Zx\n}\n\n/** Styled Component: Like FunctionalComponent but adds SCProps */\nexport type SC<T extends { className?: HTMLAttributes<any>['className'] }> = FC<T & SCProps>\n\nfunction toKebabCase(str: string) {\n  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\nfunction toCamelCase(str: string) {\n  return str.replace(/-./g, (x) => x[1].toUpperCase())\n}\n\nfunction expandShorthandProps(zx: Zx) {\n  return Object.entries(zx).reduce((acc, [k, v]) => {\n    if (k === 'mx') {\n      acc.marginLeft = v\n      acc.marginRight = v\n    } else if (k === 'my') {\n      acc.marginTop = v\n      acc.marginBottom = v\n    } else if (k === 'px') {\n      acc.paddingLeft = v\n      acc.paddingRight = v\n    } else if (k === 'py') {\n      acc.paddingTop = v\n      acc.paddingBottom = v\n    } else if (k in shorthandPropsMap) {\n      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v\n    } else {\n      acc[k] = v\n    }\n    return acc\n  }, {} as any)\n}\n\nfunction zxToCss(zx: Zx): string {\n  return Object.entries(zx)\n    .map(([k, v]) => {\n      if (!v) return ''\n      k = toKebabCase(k)\n      if (typeof v === 'number') v = v + 'px'\n      if (Array.isArray(v)) {\n        // @ts-ignore\n        v = '[' + v.map((v) => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'\n      }\n      return k + ':' + v + ';'\n    })\n    .join('\\n')\n}\n\n/**\n * A lightweight alternative to styled-components\n * @param function - a functional component to be styled; must accept a className prop\n * @returns a function that accepts a template string of css returns a decorated functional component\n */\nexport function styledBase<C extends FC<any>>(Component: C) {\n  return (...cssProps: TemplateStringProps) => {\n    const className = css(...cssProps)\n    /**\n     * A functional component that accepts Styled Props\n     */\n    const CStyled = forwardRef((props: SCProps, ref) => {\n      let {\n        _active,\n        _css,\n        _dark,\n        _focus,\n        _focusVisible,\n        _focusWithin,\n        _hover,\n        _target,\n        _visited,\n        _zx = {},\n        ...rest\n      } = props\n\n      // Pluck out $ prefixed props\n      Object.entries(props).forEach(([k, v]) => {\n        if (k.startsWith('_')) {\n          // @ts-ignore\n          _zx[k.slice(1)] = v\n          // @ts-ignore\n          delete rest[k]\n        }\n      })\n\n      let cssStr = ''\n\n      if (_active) {\n        cssStr += `\n          &:active {\n          ${zxToCss(_active)}\n          }\n        `\n      }\n      if (_dark) {\n        cssStr += `\n          @media (prefers-color-scheme: dark) {\n          ${zxToCss(_dark)}\n          }\n        `\n      }\n      if (_focus) {\n        cssStr += `\n          &:focus {\n          ${zxToCss(_focus)}\n          }\n        `\n      }\n      if (_focusVisible) {\n        cssStr += `\n          &:focus-visible {\n          ${zxToCss(_focusVisible)}\n          }\n        `\n      }\n      if (_focusWithin) {\n        cssStr += `\n          &:focus-within {\n          ${zxToCss(_focusWithin)}\n          }\n        `\n      }\n      if (_hover) {\n        cssStr += `\n          &:hover {\n          ${zxToCss(_hover)}\n          }\n        `\n      }\n      if (_target) {\n        cssStr += `\n          &:target {\n          ${zxToCss(_target)}\n          }\n        `\n      }\n      if (_visited) {\n        cssStr += `\n          &:visited {\n          ${zxToCss(_visited)}\n          }\n        `\n      }\n\n      const hasMediaQuery = Object.values(_zx).some((v) => Array.isArray(v))\n      // If has media query styles, use css class. Otherwise favor inline styles\n      if (hasMediaQuery || cssStr) {\n        cssStr = zxToCss(_zx) + cssStr\n      } else {\n        _zx = expandShorthandProps(_zx)\n        rest.style = { ...rest.style, ..._zx } as CSSProperties\n      }\n\n      return createElement(Component, {\n        ref,\n        ...rest,\n        className: classJoin(\n          className,\n          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,\n          cssStr ? css(cssStr) : undefined,\n          props.className\n        ),\n      })\n    })\n    CStyled.toString = () => '.' + className\n    return CStyled as unknown as SC<Parameters<C>[0]>\n  }\n}\n","import { FC } from 'react'\nimport { TemplateStringProps } from '@slimr/css'\nimport { styledBase as s } from './core.js'\n\nexport * from '@slimr/css'\nexport * from './core.js'\n\n/** Shorthand type */\ntype unk = unknown\n/** Shorthand type */\ntype TSP = TemplateStringProps\n/** Shorthand type */\ntype HTP = JSX.IntrinsicElements\n\nexport const styled = Object.assign(s, {\n  /** creates a 'a' component with css applied */\n  a: (...p: TSP) => s('a' as unk as FC<HTP['a']>)(...p),\n  /** creates a 'abbr' component with css applied */\n  abbr: (...p: TSP) => s('abbr' as unk as FC<HTP['abbr']>)(...p),\n  /** creates a 'address' component with css applied */\n  address: (...p: TSP) => s('address' as unk as FC<HTP['address']>)(...p),\n  /** creates a 'area' component with css applied */\n  area: (...p: TSP) => s('area' as unk as FC<HTP['area']>)(...p),\n  /** creates a 'article' component with css applied */\n  article: (...p: TSP) => s('article' as unk as FC<HTP['article']>)(...p),\n  /** creates a 'aside' component with css applied */\n  aside: (...p: TSP) => s('aside' as unk as FC<HTP['aside']>)(...p),\n  /** creates a 'audio' component with css applied */\n  audio: (...p: TSP) => s('audio' as unk as FC<HTP['audio']>)(...p),\n  /** creates a 'b' component with css applied */\n  b: (...p: TSP) => s('b' as unk as FC<HTP['b']>)(...p),\n  /** creates a 'big' component with css applied; Deprecated so left out */\n  // big: (...p: TSP) => styled('big' as unk as FC<HTP['big']>)(...p),\n  /** creates a 'blockquote' component with css applied */\n  blockquote: (...p: TSP) => s('blockquote' as unk as FC<HTP['blockquote']>)(...p),\n  /** creates a 'body' component with css applied; omitted bc doesnt seem useful */\n  // body: (...p: TSP) => styled('body' as unk as FC<HTP['body']>)(...p),\n  /** creates a 'br' component with css applied; omitted bc doesnt seem useful */\n  br: (...p: TSP) => s('br' as unk as FC<HTP['br']>)(...p),\n  /** creates a 'button' component with css applied */\n  button: (...p: TSP) => s('button' as unk as FC<HTP['button']>)(...p),\n  /** creates a 'caption' component with css applied */\n  caption: (...p: TSP) => s('caption' as unk as FC<HTP['caption']>)(...p),\n  /** creates a 'cite' component with css applied */\n  cite: (...p: TSP) => s('cite' as unk as FC<HTP['cite']>)(...p),\n  /** creates a 'code' component with css applied */\n  code: (...p: TSP) => s('code' as unk as FC<HTP['code']>)(...p),\n  /** creates a 'col' component with css applied */\n  col: (...p: TSP) => s('col' as unk as FC<HTP['col']>)(...p),\n  /** creates a 'colgroup' component with css applied */\n  colgroup: (...p: TSP) => s('colgroup' as unk as FC<HTP['colgroup']>)(...p),\n  /** creates a 'dd' component with css applied */\n  dd: (...p: TSP) => s('dd' as unk as FC<HTP['dd']>)(...p),\n  /** creates a 'del' component with css applied */\n  del: (...p: TSP) => s('del' as unk as FC<HTP['del']>)(...p),\n  /** creates a 'details' component with css applied */\n  details: (...p: TSP) => s('details' as unk as FC<HTP['details']>)(...p),\n  /** creates a 'dfn' component with css applied */\n  dfn: (...p: TSP) => s('dfn' as unk as FC<HTP['dfn']>)(...p),\n  /** creates a 'dialog' component with css applied */\n  dialog: (...p: TSP) => s('dialog' as unk as FC<HTP['dialog']>)(...p),\n  /** creates a 'div' component with css applied */\n  div: (...p: TSP) => s('div' as unk as FC<HTP['div']>)(...p),\n  /** creates a 'dl' component with css applied */\n  dl: (...p: TSP) => s('dl' as unk as FC<HTP['dl']>)(...p),\n  /** creates a 'dt' component with css applied */\n  dt: (...p: TSP) => s('dt' as unk as FC<HTP['dt']>)(...p),\n  /** creates a 'em' component with css applied */\n  em: (...p: TSP) => s('em' as unk as FC<HTP['em']>)(...p),\n  /** creates a 'embed' component with css applied */\n  embed: (...p: TSP) => s('embed' as unk as FC<HTP['embed']>)(...p),\n  /** creates a 'fieldset' component with css applied */\n  fieldset: (...p: TSP) => s('fieldset' as unk as FC<HTP['fieldset']>)(...p),\n  /** creates a 'figcaption' component with css applied */\n  figcaption: (...p: TSP) => s('figcaption' as unk as FC<HTP['figcaption']>)(...p),\n  /** creates a 'figure' component with css applied */\n  figure: (...p: TSP) => s('figure' as unk as FC<HTP['figure']>)(...p),\n  /** creates a 'footer' component with css applied */\n  footer: (...p: TSP) => s('footer' as unk as FC<HTP['footer']>)(...p),\n  /** creates a 'form' component with css applied */\n  form: (...p: TSP) => s('form' as unk as FC<HTP['form']>)(...p),\n  /** creates a 'h1' component with css applied */\n  h1: (...p: TSP) => s('h1' as unk as FC<HTP['h1']>)(...p),\n  /** creates a 'h2' component with css applied */\n  h2: (...p: TSP) => s('h2' as unk as FC<HTP['h2']>)(...p),\n  /** creates a 'h3' component with css applied */\n  h3: (...p: TSP) => s('h3' as unk as FC<HTP['h3']>)(...p),\n  /** creates a 'h4' component with css applied */\n  h4: (...p: TSP) => s('h4' as unk as FC<HTP['h4']>)(...p),\n  /** creates a 'h5' component with css applied */\n  h5: (...p: TSP) => s('h5' as unk as FC<HTP['h5']>)(...p),\n  /** creates a 'h6' component with css applied */\n  h6: (...p: TSP) => s('h6' as unk as FC<HTP['h6']>)(...p),\n  /** creates a 'header' component with css applied */\n  header: (...p: TSP) => s('header' as unk as FC<HTP['header']>)(...p),\n  /** creates a 'hgroup' component with css applied */\n  hgroup: (...p: TSP) => s('hgroup' as unk as FC<HTP['hgroup']>)(...p),\n  /** creates a 'hr' component with css applied */\n  hr: (...p: TSP) => s('hr' as unk as FC<HTP['hr']>)(...p),\n  /** creates a 'i' component with css applied */\n  i: (...p: TSP) => s('i' as unk as FC<HTP['i']>)(...p),\n  /** creates a 'iframe' component with css applied */\n  iframe: (...p: TSP) => s('iframe' as unk as FC<HTP['iframe']>)(...p),\n  /** creates a 'img' component with css applied */\n  img: (...p: TSP) => s('img' as unk as FC<HTP['img']>)(...p),\n  /** creates a 'input' component with css applied */\n  input: (...p: TSP) => s('input' as unk as FC<HTP['input']>)(...p),\n  /** creates a 'ins' component with css applied */\n  ins: (...p: TSP) => s('ins' as unk as FC<HTP['ins']>)(...p),\n  /** creates a 'kbd' component with css applied */\n  kbd: (...p: TSP) => s('kbd' as unk as FC<HTP['kbd']>)(...p),\n  /** creates a 'label' component with css applied */\n  label: (...p: TSP) => s('label' as unk as FC<HTP['label']>)(...p),\n  /** creates a 'legend' component with css applied */\n  legend: (...p: TSP) => s('legend' as unk as FC<HTP['legend']>)(...p),\n  /** creates a 'li' component with css applied */\n  li: (...p: TSP) => s('li' as unk as FC<HTP['li']>)(...p),\n  /** creates a 'main' component with css applied */\n  main: (...p: TSP) => s('main' as unk as FC<HTP['main']>)(...p),\n  /** creates a 'map' component with css applied */\n  map: (...p: TSP) => s('map' as unk as FC<HTP['map']>)(...p),\n  /** creates a 'mark' component with css applied */\n  mark: (...p: TSP) => s('mark' as unk as FC<HTP['mark']>)(...p),\n  /** creates a 'meter' component with css applied */\n  meter: (...p: TSP) => s('meter' as unk as FC<HTP['meter']>)(...p),\n  /** creates a 'nav' component with css applied */\n  nav: (...p: TSP) => s('nav' as unk as FC<HTP['nav']>)(...p),\n  /** creates a 'object' component with css applied */\n  object: (...p: TSP) => s('object' as unk as FC<HTP['object']>)(...p),\n  /** creates a 'ol' component with css applied */\n  ol: (...p: TSP) => s('ol' as unk as FC<HTP['ol']>)(...p),\n  /** creates a 'optgroup' component with css applied */\n  optgroup: (...p: TSP) => s('optgroup' as unk as FC<HTP['optgroup']>)(...p),\n  /** creates a 'option' component with css applied */\n  option: (...p: TSP) => s('option' as unk as FC<HTP['option']>)(...p),\n  /** creates a 'output' component with css applied */\n  output: (...p: TSP) => s('output' as unk as FC<HTP['output']>)(...p),\n  /** creates a 'p' component with css applied */\n  p: (...p: TSP) => s('p' as unk as FC<HTP['p']>)(...p),\n  /** creates a 'picture' component with css applied */\n  picture: (...p: TSP) => s('picture' as unk as FC<HTP['picture']>)(...p),\n  /** creates a 'pre' component with css applied */\n  pre: (...p: TSP) => s('pre' as unk as FC<HTP['pre']>)(...p),\n  /** creates a 'progress' component with css applied */\n  progress: (...p: TSP) => s('progress' as unk as FC<HTP['progress']>)(...p),\n  /** creates a 'q' component with css applied */\n  q: (...p: TSP) => s('q' as unk as FC<HTP['q']>)(...p),\n  /** creates a 'rp' component with css applied */\n  rp: (...p: TSP) => s('rp' as unk as FC<HTP['rp']>)(...p),\n  /** creates a 'rt' component with css applied */\n  rt: (...p: TSP) => s('rt' as unk as FC<HTP['rt']>)(...p),\n  /** creates a 'ruby' component with css applied */\n  ruby: (...p: TSP) => s('ruby' as unk as FC<HTP['ruby']>)(...p),\n  /** creates a 's' component with css applied */\n  s: (...p: TSP) => s('s' as unk as FC<HTP['s']>)(...p),\n  /** creates a 'samp' component with css applied */\n  samp: (...p: TSP) => s('samp' as unk as FC<HTP['samp']>)(...p),\n  /** creates a 'section' component with css applied */\n  section: (...p: TSP) => s('section' as unk as FC<HTP['section']>)(...p),\n  /** creates a 'select' component with css applied */\n  select: (...p: TSP) => s('select' as unk as FC<HTP['select']>)(...p),\n  /** creates a 'small' component with css applied */\n  small: (...p: TSP) => s('small' as unk as FC<HTP['small']>)(...p),\n  /** creates a 'span' component with css applied */\n  span: (...p: TSP) => s('span' as unk as FC<HTP['span']>)(...p),\n  /** creates a 'strong' component with css applied */\n  strong: (...p: TSP) => s('strong' as unk as FC<HTP['strong']>)(...p),\n  /** creates a 'sub' component with css applied */\n  sub: (...p: TSP) => s('sub' as unk as FC<HTP['sub']>)(...p),\n  /** creates a 'summary' component with css applied */\n  summary: (...p: TSP) => s('summary' as unk as FC<HTP['summary']>)(...p),\n  /** creates a 'sup' component with css applied */\n  sup: (...p: TSP) => s('sup' as unk as FC<HTP['sup']>)(...p),\n  /** creates a 'table' component with css applied */\n  table: (...p: TSP) => s('table' as unk as FC<HTP['table']>)(...p),\n  /** creates a 'tbody' component with css applied */\n  tbody: (...p: TSP) => s('tbody' as unk as FC<HTP['tbody']>)(...p),\n  /** creates a 'td' component with css applied */\n  td: (...p: TSP) => s('td' as unk as FC<HTP['td']>)(...p),\n  /** creates a 'textarea' component with css applied */\n  textarea: (...p: TSP) => s('textarea' as unk as FC<HTP['textarea']>)(...p),\n  /** creates a 'tfoot' component with css applied */\n  tfoot: (...p: TSP) => s('tfoot' as unk as FC<HTP['tfoot']>)(...p),\n  /** creates a 'th' component with css applied */\n  th: (...p: TSP) => s('th' as unk as FC<HTP['th']>)(...p),\n  /** creates a 'thead' component with css applied */\n  thead: (...p: TSP) => s('thead' as unk as FC<HTP['thead']>)(...p),\n  /** creates a 'time' component with css applied */\n  time: (...p: TSP) => s('time' as unk as FC<HTP['time']>)(...p),\n  /** creates a 'tr' component with css applied */\n  tr: (...p: TSP) => s('tr' as unk as FC<HTP['tr']>)(...p),\n  /** creates a 'u' component with css applied */\n  u: (...p: TSP) => s('u' as unk as FC<HTP['u']>)(...p),\n  /** creates a 'ul' component with css applied */\n  ul: (...p: TSP) => s('ul' as unk as FC<HTP['ul']>)(...p),\n  /** creates a 'video' component with css applied */\n  video: (...p: TSP) => s('video' as unk as FC<HTP['video']>)(...p),\n})\n"],"mappings":"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","names":["createElement","forwardRef","classJoin","css","shorthandPropsMap","toKebabCase","str","toCamelCase","x","expandShorthandProps","zx","acc","k","v","zxToCss","styledBase","Component","cssProps","className","CStyled","props","ref","_active","_css","_dark","_focus","_focusVisible","_focusWithin","_hover","_target","_visited","_zx","rest","cssStr","styled","styledBase","p"]}
+{"version":3,"sources":["core.ts","index.ts"],"sourcesContent":["/* eslint-disable prefer-const */\nimport {ShorthandProps, TemplateStringProps, classJoin, css, shorthandPropsMap} from '@slimr/css'\n\nimport {CSSProperties, FC, HTMLAttributes, createElement, forwardRef} from 'react'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype allowableAny = any\n\n/** A type that represents all the css properties + shorthand props */\nexport interface ZxProps extends CSSProperties, ShorthandProps {}\ntype ZxP = ZxProps\n\ntype Zx = {\n  [k in keyof ZxP]:\n    | ZxP[k]\n    | [ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]\n}\n\ntype _Props = {\n  [k in keyof Zx as `_${k}`]?: Zx[k]\n}\n\nexport interface SCProps extends _Props {\n  /** Like zx prop, but applies only on :active */\n  _active?: Zx\n  className?: string\n  /** A string of css or classname to be added to the component */\n  _css?: string\n  /** Like zx prop, but applies only when user prefers dark theme */\n  _dark?: Zx\n  /** Like zx prop, but applies only on :focus */\n  _focus?: Zx\n  /** Like zx prop, but applies only on :focus-visible */\n  _focusVisible?: Zx\n  /** Like zx prop, but applies only on :focus-within */\n  _focusWithin?: Zx\n  /** Like zx prop, but applies only on :hover */\n  _hover?: Zx\n  style?: CSSProperties\n  /** Like zx prop, but applies only on :target */\n  _target?: Zx\n  /** Like zx prop, but applies only on :visited */\n  _visited?: Zx\n  /**\n   * Like style prop, but enhanced with features like chakra\n   *  - Array values are converted to media query breakpoints\n   *  - Numbers are converted to px\n   *  - Shorthand props are supported\n   */\n  _zx?: Zx\n}\n\n/** Styled Component: Like FunctionalComponent but adds SCProps */\nexport type SC<T extends {className?: HTMLAttributes<allowableAny>['className']}> = FC<T & SCProps>\n\n/** Converts a string to kebab case */\nfunction toKebabCase(str: string) {\n  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\n/** Converts a string to camel case */\nfunction toCamelCase(str: string) {\n  return str.replace(/-./g, x => x[1].toUpperCase())\n}\n\n/** Expands the shorthand props of a zx prop into css full */\nfunction expandShorthandProps(zx: Zx) {\n  return Object.entries(zx).reduce((acc, [k, v]) => {\n    if (k === 'mx') {\n      acc.marginLeft = v\n      acc.marginRight = v\n    } else if (k === 'my') {\n      acc.marginTop = v\n      acc.marginBottom = v\n    } else if (k === 'px') {\n      acc.paddingLeft = v\n      acc.paddingRight = v\n    } else if (k === 'py') {\n      acc.paddingTop = v\n      acc.paddingBottom = v\n    } else if (k in shorthandPropsMap) {\n      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v\n    } else {\n      acc[k] = v\n    }\n    return acc\n  }, {} as Record<string, allowableAny>)\n}\n\n/** Converts a zx prop into css string */\nfunction zxToCss(zx: Zx): string {\n  return Object.entries(zx)\n    .map(([k, v]) => {\n      if (!v) return ''\n      k = toKebabCase(k)\n      if (typeof v === 'number') v = v + 'px'\n      if (Array.isArray(v)) {\n        // @ts-expect-error - TS gets confused by the complexity\n        v = '[' + v.map(v => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'\n      }\n      return k + ':' + v + ';'\n    })\n    .join('\\n')\n}\n\n/**\n * A lightweight alternative to styled-components\n * @param function - a functional component to be styled; must accept a className prop\n * @returns a function that accepts a template string of css returns a decorated functional component\n */\nexport function styledBase<C extends FC<allowableAny>>(Component: C) {\n  return (...cssProps: TemplateStringProps) => {\n    const className = css(...cssProps)\n    /**\n     * A functional component that accepts Styled Props\n     */\n    const CStyled = forwardRef(function CStyled(props: SCProps, ref) {\n      let {\n        _active,\n        _css,\n        _dark,\n        _focus,\n        _focusVisible,\n        _focusWithin,\n        _hover,\n        _target,\n        _visited,\n        _zx = {},\n        ...rest\n      } = props\n\n      // Pluck out $ prefixed props\n      Object.entries(props).forEach(([k, v]) => {\n        if (k.startsWith('_')) {\n          // @ts-expect-error - We know the key exists but ts doesn't\n          _zx[k.slice(1)] = v\n          // @ts-expect-error - We know the key exists but ts doesn't\n          delete rest[k]\n        }\n      })\n\n      let cssStr = ''\n\n      if (_active) {\n        cssStr += `\n          &:active {\n          ${zxToCss(_active)}\n          }\n        `\n      }\n      if (_dark) {\n        cssStr += `\n          @media (prefers-color-scheme: dark) {\n          ${zxToCss(_dark)}\n          }\n        `\n      }\n      if (_focus) {\n        cssStr += `\n          &:focus {\n          ${zxToCss(_focus)}\n          }\n        `\n      }\n      if (_focusVisible) {\n        cssStr += `\n          &:focus-visible {\n          ${zxToCss(_focusVisible)}\n          }\n        `\n      }\n      if (_focusWithin) {\n        cssStr += `\n          &:focus-within {\n          ${zxToCss(_focusWithin)}\n          }\n        `\n      }\n      if (_hover) {\n        cssStr += `\n          &:hover {\n          ${zxToCss(_hover)}\n          }\n        `\n      }\n      if (_target) {\n        cssStr += `\n          &:target {\n          ${zxToCss(_target)}\n          }\n        `\n      }\n      if (_visited) {\n        cssStr += `\n          &:visited {\n          ${zxToCss(_visited)}\n          }\n        `\n      }\n\n      const hasMediaQuery = Object.values(_zx).some(v => Array.isArray(v))\n      // If has media query styles, use css class. Otherwise favor inline styles\n      if (hasMediaQuery || cssStr) {\n        cssStr = zxToCss(_zx) + cssStr\n      } else {\n        _zx = expandShorthandProps(_zx)\n        rest.style = {...rest.style, ..._zx} as CSSProperties\n      }\n\n      return createElement(Component, {\n        ref,\n        ...rest,\n        className: classJoin(\n          className,\n          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,\n          cssStr ? css(cssStr) : undefined,\n          props.className\n        ),\n      })\n    })\n    CStyled.toString = () => '.' + className\n    return CStyled as unknown as SC<Parameters<C>[0]>\n  }\n}\n","import {TemplateStringProps} from '@slimr/css'\n\nimport {FC} from 'react'\n\nimport {styledBase as s} from './core.js'\n\nexport * from '@slimr/css'\nexport * from './core.js'\n\n/** Shorthand type */\ntype unk = unknown\n/** Shorthand type */\ntype TSP = TemplateStringProps\n/** Shorthand type */\ntype HTP = JSX.IntrinsicElements\n\nexport const styled = Object.assign(s, {\n  /** creates a 'a' component with css applied */\n  a: (...p: TSP) => s('a' as unk as FC<HTP['a']>)(...p),\n  /** creates a 'abbr' component with css applied */\n  abbr: (...p: TSP) => s('abbr' as unk as FC<HTP['abbr']>)(...p),\n  /** creates a 'address' component with css applied */\n  address: (...p: TSP) => s('address' as unk as FC<HTP['address']>)(...p),\n  /** creates a 'area' component with css applied */\n  area: (...p: TSP) => s('area' as unk as FC<HTP['area']>)(...p),\n  /** creates a 'article' component with css applied */\n  article: (...p: TSP) => s('article' as unk as FC<HTP['article']>)(...p),\n  /** creates a 'aside' component with css applied */\n  aside: (...p: TSP) => s('aside' as unk as FC<HTP['aside']>)(...p),\n  /** creates a 'audio' component with css applied */\n  audio: (...p: TSP) => s('audio' as unk as FC<HTP['audio']>)(...p),\n  /** creates a 'b' component with css applied */\n  b: (...p: TSP) => s('b' as unk as FC<HTP['b']>)(...p),\n  /** creates a 'big' component with css applied; Deprecated so left out */\n  // big: (...p: TSP) => styled('big' as unk as FC<HTP['big']>)(...p),\n  /** creates a 'blockquote' component with css applied */\n  blockquote: (...p: TSP) => s('blockquote' as unk as FC<HTP['blockquote']>)(...p),\n  /** creates a 'body' component with css applied; omitted bc doesnt seem useful */\n  // body: (...p: TSP) => styled('body' as unk as FC<HTP['body']>)(...p),\n  /** creates a 'br' component with css applied; omitted bc doesnt seem useful */\n  br: (...p: TSP) => s('br' as unk as FC<HTP['br']>)(...p),\n  /** creates a 'button' component with css applied */\n  button: (...p: TSP) => s('button' as unk as FC<HTP['button']>)(...p),\n  /** creates a 'caption' component with css applied */\n  caption: (...p: TSP) => s('caption' as unk as FC<HTP['caption']>)(...p),\n  /** creates a 'cite' component with css applied */\n  cite: (...p: TSP) => s('cite' as unk as FC<HTP['cite']>)(...p),\n  /** creates a 'code' component with css applied */\n  code: (...p: TSP) => s('code' as unk as FC<HTP['code']>)(...p),\n  /** creates a 'col' component with css applied */\n  col: (...p: TSP) => s('col' as unk as FC<HTP['col']>)(...p),\n  /** creates a 'colgroup' component with css applied */\n  colgroup: (...p: TSP) => s('colgroup' as unk as FC<HTP['colgroup']>)(...p),\n  /** creates a 'dd' component with css applied */\n  dd: (...p: TSP) => s('dd' as unk as FC<HTP['dd']>)(...p),\n  /** creates a 'del' component with css applied */\n  del: (...p: TSP) => s('del' as unk as FC<HTP['del']>)(...p),\n  /** creates a 'details' component with css applied */\n  details: (...p: TSP) => s('details' as unk as FC<HTP['details']>)(...p),\n  /** creates a 'dfn' component with css applied */\n  dfn: (...p: TSP) => s('dfn' as unk as FC<HTP['dfn']>)(...p),\n  /** creates a 'dialog' component with css applied */\n  dialog: (...p: TSP) => s('dialog' as unk as FC<HTP['dialog']>)(...p),\n  /** creates a 'div' component with css applied */\n  div: (...p: TSP) => s('div' as unk as FC<HTP['div']>)(...p),\n  /** creates a 'dl' component with css applied */\n  dl: (...p: TSP) => s('dl' as unk as FC<HTP['dl']>)(...p),\n  /** creates a 'dt' component with css applied */\n  dt: (...p: TSP) => s('dt' as unk as FC<HTP['dt']>)(...p),\n  /** creates a 'em' component with css applied */\n  em: (...p: TSP) => s('em' as unk as FC<HTP['em']>)(...p),\n  /** creates a 'embed' component with css applied */\n  embed: (...p: TSP) => s('embed' as unk as FC<HTP['embed']>)(...p),\n  /** creates a 'fieldset' component with css applied */\n  fieldset: (...p: TSP) => s('fieldset' as unk as FC<HTP['fieldset']>)(...p),\n  /** creates a 'figcaption' component with css applied */\n  figcaption: (...p: TSP) => s('figcaption' as unk as FC<HTP['figcaption']>)(...p),\n  /** creates a 'figure' component with css applied */\n  figure: (...p: TSP) => s('figure' as unk as FC<HTP['figure']>)(...p),\n  /** creates a 'footer' component with css applied */\n  footer: (...p: TSP) => s('footer' as unk as FC<HTP['footer']>)(...p),\n  /** creates a 'form' component with css applied */\n  form: (...p: TSP) => s('form' as unk as FC<HTP['form']>)(...p),\n  /** creates a 'h1' component with css applied */\n  h1: (...p: TSP) => s('h1' as unk as FC<HTP['h1']>)(...p),\n  /** creates a 'h2' component with css applied */\n  h2: (...p: TSP) => s('h2' as unk as FC<HTP['h2']>)(...p),\n  /** creates a 'h3' component with css applied */\n  h3: (...p: TSP) => s('h3' as unk as FC<HTP['h3']>)(...p),\n  /** creates a 'h4' component with css applied */\n  h4: (...p: TSP) => s('h4' as unk as FC<HTP['h4']>)(...p),\n  /** creates a 'h5' component with css applied */\n  h5: (...p: TSP) => s('h5' as unk as FC<HTP['h5']>)(...p),\n  /** creates a 'h6' component with css applied */\n  h6: (...p: TSP) => s('h6' as unk as FC<HTP['h6']>)(...p),\n  /** creates a 'header' component with css applied */\n  header: (...p: TSP) => s('header' as unk as FC<HTP['header']>)(...p),\n  /** creates a 'hgroup' component with css applied */\n  hgroup: (...p: TSP) => s('hgroup' as unk as FC<HTP['hgroup']>)(...p),\n  /** creates a 'hr' component with css applied */\n  hr: (...p: TSP) => s('hr' as unk as FC<HTP['hr']>)(...p),\n  /** creates a 'i' component with css applied */\n  i: (...p: TSP) => s('i' as unk as FC<HTP['i']>)(...p),\n  /** creates a 'iframe' component with css applied */\n  iframe: (...p: TSP) => s('iframe' as unk as FC<HTP['iframe']>)(...p),\n  /** creates a 'img' component with css applied */\n  img: (...p: TSP) => s('img' as unk as FC<HTP['img']>)(...p),\n  /** creates a 'input' component with css applied */\n  input: (...p: TSP) => s('input' as unk as FC<HTP['input']>)(...p),\n  /** creates a 'ins' component with css applied */\n  ins: (...p: TSP) => s('ins' as unk as FC<HTP['ins']>)(...p),\n  /** creates a 'kbd' component with css applied */\n  kbd: (...p: TSP) => s('kbd' as unk as FC<HTP['kbd']>)(...p),\n  /** creates a 'label' component with css applied */\n  label: (...p: TSP) => s('label' as unk as FC<HTP['label']>)(...p),\n  /** creates a 'legend' component with css applied */\n  legend: (...p: TSP) => s('legend' as unk as FC<HTP['legend']>)(...p),\n  /** creates a 'li' component with css applied */\n  li: (...p: TSP) => s('li' as unk as FC<HTP['li']>)(...p),\n  /** creates a 'main' component with css applied */\n  main: (...p: TSP) => s('main' as unk as FC<HTP['main']>)(...p),\n  /** creates a 'map' component with css applied */\n  map: (...p: TSP) => s('map' as unk as FC<HTP['map']>)(...p),\n  /** creates a 'mark' component with css applied */\n  mark: (...p: TSP) => s('mark' as unk as FC<HTP['mark']>)(...p),\n  /** creates a 'meter' component with css applied */\n  meter: (...p: TSP) => s('meter' as unk as FC<HTP['meter']>)(...p),\n  /** creates a 'nav' component with css applied */\n  nav: (...p: TSP) => s('nav' as unk as FC<HTP['nav']>)(...p),\n  /** creates a 'object' component with css applied */\n  object: (...p: TSP) => s('object' as unk as FC<HTP['object']>)(...p),\n  /** creates a 'ol' component with css applied */\n  ol: (...p: TSP) => s('ol' as unk as FC<HTP['ol']>)(...p),\n  /** creates a 'optgroup' component with css applied */\n  optgroup: (...p: TSP) => s('optgroup' as unk as FC<HTP['optgroup']>)(...p),\n  /** creates a 'option' component with css applied */\n  option: (...p: TSP) => s('option' as unk as FC<HTP['option']>)(...p),\n  /** creates a 'output' component with css applied */\n  output: (...p: TSP) => s('output' as unk as FC<HTP['output']>)(...p),\n  /** creates a 'p' component with css applied */\n  p: (...p: TSP) => s('p' as unk as FC<HTP['p']>)(...p),\n  /** creates a 'picture' component with css applied */\n  picture: (...p: TSP) => s('picture' as unk as FC<HTP['picture']>)(...p),\n  /** creates a 'pre' component with css applied */\n  pre: (...p: TSP) => s('pre' as unk as FC<HTP['pre']>)(...p),\n  /** creates a 'progress' component with css applied */\n  progress: (...p: TSP) => s('progress' as unk as FC<HTP['progress']>)(...p),\n  /** creates a 'q' component with css applied */\n  q: (...p: TSP) => s('q' as unk as FC<HTP['q']>)(...p),\n  /** creates a 'rp' component with css applied */\n  rp: (...p: TSP) => s('rp' as unk as FC<HTP['rp']>)(...p),\n  /** creates a 'rt' component with css applied */\n  rt: (...p: TSP) => s('rt' as unk as FC<HTP['rt']>)(...p),\n  /** creates a 'ruby' component with css applied */\n  ruby: (...p: TSP) => s('ruby' as unk as FC<HTP['ruby']>)(...p),\n  /** creates a 's' component with css applied */\n  s: (...p: TSP) => s('s' as unk as FC<HTP['s']>)(...p),\n  /** creates a 'samp' component with css applied */\n  samp: (...p: TSP) => s('samp' as unk as FC<HTP['samp']>)(...p),\n  /** creates a 'section' component with css applied */\n  section: (...p: TSP) => s('section' as unk as FC<HTP['section']>)(...p),\n  /** creates a 'select' component with css applied */\n  select: (...p: TSP) => s('select' as unk as FC<HTP['select']>)(...p),\n  /** creates a 'small' component with css applied */\n  small: (...p: TSP) => s('small' as unk as FC<HTP['small']>)(...p),\n  /** creates a 'span' component with css applied */\n  span: (...p: TSP) => s('span' as unk as FC<HTP['span']>)(...p),\n  /** creates a 'strong' component with css applied */\n  strong: (...p: TSP) => s('strong' as unk as FC<HTP['strong']>)(...p),\n  /** creates a 'sub' component with css applied */\n  sub: (...p: TSP) => s('sub' as unk as FC<HTP['sub']>)(...p),\n  /** creates a 'summary' component with css applied */\n  summary: (...p: TSP) => s('summary' as unk as FC<HTP['summary']>)(...p),\n  /** creates a 'sup' component with css applied */\n  sup: (...p: TSP) => s('sup' as unk as FC<HTP['sup']>)(...p),\n  /** creates a 'table' component with css applied */\n  table: (...p: TSP) => s('table' as unk as FC<HTP['table']>)(...p),\n  /** creates a 'tbody' component with css applied */\n  tbody: (...p: TSP) => s('tbody' as unk as FC<HTP['tbody']>)(...p),\n  /** creates a 'td' component with css applied */\n  td: (...p: TSP) => s('td' as unk as FC<HTP['td']>)(...p),\n  /** creates a 'textarea' component with css applied */\n  textarea: (...p: TSP) => s('textarea' as unk as FC<HTP['textarea']>)(...p),\n  /** creates a 'tfoot' component with css applied */\n  tfoot: (...p: TSP) => s('tfoot' as unk as FC<HTP['tfoot']>)(...p),\n  /** creates a 'th' component with css applied */\n  th: (...p: TSP) => s('th' as unk as FC<HTP['th']>)(...p),\n  /** creates a 'thead' component with css applied */\n  thead: (...p: TSP) => s('thead' as unk as FC<HTP['thead']>)(...p),\n  /** creates a 'time' component with css applied */\n  time: (...p: TSP) => s('time' as unk as FC<HTP['time']>)(...p),\n  /** creates a 'tr' component with css applied */\n  tr: (...p: TSP) => s('tr' as unk as FC<HTP['tr']>)(...p),\n  /** creates a 'u' component with css applied */\n  u: (...p: TSP) => s('u' as unk as FC<HTP['u']>)(...p),\n  /** creates a 'ul' component with css applied */\n  ul: (...p: TSP) => s('ul' as unk as FC<HTP['ul']>)(...p),\n  /** creates a 'video' component with css applied */\n  video: (...p: TSP) => s('video' as unk as FC<HTP['video']>)(...p),\n})\n"],"mappings":"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","names":["classJoin","css","shorthandPropsMap","createElement","forwardRef","toKebabCase","str","toCamelCase","x","expandShorthandProps","zx","acc","k","v","zxToCss","styledBase","Component","cssProps","className","CStyled","props","ref","_active","_css","_dark","_focus","_focusVisible","_focusWithin","_hover","_target","_visited","_zx","rest","cssStr","styled","styledBase","p"]}

package/src/index.ts

@@ -1,6 +1,8 @@
-import { FC } from 'react'
-import { TemplateStringProps } from '@slimr/css'
-import { styledBase as s } from './core.js'
+import {TemplateStringProps} from '@slimr/css'
+
+import {FC} from 'react'
+
+import {styledBase as s} from './core.js'
 
 export * from '@slimr/css'
 export * from './core.js'