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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # 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)
+
+
+### Bug Fixes
+
+* migrate from `classnames` to `clsx` across codebase for improved utility handling ([52a022b](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/52a022b7acf58e6570346ff7b05204473d080571))
+
 # [1.5.0](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.4.0...v1.5.0) (2025-11-28)
 
 

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/atoms/Prose/Prose.js

@@ -1,14 +1,14 @@
 import { jsx as n } from "react/jsx-runtime";
-import { c as m } from "../../chunks/index.js";
+import { c as m } from "../../chunks/clsx.js";
 import { forwardRef as t } from "react";
-const c = t(function({ className: o, text: r, ...s }, e) {
+const c = t(function({ className: o, text: r, ...e }, s) {
   return r ? /* @__PURE__ */ n(
     "div",
     {
-      ...s,
+      ...e,
       className: m(o, "prose"),
       dangerouslySetInnerHTML: { __html: r },
-      ref: e
+      ref: s
     }
   ) : null;
 });

package/atoms/Prose/Prose.js.map

@@ -1 +1 @@
-{"version":3,"file":"Prose.js","sources":["../../../lib/atoms/Prose/Prose.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type ComponentPropsWithoutRef, forwardRef } from 'react';\n\nexport interface ProseProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  text: string;\n}\n\nexport const Prose = forwardRef<HTMLDivElement, ProseProps>(function Prose(\n  { className, text, ...attrs },\n  ref,\n) {\n  if (!text) {\n    return null;\n  }\n\n  return (\n    <div\n      {...attrs}\n      className={classnames(className, 'prose')}\n      dangerouslySetInnerHTML={{ __html: text }}\n      ref={ref}\n    />\n  );\n});\n"],"names":["Prose","forwardRef","className","text","attrs","ref","jsx","classnames"],"mappings":";;;AAOO,MAAMA,IAAQC,EAAuC,SAC1D,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,GACtBC,GACA;AACA,SAAKF,IAKH,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAWG,EAAWL,GAAW,OAAO;AAAA,MACxC,yBAAyB,EAAE,QAAQC,EAAA;AAAA,MACnC,KAAAE;AAAA,IAAA;AAAA,EAAA,IARK;AAWX,CAAC;"}
+{"version":3,"file":"Prose.js","sources":["../../../lib/atoms/Prose/Prose.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, forwardRef } from 'react';\n\nexport interface ProseProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  text: string;\n}\n\nexport const Prose = forwardRef<HTMLDivElement, ProseProps>(function Prose(\n  { className, text, ...attrs },\n  ref,\n) {\n  if (!text) {\n    return null;\n  }\n\n  return (\n    <div\n      {...attrs}\n      className={clsx(className, 'prose')}\n      dangerouslySetInnerHTML={{ __html: text }}\n      ref={ref}\n    />\n  );\n});\n"],"names":["Prose","forwardRef","className","text","attrs","ref","jsx","clsx"],"mappings":";;;AAOO,MAAMA,IAAQC,EAAuC,SAC1D,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,GACtBC,GACA;AACA,SAAKF,IAKH,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAWG,EAAKL,GAAW,OAAO;AAAA,MAClC,yBAAyB,EAAE,QAAQC,EAAA;AAAA,MACnC,KAAAE;AAAA,IAAA;AAAA,EAAA,IARK;AAWX,CAAC;"}

package/chunks/clsx.js

@@ -0,0 +1,17 @@
+function a(r) {
+  var f, n, t = "";
+  if (typeof r == "string" || typeof r == "number") t += r;
+  else if (typeof r == "object") if (Array.isArray(r)) {
+    var o = r.length;
+    for (f = 0; f < o; f++) r[f] && (n = a(r[f])) && (t && (t += " "), t += n);
+  } else for (n in r) r[n] && (t && (t += " "), t += n);
+  return t;
+}
+function i() {
+  for (var r, f, n = 0, t = "", o = arguments.length; n < o; n++) (r = arguments[n]) && (f = a(r)) && (t && (t += " "), t += f);
+  return t;
+}
+export {
+  i as c
+};
+//# sourceMappingURL=clsx.js.map

package/chunks/clsx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clsx.js","sources":["../../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":["r","e","t","f","n","clsx"],"mappings":"AAAA,SAASA,EAAEC,GAAE;AAAC,MAAIC,GAAEC,GAAEC,IAAE;AAAG,MAAa,OAAOH,KAAjB,YAA8B,OAAOA,KAAjB,SAAmB,CAAAG,KAAGH;AAAA,WAAoB,OAAOA,KAAjB,SAAmB,KAAG,MAAM,QAAQA,CAAC,GAAE;AAAC,QAAI,IAAEA,EAAE;AAAO,SAAIC,IAAE,GAAEA,IAAE,GAAEA,IAAI,CAAAD,EAAEC,CAAC,MAAIC,IAAEH,EAAEC,EAAEC,CAAC,CAAC,OAAKE,MAAIA,KAAG,MAAKA,KAAGD;AAAA,EAAE,MAAM,MAAIA,KAAKF,EAAE,CAAAA,EAAEE,CAAC,MAAIC,MAAIA,KAAG,MAAKA,KAAGD;AAAG,SAAOC;AAAC;AAAQ,SAASC,IAAM;AAAC,WAAQJ,GAAEC,GAAEC,IAAE,GAAEC,IAAE,IAAG,IAAE,UAAU,QAAOD,IAAE,GAAEA,IAAI,EAACF,IAAE,UAAUE,CAAC,OAAKD,IAAEF,EAAEC,CAAC,OAAKG,MAAIA,KAAG,MAAKA,KAAGF;AAAG,SAAOE;AAAC;","x_google_ignoreList":[0]}

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/Arrows/Arrows.js

@@ -1,26 +1,26 @@
-import { jsxs as x, jsx as p } from "react/jsx-runtime";
-import { c as t } from "../../chunks/index.js";
+import { jsxs as w, jsx as p } from "react/jsx-runtime";
+import { c as t } from "../../chunks/clsx.js";
 import { ArrowButton as l } from "../Buttons/ArrowButton.js";
 const A = ({
   className: f,
   color: o,
   iconType: e = "ArrowDefault",
-  isDisabledHidden: n = !1,
-  isNextDisabled: r = !1,
+  isDisabledHidden: r = !1,
+  isNextDisabled: n = !1,
   isPrevDisabled: a = !1,
-  labels: s = {
+  labels: i = {
     next: "",
     previous: ""
   },
   onNext: m,
   onPrev: u,
-  size: i,
+  size: s,
   theme: c,
-  ...w
-}) => /* @__PURE__ */ x(
+  ...x
+}) => /* @__PURE__ */ w(
   "div",
   {
-    ...w,
+    ...x,
     className: t(
       "pointer-events-none flex w-full items-center justify-between gap-x-20",
       f
@@ -31,30 +31,30 @@ const A = ({
         l,
         {
           className: t("pointer-events-auto transition-opacity", {
-            "opacity-0": n && a
+            "opacity-0": r && a
           }),
           color: o,
           disabled: a,
           icon: `${e}Left`,
           onClick: u,
-          size: i,
+          size: s,
           theme: c,
-          children: s.previous
+          children: i.previous
         }
       ),
       /* @__PURE__ */ p(
         l,
         {
           className: t("pointer-events-auto transition-opacity", {
-            "opacity-0": n && r
+            "opacity-0": r && n
           }),
           color: o,
-          disabled: r,
+          disabled: n,
           icon: `${e}Right`,
           onClick: m,
-          size: i,
+          size: s,
           theme: c,
-          children: s.next
+          children: i.next
         }
       )
     ]

package/molecules/Arrows/Arrows.js.map

@@ -1 +1 @@
-{"version":3,"file":"Arrows.js","sources":["../../../lib/molecules/Arrows/Arrows.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { ComponentProps, ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport type { ArrowsLabels } from './ArrowsLabels';\n\nimport { ArrowButton } from '../Buttons/ArrowButton';\n\nexport interface ArrowsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  color?: ComponentProps<typeof ArrowButton>['color'];\n  iconType?: 'ArrowDefault' | 'ArrowTail';\n  isDisabledHidden?: boolean;\n  isNextDisabled?: boolean;\n  isPrevDisabled?: boolean;\n  labels?: ArrowsLabels;\n  onNext: ComponentProps<typeof ArrowButton>['onClick'];\n  onPrev: ComponentProps<typeof ArrowButton>['onClick'];\n  size?: ComponentProps<typeof ArrowButton>['size'];\n  theme?: ComponentProps<typeof ArrowButton>['theme'];\n}\n\nexport const Arrows: FunctionComponent<ArrowsProps> = ({\n  className,\n  color,\n  iconType = 'ArrowDefault',\n  isDisabledHidden = false,\n  isNextDisabled = false,\n  isPrevDisabled = false,\n  labels = {\n    next: '',\n    previous: '',\n  },\n  onNext,\n  onPrev,\n  size,\n  theme,\n  ...attrs\n}) => {\n  return (\n    <div\n      {...attrs}\n      className={classnames(\n        'pointer-events-none flex w-full items-center justify-between gap-x-20',\n        className,\n      )}\n      data-name=\"Arrows\"\n    >\n      <ArrowButton\n        className={classnames('pointer-events-auto transition-opacity', {\n          'opacity-0': isDisabledHidden && isPrevDisabled,\n        })}\n        color={color}\n        disabled={isPrevDisabled}\n        icon={`${iconType}Left`}\n        onClick={onPrev}\n        size={size}\n        theme={theme}\n      >\n        {labels.previous}\n      </ArrowButton>\n      <ArrowButton\n        className={classnames('pointer-events-auto transition-opacity', {\n          'opacity-0': isDisabledHidden && isNextDisabled,\n        })}\n        color={color}\n        disabled={isNextDisabled}\n        icon={`${iconType}Right`}\n        onClick={onNext}\n        size={size}\n        theme={theme}\n      >\n        {labels.next}\n      </ArrowButton>\n    </div>\n  );\n};\n"],"names":["Arrows","className","color","iconType","isDisabledHidden","isNextDisabled","isPrevDisabled","labels","onNext","onPrev","size","theme","attrs","jsxs","classnames","jsx","ArrowButton"],"mappings":";;;AAoBO,MAAMA,IAAyC,CAAC;AAAA,EACrD,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,QAAAC,IAAS;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,WAAWE;AAAA,MACT;AAAA,MACAb;AAAA,IAAA;AAAA,IAEF,aAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAc;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWF,EAAW,0CAA0C;AAAA,YAC9D,aAAaV,KAAoBE;AAAA,UAAA,CAClC;AAAA,UACD,OAAAJ;AAAA,UACA,UAAUI;AAAA,UACV,MAAM,GAAGH,CAAQ;AAAA,UACjB,SAASM;AAAA,UACT,MAAAC;AAAA,UACA,OAAAC;AAAA,UAEC,UAAAJ,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAEV,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWF,EAAW,0CAA0C;AAAA,YAC9D,aAAaV,KAAoBC;AAAA,UAAA,CAClC;AAAA,UACD,OAAAH;AAAA,UACA,UAAUG;AAAA,UACV,MAAM,GAAGF,CAAQ;AAAA,UACjB,SAASK;AAAA,UACT,MAAAE;AAAA,UACA,OAAAC;AAAA,UAEC,UAAAJ,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IACV;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"Arrows.js","sources":["../../../lib/molecules/Arrows/Arrows.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentProps, ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport type { ArrowsLabels } from './ArrowsLabels';\n\nimport { ArrowButton } from '../Buttons/ArrowButton';\n\nexport interface ArrowsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  color?: ComponentProps<typeof ArrowButton>['color'];\n  iconType?: 'ArrowDefault' | 'ArrowTail';\n  isDisabledHidden?: boolean;\n  isNextDisabled?: boolean;\n  isPrevDisabled?: boolean;\n  labels?: ArrowsLabels;\n  onNext: ComponentProps<typeof ArrowButton>['onClick'];\n  onPrev: ComponentProps<typeof ArrowButton>['onClick'];\n  size?: ComponentProps<typeof ArrowButton>['size'];\n  theme?: ComponentProps<typeof ArrowButton>['theme'];\n}\n\nexport const Arrows: FunctionComponent<ArrowsProps> = ({\n  className,\n  color,\n  iconType = 'ArrowDefault',\n  isDisabledHidden = false,\n  isNextDisabled = false,\n  isPrevDisabled = false,\n  labels = {\n    next: '',\n    previous: '',\n  },\n  onNext,\n  onPrev,\n  size,\n  theme,\n  ...attrs\n}) => {\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        'pointer-events-none flex w-full items-center justify-between gap-x-20',\n        className,\n      )}\n      data-name=\"Arrows\"\n    >\n      <ArrowButton\n        className={clsx('pointer-events-auto transition-opacity', {\n          'opacity-0': isDisabledHidden && isPrevDisabled,\n        })}\n        color={color}\n        disabled={isPrevDisabled}\n        icon={`${iconType}Left`}\n        onClick={onPrev}\n        size={size}\n        theme={theme}\n      >\n        {labels.previous}\n      </ArrowButton>\n      <ArrowButton\n        className={clsx('pointer-events-auto transition-opacity', {\n          'opacity-0': isDisabledHidden && isNextDisabled,\n        })}\n        color={color}\n        disabled={isNextDisabled}\n        icon={`${iconType}Right`}\n        onClick={onNext}\n        size={size}\n        theme={theme}\n      >\n        {labels.next}\n      </ArrowButton>\n    </div>\n  );\n};\n"],"names":["Arrows","className","color","iconType","isDisabledHidden","isNextDisabled","isPrevDisabled","labels","onNext","onPrev","size","theme","attrs","jsxs","clsx","jsx","ArrowButton"],"mappings":";;;AAoBO,MAAMA,IAAyC,CAAC;AAAA,EACrD,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,QAAAC,IAAS;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,WAAWE;AAAA,MACT;AAAA,MACAb;AAAA,IAAA;AAAA,IAEF,aAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAc;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWF,EAAK,0CAA0C;AAAA,YACxD,aAAaV,KAAoBE;AAAA,UAAA,CAClC;AAAA,UACD,OAAAJ;AAAA,UACA,UAAUI;AAAA,UACV,MAAM,GAAGH,CAAQ;AAAA,UACjB,SAASM;AAAA,UACT,MAAAC;AAAA,UACA,OAAAC;AAAA,UAEC,UAAAJ,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAEV,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWF,EAAK,0CAA0C;AAAA,YACxD,aAAaV,KAAoBC;AAAA,UAAA,CAClC;AAAA,UACD,OAAAH;AAAA,UACA,UAAUG;AAAA,UACV,MAAM,GAAGF,CAAQ;AAAA,UACjB,SAASK;AAAA,UACT,MAAAE;AAAA,UACA,OAAAC;AAAA,UAEC,UAAAJ,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IACV;AAAA,EAAA;AAAA;"}

package/molecules/Avatar.js

@@ -1,6 +1,6 @@
-import { jsx as l, jsxs as f } from "react/jsx-runtime";
-import { c as u } from "../chunks/index.js";
-const a = (e = "") => e.split(" ").map((t) => t.slice(0, 1)).join("");
+import { jsx as l, jsxs as s } from "react/jsx-runtime";
+import { c as u } from "../chunks/clsx.js";
+const d = (e = "") => e.split(" ").map((t) => t.slice(0, 1)).join("");
 function p({
   alt: e,
   src: t,
@@ -8,12 +8,12 @@ function p({
   style: r,
   children: o,
   className: i,
-  ...s
+  ...f
 }) {
   return /* @__PURE__ */ l(
     "div",
     {
-      ...s,
+      ...f,
       ...t || n ? { role: "figure", "aria-label": e } : {},
       className: u(
         "flex items-center justify-center relative overflow-hidden",
@@ -29,7 +29,7 @@ function p({
         height: "48px",
         ...r
       },
-      children: /* @__PURE__ */ f("span", { className: "flex items-center justify-center font-bold uppercase text-h6 h-full", children: [
+      children: /* @__PURE__ */ s("span", { className: "flex items-center justify-center font-bold uppercase text-h6 h-full", children: [
         t || n ? /* @__PURE__ */ l(
           "img",
           {
@@ -38,7 +38,7 @@ function p({
             alt: e,
             className: "w-full h-full object-cover transparent indent-[1000px]"
           }
-        ) : a(e),
+        ) : d(e),
         o
       ] })
     }

package/molecules/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../lib/molecules/Avatar.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\nimport classnames from 'classnames';\n\nconst initial = (text = '') => {\n  return text\n    .split(' ')\n    .map((text) => text.slice(0, 1))\n    .join('');\n};\n\ninterface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  alt?: string;\n  src?: string | undefined;\n  srcSet?: string | undefined;\n}\n\nexport function Avatar({\n  alt,\n  src,\n  srcSet,\n  style,\n  children,\n  className,\n  ...props\n}: PropsWithChildren<AvatarProps>) {\n  return (\n    <div\n      {...props}\n      {...(src || srcSet ? { role: 'figure', 'aria-label': alt } : {})}\n      className={classnames(\n        'flex items-center justify-center relative overflow-hidden',\n        {\n          'rounded-full': !className?.includes('rounded-'),\n          'text-black': !className?.includes('text-'),\n          'bg-saffron': !className?.includes('bg-'),\n        },\n        className,\n      )}\n      style={{\n        width: '48px',\n        height: '48px',\n        ...style,\n      }}\n    >\n      <span className=\"flex items-center justify-center font-bold uppercase text-h6 h-full\">\n        {src || srcSet ? (\n          <img\n            srcSet={srcSet}\n            src={src}\n            alt={alt}\n            className={'w-full h-full object-cover transparent indent-[1000px]'}\n          />\n        ) : (\n          initial(alt)\n        )}\n        {children}\n      </span>\n    </div>\n  );\n}\n"],"names":["initial","text","Avatar","alt","src","srcSet","style","children","className","props","jsx","classnames","jsxs"],"mappings":";;AAGA,MAAMA,IAAU,CAACC,IAAO,OACfA,EACJ,MAAM,GAAG,EACT,IAAI,CAACA,MAASA,EAAK,MAAM,GAAG,CAAC,CAAC,EAC9B,KAAK,EAAE;AASL,SAASC,EAAO;AAAA,EACrB,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAmC;AACjC,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACH,GAAIL,KAAOC,IAAS,EAAE,MAAM,UAAU,cAAcF,EAAA,IAAQ,CAAA;AAAA,MAC7D,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,UACE,gBAAgB,CAACH,GAAW,SAAS,UAAU;AAAA,UAC/C,cAAc,CAACA,GAAW,SAAS,OAAO;AAAA,UAC1C,cAAc,CAACA,GAAW,SAAS,KAAK;AAAA,QAAA;AAAA,QAE1CA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,GAAGF;AAAA,MAAA;AAAA,MAGL,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,uEACb,UAAA;AAAA,QAAAR,KAAOC,IACN,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAAL;AAAA,YACA,KAAAD;AAAA,YACA,KAAAD;AAAA,YACA,WAAW;AAAA,UAAA;AAAA,QAAA,IAGbH,EAAQG,CAAG;AAAA,QAEZI;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Avatar.js","sources":["../../lib/molecules/Avatar.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\nimport clsx from 'clsx';\n\nconst initial = (text = '') => {\n  return text\n    .split(' ')\n    .map((text) => text.slice(0, 1))\n    .join('');\n};\n\ninterface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  alt?: string;\n  src?: string | undefined;\n  srcSet?: string | undefined;\n}\n\nexport function Avatar({\n  alt,\n  src,\n  srcSet,\n  style,\n  children,\n  className,\n  ...props\n}: PropsWithChildren<AvatarProps>) {\n  return (\n    <div\n      {...props}\n      {...(src || srcSet ? { role: 'figure', 'aria-label': alt } : {})}\n      className={clsx(\n        'flex items-center justify-center relative overflow-hidden',\n        {\n          'rounded-full': !className?.includes('rounded-'),\n          'text-black': !className?.includes('text-'),\n          'bg-saffron': !className?.includes('bg-'),\n        },\n        className,\n      )}\n      style={{\n        width: '48px',\n        height: '48px',\n        ...style,\n      }}\n    >\n      <span className=\"flex items-center justify-center font-bold uppercase text-h6 h-full\">\n        {src || srcSet ? (\n          <img\n            srcSet={srcSet}\n            src={src}\n            alt={alt}\n            className={'w-full h-full object-cover transparent indent-[1000px]'}\n          />\n        ) : (\n          initial(alt)\n        )}\n        {children}\n      </span>\n    </div>\n  );\n}\n"],"names":["initial","text","Avatar","alt","src","srcSet","style","children","className","props","jsx","clsx","jsxs"],"mappings":";;AAGA,MAAMA,IAAU,CAACC,IAAO,OACfA,EACJ,MAAM,GAAG,EACT,IAAI,CAACA,MAASA,EAAK,MAAM,GAAG,CAAC,CAAC,EAC9B,KAAK,EAAE;AASL,SAASC,EAAO;AAAA,EACrB,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAmC;AACjC,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACH,GAAIL,KAAOC,IAAS,EAAE,MAAM,UAAU,cAAcF,EAAA,IAAQ,CAAA;AAAA,MAC7D,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,UACE,gBAAgB,CAACH,GAAW,SAAS,UAAU;AAAA,UAC/C,cAAc,CAACA,GAAW,SAAS,OAAO;AAAA,UAC1C,cAAc,CAACA,GAAW,SAAS,KAAK;AAAA,QAAA;AAAA,QAE1CA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,GAAGF;AAAA,MAAA;AAAA,MAGL,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,uEACb,UAAA;AAAA,QAAAR,KAAOC,IACN,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAAL;AAAA,YACA,KAAAD;AAAA,YACA,KAAAD;AAAA,YACA,WAAW;AAAA,UAAA;AAAA,QAAA,IAGbH,EAAQG,CAAG;AAAA,QAEZI;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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 m } from "react/jsx-runtime";
-import { useRef as f, useState as k, useEffect as x } from "react";
-import { c as l } from "../chunks/index.js";
-const s = ({
-  children: r,
-  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 e = f(!!t), u = e.current, a = !t && u, [d, o] = k(!!t);
-  return x(() => {
-    t && o(!0);
-  }, [t]), e.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__ */ m(
+        /* @__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 || o(!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"
           }
         ),
-        r
+        t
       ]
     }
-  ) : null;
+  ) });
 };
 export {
-  s as Backdrop
+  W as Backdrop
 };
 //# sourceMappingURL=Backdrop.js.map