webadwaita 0.2.1 → 0.2.2

package/dist/web/Box/index.js

@@ -1,7 +1,7 @@
 import './styles.css';
-import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "react-strict-dom/runtime";
+import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "../_rsd/runtime.js";
 import * as React from 'react';
-import { css, html } from 'react-strict-dom';
+import { css, html } from '../_rsd/index.js';
 import { spacing } from '../tokens.css';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

package/dist/web/Button/index.js

@@ -1,7 +1,7 @@
 import './styles.css';
-import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "react-strict-dom/runtime";
+import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "../_rsd/runtime.js";
 import * as React from 'react';
-import { css, html } from 'react-strict-dom';
+import { css, html } from '../_rsd/index.js';
 import { palette, radius, spacing, typography, motion } from '../tokens.css';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

package/dist/web/Card/index.js

@@ -1,7 +1,7 @@
 import './styles.css';
-import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "react-strict-dom/runtime";
+import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "../_rsd/runtime.js";
 import * as React from 'react';
-import { css, html } from 'react-strict-dom';
+import { css, html } from '../_rsd/index.js';
 import { palette, radius, spacing, typography } from '../tokens.css';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**

package/dist/web/Checkbox/index.js

@@ -1,7 +1,7 @@
 import './styles.css';
-import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "react-strict-dom/runtime";
+import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "../_rsd/runtime.js";
 import * as React from 'react';
-import { css, html } from 'react-strict-dom';
+import { css, html } from '../_rsd/index.js';
 import { palette, radius, motion, typography, spacing } from '../tokens.css';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**

package/dist/web/Entry/index.js

@@ -1,7 +1,7 @@
 import './styles.css';
-import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "react-strict-dom/runtime";
+import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "../_rsd/runtime.js";
 import * as React from 'react';
-import { css, html } from 'react-strict-dom';
+import { css, html } from '../_rsd/index.js';
 import { palette, radius, spacing, typography, motion } from '../tokens.css';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

package/dist/web/HeaderBar/index.js

@@ -1,7 +1,7 @@
 import './styles.css';
-import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "react-strict-dom/runtime";
+import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "../_rsd/runtime.js";
 import * as React from 'react';
-import { css, html } from 'react-strict-dom';
+import { css, html } from '../_rsd/index.js';
 import { palette, spacing, typography } from '../tokens.css';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**

package/dist/web/Switch/index.js

@@ -1,6 +1,6 @@
 import './styles.css';
-import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "react-strict-dom/runtime";
-import { css, html } from 'react-strict-dom';
+import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "../_rsd/runtime.js";
+import { css, html } from '../_rsd/index.js';
 import { palette, motion } from '../tokens.css';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

package/dist/web/_rsd/index.js

