@bedrock-layout/solid 0.11.10 → 0.12.0

package/lib/index.umd.js

@@ -1,318 +1 @@
-(function(r,i){typeof exports=="object"&&typeof module!="undefined"?i(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"],i):(r=typeof globalThis!="undefined"?globalThis:r||self,i(r.solid={},r.solidStyledComponents,r.registerResizeCallback,r.solidJs))})(this,function(r,i,l,s){"use strict";var be=Object.defineProperty,ve=Object.defineProperties;var pe=Object.getOwnPropertyDescriptors;var W=Object.getOwnPropertySymbols;var $e=Object.prototype.hasOwnProperty,we=Object.prototype.propertyIsEnumerable;var B=(r,i,l)=>i in r?be(r,i,{enumerable:!0,configurable:!0,writable:!0,value:l}):r[i]=l,m=(r,i)=>{for(var l in i||(i={}))$e.call(i,l)&&B(r,l,i[l]);if(W)for(var l of W(i))we.call(i,l)&&B(r,l,i[l]);return r},h=(r,i)=>ve(r,pe(i));function $(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 w={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 O(e){return e.reduce((t,[n,a])=>h(m({},t),{[n]:a}),{})}const d=(e,t)=>{var o,f;const n=(f=(o=t==null?void 0:t.space)!=null?o:t==null?void 0:t.spacing)!=null?f:w,c=O(Object.entries(n).map(([g,y])=>[g,typeof y=="number"?`${y}px`:y]))[e];return $(c)?c:void 0};function V(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const L=i.styled.div`
-  @property --maxWidth {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 100%;
-  }
-
-  --maxWidth: ${e=>V(e.maxWidth)};
-
-  box-sizing: content-box;
-
-  && {
-    margin-inline-start: auto;
-    margin-inline-end: auto;
-    margin-inline: auto;
-  }
-
-  max-inline-size: var(--maxWidth, 100%);
-
-  ${e=>e.centerChildren?`
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        `:""}
-
-  ${e=>e.centerText?`
-          text-align: center;
-        `:""}
-`;function D(e){return e===void 0?"159px":typeof e=="number"?`${e}px`:e}const X=i.styled("div")`
-  @property --basis {
-    syntax: "<length-percentage>";
-    inherits: true;
-    initial-value: 159px;
-  }
-
-  @property --gutter {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 0px;
-  }
-
-  --basis: ${e=>D(e.basis)};
-  --gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
-
-  box-sizing: border-box;
-  > * {
-    margin: 0;
-    flex-basis: var(--basis, 159px);
-    flex-grow: ${e=>e.noStretchedColumns?"0":"1"};
-    flex-shrink: 1;
-  }
-
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: var(--gutter, 0px);
-`;function S(e){throw new Error(e)}function H(e){typeof e!="number"&&!Array.isArray(e)&&S("width must be a number or an array of two numbers"),Array().concat(e).some(n=>n<0)&&S("width value(s) must be 0 or greater"),Array.isArray(e)&&(e.length!==2||e[0]>e[1])&&S(`The second width value, ${e[1]}, is not larger than ${e[0]}. Please provide a value greater than first width value`)}function A(e,t){H(e);const[n,a]=s.createSignal(!1),[c,u]=s.createSignal();return s.onMount(()=>{l.init()}),s.createEffect(()=>{if(c()===void 0||c()===null)return;t&&t(c());const o=l.registerCallback(c(),f=>{var y,x;const g=(x=(y=f.borderBoxSize)==null?void 0:y.inlineSize)!=null?x:f.contentRect.width;if(g>0){const z=Array.isArray(e)?g>=e[0]&&g<=e[1]:g<=e;a(z)}});s.onCleanup(o)}),[n,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 G(e){return Array.isArray(e)?e.join("/"):e}function N(e){return F(e)?G(e):void 0}const _=i.styled.div`
-  box-sizing: border-box;
-  display: block;
-  inline-size: 100%;
-  position: relative;
-  overflow: hidden;
-
-  ${e=>{const t=N(e.ratio);return t?`
-        aspect-ratio: ${t};
-      `:""}};
-
-  > * {
-    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: ${e=>typeof e.position=="string"?e.position:"50%"};
-  }
-`,j=i.styled("div")`
-  @property --gutter {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 0;
-  }
-
-  @property --minItemWidth {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 639px;
-  }
-
-  --gutter: ${e=>{var t;return e.gutter&&(t=d(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;
-  > * {
-    margin: 0;
-  }
-
-  display: grid;
-  gap: var(--gutter, 0px);
-
-  grid-template-columns: repeat(
-    auto-fit,
-    minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
-  );
-`,b=96;function M(e){var a;e=String(e);const t=parseFloat(e),[,n]=(a=e.match(/[\d.\-+]*\s*(.*)/))!=null?a:["",""];return[t,n]}function v(e,t){if(!e)return null;const n=t!=null?t:document.body,a=(e!=null?e:"px").trim().toLowerCase();switch(a){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return q(a,n);case"em":return k(n,"font-size");case"rem":return k(document.body,"font-size");case"in":return b;case"cm":return b/2.54;case"mm":return b/25.4;case"pt":return b/72;case"pc":return b/6;case"px":return 1;default:{const[c,u]=M(a);if(isNaN(c))return null;if(!u)return c;const o=v(u,t);return typeof o=="number"?c*o:null}}}function k(e,t){var c;const[n,a]=M(getComputedStyle(e).getPropertyValue(t));return n*((c=v(a,e))!=null?c:1)}function q(e,t){const n=document.createElement("div");n.style.height="128"+e,t.appendChild(n);const a=k(n,"height")/128;return t.removeChild(n),a}const Q=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,U=i.styled.div`
-  grid-row: span var(--rows, 1);
-
-  > * {
-    display: block;
-    height: 100%;
-  }
-`,K=e=>{const[t,n]=s.createSignal(1),[a,c]=s.createSignal(),u=i.useTheme();return s.onMount(()=>{l.init()}),s.createEffect(()=>{const o=a();if(o==null)return;const f=l.registerCallback(o,({target:g})=>{var T;n(1);const y=e.gutter&&(T=d(e.gutter,u))!=null?T:"1px",x=Q?v(y,g):null,z=Math.max(x!=null?x:1,1),[ye]=Array.from(g.children),he=1+Math.min(g.scrollHeight,ye.scrollHeight),xe=Math.ceil(he/z);n(xe)});s.onCleanup(f)}),React.createElement(U,{style:`--rows: ${t()}`,ref:c},e.children)},Y=i.styled(j)`
-  grid-template-rows: 1px;
-`,Z=e=>{const t=s.children(()=>e.children),a=[].concat(t()).filter(Boolean).map(c=>React.createElement(K,{gutter:e.gutter},c));return React.createElement(Y,m({},e),a)},p={start:"flex-start",end:"flex-end",center:"center"},R=h(m({},p),{stretch:"stretch"}),C=i.styled.div`
-  --gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
-
-  box-sizing: border-box;
-  > * {
-    margin: 0;
-  }
-
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gutter, 0px);
-
-  justify-content: ${e=>typeof e.justify!="undefined"&&p[e.justify]?p[e.justify]:p.start};
-
-  align-items: ${e=>typeof e.align!="undefined"&&R[e.align]?R[e.align]:R.start};
-`;function J(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const ee=i.styled(C)`
-  @property --switchAt {
-    syntax: "<length-percentage>";
-    inherits: true;
-    initial-value: 0;
-  }
-
-  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=>J(e.switchAt)?`
-          --switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
-          flex-wrap: wrap;
-          > * {
-            min-inline-size: fit-content;
-            flex-basis: calc(
-              (var(--switchAt) - (100% - var(--gutter, 0px))) * 999
-            );
-          }
-        `:""}
-`,I=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),te=(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 ne(e){return t=>{const n=d(t,e);return n!=null?n:"0px"}}function re(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 n=new Set(Object.keys((u=e==null?void 0:e.spacing)!=null?u:w));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(o=>n.has(o)):t&&Object.keys(t).every(o=>I.has(o))&&Object.values(t).every(o=>n.has(o)))()||console.error("Invalid padding Type");const c=ne(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((o,[f,g])=>I.has(f)?o+te(f,c(g)):o,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(o=>c(o)).join(" ")};`:""}const ie=i.styled.div`
-  box-sizing: border-box;
-  ${e=>re(e.theme,e.padding)}
-`,ae=i.styled.div`
-  box-sizing: border-box;
-  > * {
-    margin: 0;
-    scroll-snap-align: start;
-  }
-
-  --gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
-
-  display: flex;
-  gap: var(--gutter, 0px);
-
-  overflow-x: scroll;
-
-  scroll-snap-type: ${e=>{switch(e.snapType){case"none":return"none";case"proximity":return"x proximity";case"mandatory":return"x mandatory";default:return"none"}}};
-`,E=i.styled("div")`
-  @property --gutter {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 0;
-  }
-
-  --gutter: ${e=>{var t,n;return(n=d((t=e.gutter)!=null?t:"none",e.theme))!=null?n:"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;
-  }
-`,P={"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"},ce=i.styled.div`
-    box-sizing: border-box;
-    > * {
-      margin: 0;
-    }
-    
-    --gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
-  
-    display: grid;
-    gap: var(--gutter, 0px);
-    grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=P[e])!=null?t:P["1/2"]}}};
-  `,oe=e=>{const t=typeof e.switchAt=="string"?v(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[a,c]=A(n,e.ref);return React.createElement(s.Switch,null,React.createElement(s.Match,{when:a()===!1},React.createElement(ce,h(m({fraction:e.fraction},e),{ref:c}))),React.createElement(s.Match,{when:a()===!0},React.createElement(E,h(m({},e),{ref:c}))))};function se(e){return typeof e=="number"?`${e}px`:e&&$(e)?e:"100vh"}const le=i.styled.div`
-  @property --gutter {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 0;
-  }
-
-  @property --minHeight {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 100vh;
-  }
-
-  --gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
-
-  --minHeight: ${e=>se(e.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:e})=>e===!0?`
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            > * {
-              flex: 1;
-            }
-          `:""};
-  }
-`,ue=e=>React.createElement(le,m({},e),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom),fe=i.styled.div`
-  @property --gutter {
-    syntax: "<length-percentage>";
-    inherits: false;
-    initial-value: 0;
-  }
-
-  @property --columns {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 1;
-  }
-  --gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
-
-  --columns: ${e=>e.columns&&e.columns>0?e.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:e=!1})=>e===!0?"dense":""};
-`,ge=e=>{const t=typeof e.switchAt=="string"?v(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[a,c]=A(n),u=o=>{var f;c(o),(f=e.ref)==null||f.call(e,o)};return React.createElement(s.Switch,null,React.createElement(s.Match,{when:a()===!1},React.createElement(fe,h(m({},e),{ref:u}))),React.createElement(s.Match,{when:a()===!0},React.createElement(E,h(m({},e),{ref:u}))))},de=e=>typeof e=="number"?e:1,me=i.styled.div`
-  @property --span {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 1;
-  }
-
-  --span: ${e=>de(e.colSpan)};
-
-  grid-column: span min(var(--span, 1), var(--columns, 1));
-
-  ${e=>e.offsetStart||e.offsetEnd?`
-    display: contents; 
-    > * {
-        grid-column: span min(var(--span, 1), var(--columns, 1));
-    }
-    `:""}
-
-  ${e=>e.offsetStart&&e.offsetStart>0?`
-  &::before {
-    content: "";
-    grid-column: span min(${e.offsetStart}, var(--columns, 1));
-  }
-  `:""}
-
-${e=>e.offsetEnd&&e.offsetEnd>0?`
-  &::after {
-    content: "";
-    grid-column: span min(${e.offsetEnd}, var(--columns, 1));
-  }
-  `:""}
-`;r.Center=L,r.Column=me,r.ColumnDrop=X,r.Columns=ge,r.Cover=ue,r.Frame=_,r.Grid=j,r.Inline=ee,r.InlineCluster=C,r.MasonryGrid=Z,r.PadBox=ie,r.Reel=ae,r.Split=oe,r.Stack=E,r.checkIsCSSLength=$,r.createContainerQuery=A,r.getSpacingValue=d,r.spacing=w,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(d,l){typeof exports=="object"&&typeof module!="undefined"?l(exports,require("solid-js"),require("@bedrock-layout/register-resize-callback")):typeof define=="function"&&define.amd?define(["exports","solid-js","@bedrock-layout/register-resize-callback"],l):(d=typeof globalThis!="undefined"?globalThis:d||self,l(d.solid={},d.solidJs,d.registerResizeCallback))})(this,function(d,l,j){"use strict";function M(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 Q(e){return e.reduce((t,[n,c])=>({...t,[n]:c}),{})}const S=(e,t)=>{var r,i;const n=(i=(r=t==null?void 0:t.space)!=null?r:t==null?void 0:t.spacing)!=null?i:v,o=Q(Object.entries(n).map(([a,f])=>[a,typeof f=="number"?`${f}px`:f]))[e];return M(o)?o:void 0},Y=["allowfullscreen","async","autofocus","autoplay","checked","controls","default","disabled","formnovalidate","hidden","indeterminate","ismap","loop","multiple","muted","nomodule","novalidate","open","playsinline","readonly","required","reversed","seamless","selected"],Z=new Set(["className","value","readOnly","formNoValidate","isMap","noModule","playsInline",...Y]),p=new Set(["innerHTML","textContent","innerText","children"]),J={className:"class",htmlFor:"for"},L={class:"className",formnovalidate:"formNoValidate",ismap:"isMap",nomodule:"noModule",playsinline:"playsInline",readonly:"readOnly"},ee=new Set(["beforeinput","click","dblclick","contextmenu","focusin","focusout","input","keydown","keyup","mousedown","mousemove","mouseout","mouseover","mouseup","pointerdown","pointermove","pointerout","pointerover","pointerup","touchend","touchmove","touchstart"]),te=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"]),ne={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"};function ie(e,t,n){let c=n.length,o=t.length,s=c,r=0,i=0,a=t[o-1].nextSibling,f=null;for(;r<o||i<s;){if(t[r]===n[i]){r++,i++;continue}for(;t[o-1]===n[s-1];)o--,s--;if(o===r){const u=s<c?i?n[i-1].nextSibling:n[s-i]:a;for(;i<s;)e.insertBefore(n[i++],u)}else if(s===i)for(;r<o;)(!f||!f.has(t[r]))&&t[r].remove(),r++;else if(t[r]===n[s-1]&&n[i]===t[o-1]){const u=t[--o].nextSibling;e.insertBefore(n[i++],t[r++].nextSibling),e.insertBefore(n[--s],u),t[o]=n[s]}else{if(!f){f=new Map;let y=i;for(;y<s;)f.set(n[y],y++)}const u=f.get(t[r]);if(u!=null)if(i<u&&u<s){let y=r,$=1,w;for(;++y<o&&y<s&&!((w=f.get(t[y]))==null||w!==u+$);)$++;if($>u-i){const x=t[r];for(;i<u;)e.insertBefore(n[i++],x)}else e.replaceChild(n[i++],t[r++])}else r++;else t[r++].remove()}}}const B="_$DX_DELEGATE";function re(e,t=window.document){const n=t[B]||(t[B]=new Set);for(let c=0,o=e.length;c<o;c++){const s=e[c];n.has(s)||(n.add(s),t.addEventListener(s,me))}}function ce(e,t,n){n==null?e.removeAttribute(t):e.setAttribute(t,n)}function oe(e,t,n,c){c==null?e.removeAttributeNS(t,n):e.setAttributeNS(t,n,c)}function se(e,t){t==null?e.removeAttribute("class"):e.className=t}function ae(e,t,n,c){if(c)Array.isArray(n)?(e[`$$${t}`]=n[0],e[`$$${t}Data`]=n[1]):e[`$$${t}`]=n;else if(Array.isArray(n)){const o=n[0];e.addEventListener(t,n[0]=s=>o.call(e,n[1],s))}else e.addEventListener(t,n)}function fe(e,t,n={}){const c=Object.keys(t||{}),o=Object.keys(n);let s,r;for(s=0,r=o.length;s<r;s++){const i=o[s];!i||i==="undefined"||t[i]||(W(e,i,!1),delete n[i])}for(s=0,r=c.length;s<r;s++){const i=c[s],a=!!t[i];!i||i==="undefined"||n[i]===a||!a||(W(e,i,!0),n[i]=a)}return n}function le(e,t,n={}){const c=e.style,o=typeof n=="string";if(t==null&&o||typeof t=="string")return c.cssText=t;o&&(c.cssText=void 0,n={}),t||(t={});let s,r;for(r in n)t[r]==null&&c.removeProperty(r),delete n[r];for(r in t)s=t[r],s!==n[r]&&(c.setProperty(r,s),n[r]=s);return n}function ue(e,t,n,c){typeof t=="function"?l.createRenderEffect(o=>F(e,t(),o,n,c)):F(e,t,void 0,n,c)}function de(e,t,n,c,o={},s=!1){t||(t={});for(const r in o)if(!(r in t)){if(r==="children")continue;D(e,r,null,o[r],n,s)}for(const r in t){if(r==="children"){c||P(e,t.children);continue}const i=t[r];o[r]=D(e,r,i,o[r],n,s)}}function ye(e){let t,n;return!l.sharedConfig.context||!(t=l.sharedConfig.registry.get(n=he()))?e.cloneNode(!0):(l.sharedConfig.completed&&l.sharedConfig.completed.add(t),l.sharedConfig.registry.delete(n),t)}function ge(e){return e.toLowerCase().replace(/-([a-z])/g,(t,n)=>n.toUpperCase())}function W(e,t,n){const c=t.trim().split(/\s+/);for(let o=0,s=c.length;o<s;o++)e.classList.toggle(c[o],n)}function D(e,t,n,c,o,s){let r,i,a;if(t==="style")return le(e,n,c);if(t==="classList")return fe(e,n,c);if(n===c)return c;if(t==="ref")s||n(e);else if(t.slice(0,3)==="on:"){const f=t.slice(3);c&&e.removeEventListener(f,c),n&&e.addEventListener(f,n)}else if(t.slice(0,10)==="oncapture:"){const f=t.slice(10);c&&e.removeEventListener(f,c,!0),n&&e.addEventListener(f,n,!0)}else if(t.slice(0,2)==="on"){const f=t.slice(2).toLowerCase(),u=ee.has(f);if(!u&&c){const y=Array.isArray(c)?c[0]:c;e.removeEventListener(f,y)}(u||n)&&(ae(e,f,n,u),u&&re([f]))}else if((a=p.has(t))||!o&&(L[t]||(i=Z.has(t)))||(r=e.nodeName.includes("-")))t==="class"||t==="className"?se(e,n):r&&!i&&!a?e[ge(t)]=n:e[L[t]||t]=n;else{const f=o&&t.indexOf(":")>-1&&ne[t.split(":")[0]];f?oe(e,f,t,n):ce(e,J[t]||t,n)}return n}function me(e){const t=`$$${e.type}`;let n=e.composedPath&&e.composedPath()[0]||e.target;for(e.target!==n&&Object.defineProperty(e,"target",{configurable:!0,value:n}),Object.defineProperty(e,"currentTarget",{configurable:!0,get(){return n||document}}),l.sharedConfig.registry&&!l.sharedConfig.done&&(l.sharedConfig.done=!0,document.querySelectorAll("[id^=pl-]").forEach(c=>c.remove()));n!==null;){const c=n[t];if(c&&!n.disabled){const o=n[`${t}Data`];if(o!==void 0?c.call(n,o,e):c.call(n,e),e.cancelBubble)return}n=n.host&&n.host!==n&&n.host instanceof Node?n.host:n.parentNode}}function F(e,t,n={},c,o){return t||(t={}),!o&&"children"in t&&l.createRenderEffect(()=>n.children=P(e,t.children,n.children)),t.ref&&t.ref(e),l.createRenderEffect(()=>de(e,t,c,!0,n,!0)),n}function P(e,t,n,c,o){for(l.sharedConfig.context&&!n&&(n=[...e.childNodes]);typeof n=="function";)n=n();if(t===n)return n;const s=typeof t,r=c!==void 0;if(e=r&&n[0]&&n[0].parentNode||e,s==="string"||s==="number"){if(l.sharedConfig.context)return n;if(s==="number"&&(t=t.toString()),r){let i=n[0];i&&i.nodeType===3?i.data=t:i=document.createTextNode(t),n=C(e,n,c,i)}else n!==""&&typeof n=="string"?n=e.firstChild.data=t:n=e.textContent=t}else if(t==null||s==="boolean"){if(l.sharedConfig.context)return n;n=C(e,n,c)}else{if(s==="function")return l.createRenderEffect(()=>{let i=t();for(;typeof i=="function";)i=i();n=P(e,i,n,c)}),()=>n;if(Array.isArray(t)){const i=[],a=n&&Array.isArray(n);if(k(i,t,n,o))return l.createRenderEffect(()=>n=P(e,i,n,c,!0)),()=>n;if(l.sharedConfig.context){if(!i.length)return n;for(let f=0;f<i.length;f++)if(i[f].parentNode)return n=i}if(i.length===0){if(n=C(e,n,c),r)return n}else a?n.length===0?G(e,i,c):ie(e,n,i):(n&&C(e),G(e,i));n=i}else if(t instanceof Node){if(l.sharedConfig.context&&t.parentNode)return n=r?[t]:t;if(Array.isArray(n)){if(r)return n=C(e,n,c,t);C(e,n,null,t)}else n==null||n===""||!e.firstChild?e.appendChild(t):e.replaceChild(t,e.firstChild);n=t}}return n}function k(e,t,n,c){let o=!1;for(let s=0,r=t.length;s<r;s++){let i=t[s],a=n&&n[s];if(i instanceof Node)e.push(i);else if(!(i==null||i===!0||i===!1))if(Array.isArray(i))o=k(e,i,a)||o;else if(typeof i=="function")if(c){for(;typeof i=="function";)i=i();o=k(e,Array.isArray(i)?i:[i],Array.isArray(a)?a:[a])||o}else e.push(i),o=!0;else{const f=String(i);a&&a.nodeType===3&&a.data===f?e.push(a):e.push(document.createTextNode(f))}}return o}function G(e,t,n){for(let c=0,o=t.length;c<o;c++)e.insertBefore(t[c],n)}function C(e,t,n,c){if(n===void 0)return e.textContent="";const o=c||document.createTextNode("");if(t.length){let s=!1;for(let r=t.length-1;r>=0;r--){const i=t[r];if(o!==i){const a=i.parentNode===e;!s&&!r?a?e.replaceChild(o,i):e.insertBefore(o,n):a&&i.remove()}else s=!0}}else e.insertBefore(o,n);return[o]}function he(){const e=l.sharedConfig.context;return`${e.id}${e.count++}`}const Se="http://www.w3.org/2000/svg";function be(e,t=!1){return t?document.createElementNS(Se,e):document.createElement(e)}function $e(e){const[t,n]=l.splitProps(e,["component"]),c=l.createMemo(()=>t.component);return l.createMemo(()=>{const o=c();switch(typeof o){case"function":return l.untrack(()=>o(n));case"string":const s=te.has(o),r=l.sharedConfig.context?ye():be(o,s);return ue(r,n,s),r}})}function Ce(e){return e!=null?e:void 0}function g(e,t){return Object.keys(e).filter(n=>!t.includes(n)).reduce((n,c)=>(Object.defineProperty(n,c,{get(){return e[c]},configurable:!0,enumerable:!0}),n),{})}function m(e,t){return l.createComponent($e,l.mergeProps({get component(){return e()}},t))}function h(e){if(!Object.values(e).every(t=>typeof t=="function"))throw new Error("Please provide an object with accessor values only.");return Object.keys(e).reduce((t,n)=>{const c=e[n];return Object.defineProperty(t,n,{get(){return c()},configurable:!0,enumerable:!0}),t},{})}function we(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}function Ae(e){const t=()=>{var i;return typeof e.style=="string"?e.style:Object.entries((i=e.style)!=null?i:{}).reduce((a,[f,u])=>a+`${f}:${u};`,"")},n=()=>`--maxWidth: ${we(e.maxWidth)};`,c=()=>e.centerText?"center-text":"",o=()=>e.centerChildren?"center-children":"",s=()=>[c(),o()].filter(Boolean).join(" "),r=()=>[t(),n()].join("; ");return m(()=>{var i;return(i=e.as)!=null?i:"div"},l.mergeProps(g(e,["as","maxWidth","centerText","centerChildren"]),h({style:r,"data-bedrock-center":s})))}const V=l.createContext({});function Ee(e){return React.createElement(V.Provider,{value:e.theme},e.children)}function b(){try{return l.useContext(V)}catch{return{}}}function xe(e){return e===void 0?"159px":typeof e=="number"?`${e}px`:e}function je(e){const t=b(),n=()=>{var i;return typeof e.style=="string"?e.style:Object.entries((i=e.style)!=null?i:{}).reduce((a,[f,u])=>a+`${f}:${u};`,"")},c=()=>{var i,a;return`--gutter: ${(a=S((i=e.gutter)!=null?i:"none",t))!=null?a:"0px"}`},o=()=>`--minItemWidth: ${xe(e.minItemWidth)}`,s=()=>e.noStretchedColumns===!0?"no-stretched-columns":"",r=()=>[n(),c(),o()].join("; ");return m(()=>{var i;return(i=e.as)!=null?i:"div"},l.mergeProps(g(e,["as","gutter","minItemWidth","noStretchedColumns"]),h({style:r,"data-bedrock-column-drop":s})))}function T(e){throw new Error(e)}function Pe(e){typeof e!="number"&&!Array.isArray(e)&&T("width must be a number or an array of two numbers"),Array().concat(e).some(n=>n<0)&&T("width value(s) must be 0 or greater"),Array.isArray(e)&&(e.length!==2||e[0]>e[1])&&T(`The second width value, ${e[1]}, is not larger than ${e[0]}. Please provide a value greater than first width value`)}function R(e,t){Pe(e);const[n,c]=l.createSignal(!1),[o,s]=l.createSignal();return l.onMount(()=>{j.init()}),l.createEffect(()=>{if(o()===void 0||o()===null)return;t&&t(o());const r=j.registerCallback(o(),i=>{var f,u;const a=(u=(f=i.borderBoxSize)==null?void 0:f.inlineSize)!=null?u:i.contentRect.width;if(a>0){const y=Array.isArray(e)?a>=e[0]&&a<=e[1]:a<=e;c(y)}});l.onCleanup(r)}),[n,s]}function Me(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 ve(e){return Array.isArray(e)?e.join("/"):e}function ke(e){return Me(e)?ve(e):void 0}function Te(e){const t=()=>{var r;return typeof e.style=="string"?e.style:Object.entries((r=e.style)!=null?r:{}).reduce((i,[a,f])=>i+`${a}:${f};`,"")},n=()=>ke(e.ratio),c=()=>n()?`--ratio: ${n()}`:"",o=()=>typeof e.position=="string"?`--position: ${e.position}`:"50%",s=()=>[t(),c(),o()].join("; ");return m(()=>{var r;return(r=e.as)!=null?r:"div"},l.mergeProps(g(e,["as","ratio","position"]),h({style:s,"data-bedrock-frame":()=>""})))}function H(e){const t=b(),n=()=>{var r;return typeof e.style=="string"?e.style:Object.entries((r=e.style)!=null?r:{}).reduce((i,[a,f])=>i+`${a}:${f};`,"")},c=()=>{var r,i;return`--gutter: ${(i=S((r=e.gutter)!=null?r:"none",t))!=null?i:"0px"};`},o=()=>{var r;return`--minItemWidth: ${typeof e.minItemWidth=="string"?e.minItemWidth:`${(r=e.minItemWidth)!=null?r:0}px`};`},s=()=>[n(),c(),o()].join("; ");return m(()=>{var r;return(r=e.as)!=null?r:"div"},l.mergeProps(g(e,["as","gutter","minItemWidth"]),h({style:s,"data-bedrock-grid":()=>""})))}const A=96;function _(e){var c;e=String(e);const t=parseFloat(e),[,n]=(c=e.match(/[\d.\-+]*\s*(.*)/))!=null?c:["",""];return[t,n]}function E(e,t){if(!e)return;const n=t!=null?t:document.body,c=(e!=null?e:"px").trim().toLowerCase();switch(c){case"vmin":case"vmax":case"vh":case"vw":case"%":return;case"ch":case"ex":return Re(c,n);case"em":return I(n,"font-size");case"rem":return I(document.body,"font-size");case"in":return A;case"cm":return A/2.54;case"mm":return A/25.4;case"pt":return A/72;case"pc":return A/6;case"px":return 1;default:{const[o,s]=_(c);if(isNaN(o))return;if(!s)return o;const r=E(s,t);return typeof r=="number"?o*r:void 0}}}function I(e,t){var o;const[n,c]=_(getComputedStyle(e).getPropertyValue(t));return n*((o=E(c,e))!=null?o:1)}function Re(e,t){const n=document.createElement("div");n.style.height="128"+e,t.appendChild(n);const c=I(n,"height")/128;return t.removeChild(n),c}const O=1,Ie=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,Oe=e=>{const[t,n]=l.createSignal(1),[c,o]=l.createSignal(),s=b();return l.onMount(()=>{j.init()}),l.createEffect(()=>{const r=Ce(c());if(r===void 0)return;const i=j.registerCallback(r,({target:a})=>{var U;n(1);const f=e.gutter&&(U=S(e.gutter,s))!=null?U:"1px",u=Ie?E(f,a):void 0,y=Math.max(u!=null?u:O,O),[$]=Array.from(a.children),w=1+Math.min(a.scrollHeight,$.scrollHeight),x=Math.max(Math.ceil(w/y),O);n(x)});l.onCleanup(i)}),React.createElement("div",{style:`grid-row: span ${t()};`,ref:o},e.children)},Ne=e=>{const t=l.children(()=>e.children),c=[].concat(t()).filter(Boolean).map(o=>React.createElement(Oe,{gutter:e.gutter},o));return React.createElement(H,{style:"grid-template-rows: 1px;",...e},c)},Le={start:"justify:start",end:"justify:end",center:"justify:center"},Be={start:"align:start",end:"align:end",center:"align:center",stretch:"align:stretch"};function We(e){const t=b(),n=()=>{var a;return typeof e.style=="string"?e.style:Object.entries((a=e.style)!=null?a:{}).reduce((f,[u,y])=>f+`${u}:${y};`,"")},c=()=>{var a,f;return`--gutter: ${(f=S((a=e.gutter)!=null?a:"none",t))!=null?f:"0px"};`},o=()=>e.justify!==void 0?Le[e.justify]:void 0,s=()=>e.align!==void 0?Be[e.align]:void 0,r=()=>[n(),c()].join("; "),i=()=>[o(),s()].filter(Boolean).join(" ");return m(()=>{var a;return(a=e.as)!=null?a:"div"},l.mergeProps(g(e,["as","gutter","justify","align"]),h({style:r,"data-bedrock-inline-cluster":i})))}const De={start:"justify:start",end:"justify:end",center:"justify:center"},Fe={start:"align:start",end:"align:end",center:"align:center",stretch:"align:stretch"};function Ge(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}function Ve(e){const t=b(),n=()=>{var y;return typeof e.style=="string"?e.style:Object.entries((y=e.style)!=null?y:{}).reduce(($,[w,x])=>$+`${w}:${x};`,"")},c=()=>{var y,$;return`--gutter: ${($=S((y=e.gutter)!=null?y:"none",t))!=null?$:"0px"};`},o=()=>e.minItemWidth?`--minItemWidth: ${typeof e.minItemWidth=="string"?e.minItemWidth:`${e.minItemWidth}px`};`:void 0,s=()=>Ge(e.switchAt)?`--switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};`:void 0,r=()=>e.justify!==void 0?De[e.justify]:void 0,i=()=>e.align!==void 0?Fe[e.align]:void 0,a=()=>e.stretch?`stretch:${e.stretch}`:void 0,f=()=>[n(),c(),s(),o()].join("; "),u=()=>[r(),i(),a()].filter(Boolean).join(" ");return m(()=>{var y;return(y=e.as)!=null?y:"div"},l.mergeProps(g(e,["as","gutter","justify","align","stretch","switchAt"]),h({style:f,"data-bedrock-inline":u})))}const X=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),He=(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 _e(e){return t=>{const n=S(t,e);return n!=null?n:"0px"}}function Xe(e,t){var s;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((s=e==null?void 0:e.spacing)!=null?s:v));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(r=>n.has(r)):t&&Object.keys(t).every(r=>X.has(r))&&Object.values(t).every(r=>n.has(r)))()||console.error("Invalid padding Type");const o=_e(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((r,[i,a])=>X.has(i)?r+He(i,o(a)):r,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(r=>o(r)).join(" ")};`:""}function qe(e){const t=b(),n=()=>{var s;return typeof e.style=="string"?e.style:Object.entries((s=e.style)!=null?s:{}).reduce((r,[i,a])=>r+`${i}:${a};`,"")},c=()=>Xe(t,e.padding),o=()=>[n(),c()].join("; ");return m(()=>{var s;return(s=e.as)!=null?s:"div"},l.mergeProps(g(e,["as","padding"]),h({style:o,"data-bedrock-padbox":()=>""})))}function Ke(e){const t=b(),n=()=>{var r;return typeof e.style=="string"?e.style:Object.entries((r=e.style)!=null?r:{}).reduce((i,[a,f])=>i+`${a}:${f};`,"")},c=()=>{var r,i;return`--gutter: ${(i=S((r=e.gutter)!=null?r:"none",t))!=null?i:"0px"};`},o=()=>{switch(e.snapType){case"none":return"snapType:none";case"proximity":return"snapType:proximity";case"mandatory":return"snapType:mandatory";default:return"snapType:none"}},s=()=>[n(),c()].join("; ");return m(()=>{var r;return(r=e.as)!=null?r:"div"},l.mergeProps(g(e,["as","gutter"]),h({style:s,"data-bedrock-reel":o})))}function N(e){const t=b(),n=()=>{var s;return typeof e.style=="string"?e.style:Object.entries((s=e.style)!=null?s:{}).reduce((r,[i,a])=>r+`${i}:${a};`,"")},c=()=>{var s,r;return`--gutter: ${(r=S((s=e.gutter)!=null?s:"none",t))!=null?r:"0px"};`},o=()=>[n(),c()].join("; ");return m(()=>{var s;return(s=e.as)!=null?s:"div"},l.mergeProps(g(e,["as","gutter"]),h({style:o,"data-bedrock-stack":()=>""})))}const q={"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"};function K(e){const t=b(),n=()=>{var r;return typeof e.style=="string"?e.style:Object.entries((r=e.style)!=null?r:{}).reduce((i,[a,f])=>i+`${a}:${f};`,"")},c=()=>{var r,i;return`--gutter: ${(i=S((r=e.gutter)!=null?r:"none",t))!=null?i:"0px"};`},o=()=>{var r,i;return(i=q[(r=e.fraction)!=null?r:"1/2"])!=null?i:q["1/2"]},s=()=>[n(),c()].join("; ");return m(()=>{var r;return(r=e.as)!=null?r:"div"},l.mergeProps(g(e,["as","gutter","fraction"]),h({style:s,"data-bedrock-split":o})))}const ze=e=>{const[t,n]=l.splitProps(e,["switchAt","fraction"]),c=typeof t.switchAt=="string"?E(t.switchAt):t.switchAt,o=Math.max(c!=null?c:0,0),[s,r]=R(o,e.ref);return React.createElement(l.Switch,null,React.createElement(l.Match,{when:s()===!1},React.createElement(K,{fraction:t.fraction,...n,ref:r})),React.createElement(l.Match,{when:s()===!0},React.createElement(N,{...n,ref:r})))};function Ue(e){return typeof e=="number"?`${e}px`:e&&M(e)?e:"100vh"}function Qe(e){const t=b(),n=()=>{var i;return typeof e.style=="string"?e.style:Object.entries((i=e.style)!=null?i:{}).reduce((a,[f,u])=>a+`${f}:${u};`,"")},c=()=>{var i,a;return`--gutter: ${(a=S((i=e.gutter)!=null?i:"none",t))!=null?a:"0px"};`},o=()=>`--minHeight: ${Ue(e.minHeight)};`,s=()=>e.stretchContent===!0?"stretch-content":"",r=()=>[n(),c(),o()].join("; ");return m(()=>{var i;return(i=e.as)!=null?i:"div"},l.mergeProps(g(e,["as","minHeight","stretchContent"]),h({style:r,"data-bedrock-cover":s})))}const Ye=e=>React.createElement(Qe,{...e},e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom);function z(e){const t=b(),n=()=>{var i;return typeof e.style=="string"?e.style:Object.entries((i=e.style)!=null?i:{}).reduce((a,[f,u])=>a+`${f}:${u};`,"")},c=()=>{var i,a;return`--gutter: ${(a=S((i=e.gutter)!=null?i:"none",t))!=null?a:"0px"};`},o=()=>`--columns: ${e.columns&&e.columns>0?e.columns:1};`,s=()=>e.dense?"dense":"",r=()=>[n(),c(),o()].join("; ");return m(()=>{var i;return(i=e.as)!=null?i:"div"},l.mergeProps(g(e,["as","gutter","columns","dense"]),h({style:r,"data-bedrock-columns":s})))}const Ze=e=>{const[t,n]=l.splitProps(e,["switchAt","columns","dense"]),c=typeof t.switchAt=="string"?E(t.switchAt):t.switchAt,o=Math.max(c!=null?c:0,0),[s,r]=R(o),i=a=>{var f;r(a),(f=n.ref)==null||f.call(n,a)};return React.createElement(l.Switch,null,React.createElement(l.Match,{when:s()===!1},React.createElement(z,{columns:t.columns,dense:t.dense,...n,ref:i})),React.createElement(l.Match,{when:s()===!0},React.createElement(N,{...n,ref:i})))},pe=e=>typeof e=="number"?e:1;function Je(e){const t=()=>{var r;return typeof e.style=="string"?e.style:Object.entries((r=e.style)!=null?r:{}).reduce((i,[a,f])=>i+`${a}:${f};`,"")},n=()=>`--span: ${pe(e.span)};`,c=()=>e.offsetStart&&e.offsetStart>0?`--offsetStart: ${e.offsetStart};`:"",o=()=>e.offsetEnd&&e.offsetEnd>0?`--offsetEnd: ${e.offsetEnd};`:"",s=()=>[t(),n(),c(),o()].join("; ");return m(()=>{var r;return(r=e.as)!=null?r:"div"},l.mergeProps(g(e,["as","span","offsetStart","offsetEnd"]),h({style:s,"data-bedrock-column":()=>""})))}d.Center=Ae,d.Column=Je,d.ColumnDrop=je,d.Columns=Ze,d.ColumnsBase=z,d.Cover=Ye,d.Frame=Te,d.Grid=H,d.Inline=Ve,d.InlineCluster=We,d.MasonryGrid=Ne,d.PadBox=qe,d.Reel=Ke,d.Split=ze,d.SplitBase=K,d.Stack=N,d.ThemeProvider=Ee,d.checkIsCSSLength=M,d.createContainerQuery=R,d.getSpacingValue=S,d.spacing=v,d.useTheme=b,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/lib/inline-cluster.d.ts

@@ -1,21 +1,22 @@
+import { JSX } from "solid-js";
 import { SpacingOptions } from "./spacing-constants";
+import { HeadlessPropsWithRef, ValidConstructor } from "./typeUtils";
 declare const justifyMap: {
-    readonly start: "flex-start";
-    readonly end: "flex-end";
-    readonly center: "center";
+    readonly start: "justify:start";
+    readonly end: "justify:end";
+    readonly center: "justify:center";
 };
 declare const alignMap: {
-    readonly stretch: "stretch";
-    readonly start: "flex-start";
-    readonly end: "flex-end";
-    readonly center: "center";
+    readonly start: "align:start";
+    readonly end: "align:end";
+    readonly center: "align:center";
+    readonly stretch: "align:stretch";
 };
-export interface InlineClusterProps {
+export interface InlineClusterBaseProps {
     justify?: keyof typeof justifyMap;
     align?: keyof typeof alignMap;
     gutter: SpacingOptions;
 }
-export declare const InlineCluster: ((props: InlineClusterProps & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => import("solid-js").JSX.Element) & {
-    className: (props: InlineClusterProps & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => string;
-};
+export declare type InlineClusterProps<T extends ValidConstructor = "div"> = HeadlessPropsWithRef<T, InlineClusterBaseProps>;
+export declare function InlineCluster<T extends ValidConstructor = "div">(props: InlineClusterProps<T>): JSX.Element;
 export {};

package/lib/inline.d.ts

@@ -1,11 +1,28 @@
-import { InlineClusterProps } from "./inline-cluster";
-declare type Stretch = "all" | "start" | "end" | number;
+import { JSX } from "solid-js";
+import { CSSLength, SpacingOptions } from "./spacing-constants";
+import { HeadlessPropsWithRef, ValidConstructor } from "./typeUtils";
+declare type Stretch = "all" | "start" | "end" | 0 | 1 | 2 | 3 | 4;
 declare type SwitchAt = string | number;
-export interface InlineProps extends InlineClusterProps {
+declare type MinItemWidth = number | CSSLength;
+declare const justifyMap: {
+    readonly start: "justify:start";
+    readonly end: "justify:end";
+    readonly center: "justify:center";
+};
+declare const alignMap: {
+    readonly start: "align:start";
+    readonly end: "align:end";
+    readonly center: "align:center";
+    readonly stretch: "align:stretch";
+};
+export interface InlineBaseProps {
     stretch?: Stretch;
     switchAt?: SwitchAt;
+    justify?: keyof typeof justifyMap;
+    align?: keyof typeof alignMap;
+    gutter?: SpacingOptions;
+    minItemWidth?: MinItemWidth;
 }
-export declare const Inline: ((props: InlineProps & InlineClusterProps & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => import("solid-js").JSX.Element) & {
-    className: (props: InlineProps & InlineClusterProps & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => string;
-};
+export declare type InlineProps<T extends ValidConstructor = "div"> = HeadlessPropsWithRef<T, InlineBaseProps>;
+export declare function Inline<T extends ValidConstructor = "div">(props: InlineProps<T>): JSX.Element;
 export {};

package/lib/masonry-grid.d.ts

@@ -1,5 +1,3 @@
-import { Component, JSXElement } from "solid-js";
+import { Component } from "solid-js";
 import { GridProps } from "./grid";
-export declare const MasonryGrid: Component<GridProps & {
-    children?: JSXElement;
-}>;
+export declare const MasonryGrid: Component<GridProps>;

package/lib/padbox.d.ts

@@ -1,5 +1,6 @@
-import { JSXElement } from "solid-js";
+import { JSX } from "solid-js";
 import { SpacingOptions } from "./spacing-constants";
+import { HeadlessPropsWithRef, ValidConstructor } from "./typeUtils";
 declare type PaddingObj = {
     left: SpacingOptions;
 } | {
@@ -18,14 +19,9 @@ declare type PaddingObj = {
     blockEnd: SpacingOptions;
 };
 declare type PaddingTypes = SpacingOptions | PaddingObj | [SpacingOptions] | [SpacingOptions, SpacingOptions] | [SpacingOptions, SpacingOptions, SpacingOptions] | [SpacingOptions, SpacingOptions, SpacingOptions, SpacingOptions];
-export interface PadBoxProps {
+export interface PadBoxBaseProps {
     padding: PaddingTypes;
 }
-export declare const PadBox: ((props: PadBoxProps & {
-    as?: string | number | symbol | ((props: unknown) => JSXElement) | undefined;
-} & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => import("solid-js").JSX.Element) & {
-    className: (props: PadBoxProps & {
-        as?: string | number | symbol | ((props: unknown) => JSXElement) | undefined;
-    } & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => string;
-};
+export declare type PadBoxProps<T extends ValidConstructor = "div"> = HeadlessPropsWithRef<T, PadBoxBaseProps>;
+export declare function PadBox<T extends ValidConstructor = "div">(props: PadBoxProps<T>): JSX.Element;
 export {};

package/lib/reel.d.ts

@@ -1,8 +1,9 @@
+import { JSX } from "solid-js";
 import { SpacingOptions } from "./spacing-constants";
-export interface ReelProps {
+import { HeadlessPropsWithRef, ValidConstructor } from "./typeUtils";
+export interface ReelBaseProps {
     snapType?: "none" | "proximity" | "mandatory";
     gutter?: SpacingOptions;
 }
-export declare const Reel: ((props: ReelProps & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => import("solid-js").JSX.Element) & {
-    className: (props: ReelProps & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => string;
-};
+export declare type ReelProps<T extends ValidConstructor = "div"> = HeadlessPropsWithRef<T, ReelBaseProps>;
+export declare function Reel<T extends ValidConstructor = "div">(props: ReelProps<T>): JSX.Element;

package/lib/spacing-constants.d.ts

@@ -1,4 +1,5 @@
-import type { DefaultTheme } from "solid-styled-components";
+import type { DefaultTheme } from "./theme-provider";
+import { Maybe } from "./typeUtils";
 declare type LowercaseCharacter = "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z";
 declare type AllCharacter = LowercaseCharacter | Uppercase<LowercaseCharacter>;
 declare type NonEmptyString = `${AllCharacter}${string}`;
@@ -23,9 +24,8 @@ export declare const spacing: Spacing;
 export declare type BaseTheme = Record<string, CSSLength | string | number>;
 declare type ThemeOrDefaultSpace<T> = T extends {
     space: BaseTheme;
-} ? T["space"] : keyof Spacing;
+} ? keyof T["space"] : keyof Spacing;
 export declare type SpacingOptions = ThemeOrDefaultSpace<DefaultTheme>;
-declare type MaybeValue = CSSLength | undefined;
-declare type GetSpacingValue = (spacingKey: SpacingOptions, theme?: Partial<BaseTheme>) => MaybeValue;
+declare type GetSpacingValue = (spacingKey: SpacingOptions, theme?: Partial<BaseTheme>) => Maybe<CSSLength>;
 export declare const getSpacingValue: GetSpacingValue;
 export {};

package/lib/split.d.ts

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

package/lib/stack.d.ts

@@ -1,7 +1,8 @@
+import { JSX } from "solid-js";
 import { SpacingOptions } from "./spacing-constants";
-export interface StackProps {
+import { HeadlessPropsWithRef, ValidConstructor } from "./typeUtils";
+export interface StackPropsBase {
     gutter?: SpacingOptions;
 }
-export declare const Stack: ((props: StackProps & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => import("solid-js").JSX.Element) & {
-    className: (props: StackProps & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => string;
-};
+export declare type StackProps<T extends ValidConstructor = "div"> = HeadlessPropsWithRef<T, StackPropsBase>;
+export declare function Stack<T extends ValidConstructor = "div">(props: StackProps<T>): JSX.Element;

package/lib/theme-provider.d.ts

@@ -0,0 +1,9 @@
+import { JSXElement } from "solid-js";
+export interface DefaultTheme {
+}
+export interface ThemeProviderProps {
+    theme: DefaultTheme;
+    children: JSXElement;
+}
+export declare function ThemeProvider(props: ThemeProviderProps): JSXElement;
+export declare function useTheme(): DefaultTheme;

package/lib/toPx.d.ts

@@ -1,4 +1,5 @@
 /**
  * This module is adapted from https://github.com/mikolalysenko/to-px/blob/master/browser.js
  */
-export declare function toPX(str: string, element?: Element): number | null;
+import type { Maybe } from "./typeUtils";
+export declare function toPX(str: string, element?: Element): Maybe<number>;

package/lib/typeUtils.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Many of these utility types and functions were taken directly from solid-headless
+ * https://github.com/lxsmnsyc/solid-headless
+ *
+ * Some have since been changed but it's important to
+ * attribute where its appropriate.
+ */
+import { JSX } from "solid-js";
+export declare type OmitAndMerge<A, B> = A & Omit<B, keyof A>;
+export declare type Accessor<T = unknown> = () => T;
+export declare type Maybe<T> = NonNullable<T> | undefined;
+export declare type ValidElements = keyof JSX.IntrinsicElements;
+export declare type ValidComponent<P> = (props: P) => JSX.Element;
+export declare type ValidConstructor = ValidElements | ValidComponent<any> | (string & {});
+export declare type DynamicProps<T extends ValidConstructor> = T extends ValidElements ? JSX.IntrinsicElements[T] : T extends ValidComponent<infer U> ? U : Record<string, unknown>;
+declare type UnboxIntrinsicElements<T> = T extends JSX.HTMLAttributes<infer U> ? U : never;
+declare type RefCallback<T> = (el: T) => void;
+declare type RefField<T> = T | RefCallback<T>;
+declare type UnboxComponentProp<U> = U extends {
+    ref: infer X;
+} ? X : never;
+export declare type DynamicNode<T extends ValidConstructor> = T extends ValidElements ? UnboxIntrinsicElements<JSX.IntrinsicElements[T]> : T extends ValidComponent<infer U> ? UnboxComponentProp<U> : never;
+export interface WithRef<T extends ValidConstructor> {
+    ref?: RefField<DynamicNode<T>>;
+}
+export interface DynamicComponentWithRef<T extends ValidConstructor> extends WithRef<T> {
+    as?: T;
+}
+export declare type HeadlessPropsWithRef<T extends ValidConstructor, V = {}> = OmitAndMerge<V & DynamicComponentWithRef<T>, DynamicProps<T>>;
+export declare function convertToMaybe<T extends unknown>(value: T): Maybe<T>;
+export declare function omitProps<T extends Record<string, any>, K extends keyof T>(value: T, keys: K[]): Omit<T, K>;
+export default function createDynamic<T extends ValidConstructor>(source: () => T, props: DynamicProps<T>): JSX.Element;
+export declare function createPropsFromAccessors<T extends Record<string, Accessor>>(props: T): {
+    [P in keyof T]: ReturnType<T[P]>;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bedrock-layout/solid",
-  "version": "0.11.10",
+  "version": "0.12.0",
   "description": "Solid Foundational Layout Primitives for your Solid-js App",
   "info": "Solid Bedrock Layout is a Solid.js port of the Bedrock Layout primitives written for react.  Bedrock primitives are built to allow you to compose them together to create your own custom layouts. Many 'complex' layouts can be created by composing Bedrock Layout Primitives",
   "sideEffects": false,
@@ -53,10 +53,10 @@
     "url": "git+https://github.com/Bedrock-Layouts/Solid-Bedrock.git"
   },
   "peerDependencies": {
-    "solid-js": "^1.3.7",
-    "solid-styled-components": "^0.27.4"
+    "solid-js": "^1.3.7"
   },
   "dependencies": {
+    "@bedrock-layout/bedrock-layout-css": "^2.0.3",
     "@bedrock-layout/register-resize-callback": "^1.1.0"
   },
   "scripts": {
@@ -72,5 +72,5 @@
   "bugs": {
     "url": "https://github.com/Bedrock-Layouts/Solid-Bedrock/issues"
   },
-  "gitHead": "6b5d1e9440493f42fde8d02feb9f0b4a2a7bce14"
+  "gitHead": "15a3f6fd90d8503427248b2c9f941f241876156b"
 }