@genexus/genexus-ide-ui 2.1.1 → 2.1.3

package/dist/cjs/gx-ide-splash.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gx-ide-splash.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,05EAA05E;;;;;;;;;;;;;;;;;;;ACe56E,MAAM,uBAAuB,GAAGA,kBAAY,CAC1C,2DAA2D,CAC5D,CAAC;AACF,MAAM,SAAS,GAAGA,kBAAY,CAC5B,mDAAmD,CACpD,CAAC;AACF,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,kBAAkB;IAClB,mBAAmB;IACnB,iBAAiB;IACjB,qBAAqB;CACtB,CAAC;AAEF,MAAM,aAAa,GAAGC,yBAAW,CAAC;IAChC,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,QAAQ;IACd,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;MAQU,aAAa;;;;;;;QAKxB,iDAAsB;wBAOO,IAAI;;;;wBAsBU,EAAE;;8BAUF,KAAK;+BAKJ,KAAK;sCAKE,KAAK;;IAExD,MAAM,iBAAiB;QACrB,uBAAA,IAAI,kCAAoB,MAAMC,aAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;KACnE;IAED,MAAM;;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC;QACvE,MAAM,8BAA8B,GAClC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QACvE,MAAM,yBAAyB,GAC7B,EAAE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,IAAG,CAAC,CAAC;QAC3E,MAAM,kBAAkB,GACtB,IAAI,CAAC,sBAAsB,IAAI,CAAC,yBAAyB,CAAC;QAE5D,IAAI,wBAAwB,GAC1B,uBAAA,IAAI,sCAAiB,CAAC,QAAQ,CAAC,kBAAkB,CAAC;QACpD,IAAI,iBAAiB,EAAE;YACrB,wBAAwB,GAAG,GAAG,wBAAwB,IACpD,uBAAA,IAAI,sCAAiB,CAAC,QAAQ,CAAC,WACjC,EAAE,CAAC;SACJ;QAED,QACEC,QAACC,UAAI,QACHD,sBAAU,KAAK,EAAE,WAAW,GAAa,EACzCA,iBACE,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,OAAO,EAAE,IAAI;aACd,IAEDA,iBACE,KAAK,EAAC,mBAAmB,EACzB,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,uBAAuB,GAAG,EAAE,EAC7D,IAAI,EAAC,KAAK,GACL,EAEPA,qBAAS,KAAK,EAAC,4BAA4B,IACzCA,oBAAQ,KAAK,EAAC,QAAQ,IACpBA,iBACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,uBAAA,IAAI,sCAAiB,CAAC,2BAA2B,GACtD,EACFA,gBAAI,KAAK,EAAC,iBAAiB,IAAE,uBAAA,IAAI,sCAAiB,CAAC,KAAK,CAAM,EAC7D,IAAI,CAAC,UAAU,KACdA,eAAG,KAAK,EAAC,6BAA6B,IACnC,uBAAA,IAAI,sCAAiB,CAAC,WAAW,OAAG,IAAI,CAAC,UAAU,CAClD,CACL,EACDA,eAAG,KAAK,EAAC,mCAAmC,IACzC,uBAAA,IAAI,sCAAiB,CAAC,iBAAiB,CACtC,EACJA,eAAG,KAAK,EAAC,mCAAmC,IACzC,uBAAA,IAAI,sCAAiB,CAAC,SAAS,CAC9B,CACG,EAETA,kBAAM,KAAK,EAAC,MAAM,IACf,yBAAyB,KACxBA,eACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,oBAAoB,EAAE,IAAI;aAC3B,IAEA,uBAAA,IAAI,sCAAiB,CAAC,oBAAoB,EAC1CE,qBAAc,CAAC,MAAM,EAAE,YAAY,CAAC,CACnC,CACL,EAEDF,kBACE,KAAK,EAAC,2BAA2B,EACjC,IAAI,EAAC,QAAQ,eACH,QAAQ,eACP,IAAI,CAAC,QAAQ,IAEvB,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAO,GAAG,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC;YACvC,QACEA,eACE,KAAK,EAAE;oBACL,mBAAmB,EAAE,IAAI;oBACzB,cAAc,EAAE,IAAI;oBACpB,qBAAqB,EAAE,OAAO,CAAC,IAAI,KAAK,OAAO;iBAChD,EACD,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAE5B,OAAO,CAAC,IAAI,CACX,EACJ;SACH,CAAC,CACG,EAEN,kBAAkB,KACjBA,eAAG,KAAK,EAAC,4CAA4C,IAClD,8BAA8B,KAC7BA,sBAAO,wBAAwB,CAAQ,CACxC,EAEA,8BAA8B;YAC7B,IAAI,CAAC,sBAAsB,IAAIA,4BAAgB,EAEhD,IAAI,CAAC,sBAAsB,KAC1BA,sBAAO,uBAAA,IAAI,sCAAiB,CAAC,QAAQ,CAAC,aAAa,CAAQ,CAC5D,CACC,CACL,CACI,EAEPA,oBAAQ,KAAK,EAAC,QAAQ,IACpBA,iBAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,sBAAsB,KAC1BA,oBACE,GAAG,EAAC,iBAAiB,EACrB,KAAK,EAAC,8DAA8D,EACpE,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAEnC,uBAAA,IAAI,sCAAiB,CAAC,cAAc,CAC9B,CACV,EAEA,iBAAiB,KAChBA,oBACE,GAAG,EAAC,UAAU,EACd,KAAK,EAAC,sCAAsC,EAC5C,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7BA,sBAAU,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,aAAa,GAAa,EACvD,uBAAA,IAAI,sCAAiB,CAAC,OAAO,CACvB,CACV,EAEA,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,KACvCA,oBAAQ,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACxD,uBAAA,IAAI,sCAAiB,CAAC,WAAW,CAC3B,CACV,CACG,CACC,CACD,CACN,CACD,EACP;KACH;;;;;;;;;","names":["getAssetPath","getIconPath","Locale","h","Host","ANIMATION_DOTS"],"sources":["src/components/splash/splash.scss?tag=gx-ide-splash&encapsulation=shadow","src/components/splash/splash.tsx"],"sourcesContent":["@import \"../../global/components/splash-and-welcome-page\";\n\n:host {\n  --wrapper-copacity: 0;\n  --wrapper-min-inline-size: 700px;\n  --wrapper-max-inline-size: 1040px;\n  --wrapper-block-size: 640px;\n  transition: var(--timing-regular) opacity;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 100%;\n  block-size: 100%;\n  padding: var(--spacing-padding-xl);\n\n  overflow: auto;\n}\n\n.wrapper {\n  flex: 1;\n  display: grid;\n  grid-template-columns: 1fr var(--wrapper-block-size);\n  block-size: var(--wrapper-block-size);\n  // min-inline-size: var(--wrapper-min-inline-size);\n  max-inline-size: var(--wrapper-max-inline-size);\n\n  background-color: var(--color-accent-surface-elevation-1);\n  border-radius: 12px;\n\n  overflow: auto;\n  transform: translateY(4px);\n}\n\n// Side inline-start (the illustration)\n.side-inline-start {\n  background-size: cover;\n}\n\n// Side inline-end (the content)\n.side-inline-end {\n  position: relative;\n  display: grid;\n  grid-template-rows: max-content 1fr max-content;\n  padding-block: 64px;\n  padding-inline: 80px;\n\n  transition: var(--timing-slow) grid-template-rows;\n  overflow: auto;\n}\n\n.close-button {\n  position: absolute;\n  inset-inline-end: 0;\n  inset-block-start: 0;\n}\n\n// header\n.header {\n  display: grid;\n  gap: var(--spacing-gap-xl);\n  margin-block-end: 92px; // Specific layout spacing - no exact token available\n}\n.header__logo__close-button {\n  display: flex;\n  justify-content: space-between;\n}\n.title {\n  color: var(--color-text-neutral-strawberry);\n  letter-spacing: 0.02em;\n}\n.next-version {\n  color: var(--color-text-neutral-strawberry);\n}\n.header__description {\n  color: var(--color-text-neutral-disabled);\n  line-height: 1.45 !important;\n  // TODO: Discuss with Design Team about line-height.\n  // Mercury line-heights looks tight to me.\n}\n\n.main {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-l);\n  // margin-block-start: auto;\n\n  overflow: auto;\n}\n.log__container {\n  --logVisibleLines: 7;\n  --logFontSize: var(\n    --font-size-body-s\n  ); // 12px is the font size of .caption-regular-l\n  --logLineHeight: var(\n    --line-height-relaxed\n  ); // 1.2 is the line-height of .caption-regular-l\n  --logGap: 4px;\n  --logContainerBlockSize: calc(\n    var(--logFontSize) * var(--logLineHeight) * var(--logVisibleLines) +\n      calc(var(--logGap) * (var(--logVisibleLines) - 1))\n  );\n  block-size: var(--logContainerBlockSize);\n  // TODO: Add/include on Mercury a monospaced font, and then use it here.\n  font-family: var(--font-family-code);\n  color: var(--color-text-neutral-disabled);\n  display: flex;\n  flex-direction: column-reverse;\n  gap: var(--logGap);\n  overflow: hidden;\n  // margin-block-start: auto;\n\n  &:hover {\n    overflow: auto;\n  }\n\n  > p {\n    // WA: This overrides the font family of the typographic style applied on the p tag\n    font-family: inherit;\n  }\n}\n.log__message {\n  opacity: 0;\n  transition: var(--timing-regular) opacity;\n  animation: fadeInLogMessage 0.45s ease-out forwards;\n\n  &--error {\n    color: var(--color-text-error-default);\n  }\n}\n\n// footer\n.footer {\n  display: grid;\n  grid-auto-rows: max-content;\n  gap: var(--spacing-gap-l);\n  margin-block-start: 24px;\n}\n.error-message {\n  color: var(--color-text-error-default);\n  margin-block-start: auto;\n  // TODO: Use clamp from a helper mixin\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n}\n\n// helpers\n.status--processing {\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n  gap: var(--spacing-gap-xs);\n}\n\n@keyframes fadeInLogMessage {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n","// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  getAssetPath\n} from \"@stencil/core\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../common/locale\";\nimport { ANIMATION_DOTS } from \"../../common/common\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n  `./gx-ide-assets/splash/images/copyrights-illustration.svg`\n);\nconst LOGO_NEXT = getAssetPath(\n  `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/typography\",\n  \"components/button\",\n  \"components/icon\",\n  \"chameleon/scrollbar\"\n];\n\nconst OPEN_LOG_ICON = getIconPath({\n  category: \"system\",\n  name: \"launch\",\n  colorType: \"primary\"\n});\n\n@Component({\n  tag: \"gx-ide-splash\",\n  styleUrl: \"splash.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/splash\"]\n})\nexport class GxIdeUiSplash {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  @Element() el: HTMLGxIdeSplashElement;\n\n  /**\n   * Set this to true if installation is in process\n   */\n  @State() ariaBusy: boolean = true;\n\n  /**\n   * The application version to display in the dialog.\n   */\n  @Prop() readonly appVersion: string;\n\n  /**\n   * Callback invoked when the user clicks the 'Download Docker' button.\n   */\n  @Prop() readonly downloadDockerCallback: () => void;\n\n  /**\n   * Callback invoked when the user clicks the quit button.\n   */\n  @Prop() readonly quitCallback: () => void;\n\n  /**\n   * Array of messages to display in the text box.\n   * This property updates whenever a message is added,\n   * and the scroll should position itself at the bottom to keep the last message visible.\n   */\n  @Prop() readonly messages: MessageType[] = [];\n\n  /**\n   * Callback invoked when the user clicks the 'Open log' link.\n   */\n  @Prop() readonly openLogCallback: () => void;\n\n  /**\n   * Set to `true` to display the quit button.\n   */\n  @Prop() readonly showQuitButton: boolean = false;\n\n  /**\n   * Set to `true` to display the 'Open log' link.\n   */\n  @Prop() readonly showOpenLogLink: boolean = false;\n\n  /**\n   * Set to `true` to display \"Docker is not installed\" error message and to display \"Download Docker\" button.\n   */\n  @Prop() readonly showDockerMissingError: boolean = false;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  render() {\n    const renderOpenLogLink = this.showOpenLogLink && this.openLogCallback;\n    const renderInstallationErrorMessage =\n      this.showQuitButton && this.quitCallback && this.messages.length > 0;\n    const renderInitializingMessage =\n      !(this.showQuitButton && this.quitCallback) && this.messages?.length > 0;\n    const renderErrorMessage =\n      this.showDockerMissingError || !renderInitializingMessage;\n\n    let installationErrorMessage =\n      this.#componentLocale.warnings.installationFailed;\n    if (renderOpenLogLink) {\n      installationErrorMessage = `${installationErrorMessage} ${\n        this.#componentLocale.warnings.checkTheLog\n      }`;\n    }\n\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div\n          class={{\n            scrollable: true,\n            wrapper: true\n          }}\n        >\n          <div\n            class=\"side-inline-start\"\n            style={{ backgroundImage: `url(${COPYRIGHTS_ILLUSTRATION})` }}\n            role=\"img\"\n          ></div>\n\n          <section class=\"side-inline-end scrollable\">\n            <header class=\"header\">\n              <img\n                src={LOGO_NEXT}\n                alt={this.#componentLocale.illustrationAlternativeText}\n              />\n              <h2 class=\"title heading-2\">{this.#componentLocale.title}</h2>\n              {this.appVersion && (\n                <p class=\"body-regular-m next-version\">\n                  {this.#componentLocale.nextVersion} {this.appVersion}\n                </p>\n              )}\n              <p class=\"body-italic-m header__description\">\n                {this.#componentLocale.allRightsReserved}\n              </p>\n              <p class=\"body-italic-m header__description\">\n                {this.#componentLocale.copyright}\n              </p>\n            </header>\n\n            <main class=\"main\">\n              {renderInitializingMessage && (\n                <p\n                  class={{\n                    \"body-regular-m\": true,\n                    \"status--processing\": true\n                  }}\n                >\n                  {this.#componentLocale.initializingServices}\n                  {ANIMATION_DOTS(\"tiny\", \"on-surface\")}\n                </p>\n              )}\n\n              <code\n                class=\"log__container scrollable\"\n                role=\"status\"\n                aria-live=\"polite\"\n                aria-busy={this.ariaBusy}\n              >\n                {this.messages?.reverse().map((message, i) => {\n                  return (\n                    <p\n                      class={{\n                        \"caption-regular-l\": true,\n                        \"log__message\": true,\n                        \"log__message--error\": message.type === \"error\"\n                      }}\n                      key={this.messages.length - i}\n                    >\n                      {message.text}\n                    </p>\n                  );\n                })}\n              </code>\n\n              {renderErrorMessage && (\n                <p class=\"error-message status--error body-regular-m\">\n                  {renderInstallationErrorMessage && (\n                    <span>{installationErrorMessage}</span>\n                  )}\n\n                  {renderInstallationErrorMessage &&\n                    this.showDockerMissingError && <span> - </span>}\n\n                  {this.showDockerMissingError && (\n                    <span>{this.#componentLocale.warnings.dockerMissing}</span>\n                  )}\n                </p>\n              )}\n            </main>\n\n            <footer class=\"footer\">\n              <div class=\"buttons-spacer\">\n                {this.showDockerMissingError && (\n                  <button\n                    key=\"download-docker\"\n                    class=\"button-secondary button-icon-and-text download-docker-button\"\n                    onClick={this.downloadDockerCallback}\n                  >\n                    {this.#componentLocale.downloadDocker}\n                  </button>\n                )}\n\n                {renderOpenLogLink && (\n                  <button\n                    key=\"open-log\"\n                    class=\"button-tertiary button-icon-and-text\"\n                    onClick={this.openLogCallback}\n                  >\n                    <ch-image class=\"icon-m\" src={OPEN_LOG_ICON}></ch-image>\n                    {this.#componentLocale.openLog}\n                  </button>\n                )}\n\n                {this.quitCallback && this.showQuitButton && (\n                  <button class=\"button-secondary\" onClick={this.quitCallback}>\n                    {this.#componentLocale.quitGenexus}\n                  </button>\n                )}\n              </div>\n            </footer>\n          </section>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type MessageType = {\n  type: \"info\" | \"error\";\n  text: string;\n};\n"],"version":3}
+{"file":"gx-ide-splash.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,m+EAAm+E;;;;;;;;;;;;;;;;;;;ACer/E,MAAM,uBAAuB,GAAGA,kBAAY,CAC1C,2DAA2D,CAC5D,CAAC;AACF,MAAM,SAAS,GAAGA,kBAAY,CAC5B,mDAAmD,CACpD,CAAC;AACF,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,kBAAkB;IAClB,mBAAmB;IACnB,iBAAiB;IACjB,qBAAqB;CACtB,CAAC;AAEF,MAAM,aAAa,GAAGC,yBAAW,CAAC;IAChC,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,QAAQ;IACd,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;MAQU,aAAa;;;;;;;QAKxB,iDAAsB;wBAOO,IAAI;;;;wBAsBU,EAAE;;8BAUF,KAAK;+BAKJ,KAAK;sCAKE,KAAK;;IAExD,MAAM,iBAAiB;QACrB,uBAAA,IAAI,kCAAoB,MAAMC,aAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;KACnE;IAED,MAAM;;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC;QACvE,MAAM,8BAA8B,GAClC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QACvE,MAAM,yBAAyB,GAC7B,EAAE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,IAAG,CAAC,CAAC;QAC3E,MAAM,kBAAkB,GACtB,IAAI,CAAC,sBAAsB,IAAI,CAAC,yBAAyB,CAAC;QAE5D,IAAI,wBAAwB,GAC1B,uBAAA,IAAI,sCAAiB,CAAC,QAAQ,CAAC,kBAAkB,CAAC;QACpD,IAAI,iBAAiB,EAAE;YACrB,wBAAwB,GAAG,GAAG,wBAAwB,IACpD,uBAAA,IAAI,sCAAiB,CAAC,QAAQ,CAAC,WACjC,EAAE,CAAC;SACJ;QAED,QACEC,QAACC,UAAI,QACHD,sBAAU,KAAK,EAAE,WAAW,GAAa,EACzCA,iBACE,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,OAAO,EAAE,IAAI;aACd,IAEDA,iBACE,KAAK,EAAC,mBAAmB,EACzB,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,uBAAuB,GAAG,EAAE,EAC7D,IAAI,EAAC,KAAK,GACL,EAEPA,qBAAS,KAAK,EAAC,4BAA4B,IACzCA,oBAAQ,KAAK,EAAC,QAAQ,IACpBA,iBACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,uBAAA,IAAI,sCAAiB,CAAC,2BAA2B,GACtD,EACFA,gBAAI,KAAK,EAAC,iBAAiB,IAAE,uBAAA,IAAI,sCAAiB,CAAC,KAAK,CAAM,EAC7D,IAAI,CAAC,UAAU,KACdA,eAAG,KAAK,EAAC,6BAA6B,IACnC,uBAAA,IAAI,sCAAiB,CAAC,WAAW,OAAG,IAAI,CAAC,UAAU,CAClD,CACL,EACDA,eAAG,KAAK,EAAC,mCAAmC,IACzC,uBAAA,IAAI,sCAAiB,CAAC,iBAAiB,CACtC,EACJA,eAAG,KAAK,EAAC,mCAAmC,IACzC,uBAAA,IAAI,sCAAiB,CAAC,SAAS,CAC9B,CACG,EAETA,kBAAM,KAAK,EAAC,MAAM,IACf,yBAAyB,KACxBA,eACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,oBAAoB,EAAE,IAAI;aAC3B,IAEA,uBAAA,IAAI,sCAAiB,CAAC,oBAAoB,EAC1CE,qBAAc,CAAC,MAAM,EAAE,YAAY,CAAC,CACnC,CACL,EAEDF,kBACE,KAAK,EAAC,2BAA2B,EACjC,IAAI,EAAC,QAAQ,eACH,QAAQ,eACP,IAAI,CAAC,QAAQ,IAEvB,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAO,GAAG,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC;YACvC,QACEA,eACE,KAAK,EAAE;oBACL,mBAAmB,EAAE,IAAI;oBACzB,cAAc,EAAE,IAAI;oBACpB,qBAAqB,EAAE,OAAO,CAAC,IAAI,KAAK,OAAO;iBAChD,EACD,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAE5B,OAAO,CAAC,IAAI,CACX,EACJ;SACH,CAAC,CACG,EAEN,kBAAkB,KACjBA,eAAG,KAAK,EAAC,4CAA4C,IAClD,8BAA8B,KAC7BA,sBAAO,wBAAwB,CAAQ,CACxC,EAEA,8BAA8B;YAC7B,IAAI,CAAC,sBAAsB,IAAIA,4BAAgB,EAEhD,IAAI,CAAC,sBAAsB,KAC1BA,sBAAO,uBAAA,IAAI,sCAAiB,CAAC,QAAQ,CAAC,aAAa,CAAQ,CAC5D,CACC,CACL,CACI,EAEPA,oBAAQ,KAAK,EAAC,QAAQ,IACpBA,iBAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,sBAAsB,KAC1BA,oBACE,GAAG,EAAC,iBAAiB,EACrB,KAAK,EAAC,8DAA8D,EACpE,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAEnC,uBAAA,IAAI,sCAAiB,CAAC,cAAc,CAC9B,CACV,EAEA,iBAAiB,KAChBA,oBACE,GAAG,EAAC,UAAU,EACd,KAAK,EAAC,sCAAsC,EAC5C,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7BA,sBAAU,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,aAAa,GAAa,EACvD,uBAAA,IAAI,sCAAiB,CAAC,OAAO,CACvB,CACV,EAEA,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,KACvCA,oBAAQ,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACxD,uBAAA,IAAI,sCAAiB,CAAC,WAAW,CAC3B,CACV,CACG,CACC,CACD,CACN,CACD,EACP;KACH;;;;;;;;;","names":["getAssetPath","getIconPath","Locale","h","Host","ANIMATION_DOTS"],"sources":["src/components/splash/splash.scss?tag=gx-ide-splash&encapsulation=shadow","src/components/splash/splash.tsx"],"sourcesContent":["@import \"../../global/components/splash-and-welcome-page\";\n@import \"../../global/temporary-mercury-overrides/_button.scss\";\n\n:host {\n  --wrapper-copacity: 0;\n  --wrapper-min-inline-size: 700px;\n  --wrapper-max-inline-size: 1040px;\n  --wrapper-block-size: 640px;\n  transition: var(--timing-regular) opacity;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 100%;\n  block-size: 100%;\n  padding: var(--spacing-padding-xl);\n\n  overflow: auto;\n}\n\n.wrapper {\n  flex: 1;\n  display: grid;\n  grid-template-columns: 1fr var(--wrapper-block-size);\n  block-size: var(--wrapper-block-size);\n  // min-inline-size: var(--wrapper-min-inline-size);\n  max-inline-size: var(--wrapper-max-inline-size);\n\n  background-color: var(--color-accent-surface-elevation-1);\n  border-radius: 12px;\n\n  overflow: auto;\n  transform: translateY(4px);\n}\n\n// Side inline-start (the illustration)\n.side-inline-start {\n  background-size: cover;\n}\n\n// Side inline-end (the content)\n.side-inline-end {\n  position: relative;\n  display: grid;\n  grid-template-rows: max-content 1fr max-content;\n  padding-block: 64px;\n  padding-inline: 80px;\n\n  transition: var(--timing-slow) grid-template-rows;\n  overflow: auto;\n}\n\n.close-button {\n  position: absolute;\n  inset-inline-end: 0;\n  inset-block-start: 0;\n}\n\n// header\n.header {\n  display: grid;\n  gap: var(--spacing-gap-xl);\n  margin-block-end: 92px; // Specific layout spacing - no exact token available\n}\n.header__logo__close-button {\n  display: flex;\n  justify-content: space-between;\n}\n.title {\n  color: var(--color-text-neutral-strawberry);\n  letter-spacing: 0.02em;\n}\n.next-version {\n  color: var(--color-text-neutral-strawberry);\n}\n.header__description {\n  color: var(--color-text-neutral-disabled);\n  line-height: 1.45 !important;\n  // TODO: Discuss with Design Team about line-height.\n  // Mercury line-heights looks tight to me.\n}\n\n.main {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-l);\n  // margin-block-start: auto;\n\n  overflow: auto;\n}\n.log__container {\n  --logVisibleLines: 7;\n  --logFontSize: var(\n    --font-size-body-s\n  ); // 12px is the font size of .caption-regular-l\n  --logLineHeight: var(\n    --line-height-relaxed\n  ); // 1.2 is the line-height of .caption-regular-l\n  --logGap: 4px;\n  --logContainerBlockSize: calc(\n    var(--logFontSize) * var(--logLineHeight) * var(--logVisibleLines) +\n      calc(var(--logGap) * (var(--logVisibleLines) - 1))\n  );\n  block-size: var(--logContainerBlockSize);\n  // TODO: Add/include on Mercury a monospaced font, and then use it here.\n  font-family: var(--font-family-code);\n  color: var(--color-text-neutral-disabled);\n  display: flex;\n  flex-direction: column-reverse;\n  gap: var(--logGap);\n  overflow: hidden;\n  // margin-block-start: auto;\n\n  &:hover {\n    overflow: auto;\n  }\n\n  > p {\n    // WA: This overrides the font family of the typographic style applied on the p tag\n    font-family: inherit;\n  }\n}\n.log__message {\n  opacity: 0;\n  transition: var(--timing-regular) opacity;\n  animation: fadeInLogMessage 0.45s ease-out forwards;\n\n  &--error {\n    color: var(--color-text-error-default);\n  }\n}\n\n// footer\n.footer {\n  display: grid;\n  grid-auto-rows: max-content;\n  gap: var(--spacing-gap-l);\n  margin-block-start: 24px;\n}\n.error-message {\n  color: var(--color-text-error-default);\n  margin-block-start: auto;\n  // TODO: Use clamp from a helper mixin\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n}\n\n// helpers\n.status--processing {\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n  gap: var(--spacing-gap-xs);\n}\n\n@keyframes fadeInLogMessage {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n","// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  getAssetPath\n} from \"@stencil/core\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../common/locale\";\nimport { ANIMATION_DOTS } from \"../../common/common\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n  `./gx-ide-assets/splash/images/copyrights-illustration.svg`\n);\nconst LOGO_NEXT = getAssetPath(\n  `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/typography\",\n  \"components/button\",\n  \"components/icon\",\n  \"chameleon/scrollbar\"\n];\n\nconst OPEN_LOG_ICON = getIconPath({\n  category: \"system\",\n  name: \"launch\",\n  colorType: \"primary\"\n});\n\n@Component({\n  tag: \"gx-ide-splash\",\n  styleUrl: \"splash.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/splash\"]\n})\nexport class GxIdeUiSplash {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  @Element() el: HTMLGxIdeSplashElement;\n\n  /**\n   * Set this to true if installation is in process\n   */\n  @State() ariaBusy: boolean = true;\n\n  /**\n   * The application version to display in the dialog.\n   */\n  @Prop() readonly appVersion: string;\n\n  /**\n   * Callback invoked when the user clicks the 'Download Docker' button.\n   */\n  @Prop() readonly downloadDockerCallback: () => void;\n\n  /**\n   * Callback invoked when the user clicks the quit button.\n   */\n  @Prop() readonly quitCallback: () => void;\n\n  /**\n   * Array of messages to display in the text box.\n   * This property updates whenever a message is added,\n   * and the scroll should position itself at the bottom to keep the last message visible.\n   */\n  @Prop() readonly messages: MessageType[] = [];\n\n  /**\n   * Callback invoked when the user clicks the 'Open log' link.\n   */\n  @Prop() readonly openLogCallback: () => void;\n\n  /**\n   * Set to `true` to display the quit button.\n   */\n  @Prop() readonly showQuitButton: boolean = false;\n\n  /**\n   * Set to `true` to display the 'Open log' link.\n   */\n  @Prop() readonly showOpenLogLink: boolean = false;\n\n  /**\n   * Set to `true` to display \"Docker is not installed\" error message and to display \"Download Docker\" button.\n   */\n  @Prop() readonly showDockerMissingError: boolean = false;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  render() {\n    const renderOpenLogLink = this.showOpenLogLink && this.openLogCallback;\n    const renderInstallationErrorMessage =\n      this.showQuitButton && this.quitCallback && this.messages.length > 0;\n    const renderInitializingMessage =\n      !(this.showQuitButton && this.quitCallback) && this.messages?.length > 0;\n    const renderErrorMessage =\n      this.showDockerMissingError || !renderInitializingMessage;\n\n    let installationErrorMessage =\n      this.#componentLocale.warnings.installationFailed;\n    if (renderOpenLogLink) {\n      installationErrorMessage = `${installationErrorMessage} ${\n        this.#componentLocale.warnings.checkTheLog\n      }`;\n    }\n\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div\n          class={{\n            scrollable: true,\n            wrapper: true\n          }}\n        >\n          <div\n            class=\"side-inline-start\"\n            style={{ backgroundImage: `url(${COPYRIGHTS_ILLUSTRATION})` }}\n            role=\"img\"\n          ></div>\n\n          <section class=\"side-inline-end scrollable\">\n            <header class=\"header\">\n              <img\n                src={LOGO_NEXT}\n                alt={this.#componentLocale.illustrationAlternativeText}\n              />\n              <h2 class=\"title heading-2\">{this.#componentLocale.title}</h2>\n              {this.appVersion && (\n                <p class=\"body-regular-m next-version\">\n                  {this.#componentLocale.nextVersion} {this.appVersion}\n                </p>\n              )}\n              <p class=\"body-italic-m header__description\">\n                {this.#componentLocale.allRightsReserved}\n              </p>\n              <p class=\"body-italic-m header__description\">\n                {this.#componentLocale.copyright}\n              </p>\n            </header>\n\n            <main class=\"main\">\n              {renderInitializingMessage && (\n                <p\n                  class={{\n                    \"body-regular-m\": true,\n                    \"status--processing\": true\n                  }}\n                >\n                  {this.#componentLocale.initializingServices}\n                  {ANIMATION_DOTS(\"tiny\", \"on-surface\")}\n                </p>\n              )}\n\n              <code\n                class=\"log__container scrollable\"\n                role=\"status\"\n                aria-live=\"polite\"\n                aria-busy={this.ariaBusy}\n              >\n                {this.messages?.reverse().map((message, i) => {\n                  return (\n                    <p\n                      class={{\n                        \"caption-regular-l\": true,\n                        \"log__message\": true,\n                        \"log__message--error\": message.type === \"error\"\n                      }}\n                      key={this.messages.length - i}\n                    >\n                      {message.text}\n                    </p>\n                  );\n                })}\n              </code>\n\n              {renderErrorMessage && (\n                <p class=\"error-message status--error body-regular-m\">\n                  {renderInstallationErrorMessage && (\n                    <span>{installationErrorMessage}</span>\n                  )}\n\n                  {renderInstallationErrorMessage &&\n                    this.showDockerMissingError && <span> - </span>}\n\n                  {this.showDockerMissingError && (\n                    <span>{this.#componentLocale.warnings.dockerMissing}</span>\n                  )}\n                </p>\n              )}\n            </main>\n\n            <footer class=\"footer\">\n              <div class=\"buttons-spacer\">\n                {this.showDockerMissingError && (\n                  <button\n                    key=\"download-docker\"\n                    class=\"button-secondary button-icon-and-text download-docker-button\"\n                    onClick={this.downloadDockerCallback}\n                  >\n                    {this.#componentLocale.downloadDocker}\n                  </button>\n                )}\n\n                {renderOpenLogLink && (\n                  <button\n                    key=\"open-log\"\n                    class=\"button-tertiary button-icon-and-text\"\n                    onClick={this.openLogCallback}\n                  >\n                    <ch-image class=\"icon-m\" src={OPEN_LOG_ICON}></ch-image>\n                    {this.#componentLocale.openLog}\n                  </button>\n                )}\n\n                {this.quitCallback && this.showQuitButton && (\n                  <button class=\"button-secondary\" onClick={this.quitCallback}>\n                    {this.#componentLocale.quitGenexus}\n                  </button>\n                )}\n              </div>\n            </footer>\n          </section>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type MessageType = {\n  type: \"info\" | \"error\";\n  text: string;\n};\n"],"version":3}

