@nldd/design-system 0.8.45 → 0.8.47

package/dist/utilities/page-section-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-section-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/page-section-mixin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAItD,KAAK,WAAW,CAAC,CAAC,GAAG,UAAU,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAE7D,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAClE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAC3B,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAC9D,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAyBhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,SAAS,WAAW,CAAC,UAAU,CAAC,EACrE,IAAI,EAAE,KAAK,GAkK0B,KAAK,GACzC,WAAW,CACV,UAAU,GAAG;IACZ,UAAU,EAAE,qBAAqB,CAAC;IAClC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CACD,CACF"}

package/dist/utilities/page-section-mixin.js

@@ -0,0 +1,239 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from 'lit/decorators.js';
+import { onColorSchemeChange } from './color-scheme-repaint.js';
+const BACKGROUND_TOKEN = {
+    base: 'var(--semantics-surfaces-background-color)',
+    tinted: 'var(--semantics-surfaces-tinted-background-color)',
+};
+function paddingToValue(size) {
+    if (size === undefined || size === '')
+        return null;
+    if (size === '0')
+        return '0';
+    return `var(--primitives-space-${size})`;
+}
+// Block-padding override scopes: base ('') + the sm/md/lg breakpoints. Each
+// scope reads its own props and writes `--_{scope-}padding-top/bottom`, which
+// the section CSS resolves per breakpoint (scope override → base override →
+// responsive default). The CSS var prefix is `${scope}-` (empty for base).
+const PADDING_SCOPES = ['', 'sm', 'md', 'lg'];
+const PADDING_KEYS = [
+    'paddingBlock', 'paddingTop', 'paddingBottom',
+    'smPaddingBlock', 'smPaddingTop', 'smPaddingBottom',
+    'mdPaddingBlock', 'mdPaddingTop', 'mdPaddingBottom',
+    'lgPaddingBlock', 'lgPaddingTop', 'lgPaddingBottom',
+];
+/**
+ * Shared surface controls for the page-section components. Adds three
+ * orthogonal capabilities, all written as inline host styles / custom
+ * properties (no per-component CSS needed for background or scheme — both
+ * `color-scheme` and custom properties inherit through the shadow boundary
+ * into the section's block element and slotted content):
+ *
+ * - **background**: `inherit` (the default — transparent, shows the ancestor's
+ *   surface) | `base` (the base surface colour) | `tinted`. Setting
+ *   `base`/`tinted` also cascades `--context-parent-background-color` so
+ *   descendants (cards, nested sections) read the same surface.
+ * - **scheme**: `inherit` (default) | `light` | `dark` | `inverted`.
+ *   `inverted` resolves to the opposite of the surrounding page scheme and
+ *   re-resolves when `:root[data-scheme]` flips (via onColorSchemeChange).
+ * - **block padding**: `padding-block` (both edges) with `padding-top`
+ *   / `padding-bottom` per-edge overrides, each with responsive `sm-` /
+ *   `md-` / `lg-` variants (12 attrs total). Token scale `0`–`96`; `0` strips
+ *   the padding. Per breakpoint the section CSS resolves: scope override →
+ *   base override → responsive default. The inline (gutter) padding stays
+ *   design-controlled.
+ * - **height**: any CSS length (e.g. '400px', '100dvh') applied as the host's
+ *   min-height (so the section is at least that tall) — mirroring how `width`
+ *   maps to the body max-width.
+ *
+ * @example
+ * ```ts
+ * class NLDDSimpleSection extends PageSectionMixin(LitElement) { … }
+ * ```
+ */
+export function PageSectionMixin(Base) {
+    class WithPageSection extends Base {
+        constructor() {
+            super(...arguments);
+            this.background = 'inherit';
+            this.scheme = 'inherit';
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            // Re-resolve `inverted` whenever the page color-scheme flips.
+            this._unsubScheme = onColorSchemeChange(() => {
+                if (this.scheme === 'inverted')
+                    this._applyScheme();
+            });
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this._unsubScheme?.();
+            this._unsubScheme = undefined;
+        }
+        updated(changed) {
+            super.updated(changed);
+            if (changed.has('background'))
+                this._applyBackground();
+            if (changed.has('scheme'))
+                this._applyScheme();
+            if (PADDING_KEYS.some((k) => changed.has(k)))
+                this._applyPadding();
+            if (changed.has('height'))
+                this._applyHeight();
+        }
+        _applyBackground() {
+            if (this.background === 'base' || this.background === 'tinted') {
+                const token = BACKGROUND_TOKEN[this.background];
+                this.style.backgroundColor = token;
+                // Cascade so descendants (cards, nested sections) match.
+                this.style.setProperty('--context-parent-background-color', token);
+            }
+            else {
+                this.style.backgroundColor = '';
+                this.style.removeProperty('--context-parent-background-color');
+            }
+        }
+        _applyScheme() {
+            if (this.scheme === 'light' || this.scheme === 'dark') {
+                this.style.colorScheme = this.scheme;
+            }
+            else if (this.scheme === 'inverted') {
+                this.style.colorScheme = this._resolveActiveScheme() === 'dark' ? 'light' : 'dark';
+            }
+            else {
+                this.style.removeProperty('color-scheme');
+            }
+        }
+        /**
+         * Best-effort detection of the *actively rendered* scheme around the
+         * section, used to invert it.
+         *
+         * `getComputedStyle(parent).colorScheme` returns the *declared* value
+         * (`'light dark'` for "supports both"; `'normal'` for the initial
+         * value) — not the one the browser actually paints with. For
+         * `'inverted'` we want the painted scheme, so:
+         *   1. Prefer the app's explicit override on `:root[data-scheme]`
+         *      (the project's site-wide light/dark toggle).
+         *   2. Walk up to find an ancestor that pins a single scheme.
+         *   3. Otherwise fall back to `prefers-color-scheme` — that's what
+         *      `'light dark'` resolves to in practice.
+         *
+         * Perf: the per-call cost is `getComputedStyle()` for each ancestor
+         * up to one that pins a scheme. This only runs when the project
+         * does NOT set `:root[data-scheme]` (apps with a global theme
+         * toggle, like regelrecht, hit the fast path and never enter the
+         * walk). When the fallback is needed the walk is bounded by the
+         * DOM depth and only fires on `scheme` prop change or a
+         * color-scheme repaint event — not on every render.
+         *
+         * Cross-shadow caveat: `parentElement` doesn't traverse shadow
+         * boundaries, so a `color-scheme` declared on an outer custom
+         * element's host won't be picked up by the walk; we then fall
+         * through to `prefers-color-scheme`. For reliable `'inverted'`
+         * behaviour inside nested shadow trees, set `data-scheme` on
+         * `:root` so the fast path resolves the painted scheme directly.
+         */
+        _resolveActiveScheme() {
+            const root = document.documentElement.getAttribute('data-scheme');
+            if (root === 'light' || root === 'dark')
+                return root;
+            let el = this.parentElement;
+            while (el) {
+                const declared = getComputedStyle(el).colorScheme;
+                const hasLight = declared.includes('light');
+                const hasDark = declared.includes('dark');
+                if (hasDark && !hasLight)
+                    return 'dark';
+                if (hasLight && !hasDark)
+                    return 'light';
+                el = el.parentElement;
+            }
+            return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        _applyPadding() {
+            const self = this;
+            for (const scope of PADDING_SCOPES) {
+                // Property names: base = paddingBlock(…); scoped = smPaddingBlock(…).
+                const prop = (suffix) => scope ? `${scope}Padding${suffix}` : `padding${suffix}`;
+                const block = self[prop('Block')];
+                const top = self[prop('Top')];
+                const bottom = self[prop('Bottom')];
+                const prefix = scope ? `${scope}-` : '';
+                this._setVar(`--_${prefix}padding-top`, paddingToValue(top ?? block));
+                this._setVar(`--_${prefix}padding-bottom`, paddingToValue(bottom ?? block));
+            }
+        }
+        _applyHeight() {
+            // Like `width` (which sets the body max-width), the `height` keyword
+            // maps to a constraint — here the host's min-height.
+            const v = this.height;
+            if (v && typeof CSS !== 'undefined' && CSS.supports('min-height', v)) {
+                this.style.minHeight = v;
+            }
+            else {
+                this.style.removeProperty('min-height');
+            }
+        }
+        _setVar(name, value) {
+            if (value === null)
+                this.style.removeProperty(name);
+            else
+                this.style.setProperty(name, value);
+        }
+    }
+    __decorate([
+        property({ type: String, reflect: true })
+    ], WithPageSection.prototype, "background", void 0);
+    __decorate([
+        property({ type: String, reflect: true })
+    ], WithPageSection.prototype, "scheme", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'padding-block' })
+    ], WithPageSection.prototype, "paddingBlock", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'padding-top' })
+    ], WithPageSection.prototype, "paddingTop", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'padding-bottom' })
+    ], WithPageSection.prototype, "paddingBottom", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'sm-padding-block' })
+    ], WithPageSection.prototype, "smPaddingBlock", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'sm-padding-top' })
+    ], WithPageSection.prototype, "smPaddingTop", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'sm-padding-bottom' })
+    ], WithPageSection.prototype, "smPaddingBottom", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'md-padding-block' })
+    ], WithPageSection.prototype, "mdPaddingBlock", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'md-padding-top' })
+    ], WithPageSection.prototype, "mdPaddingTop", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'md-padding-bottom' })
+    ], WithPageSection.prototype, "mdPaddingBottom", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'lg-padding-block' })
+    ], WithPageSection.prototype, "lgPaddingBlock", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'lg-padding-top' })
+    ], WithPageSection.prototype, "lgPaddingTop", void 0);
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'lg-padding-bottom' })
+    ], WithPageSection.prototype, "lgPaddingBottom", void 0);
+    __decorate([
+        property({ type: String, reflect: true })
+    ], WithPageSection.prototype, "height", void 0);
+    return WithPageSection;
+}
+/* eslint-enable @typescript-eslint/no-explicit-any */
+//# sourceMappingURL=page-section-mixin.js.map

