@bedrock-layout/solid 0.11.10 → 0.12.0

package/lib/index.m.js

@@ -1,25 +1,5 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { styled, useTheme } from "solid-styled-components";
+import { splitProps, createMemo, sharedConfig, untrack, createRenderEffect, createComponent, mergeProps, createContext, useContext, createSignal, onMount, createEffect, onCleanup, children, Switch, Match } from "solid-js";
 import { init, registerCallback } from "@bedrock-layout/register-resize-callback";
-import { createSignal, onMount, createEffect, onCleanup, children, Switch, Match } from "solid-js";
 function checkIsCSSLength(str) {
   if (typeof str !== "string")
     return false;
@@ -43,20 +23,592 @@ const spacing = {
 };
 function fromEntries(entries) {
   return entries.reduce((acc, [key, value]) => {
-    return __spreadProps(__spreadValues({}, acc), { [key]: value });
+    return { ...acc, [key]: value };
   }, {});
 }
 const getSpacingValue = (spacingKey, theme) => {
   var _a, _b;
   const maybeSpaceingOrDefault = (_b = (_a = theme == null ? void 0 : theme.space) != null ? _a : theme == null ? void 0 : theme.spacing) != null ? _b : spacing;
-  const safeSpacings = fromEntries(Object.entries(maybeSpaceingOrDefault).map(([spaceKey, value]) => [
-    spaceKey,
-    typeof value === "number" ? `${value}px` : value
-  ]));
+  const safeSpacings = fromEntries(
+    Object.entries(maybeSpaceingOrDefault).map(([spaceKey, value]) => [
+      spaceKey,
+      typeof value === "number" ? `${value}px` : value
+    ])
+  );
   const spacingVal = safeSpacings[spacingKey];
   const isCSSLength = checkIsCSSLength(spacingVal);
   return isCSSLength ? spacingVal : void 0;
 };
+const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
+const Properties = /* @__PURE__ */ new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
+const ChildProperties = /* @__PURE__ */ new Set(["innerHTML", "textContent", "innerText", "children"]);
+const Aliases = {
+  className: "class",
+  htmlFor: "for"
+};
+const PropAliases = {
+  class: "className",
+  formnovalidate: "formNoValidate",
+  ismap: "isMap",
+  nomodule: "noModule",
+  playsinline: "playsInline",
+  readonly: "readOnly"
+};
+const DelegatedEvents = /* @__PURE__ */ new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
+const SVGElements = /* @__PURE__ */ new Set([
+  "altGlyph",
+  "altGlyphDef",
+  "altGlyphItem",
+  "animate",
+  "animateColor",
+  "animateMotion",
+  "animateTransform",
+  "circle",
+  "clipPath",
+  "color-profile",
+  "cursor",
+  "defs",
+  "desc",
+  "ellipse",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDistantLight",
+  "feFlood",
+  "feFuncA",
+  "feFuncB",
+  "feFuncG",
+  "feFuncR",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "fePointLight",
+  "feSpecularLighting",
+  "feSpotLight",
+  "feTile",
+  "feTurbulence",
+  "filter",
+  "font",
+  "font-face",
+  "font-face-format",
+  "font-face-name",
+  "font-face-src",
+  "font-face-uri",
+  "foreignObject",
+  "g",
+  "glyph",
+  "glyphRef",
+  "hkern",
+  "image",
+  "line",
+  "linearGradient",
+  "marker",
+  "mask",
+  "metadata",
+  "missing-glyph",
+  "mpath",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "set",
+  "stop",
+  "svg",
+  "switch",
+  "symbol",
+  "text",
+  "textPath",
+  "tref",
+  "tspan",
+  "use",
+  "view",
+  "vkern"
+]);
+const SVGNamespace = {
+  xlink: "http://www.w3.org/1999/xlink",
+  xml: "http://www.w3.org/XML/1998/namespace"
+};
+function reconcileArrays(parentNode, a, b) {
+  let bLength = b.length, aEnd = a.length, bEnd = bLength, aStart = 0, bStart = 0, after = a[aEnd - 1].nextSibling, map = null;
+  while (aStart < aEnd || bStart < bEnd) {
+    if (a[aStart] === b[bStart]) {
+      aStart++;
+      bStart++;
+      continue;
+    }
+    while (a[aEnd - 1] === b[bEnd - 1]) {
+      aEnd--;
+      bEnd--;
+    }
+    if (aEnd === aStart) {
+      const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after;
+      while (bStart < bEnd)
+        parentNode.insertBefore(b[bStart++], node);
+    } else if (bEnd === bStart) {
+      while (aStart < aEnd) {
+        if (!map || !map.has(a[aStart]))
+          a[aStart].remove();
+        aStart++;
+      }
+    } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+      const node = a[--aEnd].nextSibling;
+      parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
+      parentNode.insertBefore(b[--bEnd], node);
+      a[aEnd] = b[bEnd];
+    } else {
+      if (!map) {
+        map = /* @__PURE__ */ new Map();
+        let i = bStart;
+        while (i < bEnd)
+          map.set(b[i], i++);
+      }
+      const index = map.get(a[aStart]);
+      if (index != null) {
+        if (bStart < index && index < bEnd) {
+          let i = aStart, sequence = 1, t;
+          while (++i < aEnd && i < bEnd) {
+            if ((t = map.get(a[i])) == null || t !== index + sequence)
+              break;
+            sequence++;
+          }
+          if (sequence > index - bStart) {
+            const node = a[aStart];
+            while (bStart < index)
+              parentNode.insertBefore(b[bStart++], node);
+          } else
+            parentNode.replaceChild(b[bStart++], a[aStart++]);
+        } else
+          aStart++;
+      } else
+        a[aStart++].remove();
+    }
+  }
+}
+const $$EVENTS = "_$DX_DELEGATE";
+function delegateEvents(eventNames, document2 = window.document) {
+  const e = document2[$$EVENTS] || (document2[$$EVENTS] = /* @__PURE__ */ new Set());
+  for (let i = 0, l = eventNames.length; i < l; i++) {
+    const name = eventNames[i];
+    if (!e.has(name)) {
+      e.add(name);
+      document2.addEventListener(name, eventHandler);
+    }
+  }
+}
+function setAttribute(node, name, value) {
+  if (value == null)
+    node.removeAttribute(name);
+  else
+    node.setAttribute(name, value);
+}
+function setAttributeNS(node, namespace, name, value) {
+  if (value == null)
+    node.removeAttributeNS(namespace, name);
+  else
+    node.setAttributeNS(namespace, name, value);
+}
+function className(node, value) {
+  if (value == null)
+    node.removeAttribute("class");
+  else
+    node.className = value;
+}
+function addEventListener(node, name, handler, delegate) {
+  if (delegate) {
+    if (Array.isArray(handler)) {
+      node[`$$${name}`] = handler[0];
+      node[`$$${name}Data`] = handler[1];
+    } else
+      node[`$$${name}`] = handler;
+  } else if (Array.isArray(handler)) {
+    const handlerFn = handler[0];
+    node.addEventListener(name, handler[0] = (e) => handlerFn.call(node, handler[1], e));
+  } else
+    node.addEventListener(name, handler);
+}
+function classList(node, value, prev = {}) {
+  const classKeys = Object.keys(value || {}), prevKeys = Object.keys(prev);
+  let i, len;
+  for (i = 0, len = prevKeys.length; i < len; i++) {
+    const key = prevKeys[i];
+    if (!key || key === "undefined" || value[key])
+      continue;
+    toggleClassKey(node, key, false);
+    delete prev[key];
+  }
+  for (i = 0, len = classKeys.length; i < len; i++) {
+    const key = classKeys[i], classValue = !!value[key];
+    if (!key || key === "undefined" || prev[key] === classValue || !classValue)
+      continue;
+    toggleClassKey(node, key, true);
+    prev[key] = classValue;
+  }
+  return prev;
+}
+function style(node, value, prev = {}) {
+  const nodeStyle = node.style;
+  const prevString = typeof prev === "string";
+  if (value == null && prevString || typeof value === "string")
+    return nodeStyle.cssText = value;
+  prevString && (nodeStyle.cssText = void 0, prev = {});
+  value || (value = {});
+  let v, s;
+  for (s in prev) {
+    value[s] == null && nodeStyle.removeProperty(s);
+    delete prev[s];
+  }
+  for (s in value) {
+    v = value[s];
+    if (v !== prev[s]) {
+      nodeStyle.setProperty(s, v);
+      prev[s] = v;
+    }
+  }
+  return prev;
+}
+function spread(node, accessor, isSVG, skipChildren) {
+  if (typeof accessor === "function") {
+    createRenderEffect((current) => spreadExpression(node, accessor(), current, isSVG, skipChildren));
+  } else
+    spreadExpression(node, accessor, void 0, isSVG, skipChildren);
+}
+function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+  props || (props = {});
+  for (const prop in prevProps) {
+    if (!(prop in props)) {
+      if (prop === "children")
+        continue;
+      assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
+    }
+  }
+  for (const prop in props) {
+    if (prop === "children") {
+      if (!skipChildren)
+        insertExpression(node, props.children);
+      continue;
+    }
+    const value = props[prop];
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
+  }
+}
+function getNextElement(template) {
+  let node, key;
+  if (!sharedConfig.context || !(node = sharedConfig.registry.get(key = getHydrationKey()))) {
+    return template.cloneNode(true);
+  }
+  if (sharedConfig.completed)
+    sharedConfig.completed.add(node);
+  sharedConfig.registry.delete(key);
+  return node;
+}
+function toPropertyName(name) {
+  return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
+}
+function toggleClassKey(node, key, value) {
+  const classNames = key.trim().split(/\s+/);
+  for (let i = 0, nameLen = classNames.length; i < nameLen; i++)
+    node.classList.toggle(classNames[i], value);
+}
+function assignProp(node, prop, value, prev, isSVG, skipRef) {
+  let isCE, isProp, isChildProp;
+  if (prop === "style")
+    return style(node, value, prev);
+  if (prop === "classList")
+    return classList(node, value, prev);
+  if (value === prev)
+    return prev;
+  if (prop === "ref") {
+    if (!skipRef) {
+      value(node);
+    }
+  } else if (prop.slice(0, 3) === "on:") {
+    const e = prop.slice(3);
+    prev && node.removeEventListener(e, prev);
+    value && node.addEventListener(e, value);
+  } else if (prop.slice(0, 10) === "oncapture:") {
+    const e = prop.slice(10);
+    prev && node.removeEventListener(e, prev, true);
+    value && node.addEventListener(e, value, true);
+  } else if (prop.slice(0, 2) === "on") {
+    const name = prop.slice(2).toLowerCase();
+    const delegate = DelegatedEvents.has(name);
+    if (!delegate && prev) {
+      const h = Array.isArray(prev) ? prev[0] : prev;
+      node.removeEventListener(name, h);
+    }
+    if (delegate || value) {
+      addEventListener(node, name, value, delegate);
+      delegate && delegateEvents([name]);
+    }
+  } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
+    if (prop === "class" || prop === "className")
+      className(node, value);
+    else if (isCE && !isProp && !isChildProp)
+      node[toPropertyName(prop)] = value;
+    else
+      node[PropAliases[prop] || prop] = value;
+  } else {
+    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
+    if (ns)
+      setAttributeNS(node, ns, prop, value);
+    else
+      setAttribute(node, Aliases[prop] || prop, value);
+  }
+  return value;
+}
+function eventHandler(e) {
+  const key = `$$${e.type}`;
+  let node = e.composedPath && e.composedPath()[0] || e.target;
+  if (e.target !== node) {
+    Object.defineProperty(e, "target", {
+      configurable: true,
+      value: node
+    });
+  }
+  Object.defineProperty(e, "currentTarget", {
+    configurable: true,
+    get() {
+      return node || document;
+    }
+  });
+  if (sharedConfig.registry && !sharedConfig.done) {
+    sharedConfig.done = true;
+    document.querySelectorAll("[id^=pl-]").forEach((elem) => elem.remove());
+  }
+  while (node !== null) {
+    const handler = node[key];
+    if (handler && !node.disabled) {
+      const data = node[`${key}Data`];
+      data !== void 0 ? handler.call(node, data, e) : handler.call(node, e);
+      if (e.cancelBubble)
+        return;
+    }
+    node = node.host && node.host !== node && node.host instanceof Node ? node.host : node.parentNode;
+  }
+}
+function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
+  props || (props = {});
+  if (!skipChildren && "children" in props) {
+    createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
+  }
+  props.ref && props.ref(node);
+  createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
+  return prevProps;
+}
+function insertExpression(parent, value, current, marker, unwrapArray) {
+  if (sharedConfig.context && !current)
+    current = [...parent.childNodes];
+  while (typeof current === "function")
+    current = current();
+  if (value === current)
+    return current;
+  const t = typeof value, multi = marker !== void 0;
+  parent = multi && current[0] && current[0].parentNode || parent;
+  if (t === "string" || t === "number") {
+    if (sharedConfig.context)
+      return current;
+    if (t === "number")
+      value = value.toString();
+    if (multi) {
+      let node = current[0];
+      if (node && node.nodeType === 3) {
+        node.data = value;
+      } else
+        node = document.createTextNode(value);
+      current = cleanChildren(parent, current, marker, node);
+    } else {
+      if (current !== "" && typeof current === "string") {
+        current = parent.firstChild.data = value;
+      } else
+        current = parent.textContent = value;
+    }
+  } else if (value == null || t === "boolean") {
+    if (sharedConfig.context)
+      return current;
+    current = cleanChildren(parent, current, marker);
+  } else if (t === "function") {
+    createRenderEffect(() => {
+      let v = value();
+      while (typeof v === "function")
+        v = v();
+      current = insertExpression(parent, v, current, marker);
+    });
+    return () => current;
+  } else if (Array.isArray(value)) {
+    const array = [];
+    const currentArray = current && Array.isArray(current);
+    if (normalizeIncomingArray(array, value, current, unwrapArray)) {
+      createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
+      return () => current;
+    }
+    if (sharedConfig.context) {
+      if (!array.length)
+        return current;
+      for (let i = 0; i < array.length; i++) {
+        if (array[i].parentNode)
+          return current = array;
+      }
+    }
+    if (array.length === 0) {
+      current = cleanChildren(parent, current, marker);
+      if (multi)
+        return current;
+    } else if (currentArray) {
+      if (current.length === 0) {
+        appendNodes(parent, array, marker);
+      } else
+        reconcileArrays(parent, current, array);
+    } else {
+      current && cleanChildren(parent);
+      appendNodes(parent, array);
+    }
+    current = array;
+  } else if (value instanceof Node) {
+    if (sharedConfig.context && value.parentNode)
+      return current = multi ? [value] : value;
+    if (Array.isArray(current)) {
+      if (multi)
+        return current = cleanChildren(parent, current, marker, value);
+      cleanChildren(parent, current, null, value);
+    } else if (current == null || current === "" || !parent.firstChild) {
+      parent.appendChild(value);
+    } else
+      parent.replaceChild(value, parent.firstChild);
+    current = value;
+  } else
+    ;
+  return current;
+}
+function normalizeIncomingArray(normalized, array, current, unwrap) {
+  let dynamic = false;
+  for (let i = 0, len = array.length; i < len; i++) {
+    let item = array[i], prev = current && current[i];
+    if (item instanceof Node) {
+      normalized.push(item);
+    } else if (item == null || item === true || item === false)
+      ;
+    else if (Array.isArray(item)) {
+      dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
+    } else if (typeof item === "function") {
+      if (unwrap) {
+        while (typeof item === "function")
+          item = item();
+        dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;
+      } else {
+        normalized.push(item);
+        dynamic = true;
+      }
+    } else {
+      const value = String(item);
+      if (prev && prev.nodeType === 3 && prev.data === value) {
+        normalized.push(prev);
+      } else
+        normalized.push(document.createTextNode(value));
+    }
+  }
+  return dynamic;
+}
+function appendNodes(parent, array, marker) {
+  for (let i = 0, len = array.length; i < len; i++)
+    parent.insertBefore(array[i], marker);
+}
+function cleanChildren(parent, current, marker, replacement) {
+  if (marker === void 0)
+    return parent.textContent = "";
+  const node = replacement || document.createTextNode("");
+  if (current.length) {
+    let inserted = false;
+    for (let i = current.length - 1; i >= 0; i--) {
+      const el = current[i];
+      if (node !== el) {
+        const isParent = el.parentNode === parent;
+        if (!inserted && !i)
+          isParent ? parent.replaceChild(node, el) : parent.insertBefore(node, marker);
+        else
+          isParent && el.remove();
+      } else
+        inserted = true;
+    }
+  } else
+    parent.insertBefore(node, marker);
+  return [node];
+}
+function getHydrationKey() {
+  const hydrate = sharedConfig.context;
+  return `${hydrate.id}${hydrate.count++}`;
+}
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+function createElement(tagName, isSVG = false) {
+  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName);
+}
+function Dynamic(props) {
+  const [p, others] = splitProps(props, ["component"]);
+  const cached = createMemo(() => p.component);
+  return createMemo(() => {
+    const component = cached();
+    switch (typeof component) {
+      case "function":
+        return untrack(() => component(others));
+      case "string":
+        const isSvg = SVGElements.has(component);
+        const el = sharedConfig.context ? getNextElement() : createElement(component, isSvg);
+        spread(el, others, isSvg);
+        return el;
+    }
+  });
+}
+function convertToMaybe(value) {
+  return value != null ? value : void 0;
+}
+function omitProps(value, keys) {
+  return Object.keys(value).filter((k) => !keys.includes(k)).reduce((newObject, k) => {
+    Object.defineProperty(newObject, k, {
+      get() {
+        return value[k];
+      },
+      configurable: true,
+      enumerable: true
+    });
+    return newObject;
+  }, {});
+}
+function createDynamic(source, props) {
+  return createComponent(
+    Dynamic,
+    mergeProps(
+      {
+        get component() {
+          return source();
+        }
+      },
+      props
+    )
+  );
+}
+function createPropsFromAccessors(props) {
+  if (!Object.values(props).every((x) => typeof x === "function"))
+    throw new Error("Please provide an object with accessor values only.");
+  return Object.keys(props).reduce((getterObj, key) => {
+    const accessor = props[key];
+    Object.defineProperty(getterObj, key, {
+      get() {
+        return accessor();
+      },
+      configurable: true,
+      enumerable: true
+    });
+    return getterObj;
+  }, {});
+}
 function getSafeMaxWidth(maxWidth) {
   if (maxWidth === void 0)
     return "100%";
@@ -64,74 +616,83 @@ function getSafeMaxWidth(maxWidth) {
     return `${maxWidth}px`;
   return maxWidth;
 }
-const Center = styled.div`
-  @property --maxWidth {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 100%;
-  }
-
-  --maxWidth: ${(props) => getSafeMaxWidth(props.maxWidth)};
-
-  box-sizing: content-box;
-
-  && {
-    margin-inline-start: auto;
-    margin-inline-end: auto;
-    margin-inline: auto;
+function Center(props) {
+  const propsStyle = () => {
+    var _a;
+    return typeof props.style === "string" ? props.style : Object.entries((_a = props.style) != null ? _a : {}).reduce(
+      (str, [key, value]) => str + `${key}:${value};`,
+      ""
+    );
+  };
+  const maxWidth = () => `--maxWidth: ${getSafeMaxWidth(props.maxWidth)};`;
+  const centerText = () => props.centerText ? "center-text" : "";
+  const centerChildren = () => props.centerChildren ? "center-children" : "";
+  const attrString = () => [centerText(), centerChildren()].filter(Boolean).join(" ");
+  const style2 = () => [propsStyle(), maxWidth()].join("; ");
+  return createDynamic(
+    () => {
+      var _a;
+      return (_a = props.as) != null ? _a : "div";
+    },
+    mergeProps(
+      omitProps(props, ["as", "maxWidth", "centerText", "centerChildren"]),
+      createPropsFromAccessors({
+        style: style2,
+        "data-bedrock-center": attrString
+      })
+    )
+  );
+}
+const ThemeContext = createContext({});
+function ThemeProvider(props) {
+  return /* @__PURE__ */ React.createElement(ThemeContext.Provider, {
+    value: props.theme
+  }, props.children);
+}
+function useTheme() {
+  try {
+    return useContext(ThemeContext);
+  } catch (e) {
+    return {};
   }
-
-  max-inline-size: var(--maxWidth, 100%);
-
-  ${(props) => props.centerChildren ? `
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        ` : ""}
-
-  ${(props) => props.centerText ? `
-          text-align: center;
-        ` : ""}
-`;
-function getSafeBasis(basis) {
-  if (basis === void 0)
+}
+function getSafeMinItemWidth(minItemWidth) {
+  if (minItemWidth === void 0)
     return "159px";
-  if (typeof basis === "number")
-    return `${basis}px`;
-  return basis;
-}
-const ColumnDrop = styled("div")`
-  @property --basis {
-    syntax: "<length-percentage>";
-    inherits: true;
-    initial-value: 159px;
-  }
-
-  @property --gutter {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 0px;
-  }
-
-  --basis: ${(props) => getSafeBasis(props.basis)};
-  --gutter: ${(props) => {
-  var _a;
-  return props.gutter ? (_a = getSpacingValue(props.gutter, props.theme)) != null ? _a : "0px" : "0px";
-}};
-
-  box-sizing: border-box;
-  > * {
-    margin: 0;
-    flex-basis: var(--basis, 159px);
-    flex-grow: ${(props) => props.noStretchedColumns ? "0" : "1"};
-    flex-shrink: 1;
-  }
-
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: var(--gutter, 0px);
-`;
+  if (typeof minItemWidth === "number")
+    return `${minItemWidth}px`;
+  return minItemWidth;
+}
+function ColumnDrop(props) {
+  const theme = useTheme();
+  const propsStyle = () => {
+    var _a;
+    return typeof props.style === "string" ? props.style : Object.entries((_a = props.style) != null ? _a : {}).reduce(
+      (str, [key, value]) => str + `${key}:${value};`,
+      ""
+    );
+  };
+  const gutter = () => {
+    var _a, _b;
+    return `--gutter: ${(_b = getSpacingValue((_a = props.gutter) != null ? _a : "none", theme)) != null ? _b : "0px"}`;
+  };
+  const minItemWidth = () => `--minItemWidth: ${getSafeMinItemWidth(props.minItemWidth)}`;
+  const noStretchedColumns = () => props.noStretchedColumns === true ? "no-stretched-columns" : "";
+  const style2 = () => [propsStyle(), gutter(), minItemWidth()].join("; ");
+  return createDynamic(
+    () => {
+      var _a;
+      return (_a = props.as) != null ? _a : "div";
+    },
+    mergeProps(
+      omitProps(props, ["as", "gutter", "minItemWidth", "noStretchedColumns"]),
+      createPropsFromAccessors({
+        style: style2,
+        "data-bedrock-column-drop": noStretchedColumns
+      })
+    )
+  );
+}
 function fail(msg) {
   throw new Error(msg);
 }
