@clubmed/trident-ui 1.5.1-beta.1 → 1.6.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # ClubMed React UI components changelog
 
+# [1.6.0-beta.1](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.5.1-beta.1...v1.6.0-beta.1) (2026-01-06)
+
+
+### Features
+
+* **hooks:** add `useSlots` hook with tests, stories, and documentation ([c3d8ccc](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/c3d8ccc4a02f959fda442f6361e3ac51dde56bb1))
+* **molecules:** add `Portal` component stories and extend `Popin` stories with `withPortal` usage ([187ce94](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/187ce94ec0a899f1b1a1f10a63f8b3a588ea6287))
+
 ## [1.5.1-beta.1](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.5.0...v1.5.1-beta.1) (2025-12-15)
 
 

package/assets/trident-ui.css

@@ -1 +1 @@
-.button{border-width:1px;border-style:solid;font-family:var(--font-family-sans, Inter),Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:600;-moz-column-gap:.5rem;column-gap:.5rem;align-items:center;justify-content:center;flex-shrink:0;text-align:center;transition-property:transform,color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.button:disabled{pointer-events:none}@media (hover: hover) and (pointer: fine){.button:active:not(:disabled):active{--tw-scale-x: .98;--tw-scale-y: .98;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}.button-outline,.button-solid{--button-bg-opacity: 1;--button-bg-opacity-active: 1;--button-border-opacity: 1;--button-border-opacity-active: 1}.button-outline{background-color:transparent;border-color:hsl(var(--button-primary) / var(--button-border-opacity));color:hsl(var(--button-primary))}@media (hover: hover) and (pointer: fine){.button-outline:active:not(:disabled),.button-outline:hover:not(:disabled),.button-outline:focus:not(:disabled),.group:hover .button-outline:not(:disabled){background-color:hsl(var(--button-primary) / var(--button-bg-opacity));border-color:hsl(var(--button-primary) / var(--button-border-opacity));color:hsl(var(--button-secondary))}}.button-solid{background-color:hsl(var(--button-primary) / var(--button-bg-opacity));border-color:hsl(var(--button-primary) / var(--button-border-opacity));color:hsl(var(--button-secondary))}@media (hover: hover) and (pointer: fine){.button-solid:active:not(:disabled),.button-solid:hover:not(:disabled),.button-solid:focus:not(:disabled),.group:hover .button-solid:not(:disabled){background-color:hsl(var(--button-active) / var(--button-bg-opacity-active));border-color:hsl(var(--button-active) / var(--button-border-opacity-active));color:hsl(var(--button-secondary))}}.button-black{--button-primary: var(--color-black);--button-secondary: var(--color-white);--button-active: var(--color-black-active)}.button-green{--button-primary: var(--color-green);--button-secondary: var(--color-white);--button-active: var(--color-green-active)}.button-lavender{--button-primary: var(--color-lavender);--button-secondary: var(--color-white);--button-active: var(--color-lavender-active)}.button-lightSand{--button-primary: var(--color-lightSand);--button-secondary: var(--color-black);--button-active: var(--color-lightSand-active)}.button-marygold{--button-primary: var(--color-marygold);--button-secondary: var(--color-black);--button-active: var(--color-marygold-active)}.button-orange{--button-primary: var(--color-orange);--button-secondary: var(--color-white);--button-active: var(--color-orange-active)}.button-red{--button-primary: var(--color-red);--button-secondary: var(--color-white);--button-active: var(--color-red-active)}.button-saffron{--button-primary: var(--color-saffron);--button-secondary: var(--color-black);--button-active: var(--color-saffron-active)}.button-sand{--button-primary: var(--color-sand);--button-secondary: var(--color-black);--button-active: var(--color-sand-active)}.button-sienna{--button-primary: var(--color-sienna);--button-secondary: var(--color-white);--button-active: var(--color-sienna-active)}.button-ultramarine{--button-primary: var(--color-ultramarine);--button-secondary: var(--color-white);--button-active: var(--color-ultramarine-active)}.button-verdigris{--button-primary: var(--color-verdigris);--button-secondary: var(--color-black);--button-active: var(--color-verdigris-active)}.button-wave{--button-primary: var(--color-wave);--button-secondary: var(--color-white);--button-active: var(--color-wave-active)}.button-white{--button-primary: var(--color-white);--button-secondary: var(--color-black);--button-active: var(--color-white-active)}.button-solid:disabled{--button-primary: var(--color-pearl);--button-secondary: var(--color-grey)}.button-outline:disabled{--button-primary: var(--color-grey);--button-secondary: var(--color-grey)}.button-small{--button-pill-px: 1.25rem;--button-pill-py: .75rem}.button-large,.button-medium{--button-pill-px: 2rem;--button-pill-py: .75rem}.button-small,.button-medium{--button-circle-size: var(--button-size, 3rem)}.button-large{--button-circle-size: var(--button-size, 6.25rem)}.button-circle{aspect-ratio:1 / 1;overflow:hidden;border-radius:100%;font-size:1rem;line-height:1.5rem;padding:0;width:var(--button-circle-size);height:var(--button-circle-size)}.button-pill{aspect-ratio:auto;overflow:auto;border-radius:7.5rem;font-size:1rem;line-height:1.5rem;padding-left:var(--button-pill-px);padding-right:var(--button-pill-px);padding-top:var(--button-pill-py);padding-bottom:var(--button-pill-py);--button-circle-size: none}.tab-focus-pill{transform:translate(calc(var(--tab-index, 0) * -100% + var(--active-tab, 0) * 100% - (.25rem * (var(--tab-index) - var(--active-tab, 0)))))}[dir=rtl] .tab-focus-pill{transform:translate(calc(var(--tab-index) * 100% + var(--active-tab) * -100% + (.25rem * (var(--tab-index) - var(--active-tab)))))}label>span>input[type=checkbox]:not([role=switch]),label>span>input[type=radio]{position:absolute;height:100%;width:100%;border-width:0px;opacity:0}label>span>input[type=checkbox]:not([role=switch])+span,label>span>input[type=radio]+span{position:relative;display:flex;align-items:center;justify-content:center;border-width:1px;--tw-border-opacity: 1;border-color:hsl(var(--color-grey) / var(--tw-border-opacity, 1));--tw-ring-opacity: 0;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>span>input[type=checkbox]:not([role=switch])+span svg,label>span>input[type=radio]+span svg{opacity:0;transform:scale(0);transform-origin:center;transition:all var(--transition-duration-boop) var(--transition-fn-boop)}label>span>input[type=checkbox]:not([role=switch]):checked+span svg,label>span>input[type=radio]:checked+span svg{opacity:1;transform:scale(1)}label>span>input[type=checkbox]:not([role=switch]):checked+span,label>span>input[type=checkbox]:not([role=switch]):not([disabled]):hover+span,label>span>input[type=radio]:checked+span,label>span>input[type=radio]:not([disabled]):hover+span{--tw-border-opacity: 1;border-color:hsl(var(--color-black) / var(--tw-border-opacity, 1))}label>span>input[type=checkbox]:not([role=switch]):focus-visible+span,label>span>input[type=radio]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}label>span>input[type=radio]+span{border-radius:100%}label>span>input[type=checkbox]:not([role=switch])+span{border-radius:.5rem}label>input[type=checkbox][data-name=Filter]{position:absolute;height:100%;width:100%;border-width:0px;opacity:0}label>input[type=checkbox][data-name=Filter]+span{--tw-ring-opacity: 0;transition-property:all;position:relative;display:flex;align-items:center;justify-content:center;border-radius:7.5rem;border-width:1px;--tw-border-opacity: 1;border-color:hsl(var(--color-grey) / var(--tw-border-opacity, 1));padding:.75rem 1.25rem;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>input[type=checkbox][data-name=Filter]+span [data-icon=CheckDefault]{--tw-text-opacity: 1;color:hsl(var(--color-black) / var(--tw-text-opacity, 1));opacity:0;transform:scale(0);transform-origin:center;width:0;transition:all var(--transition-duration-boop) var(--transition-fn-boop)}label>input[type=checkbox][data-name=Filter]:not([disabled]):not(:checked):hover+span{--tw-border-opacity: 1;border-color:hsl(var(--color-black) / var(--tw-border-opacity, 1))}label>input[type=checkbox][data-name=Filter]:checked+span{--tw-border-opacity: 1;border-color:hsl(var(--color-saffron) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity, 1))}label>input[type=checkbox][data-name=Filter]:checked+span [data-icon=CheckDefault]{margin-left:.5rem;opacity:1;width:24px;transform:scale(1)}label>input[type=checkbox][data-name=Filter]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}label>span>input[type=checkbox][role=switch]+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / var(--tw-ring-opacity, 1));--tw-ring-opacity: 0;transition-property:all;position:relative;display:flex;align-items:center;border-radius:7.5rem;--tw-bg-opacity: 1;background-color:hsl(var(--color-grey) / var(--tw-bg-opacity, 1));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>span>input[type=checkbox][role=switch]+span>svg{transition:all var(--transition-duration-boop) var(--transition-fn-boop);transform:translate(calc(0% + 4px))}label>span>input[type=checkbox][role=switch]+span>svg circle+circle{opacity:1;transition:opacity var(--transition-duration-boop) var(--transition-fn-boop)}label>span>input[type=checkbox][role=switch]:checked+span{--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity, 1))}label>span>input[type=checkbox][role=switch]:checked+span>svg{transform:translate(calc(100% + 4px))}label>span>input[type=checkbox][role=switch]:checked+span>svg circle+circle{opacity:0}label>span>input[type=checkbox][role=switch]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}.breadcrumb-spacer:before{content:"..."}.container{width:100%}@media (min-width: 40rem){.container{max-width:40rem}}@media (min-width: 48rem){.container{max-width:48rem}}@media (min-width: 64rem){.container{max-width:64rem}}@media (min-width: 76.25rem){.container{max-width:76.25rem}}@media (min-width: 96rem){.container{max-width:96rem}}@media (min-width: 128.75rem){.container{max-width:128.75rem}}.prose{color:var(--tw-prose-body);max-width:none}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:700}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"“""”""‘""’";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:4rem;margin-top:0;margin-bottom:.8888889em;line-height:4.125rem}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:3rem;margin-top:2em;margin-bottom:1em;line-height:3.125rem}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:2.5rem;margin-top:1.6em;margin-bottom:.6em;line-height:2.625rem}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;margin-top:1.5em;margin-bottom:.5em;line-height:2.125rem;font-size:2rem}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-inline-start:1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body: currentColor;--tw-prose-headings: currentColor;--tw-prose-lead: currentColor;--tw-prose-links: currentColor;--tw-prose-bold: currentColor;--tw-prose-counters: currentColor;--tw-prose-bullets: currentColor;--tw-prose-hr: currentColor;--tw-prose-quotes: currentColor;--tw-prose-quote-borders: currentColor;--tw-prose-captions: currentColor;--tw-prose-kbd: #111827;--tw-prose-kbd-shadows: rgb(17 24 39 / 10%);--tw-prose-code: currentColor;--tw-prose-pre-code: currentColor;--tw-prose-pre-bg: transparent;--tw-prose-th-borders: currentColor;--tw-prose-td-borders: currentColor;--tw-prose-invert-body: currentColor;--tw-prose-invert-headings: currentColor;--tw-prose-invert-lead: currentColor;--tw-prose-invert-links: currentColor;--tw-prose-invert-bold: currentColor;--tw-prose-invert-counters: currentColor;--tw-prose-invert-bullets: currentColor;--tw-prose-invert-hr: currentColor;--tw-prose-invert-quotes: currentColor;--tw-prose-invert-quote-borders: currentColor;--tw-prose-invert-captions: currentColor;--tw-prose-invert-kbd: #fff;--tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);--tw-prose-invert-code: currentColor;--tw-prose-invert-pre-code: currentColor;--tw-prose-invert-pre-bg: transparent;--tw-prose-invert-th-borders: currentColor;--tw-prose-invert-td-borders: currentColor;font-size:inherit;line-height:inherit}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose :where(h1,h2,h3,h4,h5,h6):not(:where([class~=not-prose],[class~=not-prose] *)){font-family:var(--font-family-serif, Newsreader),Times New Roman,Times,serif;margin-bottom:2.5rem}.prose :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.75rem;line-height:1.875rem;font-weight:700}.prose :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.5rem;line-height:1.625rem;font-weight:700}.input-range-container{position:relative;--tw-bg-opacity: 1;background-color:hsl(var(--color-pearl) / var(--tw-bg-opacity, 1));display:grid;--diff: calc(var(--max) - var(--min));--tickmarkWidth: 2px;grid-template:repeat(2,max-content) var(--inputHeight) / 1fr 1fr;width:var(--inputWidth);background-image:repeating-linear-gradient(90deg,#999,#999 var(--tickmarkWidth),hsl(var(--color-pearl)) 0,hsl(var(--color-pearl)) calc(((100% - var(--tickmarkWidth)) / var(--max))))}.input-range-container:before,.input-range-container:after{--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity, 1));grid-column:1 / span 2;grid-row:3;content:""}html:not(.rtl) .input-range-container:before{margin-left:calc((var(--valueA) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueB) - var(--valueA)) / var(--diff) * var(--usefulWidth))}html:not(.rtl) .input-range-container:after{margin-left:calc((var(--valueB) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueA) - var(--valueB)) / var(--diff) * var(--usefulWidth))}.rtl .input-range-container:before{margin-right:calc((var(--valueA) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueB) - var(--valueA)) / var(--diff) * var(--usefulWidth))}.rtl .input-range-container:after{margin-right:calc((var(--valueB) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueA) - var(--valueB)) / var(--diff) * var(--usefulWidth))}.input-range{z-index:1;top:0;left:0;margin:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;grid-column:1 / span 2;grid-row:3;background:none;--col: #000}.input-range-sliderThumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-webkit-slider-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-webkit-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-webkit-slider-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range::-moz-range-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-moz-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-moz-range-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range::-ms-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-ms-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-ms-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-moz-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-ms-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range-output{display:block;position:absolute;margin-top:1.25rem;font-size:.75rem;line-height:.875rem;font-weight:600;left:calc(.5 * var(--thumbWidth))}html:not(.rtl) .input-range-output{transform:translate(calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * var(--usefulWidth) - 50%))}.rtl .input-range-output{transform:translate(calc((var(--max) - var(--value) - var(--min)) / (var(--max) - var(--min)) * var(--usefulWidth) - 50%))}
+.button{border-width:1px;border-style:solid;font-family:var(--font-family-sans, Inter),Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:600;-moz-column-gap:.5rem;column-gap:.5rem;align-items:center;justify-content:center;flex-shrink:0;text-align:center;transition-property:transform,color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.button:disabled{pointer-events:none}@media (hover: hover) and (pointer: fine){.button:active:not(:disabled):active{--tw-scale-x: .98;--tw-scale-y: .98;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}.button-outline,.button-solid{--button-bg-opacity: 1;--button-bg-opacity-active: 1;--button-border-opacity: 1;--button-border-opacity-active: 1}.button-outline{background-color:transparent;border-color:hsl(var(--button-primary) / var(--button-border-opacity));color:hsl(var(--button-primary))}@media (hover: hover) and (pointer: fine){.button-outline:active:not(:disabled),.button-outline:hover:not(:disabled),.button-outline:focus:not(:disabled),.group:hover .button-outline:not(:disabled){background-color:hsl(var(--button-primary) / var(--button-bg-opacity));border-color:hsl(var(--button-primary) / var(--button-border-opacity));color:hsl(var(--button-secondary))}}.button-solid{background-color:hsl(var(--button-primary) / var(--button-bg-opacity));border-color:hsl(var(--button-primary) / var(--button-border-opacity));color:hsl(var(--button-secondary))}@media (hover: hover) and (pointer: fine){.button-solid:active:not(:disabled),.button-solid:hover:not(:disabled),.button-solid:focus:not(:disabled),.group:hover .button-solid:not(:disabled){background-color:hsl(var(--button-active) / var(--button-bg-opacity-active));border-color:hsl(var(--button-active) / var(--button-border-opacity-active));color:hsl(var(--button-secondary))}}.button-black{--button-primary: var(--color-black);--button-secondary: var(--color-white);--button-active: var(--color-black-active)}.button-green{--button-primary: var(--color-green);--button-secondary: var(--color-white);--button-active: var(--color-green-active)}.button-lavender{--button-primary: var(--color-lavender);--button-secondary: var(--color-white);--button-active: var(--color-lavender-active)}.button-lightSand{--button-primary: var(--color-lightSand);--button-secondary: var(--color-black);--button-active: var(--color-lightSand-active)}.button-marygold{--button-primary: var(--color-marygold);--button-secondary: var(--color-black);--button-active: var(--color-marygold-active)}.button-orange{--button-primary: var(--color-orange);--button-secondary: var(--color-white);--button-active: var(--color-orange-active)}.button-red{--button-primary: var(--color-red);--button-secondary: var(--color-white);--button-active: var(--color-red-active)}.button-saffron{--button-primary: var(--color-saffron);--button-secondary: var(--color-black);--button-active: var(--color-saffron-active)}.button-sand{--button-primary: var(--color-sand);--button-secondary: var(--color-black);--button-active: var(--color-sand-active)}.button-sienna{--button-primary: var(--color-sienna);--button-secondary: var(--color-white);--button-active: var(--color-sienna-active)}.button-ultramarine{--button-primary: var(--color-ultramarine);--button-secondary: var(--color-white);--button-active: var(--color-ultramarine-active)}.button-verdigris{--button-primary: var(--color-verdigris);--button-secondary: var(--color-black);--button-active: var(--color-verdigris-active)}.button-wave{--button-primary: var(--color-wave);--button-secondary: var(--color-white);--button-active: var(--color-wave-active)}.button-white{--button-primary: var(--color-white);--button-secondary: var(--color-black);--button-active: var(--color-white-active)}.button-solid:disabled{--button-primary: var(--color-pearl);--button-secondary: var(--color-grey)}.button-outline:disabled{--button-primary: var(--color-grey);--button-secondary: var(--color-grey)}.button-small{--button-pill-px: 1.25rem;--button-pill-py: .75rem}.button-large,.button-medium{--button-pill-px: 2rem;--button-pill-py: .75rem}.button-small,.button-medium{--button-circle-size: var(--button-size, 3rem)}.button-large{--button-circle-size: var(--button-size, 6.25rem)}.button-circle{aspect-ratio:1 / 1;overflow:hidden;border-radius:100%;font-size:1rem;line-height:1.5rem;padding:0;width:var(--button-circle-size);height:var(--button-circle-size)}.button-pill{aspect-ratio:auto;overflow:auto;border-radius:7.5rem;font-size:1rem;line-height:1.5rem;padding-left:var(--button-pill-px);padding-right:var(--button-pill-px);padding-top:var(--button-pill-py);padding-bottom:var(--button-pill-py);--button-circle-size: none}.tab-focus-pill{transform:translate(calc(var(--tab-index, 0) * -100% + var(--active-tab, 0) * 100% - (.25rem * (var(--tab-index) - var(--active-tab, 0)))))}[dir=rtl] .tab-focus-pill{transform:translate(calc(var(--tab-index) * 100% + var(--active-tab) * -100% + (.25rem * (var(--tab-index) - var(--active-tab)))))}label>span>input[type=checkbox]:not([role=switch]),label>span>input[type=radio]{position:absolute;height:100%;width:100%;border-width:0px;opacity:0}label>span>input[type=checkbox]:not([role=switch])+span,label>span>input[type=radio]+span{position:relative;display:flex;align-items:center;justify-content:center;border-width:1px;--tw-border-opacity: 1;border-color:hsl(var(--color-grey) / var(--tw-border-opacity, 1));--tw-ring-opacity: 0;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>span>input[type=checkbox]:not([role=switch])+span svg,label>span>input[type=radio]+span svg{opacity:0;transform:scale(0);transform-origin:center;transition:all var(--transition-duration-boop) var(--transition-fn-boop)}label>span>input[type=checkbox]:not([role=switch]):checked+span svg,label>span>input[type=radio]:checked+span svg{opacity:1;transform:scale(1)}label>span>input[type=checkbox]:not([role=switch]):checked+span,label>span>input[type=checkbox]:not([role=switch]):not([disabled]):hover+span,label>span>input[type=radio]:checked+span,label>span>input[type=radio]:not([disabled]):hover+span{--tw-border-opacity: 1;border-color:hsl(var(--color-black) / var(--tw-border-opacity, 1))}label>span>input[type=checkbox]:not([role=switch]):focus-visible+span,label>span>input[type=radio]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}label>span>input[type=radio]+span{border-radius:100%}label>span>input[type=checkbox]:not([role=switch])+span{border-radius:.5rem}@media (hover: hover) and (pointer: fine){label:active>input[type=checkbox][data-name=Filter]:not(:disabled):active{--tw-scale-x: .98;--tw-scale-y: .98;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}label>input[type=checkbox][data-name=Filter]{position:absolute;height:100%;width:100%;border-width:0px;opacity:0}label>input[type=checkbox][data-name=Filter]+span{--tw-ring-opacity: 0;transition-property:all;--tw-border-opacity: 1;border-color:hsl(var(--color-grey) / var(--tw-border-opacity, 1));border-radius:7.5rem;position:relative;display:flex;align-items:center;justify-content:center;border-width:1px;padding:.75rem 1.25rem;transition-property:transform,color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>input[type=checkbox][data-name=Filter]+span .check{--tw-text-opacity: 1;color:hsl(var(--color-black) / var(--tw-text-opacity, 1));opacity:0;transform:scale(0);transform-origin:center;width:0;transition:all var(--transition-duration-boop) var(--transition-fn-boop)}label>input[type=checkbox][data-name=Filter]:not([disabled]):not(:checked):hover+span{--tw-border-opacity: 1;border-color:hsl(var(--color-black) / var(--tw-border-opacity, 1))}label>input[type=checkbox][data-name=Filter]:checked+span{--tw-border-opacity: 1;border-color:hsl(var(--color-saffron) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity, 1))}label>input[type=checkbox][data-name=Filter]:checked+span .check{margin-left:.5rem;opacity:1;width:24px;transform:scale(1)}label>input[type=checkbox][data-name=Filter]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}label>span>input[type=checkbox][role=switch]+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / var(--tw-ring-opacity, 1));--tw-ring-opacity: 0;transition-property:all;position:relative;display:flex;align-items:center;border-radius:7.5rem;--tw-bg-opacity: 1;background-color:hsl(var(--color-grey) / var(--tw-bg-opacity, 1));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>span>input[type=checkbox][role=switch]+span>svg{transition:all var(--transition-duration-boop) var(--transition-fn-boop);transform:translate(calc(0% + 4px))}label>span>input[type=checkbox][role=switch]+span>svg circle+circle{opacity:1;transition:opacity var(--transition-duration-boop) var(--transition-fn-boop)}label>span>input[type=checkbox][role=switch]:checked+span{--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity, 1))}label>span>input[type=checkbox][role=switch]:checked+span>svg{transform:translate(calc(100% + 4px))}label>span>input[type=checkbox][role=switch]:checked+span>svg circle+circle{opacity:0}label>span>input[type=checkbox][role=switch]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}.breadcrumb-spacer:before{content:"..."}.container{width:100%}@media (min-width: 40rem){.container{max-width:40rem}}@media (min-width: 48rem){.container{max-width:48rem}}@media (min-width: 64rem){.container{max-width:64rem}}@media (min-width: 76.25rem){.container{max-width:76.25rem}}@media (min-width: 96rem){.container{max-width:96rem}}@media (min-width: 128.75rem){.container{max-width:128.75rem}}.prose{color:var(--tw-prose-body);max-width:none}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:700}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"“""”""‘""’";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:4rem;margin-top:0;margin-bottom:.8888889em;line-height:4.125rem}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:3rem;margin-top:2em;margin-bottom:1em;line-height:3.125rem}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:2.5rem;margin-top:1.6em;margin-bottom:.6em;line-height:2.625rem}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;margin-top:1.5em;margin-bottom:.5em;line-height:2.125rem;font-size:2rem}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-inline-start:1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body: currentColor;--tw-prose-headings: currentColor;--tw-prose-lead: currentColor;--tw-prose-links: currentColor;--tw-prose-bold: currentColor;--tw-prose-counters: currentColor;--tw-prose-bullets: currentColor;--tw-prose-hr: currentColor;--tw-prose-quotes: currentColor;--tw-prose-quote-borders: currentColor;--tw-prose-captions: currentColor;--tw-prose-kbd: #111827;--tw-prose-kbd-shadows: rgb(17 24 39 / 10%);--tw-prose-code: currentColor;--tw-prose-pre-code: currentColor;--tw-prose-pre-bg: transparent;--tw-prose-th-borders: currentColor;--tw-prose-td-borders: currentColor;--tw-prose-invert-body: currentColor;--tw-prose-invert-headings: currentColor;--tw-prose-invert-lead: currentColor;--tw-prose-invert-links: currentColor;--tw-prose-invert-bold: currentColor;--tw-prose-invert-counters: currentColor;--tw-prose-invert-bullets: currentColor;--tw-prose-invert-hr: currentColor;--tw-prose-invert-quotes: currentColor;--tw-prose-invert-quote-borders: currentColor;--tw-prose-invert-captions: currentColor;--tw-prose-invert-kbd: #fff;--tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);--tw-prose-invert-code: currentColor;--tw-prose-invert-pre-code: currentColor;--tw-prose-invert-pre-bg: transparent;--tw-prose-invert-th-borders: currentColor;--tw-prose-invert-td-borders: currentColor;font-size:inherit;line-height:inherit}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose :where(h1,h2,h3,h4,h5,h6):not(:where([class~=not-prose],[class~=not-prose] *)){font-family:var(--font-family-serif, Newsreader),Times New Roman,Times,serif;margin-bottom:2.5rem}.prose :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.75rem;line-height:1.875rem;font-weight:700}.prose :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.5rem;line-height:1.625rem;font-weight:700}.input-range-container{position:relative;--tw-bg-opacity: 1;background-color:hsl(var(--color-pearl) / var(--tw-bg-opacity, 1));display:grid;--diff: calc(var(--max) - var(--min));--tickmarkWidth: 2px;grid-template:repeat(2,max-content) var(--inputHeight) / 1fr 1fr;width:var(--inputWidth);background-image:repeating-linear-gradient(90deg,#999,#999 var(--tickmarkWidth),hsl(var(--color-pearl)) 0,hsl(var(--color-pearl)) calc(((100% - var(--tickmarkWidth)) / var(--max))))}.input-range-container:before,.input-range-container:after{--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity, 1));grid-column:1 / span 2;grid-row:3;content:""}html:not(.rtl) .input-range-container:before{margin-left:calc((var(--valueA) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueB) - var(--valueA)) / var(--diff) * var(--usefulWidth))}html:not(.rtl) .input-range-container:after{margin-left:calc((var(--valueB) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueA) - var(--valueB)) / var(--diff) * var(--usefulWidth))}.rtl .input-range-container:before{margin-right:calc((var(--valueA) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueB) - var(--valueA)) / var(--diff) * var(--usefulWidth))}.rtl .input-range-container:after{margin-right:calc((var(--valueB) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueA) - var(--valueB)) / var(--diff) * var(--usefulWidth))}.input-range{z-index:1;top:0;left:0;margin:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;grid-column:1 / span 2;grid-row:3;background:none;--col: #000}.input-range-sliderThumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-webkit-slider-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-webkit-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-webkit-slider-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range::-moz-range-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-moz-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-moz-range-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range::-ms-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-ms-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-ms-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-moz-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-ms-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range-output{display:block;position:absolute;margin-top:1.25rem;font-size:.75rem;line-height:.875rem;font-weight:600;left:calc(.5 * var(--thumbWidth))}html:not(.rtl) .input-range-output{transform:translate(calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * var(--usefulWidth) - 50%))}.rtl .input-range-output{transform:translate(calc((var(--max) - var(--value) - var(--min)) / (var(--max) - var(--min)) * var(--usefulWidth) - 50%))}