package/dist/cjs/gx-ide-start-page.cjs.entry.js

@@ -2509,7 +2509,7 @@ const zhCN = {
   },
 };
 
-const startPageCss = "/*@container queries*/\n/* hiChar styles\nFound on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.\n*/\n:host {\n  --common-spacing: var(--spacing-padding-xxl);\n  --spacing-body-block-start: var(--common-spacing);\n  --spacing-body-block-end: var(--common-spacing);\n  --spacing-body-inline-start: var(--common-spacing);\n  --spacing-body-inline-end: 0;\n  --spacing-body-inline-start: 0;\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n}\n\n:host(.spacing-body) .section-secondary,\n:host(.spacing-body) .section-create-new-kb__header,\n:host(.spacing-body) .section-create-new-kb__actions,\n:host(.spacing-body-inline) .section-secondary,\n:host(.spacing-body-inline) .section-create-new-kb__header,\n:host(.spacing-body-inline) .section-create-new-kb__actions {\n  padding-inline-start: var(--common-spacing);\n  padding-inline-end: var(--common-spacing);\n}\n\n:host(.spacing-body-inline-start) .section-secondary,\n:host(.spacing-body-inline-start) .section-create-new-kb__actions {\n  padding-inline-start: var(--common-spacing);\n}\n\n:host(.spacing-body-inline-end) .section-secondary,\n:host(.spacing-body-inline-end) .section-create-new-kb__actions {\n  padding-inline-end: var(--common-spacing);\n}\n\n.main {\n  animation: fadeIn var(--timing-fast) forwards;\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n  opacity: 0;\n  grid-template-rows: max-content 1fr;\n  gap: var(--spacing-gap-xxl);\n}\n\n@keyframes bounce {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(calc(-1 * 32px));\n  }\n}\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.section-create-new-kb__actions,\n.section-secondary__actions {\n  display: grid;\n  grid-auto-flow: column;\n  gap: var(--spacing-gap-xl);\n  overflow-x: auto;\n  padding-block-end: var(--spacing-padding-m);\n}\n\n.card-filled,\n.card-outlined {\n  display: grid;\n  gap: var(--spacing-gap-xl);\n  align-content: space-between;\n  border-radius: 8px;\n}\n\n.card-filled {\n  background-color: var(--color-accent-surface-elevation-1);\n  padding: var(--spacing-padding-xl);\n}\n\n.card-outlined {\n  border: 1px solid var(--color-border-surface-on-surface);\n  grid-template-columns: max-content 1fr;\n  align-items: center;\n  padding: var(--spacing-padding-xl) var(--spacing-padding-xl) var(--spacing-padding-m) var(--spacing-padding-xl);\n}\n\n.icon-capsule {\n  pointer-events: none;\n  display: inline-flex;\n  block-size: 40px;\n  inline-size: 40px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  border: 1px dashed var(--color-border-surface-on-elevation-2);\n}\n\n.card__header {\n  display: grid;\n  gap: var(--spacing-gap-l);\n  justify-items: self-start;\n}\n\n.card__header-description {\n  display: grid;\n  gap: var(--spacing-gap-m);\n}\n\n.section-create-new-kb {\n  display: grid;\n  grid-auto-rows: max-content;\n  gap: var(--spacing-gap-xxl);\n}\n.section-create-new-kb__header {\n  display: grid;\n  gap: var(--spacing-gap-m);\n}\n.section-create-new-kb__title {\n  color: var(--color-text-neutral-default);\n}\n.section-create-new-kb__actions {\n  display: grid;\n  gap: var(--spacing-gap-xl);\n  overflow-x: auto;\n  grid-auto-flow: column;\n  grid-auto-columns: 330px;\n}\n\n.samples-buttons-container {\n  flex-wrap: wrap;\n}\n\n.section-secondary {\n  display: grid;\n  block-size: 100%;\n  position: relative;\n  overflow: auto;\n}\n.section-secondary__title {\n  display: grid;\n  grid-template-columns: 1fr max-content 1fr;\n  gap: var(--spacing-gap-xl);\n  align-items: center;\n}\n.section-secondary__title::before, .section-secondary__title::after {\n  content: \"\";\n  block-size: 1px;\n  background-color: var(--color-border-surface-on-elevation-1);\n}\n.section-secondary__actions {\n  display: grid;\n}\n.section-secondary__actions--two-cards {\n  grid-template-columns: repeat(2, minmax(430px, 1fr));\n}\n.section-secondary__actions--multiple-cards {\n  grid-auto-columns: 670px;\n}\n\n.section-no-kbs {\n  display: grid;\n  block-size: 100%;\n  position: relative;\n  overflow: auto;\n  grid-template-rows: max-content max-content;\n  gap: var(--spacing-gap-xl);\n}\n\n.section-kbs {\n  background-color: var(--color-accent-surface-elevation-1);\n  border-radius: 4px;\n  padding: var(--spacing-padding-l);\n  display: grid;\n  container-type: inline-size;\n  grid-template-rows: auto 1fr;\n  overflow: hidden;\n}\n.section-kbs__header {\n  display: grid;\n  grid-template-columns: max-content 230px;\n  align-items: center;\n  gap: var(--spacing-gap-xxxl);\n  border-block-end: 1px solid var(--color-border-surface-on-elevation-1);\n  padding-block-end: var(--spacing-padding-l);\n}\n.section-kbs__header--no-border {\n  border-block-end-color: transparent !important;\n}\n.section-kbs__title {\n  align-items: center;\n  display: flex;\n  min-block-size: calc(32px - 1px);\n}\n.section-kbs__filter--hidden {\n  opacity: 0;\n}\n.section-kbs__list {\n  display: grid;\n  grid-auto-rows: max-content;\n  grid-template-columns: 1fr 1fr;\n  row-gap: var(--spacing-gap-m);\n  column-gap: var(--spacing-gap-xl);\n  overflow: auto;\n  position: relative;\n  padding-block-start: var(--spacing-padding-l);\n}\n.section-kbs__list--empty {\n  grid-template-columns: 1fr;\n  grid-auto-rows: 1fr;\n  overflow: hidden;\n}\n@container (max-width: 768px) {\n  .section-kbs__list {\n    grid-template-columns: 1fr;\n  }\n}\n\n.kb__item {\n  background-color: var(--color-accent-surface-elevation-2);\n  padding: var(--spacing-padding-l);\n  display: grid;\n  grid-template-columns: auto max-content;\n  gap: 48px;\n}\n.kb__details {\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  align-items: center;\n  gap: var(--spacing-gap-l);\n}\n.kb__name {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.kb__name:hover {\n  color: var(--color-text-neutral-default);\n}\n.kb__modified {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n}\n\n.hiChar {\n  color: var(--color-text-primary-default);\n  filter: brightness(1.3);\n}\n\n.loader {\n  border: 1px solid var(--color-border-surface-on-surface);\n}\n\n.heading-2,\n.heading-3 {\n  margin: 0;\n  color: #ffffff !important;\n}\n\n.card-filled .heading-3 {\n  color: var(--color-text-neutral-strawberry) !important;\n}\n\n.card__header-title {\n  color: var(--color-text-neutral-default);\n}\n\n.button-tertiary-no-padding-inline-start.button-tertiary {\n  padding-inline-start: 0;\n}";
+const startPageCss = "/*@container queries*/\n/* hiChar styles\nFound on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.\n*/\nbutton.button-secondary {\n  border-color: var(--color-border-neutral-default);\n}\n\n:host {\n  --common-spacing: var(--spacing-padding-xxl);\n  --spacing-body-block-start: var(--common-spacing);\n  --spacing-body-block-end: var(--common-spacing);\n  --spacing-body-inline-start: var(--common-spacing);\n  --spacing-body-inline-end: 0;\n  --spacing-body-inline-start: 0;\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n}\n\n:host(.spacing-body) .section-secondary,\n:host(.spacing-body) .section-create-new-kb__header,\n:host(.spacing-body) .section-create-new-kb__actions,\n:host(.spacing-body-inline) .section-secondary,\n:host(.spacing-body-inline) .section-create-new-kb__header,\n:host(.spacing-body-inline) .section-create-new-kb__actions {\n  padding-inline-start: var(--common-spacing);\n  padding-inline-end: var(--common-spacing);\n}\n\n:host(.spacing-body-inline-start) .section-secondary,\n:host(.spacing-body-inline-start) .section-create-new-kb__actions {\n  padding-inline-start: var(--common-spacing);\n}\n\n:host(.spacing-body-inline-end) .section-secondary,\n:host(.spacing-body-inline-end) .section-create-new-kb__actions {\n  padding-inline-end: var(--common-spacing);\n}\n\n.main {\n  animation: fadeIn var(--timing-fast) forwards;\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n  opacity: 0;\n  grid-template-rows: max-content 1fr;\n  gap: var(--spacing-gap-xxl);\n}\n\n@keyframes bounce {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(calc(-1 * 32px));\n  }\n}\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.section-create-new-kb__actions,\n.section-secondary__actions {\n  display: grid;\n  grid-auto-flow: column;\n  gap: var(--spacing-gap-xl);\n  overflow-x: auto;\n  padding-block-end: var(--spacing-padding-m);\n}\n\n.card-filled,\n.card-outlined {\n  display: grid;\n  gap: var(--spacing-gap-xl);\n  align-content: space-between;\n  border-radius: 8px;\n}\n\n.card-filled {\n  background-color: var(--color-accent-surface-elevation-1);\n  padding: var(--spacing-padding-xl);\n}\n\n.card-outlined {\n  border: 1px solid var(--color-border-surface-on-surface);\n  grid-template-columns: max-content 1fr;\n  align-items: center;\n  padding: var(--spacing-padding-xl) var(--spacing-padding-xl) var(--spacing-padding-m) var(--spacing-padding-xl);\n}\n\n.icon-capsule {\n  pointer-events: none;\n  display: inline-flex;\n  block-size: 40px;\n  inline-size: 40px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  border: 1px dashed var(--color-border-surface-on-elevation-2);\n}\n\n.card__header {\n  display: grid;\n  gap: var(--spacing-gap-l);\n  justify-items: self-start;\n}\n\n.card__header-description {\n  display: grid;\n  gap: var(--spacing-gap-m);\n}\n\n.section-create-new-kb {\n  display: grid;\n  grid-auto-rows: max-content;\n  gap: var(--spacing-gap-xxl);\n}\n.section-create-new-kb__header {\n  display: grid;\n  gap: var(--spacing-gap-m);\n}\n.section-create-new-kb__title {\n  color: var(--color-text-neutral-default);\n}\n.section-create-new-kb__actions {\n  display: grid;\n  gap: var(--spacing-gap-xl);\n  overflow-x: auto;\n  grid-auto-flow: column;\n  grid-auto-columns: 330px;\n}\n\n.samples-buttons-container {\n  flex-wrap: wrap;\n}\n\n.section-secondary {\n  display: grid;\n  block-size: 100%;\n  position: relative;\n  overflow: auto;\n}\n.section-secondary__title {\n  display: grid;\n  grid-template-columns: 1fr max-content 1fr;\n  gap: var(--spacing-gap-xl);\n  align-items: center;\n}\n.section-secondary__title::before, .section-secondary__title::after {\n  content: \"\";\n  block-size: 1px;\n  background-color: var(--color-border-surface-on-elevation-1);\n}\n.section-secondary__actions {\n  display: grid;\n}\n.section-secondary__actions--two-cards {\n  grid-template-columns: repeat(2, minmax(430px, 1fr));\n}\n.section-secondary__actions--multiple-cards {\n  grid-auto-columns: 670px;\n}\n\n.section-no-kbs {\n  display: grid;\n  block-size: 100%;\n  position: relative;\n  overflow: auto;\n  grid-template-rows: max-content max-content;\n  gap: var(--spacing-gap-xl);\n}\n\n.section-kbs {\n  background-color: var(--color-accent-surface-elevation-1);\n  border-radius: 4px;\n  padding: var(--spacing-padding-l);\n  display: grid;\n  container-type: inline-size;\n  grid-template-rows: auto 1fr;\n  overflow: hidden;\n}\n.section-kbs__header {\n  display: grid;\n  grid-template-columns: max-content 230px;\n  align-items: center;\n  gap: var(--spacing-gap-xxxl);\n  border-block-end: 1px solid var(--color-border-surface-on-elevation-1);\n  padding-block-end: var(--spacing-padding-l);\n}\n.section-kbs__header--no-border {\n  border-block-end-color: transparent !important;\n}\n.section-kbs__title {\n  align-items: center;\n  display: flex;\n  min-block-size: calc(32px - 1px);\n}\n.section-kbs__filter--hidden {\n  opacity: 0;\n}\n.section-kbs__list {\n  display: grid;\n  grid-auto-rows: max-content;\n  grid-template-columns: 1fr 1fr;\n  row-gap: var(--spacing-gap-m);\n  column-gap: var(--spacing-gap-xl);\n  overflow: auto;\n  position: relative;\n  padding-block-start: var(--spacing-padding-l);\n}\n.section-kbs__list--empty {\n  grid-template-columns: 1fr;\n  grid-auto-rows: 1fr;\n  overflow: hidden;\n}\n@container (max-width: 768px) {\n  .section-kbs__list {\n    grid-template-columns: 1fr;\n  }\n}\n\n.kb__item {\n  background-color: var(--color-accent-surface-elevation-2);\n  padding: var(--spacing-padding-l);\n  display: grid;\n  grid-template-columns: auto max-content;\n  gap: 48px;\n}\n.kb__details {\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  align-items: center;\n  gap: var(--spacing-gap-l);\n}\n.kb__name {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.kb__name:hover {\n  color: var(--color-text-neutral-default);\n}\n.kb__modified {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n}\n\n.hiChar {\n  color: var(--color-text-primary-default);\n  filter: brightness(1.3);\n}\n\n.loader {\n  border: 1px solid var(--color-border-surface-on-surface);\n}\n\n.heading-2,\n.heading-3 {\n  margin: 0;\n  color: #ffffff !important;\n}\n\n.card-filled .heading-3 {\n  color: var(--color-text-neutral-strawberry) !important;\n}\n\n.card__header-title {\n  color: var(--color-text-neutral-default);\n}\n\n.button-tertiary-no-padding-inline-start.button-tertiary {\n  padding-inline-start: 0;\n}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)