@studiolxd/brand 49.28.0 → 50.0.0

package/dist/message-bubble.css

@@ -1 +1 @@
-.message-bubble{--_tail:var(--message-bubble-tail-size);--_border:var(--message-bubble-border-width);--_diagonal:calc(var(--_border) * 1.41421);padding-block:var(--message-bubble-padding-block);padding-inline:var(--message-bubble-padding-inline);border-radius:var(--message-bubble-border-radius);border-width:var(--message-bubble-border-width);border-style:var(--message-bubble-border-style);border-color:var(--message-bubble-border-color);color:var(--message-bubble-color);max-width:var(--message-bubble-max-width);overflow-wrap:anywhere;font-family:var(--message-bubble-font-family);font-size:var(--message-bubble-font-size);font-weight:var(--message-bubble-font-weight);line-height:var(--message-bubble-line-height);position:relative}.message-bubble:before,.message-bubble:after{content:"";block-size:0;inline-size:0;position:absolute}.message-bubble--assistant{margin-inline-end:auto}.message-bubble--assistant:before{border-block-start:var(--_tail) solid transparent;border-inline-end:var(--_tail) solid var(--message-bubble-border-color);inset-block-end:calc(-1 * var(--_border));inset-inline-start:calc(-1 * (var(--_tail) + var(--_border)))}.message-bubble--assistant:after{border-block-start:calc(var(--_tail) - var(--_diagonal)) solid transparent;border-inline-end:calc(var(--_tail) - var(--_diagonal)) solid var(--message-bubble-tail-fill);inset-block-end:0;inset-inline-start:calc(var(--_diagonal) - var(--_tail))}.message-bubble--user{margin-inline-start:auto}.message-bubble--user:before{border-block-start:var(--_tail) solid transparent;border-inline-start:var(--_tail) solid var(--message-bubble-border-color);inset-block-end:calc(-1 * var(--_border));inset-inline-end:calc(-1 * (var(--_tail) + var(--_border)))}.message-bubble--user:after{border-block-start:calc(var(--_tail) - var(--_diagonal)) solid transparent;border-inline-start:calc(var(--_tail) - var(--_diagonal)) solid var(--message-bubble-tail-fill);inset-block-end:0;inset-inline-end:calc(var(--_diagonal) - var(--_tail))}
+.message-bubble{--_tail:var(--message-bubble-tail-size);--_border:var(--message-bubble-border-width);--_diagonal:calc(var(--_border) * 1.41421);padding-block:var(--message-bubble-padding-block);padding-inline:var(--message-bubble-padding-inline);border-radius:var(--message-bubble-border-radius);border-width:var(--message-bubble-border-width);border-style:var(--message-bubble-border-style);border-color:var(--message-bubble-border-color);color:var(--message-bubble-color);max-inline-size:var(--message-bubble-max-width);overflow-wrap:anywhere;font-family:var(--message-bubble-font-family);font-size:var(--message-bubble-font-size);font-weight:var(--message-bubble-font-weight);line-height:var(--message-bubble-line-height);position:relative}.message-bubble:before,.message-bubble:after{content:"";block-size:0;inline-size:0;position:absolute}.message-bubble--assistant{margin-inline-end:auto}.message-bubble--assistant:before{border-block-start:var(--_tail) solid transparent;border-inline-end:var(--_tail) solid var(--message-bubble-border-color);inset-block-end:calc(-1 * var(--_border));inset-inline-start:calc(-1 * (var(--_tail) + var(--_border)))}.message-bubble--assistant:after{border-block-start:calc(var(--_tail) - var(--_diagonal)) solid transparent;border-inline-end:calc(var(--_tail) - var(--_diagonal)) solid var(--message-bubble-tail-fill);inset-block-end:0;inset-inline-start:calc(var(--_diagonal) - var(--_tail))}.message-bubble--user{margin-inline-start:auto}.message-bubble--user:before{border-block-start:var(--_tail) solid transparent;border-inline-start:var(--_tail) solid var(--message-bubble-border-color);inset-block-end:calc(-1 * var(--_border));inset-inline-end:calc(-1 * (var(--_tail) + var(--_border)))}.message-bubble--user:after{border-block-start:calc(var(--_tail) - var(--_diagonal)) solid transparent;border-inline-start:calc(var(--_tail) - var(--_diagonal)) solid var(--message-bubble-tail-fill);inset-block-end:0;inset-inline-end:calc(var(--_diagonal) - var(--_tail))}

package/dist/message-composer.css

