@ebrains/react 2.4.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/color-primary-palette_6.entry.esm.js +106 -106
- package/components-section.entry.esm.js +1 -1
- package/correct-use-of-colors.entry.esm.js +33 -33
- package/docs-palettes.entry.esm.js +1 -1
- package/docs-tokens.entry.esm.js +1 -1
- package/eds-accordion_52.entry.esm.js +1823 -0
- package/eds-app-root.entry.esm.js +4 -4
- package/eds-cookies-preference.entry.esm.js +3 -3
- package/eds-feedback.entry.esm.js +5 -5
- package/eds-frame.entry.esm.js +7 -7
- package/eds-gauge.entry.esm.js +8 -9
- package/eds-gitlab-contributors.entry.esm.js +277 -0
- package/eds-icon-bluesky.entry.esm.js +1 -1
- package/eds-icon-eu.entry.esm.js +2 -2
- package/eds-icon-facebook.entry.esm.js +1 -1
- package/eds-icon-gitlab.entry.esm.js +1 -1
- package/eds-icon-linkedin.entry.esm.js +1 -1
- package/eds-icon-mastodon.entry.esm.js +1 -1
- package/eds-icon-twitter.entry.esm.js +1 -1
- package/eds-icon-youtube.entry.esm.js +1 -1
- package/eds-modal.entry.esm.js +88 -31
- package/eds-pie.entry.esm.js +38 -4
- package/eds-section-core_2.entry.esm.js +5 -5
- package/eds-splash-screen.entry.esm.js +4 -12
- package/eds-timeline.entry.esm.js +8 -14
- package/eds-toast-manager.entry.esm.js +1 -1
- package/eu-8ac3e99c.esm.js +7 -0
- package/incorrect-use-of-colors.entry.esm.js +8 -8
- package/index.esm.js +1 -1
- package/index.esm2.js +14 -143
- package/logo-space.entry.esm.js +138 -17
- package/logo-variations-horizontal_2.entry.esm.js +28 -54
- package/logo-variations-tabs.entry.esm.js +1 -1
- package/logo-wrong-usage.entry.esm.js +33 -33
- package/negative-84eec72e.esm.js +104 -0
- package/package.json +1 -1
- package/positive-cc986d7c.esm.js +65 -0
- package/src/components.d.ts +8 -2
- package/src/generated/components.d.ts +0 -1
- package/svg-repository.entry.esm.js +7 -254
- package/token-list_3.entry.esm.js +79 -51
- package/token-ratios.entry.esm.js +3 -3
- package/token-spacing.entry.esm.js +26 -26
- package/token-typography.entry.esm.js +88 -79
- package/arrow-diagonal-black-8f0494c3.esm.js +0 -3
- package/arrow-right-9322ba8a.esm.js +0 -5
- package/bin-37cad2f0.esm.js +0 -3
- package/bookmark-c200037c.esm.js +0 -16
- package/chevron-down-6144c823.esm.js +0 -12
- package/chevron-left-ca6c66e1.esm.js +0 -11
- package/chevron-right-b88ed2d4.esm.js +0 -5
- package/chevron-up-c66bd477.esm.js +0 -12
- package/clone-dab56639.esm.js +0 -3
- package/close-87fc0d63.esm.js +0 -5
- package/copy-03b72cb6.esm.js +0 -5
- package/download-47746956.esm.js +0 -18
- package/draft-dd5dada2.esm.js +0 -3
- package/edit-3893a517.esm.js +0 -3
- package/eds-accordion_37.entry.esm.js +0 -1201
- package/eds-card-desc_2.entry.esm.js +0 -85
- package/eds-card-generic.entry.esm.js +0 -116
- package/eds-card-project.entry.esm.js +0 -209
- package/eds-card-section.entry.esm.js +0 -56
- package/eds-card-tags.entry.esm.js +0 -27
- package/eds-card-tool.entry.esm.js +0 -105
- package/eds-footer.entry.esm.js +0 -135
- package/eds-fullscreen-menu.entry.esm.js +0 -143
- package/eds-icon-arrow-diagonal.entry.esm.js +0 -21
- package/eds-icon-arrow-right.entry.esm.js +0 -21
- package/eds-icon-bin.entry.esm.js +0 -21
- package/eds-icon-bookmark.entry.esm.js +0 -21
- package/eds-icon-chevron-down.entry.esm.js +0 -21
- package/eds-icon-chevron-left.entry.esm.js +0 -21
- package/eds-icon-chevron-right.entry.esm.js +0 -21
- package/eds-icon-chevron-up.entry.esm.js +0 -21
- package/eds-icon-clone.entry.esm.js +0 -21
- package/eds-icon-close.entry.esm.js +0 -21
- package/eds-icon-copy.entry.esm.js +0 -21
- package/eds-icon-download.entry.esm.js +0 -21
- package/eds-icon-draft.entry.esm.js +0 -21
- package/eds-icon-edit.entry.esm.js +0 -21
- package/eds-icon-external.entry.esm.js +0 -21
- package/eds-icon-loader.entry.esm.js +0 -21
- package/eds-icon-menu.entry.esm.js +0 -21
- package/eds-icon-minus.entry.esm.js +0 -21
- package/eds-icon-more.entry.esm.js +0 -21
- package/eds-icon-paper.entry.esm.js +0 -21
- package/eds-icon-plus.entry.esm.js +0 -21
- package/eds-icon-portal.entry.esm.js +0 -21
- package/eds-icon-private.entry.esm.js +0 -21
- package/eds-icon-public.entry.esm.js +0 -21
- package/eds-icon-search.entry.esm.js +0 -21
- package/eds-icon-star.entry.esm.js +0 -21
- package/eds-icon-start.entry.esm.js +0 -21
- package/eds-icon-success.entry.esm.js +0 -21
- package/eds-icon-thumbs-down.entry.esm.js +0 -21
- package/eds-icon-thumbs-up.entry.esm.js +0 -21
- package/eds-icon-tutorial.entry.esm.js +0 -21
- package/eds-icon-unknown.entry.esm.js +0 -21
- package/eds-icon-updown.entry.esm.js +0 -21
- package/eds-icon-user.entry.esm.js +0 -21
- package/eds-icon-view.entry.esm.js +0 -21
- package/eds-progress-bar.entry.esm.js +0 -52
- package/eds-social-networks.entry.esm.js +0 -73
- package/eds-trl.entry.esm.js +0 -68
- package/eu-9ddde93a.esm.js +0 -30
- package/index-39c58238.esm.js +0 -58
- package/loader-c9628637.esm.js +0 -30
- package/logo-color-7f1fd803.esm.js +0 -115
- package/logo-color-margins-ff8ce71b.esm.js +0 -118
- package/logo-white-no-bg-f382f86f.esm.js +0 -1021
- package/menu-340ea948.esm.js +0 -11
- package/minus-b30a7c71.esm.js +0 -11
- package/more-4449d549.esm.js +0 -13
- package/paper-8e74ea31.esm.js +0 -15
- package/plus-89c07be2.esm.js +0 -12
- package/portal-d6c8ce56.esm.js +0 -18
- package/private-1c25ff8e.esm.js +0 -25
- package/public-d4d8c585.esm.js +0 -16
- package/search-fbcd79c2.esm.js +0 -12
- package/star-0da9b5e9.esm.js +0 -5
- package/start-65126a4f.esm.js +0 -3
- package/success-443809da.esm.js +0 -18
- package/thumbs-down-a18fd049.esm.js +0 -5
- package/thumbs-up-c19a71bc.esm.js +0 -6
- package/tutotial-150ee1fd.esm.js +0 -27
- package/unknown-ed01a24c.esm.js +0 -22
- package/up-and-down-8b69ca97.esm.js +0 -12
- package/user-71ebdc15.esm.js +0 -16
- package/view-e900f2d4.esm.js +0 -3
|
@@ -1,1201 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index.esm2.js';
|
|
2
|
-
import { s as sendAnalytics, m as matomoOptIn, a as matomoOptOut } from './analytics-d99780e3.esm.js';
|
|
3
|
-
import { c as cva } from './index-39c58238.esm.js';
|
|
4
|
-
import { p as parseData } from './sharedUtils-a550989c.esm.js';
|
|
5
|
-
import { h as hLogoColor } from './logo-color-7f1fd803.esm.js';
|
|
6
|
-
import { h as hLogoBlack, a as hLogoColorWhite, b as hLogoWhite, c as hLogoWhiteNoBg, v as vLogoColor, d as vLogoBlack, e as vLogoColorWhite, f as vLogoWhite, g as vLogoWhiteNoBg } from './logo-white-no-bg-f382f86f.esm.js';
|
|
7
|
-
import 'react';
|
|
8
|
-
import 'react/jsx-runtime';
|
|
9
|
-
import 'react-dom';
|
|
10
|
-
|
|
11
|
-
const edsAccordionCss="blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.min-h-56{min-height:3.5rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.break-words{overflow-wrap:break-word}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.relative{position:relative}.absolute{position:absolute}.inset-x-16{left:1rem;right:1rem}.top-16{top:1rem}.pr-32{padding-right:2rem}.pr-36{padding-right:2.25rem}.pr-40{padding-right:2.5rem}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-md{border-radius:12px}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.text-light{color:var(--grey-700)}.z-1{z-index:1}.z-10{z-index:10}.effect-height{transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:height}.h-0{height:0rem}.h-auto{height:auto}.pt-4{padding-top:0.25rem}.overflow-hidden{overflow:hidden}.grid{display:grid}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-16{padding:1rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.text-left{text-align:left}.text-center{text-align:center}";const EdsAccordionStyle0=edsAccordionCss;const EdsAccordion=class{constructor(hostRef){registerInstance(this,hostRef);this.accordion=createEvent(this,"accordion",7);/**
|
|
12
|
-
* Handles the click event on the accordion header to toggle expansion.
|
|
13
|
-
* Toggles the `isExpanded` state and emits the `accordion` event.
|
|
14
|
-
*/this.handleClick=()=>{var _a;this.isExpanded=!this.isExpanded;this.accordion.emit(this.isExpanded);this.setPanelHeight();sendAnalytics({category:'ui-component',parentContext:null,tag:this.el.tagName.toLowerCase(),name:((_a=this.heading)===null||_a===void 0?void 0:_a.toLowerCase())||'',action:this.isExpanded?'expanded':'collapsed'});};/**
|
|
15
|
-
* Calculates and sets the panel height based on the content height
|
|
16
|
-
* and adjusts based on the `shortContent` and `isExpanded` states.
|
|
17
|
-
*/this.setPanelHeight=()=>{if(this.childContentRef){this.shortContent=this.wrapperRef.scrollWidth>830&&!this.description?this.childContentRef.scrollHeight<=80:this.childContentRef.scrollHeight<=20;this.panelHeight=this.isExpanded&&!this.shortContent?this.childContentRef.scrollHeight:0;}if(this.headerRef){this.headerHeight=this.headerRef.scrollHeight-30;}};this.heading=undefined;this.description=undefined;this.switchBg=true;this.expanded=false;this.clampText=true;this.buttonIntent='tertiary';this.isExpanded=this.expanded;this.panelHeight=0;this.shortContent=false;this.headerHeight=0;}/**
|
|
18
|
-
* Lifecycle method that sets up the initial panel height and adds a resize event listener
|
|
19
|
-
* to recalculate height on window resize.
|
|
20
|
-
*/componentDidLoad(){this.setPanelHeight();window.addEventListener('resize',this.setPanelHeight);}/**
|
|
21
|
-
* Lifecycle method that cleans up the resize event listener when the component is removed.
|
|
22
|
-
*/disconnectedCallback(){window.removeEventListener('resize',this.setPanelHeight);}/**
|
|
23
|
-
* Renders the accordion structure, including header, content, description, and any slotted content.
|
|
24
|
-
* Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
|
|
25
|
-
*/render(){return h("div",{key:'095474500f7c60f20e4d737188001d2f3084dbcc',ref:el=>this.wrapperRef=el,class:`flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16
|
|
26
|
-
${this.switchBg&&this.isExpanded?'bg-inverse':'bg-default'}
|
|
27
|
-
${this.switchBg?'hover:bg-inverse':''}
|
|
28
|
-
${this.description?'min-h-56':''}`},h("h3",{key:'f090fbe3632df8302046f1178e82b8affc4cc821',ref:el=>this.headerRef=el,class:"mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40"},this.heading),h("div",{key:'0a30ab8c27cadbb342fc57f6393111c84f10a664',class:"ml-auto"},h("eds-button",{key:'01f4658df8181b63b71a2e0d2a67e8f8b58efbb7',id:"toggleAccordion",intent:this.buttonIntent,"aria-expanded":this.isExpanded||this.shortContent,"aria-label":"Toggle accordion","aria-controls":"accordionSection",class:`effect-color flex w-full items-center justify-between rounded-md`,onClick:this.handleClick,icon:"chevron-down"})),h("div",{key:'9f3b5a0e425c2dffe3b6fe40fa33b020d64256d8',class:`w-full`,style:Number.isFinite(this.headerHeight)?{marginTop:`${this.headerHeight}px`}:{}},this.description?h("span",{class:`text-light ${!this.isExpanded&&this.clampText?'line-clamp-1':''}`},this.description):null,h("section",{key:'414735d7d982de76d8a1b8db24aa9a569eba37c7',id:"accordionSection","aria-labelledby":"accordionHeader","aria-hidden":!this.isExpanded,class:`z-1 effect-height relative h-0 w-full ${!this.isExpanded?'overflow-hidden':''}`,style:{height:this.isExpanded?'auto':'0'}},h("div",{key:'11097a0646b18f728af494c14aa4cc0e5335defe',ref:el=>this.childContentRef=el,class:`accordion-content effect-color pt-4`,"aria-hidden":!this.isExpanded},h("span",{key:'88414c40490aa77166d23868f16556b9356279a7',class:`${!this.isExpanded&&this.clampText?'line-clamp-2':''}`},h("slot",{key:'8070a7676ca8fba065f813852a2e0cf4146f3374'}))))));}get el(){return getElement(this);}};EdsAccordion.style=EdsAccordionStyle0;const edsAlertCss="*,\n::before,\n::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: currentColor;\n}\n\np {\n margin: 0;\n}\n\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1);\n }\n\n &::after {\n content: '';\n }\n}\n\n.flex {\n display: flex;\n}\n\n.w-full {\n width: 100%;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-x-12 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n}\n\n.space-y-12> :not([hidden])~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n\n.rounded-lg {\n border-radius: 16px;\n}\n\n.bg-dark {\n background-color: var(--grey-300);\n}\n\n.bg-error {\n background-color: var(--red-200);\n}\n\n.bg-success {\n background-color: var(--green-200);\n}\n\n.bg-warning {\n background-color: var(--yellow-200);\n}\n\n.p-16 {\n padding: 1rem;\n}\n\n.p-20 {\n padding: 1.25rem;\n}\n\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.px-20 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-12 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.py-20 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.pr-12 {\n padding-right: 0.75rem;\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n[class*=underline-] {\n text-decoration-line: underline;\n}\n\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n\n.after\\:border-softest::after {\n border-color: rgba(0, 0, 0, .05);\n}";const EdsAlertStyle0=edsAlertCss;const alertStyles=cva(['w-full bg-dark'],{variants:{intent:{default:'',warning:'bg-warning',error:'bg-error',success:'bg-success'},brd:{rounded:'rounded-lg border-inside after:border-softest after:rounded-lg',normal:''},direction:{vertical:'space-y-12',horizontal:'flex flex-row items-center justify-between gap-x-12'},withBtn:{false:'',true:''}},compoundVariants:[{direction:'horizontal',withBtn:true,class:'px-20 pr-12 py-12'},{direction:'horizontal',withBtn:false,class:'p-20'},{direction:'vertical',withBtn:true,class:'p-16'},{direction:'vertical',withBtn:false,class:'px-12 py-20'}],defaultVariants:{intent:'default',brd:'rounded',direction:'horizontal'}});const EdsAlert=class{constructor(hostRef){registerInstance(this,hostRef);this.edsalert=createEvent(this,"edsalert",7);this.message=undefined;this.pressableLabel=undefined;this.pressableUrl=undefined;this.direction='horizontal';this.intent='default';this.brd='rounded';this.withBtn=false;}componentWillLoad(){this.withBtn=Boolean(this.pressableLabel);}componentDidLoad(){// Focus the alert container for immediate screen reader announcement
|
|
29
|
-
/*if (this.intent === 'error' || this.intent === 'warning') {
|
|
30
|
-
this.el.shadowRoot?.querySelector('[role="alert"]')?.setAttribute('tabindex', '-1');
|
|
31
|
-
(this.el.shadowRoot?.querySelector('[role="alert"]') as HTMLElement)?.focus();
|
|
32
|
-
}*/var _a;// Query for the 'eds-link' element inside the shadow root.
|
|
33
|
-
const lnk=(_a=this.el.shadowRoot)===null||_a===void 0?void 0:_a.querySelector('eds-link');if(lnk){this.emitContext(lnk);}}emitContext(linkElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:null}});linkElement.dispatchEvent(event);}handleAction(){// Emit the alertAction event for parent components to handle
|
|
34
|
-
this.edsalert.emit();}render(){const ariaLabel=this.intent!=='default'?`${this.intent} alert`:'alert';return h("div",{key:'d8f0a45ddbaf3d3eb284751e33ddfdce2e13b67a',class:alertStyles({intent:this.intent,brd:this.brd,direction:this.direction,withBtn:this.withBtn}),role:"alert","aria-label":ariaLabel,"aria-live":this.intent==='error'?'assertive':'polite',"aria-labelledby":"alert-message","aria-describedby":this.withBtn?'alert-action':undefined},h("p",{key:'179862c141a2ce05fa9f8562be7e64196baa3922',id:"alert-message",class:"f-ui-01 py-8",innerHTML:this.message}),this.withBtn&&h("div",{key:'3677358bd563a3e2ee1b74309dc4fb6c84ac475f',id:"alert-action"},this.pressableUrl?h("eds-link",{class:"eds-alert-link",label:this.pressableLabel,url:this.pressableUrl,intent:"secondary",external:true}):h("eds-button",{class:"eds-alert-button",label:this.pressableLabel,intent:"secondary",onClick:()=>this.handleAction()})));}get el(){return getElement(this);}};EdsAlert.style=EdsAlertStyle0;const edsAvatarCss="::before,\n::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: currentColor;\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border: 2px solid rgba(0, 0, 0, .1);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-inverse {\n &::after {\n border: 2px solid rgba(255, 255, 255, 0.3);\n }\n\n &::after {\n content: '';\n }\n}\n\n.aspect-1x1 {\n aspect-ratio: 1/1;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.px-4 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.rounded-pill {\n border-radius: 100px;\n}\n\n.rounded-sm {\n border-radius: 8px;\n}\n\n.rounded-xs {\n border-radius: 4px;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.bg-dark {\n background-color: var(--grey-300);\n}\n\n.bg-darker {\n background-color: var(--grey-400);\n}\n\n.bg-stronger {\n background-color: var(--grey-900);\n}\n\n.bg-strongest {\n background-color: var(--black);\n}\n\n.text-accent {\n color: var(--green-500);\n}\n\n.text-default {\n color: var(--black);\n}\n\n.\\!no-underline {\n text-decoration-line: none !important;\n}\n\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.w-32 {\n width: 2rem;\n}\n\n.w-44 {\n width: 2.75rem;\n}\n\n.w-\\[54px\\] {\n width: 54px;\n}\n\n.bg-gradient-01-top {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n}\n\n.bg-gradient-01-bottom {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n}\n\n.bg-gradient-02-top {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n}\n\n.bg-gradient-02-bottom {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n}\n\n.bg-gradient-03-top {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n}\n\n.bg-gradient-03-bottom {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n}\n\n.bg-gradient-04-top {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n}\n\n.bg-gradient-04-bottom {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n}";const EdsAvatarStyle0=edsAvatarCss;const EdsAvatar=class{constructor(hostRef){registerInstance(this,hostRef);this.firstName='User';this.lastName='Avatar';this.picture=undefined;this.initials=undefined;this.color='grey';}/**
|
|
35
|
-
* Flag to render the avatar with rounded (pill) shape if `true`.
|
|
36
|
-
*///@Prop() rounded: boolean = false;
|
|
37
|
-
/**
|
|
38
|
-
* Determines if the initials should use a stronger (larger) font style.
|
|
39
|
-
*///@Prop() initialsStrong: boolean = false;
|
|
40
|
-
/**
|
|
41
|
-
* Computed initials based on the provided `initials` prop or derived from `firstName` and `lastName`.
|
|
42
|
-
* @returns {string | undefined} Initials for display in the avatar.
|
|
43
|
-
*/get computedInitials(){if(this.initials){return (this.initials.match(/.{1,3}/g)||[])[0]||'';}else if(this.firstName&&this.lastName){return `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`.toUpperCase();}return undefined;}/**
|
|
44
|
-
* Computes the CSS classes for the avatar container based on provided props like `rounded`, `color`, and `picture`.
|
|
45
|
-
* @returns {string} List of CSS classes to apply to the avatar container.
|
|
46
|
-
*/get containerClasses(){return ['border-inside','aspect-1x1','flex','items-center','justify-center','overflow-hidden',this.picture?'':'px-4','w-[54px] rounded-sm',//this.rounded ? 'rounded-full border-inside-pill w-32' : 'w-[54px] rounded-sm',
|
|
47
|
-
this.color?'border-inside-inverse':'',this.picture?'':this.color==='grey'?'bg-dark':'bg-strongest text-accent'].join(' ');}/**
|
|
48
|
-
* Renders the avatar component. Displays either an image using `eds-img` or initials depending on whether `picture` or `computedInitials` is set.
|
|
49
|
-
* @returns {JSX.Element} The rendered avatar component.
|
|
50
|
-
*/render(){return h("div",{key:'7b5bf31c794c9bbddd2976fdd5a273842a75603a',class:this.containerClasses},this.picture?h("eds-img",{src:this.picture,width:54,height:54,sizes:"120px",alt:`${this.firstName} ${this.lastName}`,lazyload:true,withBg:true}):h("abbr",{title:this.computedInitials||`${this.firstName} ${this.lastName}`,class:"!no-underline f-ui-01"},this.computedInitials));}};EdsAvatar.style=EdsAvatarStyle0;const edsBlockBreakCss=".border-softer{border-color:rgba(0, 0, 0, .1)}.border-default{border-color:var(--black)}.my-16{margin-top:1rem;margin-bottom:1rem}.block{display:block}.w-full{width:100%}.border-t-2{border-top-width:2px}";const EdsBlockBreakStyle0=edsBlockBreakCss;const EdsBlockBreak=class{constructor(hostRef){registerInstance(this,hostRef);this.inverse=false;}render(){return h("hr",{key:'dd9b98d66f195135ff2fb1374a56d4c670e43d3e',class:`${this.inverse?'border-default':'border-softer'} my-16 inline-block w-full border-t-2`});}};EdsBlockBreak.style=EdsBlockBreakStyle0;const edsBreadcrumbCss="blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.125rem * var(--tw-space-x-reverse));margin-left:calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))}.px-2{padding-left:0.125rem;padding-right:0.125rem}.w-20{width:1.25rem}.w-28{width:1.75rem}.w-32{width:2rem}.w-44{width:2.75rem}.h-20{height:1.25rem}.h-24{height:1.5rem}.h-28{height:1.75rem}.h-32{height:2rem}@media (min-width: 750px){.md\\:block{display:block}}";const EdsBreadcrumbStyle0=edsBreadcrumbCss;const EdsBreadcrumb=class{constructor(hostRef){registerInstance(this,hostRef);/**
|
|
51
|
-
* Updates the maximum number of visible items and tracks if the screen is small.
|
|
52
|
-
*/this.updateScreenSize=()=>{const width=window.innerWidth;if(width<769){this.maxVisibleItems=3;}else if(width<=1024){this.maxVisibleItems=3;}else if(width<=1280){this.maxVisibleItems=3;}else if(width<=2200){this.maxVisibleItems=4;}else {this.maxVisibleItems=6;}};this.items=[];this.intent='ghost';this.parsedItems=[];this.isSmallScreen=false;this.maxVisibleItems=6;}/**
|
|
53
|
-
* Watches for changes to the `items` prop and parses it.
|
|
54
|
-
*/parseItems(newValue){this.parsedItems=parseData(newValue);}/**
|
|
55
|
-
* Lifecycle method that runs when the component is about to be loaded.
|
|
56
|
-
* It parses the initial `items` prop value.
|
|
57
|
-
*/componentWillLoad(){this.parseItems(this.items);this.updateScreenSize();window.addEventListener('resize',this.updateScreenSize);}disconnectedCallback(){window.removeEventListener('resize',this.updateScreenSize);}/**
|
|
58
|
-
* Lifecycle method that runs when the component has fully loaded.
|
|
59
|
-
* It emits a custom event for each `eds-link` element contained within the breadcrumb.
|
|
60
|
-
*/componentDidLoad(){var _a;const links=(_a=this.el.shadowRoot)===null||_a===void 0?void 0:_a.querySelectorAll('eds-link');links===null||links===void 0?void 0:links.forEach(link=>{this.emitContext(link);});}/**
|
|
61
|
-
* Emits a custom event called `parentContext` for a given link element.
|
|
62
|
-
* This event provides context information about the breadcrumb component.
|
|
63
|
-
*
|
|
64
|
-
* @param linkElement - The link element to which the event will be dispatched.
|
|
65
|
-
*/emitContext(linkElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:null}});linkElement.dispatchEvent(event);}/**
|
|
66
|
-
* Returns breadcrumb items with potential truncation if there are too many.
|
|
67
|
-
* It inserts an ellipsis item where necessary.
|
|
68
|
-
*/getTruncatedItems(){const totalItems=this.parsedItems.length;const ellipsis={label:'...',url:'',isHidden:true};if(totalItems>this.maxVisibleItems){const firstItem=this.parsedItems[0];const lastItems=this.parsedItems.slice(-2);if(this.maxVisibleItems===3){return [firstItem,ellipsis,...lastItems];}else if(this.maxVisibleItems===4){const middleItem=this.parsedItems[Math.floor(totalItems/2)];return [firstItem,middleItem,ellipsis,...lastItems];}}return this.parsedItems;}/**
|
|
69
|
-
* Helper to determine the display label and full label.
|
|
70
|
-
* If the label is longer than 15 characters and the item is not the current (last) item,
|
|
71
|
-
* we display a truncated version but use the full label for aria attributes.
|
|
72
|
-
*/getLabels(item,isCurrent){if(!isCurrent&&item.label.length>15){return {displayLabel:`${item.label.slice(0,15)}...`,fullLabel:item.label};}return {displayLabel:item.label,fullLabel:item.label};}/**
|
|
73
|
-
* Render method for the breadcrumb component.
|
|
74
|
-
* It creates a navigation element with an ordered list of breadcrumb links.
|
|
75
|
-
* The last link is marked as the current page.
|
|
76
|
-
*/render(){const itemsToRender=this.getTruncatedItems();return h("nav",{key:'4894fb9e6b37ef84880a62f4dcd3289dcb9cab38',"aria-label":"Breadcrumb"},h("ol",{key:'d69405fcee024465d645d9cdbb17189998a94b95',class:"flex items-center space-x-2"},itemsToRender.map((item,index)=>{const isLast=index===itemsToRender.length-1;return h("li",{class:"flex items-center"},!item.isHidden?(()=>{const{fullLabel}=this.getLabels(item,isLast);const linkIntent=isLast?this.intent==='strong'?'weak':this.intent==='weak'?'strong':this.intent:this.intent;return h("eds-link",Object.assign({label:fullLabel,url:item.url,intent:linkIntent,disabled:isLast,current:isLast,"aria-label":fullLabel,size:"small","icon-small":"false"},isLast?{'aria-current':'page'}:{}));})():h("eds-link",{label:"...",url:"#",intent:"strong",current:false,"aria-label":"...",size:"small","icon-small":"false",icon:"chevron-right"}),!isLast&&!item.isHidden&&h("eds-icon-wrapper",{icon:"chevron-right",class:"w-20 h-20"}));})));}get el(){return getElement(this);}static get watchers(){return {"items":["parseItems"]};}};EdsBreadcrumb.style=EdsBreadcrumbStyle0;const edsButtonCss="*,\n::before,\n::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: currentColor;\n}\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\n 1. Change the font styles in all browsers.\n 2. Remove the margin in Firefox and Safari.\n 3. Remove default padding in all browsers.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n font-size: 100%;\n font-weight: inherit;\n line-height: inherit;\n letter-spacing: inherit;\n color: inherit;\n margin: 0;\n padding: 0;\n}\n\n/*\n Remove the inheritance of text transform in Edge and Firefox.\n */\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n 1. Correct the inability to style clickable types in iOS and Safari.\n 2. Remove default button styles.\n */\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n -webkit-appearance: button;\n /* 1 */\n background-color: transparent;\n /* 2 */\n background-image: none;\n /* 2 */\n}\n\np {\n margin: 0;\n}\n\n/*\n Set the default cursor for buttons.\n */\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\n Make sure disabled buttons don't get the pointer cursor.\n */\n:disabled {\n cursor: default;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n\n.f-body-01 {\n font-family: var(--f-body-01-fontFamily);\n font-weight: var(--f-body-01-fontWeight);\n font-size: var(--f-body-01-fontSize);\n line-height: var(--f-body-01-lineHeight);\n letter-spacing: var(--f-body-01-letterSpacing);\n}\n\n.f-body-02 {\n font-family: var(--f-body-02-fontFamily);\n font-weight: var(--f-body-02-fontWeight);\n font-size: var(--f-body-02-fontSize);\n line-height: var(--f-body-02-lineHeight);\n letter-spacing: var(--f-body-02-letterSpacing);\n}\n\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.f-ui-02 {\n font-family: var(--f-ui-02-fontFamily);\n font-weight: var(--f-ui-02-fontWeight);\n font-size: var(--f-ui-02-fontSize);\n line-height: var(--f-ui-02-lineHeight);\n letter-spacing: var(--f-ui-02-letterSpacing);\n}\n\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-inverse {\n &::after {\n border-color: rgba(255, 255, 255, 0.3);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n\n &::after {\n content: '';\n }\n}\n\n.loader {\n box-sizing: border-box;\n display: inline-block;\n height: 1rem;\n width: 1rem;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.loader {\n animation: spin 1s linear infinite;\n border-radius: 9999px;\n border: 3px solid rgba(0, 0, 0, .3);\n border-bottom-color: #000;\n}\n\n/** region TRANSITIONS */\n.effect-color {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.effect-focus {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n\n.effect-focus:focus-visible {\n outline-style: solid;\n}\n\n.effect-focus-within {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n\n.effect-focus-within:focus-within {\n outline-style: solid;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.pointer-events-none {\n pointer-events: none;\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.sticky {\n position: sticky;\n}\n\n.inset-0 {\n inset: 0rem;\n}\n\n.inset-x-16 {\n left: 1rem;\n right: 1rem;\n}\n\n.-top-8 {\n top: -0.5rem;\n}\n\n.left-0 {\n left: 0rem;\n}\n\n.left-1\\/2 {\n left: 50%;\n}\n\n.left-4 {\n left: 0.25rem;\n}\n\n.left-\\[4px\\] {\n left: 4px;\n}\n\n.right-0 {\n right: 0rem;\n}\n\n.right-4 {\n right: 0.25rem;\n}\n\n.right-8 {\n right: 0.5rem;\n}\n\n.right-\\[6px\\] {\n right: 6px;\n}\n\n.top-0 {\n top: 0rem;\n}\n\n.top-1\\/2 {\n top: 50%;\n}\n\n.m-0 {\n margin: 0rem;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.-ml-16 {\n margin-left: -1rem;\n}\n\n.-mr-16 {\n margin-right: -1rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.ml-4 {\n margin-left: 0.25rem;\n}\n\n.ml-64 {\n margin-left: 4rem;\n}\n\n.ml-8 {\n margin-left: 0.5rem;\n}\n\n.ml-auto {\n margin-left: auto;\n}\n\n.mr-4 {\n margin-right: 0.25rem;\n}\n\n.mr-8 {\n margin-right: 0.5rem;\n}\n\n.mr-auto {\n margin-right: auto;\n}\n\n.block {\n display: block;\n}\n\n.\\!block {\n display: block !important;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.inline {\n display: inline;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.hidden {\n display: none;\n}\n\n.h-20 {\n height: 1.25rem;\n}\n\n.h-24 {\n height: 1.5rem;\n}\n\n.h-36 {\n height: 2.25rem;\n}\n\n.h-44 {\n height: 2.75rem;\n}\n\n.h-auto {\n height: auto;\n}\n\n.h-full {\n height: 100%;\n}\n\n.\\!min-h-20 {\n min-height: 1.25rem !important;\n}\n\n.min-h-screen {\n min-height: 100vh;\n}\n\n.w-20 {\n width: 1.25rem;\n}\n\n.w-full {\n width: 100%;\n}\n\n.flex-none {\n flex: none;\n}\n\n.grow {\n flex-grow: 1;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.resize {\n resize: both;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-row-reverse {\n flex-direction: row-reverse;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.flex-wrap {\n flex-wrap: wrap;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.space-x-2> :not([hidden])~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.overflow-x-auto {\n overflow-x: auto;\n}\n\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n\n.whitespace-nowrap {\n white-space: nowrap;\n}\n\n.break-words {\n overflow-wrap: break-word;\n}\n\n.rounded {\n border-radius: 0.25rem;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.rounded-lg {\n border-radius: 16px;\n}\n\n.rounded-md {\n border-radius: 12px;\n}\n\n.rounded-pill {\n border-radius: 100px;\n}\n\n.rounded-sm {\n border-radius: 8px;\n}\n\n.rounded-xxs {\n border-radius: 2px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-\\[\\#0034CB\\] {\n --tw-border-opacity: 1;\n border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n\n.border-\\[\\#d2d2d2\\] {\n --tw-border-opacity: 1;\n border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n\n.border-softest {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.border-b-softer {\n border-bottom-color: rgba(0, 0, 0, .1);\n}\n\n.\\!bg-accent-dark {\n background-color: var(--green-600) !important;\n}\n\n.\\!bg-darker {\n background-color: var(--grey-400) !important;\n}\n\n.\\!bg-strong-dark {\n background-color: var(--grey-800) !important;\n}\n\n.bg-accent {\n background-color: var(--green-500);\n}\n\n.bg-accent-dark {\n background-color: var(--green-600);\n}\n\n.bg-dark {\n background-color: var(--grey-300);\n}\n\n.bg-darker {\n background-color: var(--grey-400);\n}\n\n.bg-overlay {\n background-color: rgba(0, 0, 0, 0.25);\n}\n\n.bg-strong {\n background-color: var(--grey-700);\n}\n\n.bg-strong-dark {\n background-color: var(--grey-800);\n}\n\n.bg-stronger {\n background-color: var(--grey-900);\n}\n\n.bg-strongest {\n background-color: var(--black);\n}\n\n.p-12 {\n padding: 0.75rem;\n}\n\n.p-6 {\n padding: 0.375rem;\n}\n\n.p-8 {\n padding: 0.5rem;\n}\n\n.\\!px-0 {\n padding-left: 0rem !important;\n padding-right: 0rem !important;\n}\n\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.px-16 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.pl-4 {\n padding-left: 0.25rem;\n}\n\n.pl-8 {\n padding-left: 0.5rem;\n}\n\n.pr-4 {\n padding-right: 0.25rem;\n}\n\n.pr-8 {\n padding-right: 0.5rem;\n}\n\n.\\!text-current {\n color: currentColor !important;\n}\n\n.text-accent {\n color: var(--green-500);\n}\n\n.text-current {\n color: currentColor;\n}\n\n.text-default {\n color: var(--black);\n}\n\n.text-inverse {\n color: var(--white);\n}\n\n.text-lightest {\n color: var(--grey-500);\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-accent {\n --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.underline-offset-4 {\n text-underline-offset: 0.2em;\n}\n\n.\\@container {\n container-type: inline-size;\n}\n\n.after\\:effect-opacity::after {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.even\\:bg-inverse-softer:nth-child(even) {\n background-color: rgba(255, 255, 255, .15);\n}\n\n.invalid\\:text-lightest:invalid {\n color: var(--grey-500);\n}\n\n.focus-within\\:bg-transparent:focus-within {\n background-color: var(--transparent);\n}\n\n.hover\\:bg-accent-dark:hover {\n background-color: var(--green-600);\n}\n\n.hover\\:bg-dark:hover {\n background-color: var(--grey-300);\n}\n\n.hover\\:bg-darker:hover {\n background-color: var(--grey-400);\n}\n\n.hover\\:bg-default:hover {\n background-color: var(--grey-200);\n}\n\n.hover\\:bg-inverse:hover {\n background-color: var(--white);\n}\n\n.hover\\:bg-strong-dark:hover {\n background-color: var(--grey-800);\n}\n\n.hover\\:bg-transparent:hover {\n background-color: var(--transparent);\n}\n\n.hover\\:text-default:hover {\n color: var(--black);\n}\n\n.hover\\:text-lighter:hover {\n color: var(--grey-600);\n}\n\n.hover\\:\\!underline:hover {\n text-decoration-line: underline !important;\n}\n\n.hover\\:no-underline:hover {\n text-decoration-line: none;\n}\n\n.hover\\:shadow-hover:hover {\n --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n\n.disabled\\:bg-dark:disabled {\n background-color: var(--grey-300);\n}\n\n.disabled\\:text-lightest:disabled {\n color: var(--grey-500);\n}\n\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n cursor: not-allowed;\n}\n\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n border-color: var(--transparent) !important;\n}\n\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n background-color: var(--grey-300);\n}\n\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n background-color: var(--transparent);\n}\n\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n color: var(--grey-700);\n}\n\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n color: var(--grey-500);\n}\n\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n text-decoration-line: line-through;\n}\n\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n background-color: var(--grey-400);\n}\n\n.after\\:absolute::after {\n position: absolute;\n}\n\n.after\\:inset-0::after {\n inset: 0rem;\n}\n\n.after\\:inset-x-0::after {\n left: 0rem;\n right: 0rem;\n}\n\n.after\\:bottom-0::after {\n bottom: 0rem;\n}\n\n.after\\:left-16::after {\n left: 1rem;\n}\n\n.after\\:right-16::after {\n right: 1rem;\n}\n\n.after\\:z-10::after {\n z-index: 10;\n}\n\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n\n.after\\:rounded-t-lg::after {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n\n.after\\:border-3::after {\n border-width: 3px;\n}\n\n.after\\:border-b-2::after {\n border-bottom-width: 2px;\n}\n\n.after\\:\\!border-transparent::after {\n border-color: var(--transparent) !important;\n}\n\n.after\\:border-accent::after {\n border-color: var(--green-500);\n}\n\n.after\\:border-softest::after {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.after\\:opacity-0::after {\n opacity: 0;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.hover\\:after\\:\\!border-transparent:hover::after {\n border-color: var(--transparent) !important;\n}\n\n.hover\\:after\\:opacity-100:hover::after {\n opacity: 1;\n}\n\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n opacity: 1;\n}\n\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n border-color: var(--transparent) !important;\n}\n\n.hover\\:before\\:opacity-100:hover::before {\n opacity: 1;\n}";const EdsButtonStyle0=edsButtonCss;const EdsButton=class{constructor(hostRef){registerInstance(this,hostRef);this.button=cva(['relative inline-flex items-center','py-8','effect-focus effect-color','cursor-pointer','aria-disabled:text-lightest aria-disabled:bg-dark aria-disabled:cursor-not-allowed','disabled:text-lightest disabled:bg-dark disabled:cursor-not-allowed'],{variants:{intent:{primary:'bg-accent border-inside hover:bg-accent-dark shadow-accent focus:shadow-none aria-disabled:shadow-none',secondary:'border-inside border-inside-inverse text-inverse bg-strongest hover:bg-strong-dark',tertiary:'border-inside after:border-softest bg-dark hover:bg-darker',ghost:'border-inside hover:bg-darker',ghostInverse:'border-inside text-lightest hover:bg-dark'},loading:{true:'pointer-events-none',false:''},iconSmall:{false:'',true:''},size:{small:'h-36 f-ui-02',large:'h-44 f-ui-01'},iconPos:{left:'flex-row-reverse',right:''},iconOnly:{false:'',true:''},pill:{true:'rounded-full border-inside-pill',false:'rounded-sm'}},compoundVariants:[{size:'small',iconOnly:true,class:'p-8'},{size:'large',iconOnly:true,class:'p-12'},{size:'small',iconOnly:false,class:'px-12'},{size:'large',iconOnly:false,class:'px-16'},{iconSmall:true,iconPos:'left',class:'pl-4',iconOnly:false},{iconSmall:true,iconPos:'right',class:'pr-4',iconOnly:false},{iconSmall:true,iconPos:'left',size:'large',class:'pl-8',iconOnly:false},{iconSmall:true,iconPos:'right',size:'large',class:'pr-8',iconOnly:false}],defaultVariants:{intent:'secondary',loading:false,iconSmall:false,iconPos:'right',iconOnly:false,pill:false,size:'small'}});this.parentContext=null;// Accepts the entire event detail or null
|
|
77
|
-
this.label=undefined;this.ariaLabel='Button';this.elementType='button';this.intent='secondary';this.loading=false;this.disabled=false;this.pill=false;this.icon=undefined;this.size='small';this.iconPos='right';this.iconSmall=false;this.triggerClick=undefined;}handleParentContext(event){if(event.target!==this.el){// Ignore the event if it's not targeted at this specific instance
|
|
78
|
-
return;}this.parentContext=event.detail;event.stopPropagation();}handleClick(event){var _a,_b;if(this.disabled||this.loading){event.preventDefault();return;}sendAnalytics({category:'ui-component',parentContext:this.parentContext,tag:this.el.tagName.toLowerCase(),name:((_a=this.label)===null||_a===void 0?void 0:_a.toLowerCase())||((_b=this.ariaLabel)===null||_b===void 0?void 0:_b.toLowerCase())||'',action:'click'});// If an onClick prop is provided, call it
|
|
79
|
-
if(typeof this.triggerClick==='function'){this.triggerClick();// Trigger the passed-in function
|
|
80
|
-
}}handleKeyDown(event){if(this.disabled||this.loading){// Fix: check loading too
|
|
81
|
-
return;}if(event.key==='Enter'||this.elementType==='a'&&event.key===' '){event.preventDefault();this.handleClick(event);}}render(){const classes=this.button({intent:this.intent,loading:this.loading,iconPos:this.iconPos,size:this.size,pill:this.pill,iconOnly:!this.label,iconSmall:this.iconSmall});const ElementType=this.elementType;const isInteractive=!this.disabled&&!this.loading;return h(Host,{key:'25a7b4ffda3df65e91c77a18becd45bc40973f3c'},h(ElementType,{key:'0f00d82a37f3189b862015eb2d915f2364b6d75d',tabindex:isInteractive?'0':'-1',"aria-label":this.label?undefined:this.ariaLabel,"aria-disabled":this.disabled||this.loading?'true':undefined,"aria-busy":this.loading?'true':undefined,disabled:this.elementType==='button'?this.disabled||this.loading:undefined,role:this.elementType==='a'?'button':undefined,class:`${classes||''}`,onClick:event=>this.handleClick(event),onKeyDown:event=>this.handleKeyDown(event)},this.label&&h("span",{key:'6e45dfefb4805eef0574f7462becca6cde85dbc0',class:this.loading?'opacity-0':'',"aria-hidden":this.loading?'true':undefined},this.label),this.loading&&h("span",{key:'9909c70db39a039b883854caff816d25f132b866',class:"absolute inset-0 flex items-center justify-center","aria-hidden":"true"},h("span",{key:'367cd65a13f81cbcb12d93855dc091a4309566bb',class:"loader",style:{border:`3px solid ${this.intent==='secondary'?'rgba(255, 255, 255, .3)':'rgba(0, 0, 0, .3)'}`,borderBottomColor:this.intent==='secondary'?'#fff':'#000'}})),this.icon?h("eds-icon-wrapper",{class:`
|
|
82
|
-
flex inline-flex items-center justify-center
|
|
83
|
-
${this.size==='large'?'h-24 w-24':'h-20 w-20'}
|
|
84
|
-
`,icon:this.icon,"aria-hidden":"true"}):null));}static get delegatesFocus(){return true;}get el(){return getElement(this);}};EdsButton.style=EdsButtonStyle0;var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};var prism={exports:{}};(function(module){/* **********************************************
|
|
85
|
-
Begin prism-core.js
|
|
86
|
-
********************************************** *//// <reference lib="WebWorker"/>
|
|
87
|
-
var _self=typeof window!=='undefined'?window// if in browser
|
|
88
|
-
:typeof WorkerGlobalScope!=='undefined'&&self instanceof WorkerGlobalScope?self// if in worker
|
|
89
|
-
:{}// if in node js
|
|
90
|
-
;/**
|
|
91
|
-
* Prism: Lightweight, robust, elegant syntax highlighting
|
|
92
|
-
*
|
|
93
|
-
* @license MIT <https://opensource.org/licenses/MIT>
|
|
94
|
-
* @author Lea Verou <https://lea.verou.me>
|
|
95
|
-
* @namespace
|
|
96
|
-
* @public
|
|
97
|
-
*/var Prism=function(_self){// Private helper vars
|
|
98
|
-
var lang=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i;var uniqueId=0;// The grammar object for plaintext
|
|
99
|
-
var plainTextGrammar={};var _={/**
|
|
100
|
-
* By default, Prism will attempt to highlight all code elements (by calling {@link Prism.highlightAll}) on the
|
|
101
|
-
* current page after the page finished loading. This might be a problem if e.g. you wanted to asynchronously load
|
|
102
|
-
* additional languages or plugins yourself.
|
|
103
|
-
*
|
|
104
|
-
* By setting this value to `true`, Prism will not automatically highlight all code elements on the page.
|
|
105
|
-
*
|
|
106
|
-
* You obviously have to change this value before the automatic highlighting started. To do this, you can add an
|
|
107
|
-
* empty Prism object into the global scope before loading the Prism script like this:
|
|
108
|
-
*
|
|
109
|
-
* ```js
|
|
110
|
-
* window.Prism = window.Prism || {};
|
|
111
|
-
* Prism.manual = true;
|
|
112
|
-
* // add a new <script> to load Prism's script
|
|
113
|
-
* ```
|
|
114
|
-
*
|
|
115
|
-
* @default false
|
|
116
|
-
* @type {boolean}
|
|
117
|
-
* @memberof Prism
|
|
118
|
-
* @public
|
|
119
|
-
*/manual:_self.Prism&&_self.Prism.manual,/**
|
|
120
|
-
* By default, if Prism is in a web worker, it assumes that it is in a worker it created itself, so it uses
|
|
121
|
-
* `addEventListener` to communicate with its parent instance. However, if you're using Prism manually in your
|
|
122
|
-
* own worker, you don't want it to do this.
|
|
123
|
-
*
|
|
124
|
-
* By setting this value to `true`, Prism will not add its own listeners to the worker.
|
|
125
|
-
*
|
|
126
|
-
* You obviously have to change this value before Prism executes. To do this, you can add an
|
|
127
|
-
* empty Prism object into the global scope before loading the Prism script like this:
|
|
128
|
-
*
|
|
129
|
-
* ```js
|
|
130
|
-
* window.Prism = window.Prism || {};
|
|
131
|
-
* Prism.disableWorkerMessageHandler = true;
|
|
132
|
-
* // Load Prism's script
|
|
133
|
-
* ```
|
|
134
|
-
*
|
|
135
|
-
* @default false
|
|
136
|
-
* @type {boolean}
|
|
137
|
-
* @memberof Prism
|
|
138
|
-
* @public
|
|
139
|
-
*/disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,/**
|
|
140
|
-
* A namespace for utility methods.
|
|
141
|
-
*
|
|
142
|
-
* All function in this namespace that are not explicitly marked as _public_ are for __internal use only__ and may
|
|
143
|
-
* change or disappear at any time.
|
|
144
|
-
*
|
|
145
|
-
* @namespace
|
|
146
|
-
* @memberof Prism
|
|
147
|
-
*/util:{encode:function encode(tokens){if(tokens instanceof Token){return new Token(tokens.type,encode(tokens.content),tokens.alias);}else if(Array.isArray(tokens)){return tokens.map(encode);}else {return tokens.replace(/&/g,'&').replace(/</g,'<').replace(/\u00a0/g,' ');}},/**
|
|
148
|
-
* Returns the name of the type of the given value.
|
|
149
|
-
*
|
|
150
|
-
* @param {any} o
|
|
151
|
-
* @returns {string}
|
|
152
|
-
* @example
|
|
153
|
-
* type(null) === 'Null'
|
|
154
|
-
* type(undefined) === 'Undefined'
|
|
155
|
-
* type(123) === 'Number'
|
|
156
|
-
* type('foo') === 'String'
|
|
157
|
-
* type(true) === 'Boolean'
|
|
158
|
-
* type([1, 2]) === 'Array'
|
|
159
|
-
* type({}) === 'Object'
|
|
160
|
-
* type(String) === 'Function'
|
|
161
|
-
* type(/abc+/) === 'RegExp'
|
|
162
|
-
*/type:function(o){return Object.prototype.toString.call(o).slice(8,-1);},/**
|
|
163
|
-
* Returns a unique number for the given object. Later calls will still return the same number.
|
|
164
|
-
*
|
|
165
|
-
* @param {Object} obj
|
|
166
|
-
* @returns {number}
|
|
167
|
-
*/objId:function(obj){if(!obj['__id']){Object.defineProperty(obj,'__id',{value:++uniqueId});}return obj['__id'];},/**
|
|
168
|
-
* Creates a deep clone of the given object.
|
|
169
|
-
*
|
|
170
|
-
* The main intended use of this function is to clone language definitions.
|
|
171
|
-
*
|
|
172
|
-
* @param {T} o
|
|
173
|
-
* @param {Record<number, any>} [visited]
|
|
174
|
-
* @returns {T}
|
|
175
|
-
* @template T
|
|
176
|
-
*/clone:function deepClone(o,visited){visited=visited||{};var clone;var id;switch(_.util.type(o)){case'Object':id=_.util.objId(o);if(visited[id]){return visited[id];}clone=/** @type {Record<string, any>} */{};visited[id]=clone;for(var key in o){if(o.hasOwnProperty(key)){clone[key]=deepClone(o[key],visited);}}return/** @type {any} */clone;case'Array':id=_.util.objId(o);if(visited[id]){return visited[id];}clone=[];visited[id]=clone;(/** @type {Array} *//** @type {any} */o).forEach(function(v,i){clone[i]=deepClone(v,visited);});return/** @type {any} */clone;default:return o;}},/**
|
|
177
|
-
* Returns the Prism language of the given element set by a `language-xxxx` or `lang-xxxx` class.
|
|
178
|
-
*
|
|
179
|
-
* If no language is set for the element or the element is `null` or `undefined`, `none` will be returned.
|
|
180
|
-
*
|
|
181
|
-
* @param {Element} element
|
|
182
|
-
* @returns {string}
|
|
183
|
-
*/getLanguage:function(element){while(element){var m=lang.exec(element.className);if(m){return m[1].toLowerCase();}element=element.parentElement;}return 'none';},/**
|
|
184
|
-
* Sets the Prism `language-xxxx` class of the given element.
|
|
185
|
-
*
|
|
186
|
-
* @param {Element} element
|
|
187
|
-
* @param {string} language
|
|
188
|
-
* @returns {void}
|
|
189
|
-
*/setLanguage:function(element,language){// remove all `language-xxxx` classes
|
|
190
|
-
// (this might leave behind a leading space)
|
|
191
|
-
element.className=element.className.replace(RegExp(lang,'gi'),'');// add the new `language-xxxx` class
|
|
192
|
-
// (using `classList` will automatically clean up spaces for us)
|
|
193
|
-
element.classList.add('language-'+language);},/**
|
|
194
|
-
* Returns the script element that is currently executing.
|
|
195
|
-
*
|
|
196
|
-
* This does __not__ work for line script element.
|
|
197
|
-
*
|
|
198
|
-
* @returns {HTMLScriptElement | null}
|
|
199
|
-
*/currentScript:function(){if(typeof document==='undefined'){return null;}if('currentScript'in document&&1<2/* hack to trip TS' flow analysis */){return/** @type {any} */document.currentScript;}// IE11 workaround
|
|
200
|
-
// we'll get the src of the current script by parsing IE11's error stack trace
|
|
201
|
-
// this will not work for inline scripts
|
|
202
|
-
try{throw new Error();}catch(err){// Get file src url from stack. Specifically works with the format of stack traces in IE.
|
|
203
|
-
// A stack will look like this:
|
|
204
|
-
//
|
|
205
|
-
// Error
|
|
206
|
-
// at _.util.currentScript (http://localhost/components/prism-core.js:119:5)
|
|
207
|
-
// at Global code (http://localhost/components/prism-core.js:606:1)
|
|
208
|
-
var src=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(err.stack)||[])[1];if(src){var scripts=document.getElementsByTagName('script');for(var i in scripts){if(scripts[i].src==src){return scripts[i];}}}return null;}},/**
|
|
209
|
-
* Returns whether a given class is active for `element`.
|
|
210
|
-
*
|
|
211
|
-
* The class can be activated if `element` or one of its ancestors has the given class and it can be deactivated
|
|
212
|
-
* if `element` or one of its ancestors has the negated version of the given class. The _negated version_ of the
|
|
213
|
-
* given class is just the given class with a `no-` prefix.
|
|
214
|
-
*
|
|
215
|
-
* Whether the class is active is determined by the closest ancestor of `element` (where `element` itself is
|
|
216
|
-
* closest ancestor) that has the given class or the negated version of it. If neither `element` nor any of its
|
|
217
|
-
* ancestors have the given class or the negated version of it, then the default activation will be returned.
|
|
218
|
-
*
|
|
219
|
-
* In the paradoxical situation where the closest ancestor contains __both__ the given class and the negated
|
|
220
|
-
* version of it, the class is considered active.
|
|
221
|
-
*
|
|
222
|
-
* @param {Element} element
|
|
223
|
-
* @param {string} className
|
|
224
|
-
* @param {boolean} [defaultActivation=false]
|
|
225
|
-
* @returns {boolean}
|
|
226
|
-
*/isActive:function(element,className,defaultActivation){var no='no-'+className;while(element){var classList=element.classList;if(classList.contains(className)){return true;}if(classList.contains(no)){return false;}element=element.parentElement;}return !!defaultActivation;}},/**
|
|
227
|
-
* This namespace contains all currently loaded languages and the some helper functions to create and modify languages.
|
|
228
|
-
*
|
|
229
|
-
* @namespace
|
|
230
|
-
* @memberof Prism
|
|
231
|
-
* @public
|
|
232
|
-
*/languages:{/**
|
|
233
|
-
* The grammar for plain, unformatted text.
|
|
234
|
-
*/plain:plainTextGrammar,plaintext:plainTextGrammar,text:plainTextGrammar,txt:plainTextGrammar,/**
|
|
235
|
-
* Creates a deep copy of the language with the given id and appends the given tokens.
|
|
236
|
-
*
|
|
237
|
-
* If a token in `redef` also appears in the copied language, then the existing token in the copied language
|
|
238
|
-
* will be overwritten at its original position.
|
|
239
|
-
*
|
|
240
|
-
* ## Best practices
|
|
241
|
-
*
|
|
242
|
-
* Since the position of overwriting tokens (token in `redef` that overwrite tokens in the copied language)
|
|
243
|
-
* doesn't matter, they can technically be in any order. However, this can be confusing to others that trying to
|
|
244
|
-
* understand the language definition because, normally, the order of tokens matters in Prism grammars.
|
|
245
|
-
*
|
|
246
|
-
* Therefore, it is encouraged to order overwriting tokens according to the positions of the overwritten tokens.
|
|
247
|
-
* Furthermore, all non-overwriting tokens should be placed after the overwriting ones.
|
|
248
|
-
*
|
|
249
|
-
* @param {string} id The id of the language to extend. This has to be a key in `Prism.languages`.
|
|
250
|
-
* @param {Grammar} redef The new tokens to append.
|
|
251
|
-
* @returns {Grammar} The new language created.
|
|
252
|
-
* @public
|
|
253
|
-
* @example
|
|
254
|
-
* Prism.languages['css-with-colors'] = Prism.languages.extend('css', {
|
|
255
|
-
* // Prism.languages.css already has a 'comment' token, so this token will overwrite CSS' 'comment' token
|
|
256
|
-
* // at its original position
|
|
257
|
-
* 'comment': { ... },
|
|
258
|
-
* // CSS doesn't have a 'color' token, so this token will be appended
|
|
259
|
-
* 'color': /\b(?:red|green|blue)\b/
|
|
260
|
-
* });
|
|
261
|
-
*/extend:function(id,redef){var lang=_.util.clone(_.languages[id]);for(var key in redef){lang[key]=redef[key];}return lang;},/**
|
|
262
|
-
* Inserts tokens _before_ another token in a language definition or any other grammar.
|
|
263
|
-
*
|
|
264
|
-
* ## Usage
|
|
265
|
-
*
|
|
266
|
-
* This helper method makes it easy to modify existing languages. For example, the CSS language definition
|
|
267
|
-
* not only defines CSS highlighting for CSS documents, but also needs to define highlighting for CSS embedded
|
|
268
|
-
* in HTML through `<style>` elements. To do this, it needs to modify `Prism.languages.markup` and add the
|
|
269
|
-
* appropriate tokens. However, `Prism.languages.markup` is a regular JavaScript object literal, so if you do
|
|
270
|
-
* this:
|
|
271
|
-
*
|
|
272
|
-
* ```js
|
|
273
|
-
* Prism.languages.markup.style = {
|
|
274
|
-
* // token
|
|
275
|
-
* };
|
|
276
|
-
* ```
|
|
277
|
-
*
|
|
278
|
-
* then the `style` token will be added (and processed) at the end. `insertBefore` allows you to insert tokens
|
|
279
|
-
* before existing tokens. For the CSS example above, you would use it like this:
|
|
280
|
-
*
|
|
281
|
-
* ```js
|
|
282
|
-
* Prism.languages.insertBefore('markup', 'cdata', {
|
|
283
|
-
* 'style': {
|
|
284
|
-
* // token
|
|
285
|
-
* }
|
|
286
|
-
* });
|
|
287
|
-
* ```
|
|
288
|
-
*
|
|
289
|
-
* ## Special cases
|
|
290
|
-
*
|
|
291
|
-
* If the grammars of `inside` and `insert` have tokens with the same name, the tokens in `inside`'s grammar
|
|
292
|
-
* will be ignored.
|
|
293
|
-
*
|
|
294
|
-
* This behavior can be used to insert tokens after `before`:
|
|
295
|
-
*
|
|
296
|
-
* ```js
|
|
297
|
-
* Prism.languages.insertBefore('markup', 'comment', {
|
|
298
|
-
* 'comment': Prism.languages.markup.comment,
|
|
299
|
-
* // tokens after 'comment'
|
|
300
|
-
* });
|
|
301
|
-
* ```
|
|
302
|
-
*
|
|
303
|
-
* ## Limitations
|
|
304
|
-
*
|
|
305
|
-
* The main problem `insertBefore` has to solve is iteration order. Since ES2015, the iteration order for object
|
|
306
|
-
* properties is guaranteed to be the insertion order (except for integer keys) but some browsers behave
|
|
307
|
-
* differently when keys are deleted and re-inserted. So `insertBefore` can't be implemented by temporarily
|
|
308
|
-
* deleting properties which is necessary to insert at arbitrary positions.
|
|
309
|
-
*
|
|
310
|
-
* To solve this problem, `insertBefore` doesn't actually insert the given tokens into the target object.
|
|
311
|
-
* Instead, it will create a new object and replace all references to the target object with the new one. This
|
|
312
|
-
* can be done without temporarily deleting properties, so the iteration order is well-defined.
|
|
313
|
-
*
|
|
314
|
-
* However, only references that can be reached from `Prism.languages` or `insert` will be replaced. I.e. if
|
|
315
|
-
* you hold the target object in a variable, then the value of the variable will not change.
|
|
316
|
-
*
|
|
317
|
-
* ```js
|
|
318
|
-
* var oldMarkup = Prism.languages.markup;
|
|
319
|
-
* var newMarkup = Prism.languages.insertBefore('markup', 'comment', { ... });
|
|
320
|
-
*
|
|
321
|
-
* assert(oldMarkup !== Prism.languages.markup);
|
|
322
|
-
* assert(newMarkup === Prism.languages.markup);
|
|
323
|
-
* ```
|
|
324
|
-
*
|
|
325
|
-
* @param {string} inside The property of `root` (e.g. a language id in `Prism.languages`) that contains the
|
|
326
|
-
* object to be modified.
|
|
327
|
-
* @param {string} before The key to insert before.
|
|
328
|
-
* @param {Grammar} insert An object containing the key-value pairs to be inserted.
|
|
329
|
-
* @param {Object<string, any>} [root] The object containing `inside`, i.e. the object that contains the
|
|
330
|
-
* object to be modified.
|
|
331
|
-
*
|
|
332
|
-
* Defaults to `Prism.languages`.
|
|
333
|
-
* @returns {Grammar} The new grammar object.
|
|
334
|
-
* @public
|
|
335
|
-
*/insertBefore:function(inside,before,insert,root){root=root||(/** @type {any} */_.languages);var grammar=root[inside];/** @type {Grammar} */var ret={};for(var token in grammar){if(grammar.hasOwnProperty(token)){if(token==before){for(var newToken in insert){if(insert.hasOwnProperty(newToken)){ret[newToken]=insert[newToken];}}}// Do not insert token which also occur in insert. See #1525
|
|
336
|
-
if(!insert.hasOwnProperty(token)){ret[token]=grammar[token];}}}var old=root[inside];root[inside]=ret;// Update references in other language definitions
|
|
337
|
-
_.languages.DFS(_.languages,function(key,value){if(value===old&&key!=inside){this[key]=ret;}});return ret;},// Traverse a language definition with Depth First Search
|
|
338
|
-
DFS:function DFS(o,callback,type,visited){visited=visited||{};var objId=_.util.objId;for(var i in o){if(o.hasOwnProperty(i)){callback.call(o,i,o[i],type||i);var property=o[i];var propertyType=_.util.type(property);if(propertyType==='Object'&&!visited[objId(property)]){visited[objId(property)]=true;DFS(property,callback,null,visited);}else if(propertyType==='Array'&&!visited[objId(property)]){visited[objId(property)]=true;DFS(property,callback,i,visited);}}}}},plugins:{},/**
|
|
339
|
-
* This is the most high-level function in Prism’s API.
|
|
340
|
-
* It fetches all the elements that have a `.language-xxxx` class and then calls {@link Prism.highlightElement} on
|
|
341
|
-
* each one of them.
|
|
342
|
-
*
|
|
343
|
-
* This is equivalent to `Prism.highlightAllUnder(document, async, callback)`.
|
|
344
|
-
*
|
|
345
|
-
* @param {boolean} [async=false] Same as in {@link Prism.highlightAllUnder}.
|
|
346
|
-
* @param {HighlightCallback} [callback] Same as in {@link Prism.highlightAllUnder}.
|
|
347
|
-
* @memberof Prism
|
|
348
|
-
* @public
|
|
349
|
-
*/highlightAll:function(async,callback){_.highlightAllUnder(document,async,callback);},/**
|
|
350
|
-
* Fetches all the descendants of `container` that have a `.language-xxxx` class and then calls
|
|
351
|
-
* {@link Prism.highlightElement} on each one of them.
|
|
352
|
-
*
|
|
353
|
-
* The following hooks will be run:
|
|
354
|
-
* 1. `before-highlightall`
|
|
355
|
-
* 2. `before-all-elements-highlight`
|
|
356
|
-
* 3. All hooks of {@link Prism.highlightElement} for each element.
|
|
357
|
-
*
|
|
358
|
-
* @param {ParentNode} container The root element, whose descendants that have a `.language-xxxx` class will be highlighted.
|
|
359
|
-
* @param {boolean} [async=false] Whether each element is to be highlighted asynchronously using Web Workers.
|
|
360
|
-
* @param {HighlightCallback} [callback] An optional callback to be invoked on each element after its highlighting is done.
|
|
361
|
-
* @memberof Prism
|
|
362
|
-
* @public
|
|
363
|
-
*/highlightAllUnder:function(container,async,callback){var env={callback:callback,container:container,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};_.hooks.run('before-highlightall',env);env.elements=Array.prototype.slice.apply(env.container.querySelectorAll(env.selector));_.hooks.run('before-all-elements-highlight',env);for(var i=0,element;element=env.elements[i++];){_.highlightElement(element,async===true,env.callback);}},/**
|
|
364
|
-
* Highlights the code inside a single element.
|
|
365
|
-
*
|
|
366
|
-
* The following hooks will be run:
|
|
367
|
-
* 1. `before-sanity-check`
|
|
368
|
-
* 2. `before-highlight`
|
|
369
|
-
* 3. All hooks of {@link Prism.highlight}. These hooks will be run by an asynchronous worker if `async` is `true`.
|
|
370
|
-
* 4. `before-insert`
|
|
371
|
-
* 5. `after-highlight`
|
|
372
|
-
* 6. `complete`
|
|
373
|
-
*
|
|
374
|
-
* Some the above hooks will be skipped if the element doesn't contain any text or there is no grammar loaded for
|
|
375
|
-
* the element's language.
|
|
376
|
-
*
|
|
377
|
-
* @param {Element} element The element containing the code.
|
|
378
|
-
* It must have a class of `language-xxxx` to be processed, where `xxxx` is a valid language identifier.
|
|
379
|
-
* @param {boolean} [async=false] Whether the element is to be highlighted asynchronously using Web Workers
|
|
380
|
-
* to improve performance and avoid blocking the UI when highlighting very large chunks of code. This option is
|
|
381
|
-
* [disabled by default](https://prismjs.com/faq.html#why-is-asynchronous-highlighting-disabled-by-default).
|
|
382
|
-
*
|
|
383
|
-
* Note: All language definitions required to highlight the code must be included in the main `prism.js` file for
|
|
384
|
-
* asynchronous highlighting to work. You can build your own bundle on the
|
|
385
|
-
* [Download page](https://prismjs.com/download.html).
|
|
386
|
-
* @param {HighlightCallback} [callback] An optional callback to be invoked after the highlighting is done.
|
|
387
|
-
* Mostly useful when `async` is `true`, since in that case, the highlighting is done asynchronously.
|
|
388
|
-
* @memberof Prism
|
|
389
|
-
* @public
|
|
390
|
-
*/highlightElement:function(element,async,callback){// Find language
|
|
391
|
-
var language=_.util.getLanguage(element);var grammar=_.languages[language];// Set language on the element, if not present
|
|
392
|
-
_.util.setLanguage(element,language);// Set language on the parent, for styling
|
|
393
|
-
var parent=element.parentElement;if(parent&&parent.nodeName.toLowerCase()==='pre'){_.util.setLanguage(parent,language);}var code=element.textContent;var env={element:element,language:language,grammar:grammar,code:code};function insertHighlightedCode(highlightedCode){env.highlightedCode=highlightedCode;_.hooks.run('before-insert',env);env.element.innerHTML=env.highlightedCode;_.hooks.run('after-highlight',env);_.hooks.run('complete',env);callback&&callback.call(env.element);}_.hooks.run('before-sanity-check',env);// plugins may change/add the parent/element
|
|
394
|
-
parent=env.element.parentElement;if(parent&&parent.nodeName.toLowerCase()==='pre'&&!parent.hasAttribute('tabindex')){parent.setAttribute('tabindex','0');}if(!env.code){_.hooks.run('complete',env);callback&&callback.call(env.element);return;}_.hooks.run('before-highlight',env);if(!env.grammar){insertHighlightedCode(_.util.encode(env.code));return;}if(async&&_self.Worker){var worker=new Worker(_.filename);worker.onmessage=function(evt){insertHighlightedCode(evt.data);};worker.postMessage(JSON.stringify({language:env.language,code:env.code,immediateClose:true}));}else {insertHighlightedCode(_.highlight(env.code,env.grammar,env.language));}},/**
|
|
395
|
-
* Low-level function, only use if you know what you’re doing. It accepts a string of text as input
|
|
396
|
-
* and the language definitions to use, and returns a string with the HTML produced.
|
|
397
|
-
*
|
|
398
|
-
* The following hooks will be run:
|
|
399
|
-
* 1. `before-tokenize`
|
|
400
|
-
* 2. `after-tokenize`
|
|
401
|
-
* 3. `wrap`: On each {@link Token}.
|
|
402
|
-
*
|
|
403
|
-
* @param {string} text A string with the code to be highlighted.
|
|
404
|
-
* @param {Grammar} grammar An object containing the tokens to use.
|
|
405
|
-
*
|
|
406
|
-
* Usually a language definition like `Prism.languages.markup`.
|
|
407
|
-
* @param {string} language The name of the language definition passed to `grammar`.
|
|
408
|
-
* @returns {string} The highlighted HTML.
|
|
409
|
-
* @memberof Prism
|
|
410
|
-
* @public
|
|
411
|
-
* @example
|
|
412
|
-
* Prism.highlight('var foo = true;', Prism.languages.javascript, 'javascript');
|
|
413
|
-
*/highlight:function(text,grammar,language){var env={code:text,grammar:grammar,language:language};_.hooks.run('before-tokenize',env);if(!env.grammar){throw new Error('The language "'+env.language+'" has no grammar.');}env.tokens=_.tokenize(env.code,env.grammar);_.hooks.run('after-tokenize',env);return Token.stringify(_.util.encode(env.tokens),env.language);},/**
|
|
414
|
-
* This is the heart of Prism, and the most low-level function you can use. It accepts a string of text as input
|
|
415
|
-
* and the language definitions to use, and returns an array with the tokenized code.
|
|
416
|
-
*
|
|
417
|
-
* When the language definition includes nested tokens, the function is called recursively on each of these tokens.
|
|
418
|
-
*
|
|
419
|
-
* This method could be useful in other contexts as well, as a very crude parser.
|
|
420
|
-
*
|
|
421
|
-
* @param {string} text A string with the code to be highlighted.
|
|
422
|
-
* @param {Grammar} grammar An object containing the tokens to use.
|
|
423
|
-
*
|
|
424
|
-
* Usually a language definition like `Prism.languages.markup`.
|
|
425
|
-
* @returns {TokenStream} An array of strings and tokens, a token stream.
|
|
426
|
-
* @memberof Prism
|
|
427
|
-
* @public
|
|
428
|
-
* @example
|
|
429
|
-
* let code = `var foo = 0;`;
|
|
430
|
-
* let tokens = Prism.tokenize(code, Prism.languages.javascript);
|
|
431
|
-
* tokens.forEach(token => {
|
|
432
|
-
* if (token instanceof Prism.Token && token.type === 'number') {
|
|
433
|
-
* console.log(`Found numeric literal: ${token.content}`);
|
|
434
|
-
* }
|
|
435
|
-
* });
|
|
436
|
-
*/tokenize:function(text,grammar){var rest=grammar.rest;if(rest){for(var token in rest){grammar[token]=rest[token];}delete grammar.rest;}var tokenList=new LinkedList();addAfter(tokenList,tokenList.head,text);matchGrammar(text,tokenList,grammar,tokenList.head,0);return toArray(tokenList);},/**
|
|
437
|
-
* @namespace
|
|
438
|
-
* @memberof Prism
|
|
439
|
-
* @public
|
|
440
|
-
*/hooks:{all:{},/**
|
|
441
|
-
* Adds the given callback to the list of callbacks for the given hook.
|
|
442
|
-
*
|
|
443
|
-
* The callback will be invoked when the hook it is registered for is run.
|
|
444
|
-
* Hooks are usually directly run by a highlight function but you can also run hooks yourself.
|
|
445
|
-
*
|
|
446
|
-
* One callback function can be registered to multiple hooks and the same hook multiple times.
|
|
447
|
-
*
|
|
448
|
-
* @param {string} name The name of the hook.
|
|
449
|
-
* @param {HookCallback} callback The callback function which is given environment variables.
|
|
450
|
-
* @public
|
|
451
|
-
*/add:function(name,callback){var hooks=_.hooks.all;hooks[name]=hooks[name]||[];hooks[name].push(callback);},/**
|
|
452
|
-
* Runs a hook invoking all registered callbacks with the given environment variables.
|
|
453
|
-
*
|
|
454
|
-
* Callbacks will be invoked synchronously and in the order in which they were registered.
|
|
455
|
-
*
|
|
456
|
-
* @param {string} name The name of the hook.
|
|
457
|
-
* @param {Object<string, any>} env The environment variables of the hook passed to all callbacks registered.
|
|
458
|
-
* @public
|
|
459
|
-
*/run:function(name,env){var callbacks=_.hooks.all[name];if(!callbacks||!callbacks.length){return;}for(var i=0,callback;callback=callbacks[i++];){callback(env);}}},Token:Token};_self.Prism=_;// Typescript note:
|
|
460
|
-
// The following can be used to import the Token type in JSDoc:
|
|
461
|
-
//
|
|
462
|
-
// @typedef {InstanceType<import("./prism-core")["Token"]>} Token
|
|
463
|
-
/**
|
|
464
|
-
* Creates a new token.
|
|
465
|
-
*
|
|
466
|
-
* @param {string} type See {@link Token#type type}
|
|
467
|
-
* @param {string | TokenStream} content See {@link Token#content content}
|
|
468
|
-
* @param {string|string[]} [alias] The alias(es) of the token.
|
|
469
|
-
* @param {string} [matchedStr=""] A copy of the full string this token was created from.
|
|
470
|
-
* @class
|
|
471
|
-
* @global
|
|
472
|
-
* @public
|
|
473
|
-
*/function Token(type,content,alias,matchedStr){/**
|
|
474
|
-
* The type of the token.
|
|
475
|
-
*
|
|
476
|
-
* This is usually the key of a pattern in a {@link Grammar}.
|
|
477
|
-
*
|
|
478
|
-
* @type {string}
|
|
479
|
-
* @see GrammarToken
|
|
480
|
-
* @public
|
|
481
|
-
*/this.type=type;/**
|
|
482
|
-
* The strings or tokens contained by this token.
|
|
483
|
-
*
|
|
484
|
-
* This will be a token stream if the pattern matched also defined an `inside` grammar.
|
|
485
|
-
*
|
|
486
|
-
* @type {string | TokenStream}
|
|
487
|
-
* @public
|
|
488
|
-
*/this.content=content;/**
|
|
489
|
-
* The alias(es) of the token.
|
|
490
|
-
*
|
|
491
|
-
* @type {string|string[]}
|
|
492
|
-
* @see GrammarToken
|
|
493
|
-
* @public
|
|
494
|
-
*/this.alias=alias;// Copy of the full string this token was created from
|
|
495
|
-
this.length=(matchedStr||'').length|0;}/**
|
|
496
|
-
* A token stream is an array of strings and {@link Token Token} objects.
|
|
497
|
-
*
|
|
498
|
-
* Token streams have to fulfill a few properties that are assumed by most functions (mostly internal ones) that process
|
|
499
|
-
* them.
|
|
500
|
-
*
|
|
501
|
-
* 1. No adjacent strings.
|
|
502
|
-
* 2. No empty strings.
|
|
503
|
-
*
|
|
504
|
-
* The only exception here is the token stream that only contains the empty string and nothing else.
|
|
505
|
-
*
|
|
506
|
-
* @typedef {Array<string | Token>} TokenStream
|
|
507
|
-
* @global
|
|
508
|
-
* @public
|
|
509
|
-
*//**
|
|
510
|
-
* Converts the given token or token stream to an HTML representation.
|
|
511
|
-
*
|
|
512
|
-
* The following hooks will be run:
|
|
513
|
-
* 1. `wrap`: On each {@link Token}.
|
|
514
|
-
*
|
|
515
|
-
* @param {string | Token | TokenStream} o The token or token stream to be converted.
|
|
516
|
-
* @param {string} language The name of current language.
|
|
517
|
-
* @returns {string} The HTML representation of the token or token stream.
|
|
518
|
-
* @memberof Token
|
|
519
|
-
* @static
|
|
520
|
-
*/Token.stringify=function stringify(o,language){if(typeof o=='string'){return o;}if(Array.isArray(o)){var s='';o.forEach(function(e){s+=stringify(e,language);});return s;}var env={type:o.type,content:stringify(o.content,language),tag:'span',classes:['token',o.type],attributes:{},language:language};var aliases=o.alias;if(aliases){if(Array.isArray(aliases)){Array.prototype.push.apply(env.classes,aliases);}else {env.classes.push(aliases);}}_.hooks.run('wrap',env);var attributes='';for(var name in env.attributes){attributes+=' '+name+'="'+(env.attributes[name]||'').replace(/"/g,'"')+'"';}return '<'+env.tag+' class="'+env.classes.join(' ')+'"'+attributes+'>'+env.content+'</'+env.tag+'>';};/**
|
|
521
|
-
* @param {RegExp} pattern
|
|
522
|
-
* @param {number} pos
|
|
523
|
-
* @param {string} text
|
|
524
|
-
* @param {boolean} lookbehind
|
|
525
|
-
* @returns {RegExpExecArray | null}
|
|
526
|
-
*/function matchPattern(pattern,pos,text,lookbehind){pattern.lastIndex=pos;var match=pattern.exec(text);if(match&&lookbehind&&match[1]){// change the match to remove the text matched by the Prism lookbehind group
|
|
527
|
-
var lookbehindLength=match[1].length;match.index+=lookbehindLength;match[0]=match[0].slice(lookbehindLength);}return match;}/**
|
|
528
|
-
* @param {string} text
|
|
529
|
-
* @param {LinkedList<string | Token>} tokenList
|
|
530
|
-
* @param {any} grammar
|
|
531
|
-
* @param {LinkedListNode<string | Token>} startNode
|
|
532
|
-
* @param {number} startPos
|
|
533
|
-
* @param {RematchOptions} [rematch]
|
|
534
|
-
* @returns {void}
|
|
535
|
-
* @private
|
|
536
|
-
*
|
|
537
|
-
* @typedef RematchOptions
|
|
538
|
-
* @property {string} cause
|
|
539
|
-
* @property {number} reach
|
|
540
|
-
*/function matchGrammar(text,tokenList,grammar,startNode,startPos,rematch){for(var token in grammar){if(!grammar.hasOwnProperty(token)||!grammar[token]){continue;}var patterns=grammar[token];patterns=Array.isArray(patterns)?patterns:[patterns];for(var j=0;j<patterns.length;++j){if(rematch&&rematch.cause==token+','+j){return;}var patternObj=patterns[j];var inside=patternObj.inside;var lookbehind=!!patternObj.lookbehind;var greedy=!!patternObj.greedy;var alias=patternObj.alias;if(greedy&&!patternObj.pattern.global){// Without the global flag, lastIndex won't work
|
|
541
|
-
var flags=patternObj.pattern.toString().match(/[imsuy]*$/)[0];patternObj.pattern=RegExp(patternObj.pattern.source,flags+'g');}/** @type {RegExp} */var pattern=patternObj.pattern||patternObj;for(// iterate the token list and keep track of the current token/string position
|
|
542
|
-
var currentNode=startNode.next,pos=startPos;currentNode!==tokenList.tail;pos+=currentNode.value.length,currentNode=currentNode.next){if(rematch&&pos>=rematch.reach){break;}var str=currentNode.value;if(tokenList.length>text.length){// Something went terribly wrong, ABORT, ABORT!
|
|
543
|
-
return;}if(str instanceof Token){continue;}var removeCount=1;// this is the to parameter of removeBetween
|
|
544
|
-
var match;if(greedy){match=matchPattern(pattern,pos,text,lookbehind);if(!match||match.index>=text.length){break;}var from=match.index;var to=match.index+match[0].length;var p=pos;// find the node that contains the match
|
|
545
|
-
p+=currentNode.value.length;while(from>=p){currentNode=currentNode.next;p+=currentNode.value.length;}// adjust pos (and p)
|
|
546
|
-
p-=currentNode.value.length;pos=p;// the current node is a Token, then the match starts inside another Token, which is invalid
|
|
547
|
-
if(currentNode.value instanceof Token){continue;}// find the last node which is affected by this match
|
|
548
|
-
for(var k=currentNode;k!==tokenList.tail&&(p<to||typeof k.value==='string');k=k.next){removeCount++;p+=k.value.length;}removeCount--;// replace with the new match
|
|
549
|
-
str=text.slice(pos,p);match.index-=pos;}else {match=matchPattern(pattern,0,str,lookbehind);if(!match){continue;}}// eslint-disable-next-line no-redeclare
|
|
550
|
-
var from=match.index;var matchStr=match[0];var before=str.slice(0,from);var after=str.slice(from+matchStr.length);var reach=pos+str.length;if(rematch&&reach>rematch.reach){rematch.reach=reach;}var removeFrom=currentNode.prev;if(before){removeFrom=addAfter(tokenList,removeFrom,before);pos+=before.length;}removeRange(tokenList,removeFrom,removeCount);var wrapped=new Token(token,inside?_.tokenize(matchStr,inside):matchStr,alias,matchStr);currentNode=addAfter(tokenList,removeFrom,wrapped);if(after){addAfter(tokenList,currentNode,after);}if(removeCount>1){// at least one Token object was removed, so we have to do some rematching
|
|
551
|
-
// this can only happen if the current pattern is greedy
|
|
552
|
-
/** @type {RematchOptions} */var nestedRematch={cause:token+','+j,reach:reach};matchGrammar(text,tokenList,grammar,currentNode.prev,pos,nestedRematch);// the reach might have been extended because of the rematching
|
|
553
|
-
if(rematch&&nestedRematch.reach>rematch.reach){rematch.reach=nestedRematch.reach;}}}}}}/**
|
|
554
|
-
* @typedef LinkedListNode
|
|
555
|
-
* @property {T} value
|
|
556
|
-
* @property {LinkedListNode<T> | null} prev The previous node.
|
|
557
|
-
* @property {LinkedListNode<T> | null} next The next node.
|
|
558
|
-
* @template T
|
|
559
|
-
* @private
|
|
560
|
-
*//**
|
|
561
|
-
* @template T
|
|
562
|
-
* @private
|
|
563
|
-
*/function LinkedList(){/** @type {LinkedListNode<T>} */var head={value:null,prev:null,next:null};/** @type {LinkedListNode<T>} */var tail={value:null,prev:head,next:null};head.next=tail;/** @type {LinkedListNode<T>} */this.head=head;/** @type {LinkedListNode<T>} */this.tail=tail;this.length=0;}/**
|
|
564
|
-
* Adds a new node with the given value to the list.
|
|
565
|
-
*
|
|
566
|
-
* @param {LinkedList<T>} list
|
|
567
|
-
* @param {LinkedListNode<T>} node
|
|
568
|
-
* @param {T} value
|
|
569
|
-
* @returns {LinkedListNode<T>} The added node.
|
|
570
|
-
* @template T
|
|
571
|
-
*/function addAfter(list,node,value){// assumes that node != list.tail && values.length >= 0
|
|
572
|
-
var next=node.next;var newNode={value:value,prev:node,next:next};node.next=newNode;next.prev=newNode;list.length++;return newNode;}/**
|
|
573
|
-
* Removes `count` nodes after the given node. The given node will not be removed.
|
|
574
|
-
*
|
|
575
|
-
* @param {LinkedList<T>} list
|
|
576
|
-
* @param {LinkedListNode<T>} node
|
|
577
|
-
* @param {number} count
|
|
578
|
-
* @template T
|
|
579
|
-
*/function removeRange(list,node,count){var next=node.next;for(var i=0;i<count&&next!==list.tail;i++){next=next.next;}node.next=next;next.prev=node;list.length-=i;}/**
|
|
580
|
-
* @param {LinkedList<T>} list
|
|
581
|
-
* @returns {T[]}
|
|
582
|
-
* @template T
|
|
583
|
-
*/function toArray(list){var array=[];var node=list.head.next;while(node!==list.tail){array.push(node.value);node=node.next;}return array;}if(!_self.document){if(!_self.addEventListener){// in Node.js
|
|
584
|
-
return _;}if(!_.disableWorkerMessageHandler){// In worker
|
|
585
|
-
_self.addEventListener('message',function(evt){var message=JSON.parse(evt.data);var lang=message.language;var code=message.code;var immediateClose=message.immediateClose;_self.postMessage(_.highlight(code,_.languages[lang],lang));if(immediateClose){_self.close();}},false);}return _;}// Get current script and highlight
|
|
586
|
-
var script=_.util.currentScript();if(script){_.filename=script.src;if(script.hasAttribute('data-manual')){_.manual=true;}}function highlightAutomaticallyCallback(){if(!_.manual){_.highlightAll();}}if(!_.manual){// If the document state is "loading", then we'll use DOMContentLoaded.
|
|
587
|
-
// If the document state is "interactive" and the prism.js script is deferred, then we'll also use the
|
|
588
|
-
// DOMContentLoaded event because there might be some plugins or languages which have also been deferred and they
|
|
589
|
-
// might take longer one animation frame to execute which can create a race condition where only some plugins have
|
|
590
|
-
// been loaded when Prism.highlightAll() is executed, depending on how fast resources are loaded.
|
|
591
|
-
// See https://github.com/PrismJS/prism/issues/2102
|
|
592
|
-
var readyState=document.readyState;if(readyState==='loading'||readyState==='interactive'&&script&&script.defer){document.addEventListener('DOMContentLoaded',highlightAutomaticallyCallback);}else {if(window.requestAnimationFrame){window.requestAnimationFrame(highlightAutomaticallyCallback);}else {window.setTimeout(highlightAutomaticallyCallback,16);}}}return _;}(_self);if(module.exports){module.exports=Prism;}// hack for components to work correctly in node.js
|
|
593
|
-
if(typeof commonjsGlobal!=='undefined'){commonjsGlobal.Prism=Prism;}// some additional documentation/types
|
|
594
|
-
/**
|
|
595
|
-
* The expansion of a simple `RegExp` literal to support additional properties.
|
|
596
|
-
*
|
|
597
|
-
* @typedef GrammarToken
|
|
598
|
-
* @property {RegExp} pattern The regular expression of the token.
|
|
599
|
-
* @property {boolean} [lookbehind=false] If `true`, then the first capturing group of `pattern` will (effectively)
|
|
600
|
-
* behave as a lookbehind group meaning that the captured text will not be part of the matched text of the new token.
|
|
601
|
-
* @property {boolean} [greedy=false] Whether the token is greedy.
|
|
602
|
-
* @property {string|string[]} [alias] An optional alias or list of aliases.
|
|
603
|
-
* @property {Grammar} [inside] The nested grammar of this token.
|
|
604
|
-
*
|
|
605
|
-
* The `inside` grammar will be used to tokenize the text value of each token of this kind.
|
|
606
|
-
*
|
|
607
|
-
* This can be used to make nested and even recursive language definitions.
|
|
608
|
-
*
|
|
609
|
-
* Note: This can cause infinite recursion. Be careful when you embed different languages or even the same language into
|
|
610
|
-
* each another.
|
|
611
|
-
* @global
|
|
612
|
-
* @public
|
|
613
|
-
*//**
|
|
614
|
-
* @typedef Grammar
|
|
615
|
-
* @type {Object<string, RegExp | GrammarToken | Array<RegExp | GrammarToken>>}
|
|
616
|
-
* @property {Grammar} [rest] An optional grammar object that will be appended to this grammar.
|
|
617
|
-
* @global
|
|
618
|
-
* @public
|
|
619
|
-
*//**
|
|
620
|
-
* A function which will invoked after an element was successfully highlighted.
|
|
621
|
-
*
|
|
622
|
-
* @callback HighlightCallback
|
|
623
|
-
* @param {Element} element The element successfully highlighted.
|
|
624
|
-
* @returns {void}
|
|
625
|
-
* @global
|
|
626
|
-
* @public
|
|
627
|
-
*//**
|
|
628
|
-
* @callback HookCallback
|
|
629
|
-
* @param {Object<string, any>} env The environment variables of the hook.
|
|
630
|
-
* @returns {void}
|
|
631
|
-
* @global
|
|
632
|
-
* @public
|
|
633
|
-
*//* **********************************************
|
|
634
|
-
Begin prism-markup.js
|
|
635
|
-
********************************************** */Prism.languages.markup={'comment':{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:true},'prolog':{pattern:/<\?[\s\S]+?\?>/,greedy:true},'doctype':{// https://www.w3.org/TR/xml/#NT-doctypedecl
|
|
636
|
-
pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:true,inside:{'internal-subset':{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:true,greedy:true,inside:null// see below
|
|
637
|
-
},'string':{pattern:/"[^"]*"|'[^']*'/,greedy:true},'punctuation':/^<!|>$|[[\]]/,'doctype-tag':/^DOCTYPE/i,'name':/[^\s<>'"]+/}},'cdata':{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:true},'tag':{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:true,inside:{'tag':{pattern:/^<\/?[^\s>\/]+/,inside:{'punctuation':/^<\/?/,'namespace':/^[^\s>\/:]+:/}},'special-attr':[],'attr-value':{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{'punctuation':[{pattern:/^=/,alias:'attr-equals'},{pattern:/^(\s*)["']|["']$/,lookbehind:true}]}},'punctuation':/\/?>/,'attr-name':{pattern:/[^\s>\/]+/,inside:{'namespace':/^[^\s>\/:]+:/}}}},'entity':[{pattern:/&[\da-z]{1,8};/i,alias:'named-entity'},/&#x?[\da-f]{1,8};/i]};Prism.languages.markup['tag'].inside['attr-value'].inside['entity']=Prism.languages.markup['entity'];Prism.languages.markup['doctype'].inside['internal-subset'].inside=Prism.languages.markup;// Plugin to make entity title show the real entity, idea by Roman Komarov
|
|
638
|
-
Prism.hooks.add('wrap',function(env){if(env.type==='entity'){env.attributes['title']=env.content.replace(/&/,'&');}});Object.defineProperty(Prism.languages.markup.tag,'addInlined',{/**
|
|
639
|
-
* Adds an inlined language to markup.
|
|
640
|
-
*
|
|
641
|
-
* An example of an inlined language is CSS with `<style>` tags.
|
|
642
|
-
*
|
|
643
|
-
* @param {string} tagName The name of the tag that contains the inlined language. This name will be treated as
|
|
644
|
-
* case insensitive.
|
|
645
|
-
* @param {string} lang The language key.
|
|
646
|
-
* @example
|
|
647
|
-
* addInlined('style', 'css');
|
|
648
|
-
*/value:function addInlined(tagName,lang){var includedCdataInside={};includedCdataInside['language-'+lang]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:true,inside:Prism.languages[lang]};includedCdataInside['cdata']=/^<!\[CDATA\[|\]\]>$/i;var inside={'included-cdata':{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:includedCdataInside}};inside['language-'+lang]={pattern:/[\s\S]+/,inside:Prism.languages[lang]};var def={};def[tagName]={pattern:RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,function(){return tagName;}),'i'),lookbehind:true,greedy:true,inside:inside};Prism.languages.insertBefore('markup','cdata',def);}});Object.defineProperty(Prism.languages.markup.tag,'addAttribute',{/**
|
|
649
|
-
* Adds an pattern to highlight languages embedded in HTML attributes.
|
|
650
|
-
*
|
|
651
|
-
* An example of an inlined language is CSS with `style` attributes.
|
|
652
|
-
*
|
|
653
|
-
* @param {string} attrName The name of the tag that contains the inlined language. This name will be treated as
|
|
654
|
-
* case insensitive.
|
|
655
|
-
* @param {string} lang The language key.
|
|
656
|
-
* @example
|
|
657
|
-
* addAttribute('style', 'css');
|
|
658
|
-
*/value:function(attrName,lang){Prism.languages.markup.tag.inside['special-attr'].push({pattern:RegExp(/(^|["'\s])/.source+'(?:'+attrName+')'+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,'i'),lookbehind:true,inside:{'attr-name':/^[^\s=]+/,'attr-value':{pattern:/=[\s\S]+/,inside:{'value':{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:true,alias:[lang,'language-'+lang],inside:Prism.languages[lang]},'punctuation':[{pattern:/^=/,alias:'attr-equals'},/"|'/]}}}});}});Prism.languages.html=Prism.languages.markup;Prism.languages.mathml=Prism.languages.markup;Prism.languages.svg=Prism.languages.markup;Prism.languages.xml=Prism.languages.extend('markup',{});Prism.languages.ssml=Prism.languages.xml;Prism.languages.atom=Prism.languages.xml;Prism.languages.rss=Prism.languages.xml;/* **********************************************
|
|
659
|
-
Begin prism-css.js
|
|
660
|
-
********************************************** */(function(Prism){var string=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;Prism.languages.css={'comment':/\/\*[\s\S]*?\*\//,'atrule':{pattern:RegExp('@[\\w-](?:'+/[^;{\s"']|\s+(?!\s)/.source+'|'+string.source+')*?'+/(?:;|(?=\s*\{))/.source),inside:{'rule':/^@[\w-]+/,'selector-function-argument':{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:true,alias:'selector'},'keyword':{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:true}// See rest below
|
|
661
|
-
}},'url':{// https://drafts.csswg.org/css-values-3/#urls
|
|
662
|
-
pattern:RegExp('\\burl\\((?:'+string.source+'|'+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+')\\)','i'),greedy:true,inside:{'function':/^url/i,'punctuation':/^\(|\)$/,'string':{pattern:RegExp('^'+string.source+'$'),alias:'url'}}},'selector':{pattern:RegExp('(^|[{}\\s])[^{}\\s](?:[^{};"\'\\s]|\\s+(?![\\s{])|'+string.source+')*(?=\\s*\\{)'),lookbehind:true},'string':{pattern:string,greedy:true},'property':{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:true},'important':/!important\b/i,'function':{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:true},'punctuation':/[(){};:,]/};Prism.languages.css['atrule'].inside.rest=Prism.languages.css;var markup=Prism.languages.markup;if(markup){markup.tag.addInlined('style','css');markup.tag.addAttribute('style','css');}})(Prism);/* **********************************************
|
|
663
|
-
Begin prism-clike.js
|
|
664
|
-
********************************************** */Prism.languages.clike={'comment':[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:true,greedy:true},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:true,greedy:true}],'string':{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:true},'class-name':{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:true,inside:{'punctuation':/[.\\]/}},'keyword':/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,'boolean':/\b(?:false|true)\b/,'function':/\b\w+(?=\()/,'number':/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,'operator':/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,'punctuation':/[{}[\];(),.:]/};/* **********************************************
|
|
665
|
-
Begin prism-javascript.js
|
|
666
|
-
********************************************** */Prism.languages.javascript=Prism.languages.extend('clike',{'class-name':[Prism.languages.clike['class-name'],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:true}],'keyword':[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:true},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:true}],// Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
|
|
667
|
-
'function':/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,'number':{pattern:RegExp(/(^|[^\w$])/.source+'(?:'+(// constant
|
|
668
|
-
/NaN|Infinity/.source+'|'+// binary integer
|
|
669
|
-
/0[bB][01]+(?:_[01]+)*n?/.source+'|'+// octal integer
|
|
670
|
-
/0[oO][0-7]+(?:_[0-7]+)*n?/.source+'|'+// hexadecimal integer
|
|
671
|
-
/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+'|'+// decimal bigint
|
|
672
|
-
/\d+(?:_\d+)*n/.source+'|'+// decimal number (integer or float) but no bigint
|
|
673
|
-
/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source)+')'+/(?![\w$])/.source),lookbehind:true},'operator':/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/});Prism.languages.javascript['class-name'][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/;Prism.languages.insertBefore('javascript','keyword',{'regex':{pattern:RegExp(// lookbehind
|
|
674
|
-
// eslint-disable-next-line regexp/no-dupe-characters-character-class
|
|
675
|
-
/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source+// Regex pattern:
|
|
676
|
-
// There are 2 regex patterns here. The RegExp set notation proposal added support for nested character
|
|
677
|
-
// classes if the `v` flag is present. Unfortunately, nested CCs are both context-free and incompatible
|
|
678
|
-
// with the only syntax, so we have to define 2 different regex patterns.
|
|
679
|
-
/\//.source+'(?:'+/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source+'|'+// `v` flag syntax. This supports 3 levels of nested character classes.
|
|
680
|
-
/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source+')'+// lookahead
|
|
681
|
-
/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source),lookbehind:true,greedy:true,inside:{'regex-source':{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:true,alias:'language-regex',inside:Prism.languages.regex},'regex-delimiter':/^\/|\/$/,'regex-flags':/^[a-z]+$/}},// This must be declared before keyword because we use "function" inside the look-forward
|
|
682
|
-
'function-variable':{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:'function'},'parameter':[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:true,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:true,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:true,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:true,inside:Prism.languages.javascript}],'constant':/\b[A-Z](?:[A-Z_]|\dx?)*\b/});Prism.languages.insertBefore('javascript','string',{'hashbang':{pattern:/^#!.*/,greedy:true,alias:'comment'},'template-string':{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:true,inside:{'template-punctuation':{pattern:/^`|`$/,alias:'string'},'interpolation':{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:true,inside:{'interpolation-punctuation':{pattern:/^\$\{|\}$/,alias:'punctuation'},rest:Prism.languages.javascript}},'string':/[\s\S]+/}},'string-property':{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:true,greedy:true,alias:'property'}});Prism.languages.insertBefore('javascript','operator',{'literal-property':{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:true,alias:'property'}});if(Prism.languages.markup){Prism.languages.markup.tag.addInlined('script','javascript');// add attribute support for all DOM events.
|
|
683
|
-
// https://developer.mozilla.org/en-US/docs/Web/Events#Standard_events
|
|
684
|
-
Prism.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,'javascript');}Prism.languages.js=Prism.languages.javascript;/* **********************************************
|
|
685
|
-
Begin prism-file-highlight.js
|
|
686
|
-
********************************************** */(function(){if(typeof Prism==='undefined'||typeof document==='undefined'){return;}// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
|
|
687
|
-
if(!Element.prototype.matches){Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector;}var LOADING_MESSAGE='Loading…';var FAILURE_MESSAGE=function(status,message){return '✖ Error '+status+' while fetching file: '+message;};var FAILURE_EMPTY_MESSAGE='✖ Error: File does not exist or is empty';var EXTENSIONS={'js':'javascript','py':'python','rb':'ruby','ps1':'powershell','psm1':'powershell','sh':'bash','bat':'batch','h':'c','tex':'latex'};var STATUS_ATTR='data-src-status';var STATUS_LOADING='loading';var STATUS_LOADED='loaded';var STATUS_FAILED='failed';var SELECTOR='pre[data-src]:not(['+STATUS_ATTR+'="'+STATUS_LOADED+'"])'+':not(['+STATUS_ATTR+'="'+STATUS_LOADING+'"])';/**
|
|
688
|
-
* Loads the given file.
|
|
689
|
-
*
|
|
690
|
-
* @param {string} src The URL or path of the source file to load.
|
|
691
|
-
* @param {(result: string) => void} success
|
|
692
|
-
* @param {(reason: string) => void} error
|
|
693
|
-
*/function loadFile(src,success,error){var xhr=new XMLHttpRequest();xhr.open('GET',src,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status<400&&xhr.responseText){success(xhr.responseText);}else {if(xhr.status>=400){error(FAILURE_MESSAGE(xhr.status,xhr.statusText));}else {error(FAILURE_EMPTY_MESSAGE);}}}};xhr.send(null);}/**
|
|
694
|
-
* Parses the given range.
|
|
695
|
-
*
|
|
696
|
-
* This returns a range with inclusive ends.
|
|
697
|
-
*
|
|
698
|
-
* @param {string | null | undefined} range
|
|
699
|
-
* @returns {[number, number | undefined] | undefined}
|
|
700
|
-
*/function parseRange(range){var m=/^\s*(\d+)\s*(?:(,)\s*(?:(\d+)\s*)?)?$/.exec(range||'');if(m){var start=Number(m[1]);var comma=m[2];var end=m[3];if(!comma){return [start,start];}if(!end){return [start,undefined];}return [start,Number(end)];}return undefined;}Prism.hooks.add('before-highlightall',function(env){env.selector+=', '+SELECTOR;});Prism.hooks.add('before-sanity-check',function(env){var pre=/** @type {HTMLPreElement} */env.element;if(pre.matches(SELECTOR)){env.code='';// fast-path the whole thing and go to complete
|
|
701
|
-
pre.setAttribute(STATUS_ATTR,STATUS_LOADING);// mark as loading
|
|
702
|
-
// add code element with loading message
|
|
703
|
-
var code=pre.appendChild(document.createElement('CODE'));code.textContent=LOADING_MESSAGE;var src=pre.getAttribute('data-src');var language=env.language;if(language==='none'){// the language might be 'none' because there is no language set;
|
|
704
|
-
// in this case, we want to use the extension as the language
|
|
705
|
-
var extension=(/\.(\w+)$/.exec(src)||[,'none'])[1];language=EXTENSIONS[extension]||extension;}// set language classes
|
|
706
|
-
Prism.util.setLanguage(code,language);Prism.util.setLanguage(pre,language);// preload the language
|
|
707
|
-
var autoloader=Prism.plugins.autoloader;if(autoloader){autoloader.loadLanguages(language);}// load file
|
|
708
|
-
loadFile(src,function(text){// mark as loaded
|
|
709
|
-
pre.setAttribute(STATUS_ATTR,STATUS_LOADED);// handle data-range
|
|
710
|
-
var range=parseRange(pre.getAttribute('data-range'));if(range){var lines=text.split(/\r\n?|\n/g);// the range is one-based and inclusive on both ends
|
|
711
|
-
var start=range[0];var end=range[1]==null?lines.length:range[1];if(start<0){start+=lines.length;}start=Math.max(0,Math.min(start-1,lines.length));if(end<0){end+=lines.length;}end=Math.max(0,Math.min(end,lines.length));text=lines.slice(start,end).join('\n');// add data-start for line numbers
|
|
712
|
-
if(!pre.hasAttribute('data-start')){pre.setAttribute('data-start',String(start+1));}}// highlight code
|
|
713
|
-
code.textContent=text;Prism.highlightElement(code);},function(error){// mark as failed
|
|
714
|
-
pre.setAttribute(STATUS_ATTR,STATUS_FAILED);code.textContent=error;});}});Prism.plugins.fileHighlight={/**
|
|
715
|
-
* Executes the File Highlight plugin for all matching `pre` elements under the given container.
|
|
716
|
-
*
|
|
717
|
-
* Note: Elements which are already loaded or currently loading will not be touched by this method.
|
|
718
|
-
*
|
|
719
|
-
* @param {ParentNode} [container=document]
|
|
720
|
-
*/highlight:function highlight(container){var elements=(container||document).querySelectorAll(SELECTOR);for(var i=0,element;element=elements[i++];){Prism.highlightElement(element);}}};var logged=false;/** @deprecated Use `Prism.plugins.fileHighlight.highlight` instead. */Prism.fileHighlight=function(){if(!logged){console.warn('Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead.');logged=true;}Prism.plugins.fileHighlight.highlight.apply(this,arguments);};})();})(prism);const Prism$1=prism.exports;Prism.languages.python={'comment':{pattern:/(^|[^\\])#.*/,lookbehind:true,greedy:true},'string-interpolation':{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:true,inside:{'interpolation':{// "{" <expression> <optional "!s", "!r", or "!a"> <optional ":" format specifier> "}"
|
|
721
|
-
pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:true,inside:{'format-spec':{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:true},'conversion-option':{pattern://,alias:'punctuation'},rest:null}},'string':/[\s\S]+/}},'triple-quoted-string':{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:true,alias:'string'},'string':{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:true},'function':{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:true},'class-name':{pattern:/(\bclass\s+)\w+/i,lookbehind:true},'decorator':{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:true,alias:['annotation','punctuation'],inside:{'punctuation':/\./}},'keyword':/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,'builtin':/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,'boolean':/\b(?:False|None|True)\b/,'number':/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,'operator':/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,'punctuation':/[{}[\];(),.:]/};Prism.languages.python['string-interpolation'].inside['interpolation'].inside.rest=Prism.languages.python;Prism.languages.py=Prism.languages.python;(function(Prism){// $ set | grep '^[A-Z][^[:space:]]*=' | cut -d= -f1 | tr '\n' '|'
|
|
722
|
-
// + LC_ALL, RANDOM, REPLY, SECONDS.
|
|
723
|
-
// + make sure PS1..4 are here as they are not always set,
|
|
724
|
-
// - some useless things.
|
|
725
|
-
var envVars='\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b';var commandAfterHeredoc={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:true,alias:'punctuation',// this looks reasonably well in all themes
|
|
726
|
-
inside:null// see below
|
|
727
|
-
};var insideString={'bash':commandAfterHeredoc,'environment':{pattern:RegExp('\\$'+envVars),alias:'constant'},'variable':[// [0]: Arithmetic Environment
|
|
728
|
-
{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:true,inside:{// If there is a $ sign at the beginning highlight $(( and )) as variable
|
|
729
|
-
'variable':[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:true},/^\$\(\(/],'number':/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,// Operators according to https://www.gnu.org/software/bash/manual/bashref.html#Shell-Arithmetic
|
|
730
|
-
'operator':/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,// If there is no $ sign at the beginning highlight (( and )) as punctuation
|
|
731
|
-
'punctuation':/\(\(?|\)\)?|,|;/}},// [1]: Command Substitution
|
|
732
|
-
{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:true,inside:{'variable':/^\$\(|^`|\)$|`$/}},// [2]: Brace expansion
|
|
733
|
-
{pattern:/\$\{[^}]+\}/,greedy:true,inside:{'operator':/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,'punctuation':/[\[\]]/,'environment':{pattern:RegExp('(\\{)'+envVars),lookbehind:true,alias:'constant'}}},/\$(?:\w+|[#?*!@$])/],// Escape sequences from echo and printf's manuals, and escaped quotes.
|
|
734
|
-
'entity':/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};Prism.languages.bash={'shebang':{pattern:/^#!\s*\/.*/,alias:'important'},'comment':{pattern:/(^|[^"{\\$])#.*/,lookbehind:true},'function-name':[// a) function foo {
|
|
735
|
-
// b) foo() {
|
|
736
|
-
// c) function foo() {
|
|
737
|
-
// but not “foo {”
|
|
738
|
-
{// a) and c)
|
|
739
|
-
pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:true,alias:'function'},{// b)
|
|
740
|
-
pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:'function'}],// Highlight variable names as variables in for and select beginnings.
|
|
741
|
-
'for-or-select':{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:'variable',lookbehind:true},// Highlight variable names as variables in the left-hand part
|
|
742
|
-
// of assignments (“=” and “+=”).
|
|
743
|
-
'assign-left':{pattern:/(^|[\s;|&]|[<>]\()\w+(?:\.\w+)*(?=\+?=)/,inside:{'environment':{pattern:RegExp('(^|[\\s;|&]|[<>]\\()'+envVars),lookbehind:true,alias:'constant'}},alias:'variable',lookbehind:true},// Highlight parameter names as variables
|
|
744
|
-
'parameter':{pattern:/(^|\s)-{1,2}(?:\w+:[+-]?)?\w+(?:\.\w+)*(?=[=\s]|$)/,alias:'variable',lookbehind:true},'string':[// Support for Here-documents https://en.wikipedia.org/wiki/Here_document
|
|
745
|
-
{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:true,greedy:true,inside:insideString},// Here-document with quotes around the tag
|
|
746
|
-
// → No expansion (so no “inside”).
|
|
747
|
-
{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:true,greedy:true,inside:{'bash':commandAfterHeredoc}},// “Normal” string
|
|
748
|
-
{// https://www.gnu.org/software/bash/manual/html_node/Double-Quotes.html
|
|
749
|
-
pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:true,greedy:true,inside:insideString},{// https://www.gnu.org/software/bash/manual/html_node/Single-Quotes.html
|
|
750
|
-
pattern:/(^|[^$\\])'[^']*'/,lookbehind:true,greedy:true},{// https://www.gnu.org/software/bash/manual/html_node/ANSI_002dC-Quoting.html
|
|
751
|
-
pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:true,inside:{'entity':insideString.entity}}],'environment':{pattern:RegExp('\\$?'+envVars),alias:'constant'},'variable':insideString.variable,'function':{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cargo|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|java|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|sysctl|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:true},'keyword':{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:true},// https://www.gnu.org/software/bash/manual/html_node/Shell-Builtin-Commands.html
|
|
752
|
-
'builtin':{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:true,// Alias added to make those easier to distinguish from strings.
|
|
753
|
-
alias:'class-name'},'boolean':{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:true},'file-descriptor':{pattern:/\B&\d\b/,alias:'important'},'operator':{// Lots of redirections here, but not just that.
|
|
754
|
-
pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{'file-descriptor':{pattern:/^\d/,alias:'important'}}},'punctuation':/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,'number':{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:true}};commandAfterHeredoc.inside=Prism.languages.bash;/* Patterns in command substitution. */var toBeCopied=['comment','function-name','for-or-select','assign-left','parameter','string','environment','function','keyword','builtin','boolean','file-descriptor','operator','punctuation','number'];var inside=insideString.variable[1].inside;for(var i=0;i<toBeCopied.length;i++){inside[toBeCopied[i]]=Prism.languages.bash[toBeCopied[i]];}Prism.languages.sh=Prism.languages.bash;Prism.languages.shell=Prism.languages.bash;})(Prism);(function(Prism){// https://yaml.org/spec/1.2/spec.html#c-ns-anchor-property
|
|
755
|
-
// https://yaml.org/spec/1.2/spec.html#c-ns-alias-node
|
|
756
|
-
var anchorOrAlias=/[*&][^\s[\]{},]+/;// https://yaml.org/spec/1.2/spec.html#c-ns-tag-property
|
|
757
|
-
var tag=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/;// https://yaml.org/spec/1.2/spec.html#c-ns-properties(n,c)
|
|
758
|
-
var properties='(?:'+tag.source+'(?:[ \t]+'+anchorOrAlias.source+')?|'+anchorOrAlias.source+'(?:[ \t]+'+tag.source+')?)';// https://yaml.org/spec/1.2/spec.html#ns-plain(n,c)
|
|
759
|
-
// This is a simplified version that doesn't support "#" and multiline keys
|
|
760
|
-
// All these long scarry character classes are simplified versions of YAML's characters
|
|
761
|
-
var plainKey=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-]<PLAIN>)(?:[ \t]*(?:(?![#:])<PLAIN>|:<PLAIN>))*/.source.replace(/<PLAIN>/g,function(){return /[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source;});var string=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;/**
|
|
762
|
-
*
|
|
763
|
-
* @param {string} value
|
|
764
|
-
* @param {string} [flags]
|
|
765
|
-
* @returns {RegExp}
|
|
766
|
-
*/function createValuePattern(value,flags){flags=(flags||'').replace(/m/g,'')+'m';// add m flag
|
|
767
|
-
var pattern=/([:\-,[{]\s*(?:\s<<prop>>[ \t]+)?)(?:<<value>>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<<prop>>/g,function(){return properties;}).replace(/<<value>>/g,function(){return value;});return RegExp(pattern,flags);}Prism.languages.yaml={'scalar':{pattern:RegExp(/([\-:]\s*(?:\s<<prop>>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<<prop>>/g,function(){return properties;})),lookbehind:true,alias:'string'},'comment':/#.*/,'key':{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<<prop>>[ \t]+)?)<<key>>(?=\s*:\s)/.source.replace(/<<prop>>/g,function(){return properties;}).replace(/<<key>>/g,function(){return '(?:'+plainKey+'|'+string+')';})),lookbehind:true,greedy:true,alias:'atrule'},'directive':{pattern:/(^[ \t]*)%.+/m,lookbehind:true,alias:'important'},'datetime':{pattern:createValuePattern(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:true,alias:'number'},'boolean':{pattern:createValuePattern(/false|true/.source,'i'),lookbehind:true,alias:'important'},'null':{pattern:createValuePattern(/null|~/.source,'i'),lookbehind:true,alias:'important'},'string':{pattern:createValuePattern(string),lookbehind:true,greedy:true},'number':{pattern:createValuePattern(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,'i'),lookbehind:true},'tag':tag,'important':anchorOrAlias,'punctuation':/---|[:[\]{}\-,|>?]|\.\.\./};Prism.languages.yml=Prism.languages.yaml;})(Prism);(function(Prism){var string=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;Prism.languages.css={'comment':/\/\*[\s\S]*?\*\//,'atrule':{pattern:RegExp('@[\\w-](?:'+/[^;{\s"']|\s+(?!\s)/.source+'|'+string.source+')*?'+/(?:;|(?=\s*\{))/.source),inside:{'rule':/^@[\w-]+/,'selector-function-argument':{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:true,alias:'selector'},'keyword':{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:true}// See rest below
|
|
768
|
-
}},'url':{// https://drafts.csswg.org/css-values-3/#urls
|
|
769
|
-
pattern:RegExp('\\burl\\((?:'+string.source+'|'+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+')\\)','i'),greedy:true,inside:{'function':/^url/i,'punctuation':/^\(|\)$/,'string':{pattern:RegExp('^'+string.source+'$'),alias:'url'}}},'selector':{pattern:RegExp('(^|[{}\\s])[^{}\\s](?:[^{};"\'\\s]|\\s+(?![\\s{])|'+string.source+')*(?=\\s*\\{)'),lookbehind:true},'string':{pattern:string,greedy:true},'property':{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:true},'important':/!important\b/i,'function':{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:true},'punctuation':/[(){};:,]/};Prism.languages.css['atrule'].inside.rest=Prism.languages.css;var markup=Prism.languages.markup;if(markup){markup.tag.addInlined('style','css');markup.tag.addAttribute('style','css');}})(Prism);const edsCodeBlockCss=":host{display:block;font-family:var(--font-family, 'Courier New', monospace)}pre[class*=\"language-\"]{white-space:pre-wrap;word-break:break-word;}.language{font-weight:bold;text-transform:uppercase}pre{margin:0;border-radius:8px;color:var(--purple-200);overflow:auto}code{font-family:'Courier New', monospace}.token.keyword{color:var(--purple-500)}.token.string{color:var(--green-500)}.token.function{color:var(--cyan-500)}.token.comment{color:var(--grey-700)}.relative{position:relative}.bg-stronger{background-color:var(--grey-900)}.rounded-sm{border-radius:8px}.rounded-xs{border-radius:4px}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.p-0{padding:0rem}.p-12{padding:0.75rem}.p-16{padding:1rem}.p-20{padding:1.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.pl-8{padding-left:0.5rem}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mb-28{margin-bottom:1.75rem}.pb-16{padding-bottom:1rem}.pb-20{padding-bottom:1.25rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.pb-8{padding-bottom:0.5rem}.mt-16{margin-top:1rem}.mt-2{margin-top:0.125rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.w-20{width:1.25rem}.h-20{height:1.25rem}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}";const EdsCodeBlockStyle0=edsCodeBlockCss;const EdsCodeBlock=class{constructor(hostRef){registerInstance(this,hostRef);this.code=undefined;this.language=undefined;this.copied=false;}/**
|
|
770
|
-
* Copies the current code content to the clipboard and sets a temporary copied state.
|
|
771
|
-
*
|
|
772
|
-
* @private
|
|
773
|
-
* @returns {void}
|
|
774
|
-
*/copyToClipboard(){navigator.clipboard.writeText(this.code).then(()=>{this.copied=true;/*const analyticsName = this.createHumanFriendlyAnalyticsName(this.code, this.language);
|
|
775
|
-
sendAnalytics({
|
|
776
|
-
category: 'ui-component',
|
|
777
|
-
parentContext: null,
|
|
778
|
-
tag: this.el.tagName.toLowerCase(),
|
|
779
|
-
name: analyticsName || '',
|
|
780
|
-
action: 'copy'
|
|
781
|
-
});*/setTimeout(()=>this.copied=false,2000);});}/**
|
|
782
|
-
* Utility function that creates a human-friendly analytics name based on the code and language.
|
|
783
|
-
* It uses:
|
|
784
|
-
* - The language (in uppercase)
|
|
785
|
-
* - The number of non-empty lines in the code
|
|
786
|
-
* - The first non-empty line of code (truncated to 30 characters, if needed)
|
|
787
|
-
*
|
|
788
|
-
* returns A descriptive analytics name.
|
|
789
|
-
*//*private createHumanFriendlyAnalyticsName(code: string, language: string): string {
|
|
790
|
-
// Count non-empty lines
|
|
791
|
-
const lines = code.split('\n').filter(line => line.trim() !== '').length;
|
|
792
|
-
|
|
793
|
-
// Find the first non-empty line and trim it
|
|
794
|
-
let firstNonEmptyLine = code.split('\n').find(line => line.trim() !== '');
|
|
795
|
-
firstNonEmptyLine = firstNonEmptyLine ? firstNonEmptyLine.trim() : '';
|
|
796
|
-
|
|
797
|
-
// Truncate the snippet if it’s too long
|
|
798
|
-
if (firstNonEmptyLine.length > 30) {
|
|
799
|
-
firstNonEmptyLine = firstNonEmptyLine.substring(0, 30) + '...';
|
|
800
|
-
}
|
|
801
|
-
|
|
802
|
-
return `CodeBlock:${language.toLowerCase()}|${lines}-line(s)|${firstNonEmptyLine.toLowerCase()}`;
|
|
803
|
-
}*//**
|
|
804
|
-
* Returns the syntax-highlighted HTML for the code.
|
|
805
|
-
* If the provided language is supported by Prism, this method returns the highlighted code.
|
|
806
|
-
* Otherwise, it logs a warning and returns the raw code.
|
|
807
|
-
*
|
|
808
|
-
* @private
|
|
809
|
-
* @returns {string} The highlighted HTML string for the code block.
|
|
810
|
-
*/getHighlightedCode(){if(this.language&&Prism$1.languages[this.language]){return Prism$1.highlight(this.code,Prism$1.languages[this.language],this.language);}// eslint-disable-next-line
|
|
811
|
-
//console.warn(`Unsupported or missing language: ${this.language}`);
|
|
812
|
-
return this.code;// Fallback if language is not provided or unsupported
|
|
813
|
-
}render(){return h("div",{key:'bc74b6be37bcb24700d17b48b5398077e485abd7',class:"relative bg-stronger rounded-sm"},h("div",{key:'db0395bfd55eb3394ab2149c5c436f2a54e8afb0',class:"text-inverse flex justify-between items-center p-8"},this.language?h("span",{class:"f-ui-03"},this.language.toUpperCase()):h("pre",{class:"bg-stronger pl-8",role:"region","aria-label":"Code block without language"},h("code",{innerHTML:this.getHighlightedCode()})),h("span",{key:'628ad41f15f3a38abe4b7c382074c8f5a8679a8c',"aria-hidden":"true",class:"w-20 h-20 mt-8"},h("eds-icon-wrapper",{key:'1c95d57a5d8113d6ab7ebf7da713e058c7cc10f1',icon:this.copied?'success':'copy',onClick:()=>this.copyToClipboard()})),h("span",{key:'a64b2450b631835b6fc2c15047b09ceea5a9fc95',class:"sr-only"},"Copy Code")),this.language&&h("pre",{key:'51945cbee1504625b54362505b60f1bd1784bdda',class:`language-${this.language} bg-stronger pl-8 pb-8`,role:"region","aria-label":`Code block in ${this.language}`},h("code",{key:'55961aa8278177451e13c929ec7f7065afcac93b',innerHTML:this.getHighlightedCode()})));}get el(){return getElement(this);}};EdsCodeBlock.style=EdsCodeBlockStyle0;const edsDropdownCss=".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-shadow:0px 1.5px 2px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0px 1.5px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-inverse{background-color:var(--white)}.border-softest{border:2px solid rgba(0, 0, 0, .05)}.z-10{z-index:10}.z-on-top{z-index:99999}.absolute{position:absolute}.top-full{top:100%}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.gap-y-4{row-gap:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.left-0{left:0rem}.left-1\\/2{left:50%}.left-4{left:0.25rem}.left-\\[4px\\]{left:4px}.right-0{right:0rem}.right-4{right:0.25rem}.right-8{right:0.5rem}";const EdsDropdownStyle0=edsDropdownCss;const EdsDropdown=class{constructor(hostRef){registerInstance(this,hostRef);this.dropdown=createEvent(this,"dropdown",7);this.focusableItems=[];/**
|
|
814
|
-
* Toggles the visibility of the dropdown and manages focus.
|
|
815
|
-
*/this.handleClick=()=>{var _a,_b;this.isOpen=!this.isOpen;if(this.isOpen){// refresh focusables each open in case slot changed
|
|
816
|
-
this.focusableItems=Array.from(((_a=this.panelEl)===null||_a===void 0?void 0:_a.querySelectorAll('a, button, [role="menuitem"]'))||[]);this.focusIndex=this.focusableItems.length?0:-1;this.focusItem();}else {this.closeDropdown();}this.dropdown.emit({expanded:this.isOpen});sendAnalytics({category:'ui-component',parentContext:null,tag:this.host.tagName.toLowerCase(),name:((_b=this.label)===null||_b===void 0?void 0:_b.toLowerCase())||'',action:this.isOpen?'expanded':'collapsed'});};this.icon=undefined;this.label=undefined;this.rounded=false;this.ariaLabel='Open dropdown';this.asNav=true;this.dropdownPos='left';this.dropdownOffset=true;this.intent='tertiary';this.autoClose=true;this.noCloseSelector='[data-dropdown-no-close]';this.isOpen=false;this.focusIndex=-1;}async close(){this.closeDropdown();}/**
|
|
817
|
-
* Closes the dropdown when a click occurs outside of it.
|
|
818
|
-
* @param {Event} e - The click event.
|
|
819
|
-
*/handleWindowClick(e){const path=e.composedPath&&e.composedPath()||[];if(!path.includes(this.host)){this.closeDropdown();this.dropdown.emit({expanded:false});}}/**
|
|
820
|
-
* Handles keyboard navigation and accessibility within the dropdown.
|
|
821
|
-
* @param {KeyboardEvent} event - The keyboard event.
|
|
822
|
-
*/handleKeyDown(event){if(this.isOpen){const key=event.key;switch(key){case'Tab':this.closeDropdown();this.dropdown.emit({expanded:false});break;case'ArrowUp':event.preventDefault();this.focusIndex=(this.focusIndex-1+this.focusableItems.length)%this.focusableItems.length;this.focusItem();break;case'ArrowDown':event.preventDefault();this.focusIndex=(this.focusIndex+1)%this.focusableItems.length;this.focusItem();break;}}}/**
|
|
823
|
-
* Closes the dropdown and resets focus.
|
|
824
|
-
*/closeDropdown(){this.isOpen=false;this.focusIndex=-1;this.dropdown.emit({expanded:false});}/**
|
|
825
|
-
* Sets focus on the currently selected item in the dropdown.
|
|
826
|
-
*/focusItem(){var _a;(_a=this.focusableItems[this.focusIndex])===null||_a===void 0?void 0:_a.focus();}/**
|
|
827
|
-
* Lifecycle method that runs after the component has been added to the DOM.
|
|
828
|
-
* Initializes focusable items within the dropdown.
|
|
829
|
-
*/componentDidLoad(){var _a;this.focusableItems=Array.from(((_a=this.dropdownContent)===null||_a===void 0?void 0:_a.querySelectorAll('a, button'))||[]);}handleHostInternalClick(ev){var _a;if(!this.isOpen||!this.panelEl){return;}const path=((_a=ev.composedPath)===null||_a===void 0?void 0:_a.call(ev))||[];const clickedInsidePanel=path.includes(this.panelEl);if(!clickedInsidePanel){return;}// Check if element has explicit close attribute
|
|
830
|
-
const hasCloseAttribute=path.some(t=>{var _a;const n=t;return (_a=n===null||n===void 0?void 0:n.closest)===null||_a===void 0?void 0:_a.call(n,'[data-dropdown-close]');});// If element has data-dropdown-close, always close regardless of autoClose setting
|
|
831
|
-
if(hasCloseAttribute){setTimeout(()=>this.closeDropdown(),0);return;}// If autoClose is disabled and no explicit close attribute, don't close
|
|
832
|
-
if(!this.autoClose){return;}// Auto-close mode: close unless clicked element opts out
|
|
833
|
-
const shouldNotClose=path.some(t=>{var _a;const n=t;return (_a=n===null||n===void 0?void 0:n.closest)===null||_a===void 0?void 0:_a.call(n,this.noCloseSelector);});if(!shouldNotClose){// Defer to allow the item's own click (e.g., router navigation) to run first
|
|
834
|
-
setTimeout(()=>this.closeDropdown(),0);}}/**
|
|
835
|
-
* Renders the dropdown component and displays its content when open.
|
|
836
|
-
* @returns {JSX.Element} The rendered dropdown component.
|
|
837
|
-
*/render(){return h("div",{key:'ffc4915b2104e3d2dd347900acd897f56910a674',class:"z-focus relative",ref:el=>this.dropdownContent=el},h("eds-button",{key:'ba48bdd7b75fd230bdc2dd564bd477f0349f5426',label:this.label,"aria-label":this.ariaLabel,icon:this.icon,intent:this.intent,onClick:this.handleClick,"aria-expanded":this.isOpen.toString(),"aria-haspopup":"menu"}),h("nav",{key:'a29b57598a2ed8fcc9593c928df9443fd4449481',ref:el=>this.panelEl=el,role:"menu",class:{'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8':true,'left-4':this.dropdownPos==='left'&&this.dropdownOffset,'left-0':this.dropdownPos==='left'&&!this.dropdownOffset,'right-4':this.dropdownPos==='right'&&this.dropdownOffset,'right-0':this.dropdownPos==='right'&&!this.dropdownOffset,'rounded-lg':this.rounded},style:{display:this.isOpen?'block':'none'},"aria-label":"Dropdown","aria-hidden":!this.isOpen},h("slot",{key:'ddf003345ef5181b968b4bfd8962805d09d15e89'})));}get host(){return getElement(this);}};EdsDropdown.style=EdsDropdownStyle0;// utils/validators.ts
|
|
838
|
-
function validateField(name,value,type,required,maxLength,min,max){const errors=[];if(required&&!value){//errors.push(`${name} is required.`);
|
|
839
|
-
const shortName=name.length>30?`${name.slice(0,27)}…`:name;errors.push(`“${shortName}” is required.`);}if(type==='number'){const parsed=typeof value==='number'?value:parseFloat(value);if(isNaN(parsed)){errors.push(`${name} must be a valid number.`);}else {if(typeof min==='number'&&parsed<min){errors.push(`${name} must be greater than or equal to ${min}.`);}if(typeof max==='number'&&parsed>max){errors.push(`${name} must be less than or equal to ${max}.`);}}}if(maxLength&&typeof value==='string'&&value.length>maxLength){errors.push(`${name} must be at most ${maxLength} characters.`);}if(type==='email'&&value&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.toString())){errors.push('Invalid email format.');}return errors;}function validateFieldGroup(name,required,formEl){// Find all eds-input-field components that contain inputs with the given name.
|
|
840
|
-
const groupFields=Array.from(formEl.querySelectorAll('eds-input-field')).filter(edsField=>{var _a,_b;return ((_b=(_a=edsField.shadowRoot)===null||_a===void 0?void 0:_a.querySelectorAll(`input[name="${name}"]`))===null||_b===void 0?void 0:_b.length)>0;});// Collect all input elements with the matching name inside those components.
|
|
841
|
-
const groupElements=groupFields.flatMap(edsField=>{var _a;return Array.from(((_a=edsField.shadowRoot)===null||_a===void 0?void 0:_a.querySelectorAll(`input[name="${name}"]`))||[]);});// Check if at least one input is checked.
|
|
842
|
-
const isChecked=groupElements.some(el=>el.checked);const errors=[];if(required&&!isChecked){errors.push(`At least one option in ${name} is required.`);}return errors;}function validateSingleBox(name,required,formEl){var _a;const errors=[];// Find the eds-input-field component containing the input with the given name.
|
|
843
|
-
const edsField=Array.from(formEl.querySelectorAll('eds-input-field')).find(field=>{var _a;return (_a=field.shadowRoot)===null||_a===void 0?void 0:_a.querySelector(`[name="${name}"]`);});// If no such field is found and it's required, return an error.
|
|
844
|
-
if(!edsField){if(required){errors.push(`${name} is required.`);}return errors;}// Query within the component's shadow root.
|
|
845
|
-
const inputEl=(_a=edsField.shadowRoot)===null||_a===void 0?void 0:_a.querySelector(`[name="${name}"]`);if(required&&inputEl&&!inputEl.checked){errors.push(`${name} is required.`);}return errors;}/**
|
|
846
|
-
* Finds the first input element for a given field name inside eds-input-field components.
|
|
847
|
-
*/function findFieldElement(formEl,name){const elements=Array.from(formEl.querySelectorAll('eds-input-field'));for(const element of elements){if(element.shadowRoot){const input=element.shadowRoot.querySelector(`[name="${name}"]`);if(input){return input;}}}return null;}function findRatingElement(formEl){const elements=Array.from(formEl.querySelectorAll('eds-rating'));for(const element of elements){return element;}return null;}function findNpsElement(formEl){const elements=Array.from(formEl.querySelectorAll('eds-nps'));for(const element of elements){return element;}return null;}/**
|
|
848
|
-
* Validates all fields and returns an object containing the errors and a flag indicating any errors.
|
|
849
|
-
*/function validateFormFields(parsedFields,formEl,values,// eslint-disable-next-line
|
|
850
|
-
isFieldVisible){const errors={};let hasError=false;parsedFields.forEach(field=>{var _a;// Only validate fields that are visible.
|
|
851
|
-
if(!isFieldVisible(field,values)){// If a field is hidden, clear its error.
|
|
852
|
-
delete errors[field.name];return;}if(field.type!=='hidden'){if((field.type==='checkbox'||field.type==='radio')&&!field.options){// Single checkbox or radio without multiple options
|
|
853
|
-
const fieldErrors=validateSingleBox(field.name,field.required,formEl);if(fieldErrors.length>0){errors[field.name]=fieldErrors;hasError=true;}}else if(field.options&&(field.type==='checkbox'||field.type==='radio')){// Checkbox or radio group with options
|
|
854
|
-
const fieldErrors=validateFieldGroup(field.name,field.required,formEl);if(fieldErrors.length>0){errors[field.name]=fieldErrors;hasError=true;}}else if(field.type==='rating'){const inputEl=findRatingElement(formEl);if(inputEl){const raw=inputEl.getAttribute('selected-rating');const value=raw!==null?parseInt(raw,10):0;const fieldErrors=validateField(field.name,value,field.type,field.required);if(fieldErrors.length>0){errors[field.name]=fieldErrors;hasError=true;}}}// NPS type
|
|
855
|
-
else if(field.type==='nps'){const npsEl=findNpsElement(formEl);if(npsEl&&npsEl.shadowRoot){const raw=(_a=npsEl.shadowRoot.querySelector('eds-button[tabindex="0"]'))===null||_a===void 0?void 0:_a.getAttribute('aria-label');const parsed=raw!==null?parseInt(raw,10):NaN;const value=Number.isInteger(parsed)&&parsed>=0&&parsed<=10?parsed:NaN;if(isNaN(value)){// eslint-disable-next-line
|
|
856
|
-
if(field.required){errors[field.name]=['This field is required.'];hasError=true;}}}else if(field.required){// No NPS component found but required
|
|
857
|
-
errors[field.name]=['This field is required.'];hasError=true;}return;}else {// For all other types, find the first matching element.
|
|
858
|
-
const inputEl=findFieldElement(formEl,field.name);if(inputEl){const value=inputEl.value;const fieldErrors=validateField(field.name,value,field.type,field.required,field.maxlength,field.min,field.max);if(fieldErrors.length>0){errors[field.name]=fieldErrors;hasError=true;}}}}});return {errors,hasError};}/**
|
|
859
|
-
* Validates a field based on its type and returns an array of error messages.
|
|
860
|
-
* @param field - The field configuration object.
|
|
861
|
-
* @param value - The input value (if applicable).
|
|
862
|
-
* @param formEl - The form element used for DOM queries.
|
|
863
|
-
*/function validateInputField(field,value,formEl){if(field.type==='checkbox'||field.type==='radio'){if(field.options){return validateFieldGroup(field.name,field.required,formEl);}return validateSingleBox(field.name,field.required,formEl);}return validateField(field.name,value,field.type,field.required,field.maxlength,field.min,field.max);}/**
|
|
864
|
-
* Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
|
|
865
|
-
*/function getFormInitData({initData,parsedFields,currentValues//formEl,
|
|
866
|
-
//isFieldVisible
|
|
867
|
-
}){// Pass 1: Update state for all fields.
|
|
868
|
-
const updatedValues=Object.assign({},currentValues);parsedFields.forEach(field=>{const value=initData[field.name];if(value!==undefined){updatedValues[field.name]=value;}});return {updatedValues};}const edsFormCss=".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.mt-20{margin-top:1.25rem}.mt-32{margin-top:2rem}.mb-32{margin-bottom:2rem}.pt-28{padding-top:1.75rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.shadow-hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.rounded-lg{border-radius:16px}.px-16{padding-left:1rem;padding-right:1rem}.pb-16{padding-bottom:1rem}.p-32{padding:2rem}";const EdsFormStyle0=edsFormCss;const EdsForm=class{constructor(hostRef){registerInstance(this,hostRef);this.form=createEvent(this,"form",7);this.name='eds-form';this.title='Form Title';this.description='Form Description';this.setFormUrl=true;this.formBtn=true;this.formBtnLabel='Submit';this.buttonIntent='primary';this.errorMessage='Some fields in your form are incorrect.';this.fields=[];this.groups=[];this.initData={};this.formStyle='default';this.values={};this.isSubmitting=false;this.hasError=false;this.errors={};this.parsedFields=[];this.parsedGroups=[];}async setData(newData){this.populateFormWithInitData(newData);}componentWillLoad(){this.parseFields(this.fields);this.parseGroups(this.groups);// Emit context for each eds-link element after the component is fully loaded
|
|
869
|
-
const links=this.el.querySelectorAll('eds-button');links.forEach(link=>{this.emitContext(link);});}componentDidLoad(){if(this.shouldFormProcessInitData){this.populateFormWithInitData(this.initData);}}get shouldFormProcessInitData(){return !!this.initData;}parseFields(newValue){this.parsedFields=parseData(newValue);}parseGroups(newVal){this.parsedGroups=parseData(newVal);}emitContext(linkElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:null}});linkElement.dispatchEvent(event);}isFieldVisible(field){if(!field.condition){return true;}const actual=this.values[field.condition.field];const expected=field.condition.value;// Handle undefined/null/empty
|
|
870
|
-
if(actual==null){return expected==null||expected==='';}// Handle arrays (multi-select, checkboxes)
|
|
871
|
-
if(Array.isArray(actual)){return actual.some(val=>this.normalizeValue(val)===this.normalizeValue(expected));}// Handle comma-separated strings (from checkboxes stored as "val1,val2")
|
|
872
|
-
if(typeof actual==='string'&&actual.includes(',')){const values=actual.split(',').map(v=>v.trim());return values.some(val=>this.normalizeValue(val)===this.normalizeValue(expected));}// Standard comparison with normalization
|
|
873
|
-
return this.normalizeValue(actual)===this.normalizeValue(expected);}normalizeValue(value){if(value==null){return '';}if(typeof value==='boolean'){return value?'true':'false';}if(typeof value==='number'){return String(value);}if(typeof value==='string'){return value.trim().toLowerCase();}return String(value).trim().toLowerCase();}validateForm(){const{errors,hasError}=validateFormFields(this.parsedFields,this.formEl,this.values,(field,_values)=>// Use a temporary object with the condition to reuse isFieldVisible logic
|
|
874
|
-
this.isFieldVisible(field));this.errors=errors;this.hasError=hasError;}populateFormWithInitData(initData){const{updatedValues}=getFormInitData({initData,parsedFields:this.parsedFields,currentValues:this.values,formEl:this.formEl,isFieldVisible:(field,values)=>{if(!field.condition){return true;}const actual=values[field.condition.field];const expected=field.condition.value;// Handle undefined/null/empty
|
|
875
|
-
if(actual==null){return expected==null||expected==='';}// Handle arrays
|
|
876
|
-
if(Array.isArray(actual)){return actual.some(val=>this.normalizeValue(val)===this.normalizeValue(expected));}// Handle comma-separated strings
|
|
877
|
-
if(typeof actual==='string'&&actual.includes(',')){const values=actual.split(',').map(v=>v.trim());return values.some(val=>this.normalizeValue(val)===this.normalizeValue(expected));}return this.normalizeValue(actual)===this.normalizeValue(expected);}});this.values=updatedValues;}getFormData(){const formData=new FormData();// Add the form name
|
|
878
|
-
formData.append('form_name',this.name);// Add the form URL
|
|
879
|
-
if(this.setFormUrl&&typeof window!=='undefined'){formData.set('form_url',window.location.href);}// Get all input elements within `eds-input-field`
|
|
880
|
-
const elements=Array.from(this.formEl.querySelectorAll('eds-input-field'));elements.forEach(element=>{if(element.shadowRoot){// Get input/textarea/select from the shadow DOM
|
|
881
|
-
const input=element.shadowRoot.querySelector('input, textarea, select');if(input&&input.name){if(input.type==='checkbox'||input.type==='radio'){// Handle checkboxes and radio buttons
|
|
882
|
-
const checkboxes=Array.from(element.shadowRoot.querySelectorAll(`input[name="${input.name}"]:checked`));const values=checkboxes.map(checkbox=>checkbox.value);formData.append(input.name,values.join(','));// Join multiple values with a comma
|
|
883
|
-
}else if(input.type==='file'){// Handle file uploads.
|
|
884
|
-
const fileInput=input;if(fileInput.files&&fileInput.files.length>0){// If multiple files are allowed, you can append them all.
|
|
885
|
-
Array.from(fileInput.files).forEach(file=>{// You can either append each file under the same name (if your backend expects an array)
|
|
886
|
-
// or you can give them unique names. Here we use the same name.
|
|
887
|
-
formData.append(fileInput.name,file);});}}else {// Handle other input types
|
|
888
|
-
formData.append(input.name,input.value);}}}});return formData;}makeFormData(){var _a;const formData=new FormData();// Add the form name
|
|
889
|
-
formData.append('form_name',this.name);// Add the form URL
|
|
890
|
-
if(this.setFormUrl&&typeof window!=='undefined'){formData.set('form_url',window.location.href);}Object.keys(this.values).forEach(key=>{// Append each key-value pair to the FormData object.
|
|
891
|
-
formData.append(key,this.values[key]);});// 2) Only do the (slower) DOM scan if we actually have file fields in the config
|
|
892
|
-
const hasFileField=(_a=this.parsedFields)===null||_a===void 0?void 0:_a.some(f=>(f===null||f===void 0?void 0:f.type)==='file');if(hasFileField&&this.formEl){// Find file inputs inside each eds-input-field's shadowRoot
|
|
893
|
-
const hosts=Array.from(this.formEl.querySelectorAll('eds-input-field'));hosts.forEach(host=>{const root=host.shadowRoot;if(!root){return;}const fileInputs=Array.from(root.querySelectorAll('input[type="file"][name]'));console.log(fileInputs);fileInputs.forEach(fi=>{const name=fi.name;const files=fi.files?Array.from(fi.files):[];if(files.length>0){// Append each file under the same field name (backend can use request.files.getlist(name))
|
|
894
|
-
files.forEach(file=>formData.append(name,file));}});});// (Optional) mark that this payload includes files (handy in logs / policies)
|
|
895
|
-
// formData.set('_has_files', '1');
|
|
896
|
-
}/*formData.forEach((value, key) => {
|
|
897
|
-
if (value instanceof File) {
|
|
898
|
-
console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
|
|
899
|
-
} else {
|
|
900
|
-
console.log(`Field: ${key}, Value: ${value}`);
|
|
901
|
-
}
|
|
902
|
-
});*/return formData;}handleChange(e,field){const target=e.target;let newValue=target.value;if(target.type==='checkbox'){// Get the current comma separated string or default to an empty string.
|
|
903
|
-
const currentStr=this.values[field.name]||'';// Convert the string into an array. If the string is empty, we get an empty array.
|
|
904
|
-
let valuesArray=currentStr?currentStr.split(','):[];if(target.checked){// Only add if it's not already in the array.
|
|
905
|
-
if(!valuesArray.includes(target.value)){valuesArray.push(target.value);}}else {// Remove the value from the array if the checkbox is unchecked.
|
|
906
|
-
valuesArray=valuesArray.filter(item=>item!==target.value);}newValue=valuesArray.join(',');}else if(target.type==='radio'){if(!target.checked){return;}// Only react to the selected radio
|
|
907
|
-
newValue=target.value;}this.values=Object.assign(Object.assign({},this.values),{[field.name]:newValue});// If it’s the password field, return here for no event emission
|
|
908
|
-
if(field.name==='password'){return;}// Emit the updated form state.
|
|
909
|
-
this.form.emit({event:'change',field:field.name,value:newValue,message:`${field.name} updated`//data: this.makeFormData()
|
|
910
|
-
});}handleInput(e,field){const target=e.target;if(target.type==='radio'&&!target.checked){return;}const newValue=target.value;// Update the field's value in state.
|
|
911
|
-
//this.values = { ...this.values, [field.name]: target.value };
|
|
912
|
-
// Create a copy of the current errors.
|
|
913
|
-
const newErrors=Object.assign({},this.errors);// Use the utility to validate the field.
|
|
914
|
-
const fieldErrors=validateInputField(field,target.value,this.formEl);if(fieldErrors.length>0){newErrors[field.name]=fieldErrors;}else {delete newErrors[field.name];}// Update the errors state and the hasError flag.
|
|
915
|
-
this.errors=newErrors;this.hasError=Object.keys(newErrors).length>0;// Emit the updated form state.
|
|
916
|
-
this.form.emit({event:'input',field:field.name,value:newValue,message:`${field.name} updated`//data: this.makeFormData()
|
|
917
|
-
});}handleRating(e,field){const rating=e.detail;this.values=Object.assign(Object.assign({},this.values),{[field.name]:rating});const newErrors=Object.assign({},this.errors);if(field.required&&rating===0){newErrors[field.name]=['This field is required'];}else {delete newErrors[field.name];}this.errors=newErrors;this.hasError=Object.keys(newErrors).length>0;this.form.emit({event:'change',field:field.name,value:rating,message:`${field.name} updated`});}handleNPS(e,field){const score=e.detail;this.values=Object.assign(Object.assign({},this.values),{[field.name]:score});const newErrors=Object.assign({},this.errors);if(field.required&&score===null){newErrors[field.name]=['This field is required'];}else {delete newErrors[field.name];}this.errors=newErrors;this.hasError=Object.keys(newErrors).length>0;this.form.emit({event:'change',field:field.name,value:score,message:`${field.name} updated`});}handleSubmit(e){var _a,_b;e===null||e===void 0?void 0:e.preventDefault();if(this.isSubmitting){return;}this.isSubmitting=true;this.validateForm();if(this.hasError){this.isSubmitting=false;this.form.emit({event:'submit',validated:false,success:false,message:this.errorMessage//data: this.makeFormData()
|
|
918
|
-
});// Emit form status submit false validation error
|
|
919
|
-
sendAnalytics({category:'ui-component',parentContext:null,tag:this.el.tagName.toLowerCase(),name:`${(_a=this.formBtnLabel)===null||_a===void 0?void 0:_a.toLowerCase()}/non-validated`||'',action:'click'});return;}// Log each entry in FormData to see file details
|
|
920
|
-
/*formData.forEach((value, key) => {
|
|
921
|
-
if (value instanceof File) {
|
|
922
|
-
console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
|
|
923
|
-
} else {
|
|
924
|
-
console.log(`Field: ${key}, Value: ${value}`);
|
|
925
|
-
}
|
|
926
|
-
});*/this.form.emit({event:'submit',success:true,validated:true,message:'Form data validated successfully'//data: this.getFormData()
|
|
927
|
-
});sendAnalytics({category:'ui-component',parentContext:null,tag:this.el.tagName.toLowerCase(),name:`${(_b=this.formBtnLabel)===null||_b===void 0?void 0:_b.toLowerCase()}/validated`||'',action:'click'});// Reset form states
|
|
928
|
-
this.errors={};this.formEl.reset();this.isSubmitting=false;return;}get groupedFields(){const map={};// initialize buckets for each declared group
|
|
929
|
-
this.parsedGroups.forEach(g=>map[g.id]=[]);// always keep an ungrouped bucket
|
|
930
|
-
map['__ungrouped']=[];// only bucket fields that are currently visible
|
|
931
|
-
this.parsedFields.forEach(f=>{if(!this.isFieldVisible(f)){return;}const gid=f.groupId||'__ungrouped';if(!map[gid]){map[gid]=[];}map[gid].push(f);});return map;}renderField(field){var _a,_b,_c;if(!this.isFieldVisible(field)){return null;}// 1) Handle rating
|
|
932
|
-
if(field.type==='rating'){// pull the current value (or zero)
|
|
933
|
-
const val=this.values[field.name]||0;return h("div",{class:"form-group rating-field",key:field.name},h("div",{class:"flex justify-between"},field&&h("eds-input-label",{name:`rating-${field.name}`,label:field.label,disabled:field.disabled,required:field.required})),h("eds-rating",{id:`rating-${field.name}`,"rating-type":field.ratingType,"rating-count":field.ratingCount,"selected-rating":val,onRating:e=>this.handleRating(e,field)}),h("div",{class:"mt-6"},h("eds-input-footer",{id:`${field.name}-footer`,name:field.name,message:field.message,"error-message":(_a=this.errors[field.name])===null||_a===void 0?void 0:_a.join('<br/>'),error:!!this.errors[field.name],link:field.link})));}else if(field.type==='nps'){return h("div",{class:"form-group nps-field",key:field.name},h("div",{class:"flex justify-between"},field&&h("eds-input-label",{name:`nps-${field.name}`,label:field.question,disabled:field.disabled,required:field.required})),h("eds-nps",{id:`nps-${field.name}`,"right-label":field.rightLabel,"left-label":field.leftLabel,onNps:e=>this.handleNPS(e,field)}),h("div",{class:"mt-6"},h("eds-input-footer",{id:`${field.name}-footer`,name:field.name,"error-message":(_b=this.errors[field.name])===null||_b===void 0?void 0:_b.join('<br/>'),error:!!this.errors[field.name]})));}return h("eds-input-field",{key:field.name,name:field.name,label:field.label,placeholder:field.placeholder,type:field.type,value:this.values[field.name],required:field.required,hint:field.hint,message:field.message,link:field.link,error:!!this.errors[field.name],errorMessage:(_c=this.errors[field.name])===null||_c===void 0?void 0:_c.join('<br/>'),options:field.options,onInput:e=>this.handleInput(e,field),onChangeNative:e=>this.handleChange(e,field)});}async getData(){return this.makeFormData();}render(){const hiddenFields=this.parsedFields.filter(field=>field.type==='hidden');//const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
|
|
934
|
-
const buckets=this.groupedFields;// build the shadow/bg classes if formStyle="shadow"
|
|
935
|
-
const styleClasses=this.formStyle==='shadow'?'bg-inverse effect-shadow shadow-hover border-softer relative rounded-lg border-2 p-32':'';return h("form",{key:'a4b6cf51242567739fc3ff2da482c41edb4e4e57',class:styleClasses,ref:el=>this.formEl=el,autocomplete:"on",onSubmit:this.handleSubmit},h("div",{key:'5f7e1d618f8a10a1cd6aa8d512c04064a484cd93',class:"flex flex-col gap-y-24"},this.title&&h("span",{key:'283d752d3e9f4ede0f50493ba9e5010376ebfb1f',role:"heading",class:"f-heading-04"},this.title),this.description&&h("span",{key:'bd5866482b87bdc86a59594b884a9b81c676afdb',class:"f-body-02 text-light"},this.description),h("slot",{key:'b2de746ccf8743fdef545a70ab111dfff0d7912f'})),hiddenFields.map((field,index)=>h("eds-input",{key:index,type:"hidden",name:field.name,value:field.value})),this.parsedGroups.filter(g=>Array.isArray(buckets[g.id])&&buckets[g.id].length>0).map(g=>h("div",{class:"mt-32",key:g.id},h("span",{class:"f-body-02"},h("b",null,g.title)),h("div",{class:"border-group mt-32 mb-32 flex flex-col gap-y-24"},buckets[g.id].map(f=>this.renderField(f))))),h("div",{key:'917c5bd2e6048a91487f0a66bd0426e529295f9e',class:"flex flex-col mt-32 gap-y-24"},buckets['__ungrouped'].map(f=>this.renderField(f))),this.formBtn&&h("div",{key:'96abbd19ea2869c21146f0b37da7ff6b89fbf66c',class:"mt-32"},h("eds-button",{key:'066348df32cf27fc6e56c94b9d5c455bc51b4adf',intent:this.buttonIntent,label:this.formBtnLabel,disabled:this.isSubmitting,loading:this.isSubmitting,onClick:()=>this.handleSubmit()})));}get el(){return getElement(this);}static get watchers(){return {"fields":["parseFields"],"groups":["parseGroups"]};}};EdsForm.style=EdsFormStyle0;const edsGlobalSearchCss=":host{display:block;width:100%}p{margin:0}ol,ul,menu{list-style:none;margin:0;padding:0}.search-wrapper{position:relative;width:100%}.search-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:white;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);max-height:500px;overflow:hidden;z-index:9999;display:flex;flex-direction:column}.dropdown-state{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;color:#616161;font-size:14px}.dropdown-results{list-style:none;margin:0;overflow-y:auto;overflow-x:hidden;max-height:440px}.result-item{padding:10px 14px;cursor:pointer;transition:background-color 0.15s ease;border-left:3px solid transparent;overflow:hidden;word-wrap:break-word;word-break:break-word}.result-item:hover,.result-item--selected{background-color:var(--grey-200);border-left-color:var(--green-600)}.result-header{display:flex;align-items:center;justify-content:space-between}.result-snippet{font-size:13px;color:#616161;line-height:1.4;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.dropdown-footer{border-top:1px solid #e0e0e0;padding:8px 16px;background:#fafafa;flex-shrink:0}.footer-hint{font-size:11px;color:#757575;display:flex;align-items:center;gap:4px;flex-wrap:wrap}kbd{display:inline-block;padding:2px 5px;font-size:10px;font-family:monospace;line-height:1;color:#424242;background-color:#f5f5f5;border:1px solid #bdbdbd;border-radius:3px;box-shadow:0 1px 0 rgba(0, 0, 0, 0.1)}.dropdown-results::-webkit-scrollbar{width:8px}.dropdown-results::-webkit-scrollbar-track{background:#f5f5f5}.dropdown-results::-webkit-scrollbar-thumb{background:#bdbdbd;border-radius:4px}.dropdown-results::-webkit-scrollbar-thumb:hover{background:#9e9e9e}.flex{display:flex}.inline-flex{display:inline-flex}.text-center{text-align:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-error{color:var(--red-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-4{margin-left:0.25rem}.ml-8{margin-left:0.5rem}.ml-16{margin-left:1rem}.p-16{padding:1rem}.p-64{padding:4rem}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}";const EdsGlobalSearchStyle0=edsGlobalSearchCss;const EdsGlobalSearch=class{constructor(hostRef){registerInstance(this,hostRef);this.resultSelected=createEvent(this,"resultSelected",7);this.searchClosed=createEvent(this,"searchClosed",7);this.handleInput=event=>{var _a;const target=event.target;this.query=target.value;if(this.debounceTimer){clearTimeout(this.debounceTimer);}if(!this.query.trim()){this.results=[];this.hasSearched=false;this.showDropdown=false;return;}sendAnalytics({category:'shared-ui',parentContext:null,tag:this.el.tagName.toLowerCase(),name:`search-input: ${(_a=this.query)===null||_a===void 0?void 0:_a.toLowerCase()}`||'unknow seach input query',action:'click'});this.debounceTimer=window.setTimeout(()=>{this.runSearch();},this.debounceDelay);};this.apiEndpoint='/api/v1/global-search';this.placeholder='Search Handbook + Design...';this.limit=20;this.debounceDelay=300;this.query='';this.results=[];this.loading=false;this.error='';this.hasSearched=false;this.showDropdown=false;this.selectedIndex=-1;}componentDidLoad(){// Focus input if needed
|
|
936
|
-
if(this.inputRef){this.inputRef.focus();}}disconnectedCallback(){if(this.debounceTimer){clearTimeout(this.debounceTimer);}}handleDocumentClick(event){const path=event.composedPath();if(!path.includes(this.el)){this.showDropdown=false;this.selectedIndex=-1;}}handleKeydown(event){if(!this.showDropdown||this.results.length===0){if(event.key==='Escape'){this.searchClosed.emit();}return;}switch(event.key){case'ArrowDown':event.preventDefault();this.selectedIndex=Math.min(this.selectedIndex+1,this.results.length-1);this.scrollToSelected();break;case'ArrowUp':event.preventDefault();this.selectedIndex=Math.max(this.selectedIndex-1,-1);this.scrollToSelected();break;case'Enter':event.preventDefault();if(this.selectedIndex>=0&&this.selectedIndex<this.results.length){this.selectResult(this.results[this.selectedIndex]);}break;case'Escape':this.showDropdown=false;this.selectedIndex=-1;this.searchClosed.emit();break;}}async runSearch(){var _a;const query=this.query.trim();if(!query){this.results=[];this.hasSearched=false;this.showDropdown=false;return;}this.loading=true;this.error='';try{const response=await fetch(`${this.apiEndpoint}?q=${encodeURIComponent(query)}&limit=${this.limit}`);if(!response.ok){throw new Error('Search failed');}const data=await response.json();this.results=(_a=data.items)!==null&&_a!==void 0?_a:[];this.hasSearched=true;this.showDropdown=true;this.selectedIndex=-1;}catch(err){//console.error('Search error:', err);
|
|
937
|
-
this.error='Search failed. Please try again.';this.results=[];this.showDropdown=true;}finally{this.loading=false;}}selectResult(result){this.resultSelected.emit(result);this.searchClosed.emit();sendAnalytics({category:'shared-ui',parentContext:null,tag:this.el.tagName.toLowerCase(),name:`search-select: ${result.url}`||'unknow search result selection',action:'click'});window.open(result.url,'_blank','noopener,noreferrer');}scrollToSelected(){if(this.selectedIndex>=0&&this.dropdownRef){const selectedItem=this.dropdownRef.querySelector(`[data-index="${this.selectedIndex}"]`);if(selectedItem){selectedItem.scrollIntoView({block:'nearest',behavior:'smooth'});}}}stripHtml(html){const div=document.createElement('div');div.innerHTML=html;return div.textContent||div.innerText||'';}get hasResults(){return this.results.length>0;}get showEmpty(){return this.hasSearched&&!this.loading&&!this.hasResults&&this.query.trim();}render(){return h("div",{key:'be8f46caa1d12a034401686c9860b87032652322',class:"search-wrapper"},h("eds-input-field",{key:'c31ac27a5e9f97729da8f7168e22ad09205ffce0',icon:"search","input-id":"search-global",type:"text",name:"search-box-global",placeholder:this.placeholder,value:this.query,onInput:this.handleInput}),this.showDropdown&&h("div",{key:'57b87393636913be24856bedc805e180171f084e',class:"search-dropdown",ref:el=>this.dropdownRef=el},this.loading&&h("div",{key:'3ddb78e5a734d69b581e64ee825d12574f98574d',class:"flex text-center justify-center p-64"},h("eds-spinner",{key:'178c99535ce61b320fd70ab1f3aeb8408c868fe3',variant:"primary",size:"sm"})),this.error&&!this.loading&&h("div",{key:'87feb37ffec93fa12185cd1fffb5c4f8ac54cd55',class:"flex text-center justify-center p-16"},h("span",{key:'07544fe95721c9e0898364f3bdcfc0b1ca79a48d',class:"text-error f-body-02"},this.error)),this.showEmpty&&h("div",{key:'6595178cb14ce5e21cdb15f96e039975a8af0c67',class:"dropdown-state"},h("eds-icon-wrapper",{key:'f5b614218bb6ef642c3d1f4c7d41f56f28319a9d',icon:"search"}),h("div",{key:'857671d7783d8fe854e6b3203a3755d24f337e5d'},h("p",{key:'89bae3bfb4efa63e777121088a59d873652de4e9',class:"f-body-02"},"No results found"),h("p",{key:'1a951b1a6f0daf7506e6e7892a211f92d95b94d4',class:"f-ui-04 text-lightest"},"Try different keywords"))),this.hasResults&&!this.loading&&h("ul",{key:'1c1711dc4332d70cefe965dcfeeabc3c6745ce4d',class:"dropdown-results"},this.results.map((result,index)=>h("li",{key:result.id,"data-index":index,class:{'result-item':true,'result-item--selected':index===this.selectedIndex},onClick:()=>this.selectResult(result),onMouseEnter:()=>this.selectedIndex=index},h("div",{class:"result-header"},h("span",{class:"f-body-02"},result.title)),h("div",{class:"inline"},h("eds-tag",{intent:"accent",label:result.source}),result.section&&h("span",{class:"result-badge"},result.section),h("span",{class:"f-ui-03-light text-lighter ml-8"},result.url)),result.snippet&&h("p",{class:"result-snippet"},this.stripHtml(result.snippet))))),this.hasResults&&!this.loading&&h("div",{key:'26e172b579f71b7096481994c0a4af80d3e416d3',class:"dropdown-footer"},h("span",{key:'57a6432125472aaed3b7b46c106aeec0d0a5ee50',class:"footer-hint"},h("kbd",{key:'c8ca5d4b1a2e8f59665290ab78499f8db431a2e9'},"\u2191")," ",h("kbd",{key:'89a6520e51bed33cfc37b892480af44e5b77a9c3'},"\u2193")," navigate \u2022 ",h("kbd",{key:'4173b9ec77d52d4570e016c3366e27fef225ccb0'},"\u21B5")," select \u2022 ",h("kbd",{key:'7f118c184acf52edd545e1f97b4ca991eaa1aa1f'},"esc")," close"))));}get el(){return getElement(this);}};EdsGlobalSearch.style=EdsGlobalSearchStyle0;const edsHeaderCss=".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.z-10{z-index:10}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hidden{display:none}.gap-x-2{-moz-column-gap:0.125rem;column-gap:0.125rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.after\\:effect-opacity::after{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.whitespace-nowrap{white-space:nowrap}.\\!text-current{color:currentColor !important}.overflow-hidden{overflow:hidden}.after\\:\\!border-transparent::after{border-color:var(--transparent) !important}.hover\\:after\\:\\!border-transparent:hover::after{border-color:var(--transparent) !important}.after\\:opacity-0::after{opacity:0}.hover\\:after\\:opacity-100:hover::after{opacity:1}.px-16{padding-left:1rem;padding-right:1rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}}";const EdsHeaderStyle0=edsHeaderCss;const EdsHeader=class{constructor(hostRef){registerInstance(this,hostRef);this.toggleheadermenu=createEvent(this,"toggleheadermenu",7);this.homeUrl='/';this.links=undefined;this.headerVariant='default';this.menuEnabled=false;this.isMenuOpen=false;this.isUserMenuOpen=false;}componentDidLoad(){var _a,_b;const links=(_b=(_a=this.hostEl.shadowRoot)===null||_a===void 0?void 0:_a.querySelectorAll('eds-link'))!==null&&_b!==void 0?_b:[];links.forEach(link=>this.emitContext(link));}emitContext(linkElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.hostEl.tagName.toLowerCase(),identifier:null}});linkElement.dispatchEvent(event);}handleToggleMenu(){this.toggleheadermenu.emit(!this.isMenuOpen);}toggleUserMenu(){this.isUserMenuOpen=!this.isUserMenuOpen;}get parsedLinks(){return parseData(this.links);}render(){// Define classes based on headerVariant
|
|
938
|
-
const variantClasses={default:'text-default bg-dark',inverse:'text-default bg-inverse',strong:'text-inverse bg-strongest'};const classes=variantClasses[this.headerVariant]||variantClasses.default;// Logo color variant: default and inverse use 'color', strong uses 'color-white'
|
|
939
|
-
const logoType=this.headerVariant==='strong'?'color-white':'color';return h("header",{key:'cf272ed6242b2effa3027081d72b58025c49d055',role:"banner",class:`flex items-center justify-between relative z-10 ${classes}`},h("div",{key:'16f81e55c3aa28beabfead914488ce1fd70b408d',class:"mr-auto w-[200px] h-[85px]"},h("eds-logo",{key:'0961fb91dff26c457833b67ef963d60a9902a916',type:logoType,href:this.homeUrl})),this.parsedLinks&&h("nav",{key:'a034d1bfc21da2245b3c91a2f91f092476d67f97',role:"navigation","aria-label":"Primary",class:"absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex"},h("ul",{key:'06ebd9012b829a30f7cdc27f417116a21d2bfc2f',class:"flex gap-x-16"},this.parsedLinks.map(link=>h("eds-link",{label:link.label,"aria-label":link.label,url:link.url,intent:"strong",size:"large",icon:link.icon,external:link.external,"extra-class":"after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100"})))),h("slot",{key:'68c34af928ee215329d354ca1a5ef7850d1112cf',name:"actions"}),this.menuEnabled&&h("div",{key:'cb4cd94fbf5ebbd770631066f2f69f8ac50a3f5f',class:"md:hidden flex overflow-hidden px-16"},h("eds-button",{key:'8f2aa4d59705e9410a0fa8b10c9f348fcfe73db3',"aria-label":"Menu",intent:this.headerVariant==='default'?'ghost':'ghostInverse',icon:"menu",size:"small",onClick:()=>this.handleToggleMenu()})));}get hostEl(){return getElement(this);}};EdsHeader.style=EdsHeaderStyle0;const EdsIconWrapper=class{constructor(hostRef){registerInstance(this,hostRef);this.TagName=null;this.icon='arrow-right';this.class='';this.IconComponent=null;}componentWillLoad(){this.loadIconComponent(this.icon);}iconChanged(newValue){this.loadIconComponent(newValue);}async loadIconComponent(iconName){try{// Dynamically import the Stencil icon component based on the icon name
|
|
940
|
-
this.IconComponent=`eds-icon-${iconName}`;}catch(error){//console.error(`Failed to load icon component: ${iconName}`, error);
|
|
941
|
-
this.IconComponent=`eds-icon-unknown`;}}render(){const IconComponent=this.IconComponent;return IconComponent?h(IconComponent,{class:this.class}):null;}static get watchers(){return {"icon":["iconChanged"]};}};const edsImgCss="/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block;\n /* 1 */\n vertical-align: middle;\n /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n/* endregion */\n/* region BG */\n.effect-bg-pattern {\n position: relative;\n z-index: 1;\n\n &::before {\n position: absolute;\n content: '';\n z-index: -1;\n inset: 0;\n background-color: rgba(208, 208, 208, 0.75);\n opacity: 0.75;\n background-image: repeating-linear-gradient(45deg, #F5F5F5 25%, transparent 25%, transparent 75%, #F5F5F5 75%, #F5F5F5), repeating-linear-gradient(45deg, #F5F5F5 25%, #D0D0D0 25%, #D0D0D0 75%, #F5F5F5 75%, #F5F5F5);\n background-position: 0 0, 8px 8px;\n background-size: 16px 16px;\n }\n}\n\n.effect-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n\n.object-center {\n -o-object-position: center;\n object-position: center;\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-100 {\n opacity: 1;\n}";const EdsImgStyle0=edsImgCss;const EdsImg=class{constructor(hostRef){registerInstance(this,hostRef);this.img=null;this.handleLoad=()=>{this.loaded=true;this.showBg=false;};// On error, remove the background effect so users know the image failed to load.
|
|
942
|
-
this.handleError=()=>{this.loaded=true;this.showBg=false;};this.handleTransitionEnd=()=>{this.showBg=false;};this.src=undefined;this.alt='';this.width=undefined;this.height=undefined;this.srcset=undefined;this.sizes=undefined;this.formats=[];this.lazyload=true;this.withBg=true;this.loaded=!this.lazyload;this.showBg=this.withBg;}componentDidLoad(){if(this.img&&this.img.complete){this.loaded=true;this.showBg=false;}}render(){const imgOpts={};if(this.lazyload){imgOpts['loading']='lazy';imgOpts['decoding']='async';}return h("div",{key:'1ff909ca6fe3fe40ca5659cea033b404a45580fb',class:{'items-center justify-center':true,'effect-bg-pattern':this.lazyload&&this.showBg}},h("picture",{key:'92c92a5aaebd84d96a7bf8c291542d6a8cf4d896'},this.formats.map(format=>h("source",{type:format.type,srcSet:format.srcset,media:format.media,sizes:this.sizes})),h("img",Object.assign({key:'ac8eb664987b1205d5a96c723840ac3ccd779ac1',ref:el=>this.img=el,class:{'effect-opacity object-cover object-center':true,'opacity-100':this.loaded,'opacity-0':!this.loaded},width:this.width,height:this.height,sizes:this.sizes,src:this.src,srcSet:this.srcset,alt:this.alt},imgOpts,{onLoad:this.handleLoad,onError:this.handleError,onTransitionEnd:this.handleTransitionEnd}))));}get imgElement(){return getElement(this);}};EdsImg.style=EdsImgStyle0;const EdsInput=class{constructor(hostRef){registerInstance(this,hostRef);this.handleInput=e=>{const target=e.target;this.innerVal=target.value;if(this.maxLength&&this.type==='textarea'){this.maxLengthReached=target.value.length>=this.maxLength;}};this.name=undefined;this.inputId=undefined;this.placeholder=undefined;this.disabled=false;this.hasMessage=false;this.error=false;this.checked=undefined;this.type='text';this.required=false;this.value=undefined;this.icon=undefined;this.maxLength=undefined;this.options=[];this.extraClass=undefined;this.min=undefined;this.max=undefined;this.step=undefined;this.innerVal='';this.maxLengthReached=false;}onValueChanged(newValue){this.innerVal=newValue;}componentWillLoad(){// Initialize innerVal with the value prop if it's set
|
|
943
|
-
if(this.value){this.innerVal=this.value;}else if(this.type==='select'&&this.options.length>0){// If the type is select and there are options, set the initial value to the first option
|
|
944
|
-
this.innerVal=this.options[0].value;}}getInputElement(){return this.el.querySelector('input');}render(){const withIcon=!!this.icon;const describedBy=this.hasMessage||this.error?`${this.name}-error`:'';return h("div",{key:'1800587d54da282566893c538d47aadf9f9bb390',class:"relative flex items-center"},this.type==='textarea'?h("textarea",{id:this.inputId||this.name,name:this.name,placeholder:this.placeholder,value:this.innerVal.toString(),required:this.required,disabled:this.disabled,class:`min-h-80 input input-textarea ${withIcon?'input-with-icon':''} ${this.error?'input-error':''} ${this.extraClass}`,"aria-invalid":this.error?'true':'false',"aria-describedby":describedBy,maxlength:this.maxLength,onInput:this.handleInput,onChange:this.handleInput}):this.type==='select'?h("select",{id:this.inputId||this.name,name:this.name,required:this.required,disabled:this.disabled,class:`input input-select ${this.error?'input-error':''} ${this.extraClass}`,"aria-invalid":this.error?'true':'false',"aria-describedby":describedBy,onInput:this.handleInput,onChange:this.handleInput},this.options.map(option=>h("option",{value:option.value,selected:option.value===this.innerVal,key:option.value},option.label))):h("input",Object.assign({id:this.inputId||this.name,name:this.name,placeholder:this.placeholder,value:this.innerVal.toString(),required:this.required,disabled:this.disabled,type:this.type,checked:['radio','checkbox'].includes(this.type)?this.checked:undefined},this.type==='number'?{min:this.min,max:this.max,step:this.step}:{},{class:`
|
|
945
|
-
${this.extraClass||''}
|
|
946
|
-
input ${this.type==='radio'?'input-radio':this.type==='checkbox'?'input-checkbox':''}
|
|
947
|
-
${withIcon&&this.type!=='radio'&&this.type!=='checkbox'?'input-icon pl-36':''}
|
|
948
|
-
${this.error?'input-error':''}
|
|
949
|
-
`,"aria-invalid":this.error?'true':'false',"aria-describedby":describedBy,maxlength:this.maxLength,onInput:this.handleInput,onChange:this.handleInput})),this.maxLength&&this.type==='textarea'&&h("span",{key:'cc6cc50cdebea1d4eaecb78bc6ab2b4b92503893',class:`input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached?'input-counter-error':''}`},this.maxLength),this.icon&&h("eds-icon-wrapper",{key:'ff4b36e873438f7208eb660c77381f87f0805109',class:`absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled?'text-lightest':'text-lightest'}`,icon:this.icon}));}get el(){return getElement(this);}static get watchers(){return {"value":["onValueChanged"]};}};const edsInputFieldCss=":root {\n font-optical-sizing: auto;\n}\nhtml,\nbody {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n/*\n:focus[data-focus-method=\"mouse\"],\n:focus[data-focus-method=\"touch\"] {\n outline: none !important;\n}\n*/\n/*FADE*/\n.fade-enter-active,\n.fade-leave-active {\n transition-duration: 300ms;\n transition-timing-function: linear;\n transition-property: opacity;\n}\n.fade-enter-from,\n.fade-leave-to {\n opacity: 0;\n}\n/*FADE TRANSLATE Y*/\n.fade-down-enter-active,\n.fade-down-leave-active {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n transition-property: opacity, transform;\n}\n.fade-down-enter-from,\n.fade-down-leave-to {\n opacity: 0;\n transform: translateY(12px);\n}\n/*SLIDE LEFT*/\n.slide-left-enter-active,\n.slide-left-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n transition-property: opacity, transform;\n}\n.slide-left-enter-from,\n.slide-left-leave-to {\n transform: translateX(-110%);\n}\n/*SLIDE BOTTOM*/\n.slide-bottom-enter-active,\n.slide-bottom-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n transition-property: opacity, transform;\n}\n.slide-bottom-enter-from,\n.slide-bottom-leave-to {\n transform: translateY(100%);\n}\n.slide-bottom-list-move,\n.slide-bottom-list-enter-active,\n.slide-bottom-list-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-property: opacity, transform;\n}\n.slide-bottom-list-enter-from,\n.slide-bottom-list-leave-to {\n opacity: 0;\n transform: translateY(100%);\n}\n.slide-bottom-list-leave-active {\n position: absolute;\n}\n/*COLLAPSE Y*/\n.collapseY-enter-active,\n.collapseY-leave-active {\n transition-duration: 300ms;\n transition-timing-function: linear;\n overflow: hidden;\n max-height: 500px;\n transition-property: max-height;\n}\n.collapseY-enter-from,\n.collapseY-leave-to {\n max-height: 0;\n}\n*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(147 197 253 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(147 197 253 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n/*\n! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com\n*/\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: currentColor; /* 2 */\n}\n::before,\n::after {\n --tw-content: '';\n}\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -moz-tab-size: 4; /* 3 */\n -o-tab-size: 4;\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n color: inherit;\n text-decoration: inherit;\n}\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n font-weight: bolder;\n}\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n font-size: 80%;\n}\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\nsub {\n bottom: -0.25em;\n}\nsup {\n top: -0.5em;\n}\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n text-transform: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n:-moz-focusring {\n outline: auto;\n}\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n:-moz-ui-invalid {\n box-shadow: none;\n}\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\nprogress {\n vertical-align: baseline;\n}\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n/*\nAdd the correct display in Chrome and Safari.\n*/\nsummary {\n display: list-item;\n}\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\nfieldset {\n margin: 0;\n padding: 0;\n}\nlegend {\n padding: 0;\n}\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n resize: vertical;\n}\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n:root {\n --breakpoint: \"sm\";\n --container-width: unset;\n --inner-gutter: 8px;\n --outer-gutter: 16px;\n --grid-columns: 12;\n --env: \"dev\";\n --grid-column-bg: rgba(127, 255, 255, 0.25);\n}\n@media (min-width: 750px) {\n :root {\n --breakpoint: \"md\";\n --container-width: unset;\n --inner-gutter: 12px;\n --outer-gutter: 20px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 900px) {\n :root {\n --breakpoint: \"lg\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 1024px) {\n :root {\n --breakpoint: \"xl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 1280px) {\n :root {\n --breakpoint: \"xxl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 2200px) {\n :root {\n --breakpoint: \"xxxl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n.container {\n width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));\n margin-right: auto;\n margin-left: auto;\n}\n.container > * {\n --container-outer-gutter: 0;\n --breakout-container-outer-gutter: 0;\n}\n[class*='scrollbar-track-'], [class*='scrollbar-thumb-'] {\n --scrollbar-bg: #fafafa;\n --scrollbar-fg: #c1c1c1;\n --scrollbar-border: #e8e8e8;\n scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar, [class*='scrollbar-thumb-']::-webkit-scrollbar {\n width: var(--scrollbar-width, 15px);\n height: var(--scrollbar-width, 15px);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track, [class*='scrollbar-thumb-']::-webkit-scrollbar-track {\n background: var(--scrollbar-bg);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track:horizontal, [class*='scrollbar-thumb-']::-webkit-scrollbar-track:horizontal {\n border-top: 1px solid var(--scrollbar-border);\n border-bottom: 1px solid var(--scrollbar-border);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track:vertical, [class*='scrollbar-thumb-']::-webkit-scrollbar-track:vertical {\n border-inline-start: 1px solid var(--scrollbar-border);\n border-inline-end: 1px solid var(--scrollbar-border);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-thumb, [class*='scrollbar-thumb-']::-webkit-scrollbar-thumb {\n background: var(--scrollbar-fg);\n border-radius: 20px;\n border: var(--scrollbar-padding, 4px) solid transparent;\n background-clip: content-box;\n}\n:root {\n --spacing-space-01: 5rem;\n --spacing-space-02: 3.75rem;\n --spacing-space-03: 6.25rem;\n --spacing-space-04: 1.75rem;\n}\n@media (min-width: 900px) {\n :root {\n --spacing-space-01: 7.5rem;\n --spacing-space-02: 5rem;\n --spacing-space-03: 7.5rem;\n }\n}\n:root {\n --sans: Inter, Helvetica, Arial, sans-serif;\n --f-heading-01-fontFamily: var(--sans);\n --f-heading-01-fontWeight: 800;\n --f-heading-01-fontSize: 42px;\n --f-heading-01-lineHeight: 100%;\n --f-heading-01-letterSpacing: -0.01em;\n --f-heading-02-fontFamily: var(--sans);\n --f-heading-02-fontWeight: 800;\n --f-heading-02-fontSize: 36px;\n --f-heading-02-lineHeight: 100%;\n --f-heading-02-letterSpacing: -0.01em;\n --f-heading-03-fontFamily: var(--sans);\n --f-heading-03-fontWeight: 800;\n --f-heading-03-fontSize: 36px;\n --f-heading-03-lineHeight: 100%;\n --f-heading-03-letterSpacing: -0.01em;\n --f-heading-04-fontFamily: var(--sans);\n --f-heading-04-fontWeight: 800;\n --f-heading-04-fontSize: 28px;\n --f-heading-04-lineHeight: 100%;\n --f-heading-04-letterSpacing: -0.01em;\n --f-heading-05-fontFamily: var(--sans);\n --f-heading-05-fontWeight: 800;\n --f-heading-05-fontSize: 28px;\n --f-heading-05-lineHeight: 110%;\n --f-heading-05-letterSpacing: -0.01em;\n --f-heading-06-fontFamily: var(--sans);\n --f-heading-06-fontWeight: 800;\n --f-heading-06-fontSize: 22px;\n --f-heading-06-lineHeight: 120%;\n --f-body-01-fontFamily: var(--sans);\n --f-body-01-fontWeight: 600;\n --f-body-01-fontSize: 20px;\n --f-body-01-lineHeight: 140%;\n --f-body-01-letterSpacing: -0.01em;\n --f-body-02-fontFamily: var(--sans);\n --f-body-02-fontWeight: 600;\n --f-body-02-fontSize: 17px;\n --f-body-02-lineHeight: 150%;\n --f-ui-01-fontFamily: var(--sans);\n --f-ui-01-fontWeight: 800;\n --f-ui-01-fontSize: 18px;\n --f-ui-01-lineHeight: 110%;\n --f-ui-01-letterSpacing: -0.01em;\n --f-ui-02-fontFamily: var(--sans);\n --f-ui-02-fontWeight: 800;\n --f-ui-02-fontSize: 16px;\n --f-ui-02-lineHeight: 110%;\n --f-ui-02-letterSpacing: -0.01em;\n --f-ui-02-light-fontFamily: var(--sans);\n --f-ui-02-light-fontWeight: 600;\n --f-ui-02-light-fontSize: 16px;\n --f-ui-02-light-lineHeight: 110%;\n --f-ui-02-light-letterSpacing: -0.01em;\n --f-ui-03-fontFamily: var(--sans);\n --f-ui-03-fontWeight: 800;\n --f-ui-03-fontSize: 14px;\n --f-ui-03-lineHeight: 110%;\n --f-ui-03-letterSpacing: -0.01em;\n --f-ui-03-light-fontFamily: var(--sans);\n --f-ui-03-light-fontWeight: 600;\n --f-ui-03-light-fontSize: 14px;\n --f-ui-03-light-lineHeight: 130%;\n --f-ui-03-light-letterSpacing: -0.01em;\n --f-ui-04-fontFamily: var(--sans);\n --f-ui-04-fontWeight: 800;\n --f-ui-04-fontSize: 12px;\n --f-ui-04-lineHeight: 100%;\n --f-ui-04-letterSpacing: -0.01em;\n --f-ui-05-fontFamily: var(--sans);\n --f-ui-05-fontWeight: 800;\n --f-ui-05-fontSize: 10px;\n --f-ui-05-lineHeight: 110%;\n --f-ui-05-letterSpacing: -0.01em;\n --f-caption-fontFamily: var(--sans);\n --f-caption-fontWeight: 800;\n --f-caption-fontSize: 12px;\n --f-caption-lineHeight: 120%;\n --f-display-01-fontFamily: var(--sans);\n --f-display-01-fontWeight: 800;\n --f-display-01-fontSize: 120px;\n --f-display-01-lineHeight: 100%;\n --f-display-01-letterSpacing: -0.01em;\n}\n.f-heading-01 {\n font-family: var(--f-heading-01-fontFamily);\n font-weight: var(--f-heading-01-fontWeight);\n font-size: var(--f-heading-01-fontSize);\n line-height: var(--f-heading-01-lineHeight);\n letter-spacing: var(--f-heading-01-letterSpacing);\n}\n.f-heading-02 {\n font-family: var(--f-heading-02-fontFamily);\n font-weight: var(--f-heading-02-fontWeight);\n font-size: var(--f-heading-02-fontSize);\n line-height: var(--f-heading-02-lineHeight);\n letter-spacing: var(--f-heading-02-letterSpacing);\n}\n.f-heading-03 {\n font-family: var(--f-heading-03-fontFamily);\n font-weight: var(--f-heading-03-fontWeight);\n font-size: var(--f-heading-03-fontSize);\n line-height: var(--f-heading-03-lineHeight);\n letter-spacing: var(--f-heading-03-letterSpacing);\n}\n.f-heading-04 {\n font-family: var(--f-heading-04-fontFamily);\n font-weight: var(--f-heading-04-fontWeight);\n font-size: var(--f-heading-04-fontSize);\n line-height: var(--f-heading-04-lineHeight);\n letter-spacing: var(--f-heading-04-letterSpacing);\n}\n.f-heading-05 {\n font-family: var(--f-heading-05-fontFamily);\n font-weight: var(--f-heading-05-fontWeight);\n font-size: var(--f-heading-05-fontSize);\n line-height: var(--f-heading-05-lineHeight);\n letter-spacing: var(--f-heading-05-letterSpacing);\n}\n.f-heading-06 {\n font-family: var(--f-heading-06-fontFamily);\n font-weight: var(--f-heading-06-fontWeight);\n font-size: var(--f-heading-06-fontSize);\n line-height: var(--f-heading-06-lineHeight);\n letter-spacing: var(--f-heading-06-letterSpacing);\n}\n.f-body-01 {\n font-family: var(--f-body-01-fontFamily);\n font-weight: var(--f-body-01-fontWeight);\n font-size: var(--f-body-01-fontSize);\n line-height: var(--f-body-01-lineHeight);\n letter-spacing: var(--f-body-01-letterSpacing);\n}\n.f-body-02 {\n font-family: var(--f-body-02-fontFamily);\n font-weight: var(--f-body-02-fontWeight);\n font-size: var(--f-body-02-fontSize);\n line-height: var(--f-body-02-lineHeight);\n letter-spacing: var(--f-body-02-letterSpacing);\n}\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n.f-ui-02 {\n font-family: var(--f-ui-02-fontFamily);\n font-weight: var(--f-ui-02-fontWeight);\n font-size: var(--f-ui-02-fontSize);\n line-height: var(--f-ui-02-lineHeight);\n letter-spacing: var(--f-ui-02-letterSpacing);\n}\n.f-ui-02-light {\n font-family: var(--f-ui-02-light-fontFamily);\n font-weight: var(--f-ui-02-light-fontWeight);\n font-size: var(--f-ui-02-light-fontSize);\n line-height: var(--f-ui-02-light-lineHeight);\n letter-spacing: var(--f-ui-02-light-letterSpacing);\n}\n.f-ui-03 {\n font-family: var(--f-ui-03-fontFamily);\n font-weight: var(--f-ui-03-fontWeight);\n font-size: var(--f-ui-03-fontSize);\n line-height: var(--f-ui-03-lineHeight);\n letter-spacing: var(--f-ui-03-letterSpacing);\n}\n.f-ui-03-light {\n font-family: var(--f-ui-03-light-fontFamily);\n font-weight: var(--f-ui-03-light-fontWeight);\n font-size: var(--f-ui-03-light-fontSize);\n line-height: var(--f-ui-03-light-lineHeight);\n letter-spacing: var(--f-ui-03-light-letterSpacing);\n}\n.f-ui-04 {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n}\n.f-ui-05 {\n font-family: var(--f-ui-05-fontFamily);\n font-weight: var(--f-ui-05-fontWeight);\n font-size: var(--f-ui-05-fontSize);\n line-height: var(--f-ui-05-lineHeight);\n letter-spacing: var(--f-ui-05-letterSpacing);\n}\n.f-caption {\n font-family: var(--f-caption-fontFamily);\n font-weight: var(--f-caption-fontWeight);\n font-size: var(--f-caption-fontSize);\n line-height: var(--f-caption-lineHeight);\n letter-spacing: var(--f-caption-letterSpacing);\n}\n.f-display-01 {\n font-family: var(--f-display-01-fontFamily);\n font-weight: var(--f-display-01-fontWeight);\n font-size: var(--f-display-01-fontSize);\n line-height: var(--f-display-01-lineHeight);\n letter-spacing: var(--f-display-01-letterSpacing);\n}\n@media (min-width: 750px) {\n :root {\n --f-heading-01-fontSize: 48px;\n }\n}\n@media (min-width: 900px) {\n :root {\n --f-heading-01-fontSize: 72px;\n --f-heading-02-fontSize: 48px;\n --f-display-01-fontSize: 150px;\n }\n}\n@media (min-width: 1024px) {\n :root {\n --f-heading-01-fontSize: 83px;\n --f-heading-02-fontSize: 60px;\n --f-heading-03-fontSize: 42px;\n --f-heading-04-fontSize: 36px;\n }\n}\n.f-heading-01 b, .f-heading-01 strong {\n font-weight: var(--f-heading-01---bold-weight, bold);\n}\n.f-heading-02 b, .f-heading-02 strong {\n font-weight: var(--f-heading-02---bold-weight, bold);\n}\n.f-heading-03 b, .f-heading-03 strong {\n font-weight: var(--f-heading-03---bold-weight, bold);\n}\n.f-heading-04 b, .f-heading-04 strong {\n font-weight: var(--f-heading-04---bold-weight, bold);\n}\n.f-heading-05 b, .f-heading-05 strong {\n font-weight: var(--f-heading-05---bold-weight, bold);\n}\n.f-heading-06 b, .f-heading-06 strong {\n font-weight: var(--f-heading-06---bold-weight, bold);\n}\n.f-body-01 b, .f-body-01 strong {\n font-weight: var(--f-body-01---bold-weight, bold);\n}\n.f-body-02 b, .f-body-02 strong {\n font-weight: var(--f-body-02---bold-weight, bold);\n}\n.f-ui-01 b, .f-ui-01 strong {\n font-weight: var(--f-ui-01---bold-weight, bold);\n}\n.f-ui-02 b, .f-ui-02 strong {\n font-weight: var(--f-ui-02---bold-weight, bold);\n}\n.f-ui-02-light b, .f-ui-02-light strong {\n font-weight: var(--f-ui-02-light---bold-weight, bold);\n}\n.f-ui-03 b, .f-ui-03 strong {\n font-weight: var(--f-ui-03---bold-weight, bold);\n}\n.f-ui-03-light b, .f-ui-03-light strong {\n font-weight: var(--f-ui-03-light---bold-weight, bold);\n}\n.f-ui-04 b, .f-ui-04 strong {\n font-weight: var(--f-ui-04---bold-weight, bold);\n}\n.f-ui-05 b, .f-ui-05 strong {\n font-weight: var(--f-ui-05---bold-weight, bold);\n}\n.f-caption b, .f-caption strong {\n font-weight: var(--f-caption---bold-weight, bold);\n}\n.f-display-01 b, .f-display-01 strong {\n font-weight: var(--f-display-01---bold-weight, bold);\n}\n:root {\n --grey-100: #f8f8f8;\n --grey-200: #f2f2f2;\n --grey-300: #e6e6e6;\n --grey-400: #d8d8d8;\n --grey-500: #8c8c8c;\n --grey-600: #6e6e6e;\n --grey-700: #666666;\n --grey-800: #4d4d4d;\n --grey-900: #242424;\n --green-100: #eaffee;\n --green-200: #d3ffdc;\n --green-300: #9dffb4;\n --green-400: #63fb92;\n --green-500: #00e766;\n --green-600: #00c959;\n --green-700: #009d45;\n --green-800: #007734;\n --green-900: #004f23;\n --yellow-100: #fefee5;\n --yellow-200: #ffffcb;\n --yellow-300: #fdfdaa;\n --yellow-400: #ffff8b;\n --yellow-500: #ffff51;\n --yellow-600: #f3f30a;\n --yellow-700: #d7d72b;\n --yellow-800: #9a9a1e;\n --yellow-900: #636313;\n --orange-100: #fff4ee;\n --orange-200: #ffeade;\n --orange-300: #ffdcc5;\n --orange-400: #ffcca9;\n --orange-500: #ffb87e;\n --orange-600: #ffa543;\n --orange-700: #cb7f28;\n --orange-800: #995f1e;\n --orange-900: #653f14;\n --red-100: #feefef;\n --red-200: #ffe0e1;\n --red-300: #ffc7c9;\n --red-400: #ff9ea2;\n --red-500: #ff7a7f;\n --red-600: #ff4d68;\n --red-700: #d01111;\n --red-800: #a3001a;\n --red-900: #6f0011;\n --purple-100: #f9f3ff;\n --purple-200: #f4e8ff;\n --purple-300: #e9ceff;\n --purple-400: #ddb1ff;\n --purple-500: #d18fff;\n --purple-600: #c461ff;\n --purple-700: #af56e4;\n --purple-800: #8337b1;\n --purple-900: #3d1e4f;\n --blue-100: #eff0ff;\n --blue-200: #dee0ff;\n --blue-300: #caceff;\n --blue-400: #b2b8ff;\n --blue-500: #7a89f5;\n --blue-600: #2b69fc;\n --blue-700: #0034cb;\n --blue-800: #002799;\n --blue-900: #001a65;\n --cyan-100: #E0EEFF;\n --cyan-200: #D3E6FF;\n --cyan-300: #B5D8FF;\n --cyan-400: #92C8FF;\n --cyan-500: #6CBFFE;\n --cyan-600: #3FA9F5;\n --cyan-700: #267FBE;\n --cyan-800: #1F689B;\n --cyan-900: #15496D;\n --black: #000000;\n --white: #ffffff;\n --transparent: transparent;\n --current: currentColor;\n}\n.grid-layout {\n display: grid;\n grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);\n grid-gap: var(--inner-gutter);\n}\n.grid-col-span-2 {\n --container-grid-columns: 2;\n grid-column: span 2 / span 2;\n}\n.grid-col-span-3 {\n --container-grid-columns: 3;\n grid-column: span 3 / span 3;\n}\n.grid-col-span-4 {\n --container-grid-columns: 4;\n grid-column: span 4 / span 4;\n}\n.grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n}\n.grid-col-span-8 {\n --container-grid-columns: 8;\n grid-column: span 8 / span 8;\n}\n.grid-col-span-10 {\n --container-grid-columns: 10;\n grid-column: span 10 / span 10;\n}\n.grid-col-span-12 {\n --container-grid-columns: 12;\n grid-column: span 12 / span 12;\n}\n.grid-col-start-1 {\n grid-column-start: 1;\n}\n.grid-col-start-2 {\n grid-column-start: 2;\n}\n.grid-col-start-3 {\n grid-column-start: 3;\n}\n.grid-col-start-4 {\n grid-column-start: 4;\n}\n.grid-col-start-5 {\n grid-column-start: 5;\n}\n.grid-col-start-6 {\n grid-column-start: 6;\n}\n.grid-col-start-7 {\n grid-column-start: 7;\n}\n.grid-col-start-8 {\n grid-column-start: 8;\n}\n.grid-col-start-9 {\n grid-column-start: 9;\n}\n.grid-col-start-10 {\n grid-column-start: 10;\n}\n.grid-col-start-11 {\n grid-column-start: 11;\n}\n.grid-col-start-12 {\n grid-column-start: 12;\n}\n[class*=\"grid-line-\"] > * {\n position: relative;\n}\n[class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n}\n.grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n}\n@media (min-width: 750px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .md\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .md\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .md\\:grid-line-x-0 > *::before {\n content: none;\n }\n .md\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-y-0 > *::after {\n content: none;\n }\n .md\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .md\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .md\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .md\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .md\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .md\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .md\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .md\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .md\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .md\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .md\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .md\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .md\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .md\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .md\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .md\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .md\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .md\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .md\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .md\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .md\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .md\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .md\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .md\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .md\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .md\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .md\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .md\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .md\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .md\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .md\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .md\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .md\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .md\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .md\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .md\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .md\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .md\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .md\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .md\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .md\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .md\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .md\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .md\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .md\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .md\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .md\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .md\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .md\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .md\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .md\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .md\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .md\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .md\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .md\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .md\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .md\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .md\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .md\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .md\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .md\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .md\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .md\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .md\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .md\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .md\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .md\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .md\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .md\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .md\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .md\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .md\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .md\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .md\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .md\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .md\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .md\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .md\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .md\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .md\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .md\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .md\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .md\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .md\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .md\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .md\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .md\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .md\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .md\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .md\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .md\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .md\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .md\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .md\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .md\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .md\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .md\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .md\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .md\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .md\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .md\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .md\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .md\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .md\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 900px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .lg\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .lg\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .lg\\:grid-line-x-0 > *::before {\n content: none;\n }\n .lg\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-y-0 > *::after {\n content: none;\n }\n .lg\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .lg\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .lg\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .lg\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .lg\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .lg\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .lg\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .lg\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .lg\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .lg\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .lg\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .lg\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .lg\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .lg\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .lg\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .lg\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .lg\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .lg\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .lg\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .lg\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .lg\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .lg\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .lg\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .lg\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .lg\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .lg\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .lg\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .lg\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .lg\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .lg\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .lg\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .lg\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .lg\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .lg\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .lg\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .lg\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .lg\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .lg\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .lg\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .lg\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .lg\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .lg\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .lg\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .lg\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .lg\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .lg\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .lg\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .lg\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .lg\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .lg\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .lg\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .lg\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .lg\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .lg\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .lg\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .lg\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .lg\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .lg\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .lg\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .lg\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .lg\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .lg\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .lg\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .lg\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .lg\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .lg\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .lg\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .lg\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .lg\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .lg\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .lg\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .lg\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .lg\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .lg\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .lg\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .lg\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .lg\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .lg\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .lg\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .lg\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .lg\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .lg\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .lg\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .lg\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .lg\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .lg\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .lg\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .lg\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .lg\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .lg\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .lg\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .lg\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .lg\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .lg\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .lg\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .lg\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .lg\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .lg\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .lg\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .lg\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .lg\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .lg\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .lg\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .lg\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 1024px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 1280px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xxl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xxl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xxl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xxl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xxl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xxl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xxl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xxl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xxl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xxl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xxl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xxl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xxl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xxl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xxl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xxl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xxl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xxl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xxl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xxl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xxl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xxl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xxl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xxl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xxl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xxl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xxl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xxl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xxl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xxl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xxl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xxl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xxl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xxl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xxl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xxl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xxl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xxl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xxl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xxl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xxl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xxl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xxl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xxl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xxl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xxl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xxl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xxl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xxl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xxl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xxl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xxl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xxl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xxl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xxl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xxl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xxl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xxl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xxl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xxl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xxl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xxl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xxl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xxl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xxl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xxl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xxl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xxl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xxl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xxl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xxl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xxl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xxl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xxl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xxl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xxl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xxl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xxl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xxl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xxl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xxl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xxl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xxl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 2200px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xxxl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxxl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxxl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xxxl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xxxl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xxxl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xxxl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xxxl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xxxl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xxxl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xxxl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xxxl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xxxl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xxxl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xxxl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xxxl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xxxl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xxxl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xxxl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xxxl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xxxl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xxxl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xxxl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xxxl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xxxl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xxxl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xxxl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xxxl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xxxl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xxxl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xxxl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xxxl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xxxl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xxxl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xxxl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xxxl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xxxl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xxxl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xxxl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xxxl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xxxl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xxxl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xxxl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xxxl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xxxl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xxxl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xxxl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xxxl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xxxl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xxxl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xxxl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xxxl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xxxl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xxxl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xxxl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xxxl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xxxl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xxxl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xxxl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xxxl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xxxl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xxxl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xxxl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xxxl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xxxl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xxxl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xxxl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xxxl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xxxl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xxxl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xxxl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xxxl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xxxl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xxxl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xxxl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xxxl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xxxl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xxxl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xxxl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xxxl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xxxl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xxxl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xxxl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xxxl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xxxl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxxl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--black);\n }\n .xxxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--black);\n }\n .xxxl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxxl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxxl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxxl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--green-500);\n }\n .xxxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--green-500);\n }\n .xxxl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxxl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxxl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxxl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxxl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxxl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n.cols-container > .ml-0 {\n margin-left: 0;\n}\n.w-12-cols {\n width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n}\n.cols-container > .w-12-cols {\n width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n}\n.w-12-cols > * {\n --container-grid-columns: 12;\n}\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1 );\n }\n\n &::after {\n content: '';\n }\n}\n.border-inside-inverse {\n &::after {\n border-color: rgba(255, 255, 255, 0.3);\n }\n &::after {\n content: '';\n }\n }\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n &::after {\n content: '';\n }\n }\n.input-label-options {\n font-family: var(--f-ui-03-fontFamily);\n font-size: var(--f-ui-03-fontSize);\n line-height: var(--f-ui-03-lineHeight);\n letter-spacing: var(--f-ui-03-letterSpacing);\n}\n.input-label {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n}\n.input-label b,.input-label strong {\n font-weight: var(--f-ui-04---bold-weight, bold);\n}\n.input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: flex;\n min-height: 2.5rem;\n width: 100%;\n align-items: center;\n padding-top: 10px;\n padding-bottom: 10px;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n border-radius: 8px;\n border-width: 2px;\n border-color: rgba(0, 0, 0, .1 );\n}\n.input:hover {\n border-color: var(--black);\n}\n.input:active {\n border-color: var(--black);\n}\n.input {\n font-family: var(--f-ui-02-light-fontFamily);\n font-weight: var(--f-ui-02-light-fontWeight);\n font-size: var(--f-ui-02-light-fontSize);\n line-height: var(--f-ui-02-light-lineHeight);\n letter-spacing: var(--f-ui-02-light-letterSpacing);\n}\n.input b,.input strong {\n font-weight: var(--f-ui-02-light---bold-weight, bold);\n}\n.input::-moz-placeholder {\n color: var(--grey-500);\n}\n.input::placeholder {\n color: var(--grey-500);\n}\n.input {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n.input:focus-visible {\n outline-style: solid;\n}\n.input:disabled {\n cursor: not-allowed;\n background-color: var(--grey-300);\n color: var(--grey-500);\n}\n.input:disabled:hover {\n border-color: rgba(0, 0, 0, .1 );\n}\n.input:disabled:active {\n border-color: rgba(0, 0, 0, .1 );\n}\n.input-with-icon {\n padding-right: 34px;\n}\n.input-checkbox {\n position: relative;\n height: 1rem;\n min-height: auto;\n width: 1rem;\n padding: 0rem;\n border-radius: 4px;\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-checkbox::after {\n --tw-content: '';\n content: var(--tw-content);\n position: absolute;\n top: 0rem;\n left: 50%;\n --tw-translate-x: -50%;\n height: 10px;\n width: 6px;\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n border-bottom-width: 2px;\n border-right-width: 2px;\n border-color: var(--transparent);\n}\n.input-checkbox:checked {\n border-color: var(--black);\n background-color: var(--black);\n}\n.input-checkbox:checked::after {\n border-color: var(--white);\n}\n.input-checkbox:checked:disabled {\n border-color: rgba(0, 0, 0, .15 );\n background-color: var(--grey-300);\n}\n.input-checkbox:checked:disabled::after {\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-radio {\n position: relative;\n height: 1rem;\n min-height: auto;\n width: 1rem;\n padding: 0rem;\n border-radius: 9999px;\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-radio::after {\n --tw-content: '';\n content: var(--tw-content);\n position: absolute;\n top: 50%;\n left: 50%;\n --tw-translate-x: -50%;\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n height: 6px;\n width: 6px;\n border-radius: 9999px;\n background-color: var(--transparent);\n}\n.input-radio:checked {\n border-color: var(--black);\n background-color: var(--black);\n}\n.input-radio:checked::after {\n background-color: var(--white);\n}\n.input-radio:checked:disabled::after {\n background-color: var(--white);\n}\n.input-error {\n border-color: var(--red-700);\n}\n.input-counter {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n color: var(--grey-500);\n\n &.input-counter-error {\n color: var(--red-700);\n }\n}\ninput[type=\"range\"]::-webkit-slider-thumb {\n height: 1.5rem;\n width: 1.5rem;\n border-radius: 9999px;\n outline: 2px solid var(--green-400); /* This adds an outline */\n background-color: var(--green-500);\n -webkit-appearance: none;\n appearance: none; /* Ensure the thumb can be styled */\n}\n.loader {\n box-sizing: border-box;\n display: inline-block;\n height: 1rem;\n width: 1rem;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.loader {\n animation: spin 1s linear infinite;\n border-radius: 9999px;\n border: 3px solid rgba(0, 0, 0, .3);\n border-bottom-color: #000;\n}\n.scroller-x {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.scroller-x::-webkit-scrollbar {\n display: none;\n}\n.scroller-x {\n overflow: auto;\n overscroll-behavior-x: contain;\n}\n/** region TRANSITIONS */\n.effect-color {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-background {\n transition-property: background;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-height {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-property: height;\n}\n.effect-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n/** endregion */\n/* region FOCUS */\n.effect-focus {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n.effect-focus:focus-visible {\n outline-style: solid;\n}\n.effect-focus-within {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n.effect-focus-within:focus-within {\n outline-style: solid;\n}\n/* endregion */\n/* region BG */\n.effect-bg-pattern {\n position: relative;\n z-index: 1;\n\n &::before {\n position: absolute;\n content: '';\n z-index: -1;\n inset: 0;\n background-color: rgba(208, 208, 208, 0.75);\n opacity: 0.75;\n background-image: repeating-linear-gradient(45deg, #F5F5F5 25%, transparent 25%, transparent 75%, #F5F5F5 75%, #F5F5F5), repeating-linear-gradient(45deg, #F5F5F5 25%, #D0D0D0 25%, #D0D0D0 75%, #F5F5F5 75%, #F5F5F5);\n background-position: 0 0, 8px 8px;\n background-size: 16px 16px;\n }\n }\n.effect-bg-behind {\n position: relative;\n}\n.effect-bg-behind::before {\n position: absolute;\n inset: 0rem;\n z-index: -1;\n --tw-content: '';\n content: var(--tw-content);\n}\n.effect-bg-behind {\n\n &:before {\n background-size: calc(100% + 6px) calc(100% + 6px) !important;\n background-position: -4px -4px !important;\n background-repeat: no-repeat !important;\n }\n }\n.effect-bg-behind-link {\n position: relative;\n}\n.effect-bg-behind-link::before {\n position: absolute;\n top: 0rem;\n bottom: 0rem;\n left: -0.5rem;\n right: 0rem;\n z-index: 0;\n border-radius: 8px;\n background-color: var(--grey-400);\n --tw-content: '';\n content: var(--tw-content);\n}\n.effect-bg-behind-link[aria-disabled=\"true\"]::before {\n background-color: var(--transparent);\n}\n/* endregion */\n/*region shadow*/\n/*endregion*/\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n.pointer-events-none {\n pointer-events: none;\n}\n.visible {\n visibility: visible;\n}\n.collapse {\n visibility: collapse;\n}\n.static {\n position: static;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.inset-0 {\n inset: 0rem;\n}\n.inset-x-16 {\n left: 1rem;\n right: 1rem;\n}\n.-top-1 {\n top: -0.0625rem;\n}\n.bottom-0 {\n bottom: 0rem;\n}\n.bottom-20 {\n bottom: 1.25rem;\n}\n.bottom-4 {\n bottom: 0.25rem;\n}\n.bottom-8 {\n bottom: 0.5rem;\n}\n.left-0 {\n left: 0rem;\n}\n.left-1\\/2 {\n left: 50%;\n}\n.left-20 {\n left: 1.25rem;\n}\n.left-4 {\n left: 0.25rem;\n}\n.left-\\[4px\\] {\n left: 4px;\n}\n.right-0 {\n right: 0rem;\n}\n.right-20 {\n right: 1.25rem;\n}\n.right-4 {\n right: 0.25rem;\n}\n.right-8 {\n right: 0.5rem;\n}\n.right-\\[4px\\] {\n right: 4px;\n}\n.right-\\[6px\\] {\n right: 6px;\n}\n.top-0 {\n top: 0rem;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.top-16 {\n top: 1rem;\n}\n.top-20 {\n top: 1.25rem;\n}\n.top-full {\n top: 100%;\n}\n.z-0 {\n z-index: 0;\n}\n.z-1 {\n z-index: 1;\n}\n.z-10 {\n z-index: 10;\n}\n.z-50 {\n z-index: 50;\n}\n.z-\\[1\\] {\n z-index: 1;\n}\n.z-\\[999999\\] {\n z-index: 999999;\n}\n.z-focus {\n z-index: 99;\n}\n.z-on-top {\n z-index: 99999;\n}\n.order-first {\n order: -9999;\n}\n.order-last {\n order: 9999;\n}\n.m-0 {\n margin: 0rem;\n}\n.m-32 {\n margin: 2rem;\n}\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.my-16 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.my-20 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n.my-4 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n.my-8 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.-ml-16 {\n margin-left: -1rem;\n}\n.-mr-16 {\n margin-right: -1rem;\n}\n.mb-10 {\n margin-bottom: 0.625rem;\n}\n.mb-12 {\n margin-bottom: 0.75rem;\n}\n.mb-28 {\n margin-bottom: 1.75rem;\n}\n.mb-4 {\n margin-bottom: 0.25rem;\n}\n.ml-0 {\n margin-left: 0rem;\n}\n.ml-4 {\n margin-left: 0.25rem;\n}\n.ml-64 {\n margin-left: 4rem;\n}\n.ml-8 {\n margin-left: 0.5rem;\n}\n.ml-auto {\n margin-left: auto;\n}\n.mr-4 {\n margin-right: 0.25rem;\n}\n.mr-8 {\n margin-right: 0.5rem;\n}\n.mr-auto {\n margin-right: auto;\n}\n.mt-12 {\n margin-top: 0.75rem;\n}\n.mt-16 {\n margin-top: 1rem;\n}\n.mt-2 {\n margin-top: 0.125rem;\n}\n.mt-20 {\n margin-top: 1.25rem;\n}\n.mt-28 {\n margin-top: 1.75rem;\n}\n.mt-32 {\n margin-top: 2rem;\n}\n.mt-4 {\n margin-top: 0.25rem;\n}\n.mt-6 {\n margin-top: 0.375rem;\n}\n.mt-8 {\n margin-top: 0.5rem;\n}\n.mt-auto {\n margin-top: auto;\n}\n.line-clamp-1 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n}\n.line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.line-clamp-3 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n}\n.line-clamp-4 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 4;\n}\n.block {\n display: block;\n}\n.inline-block {\n display: inline-block;\n}\n.inline {\n display: inline;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.hidden {\n display: none;\n}\n.aspect-16x9 {\n aspect-ratio: 16/9;\n}\n.aspect-1x1 {\n aspect-ratio: 1/1;\n}\n.aspect-21x9 {\n aspect-ratio: 21/9;\n}\n.aspect-3x2 {\n aspect-ratio: 3/2;\n}\n.aspect-4x3 {\n aspect-ratio: 4/3;\n}\n.aspect-4x5 {\n aspect-ratio: 4/5;\n}\n.h-0 {\n height: 0rem;\n}\n.h-12 {\n height: 0.75rem;\n}\n.h-16 {\n height: 1rem;\n}\n.h-2 {\n height: 0.125rem;\n}\n.h-20 {\n height: 1.25rem;\n}\n.h-24 {\n height: 1.5rem;\n}\n.h-28 {\n height: 1.75rem;\n}\n.h-32 {\n height: 2rem;\n}\n.h-36 {\n height: 2.25rem;\n}\n.h-4 {\n height: 0.25rem;\n}\n.h-40 {\n height: 2.5rem;\n}\n.h-44 {\n height: 2.75rem;\n}\n.h-48 {\n height: 3rem;\n}\n.h-64 {\n height: 4rem;\n}\n.h-8 {\n height: 0.5rem;\n}\n.h-96 {\n height: 6rem;\n}\n.h-\\[85px\\] {\n height: 85px;\n}\n.h-auto {\n height: auto;\n}\n.h-full {\n height: 100%;\n}\n.\\!min-h-20 {\n min-height: 1.25rem !important;\n}\n.min-h-156 {\n min-height: 156px;\n}\n.min-h-36 {\n min-height: 2.25rem;\n}\n.min-h-44 {\n min-height: 2.75rem;\n}\n.min-h-56 {\n min-height: 3.5rem;\n}\n.min-h-80 {\n min-height: 5rem;\n}\n.min-h-\\[150px\\] {\n min-height: 150px;\n}\n.min-h-\\[225px\\] {\n min-height: 225px;\n}\n.min-h-\\[90px\\] {\n min-height: 90px;\n}\n.min-h-full {\n min-height: 100%;\n}\n.min-h-screen {\n min-height: 100vh;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-20 {\n width: 1.25rem;\n}\n.w-28 {\n width: 1.75rem;\n}\n.w-32 {\n width: 2rem;\n}\n.w-4 {\n width: 0.25rem;\n}\n.w-44 {\n width: 2.75rem;\n}\n.w-\\[200px\\] {\n width: 200px;\n}\n.w-\\[300px\\] {\n width: 300px;\n}\n.w-\\[54px\\] {\n width: 54px;\n}\n.w-auto {\n width: auto;\n}\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n.w-full {\n width: 100%;\n}\n.min-w-\\[200px\\] {\n min-width: 200px;\n}\n.min-w-\\[210px\\] {\n min-width: 210px;\n}\n.min-w-\\[250px\\] {\n min-width: 250px;\n}\n.min-w-\\[280px\\] {\n min-width: 280px;\n}\n.max-w-120 {\n max-width: 120px;\n}\n.max-w-full {\n max-width: 100%;\n}\n.max-w-sidebar {\n max-width: 1224px;\n}\n.max-w-xxxl {\n max-width: 2200px;\n}\n.flex-none {\n flex: none;\n}\n.grow {\n flex-grow: 1;\n}\n.-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.resize {\n resize: both;\n}\n.appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.grid-cols-10 {\n grid-template-columns: repeat(10, minmax(0, 1fr));\n}\n.grid-cols-11 {\n grid-template-columns: repeat(11, minmax(0, 1fr));\n}\n.grid-cols-12 {\n grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n}\n.grid-cols-6 {\n grid-template-columns: repeat(6, minmax(0, 1fr));\n}\n.grid-cols-7 {\n grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n.grid-cols-8 {\n grid-template-columns: repeat(8, minmax(0, 1fr));\n}\n.grid-cols-9 {\n grid-template-columns: repeat(9, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-row-reverse {\n flex-direction: row-reverse;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-1 {\n gap: 0.0625rem;\n}\n.gap-12 {\n gap: 0.75rem;\n}\n.gap-20 {\n gap: 1.25rem;\n}\n.gap-4 {\n gap: 0.25rem;\n}\n.gap-x-12 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n}\n.gap-x-16 {\n -moz-column-gap: 1rem;\n column-gap: 1rem;\n}\n.gap-x-2 {\n -moz-column-gap: 0.125rem;\n column-gap: 0.125rem;\n}\n.gap-x-4 {\n -moz-column-gap: 0.25rem;\n column-gap: 0.25rem;\n}\n.gap-x-8 {\n -moz-column-gap: 0.5rem;\n column-gap: 0.5rem;\n}\n.gap-y-12 {\n row-gap: 0.75rem;\n}\n.gap-y-16 {\n row-gap: 1rem;\n}\n.gap-y-4 {\n row-gap: 0.25rem;\n}\n.gap-y-8 {\n row-gap: 0.5rem;\n}\n.space-x-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.0625rem * var(--tw-space-x-reverse));\n margin-left: calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-y-12 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n.space-y-16 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-x-auto {\n overflow-x: auto;\n}\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.text-ellipsis {\n text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.break-words {\n overflow-wrap: break-word;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 16px;\n}\n.rounded-md {\n border-radius: 12px;\n}\n.rounded-pill {\n border-radius: 100px;\n}\n.rounded-sm {\n border-radius: 8px;\n}\n.rounded-xs {\n border-radius: 4px;\n}\n.rounded-xxs {\n border-radius: 2px;\n}\n.rounded-t-lg {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n.rounded-tl-lg {\n border-top-left-radius: 16px;\n}\n.rounded-tr-lg {\n border-top-right-radius: 16px;\n}\n.border {\n border-width: 1px;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-3 {\n border-width: 3px;\n}\n.border-b-2 {\n border-bottom-width: 2px;\n}\n.border-l-0 {\n border-left-width: 0px;\n}\n.border-r-0 {\n border-right-width: 0px;\n}\n.border-t-2 {\n border-top-width: 2px;\n}\n.border-\\[\\#0034CB\\] {\n --tw-border-opacity: 1;\n border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n.border-\\[\\#d2d2d2\\] {\n --tw-border-opacity: 1;\n border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n.border-accent {\n border-color: var(--green-500);\n}\n.border-current {\n border-color: currentColor;\n}\n.border-default {\n border-color: var(--black);\n}\n.border-error {\n border-color: var(--red-700);\n}\n.border-inverse {\n border-color: var(--white);\n}\n.border-inverse-soft {\n border-color: rgba(255, 255, 255, 0.3);\n}\n.border-inverse-softer {\n border-color: rgba(255, 255, 255, 0.15);\n}\n.border-soft {\n border-color: rgba(0, 0, 0, .15 );\n}\n.border-softer {\n border-color: rgba(0, 0, 0, .1 );\n}\n.border-softest {\n border-color: rgba(0, 0, 0, .05 );\n}\n.border-transparent {\n border-color: var(--transparent);\n}\n.border-b-softer {\n border-bottom-color: rgba(0, 0, 0, .1 );\n}\n.\\!bg-accent-dark {\n background-color: var(--green-600) !important;\n}\n.\\!bg-darker {\n background-color: var(--grey-400) !important;\n}\n.\\!bg-strong-dark {\n background-color: var(--grey-800) !important;\n}\n.bg-accent {\n background-color: var(--green-500);\n}\n.bg-accent-dark {\n background-color: var(--green-600);\n}\n.bg-accent-darker {\n background-color: var(--green-800);\n}\n.bg-current {\n background-color: currentColor;\n}\n.bg-dark {\n background-color: var(--grey-300);\n}\n.bg-darker {\n background-color: var(--grey-400);\n}\n.bg-default {\n background-color: var(--grey-200);\n}\n.bg-error {\n background-color: var(--red-200);\n}\n.bg-inverse {\n background-color: var(--white);\n}\n.bg-inverse-soft {\n background-color: rgba(255, 255, 255, .2);\n}\n.bg-inverse-softer {\n background-color: rgba(255, 255, 255, .15);\n}\n.bg-on-dark {\n background-color: rgba(255, 255, 255, 0.2);\n}\n.bg-on-gradient {\n background-color: rgba(0, 0, 0, 0.1);\n}\n.bg-overlay {\n background-color: rgba(0, 0, 0, 0.25);\n}\n.bg-strong {\n background-color: var(--grey-700);\n}\n.bg-strong-dark {\n background-color: var(--grey-800);\n}\n.bg-stronger {\n background-color: var(--grey-900);\n}\n.bg-strongest {\n background-color: var(--black);\n}\n.bg-strongest-soft {\n background-color: rgba(0, 0, 0, .05);\n}\n.bg-success {\n background-color: var(--green-200);\n}\n.bg-transparent {\n background-color: var(--transparent);\n}\n.bg-warning {\n background-color: var(--yellow-200);\n}\n.bg-opacity-90 {\n --tw-bg-opacity: 0.9;\n}\n.object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n.object-center {\n -o-object-position: center;\n object-position: center;\n}\n.\\!p-8 {\n padding: 0.5rem !important;\n}\n.p-0 {\n padding: 0rem;\n}\n.p-12 {\n padding: 0.75rem;\n}\n.p-16 {\n padding: 1rem;\n}\n.p-2 {\n padding: 0.125rem;\n}\n.p-20 {\n padding: 1.25rem;\n}\n.p-32 {\n padding: 2rem;\n}\n.p-4 {\n padding: 0.25rem;\n}\n.p-6 {\n padding: 0.375rem;\n}\n.p-8 {\n padding: 0.5rem;\n}\n.\\!px-0 {\n padding-left: 0rem !important;\n padding-right: 0rem !important;\n}\n.\\!py-0 {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n}\n.\\!py-4 {\n padding-top: 0.25rem !important;\n padding-bottom: 0.25rem !important;\n}\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-16 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-2 {\n padding-left: 0.125rem;\n padding-right: 0.125rem;\n}\n.px-20 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.px-4 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-6 {\n padding-left: 0.375rem;\n padding-right: 0.375rem;\n}\n.py-1 {\n padding-top: 0.0625rem;\n padding-bottom: 0.0625rem;\n}\n.py-12 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.py-16 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-20 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n.py-4 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-6 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.pb-16 {\n padding-bottom: 1rem;\n}\n.pb-20 {\n padding-bottom: 1.25rem;\n}\n.pb-28 {\n padding-bottom: 1.75rem;\n}\n.pb-60 {\n padding-bottom: 3.75rem;\n}\n.pb-8 {\n padding-bottom: 0.5rem;\n}\n.pl-12 {\n padding-left: 0.75rem;\n}\n.pl-28 {\n padding-left: 1.75rem;\n}\n.pl-32 {\n padding-left: 2rem;\n}\n.pl-36 {\n padding-left: 2.25rem;\n}\n.pl-4 {\n padding-left: 0.25rem;\n}\n.pl-8 {\n padding-left: 0.5rem;\n}\n.pr-12 {\n padding-right: 0.75rem;\n}\n.pr-28 {\n padding-right: 1.75rem;\n}\n.pr-32 {\n padding-right: 2rem;\n}\n.pr-4 {\n padding-right: 0.25rem;\n}\n.pr-8 {\n padding-right: 0.5rem;\n}\n.pt-12 {\n padding-top: 0.75rem;\n}\n.pt-20 {\n padding-top: 1.25rem;\n}\n.pt-28 {\n padding-top: 1.75rem;\n}\n.pt-32 {\n padding-top: 2rem;\n}\n.pt-40 {\n padding-top: 2.5rem;\n}\n.pt-48 {\n padding-top: 3rem;\n}\n.pt-8 {\n padding-top: 0.5rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.lowercase {\n text-transform: lowercase;\n}\n.\\!text-current {\n color: currentColor !important;\n}\n.text-\\[\\#0034CB\\] {\n --tw-text-opacity: 1;\n color: rgb(0 52 203 / var(--tw-text-opacity));\n}\n.text-accent {\n color: var(--green-500);\n}\n.text-current {\n color: currentColor;\n}\n.text-default {\n color: var(--black);\n}\n.text-error {\n color: var(--red-700);\n}\n.text-extra-light {\n color: var(--grey-300);\n}\n.text-inverse {\n color: var(--white);\n}\n.text-light {\n color: var(--grey-700);\n}\n.text-lighter {\n color: var(--grey-600);\n}\n.text-lightest {\n color: var(--grey-500);\n}\n.text-on-gradient {\n color: rgba(0, 0, 0, 0.55);\n}\n.text-success {\n color: var(--green-800);\n}\n.text-transparent {\n color: var(--transparent);\n}\n.text-warning {\n color: var(--yellow-900);\n}\n.underline {\n text-decoration-line: underline;\n}\n.\\!no-underline {\n text-decoration-line: none !important;\n}\n.decoration-\\[\\#0034CB\\] {\n text-decoration-color: #0034CB;\n}\n.decoration-accent {\n text-decoration-color: var(--green-500);\n}\n.decoration-2 {\n text-decoration-thickness: 2px;\n}\n.underline-offset-4 {\n text-underline-offset: 4px;\n}\n.opacity-0 {\n opacity: 0;\n}\n.opacity-100 {\n opacity: 1;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-accent {\n --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-small {\n --tw-shadow: 0px 1.5px 2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0px 1.5px 2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.outline {\n outline-style: solid;\n}\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur {\n --tw-backdrop-blur: blur(8px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n[class*=\"keyline-\"] {\n position: relative;\n}\n[class*=\"keyline-\"]::before {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n inset-inline-start: calc(var(--inner-gutter) / -2 - 1px);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border: 1px solid transparent;\n pointer-events: none;\n}\n[class*=\"keyline-0\"]::before {\n border-inline-end-color: transparent;\n border-inline-start-color: transparent;\n}\n.ratio {\n --ratio: 100%;\n display: block;\n position: relative;\n overflow: hidden;\n}\n.ratio::before {\n content: attr(👻);\n display: block;\n width: 100%;\n height: 0;\n padding-bottom: var(--ratio);\n}\n.ratio > [class*=\"ratio-content\"] {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n}\n[class*=underline-] {\n text-decoration-line: underline;\n}\n.underline-offset-4 {\n text-underline-offset: 0.2em;\n}\n.\\@container {\n container-type: inline-size;\n}\n.bg-gradient-01-top {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n }\n.bg-gradient-01-bottom {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n }\n.bg-gradient-02-top {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n }\n.bg-gradient-02-bottom {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n }\n.bg-gradient-03-top {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n }\n.bg-gradient-03-bottom {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n }\n.bg-gradient-04-top {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n }\n.bg-gradient-04-bottom {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n }\n.after\\:effect-opacity::after {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.before\\:effect-opacity::before {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n@media (min-width: 750px) {\n .md\\:grid-col-span-4 {\n --container-grid-columns: 4;\n grid-column: span 4 / span 4;\n }\n .md\\:grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n }\n .md\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .md\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .md\\:w-10-cols > * {\n --container-grid-columns: 10;\n }\n}\n@media (min-width: 900px) {\n .lg\\:grid-col-span-5 {\n --container-grid-columns: 5;\n grid-column: span 5 / span 5;\n }\n .lg\\:grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n }\n .lg\\:grid-col-start-7 {\n grid-column-start: 7;\n }\n .lg\\:w-8-cols {\n width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .lg\\:w-8-cols {\n width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .lg\\:w-8-cols > * {\n --container-grid-columns: 8;\n }\n .lg\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .lg\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .lg\\:w-10-cols > * {\n --container-grid-columns: 10;\n }\n}\n.even\\:bg-inverse-softer:nth-child(even) {\n background-color: rgba(255, 255, 255, .15);\n}\n.invalid\\:text-lightest:invalid {\n color: var(--grey-500);\n}\n.focus-within\\:bg-transparent:focus-within {\n background-color: var(--transparent);\n}\n.hover\\:bg-accent-dark:hover {\n background-color: var(--green-600);\n}\n.hover\\:bg-dark:hover {\n background-color: var(--grey-300);\n}\n.hover\\:bg-darker:hover {\n background-color: var(--grey-400);\n}\n.hover\\:bg-default:hover {\n background-color: var(--grey-200);\n}\n.hover\\:bg-inverse:hover {\n background-color: var(--white);\n}\n.hover\\:bg-strong-dark:hover {\n background-color: var(--grey-800);\n}\n.hover\\:bg-transparent:hover {\n background-color: var(--transparent);\n}\n.hover\\:text-default:hover {\n color: var(--black);\n}\n.hover\\:text-lighter:hover {\n color: var(--grey-600);\n}\n.hover\\:\\!underline:hover {\n text-decoration-line: underline !important;\n}\n.hover\\:no-underline:hover {\n text-decoration-line: none;\n}\n.hover\\:shadow-hover:hover {\n --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.focus-visible\\:rounded-xs:focus-visible {\n border-radius: 4px;\n}\n.focus-visible\\:text-default:focus-visible {\n color: var(--black);\n}\n.focus-visible\\:outline-none:focus-visible {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n.disabled\\:bg-dark:disabled {\n background-color: var(--grey-300);\n}\n.disabled\\:text-lightest:disabled {\n color: var(--grey-500);\n}\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n cursor: not-allowed;\n}\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n border-color: var(--transparent) !important;\n}\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n background-color: var(--grey-300);\n}\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n background-color: var(--transparent);\n}\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n color: var(--grey-700);\n}\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n color: var(--grey-500);\n}\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n text-decoration-line: line-through;\n}\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n background-color: var(--grey-400);\n}\n.after\\:absolute::after {\n position: absolute;\n}\n.after\\:inset-0::after {\n inset: 0rem;\n}\n.after\\:inset-x-0::after {\n left: 0rem;\n right: 0rem;\n}\n.after\\:bottom-0::after {\n bottom: 0rem;\n}\n.after\\:left-16::after {\n left: 1rem;\n}\n.after\\:right-16::after {\n right: 1rem;\n}\n.after\\:z-10::after {\n z-index: 10;\n}\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n.after\\:rounded-t-lg::after {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n.after\\:border-3::after {\n border-width: 3px;\n}\n.after\\:border-b-2::after {\n border-bottom-width: 2px;\n}\n.after\\:\\!border-transparent::after {\n border-color: var(--transparent) !important;\n}\n.after\\:border-accent::after {\n border-color: var(--green-500);\n}\n.after\\:border-softest::after {\n border-color: rgba(0, 0, 0, .05 );\n}\n.after\\:opacity-0::after {\n opacity: 0;\n}\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n}\n.hover\\:after\\:\\!border-transparent:hover::after {\n border-color: var(--transparent) !important;\n}\n.hover\\:after\\:opacity-100:hover::after {\n opacity: 1;\n}\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n opacity: 1;\n}\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n border-color: var(--transparent) !important;\n}\n.before\\:absolute::before {\n position: absolute;\n}\n.before\\:inset-x-0::before {\n left: 0rem;\n right: 0rem;\n}\n.before\\:-bottom-2::before {\n bottom: -0.125rem;\n}\n.before\\:bottom-0::before {\n bottom: 0rem;\n}\n.before\\:h-12::before {\n height: 0.75rem;\n}\n.before\\:h-3::before {\n height: 0.1875rem;\n}\n.before\\:rounded-lg::before {\n border-radius: 16px;\n}\n.before\\:border-2::before {\n border-width: 2px;\n}\n.before\\:border-softest::before {\n border-color: rgba(0, 0, 0, .05 );\n}\n.before\\:bg-default::before {\n background-color: var(--grey-200);\n}\n.before\\:bg-inverse-softer::before {\n background-color: rgba(255, 255, 255, .15);\n}\n.before\\:\\!opacity-100::before {\n opacity: 1 !important;\n}\n.before\\:opacity-0::before {\n opacity: 0;\n}\n.before\\:opacity-5::before {\n opacity: 0.05;\n}\n.before\\:content-\\[\\'\\'\\]::before {\n --tw-content: '';\n content: var(--tw-content);\n}\n.before\\:bg-gradient-y::before {\n background: linear-gradient(to bottom, transparent, ease-in-out, black);\n }\n.before\\:bg-gradient-01-top::before {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-01-bottom::before {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-02-top::before {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-02-bottom::before {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-03-top::before {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-03-bottom::before {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-04-top::before {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-04-bottom::before {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n }\n.hover\\:before\\:opacity-100:hover::before {\n opacity: 1;\n}\n.focus-visible\\:before\\:\\!opacity-0:focus-visible::before {\n opacity: 0 !important;\n}\n.focus-visible\\:before\\:opacity-0:focus-visible::before {\n opacity: 0;\n}\n@container (min-width: 46.875rem) {\n .\\@md\\:max-w-192 {\n max-width: 192px;\n }\n}\n@media (min-width: 0px) {\n .sm\\:mb-4 {\n margin-bottom: 0.25rem;\n }\n .sm\\:max-w-\\[200px\\] {\n max-width: 200px;\n }\n}\n@media (min-width: 750px) {\n .md\\:left-1\\/2 {\n left: 50%;\n }\n .md\\:flex {\n display: flex;\n }\n .md\\:hidden {\n display: none;\n }\n .md\\:w-\\[300px\\] {\n width: 300px;\n }\n .md\\:-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n .md\\:-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n .md\\:gap-y-12 {\n row-gap: 0.75rem;\n }\n .md\\:pt-28 {\n padding-top: 1.75rem;\n }\n}\n@media (min-width: 900px) {\n .lg\\:order-last {\n order: 9999;\n }\n .lg\\:order-none {\n order: 0;\n }\n .lg\\:mt-0 {\n margin-top: 0rem;\n }\n .lg\\:block {\n display: block;\n }\n .lg\\:flex {\n display: flex;\n }\n .lg\\:hidden {\n display: none;\n }\n .lg\\:w-\\[500px\\] {\n width: 500px;\n }\n .lg\\:w-auto {\n width: auto;\n }\n .lg\\:max-w-\\[720px\\] {\n max-width: 720px;\n }\n .lg\\:flex-row {\n flex-direction: row;\n }\n .lg\\:flex-nowrap {\n flex-wrap: nowrap;\n }\n .lg\\:gap-y-16 {\n row-gap: 1rem;\n }\n .lg\\:px-28 {\n padding-left: 1.75rem;\n padding-right: 1.75rem;\n }\n .lg\\:\\!pl-12 {\n padding-left: 0.75rem !important;\n }\n .lg\\:\\!pr-12 {\n padding-right: 0.75rem !important;\n }\n}\n@media (min-width: 1024px) {\n .xl\\:pb-40 {\n padding-bottom: 2.5rem;\n }\n}\n@media (min-width: 2200px) {\n .xxxl\\:px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n }\n}\n\n";const EdsInputFieldStyle0=edsInputFieldCss;const EdsInputField=class{constructor(hostRef){registerInstance(this,hostRef);this.edsinput=createEvent(this,"edsinput",7);this.edschange=createEvent(this,"edschange",7);this.handleNativeInput=ev=>{var _a,_b;(_a=this.onInput)===null||_a===void 0?void 0:_a.call(this,ev);if(this.shouldEmitValue()){const target=ev.target;let value=target.value;if(this.type==='checkbox'&&((_b=this.parsedOptions)===null||_b===void 0?void 0:_b.length)>0){// checkbox group case
|
|
950
|
-
const checkboxes=this.hostEl.querySelectorAll(`input[type="checkbox"][name="${this.name}"]`);value=Array.from(checkboxes).filter(cb=>cb.checked).map(cb=>cb.value);}else if(this.type==='checkbox'){value=target.checked;}else if(this.type==='radio'){value=target.value;}else {value=target.value;}this.edsinput.emit({value});}};this.handleNativeChange=ev=>{var _a,_b;(_a=this.onChangeNative)===null||_a===void 0?void 0:_a.call(this,ev);if(this.shouldEmitValue()){const target=ev.target;let value=target.value;if(this.type==='checkbox'&&((_b=this.parsedOptions)===null||_b===void 0?void 0:_b.length)>0){// checkbox group case
|
|
951
|
-
const checkboxes=this.hostEl.querySelectorAll(`input[type="checkbox"][name="${this.name}"]`);value=Array.from(checkboxes).filter(cb=>cb.checked).map(cb=>cb.value);}else if(this.type==='checkbox'){value=target.checked;}else if(this.type==='radio'){value=target.value;}else {value=target.value;}this.edschange.emit({value});}};this.name=undefined;this.inputId=undefined;this.placeholder=undefined;this.disabled=false;this.required=false;this.label=undefined;this.hint=undefined;this.icon=undefined;this.link=undefined;this.message=undefined;this.error=false;this.checked=undefined;this.errorMessage=undefined;this.value=undefined;this.maxLength=undefined;this.min=undefined;this.max=undefined;this.step=undefined;this.options=undefined;this.type='text';this.onChangeNative=undefined;this.onInput=undefined;this.exposeValueEvents=true;}shouldEmitValue(){return this.exposeValueEvents&&this.type!=='password';}get parsedOptions(){if(Array.isArray(this.options)){return this.options;}if(typeof this.options==='string'){try{return JSON.parse(this.options);}catch(_a){// eslint-disable-next-line
|
|
952
|
-
console.warn('Invalid options format');return [];}}return [];}render(){const inputOpts=Object.assign({name:this.name,id:this.inputId,placeholder:this.placeholder,disabled:this.disabled,onInput:this.handleNativeInput,onChange:this.handleNativeChange,type:this.type,required:this.required,value:this.value,error:this.error,icon:this.icon,checked:this.checked},this.type==='number'?{min:this.min,max:this.max,step:this.step}:{});return h("div",{key:'aca76f43840c0e8344d548610bc832cd75ff7bd9'},this.type==='checkbox'||this.type==='radio'?this.parsedOptions.length>0?h("fieldset",{class:"space-y-4"},h("div",{class:"flex justify-between mb-4"},this.label&&h("eds-input-label",{name:this.inputId||this.name,label:this.label,required:this.required}),this.hint&&h("p",{id:`${this.name}-hint`,class:"f-ui-05 text-lighter mt-8 ml-8"},this.hint)),this.parsedOptions.map(option=>h("div",{class:"flex items-center gap-x-4 gap-y-4",key:option.value},h("eds-input",Object.assign({},inputOpts,{value:option.value,checked:typeof this.value==='string'&&this.value.split(',').includes(String(option.value))})),h("label",{htmlFor:this.name,class:`input-label-options ${this.disabled?'text-lighter':''}`},option.label)))):h("div",{class:"flex items-center gap-x-8"},h("eds-input",Object.assign({},inputOpts,{value:this.value,checked:this.value==='on'||this.checked})),this.label&&h("eds-input-label",{name:this.inputId||this.name,label:this.label,disabled:this.disabled,required:this.required})):h("div",null,h("div",{class:"flex justify-between mb-4"},this.label&&h("eds-input-label",{name:this.inputId||this.name,label:this.label,disabled:this.disabled,required:this.required}),this.hint&&h("p",{id:`${this.name}-hint`,class:"f-ui-05 text-lighter mt-8 ml-8"},this.hint)),this.type==='select'?h("eds-input-select",Object.assign({},inputOpts,{options:this.parsedOptions})):this.type==='file'?h("input",{type:"file",id:this.inputId||this.name,name:this.name,onChange:this.onChangeNative,disabled:this.disabled,required:this.required}):this.type==='search'?h("eds-input-search",{name:"search-box"}):this.type==='range'?(()=>{var _a,_b,_c;const rangeProps={name:inputOpts.name,inputId:inputOpts.id||inputOpts.name,disabled:inputOpts.disabled,required:inputOpts.required,onInput:inputOpts.onInput,onChange:inputOpts.onChange};const opt=this.parsedOptions;const numberValue=typeof this.value==='string'?parseFloat(this.value):this.value||0;return h("eds-input-range",Object.assign({},rangeProps,{min:(_a=opt[0])===null||_a===void 0?void 0:_a.value,max:(_b=opt[1])===null||_b===void 0?void 0:_b.value,step:(_c=opt[2])===null||_c===void 0?void 0:_c.value,value:numberValue}));})():h("eds-input",Object.assign({},inputOpts))),h("div",{key:'27dc5705b9627fb597b04837b488326371fac2e2',class:"mt-6"},h("eds-input-footer",{key:'6e73fb80b91de81ee22cb33b7589916b7eb882fe',id:`${this.name}-footer`,name:this.name,message:this.message,"error-message":this.errorMessage,error:this.error,link:this.link})));}static get delegatesFocus(){return true;}get hostEl(){return getElement(this);}};EdsInputField.style=EdsInputFieldStyle0;const edsInputFooterCss="p{margin:0}.text-error{color:var(--red-700)}.flex{display:flex}.items-center{align-items:center}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.ml-4{margin-left:0.25rem}.mb-4{margin-bottom:0.25rem}.f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.text-lighter{color:var(--grey-600)}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:text-lighter:hover{color:var(--grey-600)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}";const EdsInputFooterStyle0=edsInputFooterCss;const EdsInputFooter=class{constructor(hostRef){registerInstance(this,hostRef);this.name=undefined;this.errorMessage=undefined;this.message=undefined;this.error=false;this.link=undefined;}render(){return h("div",{key:'6c045ff40d674a27cf4fe4c1a125251edd7455ab'},this.error&&this.errorMessage&&h("div",{key:'d6edd41359f7efb8f0a3bce487b852c1b26c035a',id:`error_${this.name}`,class:"text-error flex items-center"},h("eds-icon-wrapper",{key:'cd24f34b58c81f00046cc1d90a5b993928e72be8',icon:"warning"}),h("p",{key:'bf718bcf0e04c5af1924381f567d5921bd43edec',class:"f-ui-04 ml-4 mb-4",innerHTML:this.errorMessage})),this.message&&h("p",{key:'4ea38b231e7b7fba679a05c12773a486aa3201bc',id:`desc_${this.name}`,class:"f-ui-05 text-lighter",innerHTML:this.message}),this.link&&h("eds-link",{key:'e2e1255c198b707abb2b2194100b83f7b00de9e7',label:this.link.label,url:this.link.url,intent:"underline",size:"small",external:true}));}};EdsInputFooter.style=EdsInputFooterStyle0;const edsInputLabelCss=".input-label{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.input-label b,.input-label strong{font-weight:var(--f-ui-02---bold-weight, bold)}.text-lighter{color:var(--grey-600)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}";const EdsInputLabelStyle0=edsInputLabelCss;const EdsInputLabel=class{constructor(hostRef){registerInstance(this,hostRef);this.label=undefined;this.name=undefined;this.required=false;this.disabled=false;}render(){return h("label",{key:'5e97f430a0ef1cdc4d0b28618d78402991fda8fe',htmlFor:this.name,class:`input-label ${this.disabled?'text-lighter':''}`},this.label,this.required&&h("span",{key:'fedf93c4b037f387c4aad3ffab354de94de564d3'},h("span",{key:'72ae856c25308b676d84d7ee0bf214362218a203',"aria-hidden":"true"},"*"),h("span",{key:'39fcf9a2b39a0207eb0b6f62c16183885c98f145',class:"sr-only"},"required")));}};EdsInputLabel.style=EdsInputLabelStyle0;const EdsInputRange=class{constructor(hostRef){registerInstance(this,hostRef);this.edsrange=createEvent(this,"edsrange",7);this.onInput=e=>{const target=e.target;this.sliderVal=parseInt(target.value,10);// Update the slider value dynamically
|
|
953
|
-
};this.onChange=e=>{const target=e.target;this.sliderVal=parseInt(target.value,10);// Update the slider value dynamically
|
|
954
|
-
this.edsrange.emit(this.sliderVal);};this.name=undefined;this.inputId='range';this.disabled=false;this.required=false;this.min=0;this.max=100;this.step=1;this.value=undefined;this.sliderVal=undefined;}componentWillLoad(){this.sliderVal=this.value!==undefined?this.value:this.max%2===0?this.max/2:Math.ceil(this.max/2);}// Keep the internal state in sync when the passed value changes.
|
|
955
|
-
onValueChange(newVal){if(newVal!==undefined){this.sliderVal=newVal;}}componentDidLoad(){// Assign the native input element after the component loads
|
|
956
|
-
this.inputElement=this.el.querySelector('input');}async getInputElement(){// Return the native input element
|
|
957
|
-
return this.inputElement;}render(){return h("div",{key:'c8106420cb482123e72c8e5b00079d9921749290',class:"relative flex flex-col items-start"},h("input",{key:'752dfbeb9fb73c8a4b5ad874461b63e73477ca99',id:this.inputId||this.name,name:this.name,min:this.min,max:this.max,step:this.step,value:this.sliderVal,required:this.required,disabled:this.disabled,type:"range",class:"w-full py-6 input",tabindex:"0",role:"slider","aria-describedby":`desc_${this.name}`,"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.sliderVal,onInput:this.onInput,onChange:this.onChange}),h("p",{key:'de123d07b20996d3f0c7c5baff788ab42fa0a386',id:`desc_${this.name}`,class:"block f-ui-05 mt-4 text-lighter"},"Current value: ",this.sliderVal));}get el(){return getElement(this);}static get watchers(){return {"value":["onValueChange"]};}};const EdsInputSearch=class{constructor(hostRef){registerInstance(this,hostRef);this.search=createEvent(this,"search",7);/**
|
|
958
|
-
* Keydown event listener to detect Command+K (Mac) or Ctrl+K (Windows/Linux)
|
|
959
|
-
* and focus the input element when triggered.
|
|
960
|
-
*
|
|
961
|
-
* @param e - The keyboard event.
|
|
962
|
-
*/this.keydownListener=e=>{// Check for Command+K (Mac) or Ctrl+K (Windows/Linux)
|
|
963
|
-
if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==='k'){e.preventDefault();// Focus the input if it's available and not disabled
|
|
964
|
-
if(this.inputElement&&!this.disabled){this.inputElement.focus();}}};/*onInput = (e: any) => {
|
|
965
|
-
// eslint-disable-next-line
|
|
966
|
-
console.log('on input:', e);
|
|
967
|
-
};*/this.onChange=e=>{// eslint-disable-next-line
|
|
968
|
-
this.search.emit({event:'change',value:e.target.value});sendAnalytics({category:'ui-component',parentContext:null,tag:this.el.tagName.toLowerCase(),name:e.target.value||'',action:'search'});};this.name=undefined;this.inputId='search-main';this.placeholder='Search...';this.value=undefined;this.disabled=false;this.required=false;this.decorate=undefined;this.label='Search';}componentDidLoad(){// Assign the native input element after the component loads
|
|
969
|
-
this.inputElement=this.el.querySelector('input');document.addEventListener('keydown',this.keydownListener);}disconnectedCallback(){// Clean up the event listener when the component is removed
|
|
970
|
-
document.removeEventListener('keydown',this.keydownListener);}async getInputElement(){// Return the native input element
|
|
971
|
-
return this.inputElement;}render(){return h("div",{key:'f8484e4e4a971db07a75ca91b66d4b3cddd5cee9',class:"relative flex items-center"},h("eds-icon-wrapper",{key:'68782ac168c062564d6378bc1bc62e58efeb3555',icon:"search",class:"absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest","aria-hidden":"true"}),h("input",{key:'c59e9b91f214fc94fc4fb4c991c3e667ea3c24ae',id:this.inputId||this.name,name:this.name,placeholder:this.placeholder,value:this.value||'',required:this.required,disabled:this.disabled,type:"search","aria-label":this.placeholder,class:`input pl-36 ${this.decorate}`,//onInput={this.onInput}
|
|
972
|
-
onChange:this.onChange}));}get el(){return getElement(this);}};const EdsInputSelect=class{constructor(hostRef){registerInstance(this,hostRef);this.edsselect=createEvent(this,"edsselect",7);this.handleChange=event=>{const target=event.target;this.edsselect.emit(target.value);};this.inputId=undefined;this.name=undefined;this.placeholder=undefined;this.disabled=false;this.hasMessage=false;this.error=false;this.required=false;this.options=[];this.value=undefined;}render(){const selectId=this.inputId||this.name;const placeholderText=this.placeholder||`Pick from the list`;const describedBy=this.hasMessage||this.error?`${this.name}-error`:undefined;return h("div",{key:'7f6a81c0f3d1f998c2bd671722cd06992b382540',class:"relative"},h("select",{key:'3e62519e3973cf1136cda70a3af1cc2a2e093451',id:selectId,name:this.name,class:{input:true,'input-error':this.error,'px-4':true,'py-2':true},"aria-invalid":this.error?'true':'false',"aria-describedby":describedBy,disabled:this.disabled,required:this.required,onChange:this.handleChange},h("option",{key:'4292bd21e8c912f3bb0bc727ed2657051a3e03b8',value:"",disabled:true,hidden:true},placeholderText),this.options.map((opt,index)=>h("option",{key:index,value:opt.value,selected:opt.value===this.value},opt.label))),h("span",{key:'a03c59be80950fd17a89b0adc693654e99496018',class:"bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center"},h("eds-icon-wrapper",{key:'0183976264d130c3c12b30c829fae36512607ac4',class:"w-20 h-20",icon:"chevron-right"})));}};const edsLinkCss="*,\n::before,\n::after {\n box-sizing: border-box;\n /* 1 */\n border-width: 0;\n /* 2 */\n border-style: solid;\n /* 2 */\n border-color: currentColor;\n /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n\n.f-body-02 {\n font-family: var(--f-body-02-fontFamily);\n font-weight: var(--f-body-02-fontWeight);\n font-size: var(--f-body-02-fontSize);\n line-height: var(--f-body-02-lineHeight);\n letter-spacing: var(--f-body-02-letterSpacing);\n}\n\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.f-ui-02 {\n font-family: var(--f-ui-02-fontFamily);\n font-weight: var(--f-ui-02-fontWeight);\n font-size: var(--f-ui-02-fontSize);\n line-height: var(--f-ui-02-lineHeight);\n letter-spacing: var(--f-ui-02-letterSpacing);\n}\n\n.f-ui-04 {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n}\n\n.f-body-01 b,\n.f-body-01 strong {\n font-weight: var(--f-body-01---bold-weight, bold);\n}\n\n.f-body-02 b,\n.f-body-02 strong {\n font-weight: var(--f-body-02---bold-weight, bold);\n}\n\n.f-ui-01 b,\n.f-ui-01 strong {\n font-weight: var(--f-ui-01---bold-weight, bold);\n}\n\n.f-ui-02 b,\n.f-ui-02 strong {\n font-weight: var(--f-ui-02---bold-weight, bold);\n}\n\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-inverse {\n &::after {\n border-color: rgba(255, 255, 255, 0.3);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n\n &::after {\n content: '';\n }\n}\n\n.loader {\n box-sizing: border-box;\n display: inline-block;\n height: 1rem;\n width: 1rem;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.loader {\n animation: spin 1s linear infinite;\n border-radius: 9999px;\n border: 3px solid rgba(0, 0, 0, .3);\n border-bottom-color: #000;\n}\n\n/** region TRANSITIONS */\n.effect-color {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.effect-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n/** endregion */\n/* region FOCUS */\n.effect-focus {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n\n.effect-focus:focus-visible {\n outline-style: solid;\n}\n\n.effect-focus-within {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--green-500);\n}\n\n.effect-focus-within:focus-within {\n outline-style: solid;\n}\n\n.effect-bg-behind-link {\n position: relative;\n}\n\n.effect-bg-behind-link::before {\n position: absolute;\n top: 0rem;\n bottom: 0rem;\n left: -0.5rem;\n right: 0rem;\n z-index: 0;\n border-radius: 8px;\n background-color: var(--grey-400);\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.effect-bg-behind-link[aria-disabled=\"true\"]::before {\n background-color: var(--transparent);\n}\n\n/* endregion */\n/*region shadow*/\n/*endregion*/\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.pointer-events-none {\n pointer-events: none;\n}\n\n.visible {\n visibility: visible;\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.sticky {\n position: sticky;\n}\n\n.-top-1 {\n top: -0.0625rem;\n}\n\n.z-0 {\n z-index: 0;\n}\n\n.z-1 {\n z-index: 1;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.-ml-8 {\n margin-left: -0.5rem;\n}\n\n.-ml-16 {\n margin-left: -1rem;\n}\n\n.-mr-4 {\n margin-right: -0.25rem;\n}\n\n.-mr-8 {\n margin-right: -0.5rem;\n}\n\n.-mr-16 {\n margin-right: -1rem;\n}\n\n.ml-0 {\n margin-left: 0rem;\n}\n\n.ml-4 {\n margin-left: 0.25rem;\n}\n\n.ml-64 {\n margin-left: 4rem;\n}\n\n.ml-8 {\n margin-left: 0.5rem;\n}\n\n.ml-auto {\n margin-left: auto;\n}\n\n.mr-0 {\n margin-right: 0rem;\n}\n\n.mr-2 {\n margin-right: 0.125rem;\n}\n\n.mr-4 {\n margin-right: 0.25rem;\n}\n\n.mr-8 {\n margin-right: 0.5rem;\n}\n\n.mr-auto {\n margin-right: auto;\n}\n\n.block {\n display: block;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.inline {\n display: inline;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.hidden {\n display: none;\n}\n\n.h-20 {\n height: 1.25rem;\n}\n\n.h-24 {\n height: 1.5rem;\n}\n\n.h-36 {\n height: 2.25rem;\n}\n\n.h-44 {\n height: 2.75rem;\n}\n\n.\\!min-h-0 {\n min-height: 0rem !important;\n}\n\n.\\!min-h-20 {\n min-height: 1.25rem !important;\n}\n\n.min-h-36 {\n min-height: 2.25rem;\n}\n\n.min-h-44 {\n min-height: 2.75rem;\n}\n\n.min-h-full {\n min-height: 100%;\n}\n\n.min-h-screen {\n min-height: 100vh;\n}\n\n.w-1\\/2 {\n width: 50%;\n}\n\n.w-20 {\n width: 1.25rem;\n}\n\n.w-24 {\n width: 1.5rem;\n}\n\n.w-28 {\n width: 1.75rem;\n}\n\n.w-32 {\n width: 2rem;\n}\n\n.w-4 {\n width: 0.25rem;\n}\n\n.w-44 {\n width: 2.75rem;\n}\n\n.w-auto {\n width: auto;\n}\n\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.w-full {\n width: 100%;\n}\n\n.max-w-full {\n max-width: 100%;\n}\n\n.flex-none {\n flex: none;\n}\n\n.grow {\n flex-grow: 1;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.resize {\n resize: both;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-row-reverse {\n flex-direction: row-reverse;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.flex-wrap {\n flex-wrap: wrap;\n}\n\n.items-start {\n align-items: flex-start;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.whitespace-nowrap {\n white-space: nowrap;\n}\n\n.break-words {\n overflow-wrap: break-word;\n}\n\n.rounded {\n border-radius: 0.25rem;\n}\n\n.rounded-sm {\n border-radius: 8px;\n}\n\n.rounded-xs {\n border-radius: 4px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-\\[\\#0034CB\\] {\n --tw-border-opacity: 1;\n border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n\n.border-soft {\n border-color: rgba(0, 0, 0, .15);\n}\n\n.border-softer {\n border-color: rgba(0, 0, 0, .1);\n}\n\n.border-softest {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.border-transparent {\n border-color: var(--transparent);\n}\n\n.border-b-softer {\n border-bottom-color: rgba(0, 0, 0, .1);\n}\n\n.\\!bg-accent-dark {\n background-color: var(--green-600) !important;\n}\n\n.\\!bg-darker {\n background-color: var(--grey-400) !important;\n}\n\n.\\!bg-strong-dark {\n background-color: var(--grey-800) !important;\n}\n\n.bg-accent {\n background-color: var(--green-500);\n}\n\n.bg-accent-dark {\n background-color: var(--green-600);\n}\n\n.bg-accent-darker {\n background-color: var(--green-800);\n}\n\n.bg-current {\n background-color: currentColor;\n}\n\n.bg-dark {\n background-color: var(--grey-300);\n}\n\n.bg-darker {\n background-color: var(--grey-400);\n}\n\n.bg-default {\n background-color: var(--grey-200);\n}\n\n.bg-inverse {\n background-color: var(--white);\n}\n\n.bg-inverse-soft {\n background-color: rgba(255, 255, 255, .2);\n}\n\n.bg-inverse-softer {\n background-color: rgba(255, 255, 255, .15);\n}\n\n.bg-overlay {\n background-color: rgba(0, 0, 0, 0.25);\n}\n\n.bg-strong {\n background-color: var(--grey-700);\n}\n\n.bg-strong-dark {\n background-color: var(--grey-800);\n}\n\n.bg-stronger {\n background-color: var(--grey-900);\n}\n\n.bg-strongest {\n background-color: var(--black);\n}\n\n.bg-transparent {\n background-color: var(--transparent);\n}\n\n.\\!p-8 {\n padding: 0.5rem !important;\n}\n\n.\\!px-0 {\n padding-left: 0rem !important;\n padding-right: 0rem !important;\n}\n\n.\\!py-0 {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n}\n\n.\\!py-4 {\n padding-top: 0.25rem !important;\n padding-bottom: 0.25rem !important;\n}\n\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.px-16 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.px-2 {\n padding-left: 0.125rem;\n padding-right: 0.125rem;\n}\n\n.px-20 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.px-4 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-4 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.py-6 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.\\!pt-4 {\n padding-top: 0.25rem !important;\n}\n\n.pl-12 {\n padding-left: 0.75rem;\n}\n\n.pl-28 {\n padding-left: 1.75rem;\n}\n\n.pl-32 {\n padding-left: 2rem;\n}\n\n.pl-36 {\n padding-left: 2.25rem;\n}\n\n.pl-4 {\n padding-left: 0.25rem;\n}\n\n.pl-8 {\n padding-left: 0.5rem;\n}\n\n.pr-12 {\n padding-right: 0.75rem;\n}\n\n.pr-28 {\n padding-right: 1.75rem;\n}\n\n.pr-32 {\n padding-right: 2rem;\n}\n\n.pr-4 {\n padding-right: 0.25rem;\n}\n\n.pr-8 {\n padding-right: 0.5rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.\\!text-current {\n color: currentColor !important;\n}\n\n.text-\\[\\#0034CB\\] {\n --tw-text-opacity: 1;\n color: rgb(0 52 203 / var(--tw-text-opacity));\n}\n\n.text-accent {\n color: var(--green-500);\n}\n\n.text-current {\n color: currentColor;\n}\n\n.text-default {\n color: var(--black);\n}\n\n.text-error {\n color: var(--red-700);\n}\n\n.text-extra-light {\n color: var(--grey-300);\n}\n\n.text-inverse {\n color: var(--white);\n}\n\n.text-light {\n color: var(--grey-700);\n}\n\n.text-lighter {\n color: var(--grey-600);\n}\n\n.text-lightest {\n color: var(--grey-500);\n}\n\n.underline {\n text-decoration-line: underline;\n}\n\n.\\!no-underline {\n text-decoration-line: none !important;\n}\n\n.decoration-\\[\\#0034CB\\] {\n text-decoration-color: #0034CB;\n}\n\n.decoration-accent {\n text-decoration-color: var(--green-500);\n}\n\n.decoration-2 {\n text-decoration-thickness: 2px;\n}\n\n.underline-offset-4 {\n text-underline-offset: 4px;\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-100 {\n opacity: 1;\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-accent {\n --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.outline {\n outline-style: solid;\n}\n\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n[class*=underline-] {\n text-decoration-line: underline;\n}\n\n.underline-offset-4 {\n text-underline-offset: 0.2em;\n}\n\n.\\@container {\n container-type: inline-size;\n}\n\n.after\\:effect-opacity::after {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.before\\:effect-opacity::before {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.even\\:bg-inverse-softer:nth-child(even) {\n background-color: rgba(255, 255, 255, .15);\n}\n\n.invalid\\:text-lightest:invalid {\n color: var(--grey-500);\n}\n\n.focus-within\\:bg-transparent:focus-within {\n background-color: var(--transparent);\n}\n\n.hover\\:bg-accent-dark:hover {\n background-color: var(--green-600);\n}\n\n.hover\\:bg-dark:hover {\n background-color: var(--grey-300);\n}\n\n.hover\\:bg-darker:hover {\n background-color: var(--grey-400);\n}\n\n.hover\\:bg-default:hover {\n background-color: var(--grey-200);\n}\n\n.hover\\:bg-inverse:hover {\n background-color: var(--white);\n}\n\n.hover\\:bg-strong-dark:hover {\n background-color: var(--grey-800);\n}\n\n.hover\\:bg-transparent:hover {\n background-color: var(--transparent);\n}\n\n.hover\\:text-default:hover {\n color: var(--black);\n}\n\n.hover\\:text-lighter:hover {\n color: var(--grey-600);\n}\n\n.hover\\:\\!underline:hover {\n text-decoration-line: underline !important;\n}\n\n.hover\\:no-underline:hover {\n text-decoration-line: none;\n}\n\n.hover\\:shadow-hover:hover {\n --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus-visible\\:rounded-xs:focus-visible {\n border-radius: 4px;\n}\n\n.focus-visible\\:text-default:focus-visible {\n color: var(--black);\n}\n\n.focus-visible\\:outline-none:focus-visible {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus-visible\\:ring:focus-visible {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n\n.disabled\\:bg-dark:disabled {\n background-color: var(--grey-300);\n}\n\n.disabled\\:text-lightest:disabled {\n color: var(--grey-500);\n}\n\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n cursor: not-allowed;\n}\n\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n border-color: var(--transparent) !important;\n}\n\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n background-color: var(--grey-300);\n}\n\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n background-color: var(--transparent);\n}\n\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n color: var(--grey-700);\n}\n\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n color: var(--grey-500);\n}\n\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n text-decoration-line: line-through;\n}\n\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.aria-disabled\\:no-underline[aria-disabled=\"true\"] {\n text-decoration-line: none;\n}\n\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n background-color: var(--grey-400);\n}\n\n.after\\:absolute::after {\n position: absolute;\n}\n\n.after\\:inset-0::after {\n inset: 0rem;\n}\n\n.after\\:inset-x-0::after {\n left: 0rem;\n right: 0rem;\n}\n\n.after\\:bottom-0::after {\n bottom: 0rem;\n}\n\n.after\\:left-16::after {\n left: 1rem;\n}\n\n.after\\:right-16::after {\n right: 1rem;\n}\n\n.after\\:z-10::after {\n z-index: 10;\n}\n\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n\n.after\\:rounded-t-lg::after {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n\n.after\\:border-3::after {\n border-width: 3px;\n}\n\n.after\\:border-b-2::after {\n border-bottom-width: 2px;\n}\n\n.after\\:\\!border-transparent::after {\n border-color: var(--transparent) !important;\n}\n\n.after\\:border-accent::after {\n border-color: var(--green-500);\n}\n\n.after\\:border-softest::after {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.after\\:opacity-0::after {\n opacity: 0;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.hover\\:after\\:\\!border-transparent:hover::after {\n border-color: var(--transparent) !important;\n}\n\n.hover\\:after\\:opacity-100:hover::after {\n opacity: 1;\n}\n\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n opacity: 1;\n}\n\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n border-color: var(--transparent) !important;\n}\n\n.before\\:absolute::before {\n position: absolute;\n}\n\n.before\\:inset-x-0::before {\n left: 0rem;\n right: 0rem;\n}\n\n.before\\:-bottom-2::before {\n bottom: -0.125rem;\n}\n\n.before\\:bottom-0::before {\n bottom: 0rem;\n}\n\n.before\\:h-12::before {\n height: 0.75rem;\n}\n\n.before\\:h-3::before {\n height: 0.1875rem;\n}\n\n.before\\:rounded-lg::before {\n border-radius: 16px;\n}\n\n.before\\:border-2::before {\n border-width: 2px;\n}\n\n.before\\:border-softest::before {\n border-color: rgba(0, 0, 0, .05);\n}\n\n.before\\:bg-default::before {\n background-color: var(--grey-200);\n}\n\n.before\\:bg-inverse-softer::before {\n background-color: rgba(255, 255, 255, .15);\n}\n\n.before\\:\\!opacity-100::before {\n opacity: 1 !important;\n}\n\n.before\\:opacity-0::before {\n opacity: 0;\n}\n\n.before\\:opacity-5::before {\n opacity: 0.05;\n}\n\n.before\\:content-\\[\\'\\'\\]::before {\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.before\\:bg-gradient-y::before {\n background: linear-gradient(to bottom, transparent, ease-in-out, black);\n}\n\n.before\\:bg-gradient-01-top::before {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-01-bottom::before {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-02-top::before {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-02-bottom::before {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-03-top::before {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-03-bottom::before {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-04-top::before {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n}\n\n.before\\:bg-gradient-04-bottom::before {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n}\n\n.hover\\:before\\:opacity-100:hover::before {\n opacity: 1;\n}\n\n.focus-visible\\:before\\:\\!opacity-0:focus-visible::before {\n opacity: 0 !important;\n}\n\n.focus-visible\\:before\\:opacity-0:focus-visible::before {\n opacity: 0;\n}\n\n@media (min-width: 900px) {\n .lg\\:flex {\n display: flex;\n }\n}";const EdsLinkStyle0=edsLinkCss;// Define the CVA for link styles
|
|
973
|
-
const linkStyles=cva(['relative inline-flex justify-center items-center py-8 rounded-sm','effect-color effect-focus aria-disabled:text-lightest','cursor-pointer','aria-disabled:bg-dark aria-disabled:cursor-not-allowed aria-disabled:!border-transparent aria-disabled:after:!border-transparent'],{variants:{intent:{primary:['border-inside bg-accent hover:bg-accent-dark','shadow-accent focus:shadow-none aria-disabled:shadow-none'],secondary:['border-inside border-inside-inverse bg-strongest hover:bg-strong-dark text-inverse'],tertiary:'border-inside after:border-softest bg-dark hover:bg-darker',ghost:['border-inside hover:bg-darker'],strong:['!px-0 !py-4 !min-h-20','before:opacity-0 effect-opacity','hover:before:opacity-100 focus-visible:before:opacity-0','aria-disabled:bg-transparent aria-disabled:text-light'// aria-disabled:line-through
|
|
974
|
-
],weak:['!px-0 !py-4 !min-h-20','text-light hover:text-default','before:opacity-0 effect-opacity','hover:before:opacity-100 focus-visible:before:!opacity-0','aria-disabled:bg-transparent aria-disabled:text-light'// aria-disabled:line-through
|
|
975
|
-
],inverse:['!px-0 !py-4 !min-h-20','text-inverse','effect-bg-behind-link before:bg-inverse-softer before:opacity-0 effect-opacity','hover:before:opacity-100 focus-visible:before:!opacity-0','aria-disabled:bg-transparent'// aria-disabled:line-through
|
|
976
|
-
],blueish:['!px-0 !py-0 !min-h-20 text-[#0034CB] decoration-[#0034CB] underline underline-offset-4','effect-focus focus-visible:rounded-xs','hover:no-underline','aria-disabled:bg-transparent aria-disabled:no-underline'//aria-disabled:line-through
|
|
977
|
-
],underline:['decoration-accent underline underline-offset-4 !px-0 !py-0','hover:no-underline effect-focus focus-visible:rounded-xs !min-h-0']},iconSmall:{true:'',false:''},isActive:{true:'',false:''},hasIcon:{true:'',false:''},size:{small:'min-h-36 f-ui-02 px-12',large:'min-h-44 f-ui-01 px-16'}},compoundVariants:[{iconSmall:true,size:'small',class:'pr-4'},{iconSmall:true,size:'large',class:'pr-8'},{intent:'blueish',hasIcon:true,class:'-mr-4 -top-1'},{intent:'underline',hasIcon:true,class:'-mr-4 -top-1'},// Active state
|
|
978
|
-
{intent:'primary',isActive:true,class:'!bg-accent-dark'},{intent:'secondary',isActive:true,class:'!bg-strong-dark'},{intent:'tertiary',isActive:true,class:'!bg-darker'},{intent:'ghost',isActive:true,class:'!bg-darker'},{intent:'strong',isActive:true,class:'before:!opacity-100'},{intent:'weak',isActive:true,class:'before:!opacity-100'},{intent:'inverse',isActive:true,class:'before:!opacity-100'},{intent:'underline',size:'small',class:'!px-0 !py-0 !min-h-0 f-ui-02'},{intent:'underline',size:'large',class:'!px-0 !py-0 !min-h-0 f-ui-01'}],defaultVariants:{//intent: 'primary',
|
|
979
|
-
isActive:false,iconSmall:false,size:'small',hasIcon:false}});const EdsLink=class{constructor(hostRef){registerInstance(this,hostRef);this.parentContext=null;// Accepts the entire event detail or null
|
|
980
|
-
this.label=undefined;this.intent='primary';this.icon=undefined;this.iconPos='right';this.iconSmall=false;this.size='small';this.external=false;this.current=false;this.download=false;this.url=undefined;this.ariaLabel=undefined;this.disabled=false;this.hideLabelOnSmallScreen=false;}handleParentContext(event){if(event.target!==this.el){// Ignore the event if it's not targeted at this specific instance
|
|
981
|
-
return;}this.parentContext=event.detail;event.stopPropagation();}handleClick(event){var _a,_b;if(this.disabled){// Prevent navigation if the link is disabled
|
|
982
|
-
event.preventDefault();return;}sendAnalytics({category:'ui-component',parentContext:this.parentContext,tag:this.el.tagName.toLowerCase(),name:((_a=this.label)===null||_a===void 0?void 0:_a.toLowerCase())||((_b=this.ariaLabel)===null||_b===void 0?void 0:_b.toLowerCase())||'',action:'click'});}handleKeyDown(event){if(this.disabled){return;}// Handle Enter and Space keys for activation
|
|
983
|
-
if(event.key==='Enter'||event.key===' '){event.preventDefault();this.handleClick(event);// For actual navigation, trigger the native link behavior
|
|
984
|
-
if(this.url&&!this.disabled){if(this.external){window.open(this.url,'_blank','noopener,noreferrer');}else {window.location.href=this.url;}}}}getLinkSize(){return this.size;}renderLeftIcon(){if(this.icon&&this.iconPos==='left'){return h("span",{class:"flex"},h("eds-icon-wrapper",{"aria-hidden":"true",class:`
|
|
985
|
-
flex inline-flex items-center justify-center
|
|
986
|
-
${this.size==='large'?'h-24 w-24':'h-20 w-20'}
|
|
987
|
-
`,icon:this.icon}));}return null;}renderRightIcon(){if(this.icon&&this.iconPos==='right'){return h("span",{class:"flex"},h("eds-icon-wrapper",{"aria-hidden":"true",class:`
|
|
988
|
-
flex inline-flex items-center justify-center
|
|
989
|
-
${this.size==='large'?'h-24 w-24':'h-20 w-20'}
|
|
990
|
-
`,icon:this.icon}));}return null;}render(){const classes=linkStyles({intent:this.intent,size:this.getLinkSize(),iconSmall:this.iconSmall,isActive:this.current,hasIcon:!!this.icon});const safeUrl=typeof this.url==='string'&&this.url.length?this.url:undefined;const isInteractive=!this.disabled;const isIconOnly=!this.label||this.hideLabelOnSmallScreen&&this.icon;const labelClasses=this.hideLabelOnSmallScreen?'hidden lg:flex'// Tailwind example: hidden on small screens, visible on larger
|
|
991
|
-
:'';return h("a",{key:'2d72b4f56aad829c674edc920d8b8b9f83a6c9c1',class:`${classes||''}`,href:isInteractive?safeUrl:undefined,target:this.external&&isInteractive?'_blank':undefined,rel:this.external&&isInteractive?'noopener noreferrer':undefined,tabIndex:isInteractive?0:-1,"aria-label":isIconOnly?this.ariaLabel||'Link':undefined,"aria-disabled":this.disabled?'true':undefined,"aria-current":this.current?'page':undefined,role:this.disabled?'link':undefined,download:this.download?'':undefined,onClick:event=>this.handleClick(event),onKeyDown:event=>this.handleKeyDown(event)},h("span",{key:'8a8d9d31456c414d2167db7520978aefd9d955dc',class:"z-1 relative inline-flex items-center justify-center"},this.renderLeftIcon(),this.label&&h("span",{key:'b26b2f5aafa647912ced4b747c8b1e1c7a508050',class:labelClasses},this.label),this.renderRightIcon()));}get el(){return getElement(this);}};EdsLink.style=EdsLinkStyle0;const edsLogoCss=".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{color:currentColor}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.h-full{height:100%}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}@media (min-width: 900px){.lg\\:w-\\[150px\\]{width:150px}}";const EdsLogoStyle0=edsLogoCss;const EdsLogo=class{constructor(hostRef){registerInstance(this,hostRef);this.href='/';this.orientation='horizontal';this.type=undefined;this.label='Home';}/**
|
|
992
|
-
* Handles the click event on the logo link.
|
|
993
|
-
* Emits a `matomoEvent` for analytics tracking with details about the interaction.
|
|
994
|
-
* - `category`: Component type (e.g., "ui-component").
|
|
995
|
-
* - `tag`: The HTML tag name of the component.
|
|
996
|
-
* - `name`: Event name, set as "logo".
|
|
997
|
-
* - `action`: The action, set as "click".
|
|
998
|
-
*/handleClick(){sendAnalytics({category:'ui-component',tag:this.el.tagName.toLowerCase(),name:'logo',action:'click'});}/**
|
|
999
|
-
* Determines the appropriate SVG content based on the `orientation` and `type` props.
|
|
1000
|
-
*/getLogo(){const logos={horizontal:{color:hLogoColor,black:hLogoBlack,'color-white':hLogoColorWhite,white:hLogoWhite,'no-bg':hLogoWhiteNoBg},vertical:{color:vLogoColor,black:vLogoBlack,'color-white':vLogoColorWhite,white:vLogoWhite,'no-bg':vLogoWhiteNoBg}};// Validate the orientation and type
|
|
1001
|
-
const validOrientation=logos[this.orientation];if(!validOrientation){//console.error(`Invalid orientation "${this.orientation}". Falling back to "horizontal".`);
|
|
1002
|
-
return hLogoColor;// Default fallback logo
|
|
1003
|
-
}const validLogo=validOrientation[this.type];if(!validLogo){//console.error(`Invalid type "${this.type}" for orientation "${this.orientation}". Falling back to "color".`);
|
|
1004
|
-
return validOrientation['color'];// Fallback to color logo
|
|
1005
|
-
}return validLogo;}render(){const logoContent=this.getLogo();return h("a",{key:'341988e61c1b9f946bd4529f5562af8366704868',href:this.href,onClick:()=>this.handleClick(),class:"eds-logo-wrapper","aria-label":this.label},h("div",{key:'1a1e4516ba223b6132a85889626ca7856ca5a16c',innerHTML:logoContent}));}get el(){return getElement(this);}};EdsLogo.style=EdsLogoStyle0;const edsMatomoNoticeCss=".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.z-\\[999999\\]{z-index:999999}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}";const EdsMatomoNoticeStyle0=edsMatomoNoticeCss;const EdsMatomoNotice=class{constructor(hostRef){registerInstance(this,hostRef);this.consent=createEvent(this,"consent",7);this.heading='Analytics Consent';this.description="We use anonymous analytics to improve our services. No data is collected unless you give your consent. If you don't wish to send data right now, you can always re-enable analytics later by clicking the Cookies Preference button in the footer. However, by opting in today, you're joining a community that shapes our product's future—all while keeping your data completely anonymous.";this.optOutMessage="You are already part of our community, and your anonymous data helps shape our product's future! Rest assured, your privacy is fully protected.";this.forceShow=false;this.showNotice=true;}/**
|
|
1006
|
-
* Listens for global custom events to open the matomo-consent.
|
|
1007
|
-
*/toggleCookiesConsent(){this.showNotice=!this.showNotice;}/**
|
|
1008
|
-
* Checks if the consent cookie exists.
|
|
1009
|
-
*/hasCookieConsent(){return !!document.cookie.split('; ').find(row=>row.startsWith('mtm_consent='));}/**
|
|
1010
|
-
* Checks if the user has opted out after has opted in.
|
|
1011
|
-
*/optedOut(){return !!document.cookie.split('; ').find(row=>row.startsWith('mtm_consent_removed'));}/**
|
|
1012
|
-
* Generate a unique storage key based on appId or the app's domain.
|
|
1013
|
-
*/getStorageKey(){return `${window.location.host}-matomo-deferred`;}/**
|
|
1014
|
-
* Check cookies and sessionStorage (unless forceShow is true) to decide if the notice should be shown.
|
|
1015
|
-
*/componentWillLoad(){// If a decision has been made previously (opted in or out), don't show the notice.
|
|
1016
|
-
const consentGiven=localStorage.getItem(`${window.location.host}-matomo-consent-given`);if(consentGiven==='out'||this.optedOut()){this.showNotice=false;return;}if(this.forceShow){// If forceShow is true, always show the notice
|
|
1017
|
-
this.showNotice=true;}else {// If user has already consented, hide the notice
|
|
1018
|
-
// eslint-disable-next-line
|
|
1019
|
-
if(this.hasCookieConsent()){this.showNotice=false;}else {// Otherwise check if user deferred in this session
|
|
1020
|
-
const sessionDeferred=sessionStorage.getItem(this.getStorageKey());this.showNotice=!sessionDeferred;}}}componentDidLoad(){const btns=this.el.shadowRoot.querySelectorAll('eds-button');btns.forEach(b=>{this.emitContext(b);});}emitContext(linkElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:null}});linkElement.dispatchEvent(event);}optInAnalytics(){matomoOptIn();localStorage.removeItem(`${window.location.host}-matomo-consent-given`);this.hideNotice();this.consent.emit('in');}optOutAnalytics(){matomoOptOut();this.hideNotice();this.consent.emit('out');}noThanks(){matomoOptOut();localStorage.setItem(`${window.location.host}-matomo-consent-given`,'out');this.hideNotice();this.consent.emit('out');}/*private deferDecision() {
|
|
1021
|
-
sessionStorage.setItem(this.getStorageKey(), 'true');
|
|
1022
|
-
this.hideNotice();
|
|
1023
|
-
this.consent.emit('defer');
|
|
1024
|
-
}*/keepMeIn(){this.hideNotice();}hideNotice(){this.showNotice=false;}render(){if(!this.showNotice){return null;}return h("div",{class:"fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center"},h("eds-accordion",{title:this.heading,description:this.hasCookieConsent()?this.optOutMessage:this.description,switchBg:true,expanded:true},this.hasCookieConsent()?h("div",{class:"flex items-center gap-4"},this.optedOut()?h("eds-button",{intent:"primary",label:"Opt me in again","aria-label":"Opt me in again",onClick:()=>this.optInAnalytics()}):h("eds-button",{intent:"primary",label:"Keep Me In","aria-label":"Keep Me In",onClick:()=>this.keepMeIn()}),h("eds-button",{intent:"ghostInverse",label:"Opt-out","aria-label":"Opt-out from analytics",onClick:()=>this.optOutAnalytics()})):h("div",{class:"flex items-center gap-4"},h("eds-button",{intent:"primary",label:"I agree","aria-label":"Opt-in for analytics",onClick:()=>this.optInAnalytics()}),h("eds-button",{intent:"ghost",label:"No, thanks","aria-label":"Opt-out from analytics",onClick:()=>this.noThanks()}))));}get el(){return getElement(this);}};EdsMatomoNotice.style=EdsMatomoNoticeStyle0;const edsNpsCss=".flex{display:flex}.justify-between{justify-content:space-between}.mt-4{margin-top:0.25rem}.mt-8{margin-top:0.5rem}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.grid{display:grid}.grid-col-span-1{--container-grid-columns:1;grid-column:span 1 / span 1}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-11[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1)::before{inset-inline-start:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+11)::before{inset-inline-end:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)~*::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+11)::after{border-inline-end-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+11)::after{top:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)::after{bottom:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)~li::after{bottom:0}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}";const EdsNpsStyle0=edsNpsCss;const EdsNps=class{constructor(hostRef){registerInstance(this,hostRef);this.nps=createEvent(this,"nps",7);this.min=0;this.max=10;this.btnRefs=[];this.onSelect=value=>{this.selectedValue=value;this.nps.emit(value);// Move focus to the selected button (like your rating component)
|
|
1025
|
-
requestAnimationFrame(()=>{var _a,_b;const idx=value-this.min;(_b=(_a=this.btnRefs[idx])===null||_a===void 0?void 0:_a.focus)===null||_b===void 0?void 0:_b.call(_a);});};this.handleKeyNav=e=>{const{key}=e;const navigational=['ArrowRight','ArrowLeft','Home','End',' ','Enter'];if(!navigational.includes(key)){return;}e.preventDefault();const count=this.max-this.min+1;// Derive current index from selectedValue; if none, use 0 (first)
|
|
1026
|
-
let currentIdx=this.selectedValue==null?0:this.selectedValue-this.min;switch(key){case'ArrowRight':currentIdx=Math.min(count-1,currentIdx+1);this.setActiveByIndex(currentIdx,/*commit*/false);break;case'ArrowLeft':currentIdx=Math.max(0,currentIdx-1);this.setActiveByIndex(currentIdx,/*commit*/false);break;case'Home':this.setActiveByIndex(0,/*commit*/false);break;case'End':this.setActiveByIndex(count-1,/*commit*/false);break;case' ':case'Enter':// Commit current focused item
|
|
1027
|
-
this.onSelect(this.min+currentIdx);break;}};this.question=undefined;this.leftLabel=undefined;this.rightLabel=undefined;this.selectedValue=null;}/** Move visual highlight & roving tabindex; optionally commit selection */setActiveByIndex(index,commit=false){var _a;const value=this.min+index;// Update highlight so focus movement is visible (like your rating)
|
|
1028
|
-
this.selectedValue=value;// Focus the button host (ensure eds-button forwards focus to its inner <button>)
|
|
1029
|
-
const target=this.btnRefs[index];typeof(target===null||target===void 0?void 0:target.focusInner)==='function'?target.focusInner():(_a=target===null||target===void 0?void 0:target.focus)===null||_a===void 0?void 0:_a.call(target);if(commit){this.onSelect(value);}}render(){const count=this.max-this.min+1;return h("div",{key:'ca0a63dd6554e39b78fe1c607af0fede74c692c7',class:"eds-nps"},h("eds-input-label",{key:'bdf231836d8c6dbd46e852753696c4b7dad577c7',id:"nps-question",name:"nps-question",label:this.question}),h("div",{key:'004ad431ca02e57c7848a4c3fd0a4ecff40b6573',id:"nps-buttons",role:"radiogroup","aria-labelledby":"nps-question",class:"grid grid-cols-11",onKeyDown:this.handleKeyNav},Array.from({length:count},(_,i)=>{const val=this.min+i;const isSelected=val===this.selectedValue;// Roving tabindex: focusable is the selected; if none selected yet, first is focusable
|
|
1030
|
-
const tabIndex=isSelected||this.selectedValue==null&&i===0?0:-1;return h("div",{class:"grid-col-span-1",key:val},h("eds-button",{ref:el=>this.btnRefs[i]=el,role:"radio","aria-checked":isSelected?'true':'false',"aria-label":`${val}`,// Use onClick so keyboard activation on inner <button> works natively
|
|
1031
|
-
onClick:()=>this.onSelect(val),tabIndex:tabIndex,intent:isSelected?'primary':'ghost',"extra-class":"!block !px-0 w-full",label:`${val}`,// Optional: keep highlight in sync when tabbing into the group
|
|
1032
|
-
onFocus:()=>{// Only move highlight on initial focus or when roving; remove if you
|
|
1033
|
-
// want focus without highlight.
|
|
1034
|
-
this.selectedValue=val;}}));})),h("div",{key:'ffd498e00559a76b44e8d98ed060db86e60fbde7',class:"flex justify-between mt-8"},h("span",{key:'80065344c34d88ce3f01aac28d2b87ded60ec524',class:"f-ui-04 text-light ml-4"},this.leftLabel),h("span",{key:'2a67b416e4e7b0bf61aa66cb4546192860bd372f',class:"f-ui-04 text-light mr-4"},this.rightLabel)));}get el(){return getElement(this);}};EdsNps.style=EdsNpsStyle0;const edsPaginationCss="ul,menu{list-style:none;margin:0;padding:0}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.text-light{color:var(--grey-700)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";const EdsPaginationStyle0=edsPaginationCss;const EdsPagination=class{constructor(hostRef){registerInstance(this,hostRef);/**
|
|
1035
|
-
* Handles keyboard navigation within the pagination
|
|
1036
|
-
*/this.handleKeyDown=e=>{if(this.mode!=='default'||!this.useButtons){return;}const navigableItems=this.getNavigableItems();if(e.key==='ArrowRight'||e.key==='ArrowLeft'){e.preventDefault();const increment=e.key==='ArrowRight'?1:-1;let currentIndex=this.focusedIndex;// If no item is focused, start from current page or first item
|
|
1037
|
-
if(currentIndex===-1){const currentPageIndex=navigableItems.findIndex(item=>item.type==='page'&&item.page===this.currentPage);currentIndex=currentPageIndex!==-1?currentPageIndex:0;}let newIndex=currentIndex+increment;// Wrap around navigation
|
|
1038
|
-
if(newIndex>=navigableItems.length){newIndex=0;}else if(newIndex<0){newIndex=navigableItems.length-1;}this.focusedIndex=newIndex;this.focusPaginationItem(newIndex);}else if(e.key==='Home'){e.preventDefault();this.focusedIndex=0;this.focusPaginationItem(0);}else if(e.key==='End'){e.preventDefault();const lastIndex=navigableItems.length-1;this.focusedIndex=lastIndex;this.focusPaginationItem(lastIndex);}};/**
|
|
1039
|
-
* Handles focus events for pagination items
|
|
1040
|
-
*/this.handleItemFocus=index=>{this.focusedIndex=index;};this.currentPage=undefined;this.lastPage=undefined;this.perPage=10;this.total=0;this.url='';this.mode='default';this.useButtons=true;this.prevLabel='Prev';this.nextLabel='Next';this.prevUrl='';this.nextUrl='';this.links=[];this.focusedIndex=-1;}/** Lifecycle hook to generate pagination links on component load */componentWillLoad(){if(this.mode==='default'){this.generateLinks();}}componentDidLoad(){// Only emit context for links, not buttons
|
|
1041
|
-
if(!this.useButtons){const links=this.hostEl.shadowRoot.querySelectorAll('eds-link');links.forEach(lnk=>{this.emitContext(lnk);});}}/**
|
|
1042
|
-
* Emits a custom event called `parentContext` for a given link element.
|
|
1043
|
-
* This event provides context information about the pagination component.
|
|
1044
|
-
*
|
|
1045
|
-
* @param linkElement - The link element to which the event will be dispatched.
|
|
1046
|
-
*/emitContext(linkElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.hostEl.tagName.toLowerCase(),identifier:null}});linkElement.dispatchEvent(event);}onPageOrLastPageChange(){if(this.mode==='default'){this.generateLinks();}}/**
|
|
1047
|
-
* Gets all navigable pagination items for keyboard navigation
|
|
1048
|
-
*/getNavigableItems(){const items=[];// Previous button
|
|
1049
|
-
items.push({type:'prev',disabled:this.isFirstPage()});// Page numbers
|
|
1050
|
-
this.links.forEach(link=>{if(typeof link==='object'){items.push({type:'page',page:parseInt(link.label),disabled:false});}});// Next button
|
|
1051
|
-
items.push({type:'next',disabled:this.isLastPage()});return items.filter(item=>!item.disabled);}/**
|
|
1052
|
-
* Focuses a specific pagination item by index
|
|
1053
|
-
*/focusPaginationItem(index){var _a;const buttons=(_a=this.hostEl.shadowRoot)===null||_a===void 0?void 0:_a.querySelectorAll('.pagination-button');const targetButton=buttons===null||buttons===void 0?void 0:buttons[index];if(targetButton){targetButton.focus();}}/**
|
|
1054
|
-
* Checks if the current page is the first page
|
|
1055
|
-
* @returns {boolean} - true if current page is the first page
|
|
1056
|
-
*/isFirstPage(){return this.currentPage===1;}/**
|
|
1057
|
-
* Checks if the current page is the last page
|
|
1058
|
-
* @returns {boolean} - true if current page is the last page
|
|
1059
|
-
*/isLastPage(){return this.currentPage===this.lastPage;}/**
|
|
1060
|
-
* Generates a pagination link object
|
|
1061
|
-
* @param {number} page - Page number for the link
|
|
1062
|
-
* @returns {Link} - Link object with page details
|
|
1063
|
-
*/generateLink(page){const urlHasQuery=this.url.includes('?');return {ariaLabel:`Go to page ${page}`,url:`${this.url}${urlHasQuery?'&':'?'}page=${page}`,label:page.toString(),current:this.currentPage===page,disabled:false};}/** Generates pagination links based on the last page and current page */generateLinks(){if(this.lastPage&&this.lastPage>5){this.links=this.getPaginationGenerator(this.currentPage||1,this.lastPage).map(page=>typeof page==='number'?this.generateLink(page):page);}else if(this.lastPage){this.links=Array.from({length:this.lastPage}).map((_,i)=>this.generateLink(i+1));}}/**
|
|
1064
|
-
* Creates a pagination range based on delta, current, and total pages
|
|
1065
|
-
* @param {number} current - Current page number
|
|
1066
|
-
* @param {number} total - Total number of pages
|
|
1067
|
-
* @returns {(number | string)[]} - Range of page numbers or ellipses
|
|
1068
|
-
*/getPaginationGenerator(current,total){const delta=1;// Show one page before and one after the current page
|
|
1069
|
-
const range=[];if(total<=5){// If total pages are 5 or less, show all pages
|
|
1070
|
-
for(let i=1;i<=total;i++){range.push(i);}}else {// Always show the first page
|
|
1071
|
-
range.push(1);// Add ellipsis if there's a gap between the first page and the current range start
|
|
1072
|
-
if(current-delta>2){range.push('...');}// Determine range for pages around the current page
|
|
1073
|
-
for(let i=Math.max(2,current-delta);i<=Math.min(total-1,current+delta);i++){range.push(i);}// Add ellipsis if there's a gap between the current range end and the last page
|
|
1074
|
-
if(current+delta<total-1){range.push('...');}// Always show the last page
|
|
1075
|
-
range.push(total);}return range;}/**
|
|
1076
|
-
* Formats the current page results information for display
|
|
1077
|
-
* @returns {string} - Formatted page result information
|
|
1078
|
-
*/pageResults(){if(this.total>0){const start=this.perPage*((this.currentPage||1)-1)+1;const end=Math.min(this.perPage*(this.currentPage||1),this.total);return this.total>this.perPage?`Showing ${start} to ${end} of ${this.total} results`:`Showing ${this.total} result${this.total!==1?'s':''}`;}return '';}/**
|
|
1079
|
-
* Handles a page click event, updating the current page and dispatching an event
|
|
1080
|
-
* @param {MouseEvent} event - Click event
|
|
1081
|
-
* @param {number} newPage - New page number
|
|
1082
|
-
*/handlePageClick(event,newPage){if(this.mode==='navigator'){return;// No page clicking logic for navigator mode
|
|
1083
|
-
}if(this.useButtons){event.preventDefault();// Prevent default for buttons
|
|
1084
|
-
}if(newPage!==this.currentPage){this.links=this.links.map(link=>typeof link==='object'?Object.assign(Object.assign({},link),{current:parseInt(link.label)===newPage}):link);const pageChangeEvent=new CustomEvent('page',{detail:{value:newPage},bubbles:true,composed:true});this.hostEl.dispatchEvent(pageChangeEvent);this.currentPage=newPage;}}render(){const navigableIndex=-1;// Track index for keyboard navigation
|
|
1085
|
-
return h("div",{key:'3ca147814cf1e0003bac73502a0ae2bf96412ce2'},this.total>0&&this.mode==='default'&&h("p",{key:'85e3fe3224888a4fc9029e91c53c5a753506af55',class:"f-ui-03 text-light mb-28 w-full text-center","aria-live":"polite",id:"pagination-info"},h("span",{key:'9edeecb5ae0a1c74dcbf11829a4079cdbbfd46e4',class:"text-light sr-only"},"Results:"),this.pageResults()),this.mode==='navigator'||this.lastPage&&this.lastPage>1?h("nav",{"aria-label":"Pagination Navigation","aria-describedby":this.mode==='default'?'pagination-info':undefined,onKeyDown:this.handleKeyDown},h("ul",{class:"flex items-center justify-center gap-x-8",role:"list"},h("li",{class:"mr-auto"},this.useButtons?h("div",{class:"pagination-button-wrapper",onFocus:()=>this.handleItemFocus(navigableIndex)},h("eds-button",{label:this.prevLabel,disabled:this.mode==='navigator'?!this.prevUrl:this.isFirstPage(),"aria-label":"Go to previous page",icon:"chevron-left","icon-pos":"left",size:"small","icon-small":"true",intent:"ghost","extra-class":"!p-8 lg:!pr-12 pagination-button",onClick:event=>{if(this.mode==='default'&&!this.isFirstPage()){this.handlePageClick(event,(this.currentPage||1)-1);}}})):h("eds-link",{label:this.prevLabel,url:this.mode==='navigator'?this.prevUrl||'#':this.isFirstPage()?'#':this.generateLink(this.currentPage-1).url,disabled:this.mode==='navigator'?!this.prevUrl:this.isFirstPage(),"aria-label":"Go to previous page",icon:"chevron-left","icon-pos":"left",size:"small","icon-small":"true",intent:"strong","hide-label-on-small-screen":true,class:"!p-8 lg:!pr-12"})),this.mode==='default'&&this.links.map((link,index)=>h("li",{key:index,class:"f-ui-02 flex h-36 items-center justify-center"},typeof link==='string'?h("span",{class:"flex items-center justify-center","aria-hidden":"true"},link):this.useButtons?h("div",{class:"pagination-button-wrapper",onFocus:()=>this.handleItemFocus(navigableIndex)},h("eds-button",{label:link.label,"aria-label":link.current?`Current page, page ${link.label}`:`Go to page ${link.label}`,"aria-current":link.current?'page':undefined,size:"small","extra-class":"!p-8 pagination-button",intent:link.current?'secondary':'ghost',onClick:event=>this.handlePageClick(event,parseInt(link.label))})):h("eds-link",{url:link.url,"aria-label":link.ariaLabel,label:link.label,current:link.current,"aria-current":link.current?'page':undefined,size:"small",class:"!p-8",intent:link.current?'secondary':'ghost',onClick:event=>this.handlePageClick(event,parseInt(link.label))}))),h("li",{class:"ml-auto"},this.useButtons?h("div",{class:"pagination-button-wrapper",onFocus:()=>this.handleItemFocus(navigableIndex)},h("eds-button",{label:this.nextLabel,disabled:this.mode==='navigator'?!this.nextUrl:this.isLastPage(),"aria-label":"Go to next page",size:"small","icon-small":"true",icon:"chevron-right",intent:"ghost","extra-class":"!p-8 lg:!pl-12 pagination-button",onClick:event=>{if(this.mode==='default'&&!this.isLastPage()){this.handlePageClick(event,(this.currentPage||1)+1);}}})):h("eds-link",{label:this.nextLabel,url:this.mode==='navigator'?this.nextUrl||'#':this.isLastPage()?'#':this.generateLink(this.currentPage+1).url,disabled:this.mode==='navigator'?!this.nextUrl:this.isLastPage(),"aria-label":"Go to next page",size:"small","icon-small":"true",icon:"chevron-right",intent:"strong","hide-label-on-small-screen":true,class:"!p-8 lg:!pl-12 flex items-center gap-1 py-4 transition-colors"})))):null);}get hostEl(){return getElement(this);}static get watchers(){return {"currentPage":["onPageOrLastPageChange"],"lastPage":["onPageOrLastPageChange"]};}};EdsPagination.style=EdsPaginationStyle0;const edsRatingCss=":host{display:inline-block}.block{display:block}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.0625rem * var(--tw-space-x-reverse));margin-left:calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)))}";const EdsRatingStyle0=edsRatingCss;const EdsRating=class{constructor(hostRef){registerInstance(this,hostRef);this.rating=createEvent(this,"rating",7);this.buttonRefs=[];this.ratingType='star';this.ratingCount=5;this.selectedRating=0;}/**
|
|
1086
|
-
* Lifecycle method that runs when the component has fully loaded.
|
|
1087
|
-
* It emits a custom event for each `eds-button` element contained within the breadcrumb.
|
|
1088
|
-
*/componentDidLoad(){const btns=this.el.shadowRoot.querySelectorAll('eds-button');btns.forEach(btn=>{this.emitContext(btn);});}/**
|
|
1089
|
-
* Emits a custom event called `parentContext` for a given link element.
|
|
1090
|
-
* This event provides context information about the breadcrumb component.
|
|
1091
|
-
*
|
|
1092
|
-
* @param btnElement - The link element to which the event will be dispatched.
|
|
1093
|
-
*/emitContext(btnElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:this.selectedRating}});btnElement.dispatchEvent(event);}/**
|
|
1094
|
-
* Handles the click event on a star.
|
|
1095
|
-
* @param rating - The selected rating value.
|
|
1096
|
-
*/onSelect(rating){this.selectedRating=rating;this.rating.emit(rating);setTimeout(()=>{const btn=this.buttonRefs[rating-1];btn===null||btn===void 0?void 0:btn.focus();},0);}handleKeyNav(e){const{key}=e;if(!['ArrowRight','ArrowLeft','ArrowDown','ArrowUp'].includes(key)){return;}e.preventDefault();const increment=key==='ArrowRight'||key==='ArrowDown'?1:-1;let next=(this.selectedRating||1)+increment;if(next>this.ratingCount){next=1;}if(next<1){next=this.ratingCount;}this.onSelect(next);}render(){return h("div",{key:'52cc87859b174e2eb89392c083031ffde587fb7d',id:"rating-buttons",role:"group","aria-labelledby":"rating",class:"stars flex space-x-1 my-8",onKeyDown:e=>this.handleKeyNav(e)},Array.from({length:this.ratingCount},(_,index)=>{const starRating=index+1;const isSelected=starRating<=this.selectedRating;// Use the mapping text if available; otherwise, fall back to a generic label.
|
|
1097
|
-
const checked=this.selectedRating===starRating;return h("eds-button",{ref:el=>this.buttonRefs[index]=el,icon:this.ratingType,"aria-label":`${starRating} ${this.ratingType}${starRating>1?'s':''}`,onClick:()=>this.onSelect(starRating),tabIndex:checked||this.selectedRating===0&&index===0?0:-1,intent:isSelected?'primary':'ghost',size:"large","extra-class":"p-2"// Optional padding or styling for the star button
|
|
1098
|
-
});}));}get el(){return getElement(this);}};EdsRating.style=EdsRatingStyle0;const edsSidebarCss=":host{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;transition:width 0.3s ease}:host(.collapsed){width:4rem}:host::-webkit-scrollbar{width:8px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2);border-radius:4px}:host::-webkit-scrollbar-thumb:hover{background:rgba(0, 0, 0, 0.3)}.sidebar-nav{padding:0.5rem 0}.sidebar-header{display:flex;justify-content:flex-end;padding:0.5rem 0.75rem;margin-bottom:0.5rem}:host(.collapsed) .sidebar-header{justify-content:center;padding:0.5rem}.collapse-toggle{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:none;border:none;cursor:pointer;padding:0;border-radius:0.375rem;transition:background-color 0.15s ease;color:inherit}.collapse-toggle:hover{background-color:rgba(0, 0, 0, 0.08)}.collapse-toggle:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:2px}.sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.125rem}.sidebar-item{display:flex;flex-direction:column}.sidebar-item-content{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;cursor:pointer;user-select:none;word-break:break-word;transition:background-color 0.15s ease;border-radius:0.375rem;margin:0 0.5rem;position:relative}:host(.collapsed) .sidebar-item-content{justify-content:center;padding:0.75rem;margin:0 0.5rem}.sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}.sidebar-item-content:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:-2px;z-index:1}.sidebar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.sidebar-content-wrapper{display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0}.sidebar-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;margin:-0.125rem 0;pointer-events:none}.sidebar-link-wrapper{flex:1;min-width:0;pointer-events:none}.sidebar-link{font-weight:400;pointer-events:none}.sidebar-children{list-style:none;margin:0.25rem 0 0 0;padding:0;display:flex;flex-direction:column;gap:0.125rem;overflow:hidden;animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-0.25rem)}to{opacity:1;transform:translateY(0)}}.sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.collapsed) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}.sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}.sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}.sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}.sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}.sidebar-item.level-5 .sidebar-item-content{padding-left:7rem}:host(.theme-default) .sidebar-item-content{border-radius:0.375rem;margin:0 0.5rem;padding:0.5rem 0.75rem}:host(.theme-default.collapsed) .sidebar-item-content{margin:0 0.5rem;border-radius:0.375rem}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:transparent}:host(.theme-default) .sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:600}:host(.theme-default) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.theme-default) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-default) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-default) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-default) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-item-content{border-radius:0;margin:0;padding-left:1rem;padding-right:1rem}:host(.theme-minimal.collapsed) .sidebar-item-content{margin:0 0.25rem;border-radius:0.375rem}:host(.theme-minimal) .sidebar-item-content:hover{background-color:var(--grey-300)}:host(.theme-minimal) .sidebar-item.active>.sidebar-item-content{background-color:var(--grey-400);border-left:3px solid var(--grey-900);padding-left:calc(1rem - 3px)}:host(.theme-minimal.collapsed) .sidebar-item.active>.sidebar-item-content{border-left:none;border-radius:0.375rem;padding-left:0.75rem}:host(.theme-minimal) .sidebar-item.level-1.active>.sidebar-item-content{padding-left:calc(2rem - 3px)}:host(.theme-minimal) .sidebar-item.level-2.active>.sidebar-item-content{padding-left:calc(3.25rem - 3px)}:host(.theme-minimal) .sidebar-item.level-3.active>.sidebar-item-content{padding-left:calc(4.5rem - 3px)}:host(.theme-minimal) .sidebar-item.level-4.active>.sidebar-item-content{padding-left:calc(5.75rem - 3px)}:host(.theme-minimal) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-minimal) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-minimal) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-minimal) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-minimal) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-children{position:relative}:host(.theme-ebrains) .sidebar-item-content{padding:0.5rem 1rem;border-radius:0.5rem;margin:0 0.5rem}:host(.theme-ebrains.collapsed) .sidebar-item-content{padding:0.75rem}:host(.theme-ebrains) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.05)}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content{background-color:var(--green-600, #22c55e);color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-link{--eds-link-color:white;--eds-link-hover-color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-toggle{color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-icon{color:white}:host(.theme-ebrains) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-ebrains) .sidebar-item.level-1 .sidebar-item-content{padding-left:2.25rem}:host(.theme-ebrains) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.5rem}:host(.theme-ebrains) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.75rem}:host(.theme-ebrains) .sidebar-item.level-4 .sidebar-item-content{padding-left:6rem}@media (prefers-color-scheme: dark){.collapse-toggle:hover{background-color:rgba(255, 255, 255, 0.08)}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.05)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:rgba(0, 102, 204, 0.15)}:host(.theme-minimal) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.06)}:host::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.2)}:host::-webkit-scrollbar-thumb:hover{background:rgba(255, 255, 255, 0.3)}}.sidebar-toggle eds-icon-wrapper,.sidebar-icon eds-icon-wrapper,.collapse-toggle eds-icon-wrapper{transition:transform 0.15s ease;display:flex;align-items:center;justify-content:center}.sidebar-item-content:focus-visible .sidebar-link{text-decoration:underline}.sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:500}:host(.collapsed) .sidebar-item-content::after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:0.5rem;padding:0.5rem 0.75rem;background:rgba(0, 0, 0, 0.9);color:white;border-radius:0.375rem;white-space:nowrap;font-size:0.875rem;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:1000}:host(.collapsed) .sidebar-item-content:hover::after{opacity:1;transition-delay:0.3s}.-ml-4{margin-left:-0.25rem}.mt-2{margin-top:0.125rem}";const EdsSidebarStyle0=edsSidebarCss;const EdsSidebar=class{constructor(hostRef){registerInstance(this,hostRef);this.sidebar=createEvent(this,"sidebar",7);this.toggleItem=(itemId,ev)=>{if(ev){ev.stopPropagation();}const newOpen=new Set(this.openItems);if(newOpen.has(itemId)){newOpen.delete(itemId);}else {newOpen.add(itemId);}this.openItems=newOpen;};this.navigate=(url,ev)=>{if(!this.enableRouting||!url){return;}if(ev){ev.preventDefault();ev.stopPropagation();}// Emit custom event for routing
|
|
1099
|
-
this.sidebar.emit(url);// Update browser history if available
|
|
1100
|
-
if(typeof window!=='undefined'&&window.history){window.history.pushState({},'',url);}};this.handleItemClick=(item,ev)=>{var _a;// If item has children, ONLY toggle (don't navigate)
|
|
1101
|
-
if((_a=item.children)===null||_a===void 0?void 0:_a.length){this.toggleItem(item.id,ev);return;}// Only navigate if no children and has URL
|
|
1102
|
-
if(item.url){this.navigate(item.url,ev);}};this.items='[]';this.theme='default';this.activeUrl='';this.enableRouting=true;this.maxLevel=4;this.openItems=new Set();this.parsedItems=[];}// ---------------------------------------------------------------------------
|
|
1103
|
-
// Lifecycle
|
|
1104
|
-
// ---------------------------------------------------------------------------
|
|
1105
|
-
componentWillLoad(){this.parsedItems=this.parseItems(this.items);this.initializeOpenItems(this.parsedItems);}// ---------------------------------------------------------------------------
|
|
1106
|
-
// Watchers
|
|
1107
|
-
// ---------------------------------------------------------------------------
|
|
1108
|
-
handleItemsChange(newItems){this.parsedItems=this.parseItems(newItems);this.initializeOpenItems(this.parsedItems);}handleActiveUrlChange(){this.initializeOpenItems(this.parsedItems);}// ---------------------------------------------------------------------------
|
|
1109
|
-
// Utils
|
|
1110
|
-
// ---------------------------------------------------------------------------
|
|
1111
|
-
parseItems(items){if(Array.isArray(items)){return items;}if(typeof items==='string'){if(!items||items.trim()===''){return [];}try{const parsed=JSON.parse(items);return Array.isArray(parsed)?parsed:[];}catch(e){console.error('eds-sidebar: Failed to parse items JSON:',e);console.error('Received string:',items);return [];}}return [];}initializeOpenItems(items,level=0){if(level===0){// reset before recomputing
|
|
1112
|
-
this.openItems=new Set();}if(level>=this.maxLevel){return;}items.forEach(item=>{var _a;const isActive=this.activeUrl&&item.url===this.activeUrl;const hasActiveChild=this.hasActiveDescendant(item);if(item.open||isActive||hasActiveChild){this.openItems.add(item.id);}if((_a=item.children)===null||_a===void 0?void 0:_a.length){this.initializeOpenItems(item.children,level+1);}});}hasActiveDescendant(item){var _a;if(item.url===this.activeUrl){return true;}if(!((_a=item.children)===null||_a===void 0?void 0:_a.length)){return false;}return item.children.some(child=>this.hasActiveDescendant(child));}// ---------------------------------------------------------------------------
|
|
1113
|
-
// Render
|
|
1114
|
-
// ---------------------------------------------------------------------------
|
|
1115
|
-
renderItem(item,level=0){if(level>=this.maxLevel){return null;}const isOpen=this.openItems.has(item.id);const isActive=!!item.url&&this.activeUrl===item.url;const hasChildren=!!(item.children&&item.children.length);const itemId=`eds-sidebar-${item.id}`;const childrenId=`${itemId}-children`;return h("li",{class:{'sidebar-item':true,open:isOpen,active:isActive,'has-children':hasChildren,[`level-${level}`]:true}},h("div",{class:"sidebar-item-content",onClick:e=>this.handleItemClick(item,e),role:hasChildren?'button':item.url?'link':'button',tabindex:"0","aria-current":isActive?'page':undefined,"aria-expanded":hasChildren?isOpen?'true':'false':undefined,"aria-controls":hasChildren?childrenId:undefined,onKeyDown:e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();this.handleItemClick(item,e);}}},hasChildren&&h("span",{class:"sidebar-toggle mt-2 -ml-4","aria-hidden":"true"},h("eds-icon-wrapper",{icon:isOpen?'chevron-down':'chevron-right'})),h("span",{class:"sidebar-link-wrapper"},h("eds-link",{label:item.title,url:item.url||'#',intent:isActive?'strong':'weak',size:"small","aria-label":item.title,"extra-class":"sidebar-link",tabindex:"-1"}))),hasChildren&&isOpen&&h("ul",{id:childrenId,class:"sidebar-children"},item.children.map(child=>this.renderItem(child,level+1))));}render(){return h(Host,{key:'4334d20e5d72671243633253910ab05b4da013da',class:{'eds-sidebar':true,[`theme-${this.theme}`]:true}},h("nav",{key:'319f6f42416d4229f1b011bf1216b39c8627302d',class:"sidebar-nav","aria-label":"Sidebar"},h("ul",{key:'687ceae3eca3e844e8f6a361db4a76d127d27813',class:"sidebar-list"},this.parsedItems.map(item=>this.renderItem(item,0)))));}get el(){return getElement(this);}static get watchers(){return {"items":["handleItemsChange"],"activeUrl":["handleActiveUrlChange"]};}};EdsSidebar.style=EdsSidebarStyle0;const edsSpinnerCss=":host{display:block}.spinner{box-sizing:border-box;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}";const EdsSpinnerStyle0=edsSpinnerCss;const EdsSpinner=class{constructor(hostRef){registerInstance(this,hostRef);this.size='md';this.variant='secondary';this.message=undefined;this.background='var(--grey-200)';this.fullscreen=false;}get spinnerSize(){switch(this.size){case'xs':return '1rem';case'sm':return '4rem';case'lg':return '8rem';case'xl':return '10rem';case'md':default:return '6rem';}}get spinnerThickness(){switch(this.size){case'xs':return '4px';case'sm':return '8px';case'lg':return '16px';case'xl':return '20px';case'md':default:return '12px';}}render(){// derive colors from variant
|
|
1116
|
-
const borderColor=this.variant==='primary'?'var(--grey-900)':'var(--grey-400)';const bottomColor=this.variant==='primary'?'var(--green-400)':'var(--grey-900)';const spinnerStyle=Object.assign({width:this.spinnerSize,height:this.spinnerSize,border:`${this.spinnerThickness} solid ${borderColor}`,borderBottomColor:bottomColor},!this.fullscreen&&{display:'inline-block'});// Overlay style: use fixed positioning for fullscreen,
|
|
1117
|
-
// and absolute positioning for inline mode.
|
|
1118
|
-
const overlayStyle=this.fullscreen?{position:'fixed',top:'0',left:'0',width:'100vw',height:'100vh',zIndex:'9999999',backgroundColor:this.background,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'}:{position:'absolute',top:'0',left:'0',width:'100%',height:'100%',//zIndex: '1000',
|
|
1119
|
-
backgroundColor:this.background,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'};return h(Host,{key:'c50ca410eb23855b3076babb78b4849246722cf7'},h("div",{key:'9b3722b00777a0dd77288c4c3b29419a9b87640b',class:"spinner-overlay",style:overlayStyle},h("span",{key:'5479d0195b6d8991613df8ae03eee34b2a095b6b',class:"spinner",style:spinnerStyle}),this.message&&h("p",{key:'448c3b0e6ce0aac6c21b53c58b97e423a1739864',class:"f-body-01"},this.message)));}};EdsSpinner.style=EdsSpinnerStyle0;const edsStepsCss="blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-39px;top:-2px;display:flex;align-items:center;justify-content:center;width:31px;height:31px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.text-center{text-align:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.mb-16{margin-bottom:1rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0}.horizontal-step{display:flex;flex-direction:column;align-items:center;gap:0.5rem;cursor:pointer;flex:1;position:relative}.horizontal-step:not(:last-child)::after{content:'';position:absolute;top:1.25rem;left:50%;width:100%;height:2px;background-color:#e0e0e0;z-index:-1}.horizontal-step.is-completed:not(:last-child)::after{background-color:var(--green-500);}.step-indicator{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;background-color:white;transition:all 0.3s ease}.horizontal-step.is-active .step-indicator{border-color:var(--green-500);background-color:var(--green-500);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--green-500);background-color:var(--white)}.horizontal-step.is-disabled{opacity:0.5;cursor:not-allowed}.step-number{font-weight:600;font-size:0.875rem}.step-label{font-size:0.875rem;text-align:center;font-weight:500}.horizontal-step.is-active .step-label{color:var(--green-500)}.step-content{padding:2rem 0;margin-left:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);margin-right:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem)}.opacity-50{opacity:0.5}.eds-steps__title[role=\"button\"]{cursor:pointer}";const EdsStepsStyle0=edsStepsCss;const EdsSteps=class{constructor(hostRef){registerInstance(this,hostRef);this.step=createEvent(this,"step",7);this.finished=createEvent(this,"finished",7);this.next=createEvent(this,"next",7);this.back=createEvent(this,"back",7);this.handleTitleClick=index=>{// In linear mode, do NOT collapse; only navigate if allowed.
|
|
1120
|
-
if(this.type==='linear'){// prevent jumping forward over disabled steps
|
|
1121
|
-
if(index>this.activeStep){for(let i=this.activeStep;i<index;i++){if(this.isStepDisabled(i)){return;}}}this.activeStep=index;this.step.emit(this.activeStep);return;}// Non-linear vertical mode: support optional collapse/expand on current title
|
|
1122
|
-
if(this.orientation==='vertical'&&index===this.activeStep&&this.collapsibleTitles){this.activeStep=this.activeStep===index?-1:index;this.step.emit(this.activeStep);return;}// Otherwise, just set
|
|
1123
|
-
this.activeStep=index;this.step.emit(this.activeStep);};this.handleNext=()=>{const lastIndex=this.parsedSteps.length-1;// On last step
|
|
1124
|
-
if(this.activeStep>=lastIndex){this.finished.emit();this.activeStep=-1;// collapse the content
|
|
1125
|
-
this.step.emit(this.activeStep);// notify change (-1 sentinel)
|
|
1126
|
-
return;}const target=this.activeStep+1;this.next.emit(target);if(this.isStepDisabled(this.activeStep)){return;}this.activeStep=target;this.step.emit(this.activeStep);if(!Array.isArray(this.disableNext)){this.disableNext=false;}};this.handleBack=()=>{const lastIndex=this.parsedSteps.length-1;// If somehow collapsed, recover to last visible step first
|
|
1127
|
-
if(this.activeStep<0){this.activeStep=lastIndex;this.step.emit(this.activeStep);return;}if(this.activeStep>0){const target=this.activeStep-1;this.back.emit(target);this.activeStep=target;this.step.emit(this.activeStep);if(!Array.isArray(this.disableNext)){this.disableNext=false;}}};this.steps=[];this.type='static';this.orientation='vertical';this.nextLabel='Next';this.backLabel='Back';this.finishLabel='Finish';this.disableNext=false;this.headingLevel='h4';this.collapsibleTitles=false;this.activeStep=0;}handleDisableNextChange(newValue){if(typeof newValue==='string'&&newValue.trim().startsWith('[')){try{this.disableNext=JSON.parse(newValue);}catch(e){console.error('Failed to parse disable-next array:',e);}}}componentWillLoad(){this.handleDisableNextChange(this.disableNext);}componentDidLoad(){if(this.type==='linear'){const root=this.el.shadowRoot||this.el;const btns=root.querySelectorAll('eds-button');btns===null||btns===void 0?void 0:btns.forEach(btn=>this.emitContext(btn));}}activeStepChanged(newValue){// Clamp to valid range or collapsed sentinel
|
|
1128
|
-
const max=Math.max(0,this.parsedSteps.length-1);if(newValue>max){this.activeStep=max;return;}if(newValue<-1){this.activeStep=-1;return;}// If collapsed (only possible in non-linear mode), do not emit context
|
|
1129
|
-
if(newValue<0){return;}setTimeout(()=>{const root=this.el.shadowRoot||this.el;const all=root.querySelectorAll('.step');const active=all&&newValue<all.length?all[newValue]:undefined;active===null||active===void 0?void 0:active.querySelectorAll('eds-button').forEach(btn=>this.emitContext(btn));},50);}emitContext(linkElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:this.activeStep},bubbles:true,composed:true});linkElement.dispatchEvent(event);}get parsedSteps(){return parseData(this.steps);}isStepDisabled(index){if(Array.isArray(this.disableNext)){return index<this.disableNext.length?!!this.disableNext[index]:false;}return index===this.activeStep&&!!this.disableNext;}isNextDisabledFor(index){return this.isStepDisabled(index);}/** Render the semantic heading element as a clickable control only in linear mode */renderHeading(title,index){const Tag=this.headingLevel;const isOpen=this.activeStep===index;if(this.type==='linear'){let forwardBlocked=false;if(index>this.activeStep){for(let i=this.activeStep;i<index;i++){if(this.isStepDisabled(i)){forwardBlocked=true;break;}}}const onKey=e=>{if(forwardBlocked){return;}if(e.key==='Enter'||e.key===' '){e.preventDefault();this.handleTitleClick(index);}};return h(Tag,{class:`eds-steps__title ${forwardBlocked?'is-disabled':''}`,role:"button",tabindex:forwardBlocked?-1:0,"aria-disabled":forwardBlocked?'true':'false',"aria-expanded":isOpen,"aria-controls":`eds-step-panel-${index}`,onClick:()=>!forwardBlocked&&this.handleTitleClick(index),onKeyDown:onKey},title);}return h(Tag,{class:`eds-steps__title ${this.collapsibleTitles&&index!==this.activeStep?'':''}`,onClick:()=>this.handleTitleClick(index)},title);}/** Render horizontal step indicator */renderHorizontalIndicator(step,index){const isActive=this.activeStep===index;const isCompleted=this.activeStep>index;let forwardBlocked=false;if(index>this.activeStep){for(let i=this.activeStep;i<index;i++){if(this.isStepDisabled(i)){forwardBlocked=true;break;}}}const onKey=e=>{if(forwardBlocked){return;}if(e.key==='Enter'||e.key===' '){e.preventDefault();this.handleTitleClick(index);}};return h("div",{class:`horizontal-step ${isActive?'is-active':''} ${isCompleted?'is-completed':''}`,onClick:()=>!forwardBlocked&&this.handleTitleClick(index),onKeyDown:onKey,role:"button",tabindex:forwardBlocked?-1:0,"aria-label":`Step ${index+1}: ${step.title}`,"aria-current":isActive?'step':undefined,"aria-disabled":forwardBlocked?'true':'false'},h("div",{class:"step-indicator"},h("span",{class:"step-number"},index+1)),h("span",{class:`text-center text-default f-ui-03 ${forwardBlocked?'opacity-50':''}`},step.title));}render(){const steps=this.parsedSteps;// Horizontal Linear
|
|
1130
|
-
if(this.type==='linear'&&this.orientation==='horizontal'){return h("div",{class:"steps--horizontal",style:{'--step-count':steps.length.toString()}},h("div",{class:"horizontal-indicators"},steps.map((step,index)=>this.renderHorizontalIndicator(step,index))),steps.map((step,index)=>{const isLast=index===steps.length-1;if(this.activeStep!==index){return null;}const marginClass=this.orientation==='horizontal'?'mt-64':'mt-32';return h("div",{class:"step-content",key:index,id:`eds-step-panel-${index}`},h("slot",{name:`step-${index}`},h("div",{class:"f-body-02 text-lighter",innerHTML:step.content})),h("div",{class:`flex items-center justify-between ${marginClass}`},h("eds-button",{label:this.backLabel,intent:"ghost",icon:"chevron-left",iconPos:"left",iconSmall:true,onClick:this.handleBack,disabled:index===0,class:index===0?'hidden':'block',size:"small"}),h("eds-button",{label:isLast?this.finishLabel:this.nextLabel,intent:"primary",icon:"chevron-right",iconSmall:true,onClick:this.handleNext,disabled:this.isNextDisabledFor(index),size:"small",class:index>0?'ml-8':null})),h("slot",{name:`actions-${index}`}));}));}// Vertical Linear
|
|
1131
|
-
if(this.type==='linear'){return h("div",{class:"steps"},steps.map((step,index)=>{const isLast=index===steps.length-1;const marginClass=this.orientation==='horizontal'?'mt-64':'mt-32';return h("div",{class:"step mb-16",key:index},this.renderHeading(step.title,index),this.activeStep===index&&h("div",{class:"content grid gap-y-16",id:`eds-step-panel-${index}`},h("slot",{name:`step-${index}`},h("div",{class:"my-16 f-body-02 text-lighter",innerHTML:step.content})),h("div",{class:`flex items-center justify-between ${marginClass}`},h("eds-button",{label:this.backLabel,intent:"ghost",icon:"chevron-left",iconPos:"left",iconSmall:true,onClick:this.handleBack,disabled:index===0,class:index===0?'hidden':'block',size:"small"}),h("eds-button",{label:isLast?this.finishLabel:this.nextLabel,intent:"primary",icon:"chevron-right",iconSmall:true,onClick:this.handleNext,disabled:this.isNextDisabledFor(index),size:"small",class:index>0?'ml-8':null})),h("slot",{name:`actions-${index}`})));}));}// Static
|
|
1132
|
-
return h("div",{class:"steps"},steps.map((step,index)=>h("div",{class:"step mb-16",key:index},this.renderHeading(step.title,index),h("div",{class:"content",id:`eds-step-panel-${index}`},h("slot",{name:`step-${index}`},h("div",{class:"f-body-02 text-lighter my-16",innerHTML:step.content}))))));}get el(){return getElement(this);}static get watchers(){return {"disableNext":["handleDisableNextChange"],"activeStep":["activeStepChanged"]};}};EdsSteps.style=EdsStepsStyle0;const edsStepsV2Css="blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-41px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.text-center{text-align:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0}.horizontal-step{display:flex;flex-direction:column;align-items:center;gap:0.5rem;cursor:pointer;flex:1;position:relative}.horizontal-step:not(:last-child)::after{content:'';position:absolute;top:1.25rem;left:50%;width:100%;height:2px;background-color:#e0e0e0;z-index:-1}.horizontal-step.is-completed:not(:last-child)::after{background-color:var(--green-500);}.step-indicator{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;background-color:white;transition:all 0.3s ease;z-index:2}.horizontal-step.is-active .step-indicator{border-color:var(--green-500);background-color:var(--green-500);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--green-500);background-color:var(--white)}.horizontal-step.is-disabled{opacity:0.5;cursor:not-allowed}.step-number{font-weight:600;font-size:0.875rem}.step-label{font-size:0.875rem;text-align:center;font-weight:500}.horizontal-step.is-active .step-label{color:var(--green-500)}.step-content{padding:2rem 0;margin-left:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);margin-right:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem)}.opacity-50{opacity:0.5}";const EdsStepsV2Style0=edsStepsV2Css;const EdsStepsV2=class{constructor(hostRef){registerInstance(this,hostRef);this.step=createEvent(this,"step",7);this.finished=createEvent(this,"finished",7);this.next=createEvent(this,"next",7);this.back=createEvent(this,"back",7);this.handleTitleClick=index=>{// In linear mode, do NOT collapse; only navigate if allowed.
|
|
1133
|
-
if(this.type==='linear'){if(index>this.activeStep){// Prevent jumping forward over disabled steps
|
|
1134
|
-
for(let i=this.activeStep;i<index;i++){if(this.isStepDisabled(i)){return;}}}this.activeStep=index;this.step.emit(this.activeStep);return;}// Non-linear vertical mode can toggle collapse of the current title
|
|
1135
|
-
if(this.orientation==='vertical'&&index===this.activeStep){this.activeStep=this.activeStep===index?-1:index;this.step.emit(this.activeStep);return;}// Otherwise just set
|
|
1136
|
-
this.activeStep=index;this.step.emit(this.activeStep);};this.handleNext=()=>{const lastIndex=this.parsedSteps.length-1;// On last step: do NOT collapse; keep content visible, just emit finished
|
|
1137
|
-
if(this.activeStep>=lastIndex){this.finished.emit();this.activeStep=-1;// collapse the content
|
|
1138
|
-
this.step.emit(this.activeStep);// notify change (-1 sentinel)
|
|
1139
|
-
return;}const target=this.activeStep+1;this.next.emit(target);if(this.isStepDisabled(this.activeStep)){return;}this.activeStep=target;this.step.emit(this.activeStep);// clear boolean form when moving away from a step
|
|
1140
|
-
if(!Array.isArray(this.disableNext)){this.disableNext=false;}};this.handleBack=()=>{const lastIndex=this.parsedSteps.length-1;// Recover from collapsed sentinel if it ever occurs
|
|
1141
|
-
if(this.activeStep<0){this.activeStep=lastIndex;this.step.emit(this.activeStep);return;}if(this.activeStep>0){const target=this.activeStep-1;this.back.emit(target);this.activeStep=target;this.step.emit(this.activeStep);if(!Array.isArray(this.disableNext)){this.disableNext=false;}}};this.steps=[];this.type='static';this.orientation='vertical';this.imageSrc=undefined;this.imageWidth=undefined;this.message=undefined;this.nextLabel='Next';this.backLabel='Back';this.finishLabel='Finish';this.disableNext=false;this.headingLevel='h4';this.activeStep=0;}handleDisableNextChange(newValue){if(typeof newValue==='string'&&newValue.trim().startsWith('[')){try{this.disableNext=JSON.parse(newValue);}catch(e){console.error('Failed to parse disable-next array:',e);}}}activeStepChanged(newValue){// Clamp and ignore collapsed sentinel
|
|
1142
|
-
const max=Math.max(0,this.parsedSteps.length-1);if(newValue>max){this.activeStep=max;return;}if(newValue<-1){this.activeStep=-1;return;}if(newValue<0){return;}// ignore collapsed state if ever set elsewhere
|
|
1143
|
-
// Emit parentContext to buttons inside the newly active step
|
|
1144
|
-
setTimeout(()=>{const host=this.el.shadowRoot||this.el;const activeStepContainer=host.querySelectorAll('.step')[newValue];activeStepContainer===null||activeStepContainer===void 0?void 0:activeStepContainer.querySelectorAll('eds-button').forEach(btn=>this.emitContext(btn));},50);}componentWillLoad(){this.handleDisableNextChange(this.disableNext);}componentDidLoad(){if(this.type==='linear'){const host=this.el.shadowRoot||this.el;const btns=host.querySelectorAll('eds-button');btns===null||btns===void 0?void 0:btns.forEach(btn=>this.emitContext(btn));}}emitContext(linkElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:this.activeStep},bubbles:true,composed:true});linkElement.dispatchEvent(event);}articleClasses(){return ['border-softer effect-focus-within relative rounded-lg border-2'].join(' ');}get parsedSteps(){return parseData(this.steps);}isStepDisabled(index){if(Array.isArray(this.disableNext)){return index<this.disableNext.length?!!this.disableNext[index]:false;}return index===this.activeStep&&!!this.disableNext;}isNextDisabledFor(index){return this.isStepDisabled(index);}renderHeading(title,index){const Tag=this.headingLevel;if(this.type==='linear'){const isOpen=this.activeStep===index;// Check if jumping to this step crosses a disabled step
|
|
1145
|
-
let forwardBlocked=false;if(index>this.activeStep){for(let i=this.activeStep;i<index;i++){if(this.isStepDisabled(i)){forwardBlocked=true;break;}}}const onKey=e=>{if(forwardBlocked){return;}if(e.key==='Enter'||e.key===' '){e.preventDefault();this.handleTitleClick(index);}};return h(Tag,{class:`eds-steps__title ${forwardBlocked?'is-disabled':''}`,role:"button",tabindex:forwardBlocked?-1:0,"aria-disabled":forwardBlocked?'true':'false',"aria-expanded":isOpen,"aria-controls":`eds-step-panel-${index}`,onClick:()=>!forwardBlocked&&this.handleTitleClick(index),onKeyDown:onKey},title);}return h(Tag,{class:"eds-steps__title",onClick:()=>this.handleTitleClick(index)},title);}/** Render horizontal indicator item */renderHorizontalIndicator(step,index){const isActive=this.activeStep===index;const isCompleted=this.activeStep>index;let forwardBlocked=false;if(index>this.activeStep){for(let i=this.activeStep;i<index;i++){if(this.isStepDisabled(i)){forwardBlocked=true;break;}}}const onKey=e=>{if(forwardBlocked){return;}if(e.key==='Enter'||e.key===' '){e.preventDefault();this.handleTitleClick(index);}};return h("div",{class:`horizontal-step ${isActive?'is-active':''} ${isCompleted?'is-completed':''}`,onClick:()=>!forwardBlocked&&this.handleTitleClick(index),onKeyDown:onKey,role:"button",tabindex:forwardBlocked?-1:0,"aria-label":`Step ${index+1}: ${step.title}`,"aria-current":isActive?'step':undefined,"aria-disabled":forwardBlocked?'true':'false'},h("div",{class:"step-indicator"},h("span",{class:"step-number"},index+1)),h("span",{class:`text-center text-default f-ui-03 ${forwardBlocked?'opacity-50':''}`},step.title));}render(){const steps=this.parsedSteps;const marginClass=this.orientation==='horizontal'?'mt-64':'mt-32';return h("div",{key:'0f9dbb87f9cd269057183ee969addd55e85b2149',class:this.articleClasses()},this.imageSrc?h("div",{class:"w-full mb-12 rounded-t-lg overflow-hidden border-2"},h("eds-img",{src:this.imageSrc,width:this.imageWidth,"with-bg":"true","lazy-load":"true",alt:"Step illustration"})):this.message&&h("div",{class:"w-full bg-[#00A595] rounded-t-lg border-2"},h("div",{class:"p-24"},h("span",{class:"text-inverse f-heading-04"},this.message))),h("div",{key:'d636d36c2e95d73c23c269b1faf67870eca97c16',class:"mt-16 pb-20 px-8"},this.type==='linear'&&this.orientation==='horizontal'?h("div",{class:"steps--horizontal",style:{'--step-count':steps.length.toString()}},h("div",{class:"horizontal-indicators"},steps.map((step,index)=>this.renderHorizontalIndicator(step,index))),steps.map((step,index)=>{const isLast=index===steps.length-1;if(this.activeStep!==index){return null;}return h("div",{class:"step-content",key:index,id:`eds-step-panel-${index}`},h("slot",{name:`step-${index}`},h("div",{class:"f-body-02 text-lighter",innerHTML:step.content})),h("div",{class:`flex items-center justify-between ${marginClass}`},h("eds-button",{label:this.backLabel,intent:"ghost",icon:"chevron-left",iconPos:"left",iconSmall:true,onClick:this.handleBack,disabled:index===0,class:index===0?'hidden':'block',size:"small"}),h("eds-button",{label:isLast?this.finishLabel:this.nextLabel,intent:"primary",icon:"chevron-right",iconSmall:true,onClick:this.handleNext,disabled:this.isNextDisabledFor(index),size:"small",class:index>0?'ml-8':null})),h("slot",{name:`actions-${index}`}));})):this.type==='linear'?h("div",{class:"steps"},steps.map((step,index)=>h("div",{class:index===0?'step':'step mt-16',key:index},this.renderHeading(step.title,index),this.activeStep===index&&h("div",{class:"content grid gap-y-16",id:`eds-step-panel-${index}`},h("slot",{name:`step-${index}`},h("div",{class:"my-16 f-body-02 text-lighter",innerHTML:step.content})),h("div",{class:`flex items-center justify-between ${marginClass}`},h("eds-button",{label:this.backLabel,intent:"ghost",icon:"chevron-left",iconPos:"left",iconSmall:true,onClick:this.handleBack,disabled:index===0,class:index===0?'hidden':'block',size:"small"}),h("eds-button",{label:index===steps.length-1?this.finishLabel:this.nextLabel,intent:"primary",icon:"chevron-right",iconSmall:true,onClick:this.handleNext,disabled:this.isNextDisabledFor(index),size:"small",class:index>0?'ml-8':null})))))):h("div",{class:"steps space-y-8"},steps.map((step,index)=>h("div",{class:"step",key:index},this.renderHeading(step.title,index),h("div",{class:"content",id:`eds-step-panel-${index}`},h("div",{class:"content-body"},h("slot",{name:`step-${index}`},h("div",{class:"my-16 f-body-02 text-lighter",innerHTML:step.content})))))))));}get el(){return getElement(this);}static get watchers(){return {"disableNext":["handleDisableNextChange"],"activeStep":["activeStepChanged"]};}};EdsStepsV2.style=EdsStepsV2Style0;const edsSwitchCss=":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}.switch:focus{outline:2px solid #005fcc;outline-offset:2px}.switch:focus:not(:focus-visible){outline:none}.switch:focus-visible{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}";const EdsSwitchStyle0=edsSwitchCss;const EdsSwitch=class{constructor(hostRef){registerInstance(this,hostRef);this.uiswitch=createEvent(this,"uiswitch",7);this.toggleSwitch=()=>{if(this.disabled){return;}this.checked=!this.checked;this.uiswitch.emit({value:this.checked});sendAnalytics({category:'ui-component',tag:this.el.tagName.toLowerCase(),name:this.checked?this.labelOn:this.labelOff||'',action:'checked'});};this.handleKeyDown=e=>{if(this.disabled){return;}if(e.key==='Enter'||e.key===' '){e.preventDefault();this.toggleSwitch();}};this.checked=false;this.disabled=false;this.labelOn='';this.labelOff='';}render(){const switchId=`switch-${Math.random().toString(36).substr(2,9)}`;const labelledBy=[];if(this.labelOff){labelledBy.push(`${switchId}-off`);}if(this.labelOn){labelledBy.push(`${switchId}-on`);}const accessibleLabel=labelledBy.length===0?this.labelOn||this.labelOff?this.checked?this.labelOn:this.labelOff:'Toggle switch':undefined;return h("div",{key:'a339677097f16cd2dfe180f0a7de26d4963a9f17',class:"switch-container"},this.labelOff&&h("span",{key:'7db8e71c0f1668fb66f2b1ff049706b80b4683b3',id:`${switchId}-off`,class:"switch-label switch-label--off mr-8"},this.labelOff),h("button",{key:'ce2a8400bc42612bcb22b47ce46762348a7a7b80',id:switchId,tabindex:this.disabled?'-1':'0',type:"button",role:"switch","aria-checked":this.checked?'true':'false',"aria-disabled":this.disabled?'true':'false',"aria-labelledby":labelledBy.length>0?labelledBy.join(' '):undefined,"aria-label":accessibleLabel,class:{switch:true,'switch--checked':this.checked,'switch--disabled':this.disabled},onClick:this.toggleSwitch,onKeyDown:this.handleKeyDown,disabled:this.disabled},h("span",{key:'c7bbace6e78fe2358ee4b91febec51a280305df0',class:"switch-handle"})),this.labelOn&&h("span",{key:'b4fa05fc1296a6d906abb4a7fa609d721d01248f',id:`${switchId}-on`,class:"switch-label switch-label--on ml-8"},this.labelOn));}get el(){return getElement(this);}};EdsSwitch.style=EdsSwitchStyle0;const edsTableCss="table{text-indent:0;border-color:inherit;border-collapse:collapse;}tr.table-row-default{background-color:transparent}tr.table-row-color:nth-child(even){background-color:var(--grey-100)}tr.table-row-color:nth-child(odd){background-color:transparent}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.p-4{padding:0.25rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-8{padding-left:0.5rem;padding-right:0.5rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";const EdsTableStyle0=edsTableCss;const EdsTable=class{constructor(hostRef){registerInstance(this,hostRef);this.rowaction=createEvent(this,"rowaction",7);this.handleResize=()=>{this.updateContainerWidth();};this.onActionKeyDown=e=>{var _a;if(e.key!=='ArrowRight'&&e.key!=='ArrowLeft'){return;}e.preventDefault();const currentButton=e.target;const toolbar=currentButton.closest('[role="toolbar"]');if(!toolbar){return;}// Find all focusable action buttons in this row
|
|
1146
|
-
const actionButtons=Array.from(toolbar.querySelectorAll('eds-button'));const currentIndex=actionButtons.indexOf(currentButton);if(currentIndex===-1){return;}let nextIndex;if(e.key==='ArrowRight'){nextIndex=(currentIndex+1)%actionButtons.length;}else {nextIndex=(currentIndex-1+actionButtons.length)%actionButtons.length;}(_a=actionButtons[nextIndex])===null||_a===void 0?void 0:_a.focus();};this.handleSort=column=>{if(this.sortColumn===column){// Toggle direction if same column
|
|
1147
|
-
this.sortDirection=this.sortDirection==='asc'?'desc':'asc';}else {// New column, default to ascending
|
|
1148
|
-
this.sortColumn=column;this.sortDirection='asc';}sendAnalytics({category:'ui-component',parentContext:null,tag:`${this.hostEl.tagName.toLowerCase()}/sort`,name:column,action:this.sortDirection});};this.data=null;this.config={};this.rowsPerPage=10;this.paginationEnabled=true;this.searchEnabled=false;this.hostWidth=undefined;this.columnSize='default';this.actions=[];this.actionTemplate=undefined;this.sortingEnabled=false;this.theme='color';this.parsedActions=[];this.dataColumns=[];this.tbData=[];this.columns=[];this.currentPage=1;this.parsedConfig={};this.totalRows=0;this.searchQuery='';this.containerWidth=0;this.sortColumn=null;this.sortDirection='asc';}handleDataChange(){this.parseData();}handleConfigChange(){this.parseConfig();}handleActionsChange(){try{this.parsedActions=typeof this.actions==='string'?JSON.parse(this.actions):this.actions;}catch(_a){// eslint-disable-next-line
|
|
1149
|
-
console.error('Failed to parse actions JSON');this.parsedActions=[];}}componentWillLoad(){this.parseConfig();this.handleActionsChange();this.parseData();}componentDidLoad(){this.updateContainerWidth();window.addEventListener('resize',this.handleResize);this.setupPaginationListener();}componentDidUpdate(){this.setupPaginationListener();}disconnectedCallback(){window.removeEventListener('resize',this.handleResize);}updateContainerWidth(){// Use hostWidth prop if provided; otherwise, measure parent element
|
|
1150
|
-
if(this.hostWidth&&this.hostWidth.trim()!==''){this.containerWidth=Number(this.hostWidth);}else if(this.hostEl.parentElement instanceof HTMLElement){this.containerWidth=this.hostEl.parentElement.getBoundingClientRect().width;}else {this.containerWidth=400;}}parseData(){try{this.tbData=parseData(this.data);this.totalRows=this.tbData.length;this.updateColumns();this.currentPage=1;}catch(error){// eslint-disable-next-line
|
|
1151
|
-
console.error('Failed to parse data:',error);this.tbData=[];}}parseConfig(){try{this.parsedConfig=typeof this.config==='string'?JSON.parse(this.config):this.config;}catch(error){// eslint-disable-next-line
|
|
1152
|
-
console.error('Failed to parse config:',error);this.parsedConfig={};}}setupPaginationListener(){if(!this.shouldEnablePagination()){return;}const paginationEl=this.hostEl.shadowRoot.querySelector('eds-pagination');if(paginationEl&&!paginationEl.hasAttribute('listener-attached')){paginationEl.addEventListener('page',event=>this.handlePageChange(event.detail.value));paginationEl.setAttribute('listener-attached','true');}}getFilteredRows(){return this.tbData.filter(row=>Object.values(row).some(value=>value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));}getPaginatedRows(){const sortedRows=this.getSortedRows();this.totalRows=sortedRows.length;const start=(this.currentPage-1)*this.rowsPerPage;return sortedRows.slice(start,start+this.rowsPerPage);}handlePageChange(newPage){this.currentPage=newPage;sendAnalytics({category:'ui-component',parentContext:null,tag:`${this.hostEl.tagName.toLowerCase()}/eds-pagination`,name:`${newPage}`||'',action:'page'});}handleSearch(event){this.searchQuery=event.target.value;this.currentPage=1;}renderCell(value,column){var _a;const format=(_a=this.parsedConfig[column])===null||_a===void 0?void 0:_a.format;return format==='uppercase'?value===null||value===void 0?void 0:value.toString().toUpperCase():format==='svg'?h("div",{innerHTML:value}):format==='bold'?h("strong",null,value):format==='code'?h("code",null,value):value;}/**
|
|
1153
|
-
* Renders one action (button or checkbox) for a specific action‐name.
|
|
1154
|
-
* Used by the “Actions” column below.
|
|
1155
|
-
*/renderSingleActionCell(actionName,row){var _a;const act=this.parsedActions.find(a=>a.name===actionName);if(this.actionTemplate){return this.actionTemplate(row);}const type=act.type||'button';if(type==='checkbox'){const boundField=(_a=act.field)!==null&&_a!==void 0?_a:act.name;const checked=!!row[boundField];return h("eds-input-field",{name:`chc-${actionName}`,label:act.label,type:"checkbox",checked:checked,onChange:e=>this.emitAction(act.name,row,e.target.checked)});}// Let all action buttons be focusable naturally
|
|
1156
|
-
const showLabel=act.showLabel===true;const btn=h("eds-button",{icon:act.icon,label:showLabel?act.label:null,iconPos:"left",pill:true,size:"small",intent:"ghost",tabIndex:0,onClick:()=>this.emitAction(act.name,row)});return showLabel?btn:h("eds-tooltip",{content:act.label},btn);}emitAction(actionName,row,checked){sendAnalytics({category:'ui-component',parentContext:null,tag:`${this.hostEl.tagName.toLowerCase()}/action`,name:actionName,action:'click'});this.rowaction.emit({action:actionName,row,checked:!!checked});}shouldEnablePagination(){return this.paginationEnabled&&this.totalRows>this.rowsPerPage;}updateColumns(){var _a,_b;// Grab all data‐keys from the first row (if any) as before:
|
|
1157
|
-
this.columns=this.tbData.length>0?Object.keys(this.tbData[0]):[];// Instead of pushing each action.name, add just a single “actions” column
|
|
1158
|
-
if(((_b=(_a=this.parsedActions)===null||_a===void 0?void 0:_a.length)!==null&&_b!==void 0?_b:0)>0&&this.tbData.length>0){this.columns.push('actions');}}getVisibleColumnsCount(){return this.columns.filter(column=>{var _a;return !((_a=this.parsedConfig[column])===null||_a===void 0?void 0:_a.hidden);}).length;}divisionFactor(){let divisionFactor=1;if(this.columnSize==='medium'){divisionFactor=2;}else if(this.columnSize==='large'){divisionFactor=4;}return divisionFactor;}capitalize(str){return str.charAt(0).toUpperCase()+str.slice(1).toLowerCase();}getSortedRows(){const filtered=this.getFilteredRows();if(!this.sortColumn){return filtered;}return [...filtered].sort((a,b)=>{const aVal=a[this.sortColumn];const bVal=b[this.sortColumn];// Handle null/undefined
|
|
1159
|
-
if(aVal==null){return 1;}if(bVal==null){return -1;}// Compare values
|
|
1160
|
-
let comparison=0;if(typeof aVal==='number'&&typeof bVal==='number'){comparison=aVal-bVal;}else {comparison=String(aVal).localeCompare(String(bVal));}return this.sortDirection==='asc'?comparison:-comparison;});}render(){const currentContainerWidth=this.hostWidth&&this.hostWidth.trim()!==''?Number(this.hostWidth):this.containerWidth||400;const visibleColumnsCount=this.getVisibleColumnsCount();const columnWidth=visibleColumnsCount>0?Math.floor(currentContainerWidth/visibleColumnsCount*this.divisionFactor()):100;const paginatedRows=this.getPaginatedRows();const lastPage=Math.ceil(this.totalRows/this.rowsPerPage);return h("div",{key:'0601cea60a05d044a717219e6ff6385ef915defa'},this.searchEnabled&&h("div",{key:'de1affaf192dc5e63b16d534d2f518c206ab7010'},h("eds-input-field",{key:1,icon:"search",name:"search","aria-label":"Search",type:"text",placeholder:"Search...",onInput:event=>this.handleSearch(event)})),h("div",{key:'49f71b5a2481d719cb8fe0547f05a5ae83ad5541',class:"mt-20"},h("table",{key:'b63ca6615ed681c741fb2d3ff2675f9cc061d194',class:"block overflow-x-auto mt-6 p-0"},h("thead",{key:'817b534cca3c2492b69b3816a41b54ec850847ab'},h("tr",{key:'6cb8735ac56c3fe2acc4a257815bc0d07009118c',class:`m-0 p-0 border border-softer table-row-${this.theme}`},this.columns.map(col=>{var _a;if(col==='actions'){return h("th",{class:"m-0 py-8 border border-softer f-ui-02 break-words",style:{minWidth:`${columnWidth-4}px`}});}if(!((_a=this.parsedConfig[col])===null||_a===void 0?void 0:_a.hidden)){return h("th",{class:"m-0 py-8 border border-softer f-ui-02 break-words",style:{minWidth:`${columnWidth-4}px`}},h("div",{style:{display:'flex',alignItems:'center',justifyContent:'center',gap:'0.25rem'}},h("span",null,this.capitalize(col)),this.sortingEnabled&&h("eds-icon-wrapper",{icon:this.sortColumn===col?this.sortDirection==='asc'?'chevron-up':'chevron-down':'chevron-down',"aria-label":`Sort by ${col}`,onClick:()=>this.handleSort(col),style:{cursor:'pointer'}})));}return null;}))),h("tbody",{key:'3c8630ed1f47720688bfcdb78c5dbfc84cb238cf'},paginatedRows.map(row=>h("tr",{class:`m-0 p-0 border border-softer table-row-${this.theme}`},this.columns.map(col=>{var _a;if(col==='actions'){return h("td",{class:"text-center border border-softer m-0 f-ui-02 break-words actions-cell",style:{minWidth:`${columnWidth-4}px`}},h("div",{role:"toolbar","aria-label":"Row actions",onKeyDown:this.onActionKeyDown,style:{display:'flex',gap:'0.5rem',justifyContent:'center',flexWrap:'wrap'}},this.parsedActions.map(act=>h("span",{style:{whiteSpace:'nowrap'}},this.renderSingleActionCell(act.name,row)))));}if(!((_a=this.parsedConfig[col])===null||_a===void 0?void 0:_a.hidden)){// Regular data cell
|
|
1161
|
-
return h("td",{class:"text-center border border-softer m-0 py-8 f-ui-2 break-words",style:{minWidth:`${columnWidth-4}px`}},this.renderCell(row[col],col));}return null;})))))),this.shouldEnablePagination()&&h("div",{key:'09faef418edc676bb2b60c2439e0652a92fe023d',class:"mt-20"},h("eds-pagination",{key:'9403d33a37505c73fe3bec652ef93f533bdb4f03',currentPage:this.currentPage,lastPage:lastPage,perPage:this.rowsPerPage,total:this.totalRows,mode:"default"})));}get hostEl(){return getElement(this);}static get watchers(){return {"data":["handleDataChange","parseData"],"config":["handleConfigChange"],"actions":["handleActionsChange"]};}};EdsTable.style=EdsTableStyle0;const edsTabsCss="*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(147 197 253 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor;}::before,::after{--tw-content:''}a{color:inherit;text-decoration:inherit}.relative{position:relative}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.whitespace-nowrap{white-space:nowrap}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus:focus-visible{outline-style:solid}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.focus-visible\\:text-default:focus-visible{color:var(--black)}.hover\\:text-default:hover{color:var(--black)}.border-2{border-width:2px}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.after\\:bottom-0::after{bottom:0rem}.after\\:border-0::after{border-width:0px}.after\\:border-b-2::after{border-bottom-width:2px}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:rounded-lg::after{border-radius:16px}.after\\:border-solid::after{border-style:solid}.after\\:border-3::after{border-width:3px}.after\\:border-accent::after{border-color:var(--green-500)}.after\\:opacity-0::after{opacity:0}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:after\\:opacity-100:focus-visible::after{opacity:1}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.rounded-tl-lg{border-top-left-radius:16px}.rounded-tr-lg{border-top-right-radius:16px}.border-l-0{border-left-width:0px}.border-r-0{border-right-width:0px}.border-b-0{border-bottom-width:0px}.pr-28{padding-right:1.75rem}.pl-28{padding-left:1.75rem}.-mr-16{margin-right:-1rem}.-ml-16{margin-left:-1rem}.px-16{padding-left:1rem;padding-right:1rem}.py-12{padding-top:0.75rem;padding-bottom:0.75rem}.after\\:left-16::after{left:1rem}.after\\:right-16::after{right:1rem}.text-lighter{color:var(--grey-600)}.bg-dark{background-color:var(--grey-300)}.hover\\:bg-darker:hover{background-color:var(--grey-400)}.border-soft{border-color:var(--grey-400)}.border-softest{border-color:rgba(0, 0, 0, .05)}.bg-default{background-color:var(--grey-200)}.text-default{color:var(--black)}.z-99{z-index:99}.after\\:z-10::after{z-index:10}.before\\:bottom-0::before{bottom:0rem}.before\\:h-12::before{height:0.75rem}.before\\:opacity-5::before{opacity:0.05}.before\\:content-\\[\\'\\'\\]::before{--tw-content:'';content:var(--tw-content)}.before\\:absolute::before{position:absolute}.before\\:-bottom-2::before{bottom:-0.125rem}.after\\:inset-x-0::after{left:0rem;right:0rem}.before\\:inset-x-0::before{left:0rem;right:0rem}.before\\:h-3::before{height:0.1875rem}.before\\:bg-default::before{background-color:var(--grey-200)}.after\\:border-soft::after{border-color:rgba(0, 0, 0, .15 )}.after\\:border-softest::after{border-color:rgba(0, 0, 0, .05)}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.before\\:bg-gradient-y::before{background:linear-gradient(to bottom, transparent, ease-in-out, black)}.scroller-x{-ms-overflow-style:none;scrollbar-width:none}.overflow-x-auto{overflow-x:auto}.max-w-xxxl{max-width:2200px}.z-1{z-index:1}.mx-auto{margin-left:auto;margin-right:auto}.pt-8{padding-top:0.5rem}.pr-16{padding-right:1rem}.pl-16{padding-left:1rem}.inline-flex{display:inline-flex}@media (min-width: 900px){.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}}@media (min-width: 2200px){.xxxl\\:px-0{padding-left:0rem;padding-right:0rem}}";const EdsTabsStyle0=edsTabsCss;const EdsTabs=class{constructor(hostRef){registerInstance(this,hostRef);this.tab=createEvent(this,"tab",7);this.tabRefs=[];// Store tab reference
|
|
1162
|
-
this.setTabRef=(el,index)=>{if(el){this.tabRefs[index]=el;}};// cva configuration
|
|
1163
|
-
this.tabCva=cva(['relative py-12','f-ui-03 whitespace-nowrap','effect-color effect-focus','focus-visible:text-default hover:text-default','border-2'],{variants:{position:{first:'px-16 rounded-t-lg',center:'px-16',left:'pl-16 pr-28 rounded-tl-lg border-r-0 -mr-16 after:right-16',right:'pl-28 pr-16 rounded-tr-lg border-l-0 -ml-16 after:left-16'},active:{false:['text-lighter bg-dark hover:bg-darker border-softest border-b-0 z-1',"after:content-[''] after:absolute after:bottom-0 after:inset-x-0 after:h-2 after:border-soft"],true:['bg-default text-default z-99','rounded-t-lg',"before:content-[''] before:absolute before:-bottom-2 z-1 before:inset-x-0 before:h-3 before:bg-default",'border-soft']}}});this.identifier=undefined;this.navAriaLabel='Tabs';this.tabs=undefined;this.parsedTabs=[];this.activeIndex=-1;}componentWillLoad(){this.parseTabs();this.setActiveIndex();this.tab.emit({tabId:this.identifier,index:this.activeIndex});}/**
|
|
1164
|
-
* Parses the `tabs` prop into an array of tab objects.
|
|
1165
|
-
* Returns an empty array if parsing fails or if `tabs` is not a valid JSON string or object.
|
|
1166
|
-
*
|
|
1167
|
-
* @returns {any[]} Array of parsed tab objects
|
|
1168
|
-
*/parseTabs(){this.parsedTabs=parseData(this.tabs);// Reset tab refs when tabs change
|
|
1169
|
-
this.tabRefs=[];}componentDidLoad(){this.scrollToActiveTab();}componentDidUpdate(){// Ensure we have the correct number of tab refs after render
|
|
1170
|
-
if(this.tabRefs.length!==this.parsedTabs.length){this.tabRefs=new Array(this.parsedTabs.length).fill(null);}}setActiveIndex(){this.activeIndex=this.parsedTabs.findIndex(tab=>tab.active);// If no active tab found, default to first tab
|
|
1171
|
-
if(this.activeIndex===-1&&this.parsedTabs.length>0){this.activeIndex=0;this.parsedTabs[0].active=true;}}scrollToActiveTab(){var _a;const activeTab=(_a=this.tabContainer)===null||_a===void 0?void 0:_a.querySelector('[data-tab-active]');if(activeTab){setTimeout(()=>{activeTab.scrollIntoView({inline:'center',block:'nearest'});},316);}}getTabOptions(active,index){const position=active?'center':this.activeIndex===-1&&index===0?'first':index<this.activeIndex?'left':'right';const rawZ=position==='left'?index:this.parsedTabs.length+1-index;// clamp inactive to at least 1
|
|
1172
|
-
const z=active?this.parsedTabs.length+99:Math.max(rawZ,1);return Object.assign({class:this.tabCva({active,position}),style:{// stringify the number so it matches { [key: string]: string }
|
|
1173
|
-
zIndex:`${z}`}},active?{'data-tab-active':'true'}:{});}handleTabClick(index,tabLabel,shouldFocus=true){// Validate index
|
|
1174
|
-
if(index<0||index>=this.parsedTabs.length){return;}// Update the active index and set all tabs' active state accordingly
|
|
1175
|
-
this.activeIndex=index;this.parsedTabs=this.parsedTabs.map((tab,tabIndex)=>Object.assign(Object.assign({},tab),{active:tabIndex===index}));this.tab.emit({tabId:this.identifier,index:index,name:tabLabel});// Only send analytics for actual clicks, not keyboard navigation
|
|
1176
|
-
if(shouldFocus){sendAnalytics({category:'ui-component',tag:this.el.tagName.toLowerCase(),name:(tabLabel===null||tabLabel===void 0?void 0:tabLabel.toLowerCase())||'',action:'click'});}// Focus management for keyboard navigation
|
|
1177
|
-
if(shouldFocus&&this.tabRefs[index]){// Use a small timeout to ensure the DOM has updated
|
|
1178
|
-
setTimeout(()=>{var _a;(_a=this.tabRefs[index])===null||_a===void 0?void 0:_a.focus();},0);}}onKeyDown(ev,idx){let newIndex=idx;switch(ev.key){case'ArrowRight':newIndex=(idx+1)%this.parsedTabs.length;ev.preventDefault();break;case'ArrowLeft':newIndex=(idx-1+this.parsedTabs.length)%this.parsedTabs.length;ev.preventDefault();break;case'Home':newIndex=0;ev.preventDefault();break;case'End':newIndex=this.parsedTabs.length-1;ev.preventDefault();break;default:return;// Don't handle other keys
|
|
1179
|
-
}if(newIndex!==idx){this.handleTabClick(newIndex,this.parsedTabs[newIndex].label,true);}}render(){return h("div",{key:'36b4771f5dc68c2b2686ece5957b4a54f70d8c38',id:`${this.identifier}`},h("div",{key:'0b9cac117898a5c8d179c69aaa971c63fed5b12c',class:"scroller-x overflow-x-auto relative z-[1] mx-auto px-16 pt-8 lg:px-28 after:border-soft before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']"},h("nav",{key:'6bb2ca84bd9b12e67bb2e6055cb435c66061f547',role:"tablist",ref:el=>this.tabContainer=el,class:"inline-flex","aria-label":this.navAriaLabel},this.parsedTabs.map((tab,index)=>{const TabComponent='button';const tabProps=this.getTabOptions(tab.active,index);const isActive=index===this.activeIndex;return h(TabComponent,Object.assign({},tabProps,{type:"button",role:"tab","aria-selected":tab.active?'true':'false',tabIndex:isActive?0:-1,"aria-label":tab.ariaLabel||tab.label,"aria-controls":`panel-${index}`,id:`tab-${index}`,ref:el=>this.setTabRef(el,index),onClick:()=>this.handleTabClick(index,tab.label,true),onKeyDown:e=>this.onKeyDown(e,index)}),tab.label||tab.ariaLabel);}))),h("div",{key:'7b17d99c5dda91842171c941228b0a0f82d595d4',class:"tab-panels"},this.parsedTabs.map((_,index)=>h("div",{role:"tabpanel",id:`panel-${index}`,"aria-labelledby":`tab-${index}`,hidden:index!==this.activeIndex,tabIndex:index===this.activeIndex?0:-1,class:"effect-focus"},h("slot",{name:`panel-${index}`})))));}get el(){return getElement(this);}static get watchers(){return {"tabs":["parseTabs"]};}};EdsTabs.style=EdsTabsStyle0;const edsTagCss=".f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.py-2{padding-top:0.125rem;padding-bottom:0.125rem}.py-3{padding-top:0.1875rem;padding-bottom:0.1875rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.px-5{padding-left:0.3125rem;padding-right:0.3125rem}.px-6{padding-left:0.375rem;padding-right:0.375rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-accent{background-color:var(--green-500)}.bg-strongest{background-color:var(--black)}.text-\\[\\#0034CB\\]{--tw-text-opacity:1;color:rgb(0 52 203 / var(--tw-text-opacity))}.border-\\[\\#0034CB\\]{--tw-border-opacity:1;border:2px solid rgb(0 52 203 / var(--tw-border-opacity))}.text-light{color:var(--grey-700)}.bg-strongest-soft{background-color:rgba(0, 0, 0, .05)}.border-transparent{border-color:var(--transparent)}.border-inverse{border-color:var(--white)}.bg-inverse{background-color:var(--white)}.text-lighter{color:var(--grey-600)}";const EdsTagStyle0=edsTagCss;// Define the CVA for the tag styles
|
|
1180
|
-
const tagStyles=cva(['border-2 rounded-pill'],// Base classes
|
|
1181
|
-
{variants:{intent:{primary:'border-accent bg-accent',default:'border-default',strong:'text-inverse bg-strongest border-default',accent:'text-[#0034CB] border-[#0034CB]',weak:'text-light bg-strongest-soft border-transparent',inverse:'border-inverse text-inverse','inverse-strong':'bg-inverse border-inverse text-lighter'},size:{small:'f-ui-05 py-2 px-4',// smaller padding
|
|
1182
|
-
medium:'f-ui-03 py-3 px-5',// moderate padding
|
|
1183
|
-
large:'f-ui-01 py-4 px-6'// larger padding
|
|
1184
|
-
}},defaultVariants:{intent:'default',size:'small'}});const EdsTag=class{constructor(hostRef){registerInstance(this,hostRef);this.label=undefined;this.intent='default';this.size='small';}render(){const classes=tagStyles({intent:this.intent,size:this.size});return h("span",{key:'0b37fdd21a8828a00daba55a7157e164e7057a88',class:classes},this.label);}};EdsTag.style=EdsTagStyle0;const edsToastCss=".relative{position:relative}.right-4{right:0.25rem}.bottom-4{bottom:0.25rem}.w-auto{width:auto}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:0.25rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.ml-8{margin-left:0.5rem}.p-12{padding:0.75rem}.rounded-lg{border-radius:16px}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),\n 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-dark{background-color:var(--grey-300)}.bg-success{background-color:var(--green-200)}.bg-error{background-color:var(--red-200)}.bg-warning{background-color:var(--yellow-200)}.text-light{color:var(--grey-700)}.text-current{color:currentColor}.text-default{color:var(--black)}";const EdsToastStyle0=edsToastCss;const toastStyles=cva(['relative bottom-4 w-auto p-12 rounded-lg shadow-md'],{variants:{intent:{default:'bg-dark text-light',success:'bg-success text-dark',error:'bg-error text-light',warning:'bg-warning text-dark'}},defaultVariants:{intent:'default'}});const EdsToast=class{constructor(hostRef){registerInstance(this,hostRef);this.toast=createEvent(this,"toast",7);/**
|
|
1185
|
-
* Dismisses the toast.
|
|
1186
|
-
*/this.dismissToast=()=>{this.toast.emit({visible:false,label:'dismissed'});this.visible=false;};this.message=undefined;this.intent='default';this.duration=undefined;this.visible=true;}componentDidLoad(){const btn=this.el.shadowRoot.querySelector('eds-button');this.emitContext(btn);}/**
|
|
1187
|
-
* Emits a custom event called `parentContext` for a given button element.
|
|
1188
|
-
* This event provides context information about the toast component.
|
|
1189
|
-
*
|
|
1190
|
-
* @param btnElement - The link element to which the event will be dispatched.
|
|
1191
|
-
*/emitContext(btnElement){const event=new CustomEvent('parentContext',{detail:{componentName:this.el.tagName.toLowerCase(),identifier:null}});btnElement.dispatchEvent(event);}connectedCallback(){if(this.duration&&this.duration>0){this.dismissTimeout=setTimeout(this.dismissToast,this.duration);}}disconnectedCallback(){// Clear the timeout when the component is removed
|
|
1192
|
-
clearTimeout(this.dismissTimeout);}render(){if(!this.visible){return null;}const classes=toastStyles({intent:this.intent});return h("div",{class:classes,role:"alert","aria-live":"assertive"},h("div",{class:"flex items-center justify-between gap-4"},h("span",{class:"f-ui-01"},this.message),h("eds-button",{intent:"tertiary",icon:"close","aria-label":"Close Toast",onClick:()=>this.dismissToast(),"extra-class":"ml-8"})));}get el(){return getElement(this);}};EdsToast.style=EdsToastStyle0;const edsTooltipCss=".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-xs{border-radius:4px}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.left-1\\/2{left:50%}.z-10{z-index:10}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.whitespace-nowrap{white-space:nowrap}.p-6{padding:0.375rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.top-full{top:100%}.bottom-full{bottom:100%}.right-full{right:100%}.left-full{left:100%}.mr-2{margin-right:0.125rem}.ml-2{margin-left:0.125rem}.mt-2{margin-top:0.125rem}.mb-2{margin-bottom:0.125rem}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:opacity-100{opacity:1}.max-w-\\[20rem\\]{max-width:20rem}.whitespace-normal{white-space:normal}.break-words{overflow-wrap:break-word}.w-full{width:100%}";const EdsTooltipStyle0=edsTooltipCss;const EdsTooltip=class{constructor(hostRef){registerInstance(this,hostRef);this.content=undefined;this.position='top';}/** fire analytics on every hover */handleHover(){sendAnalytics({category:'ui-component',tag:this.el.tagName.toLowerCase(),name:this.content.toLowerCase(),action:'hover'});}render(){const positionClass=this.position==='bottom'?'top-full mt-2':'bottom-full mb-2';return h("div",{key:'1ba27ac30f67a50e39b2bfdff2b4392b4adc948a',class:"relative w-full inline-block group"},h("slot",{key:'c84887cde7b92c3684ef61e36039d2e8c96f71f2'}),h("div",{key:'c7e475e74d977b6ab291ba8a315cdb237742a8e6',class:`absolute ${positionClass}
|
|
1193
|
-
rounded-xs bg-strongest text-inverse
|
|
1194
|
-
f-ui-03-light pointer-events-none
|
|
1195
|
-
z-10 px-4 opacity-0 transition-opacity duration-150 ease-in-out
|
|
1196
|
-
group-hover:opacity-100 whitespace-normal break-words`,role:"tooltip"},this.content));}get el(){return getElement(this);}};EdsTooltip.style=EdsTooltipStyle0;const edsUserCss="hr,p{margin:0}.block{display:block}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.text-default{color:var(--black)}.min-w-\\[280px\\]{min-width:280px}.p-8{padding:0.5rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.gap-y-8{row-gap:0.5rem}.pb-16{padding-bottom:1rem}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1 )}.max-w-full{max-width:100%}.w-full{width:100%}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.text-light{color:var(--grey-700)}.mt-4{margin-top:0.25rem}.mt-16{margin-top:1rem}";const EdsUserStyle0=edsUserCss;const EdsUser=class{constructor(hostRef){registerInstance(this,hostRef);this.handleDropdown=e=>{this.expanded=e.detail.expanded;};this.user=undefined;this.intent='tertiary';this.dropdownLabel='Account';this.expanded=false;this.shortMode=false;}/**
|
|
1197
|
-
* Helper getter to ensure we work with a User object.
|
|
1198
|
-
*/get parsedUser(){if(typeof this.user==='string'){try{return JSON.parse(this.user);}catch(error){//console.error('Failed to parse user JSON:', error);
|
|
1199
|
-
return {};}}return this.user;}async componentWillLoad(){}get initials(){var _a,_b,_c,_d;const user=this.parsedUser;const initials=`${((_a=user.given_name)===null||_a===void 0?void 0:_a.charAt(0))||''}${((_b=user.family_name)===null||_b===void 0?void 0:_b.charAt(0))||''}`.toUpperCase();return initials||((_d=(_c=user.name)===null||_c===void 0?void 0:_c.charAt(0))===null||_d===void 0?void 0:_d.toUpperCase())||'';}async closeDropdown(){var _a;await((_a=this.dropdownEl)===null||_a===void 0?void 0:_a.close());this.expanded=false;}render(){const user=this.parsedUser;const iconName=this.expanded?'chevron-down':'chevron-right';return h("div",{key:'1c4017bd33c81ad29385e164dc8611cfac58eca0',class:"block"},h("div",{key:'b692ce5a4b6b424c7e109589bdff5617d4e3b33c',class:"flex items-center"},h("eds-dropdown",{key:'0df9e3b3c5212433ec88da84edd746a1dce8c763',ref:el=>this.dropdownEl=el,label:this.dropdownLabel,intent:this.intent,"aria-label":"User Menu","dropdown-pos":"right","dropdown-offset":"false",icon:iconName,class:"text-default",onDropdown:this.handleDropdown},h("div",{key:'ef25176f1fc1796dde0b1d56264617d067d06adb',class:"min-w-[280px] p-8"},h("div",{key:'539532b05094ad47281f7d03c7900b93162e175a',class:"flex gap-x-16","data-dropdown-no-close":true},h("eds-avatar",{key:'ff51082744e2d32e5bc57069ccc99a3214ac3c03',"first-name":user.given_name,"last-name":user.family_name,initials:this.initials,color:"black"}),h("div",{key:'1850d3ad72889a446fb8f5f29cf96d7434bc8c81',class:"max-w-full"},user.name&&h("p",{key:'29a458e82be47f3b4ce801e289253158b6f7372b',class:"f-ui-01 text-default w-full text-ellipsis"},user.name),user.preferred_username&&h("p",{key:'fbb49fa957c32bd90b15dd71691b975c920049bb',class:"f-ui-03-light text-light mt-4"},user.preferred_username),user.email&&h("p",{key:'e634ceb7b74062a19f466abb1f50266370a82747',class:"f-ui-03-light text-light mt-4"},user.email))),h("div",{key:'3a8a04862973d0e28d7c62d84a6928953fd08df3',class:"text-default flex w-full flex-col gap-y-8"},h("slot",{key:'50627b6ed0b735079d60b66092181334cd1a954a'}))))));}get hostEl(){return getElement(this);}};EdsUser.style=EdsUserStyle0;
|
|
1200
|
-
|
|
1201
|
-
export { EdsAccordion as eds_accordion, EdsAlert as eds_alert, EdsAvatar as eds_avatar, EdsBlockBreak as eds_block_break, EdsBreadcrumb as eds_breadcrumb, EdsButton as eds_button, EdsCodeBlock as eds_code_block, EdsDropdown as eds_dropdown, EdsForm as eds_form, EdsGlobalSearch as eds_global_search, EdsHeader as eds_header, EdsIconWrapper as eds_icon_wrapper, EdsImg as eds_img, EdsInput as eds_input, EdsInputField as eds_input_field, EdsInputFooter as eds_input_footer, EdsInputLabel as eds_input_label, EdsInputRange as eds_input_range, EdsInputSearch as eds_input_search, EdsInputSelect as eds_input_select, EdsLink as eds_link, EdsLogo as eds_logo, EdsMatomoNotice as eds_matomo_notice, EdsNps as eds_nps, EdsPagination as eds_pagination, EdsRating as eds_rating, EdsSidebar as eds_sidebar, EdsSpinner as eds_spinner, EdsSteps as eds_steps, EdsStepsV2 as eds_steps_v2, EdsSwitch as eds_switch, EdsTable as eds_table, EdsTabs as eds_tabs, EdsTag as eds_tag, EdsToast as eds_toast, EdsTooltip as eds_tooltip, EdsUser as eds_user };
|