@getpara/core-components 0.1.0

package/dist/collection/components/cpsl-grid/cpsl-grid.css

@@ -0,0 +1,235 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  /**
+   * @prop --cpsl-grid-padding: Padding for the Grid
+   * @prop --cpsl-grid-padding-xs: Padding for the Grid on xs screens
+   * @prop --cpsl-grid-padding-sm: Padding for the Grid on sm screens
+   * @prop --cpsl-grid-padding-md: Padding for the Grid on md screens
+   * @prop --cpsl-grid-padding-lg: Padding for the Grid on lg screens
+   * @prop --cpsl-grid-padding-xl: Padding for the Grid on xl screens
+   *
+   * @prop --cpsl-grid-width: Width of the fixed Grid
+   * @prop --cpsl-grid-width-xs: Width of the fixed Grid on xs screens
+   * @prop --cpsl-grid-width-sm: Width of the fixed Grid on sm screens
+   * @prop --cpsl-grid-width-md: Width of the fixed Grid on md screens
+   * @prop --cpsl-grid-width-lg: Width of the fixed Grid on lg screens
+   * @prop --cpsl-grid-width-xl: Width of the fixed Grid on xl screens
+   */
+  -webkit-padding-start: var(--cpsl-grid-padding-xs, var(--cpsl-grid-padding, 0px));
+  padding-inline-start: var(--cpsl-grid-padding-xs, var(--cpsl-grid-padding, 0px));
+  -webkit-padding-end: var(--cpsl-grid-padding-xs, var(--cpsl-grid-padding, 0px));
+  padding-inline-end: var(--cpsl-grid-padding-xs, var(--cpsl-grid-padding, 0px));
+  padding-top: var(--cpsl-grid-padding-xs, var(--cpsl-grid-padding, 0px));
+  padding-bottom: var(--cpsl-grid-padding-xs, var(--cpsl-grid-padding, 0px));
+  -webkit-margin-start: auto;
+  margin-inline-start: auto;
+  -webkit-margin-end: auto;
+  margin-inline-end: auto;
+  display: block;
+  flex: 1;
+}
+@media (min-width: 576px) {
+  :host {
+    -webkit-padding-start: var(--cpsl-grid-padding-sm, var(--cpsl-grid-padding, 0px));
+    padding-inline-start: var(--cpsl-grid-padding-sm, var(--cpsl-grid-padding, 0px));
+    -webkit-padding-end: var(--cpsl-grid-padding-sm, var(--cpsl-grid-padding, 0px));
+    padding-inline-end: var(--cpsl-grid-padding-sm, var(--cpsl-grid-padding, 0px));
+    padding-top: var(--cpsl-grid-padding-sm, var(--cpsl-grid-padding, 0px));
+    padding-bottom: var(--cpsl-grid-padding-sm, var(--cpsl-grid-padding, 0px));
+  }
+}
+@media (min-width: 768px) {
+  :host {
+    -webkit-padding-start: var(--cpsl-grid-padding-md, var(--cpsl-grid-padding, 0px));
+    padding-inline-start: var(--cpsl-grid-padding-md, var(--cpsl-grid-padding, 0px));
+    -webkit-padding-end: var(--cpsl-grid-padding-md, var(--cpsl-grid-padding, 0px));
+    padding-inline-end: var(--cpsl-grid-padding-md, var(--cpsl-grid-padding, 0px));
+    padding-top: var(--cpsl-grid-padding-md, var(--cpsl-grid-padding, 0px));
+    padding-bottom: var(--cpsl-grid-padding-md, var(--cpsl-grid-padding, 0px));
+  }
+}
+@media (min-width: 992px) {
+  :host {
+    -webkit-padding-start: var(--cpsl-grid-padding-lg, var(--cpsl-grid-padding, 0px));
+    padding-inline-start: var(--cpsl-grid-padding-lg, var(--cpsl-grid-padding, 0px));
+    -webkit-padding-end: var(--cpsl-grid-padding-lg, var(--cpsl-grid-padding, 0px));
+    padding-inline-end: var(--cpsl-grid-padding-lg, var(--cpsl-grid-padding, 0px));
+    padding-top: var(--cpsl-grid-padding-lg, var(--cpsl-grid-padding, 0px));
+    padding-bottom: var(--cpsl-grid-padding-lg, var(--cpsl-grid-padding, 0px));
+  }
+}
+@media (min-width: 1200px) {
+  :host {
+    -webkit-padding-start: var(--cpsl-grid-padding-xl, var(--cpsl-grid-padding, 0px));
+    padding-inline-start: var(--cpsl-grid-padding-xl, var(--cpsl-grid-padding, 0px));
+    -webkit-padding-end: var(--cpsl-grid-padding-xl, var(--cpsl-grid-padding, 0px));
+    padding-inline-end: var(--cpsl-grid-padding-xl, var(--cpsl-grid-padding, 0px));
+    padding-top: var(--cpsl-grid-padding-xl, var(--cpsl-grid-padding, 0px));
+    padding-bottom: var(--cpsl-grid-padding-xl, var(--cpsl-grid-padding, 0px));
+  }
+}
+
+:host(.grid-fixed) {
+  width: var(--cpsl-grid-width-xs, var(--cpsl-grid-width, 100%));
+  max-width: 100%;
+}
+@media (min-width: 576px) {
+  :host(.grid-fixed) {
+    width: var(--cpsl-grid-width-sm, var(--cpsl-grid-width, 540px));
+  }
+}
+@media (min-width: 768px) {
+  :host(.grid-fixed) {
+    width: var(--cpsl-grid-width-md, var(--cpsl-grid-width, 720px));
+  }
+}
+@media (min-width: 992px) {
+  :host(.grid-fixed) {
+    width: var(--cpsl-grid-width-lg, var(--cpsl-grid-width, 960px));
+  }
+}
+@media (min-width: 1200px) {
+  :host(.grid-fixed) {
+    width: var(--cpsl-grid-width-xl, var(--cpsl-grid-width, 1140px));
+  }
+}
+
+:host(.cpsl-no-padding) {
+  --cpsl-grid-column-padding: 0;
+  --cpsl-grid-column-padding-xs: 0;
+  --cpsl-grid-column-padding-sm: 0;
+  --cpsl-grid-column-padding-md: 0;
+  --cpsl-grid-column-padding-lg: 0;
+  --cpsl-grid-column-padding-xl: 0;
+}