package/dist/utilities/page-section-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-section-mixin.js","sourceRoot":"","sources":["../../src/utilities/page-section-mixin.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.45",
+  "version": "0.8.47",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -59,9 +59,9 @@
       "types": "./dist/components/content/keyboard-shortcut/keyboard-shortcut.d.ts",
       "default": "./dist/components/content/keyboard-shortcut/keyboard-shortcut.js"
     },
-    "./code": {
-      "types": "./dist/components/content/code/code.d.ts",
-      "default": "./dist/components/content/code/code.js"
+    "./code-viewer": {
+      "types": "./dist/components/content/code-viewer/code-viewer.d.ts",
+      "default": "./dist/components/content/code-viewer/code-viewer.js"
     },
     "./form": {
       "types": "./dist/components/forms/form/form.d.ts",
@@ -243,6 +243,10 @@
       "types": "./dist/components/layout/window/window.d.ts",
       "default": "./dist/components/layout/window/window.js"
     },
+    "./page-footer": {
+      "types": "./dist/components/layout/page-footer/page-footer.d.ts",
+      "default": "./dist/components/layout/page-footer/page-footer.js"
+    },
     "./menu": {
       "types": "./dist/components/lists-and-menus/menu/menu.d.ts",
       "default": "./dist/components/lists-and-menus/menu/menu.js"
@@ -287,6 +291,10 @@
       "types": "./dist/components/lists-and-menus/cells/timeline-track-cell/timeline-track-cell.d.ts",
       "default": "./dist/components/lists-and-menus/cells/timeline-track-cell/timeline-track-cell.js"
     },
+    "./breadcrumbs": {
+      "types": "./dist/components/navigation/breadcrumbs/breadcrumbs.d.ts",
+      "default": "./dist/components/navigation/breadcrumbs/breadcrumbs.js"
+    },
     "./menu-bar": {
       "types": "./dist/components/navigation/menu-bar/menu-bar.d.ts",
       "default": "./dist/components/navigation/menu-bar/menu-bar.js"

package/dist/components/content/code/code.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../../src/components/content/code/code.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAwCjC,qBACa,QAAS,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAc;IAGpC,QAAQ,SAAM;IAGd,IAAI,UAAS;IAGb,gBAAgB,SAAM;IAEtB,OAAO,CAAC,iBAAiB,CAAoC;IAC7D,OAAO,CAAC,kBAAkB,CAAC,CAAa;IAE/B,MAAM;IAIN,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAMrC,aAAa,CAAC,CAAC,EAAE,KAAK;IAIb,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAI9C,OAAO,CAAC,iBAAiB;IAQV,iBAAiB,IAAI,OAAO,CAAC,OAAO,CAAC;IAMpD,OAAO,CAAC,iBAAiB;YAIX,aAAa;CA4B3B;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

package/dist/components/content/code/code.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"code.js","sourceRoot":"","sources":["../../../../src/components/content/code/code.ts"],"names":[],"mappings":"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"}

package/dist/components/content/code/code.styles.d.ts

@@ -1,2 +0,0 @@
-export declare const codeStyles: import("lit").CSSResult;
-//# sourceMappingURL=code.styles.d.ts.map

package/dist/components/content/code/code.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"code.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/code/code.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAsFtB,CAAC"}