package/hooks/useSlots.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+/**
+ * A hook that organizes React children into named slots based on their `data-slot` attribute.
+ *
+ * Children without a `data-slot` attribute or with a slot name not in the allowed list
+ * are collected under the default "children" slot. This pattern enables flexible component
+ * composition similar to named slots in other frameworks.
+ *
+ * @param children - The React children to organize into slots. Can be null, boolean, or undefined.
+ * @param allowed - Optional array of allowed slot names. If empty, all slot names are accepted.
+ *                  If provided, only children with matching slot names will be organized into their
+ *                  respective slots; others fall back to the "children" slot.
+ *
+ * @returns A record mapping slot names to arrays of React nodes. Always includes a "children" slot
+ *          for unslotted or disallowed content.
+ *
+ * @example
+ * ```tsx
+ * function Card({ children }: { children: ReactNode }) {
+ *   const slots = useSlots(children, ['header', 'footer']);
+ *
+ *   return (
+ *     <div>
+ *       <header>{slots.header}</header>
+ *       <main>{slots.children}</main>
+ *       <footer>{slots.footer}</footer>
+ *     </div>
+ *   );
+ * }
+ *
+ * // Usage:
+ * <Card>
+ *   <div data-slot="header">Card Header</div>
+ *   <p>Main content goes here</p>
+ *   <div data-slot="footer">Card Footer</div>
+ * </Card>
+ * ```
+ */
+export declare function useSlots(children: ReactNode | null | boolean | undefined, allowed?: string[]): Record<string, ReactNode[]>;