package/dist/collection/components/cpsl-grid/cpsl-grid.js

@@ -0,0 +1,46 @@
+import { Host, h } from "@stencil/core";
+export class CpslGrid {
+    constructor() {
+        this.fixed = false;
+    }
+    render() {
+        return (h(Host, { key: '76084ea41988e4fdff4a48dc400988d2aa190a56', class: {
+                'grid-fixed': this.fixed,
+            } }, h("slot", { key: '1eb8c755910397d58a2165238a1428769623ef6b' })));
+    }
+    static get is() { return "cpsl-grid"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-grid.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-grid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fixed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the grid will have a fixed width based on the screen size."
+                },
+                "attribute": "fixed",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-grid.js.map

package/dist/collection/components/cpsl-grid/cpsl-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-grid.js","sourceRoot":"","sources":["../../../../src/components/cpsl-grid/cpsl-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;qBAIH,KAAK;;IAErB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,KAAK;aACzB;YAED,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-grid',\n  styleUrl: 'cpsl-grid.scss',\n  shadow: true,\n})\nexport class CpslGrid {\n  /**\n   * If `true`, the grid will have a fixed width based on the screen size.\n   */\n  @Prop() fixed = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'grid-fixed': this.fixed,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-hero/cpsl-hero.css

@@ -0,0 +1,355 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --ring-3-size: 480px;
+  --ring-2-size: 360px;
+  --ring-1-size: 240px;
+  --ring-0-size: 120px;
+  --center-icon-size: 64px;
+  --default-theme-ring-3-opacity: 0.05;
+  --default-theme-ring-2-opacity: 0.1;
+  --default-theme-ring-1-opacity: 0.2;
+  --default-theme-ring-0-opacity: 0.3;
+  position: relative;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  clip-path: content-box;
+}
+
+:host > cpsl-text {
+  z-index: 1;
+}
+
+:host > .backgroundContainer {
+  position: relative;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host > .backgroundContainer > .background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-25%);
+  left: 0;
+  right: 0;
+  z-index: 0;
+}
+
+:host > .backgroundContainer > .background > .ring {
+  position: absolute;
+  top: 45px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  flex-shrink: 0;
+  transition: box-shadow 0.3s;
+}
+
+:host(.connection) .ring1,
+:host(.externalWalletConnection) > .backgroundContainer > .background .ring1 {
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.07);
+}
+:host(.connection) .ring2,
+:host(.externalWalletConnection) > .backgroundContainer > .background .ring2 {
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
+}
+:host(.connection) .ring3,
+:host(.externalWalletConnection) > .backgroundContainer > .background .ring3 {
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.04);
+}
+
+:host(.pending) > .backgroundContainer > .background .ring0 {
+  box-shadow: 0px 0px 20px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 80%));
+}
+:host(.pending) > .backgroundContainer > .background .ring1 {
+  box-shadow: 0px 0px 20px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 92%));
+}
+:host(.pending) > .backgroundContainer > .background .ring2 {
+  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 94%));
+}
+:host(.pending) > .backgroundContainer > .background .ring3 {
+  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 96%));
+}
+
+:host(.failed) > .backgroundContainer > .background > .ring0 {
+  box-shadow: 0px 0px 20px rgba(240, 68, 56, 0.1);
+}
+:host(.failed) > .backgroundContainer > .background > .ring1 {
+  box-shadow: 0px 0px 20px rgba(240, 68, 56, 0.08);
+}
+:host(.failed) > .backgroundContainer > .background > .ring2 {
+  box-shadow: 0px 0px 20px rgba(240, 68, 56, 0.06);
+}
+:host(.failed) > .backgroundContainer > .background > .ring3 {
+  box-shadow: 0px 0px 20px rgba(240, 68, 56, 0.04);
+}
+
+:host(.approved) > .backgroundContainer > .background .ring1 {
+  box-shadow: 0px 0px 20px rgba(219, 0, 179, 0.1);
+}
+:host(.approved) > .backgroundContainer > .background .ring2 {
+  box-shadow: 0px 0px 20px rgba(219, 0, 51, 0.1);
+}
+:host(.approved) > .backgroundContainer > .background .ring3 {
+  box-shadow: 0px 0px 20px rgba(254, 83, 48, 0.1);
+}
+
+:host(.add) > .backgroundContainer > .background .ring0 {
+  box-shadow: 0px 0px 20px rgba(240, 68, 56, 0.1);
+}
+:host(.add) > .backgroundContainer > .background .ring1 {
+  box-shadow: 0px 0px 20px rgba(219, 0, 179, 0.1);
+}
+:host(.add) > .backgroundContainer > .background .ring2 {
+  box-shadow: 0px 0px 20px rgba(219, 0, 51, 0.1);
+}
+:host(.add) > .backgroundContainer > .background .ring3 {
+  box-shadow: 0px 0px 20px rgba(254, 83, 48, 0.1);
+}
+
+:host(.failed) > .backgroundContainer > .background.defaultTheme > .ring0 {
+  box-shadow: 0px 0px 20px color-mix(in srgb, var(--cpsl-color-utility-red), transparent 90%);
+}
+:host(.failed) > .backgroundContainer > .background.defaultTheme > .ring1 {
+  box-shadow: 0px 0px 20px color-mix(in srgb, var(--cpsl-color-utility-red), transparent 92%);
+}
+:host(.failed) > .backgroundContainer > .background.defaultTheme > .ring2 {
+  box-shadow: 0px 0px 12px color-mix(in srgb, var(--cpsl-color-utility-red), transparent 94%);
+}
+:host(.failed) > .backgroundContainer > .background.defaultTheme > .ring3 {
+  box-shadow: 0px 0px 12px color-mix(in srgb, var(--cpsl-color-utility-red), transparent 96%);
+}
+
+:host(.approved) > .backgroundContainer > .background.defaultTheme .ring1 {
+  box-shadow: 0px 0px 20px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 93%));
+}
+:host(.approved) > .backgroundContainer > .background.defaultTheme .ring2 {
+  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 95%));
+}
+:host(.approved) > .backgroundContainer > .background.defaultTheme .ring3 {
+  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 96%));
+}
+
+:host(.add) > .backgroundContainer > .background.defaultTheme .ring0 {
+  box-shadow: 0px 0px 20px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 90%));
+}
+:host(.add) > .backgroundContainer > .background.defaultTheme .ring1 {
+  box-shadow: 0px 0px 20px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 93%));
+}
+:host(.add) > .backgroundContainer > .background.defaultTheme .ring2 {
+  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 95%));
+}
+:host(.add) > .backgroundContainer > .background.defaultTheme .ring3 {
+  box-shadow: 0px 0px 12px var(--cpsl-color-accent-0, color-mix(in srgb, var(--cpsl-color-foreground-0), transparent 96%));
+}
+
+:host(:not(.failed)) > .backgroundContainer > .background.defaultTheme > .ring0 {
+  opacity: var(--default-theme-ring-0-opacity);
+}
+:host(:not(.failed)) > .backgroundContainer > .background.defaultTheme > .ring1 {
+  opacity: var(--default-theme-ring-1-opacity);
+}
+:host(:not(.failed)) > .backgroundContainer > .background.defaultTheme > .ring2 {
+  opacity: var(--default-theme-ring-2-opacity);
+}
+:host(:not(.failed)) > .backgroundContainer > .background.defaultTheme > .ring3 {
+  opacity: var(--default-theme-ring-3-opacity);
+}
+
+:host > .backgroundContainer > .background > .ring3 {
+  width: var(--ring-3-size);
+  height: var(--ring-3-size);
+  border-radius: var(--ring-3-size);
+}
+
+:host > .backgroundContainer > .background > .ring2 {
+  width: var(--ring-2-size);
+  height: var(--ring-2-size);
+  border-radius: var(--ring-2-size);
+}
+
+:host > .backgroundContainer > .background > .ring1 {
+  width: var(--ring-1-size);
+  height: var(--ring-1-size);
+  border-radius: var(--ring-1-size);
+}
+
+:host > .backgroundContainer > .background > .ring0 {
+  width: var(--ring-0-size);
+  height: var(--ring-0-size);
+  border-radius: var(--ring-0-size);
+}
+
+:host > .backgroundContainer > .background > .ringCenter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 45px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  width: 120px;
+  height: 120px;
+  border-radius: 82px;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+:host > .backgroundContainer > .background > .ringCenter img {
+  width: 100%;
+  height: 100%;
+  animation: spin 2s linear infinite;
+}
+:host > .backgroundContainer > .background > .ringCenter img.approvedImage {
+  height: 160px;
+  width: 160px;
+}
+:host > .backgroundContainer > .background > .ringCenter img.connectionImage {
+  height: 160px;
+  width: 160px;
+}
+:host > .backgroundContainer > .background > .ringCenter img.pendingImage {
+  height: 90px;
+  width: 90px;
+}
+
+:host > .backgroundContainer > .background > .fadeOut {
+  position: absolute;
+  height: 19%;
+  top: 15%;
+  right: 0;
+  left: 0;
+  background: linear-gradient(180deg, color-mix(in srgb, var(--cpsl-color-background-0), transparent 100%) 0%, var(--cpsl-color-background-0) 100%);
+}
+
+:host > .backgroundContainer > .background > .cover {
+  position: absolute;
+  height: 100%;
+  top: 34%;
+  right: 0;
+  left: 0;
+  background: var(--cpsl-color-background-0);
+}
+
+:host > .backgroundContainer > .children {
+  z-index: 1;
+}
+
+:host(.connection) > .backgroundContainer > .background > .ringCenter > .connectDiagramContainer {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+}
+
+.centerIcon {
+  position: absolute;
+  --icon-color: var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));
+  --width: var(--center-icon-size);
+  --height: var(--center-icon-size);
+}
+
+.externalConnectionIcon {
+  animation: spin 2s linear infinite;
+  position: absolute;
+  --width: 120px;
+  --height: 120px;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+:host(.approved) > .backgroundContainer > .background > .ringCenter.defaultTheme {
+  border: 4px solid var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));
+}
+
+.customImageContainer {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--ring-0-size);
+  height: var(--ring-0-size);
+  border-radius: var(--ring-0-size);
+  border: 2px solid var(--cpsl-color-background-0);
+  box-sizing: border-box;
+  overflow: hidden;
+}