@@ -144,7 +705,9 @@ function assertIsValidWidth(width) {
   }
   const isInvalidArray = Array.isArray(width) && (width.length !== 2 || width[0] > width[1]);
   if (isInvalidArray) {
-    fail(`The second width value, ${width[1]}, is not larger than ${width[0]}. Please provide a value greater than first width value`);
+    fail(
+      `The second width value, ${width[1]}, is not larger than ${width[0]}. Please provide a value greater than first width value`
+    );
   }
 }
 function createContainerQuery(width, maybeRef) {
@@ -183,83 +746,64 @@ function getSafeRatio(ratio) {
   const isRatio = checkIsRatio(ratio);
   return isRatio ? getRatioString(ratio) : void 0;
 }
-const Frame = styled.div`
-  box-sizing: border-box;
-  display: block;
-  inline-size: 100%;
-  position: relative;
-  overflow: hidden;
-
-  ${(props) => {
-  const maybeRatio = getSafeRatio(props.ratio);
-  if (maybeRatio) {
-    return `
-        aspect-ratio: ${maybeRatio};
-      `;
-  }
-  return "";
-}};
-
-  > * {
-    position: absolute;
-
-    inset-block-start: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-
-    inset-block: 0;
-    inset-inline: 0;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  > :is(img, video) {
-    inline-size: 100%;
-    block-size: 100%;
-    size: 100%;
-
-    object-fit: cover;
-    object-position: ${(props) => typeof props.position === "string" ? props.position : "50%"};
-  }
-`;
-const Grid = styled("div")`
-  @property --gutter {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 0;
-  }
-
-  @property --minItemWidth {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 639px;
-  }
-
-  --gutter: ${(props) => {
-  var _a;
-  return props.gutter ? (_a = getSpacingValue(props.gutter, props.theme)) != null ? _a : "0px" : "0px";
-}};
-  --minItemWidth: ${(props) => {
-  var _a;
-  return typeof props.minItemWidth === "string" ? props.minItemWidth : `${(_a = props.minItemWidth) != null ? _a : 0}px`;
-}};
-
-  box-sizing: border-box;
-  > * {
-    margin: 0;
-  }
-
-  display: grid;
-  gap: var(--gutter, 0px);
-
-  grid-template-columns: repeat(
-    auto-fit,
-    minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
+function Frame(props) {
+  const propsStyle = () => {
+    var _a;
+    return typeof props.style === "string" ? props.style : Object.entries((_a = props.style) != null ? _a : {}).reduce(
+      (str, [key, value]) => str + `${key}:${value};`,
+      ""
+    );
+  };
+  const maybeRatioAssesor = () => getSafeRatio(props.ratio);
+  const ratio = () => maybeRatioAssesor() ? `--ratio: ${maybeRatioAssesor()}` : "";
+  const position = () => typeof props.position === "string" ? `--position: ${props.position}` : "50%";
+  const style2 = () => [propsStyle(), ratio(), position()].join("; ");
+  return createDynamic(
+    () => {
+      var _a;
+      return (_a = props.as) != null ? _a : "div";
+    },
+    mergeProps(
+      omitProps(props, ["as", "ratio", "position"]),
+      createPropsFromAccessors({
+        style: style2,
+        "data-bedrock-frame": () => ""
+      })
+    )
   );
-`;
+}
+function Grid(props) {
+  const theme = useTheme();
+  const propsStyle = () => {
+    var _a;
+    return typeof props.style === "string" ? props.style : Object.entries((_a = props.style) != null ? _a : {}).reduce(
+      (str, [key, value]) => str + `${key}:${value};`,
+      ""
+    );
+  };
+  const gutter = () => {
+    var _a, _b;
+    return `--gutter: ${(_b = getSpacingValue((_a = props.gutter) != null ? _a : "none", theme)) != null ? _b : "0px"};`;
+  };
+  const minItemWidth = () => {
+    var _a;
+    return `--minItemWidth: ${typeof props.minItemWidth === "string" ? props.minItemWidth : `${(_a = props.minItemWidth) != null ? _a : 0}px`};`;
+  };
+  const style2 = () => [propsStyle(), gutter(), minItemWidth()].join("; ");
+  return createDynamic(
+    () => {
+      var _a;
+      return (_a = props.as) != null ? _a : "div";
+    },
+    mergeProps(
+      omitProps(props, ["as", "gutter", "minItemWidth"]),
+      createPropsFromAccessors({
+        style: style2,
+        "data-bedrock-grid": () => ""
+      })
+    )
+  );
+}
 const PIXELS_PER_INCH = 96;
 function parseUnit(str) {
   var _a;
@@ -270,7 +814,7 @@ function parseUnit(str) {
 }
 function toPX(str, element) {
   if (!str)
-    return null;
+    return void 0;
   const elementOrBody = element != null ? element : document.body;
   const safeStr = (str != null ? str : "px").trim().toLowerCase();
   switch (safeStr) {
@@ -279,7 +823,7 @@ function toPX(str, element) {
     case "vh":
     case "vw":
     case "%":
-      return null;
+      return void 0;
     case "ch":
     case "ex":
       return getSizeBrutal(safeStr, elementOrBody);
@@ -302,17 +846,19 @@ function toPX(str, element) {
     default: {
       const [value, units] = parseUnit(safeStr);
       if (isNaN(value))
-        return null;
+        return void 0;
       if (!units)
         return value;
       const px = toPX(units, element);
-      return typeof px === "number" ? value * px : null;
+      return typeof px === "number" ? value * px : void 0;
     }
   }
 }
 function getPropertyInPX(element, prop) {
   var _a;
-  const [value, units] = parseUnit(getComputedStyle(element).getPropertyValue(prop));
+  const [value, units] = parseUnit(
+    getComputedStyle(element).getPropertyValue(prop)
+  );
   return value * ((_a = toPX(units, element)) != null ? _a : 1);
 }
 function getSizeBrutal(unit, element) {
@@ -323,15 +869,8 @@ function getSizeBrutal(unit, element) {
   element.removeChild(testDIV);
   return size;
 }
+const MIN_HEIGHT = 1;
 const isBrowser = typeof window === "object" && typeof document === "object" && document.nodeType === 9;
-const RowSpanner = styled.div`
-  grid-row: span var(--rows, 1);
-
-  > * {
-    display: block;
-    height: 100%;
-  }
-`;
 const Resizer = (props) => {
   const [rowSpan, setRowSpan] = createSignal(1);
   const [node, nodeRef] = createSignal();
@@ -340,65 +879,91 @@ const Resizer = (props) => {
     init();
   });
   createEffect(() => {
-    const ref = node();
-    if (ref === void 0 || ref === null)
+    const ref = convertToMaybe(node());
+    if (ref === void 0)
       return;
     const cleanup = registerCallback(ref, ({ target }) => {
       var _a;
       setRowSpan(1);
       const gapString = props.gutter ? (_a = getSpacingValue(props.gutter, theme)) != null ? _a : "1px" : "1px";
-      const maybeGap = isBrowser ? toPX(gapString, target) : null;
-      const gap = Math.max(maybeGap != null ? maybeGap : 1, 1);
+      const maybeGap = isBrowser ? toPX(gapString, target) : void 0;
+      const gap = Math.max(maybeGap != null ? maybeGap : MIN_HEIGHT, MIN_HEIGHT);
       const [child] = Array.from(target.children);
       const height = 1 + Math.min(target.scrollHeight, child.scrollHeight);
-      const rowHeight = Math.ceil(height / gap);
+      const rowHeight = Math.max(Math.ceil(height / gap), MIN_HEIGHT);
       setRowSpan(rowHeight);
     });
     onCleanup(cleanup);
   });
-  return /* @__PURE__ */ React.createElement(RowSpanner, {
-    style: `--rows: ${rowSpan()}`,
+  return /* @__PURE__ */ React.createElement("div", {
+    style: `grid-row: span ${rowSpan()};`,
     ref: nodeRef
   }, props.children);
 };
-const MasonryGridWrapper = styled(Grid)`
-  grid-template-rows: 1px;
-`;
 const MasonryGrid = (props) => {
   const childrenMemo = children(() => props.children);
   const emptyResolvedChildren = [];
   const wrappedChildren = emptyResolvedChildren.concat(childrenMemo()).filter(Boolean).map((child) => /* @__PURE__ */ React.createElement(Resizer, {
     gutter: props.gutter
   }, child));
-  return /* @__PURE__ */ React.createElement(MasonryGridWrapper, __spreadValues({}, props), wrappedChildren);
+  return /* @__PURE__ */ React.createElement(Grid, {
+    style: "grid-template-rows: 1px;",
+    ...props
+  }, wrappedChildren);
 };
+const justifyMap$1 = {
+  start: "justify:start",
+  end: "justify:end",
+  center: "justify:center"
+};
+const alignMap$1 = {
+  start: "align:start",
+  end: "align:end",
+  center: "align:center",
+  stretch: "align:stretch"
+};
+function InlineCluster(props) {
+  const theme = useTheme();
+  const propsStyle = () => {
+    var _a;
+    return typeof props.style === "string" ? props.style : Object.entries((_a = props.style) != null ? _a : {}).reduce(
+      (str, [key, value]) => str + `${key}:${value};`,
+      ""
+    );
+  };
+  const gutter = () => {
+    var _a, _b;
+    return `--gutter: ${(_b = getSpacingValue((_a = props.gutter) != null ? _a : "none", theme)) != null ? _b : "0px"};`;
+  };
+  const justify = () => props.justify !== void 0 ? justifyMap$1[props.justify] : void 0;
+  const align = () => props.align !== void 0 ? alignMap$1[props.align] : void 0;
+  const style2 = () => [propsStyle(), gutter()].join("; ");
+  const attrAssesor = () => [justify(), align()].filter(Boolean).join(" ");
+  return createDynamic(
+    () => {
+      var _a;
+      return (_a = props.as) != null ? _a : "div";
+    },
+    mergeProps(
+      omitProps(props, ["as", "gutter", "justify", "align"]),
+      createPropsFromAccessors({
+        style: style2,
+        "data-bedrock-inline-cluster": attrAssesor
+      })
+    )
+  );
+}
 const justifyMap = {
-  start: "flex-start",
-  end: "flex-end",
-  center: "center"
+  start: "justify:start",
+  end: "justify:end",
+  center: "justify:center"
+};
+const alignMap = {
+  start: "align:start",
+  end: "align:end",
+  center: "align:center",
+  stretch: "align:stretch"
 };
-const alignMap = __spreadProps(__spreadValues({}, justifyMap), {
-  stretch: "stretch"
-});
-const InlineCluster = styled.div`
-  --gutter: ${(props) => {
-  var _a;
-  return props.gutter ? (_a = getSpacingValue(props.gutter, props.theme)) != null ? _a : "0px" : "0px";
-}};
-
-  box-sizing: border-box;
-  > * {
-    margin: 0;
-  }
-
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gutter, 0px);
-
-  justify-content: ${(props) => typeof props.justify !== "undefined" && justifyMap[props.justify] ? justifyMap[props.justify] : justifyMap.start};
-
-  align-items: ${(props) => typeof props.align !== "undefined" && alignMap[props.align] ? alignMap[props.align] : alignMap.start};
-`;
 function shouldUseSwitch(switchAt) {
   if (typeof switchAt === "number" && switchAt > -1) {
     return true;
@@ -408,35 +973,47 @@ function shouldUseSwitch(switchAt) {
   }
   return false;
 }
-const Inline = styled(InlineCluster)`
-  @property --switchAt {
-    syntax: "<length-percentage>";
-    inherits: true;
-    initial-value: 0;
-  }
-
-  flex-wrap: nowrap;
-  ${(props) => props.stretch === "all" ? `& > *  { 
-        flex: 1;
-      }` : props.stretch === "start" ? `& > :first-child { 
-        flex: 1;
-      }` : props.stretch === "end" ? `& > :last-child { 
-        flex: 1;
-      }` : typeof props.stretch === "number" ? `& > :nth-child(${props.stretch + 1}) { 
-        flex: 1;
-      }` : ""}
-
-  ${(props) => shouldUseSwitch(props.switchAt) ? `
-          --switchAt: ${typeof props.switchAt === "string" ? props.switchAt : `${props.switchAt}px`};
-          flex-wrap: wrap;
-          > * {
-            min-inline-size: fit-content;
-            flex-basis: calc(
-              (var(--switchAt) - (100% - var(--gutter, 0px))) * 999
-            );
-          }
-        ` : ""}
-`;
+function Inline(props) {
+  const theme = useTheme();
+  const propsStyle = () => {
+    var _a;
+    return typeof props.style === "string" ? props.style : Object.entries((_a = props.style) != null ? _a : {}).reduce(
+      (str, [key, value]) => str + `${key}:${value};`,
+      ""
+    );
+  };
+  const gutter = () => {
+    var _a, _b;
+    return `--gutter: ${(_b = getSpacingValue((_a = props.gutter) != null ? _a : "none", theme)) != null ? _b : "0px"};`;
+  };
+  const minItemWidth = () => props.minItemWidth ? `--minItemWidth: ${typeof props.minItemWidth === "string" ? props.minItemWidth : `${props.minItemWidth}px`};` : void 0;
+  const switchAt = () => shouldUseSwitch(props.switchAt) ? `--switchAt: ${typeof props.switchAt === "string" ? props.switchAt : `${props.switchAt}px`};` : void 0;
+  const justify = () => props.justify !== void 0 ? justifyMap[props.justify] : void 0;
+  const align = () => props.align !== void 0 ? alignMap[props.align] : void 0;
+  const stretch = () => props.stretch ? `stretch:${props.stretch}` : void 0;
+  const style2 = () => [propsStyle(), gutter(), switchAt(), minItemWidth()].join("; ");
+  const attrAssesor = () => [justify(), align(), stretch()].filter(Boolean).join(" ");
+  return createDynamic(
+    () => {
+      var _a;
+      return (_a = props.as) != null ? _a : "div";
+    },
+    mergeProps(
+      omitProps(props, [
+        "as",
+        "gutter",
+        "justify",
+        "align",
+        "stretch",
+        "switchAt"
+      ]),
+      createPropsFromAccessors({
+        style: style2,
+        "data-bedrock-inline": attrAssesor
+      })
+    )
+  );
+}
 const validKeys = /* @__PURE__ */ new Set([
   "left",
   "right",
@@ -484,249 +1061,287 @@ function paddingToString(theme, padding) {
     console.error("Invalid padding Type");
   }
   const getPadding = paddingOrDefault(theme);
-  return typeof padding === "object" && !Array.isArray(padding) ? Object.entries(padding).reduce((acc, [key, val]) => validKeys.has(key) ? acc + keyToProperty(key, getPadding(val)) : acc, "") : padding !== void 0 ? `padding: ${Array.from(Array.isArray(padding) ? padding : [padding]).map((pad) => getPadding(pad)).join(" ")};` : "";
-}
-const PadBox = styled.div`
-  box-sizing: border-box;
-  ${(props) => paddingToString(props.theme, props.padding)}
-`;
-const Reel = styled.div`
-  box-sizing: border-box;
-  > * {
-    margin: 0;
-    scroll-snap-align: start;
-  }
-
-  --gutter: ${(props) => {
-  var _a;
-  return props.gutter ? (_a = getSpacingValue(props.gutter, props.theme)) != null ? _a : "0px" : "0px";
-}};
-
-  display: flex;
-  gap: var(--gutter, 0px);
-
-  overflow-x: scroll;
-
-  scroll-snap-type: ${(props) => {
-  switch (props.snapType) {
-    case "none": {
-      return "none";
-    }
-    case "proximity": {
-      return "x proximity";
-    }
-    case "mandatory": {
-      return "x mandatory";
-    }
-    default: {
-      return "none";
+  return typeof padding === "object" && !Array.isArray(padding) ? Object.entries(padding).reduce(
+    (acc, [key, val]) => validKeys.has(key) ? acc + keyToProperty(key, getPadding(val)) : acc,
+    ""
+  ) : padding !== void 0 ? `padding: ${Array.from(Array.isArray(padding) ? padding : [padding]).map((pad) => getPadding(pad)).join(" ")};` : "";
+}
+function PadBox(props) {
+  const theme = useTheme();
+  const propsStyle = () => {
+    var _a;
+    return typeof props.style === "string" ? props.style : Object.entries((_a = props.style) != null ? _a : {}).reduce(
+      (str, [key, value]) => str + `${key}:${value};`,
+      ""
+    );
+  };
+  const padding = () => paddingToString(theme, props.padding);
+  const style2 = () => [propsStyle(), padding()].join("; ");
+  return createDynamic(
+    () => {
+      var _a;
+      return (_a = props.as) != null ? _a : "div";
+    },
+    mergeProps(
+      omitProps(props, ["as", "padding"]),
+      createPropsFromAccessors({
+        style: style2,
+        "data-bedrock-padbox": () => ""
+      })
+    )
+  );
+}
+function Reel(props) {
+  const theme = useTheme();
+  const propsStyle = () => {
+    var _a;
+    return typeof props.style === "string" ? props.style : Object.entries((_a = props.style) != null ? _a : {}).reduce(
+      (str, [key, value]) => str + `${key}:${value};`,
+      ""
+    );
+  };
+  const gutter = () => {
+    var _a, _b;
+    return `--gutter: ${(_b = getSpacingValue((_a = props.gutter) != null ? _a : "none", theme)) != null ? _b : "0px"};`;
+  };
+  const snapType = () => {
+    switch (props.snapType) {
+      case "none": {
+        return "snapType:none";
+      }
+      case "proximity": {
+        return "snapType:proximity";
+      }
+      case "mandatory": {
+        return "snapType:mandatory";
+      }
+      default: {
+        return "snapType:none";
+      }
     }
-  }
-}};
-`;
-const Stack = styled("div")`
-  @property --gutter {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 0;
-  }
-
-  --gutter: ${(props) => {
-  var _a, _b;
-  return (_b = getSpacingValue((_a = props.gutter) != null ? _a : "none", props.theme)) != null ? _b : "0px";
-}};
-  box-sizing: border-box;
-  > * {
-    margin: 0;
-  }
-  display: flex;
-  flex-direction: column;
-
-  gap: var(--gutter, 0px);
-  align-content: start;
-
-  & > [data-bedrock-column] {
-    grid-column: span 1 / auto;
-  }
-`;
+  };
+  const style2 = () => [propsStyle(), gutter()].join("; ");
+  return createDynamic(
+    () => {
+      var _a;
+      return (_a = props.as) != null ? _a : "div";
+    },
+    mergeProps(
+      omitProps(props, ["as", "gutter"]),
+      createPropsFromAccessors({ style: style2, "data-bedrock-reel": snapType })
+    )
+  );
+}
+function Stack(props) {
+  const theme = useTheme();
+  const propsStyle = () => {
+    var _a;
+    return typeof props.style === "string" ? props.style : Object.entries((_a = props.style) != null ? _a : {}).reduce(
+      (str, [key, value]) => str + `${key}:${value};`,
+      ""
+    );
+  };
+  const gutter = () => {
+    var _a, _b;
+    return `--gutter: ${(_b = getSpacingValue((_a = props.gutter) != null ? _a : "none", theme)) != null ? _b : "0px"};`;
+  };
+  const style2 = () => [propsStyle(), gutter()].join("; ");
+  return createDynamic(
+    () => {
+      var _a;
+      return (_a = props.as) != null ? _a : "div";
+    },
+    mergeProps(
+      omitProps(props, ["as", "gutter"]),
+      createPropsFromAccessors({ style: style2, "data-bedrock-stack": () => "" })
+    )
+  );
+}
 const fractions = {
-  "1/4": "1fr 3fr",
-  "1/3": "1fr 2fr",
-  "1/2": "1fr 1fr",
-  "2/3": "2fr 1fr",
-  "3/4": "3fr 1fr",
-  "auto-start": `auto 1fr`,
-  "auto-end": `1fr auto`
+  "1/4": "fraction:1/4",
+  "1/3": "fraction:1/3",
+  "1/2": "fraction:1/2",
+  "2/3": "fraction:2/3",
+  "3/4": "fraction:3/4",
+  "auto-start": `fraction:auto-start`,
+  "auto-end": `fraction:auto-end`
 };
-const SplitBase = styled.div`
-    box-sizing: border-box;
-    > * {
-      margin: 0;
-    }
-    
-    --gutter: ${(props) => {
-  var _a;
-  return props.gutter ? (_a = getSpacingValue(props.gutter, props.theme)) != null ? _a : "0px" : "0px";
-}};
-  
-    display: grid;
-    gap: var(--gutter, 0px);
-    grid-template-columns: ${({ fraction = "1/2" }) => {
-  var _a;
-  return (_a = fractions[fraction]) != null ? _a : fractions["1/2"];
-}}};
-  `;
+function SplitBase(props) {
+  const theme = useTheme();
+  const propsStyle = () => {
+    var _a;
+    return typeof props.style === "string" ? props.style : Object.entries((_a = props.style) != null ? _a : {}).reduce(
+      (str, [key, value]) => str + `${key}:${value};`,
+      ""
+    );
+  };
+  const gutter = () => {
+    var _a, _b;
+    return `--gutter: ${(_b = getSpacingValue((_a = props.gutter) != null ? _a : "none", theme)) != null ? _b : "0px"};`;
+  };
+  const fraction = () => {
+    var _a, _b;
+    return (_b = fractions[(_a = props.fraction) != null ? _a : "1/2"]) != null ? _b : fractions["1/2"];
+  };
+  const style2 = () => [propsStyle(), gutter()].join("; ");
+  return createDynamic(
+    () => {
+      var _a;
+      return (_a = props.as) != null ? _a : "div";
+    },
+    mergeProps(
+      omitProps(props, ["as", "gutter", "fraction"]),
+      createPropsFromAccessors({
+        style: style2,
+        "data-bedrock-split": fraction
+      })
+    )
+  );
+}
 const Split = (props) => {
-  const maybePx = typeof props.switchAt === "string" ? toPX(props.switchAt) : props.switchAt;
-  const widthToSwitchAt = maybePx && maybePx > -1 ? maybePx : 0;
-  const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt, props.ref);
+  const [local, rest] = splitProps(props, ["switchAt", "fraction"]);
+  const maybePx = typeof local.switchAt === "string" ? toPX(local.switchAt) : local.switchAt;
+  const widthToSwitchAt = Math.max(maybePx != null ? maybePx : 0, 0);
+  const [shouldSwitch, nodeRef] = createContainerQuery(
+    widthToSwitchAt,
+    props.ref
+  );
   return /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Match, {
     when: shouldSwitch() === false
-  }, /* @__PURE__ */ React.createElement(SplitBase, __spreadProps(__spreadValues({
-    fraction: props.fraction
-  }, props), {
+  }, /* @__PURE__ */ React.createElement(SplitBase, {
+    fraction: local.fraction,
+    ...rest,
     ref: nodeRef
-  }))), /* @__PURE__ */ React.createElement(Match, {
+  })), /* @__PURE__ */ React.createElement(Match, {
     when: shouldSwitch() === true
-  }, /* @__PURE__ */ React.createElement(Stack, __spreadProps(__spreadValues({}, props), {
+  }, /* @__PURE__ */ React.createElement(Stack, {
+    ...rest,
     ref: nodeRef
-  }))));
+  })));
 };
 function getSafeMinHeight(minHeight) {
   if (typeof minHeight === "number")
     return `${minHeight}px`;
   return minHeight && checkIsCSSLength(minHeight) ? minHeight : "100vh";
 }
