@onewelcome/react-lib-components 4.1.0 → 4.2.0

package/src/components/Tabs/Tabs.module.scss

@@ -31,31 +31,28 @@ $focus-width: 5px;
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
-  gap: 2rem;
   position: relative;
   margin: -$focus-width;
   padding: $focus-width;
   z-index: 0;
+
+  &.center {
+    justify-content: center;
+  }
+
+  &.right {
+    justify-content: flex-end;
+  }
 }
 
 .indicator {
   $transition-property: left, width;
 
   position: absolute;
-  height: var(--tab-active-border-height);
-  border-radius: 2px 2px 0 0;
+  height: calc(var(--tab-active-border-height) - var(--tablist-border-width));
+  border-radius: 0.125rem 0.125rem 0 0;
   background-color: var(--tab-active-border-color);
+  z-index: 2;
 
   @include mixins.transition($transition-property, 0.2s, ease-in-out);
 }
-
-.tabdivider {
-  border-bottom-style: var(--tablist-border-style);
-  border-bottom-width: var(--tablist-border-width);
-  border-bottom-color: var(--tablist-border-color);
-  width: calc(100% - ($focus-width * 2));
-  position: absolute;
-  bottom: $focus-width;
-  left: $focus-width;
-  z-index: -1;
-}

package/src/components/Tabs/Tabs.tsx

@@ -29,13 +29,27 @@ import { TabButton } from "./TabButton";
 import classes from "./Tabs.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
-  children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];
+  children: ReactElement<TabProps>[];
   selected?: number;
   onTabChange?: (index: number) => void;
+  fluid?: boolean;
+  align?: "left" | "center" | "right";
+  tabListClassName?: string;
+  iconsPosition?: "left" | "right" | "top" | "bottom";
 }
 
 const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, selected = 0, onTabChange, ...rest }: Props,
+  {
+    children,
+    selected = 0,
+    onTabChange,
+    className,
+    fluid,
+    tabListClassName,
+    align,
+    iconsPosition = "left",
+    ...rest
+  }: Props,
   ref
 ) => {
   const [renderedButtons, setRenderedButtons] = useState<ReactElement[]>([]);
@@ -92,7 +106,8 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         top:
           selectedButton.offsetTop +
           selectedButton.offsetHeight -
-          indicatorRef.current!.offsetHeight,
+          indicatorRef.current!.offsetHeight -
+          parseInt(getComputedStyle(selectedButton).borderBottomWidth),
         width: selectedButton.offsetWidth
       });
     }
@@ -120,7 +135,11 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             focused: usingKeyboardNavigation && activeTabIndex === index,
             tabActive: activeTabIndex === index,
             "aria-controls": `tab_${index}`,
-            onClick: () => setActiveTabIndex(index)
+            onClick: () => setActiveTabIndex(index),
+            disabled: child.props.disabled,
+            fluid: fluid,
+            iconPosition: iconsPosition,
+            icon: child.props.icon
           },
           child.props.title
         );
@@ -128,10 +147,6 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       return null;
     });
 
