@public-ui/sample-react 2.2.4 → 2.2.5-rc.0

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.21.0
+ * @remix-run/router v1.21.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.28.0
+ * React Router v6.28.2
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.2.4",
+  "version": "2.2.5-rc.0",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -11,7 +11,7 @@
     "@leanup/stack": "1.3.54",
     "@leanup/stack-react": "1.3.54",
     "@leanup/stack-webpack": "1.3.54",
-    "@playwright/test": "1.49.1",
+    "@playwright/test": "1.50.0",
     "@types/node": "ts5.7",
     "@types/react": "18.3.4",
     "@types/react-dom": "18.3.5",
@@ -22,23 +22,23 @@
     "chromedriver": "130.0.4",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react": "7.37.4",
     "formik": "2.4.6",
     "nightwatch-axe-verbose": "2.3.1",
     "npm-run-all": "4.1.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-number-format": "5.4.2",
-    "react-router": "6.28.0",
-    "react-router-dom": "6.28.0",
+    "react-number-format": "5.4.3",
+    "react-router": "6.28.2",
+    "react-router-dom": "6.28.2",
     "rimraf": "6.0.1",
     "ts-prune": "0.10.3",
-    "typescript": "5.7.2",
+    "typescript": "5.7.3",
     "world_countries_lists": "2.9.0",
-    "yup": "1.5.0",
-    "@public-ui/components": "2.2.4",
-    "@public-ui/themes": "2.2.4",
-    "@public-ui/react": "2.2.4"
+    "yup": "1.6.1",
+    "@public-ui/react": "2.2.5-rc.0",
+    "@public-ui/themes": "2.2.5-rc.0",
+    "@public-ui/components": "2.2.5-rc.0"
   },
   "files": [
     ".eslintignore",

package/src/components/form/error-list.tsx

@@ -1,28 +1,42 @@
+import { KolButton, KolForm, KolInputText } from '@public-ui/react';
 import type { FC } from 'react';
-import React from 'react';
+import React, { useRef } from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolForm, KolInputText } from '@public-ui/react';
 
-export const FormErrorList: FC = () => (
-	<>
-		<SampleDescription>
-			<p>This sample shows a form with error messages.</p>
-		</SampleDescription>
+export const FormErrorList: FC = () => {
+	const formRef = useRef<HTMLKolFormElement | null>(null);
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows a form with error messages.</p>
+			</SampleDescription>
 
-		<KolForm
-			className="w-full"
-			_errorList={[
-				{
-					message: 'Error in Input 2',
-					selector: '#input2',
-				},
-			]}
-		>
-			<div className="grid gap-2">
-				<KolInputText id="input1" _label="Input 1" />
-				<KolInputText id="input2" _label="Input 2" _touched _msg={{ _description: 'Input error', _type: 'error' }} />
-				<KolInputText id="input3" _label="Input 3" />
-			</div>
-		</KolForm>
-	</>
-);
+			<KolForm
+				className="w-full"
+				ref={formRef}
+				_errorList={[
+					{
+						message: 'Error in Input 2',
+						selector: '#input2',
+					},
+				]}
+			>
+				<div className="grid gap-2">
+					<KolInputText id="input1" _label="Input 1" />
+					<KolInputText id="input2" _label="Input 2" _touched _msg={{ _description: 'Input error', _type: 'error' }} />
+					<KolInputText id="input3" _label="Input 3" />
+					<div>
+						<KolButton
+							_label="ScrollTo"
+							_on={{
+								onClick: () => {
+									formRef.current?.focusErrorList();
+								},
+							}}
+						/>
+					</div>
+				</div>
+			</KolForm>
+		</>
+	);
+};