package/dist/components/content/code/code.styles.js

@@ -1,89 +0,0 @@
-import { css } from 'lit';
-export const codeStyles = css `
-
-
-	/* # Host */
-
-	:host {
-		--_corner-radius: var(--primitives-corner-radius-lg);
-		--_background-color: var(--semantics-surfaces-tinted-background-color);
-		--_block-padding: var(--primitives-space-16);
-		--_inline-padding: var(--primitives-space-16);
-		--_content-color: var(--semantics-content-color);
-		--_font: var(--primitives-font-monospace-sm-regular-snug);
-
-		display: block;
-	}
-
-	:host([hidden]) {
-		display: none;
-	}
-
-
-	/* # Block */
-
-	.code {
-		margin: 0;
-		border-radius: var(--_corner-radius);
-		background-color: var(--_background-color);
-		overflow-x: auto;
-		padding: var(--_block-padding) var(--_inline-padding);
-		color: var(--_content-color);
-		font: var(--_font);
-		white-space: pre;
-	}
-
-	:host([wrap]) .code {
-		overflow-x: visible;
-		white-space: pre-wrap;
-		word-break: break-word;
-	}
-
-	/* Lit reflects empty-string props as language=""; exclude that case */
-	:host([language]:not([language=""])) slot {
-		display: none;
-	}
-
-	.code__highlighted {
-		color: inherit;
-		font: inherit;
-	}
-
-
-	/* # Tokens */
-
-	.token.comment,
-	.token.prolog,
-	.token.doctype,
-	.token.cdata { color: var(--components-code-token-comment-color); font-style: italic; }
-	.token.punctuation { color: var(--components-code-token-punctuation-color); }
-	.token.namespace { opacity: 0.7; }
-	.token.keyword { color: var(--components-code-token-keyword-color); }
-	.token.string, .token.char { color: var(--components-code-token-string-color); }
-	.token.number { color: var(--components-code-token-number-color); }
-	.token.boolean { color: var(--components-code-token-boolean-color); }
-	.token.null { color: var(--components-code-token-null-color); }
-	.token.function { color: var(--components-code-token-function-color); }
-	.token.class-name { color: var(--components-code-token-class-color); }
-	.token.builtin { color: var(--components-code-token-builtin-color); }
-	.token.tag { color: var(--components-code-token-tag-color); }
-	.token.attr-name { color: var(--components-code-token-attr-name-color); }
-	.token.attr-value { color: var(--components-code-token-attr-value-color); }
-	.token.property { color: var(--components-code-token-property-color); }
-	.token.selector { color: var(--components-code-token-selector-color); }
-	.token.atrule { color: var(--components-code-token-atrule-color); }
-	.token.regex { color: var(--components-code-token-regex-color); }
-	.token.url { color: var(--components-code-token-url-color); }
-	.token.operator { color: var(--components-code-token-operator-color); }
-	.token.constant { color: var(--components-code-token-constant-color); }
-	.token.deleted { color: var(--components-code-token-deleted-color); }
-	.token.inserted { color: var(--components-code-token-inserted-color); }
-	.token.important { color: var(--components-code-token-important-color); font-weight: bold; }
-	.token.symbol { color: var(--components-code-token-symbol-color); }
-	.token.entity { color: var(--components-code-token-entity-color); }
-	.token.variable { color: var(--components-code-token-variable-color); }
-	.token.key { color: var(--components-code-token-property-color); }
-	.token.bold { font-weight: bold; }
-	.token.italic { font-style: italic; }
-`;
-//# sourceMappingURL=code.styles.js.map

