@bedrock-layout/solid 0.8.0 → 0.9.0

package/lib/create-container-query.d.ts

@@ -0,0 +1,2 @@
+import { Accessor, Setter } from "solid-js";
+export declare function createContainerQuery<T extends Element>(width?: number, maxWidth?: number): [Accessor<boolean>, Setter<T | undefined>];

package/lib/index.cjs.js

@@ -1,11 +1,11 @@
-"use strict";var A=Object.defineProperty,j=Object.defineProperties;var z=Object.getOwnPropertyDescriptors;var u=Object.getOwnPropertySymbols;var v=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var h=(e,t,n)=>t in e?A(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,g=(e,t)=>{for(var n in t||(t={}))v.call(t,n)&&h(e,n,t[n]);if(u)for(var n of u(t))$.call(t,n)&&h(e,n,t[n]);return e},y=(e,t)=>j(e,z(t));var S=(e,t)=>{var n={};for(var i in e)v.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(e!=null&&u)for(var i of u(e))t.indexOf(i)<0&&$.call(e,i)&&(n[i]=e[i]);return n};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var a=require("solid-styled-components");function p(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}const b={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"};function I(e){return e.reduce((t,[n,i])=>y(g({},t),{[n]:i}),{})}const s=(e,t)=>{var r,c;const n=(c=(r=t==null?void 0:t.space)!=null?r:t==null?void 0:t.spacing)!=null?c:b,o=I(Object.entries(n).map(([f,x])=>[f,typeof x=="number"?`${x}px`:x]))[e];return p(o)?o:void 0};function R(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const W=a.styled.div`
+"use strict";var L=Object.defineProperty,V=Object.defineProperties;var D=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var k=(e,t,n)=>t in e?L(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))C.call(t,n)&&k(e,n,t[n]);if(y)for(var n of y(t))z.call(t,n)&&k(e,n,t[n]);return e},m=(e,t)=>V(e,D(t));var A=(e,t)=>{var n={};for(var r in e)C.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&y)for(var r of y(e))t.indexOf(r)<0&&z.call(e,r)&&(n[r]=e[r]);return n};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var s=require("solid-styled-components"),R=require("@bedrock-layout/register-resize-callback"),g=require("solid-js");function b(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}const v={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"};function W(e){return e.reduce((t,[n,r])=>m(f({},t),{[n]:r}),{})}const u=(e,t)=>{var i,c;const n=(c=(i=t==null?void 0:t.space)!=null?i:t==null?void 0:t.spacing)!=null?c:v,a=W(Object.entries(n).map(([l,d])=>[l,typeof d=="number"?`${d}px`:d]))[e];return b(a)?a:void 0};function X(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const F=s.styled.div`
   @property --maxWidth {
     syntax: "<length-percentage>";
     inherits: false;
     initial-value: 100%;
   }
 
-  --maxWidth: ${e=>R(e.maxWidth)};
+  --maxWidth: ${e=>X(e.maxWidth)};
 
   box-sizing: content-box;
 
@@ -17,16 +17,16 @@
 
   max-inline-size: var(--maxWidth, 100%);
 
-  ${e=>e.centerChildren?a.css`
+  ${e=>e.centerChildren?s.css`
           display: flex;
           flex-direction: column;
           align-items: center;
         `:""}
 
-  ${e=>e.centerText?a.css`
+  ${e=>e.centerText?s.css`
           text-align: center;
         `:""}
-`;function E(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const M=a.styled("div")`
+`;function N(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const _=s.styled("div")`
   @property --basis {
     syntax: "<length-percentage>";
     inherits: true;
@@ -39,8 +39,8 @@
     initial-value: 0px;
   }
 
-  --basis: ${e=>E(e.basis)};
-  --gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
+  --basis: ${e=>N(e.basis)};
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
 
   box-sizing: border-box;
   > * {
@@ -53,14 +53,14 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--gutter, 0px);
-`;function O(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function P(e){return Array.isArray(e)?e.join("/"):e}function D(e){return O(e)?P(e):void 0}const L=a.styled.div`
+`;function P(e=1,t){if(t!==void 0&&t<=e)throw new Error(`The second width value, ${t}, is not larger than ${e}. Please provide a value greater than first width value`);const[n,r]=g.createSignal(!1),[a,o]=g.createSignal();return g.onMount(()=>{R.init()}),g.createEffect(()=>{const i=a();if(i==null)return;const c=R.registerCallback(i,l=>{var $,w;const d=(w=($=l.borderBoxSize)==null?void 0:$.inlineSize)!=null?w:l.contentRect.width;if(d>0){const T=t===void 0?d<=e:d>=e&&d<=t;r(T)}});g.onCleanup(c)}),[n,o]}function q(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function G(e){return Array.isArray(e)?e.join("/"):e}function H(e){return q(e)?G(e):void 0}const Q=s.styled.div`
   box-sizing: border-box;
   display: block;
   inline-size: 100%;
   position: relative;
   overflow: hidden;
 
-  ${e=>{const t=D(e.ratio);return t?a.css`
+  ${e=>{const t=H(e.ratio);return t?s.css`
         aspect-ratio: ${t};
       `:""}};
 
@@ -88,7 +88,7 @@
     object-fit: cover;
     object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
   }
-`,T=a.styled("div")`
+`,U=s.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -101,7 +101,7 @@
     initial-value: 639px;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
   --minItemWidth: ${e=>{var t;return typeof e.minItemWidth=="string"?e.minItemWidth:`${(t=e.minItemWidth)!=null?t:0}px`}};
 
   box-sizing: border-box;
@@ -116,8 +116,8 @@
     auto-fit,
     minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
   );
-`,d={start:"flex-start",end:"flex-end",center:"center"},m=y(g({},d),{stretch:"stretch"}),C=a.styled.div`
-  --gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
+`,x={start:"flex-start",end:"flex-end",center:"center"},h=m(f({},x),{stretch:"stretch"}),M=s.styled.div`
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
 
   box-sizing: border-box;
   > * {
@@ -128,10 +128,10 @@
   flex-wrap: wrap;
   gap: var(--gutter, 0px);
 
-  justify-content: ${e=>typeof e.justify!="undefined"&&d[e.justify]?d[e.justify]:d.start};
+  justify-content: ${e=>typeof e.justify!="undefined"&&x[e.justify]?x[e.justify]:x.start};
 
-  align-items: ${e=>typeof e.align!="undefined"&&m[e.align]?m[e.align]:m.start};
-`;function V(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const B=a.styled(C)`
+  align-items: ${e=>typeof e.align!="undefined"&&h[e.align]?h[e.align]:h.start};
+`;function J(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const K=s.styled(M)`
   @property --switchAt {
     syntax: "<length-percentage>";
     inherits: true;
@@ -140,7 +140,7 @@
   flex-wrap: nowrap;
   ${e=>e.stretch==="all"?"> *  { flex: 1 }":e.stretch==="start"?"> :first-child { flex: 1 }":e.stretch==="end"?"> :last-child { flex: 1 }":typeof e.stretch=="number"?`> :nth-child(${e.stretch+1}) { flex: 1 }`:""}
 
-  ${e=>V(e.switchAt)?`
+  ${e=>J(e.switchAt)?`
           --switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
           flex-wrap: wrap;
           > * {
@@ -150,17 +150,17 @@
             );
           }
         `:""}
-`,k=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),F=(e,t)=>({left:`padding-inline-start:${t};`,right:`padding-inline-end:${t};`,top:`padding-block-start:${t};`,bottom:`padding-block-end:${t};`,inlineStart:`padding-inline-start:${t};`,inlineEnd:`padding-inline-end:${t};`,blockStart:`padding-block-start:${t};`,blockEnd:`padding-block-end:${t};`})[e];function X(e){return t=>{const n=s(t,e);return n!=null?n:"0px"}}function w(e,t){var l;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const n=new Set(Object.keys((l=e==null?void 0:e.spacing)!=null?l:b));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(r=>n.has(r)):t&&Object.keys(t).every(r=>k.has(r))&&Object.values(t).every(r=>n.has(r)))()||console.error("Invalid padding Type");const o=X(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((r,[c,f])=>k.has(c)?r+F(c,o(f)):r,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(r=>o(r)).join(" ")};`:""}const G=a.styled.div`
+`,j=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),Y=(e,t)=>({left:`padding-inline-start:${t};`,right:`padding-inline-end:${t};`,top:`padding-block-start:${t};`,bottom:`padding-block-end:${t};`,inlineStart:`padding-inline-start:${t};`,inlineEnd:`padding-inline-end:${t};`,blockStart:`padding-block-start:${t};`,blockEnd:`padding-block-end:${t};`})[e];function Z(e){return t=>{const n=u(t,e);return n!=null?n:"0px"}}function ee(e,t){var o;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const n=new Set(Object.keys((o=e==null?void 0:e.spacing)!=null?o:v));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(i=>n.has(i)):t&&Object.keys(t).every(i=>j.has(i))&&Object.values(t).every(i=>n.has(i)))()||console.error("Invalid padding Type");const a=Z(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((i,[c,l])=>j.has(c)?i+Y(c,a(l)):i,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(i=>a(i)).join(" ")};`:""}const te=s.styled.div`
   box-sizing: border-box;
-  ${e=>(console.log(w(e.theme,e.padding)),w(e.theme,e.padding))}
-`,_=a.styled.div`
+  ${e=>ee(e.theme,e.padding)}
+`,ne=s.styled.div`
   box-sizing: border-box;
   > * {
     margin: 0;
     scroll-snap-align: start;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
 
   display: flex;
   gap: var(--gutter, 0px);
@@ -168,14 +168,14 @@
   overflow-x: scroll;
 
   scroll-snap-type: ${({snapType:e="none"})=>{switch(e){case"none":return"none";case"proximity":return"x proximity";case"mandatory":return"x mandatory";default:return"none"}}};
-`,q=a.styled("div")`
+`,B=s.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
     initial-value: 0;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
   box-sizing: border-box;
   > * {
     margin: 0;
@@ -189,7 +189,18 @@
   & > [data-bedrock-column] {
     grid-column: span 1 / auto;
   }
-`;function H(e){return typeof e=="number"?`${e}px`:e&&p(e)?e:"100vh"}const K=a.styled.div`
+`,E={"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"},re=s.styled.div`
+    box-sizing: border-box;
+    > * {
+      margin: 0;
+    }
+    
+    --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
+  
+    display: grid;
+    gap: var(--gutter, 0px);
+    grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=E[e])!=null?t:E["1/2"]}}};
+  `,ie=e=>{const t=typeof e.switchAt=="string"?S(e.switchAt):e.switchAt,n=t&&t>-1?t:0;console.log(n);const[r,a]=P(n),o=i=>{var c;a(i),(c=e.ref)==null||c.call(e,i)};return React.createElement(g.Switch,null,React.createElement(g.Match,{when:r()===!1},React.createElement(re,f({as:e.as,ref:o,fraction:e.fraction},e))),React.createElement(g.Match,{when:r()===!0},React.createElement(B,f({as:e.as,ref:o},e))))};function O(e){var r;e=String(e);const t=parseFloat(e),[,n]=(r=e.match(/[\d.\-+]*\s*(.*)/))!=null?r:["",""];return[t,n]}function p(e,t){var a;const[n,r]=O(getComputedStyle(e).getPropertyValue(t));return n*((a=S(r,e))!=null?a:1)}function I(e,t){const n=document.createElement("div");n.style.height="128"+e,t.appendChild(n);const r=p(n,"height")/128;return t.removeChild(n),r}function S(e,t){if(!e)return null;const r=typeof window=="object"&&typeof document=="object"&&document.nodeType===9?I("in",document.body):96,a=t!=null?t:document.body,o=(e!=null?e:"px").trim().toLowerCase();switch(o){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return I(o,a);case"em":return p(a,"font-size");case"rem":return p(document.body,"font-size");case"in":return r;case"cm":return r/2.54;case"mm":return r/25.4;case"pt":return r/72;case"pc":return r/6;case"px":return 1;default:{const[i,c]=O(o);if(isNaN(i))return null;if(!c)return i;const l=S(c,t);return typeof l=="number"?i*l:null}}}function ae(e){return typeof e=="number"?`${e}px`:e&&b(e)?e:"100vh"}const oe=s.styled.div`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -202,9 +213,9 @@
     initial-value: 100vh;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
 
-  --minHeight: ${e=>H(e.minHeight)};
+  --minHeight: ${e=>ae(e.minHeight)};
 
   > * {
     margin: 0;
@@ -229,4 +240,4 @@
             }
           `:""};
   }
-`,N=e=>{const l=e,{top:t,bottom:n,children:i}=l,o=S(l,["top","bottom","children"]);return React.createElement(K,g({},o),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)};exports.Center=W;exports.ColumnDrop=M;exports.Cover=N;exports.Frame=L;exports.Grid=T;exports.Inline=B;exports.InlineCluster=C;exports.PadBox=G;exports.Reel=_;exports.Stack=q;exports.checkIsCSSLength=p;exports.getSpacingValue=s;exports.spacing=b;
+`,se=e=>{const o=e,{top:t,bottom:n,children:r}=o,a=A(o,["top","bottom","children"]);return React.createElement(oe,f({},a),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)};exports.Center=F;exports.ColumnDrop=_;exports.Cover=se;exports.Frame=Q;exports.Grid=U;exports.Inline=K;exports.InlineCluster=M;exports.PadBox=te;exports.Reel=ne;exports.Split=ie;exports.Stack=B;exports.checkIsCSSLength=b;exports.createContainerQuery=P;exports.getSpacingValue=u;exports.spacing=v;

package/lib/index.d.ts

@@ -1,11 +1,13 @@
 export * from "./spacing-constants";
 export * from "./center";
 export * from "./column-drop";
+export * from "./create-container-query";
 export * from "./frame";
 export * from "./grid";
 export * from "./inline-cluster";
 export * from "./inline";
 export * from "./padbox";
 export * from "./reel";
+export * from "./split";
 export * from "./stack";
 export * from "./cover";

package/lib/index.m.js

@@ -30,6 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { styled, css } from "solid-styled-components";
+import { init, registerCallback } from "@bedrock-layout/register-resize-callback";
+import { createSignal, onMount, createEffect, onCleanup, Switch, Match } from "solid-js";
 function checkIsCSSLength(str) {
   if (typeof str !== "string")
     return false;
@@ -141,6 +143,31 @@ const ColumnDrop = styled("div")`
   flex-wrap: wrap;
   gap: var(--gutter, 0px);
 `;
+function createContainerQuery(width = 1, maxWidth) {
+  if (maxWidth !== void 0 && maxWidth <= width) {
+    throw new Error(`The second width value, ${maxWidth}, is not larger than ${width}. Please provide a value greater than first width value`);
+  }
+  const [matches, setMatch] = createSignal(false);
+  const [node, nodeRef] = createSignal();
+  onMount(() => {
+    init();
+  });
+  createEffect(() => {
+    const ref = node();
+    if (ref === void 0 || ref === null)
+      return;
+    const cleanup = registerCallback(ref, (entry) => {
+      var _a, _b;
+      const nodeWidth = (_b = (_a = entry.borderBoxSize) == null ? void 0 : _a.inlineSize) != null ? _b : entry.contentRect.width;
+      if (nodeWidth > 0) {
+        const newMatch = maxWidth === void 0 ? nodeWidth <= width : nodeWidth >= width && nodeWidth <= maxWidth;
+        setMatch(newMatch);
+      }
+    });
+    onCleanup(cleanup);
+  });
+  return [matches, nodeRef];
+}
 function checkIsRatio(ratio) {
   const isCorrectArray = Array.isArray(ratio) && ratio.length === 2 && ratio.every(Number.isFinite);
   return isCorrectArray || typeof ratio === "string" && /^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(ratio);
@@ -336,7 +363,7 @@ function paddingToString(theme, padding) {
 }
 const PadBox = styled.div`
   box-sizing: border-box;
-  ${(props) => (console.log(paddingToString(props.theme, props.padding)), paddingToString(props.theme, props.padding))}
+  ${(props) => paddingToString(props.theme, props.padding)}
 `;
 const Reel = styled.div`
   box-sizing: border-box;
@@ -397,6 +424,120 @@ const Stack = styled("div")`
     grid-column: span 1 / auto;
   }
 `;
+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`
+};
+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"];
+}}};
+  `;
+const Split = (props) => {
+  const maybePx = typeof props.switchAt === "string" ? toPX(props.switchAt) : props.switchAt;
+  const widthToSwitchAt = maybePx && maybePx > -1 ? maybePx : 0;
+  console.log(widthToSwitchAt);
+  const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt);
+  const combineRef = (ref) => {
+    var _a;
+    nodeRef(ref);
+    (_a = props.ref) == null ? void 0 : _a.call(props, ref);
+  };
+  return /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Match, {
+    when: shouldSwitch() === false
+  }, /* @__PURE__ */ React.createElement(SplitBase, __spreadValues({
+    as: props.as,
+    ref: combineRef,
+    fraction: props.fraction
+  }, props))), /* @__PURE__ */ React.createElement(Match, {
+    when: shouldSwitch() === true
+  }, /* @__PURE__ */ React.createElement(Stack, __spreadValues({
+    as: props.as,
+    ref: combineRef
+  }, props))));
+};
+function parseUnit(str) {
+  var _a;
+  str = String(str);
+  const num = parseFloat(str);
+  const [, unit] = (_a = str.match(/[\d.\-+]*\s*(.*)/)) != null ? _a : ["", ""];
+  return [num, unit];
+}
+function getPropertyInPX(element, prop) {
+  var _a;
+  const [value, units] = parseUnit(getComputedStyle(element).getPropertyValue(prop));
+  return value * ((_a = toPX(units, element)) != null ? _a : 1);
+}
+function getSizeBrutal(unit, element) {
+  const testDIV = document.createElement("div");
+  testDIV.style["height"] = "128" + unit;
+  element.appendChild(testDIV);
+  const size = getPropertyInPX(testDIV, "height") / 128;
+  element.removeChild(testDIV);
+  return size;
+}
+function toPX(str, element) {
+  if (!str)
+    return null;
+  const isBrowser = typeof window === "object" && typeof document === "object" && document.nodeType === 9;
+  const PIXELS_PER_INCH = isBrowser ? getSizeBrutal("in", document.body) : 96;
+  const elementOrBody = element != null ? element : document.body;
+  const safeStr = (str != null ? str : "px").trim().toLowerCase();
+  switch (safeStr) {
+    case "vmin":
+    case "vmax":
+    case "vh":
+    case "vw":
+    case "%":
+      return null;
+    case "ch":
+    case "ex":
+      return getSizeBrutal(safeStr, elementOrBody);
+    case "em":
+      return getPropertyInPX(elementOrBody, "font-size");
+    case "rem":
+      return getPropertyInPX(document.body, "font-size");
+    case "in":
+      return PIXELS_PER_INCH;
+    case "cm":
+      return PIXELS_PER_INCH / 2.54;
+    case "mm":
+      return PIXELS_PER_INCH / 25.4;
+    case "pt":
+      return PIXELS_PER_INCH / 72;
+    case "pc":
+      return PIXELS_PER_INCH / 6;
+    case "px":
+      return 1;
+    default: {
+      const [value, units] = parseUnit(safeStr);
+      if (isNaN(value))
+        return null;
+      if (!units)
+        return value;
+      const px = toPX(units, element);
+      return typeof px === "number" ? value * px : null;
+    }
+  }
+}
 function getSafeMinHeight(minHeight) {
   if (typeof minHeight === "number")
     return `${minHeight}px`;
@@ -452,4 +593,4 @@ const Cover = (props) => {
     "data-bedrock-cover-centered": true
   }, props.children), props.bottom);
 };