package/src/components/table/horizontal-scrollbar.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
+import { KolAlert, KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
 
 import { SampleDescription } from '../SampleDescription';
 
@@ -11,6 +11,9 @@ const DATA = [{ small: 'Small Example', large: 'Larger Example' }];
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
+			/**
+			 * In version 3, the width of the column is required to implicitly calculate the minWidth.
+			 */
 			{ label: 'Large Column', key: 'large', textAlign: 'left', width: '300px' },
 			{ label: 'Small Column', key: 'small', textAlign: 'left', width: '200px' },
 			{ label: 'Larger Column', key: 'large', textAlign: 'left', width: '400px' },
@@ -31,12 +34,18 @@ export const TableHorizontalScrollbar: FC = () => {
 				</p>
 			</SampleDescription>
 
+			<KolAlert _variant="card" _type="warning" _label="Deprecation of minWidth">
+				In version 3, the width of the column will be required for the implicit calculation of the minWidth. This behavior is also implemented in version 2, if
+				the _minWidth property is undefined.
+			</KolAlert>
+			<br />
 			<section className="w-full flex flex-col gap-4">
 				<KolHeading _label="Table with scrollbar" _level={2} />
 
 				<KolTable
 					_label="Table for demonstration purposes with horizontal scrollbar."
-					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+					// minWidth will be removed in the next major release
+					_minWidth={hasWidthRestriction ? '600px' : undefined}
 					_headers={HEADERS}
 					_data={DATA}
 					className="block"
@@ -47,7 +56,8 @@ export const TableHorizontalScrollbar: FC = () => {
 
 				<KolTable
 					_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
-					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+					// minWidth will be removed in the next major release
+					_minWidth={hasWidthRestriction ? '600px' : undefined}
 					_headers={HEADERS}
 					_data={[]}
 					className="block"

package/src/components/table/stateful-with-selection.tsx

@@ -94,7 +94,9 @@ export const TableStatefulWithSelection: FC = () => {
 							},
 						}}
 					></KolButton>
-					<pre className="text-base">{JSON.stringify(selectedValue, null, 2)}</pre>
+					<pre className="text-base" aria-live="polite">
+						{JSON.stringify(selectedValue, null, 2)}
+					</pre>
 				</div>
 			</section>
 		</>

package/src/components/table/stateful-with-single-selection.tsx

@@ -96,7 +96,9 @@ export const TableStatefulWithSingleSelection: FC = () => {
 							},
 						}}
 					></KolButton>
-					<pre className="text-base">{JSON.stringify(selectedValue, null, 2)}</pre>
+					<pre className="text-base" aria-live="polite">
+						{JSON.stringify(selectedValue, null, 2)}
+					</pre>
 				</div>
 			</section>
 		</>

package/dist/665.js

