@ebrains/react 2.0.0 → 2.2.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.
Files changed (95) hide show
  1. package/clone-dab56639.esm.js +3 -0
  2. package/color-primary-palette_6.entry.esm.js +106 -106
  3. package/components-section.entry.esm.js +3 -7
  4. package/correct-use-of-colors.entry.esm.js +33 -33
  5. package/docs-palettes.entry.esm.js +1 -1
  6. package/docs-tokens.entry.esm.js +1 -1
  7. package/download-47746956.esm.js +18 -0
  8. package/edit-3893a517.esm.js +3 -0
  9. package/eds-accordion_34.entry.esm.js +1126 -0
  10. package/eds-app-root.entry.esm.js +4 -4
  11. package/eds-card-desc_2.entry.esm.js +4 -4
  12. package/eds-card-project.entry.esm.js +10 -10
  13. package/eds-card-tags.entry.esm.js +1 -1
  14. package/eds-card-tool.entry.esm.js +4 -4
  15. package/eds-cookies-preference.entry.esm.js +2 -2
  16. package/eds-feedback.entry.esm.js +5 -5
  17. package/eds-footer.entry.esm.js +20 -16
  18. package/eds-frame.entry.esm.js +4 -4
  19. package/eds-fullscreen-menu.entry.esm.js +8 -3
  20. package/eds-gauge.entry.esm.js +4 -4
  21. package/eds-icon-arrow-diagonal.entry.esm.js +1 -1
  22. package/eds-icon-arrow-right.entry.esm.js +1 -1
  23. package/eds-icon-bin.entry.esm.js +1 -1
  24. package/eds-icon-bluesky.entry.esm.js +1 -1
  25. package/eds-icon-bookmark.entry.esm.js +1 -1
  26. package/eds-icon-chevron-down.entry.esm.js +1 -1
  27. package/eds-icon-chevron-left.entry.esm.js +1 -1
  28. package/eds-icon-chevron-right.entry.esm.js +1 -1
  29. package/eds-icon-chevron-up.entry.esm.js +1 -1
  30. package/eds-icon-clone.entry.esm.js +21 -0
  31. package/eds-icon-close.entry.esm.js +1 -1
  32. package/eds-icon-copy.entry.esm.js +1 -1
  33. package/eds-icon-download.entry.esm.js +21 -0
  34. package/eds-icon-draft.entry.esm.js +1 -1
  35. package/eds-icon-edit.entry.esm.js +2 -2
  36. package/eds-icon-eu.entry.esm.js +1 -1
  37. package/eds-icon-external.entry.esm.js +1 -1
  38. package/eds-icon-facebook.entry.esm.js +1 -1
  39. package/eds-icon-gitlab.entry.esm.js +1 -1
  40. package/eds-icon-linkedin.entry.esm.js +1 -1
  41. package/eds-icon-loader.entry.esm.js +1 -1
  42. package/eds-icon-mastodon.entry.esm.js +1 -1
  43. package/eds-icon-menu.entry.esm.js +1 -1
  44. package/eds-icon-minus.entry.esm.js +1 -1
  45. package/eds-icon-more.entry.esm.js +1 -1
  46. package/eds-icon-paper.entry.esm.js +1 -1
  47. package/eds-icon-plus.entry.esm.js +1 -1
  48. package/eds-icon-portal.entry.esm.js +1 -1
  49. package/eds-icon-private.entry.esm.js +1 -1
  50. package/eds-icon-public.entry.esm.js +1 -1
  51. package/eds-icon-search.entry.esm.js +1 -1
  52. package/eds-icon-star.entry.esm.js +1 -1
  53. package/eds-icon-start.entry.esm.js +1 -1
  54. package/eds-icon-success.entry.esm.js +1 -1
  55. package/eds-icon-thumbs-down.entry.esm.js +1 -1
  56. package/eds-icon-thumbs-up.entry.esm.js +1 -1
  57. package/eds-icon-tutorial.entry.esm.js +1 -1
  58. package/eds-icon-twitter.entry.esm.js +1 -1
  59. package/eds-icon-unknown.entry.esm.js +1 -1
  60. package/eds-icon-updown.entry.esm.js +1 -1
  61. package/eds-icon-user.entry.esm.js +1 -1
  62. package/eds-icon-view.entry.esm.js +21 -0
  63. package/eds-icon-youtube.entry.esm.js +1 -1
  64. package/eds-modal.entry.esm.js +8 -8
  65. package/eds-progress-bar.entry.esm.js +4 -4
  66. package/eds-section-core_2.entry.esm.js +5 -5
  67. package/eds-social-networks.entry.esm.js +7 -8
  68. package/eds-spinner.entry.esm.js +4 -4
  69. package/eds-timeline.entry.esm.js +4 -4
  70. package/eds-toast-manager.entry.esm.js +1 -1
  71. package/eds-trl.entry.esm.js +2 -2
  72. package/incorrect-use-of-colors.entry.esm.js +8 -8
  73. package/index.esm.js +1 -1
  74. package/index.esm2.js +17 -27
  75. package/logo-space.entry.esm.js +9 -9
  76. package/logo-variations-horizontal_2.entry.esm.js +28 -28
  77. package/logo-variations-tabs.entry.esm.js +1 -1
  78. package/logo-wrong-usage.entry.esm.js +25 -25
  79. package/package.json +1 -1
  80. package/src/components.d.ts +1 -0
  81. package/svg-repository.entry.esm.js +9 -20
  82. package/token-list_3.entry.esm.js +5 -5
  83. package/token-ratios.entry.esm.js +3 -3
  84. package/token-spacing.entry.esm.js +26 -26
  85. package/token-typography.entry.esm.js +2 -2
  86. package/view-e900f2d4.esm.js +3 -0
  87. package/edit-1dc8d11b.esm.js +0 -3
  88. package/eds-accordion.entry.esm.js +0 -133
  89. package/eds-alert.entry.esm.js +0 -112
  90. package/eds-avatar_26.entry.esm.js +0 -3409
  91. package/eds-breadcrumb.entry.esm.js +0 -179
  92. package/eds-code-block.entry.esm.js +0 -2290
  93. package/eds-matomo-notice.entry.esm.js +0 -159
  94. package/eds-switch.entry.esm.js +0 -70
  95. package/eds-tooltip.entry.esm.js +0 -47
