@okta/odyssey-contribution-tooling 1.52.0 → 1.53.0

package/dist/esm/web-component/renderReactInWebComponent.js

@@ -0,0 +1,114 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { createReactRootElements } from "./createReactRootElements.js";
+import { encapsulateShadowDomFromGlobalStyles } from "./encapsulateShadowDomFromGlobalStyles.js";
+import version from "./odysseyWebComponentVersion.generated.js";
+export const webComponentDataAttributeName = "data-odyssey-react-web-component";
+export const versionedWebComponentName = `odyssey-react-web-component-${version}`.toLowerCase();
+const SsrFriendlyHtmlElementClass = "HTMLElement" in globalThis ? HTMLElement : class {};
+export class WebComponentClass extends SsrFriendlyHtmlElementClass {
+  #getReactComponent = null;
+  #reactRootElements;
+  elementName = this.localName;
+  reactRootPromise = Promise.resolve(null);
+  constructor() {
+    super();
+    this.#reactRootElements = createReactRootElements();
+    const {
+      appRootElement,
+      stylesRootElement
+    } = this.#reactRootElements;
+    const shadowRoot = this.attachShadow({
+      mode: "open"
+    });
+    shadowRoot.appendChild(stylesRootElement);
+    shadowRoot.appendChild(appRootElement);
+  }
+  setGetReactComponent(getReactComponent) {
+    this.reactRootPromise = this.reactRootPromise.then(reactRoot => {
+      this.#getReactComponent = getReactComponent;
+      if (reactRoot) {
+        reactRoot.render(this.#getReactComponent(this.#reactRootElements));
+      } else {}
+      return reactRoot;
+    });
+  }
+  connectedCallback() {
+    encapsulateShadowDomFromGlobalStyles({
+      nonce: this.getAttribute("nonce") || window.cspNonce,
+      stylesRootElement: this.#reactRootElements.stylesRootElement
+    });
+    this.reactRootPromise = this.reactRootPromise.then(reactRoot => {
+      if (reactRoot) {
+        throw new Error(`connectedCallback fired when reactRoot is already mounted.`);
+      }
+      return import("react-dom/client").then(({
+        createRoot
+      }) => createRoot(this.#reactRootElements.appRootElement));
+    }).then(reactRoot => {
+      if (!this.#getReactComponent) {} else {
+        reactRoot.render(this.#getReactComponent(this.#reactRootElements));
+      }
+      return reactRoot;
+    });
+  }
+  disconnectedCallback() {
+    this.reactRootPromise = this.reactRootPromise.then(reactRoot => {
+      if (!reactRoot) {
+        throw new Error(`disconnectedCallback fired when reactRoot is already unmounted.`);
+      }
+      reactRoot.unmount();
+      return null;
+    });
+  }
+}
+export const getReactWebComponent = ({
+  webComponentName = versionedWebComponentName,
+  getReactComponent,
+  nonce
+}) => {
+  if (!customElements.get(webComponentName)) {
+    customElements.define(webComponentName, WebComponentClass);
+  }
+  const element = document.createElement(webComponentName);
+  element.setAttribute(webComponentDataAttributeName, "");
+  element.setAttribute("nonce", nonce);
+  element.setGetReactComponent(getReactComponent);
+  return element;
+};
+export const renderReactInWebComponent = ({
+  webComponentName,
+  getReactComponent,
+  webComponentChildren,
+  webComponentParentElement,
+  webComponentRootElement,
+  nonce = window.cspNonce
+}) => {
+  const reactElement = getReactWebComponent({
+    getReactComponent,
+    webComponentName,
+    nonce
+  });
+  if (webComponentChildren) {
+    (Array.isArray(webComponentChildren) ? webComponentChildren : [webComponentChildren]).forEach(webComponentChild => {
+      reactElement.appendChild(webComponentChild);
+    });
+  }
+  if (webComponentParentElement) {
+    webComponentParentElement.appendChild(reactElement);
+  } else if (webComponentRootElement) {
+    webComponentRootElement.appendChild(reactElement);
+  }
+  return reactElement;
+};
+//# sourceMappingURL=renderReactInWebComponent.js.map

package/dist/esm/web-component/renderReactInWebComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderReactInWebComponent.js","names":["createReactRootElements","encapsulateShadowDomFromGlobalStyles","version","webComponentDataAttributeName","versionedWebComponentName","toLowerCase","SsrFriendlyHtmlElementClass","globalThis","HTMLElement","WebComponentClass","getReactComponent","reactRootElements","elementName","localName","reactRootPromise","Promise","resolve","constructor","appRootElement","stylesRootElement","shadowRoot","attachShadow","mode","appendChild","setGetReactComponent","then","reactRoot","render","connectedCallback","nonce","getAttribute","window","cspNonce","Error","createRoot","disconnectedCallback","unmount","getReactWebComponent","webComponentName","customElements","get","define","element","document","createElement","setAttribute","renderReactInWebComponent","webComponentChildren","webComponentParentElement","webComponentRootElement","reactElement","Array","isArray","forEach","webComponentChild"],"sources":["../../../src/web-component/renderReactInWebComponent.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport type { Root } from \"react-dom/client\";\n\nimport { type ReactNode } from \"react\";\n\nimport {\n  createReactRootElements,\n  type ReactRootElements,\n} from \"./createReactRootElements.js\";\nimport { encapsulateShadowDomFromGlobalStyles } from \"./encapsulateShadowDomFromGlobalStyles.js\";\nimport version from \"./odysseyWebComponentVersion.generated.js\";\n\ninterface GetReactWebComponentOptions {\n  getReactComponent: (reactRootElements: ReactRootElements) => ReactNode;\n  nonce: string;\n  webComponentName?: string;\n}\n\n// Used by selenium when selecting for odyssey web components regardless of their name.\nexport const webComponentDataAttributeName = \"data-odyssey-react-web-component\";\n\n// Unique name to avoid multiple versions of odyssey overwriting each other's implementations\nexport const versionedWebComponentName =\n  `odyssey-react-web-component-${version}`.toLowerCase();\n\nconst SsrFriendlyHtmlElementClass =\n  \"HTMLElement\" in globalThis\n    ? HTMLElement\n    : (class {} as unknown as typeof globalThis.HTMLElement);\n\nexport class WebComponentClass extends SsrFriendlyHtmlElementClass {\n  #getReactComponent: GetReactComponentInWebComponent | null = null;\n  readonly #reactRootElements: ReactRootElements;\n  public readonly elementName: string = this.localName;\n  // public for testing\n  public reactRootPromise: Promise<Root | null> = Promise.resolve(null);\n\n  constructor() {\n    super();\n\n    this.#reactRootElements = createReactRootElements();\n    const { appRootElement, stylesRootElement } = this.#reactRootElements;\n\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n    shadowRoot.appendChild(stylesRootElement);\n    shadowRoot.appendChild(appRootElement);\n  }\n\n  /**\n   * Provides the function used to initialize react content that is specific to this instance\n   * of the web component, which is used later in the connectedCallback.\n   *\n   * Always set immediately after creation via document.createElement\n   */\n  setGetReactComponent(getReactComponent: GetReactComponentInWebComponent) {\n    this.reactRootPromise = this.reactRootPromise.then((reactRoot) => {\n      this.#getReactComponent = getReactComponent;\n      if (reactRoot) {\n        // connectedCallback has already been fired. Need to mount this content to the existing root\n        reactRoot.render(this.#getReactComponent(this.#reactRootElements));\n      } else {\n        // Nothing to do. Content will be mounted when connectedCallback is called\n      }\n\n      return reactRoot;\n    });\n  }\n\n  connectedCallback() {\n    encapsulateShadowDomFromGlobalStyles({\n      nonce: this.getAttribute(\"nonce\") || window.cspNonce,\n      stylesRootElement: this.#reactRootElements.stylesRootElement,\n    });\n\n    this.reactRootPromise = this.reactRootPromise\n      .then((reactRoot) => {\n        if (reactRoot) {\n          // Shouldn't ever happen. connected and disconnected should never be called out of order\n          throw new Error(\n            `connectedCallback fired when reactRoot is already mounted.`,\n          );\n        }\n\n        // Ensure react root is available before mounting\n        // If we want to support React v17 in the future, we can use a try-catch on the import to grab the old `ReactDOM.render` function if `react-dom/client` errors. --Kevin Ghadyani\n        return import(\"react-dom/client\").then(({ createRoot }) =>\n          createRoot(this.#reactRootElements.appRootElement),\n        );\n      })\n      .then((reactRoot) => {\n        if (!this.#getReactComponent) {\n          // getReactComponent hasn't been set yet. Content will be mounted once it's set.\n        } else {\n          reactRoot.render(this.#getReactComponent(this.#reactRootElements));\n        }\n        return reactRoot;\n      });\n  }\n\n  disconnectedCallback() {\n    this.reactRootPromise = this.reactRootPromise.then((reactRoot) => {\n      if (!reactRoot) {\n        // Shouldn't ever happen\n        throw new Error(\n          `disconnectedCallback fired when reactRoot is already unmounted.`,\n        );\n      }\n\n      reactRoot.unmount();\n      // Set root to null. We don't want to attempt to render to a root that's already been unmounted.\n      return null;\n    });\n  }\n}\n\n/**\n * Returns a constructed web component which manages it's own shadow dom and react dom roots\n * A custom name can be specified, otherwise a default is provided\n */\nexport const getReactWebComponent = ({\n  webComponentName = versionedWebComponentName,\n  getReactComponent,\n  nonce,\n}: GetReactWebComponentOptions) => {\n  // This name hasn't been defined yet. Add a definition for it before constructing one.\n  if (!customElements.get(webComponentName)) {\n    customElements.define(webComponentName, WebComponentClass);\n  }\n\n  const element = document.createElement(webComponentName) as InstanceType<\n    typeof WebComponentClass\n  >;\n  // Set selenium attribute so this can be selected\n  element.setAttribute(webComponentDataAttributeName, \"\");\n  // Set the nonce for CSP compliance\n  element.setAttribute(\"nonce\", nonce);\n  // function used for creating react content\n  element.setGetReactComponent(getReactComponent);\n  return element;\n};\n\nexport type GetReactComponentInWebComponent = (\n  reactRootElements: ReactRootElements,\n) => ReactNode;\n\nexport type RenderReactInWebComponentProps = {\n  /**\n   * This is a callback function for rendering your React component or app in the Web Component.\n   * It gives you access to the Shadow DOM elements if you need them for Odyssey, Emotion, or MUI.\n   *\n   * You will need to add `<slot>` elements if you want to pass child elements or components or React apps.\n   * You can have multiple slots in your app if you add a `name` attribute to your `<slot>` elements.\n   */\n  getReactComponent: GetReactComponentInWebComponent;\n  /**\n   * Optional nonce for CSP compliance.\n   * Defaults to `window.cspNonce`.\n   */\n  nonce?: string;\n  /**\n   * One or more HTML elements that are going to render as `children` of the web component.\n   * If your React component doesn't take children, this is unnecessary.\n   *\n   * Typically, a React app root element is passed, but it can include an array of other elements if there are multiple slots for children.\n   *\n   * You will need to have rendered `<slot>` elements in your React component or `children` won't show up.\n   */\n  webComponentChildren?: HTMLElement | HTMLElement[];\n  /**\n   * Optional name given to this web component.\n   * Defaults to a 'odyssey-react-wc-' plus the current odyssey version\n   */\n  webComponentName?: string;\n} & (\n  | {\n      /**\n       * The React app renders in the web component, but the web component needs to be rendered in the document.\n       *\n       * This is the element the web component is rendered into.\n       */\n      webComponentParentElement: HTMLElement;\n      webComponentRootElement?: never;\n    }\n  | {\n      webComponentParentElement?: never;\n      /**\n       * @deprecated Use `webComponentParentElement` instead.\n       */\n      webComponentRootElement: HTMLElement;\n    }\n);\n\n/**\n * Lets you render React apps or components in a Web Component.\n *\n * This is useful when global styles are causing conflicts with your React components.\n */\nexport const renderReactInWebComponent = ({\n  webComponentName,\n  getReactComponent,\n  webComponentChildren,\n  webComponentParentElement,\n  webComponentRootElement,\n  nonce = window.cspNonce,\n}: RenderReactInWebComponentProps) => {\n  const reactElement = getReactWebComponent({\n    getReactComponent,\n    webComponentName,\n    nonce,\n  });\n\n  if (webComponentChildren) {\n    (Array.isArray(webComponentChildren)\n      ? webComponentChildren\n      : [webComponentChildren]\n    ).forEach((webComponentChild) => {\n      reactElement.appendChild(webComponentChild);\n    });\n  }\n\n  if (webComponentParentElement) {\n    webComponentParentElement.appendChild(reactElement);\n  }\n  // Remove this condition when `webComponentRootElement` is no longer a prop.\n  else if (webComponentRootElement) {\n    webComponentRootElement.appendChild(reactElement);\n  }\n\n  return reactElement;\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/favicon-wrapper.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+    <mask id="active-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M25,15.3 C26.8630998,15.3 28.7261995,16.2284418 29.795607,18.0853254 L29.795607,18.0853254 L34.7484772,26.6853254 C35.2679728,27.5873604 35.5068948,28.5446245 35.509009,29.4780654 C35.5112408,30.4762222 35.243212,31.4466974 34.7610935,32.2926531 C34.2789749,33.1386087 33.5826171,33.8603071 32.7267084,34.3600412 C31.9262928,34.8273748 30.9864445,35.1 29.9528702,35.1 L29.9528702,35.1 L20.0471298,35.1 C19.0135555,35.1 18.0737072,34.8273748 17.2732916,34.3600412 C16.4173829,33.8603071 15.7210251,33.1386087 15.2389065,32.2926531 C14.756788,31.4466974 14.4887592,30.4762222 14.490991,29.4780654 C14.4931052,28.5446245 14.7320272,27.5873604 15.2515228,26.6853254 L15.2515228,26.6853254 L20.204393,18.0853254 C21.2738005,16.2284418 23.1369002,15.3 25,15.3 Z"
+        transform="rotate(90 25 25.2)" />
+    </mask>
+    <mask id="critical-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M23.9,14.6 C26.7442665,14.6 29.3192665,15.7528668 31.1831998,17.6168002 C33.0471332,19.4807335 34.2,22.0557335 34.2,24.9 C34.2,27.7442665 33.0471332,30.3192665 31.1831998,32.1831998 C29.3192665,34.0471332 26.7442665,35.2 23.9,35.2 C21.0557335,35.2 18.4807335,34.0471332 16.6168002,32.1831998 C14.7528668,30.3192665 13.6,27.7442665 13.6,24.9 C13.6,22.0557335 14.7528668,19.4807335 16.6168002,17.6168002 C18.4807335,15.7528668 21.0557335,14.6 23.9,14.6 Z" />
+    </mask>
+    <mask id="negative-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M28.2,14.8 C29.633165,14.8 31.06633,15.346734 32.159798,16.440202 C33.2414078,17.5218119 33.7880833,18.9357904 33.8,20.353376 C33.811544,21.7725108 33.2872104,23.1952877 32.2266806,24.2917914 L32.2266806,24.2917914 L31.7206,24.8006729 L32.159798,25.240202 C33.253266,26.33367 33.8,27.766835 33.8,29.2 C33.8,30.633165 33.253266,32.06633 32.159798,33.159798 C31.0781881,34.2414078 29.6642096,34.7880833 28.246624,34.8 C26.8274892,34.811544 25.4047123,34.2872104 24.3082086,33.2266806 L24.3082086,33.2266806 L23.7993271,32.7206 L23.359798,33.159798 C22.26633,34.253266 20.833165,34.8 19.4,34.8 C17.966835,34.8 16.53367,34.253266 15.440202,33.159798 C14.3585922,32.0781881 13.8119167,30.6642096 13.8,29.246624 C13.788456,27.8274892 14.3127896,26.4047123 15.3733194,25.3082086 L15.3733194,25.3082086 L15.8794,24.7993271 L15.440202,24.359798 C14.346734,23.26633 13.8,21.833165 13.8,20.4 C13.8,18.966835 14.346734,17.53367 15.440202,16.440202 C16.5218119,15.3585922 17.9357904,14.8119167 19.353376,14.8 C20.7725108,14.788456 22.1952877,15.3127896 23.2917914,16.3733194 L23.2917914,16.3733194 L23.8006729,16.8794 L24.240202,16.440202 C25.33367,15.346734 26.766835,14.8 28.2,14.8 Z" />
+    </mask>
+    <mask id="positive-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M29.7294207,16.9922805 C31.1625744,16.9866282 32.5979013,17.5276612 33.6957071,18.6167741 C34.7816077,19.6940761 35.3338993,21.1058704 35.351258,22.5233982 C35.3686336,23.9423122 34.8500808,25.3669976 33.7941627,26.4676563 L33.7941627,26.4676563 L27.1794488,33.1363075 C26.0960963,34.2283069 24.675298,34.7802389 23.2508341,34.7920857 C21.8249459,34.8039445 20.3953569,34.27469 19.296927,33.2041927 L19.296927,33.2041927 L15.7761737,29.656491 C14.6870608,28.5586851 14.1460279,27.1233582 14.1516801,25.6902046 C14.1574213,24.2570509 14.7098478,22.8260705 15.8076536,21.7369576 C16.7544861,20.7976225 17.9523748,20.2659173 19.1834383,20.1411672 C20.4372495,20.0141119 21.7255226,20.3088158 22.8178242,21.0249737 L22.8178242,21.0249737 L23.1781395,21.2667759 L25.7761737,18.648254 C26.8652867,17.5504481 28.2962671,16.9980217 29.7294207,16.9922805 Z" />
+    </mask>
+    <mask id="warning-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M23.8,14.8 C25.6808284,14.8 27.5616567,15.7284418 28.6412402,17.5853254 L28.6412402,17.5853254 L33.6412402,26.1853254 C34.1656792,27.0873604 34.4068747,28.0446245 34.409009,28.9780654 C34.4112621,29.9762222 34.1406828,30.9466974 33.6539766,31.7926531 C33.1672704,32.6386087 32.4642862,33.3603071 31.600233,33.8600412 C30.7922009,34.3273748 29.8434094,34.6 28.8,34.6 L28.8,34.6 L18.8,34.6 C17.7565906,34.6 16.8077991,34.3273748 15.999767,33.8600412 C15.1357138,33.3603071 14.4327296,32.6386087 13.9460234,31.7926531 C13.4593172,30.9466974 13.1887379,29.9762222 13.190991,28.9780654 C13.1931253,28.0446245 13.4343208,27.0873604 13.9587598,26.1853254 L13.9587598,26.1853254 L18.9587598,17.5853254 C20.0383433,15.7284418 21.9191716,14.8 23.8,14.8 Z" />
+    </mask>
+
+    <polygon id="active" fill="none" stroke="#029CFD" stroke-linejoin="round" stroke-width="2.8"
+      points="25 21 30 29.6 20 29.6" transform="rotate(90 25 25.3)" />
+    <circle id="critical" fill="none" cx="23.9" cy="24.9" r="4.7" stroke="#000" stroke-linejoin="round"
+      stroke-width="2.8" />
+    <path id="negative" fill="none" stroke="#F40" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.8"
+      d="M19.4,20.4 L28.2,29.2 M28.2,20.4 L19.4,29.2" />
+    <polyline id="positive" fill="none" stroke="#66BF3C" stroke-linecap="round" stroke-linejoin="round"
+      stroke-width="2.8" points="19.752 25.712 23.204 29.192 29.752 22.592" />
+    <polygon id="warning" fill="none" stroke="#FFAE00" stroke-linejoin="round" stroke-width="2.8"
+      points="23.8 20.4 28.8 29 18.8 29" />
+  </defs>
+
+  <g id="mask">
+    <use id="icon" />
+  </g>
+  <use id="status" />
+</svg>

package/dist/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#FF4785" fill-rule="nonzero" d="M3.19456517,29.5523576 L2.20116517,3.08035756 C2.16820317,2.206041 2.83853396,1.46497625 3.71176517,1.41035756 L26.2285652,0.00315756388 C26.6728415,-0.0246745074 27.1088544,0.132425741 27.4332785,0.437229126 C27.7577026,0.74203251 27.9415652,1.16741027 27.9415652,1.61255756 L27.9415652,30.4585576 C27.9415652,30.8987416 27.7615266,31.3197739 27.4433606,31.6239653 C27.1251947,31.9281568 26.6965078,32.0890657 26.2567652,32.0693576 L4.73376517,31.1027576 C3.89549138,31.0651477 3.22618762,30.3908861 3.19476517,29.5523576 L3.19456517,29.5523576 Z"/><path fill="#FFF" d="M24.4581652,0.113957564 L21.3591652,0.307557564 L21.2081652,3.94195756 C21.2043927,4.0349625 21.2546048,4.1217998 21.3370927,4.16492627 C21.4195807,4.20805273 21.5195442,4.19973049 21.5937652,4.14355756 L23.0057652,3.07275756 L24.1981652,4.01215756 C24.2717133,4.07021898 24.3722957,4.08025391 24.4558654,4.03786787 C24.539435,3.99548183 24.5907604,3.90840015 24.5873652,3.81475756 L24.4581652,0.113757564 L24.4581652,0.113957564 Z M22.0463652,12.2851576 C21.4791652,12.7257576 17.2533652,13.0265576 17.2533652,12.3991576 C17.3427652,10.0053576 16.2709652,9.90035756 15.6755652,9.90035756 C15.1099652,9.90035756 14.1575652,10.0713576 14.1575652,11.3537576 C14.1575652,12.6605576 15.5495652,13.3983576 17.1835652,14.2643576 C19.5049652,15.4943576 22.3143652,16.9831576 22.3143652,20.7295576 C22.3143652,24.3201576 19.3967652,26.3037576 15.6755652,26.3037576 C11.8353652,26.3037576 8.47936517,24.7499576 8.85836517,19.3633576 C9.00716517,18.7307576 13.8895652,18.8811576 13.8895652,19.3633576 C13.8299652,21.5861576 14.3359652,22.2399576 15.6161652,22.2399576 C16.5985652,22.2399576 17.0449652,21.6983576 17.0449652,20.7865576 C17.0449652,19.4065576 15.5945652,18.5919576 13.9259652,17.6551576 C11.6665652,16.3865576 9.00716517,14.8935576 9.00716517,11.4679576 C9.00716517,8.04835756 11.3591652,5.76855756 15.5565652,5.76855756 C19.7541652,5.76855756 22.0463652,8.01335756 22.0463652,12.2853576 L22.0463652,12.2851576 Z"/></g></svg>