-const CoverWrapper = styled.div`
-  @property --gutter {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 0;
-  }
-
-  @property --minHeight {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 100vh;
-  }
-
-  --gutter: ${(props) => {
-  var _a;
-  return props.gutter ? (_a = getSpacingValue(props.gutter, props.theme)) != null ? _a : "0px" : "0px";
-}};
-
-  --minHeight: ${(props) => getSafeMinHeight(props.minHeight)};
-
-  > * {
-    margin: 0;
-  }
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--gutter, 0px);
-
-  min-block-size: var(--minHeight, 100vh);
-
-  > [data-bedrock-cover-centered] {
-    margin-block-start: auto;
-    margin-block-end: auto;
-
-    ${({ stretchContent }) => stretchContent === true ? `
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            > * {
-              flex: 1;
-            }
-          ` : ""};
-  }
-`;
+function CoverWrapper(props) {
+  const theme = useTheme();
+  const propsStyle = () => {
+    var _a;
+    return typeof props.style === "string" ? props.style : Object.entries((_a = props.style) != null ? _a : {}).reduce(
+      (str, [key, value]) => str + `${key}:${value};`,
+      ""
+    );
+  };
+  const gutter = () => {
+    var _a, _b;
+    return `--gutter: ${(_b = getSpacingValue((_a = props.gutter) != null ? _a : "none", theme)) != null ? _b : "0px"};`;
+  };
+  const minHeight = () => `--minHeight: ${getSafeMinHeight(props.minHeight)};`;
+  const stretchContent = () => props.stretchContent === true ? "stretch-content" : "";
+  const style2 = () => [propsStyle(), gutter(), minHeight()].join("; ");
+  return createDynamic(
+    () => {
+      var _a;
+      return (_a = props.as) != null ? _a : "div";
+    },
+    mergeProps(
+      omitProps(props, ["as", "minHeight", "stretchContent"]),
+      createPropsFromAccessors({
+        style: style2,
+        "data-bedrock-cover": stretchContent
+      })
+    )
+  );
+}
 const Cover = (props) => {
-  return /* @__PURE__ */ React.createElement(CoverWrapper, __spreadValues({}, props), props.top, /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React.createElement(CoverWrapper, {
+    ...props
+  }, props.top, /* @__PURE__ */ React.createElement("div", {
     "data-bedrock-cover-centered": true
   }, props.children), props.bottom);
 };
-const ColumnsBase = styled.div`
-  @property --gutter {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 0;
-  }
-
-  @property --columns {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 1;
-  }
-  --gutter: ${(props) => {
-  var _a;
-  return props.gutter ? (_a = getSpacingValue(props.gutter, props.theme)) != null ? _a : "0px" : "0px";
-}};
-
-  --columns: ${(props) => props.columns && props.columns > 0 ? props.columns : 1};
-
-  box-sizing: border-box;
-  > * {
-    margin: 0;
-  }
-
-  display: grid;
-  grid-template-columns: repeat(var(--columns, 1), 1fr);
-  gap: var(--gutter, 0px);
-  grid-auto-flow: row ${({ dense = false }) => dense === true ? "dense" : ""};
-`;
+function ColumnsBase(props) {
+  const theme = useTheme();
+  const propsStyle = () => {
+    var _a;
+    return typeof props.style === "string" ? props.style : Object.entries((_a = props.style) != null ? _a : {}).reduce(
+      (str, [key, value]) => str + `${key}:${value};`,
+      ""
+    );
+  };
+  const gutter = () => {
+    var _a, _b;
+    return `--gutter: ${(_b = getSpacingValue((_a = props.gutter) != null ? _a : "none", theme)) != null ? _b : "0px"};`;
+  };
+  const columns = () => `--columns: ${props.columns && props.columns > 0 ? props.columns : 1};`;
+  const dense = () => props.dense ? "dense" : "";
+  const style2 = () => [propsStyle(), gutter(), columns()].join("; ");
+  return createDynamic(
+    () => {
+      var _a;
+      return (_a = props.as) != null ? _a : "div";
+    },
+    mergeProps(
+      omitProps(props, ["as", "gutter", "columns", "dense"]),
+      createPropsFromAccessors({
+        style: style2,
+        "data-bedrock-columns": dense
+      })
+    )
+  );
+}
 const Columns = (props) => {
-  const maybePx = typeof props.switchAt === "string" ? toPX(props.switchAt) : props.switchAt;
-  const widthToSwitchAt = maybePx && maybePx > -1 ? maybePx : 0;
+  const [local, rest] = splitProps(props, ["switchAt", "columns", "dense"]);
+  const maybePx = typeof local.switchAt === "string" ? toPX(local.switchAt) : local.switchAt;
+  const widthToSwitchAt = Math.max(maybePx != null ? maybePx : 0, 0);
   const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt);
   const combineRef = (ref) => {
     var _a;
     nodeRef(ref);
-    (_a = props.ref) == null ? void 0 : _a.call(props, ref);
+    (_a = rest.ref) == null ? void 0 : _a.call(rest, ref);
   };
   return /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Match, {
     when: shouldSwitch() === false
-  }, /* @__PURE__ */ React.createElement(ColumnsBase, __spreadProps(__spreadValues({}, props), {
+  }, /* @__PURE__ */ React.createElement(ColumnsBase, {
+    columns: local.columns,
+    dense: local.dense,
+    ...rest,
     ref: combineRef
-  }))), /* @__PURE__ */ React.createElement(Match, {
+  })), /* @__PURE__ */ React.createElement(Match, {
     when: shouldSwitch() === true
-  }, /* @__PURE__ */ React.createElement(Stack, __spreadProps(__spreadValues({}, props), {
+  }, /* @__PURE__ */ React.createElement(Stack, {
+    ...rest,
     ref: combineRef
-  }))));
+  })));
 };
 const safeSpan = (span) => {
   return typeof span === "number" ? span : 1;
 };