package/hooks/useSlots.js

@@ -0,0 +1,23 @@
+import { Children as i, isValidElement as p } from "react";
+function f(e, o = []) {
+  const t = {
+    children: []
+  };
+  return i.map(e, (s) => {
+    if (p(s)) {
+      const r = s.props;
+      if (r["data-slot"]) {
+        const n = r["data-slot"];
+        if (!o.length || o.length && o.includes(n)) {
+          t[n] || (t[n] = []), t[n].push(s);
+          return;
+        }
+      }
+    }
+    t.children.push(s);
+  }), t;
+}
+export {
+  f as useSlots
+};
+//# sourceMappingURL=useSlots.js.map

package/hooks/useSlots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSlots.js","sources":["../../lib/hooks/useSlots.ts"],"sourcesContent":["import { Children, isValidElement, type ReactNode } from 'react';\n\n/**\n * A hook that organizes React children into named slots based on their `data-slot` attribute.\n *\n * Children without a `data-slot` attribute or with a slot name not in the allowed list\n * are collected under the default \"children\" slot. This pattern enables flexible component\n * composition similar to named slots in other frameworks.\n *\n * @param children - The React children to organize into slots. Can be null, boolean, or undefined.\n * @param allowed - Optional array of allowed slot names. If empty, all slot names are accepted.\n *                  If provided, only children with matching slot names will be organized into their\n *                  respective slots; others fall back to the \"children\" slot.\n *\n * @returns A record mapping slot names to arrays of React nodes. Always includes a \"children\" slot\n *          for unslotted or disallowed content.\n *\n * @example\n * ```tsx\n * function Card({ children }: { children: ReactNode }) {\n *   const slots = useSlots(children, ['header', 'footer']);\n *\n *   return (\n *     <div>\n *       <header>{slots.header}</header>\n *       <main>{slots.children}</main>\n *       <footer>{slots.footer}</footer>\n *     </div>\n *   );\n * }\n *\n * // Usage:\n * <Card>\n *   <div data-slot=\"header\">Card Header</div>\n *   <p>Main content goes here</p>\n *   <div data-slot=\"footer\">Card Footer</div>\n * </Card>\n * ```\n */\nexport function useSlots(children: ReactNode | null | boolean | undefined, allowed: string[] = []) {\n  const slots: Record<string, ReactNode[]> = {\n    children: [],\n  };\n\n  Children.map(children, (child) => {\n    if (isValidElement(child)) {\n      const props = child.props as Record<string, any>;\n\n      if (props['data-slot']) {\n        const slotName: string = props['data-slot'];\n\n        if (!allowed.length || (allowed.length && allowed.includes(slotName))) {\n          if (!slots[slotName]) {\n            slots[slotName] = [];\n          }\n\n          slots[slotName].push(child);\n          return;\n        }\n      }\n    }\n\n    slots.children.push(child);\n  });\n\n  return slots;\n}\n"],"names":["useSlots","children","allowed","slots","Children","child","isValidElement","props","slotName"],"mappings":";AAuCO,SAASA,EAASC,GAAkDC,IAAoB,IAAI;AACjG,QAAMC,IAAqC;AAAA,IACzC,UAAU,CAAA;AAAA,EAAC;AAGb,SAAAC,EAAS,IAAIH,GAAU,CAACI,MAAU;AAChC,QAAIC,EAAeD,CAAK,GAAG;AACzB,YAAME,IAAQF,EAAM;AAEpB,UAAIE,EAAM,WAAW,GAAG;AACtB,cAAMC,IAAmBD,EAAM,WAAW;AAE1C,YAAI,CAACL,EAAQ,UAAWA,EAAQ,UAAUA,EAAQ,SAASM,CAAQ,GAAI;AACrE,UAAKL,EAAMK,CAAQ,MACjBL,EAAMK,CAAQ,IAAI,CAAA,IAGpBL,EAAMK,CAAQ,EAAE,KAAKH,CAAK;AAC1B;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,IAAAF,EAAM,SAAS,KAAKE,CAAK;AAAA,EAC3B,CAAC,GAEMF;AACT;"}