@@ -0,0 +1,484 @@
+/**
+ * @license react-strict-dom
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+import { jsx } from 'react/jsx-runtime';
+import * as stylex from '@stylexjs/stylex';
+export { stylex as css };
+const loggedMessages = {};
+function errorMsg(msg) {
+  if (process.env.NODE_ENV !== 'test' && loggedMessages[msg]) {
+    return;
+  }
+  loggedMessages[msg] = true;
+  console.error(`[error] React Strict DOM: ${msg}`);
+}
+const strictAttributeSet = new Set(['alt', 'aria-activedescendant', 'aria-atomic', 'aria-autocomplete', 'aria-busy', 'aria-checked', 'aria-colcount', 'aria-colindex', 'aria-colindextext', 'aria-colspan', 'aria-controls', 'aria-current', 'aria-describedby', 'aria-details', 'aria-disabled', 'aria-errormessage', 'aria-expanded', 'aria-flowto', 'aria-haspopup', 'aria-hidden', 'aria-invalid', 'aria-keyshortcuts', 'aria-label', 'aria-labelledby', 'aria-level', 'aria-live', 'aria-modal', 'aria-multiline', 'aria-multiselectable', 'aria-orientation', 'aria-owns', 'aria-placeholder', 'aria-posinset', 'aria-pressed', 'aria-readonly', 'aria-required', 'aria-roledescription', 'aria-rowcount', 'aria-rowindex', 'aria-rowindextext', 'aria-rowspan', 'aria-selected', 'aria-setsize', 'aria-sort', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-valuetext', 'autoCapitalize', 'autoComplete', 'autoFocus', 'checked', 'children', 'crossOrigin', 'decoding', 'defaultChecked', 'defaultValue', 'dir', 'disabled', 'download', 'draggable', 'elementTiming', 'enterKeyHint', 'fetchPriority', 'for', 'height', 'hidden', 'href', 'id', 'inert', 'inputMode', 'label', 'lang', 'loading', 'max', 'maxLength', 'min', 'minLength', 'multiple', 'name', 'onAuxClick', 'onBeforeInput', 'onBlur', 'onChange', 'onClick', 'onContextMenu', 'onCopy', 'onCut', 'onError', 'onFocus', 'onFocusIn', 'onFocusOut', 'onFullscreenChange', 'onFullscreenError', 'onGotPointerCapture', 'onInput', 'onInvalid', 'onKeyDown', 'onKeyUp', 'onLoad', 'onLostPointerCapture', 'onPaste', 'onPointerCancel', 'onPointerDown', 'onPointerEnter', 'onPointerLeave', 'onPointerMove', 'onPointerOut', 'onPointerOver', 'onPointerUp', 'onScroll', 'onSelect', 'onSelectionChange', 'onWheel', 'placeholder', 'readOnly', 'referrerPolicy', 'rel', 'required', 'role', 'rows', 'selected', 'spellCheck', 'src', 'srcSet', 'step', 'style', 'tabIndex', 'target', 'type', 'value', 'width', 'suppressHydrationWarning', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onTouchCancel', 'onTouchEnd', 'onTouchMove', 'onTouchStart']);
+function isPropAllowed(key) {
+  return strictAttributeSet.has(key) || key.indexOf('data-') > -1;
+}
+var styleq$1 = {};
+Object.defineProperty(styleq$1, "__esModule", {
+  value: true
+});
+var styleq_2 = styleq$1.styleq = void 0;
+var cache = new WeakMap();
+var compiledKey = '$$css';
+function createStyleq(options) {
+  var disableCache;
+  var disableMix;
+  var transform;
+  if (options != null) {
+    disableCache = options.disableCache === true;
+    disableMix = options.disableMix === true;
+    transform = options.transform;
+  }
+  return function styleq() {
+    var definedProperties = [];
+    var className = '';
+    var inlineStyle = null;
+    var debugString = '';
+    var nextCache = disableCache ? null : cache;
+    var styles = new Array(arguments.length);
+    for (var i = 0; i < arguments.length; i++) {
+      styles[i] = arguments[i];
+    }
+    while (styles.length > 0) {
+      var possibleStyle = styles.pop();
+      if (possibleStyle == null || possibleStyle === false) {
+        continue;
+      }
+      if (Array.isArray(possibleStyle)) {
+        for (var _i = 0; _i < possibleStyle.length; _i++) {
+          styles.push(possibleStyle[_i]);
+        }
+        continue;
+      }
+      var style = transform != null ? transform(possibleStyle) : possibleStyle;
+      if (style.$$css != null) {
+        var classNameChunk = '';
+        if (nextCache != null && nextCache.has(style)) {
+          var cacheEntry = nextCache.get(style);
+          if (cacheEntry != null) {
+            classNameChunk = cacheEntry[0];
+            debugString = cacheEntry[2];
+            definedProperties.push.apply(definedProperties, cacheEntry[1]);
+            nextCache = cacheEntry[3];
+          }
+        } else {
+          var definedPropertiesChunk = [];
+          for (var prop in style) {
+            var value = style[prop];
+            if (prop === compiledKey) {
+              var compiledKeyValue = style[prop];
+              if (compiledKeyValue !== true) {
+                debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;
+              }
+              continue;
+            }
+            if (typeof value === 'string' || value === null) {
+              if (!definedProperties.includes(prop)) {
+                definedProperties.push(prop);
+                if (nextCache != null) {
+                  definedPropertiesChunk.push(prop);
+                }
+                if (typeof value === 'string') {
+                  classNameChunk += classNameChunk ? ' ' + value : value;
+                }
+              }
+            } else {
+              console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
+            }
+          }
+          if (nextCache != null) {
+            var weakMap = new WeakMap();
+            nextCache.set(style, [classNameChunk, definedPropertiesChunk, debugString, weakMap]);
+            nextCache = weakMap;
+          }
+        }
+        if (classNameChunk) {
+          className = className ? classNameChunk + ' ' + className : classNameChunk;
+        }
+      } else {
+        if (disableMix) {
+          if (inlineStyle == null) {
+            inlineStyle = {};
+          }
+          inlineStyle = Object.assign({}, style, inlineStyle);
+        } else {
+          var subStyle = null;
+          for (var _prop in style) {
+            var _value = style[_prop];
+            if (_value !== undefined) {
+              if (!definedProperties.includes(_prop)) {
+                if (_value != null) {
+                  if (inlineStyle == null) {
+                    inlineStyle = {};
+                  }
+                  if (subStyle == null) {
+                    subStyle = {};
+                  }
+                  subStyle[_prop] = _value;
+                }
+                definedProperties.push(_prop);
+                nextCache = null;
+              }
+            }
+          }
+          if (subStyle != null) {
+            inlineStyle = Object.assign(subStyle, inlineStyle);
+          }
+        }
+      }
+    }
+    var styleProps = [className, inlineStyle, debugString];
+    return styleProps;
+  };
+}
+var styleq = styleq_2 = styleq$1.styleq = createStyleq();
+styleq.factory = createStyleq;
+const optimizedStyleq = styleq_2.factory({
+  disableMix: true
+});
+function merge(...styles) {
+  const [className, style, dataStyleSrc] = optimizedStyleq(styles);
+  const result = {};
+  if (className != null && className !== '') {
+    result.className = className;
+  }
+  if (style != null) {
+    result.style = style;
+  }
+  if (dataStyleSrc != null && dataStyleSrc !== '') {
+    const chunks = dataStyleSrc.split(';');
+    const pathsMap = {};
+    for (const chunk of chunks) {
+      const trimmed = chunk.trim();
+      const [path, line] = trimmed.split(':');
+      if (line != null) {
+        pathsMap[path] = pathsMap[path] != null ? `${pathsMap[path]},${line}` : line;
+      }
+    }
+    result['data-style-src'] = Object.keys(pathsMap).map(path => `${path}:${pathsMap[path]}`).join('; ');
+  }
+  return result;
+}
+function validateStrictProps(props) {
+  Object.keys(props).forEach(key => {
+    const isValid = isPropAllowed(key);
+    if (!isValid) {
+      errorMsg(`invalid prop "${key}"`);
+      delete props[key];
+    }
+  });
+}
+function createStrictDOMComponent(TagName, defaultStyle) {
+  const debugStyle = {
+    $$css: true,
+    'debug::name': `html-${TagName}`
+  };
+  function Component({
+    ref,
+    ...props
+  }) {
+    const {
+      for: htmlFor,
+      style,
+      ...restProps
+    } = props;
+    const hostProps = restProps;
+    validateStrictProps(hostProps);
+    if (htmlFor != null) {
+      hostProps.htmlFor = htmlFor;
+    }
+    if (props.role != null) {
+      hostProps.role = props.role === 'none' ? 'presentation' : props.role;
+    }
+    if (TagName === 'button') {
+      hostProps.type = hostProps.type ? hostProps.type : 'button';
+    } else if (TagName === 'input' || TagName === 'textarea') {
+      hostProps.dir = hostProps.dir ? hostProps.dir : 'auto';
+    }
+    const hostStyleProps = merge([debugStyle, defaultStyle, style]);
+    const element = jsx(TagName, {
+      ...hostProps,
+      ...hostStyleProps,
+      ref: ref
+    });
+    return element;
+  }
+  Component.displayName = `html.${TagName}`;
+  return Component;
+}
+const styles = {
+  block: {
+    kogj98: "x1ghz6dp",
+    kmVPX3: "x1717udv",
+    $$css: true
+  },
+  inline: {
+    kogj98: "x1ghz6dp",
+    kmVPX3: "x1717udv",
+    kybGjl: "x1hl2dhg",
+    k9WMMc: "x16tdsg8",
+    kD5eJx: "x1vvkbs",
+    $$css: true
+  },
+  inlineblock: {
+    ksu8eU: "x1y0btm7",
+    kogj98: "x1ghz6dp",
+    kmVPX3: "x1717udv",
+    $$css: true
+  },
+  button: {
+    kMzoRj: "xmkeg23",
+    $$css: true
+  },
+  codePre: {
+    kMv6JI: "x1lxnp44",
+    kGuDYH: "xrv4cvt",
+    kVQacm: "xysyzu8",
+    $$css: true
+  },
+  heading: {
+    kGuDYH: "xngnso2",
+    kD5eJx: "x1vvkbs",
+    $$css: true
+  },
+  hr: {
+    kWkggS: "x42x0ya",
+    ksu8eU: "xng3xce",
+    kMzoRj: "xc342km",
+    kB7OPa: "x9f619",
+    kZKoxP: "xjm9jq1",
+    $$css: true
+  },
+  img: {
+    kOBAk4: "xuw900x",
+    kZKoxP: "xt7dq6l",
+    ks0D6T: "x193iq5w",
+    $$css: true
+  },
+  input: {
+    kMzoRj: "xmkeg23",
+    ksu8eU: "x1y0btm7",
+    $$css: true
+  },
+  list: {
+    kB88ic: "xe8uvvx",
+    $$css: true
+  },
+  strong: {
+    k63SB2: "x117nqv4",
+    $$css: true
+  },
+  textarea: {
+    kMzoRj: "xmkeg23",
+    ksu8eU: "x1y0btm7",
+    kHenm0: "x288g5",
+    $$css: true
+  }
+};
+const a$1 = styles.inline;
+const article$1 = styles.block;
+const aside$1 = styles.block;
+const b$1 = styles.inline;
+const bdi$1 = styles.inline;
+const bdo$1 = styles.inline;
+const blockquote$1 = styles.block;
+const br$1 = null;
+const button$1 = [styles.inlineblock, styles.button];
+const code$1 = [styles.inline, styles.codePre];
+const del$1 = null;
+const div$1 = styles.block;
+const em$1 = styles.inline;
+const fieldset$1 = styles.block;
+const footer$1 = styles.block;
+const form$1 = styles.block;
+const heading = [styles.block, styles.heading];
+const header$1 = styles.block;
+const hr$1 = [styles.block, styles.hr];
+const i$1 = styles.inline;
+const img$1 = styles.img;
+const input$1 = [styles.inlineblock, styles.input];
+const ins$1 = null;
+const kbd$1 = null;
+const label$1 = styles.inline;
+const li$1 = styles.block;
+const main$1 = styles.block;
+const mark$1 = styles.inline;
+const nav$1 = styles.block;
+const ol$1 = [styles.list, styles.block];
+const optgroup$1 = null;
+const option$1 = null;
+const p$1 = styles.block;
+const pre$1 = [styles.block, styles.codePre];
+const s$1 = null;
+const section$1 = styles.block;
+const select$1 = styles.inlineblock;
+const span$1 = styles.inline;
+const strong$1 = [styles.inline, styles.strong];
+const sub$1 = styles.inline;
+const sup$1 = styles.inline;
+const textarea$1 = [styles.inlineblock, styles.textarea];
+const u$1 = null;
+const ul$1 = [styles.list, styles.block];
+const defaultStyles = {
+  a: a$1,
+  article: article$1,
+  aside: aside$1,
+  b: b$1,
+  bdi: bdi$1,
+  bdo: bdo$1,
+  blockquote: blockquote$1,
+  br: br$1,
+  button: button$1,
+  code: code$1,
+  del: del$1,
+  div: div$1,
+  em: em$1,
+  fieldset: fieldset$1,
+  footer: footer$1,
+  form: form$1,
+  h1: heading,
+  h2: heading,
+  h3: heading,
+  h4: heading,
+  h5: heading,
+  h6: heading,
+  header: header$1,
+  hr: hr$1,
+  i: i$1,
+  img: img$1,
+  input: input$1,
+  ins: ins$1,
+  kbd: kbd$1,
+  label: label$1,
+  li: li$1,
+  main: main$1,
+  mark: mark$1,
+  nav: nav$1,
+  ol: ol$1,
+  optgroup: optgroup$1,
+  option: option$1,
+  p: p$1,
+  pre: pre$1,
+  s: s$1,
+  section: section$1,
+  select: select$1,
+  span: span$1,
+  strong: strong$1,
+  sub: sub$1,
+  sup: sup$1,
+  textarea: textarea$1,
+  u: u$1,
+  ul: ul$1
+};
+const a = createStrictDOMComponent('a', defaultStyles.a);
+const article = createStrictDOMComponent('article', defaultStyles.article);
+const aside = createStrictDOMComponent('aside', defaultStyles.aside);
+const b = createStrictDOMComponent('b', defaultStyles.b);
+const bdi = createStrictDOMComponent('bdi', defaultStyles.bdi);
+const bdo = createStrictDOMComponent('bdo', defaultStyles.bdo);
+const blockquote = createStrictDOMComponent('blockquote', defaultStyles.blockquote);
+const br = createStrictDOMComponent('br', defaultStyles.br);
+const button = createStrictDOMComponent('button', defaultStyles.button);
+const code = createStrictDOMComponent('code', defaultStyles.code);
+const del = createStrictDOMComponent('del', defaultStyles.del);
+const div = createStrictDOMComponent('div', defaultStyles.div);
+const em = createStrictDOMComponent('em', defaultStyles.em);
+const fieldset = createStrictDOMComponent('fieldset', defaultStyles.fieldset);
+const footer = createStrictDOMComponent('footer', defaultStyles.footer);
+const form = createStrictDOMComponent('form', defaultStyles.form);
+const h1 = createStrictDOMComponent('h1', defaultStyles.h1);
+const h2 = createStrictDOMComponent('h2', defaultStyles.h2);
+const h3 = createStrictDOMComponent('h3', defaultStyles.h3);
+const h4 = createStrictDOMComponent('h4', defaultStyles.h4);
+const h5 = createStrictDOMComponent('h5', defaultStyles.h5);
+const h6 = createStrictDOMComponent('h6', defaultStyles.h6);
+const header = createStrictDOMComponent('header', defaultStyles.header);
+const hr = createStrictDOMComponent('hr', defaultStyles.hr);
+const i = createStrictDOMComponent('i', defaultStyles.i);
+const img = createStrictDOMComponent('img', defaultStyles.img);
+const input = createStrictDOMComponent('input', defaultStyles.input);
+const ins = createStrictDOMComponent('ins', defaultStyles.ins);
+const kbd = createStrictDOMComponent('kbd', defaultStyles.kbd);
+const label = createStrictDOMComponent('label', defaultStyles.label);
+const li = createStrictDOMComponent('li', defaultStyles.li);
+const main = createStrictDOMComponent('main', defaultStyles.main);
+const mark = createStrictDOMComponent('mark', defaultStyles.mark);
+const nav = createStrictDOMComponent('nav', defaultStyles.nav);
+const ol = createStrictDOMComponent('ol', defaultStyles.ol);
+const optgroup = createStrictDOMComponent('optgroup', defaultStyles.optgroup);
+const option = createStrictDOMComponent('option', defaultStyles.option);
+const p = createStrictDOMComponent('p', defaultStyles.p);
+const pre = createStrictDOMComponent('pre', defaultStyles.pre);
+const s = createStrictDOMComponent('s', defaultStyles.s);
+const section = createStrictDOMComponent('section', defaultStyles.section);
+const select = createStrictDOMComponent('select', defaultStyles.select);
+const span = createStrictDOMComponent('span', defaultStyles.span);
+const strong = createStrictDOMComponent('strong', defaultStyles.strong);
+const sub = createStrictDOMComponent('sub', defaultStyles.sub);
+const sup = createStrictDOMComponent('sup', defaultStyles.sup);
+const textarea = createStrictDOMComponent('textarea', defaultStyles.textarea);
+const u = createStrictDOMComponent('u', defaultStyles.u);
+const ul = createStrictDOMComponent('ul', defaultStyles.ul);
+var html = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  a: a,
+  article: article,
+  aside: aside,
+  b: b,
+  bdi: bdi,
+  bdo: bdo,
+  blockquote: blockquote,
+  br: br,
+  button: button,
+  code: code,
+  del: del,
+  div: div,
+  em: em,
+  fieldset: fieldset,
+  footer: footer,
+  form: form,
+  h1: h1,
+  h2: h2,
+  h3: h3,
+  h4: h4,
+  h5: h5,
+  h6: h6,
+  header: header,
+  hr: hr,
+  i: i,
+  img: img,
+  input: input,
+  ins: ins,
+  kbd: kbd,
+  label: label,
+  li: li,
+  main: main,
+  mark: mark,
+  nav: nav,
+  ol: ol,
+  optgroup: optgroup,
+  option: option,
+  p: p,
+  pre: pre,
+  s: s,
+  section: section,
+  select: select,
+  span: span,
+  strong: strong,
+  sub: sub,
+  sup: sup,
+  textarea: textarea,
+  u: u,
+  ul: ul
+});
+export { html };

package/dist/web/_rsd/runtime.js

@@ -0,0 +1,322 @@
+/**
+ * @license react-strict-dom
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+import * as stylex from '@stylexjs/stylex';
+var styleq$1 = {};
+Object.defineProperty(styleq$1, "__esModule", {
+  value: true
+});
+var styleq_2 = styleq$1.styleq = void 0;
+var cache = new WeakMap();
+var compiledKey = '$$css';
+function createStyleq(options) {
+  var disableCache;
+  var disableMix;
+  var transform;
+  if (options != null) {
+    disableCache = options.disableCache === true;
+    disableMix = options.disableMix === true;
+    transform = options.transform;
+  }
+  return function styleq() {
+    var definedProperties = [];
+    var className = '';
+    var inlineStyle = null;
+    var debugString = '';
+    var nextCache = disableCache ? null : cache;
+    var styles = new Array(arguments.length);
+    for (var i = 0; i < arguments.length; i++) {
+      styles[i] = arguments[i];
+    }
+    while (styles.length > 0) {
+      var possibleStyle = styles.pop();
+      if (possibleStyle == null || possibleStyle === false) {
+        continue;
+      }
+      if (Array.isArray(possibleStyle)) {
+        for (var _i = 0; _i < possibleStyle.length; _i++) {
+          styles.push(possibleStyle[_i]);
+        }
+        continue;
+      }
+      var style = transform != null ? transform(possibleStyle) : possibleStyle;
+      if (style.$$css != null) {
+        var classNameChunk = '';
+        if (nextCache != null && nextCache.has(style)) {
+          var cacheEntry = nextCache.get(style);
+          if (cacheEntry != null) {
+            classNameChunk = cacheEntry[0];
+            debugString = cacheEntry[2];
+            definedProperties.push.apply(definedProperties, cacheEntry[1]);
+            nextCache = cacheEntry[3];
+          }
+        } else {
+          var definedPropertiesChunk = [];
+          for (var prop in style) {
+            var value = style[prop];
+            if (prop === compiledKey) {
+              var compiledKeyValue = style[prop];
+              if (compiledKeyValue !== true) {
+                debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;
+              }
+              continue;
+            }
+            if (typeof value === 'string' || value === null) {
+              if (!definedProperties.includes(prop)) {
+                definedProperties.push(prop);
+                if (nextCache != null) {
+                  definedPropertiesChunk.push(prop);
+                }
+                if (typeof value === 'string') {
+                  classNameChunk += classNameChunk ? ' ' + value : value;
+                }
+              }
+            } else {
+              console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
+            }
+          }
+          if (nextCache != null) {
+            var weakMap = new WeakMap();
+            nextCache.set(style, [classNameChunk, definedPropertiesChunk, debugString, weakMap]);
+            nextCache = weakMap;
+          }
+        }
+        if (classNameChunk) {
+          className = className ? classNameChunk + ' ' + className : classNameChunk;
+        }
+      } else {
+        if (disableMix) {
+          if (inlineStyle == null) {
+            inlineStyle = {};
+          }
+          inlineStyle = Object.assign({}, style, inlineStyle);
+        } else {
+          var subStyle = null;
+          for (var _prop in style) {
+            var _value = style[_prop];
+            if (_value !== undefined) {
+              if (!definedProperties.includes(_prop)) {
+                if (_value != null) {
+                  if (inlineStyle == null) {
+                    inlineStyle = {};
+                  }
+                  if (subStyle == null) {
+                    subStyle = {};
+                  }
+                  subStyle[_prop] = _value;
+                }
+                definedProperties.push(_prop);
+                nextCache = null;
+              }
+            }
+          }
+          if (subStyle != null) {
+            inlineStyle = Object.assign(subStyle, inlineStyle);
+          }
+        }
+      }
+    }
+    var styleProps = [className, inlineStyle, debugString];
+    return styleProps;
+  };
+}
+var styleq = styleq_2 = styleq$1.styleq = createStyleq();
+styleq.factory = createStyleq;
+const optimizedStyleq = styleq_2.factory({
+  disableMix: true
+});
+function merge(...styles) {
+  const [className, style, dataStyleSrc] = optimizedStyleq(styles);
+  const result = {};
+  if (className != null && className !== '') {
+    result.className = className;
+  }
+  if (style != null) {
+    result.style = style;
+  }
+  if (dataStyleSrc != null && dataStyleSrc !== '') {
+    const chunks = dataStyleSrc.split(';');
+    const pathsMap = {};
+    for (const chunk of chunks) {
+      const trimmed = chunk.trim();
+      const [path, line] = trimmed.split(':');
+      if (line != null) {
+        pathsMap[path] = pathsMap[path] != null ? `${pathsMap[path]},${line}` : line;
+      }
+    }
+    result['data-style-src'] = Object.keys(pathsMap).map(path => `${path}:${pathsMap[path]}`).join('; ');
+  }
+  return result;
+}
+const styles = {
+  block: {
+    kogj98: "x1ghz6dp",
+    kmVPX3: "x1717udv",
+    $$css: true
+  },
+  inline: {
+    kogj98: "x1ghz6dp",
+    kmVPX3: "x1717udv",
+    kybGjl: "x1hl2dhg",
+    k9WMMc: "x16tdsg8",
+    kD5eJx: "x1vvkbs",
+    $$css: true
+  },
+  inlineblock: {
+    ksu8eU: "x1y0btm7",
+    kogj98: "x1ghz6dp",
+    kmVPX3: "x1717udv",
+    $$css: true
+  },
+  button: {
+    kMzoRj: "xmkeg23",
+    $$css: true
+  },
+  codePre: {
+    kMv6JI: "x1lxnp44",
+    kGuDYH: "xrv4cvt",
+    kVQacm: "xysyzu8",
+    $$css: true
+  },
+  heading: {
+    kGuDYH: "xngnso2",
+    kD5eJx: "x1vvkbs",
+    $$css: true
+  },
+  hr: {
+    kWkggS: "x42x0ya",
+    ksu8eU: "xng3xce",
+    kMzoRj: "xc342km",
+    kB7OPa: "x9f619",
+    kZKoxP: "xjm9jq1",
+    $$css: true
+  },
+  img: {
+    kOBAk4: "xuw900x",
+    kZKoxP: "xt7dq6l",
+    ks0D6T: "x193iq5w",
+    $$css: true
+  },
+  input: {
+    kMzoRj: "xmkeg23",
+    ksu8eU: "x1y0btm7",
+    $$css: true
+  },
+  list: {
+    kB88ic: "xe8uvvx",
+    $$css: true
+  },
+  strong: {
+    k63SB2: "x117nqv4",
+    $$css: true
+  },
+  textarea: {
+    kMzoRj: "xmkeg23",
+    ksu8eU: "x1y0btm7",
+    kHenm0: "x288g5",
+    $$css: true
+  }
+};
+const a = styles.inline;
+const article = styles.block;
+const aside = styles.block;
+const b = styles.inline;
+const bdi = styles.inline;
+const bdo = styles.inline;
+const blockquote = styles.block;
+const br = null;
+const button = [styles.inlineblock, styles.button];
+const code = [styles.inline, styles.codePre];
+const del = null;
+const div = styles.block;
+const em = styles.inline;
+const fieldset = styles.block;
+const footer = styles.block;
+const form = styles.block;
+const heading = [styles.block, styles.heading];
+const header = styles.block;
+const hr = [styles.block, styles.hr];
+const i = styles.inline;
+const img = styles.img;
+const input = [styles.inlineblock, styles.input];
+const ins = null;
+const kbd = null;
+const label = styles.inline;
+const li = styles.block;
+const main = styles.block;
+const mark = styles.inline;
+const nav = styles.block;
+const ol = [styles.list, styles.block];
+const optgroup = null;
+const option = null;
+const p = styles.block;
+const pre = [styles.block, styles.codePre];
+const s = null;
+const section = styles.block;
+const select = styles.inlineblock;
+const span = styles.inline;
+const strong = [styles.inline, styles.strong];
+const sub = styles.inline;
+const sup = styles.inline;
+const textarea = [styles.inlineblock, styles.textarea];
+const u = null;
+const ul = [styles.list, styles.block];
+const defaultStyles = {
+  a: a,
+  article: article,
+  aside: aside,
+  b: b,
+  bdi: bdi,
+  bdo: bdo,
+  blockquote: blockquote,
+  br: br,
+  button: button,
+  code: code,
+  del: del,
+  div: div,
+  em: em,
+  fieldset: fieldset,
+  footer: footer,
+  form: form,
+  h1: heading,
+  h2: heading,
+  h3: heading,
+  h4: heading,
+  h5: heading,
+  h6: heading,
+  header: header,
+  hr: hr,
+  i: i,
+  img: img,
+  input: input,
+  ins: ins,
+  kbd: kbd,
+  label: label,
+  li: li,
+  main: main,
+  mark: mark,
+  nav: nav,
+  ol: ol,
+  optgroup: optgroup,
+  option: option,
+  p: p,
+  pre: pre,
+  s: s,
+  section: section,
+  select: select,
+  span: span,
+  strong: strong,
+  sub: sub,
+  sup: sup,
+  textarea: textarea,
+  u: u,
+  ul: ul
+};
+export { defaultStyles, merge };

package/dist/web/tokens.css.js

@@ -1,6 +1,6 @@
 import './_tokens/styles.css';
-import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "react-strict-dom/runtime";
-import { css } from 'react-strict-dom';
+import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "./_rsd/runtime.js";
+import { css } from './_rsd/index.js';
 
 /**
  * Adwaita-inspired design tokens, exposed via `css.defineConsts` so they can

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webadwaita",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Cross-platform Adwaita-styled UI components built on react-strict-dom.",
   "license": "MIT",
   "sideEffects": [
@@ -49,6 +49,7 @@
     "@babel/preset-env": "^7.29.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
+    "@stylexjs/babel-plugin": "^0.18.3",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.14",