@swisspost/design-system-components 1.3.10 → 1.5.0

package/dist/collection/animations/fade.js

@@ -0,0 +1,6 @@
+const fadeDuration = 200;
+const fadedOutKeyFrame = { opacity: '0' };
+const fadedInKeyFrame = { opacity: '1' };
+export const fadeIn = (el) => el.animate([fadedOutKeyFrame, fadedInKeyFrame], { duration: fadeDuration });
+export const fadeOut = (el) => el.animate([fadedInKeyFrame, fadedOutKeyFrame], { duration: fadeDuration });
+//# sourceMappingURL=fade.js.map

package/dist/collection/animations/fade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fade.js","sourceRoot":"","sources":["../../../src/animations/fade.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,GAAG,CAAC;AACzB,MAAM,gBAAgB,GAAG,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;AACxC,MAAM,eAAe,GAAG,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;AAEvC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAW,EAAa,EAAE,CAAC,EAAE,CAAC,OAAO,CAC1D,CAAE,gBAAgB,EAAE,eAAe,CAAE,EACrC,EAAE,QAAQ,EAAE,YAAY,EAAE,CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAW,EAAa,EAAE,CAAC,EAAE,CAAC,OAAO,CAC3D,CAAE,eAAe,EAAE,gBAAgB,CAAE,EACrC,EAAE,QAAQ,EAAE,YAAY,EAAE,CAC3B,CAAC","sourcesContent":["const fadeDuration = 200;\nconst fadedOutKeyFrame = {opacity: '0'};\nconst fadedInKeyFrame = {opacity: '1'};\n\nexport const fadeIn = (el: Element): Animation => el.animate(\n  [ fadedOutKeyFrame, fadedInKeyFrame ],\n  { duration: fadeDuration }\n);\n\nexport const fadeOut = (el: Element): Animation => el.animate(\n  [ fadedInKeyFrame, fadedOutKeyFrame ],\n  { duration: fadeDuration }\n);\n"]}

package/dist/collection/animations/index.js

@@ -0,0 +1,2 @@
+export * from './fade';
+//# sourceMappingURL=index.js.map

package/dist/collection/animations/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/animations/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC","sourcesContent":["export * from './fade';\n"]}

package/dist/collection/collection-manifest.json