-const Column = styled.div`
-  @property --span {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 1;
-  }
-
-  --span: ${(props) => safeSpan(props.colSpan)};
-
-  grid-column: span min(var(--span, 1), var(--columns, 1));
-
-  ${(props) => props.offsetStart || props.offsetEnd ? `
-    display: contents; 
-    > * {
-        grid-column: span min(var(--span, 1), var(--columns, 1));
-    }
-    ` : ""}
-
-  ${(props) => props.offsetStart && props.offsetStart > 0 ? `
-  &::before {
-    content: "";
-    grid-column: span min(${props.offsetStart}, var(--columns, 1));
-  }
-  ` : ""}
-
-${(props) => props.offsetEnd && props.offsetEnd > 0 ? `
-  &::after {
-    content: "";
-    grid-column: span min(${props.offsetEnd}, var(--columns, 1));
-  }
-  ` : ""}
-`;
-export { Center, Column, ColumnDrop, Columns, Cover, Frame, Grid, Inline, InlineCluster, MasonryGrid, PadBox, Reel, Split, Stack, checkIsCSSLength, createContainerQuery, getSpacingValue, spacing };
+function Column(props) {
+  const propsStyle = () => {
+    var _a;
+    return typeof props.style === "string" ? props.style : Object.entries((_a = props.style) != null ? _a : {}).reduce(
+      (str, [key, value]) => str + `${key}:${value};`,
+      ""
+    );
+  };
+  const span = () => `--span: ${safeSpan(props.span)};`;
+  const offsetStart = () => props.offsetStart && props.offsetStart > 0 ? `--offsetStart: ${props.offsetStart};` : "";
+  const offsetEnd = () => props.offsetEnd && props.offsetEnd > 0 ? `--offsetEnd: ${props.offsetEnd};` : "";
+  const style2 = () => [propsStyle(), span(), offsetStart(), offsetEnd()].join("; ");
+  return createDynamic(
+    () => {
+      var _a;
+      return (_a = props.as) != null ? _a : "div";
+    },
+    mergeProps(
+      omitProps(props, ["as", "span", "offsetStart", "offsetEnd"]),
+      createPropsFromAccessors({
+        style: style2,
+        "data-bedrock-column": () => ""
+      })
+    )
+  );
+}
+export { Center, Column, ColumnDrop, Columns, ColumnsBase, Cover, Frame, Grid, Inline, InlineCluster, MasonryGrid, PadBox, Reel, Split, SplitBase, Stack, ThemeProvider, checkIsCSSLength, createContainerQuery, getSpacingValue, spacing, useTheme };