-    setRenderedButtons(buttons);
-  }, [activeTabIndex]);
-
-  useEffect(() => {
     const tabs = React.Children.map(children, (child, index) => {
       if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
         return React.cloneElement(child, {
@@ -147,13 +162,17 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     });
 
     setRenderedTabs(tabs);
-  }, [activeTabIndex]);
+    setRenderedButtons(buttons);
+  }, [activeTabIndex, fluid, align, iconsPosition]);
+
+  const tabListClasses = [classes["tablist"]];
+  align && tabListClasses.push(classes[align]);
+  tabListClassName && tabListClasses.push(tabListClassName);
 
   return (
-    <div {...rest} ref={tabsRef} className={`${classes["tabs"]} ${rest.className ?? ""}`}>
-      <div role="tablist" className={classes["tablist"]} onKeyDown={handleKeyDown}>
+    <div {...rest} ref={tabsRef} className={`${classes["tabs"]} ${className ?? ""}`}>
+      <div role="tablist" className={tabListClasses.join(" ")} onKeyDown={handleKeyDown}>
         {renderedButtons}
-        <div className={classes["tabdivider"]} />
         <div
           className={classes["indicator"]}
           ref={indicatorRef}

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -58,7 +58,10 @@ interface CSSProperties {
   colorBlack100?: string;
   colorBlack20?: string;
   colorBlack10?: string;
+  defaultPressedColor?: string;
+  defaultHoverColor?: string;
   defaultLineHeight?: string;
+  focusBorderRadius?: string;
   buttonBorderRadius?: string;
   buttonBorderWidth?: string;
   buttonFontSize?: string;
@@ -86,6 +89,15 @@ interface CSSProperties {
   buttonDefaultFocusedColor?: string;
   buttonDefaultPressedColor?: string;
   buttonOutlineActiveTextColor?: string;
+  checkboxUncheckedHoverColor?: string;
+  checkboxUncheckedPressedColor?: string;
+  checkboxCheckedHoverColor?: string;
+  checkboxCheckedPressedColor?: string;
+  radioHoverBackgroundColor?: string;
+  radioPressedBackgroundColor?: string;
+  radioHoverColor?: string;
+  radioPressedColor?: string;
+  defaultBorderRadius?: string;
   inputBorderRadius?: string;
   inputBorderWidth?: string;
   inputBorderWidthFocus?: string;
@@ -116,13 +128,18 @@ interface CSSProperties {
   tabsBackgroundColor?: string;
   tabActiveBorderHeight?: string;
   tabActiveBorderColor?: string;
+  tabActiveTextColor?: string;
   tablistBorderWidth?: string;
   tablistBorderStyle?: string;
   tablistBorderColor?: string;
   tabTextColor?: string;
+  tabHoverColor?: string;
+  tabPressedColor?: string;
   toggleBackgroundColor?: string;
   tooltipBackgroundColor?: string;
   wizardStepIndicatorFutureColor?: string;
+  contextMenuHoverColor?: string;
+  contextMenuPressedColor?: string;
   default?: string;
   success?: string;
   error?: string;
@@ -134,6 +151,7 @@ interface CSSProperties {
   light?: string;
   fontFamily?: string;
   fontFamilyCode?: string;
+  fontSizeFormLabel?: string;
   fontSize?: string;
   fontSizeH1?: string;
   fontSizeH2?: string;
@@ -187,8 +205,12 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorPrimary: "var(--color-primary500)",
     colorSecondary: "var(--color-green500)",
     colorTertiary: "var(--color-light-blue600)",
-    defaultLineHeight: "1.5",
-    buttonBorderRadius: "2px",
+    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)",
     buttonBorderWidth: "2px",
     buttonFontSize: "1rem",
     buttonBorderStyle: "solid",
@@ -214,6 +236,14 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     buttonDefaultFocusedColor: "var(--color-blue-grey700)",
     buttonDefaultPressedColor: "var(--color-blue-grey800)",
     buttonOutlineHoverTextColor: "var(--color-primary600)",
+    checkboxUncheckedHoverColor: "var(--color-blue-grey50)",
+    checkboxUncheckedPressedColor: "var(--default-pressed-color)",
+    checkboxCheckedHoverColor: "var(--color-primary600)",
+    checkboxCheckedPressedColor: "var(--color-primary700)",
+    radioHoverBackgroundColor: "var(--color-blue-grey50)",
+    radioPressedBackgroundColor: "var(--default-pressed-color)",
+    radioHoverColor: "var(--color-primary600)",
+    radioPressedColor: "var(--color-primary700)",
     inputBorderRadius: "2px",
     inputBorderWidth: "1px",
     inputBorderWidthFocus: "1px",
@@ -221,7 +251,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     inputBorderColor: "var(--color-blue-grey500)",
     inputBackgroundColor: "var(--light)",
     inputHelperTextColor: "var(--color-blue-grey500)",
-    inputHoverBackgroundColor: "var(--color-blue-grey25)",
+    inputHoverBackgroundColor: "var(--default-hover-color)",
     inputDisabledBackgroundColor: "var(--input-hover-background-color)",
     dragBackgroundColor: "var(--color-blue-grey25-transparent)",
     dragBorderStyle: "solid",
@@ -239,18 +269,23 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     bannerBorderRadius: "2px",
     bannerBorderWidth: "0 0 0 4px",
     dataGridRowBackgroundColor: "transparent",
-    dataGridRowHoverBackgroundColor: "var(--color-blue-grey25)",
+    dataGridRowHoverBackgroundColor: "var(--default-hover-color)",
     progressBarBackgroundColor: "var(--disabled)",
     tabsBackgroundColor: "var(--light)",
-    tabActiveBorderHeight: "4px",
+    tabActiveBorderHeight: "0.25rem",
     tabActiveBorderColor: "var(--color-primary)",
-    tablistBorderWidth: "1px",
+    tabActiveTextColor: "var(--color-primary)",
+    tablistBorderWidth: "0.0625rem",
     tablistBorderStyle: "solid",
     tablistBorderColor: "var(--color-blue-grey100)",
     tabTextColor: "var(--color-blue-grey900)",
+    tabHoverColor: "var(--default-hover-color)",
+    tabPressedColor: "var(--default-pressed-color)",
     toggleBackgroundColor: "var(--color-blue-grey100)",
     tooltipBackgroundColor: "var(--default)",
     wizardStepIndicatorFutureColor: "var(--color-blue-grey200)",
+    contextMenuHoverColor: "var(--default-hover-color)",
+    contextMenuPressedColor: "var(--default-pressed-color)",
     default: "var(--color-blue-grey900)",
     success: "var(--color-green500)",
     error: "var(--color-red500)",
@@ -262,14 +297,15 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     light: "var(--color-white)",
     fontFamily: "Roboto, sans-serif",
     fontFamilyCode: "'Roboto Mono', monospace",
-    fontSize: "1rem",
+    fontSizeFormLabel: "0.875rem", //FIXME: UCL-395
+    fontSize: "1rem", //FIXME: UCL-395
     fontSizeH1: "2.5rem",
     fontSizeH2: "1.625rem",
     fontSizeH3: "1.5rem",
     fontSizeH4: "1.25rem",
     fontSizeSub: ".75rem",
     fontSizeCode: "1rem",
-    formControlFontSize: "14px"
+    formControlFontSize: "0.875rem" //FIXME: UCL-395
   };
 
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */

package/src/font/icomoon.svg

@@ -64,12 +64,12 @@
 <glyph unicode="&#xe936;" glyph-name="share" d="M803.577 959.093c-60.996-6.264-111.416-48.982-130.72-110.8-4.107-13.144-4.775-19.152-4.415-41.074 0.256-14.119 0.718-28.342 1.026-31.576 0.616-5.751-3.132-8.061-179.702-111.518l-180.268-105.665-6.829 5.955c-17.251 15.147-43.745 27.674-68.698 32.5-79.788 15.301-156.957-32.5-179.292-111.21-3.594-12.682-4.621-21.616-4.621-39.946 0-43.693 13.606-76.501 44.925-108.027 30.806-31.062 59.2-43.642 102.79-45.491 20.742-0.872 27.52-0.308 42.102 3.337 21.359 5.339 43.847 16.121 58.532 28.136l11.090 9.036 182.937-107.308c160.808-94.267 182.783-107.77 181.704-111.364-0.668-2.259-1.746-12.014-2.362-21.718-2.875-42.461 15.249-86.822 47.441-116.293 86.822-79.48 224.833-34.605 248.657 80.814 13.041 63.153-18.689 129.642-76.553 160.448-22.334 11.86-43.026 16.892-69.057 16.841-37.429-0.154-64.333-9.19-92.11-30.908l-9.756-7.65-365.721 213.743 1.592 9.448c2.105 12.117 2.105 41.691 0.052 53.654l-1.592 9.242 176.981 103.714c97.296 57.043 178.624 104.535 180.678 105.563 2.927 1.386 6.315-0.102 14.633-6.469 15.711-11.963 31.062-19.922 50.882-26.339 23.875-7.702 58.532-8.215 83.074-1.232 24.285 6.931 46.157 19.202 64.231 36.043 20.126 18.792 32.963 38.508 41.691 64.179 6.521 18.998 6.983 22.026 7.034 48.006 0.102 23.515-0.616 30.088-4.723 43.129-7.085 22.745-19.614 45.285-33.579 60.534-34.811 37.994-80.866 55.503-132.056 50.266z" />
 <glyph unicode="&#xe937;" glyph-name="forbidden" d="M469.669 958.333c-61.032-4.988-120.449-21.272-177.517-48.634-58.243-27.948-100.643-58.317-145.536-104.31-44.013-45.113-69.174-81.057-96.242-137.466-67.045-139.74-67.045-300.387 0-440.127 27.068-56.41 52.229-92.353 96.242-137.466 44.893-45.993 87.291-76.362 145.536-104.31 231.141-110.838 509.153-32.203 649.702 183.753 83.258 128.003 104.676 291.51 57.29 437.046-9.609 29.489-35.576 85.751-50.541 109.518-28.682 45.627-76.362 99.615-115.093 130.424-103.356 82.23-233.561 122.135-363.839 111.572zM579.921 853.95c58.903-9.977 122.281-36.237 170.843-70.714 30.663-21.786 75.042-66.165 96.828-96.828 31.103-43.719 55.896-100.203 68.146-154.925 7.408-33.23 9.023-112.012 3.081-148.469-5.722-34.476-23.033-89.566-37.045-117.44-8.436-16.871-39.611-67.119-41.592-67.119-0.44 0-130.792 129.911-289.604 288.797l-288.723 288.723 25.453 16.579c45.407 29.635 102.403 52.081 155.951 61.472 32.863 5.722 102.55 5.722 136.659-0.074zM473.85 408.468l288.723-288.723-24.647-16.065c-34.404-22.3-56.702-33.010-96.242-46.067-45.187-14.964-80.543-20.54-129.471-20.54-112.158 0-211.481 41.078-290.63 120.155-31.835 31.909-59.271 69.394-78.049 106.731-14.23 28.168-31.909 83.11-37.485 116.194-6.016 35.796-6.016 99.615 0 135.413 5.428 32.203 23.181 87.805 36.604 114.579 8.436 16.871 39.611 67.119 41.592 67.119 0.44 0 130.792-129.911 289.604-288.797z" />
 <glyph unicode="&#xe938;" glyph-name="checkmark" d="M634.654 531.442l-308.796-315.534-246.041 250.069-79.817-84.283 325.419-332.669 31.268 31.708c17.209 17.428 155.607 158.902 307.478 314.361 151.944 155.459 295.030 301.766 318.022 325.126l41.813 42.472-80.549 84.283-308.796-315.534z" />
-<glyph unicode="&#xe939;" glyph-name="checkmark-square" d="M90.001 957.34c-41.006-7.848-78.542-45.555-87.357-87.869-3.526-17.062-3.526-825.57 0-842.632 8.93-42.655 45.385-79.11 88.040-88.040 17.062-3.526 825.57-3.526 842.632 0 42.655 8.93 79.11 45.385 88.040 88.040 3.526 17.062 3.526 825.57 0 842.632-9.043 43.337-46.522 80.248-89.462 88.097-17.461 3.184-825.116 2.958-841.894-0.228zM871.438 715.401l39.641-39.925-511.688-511.688-284.365 284.365 79.566 79.622 203.662-203.606 215.55 215.55c118.523 118.581 216.118 215.55 216.744 215.55 0.682 0 19.109-17.972 40.891-39.868z" />
-<glyph unicode="&#xe93a;" glyph-name="square" d="M90.002 957.339c-41.006-7.848-78.542-45.555-87.357-87.869-3.526-17.062-3.526-825.57 0-842.632 8.93-42.655 45.385-79.11 88.040-88.040 17.062-3.526 825.57-3.526 842.632 0 42.655 8.93 79.11 45.385 88.040 88.040 3.526 17.062 3.526 825.57 0 842.632-9.043 43.337-46.522 80.248-89.462 88.097-17.461 3.184-825.116 2.958-841.894-0.228zM910.114 448.153v-398.113h-796.224v796.224h796.224v-398.113z" />
-<glyph unicode="&#xe93b;" glyph-name="minus-square" d="M90.001 957.34c-41.006-7.848-78.542-45.555-87.357-87.869-3.526-17.062-3.526-825.57 0-842.632 8.93-42.655 45.385-79.11 88.040-88.040 17.062-3.526 825.57-3.526 842.632 0 42.655 8.93 79.11 45.385 88.040 88.040 3.526 17.062 3.526 825.57 0 842.632-9.043 43.337-46.522 80.248-89.462 88.097-17.461 3.184-825.116 2.958-841.894-0.228zM796.365 448.154v-56.874h-568.732v113.746h568.732v-56.874z" />
-<glyph unicode="&#xe93c;" glyph-name="radio" d="M459.549 957.295c-59.543-5.998-114.697-22.017-171.166-49.595-58.884-28.893-98.97-58.007-144.613-105.113-174.531-180.164-192.159-458.272-41.914-660.892 20.554-27.651 76.074-83.169 103.724-103.724 183.894-136.348 430.33-135.469 615.613 2.194 24.139 17.921 80.829 74.611 98.75 98.75 79.658 107.235 116.012 239.998 100.578 367.714-18.287 150.831-97.873 281.254-223.979 366.691-30.064 20.409-89.972 49.813-124.206 61.079-65.322 21.506-143.224 29.845-212.788 22.896zM552.959 855.18c67.442-7.388 127.057-28.455 182.797-64.663 89.021-57.787 154.488-152.659 176.214-255.359 19.384-91.801 7.681-186.307-33.209-268.16-58.373-116.891-162.096-195.671-291.568-221.638-37.305-7.461-107.893-7.973-144.687-1.097-132.618 24.87-237.731 103.577-297.126 222.516-56.617 113.306-56.763 248.557-0.366 362.155 26.113 52.594 59.836 95.678 103.65 132.325 85.363 71.539 196.182 105.699 304.296 93.922zM471.619 700.618c-35.988-5.632-67.442-17.848-99.336-38.623-53.398-34.818-91.728-87.778-108.186-149.442-5.706-21.286-6.51-28.966-6.656-63.2-0.073-32.258 0.804-42.646 5.12-59.761 24.432-96.482 94.581-166.557 190.916-190.916 29.698-7.461 87.339-7.461 117.037 0 55.372 14.044 101.821 42.719 137.298 84.925 66.858 79.438 79 192.452 30.502 283.96-51.131 96.555-158.145 149.88-266.697 133.056z" />
+<glyph unicode="&#xe939;" glyph-name="checkmark-square" d="M102.4 960c-56.554 0-102.4-45.846-102.4-102.4v-819.2c0-56.556 45.846-102.4 102.4-102.4h819.2c56.556 0 102.4 45.844 102.4 102.4v819.2c0 56.554-45.844 102.4-102.4 102.4h-819.2zM197.337 460.582l177.92-177.922 451.838 451.415 60.16-60.16-511.998-512-238.506 238.505 60.586 60.162z" />
+<glyph unicode="&#xe93a;" glyph-name="square" d="M921.6 908.8c28.278 0 51.2-22.923 51.2-51.2v-819.2c0-28.278-22.922-51.2-51.2-51.2h-819.2c-28.277 0-51.2 22.922-51.2 51.2v819.2c0 28.277 22.923 51.2 51.2 51.2h819.2zM102.4 960c-56.554 0-102.4-45.846-102.4-102.4v-819.2c0-56.556 45.846-102.4 102.4-102.4h819.2c56.556 0 102.4 45.844 102.4 102.4v819.2c0 56.554-45.844 102.4-102.4 102.4h-819.2z" />
+<glyph unicode="&#xe93b;" glyph-name="minus-square" d="M102.4 960h819.2c56.556 0 102.4-45.846 102.4-102.4v-819.2c0-56.556-45.844-102.4-102.4-102.4h-819.2c-56.554 0-102.4 45.844-102.4 102.4v819.2c0 56.554 45.846 102.4 102.4 102.4zM213.35 405.33h597.336v85.332h-597.336v-85.332z" />
+<glyph unicode="&#xe93c;" glyph-name="radio" 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-512zM853.335 448c0-188.513-152.822-341.335-341.335-341.335s-341.334 152.822-341.334 341.335c0 188.513 152.82 341.334 341.334 341.334s341.335-152.82 341.335-341.334z" />
 <glyph unicode="&#xe93d;" glyph-name="error-circle-alt" d="M460.8 294.4h102.4v-102.4h-102.4v102.4zM460.8 703.999h102.4v-307.2h-102.4v307.2zM512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512c282.77 0 512 229.23 512 512v0c-0.292 282.653-229.347 511.709-511.972 512h-0.028zM512 38.401c-226.215 0-409.599 183.384-409.599 409.599s183.384 409.599 409.599 409.599c226.215 0 409.599-183.384 409.599-409.599v0c0-226.215-183.384-409.599-409.599-409.599v0z" />
-<glyph unicode="&#xe93e;" glyph-name="circle" d="M467.003 958.3c-92.397-9.271-174.805-39.335-247.893-90.501-166.354-116.468-248.2-318.162-209.735-516.834 15.621-80.462 48.963-153.293 100.898-220.389 17.311-22.382 61.87-66.941 84.253-84.253 125.482-97.108 279.391-131.731 432.172-97.16 172.244 38.976 314.628 168.301 371.070 337.113 27.657 82.716 33.65 173.575 17.004 259.006-38.004 195.19-186.943 352.478-378.24 399.496-50.398 12.344-123.024 18.183-169.53 13.521zM574.56 852.791c85.943-13.266 164.152-53.215 226.585-115.598 51.883-51.883 87.735-113.601 106.122-182.539 37.286-139.67-0.154-285.691-99.926-389.764-77.696-80.975-183.87-126.456-295.268-126.456-157.903 0-301.773 91.269-370.148 234.934-37.798 79.284-48.708 172.142-30.525 259.16 36.314 173.473 182.283 304.641 359.7 323.232 23.56 2.458 78.363 0.922 103.46-2.971z" />
+<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" />