-export { Center, ColumnDrop, Cover, Frame, Grid, Inline, InlineCluster, PadBox, Reel, Stack, checkIsCSSLength, getSpacingValue, spacing };
+export { Center, ColumnDrop, Cover, Frame, Grid, Inline, InlineCluster, PadBox, Reel, Split, Stack, checkIsCSSLength, createContainerQuery, getSpacingValue, spacing };

package/lib/index.umd.js

@@ -1,11 +1,11 @@
-var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var S=(n,i,r)=>i in n?K(n,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):n[i]=r,y=(n,i)=>{for(var r in i||(i={}))w.call(i,r)&&S(n,r,i[r]);if(x)for(var r of x(i))A.call(i,r)&&S(n,r,i[r]);return n},p=(n,i)=>N(n,U(i));var j=(n,i)=>{var r={};for(var a in n)w.call(n,a)&&i.indexOf(a)<0&&(r[a]=n[a]);if(n!=null&&x)for(var a of x(n))i.indexOf(a)<0&&A.call(n,a)&&(r[a]=n[a]);return r};(function(n,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("solid-styled-components")):typeof define=="function"&&define.amd?define(["exports","solid-styled-components"],i):(n=typeof globalThis!="undefined"?globalThis:n||self,i(n.solid={},n.solidStyledComponents))})(this,function(n,i){"use strict";function r(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}const a={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"};function z(e){return e.reduce((t,[l,d])=>p(y({},t),{[l]:d}),{})}const c=(e,t)=>{var s,g;const l=(g=(s=t==null?void 0:t.space)!=null?s:t==null?void 0:t.spacing)!=null?g:a,o=z(Object.entries(l).map(([h,b])=>[h,typeof b=="number"?`${b}px`:b]))[e];return r(o)?o:void 0};function I(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const R=i.styled.div`
+var ce=Object.defineProperty,oe=Object.defineProperties;var se=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var M=(n,r,s)=>r in n?ce(n,r,{enumerable:!0,configurable:!0,writable:!0,value:s}):n[r]=s,x=(n,r)=>{for(var s in r||(r={}))T.call(r,s)&&M(n,s,r[s]);if(h)for(var s of h(r))B.call(r,s)&&M(n,s,r[s]);return n},S=(n,r)=>oe(n,se(r));var O=(n,r)=>{var s={};for(var o in n)T.call(n,o)&&r.indexOf(o)<0&&(s[o]=n[o]);if(n!=null&&h)for(var o of h(n))r.indexOf(o)<0&&B.call(n,o)&&(s[o]=n[o]);return s};(function(n,r){typeof exports=="object"&&typeof module!="undefined"?r(exports,require("solid-styled-components"),require("@bedrock-layout/register-resize-callback"),require("solid-js")):typeof define=="function"&&define.amd?define(["exports","solid-styled-components","@bedrock-layout/register-resize-callback","solid-js"],r):(n=typeof globalThis!="undefined"?globalThis:n||self,r(n.solid={},n.solidStyledComponents,n.registerResizeCallback,n.solidJs))})(this,function(n,r,s,o){"use strict";function b(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}const v={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"};function L(e){return e.reduce((t,[i,c])=>S(x({},t),{[i]:c}),{})}const g=(e,t)=>{var a,f;const i=(f=(a=t==null?void 0:t.space)!=null?a:t==null?void 0:t.spacing)!=null?f:v,l=L(Object.entries(i).map(([d,y])=>[d,typeof y=="number"?`${y}px`:y]))[e];return b(l)?l:void 0};function V(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const D=r.styled.div`
   @property --maxWidth {
     syntax: "<length-percentage>";
     inherits: false;
     initial-value: 100%;
   }
 
-  --maxWidth: ${e=>I(e.maxWidth)};
+  --maxWidth: ${e=>V(e.maxWidth)};
 
   box-sizing: content-box;
 
@@ -17,16 +17,16 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
 
   max-inline-size: var(--maxWidth, 100%);
 
-  ${e=>e.centerChildren?i.css`
+  ${e=>e.centerChildren?r.css`
           display: flex;
           flex-direction: column;
           align-items: center;
         `:""}
 
-  ${e=>e.centerText?i.css`
+  ${e=>e.centerText?r.css`
           text-align: center;
         `:""}
-`;function W(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const C=i.styled("div")`
+`;function W(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const X=r.styled("div")`
   @property --basis {
     syntax: "<length-percentage>";
     inherits: true;
@@ -40,7 +40,7 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
   }
 
   --basis: ${e=>W(e.basis)};
-  --gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
 
   box-sizing: border-box;
   > * {
@@ -53,14 +53,14 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
   display: flex;
   flex-wrap: wrap;
   gap: var(--gutter, 0px);
-`;function E(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function M(e){return Array.isArray(e)?e.join("/"):e}function O(e){return E(e)?M(e):void 0}const T=i.styled.div`
+`;function k(e=1,t){if(t!==void 0&&t<=e)throw new Error(`The second width value, ${t}, is not larger than ${e}. Please provide a value greater than first width value`);const[i,c]=o.createSignal(!1),[l,u]=o.createSignal();return o.onMount(()=>{s.init()}),o.createEffect(()=>{const a=l();if(a==null)return;const f=s.registerCallback(a,d=>{var C,P;const y=(P=(C=d.borderBoxSize)==null?void 0:C.inlineSize)!=null?P:d.contentRect.width;if(y>0){const ae=t===void 0?y<=e:y>=e&&y<=t;c(ae)}});o.onCleanup(f)}),[i,u]}function F(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function N(e){return Array.isArray(e)?e.join("/"):e}function _(e){return F(e)?N(e):void 0}const q=r.styled.div`
   box-sizing: border-box;
   display: block;
   inline-size: 100%;
   position: relative;
   overflow: hidden;
 
-  ${e=>{const t=O(e.ratio);return t?i.css`
+  ${e=>{const t=_(e.ratio);return t?r.css`
         aspect-ratio: ${t};
       `:""}};
 
@@ -88,7 +88,7 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
     object-fit: cover;
     object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
   }
-`,P=i.styled("div")`
+`,G=r.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -101,7 +101,7 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
     initial-value: 639px;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
   --minItemWidth: ${e=>{var t;return typeof e.minItemWidth=="string"?e.minItemWidth:`${(t=e.minItemWidth)!=null?t:0}px`}};
 
   box-sizing: border-box;
@@ -116,8 +116,8 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
     auto-fit,
     minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
   );
-`,f={start:"flex-start",end:"flex-end",center:"center"},m=p(y({},f),{stretch:"stretch"}),v=i.styled.div`
-  --gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
+`,m={start:"flex-start",end:"flex-end",center:"center"},p=S(x({},m),{stretch:"stretch"}),z=r.styled.div`
+  --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
 
   box-sizing: border-box;
   > * {
@@ -128,10 +128,10 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
   flex-wrap: wrap;
   gap: var(--gutter, 0px);
 
-  justify-content: ${e=>typeof e.justify!="undefined"&&f[e.justify]?f[e.justify]:f.start};
+  justify-content: ${e=>typeof e.justify!="undefined"&&m[e.justify]?m[e.justify]:m.start};
 
-  align-items: ${e=>typeof e.align!="undefined"&&m[e.align]?m[e.align]:m.start};
-`;function D(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const L=i.styled(v)`
+  align-items: ${e=>typeof e.align!="undefined"&&p[e.align]?p[e.align]:p.start};
+`;function H(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const Q=r.styled(z)`
   @property --switchAt {
     syntax: "<length-percentage>";
     inherits: true;
@@ -140,7 +140,7 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
   flex-wrap: nowrap;
   ${e=>e.stretch==="all"?"> *  { flex: 1 }":e.stretch==="start"?"> :first-child { flex: 1 }":e.stretch==="end"?"> :last-child { flex: 1 }":typeof e.stretch=="number"?`> :nth-child(${e.stretch+1}) { flex: 1 }`:""}
 
-  ${e=>D(e.switchAt)?`
+  ${e=>H(e.switchAt)?`
           --switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
           flex-wrap: wrap;
           > * {
@@ -150,17 +150,17 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
             );
           }
         `:""}
-`,$=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),V=(e,t)=>({left:`padding-inline-start:${t};`,right:`padding-inline-end:${t};`,top:`padding-block-start:${t};`,bottom:`padding-block-end:${t};`,inlineStart:`padding-inline-start:${t};`,inlineEnd:`padding-inline-end:${t};`,blockStart:`padding-block-start:${t};`,blockEnd:`padding-block-end:${t};`})[e];function B(e){return t=>{const l=c(t,e);return l!=null?l:"0px"}}function k(e,t){var u;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const l=new Set(Object.keys((u=e==null?void 0:e.spacing)!=null?u:a));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(s=>l.has(s)):t&&Object.keys(t).every(s=>$.has(s))&&Object.values(t).every(s=>l.has(s)))()||console.error("Invalid padding Type");const o=B(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((s,[g,h])=>$.has(g)?s+V(g,o(h)):s,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(s=>o(s)).join(" ")};`:""}const F=i.styled.div`
+`,A=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),U=(e,t)=>({left:`padding-inline-start:${t};`,right:`padding-inline-end:${t};`,top:`padding-block-start:${t};`,bottom:`padding-block-end:${t};`,inlineStart:`padding-inline-start:${t};`,inlineEnd:`padding-inline-end:${t};`,blockStart:`padding-block-start:${t};`,blockEnd:`padding-block-end:${t};`})[e];function K(e){return t=>{const i=g(t,e);return i!=null?i:"0px"}}function Y(e,t){var u;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const i=new Set(Object.keys((u=e==null?void 0:e.spacing)!=null?u:v));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(a=>i.has(a)):t&&Object.keys(t).every(a=>A.has(a))&&Object.values(t).every(a=>i.has(a)))()||console.error("Invalid padding Type");const l=K(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((a,[f,d])=>A.has(f)?a+U(f,l(d)):a,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(a=>l(a)).join(" ")};`:""}const Z=r.styled.div`
   box-sizing: border-box;
-  ${e=>(console.log(k(e.theme,e.padding)),k(e.theme,e.padding))}
-`,X=i.styled.div`
+  ${e=>Y(e.theme,e.padding)}
+`,J=r.styled.div`
   box-sizing: border-box;
   > * {
     margin: 0;
     scroll-snap-align: start;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
 
   display: flex;
   gap: var(--gutter, 0px);
@@ -168,14 +168,14 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
   overflow-x: scroll;
 
   scroll-snap-type: ${({snapType:e="none"})=>{switch(e){case"none":return"none";case"proximity":return"x proximity";case"mandatory":return"x mandatory";default:return"none"}}};
-`,G=i.styled("div")`
+`,j=r.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
     initial-value: 0;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
   box-sizing: border-box;
   > * {
     margin: 0;
@@ -189,7 +189,18 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
   & > [data-bedrock-column] {
     grid-column: span 1 / auto;
   }
-`;function _(e){return typeof e=="number"?`${e}px`:e&&r(e)?e:"100vh"}const q=i.styled.div`
+`,R={"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"},ee=r.styled.div`
+    box-sizing: border-box;
+    > * {
+      margin: 0;
+    }
+    
+    --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
+  
+    display: grid;
+    gap: var(--gutter, 0px);
+    grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=R[e])!=null?t:R["1/2"]}}};
+  `,te=e=>{const t=typeof e.switchAt=="string"?w(e.switchAt):e.switchAt,i=t&&t>-1?t:0;console.log(i);const[c,l]=k(i),u=a=>{var f;l(a),(f=e.ref)==null||f.call(e,a)};return React.createElement(o.Switch,null,React.createElement(o.Match,{when:c()===!1},React.createElement(ee,x({as:e.as,ref:u,fraction:e.fraction},e))),React.createElement(o.Match,{when:c()===!0},React.createElement(j,x({as:e.as,ref:u},e))))};function E(e){var c;e=String(e);const t=parseFloat(e),[,i]=(c=e.match(/[\d.\-+]*\s*(.*)/))!=null?c:["",""];return[t,i]}function $(e,t){var l;const[i,c]=E(getComputedStyle(e).getPropertyValue(t));return i*((l=w(c,e))!=null?l:1)}function I(e,t){const i=document.createElement("div");i.style.height="128"+e,t.appendChild(i);const c=$(i,"height")/128;return t.removeChild(i),c}function w(e,t){if(!e)return null;const c=typeof window=="object"&&typeof document=="object"&&document.nodeType===9?I("in",document.body):96,l=t!=null?t:document.body,u=(e!=null?e:"px").trim().toLowerCase();switch(u){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return I(u,l);case"em":return $(l,"font-size");case"rem":return $(document.body,"font-size");case"in":return c;case"cm":return c/2.54;case"mm":return c/25.4;case"pt":return c/72;case"pc":return c/6;case"px":return 1;default:{const[a,f]=E(u);if(isNaN(a))return null;if(!f)return a;const d=w(f,t);return typeof d=="number"?a*d:null}}}function ne(e){return typeof e=="number"?`${e}px`:e&&b(e)?e:"100vh"}const re=r.styled.div`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -202,9 +213,9 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
     initial-value: 100vh;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
 
-  --minHeight: ${e=>_(e.minHeight)};
+  --minHeight: ${e=>ne(e.minHeight)};
 
   > * {
     margin: 0;
@@ -229,4 +240,4 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
             }
           `:""};
   }
-`,H=e=>{const u=e,{top:t,bottom:l,children:d}=u,o=j(u,["top","bottom","children"]);return React.createElement(q,y({},o),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)};n.Center=R,n.ColumnDrop=C,n.Cover=H,n.Frame=T,n.Grid=P,n.Inline=L,n.InlineCluster=v,n.PadBox=F,n.Reel=X,n.Stack=G,n.checkIsCSSLength=r,n.getSpacingValue=c,n.spacing=a,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
+`,ie=e=>{const u=e,{top:t,bottom:i,children:c}=u,l=O(u,["top","bottom","children"]);return React.createElement(re,x({},l),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)};n.Center=D,n.ColumnDrop=X,n.Cover=ie,n.Frame=q,n.Grid=G,n.Inline=Q,n.InlineCluster=z,n.PadBox=Z,n.Reel=J,n.Split=te,n.Stack=j,n.checkIsCSSLength=b,n.createContainerQuery=k,n.getSpacingValue=g,n.spacing=v,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});

package/lib/split.d.ts

@@ -0,0 +1,15 @@
+import { Component, JSX } from "solid-js";
+import { CSSLength, SpacingOptions } from "./spacing-constants";
+import { StackProps } from "./stack";
+declare type FractionTypes = "auto-start" | "auto-end" | "1/4" | "1/3" | "1/2" | "2/3" | "3/4";
+interface SplitBaseProps {
+    gutter?: SpacingOptions;
+    fraction?: FractionTypes;
+}
+export interface SplitProps extends StackProps, SplitBaseProps {
+    switchAt?: number | CSSLength;
+    as?: Component | keyof JSX.IntrinsicElements;
+    ref?: (ref: HTMLElement) => void;
+}
+export declare const Split: Component<SplitProps>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bedrock-layout/solid",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "solid.js port of bedrock-layout primitives",
   "sideEffects": false,
   "private": false,
@@ -46,6 +46,9 @@
     "solid-js": "^1.3.7",
     "solid-styled-components": "^0.27.4"
   },
+  "dependencies": {
+    "@bedrock-layout/register-resize-callback": "^1.1.0"
+  },
   "scripts": {
     "test": "echo \"Error: run tests from root\" && exit 1",
     "lint": "eslint --ignore-path .gitignore .",
@@ -59,5 +62,5 @@
   "bugs": {
     "url": "https://github.com/Bedrock-Layouts/Solid-Bedrock/issues"
   },
-  "gitHead": "6a87cc2d65eb589c4b6b2583e437f7d107033e51"
+  "gitHead": "cbca187f5e2b28548d68ff4c2936f0e65a147f93"
 }