@@ -1,3409 +0,0 @@
1
- import { r as registerInstance, h, g as getElement, c as createEvent } from './index.esm2.js';
2
- import { s as sendAnalytics } 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 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}";
12
- const EdsAvatarStyle0 = edsAvatarCss;
13
- const EdsAvatar = class {
14
- constructor(hostRef) {
15
- registerInstance(this, hostRef);
16
- this.firstName = 'User';
17
- this.lastName = 'Avatar';
18
- this.picture = undefined;
19
- this.initials = undefined;
20
- this.color = 'grey';
21
- }
22
- /**
23
- * Flag to render the avatar with rounded (pill) shape if `true`.
24
- */
25
- //@Prop() rounded: boolean = false;
26
- /**
27
- * Determines if the initials should use a stronger (larger) font style.
28
- */
29
- //@Prop() initialsStrong: boolean = false;
30
- /**
31
- * Computed initials based on the provided `initials` prop or derived from `firstName` and `lastName`.
32
- * @returns {string | undefined} Initials for display in the avatar.
33
- */
34
- get computedInitials() {
35
- if (this.initials) {
36
- return (this.initials.match(/.{1,3}/g) || [])[0] || '';
37
- } else if (this.firstName && this.lastName) {
38
- return `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`.toUpperCase();
39
- }
40
- return undefined;
41
- }
42
- /**
43
- * Computes the CSS classes for the avatar container based on provided props like `rounded`, `color`, and `picture`.
44
- * @returns {string} List of CSS classes to apply to the avatar container.
45
- */
46
- get containerClasses() {
47
- return ['border-inside', 'aspect-1x1', 'flex', 'items-center', 'justify-center', 'overflow-hidden', this.picture ? '' : 'px-4', 'w-[54px] rounded-sm',
48
- //this.rounded ? 'rounded-full border-inside-pill w-32' : 'w-[54px] rounded-sm',
49
- this.color ? 'border-inside-inverse' : '', this.picture ? '' : this.color === 'grey' ? 'bg-dark' : 'bg-strongest text-accent'].join(' ');
50
- }
51
- /**
52
- * Renders the avatar component. Displays either an image using `eds-img` or initials depending on whether `picture` or `computedInitials` is set.
53
- * @returns {JSX.Element} The rendered avatar component.
54
- */
55
- render() {
56
- return h("div", {
57
- key: 'b7eff7ae1a1dea3509041e39316b49b673dbdf17',
58
- class: this.containerClasses
59
- }, this.picture ? h("eds-img", {
60
- src: this.picture,
61
- width: 54,
62
- height: 54,
63
- sizes: "120px",
64
- alt: `${this.firstName} ${this.lastName}`,
65
- lazyload: true,
66
- withBg: true
67
- }) : h("abbr", {
68
- title: this.computedInitials || `${this.firstName} ${this.lastName}`,
69
- class: "!no-underline f-ui-01"
70
- }, this.computedInitials));
71
- }
72
- };
73
- EdsAvatar.style = EdsAvatarStyle0;
74
- 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}";
75
- const EdsBlockBreakStyle0 = edsBlockBreakCss;
76
- const EdsBlockBreak = class {
77
- constructor(hostRef) {
78
- registerInstance(this, hostRef);
79
- this.inverse = false;
80
- }
81
- render() {
82
- return h("hr", {
83
- key: 'b604a776cae7edeee189e00af6993b42b57203f0',
84
- class: `${this.inverse ? 'border-default' : 'border-softer'} my-16 inline-block w-full border-t-2`
85
- });
86
- }
87
- };
88
- EdsBlockBreak.style = EdsBlockBreakStyle0;
89
- 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.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}";
90
- const EdsButtonStyle0 = edsButtonCss;
91
- const EdsButton = class {
92
- constructor(hostRef) {
93
- registerInstance(this, hostRef);
94
- 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'], {
95
- variants: {
96
- intent: {
97
- primary: 'bg-accent border-inside hover:bg-accent-dark shadow-accent focus:shadow-none aria-disabled:shadow-none',
98
- secondary: 'border-inside border-inside-inverse text-inverse bg-strongest hover:bg-strong-dark',
99
- tertiary: 'border-inside after:border-softest bg-dark hover:bg-darker',
100
- ghost: 'border-inside hover:bg-darker',
101
- ghostInverse: 'border-inside hover:bg-dark'
102
- },
103
- loading: {
104
- true: 'pointer-events-none',
105
- false: ''
106
- },
107
- iconSmall: {
108
- false: '',
109
- true: ''
110
- },
111
- size: {
112
- small: 'h-36 f-ui-02',
113
- large: 'h-44 f-ui-01'
114
- },
115
- iconPos: {
116
- left: 'flex-row-reverse',
117
- right: ''
118
- },
119
- iconOnly: {
120
- false: '',
121
- true: ''
122
- },
123
- pill: {
124
- true: 'rounded-full border-inside-pill',
125
- false: 'rounded-sm'
126
- }
127
- },
128
- compoundVariants: [{
129
- size: 'small',
130
- iconOnly: true,
131
- class: 'p-8'
132
- }, {
133
- size: 'large',
134
- iconOnly: true,
135
- class: 'p-12'
136
- }, {
137
- size: 'small',
138
- iconOnly: false,
139
- class: 'px-12'
140
- }, {
141
- size: 'large',
142
- iconOnly: false,
143
- class: 'px-16'
144
- }, {
145
- iconSmall: true,
146
- iconPos: 'left',
147
- class: 'pl-4',
148
- iconOnly: false
149
- }, {
150
- iconSmall: true,
151
- iconPos: 'right',
152
- class: 'pr-4',
153
- iconOnly: false
154
- }, {
155
- iconSmall: true,
156
- iconPos: 'left',
157
- size: 'large',
158
- class: 'pl-8',
159
- iconOnly: false
160
- }, {
161
- iconSmall: true,
162
- iconPos: 'right',
163
- size: 'large',
164
- class: 'pr-8',
165
- iconOnly: false
166
- }],
167
- defaultVariants: {
168
- intent: 'secondary',
169
- loading: false,
170
- iconSmall: false,
171
- iconPos: 'right',
172
- iconOnly: false,
173
- pill: false,
174
- size: 'small'
175
- }
176
- });
177
- this.parentContext = null; // Accepts the entire event detail or null
178
- this.label = undefined;
179
- this.ariaLabel = 'Button';
180
- this.elementType = 'button';
181
- this.intent = 'secondary';
182
- this.loading = false;
183
- this.disabled = false;
184
- this.pill = false;
185
- this.icon = undefined;
186
- this.size = 'small';
187
- this.iconPos = 'right';
188
- this.iconSmall = false;
189
- this.extraClass = undefined;
190
- this.triggerClick = undefined;
191
- }
192
- handleParentContext(event) {
193
- if (event.target !== this.el) {
194
- // Ignore the event if it's not targeted at this specific instance
195
- return;
196
- }
197
- this.parentContext = event.detail;
198
- event.stopPropagation();
199
- }
200
- handleClick(event) {
201
- var _a, _b;
202
- if (this.disabled) {
203
- // Prevent navigation if the link is disabled
204
- event.preventDefault();
205
- return;
206
- }
207
- sendAnalytics({
208
- category: 'ui-component',
209
- parentContext: this.parentContext,
210
- tag: this.el.tagName.toLowerCase(),
211
- name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || ((_b = this.ariaLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '',
212
- action: 'click'
213
- });
214
- // If an onClick prop is provided, call it
215
- if (typeof this.triggerClick === 'function') {
216
- this.triggerClick(); // Trigger the passed-in function
217
- }
218
- }
219
- render() {
220
- const classes = this.button({
221
- intent: this.intent,
222
- loading: this.loading,
223
- iconPos: this.iconPos,
224
- size: this.size,
225
- pill: this.pill,
226
- iconOnly: !this.label,
227
- iconSmall: this.iconSmall
228
- });
229
- const ElementType = this.elementType;
230
- return h(ElementType, {
231
- key: 'ecdd901c70578c07ef094aadbcd287588d4ba705',
232
- "aria-label": this.label || this.ariaLabel || undefined,
233
- "aria-disabled": this.elementType === 'button' ? this.disabled : undefined,
234
- disabled: this.elementType === 'button' ? this.disabled : undefined,
235
- class: `${classes || ''} ${this.extraClass || ''}`,
236
- onClick: event => this.handleClick(event)
237
- }, this.label && h("span", {
238
- key: 'af8d0ca1c5c3e54f9db3066931a69d3a5a812666',
239
- class: this.loading ? 'opacity-0' : ''
240
- }, this.label), this.loading && h("span", {
241
- key: '29b72c15e80f46e023f829568f58d8a8dca82b78',
242
- class: "absolute inset-0 flex items-center justify-center"
243
- }, h("span", {
244
- key: 'bad8bd059b1312ca3f5ab173b1203eb395e9bbd8',
245
- class: "loader",
246
- style: {
247
- border: `3px solid ${this.intent === 'secondary' ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'}`,
248
- borderBottomColor: this.intent === 'secondary' ? '#fff' : '#000'
249
- }
250
- })), this.icon ? h("eds-icon-wrapper", {
251
- class: `
252
- flex inline-flex items-center justify-center
253
- ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
254
- `,
255
- icon: this.icon
256
- }) : null);
257
- }
258
- get el() {
259
- return getElement(this);
260
- }
261
- };
262
- EdsButton.style = EdsButtonStyle0;
263
- 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}";
264
- const EdsDropdownStyle0 = edsDropdownCss;
265
- const EdsDropdown = class {
266
- constructor(hostRef) {
267
- registerInstance(this, hostRef);
268
- this.dropdown = createEvent(this, "dropdown", 7);
269
- this.focusableItems = [];
270
- /**
271
- * Toggles the visibility of the dropdown and manages focus.
272
- */
273
- this.handleClick = () => {
274
- var _a;
275
- this.isOpen = !this.isOpen;
276
- if (this.isOpen) {
277
- this.focusIndex = 0;
278
- this.focusItem();
279
- } else {
280
- this.closeDropdown();
281
- }
282
- this.dropdown.emit({
283
- expanded: this.isOpen
284
- });
285
- sendAnalytics({
286
- category: 'ui-component',
287
- parentContext: null,
288
- tag: this.host.tagName.toLowerCase(),
289
- name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
290
- action: this.isOpen ? 'expanded' : 'collapsed'
291
- });
292
- };
293
- this.icon = undefined;
294
- this.label = undefined;
295
- this.rounded = false;
296
- this.ariaLabel = 'Open dropdown';
297
- this.asNav = true;
298
- this.dropdownPos = 'left';
299
- this.dropdownOffset = true;
300
- this.intent = 'tertiary';
301
- this.isOpen = false;
302
- this.focusIndex = -1;
303
- }
304
- /**
305
- * Closes the dropdown when a click occurs outside of it.
306
- * @param {Event} e - The click event.
307
- */
308
- handleWindowClick(e) {
309
- const path = e.composedPath && e.composedPath() || [];
310
- if (!path.includes(this.host)) {
311
- this.closeDropdown();
312
- this.dropdown.emit({
313
- expanded: false
314
- });
315
- }
316
- }
317
- /**
318
- * Handles keyboard navigation and accessibility within the dropdown.
319
- * @param {KeyboardEvent} event - The keyboard event.
320
- */
321
- handleKeyDown(event) {
322
- if (this.isOpen) {
323
- const key = event.key;
324
- switch (key) {
325
- case 'Tab':
326
- this.closeDropdown();
327
- this.dropdown.emit({
328
- expanded: false
329
- });
330
- break;
331
- case 'ArrowUp':
332
- event.preventDefault();
333
- this.focusIndex = (this.focusIndex - 1 + this.focusableItems.length) % this.focusableItems.length;
334
- this.focusItem();
335
- break;
336
- case 'ArrowDown':
337
- event.preventDefault();
338
- this.focusIndex = (this.focusIndex + 1) % this.focusableItems.length;
339
- this.focusItem();
340
- break;
341
- }
342
- }
343
- }
344
- /**
345
- * Closes the dropdown and resets focus.
346
- */
347
- closeDropdown() {
348
- this.isOpen = false;
349
- this.focusIndex = -1;
350
- this.dropdown.emit({
351
- expanded: false
352
- });
353
- }
354
- /**
355
- * Sets focus on the currently selected item in the dropdown.
356
- */
357
- focusItem() {
358
- var _a;
359
- (_a = this.focusableItems[this.focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
360
- }
361
- /**
362
- * Lifecycle method that runs after the component has been added to the DOM.
363
- * Initializes focusable items within the dropdown.
364
- */
365
- componentDidLoad() {
366
- var _a;
367
- this.focusableItems = Array.from(((_a = this.dropdownContent) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button')) || []);
368
- }
369
- /**
370
- * Renders the dropdown component and displays its content when open.
371
- * @returns {JSX.Element} The rendered dropdown component.
372
- */
373
- render() {
374
- return h("div", {
375
- key: '14f31163cc0fb25c3d531632ae36e01d8759567d',
376
- class: "z-focus relative",
377
- ref: el => this.dropdownContent = el
378
- }, h("eds-button", {
379
- key: '748413032b87b13290743f5bb9822cb84c1d0cf9',
380
- label: this.label,
381
- "aria-label": this.ariaLabel,
382
- icon: this.icon,
383
- intent: this.intent,
384
- onClick: this.handleClick,
385
- "aria-expanded": this.isOpen.toString(),
386
- "aria-haspopup": "menu"
387
- }), h("nav", {
388
- key: '1a8f28c02b0782569228f75e030483439374baed',
389
- role: "menu",
390
- class: {
391
- '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,
392
- 'left-4': this.dropdownPos === 'left' && this.dropdownOffset,
393
- 'left-0': this.dropdownPos === 'left' && !this.dropdownOffset,
394
- 'right-4': this.dropdownPos === 'right' && this.dropdownOffset,
395
- 'right-0': this.dropdownPos === 'right' && !this.dropdownOffset,
396
- 'rounded-lg': this.rounded
397
- },
398
- style: {
399
- display: this.isOpen ? 'block' : 'none'
400
- },
401
- "aria-label": "Dropdown",
402
- "aria-hidden": !this.isOpen
403
- }, h("slot", {
404
- key: '31189866f6e1779a5fd5e1b8f3c33d8a0074410b'
405
- })));
406
- }
407
- get host() {
408
- return getElement(this);
409
- }
410
- };
411
- EdsDropdown.style = EdsDropdownStyle0;
412
-
413
- // utils/validators.ts
414
- function validateField(name, value, type, required, maxLength, min, max) {
415
- const errors = [];
416
- if (required && !value) {
417
- //errors.push(`${name} is required.`);
418
- const shortName = name.length > 30 ? `${name.slice(0, 27)}…` : name;
419
- errors.push(`“${shortName}” is required.`);
420
- }
421
- if (type === 'number') {
422
- const parsed = typeof value === 'number' ? value : parseFloat(value);
423
- if (isNaN(parsed)) {
424
- errors.push(`${name} must be a valid number.`);
425
- } else {
426
- if (typeof min === 'number' && parsed < min) {
427
- errors.push(`${name} must be greater than or equal to ${min}.`);
428
- }
429
- if (typeof max === 'number' && parsed > max) {
430
- errors.push(`${name} must be less than or equal to ${max}.`);
431
- }
432
- }
433
- }
434
- if (maxLength && typeof value === 'string' && value.length > maxLength) {
435
- errors.push(`${name} must be at most ${maxLength} characters.`);
436
- }
437
- if (type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.toString())) {
438
- errors.push('Invalid email format.');
439
- }
440
- return errors;
441
- }
442
- function validateFieldGroup(name, required, formEl) {
443
- // Find all eds-input-field components that contain inputs with the given name.
444
- const groupFields = Array.from(formEl.querySelectorAll('eds-input-field')).filter(edsField => {
445
- var _a, _b;
446
- 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;
447
- });
448
- // Collect all input elements with the matching name inside those components.
449
- const groupElements = groupFields.flatMap(edsField => {
450
- var _a;
451
- return Array.from(((_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) || []);
452
- });
453
- // Check if at least one input is checked.
454
- const isChecked = groupElements.some(el => el.checked);
455
- const errors = [];
456
- if (required && !isChecked) {
457
- errors.push(`At least one option in ${name} is required.`);
458
- }
459
- return errors;
460
- }
461
- function validateSingleBox(name, required, formEl) {
462
- var _a;
463
- const errors = [];
464
- // Find the eds-input-field component containing the input with the given name.
465
- const edsField = Array.from(formEl.querySelectorAll('eds-input-field')).find(field => {
466
- var _a;
467
- return (_a = field.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`);
468
- });
469
- // If no such field is found and it's required, return an error.
470
- if (!edsField) {
471
- if (required) {
472
- errors.push(`${name} is required.`);
473
- }
474
- return errors;
475
- }
476
- // Query within the component's shadow root.
477
- const inputEl = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`);
478
- if (required && inputEl && !inputEl.checked) {
479
- errors.push(`${name} is required.`);
480
- }
481
- return errors;
482
- }
483
-
484
- /**
485
- * Finds the first input element for a given field name inside eds-input-field components.
486
- */
487
- function findFieldElement(formEl, name) {
488
- const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
489
- for (const element of elements) {
490
- if (element.shadowRoot) {
491
- const input = element.shadowRoot.querySelector(`[name="${name}"]`);
492
- if (input) {
493
- return input;
494
- }
495
- }
496
- }
497
- return null;
498
- }
499
- function findRatingElement(formEl) {
500
- const elements = Array.from(formEl.querySelectorAll('eds-rating'));
501
- for (const element of elements) {
502
- return element;
503
- }
504
- return null;
505
- }
506
- /**
507
- * Validates all fields and returns an object containing the errors and a flag indicating any errors.
508
- */
509
- function validateFormFields(parsedFields, formEl, values,
510
- // eslint-disable-next-line
511
- isFieldVisible) {
512
- const errors = {};
513
- let hasError = false;
514
- parsedFields.forEach(field => {
515
- // Only validate fields that are visible.
516
- if (!isFieldVisible(field, values)) {
517
- // If a field is hidden, clear its error.
518
- delete errors[field.name];
519
- return;
520
- }
521
- if (field.type !== 'hidden') {
522
- if ((field.type === 'checkbox' || field.type === 'radio') && !field.options) {
523
- // Single checkbox or radio without multiple options
524
- const fieldErrors = validateSingleBox(field.name, field.required, formEl);
525
- if (fieldErrors.length > 0) {
526
- errors[field.name] = fieldErrors;
527
- hasError = true;
528
- }
529
- } else if (field.options && (field.type === 'checkbox' || field.type === 'radio')) {
530
- // Checkbox or radio group with options
531
- const fieldErrors = validateFieldGroup(field.name, field.required, formEl);
532
- if (fieldErrors.length > 0) {
533
- errors[field.name] = fieldErrors;
534
- hasError = true;
535
- }
536
- } else if (field.type === 'rating') {
537
- const inputEl = findRatingElement(formEl);
538
- if (inputEl) {
539
- const raw = inputEl.getAttribute('selected-rating');
540
- const value = raw !== null ? parseInt(raw, 10) : 0;
541
- const fieldErrors = validateField(field.name, value, field.type, field.required);
542
- if (fieldErrors.length > 0) {
543
- errors[field.name] = fieldErrors;
544
- hasError = true;
545
- }
546
- }
547
- } else {
548
- // For all other types, find the first matching element.
549
- const inputEl = findFieldElement(formEl, field.name);
550
- if (inputEl) {
551
- const value = inputEl.value;
552
- const fieldErrors = validateField(field.name, value, field.type, field.required, field.maxlength, field.min, field.max);
553
- if (fieldErrors.length > 0) {
554
- errors[field.name] = fieldErrors;
555
- hasError = true;
556
- }
557
- }
558
- }
559
- }
560
- });
561
- return {
562
- errors,
563
- hasError
564
- };
565
- }
566
-
567
- /**
568
- * Validates a field based on its type and returns an array of error messages.
569
- * @param field - The field configuration object.
570
- * @param value - The input value (if applicable).
571
- * @param formEl - The form element used for DOM queries.
572
- */
573
- function validateInputField(field, value, formEl) {
574
- if (field.type === 'checkbox' || field.type === 'radio') {
575
- if (field.options) {
576
- return validateFieldGroup(field.name, field.required, formEl);
577
- }
578
- return validateSingleBox(field.name, field.required, formEl);
579
- }
580
- return validateField(field.name, value, field.type, field.required, field.maxlength, field.min, field.max);
581
- }
582
-
583
- /**
584
- * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
585
- */
586
- function getFormInitData({
587
- initData,
588
- parsedFields,
589
- currentValues
590
- //formEl,
591
- //isFieldVisible
592
- }) {
593
- // Pass 1: Update state for all fields.
594
- const updatedValues = Object.assign({}, currentValues);
595
- parsedFields.forEach(field => {
596
- const value = initData[field.name];
597
- if (value !== undefined) {
598
- updatedValues[field.name] = value;
599
- }
600
- });
601
- return {
602
- updatedValues
603
- };
604
- }
605
- 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-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)}.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}";
606
- const EdsFormStyle0 = edsFormCss;
607
- const EdsForm = class {
608
- constructor(hostRef) {
609
- registerInstance(this, hostRef);
610
- this.form = createEvent(this, "form", 7);
611
- this.name = 'eds-form';
612
- this.setFormUrl = true;
613
- this.formBtn = true;
614
- this.formBtnLabel = 'Submit';
615
- this.errorMessage = 'Some fields in your form are incorrect.';
616
- this.fields = [];
617
- this.groups = [];
618
- this.initData = {};
619
- this.values = {};
620
- this.isSubmitting = false;
621
- this.hasError = false;
622
- this.errors = {};
623
- this.parsedFields = [];
624
- this.parsedGroups = [];
625
- }
626
- async setData(newData) {
627
- this.populateFormWithInitData(newData);
628
- }
629
- componentWillLoad() {
630
- this.parseFields(this.fields);
631
- this.parseGroups(this.groups);
632
- // Emit context for each eds-link element after the component is fully loaded
633
- const links = this.el.querySelectorAll('eds-button');
634
- links.forEach(link => {
635
- this.emitContext(link);
636
- });
637
- }
638
- componentDidLoad() {
639
- if (this.shouldFormProcessInitData) {
640
- this.populateFormWithInitData(this.initData);
641
- }
642
- }
643
- get shouldFormProcessInitData() {
644
- return !!this.initData;
645
- }
646
- parseFields(newValue) {
647
- this.parsedFields = parseData(newValue);
648
- }
649
- parseGroups(newVal) {
650
- this.parsedGroups = parseData(newVal);
651
- }
652
- emitContext(linkElement) {
653
- const event = new CustomEvent('parentContext', {
654
- detail: {
655
- componentName: this.el.tagName.toLowerCase(),
656
- identifier: null
657
- }
658
- });
659
- linkElement.dispatchEvent(event);
660
- }
661
- isFieldVisible(field) {
662
- if (!field.condition) {
663
- return true;
664
- }
665
- const actual = this.values[field.condition.field];
666
- const expected = field.condition.value;
667
- // Handle loose match between booleans and strings
668
- return String(actual) === String(expected);
669
- }
670
- validateForm() {
671
- const {
672
- errors,
673
- hasError
674
- } = validateFormFields(this.parsedFields, this.formEl, this.values, (field, values) => {
675
- if (!field.condition) {
676
- return true;
677
- }
678
- const parentValue = values[field.condition.field];
679
- return parentValue === field.condition.value;
680
- });
681
- this.errors = errors;
682
- this.hasError = hasError;
683
- }
684
- populateFormWithInitData(initData) {
685
- const {
686
- updatedValues
687
- } = getFormInitData({
688
- initData,
689
- parsedFields: this.parsedFields,
690
- currentValues: this.values,
691
- formEl: this.formEl,
692
- isFieldVisible: (field, values) => {
693
- if (!field.condition) {
694
- return true;
695
- }
696
- const parentValue = values[field.condition.field];
697
- return parentValue === field.condition.value;
698
- }
699
- });
700
- this.values = updatedValues;
701
- }
702
- getFormData() {
703
- const formData = new FormData();
704
- // Add the form name
705
- formData.append('form_name', this.name);
706
- // Add the form URL
707
- if (this.setFormUrl && typeof window !== 'undefined') {
708
- formData.set('form_url', window.location.href);
709
- }
710
- // Get all input elements within `eds-input-field`
711
- const elements = Array.from(this.formEl.querySelectorAll('eds-input-field'));
712
- elements.forEach(element => {
713
- if (element.shadowRoot) {
714
- // Get input/textarea/select from the shadow DOM
715
- const input = element.shadowRoot.querySelector('input, textarea, select');
716
- if (input && input.name) {
717
- if (input.type === 'checkbox' || input.type === 'radio') {
718
- // Handle checkboxes and radio buttons
719
- const checkboxes = Array.from(element.shadowRoot.querySelectorAll(`input[name="${input.name}"]:checked`));
720
- const values = checkboxes.map(checkbox => checkbox.value);
721
- formData.append(input.name, values.join(',')); // Join multiple values with a comma
722
- } else if (input.type === 'file') {
723
- // Handle file uploads.
724
- const fileInput = input;
725
- if (fileInput.files && fileInput.files.length > 0) {
726
- // If multiple files are allowed, you can append them all.
727
- Array.from(fileInput.files).forEach(file => {
728
- // You can either append each file under the same name (if your backend expects an array)
729
- // or you can give them unique names. Here we use the same name.
730
- formData.append(fileInput.name, file);
731
- });
732
- }
733
- } else {
734
- // Handle other input types
735
- formData.append(input.name, input.value);
736
- }
737
- }
738
- }
739
- });
740
- return formData;
741
- }
742
- makeFormData() {
743
- const formData = new FormData();
744
- // Add the form name
745
- formData.append('form_name', this.name);
746
- // Add the form URL
747
- if (this.setFormUrl && typeof window !== 'undefined') {
748
- formData.set('form_url', window.location.href);
749
- }
750
- Object.keys(this.values).forEach(key => {
751
- // Append each key-value pair to the FormData object.
752
- formData.append(key, this.values[key]);
753
- });
754
- return formData;
755
- }
756
- handleChange(e, field) {
757
- const target = e.target;
758
- let newValue = target.value;
759
- if (target.type === 'checkbox') {
760
- // Get the current comma separated string or default to an empty string.
761
- const currentStr = this.values[field.name] || '';
762
- // Convert the string into an array. If the string is empty, we get an empty array.
763
- let valuesArray = currentStr ? currentStr.split(',') : [];
764
- if (target.checked) {
765
- // Only add if it's not already in the array.
766
- if (!valuesArray.includes(target.value)) {
767
- valuesArray.push(target.value);
768
- }
769
- } else {
770
- // Remove the value from the array if the checkbox is unchecked.
771
- valuesArray = valuesArray.filter(item => item !== target.value);
772
- }
773
- newValue = valuesArray.join(',');
774
- } else if (target.type === 'radio') {
775
- if (!target.checked) {
776
- return;
777
- } // Only react to the selected radio
778
- newValue = target.value;
779
- }
780
- this.values = Object.assign(Object.assign({}, this.values), {
781
- [field.name]: newValue
782
- });
783
- // If it’s the password field, return here for no event emission
784
- if (field.name === 'password') {
785
- return;
786
- }
787
- // Emit the updated form state.
788
- this.form.emit({
789
- event: 'change',
790
- field: field.name,
791
- value: newValue,
792
- message: `${field.name} updated`
793
- //data: this.makeFormData()
794
- });
795
- }
796
- handleInput(e, field) {
797
- const target = e.target;
798
- if (target.type === 'radio' && !target.checked) {
799
- return;
800
- }
801
- const newValue = target.value;
802
- // Update the field's value in state.
803
- //this.values = { ...this.values, [field.name]: target.value };
804
- // Create a copy of the current errors.
805
- const newErrors = Object.assign({}, this.errors);
806
- // Use the utility to validate the field.
807
- const fieldErrors = validateInputField(field, target.value, this.formEl);
808
- if (fieldErrors.length > 0) {
809
- newErrors[field.name] = fieldErrors;
810
- } else {
811
- delete newErrors[field.name];
812
- }
813
- // Update the errors state and the hasError flag.
814
- this.errors = newErrors;
815
- this.hasError = Object.keys(newErrors).length > 0;
816
- // Emit the updated form state.
817
- this.form.emit({
818
- event: 'input',
819
- field: field.name,
820
- value: newValue,
821
- message: `${field.name} updated`
822
- //data: this.makeFormData()
823
- });
824
- }
825
- handleRating(e, field) {
826
- const rating = e.detail;
827
- this.values = Object.assign(Object.assign({}, this.values), {
828
- [field.name]: rating
829
- });
830
- const newErrors = Object.assign({}, this.errors);
831
- if (field.required && rating === 0) {
832
- newErrors[field.name] = ['This field is required'];
833
- } else {
834
- delete newErrors[field.name];
835
- }
836
- this.errors = newErrors;
837
- this.hasError = Object.keys(newErrors).length > 0;
838
- this.form.emit({
839
- event: 'change',
840
- field: field.name,
841
- value: rating,
842
- message: `${field.name} updated`
843
- });
844
- }
845
- handleSubmit() {
846
- var _a, _b;
847
- if (this.isSubmitting) {
848
- return;
849
- }
850
- this.isSubmitting = true;
851
- this.validateForm();
852
- if (this.hasError) {
853
- this.isSubmitting = false;
854
- this.form.emit({
855
- event: 'submit',
856
- validated: false,
857
- success: false,
858
- message: this.errorMessage
859
- //data: this.makeFormData()
860
- }); // Emit form status submit false validation error
861
- sendAnalytics({
862
- category: 'ui-component',
863
- parentContext: null,
864
- tag: this.el.tagName.toLowerCase(),
865
- name: `${(_a = this.formBtnLabel) === null || _a === void 0 ? void 0 : _a.toLowerCase()}/non-validated` || '',
866
- action: 'click'
867
- });
868
- return;
869
- }
870
- // Log each entry in FormData to see file details
871
- /*formData.forEach((value, key) => {
872
- if (value instanceof File) {
873
- console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
874
- } else {
875
- console.log(`Field: ${key}, Value: ${value}`);
876
- }
877
- });*/
878
- this.form.emit({
879
- event: 'submit',
880
- success: true,
881
- validated: true,
882
- message: 'Form data validated successfully'
883
- //data: this.getFormData()
884
- });
885
- sendAnalytics({
886
- category: 'ui-component',
887
- parentContext: null,
888
- tag: this.el.tagName.toLowerCase(),
889
- name: `${(_b = this.formBtnLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()}/validated` || '',
890
- action: 'click'
891
- });
892
- // Reset form states
893
- this.errors = {};
894
- this.formEl.reset();
895
- this.isSubmitting = false;
896
- return;
897
- }
898
- get groupedFields() {
899
- const map = {};
900
- // initialize buckets for each group
901
- this.parsedGroups.forEach(g => map[g.id] = []);
902
- map['__ungrouped'] = [];
903
- this.parsedFields.forEach(f => {
904
- const gid = f.groupId || '__ungrouped';
905
- if (!map[gid]) {
906
- map[gid] = [];
907
- }
908
- map[gid].push(f);
909
- });
910
- return map;
911
- }
912
- renderField(field) {
913
- var _a, _b;
914
- if (!this.isFieldVisible(field)) {
915
- return null;
916
- }
917
- // 1) Handle rating
918
- if (field.type === 'rating') {
919
- // pull the current value (or zero)
920
- const val = this.values[field.name] || 0;
921
- return h("div", {
922
- class: "form-group rating-field",
923
- key: field.name
924
- }, h("div", {
925
- class: "flex justify-between"
926
- }, field && h("eds-input-label", {
927
- name: `rating-${field.name}`,
928
- label: field.label,
929
- disabled: field.disabled,
930
- required: field.required
931
- })), h("eds-rating", {
932
- id: `rating-${field.name}`,
933
- "rating-type": field.ratingType,
934
- "rating-count": field.ratingCount,
935
- "selected-rating": val,
936
- onRating: e => this.handleRating(e, field)
937
- }), h("div", {
938
- class: "mt-6"
939
- }, h("eds-input-footer", {
940
- id: `${field.name}-footer`,
941
- name: field.name,
942
- message: field.message,
943
- "error-message": (_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.join('<br/>'),
944
- error: !!this.errors[field.name],
945
- link: field.link
946
- })));
947
- }
948
- return h("eds-input-field", {
949
- key: field.name,
950
- name: field.name,
951
- label: field.label,
952
- placeholder: field.placeholder,
953
- type: field.type,
954
- value: this.values[field.name],
955
- required: field.required,
956
- hint: field.hint,
957
- message: field.message,
958
- error: !!this.errors[field.name],
959
- errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'),
960
- options: field.options,
961
- onInput: e => this.handleInput(e, field),
962
- onChangeNative: e => this.handleChange(e, field)
963
- });
964
- }
965
- async getData() {
966
- return this.makeFormData();
967
- }
968
- render() {
969
- const hiddenFields = this.parsedFields.filter(field => field.type === 'hidden');
970
- //const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
971
- const buckets = this.groupedFields;
972
- return h("form", {
973
- key: '65b3611bfc26512d594c3f4657bcba93f4e54ec9',
974
- ref: el => this.formEl = el,
975
- autocomplete: "on",
976
- onSubmit: this.handleSubmit
977
- }, h("div", {
978
- key: '24c77c04b83d458528fbb4423f2d1a0f0e7e65e3'
979
- }, h("slot", {
980
- key: '13cdf29e9da20c91d3fa38ced5f0843046cfeefb'
981
- }), hiddenFields.map((field, index) => h("eds-input", {
982
- key: index,
983
- type: "hidden",
984
- name: field.name,
985
- value: field.value
986
- })), this.parsedGroups.filter(g => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0).map(g => h("div", {
987
- class: "container mt-20",
988
- key: g.id
989
- }, h("span", {
990
- class: "f-body-02"
991
- }, h("b", null, g.title)), h("div", {
992
- class: "border-group mt-32 mb-32 flex flex-col gap-y-24"
993
- }, buckets[g.id].map(f => this.renderField(f))))), h("div", {
994
- key: '99706c326e6e18a1099fef82e78a4ea383338fb4',
995
- class: "flex flex-col mt-20 gap-y-24"
996
- }, buckets['__ungrouped'].map(f => this.renderField(f)))), this.formBtn && h("div", {
997
- key: '6e66e2f87c18022d729fcea33e4db6bc2a173392',
998
- class: "mt-32"
999
- }, h("eds-button", {
1000
- key: 'a94a3e027f58c5276bec7e612987e738d74e7d1c',
1001
- intent: "primary",
1002
- label: this.formBtnLabel,
1003
- disabled: this.isSubmitting,
1004
- loading: this.isSubmitting,
1005
- onClick: () => this.handleSubmit()
1006
- })));
1007
- }
1008
- get el() {
1009
- return getElement(this);
1010
- }
1011
- static get watchers() {
1012
- return {
1013
- "fields": ["parseFields"],
1014
- "groups": ["parseGroups"]
1015
- };
1016
- }
1017
- };
1018
- EdsForm.style = EdsFormStyle0;
1019
- 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}.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}}";
1020
- const EdsHeaderStyle0 = edsHeaderCss;
1021
- const EdsHeader = class {
1022
- constructor(hostRef) {
1023
- registerInstance(this, hostRef);
1024
- this.toggleheadermenu = createEvent(this, "toggleheadermenu", 7);
1025
- this.homeUrl = '/';
1026
- this.links = undefined;
1027
- this.headerVariant = 'default';
1028
- this.menuEnabled = false;
1029
- this.isMenuOpen = false;
1030
- this.isUserMenuOpen = false;
1031
- this.isAuthenticated = false;
1032
- }
1033
- onAuthStatusChanged(event) {
1034
- var _a;
1035
- this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
1036
- }
1037
- componentDidLoad() {
1038
- const links = this.hostEl.querySelectorAll('eds-link');
1039
- links.forEach(link => this.emitContext(link));
1040
- }
1041
- emitContext(linkElement) {
1042
- const event = new CustomEvent('parentContext', {
1043
- detail: {
1044
- componentName: this.hostEl.tagName.toLowerCase(),
1045
- identifier: null
1046
- }
1047
- });
1048
- linkElement.dispatchEvent(event);
1049
- }
1050
- handleToggleMenu() {
1051
- this.toggleheadermenu.emit(!this.isMenuOpen);
1052
- }
1053
- toggleUserMenu() {
1054
- this.isUserMenuOpen = !this.isUserMenuOpen;
1055
- }
1056
- get parsedLinks() {
1057
- return parseData(this.links);
1058
- }
1059
- render() {
1060
- // Define classes based on headerVariant
1061
- const variantClasses = {
1062
- default: 'text-default bg-dark',
1063
- inverse: 'text-default bg-inverse',
1064
- strong: 'text-inverse bg-strongest'
1065
- };
1066
- const classes = variantClasses[this.headerVariant] || variantClasses.default;
1067
- // Logo color variant: default and inverse use 'color', strong uses 'color-white'
1068
- const logoType = this.headerVariant === 'strong' ? 'color-white' : 'color';
1069
- return h("header", {
1070
- key: 'aac532eed29a3d4b310ea2550521c95d562d0ece',
1071
- class: `flex items-center justify-between relative z-10 ${classes}`
1072
- }, h("div", {
1073
- key: '8794699aa3401c267aacb95959acd57f9ceea3f5',
1074
- class: "mr-auto w-[200px] h-[85px]"
1075
- }, h("eds-logo", {
1076
- key: '490fae1495ecd2b801b24d068c7a2b446ed8741a',
1077
- type: logoType,
1078
- href: this.homeUrl
1079
- })), this.parsedLinks && h("nav", {
1080
- key: '3e109d13e8ae8b911511f7cd067ffc193735121a',
1081
- class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex"
1082
- }, h("ul", {
1083
- key: '87d2e7e9e1d8cafeac2a38b709f77c6bfe83a96d',
1084
- class: "flex gap-x-2"
1085
- }, this.parsedLinks.map(link => h("eds-link", {
1086
- label: link.label,
1087
- "aria-label": link.label,
1088
- url: link.url,
1089
- intent: "ghost",
1090
- size: "large",
1091
- icon: link.icon,
1092
- external: link.external,
1093
- "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"
1094
- })))), h("slot", {
1095
- key: 'c61e952aeb210ec0f1df85dcd165a4af9bee2d35'
1096
- }), this.menuEnabled && h("div", {
1097
- key: '6838e9ee79eca023c58236d817524f1f0a0b60a5',
1098
- class: "md:hidden flex overflow-hidden px-16"
1099
- }, h("eds-button", {
1100
- key: '1b5e7090df7021a145914a77c8bc7388a3218465',
1101
- "aria-label": "Menu",
1102
- intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse',
1103
- icon: "menu",
1104
- size: "small",
1105
- onClick: () => this.handleToggleMenu()
1106
- })));
1107
- }
1108
- get hostEl() {
1109
- return getElement(this);
1110
- }
1111
- };
1112
- EdsHeader.style = EdsHeaderStyle0;
1113
- const EdsIconWrapper = class {
1114
- constructor(hostRef) {
1115
- registerInstance(this, hostRef);
1116
- this.TagName = null;
1117
- this.icon = 'arrow-right';
1118
- this.class = '';
1119
- this.IconComponent = null;
1120
- }
1121
- componentWillLoad() {
1122
- this.loadIconComponent(this.icon);
1123
- }
1124
- iconChanged(newValue) {
1125
- this.loadIconComponent(newValue);
1126
- }
1127
- async loadIconComponent(iconName) {
1128
- try {
1129
- // Dynamically import the Stencil icon component based on the icon name
1130
- this.IconComponent = `eds-icon-${iconName}`;
1131
- } catch (error) {
1132
- //console.error(`Failed to load icon component: ${iconName}`, error);
1133
- this.IconComponent = `eds-icon-unknown`;
1134
- }
1135
- }
1136
- render() {
1137
- const IconComponent = this.IconComponent;
1138
- return IconComponent ? h(IconComponent, {
1139
- class: this.class
1140
- }) : null;
1141
- }
1142
- static get watchers() {
1143
- return {
1144
- "icon": ["iconChanged"]
1145
- };
1146
- }
1147
- };
1148
- 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}";
1149
- const EdsImgStyle0 = edsImgCss;
1150
- const EdsImg = class {
1151
- constructor(hostRef) {
1152
- registerInstance(this, hostRef);
1153
- this.img = null;
1154
- this.handleLoad = () => {
1155
- this.loaded = true;
1156
- this.showBg = false;
1157
- };
1158
- // On error, remove the background effect so users know the image failed to load.
1159
- this.handleError = () => {
1160
- this.loaded = true;
1161
- this.showBg = false;
1162
- };
1163
- this.handleTransitionEnd = () => {
1164
- this.showBg = false;
1165
- };
1166
- this.src = undefined;
1167
- this.alt = '';
1168
- this.width = undefined;
1169
- this.height = undefined;
1170
- this.srcset = undefined;
1171
- this.sizes = undefined;
1172
- this.formats = [];
1173
- this.lazyload = true;
1174
- this.withBg = true;
1175
- this.loaded = !this.lazyload;
1176
- this.showBg = this.withBg;
1177
- }
1178
- componentDidLoad() {
1179
- if (this.img && this.img.complete) {
1180
- this.loaded = true;
1181
- this.showBg = false;
1182
- }
1183
- }
1184
- render() {
1185
- const imgOpts = {};
1186
- if (this.lazyload) {
1187
- imgOpts['loading'] = 'lazy';
1188
- imgOpts['decoding'] = 'async';
1189
- }
1190
- return h("div", {
1191
- key: 'd40662545cefe458d307c9877c4a8804c4fb7406',
1192
- class: {
1193
- 'items-center justify-center': true,
1194
- 'effect-bg-pattern': this.lazyload && this.showBg
1195
- }
1196
- }, h("picture", {
1197
- key: '94c28d57611eec83eb7ed03620de4b2449dd665c'
1198
- }, this.formats.map(format => h("source", {
1199
- type: format.type,
1200
- srcSet: format.srcset,
1201
- media: format.media,
1202
- sizes: this.sizes
1203
- })), h("img", Object.assign({
1204
- key: 'd7b6e56937a19f558abb29bb1da2f04b945970c9',
1205
- ref: el => this.img = el,
1206
- class: {
1207
- 'effect-opacity object-cover object-center': true,
1208
- 'opacity-100': this.loaded,
1209
- 'opacity-0': !this.loaded
1210
- },
1211
- width: this.width,
1212
- height: this.height,
1213
- sizes: this.sizes,
1214
- src: this.src,
1215
- srcSet: this.srcset,
1216
- alt: this.alt
1217
- }, imgOpts, {
1218
- onLoad: this.handleLoad,
1219
- onError: this.handleError,
1220
- onTransitionEnd: this.handleTransitionEnd
1221
- }))));
1222
- }
1223
- get imgElement() {
1224
- return getElement(this);
1225
- }
1226
- };
1227
- EdsImg.style = EdsImgStyle0;
1228
- const EdsInput = class {
1229
- constructor(hostRef) {
1230
- registerInstance(this, hostRef);
1231
- this.handleInput = e => {
1232
- const target = e.target;
1233
- this.innerVal = target.value;
1234
- if (this.maxLength && this.type === 'textarea') {
1235
- this.maxLengthReached = target.value.length >= this.maxLength;
1236
- }
1237
- };
1238
- this.name = undefined;
1239
- this.inputId = undefined;
1240
- this.placeholder = undefined;
1241
- this.disabled = false;
1242
- this.hasMessage = false;
1243
- this.error = false;
1244
- this.checked = undefined;
1245
- this.type = 'text';
1246
- this.required = false;
1247
- this.value = undefined;
1248
- this.icon = undefined;
1249
- this.maxLength = undefined;
1250
- this.options = [];
1251
- this.extraClass = undefined;
1252
- this.min = undefined;
1253
- this.max = undefined;
1254
- this.step = undefined;
1255
- this.innerVal = '';
1256
- this.maxLengthReached = false;
1257
- }
1258
- onValueChanged(newValue) {
1259
- this.innerVal = newValue;
1260
- }
1261
- componentWillLoad() {
1262
- // Initialize innerVal with the value prop if it's set
1263
- if (this.value) {
1264
- this.innerVal = this.value;
1265
- } else if (this.type === 'select' && this.options.length > 0) {
1266
- // If the type is select and there are options, set the initial value to the first option
1267
- this.innerVal = this.options[0].value;
1268
- }
1269
- }
1270
- getInputElement() {
1271
- return this.el.querySelector('input');
1272
- }
1273
- render() {
1274
- const withIcon = !!this.icon;
1275
- const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
1276
- return h("div", {
1277
- key: 'f48593b92f28da7f3ea3282ebd0db0f6767ee7b6',
1278
- class: "relative flex items-center"
1279
- }, this.type === 'textarea' ? h("textarea", {
1280
- id: this.inputId || this.name,
1281
- name: this.name,
1282
- placeholder: this.placeholder,
1283
- value: this.innerVal.toString(),
1284
- required: this.required,
1285
- disabled: this.disabled,
1286
- class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`,
1287
- "aria-invalid": this.error ? 'true' : 'false',
1288
- "aria-describedby": describedBy,
1289
- maxlength: this.maxLength,
1290
- onInput: this.handleInput,
1291
- onChange: this.handleInput
1292
- }) : this.type === 'select' ? h("select", {
1293
- id: this.inputId || this.name,
1294
- name: this.name,
1295
- required: this.required,
1296
- disabled: this.disabled,
1297
- class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`,
1298
- "aria-invalid": this.error ? 'true' : 'false',
1299
- "aria-describedby": describedBy,
1300
- onInput: this.handleInput,
1301
- onChange: this.handleInput
1302
- }, this.options.map(option => h("option", {
1303
- value: option.value,
1304
- selected: option.value === this.innerVal,
1305
- key: option.value
1306
- }, option.label))) : h("input", Object.assign({
1307
- id: this.inputId || this.name,
1308
- name: this.name,
1309
- placeholder: this.placeholder,
1310
- value: this.innerVal.toString(),
1311
- required: this.required,
1312
- disabled: this.disabled,
1313
- type: this.type,
1314
- checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined
1315
- }, this.type === 'number' ? {
1316
- min: this.min,
1317
- max: this.max,
1318
- step: this.step
1319
- } : {}, {
1320
- class: `
1321
- ${this.extraClass || ''}
1322
- input ${this.type === 'radio' ? 'input-radio' : this.type === 'checkbox' ? 'input-checkbox' : ''}
1323
- ${withIcon && this.type !== 'radio' && this.type !== 'checkbox' ? 'input-icon pl-36' : ''}
1324
- ${this.error ? 'input-error' : ''}
1325
- `,
1326
- "aria-invalid": this.error ? 'true' : 'false',
1327
- "aria-describedby": describedBy,
1328
- maxlength: this.maxLength,
1329
- onInput: this.handleInput,
1330
- onChange: this.handleInput
1331
- })), this.maxLength && this.type === 'textarea' && h("span", {
1332
- key: '0391698008d36d0726ca52f9f5e3ad21136a9edb',
1333
- class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}`
1334
- }, this.maxLength), this.icon && h("eds-icon-wrapper", {
1335
- key: 'dd4d8a5e02dd2557deef5441cbe29afdbea8a959',
1336
- class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`,
1337
- icon: this.icon
1338
- }));
1339
- }
1340
- get el() {
1341
- return getElement(this);
1342
- }
1343
- static get watchers() {
1344
- return {
1345
- "value": ["onValueChanged"]
1346
- };
1347
- }
1348
- };
1349
- 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";
1350
- const EdsInputFieldStyle0 = edsInputFieldCss;
1351
- const EdsInputField = class {
1352
- constructor(hostRef) {
1353
- registerInstance(this, hostRef);
1354
- this.edsinput = createEvent(this, "edsinput", 7);
1355
- this.edschange = createEvent(this, "edschange", 7);
1356
- this.handleNativeInput = ev => {
1357
- var _a, _b;
1358
- (_a = this.onInput) === null || _a === void 0 ? void 0 : _a.call(this, ev);
1359
- if (this.shouldEmitValue()) {
1360
- const target = ev.target;
1361
- let value = target.value;
1362
- if (this.type === 'checkbox' && ((_b = this.parsedOptions) === null || _b === void 0 ? void 0 : _b.length) > 0) {
1363
- // checkbox group case
1364
- const checkboxes = this.hostEl.querySelectorAll(`input[type="checkbox"][name="${this.name}"]`);
1365
- value = Array.from(checkboxes).filter(cb => cb.checked).map(cb => cb.value);
1366
- } else if (this.type === 'checkbox') {
1367
- value = target.checked;
1368
- } else if (this.type === 'radio') {
1369
- value = target.value;
1370
- } else {
1371
- value = target.value;
1372
- }
1373
- this.edsinput.emit({
1374
- value
1375
- });
1376
- }
1377
- };
1378
- this.handleNativeChange = ev => {
1379
- var _a, _b;
1380
- (_a = this.onChangeNative) === null || _a === void 0 ? void 0 : _a.call(this, ev);
1381
- if (this.shouldEmitValue()) {
1382
- const target = ev.target;
1383
- let value = target.value;
1384
- if (this.type === 'checkbox' && ((_b = this.parsedOptions) === null || _b === void 0 ? void 0 : _b.length) > 0) {
1385
- // checkbox group case
1386
- const checkboxes = this.hostEl.querySelectorAll(`input[type="checkbox"][name="${this.name}"]`);
1387
- value = Array.from(checkboxes).filter(cb => cb.checked).map(cb => cb.value);
1388
- } else if (this.type === 'checkbox') {
1389
- value = target.checked;
1390
- } else if (this.type === 'radio') {
1391
- value = target.value;
1392
- } else {
1393
- value = target.value;
1394
- }
1395
- this.edschange.emit({
1396
- value
1397
- });
1398
- }
1399
- };
1400
- this.name = undefined;
1401
- this.inputId = undefined;
1402
- this.placeholder = undefined;
1403
- this.disabled = false;
1404
- this.required = false;
1405
- this.label = undefined;
1406
- this.hint = undefined;
1407
- this.icon = undefined;
1408
- this.link = undefined;
1409
- this.message = undefined;
1410
- this.error = false;
1411
- this.checked = undefined;
1412
- this.errorMessage = undefined;
1413
- this.value = undefined;
1414
- this.maxLength = undefined;
1415
- this.min = undefined;
1416
- this.max = undefined;
1417
- this.step = undefined;
1418
- this.options = undefined;
1419
- this.type = 'text';
1420
- this.onChangeNative = undefined;
1421
- this.onInput = undefined;
1422
- this.exposeValueEvents = true;
1423
- }
1424
- shouldEmitValue() {
1425
- return this.exposeValueEvents && this.type !== 'password';
1426
- }
1427
- get parsedOptions() {
1428
- if (Array.isArray(this.options)) {
1429
- return this.options;
1430
- }
1431
- if (typeof this.options === 'string') {
1432
- try {
1433
- return JSON.parse(this.options);
1434
- } catch (_a) {
1435
- // eslint-disable-next-line
1436
- console.warn('Invalid options format');
1437
- return [];
1438
- }
1439
- }
1440
- return [];
1441
- }
1442
- render() {
1443
- const inputOpts = Object.assign({
1444
- name: this.name,
1445
- id: this.inputId,
1446
- placeholder: this.placeholder,
1447
- disabled: this.disabled,
1448
- onInput: this.handleNativeInput,
1449
- onChange: this.handleNativeChange,
1450
- type: this.type,
1451
- required: this.required,
1452
- value: this.value,
1453
- error: this.error,
1454
- icon: this.icon,
1455
- checked: this.checked
1456
- }, this.type === 'number' ? {
1457
- min: this.min,
1458
- max: this.max,
1459
- step: this.step
1460
- } : {});
1461
- return h("div", {
1462
- key: 'bf31e95b0fad54062686ae178af0d6b552d04654'
1463
- }, this.type === 'checkbox' || this.type === 'radio' ? this.parsedOptions.length > 0 ? h("fieldset", {
1464
- class: "space-y-4 mt-8"
1465
- }, h("div", {
1466
- class: "flex justify-between"
1467
- }, this.label && h("eds-input-label", {
1468
- name: this.inputId || this.name,
1469
- label: this.label,
1470
- required: this.required
1471
- }), this.hint && h("p", {
1472
- id: `${this.name}-hint`,
1473
- class: "f-ui-05 text-lighter mt-8 ml-8"
1474
- }, this.hint)), this.parsedOptions.map(option => h("div", {
1475
- class: "flex items-center gap-x-4 gap-y-4",
1476
- key: option.value
1477
- }, h("eds-input", Object.assign({}, inputOpts, {
1478
- value: option.value,
1479
- checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value))
1480
- })), h("label", {
1481
- htmlFor: this.name,
1482
- class: `input-label-options ${this.disabled ? 'text-lighter' : ''}`
1483
- }, option.label)))) : h("div", {
1484
- class: "flex items-center gap-x-8"
1485
- }, h("eds-input", Object.assign({}, inputOpts, {
1486
- value: this.value,
1487
- checked: this.value === 'on' || this.checked
1488
- })), this.label && h("eds-input-label", {
1489
- name: this.inputId || this.name,
1490
- label: this.label,
1491
- disabled: this.disabled,
1492
- required: this.required
1493
- })) : h("div", null, h("div", {
1494
- class: "flex justify-between"
1495
- }, this.label && h("eds-input-label", {
1496
- name: this.inputId || this.name,
1497
- label: this.label,
1498
- disabled: this.disabled,
1499
- required: this.required
1500
- }), this.hint && h("p", {
1501
- id: `${this.name}-hint`,
1502
- class: "f-ui-05 text-lighter mt-8 ml-8"
1503
- }, this.hint)), this.type === 'select' ? h("eds-input-select", Object.assign({}, inputOpts, {
1504
- options: this.parsedOptions
1505
- })) : this.type === 'file' ? h("input", {
1506
- type: "file",
1507
- id: this.inputId || this.name,
1508
- name: this.name,
1509
- onChange: this.onChangeNative,
1510
- disabled: this.disabled,
1511
- required: this.required
1512
- }) : this.type === 'search' ? h("eds-input-search", {
1513
- name: "search-box"
1514
- }) : this.type === 'range' ? (() => {
1515
- var _a, _b, _c;
1516
- const rangeProps = {
1517
- name: inputOpts.name,
1518
- inputId: inputOpts.id || inputOpts.name,
1519
- disabled: inputOpts.disabled,
1520
- required: inputOpts.required,
1521
- onInput: inputOpts.onInput,
1522
- onChange: inputOpts.onChange
1523
- };
1524
- const opt = this.parsedOptions;
1525
- const numberValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value || 0;
1526
- return h("eds-input-range", Object.assign({}, rangeProps, {
1527
- min: (_a = opt[0]) === null || _a === void 0 ? void 0 : _a.value,
1528
- max: (_b = opt[1]) === null || _b === void 0 ? void 0 : _b.value,
1529
- step: (_c = opt[2]) === null || _c === void 0 ? void 0 : _c.value,
1530
- value: numberValue
1531
- }));
1532
- })() : h("eds-input", Object.assign({}, inputOpts))), h("div", {
1533
- key: 'b47668a883a11da148a38a063ecf573e79a6d714',
1534
- class: "mt-6"
1535
- }, h("eds-input-footer", {
1536
- key: '2c25baf0474a573f143b17bcaa19826fdc94dd7f',
1537
- id: `${this.name}-footer`,
1538
- name: this.name,
1539
- message: this.message,
1540
- "error-message": this.errorMessage,
1541
- error: this.error,
1542
- link: this.link
1543
- })));
1544
- }
1545
- get hostEl() {
1546
- return getElement(this);
1547
- }
1548
- };
1549
- EdsInputField.style = EdsInputFieldStyle0;
1550
- 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}";
1551
- const EdsInputFooterStyle0 = edsInputFooterCss;
1552
- const EdsInputFooter = class {
1553
- constructor(hostRef) {
1554
- registerInstance(this, hostRef);
1555
- this.name = undefined;
1556
- this.errorMessage = undefined;
1557
- this.message = undefined;
1558
- this.error = false;
1559
- this.link = undefined;
1560
- }
1561
- render() {
1562
- return h("div", {
1563
- key: '08cb0dc972b0aee37260b5e606a4b162afa9100b'
1564
- }, this.error && this.errorMessage && h("div", {
1565
- key: '5346af03e591f3ca2338979dc74a0b65fe2f93ba',
1566
- id: `error_${this.name}`,
1567
- class: "text-error flex items-center"
1568
- }, h("eds-icon-wrapper", {
1569
- key: '072103ec3061a16992672ee92d20249dc1704e0e',
1570
- icon: "warning"
1571
- }), h("p", {
1572
- key: '19f62274acb91ca32e5f9ee7247b27d5a63a95b7',
1573
- class: "f-ui-04 ml-4 mb-4",
1574
- innerHTML: this.errorMessage
1575
- })), this.message && h("p", {
1576
- key: 'e6c97c6dca2c5a7a1e62f56f2d74560861399553',
1577
- id: `desc_${this.name}`,
1578
- class: "f-ui-05 text-lighter",
1579
- innerHTML: this.message
1580
- }), this.link && h("a", {
1581
- key: '528475a848b5fada0acc47dc4aa2e03b0b6e1872',
1582
- href: this.link.url,
1583
- class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4"
1584
- }, this.link.label));
1585
- }
1586
- };
1587
- EdsInputFooter.style = EdsInputFooterStyle0;
1588
- 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}";
1589
- const EdsInputLabelStyle0 = edsInputLabelCss;
1590
- const EdsInputLabel = class {
1591
- constructor(hostRef) {
1592
- registerInstance(this, hostRef);
1593
- this.label = undefined;
1594
- this.name = undefined;
1595
- this.required = false;
1596
- this.disabled = false;
1597
- }
1598
- render() {
1599
- return h("label", {
1600
- key: 'a5ecc454f7d0398d8bf265fb36ac903af4b15c4a',
1601
- htmlFor: this.name,
1602
- class: `input-label ${this.disabled ? 'text-lighter' : ''}`
1603
- }, this.label, this.required && h("span", {
1604
- key: 'f6b710dcfe91623d048a95853097f963510ebb13'
1605
- }, h("span", {
1606
- key: 'e903f319f01b3592ca2ea8bbd5dbf83765942603',
1607
- "aria-hidden": "true"
1608
- }, "*"), h("span", {
1609
- key: '4548229f02d0753855a0b58944e89ff4fe40665a',
1610
- class: "sr-only"
1611
- }, "required")));
1612
- }
1613
- };
1614
- EdsInputLabel.style = EdsInputLabelStyle0;
1615
- const EdsInputRange = class {
1616
- constructor(hostRef) {
1617
- registerInstance(this, hostRef);
1618
- this.edsrange = createEvent(this, "edsrange", 7);
1619
- this.onInput = e => {
1620
- const target = e.target;
1621
- this.sliderVal = parseInt(target.value, 10); // Update the slider value dynamically
1622
- };
1623
- this.onChange = e => {
1624
- const target = e.target;
1625
- this.sliderVal = parseInt(target.value, 10); // Update the slider value dynamically
1626
- this.edsrange.emit(this.sliderVal);
1627
- };
1628
- this.name = undefined;
1629
- this.inputId = 'range';
1630
- this.disabled = false;
1631
- this.required = false;
1632
- this.min = 0;
1633
- this.max = 100;
1634
- this.step = 1;
1635
- this.value = undefined;
1636
- this.sliderVal = undefined;
1637
- }
1638
- componentWillLoad() {
1639
- this.sliderVal = this.value !== undefined ? this.value : this.max % 2 === 0 ? this.max / 2 : Math.ceil(this.max / 2);
1640
- }
1641
- // Keep the internal state in sync when the passed value changes.
1642
- onValueChange(newVal) {
1643
- if (newVal !== undefined) {
1644
- this.sliderVal = newVal;
1645
- }
1646
- }
1647
- componentDidLoad() {
1648
- // Assign the native input element after the component loads
1649
- this.inputElement = this.el.querySelector('input');
1650
- }
1651
- async getInputElement() {
1652
- // Return the native input element
1653
- return this.inputElement;
1654
- }
1655
- render() {
1656
- return h("div", {
1657
- key: 'd17d2e14f9c851c2c4b003ac36bae62240bc16d0',
1658
- class: "relative flex flex-col items-start space-y-2"
1659
- }, h("input", {
1660
- key: 'dccfa98f53c6283a09de624f32cc34aea2fafbfa',
1661
- id: this.inputId || this.name,
1662
- name: this.name,
1663
- min: this.min,
1664
- max: this.max,
1665
- step: this.step,
1666
- value: this.sliderVal,
1667
- required: this.required,
1668
- disabled: this.disabled,
1669
- type: "range",
1670
- class: "w-full py-6 input",
1671
- "aria-describedby": `desc_${this.name}`,
1672
- "aria-valuemin": this.min,
1673
- "aria-valuemax": this.max,
1674
- "aria-valuenow": this.sliderVal,
1675
- onInput: this.onInput,
1676
- onChange: this.onChange
1677
- }), h("p", {
1678
- key: '6064aa1f5bfbfc0e925dfec32ee727c5e530226a',
1679
- id: `desc_${this.name}`,
1680
- class: "block f-ui-05 text-lighter"
1681
- }, "Current value: ", this.sliderVal));
1682
- }
1683
- get el() {
1684
- return getElement(this);
1685
- }
1686
- static get watchers() {
1687
- return {
1688
- "value": ["onValueChange"]
1689
- };
1690
- }
1691
- };
1692
- const EdsInputSearch = class {
1693
- constructor(hostRef) {
1694
- registerInstance(this, hostRef);
1695
- this.search = createEvent(this, "search", 7);
1696
- /**
1697
- * Keydown event listener to detect Command+K (Mac) or Ctrl+K (Windows/Linux)
1698
- * and focus the input element when triggered.
1699
- *
1700
- * @param e - The keyboard event.
1701
- */
1702
- this.keydownListener = e => {
1703
- // Check for Command+K (Mac) or Ctrl+K (Windows/Linux)
1704
- if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
1705
- e.preventDefault();
1706
- // Focus the input if it's available and not disabled
1707
- if (this.inputElement && !this.disabled) {
1708
- this.inputElement.focus();
1709
- }
1710
- }
1711
- };
1712
- /*onInput = (e: any) => {
1713
- // eslint-disable-next-line
1714
- console.log('on input:', e);
1715
- };*/
1716
- this.onChange = e => {
1717
- // eslint-disable-next-line
1718
- this.search.emit({
1719
- event: 'change',
1720
- value: e.target.value
1721
- });
1722
- sendAnalytics({
1723
- category: 'ui-component',
1724
- parentContext: null,
1725
- tag: this.el.tagName.toLowerCase(),
1726
- name: e.target.value || '',
1727
- action: 'search'
1728
- });
1729
- };
1730
- this.name = undefined;
1731
- this.inputId = 'search-main';
1732
- this.placeholder = 'Search...';
1733
- this.value = undefined;
1734
- this.disabled = false;
1735
- this.required = false;
1736
- this.decorate = undefined;
1737
- this.label = 'Search';
1738
- }
1739
- componentDidLoad() {
1740
- // Assign the native input element after the component loads
1741
- this.inputElement = this.el.querySelector('input');
1742
- document.addEventListener('keydown', this.keydownListener);
1743
- }
1744
- disconnectedCallback() {
1745
- // Clean up the event listener when the component is removed
1746
- document.removeEventListener('keydown', this.keydownListener);
1747
- }
1748
- async getInputElement() {
1749
- // Return the native input element
1750
- return this.inputElement;
1751
- }
1752
- render() {
1753
- return h("div", {
1754
- key: '1084e1dad411bccc4b89fb61be91fbdaefedbe16',
1755
- class: "relative flex items-center"
1756
- }, h("eds-icon-wrapper", {
1757
- key: 'eaca5c71cf018cd95ba6debddcbbfa1457a32584',
1758
- icon: "search",
1759
- class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest",
1760
- "aria-hidden": "true"
1761
- }), h("input", {
1762
- key: 'e0e888a6518abfb5f5b2a50fb89e2cec4c7ca78c',
1763
- id: this.inputId || this.name,
1764
- name: this.name,
1765
- placeholder: this.placeholder,
1766
- value: this.value || '',
1767
- required: this.required,
1768
- disabled: this.disabled,
1769
- type: "search",
1770
- "aria-label": this.placeholder,
1771
- class: `input pl-36 ${this.decorate}`,
1772
- //onInput={this.onInput}
1773
- onChange: this.onChange
1774
- }));
1775
- }
1776
- get el() {
1777
- return getElement(this);
1778
- }
1779
- };
1780
- const EdsInputSelect = class {
1781
- constructor(hostRef) {
1782
- registerInstance(this, hostRef);
1783
- this.edsselect = createEvent(this, "edsselect", 7);
1784
- this.handleChange = event => {
1785
- const target = event.target;
1786
- this.edsselect.emit(target.value);
1787
- };
1788
- this.inputId = undefined;
1789
- this.name = undefined;
1790
- this.placeholder = undefined;
1791
- this.disabled = false;
1792
- this.hasMessage = false;
1793
- this.error = false;
1794
- this.required = false;
1795
- this.options = [];
1796
- this.value = undefined;
1797
- }
1798
- render() {
1799
- const selectId = this.inputId || this.name;
1800
- const placeholderText = this.placeholder || `Pick from the list`;
1801
- const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
1802
- return h("div", {
1803
- key: '8b02195c9cb94edae54d0eaeffc1d5985638e705',
1804
- class: "relative"
1805
- }, h("select", {
1806
- key: 'ab86f95d44a22492309e39ea4ed299c7da5460f7',
1807
- id: selectId,
1808
- name: this.name,
1809
- class: {
1810
- input: true,
1811
- 'input-error': this.error,
1812
- 'px-4': true,
1813
- 'py-2': true
1814
- },
1815
- "aria-invalid": this.error ? 'true' : 'false',
1816
- "aria-describedby": describedBy,
1817
- disabled: this.disabled,
1818
- required: this.required,
1819
- onChange: this.handleChange
1820
- }, h("option", {
1821
- key: '285f9e5be9f469b21fa13c869e998fdaea4e33ad',
1822
- value: "",
1823
- disabled: true,
1824
- hidden: true
1825
- }, placeholderText), this.options.map((opt, index) => h("option", {
1826
- key: index,
1827
- value: opt.value,
1828
- selected: opt.value === this.value
1829
- }, opt.label))), h("span", {
1830
- key: '0fced74f55c6da75e7f1aa3251fa59e8147e666f',
1831
- class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center"
1832
- }, h("eds-icon-wrapper", {
1833
- key: '70e964580e89d001eb3537038f4e6a28ecba5840',
1834
- class: "w-20 h-20",
1835
- icon: "chevron-right"
1836
- })));
1837
- }
1838
- };
1839
- 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}";
1840
- const EdsLinkStyle0 = edsLinkCss;
1841
-
1842
- // Define the CVA for link styles
1843
- 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'], {
1844
- variants: {
1845
- intent: {
1846
- primary: ['border-inside bg-accent hover:bg-accent-dark', 'shadow-accent focus:shadow-none aria-disabled:shadow-none'],
1847
- secondary: ['border-inside border-inside-inverse bg-strongest hover:bg-strong-dark text-inverse'],
1848
- tertiary: 'border-inside after:border-softest bg-dark hover:bg-darker',
1849
- ghost: ['border-inside hover:bg-darker'],
1850
- 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'
1851
- // aria-disabled:line-through
1852
- ],
1853
- 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'
1854
- // aria-disabled:line-through
1855
- ],
1856
- 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'
1857
- // aria-disabled:line-through
1858
- ],
1859
- 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'
1860
- //aria-disabled:line-through
1861
- ],
1862
- underline: ['decoration-accent underline underline-offset-4 !px-0 !py-0', 'hover:no-underline effect-focus focus-visible:rounded-xs !min-h-0']
1863
- },
1864
- iconSmall: {
1865
- true: '',
1866
- false: ''
1867
- },
1868
- isActive: {
1869
- true: '',
1870
- false: ''
1871
- },
1872
- hasIcon: {
1873
- true: '',
1874
- false: ''
1875
- },
1876
- size: {
1877
- underline: 'f-body-02 ',
1878
- small: 'min-h-36 f-ui-02 px-12',
1879
- large: 'min-h-44 f-ui-01 px-16'
1880
- }
1881
- },
1882
- compoundVariants: [{
1883
- iconSmall: true,
1884
- size: 'small',
1885
- class: 'pr-4'
1886
- }, {
1887
- iconSmall: true,
1888
- size: 'large',
1889
- class: 'pr-8'
1890
- }, {
1891
- intent: 'blueish',
1892
- hasIcon: true,
1893
- class: '-mr-4 -top-1'
1894
- }, {
1895
- intent: 'underline',
1896
- hasIcon: true,
1897
- class: '-mr-4 -top-1'
1898
- },
1899
- // Active state
1900
- {
1901
- intent: 'primary',
1902
- isActive: true,
1903
- class: '!bg-accent-dark'
1904
- }, {
1905
- intent: 'secondary',
1906
- isActive: true,
1907
- class: '!bg-strong-dark'
1908
- }, {
1909
- intent: 'tertiary',
1910
- isActive: true,
1911
- class: '!bg-darker'
1912
- }, {
1913
- intent: 'ghost',
1914
- isActive: true,
1915
- class: '!bg-darker'
1916
- }, {
1917
- intent: 'strong',
1918
- isActive: true,
1919
- class: 'before:!opacity-100'
1920
- }, {
1921
- intent: 'weak',
1922
- isActive: true,
1923
- class: 'before:!opacity-100'
1924
- }, {
1925
- intent: 'inverse',
1926
- isActive: true,
1927
- class: 'before:!opacity-100'
1928
- }],
1929
- defaultVariants: {
1930
- //intent: 'primary',
1931
- isActive: false,
1932
- iconSmall: false,
1933
- size: 'small',
1934
- hasIcon: false
1935
- }
1936
- });
1937
- const EdsLink = class {
1938
- constructor(hostRef) {
1939
- registerInstance(this, hostRef);
1940
- this.parentContext = null; // Accepts the entire event detail or null
1941
- this.label = undefined;
1942
- this.intent = undefined;
1943
- this.icon = undefined;
1944
- this.iconPos = 'right';
1945
- this.iconSmall = false;
1946
- this.size = 'small';
1947
- this.external = false;
1948
- this.current = false;
1949
- this.download = false;
1950
- this.url = undefined;
1951
- this.ariaLabel = undefined;
1952
- this.disabled = false;
1953
- this.hideLabelOnSmallScreen = false;
1954
- this.extraClass = undefined;
1955
- }
1956
- handleParentContext(event) {
1957
- if (event.target !== this.el) {
1958
- // Ignore the event if it's not targeted at this specific instance
1959
- return;
1960
- }
1961
- this.parentContext = event.detail;
1962
- event.stopPropagation();
1963
- }
1964
- handleClick(event) {
1965
- var _a, _b;
1966
- if (this.disabled) {
1967
- // Prevent navigation if the link is disabled
1968
- event.preventDefault();
1969
- return;
1970
- }
1971
- sendAnalytics({
1972
- category: 'ui-component',
1973
- parentContext: this.parentContext,
1974
- tag: this.el.tagName.toLowerCase(),
1975
- name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || ((_b = this.ariaLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '',
1976
- action: 'click'
1977
- });
1978
- }
1979
- getLinkSize() {
1980
- return this.size;
1981
- }
1982
- renderLeftIcon() {
1983
- if (this.icon && this.iconPos === 'left') {
1984
- return h("span", {
1985
- class: !this.external && !this.label ? '' : 'flex'
1986
- }, h("eds-icon-wrapper", {
1987
- class: `
1988
- flex inline-flex items-center justify-center
1989
- ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
1990
- `,
1991
- icon: this.icon
1992
- }));
1993
- }
1994
- return null;
1995
- }
1996
- renderRightIcon() {
1997
- if (this.icon && this.iconPos === 'right') {
1998
- return h("span", {
1999
- class: !this.external && !this.label ? '' : 'flex'
2000
- }, h("eds-icon-wrapper", {
2001
- class: `
2002
- flex inline-flex items-center justify-center
2003
- ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
2004
- `,
2005
- icon: this.icon
2006
- }));
2007
- }
2008
- return null;
2009
- }
2010
- render() {
2011
- // If the link is disabled, use a <span>; otherwise, use an <a> element.
2012
- const ComponentType = this.disabled ? 'span' : 'a';
2013
- const classes = linkStyles({
2014
- intent: this.intent,
2015
- size: this.getLinkSize(),
2016
- iconSmall: this.iconSmall,
2017
- isActive: this.current,
2018
- hasIcon: !!this.icon
2019
- });
2020
- // If no visible label is provided, ensure ariaLabel is set.
2021
- const computedAriaLabel = this.ariaLabel || this.label || 'link';
2022
- const labelClasses = this.hideLabelOnSmallScreen ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
2023
- : '';
2024
- return h(ComponentType, {
2025
- key: '19e7d05290f3dda2cc4e821c5625f7dd82198dcd',
2026
- class: `${classes || ''} ${this.extraClass || ''}`,
2027
- href: !this.disabled ? this.url : undefined,
2028
- target: this.external && !this.disabled ? '_blank' : undefined,
2029
- rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined,
2030
- "aria-label": computedAriaLabel,
2031
- "aria-disabled": this.disabled ? 'true' : null,
2032
- "aria-current": this.current ? 'page' : undefined,
2033
- download: this.download ? '' : undefined,
2034
- onClick: event => this.handleClick(event)
2035
- }, h("span", {
2036
- key: '36ce6891c07cf6e37acef3e6fecd3e96bcaa0312',
2037
- class: "z-1 relative inline-flex items-center justify-center"
2038
- }, this.renderLeftIcon(), h("span", {
2039
- key: '2455011e19a98939aec59768f09ae310ad03692b',
2040
- class: labelClasses
2041
- }, this.label), this.renderRightIcon()));
2042
- }
2043
- get el() {
2044
- return getElement(this);
2045
- }
2046
- };
2047
- EdsLink.style = EdsLinkStyle0;
2048
- 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}}";
2049
- const EdsLogoStyle0 = edsLogoCss;
2050
- const EdsLogo = class {
2051
- constructor(hostRef) {
2052
- registerInstance(this, hostRef);
2053
- this.href = '/';
2054
- this.orientation = 'horizontal';
2055
- this.type = undefined;
2056
- this.label = 'Home';
2057
- }
2058
- /**
2059
- * Handles the click event on the logo link.
2060
- * Emits a `matomoEvent` for analytics tracking with details about the interaction.
2061
- * - `category`: Component type (e.g., "ui-component").
2062
- * - `tag`: The HTML tag name of the component.
2063
- * - `name`: Event name, set as "logo".
2064
- * - `action`: The action, set as "click".
2065
- */
2066
- handleClick() {
2067
- sendAnalytics({
2068
- category: 'ui-component',
2069
- tag: this.el.tagName.toLowerCase(),
2070
- name: 'logo',
2071
- action: 'click'
2072
- });
2073
- }
2074
- /**
2075
- * Determines the appropriate SVG content based on the `orientation` and `type` props.
2076
- */
2077
- getLogo() {
2078
- const logos = {
2079
- horizontal: {
2080
- color: hLogoColor,
2081
- black: hLogoBlack,
2082
- 'color-white': hLogoColorWhite,
2083
- white: hLogoWhite,
2084
- 'no-bg': hLogoWhiteNoBg
2085
- },
2086
- vertical: {
2087
- color: vLogoColor,
2088
- black: vLogoBlack,
2089
- 'color-white': vLogoColorWhite,
2090
- white: vLogoWhite,
2091
- 'no-bg': vLogoWhiteNoBg
2092
- }
2093
- };
2094
- // Validate the orientation and type
2095
- const validOrientation = logos[this.orientation];
2096
- if (!validOrientation) {
2097
- //console.error(`Invalid orientation "${this.orientation}". Falling back to "horizontal".`);
2098
- return hLogoColor; // Default fallback logo
2099
- }
2100
- const validLogo = validOrientation[this.type];
2101
- if (!validLogo) {
2102
- //console.error(`Invalid type "${this.type}" for orientation "${this.orientation}". Falling back to "color".`);
2103
- return validOrientation['color']; // Fallback to color logo
2104
- }
2105
- return validLogo;
2106
- }
2107
- render() {
2108
- const logoContent = this.getLogo();
2109
- return h("a", {
2110
- key: '717ea23a3d9156fd59abb808c3175194b6973d6b',
2111
- href: this.href,
2112
- onClick: () => this.handleClick(),
2113
- class: "eds-logo-wrapper",
2114
- "aria-label": this.label
2115
- }, h("div", {
2116
- key: '794768d57ee14767a0475d949c24fafaa28bc924',
2117
- innerHTML: logoContent
2118
- }));
2119
- }
2120
- get el() {
2121
- return getElement(this);
2122
- }
2123
- };
2124
- EdsLogo.style = EdsLogoStyle0;
2125
- 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-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}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
2126
- const EdsPaginationStyle0 = edsPaginationCss;
2127
- const EdsPagination = class {
2128
- constructor(hostRef) {
2129
- registerInstance(this, hostRef);
2130
- this.currentPage = undefined;
2131
- this.lastPage = undefined;
2132
- this.perPage = 10;
2133
- this.total = 0;
2134
- this.url = '';
2135
- this.mode = 'default';
2136
- this.prevLabel = 'Prev';
2137
- this.nextLabel = 'Next';
2138
- this.prevUrl = '';
2139
- this.nextUrl = '';
2140
- this.links = [];
2141
- }
2142
- /** Lifecycle hook to generate pagination links on component load */
2143
- componentWillLoad() {
2144
- if (this.mode === 'default') {
2145
- this.generateLinks();
2146
- }
2147
- }
2148
- componentDidLoad() {
2149
- // Emit context for each eds-link element after the component is fully loaded
2150
- const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
2151
- links.forEach(lnk => {
2152
- this.emitContext(lnk);
2153
- });
2154
- /*if (links.length > 0) {
2155
- // Emit context for the first link
2156
- this.emitContext(links[0]);
2157
- // Emit context for the last link, if it's different from the first
2158
- if (links.length > 1) {
2159
- this.emitContext(links[links.length - 1]);
2160
- }
2161
- }*/
2162
- }
2163
- /**
2164
- * Emits a custom event called `parentContext` for a given link element.
2165
- * This event provides context information about the breadcrumb component.
2166
- *
2167
- * @param linkElement - The link element to which the event will be dispatched.
2168
- */
2169
- emitContext(linkElement) {
2170
- const event = new CustomEvent('parentContext', {
2171
- detail: {
2172
- componentName: this.hostEl.tagName.toLowerCase(),
2173
- identifier: null
2174
- }
2175
- });
2176
- linkElement.dispatchEvent(event);
2177
- }
2178
- onPageOrLastPageChange() {
2179
- if (this.mode === 'default') {
2180
- this.generateLinks();
2181
- }
2182
- }
2183
- /**
2184
- * Checks if the current page is the first page
2185
- * @returns {boolean} - true if current page is the first page
2186
- */
2187
- isFirstPage() {
2188
- return this.currentPage === 1;
2189
- }
2190
- /**
2191
- * Checks if the current page is the last page
2192
- * @returns {boolean} - true if current page is the last page
2193
- */
2194
- isLastPage() {
2195
- return this.currentPage === this.lastPage;
2196
- }
2197
- /**
2198
- * Generates a pagination link object
2199
- * @param {number} page - Page number for the link
2200
- * @returns {Link} - Link object with page details
2201
- */
2202
- generateLink(page) {
2203
- const urlHasQuery = this.url.includes('?');
2204
- return {
2205
- ariaLabel: `Page ${page}`,
2206
- url: `${this.url}${urlHasQuery ? '&' : '?'}page=${page}`,
2207
- label: page.toString(),
2208
- current: this.currentPage === page,
2209
- disabled: false
2210
- };
2211
- }
2212
- /** Generates pagination links based on the last page and current page */
2213
- generateLinks() {
2214
- if (this.lastPage && this.lastPage > 5) {
2215
- this.links = this.getPaginationGenerator(this.currentPage || 1, this.lastPage).map(page => typeof page === 'number' ? this.generateLink(page) : page);
2216
- } else if (this.lastPage) {
2217
- this.links = Array.from({
2218
- length: this.lastPage
2219
- }).map((_, i) => this.generateLink(i + 1));
2220
- }
2221
- }
2222
- /**
2223
- * Creates a pagination range based on delta, current, and total pages
2224
- * @param {number} current - Current page number
2225
- * @param {number} total - Total number of pages
2226
- * @param {number} delta - Range of pages to display around the current page
2227
- * @returns {(number | string)[]} - Range of page numbers or ellipses
2228
- */
2229
- getPaginationGenerator(current, total) {
2230
- const delta = 1; // Show one page before and one after the current page
2231
- const range = [];
2232
- if (total <= 5) {
2233
- // If total pages are 5 or less, show all pages
2234
- for (let i = 1; i <= total; i++) {
2235
- range.push(i);
2236
- }
2237
- } else {
2238
- // Always show the first page
2239
- range.push(1);
2240
- // Add ellipsis if there’s a gap between the first page and the current range start
2241
- if (current - delta > 2) {
2242
- range.push('...');
2243
- }
2244
- // Determine range for pages around the current page
2245
- for (let i = Math.max(2, current - delta); i <= Math.min(total - 1, current + delta); i++) {
2246
- range.push(i);
2247
- }
2248
- // Add ellipsis if there’s a gap between the current range end and the last page
2249
- if (current + delta < total - 1) {
2250
- range.push('...');
2251
- }
2252
- // Always show the last page
2253
- range.push(total);
2254
- }
2255
- return range;
2256
- }
2257
- /**
2258
- * Formats the current page results information for display
2259
- * @returns {string} - Formatted page result information
2260
- */
2261
- pageResults() {
2262
- if (this.total > 0) {
2263
- return this.total > this.perPage ? `${this.perPage * ((this.currentPage || 1) - 1) + 1} - ${this.perPage * (this.currentPage || 1) >= this.total ? this.total : this.perPage * (this.currentPage || 1)} of ${this.total}` : `${this.total}`;
2264
- }
2265
- return '';
2266
- }
2267
- /**
2268
- * Handles a page click event, updating the current page and dispatching an event
2269
- * @param {MouseEvent} event - Click event
2270
- * @param {number} newPage - New page number
2271
- */
2272
- handlePageClick(event, newPage) {
2273
- if (this.mode === 'navigator') {
2274
- return; // No page clicking logic for navigator mode
2275
- }
2276
- event.preventDefault(); // Prevent default link navigation
2277
- if (newPage !== this.currentPage) {
2278
- this.links = this.links.map(link => typeof link === 'object' ? Object.assign(Object.assign({}, link), {
2279
- current: parseInt(link.label) === newPage
2280
- }) : link);
2281
- const pageChangeEvent = new CustomEvent('page', {
2282
- detail: newPage,
2283
- bubbles: true,
2284
- composed: true
2285
- });
2286
- this.hostEl.dispatchEvent(pageChangeEvent);
2287
- this.currentPage = newPage;
2288
- }
2289
- }
2290
- render() {
2291
- return h("div", {
2292
- key: '978896bd8c550afdc30281e1a8d9858022857551'
2293
- }, this.total > 0 && this.mode === 'default' && h("p", {
2294
- key: '10781adbf2c4754580c31eecc180fc426b5e09a1',
2295
- class: "f-ui-03 text-lightest mb-28 w-full text-center"
2296
- }, h("span", {
2297
- key: '29765740419772ac83736495c859d2d75097904c',
2298
- class: "sr-only"
2299
- }, "Results:"), this.pageResults()), this.mode === 'navigator' || this.lastPage && this.lastPage > 1 ? h("nav", {
2300
- "aria-label": "Pagination"
2301
- }, h("ul", {
2302
- class: "flex items-center justify-center gap-x-8"
2303
- }, h("li", {
2304
- class: "mr-auto"
2305
- }, h("eds-link", {
2306
- label: this.prevLabel,
2307
- url: this.mode === 'navigator' ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
2308
- : this.isFirstPage() ? '#' : this.generateLink(this.currentPage - 1).url,
2309
- disabled: this.mode === 'navigator' ? !this.prevUrl // Disable if prevUrl is not provided
2310
- : this.isFirstPage(),
2311
- "aria-label": "Previous page",
2312
- icon: "chevron-left",
2313
- "icon-pos": "left",
2314
- size: "small",
2315
- "icon-small": "true",
2316
- intent: "strong",
2317
- "hide-label-on-small-screen": true,
2318
- class: "!p-8 lg:!pr-12",
2319
- onClick: event => {
2320
- if (this.mode === 'default') {
2321
- if (this.isFirstPage()) {
2322
- event.preventDefault(); // Prevent click if disabled
2323
- } else {
2324
- this.handlePageClick(event, (this.currentPage || 1) - 1);
2325
- }
2326
- }
2327
- }
2328
- })), this.mode === 'default' && this.links.map((link, index) => h("li", {
2329
- key: index,
2330
- class: "f-ui-02 flex h-36 items-center justify-center"
2331
- }, typeof link === 'string' ? h("span", {
2332
- class: "flex items-center justify-center"
2333
- }, link) : h("eds-link", {
2334
- url: link.url,
2335
- "aria-label": link.ariaLabel,
2336
- label: link.label,
2337
- current: link.current,
2338
- size: "small",
2339
- class: "!p-8",
2340
- intent: link.current ? 'secondary' : 'ghost',
2341
- onClick: event => this.handlePageClick(event, parseInt(link.label))
2342
- }))), h("li", {
2343
- class: "ml-auto"
2344
- }, h("eds-link", {
2345
- label: this.nextLabel,
2346
- url: this.mode === 'navigator' ? this.nextUrl || '#' // Use nextUrl if provided, otherwise disable with '#'
2347
- : this.isLastPage() ? '#' : this.generateLink(this.currentPage + 1).url,
2348
- disabled: this.mode === 'navigator' ? !this.nextUrl // Disable if nextUrl is not provided
2349
- : this.isLastPage(),
2350
- "aria-label": "Next page",
2351
- size: "small",
2352
- "icon-small": "true",
2353
- icon: "chevron-right",
2354
- intent: "strong",
2355
- "hide-label-on-small-screen": true,
2356
- class: "!p-8 lg:!pl-12 flex items-center gap-1 py-4 transition-colors",
2357
- onClick: event => {
2358
- if (this.mode === 'default') {
2359
- if (this.isLastPage()) {
2360
- event.preventDefault(); // Prevent click if disabled
2361
- } else {
2362
- this.handlePageClick(event, (this.currentPage || 1) + 1);
2363
- }
2364
- }
2365
- }
2366
- })))) : null);
2367
- }
2368
- get hostEl() {
2369
- return getElement(this);
2370
- }
2371
- static get watchers() {
2372
- return {
2373
- "currentPage": ["onPageOrLastPageChange"],
2374
- "lastPage": ["onPageOrLastPageChange"]
2375
- };
2376
- }
2377
- };
2378
- EdsPagination.style = EdsPaginationStyle0;
2379
- 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)))}";
2380
- const EdsRatingStyle0 = edsRatingCss;
2381
- const EdsRating = class {
2382
- constructor(hostRef) {
2383
- registerInstance(this, hostRef);
2384
- this.rating = createEvent(this, "rating", 7);
2385
- this.ratingType = 'star';
2386
- this.ratingCount = 5;
2387
- this.selectedRating = 0;
2388
- }
2389
- /**
2390
- * Lifecycle method that runs when the component has fully loaded.
2391
- * It emits a custom event for each `eds-button` element contained within the breadcrumb.
2392
- */
2393
- componentDidLoad() {
2394
- const btns = this.el.shadowRoot.querySelectorAll('eds-button');
2395
- btns.forEach(btn => {
2396
- this.emitContext(btn);
2397
- });
2398
- }
2399
- /**
2400
- * Emits a custom event called `parentContext` for a given link element.
2401
- * This event provides context information about the breadcrumb component.
2402
- *
2403
- * @param btnElement - The link element to which the event will be dispatched.
2404
- */
2405
- emitContext(btnElement) {
2406
- const event = new CustomEvent('parentContext', {
2407
- detail: {
2408
- componentName: this.el.tagName.toLowerCase(),
2409
- identifier: this.selectedRating
2410
- }
2411
- });
2412
- btnElement.dispatchEvent(event);
2413
- }
2414
- /**
2415
- * Handles the click event on a star.
2416
- * @param rating - The selected rating value.
2417
- */
2418
- handleClick(rating) {
2419
- this.selectedRating = rating;
2420
- this.rating.emit(rating);
2421
- }
2422
- render() {
2423
- return h("div", {
2424
- key: '7f70d2d6691257ba0658ab9500ab7200af28366a',
2425
- role: "radiogroup",
2426
- class: "stars flex space-x-1 my-8"
2427
- }, Array.from({
2428
- length: this.ratingCount
2429
- }, (_, index) => {
2430
- const starRating = index + 1;
2431
- const isSelected = starRating <= this.selectedRating;
2432
- // Use the mapping text if available; otherwise, fall back to a generic label.
2433
- return h("eds-button", {
2434
- icon: this.ratingType,
2435
- role: "radio",
2436
- "aria-checked": isSelected ? 'true' : 'false',
2437
- "aria-label": this.ratingType,
2438
- onClick: () => this.handleClick(starRating),
2439
- tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1,
2440
- intent: isSelected ? 'primary' : 'ghost',
2441
- size: "large",
2442
- "extra-class": "p-2" // Optional padding or styling for the star button
2443
- });
2444
- }));
2445
- }
2446
- get el() {
2447
- return getElement(this);
2448
- }
2449
- };
2450
- EdsRating.style = EdsRatingStyle0;
2451
- const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;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;top:0;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{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{content:counter(step);position:absolute;left:-40px;top:0;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}.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)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-28{margin-bottom:1.75rem}";
2452
- const EdsStepsStyle0 = edsStepsCss;
2453
- const EdsSteps = class {
2454
- constructor(hostRef) {
2455
- registerInstance(this, hostRef);
2456
- this.step = createEvent(this, "step", 7);
2457
- this.handleNext = () => {
2458
- this.activeStep = this.activeStep + 1;
2459
- if (this.activeStep < this.parsedSteps.length) {
2460
- this.step.emit(this.activeStep);
2461
- }
2462
- };
2463
- this.handleBack = () => {
2464
- if (this.activeStep > 0) {
2465
- this.activeStep = this.activeStep - 1;
2466
- this.step.emit(this.activeStep);
2467
- }
2468
- };
2469
- this.steps = [];
2470
- this.type = 'static';
2471
- this.activeStep = 0;
2472
- }
2473
- /**
2474
- * Lifecycle method that runs when the component has fully loaded.
2475
- * It emits a custom event for each `eds-button` element contained within the breadcrumb.
2476
- */
2477
- componentDidLoad() {
2478
- var _a;
2479
- if (this.type === 'linear') {
2480
- const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
2481
- btns === null || btns === void 0 ? void 0 : btns.forEach(btn => {
2482
- this.emitContext(btn);
2483
- });
2484
- }
2485
- }
2486
- activeStepChanged(newValue) {
2487
- setTimeout(() => {
2488
- var _a;
2489
- const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
2490
- if (activeStepContainer) {
2491
- const btns = activeStepContainer.querySelectorAll('eds-button');
2492
- btns.forEach(btn => {
2493
- this.emitContext(btn);
2494
- });
2495
- }
2496
- }, 50);
2497
- }
2498
- /**
2499
- * Emits a custom event called `parentContext` for a given link element.
2500
- * This event provides context information about the breadcrumb component.
2501
- *
2502
- * @param linkElement - The link element to which the event will be dispatched.
2503
- */
2504
- emitContext(linkElement) {
2505
- const event = new CustomEvent('parentContext', {
2506
- detail: {
2507
- componentName: this.el.tagName.toLowerCase(),
2508
- identifier: this.activeStep
2509
- }
2510
- });
2511
- linkElement.dispatchEvent(event);
2512
- }
2513
- handleStepClick(index) {
2514
- this.step.emit(index);
2515
- // In linear mode, update the active step on header click.
2516
- if (this.type === 'linear') {
2517
- this.activeStep = index;
2518
- }
2519
- }
2520
- /**
2521
- * Parse the JSON string into an array of steps.
2522
- */
2523
- get parsedSteps() {
2524
- return parseData(this.steps);
2525
- }
2526
- render() {
2527
- const steps = this.parsedSteps;
2528
- if (this.type === 'linear') {
2529
- return h("div", null, h("div", {
2530
- class: "steps"
2531
- }, steps.map((step, index) => h("div", {
2532
- class: "step mb-28",
2533
- key: index
2534
- }, h("h3", {
2535
- onClick: () => this.handleStepClick(index)
2536
- }, step.title), this.activeStep === index && h("div", {
2537
- class: "content"
2538
- }, h("slot", {
2539
- name: `step-${index}`
2540
- }, h("div", {
2541
- class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16',
2542
- innerHTML: step.content
2543
- })), h("eds-button", {
2544
- label: index === steps.length - 1 ? 'Finish' : 'Continue',
2545
- intent: "primary",
2546
- class: "next-btn",
2547
- onClick: this.handleNext
2548
- }), h("eds-button", {
2549
- label: "Back",
2550
- intent: "ghostInverse",
2551
- onClick: this.handleBack,
2552
- disabled: index === 0,
2553
- "extra-class": index === 0 ? 'hidden' : 'ml-8 block'
2554
- }))))));
2555
- }
2556
- // Static mode: show all steps with their content, no navigation buttons.
2557
- return h("div", {
2558
- class: "steps"
2559
- }, steps.map((step, index) => h("div", {
2560
- class: "step mb-28",
2561
- key: index
2562
- }, h("h3", null, step.title), h("div", {
2563
- class: "content"
2564
- }, h("slot", {
2565
- name: `step-${index}`
2566
- }, h("div", {
2567
- class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16',
2568
- innerHTML: step.content
2569
- }))))));
2570
- }
2571
- get el() {
2572
- return getElement(this);
2573
- }
2574
- static get watchers() {
2575
- return {
2576
- "activeStep": ["activeStepChanged"]
2577
- };
2578
- }
2579
- };
2580
- EdsSteps.style = EdsStepsStyle0;
2581
- const edsStepsV2Css = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}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;top:0;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{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{content:counter(step);position:absolute;left:-40px;top:0;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)}.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}.mt-16{margin-top:1rem}.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))}";
2582
- const EdsStepsV2Style0 = edsStepsV2Css;
2583
- const EdsStepsV2 = class {
2584
- constructor(hostRef) {
2585
- registerInstance(this, hostRef);
2586
- this.step = createEvent(this, "step", 7);
2587
- this.handleNext = () => {
2588
- this.activeStep = this.activeStep + 1;
2589
- if (this.activeStep < this.parsedSteps.length) {
2590
- this.step.emit(this.activeStep);
2591
- }
2592
- };
2593
- this.handleBack = () => {
2594
- if (this.activeStep > 0) {
2595
- this.activeStep = this.activeStep - 1;
2596
- this.step.emit(this.activeStep);
2597
- }
2598
- };
2599
- this.steps = [];
2600
- this.type = 'static';
2601
- this.imageSrc = undefined;
2602
- this.imageWidth = undefined;
2603
- this.bg = true;
2604
- this.message = undefined;
2605
- this.activeStep = 0;
2606
- }
2607
- componentDidLoad() {
2608
- var _a;
2609
- if (this.type === 'linear') {
2610
- const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
2611
- btns === null || btns === void 0 ? void 0 : btns.forEach(btn => {
2612
- this.emitContext(btn);
2613
- });
2614
- }
2615
- }
2616
- activeStepChanged(newValue) {
2617
- setTimeout(() => {
2618
- var _a;
2619
- const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
2620
- if (activeStepContainer) {
2621
- const btns = activeStepContainer.querySelectorAll('eds-button');
2622
- btns.forEach(btn => {
2623
- this.emitContext(btn);
2624
- });
2625
- }
2626
- }, 50);
2627
- }
2628
- emitContext(linkElement) {
2629
- const event = new CustomEvent('parentContext', {
2630
- detail: {
2631
- componentName: this.el.tagName.toLowerCase(),
2632
- identifier: this.activeStep
2633
- }
2634
- });
2635
- linkElement.dispatchEvent(event);
2636
- }
2637
- articleClasses() {
2638
- return [this.bg ? 'bg-inverse' : 'bg-default', 'border-softer effect-focus-within relative rounded-lg border-2'].join(' ');
2639
- }
2640
- handleStepClick(index) {
2641
- this.step.emit(index);
2642
- // In linear mode, update the active step on header click.
2643
- if (this.type === 'linear') {
2644
- this.activeStep = index;
2645
- }
2646
- }
2647
- /**
2648
- * Parses the steps property into an array of Step objects.
2649
- */
2650
- get parsedSteps() {
2651
- return parseData(this.steps);
2652
- }
2653
- render() {
2654
- const steps = this.parsedSteps;
2655
- return h("div", {
2656
- key: 'bbcec2dd9a5096eb0cecf0d413892e5708822f52',
2657
- class: this.articleClasses()
2658
- }, this.imageSrc ? h("div", {
2659
- class: "w-full mb-12 rounded-t-lg overflow-hidden border-2"
2660
- }, h("eds-img", {
2661
- src: this.imageSrc,
2662
- width: this.imageWidth,
2663
- "with-bg": "true",
2664
- "lazy-load": "true",
2665
- alt: "Step illustration"
2666
- })) : this.message && h("div", {
2667
- class: "w-full bg-[#00A595] rounded-t-lg border-2"
2668
- }, h("div", {
2669
- class: "p-24"
2670
- }, h("span", {
2671
- class: "text-inverse f-heading-04 "
2672
- }, this.message))), h("div", {
2673
- key: 'db0618aad7d5986fcb0889f1c439be73f83a00df',
2674
- class: "p-8"
2675
- }, this.type === 'linear' ? h("div", {
2676
- class: "steps"
2677
- }, steps.map((step, index) => h("div", {
2678
- class: index === 0 ? 'step' : 'step space-y-16',
2679
- key: index
2680
- }, h("h3", {
2681
- onClick: () => this.handleStepClick(index)
2682
- }, step.title), this.activeStep === index && h("div", {
2683
- class: "content"
2684
- }, h("slot", {
2685
- name: `step-${index}`
2686
- }, h("div", {
2687
- class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16',
2688
- innerHTML: step.content
2689
- })), h("eds-button", {
2690
- label: index === steps.length - 1 ? 'Finish' : 'Continue',
2691
- intent: "primary",
2692
- class: "next-btn",
2693
- onClick: this.handleNext
2694
- }), h("eds-button", {
2695
- label: "Back",
2696
- intent: "ghostInverse",
2697
- onClick: this.handleBack,
2698
- disabled: index === 0,
2699
- "extra-class": index === 0 ? 'hidden' : 'ml-8 block'
2700
- }))))) :
2701
- // Static mode: show all steps with their content.
2702
- h("div", {
2703
- class: "steps space-y-8"
2704
- }, steps.map((step, index) => h("div", {
2705
- class: "step",
2706
- key: index
2707
- }, h("h3", {
2708
- onClick: () => this.handleStepClick(index)
2709
- }, step.title), h("div", {
2710
- class: "content"
2711
- }, h("slot", {
2712
- name: `step-${index}`
2713
- }, h("div", {
2714
- class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16',
2715
- innerHTML: step.content
2716
- }))))))));
2717
- }
2718
- get el() {
2719
- return getElement(this);
2720
- }
2721
- static get watchers() {
2722
- return {
2723
- "activeStep": ["activeStepChanged"]
2724
- };
2725
- }
2726
- };
2727
- EdsStepsV2.style = EdsStepsV2Style0;
2728
- const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.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}.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}";
2729
- const EdsTableStyle0 = edsTableCss;
2730
- const EdsTable = class {
2731
- constructor(hostRef) {
2732
- registerInstance(this, hostRef);
2733
- this.rowaction = createEvent(this, "rowaction", 7);
2734
- this.handleResize = () => {
2735
- this.updateContainerWidth();
2736
- };
2737
- this.data = null;
2738
- this.endpoint = null;
2739
- this.config = {};
2740
- this.rowsPerPage = 10;
2741
- this.paginationEnabled = true;
2742
- this.searchEnabled = false;
2743
- this.hostWidth = undefined;
2744
- this.columnSize = 'default';
2745
- this.actions = [];
2746
- this.actionTemplate = undefined;
2747
- this.parsedActions = [];
2748
- this.dataColumns = [];
2749
- this.tbData = [];
2750
- this.columns = [];
2751
- this.currentPage = 1;
2752
- this.parsedConfig = {};
2753
- this.totalRows = 0;
2754
- this.searchQuery = '';
2755
- this.containerWidth = 0;
2756
- }
2757
- handleDataChange() {
2758
- this.parseData();
2759
- }
2760
- handleConfigChange() {
2761
- this.parseConfig();
2762
- }
2763
- handleActionsChange() {
2764
- try {
2765
- this.parsedActions = typeof this.actions === 'string' ? JSON.parse(this.actions) : this.actions;
2766
- } catch (_a) {
2767
- // eslint-disable-next-line
2768
- console.error('Failed to parse actions JSON');
2769
- this.parsedActions = [];
2770
- }
2771
- }
2772
- componentWillLoad() {
2773
- this.parseConfig();
2774
- this.handleActionsChange();
2775
- this.data ? this.parseData() : this.endpoint && this.fetchData();
2776
- }
2777
- componentDidLoad() {
2778
- this.updateContainerWidth();
2779
- window.addEventListener('resize', this.handleResize);
2780
- this.setupPaginationListener();
2781
- }
2782
- componentDidUpdate() {
2783
- this.setupPaginationListener();
2784
- }
2785
- disconnectedCallback() {
2786
- window.removeEventListener('resize', this.handleResize);
2787
- }
2788
- updateContainerWidth() {
2789
- // Use hostWidth prop if provided; otherwise, measure parent element
2790
- if (this.hostWidth && this.hostWidth.trim() !== '') {
2791
- this.containerWidth = Number(this.hostWidth);
2792
- } else if (this.hostEl.parentElement instanceof HTMLElement) {
2793
- this.containerWidth = this.hostEl.parentElement.getBoundingClientRect().width;
2794
- } else {
2795
- this.containerWidth = 400;
2796
- }
2797
- }
2798
- parseData() {
2799
- try {
2800
- this.tbData = parseData(this.data);
2801
- this.totalRows = this.tbData.length;
2802
- this.updateColumns();
2803
- this.currentPage = 1;
2804
- } catch (error) {
2805
- // eslint-disable-next-line
2806
- console.error('Failed to parse data:', error);
2807
- this.tbData = [];
2808
- }
2809
- }
2810
- parseConfig() {
2811
- try {
2812
- this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
2813
- } catch (error) {
2814
- // eslint-disable-next-line
2815
- console.error('Failed to parse config:', error);
2816
- this.parsedConfig = {};
2817
- }
2818
- }
2819
- async fetchData() {
2820
- try {
2821
- const response = await fetch(this.endpoint);
2822
- const data = await response.json();
2823
- this.data = data;
2824
- } catch (error) {
2825
- // eslint-disable-next-line
2826
- console.error('Failed to fetch data:', error);
2827
- }
2828
- }
2829
- setupPaginationListener() {
2830
- if (!this.shouldEnablePagination()) {
2831
- return;
2832
- }
2833
- const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
2834
- if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
2835
- paginationEl.addEventListener('page', event => this.handlePageChange(event.detail));
2836
- paginationEl.setAttribute('listener-attached', 'true');
2837
- }
2838
- }
2839
- getFilteredRows() {
2840
- return this.tbData.filter(row => Object.values(row).some(value => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
2841
- }
2842
- getPaginatedRows() {
2843
- const filteredRows = this.getFilteredRows();
2844
- this.totalRows = filteredRows.length;
2845
- const start = (this.currentPage - 1) * this.rowsPerPage;
2846
- return filteredRows.slice(start, start + this.rowsPerPage);
2847
- }
2848
- handlePageChange(newPage) {
2849
- this.currentPage = newPage;
2850
- sendAnalytics({
2851
- category: 'ui-component',
2852
- parentContext: null,
2853
- tag: `${this.hostEl.tagName.toLowerCase()}/eds-pagination`,
2854
- name: `${newPage}` || '',
2855
- action: 'page'
2856
- });
2857
- }
2858
- handleSearch(event) {
2859
- this.searchQuery = event.target.value;
2860
- this.currentPage = 1;
2861
- }
2862
- renderCell(value, column) {
2863
- var _a;
2864
- const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
2865
- return format === 'uppercase' ? value === null || value === void 0 ? void 0 : value.toString().toUpperCase() : format === 'svg' ? h("div", {
2866
- innerHTML: value
2867
- }) : format === 'bold' ? h("strong", null, value) : format === 'code' ? h("code", null, value) : value;
2868
- }
2869
- /**
2870
- * Renders one action (button or checkbox) for a specific action‐name.
2871
- * Used by the “Actions” column below.
2872
- */
2873
- renderSingleActionCell(actionName, row) {
2874
- var _a;
2875
- const act = this.parsedActions.find(a => a.name === actionName);
2876
- if (this.actionTemplate) {
2877
- return this.actionTemplate(row);
2878
- }
2879
- const type = act.type || 'button';
2880
- if (type === 'checkbox') {
2881
- const boundField = (_a = act.field) !== null && _a !== void 0 ? _a : act.name;
2882
- const checked = !!row[boundField];
2883
- return h("eds-input-field", {
2884
- name: `chc-${actionName}`,
2885
- label: act.label,
2886
- type: "checkbox",
2887
- checked: checked,
2888
- onChange: e => this.emitAction(act.name, row, e.target.checked)
2889
- });
2890
- }
2891
- return h("eds-link", {
2892
- label: act.label,
2893
- intent: "weak",
2894
- onClick: () => this.emitAction(act.name, row)
2895
- });
2896
- }
2897
- emitAction(actionName, row, checked) {
2898
- sendAnalytics({
2899
- category: 'ui-component',
2900
- parentContext: null,
2901
- tag: `${this.hostEl.tagName.toLowerCase()}/action`,
2902
- name: actionName,
2903
- action: 'click'
2904
- });
2905
- this.rowaction.emit({
2906
- action: actionName,
2907
- row,
2908
- checked: !!checked
2909
- });
2910
- }
2911
- shouldEnablePagination() {
2912
- return this.paginationEnabled && this.totalRows > this.rowsPerPage;
2913
- }
2914
- updateColumns() {
2915
- var _a, _b;
2916
- // Grab all data‐keys from the first row (if any) as before:
2917
- this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
2918
- // Instead of pushing each action.name, add just a single “actions” column
2919
- if (((_b = (_a = this.parsedActions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 && this.tbData.length > 0) {
2920
- this.columns.push('actions');
2921
- }
2922
- }
2923
- getVisibleColumnsCount() {
2924
- return this.columns.filter(column => {
2925
- var _a;
2926
- return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden);
2927
- }).length;
2928
- }
2929
- divisionFactor() {
2930
- let divisionFactor = 1;
2931
- if (this.columnSize === 'medium') {
2932
- divisionFactor = 2;
2933
- } else if (this.columnSize === 'large') {
2934
- divisionFactor = 4;
2935
- }
2936
- return divisionFactor;
2937
- }
2938
- capitalize(str) {
2939
- return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
2940
- }
2941
- render() {
2942
- const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
2943
- const visibleColumnsCount = this.getVisibleColumnsCount();
2944
- const columnWidth = visibleColumnsCount > 0 ? Math.floor(currentContainerWidth / visibleColumnsCount * this.divisionFactor()) : 100;
2945
- const paginatedRows = this.getPaginatedRows();
2946
- const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
2947
- return h("div", {
2948
- key: '02339fab49389741529bd4333689e15c0409aecc'
2949
- }, this.searchEnabled && h("div", {
2950
- key: 'a056734ff7bf25d8f561a185f8cf29742643c81d'
2951
- }, h("eds-input-field", {
2952
- key: 1,
2953
- name: "search",
2954
- "aria-label": "Search",
2955
- type: "text",
2956
- placeholder: "Search...",
2957
- onInput: event => this.handleSearch(event)
2958
- })), h("div", {
2959
- key: 'cbeb04c8d91034db5b7e6386e45c2dbc87d8f6ee',
2960
- class: "mt-20"
2961
- }, h("table", {
2962
- key: 'd707ffd979bc80da882ea38ce2d43cb5dee0702e',
2963
- class: "block overflow-x-auto mt-6 p-0"
2964
- }, h("thead", {
2965
- key: 'b4087412a0da69f0b3177785fb71ef2ce1d481a6'
2966
- }, h("tr", {
2967
- key: 'eb4463081686841b3112cab121bf3aa4dcfffe31',
2968
- class: "m-0 p-0 border border-softer even:bg-inverse-softer"
2969
- }, this.columns.map(col => {
2970
- var _a;
2971
- if (col === 'actions') {
2972
- return h("th", {
2973
- class: "m-0 py-8 border border-softer f-ui-02 break-words",
2974
- style: {
2975
- minWidth: `${columnWidth - 4}px`
2976
- }
2977
- });
2978
- }
2979
- if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
2980
- return h("th", {
2981
- class: "m-0 py-8 border border-softer f-ui-02 break-words",
2982
- style: {
2983
- minWidth: `${columnWidth - 4}px`
2984
- }
2985
- }, this.capitalize(col));
2986
- }
2987
- return null;
2988
- }))), h("tbody", {
2989
- key: '3c0de8287738ff638a46721ee4e0e07bceffed8f'
2990
- }, paginatedRows.map(row => h("tr", {
2991
- class: "m-0 p-0 border border-softer even:bg-inverse-softer"
2992
- }, this.columns.map(col => {
2993
- var _a;
2994
- if (col === 'actions') {
2995
- return h("td", {
2996
- class: "text-center border border-softer m-0 f-ui-02 break-words actions-cell",
2997
- style: {
2998
- minWidth: `${columnWidth - 4}px`
2999
- }
3000
- }, h("div", {
3001
- style: {
3002
- display: 'flex',
3003
- gap: '0.5rem',
3004
- justifyContent: 'center',
3005
- flexWrap: 'wrap'
3006
- }
3007
- }, this.parsedActions.map(act => h("span", {
3008
- style: {
3009
- whiteSpace: 'nowrap'
3010
- }
3011
- }, this.renderSingleActionCell(act.name, row)))));
3012
- }
3013
- if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
3014
- // Regular data cell
3015
- return h("td", {
3016
- class: "text-center border border-softer m-0 py-8 f-ui-2 break-words",
3017
- style: {
3018
- minWidth: `${columnWidth - 4}px`
3019
- }
3020
- }, this.renderCell(row[col], col));
3021
- }
3022
- return null;
3023
- })))))), this.shouldEnablePagination() && h("div", {
3024
- key: '27c640dfdd0906abeb7ec77dfb7fb1d052d50093',
3025
- class: "mt-20"
3026
- }, h("eds-pagination", {
3027
- key: '0a74448e3f59098808d8ba1696b891c4ea9a37bc',
3028
- currentPage: this.currentPage,
3029
- lastPage: lastPage,
3030
- perPage: this.rowsPerPage,
3031
- total: this.totalRows,
3032
- mode: "default"
3033
- })));
3034
- }
3035
- get hostEl() {
3036
- return getElement(this);
3037
- }
3038
- static get watchers() {
3039
- return {
3040
- "data": ["handleDataChange", "parseData"],
3041
- "config": ["handleConfigChange"],
3042
- "actions": ["handleActionsChange"]
3043
- };
3044
- }
3045
- };
3046
- EdsTable.style = EdsTableStyle0;
3047
- 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-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)}.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}.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}.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-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}}";
3048
- const EdsTabsStyle0 = edsTabsCss;
3049
- const EdsTabs = class {
3050
- constructor(hostRef) {
3051
- registerInstance(this, hostRef);
3052
- this.tab = createEvent(this, "tab", 7);
3053
- // cva configuration
3054
- this.tabCva = cva(['relative py-12', 'f-ui-03 whitespace-nowrap', 'effect-color', 'focus-visible:text-default hover:text-default', 'border-2', "after:content-[''] after:absolute after:inset-0 after:rounded-t-lg after:opacity-0", 'outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100'], {
3055
- variants: {
3056
- position: {
3057
- first: 'px-16 rounded-t-lg',
3058
- center: 'px-16',
3059
- left: 'pl-16 pr-28 rounded-tl-lg border-r-0 -mr-16 after:right-16',
3060
- right: 'pl-28 pr-16 rounded-tr-lg border-l-0 -ml-16 after:left-16'
3061
- },
3062
- active: {
3063
- false: 'text-lighter bg-dark hover:bg-darker border-softest after:border-0',
3064
- 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']
3065
- }
3066
- }
3067
- });
3068
- this.identifier = undefined;
3069
- this.navAriaLabel = 'Tabs';
3070
- this.tabs = undefined;
3071
- this.parsedTabs = [];
3072
- this.activeIndex = -1;
3073
- }
3074
- componentWillLoad() {
3075
- this.parseTabs();
3076
- this.setActiveIndex();
3077
- this.tab.emit({
3078
- tabId: this.identifier,
3079
- index: 0
3080
- });
3081
- }
3082
- /**
3083
- * Parses the `links` prop into an array of link objects.
3084
- * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
3085
- *
3086
- * @returns {any[]} Array of parsed link objects
3087
- */
3088
- /**
3089
- * Parses the `links` prop into an array of link objects.
3090
- * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
3091
- *
3092
- * @returns {any[]} Array of parsed link objects
3093
- */
3094
- parseTabs() {
3095
- this.parsedTabs = parseData(this.tabs);
3096
- }
3097
- componentDidLoad() {
3098
- this.scrollToActiveTab();
3099
- }
3100
- setActiveIndex() {
3101
- this.activeIndex = this.parsedTabs.findIndex(tab => tab.active);
3102
- }
3103
- scrollToActiveTab() {
3104
- var _a;
3105
- const activeTab = (_a = this.tabContainer) === null || _a === void 0 ? void 0 : _a.querySelector('[data-tab-active]');
3106
- if (activeTab) {
3107
- setTimeout(() => {
3108
- activeTab.scrollIntoView({
3109
- inline: 'center',
3110
- block: 'nearest'
3111
- });
3112
- }, 316);
3113
- }
3114
- }
3115
- getTabOptions(active, index) {
3116
- const position = active ? 'center' : this.activeIndex === -1 && index === 0 ? 'first' : index < this.activeIndex ? 'left' : 'right';
3117
- return Object.assign({
3118
- class: this.tabCva({
3119
- active,
3120
- position
3121
- }),
3122
- style: {
3123
- zIndex: `${active ? this.parsedTabs.length + 99 : position === 'left' ? index : this.parsedTabs.length + 1 - index}`
3124
- }
3125
- }, active ? {
3126
- 'data-tab-active': 'true'
3127
- } : {});
3128
- }
3129
- handleTabClick(index, tabLabel) {
3130
- // Update the active index and set all tabs' active state accordingly
3131
- this.activeIndex = index;
3132
- this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => Object.assign(Object.assign({}, tab), {
3133
- active: tabIndex === index
3134
- }));
3135
- this.tab.emit({
3136
- tabId: this.identifier,
3137
- index: index,
3138
- name: tabLabel
3139
- });
3140
- sendAnalytics({
3141
- category: 'ui-component',
3142
- tag: this.el.tagName.toLowerCase(),
3143
- name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
3144
- action: 'click'
3145
- });
3146
- }
3147
- render() {
3148
- return h("div", {
3149
- key: 'ef6902f4dafc40f290f8b63627f4534d665aa01d',
3150
- id: `${this.identifier}`
3151
- }, h("div", {
3152
- key: 'a120ea68061894c2d9e2e3f0b8e61f53732c8753',
3153
- class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28"
3154
- }, h("nav", {
3155
- key: 'fb2bb608addcc777a55be828367e92268c676e16',
3156
- ref: el => this.tabContainer = el,
3157
- class: "inline-flex",
3158
- "aria-label": this.navAriaLabel
3159
- }, this.parsedTabs.map((tab, index) => {
3160
- const TabComponent = tab.active ? 'span' : 'a';
3161
- const tabProps = this.getTabOptions(tab.active, index);
3162
- return h(TabComponent, Object.assign({}, tabProps, {
3163
- "aria-label": tab.label,
3164
- "aria-current": index === this.activeIndex,
3165
- onClick: () => this.handleTabClick(index, tab.label)
3166
- }), tab.label || tab.ariaLabel);
3167
- }))), h("div", {
3168
- key: '82d6a43a9c326b6be73c81205201b18f148641ad',
3169
- class: "tab-panels"
3170
- }, this.parsedTabs.map((_, index) => h("div", {
3171
- hidden: index !== this.activeIndex
3172
- }, h("slot", {
3173
- name: `panel-${index}`
3174
- })))));
3175
- }
3176
- get el() {
3177
- return getElement(this);
3178
- }
3179
- static get watchers() {
3180
- return {
3181
- "tabs": ["parseTabs"]
3182
- };
3183
- }
3184
- };
3185
- EdsTabs.style = EdsTabsStyle0;
3186
- 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)}";
3187
- const EdsTagStyle0 = edsTagCss;
3188
-
3189
- // Define the CVA for the tag styles
3190
- const tagStyles = cva(['border-2 rounded-pill'],
3191
- // Base classes
3192
- {
3193
- variants: {
3194
- intent: {
3195
- primary: 'border-accent bg-accent',
3196
- default: 'border-default',
3197
- strong: 'text-inverse bg-strongest border-default',
3198
- accent: 'text-[#0034CB] border-[#0034CB]',
3199
- weak: 'text-light bg-strongest-soft border-transparent',
3200
- inverse: 'border-inverse text-inverse',
3201
- 'inverse-strong': 'bg-inverse border-inverse text-lighter'
3202
- },
3203
- size: {
3204
- small: 'f-ui-05 py-2 px-4',
3205
- // smaller padding
3206
- medium: 'f-ui-03 py-3 px-5',
3207
- // moderate padding
3208
- large: 'f-ui-01 py-4 px-6' // larger padding
3209
- }
3210
- },
3211
- defaultVariants: {
3212
- intent: 'default',
3213
- size: 'small'
3214
- }
3215
- });
3216
- const EdsTag = class {
3217
- constructor(hostRef) {
3218
- registerInstance(this, hostRef);
3219
- this.label = undefined;
3220
- this.intent = 'default';
3221
- this.size = 'small';
3222
- }
3223
- render() {
3224
- const classes = tagStyles({
3225
- intent: this.intent,
3226
- size: this.size
3227
- });
3228
- return h("span", {
3229
- key: '153cb5a6ab669555dd8e5815413dc0d1be5bee6d',
3230
- class: classes
3231
- }, this.label);
3232
- }
3233
- };
3234
- EdsTag.style = EdsTagStyle0;
3235
- 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)}";
3236
- const EdsToastStyle0 = edsToastCss;
3237
- const toastStyles = cva(['relative bottom-4 w-auto p-12 rounded-lg shadow-md'], {
3238
- variants: {
3239
- intent: {
3240
- default: 'bg-dark text-light',
3241
- success: 'bg-success text-dark',
3242
- error: 'bg-error text-light',
3243
- warning: 'bg-warning text-dark'
3244
- }
3245
- },
3246
- defaultVariants: {
3247
- intent: 'default'
3248
- }
3249
- });
3250
- const EdsToast = class {
3251
- constructor(hostRef) {
3252
- registerInstance(this, hostRef);
3253
- this.toast = createEvent(this, "toast", 7);
3254
- /**
3255
- * Dismisses the toast.
3256
- */
3257
- this.dismissToast = () => {
3258
- this.toast.emit({
3259
- visible: false,
3260
- label: 'dismissed'
3261
- });
3262
- this.visible = false;
3263
- };
3264
- this.message = undefined;
3265
- this.intent = 'default';
3266
- this.duration = undefined;
3267
- this.visible = true;
3268
- }
3269
- componentDidLoad() {
3270
- const btn = this.el.shadowRoot.querySelector('eds-button');
3271
- this.emitContext(btn);
3272
- }
3273
- /**
3274
- * Emits a custom event called `parentContext` for a given button element.
3275
- * This event provides context information about the toast component.
3276
- *
3277
- * @param btnElement - The link element to which the event will be dispatched.
3278
- */
3279
- emitContext(btnElement) {
3280
- const event = new CustomEvent('parentContext', {
3281
- detail: {
3282
- componentName: this.el.tagName.toLowerCase(),
3283
- identifier: null
3284
- }
3285
- });
3286
- btnElement.dispatchEvent(event);
3287
- }
3288
- connectedCallback() {
3289
- if (this.duration && this.duration > 0) {
3290
- this.dismissTimeout = setTimeout(this.dismissToast, this.duration);
3291
- }
3292
- }
3293
- disconnectedCallback() {
3294
- // Clear the timeout when the component is removed
3295
- clearTimeout(this.dismissTimeout);
3296
- }
3297
- render() {
3298
- if (!this.visible) {
3299
- return null;
3300
- }
3301
- const classes = toastStyles({
3302
- intent: this.intent
3303
- });
3304
- return h("div", {
3305
- class: classes,
3306
- role: "alert",
3307
- "aria-live": "assertive"
3308
- }, h("div", {
3309
- class: "flex items-center justify-between gap-4"
3310
- }, h("span", {
3311
- class: "f-ui-01"
3312
- }, this.message), h("eds-button", {
3313
- intent: "tertiary",
3314
- icon: "close",
3315
- "aria-label": "Close Toast",
3316
- onClick: () => this.dismissToast(),
3317
- "extra-class": "ml-8"
3318
- })));
3319
- }
3320
- get el() {
3321
- return getElement(this);
3322
- }
3323
- };
3324
- EdsToast.style = EdsToastStyle0;
3325
- 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}";
3326
- const EdsUserStyle0 = edsUserCss;
3327
- const EdsUser = class {
3328
- constructor(hostRef) {
3329
- registerInstance(this, hostRef);
3330
- this.user = undefined;
3331
- }
3332
- /**
3333
- * Helper getter to ensure we work with a User object.
3334
- */
3335
- get parsedUser() {
3336
- if (typeof this.user === 'string') {
3337
- try {
3338
- return JSON.parse(this.user);
3339
- } catch (error) {
3340
- //console.error('Failed to parse user JSON:', error);
3341
- return {};
3342
- }
3343
- }
3344
- return this.user;
3345
- }
3346
- async componentWillLoad() {}
3347
- get initials() {
3348
- var _a, _b, _c, _d;
3349
- const user = this.parsedUser;
3350
- 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();
3351
- return initials || ((_d = (_c = user.name) === null || _c === void 0 ? void 0 : _c.charAt(0)) === null || _d === void 0 ? void 0 : _d.toUpperCase()) || '';
3352
- }
3353
- render() {
3354
- const user = this.parsedUser;
3355
- return h("div", {
3356
- key: 'e1413d070d6f5ce0a5f7a45e8eed7a27941bda10',
3357
- class: "block"
3358
- }, h("div", {
3359
- key: 'f59cf79c2f09069d9e5bbae2bc126a0e3ef23564',
3360
- class: "flex items-center"
3361
- }, h("eds-dropdown", {
3362
- key: '7316554277baffb16b6a2cc0ab0b4606a46ccfc8',
3363
- label: `Hi, ${user.preferred_username}`,
3364
- intent: "tertiary",
3365
- "aria-label": "User Menu",
3366
- "dropdown-pos": "right",
3367
- "dropdown-offset": "false",
3368
- icon: "chevron-down",
3369
- class: "text-default"
3370
- }, h("div", {
3371
- key: 'df80f62cd5c6e0876fcc20c54dbd25d6db031ce0',
3372
- class: "min-w-[280px] p-8"
3373
- }, h("div", {
3374
- key: '34f0bd24c4c8ec55d5e99f77d0378bc14fb6943f',
3375
- class: "flex gap-x-16"
3376
- }, h("eds-avatar", {
3377
- key: '73e45e3d20d02711af982a7a801cb7d6e18e201e',
3378
- "first-name": user.given_name,
3379
- "last-name": user.family_name,
3380
- initials: this.initials,
3381
- color: "grey"
3382
- }), h("div", {
3383
- key: '1070df12372893476cc5ed2909ac735d0655cdb7',
3384
- class: "max-w-full"
3385
- }, user.name && h("p", {
3386
- key: '4d6ca560545810da42d6acd5780c354565dc0d2d',
3387
- class: "f-ui-01 text-default w-full text-ellipsis"
3388
- }, user.name), user.preferred_username && h("p", {
3389
- key: 'f7e618449d15fc899484afda94e7837408f0b251',
3390
- class: "f-ui-03-light text-light mt-4"
3391
- }, user.preferred_username), user.email && h("p", {
3392
- key: 'e6ca46f9863cea6d6bfa7021ead181509a5806f0',
3393
- class: "f-ui-03-light text-light mt-4"
3394
- }, user.email))), h("eds-block-break", {
3395
- key: '76c0ba26ef63e046b7a01e12332b812ad5873776'
3396
- }), h("div", {
3397
- key: '448e592221de4406477bb0eb6bc84975699008f3',
3398
- class: "text-default flex w-full flex-col gap-y-8"
3399
- }, h("slot", {
3400
- key: '47e2d49bef131c827f49d3eaf68f6a09ba948707'
3401
- }))))));
3402
- }
3403
- get hostEl() {
3404
- return getElement(this);
3405
- }
3406
- };
3407
- EdsUser.style = EdsUserStyle0;
3408
-
3409
- export { EdsAvatar as eds_avatar, EdsBlockBreak as eds_block_break, EdsButton as eds_button, EdsDropdown as eds_dropdown, EdsForm as eds_form, 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, EdsPagination as eds_pagination, EdsRating as eds_rating, EdsSteps as eds_steps, EdsStepsV2 as eds_steps_v2, EdsTable as eds_table, EdsTabs as eds_tabs, EdsTag as eds_tag, EdsToast as eds_toast, EdsUser as eds_user };