package/dist/components/content/code/code.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"code.styles.js","sourceRoot":"","sources":["../../../../src/components/content/code/code.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsF5B,CAAC"}

package/dist/components/content/code/code.template.d.ts

@@ -1,4 +0,0 @@
-import { TemplateResult } from 'lit';
-import type { NLDDCode } from './code.js';
-export declare function codeTemplate(component: NLDDCode): TemplateResult;
-//# sourceMappingURL=code.template.d.ts.map

package/dist/components/content/code/code.template.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"code.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/code/code.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,wBAAgB,YAAY,CAAC,SAAS,EAAE,QAAQ,GAAG,cAAc,CAgBhE"}

package/dist/components/content/code/code.template.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"code.template.js","sourceRoot":"","sources":["../../../../src/components/content/code/code.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAG3D,MAAM,UAAU,YAAY,CAAC,SAAmB;IAC/C,sEAAsE;IACtE,sEAAsE;IACtE,sEAAsE;IACtE,qEAAqE;IACrE,yBAAyB;IACzB,EAAE;IACF,oEAAoE;IACpE,iEAAiE;IACjE,kEAAkE;IAClE,6DAA6D;IAC7D,OAAO,IAAI,CAAA,uCAAuC,SAAS,CAAC,aAAa,WACxE,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,gBAAgB;QAC/C,CAAC,CAAC,IAAI,CAAA,2CAA2C,SAAS,CAAC,QAAQ,KAAK,UAAU,CAAC,SAAS,CAAC,gBAAgB,CAAC,SAAS;QACvH,CAAC,CAAC,EACJ,QAAQ,CAAC;AACV,CAAC"}