@onewelcome/react-lib-components 5.2.0 → 6.1.0

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -17,7 +17,7 @@
 @use "../../../../mixins.module.scss";
 
 .snackbar {
-  padding: 0.5rem 1rem;
+  padding: 1rem;
   border-radius: var(--snackbar-border-radius);
   display: flex;
   gap: 0.5rem;
@@ -27,11 +27,6 @@
   @include mixins.transition(height, 0.2s, ease-in-out);
   flex-grow: 0;
 
-  &.has-title {
-    align-items: flex-start;
-    padding: 1rem;
-  }
-
   &.info {
     background-color: var(--snackbar-info-background-color);
   }
@@ -57,6 +52,7 @@
     align-self: center;
     width: 2.5rem;
     height: 2.5rem;
+    margin: -0.5rem 0;
     flex-shrink: 0;
     border: 0;
 
@@ -77,39 +73,36 @@
   .icon {
     color: var(--snackbar-text-color);
     font-size: 1rem;
-    line-height: var(--default-line-height);
-    display: flex;
+    height: 1.25rem;
+    display: inline-flex;
+    align-items: center;
+    align-self: flex-start;
   }
 
   .title {
     color: var(--snackbar-text-color);
     flex: 1;
     font-size: 0.875rem;
-    line-height: var(--default-line-height);
+    line-height: 1.25rem;
     margin-bottom: 0.25rem;
-    margin-top: -2.5px;
     display: block;
   }
 
-  .content-wrapper {
+  .outer-content-wrapper {
+    display: flex;
+    gap: 0.5rem;
     flex-grow: 1;
   }
 
-  &.has-title .content-wrapper {
-    width: 12.5rem;
-  }
-
-  @media screen and (min-width: 37.5em) {
-    &:not(.has-title) .content {
-      white-space: nowrap;
-    }
+  .content-wrapper {
+    flex-grow: 1;
   }
 
   .content {
     color: var(--snackbar-text-color);
     font-size: 0.875rem;
+    line-height: 1.25rem;
     margin-bottom: 0;
-    line-height: var(--default-line-height);
   }
 
   .actions {
@@ -125,7 +118,7 @@
     font-size: 0.875rem;
     line-height: var(--button-font-size);
     font-weight: 400;
-    margin: 0;
+    margin: -0.5rem 0;
     padding: 0.625rem 1.25rem;
     cursor: pointer;
     transition:

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -65,6 +65,9 @@ export const SnackbarItem = ({
   const timerHandler = useRef<ReturnType<typeof setTimeout>>();
   const onAnimationEnd = () => onClose(id);
   const { ref, animationStarted, startAnimation } = useAnimation<HTMLDivElement>(onAnimationEnd);
+  const hasOnlyTitle = !content && !!title;
+  const renderTitle = title && !hasOnlyTitle;
+  const renderContentOrTitleOnly = content || hasOnlyTitle;
 
   useRegisterSnackbarHeight(ref, id);
 
@@ -113,7 +116,6 @@ export const SnackbarItem = ({
     classes["snackbar"],
     classes[variant],
     animationStarted ? readyclasses["slide-out"] : readyclasses["slide-in"],
-    title ? classes["has-title"] : "",
     className ?? ""
   ].join(" ");
 
@@ -125,18 +127,20 @@ export const SnackbarItem = ({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      <Icon icon={getVariantIcon()} className={classes["icon"]} />
-      <div className={classes["content-wrapper"]}>
-        {title && (
-          <Typography className={classes["title"]} variant="body-bold" tag="span">
-            {title}
-          </Typography>
-        )}
-        {content && (
-          <Typography className={classes["content"]} variant="body">
-            {content}
-          </Typography>
-        )}
+      <div className={classes["outer-content-wrapper"]}>
+        <Icon icon={getVariantIcon()} className={classes["icon"]} />
+        <div className={classes["content-wrapper"]}>
+          {renderTitle && (
+            <Typography className={classes["title"]} variant="body-bold" tag="span">
+              {title}
+            </Typography>
+          )}
+          {renderContentOrTitleOnly && (
+            <Typography className={classes["content"]} variant="body">
+              {hasOnlyTitle ? title : content}
+            </Typography>
+          )}
+        </div>
       </div>
       {actionButtons.length > 0 && <div className={classes["actions"]}>{actionButtons}</div>}
       <IconButton

package/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.tsx

@@ -17,7 +17,13 @@
 import React, { ReactNode, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { SnackbarContextProvider } from "./SnackbarStateProvider";
-import { Actions, SnackbarOptionsProps, Variant } from "../interfaces";
+import {
+  Actions,
+  EnqueueSnackbarProps,
+  SnackbarOptionsProps,
+  Variant,
+  isNewEnqueueSnackbarInterface
+} from "../interfaces";
 import { Placement, SnackbarContainer } from "../SnackbarContainer/SnackbarContainer";
 import { generateID } from "../../../../util/helper";
 import { SnackbarItem } from "../SnackbarItem/SnackbarItem";
@@ -92,52 +98,72 @@ export const SnackbarProvider = (
   };
 
   const enqueueSnackbar = (
-    title?: string,
+    propsOrTitle: EnqueueSnackbarProps | string | undefined,
     content?: string,
     options: SnackbarOptionsProps = {}
   ): void => {
+    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
+    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
     const {
       variant = "info",
       actions,
-      duration = getDuration(variant, actions, content),
+      duration = getDuration(variant, actions, props.content),
       onClose
-    } = options;
+    } = props;
     const item: Item = {
-      title,
-      content,
+      title: props.title,
+      content: props.content,
       variant,
-      className: options.className,
+      className: props.className,
       actions,
       duration,
       height: 0,
-      id: generateID(15, title),
+      id: generateID(15, props.title),
       onClose
     };
     addSnackbar(item);
   };
 
-  const enqueueSuccessSnackbar = (
+  const mapToNewInterface = (
     title?: string,
     content?: string,
-    options?: SnackbarOptionsProps
+    options: SnackbarOptionsProps = {}
+  ): EnqueueSnackbarProps => {
+    return {
+      title,
+      content,
+      ...options
+    };
+  };
+
+  const enqueueSuccessSnackbar = (
+    propsOrTitle: EnqueueSnackbarProps | string | undefined,
+    content?: string,
+    options: SnackbarOptionsProps = {}
   ): void => {
-    enqueueSnackbar(title, content, { ...options, variant: "success" });
+    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
+    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
+    enqueueSnackbar({ ...props, variant: "success" });
   };
 
   const enqueueErrorSnackbar = (
-    title?: string,
+    propsOrTitle: EnqueueSnackbarProps | string | undefined,
     content?: string,
-    options?: SnackbarOptionsProps
+    options: SnackbarOptionsProps = {}
   ): void => {
-    enqueueSnackbar(title, content, { ...options, variant: "error" });
+    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
+    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
+    enqueueSnackbar({ ...props, variant: "error" });
   };
 
   const enqueueWarningSnackbar = (
-    title?: string,
+    propsOrTitle: EnqueueSnackbarProps | string | undefined,
     content?: string,
-    options?: SnackbarOptionsProps
+    options: SnackbarOptionsProps = {}
   ): void => {
-    enqueueSnackbar(title, content, { ...options, variant: "warning" });
+    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
+    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
+    enqueueSnackbar({ ...props, variant: "warning" });
   };
 
   const onItemClosed = (id: string) => {

package/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarStateProvider.tsx

@@ -15,22 +15,14 @@
  */
 
 import React, { createContext } from "react";
-import { SnackbarOptionsProps } from "../interfaces";
+import { DeprecatedEnqueueSnackbarType } from "../interfaces";
 import { Item } from "./SnackbarProvider";
 
 interface SnackbarContextProps {
-  enqueueSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
-  enqueueSuccessSnackbar: (
-    title?: string,
-    content?: string,
-    options?: SnackbarOptionsProps
-  ) => void;
-  enqueueWarningSnackbar: (
-    title?: string,
-    content?: string,
-    options?: SnackbarOptionsProps
-  ) => void;
-  enqueueErrorSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
+  enqueueSnackbar: DeprecatedEnqueueSnackbarType;
+  enqueueSuccessSnackbar: DeprecatedEnqueueSnackbarType;
+  enqueueWarningSnackbar: DeprecatedEnqueueSnackbarType;
+  enqueueErrorSnackbar: DeprecatedEnqueueSnackbarType;
   setSnackbarHeight: (id: string, height: number) => void;
   snackbars: Item[];
 }

package/src/components/Notifications/Snackbar/interfaces.ts

@@ -27,3 +27,18 @@ export interface SnackbarOptionsProps {
   duration?: number;
   onClose?: () => void;
 }
+
+export interface EnqueueSnackbarProps extends SnackbarOptionsProps {
+  title?: string;
+  content?: string;
+}
+
+export type DeprecatedEnqueueSnackbarType = (
+  propsOrTitle: EnqueueSnackbarProps | string | undefined,
+  content?: string,
+  options?: SnackbarOptionsProps
+) => void;
+
+export function isNewEnqueueSnackbarInterface(args: unknown): args is EnqueueSnackbarProps {
+  return args !== null && typeof args === "object" && ("title" in args || "content" in args);
+}

package/src/components/Popover/Popover.tsx

@@ -23,7 +23,7 @@ import React, {
   useRef,
   useState
 } from "react";
-import { Offset, Placement, usePosition } from "../../hooks/usePosition";
+import { Offset, Placement, PositionType, usePosition } from "../../hooks/usePosition";
 import classes from "./Popover.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
@@ -63,6 +63,18 @@ const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     debounceAmount: debounceAmount ?? undefined
   });
 
+  const normalizePosition = (value: PositionType) => {
+    if (value === "initial") {
+      return "initial";
+    }
+
+    if (isNaN(value)) {
+      return 0;
+    }
+
+    return Number(value);
+  };
+
   useEffect(() => {
     if (initialCalculationDone) {
       setShowPopover(!!show);
@@ -114,7 +126,12 @@ const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       <div
         ref={elToBePositioned}
         className={`${classes.popover} ${className ?? ""} ${showPopover ? classes.show : ""}`}
-        style={{ top: top, left: left, right: right, bottom: bottom }}
+        style={{
+          top: normalizePosition(top),
+          left: normalizePosition(left),
+          right: normalizePosition(right),
+          bottom: normalizePosition(bottom)
+        }}
       >
         {children}
       </div>

package/src/components/Stepper/Step.tsx

@@ -17,7 +17,6 @@
 import React, { CSSProperties, ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
 import { Icon, Icons } from "../Icon/Icon";
 import classes from "./Step.module.scss";
-import { gapBetweenStepsInRem } from "./Stepper";
 
 export type StepStatus = "waiting" | "current" | "done" | "error";
 
@@ -33,6 +32,8 @@ export interface Props extends Omit<ComponentPropsWithRef<"div">, "onClick"> {
   onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
 }
 
+const gapBetweenStepsInRem = 0.5;
+
 const getStepContent = (index: number, status: StepStatus) => {
   switch (status) {
     case "waiting":

package/src/components/Stepper/Stepper.tsx

@@ -24,8 +24,6 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   textPosition?: "bottom" | "right";
 }
 
-export const gapBetweenStepsInRem = 0.5;
-
 export const Stepper = ({
   steps,
   direction = "horizontal",

package/src/components/Tooltip/Tooltip.module.scss

@@ -174,6 +174,7 @@
   transform-origin: center center;
   pointer-events: none;
   box-shadow: 0 0.0625rem 0.3125rem 0 rgba(1, 5, 50, 0.3);
+  word-break: break-all;
 
   @include mixins.transition($transition-property, 0.2s, ease-in-out);
 

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -24,8 +24,9 @@ import React, { HTMLAttributes, ReactElement, useEffect, useRef, useState } from
 interface CSSProperties {
   colorFocus?: string;
   colorPrimary?: string;
-  colorSecondary?: string;
-  colorTertiary?: string;
+  colorSuccess?: string;
+  colorWarning?: string;
+  colorDanger?: string;
   colorPrimary100?: string;
   colorPrimary300?: string;
   colorPrimary500?: string;
@@ -76,18 +77,18 @@ interface CSSProperties {
   buttonPrimaryHoverColor?: string;
   buttonPrimaryFocusedColor?: string;
   buttonOutlineHoverTextColor?: string;
-  buttonSecondaryDefaultColor?: string;
-  buttonSecondaryHoverColor?: string;
-  buttonSecondaryFocusedColor?: string;
-  buttonSecondaryPressedColor?: string;
-  buttonWarningDefaultColor?: string;
-  buttonWarningHoverColor?: string;
-  buttonWarningFocusedColor?: string;
-  buttonWarningPressedColor?: string;
+  buttonSuccessDefaultColor?: string;
+  buttonSuccessHoverColor?: string;
+  buttonSuccessFocusedColor?: string;
+  buttonSuccessPressedColor?: string;
   buttonDangerDefaultColor?: string;
   buttonDangerHoverColor?: string;
   buttonDangerFocusedColor?: string;
   buttonDangerPressedColor?: string;
+  buttonWarningDefaultColor?: string;
+  buttonWarningHoverColor?: string;
+  buttonWarningFocusedColor?: string;
+  buttonWarningPressedColor?: string;
   buttonDefaultColor?: string;
   buttonDefaultHoverColor?: string;
   buttonDefaultFocusedColor?: string;
@@ -238,34 +239,35 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorWhite: "#FFFFFF",
     colorFocus: "var(--color-primary300)",
     colorPrimary: "var(--color-primary500)",
-    colorSecondary: "var(--color-green500)",
-    colorTertiary: "var(--color-light-blue600)",
+    colorSuccess: "var(--color-green500)",
+    colorWarning: "var(--color-orange500)",
+    colorDanger: "var(--color-red500)",
     defaultPressedColor: "var(--color-blue-grey100)",
     defaultHoverColor: "var(--color-blue-grey25)",
     defaultLineHeight: "1.5", //FIXME: UCL-395
     defaultBorderRadius: "0.25rem",
     focusBorderRadius: "0.125rem",
-    buttonBorderRadius: "var(--default-border-radius)",
+    buttonBorderRadius: "0.125rem",
     buttonBorderWidth: "2px",
-    buttonFontSize: "1rem",
+    buttonFontSize: "0.875rem",
     buttonBorderStyle: "solid",
     buttonFillTextColor: "var(--light)",
     buttonPrimaryDefaultColor: "var(--color-primary500)",
     buttonPrimaryHoverColor: "var(--color-primary600)",
     buttonPrimaryFocusedColor: "var(--color-primary500)",
     buttonPrimaryPressedColor: "var(--color-primary700)",
-    buttonSecondaryDefaultColor: "var(--color-green500)",
-    buttonSecondaryHoverColor: "var(--color-green600)",
-    buttonSecondaryFocusedColor: "var(--color-green500)",
-    buttonSecondaryPressedColor: "var(--color-green700)",
-    buttonWarningDefaultColor: "var(--color-orange500)",
-    buttonWarningHoverColor: "var(--color-orange600)",
-    buttonWarningFocusedColor: "var(--color-orange500)",
-    buttonWarningPressedColor: "var(--color-orange700)",
+    buttonSuccessDefaultColor: "var(--color-green500)",
+    buttonSuccessHoverColor: "var(--color-green600)",
+    buttonSuccessFocusedColor: "var(--color-green500)",
+    buttonSuccessPressedColor: "var(--color-green700)",
     buttonDangerDefaultColor: "var(--color-red500)",
     buttonDangerHoverColor: "var(--color-red600)",
     buttonDangerFocusedColor: "var(--color-red500)",
     buttonDangerPressedColor: "var(--color-red700)",
+    buttonWarningDefaultColor: "var(--color-orange500)",
+    buttonWarningHoverColor: "var(--color-orange600)",
+    buttonWarningFocusedColor: "var(--color-orange500)",
+    buttonWarningPressedColor: "var(--color-orange700)",
     buttonDefaultColor: "var(--color-blue-grey700)",
     buttonDefaultHoverColor: "var(--color-blue-grey800)",
     buttonDefaultFocusedColor: "var(--color-blue-grey700)",

package/src/font/icomoon.svg

@@ -72,9 +72,12 @@
 <glyph unicode="&#xe93e;" glyph-name="circle" d="M512-12.8c-254.493 0-460.8 206.305-460.8 460.8 0 254.493 206.307 460.8 460.8 460.8 254.495 0 460.8-206.307 460.8-460.8 0-254.495-206.305-460.8-460.8-460.8zM512-64c282.767 0 512 229.233 512 512 0 282.77-229.233 512-512 512-282.77 0-512-229.23-512-512 0-282.767 229.23-512 512-512z" />
 <glyph unicode="&#xe93f;" glyph-name="table-search" d="M860.814 200.053c69.71 110.903 36.968 258.245-74.463 327.955-35.895 22.749-79.602 36.253-126.464 36.253-84.338 0-158.461-43.738-200.922-109.769l-0.569-0.947c-69.71-111.431-35.911-259.3 74.463-327.955 77.632-48.585 175.86-48.585 253.492 0l164.241-163.185 73.407 73.407-163.185 164.241zM755.192 232.797c-51.754-51.754-135.196-51.227-186.95 0-51.227 51.754-51.227 135.196 0.529 186.95 51.227 51.227 134.667 51.227 186.422 0 50.698-52.283 50.17-135.723-1.584-186.95h1.584zM844.971 933.595h-739.351c-58.333 0-105.621-47.288-105.621-105.621v0-633.73c0-58.333 47.288-105.621 105.621-105.621v0h306.83c-28.777 29.605-52.137 64.653-68.367 103.427l-0.814 2.195h-237.648v211.243h220.749c8.45 37.495 22.709 73.407 43.305 105.621h-264.053v211.243h316.865v-148.398c29.605 28.777 64.653 52.137 103.427 68.367l2.195 0.814v79.216h316.865v-105.621c42.806-27.479 78.143-62.815 104.802-104.261l0.819-1.36v316.865c0 58.333-47.288 105.621-105.621 105.621v0z" />
 <glyph unicode="&#xe940;" glyph-name="StyleFilled" d="M407.718 4.801v312.847h208.565v-312.847h260.705v417.125h156.424l-521.412 469.271-521.412-469.271h156.424v-417.125h260.705z" />
-<glyph unicode="&#xe941;" glyph-name="file-outline" d="M597.333 874.667h-341.333c-46.933 0-85.333-38.4-85.333-85.333v-682.667c0-46.933 38.4-85.333 85.333-85.333h512c46.933 0 85.333 38.4 85.333 85.333v512l-256 256zM768 106.667h-512v682.667h298.667v-213.333h213.333v-469.333z" />
+<glyph unicode="&#xe941;" glyph-name="file-outline" d="M614.4 960.001h-409.6c-56.32 0-102.4-46.080-102.4-102.4v-819.2c0-56.32 46.080-102.4 102.4-102.4h614.399c56.32 0 102.4 46.080 102.4 102.4v614.399l-307.2 307.2zM819.2 38.4h-614.399v819.2h358.401v-256h256v-563.199z" />
 <glyph unicode="&#xe942;" glyph-name="file-upload-outline" d="M597.333 874.667l256-256v-512c0-47.128-38.205-85.333-85.333-85.333v0h-512c-47.128 0-85.333 38.205-85.333 85.333v0 682.667c0 47.128 38.205 85.333 85.333 85.333v0h341.333zM768 106.667v469.333h-213.333v213.333h-298.667v-682.667h512zM512 448l170.667-170.667h-106.667v-128h-128v128h-106.667l170.667 170.667z" />
-<glyph unicode="&#xe943;" glyph-name="file-download-outline" d="M597.333 874.667l256-256v-512c0-47.128-38.205-85.333-85.333-85.333v0h-512c-47.128 0-85.333 38.205-85.333 85.333v0 682.667c0 47.128 38.205 85.333 85.333 85.333v0h341.333zM768 106.667v469.333h-213.333v213.333h-298.667v-682.667h512zM512 149.333l-170.667 170.667h106.667v128h128v-128h106.667l-170.667-170.667z" />
+<glyph unicode="&#xe943;" glyph-name="file-download-outline" d="M614.4 960.001l307.2-307.2v-614.4c0-56.554-45.846-102.4-102.4-102.4v0h-614.4c-56.554 0-102.4 45.846-102.4 102.4v0 819.201c0 56.554 45.846 102.4 102.4 102.4v0h409.6zM819.2 38.4v563.2h-256v256h-358.401v-819.201h614.4zM512 89.599l-204.8 204.8h128v153.6h153.6v-153.6h128l-204.8-204.8z" />
 <glyph unicode="&#xe944;" glyph-name="error-circle" d="M512.001 959.999c-282.624 0-512.001-229.376-512.001-512.001s229.376-511.998 512.001-511.998c282.626 0 511.999 229.374 511.999 511.998s-229.374 512.001-511.999 512.001zM563.201 191.996h-102.4v102.402h102.4v-102.402zM563.201 396.799h-102.4v307.2h102.4v-307.2z" />
+<glyph unicode="&#xe945;" glyph-name="upload" d="M933.648 598.588h-240.942v361.412h-361.412v-361.412h-240.942l421.648-421.648 421.648 421.648zM451.764 478.116v361.412h120.47v-361.412h70.475l-130.711-130.711-130.711 130.711h70.475zM90.352 56.47h843.294v-120.47h-843.294v120.47z" />
+<glyph unicode="&#xe946;" glyph-name="reply" d="M98.011 739.109l366.202-157.014-366.689 48.762 0.488 108.251zM463.726 313.905l-366.202-157.014v108.251l366.202 48.762zM0.488 886.857l-0.488-341.334 731.429-97.523-731.429-97.523 0.488-341.334 1023.512 438.857-1023.512 438.857z" />
+<glyph unicode="&#xe947;" glyph-name="save" d="M796.445 959.998h-682.667c-63.147 0-113.777-51.2-113.777-113.777v-796.444c0-62.577 50.631-113.777 113.777-113.777h796.444c62.577 0 113.777 51.2 113.777 113.777v682.667l-227.556 227.556zM910.224 49.775h-796.444v796.444h635.449l160.996-160.996v-635.449zM512.001 447.998c-94.436 0-170.667-76.231-170.667-170.667s76.231-170.667 170.667-170.667c94.436 0 170.667 76.231 170.667 170.667s-76.231 170.667-170.667 170.667zM170.668 789.331h512v-227.556h-512v227.556z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>