@onewelcome/react-lib-components 2.3.0 → 3.0.1

package/src/components/Wizard/Wizard.test.tsx

@@ -24,7 +24,7 @@ import {
   queryByRole,
   findByText
 } from "@testing-library/react";
-import { WizardActions } from "./WizardActions/WizardActions";
+import { WizardActions, Props as WizardActionProps } from "./WizardActions/WizardActions";
 import { WizardSteps } from "./WizardSteps/WizardSteps";
 import userEvent from "@testing-library/user-event";
 
@@ -54,14 +54,25 @@ const initWizardStepsProps = {
   onStepClick: jest.fn()
 };
 
-const initWizardActionsProps = {
-  onNext: jest.fn(),
-  onCancel: jest.fn(),
-  onSaveAndClose: jest.fn(),
-  cancelButtonLabel: "Cancel",
-  previousButtonLabel: "Previous",
-  nextButtonLabel: "Next",
-  saveAndCloseButtonLabel: "Save & close"
+const initWizardActionsProps: WizardActionProps = {
+  actions: {
+    cancel: {
+      label: "Cancel",
+      onClick: jest.fn()
+    },
+    next: {
+      label: "Next",
+      onClick: jest.fn()
+    },
+    previous: {
+      label: "Previous",
+      onClick: jest.fn()
+    },
+    saveAndClose: {
+      label: "Save and close",
+      onClick: jest.fn()
+    }
+  }
 };
 
 const renderWizard = (wizardProps?: initWizardPropsType) => {
@@ -92,16 +103,16 @@ const getStepButtons = (container: HTMLElement) =>
 const getActionsButtons = (container: HTMLElement) => {
   const actionsContainer = getByTestId(container, "wizard-actions");
   const cancel = queryByRole(actionsContainer, "button", {
-    name: initWizardActionsProps.cancelButtonLabel
+    name: initWizardActionsProps.actions.cancel.label
   });
   const next = queryByRole(actionsContainer, "button", {
-    name: initWizardActionsProps.nextButtonLabel
+    name: initWizardActionsProps.actions.next.label
   });
   const prev = queryByRole(actionsContainer, "button", {
-    name: initWizardActionsProps.previousButtonLabel
+    name: initWizardActionsProps.actions.previous.label
   });
   const save = queryByRole(actionsContainer, "button", {
-    name: initWizardActionsProps.saveAndCloseButtonLabel
+    name: initWizardActionsProps.actions.saveAndClose.label
   });
   return { cancel, next, prev, save };
 };
@@ -130,7 +141,9 @@ describe("Wizard", () => {
     const { next } = getActionsButtons(container);
     const wizardContent = getWizardContent(container);
     (
-      initWizardActionsProps.onNext as jest.MockedFunction<typeof initWizardActionsProps.onNext>
+      initWizardActionsProps.actions.next.onClick as jest.MockedFunction<
+        typeof initWizardActionsProps.actions.next.onClick
+      >
     ).mockReturnValue(true);
 
     await findByText(wizardContent, "Step 1");
@@ -140,13 +153,13 @@ describe("Wizard", () => {
     await findByText(wizardContent, "Step 4");
     const { save, prev, cancel } = getActionsButtons(container);
     save && (await userEvent.click(save));
-    expect(initWizardActionsProps.onSaveAndClose).toBeCalledWith(3);
+    expect(initWizardActionsProps.actions.saveAndClose.onClick).toBeCalledWith(3);
     prev && (await userEvent.click(prev));
     await findByText(wizardContent, "Step 2");
     prev && (await userEvent.click(prev));
     await findByText(wizardContent, "Step 1");
     cancel && (await userEvent.click(cancel));
-    expect(initWizardActionsProps.onCancel).toBeCalledTimes(1);
+    expect(initWizardActionsProps.actions.cancel.onClick).toBeCalledTimes(1);
   });
 
   it("should not be able to click over whole wizard via steps buttons in add mode", async () => {
@@ -155,7 +168,9 @@ describe("Wizard", () => {
     const stepsButtons = getStepButtons(container);
     const wizardContent = getWizardContent(container);
     (
-      initWizardActionsProps.onNext as jest.MockedFunction<typeof initWizardActionsProps.onNext>
+      initWizardActionsProps.actions.next.onClick as jest.MockedFunction<
+        typeof initWizardActionsProps.actions.next.onClick
+      >
     ).mockReturnValue(true);
     (
       initWizardStepsProps.onStepClick as jest.MockedFunction<

package/src/components/Wizard/WizardActions/WizardActions.test.tsx

@@ -42,14 +42,24 @@ const initWizardState: WizardStateType = {
 };
 
 const initParams: Props = {
-  cancelButtonLabel: "Cancel",
-  previousButtonLabel: "Previous",
-  nextButtonLabel: "Next",
-  saveAndCloseButtonLabel: "Save & Close",
-  onCancel: jest.fn(),
-  onNext: jest.fn(),
-  onPrevious: jest.fn(),
-  onSaveAndClose: jest.fn()
+  actions: {
+    cancel: {
+      label: "Cancel",
+      onClick: jest.fn()
+    },
+    next: {
+      label: "Next",
+      onClick: jest.fn()
+    },
+    previous: {
+      label: "Previous",
+      onClick: jest.fn()
+    },
+    saveAndClose: {
+      label: "Save and close",
+      onClick: jest.fn()
+    }
+  }
 };
 
 const renderWizardActions = (initReducerState?: WizardStateType, props?: Props) => {
@@ -79,10 +89,10 @@ const renderWizardActions = (initReducerState?: WizardStateType, props?: Props)
 };
 
 const getActionsButtons = (container: HTMLElement) => {
-  const cancel = queryByRole(container, "button", { name: initParams.cancelButtonLabel });
-  const next = queryByRole(container, "button", { name: initParams.nextButtonLabel });
-  const prev = queryByRole(container, "button", { name: initParams.previousButtonLabel });
-  const save = queryByRole(container, "button", { name: initParams.saveAndCloseButtonLabel });
+  const cancel = queryByRole(container, "button", { name: initParams.actions.cancel.label });
+  const next = queryByRole(container, "button", { name: initParams.actions.next.label });
+  const prev = queryByRole(container, "button", { name: initParams.actions.previous.label });
+  const save = queryByRole(container, "button", { name: initParams.actions.saveAndClose.label });
   return { cancel, next, prev, save };
 };
 
@@ -90,7 +100,9 @@ describe("WizardActions", () => {
   it("renders without crashing", async () => {
     const { container, dispatch } = renderWizardActions();
     const { cancel, prev, next, save } = getActionsButtons(container);
-    (initParams.onNext as jest.MockedFunction<typeof initParams.onNext>).mockReturnValueOnce(true);
+    (
+      initParams.actions.next.onClick as jest.MockedFunction<typeof initParams.actions.next.onClick>
+    ).mockReturnValueOnce(true);
 
     expect(cancel).toBeDefined();
     cancel && (await userEvent.click(cancel));
@@ -99,24 +111,26 @@ describe("WizardActions", () => {
     expect(prev).toBeNull();
     expect(save).toBeNull();
 
-    expect(initParams.onCancel).toBeCalledTimes(1);
-    expect(initParams.onNext).toHaveBeenCalledWith(0);
+    expect(initParams.actions.cancel.onClick).toBeCalledTimes(1);
+    expect(initParams.actions.next.onClick).toHaveBeenCalledWith(0);
     expect(dispatch).toBeCalledWith(changeCurrentStepNo(1));
   });
 
   it("should allow going prev and forward when there are prev step and next step (next step is disabled but next one can be used)", async () => {
     const { container, dispatch } = renderWizardActions({ ...initWizardState, currentStepNo: 1 });
     const { cancel, prev, next, save } = getActionsButtons(container);
-    (initParams.onNext as jest.MockedFunction<typeof initParams.onNext>).mockReturnValueOnce(true);
+    (
+      initParams.actions.next.onClick as jest.MockedFunction<typeof initParams.actions.next.onClick>
+    ).mockReturnValueOnce(true);
 
     expect(prev).toBeDefined();
     prev && (await userEvent.click(prev));
-    expect(initParams.onPrevious).toBeCalled();
+    expect(initParams.actions.previous.onClick).toBeCalled();
     expect(dispatch).toBeCalledWith(changeCurrentStepNo(0));
 
     expect(next).toBeDefined();
     next && (await userEvent.click(next));
-    expect(initParams.onNext).toHaveBeenCalledWith(1);
+    expect(initParams.actions.next.onClick).toHaveBeenCalledWith(1);
     expect(dispatch).toBeCalledWith(changeCurrentStepNo(3));
 
     expect(cancel).toBeDefined();
@@ -133,7 +147,7 @@ describe("WizardActions", () => {
     expect(save).toBeDefined();
 
     save && (await userEvent.click(save));
-    expect(initParams.onSaveAndClose).toHaveBeenCalledWith(3);
+    expect(initParams.actions.saveAndClose.onClick).toHaveBeenCalledWith(3);
   });
 
   it("should show save and close when next steps are disabled", async () => {
@@ -155,7 +169,7 @@ describe("WizardActions", () => {
     expect(save).toBeDefined();
 
     save && (await userEvent.click(save));
-    expect(initParams.onSaveAndClose).toHaveBeenCalledWith(0);
+    expect(initParams.actions.saveAndClose.onClick).toHaveBeenCalledWith(0);
   });
 
   it("should show save button on middle step when mode is `edit`", async () => {
@@ -168,16 +182,18 @@ describe("WizardActions", () => {
     expect(save).toBeDefined();
 
     save && (await userEvent.click(save));
-    expect(initParams.onSaveAndClose).toHaveBeenCalledWith(0);
+    expect(initParams.actions.saveAndClose.onClick).toHaveBeenCalledWith(0);
   });
 
   it("should not allow going forward when dev returns false on onNext callback", async () => {
     const { container, dispatch } = renderWizardActions();
     const { next } = getActionsButtons(container);
-    (initParams.onNext as jest.MockedFunction<typeof initParams.onNext>).mockReturnValueOnce(false);
+    (
+      initParams.actions.next.onClick as jest.MockedFunction<typeof initParams.actions.next.onClick>
+    ).mockReturnValueOnce(false);
 
     next && (await userEvent.click(next));
-    expect(initParams.onNext).toHaveBeenCalledWith(0);
+    expect(initParams.actions.next.onClick).toHaveBeenCalledWith(0);
     expect(dispatch).not.toBeCalled();
   });
 });

package/src/components/Wizard/WizardActions/WizardActions.tsx

@@ -15,21 +15,36 @@
  */
 
 import React, { Fragment, useContext, useMemo } from "react";
-import { Button } from "../../Button/Button";
+import { Button, Props as ButtonProps } from "../../Button/Button";
 import { Step } from "../BaseWizardSteps/BaseWizardSteps";
 import { WizardMode } from "../Wizard";
 import { WizardStateContext } from "../WizardStateProvider";
 import { changeCurrentStepNo } from "../wizardStateReducer";
 
 export interface Props extends React.HTMLProps<HTMLDivElement> {
-  cancelButtonLabel: string;
-  previousButtonLabel: string;
-  nextButtonLabel: string;
-  saveAndCloseButtonLabel: string;
-  onCancel: () => void;
-  onNext: (currentStepNo: number) => boolean;
-  onPrevious?: () => void;
-  onSaveAndClose: (currentStepNo: number) => void;
+  actions: {
+    cancel: {
+      label?: string;
+      hide?: boolean;
+      onClick?: () => void;
+      cancelButtonProps?: ButtonProps;
+    };
+    previous: {
+      label: string;
+      onClick: () => void;
+      previousButtonProps?: ButtonProps;
+    };
+    next: {
+      label: string;
+      onClick: (currentStepNo: number) => boolean;
+      nextButtonProps?: ButtonProps;
+    };
+    saveAndClose: {
+      label: string;
+      onClick: (currentStepNo: number) => void;
+      saveAndCloseButtonProps?: ButtonProps;
+    };
+  };
 }
 
 const calculateNextStepNo = (steps: Step[], currentStepNo: number) => () =>
@@ -52,16 +67,7 @@ const useNextStepNo = (mode: WizardMode, currentStepNo: number, steps: Step[]) =
 const usePreviousStepNo = (mode: WizardMode, currentStepNo: number, steps: Step[]) =>
   useMemo(calculatePrevStepNo(steps, currentStepNo), [mode, currentStepNo, steps]);
 
-export const WizardActions = ({
-  onCancel,
-  onNext,
-  onPrevious,
-  onSaveAndClose,
-  cancelButtonLabel,
-  previousButtonLabel,
-  nextButtonLabel,
-  saveAndCloseButtonLabel
-}: Props) => {
+export const WizardActions = ({ actions }: Props) => {
   const {
     state: { mode, steps, currentStepNo },
     dispatch
@@ -81,35 +87,41 @@ export const WizardActions = ({
   };
 
   const onNextWrapper = () => {
-    onNext(currentStepNo) && changeStepNo("forward");
+    actions.next.onClick(currentStepNo) && changeStepNo("forward");
   };
 
   const onPreviousWrapper = () => {
-    onPrevious?.();
+    actions.previous.onClick?.();
     changeStepNo("backward");
   };
 
   const onSaveAndCloseWrapper = () => {
-    onSaveAndClose(currentStepNo);
+    actions.saveAndClose.onClick(currentStepNo);
   };
 
   return (
     <Fragment>
-      <Button variant="text" onClick={onCancel}>
-        {cancelButtonLabel}
-      </Button>
+      {!actions.cancel.hide && (
+        <Button
+          variant="text"
+          onClick={actions.cancel.onClick}
+          {...actions.cancel.cancelButtonProps}
+        >
+          {actions.cancel.label}
+        </Button>
+      )}
       {hasPreviousStep && (
         <Button variant="outline" onClick={onPreviousWrapper}>
-          {previousButtonLabel}
+          {actions.previous.label}
         </Button>
       )}
       {hasNextStep && (
         <Button variant={mode === "edit" ? "outline" : "fill"} onClick={onNextWrapper}>
-          {nextButtonLabel}
+          {actions.next.label}
         </Button>
       )}
       {isLastStepOrEditMode && (
-        <Button onClick={onSaveAndCloseWrapper}>{saveAndCloseButtonLabel}</Button>
+        <Button onClick={onSaveAndCloseWrapper}>{actions.saveAndClose.label}</Button>
       )}
     </Fragment>
   );

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -41,6 +41,7 @@ interface CSSProperties {
   colorBlueGrey700?: string;
   colorBlueGrey800?: string;
   colorBlueGrey900?: string;
+  colorGreen100?: string;
   colorGreen500?: string;
   colorGreen600?: string;
   colorGreen700?: string;
@@ -55,8 +56,8 @@ interface CSSProperties {
   colorRed600?: string;
   colorRed700?: string;
   colorBlack100?: string;
-  colorBlack10?: string;
   colorBlack20?: string;
+  colorBlack10?: string;
   defaultLineHeight?: string;
   buttonBorderRadius?: string;
   buttonBorderWidth?: string;
@@ -89,19 +90,23 @@ interface CSSProperties {
   inputBorderWidth?: string;
   inputBorderWidthFocus?: string;
   inputBorderStyle?: string;
+  inputBorderColor?: string;
   inputBackgroundColor?: string;
+  inputHelperTextColor?: string;
+  inputHoverBackgroundColor?: string;
+  inputDisabledBackgroundColor?: string;
   dragBackgroundColor?: string;
   dragBorderStyle?: string;
   modalShadowColor?: string;
   modalBackgroundColor?: string;
   modalBackdropColor?: string;
-  modalHeaderBackgroundColor?: string;
   skeletonBackgroundColor?: string;
   skeletonAnimationColorRgb?: string;
   snackbarTextColor?: string;
   snackbarInfoBackgroundColor?: string;
   snackbarSuccessBackgroundColor?: string;
   snackbarErrorBackgroundColor?: string;
+  snackbarWarningBackgroundColor?: string;
   snackbarBorderRadius?: string;
   bannerBorderRadius?: string;
   bannerBorderWidth?: string;
@@ -146,7 +151,6 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export const BaseStyling = ({ children, properties = {} }: Props) => {
   const defaultProperties: CSSProperties = {
-    colorBlack10: "rgba(0 ,0 ,0, .1)",
     colorPrimary300: "#6871BF",
     colorPrimary500: "#041295",
     colorPrimary600: "#030F77",
@@ -162,6 +166,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorBlueGrey700: "#383A4B",
     colorBlueGrey800: "#252733",
     colorBlueGrey900: "#131319",
+    colorGreen100: "#D1E6DA",
     colorGreen500: "#178244",
     colorGreen600: "#126836",
     colorGreen700: "#0E4E29",
@@ -175,6 +180,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorRed700: "#861200",
     colorBlack100: "#000000",
     colorBlack20: "rgba(0, 0, 0, 0.2)",
+    colorBlack10: "rgba(0, 0, 0, 0.1)",
     colorShadowBlue: "#7078C3",
     colorWhite: "#FFFFFF",
     colorFocus: "var(--color-primary300)",
@@ -210,21 +216,25 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     buttonOutlineHoverTextColor: "var(--color-primary600)",
     inputBorderRadius: "2px",
     inputBorderWidth: "1px",
-    inputBorderWidthFocus: "2px",
+    inputBorderWidthFocus: "1px",
     inputBorderStyle: "solid",
+    inputBorderColor: "var(--color-blue-grey500)",
     inputBackgroundColor: "var(--light)",
+    inputHelperTextColor: "var(--color-blue-grey500)",
+    inputHoverBackgroundColor: "var(--color-blue-grey25)",
+    inputDisabledBackgroundColor: "var(--input-hover-background-color)",
     dragBackgroundColor: "var(--color-blue-grey25-transparent)",
     dragBorderStyle: "solid",
     modalShadowColor: "rgba(0, 0, 0, 0.16)",
-    modalBackgroundColor: "var(--color-blue-grey25)",
+    modalBackgroundColor: "var(--light)",
     modalBackdropColor: "var(--default)",
-    modalHeaderBackgroundColor: "var(--light)",
     skeletonBackgroundColor: "var(--disabled)",
     skeletonAnimationColorRgb: "255, 255, 255",
     snackbarTextColor: "var(--light)",
     snackbarInfoBackgroundColor: "var(--color-primary500)",
     snackbarSuccessBackgroundColor: "var(--color-green500)",
     snackbarErrorBackgroundColor: "var(--color-red500)",
+    snackbarWarningBackgroundColor: "var(--color-orange500)",
     snackbarBorderRadius: "2px",
     bannerBorderRadius: "2px",
     bannerBorderWidth: "0 0 0 4px",
@@ -238,7 +248,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     tablistBorderStyle: "solid",
     tablistBorderColor: "var(--color-blue-grey100)",
     tabTextColor: "var(--color-blue-grey900)",
-    toggleBackgroundColor: "var(--default)",
+    toggleBackgroundColor: "var(--color-blue-grey100)",
     tooltipBackgroundColor: "var(--default)",
     wizardStepIndicatorFutureColor: "var(--color-blue-grey200)",
     default: "var(--color-blue-grey900)",

package/src/font/icomoon.svg

@@ -15,7 +15,7 @@
 <glyph unicode="&#xe905;" glyph-name="refresh" d="M472.83 819.066c-143.528-14.921-267.424-112.752-313.868-247.886-12.403-36.045-20.937-81.324-20.937-111.073v-11.984l-138.025-0.979 185.588-185.588 186.521 186.521h-140.823v5.689c0 12.683 4.197 42.993 8.346 60.62 23.642 99.555 104.778 180.879 204.473 205.033 61.972 15.015 126.928 8.72 184.516-17.813l13.243-6.108 33.481 33.434c18.373 18.373 33.434 33.807 33.434 34.366 0 1.586-33.621 19.678-49.428 26.579-57.028 24.901-125.295 35.579-186.521 29.19zM745.151 541.336l-93.26-93.26h138.958v-5.503c0-14.036-4.616-45.837-9.326-64.443-12.217-47.983-37.304-91.628-73.303-127.487-22.43-22.29-42.060-36.791-68.454-50.408-78.851-40.661-165.491-42.527-246.814-5.363l-12.683 5.783-33.481-33.434c-18.373-18.373-33.434-33.807-33.434-34.366 0-1.819 31.848-19.118 48.030-26.113 102.727-44.252 213.753-42.014 312.889 6.435 101.561 49.614 176.030 143.481 200.556 252.83 4.569 20.377 9.14 55.677 9.233 71.344l0.047 10.679 139.891 0.979-185.588 185.588-93.26-93.26z" />
 <glyph unicode="&#xe906;" glyph-name="calendar" d="M204.839 908.807v-51.194h-29.334c-16.126 0-34.761-1.023-41.467-2.202-38.651-7.065-72.388-40.29-80.528-79.299-3.174-15.358-3.174-743.126 0-758.484 8.038-38.395 40.853-71.21 79.248-79.248 15.358-3.174 743.126-3.174 758.484 0 38.395 8.038 71.21 40.853 79.248 79.248 3.174 15.358 3.174 743.126 0 758.484-8.14 39.010-41.876 72.235-80.528 79.299-6.706 1.177-25.341 2.202-41.467 2.202h-29.334v102.387h-102.387v-102.387h-409.549v102.387h-102.387v-51.194zM870.357 320.080v-281.565h-716.71v563.129h716.71v-281.565z" />
 <glyph unicode="&#xe907;" glyph-name="checkmark-circle" d="M466.928 958.177c-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.521zM835.693 688.671l35.699-35.955-460.803-460.803-256.086 256.086 71.654 71.704 183.409-183.359 194.114 194.114c106.737 106.788 194.626 194.114 195.19 194.114 0.615 0 17.209-16.185 36.825-35.903z" />
-<glyph unicode="&#xe908;" glyph-name="checkmark-circle-alt" 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.791c66.89-10.346 130.81-37.593 186.073-79.336 21.511-16.236 60.539-55.263 76.774-76.774 72.677-96.238 99.413-214.447 75.188-332.913-18.438-90.347-70.219-174.958-143.152-234.012-72.831-58.9-164.203-91.321-257.367-91.321-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.971zM578.145 504.974l-168.505-168.505-183.409 183.359-71.654-71.704 256.086-256.086 409.688 409.739-35.801 35.853c-19.667 19.719-36.262 35.853-36.877 35.853-0.563 0-76.878-75.802-169.53-168.505z" />
+<glyph unicode="&#xe908;" glyph-name="checkmark-circle-alt" 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.001zM512.001 38.396c-225.793 0-409.6 183.81-409.6 409.602s183.809 409.6 409.6 409.6c225.794 0 409.598-183.809 409.598-409.6s-183.804-409.602-409.598-409.602zM747.011 674.303l-337.41-337.406-132.609 132.094-72.192-72.192 204.801-204.802 409.601 409.602-72.192 72.705z" />
 <glyph unicode="&#xe909;" glyph-name="clock" d="M466.981 958.168c-92.359-9.267-174.733-39.319-247.791-90.464-181.337-126.967-261.204-355.969-197.516-566.182 25.394-83.655 66.863-152.821 128.861-214.82 50.633-50.633 107.461-88.416 170.638-113.503 172.122-68.194 360.474-41.060 508.279 73.364 22.372 17.304 66.913 61.845 84.219 84.219 72.187 93.229 110.329 203.045 110.329 317.418 0 233.865-161.678 440.955-387.558 496.452-50.377 12.339-122.973 18.175-169.461 13.516zM549.919 855.673c142.583-13.362 266.887-99.424 329.808-228.285 75.412-154.306 46.538-338.102-72.546-462.304-77.665-80.942-183.795-126.404-295.147-126.404-192.755 0-361.037 136.593-400.509 325.149-38.449 183.846 52.426 369.484 221.374 452.115 67.631 33.124 142.122 46.743 217.022 39.728zM461.35 550.183l0.512-153.999 132.087-79.406c72.648-43.671 133.264-79.201 134.646-78.945 1.434 0.256 10.853 13.823 20.888 30.155 15.718 25.496 17.816 30.052 15.154 32.1-1.689 1.331-53.244 32.152-114.526 68.501l-111.454 66.095v269.498h-77.87l0.563-153.999z" />
 <glyph unicode="&#xe90a;" glyph-name="trash" d="M341.358 931.559l-28.384-28.44h-199.14v-113.761h796.332v113.761h-199.14l-56.767 56.881h-284.519l-28.384-28.44zM170.716 385.616c0-244.418 0.74-350.443 2.502-358.919 8.931-42.661 45.391-79.121 88.052-88.052 16.894-3.526 484.568-3.526 501.462 0 42.661 8.931 79.121 45.391 88.052 88.052 1.764 8.475 2.502 114.501 2.502 358.919v346.859h-682.571v-346.859zM739.525 334.31v-284.404h-455.047v568.81h455.047v-284.404z" />
 <glyph unicode="&#xe90b;" glyph-name="heart" d="M241.803 906.992c-18.852-2.152-48.822-10.042-69.52-18.289-59.018-23.413-114.808-74.95-143.753-132.841-3.587-7.172-10.042-23.771-14.395-36.886-24.693-74.387-16.958-154.306 22.644-234.893 33.453-68.085 77.973-124.592 172.852-219.42 63.68-63.628 89.193-87.297 215.937-200.414l86.63-77.307 44.519 39.499c200.619 177.77 279.565 253.182 341.605 326.493 83.71 98.875 121.57 179.666 125.412 267.424 4.764 109.48-54.509 210.148-153.025 259.791-79.714 40.165-181.869 38.269-266.603-4.97-30.892-15.779-70.237-45.083-85.812-63.884l-6.199-7.531-6.199 7.531c-7.787 9.375-35.912 33.197-52.204 44.263-61.528 41.548-137.656 60.042-211.889 51.435z" />
@@ -68,12 +68,13 @@
 <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="&#xe93d;" glyph-name="error-circle" 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="&#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="&#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="&#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="&#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="&#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>