@progressive-development/pd-page 0.9.2 → 1.0.0

package/dist/pd-contact-us/PdContactUs.js

@@ -1,7 +1,7 @@
 import { css, LitElement, html } from 'lit';
 import { localized, msg } from '@lit/localize';
-import { property } from 'lit/decorators.js';
-import '@progressive-development/pd-forms/pd-panel-button';
+import { property, query } from 'lit/decorators.js';
+import '@progressive-development/pd-forms/pd-button';
 import '@progressive-development/pd-forms/pd-form-container';
 import '@progressive-development/pd-forms/pd-form-row';
 import '@progressive-development/pd-forms/pd-input';
@@ -26,117 +26,95 @@ let PdContactUs = class extends LitElement {
   }
   render() {
     return html`
-      <div class="content-block">
-        <h2>${msg("Kontakt", { id: "pd.contactus.title" })}</h2>
-
-        <div class="contact-block">
-          <div class="left-content">
-            <pd-contact
-              class="company-contact"
-              .contact="${this.contact}"
-              addressTitle="${msg("Adresse", {
-      id: "pd.contactus.address.title"
-    })}"
-              summary
-            ></pd-contact>
-          </div>
+      <div class="contact-layout">
+        <div class="contact-card">
+          <pd-contact .contact="${this.contact}" summary></pd-contact>
+        </div>
 
-          <div class="right-content">
-            <pd-form-container id="contactFormId">
-              <pd-form-row>
-                <pd-input
-                  id="nameInputId"
-                  class="quarter3"
-                  minlength="3"
-                  maxlength="100"
-                  placeHolder="${msg("Name", {
+        <div class="contact-form">
+          <pd-form-container id="contactFormId">
+            <pd-form-row>
+              <pd-input
+                id="nameInputId"
+                minlength="3"
+                maxlength="100"
+                placeHolder="${msg("Name", {
       id: "pd.contactus.address.name"
     })}"
-                  valueName="name"
-                  autoCompleteName="full-name"
-                  required
-                ></pd-input>
-              </pd-form-row>
+                valueName="name"
+                autoCompleteName="full-name"
+                required
+              ></pd-input>
+            </pd-form-row>
 
-              <pd-form-row>
-                <pd-input
-                  id="mailInputId"
-                  class="quarter3"
-                  placeHolder="${msg("Email", {
+            <pd-form-row>
+              <pd-input
+                id="mailInputId"
+                placeHolder="${msg("Email", {
       id: "pd.contactus.address.email"
     })}"
-                  valueName="email"
-                  autoCompleteName="email"
-                  name="email"
-                  fieldType="mail"
-                  required
-                ></pd-input>
-              </pd-form-row>
+                valueName="email"
+                autoCompleteName="email"
+                name="email"
+                fieldType="mail"
+                required
+              ></pd-input>
+            </pd-form-row>
 
-              <pd-form-row>
-                <pd-input
-                  id="phoneInputId"
-                  class="quarter3"
-                  placeHolder="${msg("Telefon", {
+            <pd-form-row>
+              <pd-input
+                id="phoneInputId"
+                placeHolder="${msg("Telefon", {
       id: "pd.contactus.address.phone"
     })}"
-                  valueName="phone"
-                  fieldType="phone"
-                  autoCompleteName="tel"
-                  required
-                ></pd-input>
-              </pd-form-row>
+                valueName="phone"
+                fieldType="phone"
+                autoCompleteName="tel"
+                required
+              ></pd-input>
+            </pd-form-row>
 
-              <pd-form-row>
-                <pd-input-area
-                  id="msgInputId"
-                  class="quarter3-area"
-                  minlength="6"
-                  maxlength="500"
-                  placeHolder="${msg("Nachricht", {
+            <pd-form-row>
+              <pd-input-area
+                id="msgInputId"
+                minlength="6"
+                maxlength="500"
+                placeHolder="${msg("Nachricht", {
       id: "pd.contactus.address.message"
     })}"
-                  rows="8"
-                  required
-                  valueName="msg1"
-                ></pd-input-area>
-              </pd-form-row>
+                rows="8"
+                required
+                valueName="msg1"
+              ></pd-input-area>
+            </pd-form-row>
 
-              <pd-form-row>
-                <pd-panel-button
-                  class="quarter3"
-                  pdButtonIcon="${pdIcons.ICON_MAIL}"
-                  buttonText="${msg("Absenden", {
+            <pd-form-row>
+              <pd-button
+                icon="${pdIcons.ICON_MAIL}"
+                text="${msg("Absenden", {
       id: "pd.contactus.address.send"
     })}"
-                  @click="${this._sendMail}"
-                  primary
-                ></pd-panel-button>
-              </pd-form-row>
-            </pd-form-container>
-          </div>
+                @button-clicked="${this._sendMail}"
+                primary
+              ></pd-button>
+            </pd-form-row>
+          </pd-form-container>
         </div>
       </div>
     `;
   }
   clear() {
-    this.shadowRoot?.getElementById("nameInputId")?.["clear"]?.();
-    this.shadowRoot?.getElementById("mailInputId")?.["clear"]?.();
-    this.shadowRoot?.getElementById("phoneInputId")?.["clear"]?.();
-    this.shadowRoot?.getElementById("msgInputId")?.["clear"]?.();
+    this._form?.clear();
   }
   _sendMail() {
-    const form = this.shadowRoot?.getElementById(
-      "contactFormId"
-    );
-    form.triggerValidate().then((result) => {
+    this._form.triggerValidate().then((result) => {
       if (result) {
         this.dispatchEvent(
           new CustomEvent("send-contact-request", {
-            detail: { msgObj: form.getValues().origin }
+            detail: { msgObj: this._form.getValues().origin }
           })
         );
-        form.reset();
+        this._form.reset();
       }
     });
   }
@@ -144,75 +122,60 @@ let PdContactUs = class extends LitElement {
 PdContactUs.styles = [
   css`
       :host {
-        display: flex;
-        flex-flow: row;
+        display: block;
         background-color: var(--pd-contactus-bg-col, var(--pd-default-col));
         background-image: var(--pd-contactus-bg-image);
         background-repeat: no-repeat;
-        min-height: 500px;
         width: 100%;
       }
 
-      h2 {
-        font-family: var(--pd-default-font-title-family);
-        font-style: normal;
-        color: var(--pd-contactus-font-col, var(--pd-default-bg-col));
-        margin-top: 1.4em;
-        margin-bottom: 2.5rem;
-        font-size: var(--pd-contactus-font-h2-size, 2.5rem);
-      }
-
-      .content-block {
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: flex-start;
-        flex-grow: 1;
-        max-width: 1170px;
-        margin: 0 auto;
-        padding-left: 30px;
-      }
-
-      .contact-block {
+      .contact-layout {
         display: flex;
         flex-wrap: wrap;
-        padding-bottom: 50px;
-      }
-
-      .left-content {
-        width: 35%;
-        min-width: 230px;
-      }
-
-      .right-content {
-        width: 65%;
+        gap: 2rem;
+        align-items: flex-start;
       }
 
-      .company-contact {
-        --app-font-content-col: var(
+      .contact-card {
+        flex: 1 1 300px;
+        min-width: 280px;
+        max-width: 420px;
+        /* Forward --pd-contactus-font-col to pd-contact internals */
+        --pd-contact-address-col: var(
+          --pd-contactus-font-col,
+          var(--pd-default-bg-col)
+        );
+        --pd-contact-address-title-col: var(
+          --pd-contactus-font-col,
+          var(--pd-default-bg-col)
+        );
+        --pd-default-font-content-col: var(
+          --pd-contactus-font-col,
+          var(--pd-default-bg-col)
+        );
+        --pd-default-font-title-col: var(
           --pd-contactus-font-col,
           var(--pd-default-bg-col)
         );
-        --app-font-title-col: var(
+        --pd-contact-icon-col: var(
           --pd-contactus-font-col,
           var(--pd-default-bg-col)
         );
       }
 
-      @media (max-width: 440px) {
-        .item {
-          display: none;
-        }
-        ul {
-          justify-content: flex-start;
-        }
+      .contact-form {
+        flex: 1 1 360px;
+        min-width: 300px;
+        max-width: 520px;
       }
     `
 ];
 __decorateClass([
   property({ type: Object })
 ], PdContactUs.prototype, "contact", 2);
+__decorateClass([
+  query("#contactFormId")
+], PdContactUs.prototype, "_form", 2);
 PdContactUs = __decorateClass([
   localized()
 ], PdContactUs);

package/dist/pd-contact-us/pd-contact-us.stories.d.ts

@@ -1,6 +1,37 @@
-import { Meta, StoryFn } from '@storybook/web-components';
-import { PdContactUs } from './pd-contact-us';
-declare const _default: Meta<PdContactUs>;
-export default _default;
-export declare const Default: StoryFn<PdContactUs>;
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdContactData } from '@progressive-development/pd-contact';
+/**
+ * Story arguments interface for pd-contact-us component.
+ * Maps to the component's public API.
+ */
+interface PdContactUsArgs {
+    /** Contact data for address display */
+    contact: PdContactData;
+}
+/**
+ * ## pd-contact-us
+ *
+ * Contact section with company address card and message form.
+ *
+ * ### Features
+ * - **Address Display**: Shows company contact information via pd-contact card
+ * - **Contact Form**: Name, email, phone, and message fields with validation
+ * - **Responsive Layout**: Card and form wrap below each other on narrow screens
+ * - **Localization**: All labels localized via @lit/localize
+ * - **Email/Phone Types**: Proper input types for better mobile UX
+ *
+ * ### Accessibility
+ * - Form fields use proper input types (email, tel)
+ * - Required fields are marked for screen readers
+ * - Submit button uses native button semantics
+ */
+declare const meta: Meta<PdContactUsArgs>;
+export default meta;
+type Story = StoryObj<PdContactUsArgs>;
+/** Default contact section with company info and message form. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All contact data configurations at a glance: full, standard, and minimal. */
+export declare const AllVariants: Story;
+/** CSS Custom Properties — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-contact-us.stories.d.ts.map

package/dist/pd-contact-us/pd-contact-us.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-contact-us.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact-us/pd-contact-us.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAI/D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,iBAAiB,CAAC;wBAoBpB,IAAI,CAAC,WAAW,CAAC;AAlBtB,wBAkBuB;AAMvB,eAAO,MAAM,OAAO,sBAAoB,CAAC"}
+{"version":3,"file":"pd-contact-us.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact-us/pd-contact-us.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAEzE,OAAO,oBAAoB,CAAC;AAM5B;;;GAGG;AACH,UAAU,eAAe;IACvB,uCAAuC;IACvC,OAAO,EAAE,aAAa,CAAC;CACxB;AAoCD;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CA8D/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAMvC,kGAAkG;AAClG,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,gFAAgF;AAChF,eAAO,MAAM,WAAW,EAAE,KAiCzB,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KA2D3B,CAAC"}

package/dist/pd-content/dist/pd-notice-box/PdNoticeBox.js

@@ -0,0 +1,224 @@
+import { LitElement, css, nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { pdIcons } from '@progressive-development/pd-icon';
+import '@progressive-development/pd-icon/pd-icon';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DEFAULT_ICONS = {
+  info: pdIcons.ICON_INFO_FLD,
+  note: pdIcons.ICON_INFO_FLD,
+  success: pdIcons.ICON_CHECKBOX,
+  warning: pdIcons.ICON_WARNING_FLD,
+  error: pdIcons.ICON_ERROR_FLD
+};
+class PdNoticeBox extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.type = "info";
+    this.variant = "box";
+    this.title = "";
+    this.icon = "";
+    this.hideIcon = false;
+  }
+  static {
+    this.styles = [
+      css`
+      :host {
+        /* Layout */
+        --_width: var(--pd-notice-box-width, 100%);
+        --_radius: var(--pd-notice-box-border-radius, var(--pd-radius-md, 8px));
+        --_padding: var(--pd-notice-box-padding, var(--pd-spacing-sm, 12px));
+        --_gap: var(--pd-notice-box-gap, var(--pd-spacing-sm, 12px));
+
+        /* Typography */
+        --_font-size: var(
+          --pd-notice-box-font-size,
+          var(--pd-default-font-content-size, 1rem)
+        );
+        --_title-font-size: var(
+          --pd-notice-box-title-font-size,
+          var(--pd-default-font-input-size, 1.05rem)
+        );
+        --_title-font-weight: var(--pd-notice-box-title-font-weight, 600);
+
+        /* Icon */
+        --_icon-size: var(--pd-notice-box-icon-size, 24px);
+
+        /* Sidebar */
+        --_sidebar-width: var(--pd-notice-box-sidebar-width, 4px);
+
+        /* Type colors - will be overridden per type */
+        --_type-col: var(--pd-default-info-col, #6b86ff);
+        --_type-bg-col: #e8f0ff;
+        --_type-text-col: var(
+          --pd-notice-box-text-col,
+          var(--pd-default-font-content-col, #353738)
+        );
+
+        display: block;
+        width: var(--_width);
+      }
+
+      /* Type-specific color overrides */
+      :host([type="info"]) {
+        --_type-col: var(
+          --pd-notice-box-info-col,
+          var(--pd-default-info-col, #6b86ff)
+        );
+        --_type-bg-col: var(--pd-notice-box-info-bg-col, #e8f0ff);
+      }
+
+      :host([type="note"]) {
+        --_type-col: var(
+          --pd-notice-box-note-col,
+          var(--pd-default-col, #067394)
+        );
+        --_type-bg-col: var(
+          --pd-notice-box-note-bg-col,
+          var(--pd-default-lightest-col, #cde2eb)
+        );
+      }
+
+      :host([type="success"]) {
+        --_type-col: var(
+          --pd-notice-box-success-col,
+          var(--pd-default-success-col, #348b11)
+        );
+        --_type-bg-col: var(
+          --pd-notice-box-success-bg-col,
+          var(--pd-default-success-light-col, #f5ffe8)
+        );
+      }
+
+      :host([type="warning"]) {
+        --_type-col: var(
+          --pd-notice-box-warning-col,
+          var(--pd-default-warning-col, #ffbf00)
+        );
+        --_type-bg-col: var(--pd-notice-box-warning-bg-col, #fff8e0);
+      }
+
+      :host([type="error"]) {
+        --_type-col: var(
+          --pd-notice-box-error-col,
+          var(--pd-default-error-col, #a1141b)
+        );
+        --_type-bg-col: var(
+          --pd-notice-box-error-bg-col,
+          var(--pd-default-error-light-col, #ffe8e8)
+        );
+      }
+
+      /* Box variant */
+      .notice-box {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--_gap);
+        padding: var(--_padding);
+        border-radius: var(--_radius);
+        background-color: var(--_type-bg-col);
+        border: 1px solid var(--_type-col);
+        font-size: var(--_font-size);
+        color: var(--_type-text-col);
+      }
+
+      /* Sidebar variant */
+      :host([variant="sidebar"]) .notice-box {
+        background-color: transparent;
+        border: none;
+        border-left: var(--_sidebar-width) solid var(--_type-col);
+        border-radius: 0;
+        padding-left: var(--_padding);
+      }
+
+      /* Icon wrapper */
+      .icon-wrapper {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--_icon-size);
+        height: var(--_icon-size);
+      }
+
+      .icon-wrapper pd-icon {
+        --pd-icon-primary-col: var(--_type-col);
+        --pd-icon-col-primary-active: var(--_type-col);
+        width: var(--_icon-size);
+        height: var(--_icon-size);
+      }
+
+      /* Content area */
+      .content {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .title {
+        margin: 0 0 0.25em 0;
+        font-size: var(--_title-font-size);
+        font-weight: var(--_title-font-weight);
+        font-family: var(--pd-default-font-title-family, inherit);
+        color: var(--_type-col);
+        line-height: 1.3;
+      }
+
+      .body {
+        line-height: 1.5;
+      }
+
+      .body ::slotted(*) {
+        margin: 0;
+      }
+
+      .body ::slotted(*:not(:last-child)) {
+        margin-bottom: 0.5em;
+      }
+    `
+    ];
+  }
+  render() {
+    const showIcon = this.variant === "box" && !this.hideIcon;
+    const iconName = this.icon || DEFAULT_ICONS[this.type];
+    return html`
+      <div class="notice-box" role="note" aria-label="${this.type} notice">
+        ${showIcon ? html`
+              <div class="icon-wrapper" aria-hidden="true">
+                <pd-icon icon="${iconName}" class="primary"></pd-icon>
+              </div>
+            ` : nothing}
+        <div class="content">
+          ${this.title ? html`<h4 class="title">${this.title}</h4>` : nothing}
+          <div class="body">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: String, reflect: true })
+], PdNoticeBox.prototype, "type");
+__decorateClass([
+  property({ type: String, reflect: true })
+], PdNoticeBox.prototype, "variant");
+__decorateClass([
+  property({ type: String })
+], PdNoticeBox.prototype, "title");
+__decorateClass([
+  property({ type: String })
+], PdNoticeBox.prototype, "icon");
+__decorateClass([
+  property({ type: Boolean })
+], PdNoticeBox.prototype, "hideIcon");
+
+export { PdNoticeBox };

package/dist/pd-content/dist/pd-notice-box/pd-notice-box.js

@@ -0,0 +1,8 @@
+import { PdNoticeBox } from './PdNoticeBox.js';
+
+const tag = "pd-notice-box";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdNoticeBox);
+}
+
+export { PdNoticeBox };

package/dist/pd-footer/PdFooter.d.ts

@@ -1,31 +1,43 @@
 import { LitElement, CSSResultGroup } from 'lit';
 import { PdFooterLink, PdFooterMadeBy } from '../types';
 /**
- * Footer-Komponente mit konfigurierbaren Links, Version und Copyright.
+ * Application footer with links, version, and copyright.
+ *
+ * @summary Footer with navigation links, copyright, version, and developer reference.
  *
- * @fires footer-link - Wird ausgelöst, wenn auf einen Footer-Link geklickt wird.
- * @slot - Standard-Slot nicht verwendet.
  * @tagname pd-footer
+ *
+ * @event footer-link - Fired when a footer link is clicked.
+ *
+ * @cssprop --pd-footer-bg-col - Footer background. Default: `var(--pd-default-col)`.
+ * @cssprop --pd-footer-font-col - Footer text color. Default: `var(--pd-on-primary-col)`.
+ * @cssprop --pd-footer-font-family - Footer font family. Default: `var(--pd-default-font-link-family)`.
+ * @cssprop --pd-footer-font-size - Footer font size. Default: `1.1em`.
+ * @cssprop --pd-footer-bottom-col - Bottom line background. Default: `var(--pd-default-light-col)`.
+ * @cssprop --pd-footer-bottom-font-size - Bottom line font size. Default: `0.9em`.
+ * @cssprop --pd-footer-bottom-font-col - Bottom line text color. Default: `var(--pd-default-dark-col)`.
  */
 export declare class PdFooter extends LitElement {
-    /**
-     * Optional: Copyright-Zeile, z.B. "2024 PD Progressive Development UG".
-     */
+    /** Copyright text, e.g. "2024 PD Progressive Development UG". */
     copyright: string;
-    /**
-     * Optionale Versionsangabe, z.B. "v1.2.3".
-     */
+    /** Version string, e.g. "v1.2.3". */
     version: string;
-    /**
-     * Optionaler Verweis auf den Entwickler oder die Agentur.
-     */
+    /** Developer or agency reference with text and email/link. */
     madeBy?: PdFooterMadeBy;
-    /**
-     * Liste von Footer-Links.
-     */
+    /** Footer navigation links. */
     footerLinks: PdFooterLink[];
     static styles: CSSResultGroup;
     render(): import('lit').TemplateResult<1>;
+    /**
+     * Handles keyboard events on footer links.
+     * Activates on Enter or Space key.
+     */
+    private _handleLinkKeydown;
+    /**
+     * Handles keyboard events on madeBy element.
+     * Activates on Enter or Space key.
+     */
+    private _handleMadeByKeydown;
     private _clickMadeBy;
     private _footerLinkClicked;
 }

package/dist/pd-footer/PdFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdFooter.d.ts","sourceRoot":"","sources":["../../src/pd-footer/PdFooter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAExD;;;;;;GAMG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;OAEG;IAEH,WAAW,EAAE,YAAY,EAAE,CAAM;IAEjC,OAAgB,MAAM,EAAE,cAAc,CAyEpC;IAEO,MAAM;IAmCf,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,kBAAkB;CAe3B"}
+{"version":3,"file":"PdFooter.d.ts","sourceRoot":"","sources":["../../src/pd-footer/PdFooter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAExD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,iEAAiE;IAEjE,SAAS,SAAM;IAEf,qCAAqC;IAErC,OAAO,SAAM;IAEb,8DAA8D;IAE9D,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB,+BAA+B;IAE/B,WAAW,EAAE,YAAY,EAAE,CAAM;IAEjC,OAAgB,MAAM,EAAE,cAAc,CAsFpC;IAEO,MAAM;IA+Cf;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAO1B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,kBAAkB;CAe3B"}