@pnx-mixtape/mxds 0.0.8 → 0.0.9

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 (120) hide show
  1. package/package.json +1 -1
  2. package/src/Atom/Button/button.twig +1 -1
  3. package/src/Atom/Image/image.twig +3 -3
  4. package/src/Atom/Link/link.twig +1 -1
  5. package/src/Atom/Media/media.twig +2 -2
  6. package/src/Atom/Video/video.twig +1 -1
  7. package/src/Component/Accordion/accordion-item.twig +1 -1
  8. package/src/Component/Accordion/accordion.twig +1 -1
  9. package/src/Component/Card/Card.stories.ts +26 -14
  10. package/src/Component/Card/__snapshots__/Card.stories.ts.snap +18 -12
  11. package/src/Component/Card/card.twig +5 -5
  12. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +9 -45
  13. package/src/Component/ContentBlock/content-block.twig +2 -2
  14. package/src/Component/DropMenu/drop-menu.twig +1 -1
  15. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.ts.snap +1 -3
  16. package/src/Component/GlobalAlert/global-alert.twig +3 -3
  17. package/src/Component/HeroBanner/HeroBanner.stories.ts +25 -11
  18. package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +18 -12
  19. package/src/Component/HeroBanner/hero-banner.twig +3 -3
  20. package/src/Component/LinkList/LinkList.stories.ts +20 -6
  21. package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +18 -12
  22. package/src/Component/LinkList/link-list.css +7 -35
  23. package/src/Component/LinkList/link-list.twig +1 -5
  24. package/src/Component/ListItem/list-item.twig +4 -4
  25. package/src/Component/Navigation/menu.twig +4 -4
  26. package/src/Component/Navigation/navigation.twig +1 -1
  27. package/src/Component/Pagination/pagination-item.twig +1 -1
  28. package/src/Component/Pagination/pagination.twig +2 -2
  29. package/src/Component/SideNavigation/side-navigation.twig +4 -4
  30. package/src/Component/Tabs/tabs.twig +1 -1
  31. package/src/Component/Tag/tag.css +4 -0
  32. package/src/Form/Checkbox/input-checkbox.twig +1 -1
  33. package/src/Form/Form/form.twig +2 -2
  34. package/src/Form/FormItem/form-item.twig +1 -1
  35. package/src/Form/Select/input-select.twig +1 -1
  36. package/src/Form/TextInput/input-text.twig +1 -1
  37. package/src/Form/Textarea/input-textarea.twig +1 -1
  38. package/src/Layout/Footer/Footer.stories.ts +0 -1
  39. package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap +20 -40
  40. package/src/Layout/Footer/footer.twig +3 -3
  41. package/src/Layout/Header/Header.stories.ts +0 -1
  42. package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +5 -5
  43. package/src/Layout/Header/header-stacked.twig +13 -11
  44. package/src/Layout/Header/header.twig +12 -10
  45. package/src/Layout/Header/twig/logo.twig +1 -3
  46. package/src/Layout/Masthead/Masthead.stories.ts +10 -0
  47. package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +51 -3
  48. package/src/Layout/Masthead/masthead.css +23 -0
  49. package/src/Layout/Masthead/masthead.twig +9 -5
  50. package/src/Layout/Section/section.twig +1 -1
  51. package/src/Layout/Sidebar/sidebar.twig +5 -5
  52. package/dist/build/accordion.css +0 -108
  53. package/dist/build/accordion.entry.js +0 -139
  54. package/dist/build/accordion.entry.js.map +0 -1
  55. package/dist/build/base.css +0 -996
  56. package/dist/build/breadcrumb.css +0 -51
  57. package/dist/build/button.css +0 -132
  58. package/dist/build/callout.css +0 -11
  59. package/dist/build/card.css +0 -149
  60. package/dist/build/chunks/disclosure-widget-CQLPJ8Ta.js +0 -124
  61. package/dist/build/chunks/disclosure-widget-CQLPJ8Ta.js.map +0 -1
  62. package/dist/build/chunks/drop-menu.entry-BC6x9vst.js +0 -132
  63. package/dist/build/chunks/drop-menu.entry-BC6x9vst.js.map +0 -1
  64. package/dist/build/chunks/keyboard-C73DHu0c.js +0 -101
  65. package/dist/build/chunks/keyboard-C73DHu0c.js.map +0 -1
  66. package/dist/build/chunks/polyfills-CJ5uTmUJ.js +0 -749
  67. package/dist/build/chunks/polyfills-CJ5uTmUJ.js.map +0 -1
  68. package/dist/build/chunks/popover-wbPSyFRj.js +0 -654
  69. package/dist/build/chunks/popover-wbPSyFRj.js.map +0 -1
  70. package/dist/build/chunks/utilities-B4YZb689.js +0 -243
  71. package/dist/build/chunks/utilities-B4YZb689.js.map +0 -1
  72. package/dist/build/constants.css +0 -120
  73. package/dist/build/container-grid.css +0 -208
  74. package/dist/build/content-block.css +0 -36
  75. package/dist/build/dialog.css +0 -98
  76. package/dist/build/dialog.entry.js +0 -113
  77. package/dist/build/dialog.entry.js.map +0 -1
  78. package/dist/build/drop-menu.css +0 -78
  79. package/dist/build/drop-menu.entry.js +0 -2
  80. package/dist/build/drop-menu.entry.js.map +0 -1
  81. package/dist/build/drupal.css +0 -74
  82. package/dist/build/footer.css +0 -151
  83. package/dist/build/form.css +0 -517
  84. package/dist/build/global-alert.css +0 -60
  85. package/dist/build/global-alert.entry.js +0 -68
  86. package/dist/build/global-alert.entry.js.map +0 -1
  87. package/dist/build/grid.css +0 -200
  88. package/dist/build/header.css +0 -138
  89. package/dist/build/header.entry.js +0 -103
  90. package/dist/build/header.entry.js.map +0 -1
  91. package/dist/build/hero-banner.css +0 -62
  92. package/dist/build/icon.css +0 -399
  93. package/dist/build/in-page-alert.css +0 -94
  94. package/dist/build/in-page-navigation.css +0 -17
  95. package/dist/build/in-page-navigation.entry.js +0 -89
  96. package/dist/build/in-page-navigation.entry.js.map +0 -1
  97. package/dist/build/link-list.css +0 -72
  98. package/dist/build/list-item.css +0 -114
  99. package/dist/build/masthead.css +0 -30
  100. package/dist/build/navigation.css +0 -392
  101. package/dist/build/navigation.entry.js +0 -124
  102. package/dist/build/navigation.entry.js.map +0 -1
  103. package/dist/build/page.css +0 -80
  104. package/dist/build/pagination.css +0 -130
  105. package/dist/build/section.css +0 -163
  106. package/dist/build/side-navigation.css +0 -88
  107. package/dist/build/sidebar.css +0 -105
  108. package/dist/build/social-links.css +0 -20
  109. package/dist/build/steps.css +0 -118
  110. package/dist/build/steps.entry.js +0 -2
  111. package/dist/build/steps.entry.js.map +0 -1
  112. package/dist/build/sticky.css +0 -47
  113. package/dist/build/sticky.entry.js +0 -60
  114. package/dist/build/sticky.entry.js.map +0 -1
  115. package/dist/build/tabs.css +0 -109
  116. package/dist/build/tabs.entry.js +0 -202
  117. package/dist/build/tabs.entry.js.map +0 -1
  118. package/dist/build/tag.css +0 -67
  119. package/dist/build/tiles.css +0 -61
  120. package/dist/build/utilities.css +0 -178
