@slimr/styled 2.0.2 → 2.0.4

package/cjs/index.ts

@@ -0,0 +1,200 @@
+import {TemplateStringProps} from '@slimr/css'
+
+import {FC} from 'react'
+
+import {styledBase as s} from './core.js'
+
+export * from '@slimr/css'
+export * from './core.js'
+
+/** Shorthand type */
+type unk = unknown
+/** Shorthand type */
+type TSP = TemplateStringProps
+/** Shorthand type */
+type HTP = JSX.IntrinsicElements
+
+export const styled = Object.assign(s, {
+  /** creates a 'a' component with css applied */
+  a: (...p: TSP) => s('a' as unk as FC<HTP['a']>)(...p),
+  /** creates a 'abbr' component with css applied */
+  abbr: (...p: TSP) => s('abbr' as unk as FC<HTP['abbr']>)(...p),
+  /** creates a 'address' component with css applied */
+  address: (...p: TSP) => s('address' as unk as FC<HTP['address']>)(...p),
+  /** creates a 'area' component with css applied */
+  area: (...p: TSP) => s('area' as unk as FC<HTP['area']>)(...p),
+  /** creates a 'article' component with css applied */
+  article: (...p: TSP) => s('article' as unk as FC<HTP['article']>)(...p),
+  /** creates a 'aside' component with css applied */
+  aside: (...p: TSP) => s('aside' as unk as FC<HTP['aside']>)(...p),
+  /** creates a 'audio' component with css applied */
+  audio: (...p: TSP) => s('audio' as unk as FC<HTP['audio']>)(...p),
+  /** creates a 'b' component with css applied */
+  b: (...p: TSP) => s('b' as unk as FC<HTP['b']>)(...p),
+  /** creates a 'big' component with css applied; Deprecated so left out */
+  // big: (...p: TSP) => styled('big' as unk as FC<HTP['big']>)(...p),
+  /** creates a 'blockquote' component with css applied */
+  blockquote: (...p: TSP) => s('blockquote' as unk as FC<HTP['blockquote']>)(...p),
+  /** creates a 'body' component with css applied; omitted bc doesnt seem useful */
+  // body: (...p: TSP) => styled('body' as unk as FC<HTP['body']>)(...p),
+  /** creates a 'br' component with css applied; omitted bc doesnt seem useful */
+  br: (...p: TSP) => s('br' as unk as FC<HTP['br']>)(...p),
+  /** creates a 'button' component with css applied */
+  button: (...p: TSP) => s('button' as unk as FC<HTP['button']>)(...p),
+  /** creates a 'caption' component with css applied */
+  caption: (...p: TSP) => s('caption' as unk as FC<HTP['caption']>)(...p),
+  /** creates a 'cite' component with css applied */
+  cite: (...p: TSP) => s('cite' as unk as FC<HTP['cite']>)(...p),
+  /** creates a 'code' component with css applied */
+  code: (...p: TSP) => s('code' as unk as FC<HTP['code']>)(...p),
+  /** creates a 'col' component with css applied */
+  col: (...p: TSP) => s('col' as unk as FC<HTP['col']>)(...p),
+  /** creates a 'colgroup' component with css applied */
+  colgroup: (...p: TSP) => s('colgroup' as unk as FC<HTP['colgroup']>)(...p),
+  /** creates a 'dd' component with css applied */
+  dd: (...p: TSP) => s('dd' as unk as FC<HTP['dd']>)(...p),
+  /** creates a 'del' component with css applied */
+  del: (...p: TSP) => s('del' as unk as FC<HTP['del']>)(...p),
+  /** creates a 'details' component with css applied */
+  details: (...p: TSP) => s('details' as unk as FC<HTP['details']>)(...p),
+  /** creates a 'dfn' component with css applied */
+  dfn: (...p: TSP) => s('dfn' as unk as FC<HTP['dfn']>)(...p),
+  /** creates a 'dialog' component with css applied */
+  dialog: (...p: TSP) => s('dialog' as unk as FC<HTP['dialog']>)(...p),
+  /** creates a 'div' component with css applied */
+  div: (...p: TSP) => s('div' as unk as FC<HTP['div']>)(...p),
+  /** creates a 'dl' component with css applied */
+  dl: (...p: TSP) => s('dl' as unk as FC<HTP['dl']>)(...p),
+  /** creates a 'dt' component with css applied */
+  dt: (...p: TSP) => s('dt' as unk as FC<HTP['dt']>)(...p),
+  /** creates a 'em' component with css applied */
+  em: (...p: TSP) => s('em' as unk as FC<HTP['em']>)(...p),
+  /** creates a 'embed' component with css applied */
+  embed: (...p: TSP) => s('embed' as unk as FC<HTP['embed']>)(...p),
+  /** creates a 'fieldset' component with css applied */
+  fieldset: (...p: TSP) => s('fieldset' as unk as FC<HTP['fieldset']>)(...p),
+  /** creates a 'figcaption' component with css applied */
+  figcaption: (...p: TSP) => s('figcaption' as unk as FC<HTP['figcaption']>)(...p),
+  /** creates a 'figure' component with css applied */
+  figure: (...p: TSP) => s('figure' as unk as FC<HTP['figure']>)(...p),
+  /** creates a 'footer' component with css applied */
+  footer: (...p: TSP) => s('footer' as unk as FC<HTP['footer']>)(...p),
+  /** creates a 'form' component with css applied */
+  form: (...p: TSP) => s('form' as unk as FC<HTP['form']>)(...p),
+  /** creates a 'h1' component with css applied */
+  h1: (...p: TSP) => s('h1' as unk as FC<HTP['h1']>)(...p),
+  /** creates a 'h2' component with css applied */
+  h2: (...p: TSP) => s('h2' as unk as FC<HTP['h2']>)(...p),
+  /** creates a 'h3' component with css applied */
+  h3: (...p: TSP) => s('h3' as unk as FC<HTP['h3']>)(...p),
+  /** creates a 'h4' component with css applied */
+  h4: (...p: TSP) => s('h4' as unk as FC<HTP['h4']>)(...p),
+  /** creates a 'h5' component with css applied */
+  h5: (...p: TSP) => s('h5' as unk as FC<HTP['h5']>)(...p),
+  /** creates a 'h6' component with css applied */
+  h6: (...p: TSP) => s('h6' as unk as FC<HTP['h6']>)(...p),
+  /** creates a 'header' component with css applied */
+  header: (...p: TSP) => s('header' as unk as FC<HTP['header']>)(...p),
+  /** creates a 'hgroup' component with css applied */
+  hgroup: (...p: TSP) => s('hgroup' as unk as FC<HTP['hgroup']>)(...p),
+  /** creates a 'hr' component with css applied */
+  hr: (...p: TSP) => s('hr' as unk as FC<HTP['hr']>)(...p),
+  /** creates a 'i' component with css applied */
+  i: (...p: TSP) => s('i' as unk as FC<HTP['i']>)(...p),
+  /** creates a 'iframe' component with css applied */
+  iframe: (...p: TSP) => s('iframe' as unk as FC<HTP['iframe']>)(...p),
+  /** creates a 'img' component with css applied */
+  img: (...p: TSP) => s('img' as unk as FC<HTP['img']>)(...p),
+  /** creates a 'input' component with css applied */
+  input: (...p: TSP) => s('input' as unk as FC<HTP['input']>)(...p),
+  /** creates a 'ins' component with css applied */
+  ins: (...p: TSP) => s('ins' as unk as FC<HTP['ins']>)(...p),
+  /** creates a 'kbd' component with css applied */
+  kbd: (...p: TSP) => s('kbd' as unk as FC<HTP['kbd']>)(...p),
+  /** creates a 'label' component with css applied */
+  label: (...p: TSP) => s('label' as unk as FC<HTP['label']>)(...p),
+  /** creates a 'legend' component with css applied */
+  legend: (...p: TSP) => s('legend' as unk as FC<HTP['legend']>)(...p),
+  /** creates a 'li' component with css applied */
+  li: (...p: TSP) => s('li' as unk as FC<HTP['li']>)(...p),
+  /** creates a 'main' component with css applied */
+  main: (...p: TSP) => s('main' as unk as FC<HTP['main']>)(...p),
+  /** creates a 'map' component with css applied */
+  map: (...p: TSP) => s('map' as unk as FC<HTP['map']>)(...p),
+  /** creates a 'mark' component with css applied */
+  mark: (...p: TSP) => s('mark' as unk as FC<HTP['mark']>)(...p),
+  /** creates a 'meter' component with css applied */
+  meter: (...p: TSP) => s('meter' as unk as FC<HTP['meter']>)(...p),
+  /** creates a 'nav' component with css applied */
+  nav: (...p: TSP) => s('nav' as unk as FC<HTP['nav']>)(...p),
+  /** creates a 'object' component with css applied */
+  object: (...p: TSP) => s('object' as unk as FC<HTP['object']>)(...p),
+  /** creates a 'ol' component with css applied */
+  ol: (...p: TSP) => s('ol' as unk as FC<HTP['ol']>)(...p),
+  /** creates a 'optgroup' component with css applied */
+  optgroup: (...p: TSP) => s('optgroup' as unk as FC<HTP['optgroup']>)(...p),
+  /** creates a 'option' component with css applied */
+  option: (...p: TSP) => s('option' as unk as FC<HTP['option']>)(...p),
+  /** creates a 'output' component with css applied */
+  output: (...p: TSP) => s('output' as unk as FC<HTP['output']>)(...p),
+  /** creates a 'p' component with css applied */
+  p: (...p: TSP) => s('p' as unk as FC<HTP['p']>)(...p),
+  /** creates a 'picture' component with css applied */
+  picture: (...p: TSP) => s('picture' as unk as FC<HTP['picture']>)(...p),
+  /** creates a 'pre' component with css applied */
+  pre: (...p: TSP) => s('pre' as unk as FC<HTP['pre']>)(...p),
+  /** creates a 'progress' component with css applied */
+  progress: (...p: TSP) => s('progress' as unk as FC<HTP['progress']>)(...p),
+  /** creates a 'q' component with css applied */
+  q: (...p: TSP) => s('q' as unk as FC<HTP['q']>)(...p),
+  /** creates a 'rp' component with css applied */
+  rp: (...p: TSP) => s('rp' as unk as FC<HTP['rp']>)(...p),
+  /** creates a 'rt' component with css applied */
+  rt: (...p: TSP) => s('rt' as unk as FC<HTP['rt']>)(...p),
+  /** creates a 'ruby' component with css applied */
+  ruby: (...p: TSP) => s('ruby' as unk as FC<HTP['ruby']>)(...p),
+  /** creates a 's' component with css applied */
+  s: (...p: TSP) => s('s' as unk as FC<HTP['s']>)(...p),
+  /** creates a 'samp' component with css applied */
+  samp: (...p: TSP) => s('samp' as unk as FC<HTP['samp']>)(...p),
+  /** creates a 'section' component with css applied */
+  section: (...p: TSP) => s('section' as unk as FC<HTP['section']>)(...p),
+  /** creates a 'select' component with css applied */
+  select: (...p: TSP) => s('select' as unk as FC<HTP['select']>)(...p),
+  /** creates a 'small' component with css applied */
+  small: (...p: TSP) => s('small' as unk as FC<HTP['small']>)(...p),
+  /** creates a 'span' component with css applied */
+  span: (...p: TSP) => s('span' as unk as FC<HTP['span']>)(...p),
+  /** creates a 'strong' component with css applied */
+  strong: (...p: TSP) => s('strong' as unk as FC<HTP['strong']>)(...p),
+  /** creates a 'sub' component with css applied */
+  sub: (...p: TSP) => s('sub' as unk as FC<HTP['sub']>)(...p),
+  /** creates a 'summary' component with css applied */
+  summary: (...p: TSP) => s('summary' as unk as FC<HTP['summary']>)(...p),
+  /** creates a 'sup' component with css applied */
+  sup: (...p: TSP) => s('sup' as unk as FC<HTP['sup']>)(...p),
+  /** creates a 'table' component with css applied */
+  table: (...p: TSP) => s('table' as unk as FC<HTP['table']>)(...p),
+  /** creates a 'tbody' component with css applied */
+  tbody: (...p: TSP) => s('tbody' as unk as FC<HTP['tbody']>)(...p),
+  /** creates a 'td' component with css applied */
+  td: (...p: TSP) => s('td' as unk as FC<HTP['td']>)(...p),
+  /** creates a 'textarea' component with css applied */
+  textarea: (...p: TSP) => s('textarea' as unk as FC<HTP['textarea']>)(...p),
+  /** creates a 'tfoot' component with css applied */
+  tfoot: (...p: TSP) => s('tfoot' as unk as FC<HTP['tfoot']>)(...p),
+  /** creates a 'th' component with css applied */
+  th: (...p: TSP) => s('th' as unk as FC<HTP['th']>)(...p),
+  /** creates a 'thead' component with css applied */
+  thead: (...p: TSP) => s('thead' as unk as FC<HTP['thead']>)(...p),
+  /** creates a 'time' component with css applied */
+  time: (...p: TSP) => s('time' as unk as FC<HTP['time']>)(...p),
+  /** creates a 'tr' component with css applied */
+  tr: (...p: TSP) => s('tr' as unk as FC<HTP['tr']>)(...p),
+  /** creates a 'u' component with css applied */
+  u: (...p: TSP) => s('u' as unk as FC<HTP['u']>)(...p),
+  /** creates a 'ul' component with css applied */
+  ul: (...p: TSP) => s('ul' as unk as FC<HTP['ul']>)(...p),
+  /** creates a 'video' component with css applied */
+  video: (...p: TSP) => s('video' as unk as FC<HTP['video']>)(...p),
+})