package/molecules/Backdrop.d.ts

@@ -1,5 +1,6 @@
-import { FunctionComponent, MouseEvent, PropsWithChildren } from 'react';
-interface BackdropProps {
+import { ComponentProps, FunctionComponent, MouseEvent, PropsWithChildren } from 'react';
+import { Portal } from './Portal/Portal';
+export interface BackdropProps extends ComponentProps<'div'> {
     /**
      * On close
      * @param event
@@ -14,6 +15,9 @@ interface BackdropProps {
      * (makes it appear from the sides instead of from everywhere)
      */
     sweep?: boolean;
+    /**
+     * Target ID for the Portal component
+     */
+    target?: ComponentProps<typeof Portal>['target'];
 }
 export declare const Backdrop: FunctionComponent<PropsWithChildren<BackdropProps>>;
-export {};

package/molecules/Backdrop.js

@@ -1,51 +1,118 @@
-import { jsxs as p, jsx as f } from "react/jsx-runtime";
-import { useRef as m, useState as k, useEffect as x } from "react";
-import { c as l } from "../chunks/clsx.js";
-const g = ({
-  children: e,
-  onClose: c,
-  isVisible: t,
-  sweep: n
+import { jsx as h, jsxs as X } from "react/jsx-runtime";
+import { useState as v, useRef as j, useCallback as w, useEffect as G } from "react";
+import { c as D } from "../chunks/clsx.js";
+import { Portal as z } from "./Portal/Portal.js";
+const R = 0, I = 1, T = 2, m = 3, p = 4, A = 5, P = 6, B = [
+  "preEnter",
+  "entering",
+  "entered",
+  "preExit",
+  "exiting",
+  "exited",
+  "unmounted"
+], U = (t) => ({
+  _s: t,
+  status: B[t],
+  isEnter: t < m,
+  isMounted: t !== P,
+  isResolved: t === T || t > p
+}), y = (t) => t ? P : A, O = (t, e) => {
+  switch (t) {
+    case I:
+    case R:
+      return T;
+    case p:
+    case m:
+      return y(e);
+  }
+}, q = (t) => typeof t == "object" ? [t.enter, t.exit] : [t, t], _ = setTimeout, F = (t, e) => _(() => {
+  isNaN(document.body.offsetTop) || t(e + 1);
+}, 0), M = (t, e, a, s, i) => {
+  clearTimeout(s.current);
+  const n = U(t);
+  e(n), a.current = n, i && i({ current: n });
+}, H = ({ enter: t = !0, exit: e = !0, preEnter: a, preExit: s, timeout: i, initialEntered: n, mountOnEnter: b, unmountOnExit: u, onStateChange: o } = {}) => {
+  const [r, f] = v(() => U(n ? T : y(b))), c = j(r), d = j(0), [x, S] = q(i), E = w(() => {
+    const l = O(c.current._s, u);
+    l && M(l, f, c, d, o);
+  }, [o, u]);
+  return [
+    r,
+    w((l) => {
+      const N = (k) => {
+        switch (M(k, f, c, d, o), k) {
+          case I:
+            x >= 0 && (d.current = _(E, x));
+            break;
+          case p:
+            S >= 0 && (d.current = _(E, S));
+            break;
+          case R:
+          case m:
+            d.current = F(N, k);
+            break;
+        }
+      }, g = c.current.isEnter;
+      typeof l != "boolean" && (l = !g), l ? !g && N(t ? a ? R : I : T) : g && N(e ? s ? m : p : y(u));
+    }, [
+      E,
+      o,
+      t,
+      e,
+      a,
+      s,
+      x,
+      S,
+      u
+    ]),
+    E
+  ];
+}, W = ({
+  children: t,
+  className: e = "flex justify-center",
+  onClose: a,
+  isVisible: s,
+  target: i = "backdrop",
+  sweep: n = !1,
+  ...b
 }) => {
-  const o = m(!!t), u = o.current, a = !t && u, [d, r] = k(!!t);
-  return x(() => {
-    t && r(!0);
-  }, [t]), o.current = !!t, d ? /* @__PURE__ */ p(
+  const [u, o] = H({
+    timeout: { enter: 0, exit: 500 },
+    mountOnEnter: !0,
+    unmountOnExit: !0,
+    preEnter: !0
+  }), { status: r, isMounted: f } = u;
+  G(() => {
+    o(s);
+  }, [s, o]);
+  const c = r === "preEnter" || r === "exiting";
+  return /* @__PURE__ */ h(z, { target: i, children: f && /* @__PURE__ */ X(
     "div",
     {
+      ...b,
       role: "presentation",
-      className: "z-1 pointer-events-none fixed inset-0 items-center justify-center flex",
+      className: D(e, "fixed inset-0 isolate items-center"),
       children: [
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ h(
           "button",
           {
-            type: "button",
             "aria-hidden": "true",
-            className: l(
-              "-z-1 absolute inset-0 bg-white backdrop will-change-[opacity,transform,backdrop-filter]",
-              {
-                "pointer-events-auto": t || a,
-                "pointer-events-none": !t && !a,
-                "animate-backdropFadeIn": !n && t,
-                "animate-backdropFadeOut": !n && !t && a,
-                "backdrop-blur-0 opacity-0": !n && t && !a,
-                "animate-backdropSweepIn": n && t,
-                "animate-backdropSweepOut": n && !t && a,
-                "backdrop-blur-0 opacity-0 translate-x-[-100%]": n && t && !a
-              }
-            ),
-            onClick: c,
-            onAnimationEnd: () => {
-              t || r(!1);
-            }
+            className: D("absolute inset-0 -z-1 transition-all duration-500", {
+              "bg-white/80 backdrop-blur": !c,
+              "bg-white/0 backdrop-blur-none": c,
+              "-translate-x-full": n && (r === "preEnter" || r === "entering"),
+              "translate-x-full": n && r === "exiting"
+            }),
+            onClick: a,
+            type: "button"
           }
         ),
-        e
+        t
       ]
     }
-  ) : null;
+  ) });
 };
 export {
-  g as Backdrop
+  W as Backdrop
 };
 //# sourceMappingURL=Backdrop.js.map

package/molecules/Backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sources":["../../lib/molecules/Backdrop.tsx"],"sourcesContent":["import {\n  type FunctionComponent,\n  type MouseEvent,\n  type PropsWithChildren,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport clsx from 'clsx';\n\ninterface BackdropProps {\n  /**\n   * On close\n   * @param event\n   */\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Is visible\n   */\n  isVisible?: boolean;\n  /**\n   * Sweep Mode™\n   * (makes it appear from the sides instead of from everywhere)\n   */\n  sweep?: boolean;\n}\n\nexport const Backdrop: FunctionComponent<PropsWithChildren<BackdropProps>> = ({\n  children,\n  onClose,\n  isVisible,\n  sweep,\n}) => {\n  // Prevent initial mount animation flash when closed\n  const wasVisibleRef = useRef(!!isVisible);\n  const wasVisible = wasVisibleRef.current;\n  const isLeaving = !isVisible && wasVisible;\n\n  // Mount only when visible or when we need to play leave animation\n  const [mounted, setMounted] = useState<boolean>(!!isVisible);\n\n  // When becoming visible, ensure we are mounted\n  useEffect(() => {\n    if (isVisible) setMounted(true);\n  }, [isVisible]);\n\n  // update ref for next render\n  wasVisibleRef.current = !!isVisible;\n\n  if (!mounted) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"presentation\"\n      className=\"z-1 pointer-events-none fixed inset-0 items-center justify-center flex\"\n    >\n      <button\n        type=\"button\"\n        aria-hidden=\"true\"\n        className={clsx(\n          '-z-1 absolute inset-0 bg-white backdrop will-change-[opacity,transform,backdrop-filter]',\n          {\n            'pointer-events-auto': isVisible || isLeaving,\n            'pointer-events-none': !isVisible && !isLeaving,\n            'animate-backdropFadeIn': !sweep && isVisible,\n            'animate-backdropFadeOut': !sweep && !isVisible && isLeaving,\n            'backdrop-blur-0 opacity-0': !sweep && isVisible && !isLeaving,\n            'animate-backdropSweepIn': sweep && isVisible,\n            'animate-backdropSweepOut': sweep && !isVisible && isLeaving,\n            'backdrop-blur-0 opacity-0 translate-x-[-100%]': sweep && isVisible && !isLeaving,\n          },\n        )}\n        onClick={onClose}\n        onAnimationEnd={() => {\n          // When leave animation finishes and still not visible, unmount\n          if (!isVisible) {\n            setMounted(false);\n          }\n        }}\n      />\n      {children}\n    </div>\n  );\n};\n"],"names":["Backdrop","children","onClose","isVisible","sweep","wasVisibleRef","useRef","wasVisible","isLeaving","mounted","setMounted","useState","useEffect","jsxs","jsx","clsx"],"mappings":";;;AA2BO,MAAMA,IAAgE,CAAC;AAAA,EAC5E,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AAEJ,QAAMC,IAAgBC,EAAO,CAAC,CAACH,CAAS,GAClCI,IAAaF,EAAc,SAC3BG,IAAY,CAACL,KAAaI,GAG1B,CAACE,GAASC,CAAU,IAAIC,EAAkB,CAAC,CAACR,CAAS;AAU3D,SAPAS,EAAU,MAAM;AACd,IAAIT,OAAsB,EAAI;AAAA,EAChC,GAAG,CAACA,CAAS,CAAC,GAGdE,EAAc,UAAU,CAAC,CAACF,GAErBM,IAKH,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,gBACE,uBAAuBZ,KAAaK;AAAA,gBACpC,uBAAuB,CAACL,KAAa,CAACK;AAAA,gBACtC,0BAA0B,CAACJ,KAASD;AAAA,gBACpC,2BAA2B,CAACC,KAAS,CAACD,KAAaK;AAAA,gBACnD,6BAA6B,CAACJ,KAASD,KAAa,CAACK;AAAA,gBACrD,2BAA2BJ,KAASD;AAAA,gBACpC,4BAA4BC,KAAS,CAACD,KAAaK;AAAA,gBACnD,iDAAiDJ,KAASD,KAAa,CAACK;AAAA,cAAA;AAAA,YAC1E;AAAA,YAEF,SAASN;AAAA,YACT,gBAAgB,MAAM;AAEpB,cAAKC,KACHO,EAAW,EAAK;AAAA,YAEpB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAhCI;AAmCX;"}
+{"version":3,"file":"Backdrop.js","sources":["../../node_modules/react-transition-state/dist/esm/utils.mjs","../../node_modules/react-transition-state/dist/esm/useTransitionState.mjs","../../lib/molecules/Backdrop.tsx"],"sourcesContent":["//#region src/utils.ts\nconst PRE_ENTER = 0;\nconst ENTERING = 1;\nconst ENTERED = 2;\nconst PRE_EXIT = 3;\nconst EXITING = 4;\nconst EXITED = 5;\nconst UNMOUNTED = 6;\nconst STATUS = [\n\t\"preEnter\",\n\t\"entering\",\n\t\"entered\",\n\t\"preExit\",\n\t\"exiting\",\n\t\"exited\",\n\t\"unmounted\"\n];\nconst getState = (status) => ({\n\t_s: status,\n\tstatus: STATUS[status],\n\tisEnter: status < PRE_EXIT,\n\tisMounted: status !== UNMOUNTED,\n\tisResolved: status === ENTERED || status > EXITING\n});\nconst startOrEnd = (unmounted) => unmounted ? UNMOUNTED : EXITED;\nconst getEndStatus = (status, unmountOnExit) => {\n\tswitch (status) {\n\t\tcase ENTERING:\n\t\tcase PRE_ENTER: return ENTERED;\n\t\tcase EXITING:\n\t\tcase PRE_EXIT: return startOrEnd(unmountOnExit);\n\t}\n};\nconst getTimeout = (timeout) => typeof timeout === \"object\" ? [timeout.enter, timeout.exit] : [timeout, timeout];\nconst _setTimeout = setTimeout;\nconst nextTick = (transitState, status) => _setTimeout(() => {\n\tisNaN(document.body.offsetTop) || transitState(status + 1);\n}, 0);\n\n//#endregion\nexport { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd };","import { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd } from \"./utils.mjs\";\nimport { useCallback, useRef, useState } from \"react\";\n\n//#region src/useTransitionState.ts\nconst updateState = (status, setState, latestState, timeoutId, onChange) => {\n\tclearTimeout(timeoutId.current);\n\tconst state = getState(status);\n\tsetState(state);\n\tlatestState.current = state;\n\tonChange && onChange({ current: state });\n};\nconst useTransitionState = ({ enter = true, exit = true, preEnter, preExit, timeout, initialEntered, mountOnEnter, unmountOnExit, onStateChange: onChange } = {}) => {\n\tconst [state, setState] = useState(() => getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)));\n\tconst latestState = useRef(state);\n\tconst timeoutId = useRef(0);\n\tconst [enterTimeout, exitTimeout] = getTimeout(timeout);\n\tconst endTransition = useCallback(() => {\n\t\tconst status = getEndStatus(latestState.current._s, unmountOnExit);\n\t\tstatus && updateState(status, setState, latestState, timeoutId, onChange);\n\t}, [onChange, unmountOnExit]);\n\treturn [\n\t\tstate,\n\t\tuseCallback((toEnter) => {\n\t\t\tconst transitState = (status) => {\n\t\t\t\tupdateState(status, setState, latestState, timeoutId, onChange);\n\t\t\t\tswitch (status) {\n\t\t\t\t\tcase ENTERING:\n\t\t\t\t\t\tif (enterTimeout >= 0) timeoutId.current = _setTimeout(endTransition, enterTimeout);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase EXITING:\n\t\t\t\t\t\tif (exitTimeout >= 0) timeoutId.current = _setTimeout(endTransition, exitTimeout);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase PRE_ENTER:\n\t\t\t\t\tcase PRE_EXIT:\n\t\t\t\t\t\ttimeoutId.current = nextTick(transitState, status);\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t};\n\t\t\tconst enterStage = latestState.current.isEnter;\n\t\t\tif (typeof toEnter !== \"boolean\") toEnter = !enterStage;\n\t\t\tif (toEnter) !enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);\n\t\t\telse enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));\n\t\t}, [\n\t\t\tendTransition,\n\t\t\tonChange,\n\t\t\tenter,\n\t\t\texit,\n\t\t\tpreEnter,\n\t\t\tpreExit,\n\t\t\tenterTimeout,\n\t\t\texitTimeout,\n\t\t\tunmountOnExit\n\t\t]),\n\t\tendTransition\n\t];\n};\n\n//#endregion\nexport { useTransitionState };","import {\n  type ComponentProps,\n  type FunctionComponent,\n  type MouseEvent,\n  type PropsWithChildren,\n  useEffect,\n} from 'react';\nimport clsx from 'clsx';\nimport { useTransitionState } from 'react-transition-state';\nimport { Portal } from '@/molecules/Portal/Portal';\n\nexport interface BackdropProps extends ComponentProps<'div'> {\n  /**\n   * On close\n   * @param event\n   */\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Is visible\n   */\n  isVisible?: boolean;\n  /**\n   * Sweep Mode™\n   * (makes it appear from the sides instead of from everywhere)\n   */\n  sweep?: boolean;\n  /**\n   * Target ID for the Portal component\n   */\n  target?: ComponentProps<typeof Portal>['target'];\n}\n\nexport const Backdrop: FunctionComponent<PropsWithChildren<BackdropProps>> = ({\n  children,\n  className = 'flex justify-center',\n  onClose,\n  isVisible,\n  target = 'backdrop',\n  sweep = false,\n  ...attrs\n}) => {\n  const [state, toggle] = useTransitionState({\n    timeout: { enter: 0, exit: 500 },\n    mountOnEnter: true,\n    unmountOnExit: true,\n    preEnter: true,\n  });\n\n  const { status, isMounted } = state;\n\n  useEffect(() => {\n    toggle(isVisible);\n  }, [isVisible, toggle]);\n\n  const animated = status === 'preEnter' || status === 'exiting';\n\n  return (\n    <Portal target={target}>\n      {isMounted && (\n        <div\n          {...attrs}\n          role=\"presentation\"\n          className={clsx(className, 'fixed inset-0 isolate items-center')}\n        >\n          <button\n            aria-hidden=\"true\"\n            className={clsx('absolute inset-0 -z-1 transition-all duration-500', {\n              'bg-white/80 backdrop-blur': !animated,\n              'bg-white/0 backdrop-blur-none': animated,\n              '-translate-x-full': sweep && (status === 'preEnter' || status === 'entering'),\n              'translate-x-full': sweep && status === 'exiting',\n            })}\n            onClick={onClose}\n            type=\"button\"\n          />\n          {children}\n        </div>\n      )}\n    </Portal>\n  );\n};\n"],"names":["PRE_ENTER","ENTERING","ENTERED","PRE_EXIT","EXITING","EXITED","UNMOUNTED","STATUS","getState","status","startOrEnd","unmounted","getEndStatus","unmountOnExit","getTimeout","timeout","_setTimeout","nextTick","transitState","updateState","setState","latestState","timeoutId","onChange","state","useTransitionState","enter","exit","preEnter","preExit","initialEntered","mountOnEnter","useState","useRef","enterTimeout","exitTimeout","endTransition","useCallback","toEnter","enterStage","Backdrop","children","className","onClose","isVisible","target","sweep","attrs","toggle","isMounted","useEffect","animated","jsx","Portal","jsxs","clsx"],"mappings":";;;;AACA,MAAMA,IAAY,GACZC,IAAW,GACXC,IAAU,GACVC,IAAW,GACXC,IAAU,GACVC,IAAS,GACTC,IAAY,GACZC,IAAS;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GACMC,IAAW,CAACC,OAAY;AAAA,EAC7B,IAAIA;AAAA,EACJ,QAAQF,EAAOE,CAAM;AAAA,EACrB,SAASA,IAASN;AAAA,EAClB,WAAWM,MAAWH;AAAA,EACtB,YAAYG,MAAWP,KAAWO,IAASL;AAC5C,IACMM,IAAa,CAACC,MAAcA,IAAYL,IAAYD,GACpDO,IAAe,CAACH,GAAQI,MAAkB;AAC/C,UAAQJ,GAAM;AAAA,IACb,KAAKR;AAAA,IACL,KAAKD;AAAW,aAAOE;AAAA,IACvB,KAAKE;AAAA,IACL,KAAKD;AAAU,aAAOO,EAAWG,CAAa;AAAA,EAChD;AACA,GACMC,IAAa,CAACC,MAAY,OAAOA,KAAY,WAAW,CAACA,EAAQ,OAAOA,EAAQ,IAAI,IAAI,CAACA,GAASA,CAAO,GACzGC,IAAc,YACdC,IAAW,CAACC,GAAcT,MAAWO,EAAY,MAAM;AAC5D,QAAM,SAAS,KAAK,SAAS,KAAKE,EAAaT,IAAS,CAAC;AAC1D,GAAG,CAAC,GCjCEU,IAAc,CAACV,GAAQW,GAAUC,GAAaC,GAAWC,MAAa;AAC3E,eAAaD,EAAU,OAAO;AAC9B,QAAME,IAAQhB,EAASC,CAAM;AAC7B,EAAAW,EAASI,CAAK,GACdH,EAAY,UAAUG,GACtBD,KAAYA,EAAS,EAAE,SAASC,EAAK,CAAE;AACxC,GACMC,IAAqB,CAAC,EAAE,OAAAC,IAAQ,IAAM,MAAAC,IAAO,IAAM,UAAAC,GAAU,SAAAC,GAAS,SAAAd,GAAS,gBAAAe,GAAgB,cAAAC,GAAc,eAAAlB,GAAe,eAAeU,EAAQ,IAAK,OAAO;AACpK,QAAM,CAACC,GAAOJ,CAAQ,IAAIY,EAAS,MAAMxB,EAASsB,IAAiB5B,IAAUQ,EAAWqB,CAAY,CAAC,CAAC,GAChGV,IAAcY,EAAOT,CAAK,GAC1BF,IAAYW,EAAO,CAAC,GACpB,CAACC,GAAcC,CAAW,IAAIrB,EAAWC,CAAO,GAChDqB,IAAgBC,EAAY,MAAM;AACvC,UAAM5B,IAASG,EAAaS,EAAY,QAAQ,IAAIR,CAAa;AACjE,IAAAJ,KAAUU,EAAYV,GAAQW,GAAUC,GAAaC,GAAWC,CAAQ;AAAA,EACzE,GAAG,CAACA,GAAUV,CAAa,CAAC;AAC5B,SAAO;AAAA,IACNW;AAAA,IACAa,EAAY,CAACC,MAAY;AACxB,YAAMpB,IAAe,CAACT,MAAW;AAEhC,gBADAU,EAAYV,GAAQW,GAAUC,GAAaC,GAAWC,CAAQ,GACtDd,GAAM;AAAA,UACb,KAAKR;AACJ,YAAIiC,KAAgB,MAAGZ,EAAU,UAAUN,EAAYoB,GAAeF,CAAY;AAClF;AAAA,UACD,KAAK9B;AACJ,YAAI+B,KAAe,MAAGb,EAAU,UAAUN,EAAYoB,GAAeD,CAAW;AAChF;AAAA,UACD,KAAKnC;AAAA,UACL,KAAKG;AACJ,YAAAmB,EAAU,UAAUL,EAASC,GAAcT,CAAM;AACjD;AAAA,QACN;AAAA,MACG,GACM8B,IAAalB,EAAY,QAAQ;AACvC,MAAI,OAAOiB,KAAY,cAAWA,IAAU,CAACC,IACzCD,IAAS,CAACC,KAAcrB,EAAaQ,IAAQE,IAAW5B,IAAYC,IAAWC,CAAO,IACrFqC,KAAcrB,EAAaS,IAAOE,IAAU1B,IAAWC,IAAUM,EAAWG,CAAa,CAAC;AAAA,IAChG,GAAG;AAAA,MACFuB;AAAA,MACAb;AAAA,MACAG;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAK;AAAA,MACAC;AAAA,MACAtB;AAAA,IACH,CAAG;AAAA,IACDuB;AAAA,EACF;AACA,GCvBaI,IAAgE,CAAC;AAAA,EAC5E,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,MAAM;AACJ,QAAM,CAACvB,GAAOwB,CAAM,IAAIvB,EAAmB;AAAA,IACzC,SAAS,EAAE,OAAO,GAAG,MAAM,IAAA;AAAA,IAC3B,cAAc;AAAA,IACd,eAAe;AAAA,IACf,UAAU;AAAA,EAAA,CACX,GAEK,EAAE,QAAAhB,GAAQ,WAAAwC,EAAA,IAAczB;AAE9B,EAAA0B,EAAU,MAAM;AACd,IAAAF,EAAOJ,CAAS;AAAA,EAClB,GAAG,CAACA,GAAWI,CAAM,CAAC;AAEtB,QAAMG,IAAW1C,MAAW,cAAcA,MAAW;AAErD,SACE,gBAAA2C,EAACC,GAAA,EAAO,QAAAR,GACL,UAAAI,KACC,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGP;AAAA,MACJ,MAAK;AAAA,MACL,WAAWQ,EAAKb,GAAW,oCAAoC;AAAA,MAE/D,UAAA;AAAA,QAAA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAWG,EAAK,qDAAqD;AAAA,cACnE,6BAA6B,CAACJ;AAAA,cAC9B,iCAAiCA;AAAA,cACjC,qBAAqBL,MAAUrC,MAAW,cAAcA,MAAW;AAAA,cACnE,oBAAoBqC,KAASrC,MAAW;AAAA,YAAA,CACzC;AAAA,YACD,SAASkC;AAAA,YACT,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAENF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGP;AAEJ;","x_google_ignoreList":[0,1]}

package/molecules/Forms/Filter.d.ts

@@ -1,10 +1,5 @@
-import { InputHTMLAttributes } from 'react';
-export interface FilterProps<Value = string> extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-    /**
-     * The data-testid to apply to the button.
-     * This is used for testing purposes.
-     * */
-    dataTestId?: string;
+import { FormControlProps } from './FormControl';
+export interface FilterProps<Value = string> extends FormControlProps<Value> {
     /**
      * Is it attached to a dropdown?
      */

package/molecules/Forms/Filter.js

@@ -1,56 +1,68 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { c as s } from "../../chunks/clsx.js";
-import { useId as v } from "react";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { c as d } from "../../chunks/clsx.js";
+import { useId as C } from "react";
 /* empty css                    */
-import { Icon as r } from "@clubmed/trident-icons";
-import { useValue as D } from "../../hooks/useValue.js";
-function A(c) {
-  const d = v(), {
-    id: m = d,
-    name: t = m,
-    className: u,
+import { Icon as l } from "@clubmed/trident-icons";
+import { useValue as S } from "../../hooks/useValue.js";
+import { useInternalStatus as V } from "../../hooks/useInternalStatus.js";
+function q(m) {
+  const u = C(), {
+    id: r = u,
+    name: n = r,
+    className: p,
     dataTestId: h,
-    disabled: l,
-    checked: p = !1,
-    value: a,
-    tabIndex: f = 0,
-    onChange: b,
-    hasDropdown: x,
-    children: k,
+    disabled: t = !1,
+    checked: f = !1,
+    value: s,
+    tabIndex: x = 0,
+    validationStatus: b = "default",
+    errorMessage: i,
+    onChange: k,
+    hasDropdown: v,
+    children: N,
     ...w
-  } = c, { value: n, setValue: C } = D({
-    name: t,
-    initialValue: p,
-    onChange(I, o) {
-      b?.(I, o ? a !== void 0 ? a : o : null);
+  } = m, { value: o, setValue: D } = S({
+    name: n,
+    initialValue: f,
+    onChange(g, c) {
+      k?.(g, c ? s !== void 0 ? s : c : null);
     }
-  });
-  return /* @__PURE__ */ i("label", { className: s(u, "relative"), children: [
-    /* @__PURE__ */ e(
-      "input",
-      {
-        ...w,
-        name: t,
-        "data-testid": h,
-        type: "checkbox",
-        tabIndex: f,
-        onChange: () => {
-          l || C(!n);
-        },
-        checked: n,
-        "data-name": "Filter",
-        disabled: l,
-        value: a
-      }
-    ),
-    /* @__PURE__ */ i("span", { children: [
-      /* @__PURE__ */ e("span", { className: s("text-b3 font-semibold"), children: k }),
-      /* @__PURE__ */ e(r, { width: null, name: "CheckDefault", color: "black" }),
-      x && /* @__PURE__ */ e(r, { name: "ArrowDefaultDown", className: "ml-8", width: "24px", color: "black" })
+  }), I = V({
+    isDisabled: t,
+    validationStatus: b
+  }) === "error" && i;
+  return /* @__PURE__ */ a("div", { className: d(p, "relative"), children: [
+    /* @__PURE__ */ a("label", { "data-testid": `filter-container-${r}`, className: "relative", children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ...w,
+          name: n,
+          "data-testid": h,
+          type: "checkbox",
+          tabIndex: x,
+          onChange: () => {
+            t || D(!o);
+          },
+          checked: o,
+          "data-name": "Filter",
+          disabled: t,
+          value: s
+        }
+      ),
+      /* @__PURE__ */ a("span", { children: [
+        /* @__PURE__ */ e("span", { className: d("text-b3 font-semibold"), children: N }),
+        /* @__PURE__ */ e(l, { className: "check", width: null, name: "CheckDefault", color: "black" }),
+        v && /* @__PURE__ */ e(l, { name: "ArrowDefaultDown", className: "ml-8", width: "24px", color: "black" })
+      ] })
+    ] }),
+    I && /* @__PURE__ */ a("span", { className: "text-red text-b4 flex items-start space-x-4 ps-20", role: "alert", children: [
+      /* @__PURE__ */ e(l, { name: "Error", width: "20px" }),
+      i
     ] })
   ] });
 }
 export {
-  A as Filter
+  q as Filter
 };
 //# sourceMappingURL=Filter.js.map

package/molecules/Forms/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport './controls.css';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '@/hooks/useValue.js';\n\nexport interface FilterProps<Value = string>\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * */\n  dataTestId?: string;\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Filter<Value = string>(props: FilterProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled,\n    checked: initialChecked = false,\n    value,\n    tabIndex = 0,\n    onChange,\n    hasDropdown,\n    children,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n    },\n  });\n\n  return (\n    <label className={clsx(className, 'relative')}>\n      <input\n        {...rest}\n        name={name}\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        tabIndex={tabIndex}\n        onChange={() => {\n          if (!disabled) setValue(!checked);\n        }}\n        checked={checked}\n        data-name=\"Filter\"\n        disabled={disabled}\n        value={value}\n      />\n      <span>\n        <span className={clsx('text-b3 font-semibold')}>{children}</span>\n        <Icon width={null} name=\"CheckDefault\" color=\"black\" />\n        {hasDropdown && (\n          <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n        )}\n      </span>\n    </label>\n  );\n}\n"],"names":["Filter","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","tabIndex","onChange","hasDropdown","children","rest","checked","setValue","useValue","clsx","jsx","Icon"],"mappings":";;;;;;AAqBO,SAASA,EAAuBC,GAA2B;AAChE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAJ,IAAWP,GAAMW,IAAYN,MAAU,SAAYA,IAAQM,IAAqB,IAAI;AAAA,IACtF;AAAA,EAAA,CACD;AAED,2BACG,SAAA,EAAM,WAAWG,EAAKb,GAAW,UAAU,GAC1C,UAAA;AAAA,IAAA,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGL;AAAA,QACJ,MAAAV;AAAA,QACA,eAAaE;AAAA,QACb,MAAK;AAAA,QACL,UAAAI;AAAA,QACA,UAAU,MAAM;AACd,UAAKH,KAAUS,EAAS,CAACD,CAAO;AAAA,QAClC;AAAA,QACA,SAAAA;AAAA,QACA,aAAU;AAAA,QACV,UAAAR;AAAA,QACA,OAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,sBAED,QAAA,EACC,UAAA;AAAA,MAAA,gBAAAU,EAAC,QAAA,EAAK,WAAWD,EAAK,uBAAuB,GAAI,UAAAL,GAAS;AAAA,wBACzDO,GAAA,EAAK,OAAO,MAAM,MAAK,gBAAe,OAAM,SAAQ;AAAA,MACpDR,KACC,gBAAAO,EAACC,GAAA,EAAK,MAAK,oBAAmB,WAAU,QAAO,OAAM,QAAO,OAAM,QAAA,CAAQ;AAAA,IAAA,EAAA,CAE9E;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId } from 'react';\nimport './controls.css';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '@/hooks/useValue.js';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\n\nexport interface FilterProps<Value = string> extends FormControlProps<Value> {\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Filter<Value = string>(props: FilterProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled = false,\n    checked: initialChecked = false,\n    value,\n    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    onChange,\n    hasDropdown,\n    children,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n    },\n  });\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div className={clsx(className, 'relative')}>\n      <label data-testid={`filter-container-${id}`} className=\"relative\">\n        <input\n          {...rest}\n          name={name}\n          data-testid={dataTestId}\n          type=\"checkbox\"\n          tabIndex={tabIndex}\n          onChange={() => {\n            if (!disabled) setValue(!checked);\n          }}\n          checked={checked}\n          data-name=\"Filter\"\n          disabled={disabled}\n          value={value as any}\n        />\n        <span>\n          <span className={clsx('text-b3 font-semibold')}>{children}</span>\n\n          <Icon className=\"check\" width={null} name=\"CheckDefault\" color=\"black\" />\n\n          {hasDropdown && (\n            <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n          )}\n        </span>\n      </label>\n\n      {shouldDisplayErrorMessage && (\n        <span className=\"text-red text-b4 flex items-start space-x-4 ps-20\" role=\"alert\">\n          <Icon name=\"Error\" width=\"20px\" />\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Filter","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","tabIndex","validationStatus","errorMessage","onChange","hasDropdown","children","rest","checked","setValue","useValue","shouldDisplayErrorMessage","useInternalStatus","clsx","jsxs","jsx","Icon"],"mappings":";;;;;;;AAiBO,SAASA,EAAuBC,GAA2B;AAChE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,kBAAAC,IAAmB;AAAA,IACnB,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDhB,GAEE,EAAE,OAAOiB,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAf;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMa,GAAS;AACtB,MAAAJ,IAAWT,GAAMa,IAAYR,MAAU,SAAYA,IAAQQ,IAAqB,IAAI;AAAA,IACtF;AAAA,EAAA,CACD,GAOKG,IALiBC,EAAkB;AAAA,IACvC,YAAYd;AAAA,IACZ,kBAAAI;AAAA,EAAA,CACD,MAEoD,WAAWC;AAEhE,2BACG,OAAA,EAAI,WAAWU,EAAKjB,GAAW,UAAU,GACxC,UAAA;AAAA,IAAA,gBAAAkB,EAAC,WAAM,eAAa,oBAAoBpB,CAAE,IAAI,WAAU,YACtD,UAAA;AAAA,MAAA,gBAAAqB;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGR;AAAA,UACJ,MAAAZ;AAAA,UACA,eAAaE;AAAA,UACb,MAAK;AAAA,UACL,UAAAI;AAAA,UACA,UAAU,MAAM;AACd,YAAKH,KAAUW,EAAS,CAACD,CAAO;AAAA,UAClC;AAAA,UACA,SAAAA;AAAA,UACA,aAAU;AAAA,UACV,UAAAV;AAAA,UACA,OAAAE;AAAA,QAAA;AAAA,MAAA;AAAA,wBAED,QAAA,EACC,UAAA;AAAA,QAAA,gBAAAe,EAAC,QAAA,EAAK,WAAWF,EAAK,uBAAuB,GAAI,UAAAP,GAAS;AAAA,QAE1D,gBAAAS,EAACC,KAAK,WAAU,SAAQ,OAAO,MAAM,MAAK,gBAAe,OAAM,QAAA,CAAQ;AAAA,QAEtEX,KACC,gBAAAU,EAACC,GAAA,EAAK,MAAK,oBAAmB,WAAU,QAAO,OAAM,QAAO,OAAM,QAAA,CAAQ;AAAA,MAAA,EAAA,CAE9E;AAAA,IAAA,GACF;AAAA,IAECL,KACC,gBAAAG,EAAC,QAAA,EAAK,WAAU,qDAAoD,MAAK,SACvE,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,MAC/Bb;AAAA,IAAA,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}

package/molecules/Forms/FormLabel.d.ts

@@ -1,7 +1,7 @@
 import { LabelHTMLAttributes } from 'react';
 export interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     description?: string;
-    layout?: 'horizontal' | 'vertical';
+    layout?: 'horizontal' | `horizontal-${string}` | 'vertical';
     required?: boolean;
     hideRequiredStar?: boolean;
 }