@@ -1,2 +0,0 @@
-/*! For license information please see 665.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[665],{5683:(t,e,n)=>{n.d(e,{a:()=>l,v:()=>i});var o=n(1722);const i=(t,e,n)=>{(0,o.w)(t,e,(t=>"string"==typeof t&&r.includes(t)),new Set(r),n,{defaultValue:"top"})},r=["left","right","top","bottom"],l=(t,e)=>{i(t,"_align",e)}},8715:(t,e,n)=>{n.d(e,{a:()=>bt,b:()=>gt});var o=n(7177),i=Object.defineProperty,r=Object.defineProperties,l=Object.getOwnPropertyDescriptors,c=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable,a=(t,e,n)=>e in t?i(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,u=(t,e)=>{for(var n in e||(e={}))s.call(e,n)&&a(t,n,e[n]);if(c)for(var n of c(e))f.call(e,n)&&a(t,n,e[n]);return t},d=(t,e)=>r(t,l(e)),p=(t,e)=>{var n={};for(var o in t)s.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(null!=t&&c)for(var o of c(t))e.indexOf(o)<0&&f.call(t,o)&&(n[o]=t[o]);return n},h=(t,e,n)=>new Promise(((o,i)=>{var r=t=>{try{c(n.next(t))}catch(t){i(t)}},l=t=>{try{c(n.throw(t))}catch(t){i(t)}},c=t=>t.done?o(t.value):Promise.resolve(t.value).then(r,l);c((n=n.apply(t,e)).next())}));const m=Math.min,y=Math.max,g=Math.round,x=Math.floor,v=t=>({x:t,y:t}),w={left:"right",right:"left",bottom:"top",top:"bottom"},b={start:"end",end:"start"};function R(t,e,n){return y(t,m(e,n))}function O(t,e){return"function"==typeof t?t(e):t}function T(t){return t.split("-")[0]}function E(t){return t.split("-")[1]}function L(t){return"x"===t?"y":"x"}function A(t){return"y"===t?"height":"width"}function P(t){return["top","bottom"].includes(T(t))?"y":"x"}function D(t){return L(P(t))}function S(t){return t.replace(/start|end/g,(t=>b[t]))}function k(t){return t.replace(/left|right|bottom|top/g,(t=>w[t]))}function C(t){return"number"!=typeof t?function(t){return u({top:0,right:0,bottom:0,left:0},t)}(t):{top:t,right:t,bottom:t,left:t}}function F(t){const{x:e,y:n,width:o,height:i}=t;return{width:o,height:i,top:n,left:e,right:e+o,bottom:n+i,x:e,y:n}}function H(t,e,n){let{reference:o,floating:i}=t;const r=P(e),l=D(e),c=A(l),s=T(e),f="y"===r,a=o.x+o.width/2-i.width/2,u=o.y+o.height/2-i.height/2,d=o[c]/2-i[c]/2;let p;switch(s){case"top":p={x:a,y:o.y-i.height};break;case"bottom":p={x:a,y:o.y+o.height};break;case"right":p={x:o.x+o.width,y:u};break;case"left":p={x:o.x-i.width,y:u};break;default:p={x:o.x,y:o.y}}switch(E(e)){case"start":p[l]-=d*(n&&f?-1:1);break;case"end":p[l]+=d*(n&&f?-1:1)}return p}function W(t,e){return h(this,null,(function*(){var n;void 0===e&&(e={});const{x:o,y:i,platform:r,rects:l,elements:c,strategy:s}=t,{boundary:f="clippingAncestors",rootBoundary:a="viewport",elementContext:u="floating",altBoundary:d=!1,padding:p=0}=O(e,t),h=C(p),m=c[d?"floating"===u?"reference":"floating":u],y=F(yield r.getClippingRect({element:null==(n=yield null==r.isElement?void 0:r.isElement(m))||n?m:m.contextElement||(yield null==r.getDocumentElement?void 0:r.getDocumentElement(c.floating)),boundary:f,rootBoundary:a,strategy:s})),g="floating"===u?{x:o,y:i,width:l.floating.width,height:l.floating.height}:l.reference,x=yield null==r.getOffsetParent?void 0:r.getOffsetParent(c.floating),v=(yield null==r.isElement?void 0:r.isElement(x))&&(yield null==r.getScale?void 0:r.getScale(x))||{x:1,y:1},w=F(r.convertOffsetParentRelativeRectToViewportRelativeRect?yield r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:c,rect:g,offsetParent:x,strategy:s}):g);return{top:(y.top-w.top+h.top)/v.y,bottom:(w.bottom-y.bottom+h.bottom)/v.y,left:(y.left-w.left+h.left)/v.x,right:(w.right-y.right+h.right)/v.x}}))}function j(){return"undefined"!=typeof window}function _(t){return M(t)?(t.nodeName||"").toLowerCase():"#document"}function B(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function V(t){var e;return null==(e=(M(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function M(t){return!!j()&&(t instanceof Node||t instanceof B(t).Node)}function $(t){return!!j()&&(t instanceof Element||t instanceof B(t).Element)}function z(t){return!!j()&&(t instanceof HTMLElement||t instanceof B(t).HTMLElement)}function N(t){return!(!j()||"undefined"==typeof ShadowRoot)&&(t instanceof ShadowRoot||t instanceof B(t).ShadowRoot)}function I(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=K(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function q(t){return["table","td","th"].includes(_(t))}function X(t){return[":popover-open",":modal"].some((e=>{try{return t.matches(e)}catch(t){return!1}}))}function Y(t){const e=G(),n=$(t)?K(t):t;return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some((t=>(n.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(n.contain||"").includes(t)))}function G(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function J(t){return["html","body","#document"].includes(_(t))}function K(t){return B(t).getComputedStyle(t)}function Q(t){return $(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.scrollX,scrollTop:t.scrollY}}function U(t){if("html"===_(t))return t;const e=t.assignedSlot||t.parentNode||N(t)&&t.host||V(t);return N(e)?e.host:e}function Z(t){const e=U(t);return J(e)?t.ownerDocument?t.ownerDocument.body:t.body:z(e)&&I(e)?e:Z(e)}function tt(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=Z(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=B(i);if(r){const t=et(l);return e.concat(l,l.visualViewport||[],I(i)?i:[],t&&n?tt(t):[])}return e.concat(i,tt(i,[],n))}function et(t){return t.parent&&Object.getPrototypeOf(t.parent)?t.frameElement:null}function nt(t){const e=K(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const i=z(t),r=i?t.offsetWidth:n,l=i?t.offsetHeight:o,c=g(n)!==r||g(o)!==l;return c&&(n=r,o=l),{width:n,height:o,$:c}}function ot(t){return $(t)?t:t.contextElement}function it(t){const e=ot(t);if(!z(e))return v(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:r}=nt(e);let l=(r?g(n.width):n.width)/o,c=(r?g(n.height):n.height)/i;return l&&Number.isFinite(l)||(l=1),c&&Number.isFinite(c)||(c=1),{x:l,y:c}}const rt=v(0);function lt(t){const e=B(t);return G()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:rt}function ct(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const i=t.getBoundingClientRect(),r=ot(t);let l=v(1);e&&(o?$(o)&&(l=it(o)):l=it(t));const c=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==B(t))&&e}(r,n,o)?lt(r):v(0);let s=(i.left+c.x)/l.x,f=(i.top+c.y)/l.y,a=i.width/l.x,u=i.height/l.y;if(r){const t=B(r),e=o&&$(o)?B(o):o;let n=t,i=et(n);for(;i&&o&&e!==n;){const t=it(i),e=i.getBoundingClientRect(),o=K(i),r=e.left+(i.clientLeft+parseFloat(o.paddingLeft))*t.x,l=e.top+(i.clientTop+parseFloat(o.paddingTop))*t.y;s*=t.x,f*=t.y,a*=t.x,u*=t.y,s+=r,f+=l,n=B(i),i=et(n)}}return F({width:a,height:u,x:s,y:f})}function st(t,e){const n=Q(t).scrollLeft;return e?e.left+n:ct(V(t)).left+n}function ft(t,e,n){void 0===n&&(n=!1);const o=t.getBoundingClientRect();return{x:o.left+e.scrollLeft-(n?0:st(t,o)),y:o.top+e.scrollTop}}function at(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=B(t),o=V(t),i=n.visualViewport;let r=o.clientWidth,l=o.clientHeight,c=0,s=0;if(i){r=i.width,l=i.height;const t=G();(!t||t&&"fixed"===e)&&(c=i.offsetLeft,s=i.offsetTop)}return{width:r,height:l,x:c,y:s}}(t,n);else if("document"===e)o=function(t){const e=V(t),n=Q(t),o=t.ownerDocument.body,i=y(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),r=y(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let l=-n.scrollLeft+st(t);const c=-n.scrollTop;return"rtl"===K(o).direction&&(l+=y(e.clientWidth,o.clientWidth)-i),{width:i,height:r,x:l,y:c}}(V(t));else if($(e))o=function(t,e){const n=ct(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=z(t)?it(t):v(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(e,n);else{const n=lt(t);o={x:e.x-n.x,y:e.y-n.y,width:e.width,height:e.height}}return F(o)}function ut(t,e){const n=U(t);return!(n===e||!$(n)||J(n))&&("fixed"===K(n).position||ut(n,e))}function dt(t,e,n){const o=z(e),i=V(e),r="fixed"===n,l=ct(t,!0,r,e);let c={scrollLeft:0,scrollTop:0};const s=v(0);if(o||!o&&!r)if(("body"!==_(e)||I(i))&&(c=Q(e)),o){const t=ct(e,!0,r,e);s.x=t.x+e.clientLeft,s.y=t.y+e.clientTop}else i&&(s.x=st(i));const f=!i||o||r?v(0):ft(i,c);return{x:l.left+c.scrollLeft-s.x-f.x,y:l.top+c.scrollTop-s.y-f.y,width:l.width,height:l.height}}function pt(t){return"static"===K(t).position}function ht(t,e){if(!z(t)||"fixed"===K(t).position)return null;if(e)return e(t);let n=t.offsetParent;return V(t)===n&&(n=n.ownerDocument.body),n}function mt(t,e){const n=B(t);if(X(t))return n;if(!z(t)){let e=U(t);for(;e&&!J(e);){if($(e)&&!pt(e))return e;e=U(e)}return n}let o=ht(t,e);for(;o&&q(o)&&pt(o);)o=ht(o,e);return o&&J(o)&&pt(o)&&!Y(o)?n:o||function(t){let e=U(t);for(;z(e)&&!J(e);){if(Y(e))return e;if(X(e))return null;e=U(e)}return null}(t)||n}const yt={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,l=V(o),c=!!e&&X(e.floating);if(o===l||c&&r)return n;let s={scrollLeft:0,scrollTop:0},f=v(1);const a=v(0),u=z(o);if((u||!u&&!r)&&(("body"!==_(o)||I(l))&&(s=Q(o)),z(o))){const t=ct(o);f=it(o),a.x=t.x+o.clientLeft,a.y=t.y+o.clientTop}const d=!l||u||r?v(0):ft(l,s,!0);return{width:n.width*f.x,height:n.height*f.y,x:n.x*f.x-s.scrollLeft*f.x+a.x+d.x,y:n.y*f.y-s.scrollTop*f.y+a.y+d.y}},getDocumentElement:V,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t;const r=[..."clippingAncestors"===n?X(e)?[]:function(t,e){const n=e.get(t);if(n)return n;let o=tt(t,[],!1).filter((t=>$(t)&&"body"!==_(t))),i=null;const r="fixed"===K(t).position;let l=r?U(t):t;for(;$(l)&&!J(l);){const e=K(l),n=Y(l);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&["absolute","fixed"].includes(i.position)||I(l)&&!n&&ut(t,l))?o=o.filter((t=>t!==l)):i=e,l=U(l)}return e.set(t,o),o}(e,this._c):[].concat(n),o],l=r[0],c=r.reduce(((t,n)=>{const o=at(e,n,i);return t.top=y(o.top,t.top),t.right=m(o.right,t.right),t.bottom=m(o.bottom,t.bottom),t.left=y(o.left,t.left),t}),at(e,l,i));return{width:c.right-c.left,height:c.bottom-c.top,x:c.left,y:c.top}},getOffsetParent:mt,getElementRects:function(t){return h(this,null,(function*(){const e=this.getOffsetParent||mt,n=this.getDimensions,o=yield n(t.floating);return{reference:dt(t.reference,yield e(t.floating),t.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}}))},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=nt(t);return{width:e,height:n}},getScale:it,isElement:$,isRTL:function(t){return"rtl"===K(t).direction}};function gt(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:l="function"==typeof ResizeObserver,layoutShift:c="function"==typeof IntersectionObserver,animationFrame:s=!1}=o,f=ot(t),a=i||r?[...f?tt(f):[],...tt(e)]:[];a.forEach((t=>{i&&t.addEventListener("scroll",n,{passive:!0}),r&&t.addEventListener("resize",n)}));const p=f&&c?function(t,e){let n,o=null;const i=V(t);function r(){var t;clearTimeout(n),null==(t=o)||t.disconnect(),o=null}return function l(c,s){void 0===c&&(c=!1),void 0===s&&(s=1),r();const{left:f,top:a,width:p,height:h}=t.getBoundingClientRect();if(c||e(),!p||!h)return;const g={rootMargin:-x(a)+"px "+-x(i.clientWidth-(f+p))+"px "+-x(i.clientHeight-(a+h))+"px "+-x(f)+"px",threshold:y(0,m(1,s))||1};let v=!0;function w(t){const e=t[0].intersectionRatio;if(e!==s){if(!v)return l();e?l(!1,e):n=setTimeout((()=>{l(!1,1e-7)}),1e3)}v=!1}try{o=new IntersectionObserver(w,d(u({},g),{root:i.ownerDocument}))}catch(t){o=new IntersectionObserver(w,g)}o.observe(t)}(!0),r}(f,n):null;let h,g=-1,v=null;l&&(v=new ResizeObserver((t=>{let[o]=t;o&&o.target===f&&v&&(v.unobserve(e),cancelAnimationFrame(g),g=requestAnimationFrame((()=>{var t;null==(t=v)||t.observe(e)}))),n()})),f&&!s&&v.observe(f),v.observe(e));let w=s?ct(t):null;return s&&function e(){const o=ct(t);!w||o.x===w.x&&o.y===w.y&&o.width===w.width&&o.height===w.height||n(),w=o,h=requestAnimationFrame(e)}(),n(),()=>{var t;a.forEach((t=>{i&&t.removeEventListener("scroll",n),r&&t.removeEventListener("resize",n)})),null==p||p(),null==(t=v)||t.disconnect(),v=null,s&&cancelAnimationFrame(h)}}const xt=function(t){return void 0===t&&(t={}),{name:"shift",options:t,fn(e){return h(this,null,(function*(){const{x:n,y:o,placement:i}=e,r=O(t,e),{mainAxis:l=!0,crossAxis:c=!1,limiter:s={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}}}=r,f=p(r,["mainAxis","crossAxis","limiter"]),a={x:n,y:o},h=yield W(e,f),m=P(T(i)),y=L(m);let g=a[y],x=a[m];if(l){const t="y"===y?"bottom":"right";g=R(g+h["y"===y?"top":"left"],g,g-h[t])}if(c){const t="y"===m?"bottom":"right";x=R(x+h["y"===m?"top":"left"],x,x-h[t])}const v=s.fn(d(u({},e),{[y]:g,[m]:x}));return d(u({},v),{data:{x:v.x-n,y:v.y-o}})}))}}},vt=function(t){return void 0===t&&(t={}),{name:"flip",options:t,fn(e){return h(this,null,(function*(){var n,o;const{placement:i,middlewareData:r,rects:l,initialPlacement:c,platform:s,elements:f}=e,a=O(t,e),{mainAxis:u=!0,crossAxis:d=!0,fallbackPlacements:h,fallbackStrategy:m="bestFit",fallbackAxisSideDirection:y="none",flipAlignment:g=!0}=a,x=p(a,["mainAxis","crossAxis","fallbackPlacements","fallbackStrategy","fallbackAxisSideDirection","flipAlignment"]);if(null!=(n=r.arrow)&&n.alignmentOffset)return{};const v=T(i),w=P(c),b=T(c)===c,R=yield null==s.isRTL?void 0:s.isRTL(f.floating),L=h||(b||!g?[k(c)]:function(t){const e=k(t);return[S(t),e,S(e)]}(c)),C="none"!==y;!h&&C&&L.push(...function(t,e,n,o){const i=E(t);let r=function(t,e,n){const o=["left","right"],i=["right","left"],r=["top","bottom"],l=["bottom","top"];switch(t){case"top":case"bottom":return n?e?i:o:e?o:i;case"left":case"right":return e?r:l;default:return[]}}(T(t),"start"===n,o);return i&&(r=r.map((t=>t+"-"+i)),e&&(r=r.concat(r.map(S)))),r}(c,g,y,R));const F=[c,...L],H=yield W(e,x),j=[];let _=(null==(o=r.flip)?void 0:o.overflows)||[];if(u&&j.push(H[v]),d){const t=function(t,e,n){void 0===n&&(n=!1);const o=E(t),i=D(t),r=A(i);let l="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=k(l)),[l,k(l)]}(i,l,R);j.push(H[t[0]],H[t[1]])}if(_=[..._,{placement:i,overflows:j}],!j.every((t=>t<=0))){var B,V;const t=((null==(B=r.flip)?void 0:B.index)||0)+1,e=F[t];if(e)return{data:{index:t,overflows:_},reset:{placement:e}};let n=null==(V=_.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:V.placement;if(!n)switch(m){case"bestFit":{var M;const t=null==(M=_.filter((t=>{if(C){const e=P(t.placement);return e===w||"y"===e}return!0})).map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:M[0];t&&(n=t);break}case"initialPlacement":n=c}if(i!==n)return{reset:{placement:n}}}return{}}))}}},wt=t=>({name:"arrow",options:t,fn(e){return h(this,null,(function*(){const{x:n,y:o,placement:i,rects:r,platform:l,elements:c,middlewareData:s}=e,{element:f,padding:a=0}=O(t,e)||{};if(null==f)return{};const d=C(a),p={x:n,y:o},h=D(i),y=A(h),g=yield l.getDimensions(f),x="y"===h,v=x?"top":"left",w=x?"bottom":"right",b=x?"clientHeight":"clientWidth",T=r.reference[y]+r.reference[h]-p[h]-r.floating[y],L=p[h]-r.reference[h],P=yield null==l.getOffsetParent?void 0:l.getOffsetParent(f);let S=P?P[b]:0;S&&(yield null==l.isElement?void 0:l.isElement(P))||(S=c.floating[b]||r.floating[y]);const k=T/2-L/2,F=S/2-g[y]/2-1,H=m(d[v],F),W=m(d[w],F),j=H,_=S-g[y]-W,B=S/2-g[y]/2+k,V=R(j,B,_),M=!s.arrow&&null!=E(i)&&B!==V&&r.reference[y]/2-(B<j?H:W)-g[y]/2<0,$=M?B<j?B-j:B-_:0;return{[h]:p[h]+$,data:u({[h]:V,centerOffset:B-V-$},M&&{alignmentOffset:$}),reset:M}}))}}),bt=t=>h(void 0,[t],(function*({floatingElement:t,referenceElement:e,arrowElement:n,align:i="top"}){var r,l,c,s;if("test"!==o.p){const o=[(s=null!==(r=null==n?void 0:n.offsetHeight)&&void 0!==r?r:10,void 0===s&&(s=0),{name:"offset",options:s,fn(t){return h(this,null,(function*(){var e,n;const{x:o,y:i,placement:r,middlewareData:l}=t,c=yield function(t,e){return h(this,null,(function*(){const{placement:n,platform:o,elements:i}=t,r=yield null==o.isRTL?void 0:o.isRTL(i.floating),l=T(n),c=E(n),s="y"===P(n),f=["left","top"].includes(l)?-1:1,a=r&&s?-1:1,d=O(e,t);let{mainAxis:p,crossAxis:h,alignmentAxis:m}="number"==typeof d?{mainAxis:d,crossAxis:0,alignmentAxis:null}:u({mainAxis:0,crossAxis:0,alignmentAxis:null},d);return c&&"number"==typeof m&&(h="end"===c?-1*m:m),s?{x:h*a,y:p*f}:{x:p*f,y:h*a}}))}(t,s);return r===(null==(e=l.offset)?void 0:e.placement)&&null!=(n=l.arrow)&&n.alignmentOffset?{}:{x:o+c.x,y:i+c.y,data:d(u({},c),{placement:r})}}))}}),vt(),xt()];n&&o.push(wt({element:n}));const{x:f,y:a,middlewareData:p,placement:m}=yield((t,e,n)=>{const o=new Map,i=u({platform:yt},n),r=d(u({},i.platform),{_c:o});return((t,e,n)=>h(void 0,null,(function*(){const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:l}=n,c=r.filter(Boolean),s=yield null==l.isRTL?void 0:l.isRTL(e);let f=yield l.getElementRects({reference:t,floating:e,strategy:i}),{x:a,y:p}=H(f,o,s),h=o,m={},y=0;for(let n=0;n<c.length;n++){const{name:r,fn:g}=c[n],{x,y:v,data:w,reset:b}=yield g({x:a,y:p,initialPlacement:o,placement:h,strategy:i,middlewareData:m,rects:f,platform:l,elements:{reference:t,floating:e}});a=null!=x?x:a,p=null!=v?v:p,m=d(u({},m),{[r]:u(u({},m[r]),w)}),b&&y<=50&&(y++,"object"==typeof b&&(b.placement&&(h=b.placement),b.rects&&(f=!0===b.rects?yield l.getElementRects({reference:t,floating:e,strategy:i}):b.rects),({x:a,y:p}=H(f,h,s))),n=-1)}return{x:a,y:p,placement:h,strategy:i,middlewareData:m}})))(t,e,d(u({},i),{platform:r}))})(e,t,{placement:i,middleware:o,strategy:"fixed"});Object.assign(t.style,{left:`${f}px`,top:`${a}px`,visibility:"visible"}),n&&((null===(l=p.arrow)||void 0===l?void 0:l.x)?Object.assign(n.style,{left:`${p.arrow.x}px`,top:"bottom"===m?-n.offsetHeight/2+"px":"",bottom:"top"===m?-n.offsetHeight/2+"px":""}):(null===(c=p.arrow)||void 0===c?void 0:c.y)&&Object.assign(n.style,{left:"right"===m?-n.offsetWidth/2+"px":"",right:"left"===m?-n.offsetWidth/2+"px":"",top:`${p.arrow.y}px`}))}}))},7177:(t,e,n)=>{n.d(e,{b:()=>l,h:()=>i,p:()=>o,s:()=>r});let o="development";try{o="production"}catch(t){o="production"}const i=(t,e,n)=>{if(t&&e&&"string"==typeof n){const o=t.querySelector(`[slot="${n}"]`);o&&e.appendChild(o)}},r=t=>""===t,l=(t,e)=>t||e||""}}]);