chore: various

packages/app-admin/src/styles.scss

@@ -1,3 +1,2 @@
-@import "./styles/reset";
 @import "./styles/theme";
 @import "./styles/material";

packages/app-admin/src/styles/material.scss

@@ -38,5 +38,5 @@ body {
   --mdc-typography-font-family: #{$mdc-typography-font-family};
   --mdc-typography-subtitle2-font-weight: #{$mdc-typography-subtitle2-font-weight};
 
-  font-family: "Source Sans Pro";
+  //font-family: "Source Sans Pro";
 }

packages/app-admin/src/styles/theme.scss

@@ -27,50 +27,50 @@ $webiny-theme-dark-text-hint-on-dark: rgba(255, 255, 255, 0.15);
 $webiny-theme-dark-caret-down: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
 
 // webiny typography
-$webiny-theme-typography-font-family: "Source Sans Pro" !default;
+$webiny-theme-typography-font-family: inherit !default;
 $webiny-theme-typography-subtitle2-font-weight: 600 !default;
 
 // import required fonts
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700");
+//@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700");
 
-body {
-  font-size: 16px;
-}
-
-a {
-  color: var(--webiny-theme-color-primary, #ee896b);
-  text-decoration: none;
-}
-
-// Default heading styles
-h1 {
-  font-size: 3rem;
-  line-height: 1;
-}
-
-h2 {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
-h3 {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
-h4 {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
-h5 {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-h6 {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
-@import "@webiny/ui/styles.scss";
+//body {
+//  font-size: 16px;
+//}
+//
+//a {
+//  color: var(--webiny-theme-color-primary, #ee896b);
+//  text-decoration: none;
+//}
+//
+//// Default heading styles
+//h1 {
+//  font-size: 3rem;
+//  line-height: 1;
+//}
+//
+//h2 {
+//  font-size: 2.25rem;
+//  line-height: 2.5rem;
+//}
+//
+//h3 {
+//  font-size: 1.875rem;
+//  line-height: 2.25rem;
+//}
+//
+//h4 {
+//  font-size: 1.5rem;
+//  line-height: 2rem;
+//}
+//
+//h5 {
+//  font-size: 1.25rem;
+//  line-height: 1.75rem;
+//}
+//
+//h6 {
+//  font-size: 1.125rem;
+//  line-height: 1.75rem;
+//}
+//
+//@import "@webiny/ui/styles.scss";

packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Remove.tsx

@@ -6,8 +6,6 @@ import { useConfirmationDialog } from "@webiny/app-admin";
 import { ButtonLink } from "./elements/ButtonLink";
 
 const Text = styled("span")({
-    fontFamily: "Source Sans Pro",
-    fontWeight: 500,
     fontSize: "14px",
     lineHeight: "20px",
     letterSpacing: "0.1px",

packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Select.tsx

@@ -45,7 +45,6 @@ const Icon = styled("div")(({ selected }: IconProps) => {
 });
 
 const Text = styled("span")({
-    fontFamily: "Source Sans Pro",
     fontWeight: 500,
     fontSize: "14px",
     lineHeight: "20px",

packages/cwp-template-aws/template/common/apps/admin/src/App.scss

@@ -13,7 +13,7 @@ $webiny-theme-light-text-primary-on-background: rgba(0, 0, 0, 0.87);
 $webiny-theme-light-text-secondary-on-background: rgba(0, 0, 0, 0.54);
 $webiny-theme-light-text-hint-on-dark: rgba(255, 255, 255, 0.5);
 $webiny-theme-light-caret-down: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
-$webiny-theme-typography-font-family: "Source Sans Pro";
+//$webiny-theme-typography-font-family: "Source Sans Pro";
 
 // Import admin app styles
 @import "~@webiny/app-serverless-cms/styles.scss";

packages/ui/src/AutoComplete/AutoComplete.tsx

@@ -69,12 +69,12 @@ export const AutoComplete = ({
     }, [props.options, textProp, valueProp, useSimpleValues]);
 
     const value = useMemo(() => {
-        if (useSimpleValues) {
-            return props.value as unknown as string;
+        if (!props.value) {
+            return undefined;
         }
 
-        return props.value?.id;
-    }, [props.value, useSimpleValues]);
+        return props.value[valueProp as keyof AutoCompleteProps["value"]] as string;
+    }, [props.value, valueProp]);
 
     const onValueChange = useCallback(
         (value: any) => {

packages/ui/src/AutoComplete/MultiAutoComplete.tsx

@@ -10,36 +10,31 @@ type MultiAutoCompletePropsValue = SelectionItem[] | string[];
 
 export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "value"> {
     /**
-     * @deprecated Use `uniqueValues` instead.
      * Prevents adding the same item to the list twice.
      */
-    unique: boolean;
+    unique?: boolean;
 
     /**
      * Set if custom values (not from list of suggestions) are allowed.
      */
     allowFreeInput?: boolean;
 
     /**
-     *  @deprecated Use `loading` instead.
      *  If true, will show a loading spinner on the right side of the input.
      */
     loading?: boolean;
 
     /**
-     * @deprecated Use `selectedOptionRenderer` instead
      * Use custom renderer for selected items.
      */
     renderMultipleSelection?: ((items: any, index: number) => React.ReactNode | null) | null;
 
     /**
-     * @deprecated
      * Use data list instead of default Chips component. Useful when expecting a lot of data.
      */
     useMultipleSelectionList?: boolean;
 
     /**
-     * @deprecated
      * Render list item when `useMultipleSelectionList` is used.
      */
     renderListItemLabel?: (item: any) => React.ReactNode;
@@ -50,7 +45,6 @@ export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "val
     renderListItemOptions?: (item: any) => React.ReactNode | null;
 
     /**
-     *  @deprecated Use `emptyMessage` instead
      *  A component that renders supporting UI in case of no result found.
      */
     noResultFound?: React.ReactNode;
@@ -84,7 +78,8 @@ export const MultiAutoComplete = ({
             if (useSimpleValues) {
                 return {
                     label: option,
-                    value: option
+                    value: option,
+                    item: option
                 };
             }
 
@@ -98,36 +93,42 @@ export const MultiAutoComplete = ({
     }, [props.options, textProp, valueProp, useSimpleValues]);
 
     const values = useMemo(() => {
-        return value.map(value => {
-            if (typeof value === "string") {
-                return value;
-            }
+        return value
+            .map((val: SelectionItem | string) => {
+                if (typeof val === "string") {
+                    return val;
+                }
 
-            if (useSimpleValues) {
-                return value?.name ?? value;
-            }
-
-            return value.name;
-        });
-    }, [value, useSimpleValues]);
+                return val[valueProp as keyof SelectionItem] as string;
+            })
+            .filter(Boolean);
+    }, [value, valueProp]);
 
     const onValuesChange = useCallback(
         (values: any) => {
-            onChange?.(values);
+            const selectedOptions = options.filter(option => values.includes(option.value));
+            const selectedItems = selectedOptions.map(option => option.item);
+
+            onChange?.(selectedItems);
         },
-        [onChange]
+        [onChange, options]
     );
 
+    const selectedOptionRenderer = useMemo(() => {
+        if (renderMultipleSelection === null) {
+            return () => null;
+        }
+        return renderMultipleSelection;
+    }, [renderMultipleSelection]);
+
     return (
         <>
             <AdminMultiAutoComplete
                 {...props}
                 values={values}
                 options={options}
                 optionRenderer={renderItem}
-                selectedOptionRenderer={
-                    renderMultipleSelection ? renderMultipleSelection : undefined
-                }
+                selectedOptionRenderer={selectedOptionRenderer}
                 emptyMessage={noResultFound}
                 onValuesChange={onValuesChange}
                 isLoading={loading}