reshaped 3.7.0-canary.9 → 3.7.1

package/dist/components/View/View.module.css

@@ -1 +1 @@
-.root{--rs-view-gaps-count-multiplier:1;--rs-view-z:auto;--rs-view-gap-value:calc(var(--rs-view-gap) * var(--rs-unit-x1));--rs-view-border-width:0px;gap:var(--rs-view-gap-value);position:relative;z-index:var(--rs-view-z)}.item{--rs-view-item-gap:calc(var(--rs-unit-x1) * var(--rs-view-item-gap-before) - var(--rs-view-gap-value));order:var(--rs-view-item-order)}.--padding{padding:calc(var(--rs-unit-x1) * var(--rs-view-p-vertical, var(--rs-view-p-top)) - var(--rs-view-border-width)) calc(var(--rs-unit-x1) * var(--rs-view-p-horizontal, var(--rs-view-p-start)) - var(--rs-view-border-width));--rs-view-p-vertical-s:0;--rs-view-p-vertical-m:var(--rs-view-p-vertical-s);--rs-view-p-vertical-l:var(--rs-view-p-vertical-m);--rs-view-p-vertical-xl:var(--rs-view-p-vertical-l);--rs-view-p-vertical:var(--rs-view-p-vertical-s);--rs-view-p-horizontal-s:0;--rs-view-p-horizontal-m:var(--rs-view-p-horizontal-s);--rs-view-p-horizontal-l:var(--rs-view-p-horizontal-m);--rs-view-p-horizontal-xl:var(--rs-view-p-horizontal-l);--rs-view-p-horizontal:var(--rs-view-p-horizontal-s)}.root[style*="--rs-view-p-top"]{padding-top:calc(var(--rs-unit-x1) * var(--rs-view-p-top));--rs-view-p-top-s:0;--rs-view-p-top-m:var(--rs-view-p-top-s);--rs-view-p-top-l:var(--rs-view-p-top-m);--rs-view-p-top-xl:var(--rs-view-p-top-l);--rs-view-p-top:var(--rs-view-p-top-s)}.root[style*="--rs-view-p-bottom"]{padding-bottom:calc(var(--rs-unit-x1) * var(--rs-view-p-bottom));--rs-view-p-bottom-s:0;--rs-view-p-bottom-m:var(--rs-view-p-bottom-s);--rs-view-p-bottom-l:var(--rs-view-p-bottom-m);--rs-view-p-bottom-xl:var(--rs-view-p-bottom-l);--rs-view-p-bottom:var(--rs-view-p-bottom-s)}.root[style*="--rs-view-p-start"]{padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-view-p-start));--rs-view-p-start-s:0;--rs-view-p-start-m:var(--rs-view-p-start-s);--rs-view-p-start-l:var(--rs-view-p-start-m);--rs-view-p-start-xl:var(--rs-view-p-start-l);--rs-view-p-start:var(--rs-view-p-start-s)}.root[style*="--rs-view-p-end"]{padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-view-p-end));--rs-view-p-end-s:0;--rs-view-p-end-m:var(--rs-view-p-end-s);--rs-view-p-end-l:var(--rs-view-p-end-m);--rs-view-p-end-xl:var(--rs-view-p-end-l);--rs-view-p-end:var(--rs-view-p-end-s)}.--animated{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:background-color,color,border-color,box-shadow}.--align-text-start{text-align:start}.--align-text-center{text-align:center}.--align-text-end{text-align:end}.--bg-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral)}.--bg-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.--bg-warning{background-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.--bg-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.--bg-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.--bg-neutral-faded{background-color:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral)}.--bg-positive-faded{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-neutral)}.--bg-warning-faded{background-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-neutral)}.--bg-critical-faded{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-neutral)}.--bg-primary-faded{background-color:var(--rs-color-background-primary-faded)}.--bg-page,.--bg-primary-faded{color:var(--rs-color-foreground-neutral)}.--bg-page{background-color:var(--rs-color-background-page)}.--bg-page-faded{background-color:var(--rs-color-background-page-faded)}.--bg-disabled,.--bg-page-faded{color:var(--rs-color-foreground-neutral)}.--bg-disabled{background-color:var(--rs-color-background-disabled)}.--bg-disabled-faded{background-color:var(--rs-color-background-disabled-faded);color:var(--rs-color-foreground-neutral)}.--bg-elevation-base{background-color:var(--rs-color-background-elevation-base);color:var(--rs-color-foreground-neutral)}.--bg-elevation-raised{background-color:var(--rs-color-background-elevation-raised);color:var(--rs-color-foreground-neutral)}.--bg-elevation-overlay{background-color:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral)}.--bg-brand{background-color:var(--rs-color-brand);color:var(--rs-color-on-brand)}.--bg-white{background-color:var(--rs-color-white);color:var(--rs-color-black)}.--bg-black{background-color:var(--rs-color-black);color:var(--rs-color-white)}.--shadow-raised{box-shadow:var(--rs-shadow-raised)}.--shadow-overlay{box-shadow:var(--rs-shadow-overlay)}.--overflow-hidden{overflow:hidden}.--overflow-auto{overflow:auto}.--divided{--rs-view-gaps-count-multiplier:2}.--flex{display:flex;flex-direction:column;justify-content:flex-start}.--direction-column{flex-direction:column;flex-wrap:nowrap}.--direction-column>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column>.item--gap-auto{margin-top:auto}.--direction-column-reverse{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse>.item--gap-auto{margin-top:auto}.--direction-row{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row>.item--gap-auto{margin-inline-start:auto}.--direction-row>button{width:auto!important}.--direction-row-reverse{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse>button{width:auto!important}.--nowrap{flex-wrap:nowrap}.--nowrap>*{flex-shrink:0}.--wrap{flex-wrap:wrap}@media (--rs-viewport-m ){.--nowrap-false--m,.--wrap-true--m{flex-wrap:wrap}.--nowrap-true--m,.--wrap-false--m{flex-wrap:nowrap}}@media (--rs-viewport-l ){.--nowrap-false--l,.--wrap-true--l{flex-wrap:wrap}.--nowrap-true--l,.--wrap-false--l{flex-wrap:nowrap}}@media (--rs-viewport-xl ){.--nowrap-false--xl,.--wrap-true--xl{flex-wrap:wrap}.--nowrap-true--xl,.--wrap-false--xl{flex-wrap:nowrap}}.divider{align-self:stretch}.item--grow{flex-basis:0;flex-grow:1;min-width:0}.item--grow,.item--shrink{flex-shrink:1}.item--columns{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-1{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-1,.item--columns-2{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-2{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3,.item--columns-4{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-4{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5,.item--columns-6{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-6{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7,.item--columns-8{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-8{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10,.item--columns-9{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-10{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11,.item--columns-12{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-12{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto{width:auto}@media (--rs-viewport-m ){.item--columns-1--m{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--m{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--m{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--m{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--m{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--m{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--m{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--m{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--m{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--m{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--m{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--m{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--m{width:auto}}@media (--rs-viewport-l ){.item--columns-1--l{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--l{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--l{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--l{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--l{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--l{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--l{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--l{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--l{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--l{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--l{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--l{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--l{width:auto}}@media (--rs-viewport-xl ){.item--columns-1--xl{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--xl{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--xl{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--xl{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--xl{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--xl{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--xl{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--xl{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--xl{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--xl{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--xl{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--xl{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--xl{width:auto}}.root{--rs-view-gap-s:0;--rs-view-gap-m:var(--rs-view-gap-s);--rs-view-gap-l:var(--rs-view-gap-m);--rs-view-gap-xl:var(--rs-view-gap-l);--rs-view-gap:var(--rs-view-gap-s)}.root>.item{--rs-view-item-order-s:0;--rs-view-item-order-m:var(--rs-view-item-order-s);--rs-view-item-order-l:var(--rs-view-item-order-m);--rs-view-item-order-xl:var(--rs-view-item-order-l);--rs-view-item-order:var(--rs-view-item-order-s);--rs-view-item-gap-before-s:initial;--rs-view-item-gap-before-m:var(--rs-view-item-gap-before-s);--rs-view-item-gap-before-l:var(--rs-view-item-gap-before-m);--rs-view-item-gap-before-xl:var(--rs-view-item-gap-before-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-s)}@media (--rs-viewport-m ){.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-m);--rs-view-p-horizontal:var(--rs-view-p-horizontal-m)}.root[style*="--rs-view-p-top"]{--rs-view-p-top:var(--rs-view-p-top-m)}.root[style*="--rs-view-p-bottom"]{--rs-view-p-bottom:var(--rs-view-p-bottom-m)}.root[style*="--rs-view-p-start"]{--rs-view-p-start:var(--rs-view-p-start-m)}.root[style*="--rs-view-p-end"]{--rs-view-p-end:var(--rs-view-p-end-m)}.--direction-column--m{flex-direction:column;flex-wrap:nowrap}.--direction-column--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--m>.item--gap-auto{margin-top:auto}.--direction-column-reverse--m{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--m>.item--gap-auto{margin-top:auto}.--direction-row--m{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--m>.item--gap-auto{margin-inline-start:auto}.--direction-row--m>button{width:auto!important}.--direction-row-reverse--m{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--m>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--m>button{width:auto!important}.item--grow-true--m{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--m{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.root{--rs-view-gap:var(--rs-view-gap-m)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-m);--rs-view-item-gap-before:var(--rs-view-item-gap-before-m)}}@media (--rs-viewport-l ){.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-l);--rs-view-p-horizontal:var(--rs-view-p-horizontal-l)}.root[style*="--rs-view-p-top"]{--rs-view-p-top:var(--rs-view-p-top-l)}.root[style*="--rs-view-p-bottom"]{--rs-view-p-bottom:var(--rs-view-p-bottom-l)}.root[style*="--rs-view-p-start"]{--rs-view-p-start:var(--rs-view-p-start-l)}.root[style*="--rs-view-p-end"]{--rs-view-p-end:var(--rs-view-p-end-l)}.--direction-column--l{flex-direction:column;flex-wrap:nowrap}.--direction-column--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--l>.item--gap-auto{margin-top:auto}.--direction-column-reverse--l{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--l>.item--gap-auto{margin-top:auto}.--direction-row--l{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--l>.item--gap-auto{margin-inline-start:auto}.--direction-row--l>button{width:auto!important}.--direction-row-reverse--l{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--l>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--l>button{width:auto!important}.item--grow-true--l{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--l{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.root{--rs-view-gap:var(--rs-view-gap-l)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-l)}}@media (--rs-viewport-xl ){.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-xl);--rs-view-p-horizontal:var(--rs-view-p-horizontal-xl)}.root[style*="--rs-view-p-top"]{--rs-view-p-top:var(--rs-view-p-top-xl)}.root[style*="--rs-view-p-bottom"]{--rs-view-p-bottom:var(--rs-view-p-bottom-xl)}.root[style*="--rs-view-p-start"]{--rs-view-p-start:var(--rs-view-p-start-xl)}.root[style*="--rs-view-p-end"]{--rs-view-p-end:var(--rs-view-p-end-xl)}.--direction-column--xl{flex-direction:column;flex-wrap:nowrap}.--direction-column--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--xl>.item--gap-auto{margin-top:auto}.--direction-column-reverse--xl{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--xl>.item--gap-auto{margin-top:auto}.--direction-row--xl{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row--xl>button{width:auto!important}.--direction-row-reverse--xl{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--xl>button{width:auto!important}.item--grow-true--xl{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--xl{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.root{--rs-view-gap:var(--rs-view-gap-xl)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-xl);--rs-view-item-gap-before:var(--rs-view-item-gap-before-xl)}}
+.root{--rs-view-gaps-count-multiplier:1;--rs-view-z:auto;--rs-view-gap-value:calc(var(--rs-view-gap) * var(--rs-unit-x1));gap:var(--rs-view-gap-value);position:relative;z-index:var(--rs-view-z)}.item{--rs-view-item-gap:calc(var(--rs-unit-x1) * var(--rs-view-item-gap-before) - var(--rs-view-gap-value));order:var(--rs-view-item-order)}.--animated{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:background-color,color,border-color,box-shadow}.--bg-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral)}.--bg-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.--bg-warning{background-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.--bg-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.--bg-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.--bg-neutral-faded{background-color:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral)}.--bg-positive-faded{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-neutral)}.--bg-warning-faded{background-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-neutral)}.--bg-critical-faded{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-neutral)}.--bg-primary-faded{background-color:var(--rs-color-background-primary-faded)}.--bg-page,.--bg-primary-faded{color:var(--rs-color-foreground-neutral)}.--bg-page{background-color:var(--rs-color-background-page)}.--bg-page-faded{background-color:var(--rs-color-background-page-faded)}.--bg-disabled,.--bg-page-faded{color:var(--rs-color-foreground-neutral)}.--bg-disabled{background-color:var(--rs-color-background-disabled)}.--bg-disabled-faded{background-color:var(--rs-color-background-disabled-faded);color:var(--rs-color-foreground-neutral)}.--bg-elevation-base{background-color:var(--rs-color-background-elevation-base);color:var(--rs-color-foreground-neutral)}.--bg-elevation-raised{background-color:var(--rs-color-background-elevation-raised);color:var(--rs-color-foreground-neutral)}.--bg-elevation-overlay{background-color:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral)}.--bg-brand{background-color:var(--rs-color-brand);color:var(--rs-color-on-brand)}.--bg-white{background-color:var(--rs-color-white);color:var(--rs-color-black)}.--bg-black{background-color:var(--rs-color-black);color:var(--rs-color-white)}.--shadow-raised{box-shadow:var(--rs-shadow-raised)}.--shadow-overlay{box-shadow:var(--rs-shadow-overlay)}.--overflow-hidden{overflow:hidden}.--overflow-auto{overflow:auto}.--divided{--rs-view-gaps-count-multiplier:2}.--flex{display:flex;flex-direction:column;justify-content:flex-start}.--direction-column{flex-direction:column;flex-wrap:nowrap}.--direction-column>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column>.item--gap-auto{margin-top:auto}.--direction-column-reverse{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse>.item--gap-auto{margin-top:auto}.--direction-row{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row>.item--gap-auto{margin-inline-start:auto}.--direction-row>button{width:auto!important}.--direction-row-reverse{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse>button{width:auto!important}.--nowrap{flex-wrap:nowrap}.--nowrap>*{flex-shrink:0}.--wrap{flex-wrap:wrap}@media (--rs-viewport-m ){.--nowrap-false--m,.--wrap-true--m{flex-wrap:wrap}.--nowrap-true--m,.--wrap-false--m{flex-wrap:nowrap}}@media (--rs-viewport-l ){.--nowrap-false--l,.--wrap-true--l{flex-wrap:wrap}.--nowrap-true--l,.--wrap-false--l{flex-wrap:nowrap}}@media (--rs-viewport-xl ){.--nowrap-false--xl,.--wrap-true--xl{flex-wrap:wrap}.--nowrap-true--xl,.--wrap-false--xl{flex-wrap:nowrap}}.divider{align-self:stretch}.item--grow{flex-basis:0;flex-grow:1;min-width:0}.item--grow,.item--shrink{flex-shrink:1}.item--columns{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-1{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-1,.item--columns-2{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-2{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3,.item--columns-4{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-4{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5,.item--columns-6{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-6{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7,.item--columns-8{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-8{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10,.item--columns-9{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-10{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11,.item--columns-12{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-12{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto{width:auto}@media (--rs-viewport-m ){.item--columns-1--m{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--m{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--m{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--m{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--m{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--m{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--m{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--m{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--m{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--m{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--m{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--m{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--m{width:auto}}@media (--rs-viewport-l ){.item--columns-1--l{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--l{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--l{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--l{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--l{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--l{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--l{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--l{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--l{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--l{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--l{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--l{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--l{width:auto}}@media (--rs-viewport-xl ){.item--columns-1--xl{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--xl{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--xl{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--xl{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--xl{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--xl{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--xl{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--xl{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--xl{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--xl{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--xl{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--xl{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--xl{width:auto}}.root{--rs-view-gap-s:0;--rs-view-gap-m:var(--rs-view-gap-s);--rs-view-gap-l:var(--rs-view-gap-m);--rs-view-gap-xl:var(--rs-view-gap-l);--rs-view-gap:var(--rs-view-gap-s)}.root>.item{--rs-view-item-order-s:0;--rs-view-item-order-m:var(--rs-view-item-order-s);--rs-view-item-order-l:var(--rs-view-item-order-m);--rs-view-item-order-xl:var(--rs-view-item-order-l);--rs-view-item-order:var(--rs-view-item-order-s);--rs-view-item-gap-before-s:initial;--rs-view-item-gap-before-m:var(--rs-view-item-gap-before-s);--rs-view-item-gap-before-l:var(--rs-view-item-gap-before-m);--rs-view-item-gap-before-xl:var(--rs-view-item-gap-before-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-s)}@media (--rs-viewport-m ){.--direction-column--m{flex-direction:column;flex-wrap:nowrap}.--direction-column--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--m>.item--gap-auto{margin-top:auto}.--direction-column-reverse--m{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--m>.item--gap-auto{margin-top:auto}.--direction-row--m{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--m>.item--gap-auto{margin-inline-start:auto}.--direction-row--m>button{width:auto!important}.--direction-row-reverse--m{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--m>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--m>button{width:auto!important}.item--grow-true--m{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--m{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.root{--rs-view-gap:var(--rs-view-gap-m)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-m);--rs-view-item-gap-before:var(--rs-view-item-gap-before-m)}}@media (--rs-viewport-l ){.--direction-column--l{flex-direction:column;flex-wrap:nowrap}.--direction-column--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--l>.item--gap-auto{margin-top:auto}.--direction-column-reverse--l{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--l>.item--gap-auto{margin-top:auto}.--direction-row--l{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--l>.item--gap-auto{margin-inline-start:auto}.--direction-row--l>button{width:auto!important}.--direction-row-reverse--l{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--l>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--l>button{width:auto!important}.item--grow-true--l{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--l{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.root{--rs-view-gap:var(--rs-view-gap-l)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-l)}}@media (--rs-viewport-xl ){.--direction-column--xl{flex-direction:column;flex-wrap:nowrap}.--direction-column--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--xl>.item--gap-auto{margin-top:auto}.--direction-column-reverse--xl{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--xl>.item--gap-auto{margin-top:auto}.--direction-row--xl{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row--xl>button{width:auto!important}.--direction-row-reverse--xl{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--xl>button{width:auto!important}.item--grow-true--xl{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--xl{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.root{--rs-view-gap:var(--rs-view-gap-xl)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-xl);--rs-view-item-gap-before:var(--rs-view-item-gap-before-xl)}}

package/dist/components/View/View.types.d.ts

@@ -30,6 +30,13 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     textAlign?: G.Responsive<TStyles.TextAlign>;
     backgroundColor?: "neutral" | "neutral-faded" | "critical" | "critical-faded" | "positive" | "warning" | "warning-faded" | "positive-faded" | "primary" | "primary-faded" | "elevation-base" | "elevation-raised" | "elevation-overlay" | "page" | "page-faded" | "disabled" | "disabled-faded" | "brand" | "white" | "black";
     borderColor?: G.Responsive<TStyles.BorderColor>;
+    border?: G.Responsive<TStyles.Border>;
+    borderTop?: G.Responsive<TStyles.Border>;
+    borderBottom?: G.Responsive<TStyles.Border>;
+    borderStart?: G.Responsive<TStyles.Border>;
+    borderEnd?: G.Responsive<TStyles.Border>;
+    borderInline?: G.Responsive<TStyles.Border>;
+    borderBlock?: G.Responsive<TStyles.Border>;
     borderRadius?: G.Responsive<TStyles.Radius>;
     position?: G.Responsive<TStyles.Position>;
     inset?: G.Responsive<TStyles.Inset>;

package/dist/components/View/tests/View.stories.d.ts

@@ -73,6 +73,10 @@ export declare const background: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const borderColor: {
+    name: string;
+    render: () => React.JSX.Element;
+};
 export declare const border: {
     name: string;
     render: () => React.JSX.Element;

package/dist/components/View/tests/View.stories.js

@@ -548,7 +548,7 @@ export const background = {
 			</Example.Item>
 		</Example>),
 };
-export const border = {
+export const borderColor = {
     name: "borderColor",
     render: () => (<Example>
 			<Example.Item title="border: neutral">
@@ -624,6 +624,70 @@ export const border = {
 			</Example.Item>
 		</Example>),
 };
+export const border = {
+    name: "border",
+    render: () => (<Example>
+			<Example.Item title="border: true">
+				<View border borderColor="neutral" padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title="borderTop: true">
+				<View borderTop borderColor="neutral" padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title="borderBottom: true">
+				<View borderBottom borderColor="neutral" padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title="borderStart: true">
+				<View borderStart borderColor="neutral" padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title="borderEnd: true">
+				<View borderEnd borderColor="neutral" padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title="borderInline: true">
+				<View borderInline borderColor="neutral" padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title="borderBlock: true">
+				<View borderBlock borderColor="neutral" padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title="borderTop: true, borderStart: true, ">
+				<View borderColor="neutral" borderTop borderStart padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<Example.Item title={[
+            "responsive",
+            "[s] borderTop: true, borderStart: true",
+            "[m+] borderBottom: true, borderEnd: true",
+        ]}>
+				<View borderColor="neutral" borderTop={{ s: true, m: false }} borderStart={{ s: true, m: false }} borderBottom={{ s: false, m: true }} borderEnd={{ s: false, m: true }} padding={4}>
+					Content
+				</View>
+			</Example.Item>
+
+			<div style={{ height: 100 }}/>
+		</Example>),
+};
 export const radius = {
     name: "borderRadius",
     render: () => (<Example>

package/dist/components/_private/Portal/Portal.js

@@ -4,6 +4,8 @@ import React from "react";
 import ReactDOM from "react-dom";
 import Theme from "../../Theme/index.js";
 import s from "./Portal.module.css";
+import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
+import useToggle from "../../../hooks/useToggle.js";
 const PortalScopeContext = React.createContext({});
 export const usePortalScope = () => {
     return React.useContext(PortalScopeContext);
@@ -14,6 +16,7 @@ export const usePortalScope = () => {
  */
 const Portal = (props) => {
     const { children, targetRef } = props;
+    const mountedToggle = useToggle();
     const rootRef = React.useRef(null);
     const rootNode = rootRef.current?.getRootNode();
     const isShadowDom = rootNode instanceof ShadowRoot;
@@ -28,10 +31,15 @@ const Portal = (props) => {
     const portal = usePortalScope();
     const nextScopeRef = targetRef || portal.scopeRef;
     const targetEl = nextScopeRef?.current || defaultTargetEl;
+    useIsomorphicLayoutEffect(() => {
+        mountedToggle.activate();
+        return () => mountedToggle.deactivate();
+    }, []);
     /* Preserve the current theme when rendered in body */
     return [
         ReactDOM.createPortal(_jsx(Theme, { children: children }), targetEl),
-        _jsx("div", { ref: rootRef, className: s.root }, "root"),
+        // Make sure this element doesn't affect components using :last-child when their children use portals
+        !mountedToggle.active && _jsx("div", { ref: rootRef, className: s.root }, "root"),
     ];
 };
 function PortalScope(props) {

package/dist/config/tailwind.d.ts

@@ -1,2 +1,2 @@
 import type { ThemeDefinition } from "../themes/_generator/tokens/types";
-export declare const getTheme: (theme?: ThemeDefinition) => Record<"backgroundColor" | "borderColor" | "borderRadius" | "spacing" | "boxShadow" | "textColor" | "colors" | "screens", Record<string, string>>;
+export declare const getTheme: (theme?: ThemeDefinition) => Record<"borderColor" | "backgroundColor" | "borderRadius" | "spacing" | "boxShadow" | "textColor" | "colors" | "screens", Record<string, string>>;

package/dist/hooks/_private/useIsDismissible.js

@@ -28,17 +28,20 @@ const useIsDismissible = (args) => {
     React.useEffect(() => {
         if (!active)
             return;
-        if (queue.length) {
-            // Make sure new item is added to the queue after others unmount first
-            onNextFrame(() => addToQueue(id, contentRef, triggerRef));
-        }
-        else {
-            addToQueue(id, contentRef, triggerRef);
-        }
+        onNextFrame(() => addToQueue(id, contentRef, triggerRef));
         return () => removeFromQueue(id);
     }, [active, id, contentRef, triggerRef]);
     return React.useCallback(() => {
-        return active ? latestId === id : true;
+        if (!active)
+            return true;
+        const latest = latestId ? queue[latestId] : undefined;
+        const latestTrigger = latest?.triggerRef?.current;
+        const prev = latest?.parentId ? queue[latest.parentId] : undefined;
+        const prevContent = prev?.contentRef.current;
+        // Don't block independently rendered components that are not nested in each other
+        if (!prevContent || !latestTrigger || !prevContent.contains(latestTrigger))
+            return true;
+        return latestId === id;
     }, [id, active]);
 };
 export default useIsDismissible;

package/dist/hooks/useToggle.d.ts

@@ -2,6 +2,6 @@ declare const useToggle: (defaultValue?: boolean) => {
     active: boolean;
     activate: () => void;
     deactivate: () => void;
-    toggle: (targetValue?: boolean) => void;
+    toggle: (targetValue?: any) => void;
 };
 export default useToggle;

package/dist/hooks/useToggle.js

@@ -8,6 +8,7 @@ const useToggle = (defaultValue) => {
     const deactivate = React.useCallback(() => {
         setActive(false);
     }, []);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const toggle = React.useCallback((targetValue) => {
         // Checking the targetValue type for backwards compatibility if something like handler events
         // are passed automatically e.g. onClick={toggle}

package/dist/index.d.ts

@@ -131,7 +131,6 @@ export type { ViewProps, ViewItemProps } from "./components/View";
  */
 export { useFormControl } from "./components/FormControl";
 export { default as Theme, useTheme, type ThemeProps } from "./components/Theme";
-export type { ColorMode } from "./components/Theme";
 export { default as useHandlerRef } from "./hooks/useHandlerRef";
 export { default as useHotkeys } from "./hooks/useHotkeys";
 export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
@@ -150,7 +149,7 @@ export { TrapFocus } from "./utilities/a11y";
  * Types
  */
 export type { ReshapedConfig } from "./types/config";
-export type { Responsive, Attributes } from "./types/global";
+export type { Responsive, Attributes, ColorMode } from "./types/global";
 /**
  * Dev utilities
  */

package/dist/styles/mixin.d.ts

@@ -0,0 +1,6 @@
+import type { Mixin } from "./types";
+import type * as G from "../types/global";
+export declare const resolveMixin: (mixin: Mixin) => {
+    variables: React.CSSProperties;
+    classNames: G.ClassName[];
+};

package/dist/styles/mixin.js

@@ -0,0 +1,71 @@
+import align from "./resolvers/align/index.js";
+import aspectRatio from "./resolvers/aspectRatio/index.js";
+import bleed from "./resolvers/bleed/index.js";
+import border, { borderColor, borderTop, borderBottom, borderStart, borderEnd, borderInline, borderBlock, } from "./resolvers/border/index.js";
+import height from "./resolvers/height/index.js";
+import inset, { insetTop, insetBottom, insetStart, insetEnd, insetInline, insetBlock, } from "./resolvers/inset/index.js";
+import justify from "./resolvers/justify/index.js";
+import maxHeight from "./resolvers/maxHeight/index.js";
+import maxWidth from "./resolvers/maxWidth/index.js";
+import minHeight from "./resolvers/minHeight/index.js";
+import minWidth from "./resolvers/minWidth/index.js";
+import position from "./resolvers/position/index.js";
+import radius from "./resolvers/radius/index.js";
+import textAlign from "./resolvers/textAlign/index.js";
+import width from "./resolvers/width/index.js";
+import padding, { paddingTop, paddingBottom, paddingStart, paddingEnd, paddingInline, paddingBlock, } from "./resolvers/padding/index.js";
+const mixinMap = {
+    align,
+    aspectRatio,
+    bleed,
+    border,
+    borderTop,
+    borderBottom,
+    borderStart,
+    borderEnd,
+    borderInline,
+    borderBlock,
+    borderColor,
+    height,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingStart,
+    paddingEnd,
+    paddingInline,
+    paddingBlock,
+    inset,
+    insetTop,
+    insetBottom,
+    insetStart,
+    insetEnd,
+    insetInline,
+    insetBlock,
+    justify,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    position,
+    radius,
+    textAlign,
+    width,
+};
+export const resolveMixin = (mixin) => {
+    const output = {
+        variables: {},
+        classNames: [],
+    };
+    const entries = Object.entries(mixin);
+    entries.forEach(([key, value]) => {
+        const mixin = mixinMap[key];
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - too complex to resolve inference without manual typing every method
+        const result = mixin(value);
+        if (result.variables)
+            output.variables = { ...output.variables, ...result.variables };
+        if (result.classNames)
+            output.classNames.push(result.classNames);
+    });
+    return output;
+};

package/dist/styles/resolvers/align/align.css

@@ -0,0 +1 @@
+[style*="--rs-align-s:"]{align-items:var(--rs-align)!important;--rs-align-s: ;--rs-align-m:var(--rs-align-s);--rs-align-l:var(--rs-align-m);--rs-align-xl:var(--rs-align-l);--rs-align:var(--rs-align-s)}@media (--rs-viewport-m ){[style*="--rs-align-s:"]{--rs-align:var(--rs-align-m)}}@media (--rs-viewport-l ){[style*="--rs-align-s:"]{--rs-align:var(--rs-align-l)}}@media (--rs-viewport-xl ){[style*="--rs-align-s:"]{--rs-align:var(--rs-align-xl)}}

package/dist/styles/resolvers/align/index.d.ts

@@ -0,0 +1,4 @@
+import * as T from "../../types";
+import "./align.css";
+declare const align: T.StyleResolver<T.Align>;
+export default align;

package/dist/styles/resolvers/align/index.js

@@ -0,0 +1,10 @@
+import { responsiveVariables } from "../../../utilities/props.js";
+import "./align.css";
+const align = (value) => {
+    if (!value)
+        return {};
+    return {
+        variables: responsiveVariables("--rs-align", value),
+    };
+};
+export default align;

package/dist/styles/resolvers/aspectRatio/aspectRatio.css

@@ -0,0 +1 @@
+[style*="--rs-ratio-s:"]{--rs-ratio-s:0;--rs-ratio-m:var(--rs-ratio-s);--rs-ratio-l:var(--rs-ratio-m);--rs-ratio-xl:var(--rs-ratio-l);--rs-ratio:var(--rs-ratio-s)}[style*="--rs-ratio-s:"]:empty,[style*="--rs-ratio-s:"]:not(:empty)>*{aspect-ratio:var(--rs-ratio)}[style*="--rs-ratio-s:"]>img{object-fit:cover}@media (--rs-viewport-m ){[style*="--rs-ratio-s:"]{--rs-ratio:var(--rs-ratio-m)}}@media (--rs-viewport-l ){[style*="--rs-ratio-s:"]{--rs-ratio:var(--rs-ratio-l)}}@media (--rs-viewport-xl ){[style*="--rs-ratio-s:"]{--rs-ratio:var(--rs-ratio-xl)}}

package/dist/styles/resolvers/aspectRatio/index.d.ts

@@ -0,0 +1,4 @@
+import * as T from "../../types";
+import "./aspectRatio.css";
+declare const aspectRatio: T.StyleResolver<T.AspectRatio>;
+export default aspectRatio;

package/dist/styles/resolvers/aspectRatio/index.js

@@ -0,0 +1,10 @@
+import { responsiveVariables } from "../../../utilities/props.js";
+import "./aspectRatio.css";
+const aspectRatio = (value) => {
+    if (!value)
+        return {};
+    return {
+        variables: responsiveVariables("--rs-ratio", value),
+    };
+};
+export default aspectRatio;

package/dist/styles/resolvers/bleed/bleed.module.css

@@ -0,0 +1 @@
+.root[style*="--rs-bleed-s:"]{margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);--rs-bleed-s:0;--rs-bleed-m:var(--rs-bleed-s);--rs-bleed-l:var(--rs-bleed-m);--rs-bleed-xl:var(--rs-bleed-l);--rs-bleed:var(--rs-bleed-s)}.--bleed{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}@media (--rs-viewport-m ){.root[style*="--rs-bleed-s:"]{--rs-bleed:var(--rs-bleed-m)}.--bleed-true--m{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--m{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}@media (--rs-viewport-l ){.root[style*="--rs-bleed-s:"]{--rs-bleed:var(--rs-bleed-l)}.--bleed-true--l{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--l{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}@media (--rs-viewport-xl ){.root[style*="--rs-bleed-s:"]{--rs-bleed:var(--rs-bleed-xl)}.--bleed-true--xl{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--xl{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}

package/dist/styles/resolvers/bleed/index.d.ts

@@ -0,0 +1,3 @@
+import * as T from "../../types";
+declare const bleed: T.StyleResolver<T.Bleed>;
+export default bleed;

package/dist/styles/{bleed → resolvers/bleed}/index.js

@@ -1,10 +1,10 @@
-import { responsiveClassNames, responsiveVariables, responsivePropDependency, } from "../../utilities/props.js";
+import { responsiveClassNames, responsiveVariables, responsivePropDependency, } from "../../../utilities/props.js";
 import s from "./bleed.module.css";
-const getBleedStyles = (value) => {
+const bleed = (value) => {
     if (value === undefined)
-        return null;
+        return {};
     const classNames = responsiveClassNames(s, "--bleed", responsivePropDependency(value, (value) => typeof value === "number" && value > 0));
     const variables = responsiveVariables("--rs-bleed", value);
     return { classNames: [s.root, classNames], variables };
 };
-export default getBleedStyles;
+export default bleed;

package/dist/styles/resolvers/border/border.module.css

@@ -0,0 +1 @@
+.--border-neutral{--rs-border-color:var(--rs-color-border-neutral)}.--border-neutral-faded{--rs-border-color:var(--rs-color-border-neutral-faded)}.--border-positive{--rs-border-color:var(--rs-color-border-positive)}.--border-positive-faded{--rs-border-color:var(--rs-color-border-positive-faded)}.--border-warning{--rs-border-color:var(--rs-color-border-warning)}.--border-warning-faded{--rs-border-color:var(--rs-color-border-warning-faded)}.--border-critical{--rs-border-color:var(--rs-color-border-critical)}.--border-critical-faded{--rs-border-color:var(--rs-color-border-critical-faded)}.--border-primary{--rs-border-color:var(--rs-color-border-primary)}.--border-primary-faded{--rs-border-color:var(--rs-color-border-primary-faded)}.--border-disabled{--rs-border-color:var(--rs-color-border-disabled)}.--border-brand{--rs-border-color:var(--rs-color-brand)}.--border-transparent{--rs-border-color:transparent}@media (--rs-viewport-m ){.--border-neutral--m{--rs-border-color:var(--rs-color-border-neutral)}.--border-neutral-faded--m{--rs-border-color:var(--rs-color-border-neutral-faded)}.--border-positive--m{--rs-border-color:var(--rs-color-border-positive)}.--border-positive-faded--m{--rs-border-color:var(--rs-color-border-positive-faded)}.--border-warning--m{--rs-border-color:var(--rs-color-border-warning)}.--border-warning-faded--m{--rs-border-color:var(--rs-color-border-warning-faded)}.--border-critical--m{--rs-border-color:var(--rs-color-border-critical)}.--border-critical-faded--m{--rs-border-color:var(--rs-color-border-critical-faded)}.--border-primary--m{--rs-border-color:var(--rs-color-border-primary)}.--border-primary-faded--m{--rs-border-color:var(--rs-color-border-primary-faded)}.--border-disabled--m{--rs-border-color:var(--rs-color-border-disabled)}.--border-brand--m{--rs-border-color:var(--rs-color-brand)}.--border-transparent--m{--rs-border-color:transparent}}@media (--rs-viewport-l ){.--border-neutral--l{--rs-border-color:var(--rs-color-border-neutral)}.--border-neutral-faded--l{--rs-border-color:var(--rs-color-border-neutral-faded)}.--border-positive--l{--rs-border-color:var(--rs-color-border-positive)}.--border-positive-faded--l{--rs-border-color:var(--rs-color-border-positive-faded)}.--border-warning--l{--rs-border-color:var(--rs-color-border-warning)}.--border-warning-faded--l{--rs-border-color:var(--rs-color-border-warning-faded)}.--border-critical--l{--rs-border-color:var(--rs-color-border-critical)}.--border-critical-faded--l{--rs-border-color:var(--rs-color-border-critical-faded)}.--border-primary--l{--rs-border-color:var(--rs-color-border-primary)}.--border-primary-faded--l{--rs-border-color:var(--rs-color-border-primary-faded)}.--border-disabled--l{--rs-border-color:var(--rs-color-border-disabled)}.--border-brand--l{--rs-border-color:var(--rs-color-brand)}.--border-transparent--l{--rs-border-color:transparent}}@media (--rs-viewport-xl ){.--border-neutral--xl{--rs-border-color:var(--rs-color-border-neutral)}.--border-neutral-faded--xl{--rs-border-color:var(--rs-color-border-neutral-faded)}.--border-positive--xl{--rs-border-color:var(--rs-color-border-positive)}.--border-positive-faded--xl{--rs-border-color:var(--rs-color-border-positive-faded)}.--border-warning--xl{--rs-border-color:var(--rs-color-border-warning)}.--border-warning-faded--xl{--rs-border-color:var(--rs-color-border-warning-faded)}.--border-critical--xl{--rs-border-color:var(--rs-color-border-critical)}.--border-critical-faded--xl{--rs-border-color:var(--rs-color-border-critical-faded)}.--border-primary--xl{--rs-border-color:var(--rs-color-border-primary)}.--border-primary-faded--xl{--rs-border-color:var(--rs-color-border-primary-faded)}.--border-disabled--xl{--rs-border-color:var(--rs-color-border-disabled)}.--border-brand--xl{--rs-border-color:var(--rs-color-brand)}.--border-transparent--xl{--rs-border-color:transparent}}

package/dist/styles/resolvers/border/borderWidth.css

@@ -0,0 +1 @@
+[style*="--rs-border-w-s:"]{border:var(--rs-border-w) solid var(--rs-border-color);--rs-border-w-s:1px;--rs-border-w-m:var(--rs-border-w-s);--rs-border-w-l:var(--rs-border-w-m);--rs-border-w-xl:var(--rs-border-w-l);--rs-border-w:var(--rs-border-w-s)}[style*="--rs-border-w-top"]{border-top:var(--rs-border-w-top) solid var(--rs-border-color);--rs-border-w-top-s:1px;--rs-border-w-top-m:var(--rs-border-w-top-s);--rs-border-w-top-l:var(--rs-border-w-top-m);--rs-border-w-top-xl:var(--rs-border-w-top-l);--rs-border-w-top:var(--rs-border-w-top-s)}[style*="--rs-border-w-bottom"]{border-bottom:var(--rs-border-w-bottom) solid var(--rs-border-color);--rs-border-w-bottom-s:1px;--rs-border-w-bottom-m:var(--rs-border-w-bottom-s);--rs-border-w-bottom-l:var(--rs-border-w-bottom-m);--rs-border-w-bottom-xl:var(--rs-border-w-bottom-l);--rs-border-w-bottom:var(--rs-border-w-bottom-s)}[style*="--rs-border-w-start"]{border-inline-start:var(--rs-border-w-start) solid var(--rs-border-color);--rs-border-w-start-s:1px;--rs-border-w-start-m:var(--rs-border-w-start-s);--rs-border-w-start-l:var(--rs-border-w-start-m);--rs-border-w-start-xl:var(--rs-border-w-start-l);--rs-border-w-start:var(--rs-border-w-start-s)}[style*="--rs-border-w-end"]{border-inline-end:var(--rs-border-w-end) solid var(--rs-border-color);--rs-border-w-end-s:1px;--rs-border-w-end-m:var(--rs-border-w-end-s);--rs-border-w-end-l:var(--rs-border-w-end-m);--rs-border-w-end-xl:var(--rs-border-w-end-l);--rs-border-w-end:var(--rs-border-w-end-s)}[style*="--rs-border-w-inline"]{border-inline:var(--rs-border-w-inline) solid var(--rs-border-color);--rs-border-w-inline-s:1px;--rs-border-w-inline-m:var(--rs-border-w-inline-s);--rs-border-w-inline-l:var(--rs-border-w-inline-m);--rs-border-w-inline-xl:var(--rs-border-w-inline-l);--rs-border-w-inline:var(--rs-border-w-inline-s)}[style*="--rs-border-w-block"]{border-block:var(--rs-border-w-block) solid var(--rs-border-color);--rs-border-w-block-s:1px;--rs-border-w-block-m:var(--rs-border-w-block-s);--rs-border-w-block-l:var(--rs-border-w-block-m);--rs-border-w-block-xl:var(--rs-border-w-block-l);--rs-border-w-block:var(--rs-border-w-block-s)}@media (--rs-viewport-m ){[style*="--rs-border-w-s:"]{--rs-border-w:var(--rs-border-w-m)}[style*="--rs-border-w-top"]{--rs-border-w-top:var(--rs-border-w-top-m)}[style*="--rs-border-w-bottom"]{--rs-border-w-bottom:var(--rs-border-w-bottom-m)}[style*="--rs-border-w-start"]{--rs-border-w-start:var(--rs-border-w-start-m)}[style*="--rs-border-w-end"]{--rs-border-w-end:var(--rs-border-w-end-m)}[style*="--rs-border-w-inline"]{--rs-border-w-inline:var(--rs-border-w-inline-m)}[style*="--rs-border-w-block"]{--rs-border-w-block:var(--rs-border-w-block-m)}}@media (--rs-viewport-l ){[style*="--rs-border-w-s:"]{--rs-border-w:var(--rs-border-w-l)}[style*="--rs-border-w-top"]{--rs-border-w-top:var(--rs-border-w-top-l)}[style*="--rs-border-w-bottom"]{--rs-border-w-bottom:var(--rs-border-w-bottom-l)}[style*="--rs-border-w-start"]{--rs-border-w-start:var(--rs-border-w-start-l)}[style*="--rs-border-w-end"]{--rs-border-w-end:var(--rs-border-w-end-l)}[style*="--rs-border-w-inline"]{--rs-border-w-inline:var(--rs-border-w-inline-l)}[style*="--rs-border-w-block"]{--rs-border-w-block:var(--rs-border-w-block-l)}}@media (--rs-viewport-xl ){[style*="--rs-border-w-s:"]{--rs-border-w:var(--rs-border-w-xl)}[style*="--rs-border-w-top"]{--rs-border-w-top:var(--rs-border-w-top-xl)}[style*="--rs-border-w-bottom"]{--rs-border-w-bottom:var(--rs-border-w-bottom-xl)}[style*="--rs-border-w-start"]{--rs-border-w-start:var(--rs-border-w-start-xl)}[style*="--rs-border-w-end"]{--rs-border-w-end:var(--rs-border-w-end-xl)}[style*="--rs-border-w-inline"]{--rs-border-w-inline:var(--rs-border-w-inline-xl)}[style*="--rs-border-w-block"]{--rs-border-w-block:var(--rs-border-w-block-xl)}}

package/dist/styles/resolvers/border/index.d.ts

@@ -0,0 +1,11 @@
+import * as T from "../../types";
+import "./borderWidth.css";
+declare const border: T.StyleResolver<T.Border>;
+export declare const borderTop: T.StyleResolver<T.Border>;
+export declare const borderBottom: T.StyleResolver<T.Border>;
+export declare const borderStart: T.StyleResolver<T.Border>;
+export declare const borderEnd: T.StyleResolver<T.Border>;
+export declare const borderBlock: T.StyleResolver<T.Border>;
+export declare const borderInline: T.StyleResolver<T.Border>;
+export declare const borderColor: T.StyleResolver<T.BorderColor>;
+export default border;

package/dist/styles/resolvers/border/index.js

@@ -0,0 +1,74 @@
+import { responsiveClassNames, responsivePropDependency, responsiveVariables, } from "../../../utilities/props.js";
+import s from "./border.module.css";
+import "./borderWidth.css";
+const border = (value) => {
+    if (!value)
+        return {};
+    return {
+        variables: responsiveVariables("--rs-border-w", responsivePropDependency(value, (value) => {
+            return value ? "1px" : "0px";
+        })),
+    };
+};
+export const borderTop = (value) => {
+    if (!value)
+        return {};
+    return {
+        variables: responsiveVariables("--rs-border-w-top", responsivePropDependency(value, (value) => {
+            return value ? "1px" : "0px";
+        })),
+    };
+};
+export const borderBottom = (value) => {
+    if (!value)
+        return {};
+    return {
+        variables: responsiveVariables("--rs-border-w-bottom", responsivePropDependency(value, (value) => {
+            return value ? "1px" : "0px";
+        })),
+    };
+};
+export const borderStart = (value) => {
+    if (!value)
+        return {};
+    return {
+        variables: responsiveVariables("--rs-border-w-start", responsivePropDependency(value, (value) => {
+            return value ? "1px" : "0px";
+        })),
+    };
+};
+export const borderEnd = (value) => {
+    if (!value)
+        return {};
+    return {
+        variables: responsiveVariables("--rs-border-w-end", responsivePropDependency(value, (value) => {
+            return value ? "1px" : "0px";
+        })),
+    };
+};
+export const borderBlock = (value) => {
+    if (!value)
+        return {};
+    return {
+        variables: responsiveVariables("--rs-border-w-block", responsivePropDependency(value, (value) => {
+            return value ? "1px" : "0px";
+        })),
+    };
+};
+export const borderInline = (value) => {
+    if (!value)
+        return {};
+    return {
+        variables: responsiveVariables("--rs-border-w-inline", responsivePropDependency(value, (value) => {
+            return value ? "1px" : "0px";
+        })),
+    };
+};
+export const borderColor = (value) => {
+    if (!value)
+        return {};
+    return {
+        classNames: responsiveClassNames(s, "--border", value),
+    };
+};
+export default border;

package/dist/styles/resolvers/height/index.d.ts

@@ -0,0 +1,3 @@
+import * as T from "../../types";
+declare const height: T.StyleResolver<T.Height>;
+export default height;

package/dist/styles/{height → resolvers/height}/index.js

@@ -1,10 +1,10 @@
-import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
+import { responsiveClassNames, responsiveVariables } from "../../../utilities/props.js";
 import s from "./height.module.css";
-const getHeightStyles = (value) => {
+const height = (value) => {
     if (!value)
-        return null;
+        return {};
     const variables = responsiveVariables("--rs-h", value);
     const classNames = responsiveClassNames(s, (value) => (typeof value === "number" ? "--type-unit" : "--type-literal"), value, { excludeValueFromClassName: true });
     return { classNames: [s.root, classNames], variables };
 };
-export default getHeightStyles;
+export default height;

package/dist/styles/resolvers/inset/index.d.ts

@@ -0,0 +1,10 @@
+import * as T from "../../types";
+import "./inset.css";
+declare const inset: T.StyleResolver<T.Inset>;
+export declare const insetTop: T.StyleResolver<T.Inset>;
+export declare const insetBottom: T.StyleResolver<T.Inset>;
+export declare const insetStart: T.StyleResolver<T.Inset>;
+export declare const insetEnd: T.StyleResolver<T.Inset>;
+export declare const insetInline: T.StyleResolver<T.Inset>;
+export declare const insetBlock: T.StyleResolver<T.Inset>;
+export default inset;

package/dist/styles/resolvers/inset/index.js

@@ -0,0 +1,38 @@
+import { responsiveVariables } from "../../../utilities/props.js";
+import "./inset.css";
+const inset = (value) => {
+    if (value === undefined)
+        return {};
+    return { variables: responsiveVariables("--rs-inset", value) };
+};
+export const insetTop = (value) => {
+    if (value === undefined)
+        return {};
+    return { variables: responsiveVariables("--rs-inset-top", value) };
+};
+export const insetBottom = (value) => {
+    if (value === undefined)
+        return {};
+    return { variables: responsiveVariables("--rs-inset-bottom", value) };
+};
+export const insetStart = (value) => {
+    if (value === undefined)
+        return {};
+    return { variables: responsiveVariables("--rs-inset-start", value) };
+};
+export const insetEnd = (value) => {
+    if (value === undefined)
+        return {};
+    return { variables: responsiveVariables("--rs-inset-end", value) };
+};
+export const insetInline = (value) => {
+    if (value === undefined)
+        return {};
+    return { variables: responsiveVariables("--rs-inset-inline", value) };
+};
+export const insetBlock = (value) => {
+    if (value === undefined)
+        return {};
+    return { variables: responsiveVariables("--rs-inset-block", value) };
+};
+export default inset;