@@ -1 +1 @@
-.message-composer{gap:var(--message-composer-helper-gap);flex-direction:column;display:flex}.message-composer__box{align-items:flex-end;gap:var(--message-composer-gap);padding-block:var(--message-composer-padding-block);padding-inline:var(--message-composer-padding-inline);border-radius:var(--message-composer-border-radius);border-width:var(--message-composer-border-width);border-style:var(--message-composer-border-style);border-color:var(--message-composer-border-color);background-color:var(--message-composer-bg);display:flex}.message-composer__box:focus-within{border-color:var(--message-composer-focus-border-color);box-shadow:inset 0 0 0 calc(var(--message-composer-focus-ring-width) + var(--message-composer-focus-ring-inset-offset)) var(--message-composer-focus-ring-color), inset 0 0 0 var(--message-composer-focus-ring-inset-offset) var(--message-composer-bg)}.message-composer.message-composer--disabled .message-composer__box{background-color:var(--message-composer-disabled-bg);border-color:var(--message-composer-disabled-border-color)}.message-composer__input{flex:1;min-width:0}.message-composer__actions{align-items:center;gap:var(--message-composer-gap);flex-shrink:0;display:flex}.message-composer__helper{font-size:var(--message-composer-helper-font-size);color:var(--message-composer-helper-color);line-height:var(--message-composer-helper-line-height);margin:0}
+.message-composer{gap:var(--message-composer-helper-gap);flex-direction:column;display:flex}.message-composer__box{align-items:flex-end;gap:var(--message-composer-gap);padding-block:var(--message-composer-padding-block);padding-inline:var(--message-composer-padding-inline);border-radius:var(--message-composer-border-radius);border-width:var(--message-composer-border-width);border-style:var(--message-composer-border-style);border-color:var(--message-composer-border-color);background-color:var(--message-composer-bg);display:flex}.message-composer__box:focus-within{border-color:var(--message-composer-focus-border-color);box-shadow:inset 0 0 0 calc(var(--message-composer-focus-ring-width) + var(--message-composer-focus-ring-inset-offset)) var(--message-composer-focus-ring-color), inset 0 0 0 var(--message-composer-focus-ring-inset-offset) var(--message-composer-bg)}.message-composer.message-composer--disabled .message-composer__box{background-color:var(--message-composer-disabled-bg);border-color:var(--message-composer-disabled-border-color)}.message-composer__input{flex:1;min-inline-size:0}.message-composer__actions{align-items:center;gap:var(--message-composer-gap);flex-shrink:0;display:flex}.message-composer__helper{font-size:var(--message-composer-helper-font-size);color:var(--message-composer-helper-color);line-height:var(--message-composer-helper-line-height);margin:0}

package/dist/modal.css

@@ -1 +1 @@
-@keyframes modal-content-in{0%{opacity:0;transform:translate(-50%, calc(-50% - var(--modal-content-enter-offset)))}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modal-content-out{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%, calc(-50% - var(--modal-content-enter-offset)))}}.modal__overlay{--dialog-overlay-bg:var(--modal-backdrop-bg);--dialog-overlay-opacity:var(--modal-backdrop-opacity);--dialog-overlay-z-index:var(--modal-backdrop-z-index);--dialog-transition-duration:var(--modal-transition-duration);--dialog-transition-easing:var(--modal-transition-easing)}.modal__content{z-index:var(--modal-z-index);width:90vw;max-width:var(--modal-width-max);max-height:var(--modal-max-height);background-color:var(--modal-bg);border:var(--modal-border-width) solid var(--modal-border-color);border-radius:var(--modal-border-radius);box-shadow:var(--modal-shadow);padding-block:var(--modal-padding-block);padding-inline:var(--modal-padding-inline);flex-direction:column;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);container:dialog/inline-size}.modal__content[data-open]{animation:modal-content-in var(--modal-transition-duration) var(--modal-transition-easing) forwards}.modal__content[data-closed]{animation:modal-content-out var(--modal-transition-duration) var(--modal-transition-easing) forwards}.modal__header{--dialog-header-gap:var(--modal-header-gap)}.modal__title{font-size:var(--modal-title-font-size);font-weight:var(--modal-title-font-weight);color:var(--modal-title-color);line-height:var(--modal-title-line-height);flex:1;margin:0}.modal__close.close-button{--close-button-size:var(--modal-close-size);--close-button-icon-size:var(--modal-close-icon-size);--close-button-color:var(--modal-close-color);--close-button-focus-ring-width:var(--modal-close-focus-ring-width);--close-button-focus-ring-offset:var(--modal-close-focus-ring-offset);--close-button-focus-ring-color:var(--modal-close-focus-ring-color)}.modal__header:not(.modal__header--no-title) .modal__close.close-button{margin-block-start:calc((var(--modal-title-font-size) * var(--modal-title-line-height) - var(--modal-close-size)) / 2)}.modal__description{font-size:var(--modal-description-font-size);color:var(--modal-description-color);margin-block-start:0;margin-block-end:var(--modal-description-margin-block-end)}.modal__body{flex:1;min-height:0;overflow-y:auto}.modal__footer{--dialog-footer-gap:var(--modal-footer-gap);margin-block-start:var(--modal-footer-margin-block-start)}
+@keyframes modal-content-in{0%{opacity:0;transform:translate(-50%, calc(-50% - var(--modal-content-enter-offset)))}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modal-content-out{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%, calc(-50% - var(--modal-content-enter-offset)))}}.modal__overlay{--dialog-overlay-bg:var(--modal-backdrop-bg);--dialog-overlay-opacity:var(--modal-backdrop-opacity);--dialog-overlay-z-index:var(--modal-backdrop-z-index);--dialog-transition-duration:var(--modal-transition-duration);--dialog-transition-easing:var(--modal-transition-easing)}.modal__content{inset-block-start:50%;z-index:var(--modal-z-index);inline-size:var(--modal-inline-size);max-inline-size:var(--modal-width-max);max-block-size:var(--modal-max-height);background-color:var(--modal-bg);border:var(--modal-border-width) solid var(--modal-border-color);border-radius:var(--modal-border-radius);box-shadow:var(--modal-shadow);padding-block:var(--modal-padding-block);padding-inline:var(--modal-padding-inline);flex-direction:column;display:flex;position:fixed;left:50%;transform:translate(-50%,-50%);container:dialog/inline-size}.modal__content[data-open]{animation:modal-content-in var(--modal-transition-duration) var(--modal-transition-easing) forwards}.modal__content[data-closed]{animation:modal-content-out var(--modal-transition-duration) var(--modal-transition-easing) forwards}.modal__header{--dialog-header-gap:var(--modal-header-gap)}.modal__title{font-size:var(--modal-title-font-size);font-weight:var(--modal-title-font-weight);color:var(--modal-title-color);line-height:var(--modal-title-line-height);flex:1;margin:0}.modal__close.close-button{--close-button-size:var(--modal-close-size);--close-button-icon-size:var(--modal-close-icon-size);--close-button-color:var(--modal-close-color);--close-button-focus-ring-width:var(--modal-close-focus-ring-width);--close-button-focus-ring-offset:var(--modal-close-focus-ring-offset);--close-button-focus-ring-color:var(--modal-close-focus-ring-color)}.modal__header:not(.modal__header--no-title) .modal__close.close-button{margin-block-start:calc((var(--modal-title-font-size) * var(--modal-title-line-height) - var(--modal-close-size)) / 2)}.modal__description{font-size:var(--modal-description-font-size);color:var(--modal-description-color);margin-block-start:0;margin-block-end:var(--modal-description-margin-block-end)}.modal__body{flex:1;min-block-size:0;overflow-y:auto}.modal__footer{--dialog-footer-gap:var(--modal-footer-gap);margin-block-start:var(--modal-footer-margin-block-start)}