package/esm/core.d.ts

@@ -0,0 +1,53 @@
+import { ShorthandProps } from '@slimr/css';
+import { CSSProperties, FC, HTMLAttributes } from 'react';
+type allowableAny = any;
+/** A type that represents all the css properties + shorthand props */
+export interface ZxProps extends CSSProperties, ShorthandProps {
+}
+type ZxP = ZxProps;
+type Zx = {
+    [k in keyof ZxP]: ZxP[k] | [ZxP[k] | null, ZxP[k]] | [ZxP[k] | null, ZxP[k] | null, ZxP[k]] | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]] | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]] | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]] | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]];
+};
+type _Props = {
+    [k in keyof Zx as `_${k}`]?: Zx[k];
+};
+export interface SCProps extends _Props {
+    /** Like zx prop, but applies only on :active */
+    _active?: Zx;
+    className?: string;
+    /** A string of css or classname to be added to the component */
+    _css?: string;
+    /** Like zx prop, but applies only when user prefers dark theme */
+    _dark?: Zx;
+    /** Like zx prop, but applies only on :focus */
+    _focus?: Zx;
+    /** Like zx prop, but applies only on :focus-visible */
+    _focusVisible?: Zx;
+    /** Like zx prop, but applies only on :focus-within */
+    _focusWithin?: Zx;
+    /** Like zx prop, but applies only on :hover */
+    _hover?: Zx;
+    style?: CSSProperties;
+    /** Like zx prop, but applies only on :target */
+    _target?: Zx;
+    /** Like zx prop, but applies only on :visited */
+    _visited?: Zx;
+    /**
+     * Like style prop, but enhanced with features like chakra
+     *  - Array values are converted to media query breakpoints
+     *  - Numbers are converted to px
+     *  - Shorthand props are supported
+     */
+    _zx?: Zx;
+}
+/** Styled Component: Like FunctionalComponent but adds SCProps */
+export type SC<T extends {
+    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
+ */
+export declare function styledBase<C extends FC<allowableAny>>(Component: C): (strings: string | TemplateStringsArray, ...placeHolders: string[]) => SC<Parameters<C>[0]>;
+export {};

package/esm/core.js

@@ -0,0 +1,155 @@
+/* eslint-disable prefer-const */
+import { classJoin, css, shorthandPropsMap } from '@slimr/css';
+import { createElement, forwardRef } from 'react';
+/** Converts a string to kebab case */
+function toKebabCase(str) {
+    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+/** Converts a string to camel case */
+function toCamelCase(str) {
+    return str.replace(/-./g, x => x[1].toUpperCase());
+}
+/** Expands the shorthand props of a zx prop into css full */
+function expandShorthandProps(zx) {
+    return Object.entries(zx).reduce((acc, [k, v]) => {
+        if (k === 'mx') {
+            acc.marginLeft = v;
+            acc.marginRight = v;
+        }
+        else if (k === 'my') {
+            acc.marginTop = v;
+            acc.marginBottom = v;
+        }
+        else if (k === 'px') {
+            acc.paddingLeft = v;
+            acc.paddingRight = v;
+        }
+        else if (k === 'py') {
+            acc.paddingTop = v;
+            acc.paddingBottom = v;
+        }
+        else if (k in shorthandPropsMap) {
+            acc[toCamelCase(shorthandPropsMap[k])] = v;
+        }
+        else {
+            acc[k] = v;
+        }
+        return acc;
+    }, {});
+}
+/** Converts a zx prop into css string */
+function zxToCss(zx) {
+    return Object.entries(zx)
+        .map(([k, v]) => {
+        if (!v)
+            return '';
+        k = toKebabCase(k);
+        if (typeof v === 'number')
+            v = v + 'px';
+        if (Array.isArray(v)) {
+            // @ts-expect-error - TS gets confused by the complexity
+            v = '[' + v.map(v => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']';
+        }
+        return k + ':' + v + ';';
+    })
+        .join('\n');
+}
+/**
+ * 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
+ */
+export function styledBase(Component) {
+    return (...cssProps) => {
+        const className = css(...cssProps);
+        /**
+         * A functional component that accepts Styled Props
+         */
+        const CStyled = forwardRef(function CStyled(props, ref) {
+            let { _active, _css, _dark, _focus, _focusVisible, _focusWithin, _hover, _target, _visited, _zx = {}, ...rest } = props;
+            // Pluck out $ prefixed props
+            Object.entries(props).forEach(([k, v]) => {
+                if (k.startsWith('_')) {
+                    // @ts-expect-error - We know the key exists but ts doesn't
+                    _zx[k.slice(1)] = v;
+                    // @ts-expect-error - We know the key exists but ts doesn't
+                    delete rest[k];
+                }
+            });
+            let cssStr = '';
+            if (_active) {
+                cssStr += `
+          &:active {
+          ${zxToCss(_active)}
+          }
+        `;
+            }
+            if (_dark) {
+                cssStr += `
+          @media (prefers-color-scheme: dark) {
+          ${zxToCss(_dark)}
+          }
+        `;
+            }
+            if (_focus) {
+                cssStr += `
+          &:focus {
+          ${zxToCss(_focus)}
+          }
+        `;
+            }
+            if (_focusVisible) {
+                cssStr += `
+          &:focus-visible {
+          ${zxToCss(_focusVisible)}
+          }
+        `;
+            }
+            if (_focusWithin) {
+                cssStr += `
+          &:focus-within {
+          ${zxToCss(_focusWithin)}
+          }
+        `;
+            }
+            if (_hover) {
+                cssStr += `
+          &:hover {
+          ${zxToCss(_hover)}
+          }
+        `;
+            }
+            if (_target) {
+                cssStr += `
+          &:target {
+          ${zxToCss(_target)}
+          }
+        `;
+            }
+            if (_visited) {
+                cssStr += `
+          &:visited {
+          ${zxToCss(_visited)}
+          }
+        `;
+            }
+            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 };
+            }
+            return createElement(Component, {
+                ref,
+                ...rest,
+                className: classJoin(className, _css ? (_css.includes(':') ? css(_css) : _css) : undefined, cssStr ? css(cssStr) : undefined, props.className),
+            });
+        });
+        CStyled.toString = () => '.' + className;
+        return CStyled;
+    };
+}
+//# sourceMappingURL=core.js.map

package/esm/core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.js","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"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"}