@@ -1,7 +1,12 @@
 {
   "entries": [
+    "./components/post-alert/post-alert.js",
     "./components/post-collapsible/post-collapsible.js",
-    "./components/post-icon/post-icon.js"
+    "./components/post-icon/post-icon.js",
+    "./components/post-tab-header/post-tab-header.js",
+    "./components/post-tab-panel/post-tab-panel.js",
+    "./components/post-tabs/post-tabs.js",
+    "./components/post-tooltip/post-tooltip.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/post-alert/alert-types.js

@@ -0,0 +1,2 @@
+export const ALERT_TYPES = ['primary', 'success', 'danger', 'warning', 'info', 'gray'];
+//# sourceMappingURL=alert-types.js.map

package/dist/collection/components/post-alert/alert-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-types.js","sourceRoot":"","sources":["../../../../src/components/post-alert/alert-types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,CAAU,CAAC","sourcesContent":["export const ALERT_TYPES = ['primary', 'success', 'danger', 'warning', 'info', 'gray'] as const;\n\nexport type AlertType = typeof ALERT_TYPES[number];\n"]}

package/dist/collection/components/post-alert/post-alert.css

@@ -0,0 +1,563 @@
+/*!
+ * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+
+ * The MIT License (MIT)
+
+ * Copyright (c) 2011-2020 Twitter, Inc.
+ * Copyright (c) 2011-2020 The Bootstrap Authors
+
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
+/**
+ * Override the necessary bootstrap
+ * colors and maps using colors from
+ * the post style guide only.
+ *
+ * Other bootstrap colors
+ * will be available as sass-variables
+ * but should not be used.
+*/
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
+.alert-primary, .alert-success, .alert-danger, .alert-warning, .alert-info, .alert-gray, .alert-notification, .alert-error {
+  background-color: rgb(var(--post-bg-rgb)) !important;
+  color: var(--post-contrast-color) !important;
+}
+
+.alert-success, .alert-warning, .alert-info, .alert-gray {
+  --post-contrast-color: #000;
+  --post-contrast-color-inverted: #fff;
+  --post-gray-10: hsl(0, 0%, 90%);
+  --post-gray-20: hsl(0, 0%, 80%);
+  --post-gray-40: hsl(0, 0%, 60%);
+  --post-gray-60: hsl(0, 0%, 40%);
+  --post-gray-80: hsl(0, 0%, 20%);
+  --post-yellow: #fc0;
+  --post-light: #faf9f8;
+  --post-gray: #f4f3f1;
+  --post-dark: hsl(0, 0%, 20%);
+  --post-primary: hsl(0, 0%, 20%);
+  --post-white: #fff;
+  --post-black: #000;
+  --post-success: #2c911c;
+  --post-info: #cce4ee;
+  --post-warning: #f49e00;
+  --post-danger: #a51728;
+  --post-nightblue: #004976;
+  --post-nightblue-bright: #0076a8;
+  --post-petrol: #006d68;
+  --post-petrol-bright: #00968f;
+  --post-coral: #9e2a2f;
+  --post-coral-bright: #e03c31;
+  --post-olive: #716135;
+  --post-olive-bright: #aa9d2e;
+  --post-purple: #80276c;
+  --post-purple-bright: #c5299b;
+  --post-aubergine: #523178;
+  --post-aubergine-bright: #7566a0;
+  --post-contrast-color-rgb: 0, 0, 0;
+  --post-contrast-color-inverted-rgb: 255, 255, 255;
+  --post-gray-10-rgb: 230, 230, 230;
+  --post-gray-20-rgb: 204, 204, 204;
+  --post-gray-40-rgb: 153, 153, 153;
+  --post-gray-60-rgb: 102, 102, 102;
+  --post-gray-80-rgb: 51, 51, 51;
+  --post-yellow-rgb: 255, 204, 0;
+  --post-light-rgb: 250, 249, 248;
+  --post-gray-rgb: 244, 243, 241;
+  --post-dark-rgb: 51, 51, 51;
+  --post-primary-rgb: 51, 51, 51;
+  --post-white-rgb: 255, 255, 255;
+  --post-black-rgb: 0, 0, 0;
+  --post-success-rgb: 44, 145, 28;
+  --post-info-rgb: 204, 228, 238;
+  --post-warning-rgb: 244, 158, 0;
+  --post-danger-rgb: 165, 23, 40;
+  --post-nightblue-rgb: 0, 73, 118;
+  --post-nightblue-bright-rgb: 0, 118, 168;
+  --post-petrol-rgb: 0, 109, 104;
+  --post-petrol-bright-rgb: 0, 150, 143;
+  --post-coral-rgb: 158, 42, 47;
+  --post-coral-bright-rgb: 224, 60, 49;
+  --post-olive-rgb: 113, 97, 53;
+  --post-olive-bright-rgb: 170, 157, 46;
+  --post-purple-rgb: 128, 39, 108;
+  --post-purple-bright-rgb: 197, 41, 155;
+  --post-aubergine-rgb: 82, 49, 120;
+  --post-aubergine-bright-rgb: 117, 102, 160;
+}
+
+.alert-primary, .alert-danger, .alert-notification, .alert-error {
+  --post-contrast-color: #fff;
+  --post-contrast-color-inverted: #000;
+  --post-dark: #faf9f8;
+  --post-light: hsl(0, 0%, 20%);
+  --post-gray-80: hsl(0, 0%, 90%);
+  --post-gray-60: hsl(0, 0%, 80%);
+  --post-gray-40: hsl(0, 0%, 60%);
+  --post-gray-20: hsl(0, 0%, 40%);
+  --post-gray-10: hsl(0, 0%, 20%);
+  --post-contrast-color-rgb: 255, 255, 255;
+  --post-contrast-color-inverted-rgb: 0, 0, 0;
+  --post-dark-rgb: 250, 249, 248;
+  --post-light-rgb: 51, 51, 51;
+  --post-gray-80-rgb: 230, 230, 230;
+  --post-gray-60-rgb: 204, 204, 204;
+  --post-gray-40-rgb: 153, 153, 153;
+  --post-gray-20-rgb: 102, 102, 102;
+  --post-gray-10-rgb: 51, 51, 51;
+}
+
+.alert {
+  position: relative;
+  box-sizing: border-box;
+  min-height: 5rem;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  padding: 1rem 1.25rem;
+  padding-inline-start: 5.5rem;
+  margin-block-end: 1rem;
+  font-size: 1rem;
+  font-weight: 300;
+}
+.alert.no-icon {
+  min-height: 3.5rem;
+  padding-inline-start: 1.25rem;
+}
+.alert[class^=pi-], .alert[class*=" pi-"] {
+  background-size: 3rem;
+  background-position: 1.25rem 1rem;
+  background-repeat: no-repeat;
+}
+.alert[class^=pi-].no-icon, .alert[class*=" pi-"].no-icon {
+  background-image: none;
+}
+.alert::before {
+  content: "";
+  display: block;
+}
+.alert::before,
+.alert > post-icon {
+  position: absolute;
+  height: 3rem;
+  width: 3rem;
+  left: 1.25rem;
+  top: 1rem;
+}
+.alert.no-icon::before, .alert[class^=pi-]::before, .alert[class*=" pi-"]::before {
+  content: unset;
+}
+.alert.no-icon > post-icon, .alert[class^=pi-] > post-icon, .alert[class*=" pi-"] > post-icon {
+  display: none;
+}
+@media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black) {
+  .alert {
+    filter: none !important;
+    background-color: transparent !important;
+    border: 2px solid WindowText;
+  }
+}
+.alert:not(.alert-action) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.25rem;
+}
+.alert:not(.alert-action) a {
+  font-weight: 400;
+}
+.alert:not(.alert-action) hr {
+  margin-block: 0.5rem 0.75rem !important;
+}
+.alert:not(.alert-action) > :only-child,
+.alert:not(.alert-action) > post-icon:first-child + :last-child {
+  font-size: 1.0625rem;
+  font-weight: 700;
+}
+.alert:not(.alert-action) > * {
+  margin: 0;
+}
+
+.alert-heading {
+  font-size: 1.0625rem;
+  font-weight: 700;
+}
+
+.alert-dismissible {
+  pointer-events: auto;
+  position: relative;
+  padding-inline-end: 4rem;
+}
+.alert-dismissible > .btn-close {
+  position: absolute;
+  inset-block-start: 1rem;
+  inset-inline-end: 1.25rem;
+}
+.alert-dismissible > .btn-close:first-child + :last-child {
+  font-size: 1.0625rem;
+  font-weight: 700;
+}
+
+.alert-action {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1.25rem;
+}
+.alert-action > .alert-content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.25rem;
+}
+.alert-action > .alert-content a {
+  font-weight: 400;
+}
+.alert-action > .alert-content hr {
+  margin-block: 0.5rem 0.75rem !important;
+}
+.alert-action > .alert-content > :only-child,
+.alert-action > .alert-content > post-icon:first-child + :last-child {
+  font-size: 1.0625rem;
+  font-weight: 700;
+}
+.alert-action > .alert-content > * {
+  margin: 0;
+}
+.alert-action > .alert-buttons {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+@media (min-width: 780px) {
+  .alert-action.alert-dismissible > .btn-close {
+    inset-block-start: calc(50% - 0.75rem);
+  }
+}
+@media (max-width: 779.98px) {
+  .alert-action {
+    flex-direction: column;
+    align-items: stretch;
+    padding-inline: 1.25rem;
+  }
+  .alert-action > .alert-content {
+    padding-inline-start: 4.25rem;
+    padding-inline-end: 2.75rem;
+  }
+  .alert-action > .alert-buttons {
+    display: flex;
+  }
+  .alert-action > .alert-buttons > .btn {
+    flex: 1 0 0;
+    width: 100%;
+  }
+  .alert-action > .alert-buttons > .btn:first-child {
+    margin-inline-start: 0;
+  }
+}
+
+.alert-fixed-bottom {
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  margin-bottom: 0;
+  border-radius: 0;
+  z-index: 1030;
+}
+@media (min-width: 1441px) {
+  .alert-fixed-bottom {
+    padding-inline-end: calc((100% - 1440px) / 2 + 128px + 1.25rem);
+    padding-inline-start: calc(
+      (100% - 1440px) / 2 + 128px + 1.25rem + 3rem + 1.25rem
+    );
+    background-position-x: calc((100% - 1440px) / 2 + 128px + 1.25rem + 1.5rem);
+  }
+  .alert-fixed-bottom::before {
+    left: calc((100% - 1440px) / 2 + 128px + 1.25rem);
+  }
+  .alert-fixed-bottom.no-icon {
+    padding-inline-start: calc((100% - 1440px) / 2 + 128px + 1.25rem);
+  }
+  .alert-fixed-bottom.alert-dismissible {
+    padding-inline-end: calc(
+        (100% - 1440px) / 2 + 128px + 1.25rem + 1.25rem + 1.5rem
+      );
+  }
+  .alert-fixed-bottom.alert-dismissible > .btn-close {
+    inset-inline-end: calc((100% - 1440px) / 2 + 128px + 1.25rem);
+  }
+}
+
+.alert-primary {
+  --post-bg-rgb: 51, 51, 51;
+}
+.alert-primary:not(.no-icon, [class^=pi-], [class*=" pi-"])::before {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667v2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18H3.2z'/%3E%3C/g%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667v2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18H3.2z'/%3E%3C/g%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+.alert-primary > post-icon {
+  background-color: hsl(0, 0%, 20%);
+}
+
+.alert-success {
+  --post-bg-rgb: 44, 145, 28;
+}
+.alert-success:not(.no-icon, [class^=pi-], [class*=" pi-"])::before {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/g%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/g%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+.alert-success > post-icon {
+  background-color: #2c911c;
+}
+
+.alert-danger {
+  --post-bg-rgb: 165, 23, 40;
+}
+.alert-danger:not(.no-icon, [class^=pi-], [class*=" pi-"])::before {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M14.667 4h2.667v18.667h-2.667V4zm0 21.333h2.667V28h-2.667v-2.667z'/%3E%3C/g%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M14.667 4h2.667v18.667h-2.667V4zm0 21.333h2.667V28h-2.667v-2.667z'/%3E%3C/g%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+.alert-danger > post-icon {
+  background-color: #a51728;
+}
+
+.alert-warning {
+  --post-bg-rgb: 244, 158, 0;
+}
+.alert-warning:not(.no-icon, [class^=pi-], [class*=" pi-"])::before {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M14.667 4h2.667v18.667h-2.667V4zm0 21.333h2.667V28h-2.667v-2.667z'/%3E%3C/g%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M14.667 4h2.667v18.667h-2.667V4zm0 21.333h2.667V28h-2.667v-2.667z'/%3E%3C/g%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+.alert-warning > post-icon {
+  background-color: #f49e00;
+}
+
+.alert-info {
+  --post-bg-rgb: 204, 228, 238;
+}
+.alert-info:not(.no-icon, [class^=pi-], [class*=" pi-"])::before {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M17.333 25.333v-16h-4.667V12h2v13.333h-2V28h6.667v-2.667zM14.667 4h2.667v2.667h-2.667V4z'/%3E%3C/g%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M17.333 25.333v-16h-4.667V12h2v13.333h-2V28h6.667v-2.667zM14.667 4h2.667v2.667h-2.667V4z'/%3E%3C/g%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+.alert-info > post-icon {
+  background-color: #cce4ee;
+}
+
+.alert-gray {
+  --post-bg-rgb: 244, 243, 241;
+}
+.alert-gray:not(.no-icon, [class^=pi-], [class*=" pi-"])::before {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.241 5.241 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.241 5.241 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27zM16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.325 6.325 0 0 0-.325 1.997 6.598 6.598 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667zM11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0zm-4 0c0-.735.599-1.333 1.334-1.333s1.333.598 1.333 1.333-.598 1.334-1.333 1.334-1.334-.598-1.334-1.334zm13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0zm-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333zm-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335zm7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0zm-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334zM11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334zM28.93 18.548a13.19 13.19 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266zm-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.647 11.647 0 0 0 2.359-.888.668.668 0 0 1 .896.294zM4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.798 11.798 0 0 0 4 15.92z'/%3E%3C/g%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.241 5.241 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.241 5.241 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27zM16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.325 6.325 0 0 0-.325 1.997 6.598 6.598 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667zM11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0zm-4 0c0-.735.599-1.333 1.334-1.333s1.333.598 1.333 1.333-.598 1.334-1.333 1.334-1.334-.598-1.334-1.334zm13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0zm-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333zm-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335zm7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0zm-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334zM11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334zM28.93 18.548a13.19 13.19 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266zm-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.647 11.647 0 0 0 2.359-.888.668.668 0 0 1 .896.294zM4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.798 11.798 0 0 0 4 15.92z'/%3E%3C/g%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+.alert-gray > post-icon {
+  background-color: #f4f3f1;
+}
+
+.alert-notification {
+  --post-bg-rgb: 51, 51, 51;
+}
+.alert-notification:not(.no-icon, [class^=pi-], [class*=" pi-"])::before {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667v2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18H3.2z'/%3E%3C/g%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667v2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18H3.2z'/%3E%3C/g%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+.alert-notification > post-icon {
+  background-color: hsl(0, 0%, 20%);
+}
+
+.alert-error {
+  --post-bg-rgb: 165, 23, 40;
+}
+.alert-error:not(.no-icon, [class^=pi-], [class*=" pi-"])::before {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M14.667 4h2.667v18.667h-2.667V4zm0 21.333h2.667V28h-2.667v-2.667z'/%3E%3C/g%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M14.667 4h2.667v18.667h-2.667V4zm0 21.333h2.667V28h-2.667v-2.667z'/%3E%3C/g%3E%3C/svg%3E");
+  background-color: currentColor;
+}
+.alert-error > post-icon {
+  background-color: #a51728;
+}
+
+.btn-close {
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  user-select: none;
+  appearance: button;
+  outline: none;
+  outline-offset: 2px;
+  /* Compatibility with button-group */
+  border-radius: 4px;
+  color: var(--post-gray-80);
+  transition: opacity 250ms, border-color 250ms, background-color 250ms, color 250ms;
+}
+.btn-close:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+}
+.btn-close::before {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/g%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/g%3E%3C/svg%3E");
+  background-color: currentColor;
+  content: "";
+  display: block;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.btn-close:focus, .btn-close:not(:disabled):hover, .pretend-hover.btn-close {
+  color: var(--post-contrast-color);
+}
+.btn-close:disabled {
+  color: var(--post-gray-40);
+}
+
+.btn-close-white {
+  color: hsl(0, 0%, 90%);
+}
+.btn-close-white:focus, .btn-close-white:not(:disabled):hover, .btn-close-white.pretend-hover {
+  color: #fff;
+}
+.btn-close-white:disabled {
+  color: hsl(0, 0%, 60%);
+}
+
+/*!
+ * Copyright 2021 by Swiss Post, Information Technology
+ */
+/**
+ * Generate responsive size properties for things like height, width, margin, padding, etc.
+ * @param $curve-size One of the curve sizes predefined at https://www.experience-hub.ch/document/2307#/grundlagen-web/abstaende
+ * @param $property Property key (height, width, padding, margin, top, etc.)
+ * @param $template Value template string used for shorthand declarations like padding ("$value auto" = padding: 1rem auto)
+ */
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
+/**
+ * Override the necessary bootstrap
+ * colors and maps using colors from
+ * the post style guide only.
+ *
+ * Other bootstrap colors
+ * will be available as sass-variables
+ * but should not be used.
+*/
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
+:host {
+  display: block;
+}
+:host ::slotted(*) {
+  margin: 0 !important;
+}
+
+.visually-hidden {
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+.visually-hidden:not(caption) {
+  position: absolute !important;
+}
+
+.alert-heading > ::slotted(h1) {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+}
+
+.alert-heading > ::slotted(h2) {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+}
+
+.alert-heading > ::slotted(h3) {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+}
+
+.alert-heading > ::slotted(h4) {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+}
+
+.alert-heading > ::slotted(h5) {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+}
+
+.alert-heading > ::slotted(h6) {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+}