package/dist/modal.js

@@ -8,20 +8,20 @@ import { n as i, r as a, t as o } from "./_shared/dialogsurface.js";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 import { Dialog as u } from "@base-ui/react/dialog";
 //#region src/stories/molecules/Modal/Modal.tsx
-function d({ open: d, onClose: f, title: p, children: m, closeLabel: h, fallbackTitle: g, container: _, description: v, "aria-describedby": y, initialFocus: b, footer: x, footerClassName: S, ...C }) {
-	let w = e("modal"), T = n(_), E = y === void 0 ? {} : { "aria-describedby": y }, D = b === void 0 ? {} : { initialFocus: b };
+function d({ open: d, onClose: f, title: p, children: m, closeLabel: h, fallbackTitle: g, container: _, description: v, "aria-describedby": y, initialFocus: b, footer: x, footerClassName: S, className: C, ...w }) {
+	let T = e("modal"), E = n(_), D = y === void 0 ? {} : { "aria-describedby": y }, O = b === void 0 ? {} : { initialFocus: b };
 	return /* @__PURE__ */ c(u.Root, {
 		open: d,
 		onOpenChange: (e) => {
 			e || f();
 		},
 		children: /* @__PURE__ */ l(u.Portal, {
-			container: T,
+			container: E,
 			children: [/* @__PURE__ */ c(a, { className: "modal__overlay" }), /* @__PURE__ */ l(u.Popup, {
-				className: "modal__content",
-				...E,
+				className: ["modal__content", C].filter(Boolean).join(" "),
 				...D,
-				...C,
+				...O,
+				...w,
 				children: [
 					p ? /* @__PURE__ */ l(i, {
 						layout: "inline",
@@ -31,15 +31,15 @@ function d({ open: d, onClose: f, title: p, children: m, closeLabel: h, fallback
 							children: p
 						}), /* @__PURE__ */ c(u.Close, {
 							className: "modal__close",
-							render: /* @__PURE__ */ c(r, { label: w("close", h) })
+							render: /* @__PURE__ */ c(r, { label: T("close", h) })
 						})]
-					}) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(u.Title, { render: /* @__PURE__ */ c(t, { children: w("fallbackTitle", g) }) }), /* @__PURE__ */ c(i, {
+					}) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(u.Title, { render: /* @__PURE__ */ c(t, { children: T("fallbackTitle", g) }) }), /* @__PURE__ */ c(i, {
 						layout: "inline",
 						noTitle: !0,
 						className: "modal__header modal__header--no-title",
 						children: /* @__PURE__ */ c(u.Close, {
 							className: "modal__close",
-							render: /* @__PURE__ */ c(r, { label: w("close", h) })
+							render: /* @__PURE__ */ c(r, { label: T("close", h) })
 						})
 					})] }),
 					v != null && /* @__PURE__ */ c(u.Description, {

package/dist/multi-select.css

@@ -1 +1 @@
-.multi-select{justify-content:space-between;align-items:center;gap:var(--multi-select-content-gap);min-block-size:var(--multi-select-height);padding-block:0;padding-inline:var(--multi-select-padding-inline);font-family:var(--multi-select-font-family);font-size:var(--multi-select-font-size);line-height:var(--multi-select-line-height);font-weight:var(--multi-select-font-weight);color:var(--multi-select-color);background-color:var(--multi-select-bg);border-width:var(--multi-select-border-width);border-style:var(--multi-select-border-style);border-color:var(--multi-select-border-color);border-radius:var(--multi-select-border-radius);box-sizing:border-box;cursor:pointer;width:100%;display:inline-flex}.multi-select:focus,.multi-select[data-popup-open]{outline:none}.multi-select:has(.multi-select__combobox:focus-visible){outline:var(--multi-select-focus-ring-width) solid var(--multi-select-focus-ring-color);outline-offset:calc(-1 * (var(--multi-select-focus-ring-width) + var(--multi-select-border-width)))}.multi-select__combobox{outline:none;flex:auto;align-items:center;min-width:0;display:inline-flex}.multi-select.multi-select--disabled{opacity:var(--multi-select-disabled-opacity);cursor:var(--multi-select-disabled-cursor);pointer-events:none}.multi-select__values{align-items:center;gap:var(--multi-select-selection-gap);flex-wrap:wrap;flex:1;min-width:0;display:flex}.multi-select__placeholder{color:var(--multi-select-placeholder-color)}.multi-select__pill{align-items:center;gap:var(--multi-select-pill-gap);padding-block:var(--multi-select-pill-padding-block);padding-inline:var(--multi-select-pill-padding-inline);background-color:var(--multi-select-pill-bg);color:var(--multi-select-pill-color);border-radius:var(--multi-select-pill-border-radius);font-size:var(--multi-select-pill-font-size);line-height:var(--multi-select-pill-line-height);white-space:nowrap;display:inline-flex}.multi-select__pill-label{line-height:var(--multi-select-pill-line-height)}.multi-select__pill-remove{all:unset;cursor:pointer;line-height:var(--multi-select-pill-line-height);font-size:var(--multi-select-pill-font-size);opacity:var(--multi-select-pill-remove-opacity);justify-content:center;align-items:center;display:inline-flex}.multi-select__pill-remove:hover{opacity:var(--multi-select-pill-remove-hover-opacity)}.multi-select .multi-select__icon{--icon-size:var(--multi-select-icon-size)}.multi-select__icon{transition:transform var(--multi-select-icon-transition) var(--multi-select-icon-transition-easing);flex-shrink:0;transform:rotate(90deg)}[data-popup-open] .multi-select__icon{transform:rotate(-90deg)}.multi-select__content{background-color:var(--multi-select-content-bg);border-width:var(--multi-select-border-width);border-style:var(--multi-select-border-style);border-color:var(--multi-select-content-border-color);min-width:var(--anchor-width);max-height:var(--multi-select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.multi-select__content[data-side=bottom]{border-top:none}.multi-select__content[data-side=top]{border-bottom:none}.multi-select__item{all:unset;box-sizing:border-box;align-items:center;gap:var(--multi-select-padding-inline);width:100%;padding-block:var(--multi-select-item-padding-block);padding-inline:var(--multi-select-padding-inline);font-size:var(--multi-select-font-size);font-family:var(--multi-select-font-family);color:var(--multi-select-color);cursor:pointer;display:flex}.multi-select__item.multi-select__item--active,.multi-select__item:hover{background-color:var(--multi-select-item-highlighted-bg);color:var(--multi-select-item-highlighted-color)}.multi-select__item.multi-select__item--selected{font-weight:var(--multi-select-item-selected-font-weight)}.multi-select__content .multi-select__item+.multi-select__item,.multi-select__content[data-side=bottom] .multi-select__item:first-child{border-top:var(--multi-select-border-width) var(--multi-select-border-style) var(--multi-select-content-border-color)}.multi-select__content[data-side=top] .multi-select__item:last-child{border-bottom:var(--multi-select-border-width) var(--multi-select-border-style) var(--multi-select-content-border-color)}.multi-select__item-check{width:var(--checkbox-size);height:var(--checkbox-size);border-width:var(--checkbox-border-width);border-style:var(--checkbox-border-style);transition:background-color var(--checkbox-transition-duration) var(--checkbox-transition-easing);background-color:#0000;border-color:currentColor;flex-shrink:0;place-content:center;display:grid}.multi-select__item--selected .multi-select__item-check{background-color:currentColor}.multi-select__item-check-mark{width:var(--checkbox-check-size);height:var(--checkbox-check-size);background-color:var(--multi-select-content-bg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transition:transform var(--checkbox-transition-duration) var(--checkbox-transition-easing);transform:scale(0)}.multi-select__item--selected .multi-select__item-check-mark{transform:scale(1)}.multi-select__item--active .multi-select__item-check-mark,.multi-select__item:hover .multi-select__item-check-mark{background-color:var(--multi-select-item-highlighted-bg)}.multi-select.multi-select--sm{font-size:var(--multi-select-sm-font-size);--multi-select-height:var(--multi-select-sm-height);padding-inline:var(--multi-select-sm-padding-inline);--multi-select-icon-size:var(--multi-select-sm-icon-size)}.multi-select__content--sm .multi-select__item{font-size:var(--multi-select-sm-font-size);padding-block:var(--multi-select-sm-item-padding-block)}.multi-select.multi-select--lg{font-size:var(--multi-select-lg-font-size);--multi-select-height:var(--multi-select-lg-height);padding-inline:var(--multi-select-lg-padding-inline);--multi-select-icon-size:var(--multi-select-lg-icon-size)}.multi-select__content--lg .multi-select__item{font-size:var(--multi-select-lg-font-size);padding-block:var(--multi-select-lg-item-padding-block)}.multi-select__positioner{z-index:var(--multi-select-content-z-index)}.multi-select.multi-select--error{border-color:var(--multi-select-error-border-color)}
+.multi-select{justify-content:space-between;align-items:center;gap:var(--multi-select-content-gap);min-block-size:var(--multi-select-height);padding-block:0;padding-inline:var(--multi-select-padding-inline);font-family:var(--multi-select-font-family);font-size:var(--multi-select-font-size);line-height:var(--multi-select-line-height);font-weight:var(--multi-select-font-weight);color:var(--multi-select-color);background-color:var(--multi-select-bg);border-width:var(--multi-select-border-width);border-style:var(--multi-select-border-style);border-color:var(--multi-select-border-color);border-radius:var(--multi-select-border-radius);box-sizing:border-box;cursor:pointer;inline-size:100%;display:inline-flex}.multi-select:focus,.multi-select[data-popup-open]{outline:none}.multi-select:has(.multi-select__combobox:focus-visible){outline:var(--multi-select-focus-ring-width) solid var(--multi-select-focus-ring-color);outline-offset:calc(-1 * (var(--multi-select-focus-ring-width) + var(--multi-select-border-width)))}.multi-select__combobox{outline:none;flex:auto;align-items:center;min-inline-size:0;display:inline-flex}.multi-select.multi-select--disabled{opacity:var(--multi-select-disabled-opacity);cursor:var(--multi-select-disabled-cursor);pointer-events:none}.multi-select__values{align-items:center;gap:var(--multi-select-selection-gap);flex-wrap:wrap;flex:1;min-inline-size:0;display:flex}.multi-select__placeholder{color:var(--multi-select-placeholder-color)}.multi-select__pill{align-items:center;gap:var(--multi-select-pill-gap);padding-block:var(--multi-select-pill-padding-block);padding-inline:var(--multi-select-pill-padding-inline);background-color:var(--multi-select-pill-bg);color:var(--multi-select-pill-color);border-radius:var(--multi-select-pill-border-radius);font-size:var(--multi-select-pill-font-size);line-height:var(--multi-select-pill-line-height);white-space:nowrap;display:inline-flex}.multi-select__pill-label{line-height:var(--multi-select-pill-line-height)}.multi-select__pill-remove{all:unset;cursor:pointer;line-height:var(--multi-select-pill-line-height);font-size:var(--multi-select-pill-font-size);opacity:var(--multi-select-pill-remove-opacity);justify-content:center;align-items:center;display:inline-flex}.multi-select__pill-remove:hover{opacity:var(--multi-select-pill-remove-hover-opacity)}.multi-select .multi-select__icon{--icon-size:var(--multi-select-icon-size)}.multi-select__icon{transition:transform var(--multi-select-icon-transition) var(--multi-select-icon-transition-easing);flex-shrink:0;transform:rotate(90deg)}[data-popup-open] .multi-select__icon{transform:rotate(-90deg)}.multi-select__content{background-color:var(--multi-select-content-bg);border-width:var(--multi-select-border-width);border-style:var(--multi-select-border-style);border-color:var(--multi-select-content-border-color);min-inline-size:var(--anchor-width);max-block-size:var(--multi-select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.multi-select__content[data-side=bottom]{border-block-start:none}.multi-select__content[data-side=top]{border-block-end:none}.multi-select__item{all:unset;box-sizing:border-box;align-items:center;gap:var(--multi-select-padding-inline);inline-size:100%;padding-block:var(--multi-select-item-padding-block);padding-inline:var(--multi-select-padding-inline);font-size:var(--multi-select-font-size);font-family:var(--multi-select-font-family);color:var(--multi-select-color);cursor:pointer;display:flex}.multi-select__item[data-highlighted],.multi-select__item:hover{background-color:var(--multi-select-item-highlighted-bg);color:var(--multi-select-item-highlighted-color)}.multi-select__item[data-selected]{font-weight:var(--multi-select-item-selected-font-weight)}.multi-select__content .multi-select__item+.multi-select__item,.multi-select__content[data-side=bottom] .multi-select__item:first-child{border-block-start:var(--multi-select-border-width) var(--multi-select-border-style) var(--multi-select-content-border-color)}.multi-select__content[data-side=top] .multi-select__item:last-child{border-block-end:var(--multi-select-border-width) var(--multi-select-border-style) var(--multi-select-content-border-color)}.multi-select__item-check{inline-size:var(--checkbox-size);block-size:var(--checkbox-size);border-width:var(--checkbox-border-width);border-style:var(--checkbox-border-style);transition:background-color var(--checkbox-transition-duration) var(--checkbox-transition-easing);background-color:#0000;border-color:currentColor;flex-shrink:0;place-content:center;display:grid}.multi-select__item[data-selected] .multi-select__item-check{background-color:currentColor}.multi-select__item-check-mark{inline-size:var(--checkbox-check-size);block-size:var(--checkbox-check-size);background-color:var(--multi-select-content-bg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transition:transform var(--checkbox-transition-duration) var(--checkbox-transition-easing);transform:scale(0)}.multi-select__item[data-selected] .multi-select__item-check-mark{transform:scale(1)}.multi-select__item[data-highlighted] .multi-select__item-check-mark,.multi-select__item:hover .multi-select__item-check-mark{background-color:var(--multi-select-item-highlighted-bg)}.multi-select.multi-select--sm{font-size:var(--multi-select-sm-font-size);--multi-select-height:var(--multi-select-sm-height);padding-inline:var(--multi-select-sm-padding-inline);--multi-select-icon-size:var(--multi-select-sm-icon-size)}.multi-select__content--sm .multi-select__item{font-size:var(--multi-select-sm-font-size);padding-block:var(--multi-select-sm-item-padding-block)}.multi-select.multi-select--lg{font-size:var(--multi-select-lg-font-size);--multi-select-height:var(--multi-select-lg-height);padding-inline:var(--multi-select-lg-padding-inline);--multi-select-icon-size:var(--multi-select-lg-icon-size)}.multi-select__content--lg .multi-select__item{font-size:var(--multi-select-lg-font-size);padding-block:var(--multi-select-lg-item-padding-block)}.multi-select__positioner{z-index:var(--multi-select-content-z-index)}.multi-select.multi-select--error{border-color:var(--multi-select-error-border-color)}

package/dist/multi-select.js

@@ -3,191 +3,123 @@ import './multi-select.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
 import { Icon as t } from "./icon.js";
 import { n } from "./_shared/portal-container.js";
-import { forwardRef as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Popover as u } from "@base-ui/react/popover";
+import { t as r } from "./_shared/assign-ref.js";
+import { forwardRef as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Select as l } from "@base-ui/react/select";
 //#region src/stories/atoms/MultiSelect/MultiSelect.tsx
-function d(e, t) {
-	typeof e == "function" ? e(t) : e && (e.current = t);
-}
-var f = 500, p = r(function({ options: r, value: p, defaultValue: m = [], placeholder: h, disabled: g, readOnly: _, size: v = "md", onValueChange: y, id: b, name: x, error: S = !1, onBlur: C, className: w, "aria-label": T, "aria-labelledby": E, "aria-describedby": D, removeLabel: O, container: k }, A) {
-	let j = e("multiSelect"), M = n(k), [N, P] = s(!1), [F, I] = s(m), [L, R] = s(-1), z = o(null), B = o(null), V = a(), H = a(), U = o(""), W = o(0), G = p === void 0 ? F : p, K = (e) => `${H}-opt-${e}`;
-	function q(e) {
-		let t = G.includes(e) ? G.filter((t) => t !== e) : [...G, e];
-		p === void 0 && I(t), y?.(t);
+var u = i(function({ options: i, value: u, defaultValue: d = [], placeholder: f, disabled: p, readOnly: m, size: h = "md", onValueChange: g, id: _, name: v, error: y = !1, onBlur: b, className: x, "aria-label": S, "aria-labelledby": C, "aria-describedby": w, removeLabel: T, container: E }, D) {
+	let O = e("multiSelect"), k = n(E), [A, j] = o(!1), [M, N] = o(d), P = a(null), F = a(null), I = a(null), L = u === void 0 ? M : u;
+	function R(e) {
+		u === void 0 && N(e), g?.(e);
 	}
-	function J(e) {
-		g || _ || (P(!0), R(r.length === 0 ? -1 : e));
+	function z(e) {
+		R(L.filter((t) => t !== e));
 	}
-	function Y() {
-		P(!1), R(-1), U.current = "";
+	function B(e) {
+		p || m || e.target instanceof Element && (e.target.closest(".multi-select__pill-remove") || F.current?.contains(e.target) || (e.preventDefault(), F.current?.focus(), j(!A)));
 	}
-	function X(e, t) {
-		if (!e) {
-			if (t.reason === "outside-press") {
-				let e = t.event?.target;
-				if (e instanceof Node && z.current?.contains(e)) return;
-			}
-			Y();
-		}
+	function V(e) {
+		return e instanceof Node && (!!F.current?.contains(e) || !!I.current?.contains(e));
 	}
-	function Z(e) {
-		if (r.length === 0) return;
-		let t = Date.now(), n = t - W.current > f ? e : U.current + e;
-		U.current = n, W.current = t;
-		let i = n.length === 1 ? L + 1 : Math.max(L, 0), a = n.toLowerCase();
-		for (let e = 0; e < r.length; e++) {
-			let t = (i + e) % r.length;
-			if (r[t].label.toLowerCase().startsWith(a)) {
-				R(t), N || P(!0);
-				return;
-			}
-		}
+	function H(e) {
+		V(e.relatedTarget) || b?.(e);
 	}
-	function Q(e) {
-		if (g || _) return;
-		let t = r.length - 1;
-		if (e.key === "ArrowDown") e.preventDefault(), N ? R((e) => Math.min(e + 1, t)) : J(0);
-		else if (e.key === "ArrowUp") e.preventDefault(), N ? R((e) => Math.max(e - 1, 0)) : J(t);
-		else if (e.key === "Home") e.preventDefault(), N ? R(r.length === 0 ? -1 : 0) : J(0);
-		else if (e.key === "End") e.preventDefault(), N ? R(t) : J(t);
-		else if (e.key === "Enter" || e.key === " ") e.preventDefault(), N ? L >= 0 && L < r.length && q(r[L].value) : J(0);
-		else if (e.key === "Escape") {
-			if (!N) return;
-			e.preventDefault(), Y();
-		} else e.key === "Tab" ? N && Y() : e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), Z(e.key));
-	}
-	function $(e) {
-		g || _ || e.target instanceof Element && e.target.closest(".multi-select__pill-remove") || (e.preventDefault(), B.current?.focus(), N ? Y() : J(0));
-	}
-	i(() => {
-		!N || L < 0 || document.getElementById(K(L))?.scrollIntoView({ block: "nearest" });
-	}, [
-		N,
-		L,
-		H
-	]);
-	let ee = [
+	let U = [
 		"multi-select",
-		v === "md" ? "" : `multi-select--${v}`,
-		g ? "multi-select--disabled" : "",
-		S ? "multi-select--error" : "",
-		w ?? ""
-	].filter(Boolean).join(" "), te = ["multi-select__content", v === "md" ? "" : `multi-select__content--${v}`].filter(Boolean).join(" ");
-	return /* @__PURE__ */ l(u.Root, {
-		open: N,
-		onOpenChange: X,
-		children: [/* @__PURE__ */ l("div", {
-			ref: z,
-			className: ee,
-			"data-popup-open": N || void 0,
-			onPointerDown: $,
-			children: [
-				/* @__PURE__ */ l("div", {
-					className: "multi-select__values",
-					children: [G.map((e) => {
-						let n = r.find((t) => t.value === e);
-						return n ? /* @__PURE__ */ l("span", {
-							className: "multi-select__pill",
-							children: [/* @__PURE__ */ c("span", {
-								className: "multi-select__pill-label",
-								children: n.label
-							}), !g && !_ && /* @__PURE__ */ c("button", {
-								type: "button",
-								className: "multi-select__pill-remove",
-								"aria-label": j("remove", O)(n.label),
-								tabIndex: -1,
-								onClick: (t) => {
-									t.stopPropagation(), q(e), B.current?.focus();
-								},
-								children: /* @__PURE__ */ c(t, {
-									name: "close",
-									size: "xs"
-								})
-							})]
-						}, e) : null;
-					}), /* @__PURE__ */ c("div", {
-						ref: (e) => {
-							B.current = e, d(A, e);
-						},
-						className: "multi-select__combobox",
-						tabIndex: g ? -1 : 0,
-						role: "combobox",
-						"aria-expanded": N,
-						"aria-haspopup": "listbox",
-						"aria-controls": N ? V : void 0,
-						"aria-activedescendant": N && L >= 0 ? K(L) : void 0,
-						"aria-label": E ? void 0 : T ?? j("placeholder", h),
-						"aria-labelledby": E,
-						"aria-describedby": D,
-						"aria-invalid": S || void 0,
-						"aria-disabled": g || void 0,
-						"aria-readonly": _ || void 0,
-						id: b,
-						onKeyDown: Q,
-						onBlur: C,
-						children: G.length === 0 && /* @__PURE__ */ c("span", {
-							className: "multi-select__placeholder",
-							children: j("placeholder", h)
-						})
-					})]
-				}),
-				/* @__PURE__ */ c(t, {
-					name: "chevron",
-					className: "multi-select__icon"
-				}),
-				x && G.map((e) => /* @__PURE__ */ c("input", {
-					type: "hidden",
-					name: x,
-					value: e
-				}, e))
-			]
-		}), /* @__PURE__ */ c(u.Portal, {
-			container: M,
-			children: /* @__PURE__ */ c(u.Positioner, {
+		h === "md" ? "" : `multi-select--${h}`,
+		p ? "multi-select--disabled" : "",
+		y ? "multi-select--error" : "",
+		x ?? ""
+	].filter(Boolean).join(" "), W = ["multi-select__content", h === "md" ? "" : `multi-select__content--${h}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ c(l.Root, {
+		multiple: !0,
+		value: L,
+		onValueChange: R,
+		open: A,
+		onOpenChange: j,
+		name: v,
+		disabled: p,
+		readOnly: m,
+		modal: !1,
+		children: [/* @__PURE__ */ c("div", {
+			ref: P,
+			className: U,
+			"data-popup-open": A || void 0,
+			onPointerDown: B,
+			children: [/* @__PURE__ */ c("div", {
+				className: "multi-select__values",
+				children: [L.map((e) => {
+					let n = i.find((t) => t.value === e);
+					return n ? /* @__PURE__ */ c("span", {
+						className: "multi-select__pill",
+						children: [/* @__PURE__ */ s("span", {
+							className: "multi-select__pill-label",
+							children: n.label
+						}), !p && !m && /* @__PURE__ */ s("button", {
+							type: "button",
+							className: "multi-select__pill-remove",
+							"aria-label": O("remove", T)(n.label),
+							tabIndex: -1,
+							onClick: (t) => {
+								t.stopPropagation(), z(e), F.current?.focus();
+							},
+							children: /* @__PURE__ */ s(t, {
+								name: "close",
+								size: "xs"
+							})
+						})]
+					}, e) : null;
+				}), /* @__PURE__ */ s(l.Trigger, {
+					ref: (e) => {
+						F.current = e, r(D, e);
+					},
+					render: /* @__PURE__ */ s("div", {}),
+					nativeButton: !1,
+					className: "multi-select__combobox",
+					id: _,
+					"aria-label": C ? void 0 : S ?? O("placeholder", f),
+					"aria-labelledby": C,
+					"aria-describedby": w,
+					"aria-invalid": y || void 0,
+					"aria-readonly": m || void 0,
+					onBlur: H,
+					children: L.length === 0 && /* @__PURE__ */ s("span", {
+						className: "multi-select__placeholder",
+						children: O("placeholder", f)
+					})
+				})]
+			}), /* @__PURE__ */ s(t, {
+				name: "chevron",
+				className: "multi-select__icon"
+			})]
+		}), /* @__PURE__ */ s(l.Portal, {
+			container: k,
+			children: /* @__PURE__ */ s(l.Positioner, {
 				className: "multi-select__positioner",
-				anchor: z,
+				anchor: P,
 				align: "start",
 				sideOffset: -1,
-				children: /* @__PURE__ */ c(u.Popup, {
-					className: te,
-					initialFocus: !1,
-					finalFocus: !1,
-					children: /* @__PURE__ */ c("div", {
-						role: "listbox",
-						"aria-multiselectable": "true",
-						"aria-label": T ?? h,
-						id: V,
-						children: r.map((e, t) => {
-							let n = G.includes(e.value), r = L === t;
-							return /* @__PURE__ */ l("div", {
-								id: K(t),
-								role: "option",
-								"aria-selected": n,
-								"aria-label": e["aria-label"] ?? e.label,
-								className: [
-									"multi-select__item",
-									n ? "multi-select__item--selected" : "",
-									r ? "multi-select__item--active" : ""
-								].filter(Boolean).join(" "),
-								onPointerDown: (e) => {
-									e.preventDefault(), e.stopPropagation();
-								},
-								onClick: () => {
-									q(e.value), R(t), B.current?.focus();
-								},
-								children: [/* @__PURE__ */ c("span", {
-									className: "multi-select__item-check",
-									"aria-hidden": "true",
-									children: /* @__PURE__ */ c("span", { className: "multi-select__item-check-mark" })
-								}), /* @__PURE__ */ c("span", { children: e.label })]
-							}, e.value);
-						})
-					})
+				alignItemWithTrigger: !1,
+				children: /* @__PURE__ */ s(l.Popup, {
+					ref: I,
+					className: W,
+					"aria-label": S ?? f,
+					onBlur: H,
+					children: i.map((e) => /* @__PURE__ */ c(l.Item, {
+						value: e.value,
+						"aria-label": e["aria-label"] ?? e.label,
+						className: "multi-select__item",
+						children: [/* @__PURE__ */ s("span", {
+							className: "multi-select__item-check",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ s("span", { className: "multi-select__item-check-mark" })
+						}), /* @__PURE__ */ s(l.ItemText, { children: e.label })]
+					}, e.value))
 				})
 			})
 		})]
 	});
 });
 //#endregion
-export { p as MultiSelect };
+export { u as MultiSelect };

package/dist/not-found-page.js

@@ -4,16 +4,19 @@ import { PageIntro as t } from "./page-intro.js";
 import { PublicPageShell as n } from "./public-page-shell.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/stories/templates/NotFoundPage/NotFoundPage.tsx
-function a({ title: a, description: o, homeLink: s, header: c, footer: l, id: u = "main-content", shell: d = !0 }) {
+function a({ title: a, description: o, homeLink: s, header: c, footer: l, id: u = "main-content", shell: d = !0, className: f }) {
 	return /* @__PURE__ */ r(n, {
 		header: c,
 		footer: l,
 		id: u,
 		shell: d,
-		children: /* @__PURE__ */ i(e, { children: [/* @__PURE__ */ r(t, {
-			title: a,
-			description: o
-		}), s] })
+		children: /* @__PURE__ */ i(e, {
+			className: f,
+			children: [/* @__PURE__ */ r(t, {
+				title: a,
+				description: o
+			}), s]
+		})
 	});
 }
 //#endregion

package/dist/notification-list.js

@@ -5,62 +5,57 @@ import { Icon as t } from "./icon.js";
 import { VisuallyHidden as n } from "./visually-hidden.js";
 import { Button as r } from "./button.js";
 import { Text as i } from "./text.js";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { t as a } from "./_shared/default-render-link.js";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/stories/molecules/NotificationList/NotificationList.tsx
-function c({ children: e, ...t }) {
-	return /* @__PURE__ */ o("a", {
-		...t,
-		children: e
-	});
-}
-function l({ items: l, renderLink: u = c, renderActions: d, onItemClick: f, onMarkRead: p, label: m, unreadLabel: h, markReadLabel: g, className: _ }) {
+function l({ items: l, renderLink: u = a, renderActions: d, onItemClick: f, onMarkRead: p, label: m, unreadLabel: h, markReadLabel: g, className: _ }) {
 	let v = e("notificationList");
-	return l.length === 0 ? null : /* @__PURE__ */ o("ul", {
+	return l.length === 0 ? null : /* @__PURE__ */ s("ul", {
 		className: ["notification-list", _].filter(Boolean).join(" "),
 		"aria-label": v("label", m),
 		children: l.map((e) => {
-			let c = e.unread, l = d?.(e);
-			return /* @__PURE__ */ s("li", {
+			let a = e.unread, l = d?.(e);
+			return /* @__PURE__ */ c("li", {
 				className: "notification-list__item",
 				children: [
-					/* @__PURE__ */ o("span", {
+					/* @__PURE__ */ s("span", {
 						className: "notification-list__indicator",
-						children: c && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(t, {
+						children: a && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(t, {
 							name: "dot",
 							size: "sm",
 							className: "notification-list__dot"
-						}), /* @__PURE__ */ o(n, { children: e.unreadLabel ?? v("unread", h) })] })
+						}), /* @__PURE__ */ s(n, { children: e.unreadLabel ?? v("unread", h) })] })
 					}),
-					/* @__PURE__ */ s("div", {
+					/* @__PURE__ */ c("div", {
 						className: "notification-list__text",
 						children: [e.href ? u({
 							href: e.href,
 							className: "notification-list__title",
 							onClick: f ? () => f(e) : void 0,
 							children: e.title
-						}) : /* @__PURE__ */ o(i, {
+						}) : /* @__PURE__ */ s(i, {
 							className: "notification-list__title",
 							children: e.title
-						}), e.body && /* @__PURE__ */ o(i, {
+						}), e.body && /* @__PURE__ */ s(i, {
 							tone: "muted",
 							className: "notification-list__body",
 							children: e.body
 						})]
 					}),
-					(p || l) && /* @__PURE__ */ s("div", {
+					(p || l) && /* @__PURE__ */ c("div", {
 						className: "notification-list__actions",
-						children: [p && c && /* @__PURE__ */ o(r, {
+						children: [p && a && /* @__PURE__ */ s(r, {
 							variant: "text",
 							size: "sm",
 							onClick: () => p(e.id),
 							children: v("markRead", g)
 						}), l]
 					}),
-					e.timeDateTime ? /* @__PURE__ */ o("time", {
+					e.timeDateTime ? /* @__PURE__ */ s("time", {
 						className: "notification-list__time",
 						dateTime: e.timeDateTime,
 						children: e.time
-					}) : /* @__PURE__ */ o("span", {
+					}) : /* @__PURE__ */ s("span", {
 						className: "notification-list__time",
 						children: e.time
 					})