@epoch32/visage 1.1.2 → 1.1.4

package/dist/index-0madxn60.js

@@ -0,0 +1,442 @@
+import {
+  cx2,
+  formatStyleProp2,
+  onCleanup2,
+  effect2
+} from "./index-6kfe1nr4.js";
+
+// src/style/hash.ts
+function hashString2(str) {
+  let hash = 2166136261;
+  for (let i = 0;i < str.length; i++) {
+    hash ^= str.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(36);
+}
+function getScopeId2(css, prefix = "v") {
+  const hash = hashString2(css.trim());
+  return `${prefix}-${hash}`;
+}
+
+// src/style/manager.ts
+class StyleManager2 {
+  _styles = new Map;
+  _ssrStyles = new Set;
+  inject(id, css) {
+    let entry = this._styles.get(id);
+    if (!entry) {
+      entry = { id, css, count: 0 };
+      this._styles.set(id, entry);
+      if (typeof document !== "undefined") {
+        const target = document.head || document.documentElement || document.body;
+        if (target) {
+          const styleEl = document.createElement("style");
+          styleEl.id = `visage-style-${id}`;
+          styleEl.setAttribute("data-visage-scope", id);
+          styleEl.textContent = css;
+          target.appendChild(styleEl);
+          entry.element = styleEl;
+        }
+      }
+      this._ssrStyles.add(css);
+    }
+    entry.count++;
+    return () => {
+      if (!entry)
+        return;
+      entry.count--;
+      if (entry.count <= 0) {
+        if (entry.element?.parentNode) {
+          entry.element.parentNode.removeChild(entry.element);
+        }
+        this._styles.delete(id);
+      }
+    };
+  }
+  has(id) {
+    return this._styles.has(id);
+  }
+  extractSSRStyles() {
+    return Array.from(this._ssrStyles).join(`
+`);
+  }
+  clear() {
+    for (const entry of this._styles.values()) {
+      if (entry.element?.parentNode) {
+        entry.element.parentNode.removeChild(entry.element);
+      }
+    }
+    this._styles.clear();
+    this._ssrStyles.clear();
+  }
+}
+var styleManager2 = new StyleManager2;
+function extractStyleTags2() {
+  const css = styleManager2.extractSSRStyles();
+  return css ? `<style data-visage-ssr="true">${css}</style>` : "";
+}
+
+// src/style/parser.ts
+function scopeSelector2(selector, options) {
+  const { scopeId, passToChildren = false } = options;
+  const scopeAttr = `[data-${scopeId}]`;
+  const parts = splitSelectorList(selector);
+  return parts.map((part) => {
+    const trimmed = part.trim();
+    if (!trimmed)
+      return "";
+    if (trimmed.includes(":global(") || trimmed.includes("::v-global(")) {
+      return trimmed.replace(/(.*?)(?:::v-global|:global)\(([^)]+)\)(.*)/g, (_match, before, globalTarget, after) => {
+        const prefix = before.trim();
+        const scopedPrefix = prefix ? scopeCompoundSelector(prefix, scopeAttr) : "";
+        if (scopedPrefix) {
+          return `${scopedPrefix} ${globalTarget.trim()}${after}`;
+        }
+        return `${globalTarget.trim()}${after}`;
+      }).trim();
+    }
+    if (trimmed.includes(":deep(") || trimmed.includes("::v-deep(")) {
+      return trimmed.replace(/(.*?)(?:::v-deep|:deep)\(([^)]+)\)(.*)/g, (_match, before, deepTarget, after) => {
+        const prefix = before.trim();
+        const scopedPrefix = prefix ? scopeCompoundSelector(prefix, scopeAttr) : scopeAttr;
+        return `${scopedPrefix} ${deepTarget.trim()}${after}`;
+      }).trim();
+    }
+    if (passToChildren) {
+      const compound = scopeCompoundSelector(trimmed, scopeAttr);
+      return `${scopeAttr} ${trimmed}, ${compound}`;
+    }
+    return scopeCompoundSelector(trimmed, scopeAttr);
+  }).filter(Boolean).join(", ");
+}
+function scopeCompoundSelector(selector, scopeAttr) {
+  const combinatorRegex = /([ >+~]+)/;
+  const tokens = selector.split(combinatorRegex);
+  const scopedTokens = tokens.map((token, index) => {
+    if (index % 2 === 1)
+      return token;
+    const piece = token.trim();
+    if (!piece || piece === "*")
+      return piece ? `${piece}${scopeAttr}` : "";
+    const pseudoElemIdx = piece.indexOf("::");
+    if (pseudoElemIdx !== -1) {
+      const base = piece.slice(0, pseudoElemIdx);
+      const pseudo = piece.slice(pseudoElemIdx);
+      return `${base}${scopeAttr}${pseudo}`;
+    }
+    const pseudoClassIdx = piece.indexOf(":");
+    if (pseudoClassIdx !== -1) {
+      const base = piece.slice(0, pseudoClassIdx);
+      const pseudo = piece.slice(pseudoClassIdx);
+      return `${base}${scopeAttr}${pseudo}`;
+    }
+    return `${piece}${scopeAttr}`;
+  });
+  return scopedTokens.join("");
+}
+function splitSelectorList(selectorList) {
+  const result = [];
+  let depth = 0;
+  let current = "";
+  for (let i = 0;i < selectorList.length; i++) {
+    const char = selectorList[i];
+    if (char === "(") {
+      depth++;
+      current += char;
+    } else if (char === ")") {
+      depth = Math.max(0, depth - 1);
+      current += char;
+    } else if (char === "," && depth === 0) {
+      if (current.trim())
+        result.push(current.trim());
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current.trim())
+    result.push(current.trim());
+  return result;
+}
+function scopeCSS2(css, options) {
+  const { scopeId } = options;
+  const keyframeNames = new Set;
+  const keyframeRegex = /@(?:-webkit-)?keyframes\s+([a-zA-Z0-9_-]+)/g;
+  let kMatch = keyframeRegex.exec(css);
+  while (kMatch !== null) {
+    if (kMatch[1]) {
+      keyframeNames.add(kMatch[1]);
+    }
+    kMatch = keyframeRegex.exec(css);
+  }
+  let processed = css;
+  for (const name of keyframeNames) {
+    const scopedName = `${scopeId}-${name}`;
+    const defRegex = new RegExp(`(@(?:-webkit-)?keyframes\\s+)${name}\\b`, "g");
+    processed = processed.replace(defRegex, `$1${scopedName}`);
+  }
+  if (keyframeNames.size > 0) {
+    for (const name of keyframeNames) {
+      const scopedName = `${scopeId}-${name}`;
+      const animRegex = new RegExp(`(animation(?:-name)?\\s*:[^;}]*?)\\b${name}\\b([^;}]*)`, "g");
+      processed = processed.replace(animRegex, `$1${scopedName}$2`);
+    }
+  }
+  return transformRules(processed, options);
+}
+function transformRules(css, options) {
+  let output = "";
+  let i = 0;
+  const len = css.length;
+  while (i < len) {
+    while (i < len && /\s/.test(css[i])) {
+      output += css[i];
+      i++;
+    }
+    if (i >= len)
+      break;
+    if (css[i] === "/" && css[i + 1] === "*") {
+      const endComment = css.indexOf("*/", i + 2);
+      if (endComment === -1) {
+        output += css.slice(i);
+        break;
+      }
+      output += css.slice(i, endComment + 2);
+      i = endComment + 2;
+      continue;
+    }
+    const openBrace = css.indexOf("{", i);
+    if (openBrace === -1) {
+      output += css.slice(i);
+      break;
+    }
+    const header = css.slice(i, openBrace).trim();
+    if (header.startsWith("@")) {
+      if (header.startsWith("@media") || header.startsWith("@supports") || header.startsWith("@container")) {
+        const closeBrace = findMatchingBrace(css, openBrace);
+        const innerContent = css.slice(openBrace + 1, closeBrace);
+        const transformedInner = transformRules(innerContent, options);
+        output += `${header} {
+${transformedInner}
+}`;
+        i = closeBrace + 1;
+        continue;
+      }
+      if (header.includes("keyframes") || header.startsWith("@font-face")) {
+        const closeBrace = findMatchingBrace(css, openBrace);
+        output += css.slice(i, closeBrace + 1);
+        i = closeBrace + 1;
+        continue;
+      }
+    }
+    const closeBrace = css.indexOf("}", openBrace);
+    if (closeBrace === -1) {
+      output += css.slice(i);
+      break;
+    }
+    const body = css.slice(openBrace + 1, closeBrace);
+    const scopedSelector = scopeSelector2(header, options);
+    output += `${scopedSelector} {${body}}`;
+    i = closeBrace + 1;
+  }
+  return output;
+}
+function findMatchingBrace(str, openIndex) {
+  let depth = 0;
+  for (let i = openIndex;i < str.length; i++) {
+    if (str[i] === "{")
+      depth++;
+    else if (str[i] === "}") {
+      depth--;
+      if (depth === 0)
+        return i;
+    }
+  }
+  return str.length - 1;
+}
+
+// src/style/create-style.ts
+function formatCSSValue(prop, val) {
+  return formatStyleProp2(prop, val);
+}
+function objectToCSS2(classes) {
+  let css = "";
+  for (const [selector, rules] of Object.entries(classes)) {
+    if (typeof rules !== "object" || rules === null)
+      continue;
+    const sel = selector.startsWith(".") || selector.startsWith("@") || selector.startsWith(":") || selector.includes(" ") || selector === "*" ? selector : `.${selector}`;
+    let mainRules = "";
+    let nestedRules = "";
+    for (const [prop, val] of Object.entries(rules)) {
+      if (typeof val === "object" && val !== null) {
+        const nestedSel = prop.startsWith("&") ? prop.replace(/&/g, sel) : prop.startsWith(":") ? `${sel}${prop}` : `${sel} ${prop}`;
+        nestedRules += `${nestedSel} {
+`;
+        for (const [np, nv] of Object.entries(val)) {
+          if (nv !== undefined && nv !== null) {
+            const kebab = np.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+            nestedRules += `  ${kebab}: ${formatCSSValue(np, nv)};
+`;
+          }
+        }
+        nestedRules += `}
+`;
+      } else if (val !== undefined && val !== null) {
+        const kebab = prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+        mainRules += `  ${kebab}: ${formatCSSValue(prop, val)};
+`;
+      }
+    }
+    if (mainRules) {
+      css += `${sel} {
+${mainRules}}
+`;
+    }
+    if (nestedRules) {
+      css += nestedRules;
+    }
+  }
+  return css;
+}
+function createStyle2(templateOrObject, ...valuesOrOptions) {
+  let cssInput = "";
+  let options;
+  if (typeof templateOrObject === "object" && !Array.isArray(templateOrObject)) {
+    cssInput = objectToCSS2(templateOrObject);
+    options = valuesOrOptions[0];
+  } else if (typeof templateOrObject === "string") {
+    cssInput = templateOrObject;
+    options = valuesOrOptions[0];
+  } else {
+    const template = templateOrObject;
+    for (let i = 0;i < template.length; i++) {
+      cssInput += template[i];
+      if (i < valuesOrOptions.length) {
+        cssInput += String(valuesOrOptions[i]);
+      }
+    }
+  }
+  const scopeId = options?.id ?? getScopeId2(cssInput);
+  const scopeAttr = `data-${scopeId}`;
+  const classMap = {};
+  const classRegex = /\.([a-zA-Z0-9_-]+)/g;
+  let match = classRegex.exec(cssInput);
+  while (match !== null) {
+    const className = match[1];
+    if (className && !classMap[className]) {
+      classMap[className] = `${className}_${scopeId}`;
+    }
+    match = classRegex.exec(cssInput);
+  }
+  let transformedCSS = cssInput;
+  for (const [orig, scoped] of Object.entries(classMap)) {
+    const replaceRegex = new RegExp(`\\.${orig}\\b`, "g");
+    transformedCSS = transformedCSS.replace(replaceRegex, `.${scoped}`);
+  }
+  const finalScopedCSS = scopeCSS2(transformedCSS, {
+    scopeId,
+    passToChildren: options?.passToChildren ?? false
+  });
+  styleManager2.inject(scopeId, finalScopedCSS);
+  const result = {
+    ...classMap,
+    scope: scopeId,
+    scopeAttr,
+    css: finalScopedCSS,
+    cx: (...args) => cx2(...args)
+  };
+  return result;
+}
+function css2(strings, ...values) {
+  let rawCSS = "";
+  for (let i = 0;i < strings.length; i++) {
+    rawCSS += strings[i];
+    if (i < values.length) {
+      rawCSS += String(values[i]);
+    }
+  }
+  const scopeId = getScopeId2(rawCSS, "cls");
+  const className = `visage_${scopeId}`;
+  const fullCSS = rawCSS.includes("&") ? rawCSS.replace(/&/g, `.${className}`) : `.${className} { ${rawCSS} }`;
+  const scoped = scopeCSS2(fullCSS, { scopeId });
+  styleManager2.inject(scopeId, scoped);
+  return className;
+}
+function useStyle2(cssInput, options) {
+  const getRaw = () => {
+    const val = typeof cssInput === "function" ? cssInput() : cssInput;
+    return typeof val === "object" ? objectToCSS2(val) : val;
+  };
+  const raw = getRaw();
+  const scopeId = options?.id ?? getScopeId2(raw);
+  const scopedCSS = scopeCSS2(raw, {
+    scopeId,
+    passToChildren: options?.passToChildren ?? false
+  });
+  const cleanup = styleManager2.inject(scopeId, scopedCSS);
+  onCleanup2(() => {
+    cleanup();
+  });
+  return scopeId;
+}
+
+// src/style/component.tsx
+function Style2(props) {
+  const getRawCSS = () => {
+    if (props.classes) {
+      const cls = typeof props.classes === "function" ? props.classes() : props.classes;
+      return objectToCSS2(cls);
+    }
+    if (props.children) {
+      const ch = typeof props.children === "function" ? props.children() : props.children;
+      return typeof ch === "object" ? objectToCSS2(ch) : ch;
+    }
+    return "";
+  };
+  const rawCSS = getRawCSS();
+  const scopeId = props.id ?? getScopeId2(rawCSS);
+  const scopeAttr = `data-${scopeId}`;
+  if (typeof document !== "undefined") {
+    const marker = document.createTextNode("");
+    let unsubscribe = null;
+    effect2(() => {
+      const currentCSS = getRawCSS();
+      const currentScopeId = props.id ?? getScopeId2(currentCSS);
+      const scoped = scopeCSS2(currentCSS, {
+        scopeId: currentScopeId,
+        passToChildren: props.passToChildren ?? true
+      });
+      if (unsubscribe) {
+        unsubscribe();
+      }
+      unsubscribe = styleManager2.inject(currentScopeId, scoped);
+      const attachScope = () => {
+        const parent = marker.parentElement || marker.parentNode;
+        if (parent && typeof parent.setAttribute === "function") {
+          parent.setAttribute(`data-${currentScopeId}`, "");
+        }
+      };
+      attachScope();
+      queueMicrotask(attachScope);
+    });
+    onCleanup2(() => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+      const parent = marker.parentElement || marker.parentNode;
+      if (parent && typeof parent.removeAttribute === "function") {
+        parent.removeAttribute(scopeAttr);
+      }
+    });
+    return marker;
+  }
+  const scoped = scopeCSS2(rawCSS, {
+    scopeId,
+    passToChildren: props.passToChildren ?? true
+  });
+  styleManager2.inject(scopeId, scoped);
+  return null;
+}
+
+export { hashString2, getScopeId2, StyleManager2, styleManager2, extractStyleTags2, scopeSelector2, scopeCSS2, objectToCSS2, createStyle2, css2, useStyle2, Style2 };