@@ -1,51 +0,0 @@
1
- /**
2
- * Breadcrumb Navigation
3
- */
4
-
5
- @layer design-system.components {
6
- .mx-nav--breadcrumbs {
7
- --nav-font-size: var(--font-size-s);
8
-
9
- position: relative;
10
- z-index: 1;
11
- overflow: auto;
12
- white-space: nowrap;
13
- }
14
-
15
- .mx-nav--breadcrumbs > ul {
16
- gap: var(--breadcrumb-gap, var(--spacing-xxxxs));
17
- }
18
-
19
- .mx-nav--breadcrumbs > ul > li {
20
- color: var(
21
- --breadcrumb-foreground,
22
- var(--foreground, var(--colour-foreground-alt))
23
- );
24
- display: flex;
25
- align-items: center;
26
- }
27
-
28
- .mx-nav--breadcrumbs > ul > li:where(:not(:last-child))::after {
29
- content: "";
30
- display: block;
31
- vertical-align: middle;
32
- -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 13.4L4.6 12l4-4-4-4L6 2.6 11.4 8z'/%3E%3C/svg%3E");
33
- mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 13.4L4.6 12l4-4-4-4L6 2.6 11.4 8z'/%3E%3C/svg%3E");
34
- -webkit-mask-position: center;
35
- mask-position: center;
36
- -webkit-mask-repeat: no-repeat;
37
- mask-repeat: no-repeat;
38
- block-size: var(--spacing-m);
39
- inline-size: var(--spacing-m);
40
- background-color: currentcolor;
41
- }
42
-
43
- .mx-nav--breadcrumbs [aria-current="page"] {
44
- pointer-events: none;
45
- }
46
- [dir="rtl"] .mx-nav--breadcrumbs > ul > li::after, .translated-rtl .mx-nav--breadcrumbs > ul > li::after {
47
- transform: rotate(180deg);
48
- }
49
- }
50
-
51
- /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJyZWFkY3J1bWIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxtQ0FBbUM7O0lBRW5DLGtCQUFrQjtJQUNsQixVQUFVO0lBQ1YsY0FBYztJQUNkLG1CQUFtQjtFQThCckI7O0lBNUJFO01BQ0UsZ0RBQWdEO0lBQ2xEOztJQUVBO01BQ0U7OztPQUdDO01BQ0QsYUFBYTtNQUNiLG1CQUFtQjtJQWFyQjs7TUFYRTtRQUNFLFdBQVc7UUFDWCxjQUFjO1FBQ2Qsc0JBQXNCO1FBQ3RCLDZMQUFnRTtnQkFBaEUscUxBQWdFO1FBQ2hFLDZCQUFxQjtnQkFBckIscUJBQXFCO1FBQ3JCLDhCQUFzQjtnQkFBdEIsc0JBQXNCO1FBQ3RCLDRCQUE0QjtRQUM1Qiw2QkFBNkI7UUFDN0IsOEJBQThCO01BQ2hDOztJQUdGO01BQ0Usb0JBQW9CO0lBQ3RCO0lBS0E7TUFDRSx5QkFBeUI7SUFDM0I7QUFFSiIsImZpbGUiOiJicmVhZGNydW1iLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQnJlYWRjcnVtYiBOYXZpZ2F0aW9uXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1uYXYtLWJyZWFkY3J1bWJzIHtcbiAgICAtLW5hdi1mb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS1zKTtcblxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB6LWluZGV4OiAxO1xuICAgIG92ZXJmbG93OiBhdXRvO1xuICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cbiAgICAmID4gdWwge1xuICAgICAgZ2FwOiB2YXIoLS1icmVhZGNydW1iLWdhcCwgdmFyKC0tc3BhY2luZy14eHh4cykpO1xuICAgIH1cblxuICAgICYgPiB1bCA+IGxpIHtcbiAgICAgIGNvbG9yOiB2YXIoXG4gICAgICAgIC0tYnJlYWRjcnVtYi1mb3JlZ3JvdW5kLFxuICAgICAgICB2YXIoLS1mb3JlZ3JvdW5kLCB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1hbHQpKVxuICAgICAgKTtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuXG4gICAgICAmOndoZXJlKDpub3QoOmxhc3QtY2hpbGQpKTo6YWZ0ZXIge1xuICAgICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgICAgICAgbWFzay1pbWFnZTogc3ZnLWxvYWQoXCIuLi8uLi9BdG9tL0ljb24vaW1hZ2VzL2NoZXZyb24tcmlnaHQuc3ZnXCIpO1xuICAgICAgICBtYXNrLXBvc2l0aW9uOiBjZW50ZXI7XG4gICAgICAgIG1hc2stcmVwZWF0OiBuby1yZXBlYXQ7XG4gICAgICAgIGJsb2NrLXNpemU6IHZhcigtLXNwYWNpbmctbSk7XG4gICAgICAgIGlubGluZS1zaXplOiB2YXIoLS1zcGFjaW5nLW0pO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiBjdXJyZW50Y29sb3I7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiBbYXJpYS1jdXJyZW50PVwicGFnZVwiXSB7XG4gICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICB9XG4gIH1cblxuICBbZGlyPVwicnRsXCJdIC5teC1uYXYtLWJyZWFkY3J1bWJzLFxuICAudHJhbnNsYXRlZC1ydGwgLm14LW5hdi0tYnJlYWRjcnVtYnMge1xuICAgICYgPiB1bCA+IGxpOjphZnRlciB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpO1xuICAgIH1cbiAgfVxufVxuIl19 */
@@ -1,132 +0,0 @@
1
- /**
2
- * Buttons
3
- */
4
-
5
- @layer design-system.atoms {
6
- .mx-button {
7
- --outline-offset: 0.0625rem;
8
- --outline-width: 0.25rem;
9
-
10
- display: inline-flex;
11
- inline-size: -moz-fit-content;
12
- inline-size: fit-content;
13
- gap: var(--button-gap, var(--spacing-s));
14
- font-size: var(--button-font-size, var(--font-size));
15
- font-weight: var(--font-weight-bold);
16
- font-family: var(--font-family);
17
- line-height: var(--line-height-ui);
18
- border: 2px solid
19
- var(--button-line-colour, var(--colour-border));
20
- border: var(--line-width, 2px) solid
21
- var(--button-line-colour, var(--colour-border));
22
- border-radius: var(--radius, var(--border-radius-l));
23
- padding-block: var(--vertical-padding, var(--spacing-xxs));
24
- padding-inline: var(--horizontal-padding, var(--spacing-m));
25
- background-color: var(--background, var(--colour-background));
26
- color: var(--foreground, var(--colour-foreground));
27
- text-decoration-line: none;
28
- transition:
29
- 0.2s color,
30
- 0.2s background-color,
31
- 0.2s border-color;
32
- }
33
-
34
- .mx-button:hover {
35
- cursor: pointer;
36
- text-decoration-line: none;
37
- }
38
-
39
- .mx-button:disabled {
40
- cursor: not-allowed;
41
- opacity: 0.3;
42
- }
43
-
44
- .mx-button--full-width {
45
- inline-size: 100%;
46
- justify-content: center;
47
- }
48
-
49
- .mx-button--large {
50
- --vertical-padding: var(--spacing-s);
51
- --horizontal-padding: var(--spacing-l);
52
- }
53
-
54
- .mx-button--small {
55
- --button-font-size: var(--font-size-s);
56
- --vertical-padding: var(--spacing-xxxs);
57
- --horizontal-padding: var(--spacing-s);
58
- }
59
-
60
- .mx-button--icon-only {
61
- inline-size: var(--spacing-xl);
62
- block-size: var(--spacing-xl);
63
- padding: 0;
64
- border-radius: var(--border-radius-round);
65
- overflow: hidden;
66
- flex-wrap: wrap;
67
- }
68
-
69
- .mx-button--icon-only::before {
70
- inline-size: 100%;
71
- block-size: 100%;
72
- -webkit-mask-size: var(--spacing-s);
73
- mask-size: var(--spacing-s);
74
- }
75
-
76
- .mx-button--icon-only:has(.mx-icon) {
77
- align-content: center;
78
- justify-content: center;
79
- place-content: center;
80
- }
81
- }
82
-
83
- /**
84
- * Buttons
85
- */
86
-
87
- @layer design-system.atoms {
88
- .mx-button--dark {
89
- --button-line-colour: var(--colour-primary);
90
- --background: var(--colour-primary);
91
- --foreground: var(--colour-foreground-reverse);
92
- }
93
-
94
- .mx-button--dark.button--outline {
95
- --background: transparent;
96
- --foreground: var(--colour-primary);
97
- }
98
-
99
- .mx-button--light {
100
- border: transparent;
101
- color: var(--link-colour, var(--colour-primary));
102
- text-decoration-line: underline;
103
- }
104
-
105
- .mx-button--light:hover {
106
- text-decoration-line: underline;
107
- }
108
-
109
- .mx-button--destructive {
110
- --button-line-colour: var(--colour-error-foreground);
111
- --background: var(--colour-error-foreground);
112
- --foreground: var(--colour-foreground-reverse);
113
- }
114
-
115
- .mx-button--destructive.button--outline {
116
- --background: transparent;
117
- --foreground: var(--colour-error-foreground);
118
- }
119
-
120
- .mx-button--white {
121
- --button-line-colour: var(--colour-foreground-reverse);
122
- --background: var(--colour-foreground-reverse);
123
- --foreground: var(--colour-foreground);
124
- }
125
-
126
- .mx-button--white.button--outline {
127
- --background: transparent;
128
- --foreground: var(--colour-foreground-reverse);
129
- }
130
- }
131
-
132
- /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9idXR0b25zLmNzcyIsIl9idXR0b25zLXN0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLDJCQUFxQjtJQUNyQix3QkFBb0I7O0lBRXBCLG9CQUFvQjtJQUNwQiw2QkFBd0I7SUFBeEIsd0JBQXdCO0lBQ3hCLHdDQUF3QztJQUN4QyxvREFBb0Q7SUFDcEQsb0NBQW9DO0lBQ3BDLCtCQUErQjtJQUMvQixrQ0FBa0M7SUFDbEM7cURBQ2lEO0lBRGpEO3FEQUNpRDtJQUNqRCxvREFBb0Q7SUFDcEQsMERBQTBEO0lBQzFELDJEQUEyRDtJQUMzRCw2REFBNkQ7SUFDN0Qsa0RBQWtEO0lBQ2xELDBCQUEwQjtJQUMxQjs7O3VCQUdtQjtFQVdyQjs7SUFURTtNQUNFLGVBQWU7TUFDZiwwQkFBMEI7SUFDNUI7O0lBRUE7TUFDRSxtQkFBbUI7TUFDbkIsWUFBWTtJQUNkOztFQUdGO0lBQ0UsaUJBQWlCO0lBQ2pCLHVCQUF1QjtFQUN6Qjs7RUFFQTtJQUNFLG9DQUFvQztJQUNwQyxzQ0FBc0M7RUFDeEM7O0VBRUE7SUFDRSxzQ0FBc0M7SUFDdEMsdUNBQXVDO0lBQ3ZDLHNDQUFzQztFQUN4Qzs7RUFFQTtJQUNFLDhCQUE4QjtJQUM5Qiw2QkFBNkI7SUFDN0IsVUFBVTtJQUNWLHlDQUF5QztJQUN6QyxnQkFBZ0I7SUFDaEIsZUFBZTtFQVdqQjs7SUFURTtNQUNFLGlCQUFpQjtNQUNqQixnQkFBZ0I7TUFDaEIsbUNBQTJCO2NBQTNCLDJCQUEyQjtJQUM3Qjs7SUFFQTtNQUNFLHFCQUFxQjtNQUFyQix1QkFBcUI7TUFBckIscUJBQXFCO0lBQ3ZCO0FBRUo7O0FDMUVBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSwyQ0FBMkM7SUFDM0MsbUNBQW1DO0lBQ25DLDhDQUE4QztFQU1oRDs7SUFKRTtNQUNFLHlCQUF5QjtNQUN6QixtQ0FBbUM7SUFDckM7O0VBR0Y7SUFDRSxtQkFBbUI7SUFDbkIsZ0RBQWdEO0lBQ2hELCtCQUErQjtFQUtqQzs7SUFIRTtNQUNFLCtCQUErQjtJQUNqQzs7RUFHRjtJQUNFLG9EQUFvRDtJQUNwRCw0Q0FBNEM7SUFDNUMsOENBQThDO0VBTWhEOztJQUpFO01BQ0UseUJBQXlCO01BQ3pCLDRDQUE0QztJQUM5Qzs7RUFHRjtJQUNFLHNEQUFzRDtJQUN0RCw4Q0FBOEM7SUFDOUMsc0NBQXNDO0VBTXhDOztJQUpFO01BQ0UseUJBQXlCO01BQ3pCLDhDQUE4QztJQUNoRDtBQUVKIiwiZmlsZSI6ImJ1dHRvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEJ1dHRvbnNcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5hdG9tcyB7XG4gIC5teC1idXR0b24ge1xuICAgIC0tb3V0bGluZS1vZmZzZXQ6IDFweDtcbiAgICAtLW91dGxpbmUtd2lkdGg6IDRweDtcblxuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGlubGluZS1zaXplOiBmaXQtY29udGVudDtcbiAgICBnYXA6IHZhcigtLWJ1dHRvbi1nYXAsIHZhcigtLXNwYWNpbmctcykpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tYnV0dG9uLWZvbnQtc2l6ZSwgdmFyKC0tZm9udC1zaXplKSk7XG4gICAgZm9udC13ZWlnaHQ6IHZhcigtLWZvbnQtd2VpZ2h0LWJvbGQpO1xuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseSk7XG4gICAgbGluZS1oZWlnaHQ6IHZhcigtLWxpbmUtaGVpZ2h0LXVpKTtcbiAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDJweCkgc29saWRcbiAgICAgIHZhcigtLWJ1dHRvbi1saW5lLWNvbG91ciwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLXJhZGl1cywgdmFyKC0tYm9yZGVyLXJhZGl1cy1sKSk7XG4gICAgcGFkZGluZy1ibG9jazogdmFyKC0tdmVydGljYWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy14eHMpKTtcbiAgICBwYWRkaW5nLWlubGluZTogdmFyKC0taG9yaXpvbnRhbC1wYWRkaW5nLCB2YXIoLS1zcGFjaW5nLW0pKTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kLCB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCkpO1xuICAgIGNvbG9yOiB2YXIoLS1mb3JlZ3JvdW5kLCB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCkpO1xuICAgIHRleHQtZGVjb3JhdGlvbi1saW5lOiBub25lO1xuICAgIHRyYW5zaXRpb246XG4gICAgICAwLjJzIGNvbG9yLFxuICAgICAgMC4ycyBiYWNrZ3JvdW5kLWNvbG9yLFxuICAgICAgMC4ycyBib3JkZXItY29sb3I7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgIHRleHQtZGVjb3JhdGlvbi1saW5lOiBub25lO1xuICAgIH1cblxuICAgICY6ZGlzYWJsZWQge1xuICAgICAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbiAgICAgIG9wYWNpdHk6IDAuMztcbiAgICB9XG4gIH1cblxuICAubXgtYnV0dG9uLS1mdWxsLXdpZHRoIHtcbiAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgfVxuXG4gIC5teC1idXR0b24tLWxhcmdlIHtcbiAgICAtLXZlcnRpY2FsLXBhZGRpbmc6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgLS1ob3Jpem9udGFsLXBhZGRpbmc6IHZhcigtLXNwYWNpbmctbCk7XG4gIH1cblxuICAubXgtYnV0dG9uLS1zbWFsbCB7XG4gICAgLS1idXR0b24tZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtcyk7XG4gICAgLS12ZXJ0aWNhbC1wYWRkaW5nOiB2YXIoLS1zcGFjaW5nLXh4eHMpO1xuICAgIC0taG9yaXpvbnRhbC1wYWRkaW5nOiB2YXIoLS1zcGFjaW5nLXMpO1xuICB9XG5cbiAgLm14LWJ1dHRvbi0taWNvbi1vbmx5IHtcbiAgICBpbmxpbmUtc2l6ZTogdmFyKC0tc3BhY2luZy14bCk7XG4gICAgYmxvY2stc2l6ZTogdmFyKC0tc3BhY2luZy14bCk7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLXJvdW5kKTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIGZsZXgtd3JhcDogd3JhcDtcblxuICAgICY6OmJlZm9yZSB7XG4gICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgIGJsb2NrLXNpemU6IDEwMCU7XG4gICAgICBtYXNrLXNpemU6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgfVxuXG4gICAgJjpoYXMoLm14LWljb24pIHtcbiAgICAgIHBsYWNlLWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB9XG4gIH1cbn1cbiIsIi8qKlxuICogQnV0dG9uc1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmF0b21zIHtcbiAgLm14LWJ1dHRvbi0tZGFyayB7XG4gICAgLS1idXR0b24tbGluZS1jb2xvdXI6IHZhcigtLWNvbG91ci1wcmltYXJ5KTtcbiAgICAtLWJhY2tncm91bmQ6IHZhcigtLWNvbG91ci1wcmltYXJ5KTtcbiAgICAtLWZvcmVncm91bmQ6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kLXJldmVyc2UpO1xuXG4gICAgJi5idXR0b24tLW91dGxpbmUge1xuICAgICAgLS1iYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLXByaW1hcnkpO1xuICAgIH1cbiAgfVxuXG4gIC5teC1idXR0b24tLWxpZ2h0IHtcbiAgICBib3JkZXI6IHRyYW5zcGFyZW50O1xuICAgIGNvbG9yOiB2YXIoLS1saW5rLWNvbG91ciwgdmFyKC0tY29sb3VyLXByaW1hcnkpKTtcbiAgICB0ZXh0LWRlY29yYXRpb24tbGluZTogdW5kZXJsaW5lO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICB0ZXh0LWRlY29yYXRpb24tbGluZTogdW5kZXJsaW5lO1xuICAgIH1cbiAgfVxuXG4gIC5teC1idXR0b24tLWRlc3RydWN0aXZlIHtcbiAgICAtLWJ1dHRvbi1saW5lLWNvbG91cjogdmFyKC0tY29sb3VyLWVycm9yLWZvcmVncm91bmQpO1xuICAgIC0tYmFja2dyb3VuZDogdmFyKC0tY29sb3VyLWVycm9yLWZvcmVncm91bmQpO1xuICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZSk7XG5cbiAgICAmLmJ1dHRvbi0tb3V0bGluZSB7XG4gICAgICAtLWJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZXJyb3ItZm9yZWdyb3VuZCk7XG4gICAgfVxuICB9XG5cbiAgLm14LWJ1dHRvbi0td2hpdGUge1xuICAgIC0tYnV0dG9uLWxpbmUtY29sb3VyOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1yZXZlcnNlKTtcbiAgICAtLWJhY2tncm91bmQ6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kLXJldmVyc2UpO1xuICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQpO1xuXG4gICAgJi5idXR0b24tLW91dGxpbmUge1xuICAgICAgLS1iYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZSk7XG4gICAgfVxuICB9XG59XG4iXX0= */
@@ -1,11 +0,0 @@
1
- @layer design-system.components {
2
- .mx-callout {
3
- padding-inline-start: var(--line-gap, var(--gap));
4
- border-inline-start: 6px solid
5
- var(--line-colour, var(--colour-primary));
6
- border-inline-start: var(--line-width, 6px) solid
7
- var(--line-colour, var(--colour-primary));
8
- }
9
- }
10
-
11
- /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGxvdXQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0U7SUFDRSxpREFBaUQ7SUFDakQ7K0NBQzJDO0lBRDNDOytDQUMyQztFQUM3QztBQUNGIiwiZmlsZSI6ImNhbGxvdXQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1jYWxsb3V0IHtcbiAgICBwYWRkaW5nLWlubGluZS1zdGFydDogdmFyKC0tbGluZS1nYXAsIHZhcigtLWdhcCkpO1xuICAgIGJvcmRlci1pbmxpbmUtc3RhcnQ6IHZhcigtLWxpbmUtd2lkdGgsIDZweCkgc29saWRcbiAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItcHJpbWFyeSkpO1xuICB9XG59XG4iXX0= */
@@ -1,149 +0,0 @@
1
- /**
2
- * Content Card
3
- */
4
-
5
- @layer design-system.components {
6
- .mx-card {
7
- display: grid;
8
- grid-gap: var(--card-gap, var(--gap));
9
- gap: var(--card-gap, var(--gap));
10
- }
11
-
12
- .mx-card[class*="mx-background--"] {
13
- border-radius: var(--border-radius);
14
- }
15
-
16
- .mx-card[class*="mx-background--"] .mx-card__content {
17
- padding-inline: var(--content-min-spacing, var(--spacing-s));
18
- padding-block-end: var(--content-min-spacing, var(--spacing-s));
19
- }
20
-
21
- @container (min-width: 720px) {
22
-
23
- .mx-card[class*="mx-background--"] .mx-card__content {
24
- --content-min-spacing: var(--content-max-spacing, var(--spacing-m));
25
- }
26
- }
27
-
28
- .mx-card:has(.mx-card__media) {
29
- grid-template: "media" "content" 1fr / 1fr;
30
- }
31
-
32
- @container (min-width: 720px) {
33
-
34
- .mx-card:has(.mx-card__media) {
35
- --card-gap: var(--gap-l);
36
-
37
- grid-template: "media content" 1fr / 1fr 1fr;
38
- align-items: center;
39
- }
40
-
41
- .mx-card.mx-card--reversed:has(.mx-card__media) {
42
- grid-template-areas: "content media";
43
- }
44
-
45
- .mx-card:has(.mx-card__media) .mx-card__content {
46
- justify-content: center;
47
- }
48
- }
49
-
50
- @container (min-width: 946px) {
51
-
52
- .mx-card:has(.mx-card__media) {
53
- --card-gap: 6rem;
54
- }
55
- }
56
- @container (min-width: 720px) {
57
- .mx-card[class*="mx-background--"]:has(.mx-card__media) .mx-card__content {
58
- padding-block-start: var(--content-min-spacing, var(--spacing-s));
59
- }
60
-
61
- .mx-card[class*="mx-background--"]:has(.mx-card__media):where(:not(.mx-card--reversed)) .mx-card__content {
62
- padding-inline-start: 0;
63
- }
64
-
65
- .mx-card.mx-card--reversed[class*="mx-background--"]:has(.mx-card__media) .mx-card__content {
66
- padding-inline-end: 0;
67
- }
68
- }
69
-
70
- .mx-card:has(.mx-card__media) .mx-card__content {
71
- grid-area: content;
72
- }
73
-
74
- .mx-card:has(.mx-card__media) :is(.mx-card__media, figure) {
75
- grid-area: media;
76
- display: grid;
77
- margin: auto;
78
- position: relative;
79
- inline-size: 100%;
80
- }
81
-
82
- .mx-card:has(.mx-card__media) :is(.mx-card__media, figure) img {
83
- aspect-ratio: var(--ratio);
84
- border-radius: var(--border-radius);
85
- -o-object-fit: cover;
86
- object-fit: cover;
87
- display: block;
88
- }
89
-
90
- .mx-card:has(.mx-card__media) :is(.mx-card__media, figure) .mx-skeleton--bg {
91
- aspect-ratio: var(--ratio);
92
- }
93
-
94
- .mx-card:has(.mx-card__media) .mx-card__icon {
95
- grid-area: media;
96
- }
97
-
98
- .mx-card .mx-link-list {
99
- inline-size: 100%;
100
- }
101
- }
102
-
103
- /**
104
- * Content Card Grid
105
- */
106
-
107
- @layer design-system.components {
108
- .mx-grid:has(> *:nth-child(2):last-child)
109
- > :is(.mx-card, .mx-container:has(.mx-card)) {
110
- inline-size: 100%;
111
- max-inline-size: 37ch;
112
- max-inline-size: var(--max-card-width, 37ch);
113
- margin-inline: auto;
114
- }
115
- }
116
-
117
- /**
118
- * Content Card Linked
119
- */
120
-
121
- @layer design-system.components {
122
- a.mx-card[href]:hover {
123
- color: inherit;
124
- }
125
-
126
- .mx-card--block {
127
- position: relative;
128
- }
129
-
130
- .mx-card--block:focus-within {
131
- border-radius: var(--border-radius);
132
- outline: var(--outline-width) var(--outline-style) var(--outline-color);
133
- outline-offset: 2px;
134
- }
135
- .mx-card--block :is(a[href], button):focus-visible {
136
- outline: none;
137
- }
138
-
139
- .mx-card--block a::after {
140
- content: "";
141
- position: absolute;
142
- inset-block-start: 0;
143
- inset-inline-start: 0;
144
- inline-size: 100%;
145
- block-size: 100%;
146
- }
147
- }
148
-
149
- /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcmQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxhQUFhO0lBQ2IscUNBQWdDO0lBQWhDLGdDQUFnQztFQW9GbEM7O0lBbEZFO01BQ0UsbUNBQW1DO0lBVXJDOztNQVJFO1FBQ0UsNERBQTREO1FBQzVELCtEQUErRDtNQUtqRTs7UUFIRTs7TUFKRjtVQUtJLG1FQUFtRTtNQUV2RTtRQURFOztJQUlKO01BQ0UsMENBQTBDO0lBK0Q1Qzs7TUE3REU7O0lBSEY7UUFJSSx3QkFBd0I7O1FBRXhCLDRDQUE0QztRQUM1QyxtQkFBbUI7SUF5RHZCOztRQXZESTtVQUNFLG9DQUFvQztRQUN0Qzs7UUFFQTtVQUNFLHVCQUF1QjtRQUN6QjtNQUNGOztNQUVBOztJQWxCRjtRQW1CSSxnQkFBZ0I7SUE2Q3BCO01BNUNFO1FBR0U7VUFDRTtZQUNFLGlFQUFpRTtVQUNuRTs7VUFFQTtZQUNFLHVCQUF1QjtVQUN6Qjs7VUFFQTtZQUNFLHFCQUFxQjtVQUN2QjtRQUNGOztNQUdGO1FBQ0Usa0JBQWtCO01BQ3BCOztNQUVBO1FBQ0UsZ0JBQWdCO1FBQ2hCLGFBQWE7UUFDYixZQUFZO1FBQ1osa0JBQWtCO1FBQ2xCLGlCQUFpQjtNQVluQjs7UUFWRTtVQUNFLDBCQUEwQjtVQUMxQixtQ0FBbUM7VUFDbkMsb0JBQWlCO2FBQWpCLGlCQUFpQjtVQUNqQixjQUFjO1FBQ2hCOztRQUVBO1VBQ0UsMEJBQTBCO1FBQzVCOztNQUdGO1FBQ0UsZ0JBQWdCO01BQ2xCOztJQUdGO01BQ0UsaUJBQWlCO0lBQ25CO0FBRUo7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRTs7SUFFRSxpQkFBaUI7SUFDakIscUJBQTRDO0lBQTVDLDRDQUE0QztJQUM1QyxtQkFBbUI7RUFDckI7QUFDRjs7QUFFQTs7RUFFRTs7QUFFRjtJQUVJO01BQ0UsY0FBYztJQUNoQjs7RUFHRjtJQUNFLGtCQUFrQjtFQXNCcEI7O0lBcEJFO01BQ0UsbUNBQW1DO01BQ25DLHVFQUF1RTtNQUN2RSxtQkFBbUI7SUFDckI7TUFHRTtRQUNFLGFBQWE7TUFDZjs7SUFHRjtNQUNFLFdBQVc7TUFDWCxrQkFBa0I7TUFDbEIsb0JBQW9CO01BQ3BCLHFCQUFxQjtNQUNyQixpQkFBaUI7TUFDakIsZ0JBQWdCO0lBQ2xCO0FBRUoiLCJmaWxlIjoiY2FyZC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvbnRlbnQgQ2FyZFxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtY2FyZCB7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBnYXA6IHZhcigtLWNhcmQtZ2FwLCB2YXIoLS1nYXApKTtcblxuICAgICZbY2xhc3MqPVwibXgtYmFja2dyb3VuZC0tXCJdIHtcbiAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpO1xuXG4gICAgICAmIC5teC1jYXJkX19jb250ZW50IHtcbiAgICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWNvbnRlbnQtbWluLXNwYWNpbmcsIHZhcigtLXNwYWNpbmctcykpO1xuICAgICAgICBwYWRkaW5nLWJsb2NrLWVuZDogdmFyKC0tY29udGVudC1taW4tc3BhY2luZywgdmFyKC0tc3BhY2luZy1zKSk7XG5cbiAgICAgICAgQGNvbnRhaW5lciAobWluLXdpZHRoOiB0b2tlbihcImJyZWFrcG9pbnQuY29udGVudENhcmRcIikpIHtcbiAgICAgICAgICAtLWNvbnRlbnQtbWluLXNwYWNpbmc6IHZhcigtLWNvbnRlbnQtbWF4LXNwYWNpbmcsIHZhcigtLXNwYWNpbmctbSkpO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgJjpoYXMoLm14LWNhcmRfX21lZGlhKSB7XG4gICAgICBncmlkLXRlbXBsYXRlOiBcIm1lZGlhXCIgXCJjb250ZW50XCIgMWZyIC8gMWZyO1xuXG4gICAgICBAY29udGFpbmVyIChtaW4td2lkdGg6IHRva2VuKFwiYnJlYWtwb2ludC5jb250ZW50Q2FyZFwiKSkge1xuICAgICAgICAtLWNhcmQtZ2FwOiB2YXIoLS1nYXAtbCk7XG5cbiAgICAgICAgZ3JpZC10ZW1wbGF0ZTogXCJtZWRpYSBjb250ZW50XCIgMWZyIC8gMWZyIDFmcjtcbiAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICAgICAmLm14LWNhcmQtLXJldmVyc2VkIHtcbiAgICAgICAgICBncmlkLXRlbXBsYXRlLWFyZWFzOiBcImNvbnRlbnQgbWVkaWFcIjtcbiAgICAgICAgfVxuXG4gICAgICAgICYgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIEBjb250YWluZXIgKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LmxcIikpIHtcbiAgICAgICAgLS1jYXJkLWdhcDogNnJlbTtcbiAgICAgIH1cblxuICAgICAgJltjbGFzcyo9XCJteC1iYWNrZ3JvdW5kLS1cIl0ge1xuICAgICAgICBAY29udGFpbmVyIChtaW4td2lkdGg6IHRva2VuKFwiYnJlYWtwb2ludC5jb250ZW50Q2FyZFwiKSkge1xuICAgICAgICAgICYgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICAgICAgcGFkZGluZy1ibG9jay1zdGFydDogdmFyKC0tY29udGVudC1taW4tc3BhY2luZywgdmFyKC0tc3BhY2luZy1zKSk7XG4gICAgICAgICAgfVxuXG4gICAgICAgICAgJjp3aGVyZSg6bm90KC5teC1jYXJkLS1yZXZlcnNlZCkpIC5teC1jYXJkX19jb250ZW50IHtcbiAgICAgICAgICAgIHBhZGRpbmctaW5saW5lLXN0YXJ0OiAwO1xuICAgICAgICAgIH1cblxuICAgICAgICAgICYubXgtY2FyZC0tcmV2ZXJzZWQgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICAgICAgcGFkZGluZy1pbmxpbmUtZW5kOiAwO1xuICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmIC5teC1jYXJkX19jb250ZW50IHtcbiAgICAgICAgZ3JpZC1hcmVhOiBjb250ZW50O1xuICAgICAgfVxuXG4gICAgICAmIDppcygubXgtY2FyZF9fbWVkaWEsIGZpZ3VyZSkge1xuICAgICAgICBncmlkLWFyZWE6IG1lZGlhO1xuICAgICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgICBtYXJnaW46IGF1dG87XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgICAgaW5saW5lLXNpemU6IDEwMCU7XG5cbiAgICAgICAgJiBpbWcge1xuICAgICAgICAgIGFzcGVjdC1yYXRpbzogdmFyKC0tcmF0aW8pO1xuICAgICAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpO1xuICAgICAgICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuICAgICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICB9XG5cbiAgICAgICAgJiAubXgtc2tlbGV0b24tLWJnIHtcbiAgICAgICAgICBhc3BlY3QtcmF0aW86IHZhcigtLXJhdGlvKTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmIC5teC1jYXJkX19pY29uIHtcbiAgICAgICAgZ3JpZC1hcmVhOiBtZWRpYTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmIC5teC1saW5rLWxpc3Qge1xuICAgICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgfVxuICB9XG59XG5cbi8qKlxuICogQ29udGVudCBDYXJkIEdyaWRcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LWdyaWQ6aGFzKD4gKjpudGgtY2hpbGQoMik6bGFzdC1jaGlsZClcbiAgICA+IDppcygubXgtY2FyZCwgLm14LWNvbnRhaW5lcjpoYXMoLm14LWNhcmQpKSB7XG4gICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgbWF4LWlubGluZS1zaXplOiB2YXIoLS1tYXgtY2FyZC13aWR0aCwgMzdjaCk7XG4gICAgbWFyZ2luLWlubGluZTogYXV0bztcbiAgfVxufVxuXG4vKipcbiAqIENvbnRlbnQgQ2FyZCBMaW5rZWRcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgYVtocmVmXS5teC1jYXJkIHtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGNvbG9yOiBpbmhlcml0O1xuICAgIH1cbiAgfVxuXG4gIC5teC1jYXJkLS1ibG9jayB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgJjpmb2N1cy13aXRoaW4ge1xuICAgICAgYm9yZGVyLXJhZGl1czogdmFyKC0tYm9yZGVyLXJhZGl1cyk7XG4gICAgICBvdXRsaW5lOiB2YXIoLS1vdXRsaW5lLXdpZHRoKSB2YXIoLS1vdXRsaW5lLXN0eWxlKSB2YXIoLS1vdXRsaW5lLWNvbG9yKTtcbiAgICAgIG91dGxpbmUtb2Zmc2V0OiAycHg7XG4gICAgfVxuXG4gICAgJiA6aXMoYVtocmVmXSwgYnV0dG9uKSB7XG4gICAgICAmOmZvY3VzLXZpc2libGUge1xuICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgfVxuICAgIH1cblxuICAgICYgYTo6YWZ0ZXIge1xuICAgICAgY29udGVudDogXCJcIjtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGluc2V0LWJsb2NrLXN0YXJ0OiAwO1xuICAgICAgaW5zZXQtaW5saW5lLXN0YXJ0OiAwO1xuICAgICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgICBibG9jay1zaXplOiAxMDAlO1xuICAgIH1cbiAgfVxufVxuIl19 */
@@ -1,124 +0,0 @@
1
- import { m as makeAnchor } from "./utilities-B4YZb689.js";
2
- class DisclosureWidget {
3
- constructor(trigger, element, overrides, context = document) {
4
- this.init = () => {
5
- if (Object.prototype.hasOwnProperty.call(this.trigger, "disclosureWidget"))
6
- return;
7
- const { attribute, setInitialAttribute } = this.options;
8
- this.trigger.disclosureWidget = this;
9
- if (setInitialAttribute) this.element.setAttribute(attribute, "");
10
- this.attach();
11
- };
12
- this.handleToggle = () => {
13
- const { attribute, setInitialAttribute } = this.options;
14
- this.element.toggleAttribute(attribute);
15
- const hasAttribute = this.element.hasAttribute(attribute);
16
- this.isOpen = setInitialAttribute ? !hasAttribute : hasAttribute;
17
- this.trigger.setAttribute("aria-expanded", String(this.isOpen));
18
- const newEvent = new CustomEvent(
19
- "disclosure-toggle",
20
- {
21
- bubbles: true,
22
- cancelable: true,
23
- detail: {
24
- isOpen: this.isOpen,
25
- id: this.id,
26
- options: this.options,
27
- target: this.element
28
- }
29
- }
30
- );
31
- this.trigger.dispatchEvent(newEvent);
32
- };
33
- this.handleMouse = (event) => {
34
- const { currentTarget, type, relatedTarget } = event;
35
- if (type === "mouseover" || type === "mouseout") {
36
- const triggerParent = this.trigger.parentNode;
37
- if (triggerParent !== currentTarget || triggerParent.contains(relatedTarget))
38
- return;
39
- } else if (this.trigger !== currentTarget) return;
40
- const { shouldPreventDefault } = this.options;
41
- this.handleToggle();
42
- if (shouldPreventDefault) {
43
- event.preventDefault();
44
- event.stopPropagation();
45
- }
46
- };
47
- this.handleKeyboard = (event) => {
48
- const { key, target } = event;
49
- if (this.trigger !== target) return;
50
- const { isOpen } = this;
51
- const { shouldPreventDefault } = this.options;
52
- switch (key) {
53
- case "ArrowDown":
54
- case "Enter":
55
- if (!isOpen) this.handleToggle();
56
- if (shouldPreventDefault) event.preventDefault();
57
- break;
58
- case "ArrowUp":
59
- case "Escape":
60
- if (isOpen) this.handleToggle();
61
- if (shouldPreventDefault) event.preventDefault();
62
- break;
63
- }
64
- };
65
- this.attach = () => {
66
- if (this.attached) return;
67
- const { clickEvent } = this.options;
68
- if (clickEvent === "mouseover") {
69
- const parent = this.trigger.parentNode;
70
- parent.addEventListener("mouseover", this.handleMouse);
71
- parent.addEventListener("mouseout", this.handleMouse);
72
- } else {
73
- this.trigger.addEventListener("click", this.handleMouse);
74
- }
75
- this.trigger.addEventListener("keydown", this.handleKeyboard);
76
- this.trigger.setAttribute("aria-expanded", "false");
77
- if (!this.trigger.hasAttribute("aria-controls"))
78
- this.trigger.setAttribute("aria-controls", this.id);
79
- this.attached = true;
80
- };
81
- this.detach = () => {
82
- if (!this.attached) return;
83
- if (this.isOpen) {
84
- this.handleToggle();
85
- }
86
- const { clickEvent } = this.options;
87
- if (clickEvent === "mouseover") {
88
- const parent = this.trigger.parentNode;
89
- parent.removeEventListener("mouseover", this.handleMouse);
90
- parent.removeEventListener("mouseout", this.handleMouse);
91
- } else {
92
- this.trigger.removeEventListener("click", this.handleMouse);
93
- }
94
- this.trigger.removeEventListener("keydown", this.handleKeyboard);
95
- this.trigger.removeAttribute("aria-expanded");
96
- this.attached = false;
97
- };
98
- this.generatedId = () => {
99
- const string = this.trigger?.textContent?.trim();
100
- return !string ? "" : makeAnchor(string);
101
- };
102
- if (!trigger) {
103
- throw new Error("toggle is required.");
104
- }
105
- if (!element) {
106
- throw new Error("element is required.");
107
- }
108
- const options = {
109
- attribute: "inert",
110
- shouldPreventDefault: true,
111
- setInitialAttribute: true,
112
- clickEvent: "click"
113
- };
114
- this.options = { ...options, ...overrides };
115
- this.context = context || document;
116
- this.trigger = trigger;
117
- this.element = element;
118
- this.id = this.element.id || this.generatedId();
119
- }
120
- }
121
- export {
122
- DisclosureWidget as D
123
- };
124
- //# sourceMappingURL=disclosure-widget-CQLPJ8Ta.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"disclosure-widget-CQLPJ8Ta.js","sources":["../../../src/Utility/Elements/disclosure-widget.ts"],"sourcesContent":["/**\n * Class for a generic Disclosure Widget.\n */\nimport { makeAnchor } from \"../utilities\"\n\ntype DisclosureWidgetOptions = {\n attribute?: string\n shouldPreventDefault?: boolean\n setInitialAttribute?: boolean\n clickEvent?: \"click\" | \"mouseover\"\n}\n\nexport type DisclosureWidgetEvent = {\n isOpen: boolean\n id: string\n options: DisclosureWidgetOptions\n target: Element\n}\n\nexport default class DisclosureWidget {\n options: DisclosureWidgetOptions\n context: Document | Element\n trigger: Element & { disclosureWidget?: DisclosureWidget }\n element: Element\n id: string\n isOpen?: boolean\n attached?: boolean\n\n constructor(\n trigger: Element,\n element: Element,\n overrides?: DisclosureWidgetOptions,\n context: Element | Document = document,\n ) {\n if (!trigger) {\n throw new Error(\"toggle is required.\")\n }\n if (!element) {\n throw new Error(\"element is required.\")\n }\n const options: DisclosureWidgetOptions = {\n attribute: \"inert\",\n shouldPreventDefault: true,\n setInitialAttribute: true,\n clickEvent: \"click\",\n }\n\n this.options = { ...options, ...overrides }\n this.context = context || document\n this.trigger = trigger\n this.element = element\n this.id = this.element.id || this.generatedId()\n }\n\n init = (): void => {\n if (Object.prototype.hasOwnProperty.call(this.trigger, \"disclosureWidget\"))\n return\n const { attribute, setInitialAttribute } = this.options\n this.trigger.disclosureWidget = this\n if (setInitialAttribute) this.element.setAttribute(attribute, \"\")\n this.attach()\n }\n\n handleToggle = (): void => {\n const { attribute, setInitialAttribute } = this.options\n this.element.toggleAttribute(attribute)\n const hasAttribute: boolean = this.element.hasAttribute(attribute)\n this.isOpen = setInitialAttribute ? !hasAttribute : hasAttribute\n this.trigger.setAttribute(\"aria-expanded\", String(this.isOpen))\n const newEvent: CustomEvent<DisclosureWidgetEvent> = new CustomEvent(\n \"disclosure-toggle\",\n {\n bubbles: true,\n cancelable: true,\n detail: {\n isOpen: this.isOpen,\n id: this.id,\n options: this.options,\n target: this.element,\n },\n },\n )\n this.trigger.dispatchEvent(newEvent)\n }\n\n handleMouse = (event: MouseEvent): void => {\n const { currentTarget, type, relatedTarget } = event\n\n if (type === \"mouseover\" || type === \"mouseout\") {\n const triggerParent = this.trigger.parentNode\n if (\n triggerParent !== currentTarget ||\n triggerParent.contains(relatedTarget as HTMLElement)\n )\n return\n } else if (this.trigger !== currentTarget) return\n\n const { shouldPreventDefault } = this.options\n this.handleToggle()\n if (shouldPreventDefault) {\n event.preventDefault()\n event.stopPropagation()\n }\n }\n\n handleKeyboard = (event: KeyboardEvent): void => {\n const { key, target } = event\n if (this.trigger !== target) return\n const { isOpen } = this\n const { shouldPreventDefault } = this.options\n\n switch (key) {\n // Down/Enter should open it.\n case \"ArrowDown\":\n case \"Enter\":\n if (!isOpen) this.handleToggle()\n if (shouldPreventDefault) event.preventDefault()\n break\n\n // Up/Esc should close it.\n case \"ArrowUp\":\n case \"Escape\":\n if (isOpen) this.handleToggle()\n if (shouldPreventDefault) event.preventDefault()\n break\n\n default:\n break\n }\n }\n\n attach = (): void => {\n if (this.attached) return\n const { clickEvent } = this.options\n if (clickEvent === \"mouseover\") {\n const parent = this.trigger.parentNode\n parent.addEventListener(\"mouseover\", this.handleMouse)\n parent.addEventListener(\"mouseout\", this.handleMouse)\n } else {\n this.trigger.addEventListener(\"click\", this.handleMouse)\n }\n this.trigger.addEventListener(\"keydown\", this.handleKeyboard)\n\n this.trigger.setAttribute(\"aria-expanded\", \"false\")\n if (!this.trigger.hasAttribute(\"aria-controls\"))\n this.trigger.setAttribute(\"aria-controls\", this.id)\n this.attached = true\n }\n\n detach = (): void => {\n if (!this.attached) return\n if (this.isOpen) {\n this.handleToggle()\n }\n const { clickEvent } = this.options\n if (clickEvent === \"mouseover\") {\n const parent = this.trigger.parentNode\n parent.removeEventListener(\"mouseover\", this.handleMouse)\n parent.removeEventListener(\"mouseout\", this.handleMouse)\n } else {\n this.trigger.removeEventListener(\"click\", this.handleMouse)\n }\n this.trigger.removeEventListener(\"keydown\", this.handleKeyboard)\n\n this.trigger.removeAttribute(\"aria-expanded\")\n this.attached = false\n }\n\n generatedId = (): string => {\n const string: string | undefined = this.trigger?.textContent?.trim()\n return !string ? \"\" : makeAnchor(string)\n }\n}\n"],"names":[],"mappings":"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"}
@@ -1,132 +0,0 @@
1
- import { m as makeAnchor } from "./utilities-B4YZb689.js";
2
- import { K as Keyboard } from "./keyboard-C73DHu0c.js";
3
- class DropMenu extends HTMLElement {
4
- constructor() {
5
- super();
6
- this.keyboard = new Keyboard();
7
- this.handleSelect = (event) => {
8
- const target = event.target;
9
- this.items.forEach((item) => {
10
- if (!(item instanceof HTMLButtonElement)) return;
11
- item.setAttribute("aria-checked", String(item === target));
12
- });
13
- const newEvent = new CustomEvent("drop-menu-select", {
14
- bubbles: true,
15
- cancelable: true,
16
- detail: {
17
- event,
18
- target
19
- }
20
- });
21
- this.menu.dispatchEvent(newEvent);
22
- if (this.closeOnClick) this.menu.togglePopover();
23
- };
24
- this.handleToggle = ({ newState }) => {
25
- const handleClose = () => this.menu.togglePopover();
26
- if (newState === "open") {
27
- this.keyboard.attachPopup(this.menu.id, handleClose);
28
- } else {
29
- this.keyboard.detachPopup(this.menu.id);
30
- }
31
- };
32
- this.attachKeyboardMenu = () => {
33
- this.keyboard.attachMenu(this.menu, this.items);
34
- };
35
- this.detachKeyboardMenu = () => {
36
- this.keyboard.detachMenu();
37
- };
38
- this.generatedId = () => {
39
- const string = this.trigger?.textContent?.trim();
40
- return !string ? "" : makeAnchor(string);
41
- };
42
- this.internals_ = this.attachInternals();
43
- this.controller = new AbortController();
44
- }
45
- async connectedCallback() {
46
- if (!this.menu || !this.trigger) return;
47
- if (!("anchorName" in document.documentElement.style)) {
48
- const { default: Polyfills } = await import("./polyfills-CJ5uTmUJ.js");
49
- new Polyfills(this.menu);
50
- }
51
- if (!Object.hasOwn(HTMLElement, "popover")) {
52
- await import("./popover-wbPSyFRj.js");
53
- }
54
- this.closeOnClick = this.hasAttribute("closeonclick");
55
- const { signal } = this.controller;
56
- document.addEventListener(
57
- "click",
58
- (event) => {
59
- const { target } = event;
60
- if (target !== this.menu && ![...this.items].includes(
61
- target
62
- ))
63
- return;
64
- this.handleSelect(event);
65
- event.preventDefault();
66
- },
67
- {
68
- signal
69
- }
70
- );
71
- document.addEventListener(
72
- "keydown",
73
- (event) => {
74
- const { target, key } = event;
75
- if (target !== this.menu && ![...this.items].includes(
76
- target
77
- ))
78
- return;
79
- if (key === "Enter") this.handleSelect(event);
80
- event.preventDefault();
81
- },
82
- {
83
- signal
84
- }
85
- );
86
- this.keyboard.attachEventListeners(signal);
87
- this.menu.addEventListener("focusin", this.attachKeyboardMenu, {
88
- signal
89
- });
90
- this.menu.addEventListener("focusout", this.detachKeyboardMenu, {
91
- signal
92
- });
93
- this.menu.addEventListener("toggle", this.handleToggle, {
94
- signal
95
- });
96
- }
97
- disconnectedCallback() {
98
- this.controller.abort();
99
- this.keyboard.detachMenu();
100
- }
101
- get menu() {
102
- const menu = this.querySelector("[popover]");
103
- if (!menu) {
104
- throw new Error(`${this.localName} must contain a <div popover> element.`);
105
- }
106
- menu.id = menu.id || this.generatedId();
107
- return menu;
108
- }
109
- get items() {
110
- const items = this.menu.querySelectorAll(":scope > *");
111
- if (!items) {
112
- throw new Error(`${this.localName} must contain some menu items.`);
113
- }
114
- return items;
115
- }
116
- get trigger() {
117
- const trigger = this.querySelector(
118
- `[popovertarget=${this.menu?.id}]`
119
- );
120
- if (!trigger) {
121
- throw new Error(
122
- `${this.localName} must contain a <button popovertarget="${this.menu.id}">`
123
- );
124
- }
125
- return trigger;
126
- }
127
- }
128
- customElements.define("mx-dropmenu", DropMenu);
129
- export {
130
- DropMenu as D
131
- };
132
- //# sourceMappingURL=drop-menu.entry-BC6x9vst.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"drop-menu.entry-BC6x9vst.js","sources":["../../../src/Component/DropMenu/Elements/DropMenu.ts"],"sourcesContent":["/**\n * DropMenu\n * @file Create a DropMenu using the Popover and Anchor APIs\n */\n\nimport { Keyboard, makeAnchor } from \"../../../Utility/utilities\"\n\nexport type DropMenuEvent = CustomEvent<{\n event: MouseEvent | KeyboardEvent\n target: HTMLButtonElement | HTMLAnchorElement\n}>\n\nexport default class DropMenu extends HTMLElement {\n internals_: ElementInternals\n controller: AbortController\n keyboard: Keyboard = new Keyboard()\n closeOnClick: boolean\n\n constructor() {\n super()\n this.internals_ = this.attachInternals()\n this.controller = new AbortController()\n }\n\n async connectedCallback() {\n if (!this.menu || !this.trigger) return\n\n // Polyfill anchor (everywhere so far).\n if (!(\"anchorName\" in document.documentElement.style)) {\n const { default: Polyfills } = await import(\"../polyfills.js\")\n new Polyfills(this.menu) // eslint-disable-line no-new\n }\n // Polyfill popover (FF only)\n if (!Object.hasOwn(HTMLElement, \"popover\")) {\n await import(\"@oddbird/popover-polyfill\")\n }\n this.closeOnClick = this.hasAttribute(\"closeonclick\")\n\n const { signal }: AbortController = this.controller\n document.addEventListener(\n \"click\",\n (event: MouseEvent): void => {\n const { target } = event\n if (\n (target as HTMLElement) !== this.menu &&\n ![...this.items].includes(\n target as HTMLButtonElement | HTMLAnchorElement,\n )\n )\n return\n this.handleSelect(event)\n event.preventDefault()\n },\n {\n signal,\n },\n )\n\n document.addEventListener(\n \"keydown\",\n (event: KeyboardEvent): void => {\n const { target, key } = event\n if (\n (target as HTMLElement) !== this.menu &&\n ![...this.items].includes(\n target as HTMLButtonElement | HTMLAnchorElement,\n )\n )\n return\n if (key === \"Enter\") this.handleSelect(event)\n event.preventDefault()\n },\n {\n signal,\n },\n )\n\n this.keyboard.attachEventListeners(signal)\n this.menu.addEventListener(\"focusin\", this.attachKeyboardMenu, {\n signal,\n })\n this.menu.addEventListener(\"focusout\", this.detachKeyboardMenu, {\n signal,\n })\n this.menu.addEventListener(\"toggle\", this.handleToggle, {\n signal,\n })\n }\n\n disconnectedCallback(): void {\n this.controller.abort()\n this.keyboard.detachMenu()\n }\n\n handleSelect = (event: MouseEvent | KeyboardEvent): void => {\n const target = event.target as HTMLButtonElement | HTMLAnchorElement\n this.items.forEach(item => {\n if (!(item instanceof HTMLButtonElement)) return\n item.setAttribute(\"aria-checked\", String(item === target))\n })\n const newEvent: DropMenuEvent = new CustomEvent(\"drop-menu-select\", {\n bubbles: true,\n cancelable: true,\n detail: {\n event,\n target,\n },\n })\n this.menu.dispatchEvent(newEvent)\n if (this.closeOnClick) this.menu.togglePopover()\n }\n\n handleToggle = ({ newState }: ToggleEvent): void => {\n const handleClose = () => this.menu.togglePopover()\n if (newState === \"open\") {\n this.keyboard.attachPopup(this.menu.id, handleClose)\n } else {\n this.keyboard.detachPopup(this.menu.id)\n }\n }\n\n attachKeyboardMenu = (): void => {\n this.keyboard.attachMenu(this.menu, this.items)\n }\n\n detachKeyboardMenu = (): void => {\n this.keyboard.detachMenu()\n }\n\n get menu(): HTMLDivElement | null {\n const menu: HTMLDivElement | null = this.querySelector(\"[popover]\")\n if (!menu) {\n throw new Error(`${this.localName} must contain a <div popover> element.`)\n }\n menu.id = menu.id || this.generatedId()\n return menu\n }\n\n get items(): NodeListOf<HTMLButtonElement | HTMLAnchorElement> {\n const items: NodeListOf<HTMLButtonElement | HTMLAnchorElement> =\n this.menu.querySelectorAll(\":scope > *\")\n if (!items) {\n throw new Error(`${this.localName} must contain some menu items.`)\n }\n return items\n }\n\n get trigger(): HTMLButtonElement | null {\n const trigger: HTMLButtonElement | null = this.querySelector(\n `[popovertarget=${this.menu?.id}]`,\n )\n if (!trigger) {\n throw new Error(\n `${this.localName} must contain a <button popovertarget=\"${this.menu.id}\">`,\n )\n }\n return trigger\n }\n\n generatedId = (): string => {\n const string: string | undefined = this.trigger?.textContent?.trim()\n return !string ? \"\" : makeAnchor(string)\n }\n}\n\ncustomElements.define(\"mx-dropmenu\", DropMenu)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"mx-dropmenu\": DropMenu\n }\n}\n"],"names":[],"mappings":";;AAYA,MAAqB,iBAAiB,YAAY;AAAA,EAMhD,cAAc;AACN;AAJR,SAAA,WAAqB,IAAI;AA+EzB,SAAA,eAAe,CAAC,UAA4C;AAC1D,YAAM,SAAS,MAAM;AAChB,WAAA,MAAM,QAAQ,CAAQ,SAAA;AACrB,YAAA,EAAE,gBAAgB,mBAAoB;AAC1C,aAAK,aAAa,gBAAgB,OAAO,SAAS,MAAM,CAAC;AAAA,MAAA,CAC1D;AACK,YAAA,WAA0B,IAAI,YAAY,oBAAoB;AAAA,QAClE,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,QACF;AAAA,MAAA,CACD;AACI,WAAA,KAAK,cAAc,QAAQ;AAChC,UAAI,KAAK,aAAmB,MAAA,KAAK,cAAc;AAAA,IAAA;AAGlC,SAAA,eAAA,CAAC,EAAE,eAAkC;AAClD,YAAM,cAAc,MAAM,KAAK,KAAK,cAAc;AAClD,UAAI,aAAa,QAAQ;AACvB,aAAK,SAAS,YAAY,KAAK,KAAK,IAAI,WAAW;AAAA,MAAA,OAC9C;AACL,aAAK,SAAS,YAAY,KAAK,KAAK,EAAE;AAAA,MACxC;AAAA,IAAA;AAGF,SAAA,qBAAqB,MAAY;AAC/B,WAAK,SAAS,WAAW,KAAK,MAAM,KAAK,KAAK;AAAA,IAAA;AAGhD,SAAA,qBAAqB,MAAY;AAC/B,WAAK,SAAS;IAAW;AAiC3B,SAAA,cAAc,MAAc;AAC1B,YAAM,SAA6B,KAAK,SAAS,aAAa,KAAK;AACnE,aAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,IAAA;AA7IlC,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,MAAM,oBAAoB;AACxB,QAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,QAAS;AAGjC,QAAI,EAAE,gBAAgB,SAAS,gBAAgB,QAAQ;AACrD,YAAM,EAAE,SAAS,UAAc,IAAA,MAAM,OAAO,yBAAiB;AACzD,UAAA,UAAU,KAAK,IAAI;AAAA,IACzB;AAEA,QAAI,CAAC,OAAO,OAAO,aAAa,SAAS,GAAG;AAC1C,YAAM,OAAO,uBAA2B;AAAA,IAC1C;AACK,SAAA,eAAe,KAAK,aAAa,cAAc;AAE9C,UAAA,EAAE,OAAO,IAAqB,KAAK;AAChC,aAAA;AAAA,MACP;AAAA,MACA,CAAC,UAA4B;AACrB,cAAA,EAAE,OAAW,IAAA;AAEhB,YAAA,WAA2B,KAAK,QACjC,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;AAAA,UACf;AAAA,QACF;AAEA;AACF,aAAK,aAAa,KAAK;AACvB,cAAM,eAAe;AAAA,MACvB;AAAA,MACA;AAAA,QACE;AAAA,MACF;AAAA,IAAA;AAGO,aAAA;AAAA,MACP;AAAA,MACA,CAAC,UAA+B;AACxB,cAAA,EAAE,QAAQ,IAAQ,IAAA;AAErB,YAAA,WAA2B,KAAK,QACjC,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;AAAA,UACf;AAAA,QACF;AAEA;AACF,YAAI,QAAQ,QAAc,MAAA,aAAa,KAAK;AAC5C,cAAM,eAAe;AAAA,MACvB;AAAA,MACA;AAAA,QACE;AAAA,MACF;AAAA,IAAA;AAGG,SAAA,SAAS,qBAAqB,MAAM;AACzC,SAAK,KAAK,iBAAiB,WAAW,KAAK,oBAAoB;AAAA,MAC7D;AAAA,IAAA,CACD;AACD,SAAK,KAAK,iBAAiB,YAAY,KAAK,oBAAoB;AAAA,MAC9D;AAAA,IAAA,CACD;AACD,SAAK,KAAK,iBAAiB,UAAU,KAAK,cAAc;AAAA,MACtD;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;AAChB,SAAK,SAAS;EAChB;AAAA,EAqCA,IAAI,OAA8B;AAC1B,UAAA,OAA8B,KAAK,cAAc,WAAW;AAClE,QAAI,CAAC,MAAM;AACT,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,wCAAwC;AAAA,IAC3E;AACA,SAAK,KAAK,KAAK,MAAM,KAAK,YAAY;AAC/B,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,QAA2D;AAC7D,UAAM,QACJ,KAAK,KAAK,iBAAiB,YAAY;AACzC,QAAI,CAAC,OAAO;AACV,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,gCAAgC;AAAA,IACnE;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,UAAoC;AACtC,UAAM,UAAoC,KAAK;AAAA,MAC7C,kBAAkB,KAAK,MAAM,EAAE;AAAA,IAAA;AAEjC,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS,0CAA0C,KAAK,KAAK,EAAE;AAAA,MAAA;AAAA,IAE3E;AACO,WAAA;AAAA,EACT;AAMF;AAEA,eAAe,OAAO,eAAe,QAAQ;"}