package/esm/core.ts

@@ -0,0 +1,229 @@
+/* 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 {}
+type ZxP = ZxProps
+
+type Zx = {
+  [k in keyof ZxP]:
+    | ZxP[k]
+    | [ZxP[k] | null, ZxP[k]]
+    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+}
+
+type _Props = {
+  [k in keyof Zx as `_${k}`]?: Zx[k]
+}
+
+export interface SCProps extends _Props {
+  /** Like zx prop, but applies only on :active */
+  _active?: Zx
+  className?: string
+  /** A string of css or classname to be added to the component */
+  _css?: string
+  /** Like zx prop, but applies only when user prefers dark theme */
+  _dark?: Zx
+  /** Like zx prop, but applies only on :focus */
+  _focus?: Zx
+  /** Like zx prop, but applies only on :focus-visible */
+  _focusVisible?: Zx
+  /** Like zx prop, but applies only on :focus-within */
+  _focusWithin?: Zx
+  /** Like zx prop, but applies only on :hover */
+  _hover?: Zx
+  style?: CSSProperties
+  /** Like zx prop, but applies only on :target */
+  _target?: Zx
+  /** Like zx prop, but applies only on :visited */
+  _visited?: Zx
+  /**
+   * Like style prop, but enhanced with features like chakra
+   *  - Array values are converted to media query breakpoints
+   *  - Numbers are converted to px
+   *  - Shorthand props are supported
+   */
+  _zx?: Zx
+}
+
+/** Styled Component: Like FunctionalComponent but adds 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())
+}
+
+/** 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') {
+      acc.marginLeft = v
+      acc.marginRight = v
+    } else if (k === 'my') {
+      acc.marginTop = v
+      acc.marginBottom = v
+    } else if (k === 'px') {
+      acc.paddingLeft = v
+      acc.paddingRight = v
+    } else if (k === 'py') {
+      acc.paddingTop = v
+      acc.paddingBottom = v
+    } else if (k in shorthandPropsMap) {
+      acc[toCamelCase(shorthandPropsMap[k as keyof typeof shorthandPropsMap])] = v
+    } else {
+      acc[k] = v
+    }
+    return acc
+  }, {} as Record<string, allowableAny>)
+}
+
+/** Converts a zx prop into css string */
+function zxToCss(zx: Zx): string {
+  return Object.entries(zx)
+    .map(([k, v]) => {
+      if (!v) return ''
+      k = toKebabCase(k)
+      if (typeof v === 'number') v = v + 'px'
+      if (Array.isArray(v)) {
+        // @ts-expect-error - TS gets confused by the complexity
+        v = '[' + v.map(v => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'
+      }
+      return k + ':' + v + ';'
+    })
+    .join('\n')
+}
+
+/**
+ * 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
+ */
+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(function CStyled(props: SCProps, ref) {
+      let {
+        _active,
+        _css,
+        _dark,
+        _focus,
+        _focusVisible,
+        _focusWithin,
+        _hover,
+        _target,
+        _visited,
+        _zx = {},
+        ...rest
+      } = props
+
+      // Pluck out $ prefixed props
+      Object.entries(props).forEach(([k, v]) => {
+        if (k.startsWith('_')) {
+          // @ts-expect-error - We know the key exists but ts doesn't
+          _zx[k.slice(1)] = v
+          // @ts-expect-error - We know the key exists but ts doesn't
+          delete rest[k]
+        }
+      })
+
+      let cssStr = ''
+
+      if (_active) {
+        cssStr += `
+          &:active {
+          ${zxToCss(_active)}
+          }
+        `
+      }
+      if (_dark) {
+        cssStr += `
+          @media (prefers-color-scheme: dark) {
+          ${zxToCss(_dark)}
+          }
+        `
+      }
+      if (_focus) {
+        cssStr += `
+          &:focus {
+          ${zxToCss(_focus)}
+          }
+        `
+      }
+      if (_focusVisible) {
+        cssStr += `
+          &:focus-visible {
+          ${zxToCss(_focusVisible)}
+          }
+        `
+      }
+      if (_focusWithin) {
+        cssStr += `
+          &:focus-within {
+          ${zxToCss(_focusWithin)}
+          }
+        `
+      }
+      if (_hover) {
+        cssStr += `
+          &:hover {
+          ${zxToCss(_hover)}
+          }
+        `
+      }
+      if (_target) {
+        cssStr += `
+          &:target {
+          ${zxToCss(_target)}
+          }
+        `
+      }
+      if (_visited) {
+        cssStr += `
+          &:visited {
+          ${zxToCss(_visited)}
+          }
+        `
+      }
+
+      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
+      }
+
+      return createElement(Component, {
+        ref,
+        ...rest,
+        className: classJoin(
+          className,
+          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,
+          cssStr ? css(cssStr) : undefined,
+          props.className
+        ),
+      })
+    })
+    CStyled.toString = () => '.' + className
+    return CStyled as unknown as SC<Parameters<C>[0]>
+  }
+}