package/dist/index-1xtrtz1t.js

@@ -0,0 +1,256 @@
+import {
+  space2,
+  resolveDimension2
+} from "./index-6kfe1nr4.js";
+import {
+  jsx2
+} from "./index-9fvarkrx.js";
+
+// src/style/layout.tsx
+var ALIGN_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+var JUSTIFY_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly",
+  stretch: "stretch"
+};
+function resolveBaseStyles(props) {
+  const s = {
+    boxSizing: "border-box"
+  };
+  if (props.gap !== undefined)
+    s.gap = space2(props.gap);
+  if (props.p !== undefined)
+    s.padding = space2(props.p);
+  if (props.px !== undefined) {
+    s.paddingLeft = space2(props.px);
+    s.paddingRight = space2(props.px);
+  }
+  if (props.py !== undefined) {
+    s.paddingTop = space2(props.py);
+    s.paddingBottom = space2(props.py);
+  }
+  if (props.pt !== undefined)
+    s.paddingTop = space2(props.pt);
+  if (props.pb !== undefined)
+    s.paddingBottom = space2(props.pb);
+  if (props.pl !== undefined)
+    s.paddingLeft = space2(props.pl);
+  if (props.pr !== undefined)
+    s.paddingRight = space2(props.pr);
+  if (props.m !== undefined)
+    s.margin = space2(props.m);
+  if (props.mx !== undefined) {
+    s.marginLeft = space2(props.mx);
+    s.marginRight = space2(props.mx);
+  }
+  if (props.my !== undefined) {
+    s.marginTop = space2(props.my);
+    s.marginBottom = space2(props.my);
+  }
+  if (props.mt !== undefined)
+    s.marginTop = space2(props.mt);
+  if (props.mb !== undefined)
+    s.marginBottom = space2(props.mb);
+  if (props.ml !== undefined)
+    s.marginLeft = space2(props.ml);
+  if (props.mr !== undefined)
+    s.marginRight = space2(props.mr);
+  if (props.w !== undefined)
+    s.width = resolveDimension2(props.w);
+  if (props.h !== undefined)
+    s.height = resolveDimension2(props.h);
+  if (props.minW !== undefined)
+    s.minWidth = resolveDimension2(props.minW);
+  if (props.maxW !== undefined)
+    s.maxWidth = resolveDimension2(props.maxW);
+  if (props.minH !== undefined)
+    s.minHeight = resolveDimension2(props.minH);
+  if (props.maxH !== undefined)
+    s.maxHeight = resolveDimension2(props.maxH);
+  return s;
+}
+function mergeStyles(base, userStyle) {
+  if (!userStyle)
+    return base;
+  if (typeof userStyle === "string") {
+    const baseStr = Object.entries(base).map(([k, v]) => `${k.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${v}`).join("; ");
+    return `${baseStr}; ${userStyle}`;
+  }
+  if (typeof userStyle === "object") {
+    return { ...base, ...userStyle };
+  }
+  return base;
+}
+function cleanProps(props, excludeKeys) {
+  const result = {};
+  for (const k in props) {
+    if (!excludeKeys.has(k)) {
+      result[k] = props[k];
+    }
+  }
+  return result;
+}
+var COMMON_EXCLUDE = new Set([
+  "as",
+  "gap",
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pb",
+  "pl",
+  "pr",
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mb",
+  "ml",
+  "mr",
+  "w",
+  "h",
+  "minW",
+  "maxW",
+  "minH",
+  "maxH"
+]);
+var STACK_EXCLUDE = new Set([
+  ...COMMON_EXCLUDE,
+  "align",
+  "justify",
+  "direction",
+  "reversed",
+  "wrap",
+  "inline"
+]);
+function Stack2(props) {
+  const { as = "div", children, ...rest } = props;
+  const layoutStyles = resolveBaseStyles(props);
+  layoutStyles.display = props.inline ? "inline-flex" : "flex";
+  layoutStyles.flexDirection = props.direction === "horizontal" ? props.reversed ? "row-reverse" : "row" : props.reversed ? "column-reverse" : "column";
+  if (props.align && ALIGN_MAP[props.align]) {
+    layoutStyles.alignItems = ALIGN_MAP[props.align];
+  }
+  if (props.justify && JUSTIFY_MAP[props.justify]) {
+    layoutStyles.justifyContent = JUSTIFY_MAP[props.justify];
+  }
+  if (props.wrap) {
+    layoutStyles.flexWrap = props.wrap === true ? "wrap" : props.wrap;
+  }
+  const domProps = cleanProps(rest, STACK_EXCLUDE);
+  domProps.style = mergeStyles(layoutStyles, props.style);
+  domProps.children = children;
+  return jsx2(as, domProps);
+}
+var ROW_EXCLUDE = new Set([...COMMON_EXCLUDE, "align", "justify", "reversed", "wrap", "inline"]);
+function Row2(props) {
+  const { as = "div", children, ...rest } = props;
+  const layoutStyles = resolveBaseStyles(props);
+  layoutStyles.display = props.inline ? "inline-flex" : "flex";
+  layoutStyles.flexDirection = props.reversed ? "row-reverse" : "row";
+  layoutStyles.alignItems = props.align ? ALIGN_MAP[props.align] ?? props.align : "center";
+  if (props.justify && JUSTIFY_MAP[props.justify]) {
+    layoutStyles.justifyContent = JUSTIFY_MAP[props.justify];
+  }
+  if (props.wrap) {
+    layoutStyles.flexWrap = props.wrap === true ? "wrap" : props.wrap;
+  }
+  const domProps = cleanProps(rest, ROW_EXCLUDE);
+  domProps.style = mergeStyles(layoutStyles, props.style);
+  domProps.children = children;
+  return jsx2(as, domProps);
+}
+var CENTER_EXCLUDE = new Set([...COMMON_EXCLUDE, "inline"]);
+function Center2(props) {
+  const { as = "div", children, ...rest } = props;
+  const layoutStyles = resolveBaseStyles(props);
+  layoutStyles.display = props.inline ? "inline-flex" : "flex";
+  layoutStyles.alignItems = "center";
+  layoutStyles.justifyContent = "center";
+  const domProps = cleanProps(rest, CENTER_EXCLUDE);
+  domProps.style = mergeStyles(layoutStyles, props.style);
+  domProps.children = children;
+  return jsx2(as, domProps);
+}
+var GRID_EXCLUDE = new Set([
+  ...COMMON_EXCLUDE,
+  "columns",
+  "minChildWidth",
+  "rows",
+  "rowGap",
+  "colGap",
+  "align",
+  "justify",
+  "inline"
+]);
+function Grid2(props) {
+  const { as = "div", children, ...rest } = props;
+  const layoutStyles = resolveBaseStyles(props);
+  layoutStyles.display = props.inline ? "inline-grid" : "grid";
+  if (props.minChildWidth !== undefined) {
+    const minW = resolveDimension2(props.minChildWidth);
+    layoutStyles.gridTemplateColumns = `repeat(auto-fit, minmax(min(100%, ${minW}), 1fr))`;
+  } else if (props.columns !== undefined) {
+    if (typeof props.columns === "number") {
+      layoutStyles.gridTemplateColumns = `repeat(${props.columns}, minmax(0, 1fr))`;
+    } else {
+      layoutStyles.gridTemplateColumns = String(props.columns);
+    }
+  }
+  if (props.rows !== undefined) {
+    if (typeof props.rows === "number") {
+      layoutStyles.gridTemplateRows = `repeat(${props.rows}, minmax(0, 1fr))`;
+    } else {
+      layoutStyles.gridTemplateRows = String(props.rows);
+    }
+  }
+  if (props.rowGap !== undefined)
+    layoutStyles.rowGap = space2(props.rowGap);
+  if (props.colGap !== undefined)
+    layoutStyles.columnGap = space2(props.colGap);
+  if (props.align) {
+    layoutStyles.alignItems = ALIGN_MAP[props.align] ?? props.align;
+  }
+  if (props.justify) {
+    layoutStyles.justifyItems = props.justify;
+  }
+  const domProps = cleanProps(rest, GRID_EXCLUDE);
+  domProps.style = mergeStyles(layoutStyles, props.style);
+  domProps.children = children;
+  return jsx2(as, domProps);
+}
+var SPACER_EXCLUDE = new Set([...COMMON_EXCLUDE, "size", "x", "y", "flex"]);
+function Spacer2(props) {
+  const { as = "div", ...rest } = props;
+  const layoutStyles = resolveBaseStyles(props);
+  if (props.size !== undefined) {
+    const s = space2(props.size);
+    layoutStyles.width = s;
+    layoutStyles.height = s;
+    layoutStyles.flexShrink = "0";
+  } else if (props.x !== undefined || props.y !== undefined) {
+    if (props.x !== undefined)
+      layoutStyles.width = space2(props.x);
+    if (props.y !== undefined)
+      layoutStyles.height = space2(props.y);
+    layoutStyles.flexShrink = "0";
+  } else {
+    layoutStyles.flex = typeof props.flex === "number" ? String(props.flex) : "1 1 0%";
+    layoutStyles.alignSelf = "stretch";
+  }
+  const domProps = cleanProps(rest, SPACER_EXCLUDE);
+  domProps.style = mergeStyles(layoutStyles, props.style);
+  return jsx2(as, domProps);
+}
+
+export { Stack2, Row2, Center2, Grid2, Spacer2 };