design-react-kit 5.2.0 → 5.3.0

package/src/Icon/assets/ItYoutube.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItZoomIn.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItZoomOut.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
+
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/index.ts

@@ -694,3 +694,8 @@ export function isBundledIcon(name: string): name is IconName {
 }
 
 export const allIcons = Object.keys(iconList);
+
+export interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}

package/src/Input/Input.tsx

@@ -169,6 +169,7 @@ export const Input = ({
     }
   }, [value]);
 
+  // eslint-disable-next-line prefer-const
   let { bsSize, valid, ...rest } = attributes;
 
   const Tag = getTag({ tag, plaintext, staticInput, type });
@@ -282,7 +283,7 @@ export const Input = ({
   }
 
   const clickIncrDecr = (mode: number) => {
-    var step = parseFloat(inputRef.current?.step ? inputRef.current.step : '1');
+    let step = parseFloat(inputRef.current?.step ? inputRef.current.step : '1');
     const min = parseFloat(inputRef.current?.min ? inputRef.current.min : 'Nan');
     const max = parseFloat(inputRef.current?.max ? inputRef.current.max : 'Nan');
     step = isNaN(step) ? 1 : step;
@@ -295,7 +296,7 @@ export const Input = ({
     }
     const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
     nativeInputValueSetter?.call(inputRef.current, `${newValue}`);
-    var ev2 = new Event('input', { bubbles: true });
+    const ev2 = new Event('input', { bubbles: true });
     inputRef.current?.dispatchEvent(ev2);
   };
 

package/src/List/ListItem.tsx

@@ -39,7 +39,7 @@ export const ListItem: FC<ListItemProps> & {
   children,
   ...attributes
 }) => {
-    let Tag = tag;
+    const Tag = tag;
     const classes = classNames(
       className,
       { active },

package/src/Modal/Modal.tsx

@@ -1,16 +1,17 @@
+import classnames from 'classnames';
 import React, { FC, HTMLAttributes } from 'react';
 import { FadeProps, Modal as InnerModal } from 'reactstrap';
 import { CSSModule } from 'reactstrap/types/lib/utils';
-import classnames from 'classnames';
 
 export interface ModalProps extends HTMLAttributes<HTMLElement> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;
   /** Indica lo stato del modale. Valore di default: undefined. */
   isOpen?: boolean;
   autoFocus?: boolean;
   size?: string;
   /** Funzione da chiamare quando l'utente clicca sul backdrop. Valore di default: undefined. */
-  toggle?: React.KeyboardEventHandler<any> | React.MouseEventHandler<any>;
+  toggle?: React.KeyboardEventHandler<unknown> | React.MouseEventHandler<unknown>;
   keyboard?: boolean;
   backdrop?: boolean | 'static';
   /**

package/src/Modal/ModalHeader.tsx

@@ -1,10 +1,11 @@
+import classNames from 'classnames';
 import React, { FC, HTMLAttributes } from 'react';
 import { CSSModule } from 'reactstrap/types/lib/utils';
-import classNames from 'classnames';
 import { Icon } from '../Icon/Icon';
 import { mapToCssModules } from '../utils';
 
 export interface ModalHeaderProps extends HTMLAttributes<HTMLElement> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;
   cssModule?: CSSModule;
   /** Componente che conterrà il nodo titolo. Valore di default: h5 */
@@ -12,7 +13,7 @@ export interface ModalHeaderProps extends HTMLAttributes<HTMLElement> {
   /** Componente che contenitore per l'header. Valore di default: div. */
   wrapTag?: React.ElementType;
   /** Funzione da passare al tasto di chiusura nell'intestazione. Quando questa funzione non è presente il tasto di chiusura non viene mostrato. Valore di default: undefined */
-  toggle?: React.MouseEventHandler<any>;
+  toggle?: React.MouseEventHandler<unknown>;
   /** Indica il nome dell'icona da utilizzare nel titolo. */
   icon?: string;
   /** Classi da aggiungere al nodo contenitore. */
@@ -25,9 +26,8 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   icon,
   className,
   children,
-  Util,
   toggle,
-  tag: Tag = 'h5',
+  tag: Tag = 'h2',
   wrapTag: WrapTag = 'div',
   closeAriaLabel = 'Close',
   close,
@@ -52,7 +52,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   return (
     <WrapTag {...props} className={classes}>
       {icon != null ? <Icon icon={icon} /> : null}
-      <Tag className={mapToCssModules('modal-title', cssModule)}>{children}</Tag>
+      <Tag className={mapToCssModules('modal-title h5', cssModule)}>{children}</Tag>
       {close || CloseButton}
     </WrapTag>
   );

package/src/NavScroll/debounce.ts

@@ -4,12 +4,12 @@
  * Code: https://github.com/dej611/react-use-navscroll
  */
 
-export const debounce = (callback: Function, wait: number) => {
+export const debounce = (callback: CallableFunction, wait: number) => {
   let timeoutId: NodeJS.Timeout;
   return (...args: unknown[]) => {
     clearTimeout(timeoutId);
     timeoutId = setTimeout(() => {
-      callback.apply(null, args);
+      callback(...args);
     }, wait);
   };
 };

package/src/NavScroll/useNavScroll.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /*
  * This work derives from the React Use Navscroll library
  * Released under the MIT license by Marco Liberati

package/src/NavScroll/useSizeDetector.ts

@@ -4,7 +4,6 @@
  * Code: https://github.com/dej611/react-use-navscroll
  */
 
-/* eslint-disable no-restricted-globals */
 import { useCallback, useEffect, useState } from 'react';
 import { debounce } from './debounce';
 import { useNavScrollArgs } from './types';

package/src/Notification/Notification.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, FC, PropsWithChildren, useEffect } from 'react';
-import { ToastProps, useToast, cssTransition } from 'react-toastify';
+import { cssTransition, ToastProps, useToast } from 'react-toastify';
 import { NotificationToastProps } from './NotificationContent';
 import { NotificationCommonProps } from './types';
 
@@ -20,7 +20,6 @@ export const Notification: FC<PropsWithChildren<NotificationProps>> = (props) =>
 
   useEffect(() => {
     if (!isIn) deleteToast();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isIn]);
 
   useEffect(() => {

package/src/Notification/NotificationContent.tsx

@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import classNames from 'classnames';
 import React, { CSSProperties, ReactNode } from 'react';
 import { Button } from '../Button/Button';
-import classNames from 'classnames';
 import { Icon } from '../Icon/Icon';
-import { usePosition } from './usePosition';
 import { NotificationCommonProps } from './types';
+import { usePosition } from './usePosition';
 
 export interface NotificationToastProps {
   /** Indica quale icona affiancare al titolo. */

package/src/Notification/core.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, isValidElement } from 'react';
 import { toast } from 'react-toastify';
-import { createNotification } from './NotificationContent';
 import type { NotificationOptions } from './NotificationContent';
+import { createNotification } from './NotificationContent';
 import { NotificationId } from './types';
 
 export function notify(title: string, options?: NotificationOptions): NotificationId;
@@ -13,7 +13,7 @@ export function notify(
   bodyOrOptions?: ReactNode | NotificationOptions,
   options?: NotificationOptions
 ): NotificationId {
-  let body: ReactNode | undefined = isReactNode(bodyOrOptions) ? bodyOrOptions : undefined;
+  const body: ReactNode | undefined = isReactNode(bodyOrOptions) ? bodyOrOptions : undefined;
   const safeOptions = isReactNode(bodyOrOptions) ? { ...options } : bodyOrOptions || {};
   const NotificationContent = createNotification(title, body, safeOptions);
   const internalOptions = {

package/src/Progress/Progress.tsx

@@ -1,6 +1,6 @@
-import React, { FC, HTMLAttributes, ElementType } from 'react';
 import classNames from 'classnames';
 import isNumber from 'is-number';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
 import { logError } from '../utils';
 
 export interface ProgressProps extends HTMLAttributes<HTMLElement> {
@@ -34,7 +34,6 @@ export const Progress: FC<ProgressProps> = ({
   indeterminate = false,
   color,
   testId,
-  role = 'progressbar',
   ...attributes
 }) => {
   const Tag = tag;

package/src/Stepper/StepperHeader.tsx

@@ -1,5 +1,5 @@
-import React, { FC, HTMLAttributes, ElementType } from 'react';
 import classNames from 'classnames';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
 
 export interface StepperHeaderProps extends HTMLAttributes<HTMLElement> {
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
@@ -12,7 +12,7 @@ export interface StepperHeaderProps extends HTMLAttributes<HTMLElement> {
 export const StepperHeader: FC<StepperHeaderProps> = ({ tag = 'div', testId, className, children, ...attributes }) => {
   const Tag = tag;
   const wrapperClass = classNames('steppers-header', className);
-  // @ts-ignore not recognize children's props
+  // @ts-expect-error not recognize children's props
   const isMobile = children?.props?.variant === 'mobile';
 
   return (

package/src/Toggle/Toggle.tsx

@@ -21,9 +21,9 @@ export interface ToggleProps extends InputProps {
 export const Toggle: FC<ToggleProps> = ({ label, testId, ...rest }) => {
   return (
     <div className='toggles' data-testid={testId}>
-      <Label check>
+      <Label check for={rest.id}>
         {label}
-        <Input {...rest} type='checkbox' />
+        <Input {...rest} type='checkbox' aria-describedby={rest.id ? rest.id + 'Description' : '' } />
         <span className='lever' />
       </Label>
     </div>

package/src/transitions.ts

@@ -27,6 +27,7 @@ export const TransitionsKeys = [
   'onExited'
 ];
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const transitionStatus = {
   entering: 1,
   entered: 1,

package/src/utils.tsx

@@ -30,7 +30,7 @@ export const notifyDeprecation = (message: string, options: { once: boolean } =
 };
 
 export function mapToCssModules(className: string | null, cssModules?: Record<string, string>) {
-  let finalClassNames = className == null ? '' : className;
+  const finalClassNames = className == null ? '' : className;
   if (!cssModules) {
     return finalClassNames;
   }

package/dist/Select/shared.cjs

@@ -1,2 +0,0 @@
-"use strict";var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var h=(o,r)=>{for(var n in r)i(o,n,{get:r[n],enumerable:!0})},y=(o,r,n,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of d(r))!c.call(o,t)&&t!==n&&i(o,t,{get:()=>r[t],enumerable:!(e=l(r,t))||e.enumerable});return o};var p=o=>y(i({},"__esModule",{value:!0}),o);var u={};h(u,{styles:()=>g});module.exports=p(u);var s="#000",b="#06c",a="#435a70",m="#17324d",g={container:o=>({...o,height:"2.5rem"}),control:o=>({...o,height:"2.5rem",borderRadius:"0",borderLeft:"none",borderRight:"none",borderTop:"none",borderBottom:`solid ${a} 1px`,boxShadow:"none","&:hover":{borderBottom:`solid ${a} 1.25px`}}),dropdownIndicator:o=>({...o,fill:a}),option:(o,{isDisabled:r,isFocused:n,isSelected:e})=>({...o,background:"white",textDecoration:n||e?"underline":"none",color:e?m:b,cursor:r?"not-allowed":"pointer"}),placeholder:o=>({...o,fill:a}),singleValue:o=>({...o,color:s,fontWeight:"bold"}),valueContainer:o=>({...o,height:"2.5rem"})};0&&(module.exports={styles});
-//# sourceMappingURL=shared.cjs.map

package/dist/Select/shared.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Select/shared.tsx"],"sourcesContent":["const black = '#000';\nconst primary = '#06c';\nconst primaryDark = '#435a70';\nconst primaryDarker = '#17324d';\n\n// Types here depend of react-select internal emotion dep + more parametric stuff\n// @TODO: fix it this way for now, will review later on\nexport const styles = {\n  container: (provided: any) => ({ ...provided, height: '2.5rem' }),\n  control: (provided: any) => ({\n    ...provided,\n    height: '2.5rem',\n    borderRadius: '0',\n    borderLeft: 'none',\n    borderRight: 'none',\n    borderTop: 'none',\n    borderBottom: `solid ${primaryDark} 1px`,\n    boxShadow: 'none',\n    '&:hover': { borderBottom: `solid ${primaryDark} 1.25px` } // border style on hover\n  }),\n  dropdownIndicator: (provided: any) => ({\n    ...provided,\n    fill: primaryDark\n  }),\n  option: (provided: any, { isDisabled, isFocused, isSelected }: any) => ({\n    ...provided,\n    background: 'white',\n    textDecoration: isFocused || isSelected ? 'underline' : 'none',\n    color: isSelected ? primaryDarker : primary,\n    cursor: isDisabled ? 'not-allowed' : 'pointer'\n  }),\n  placeholder: (provided: any) => ({\n    ...provided,\n    fill: primaryDark\n  }),\n  singleValue: (provided: any) => ({\n    ...provided,\n    color: black,\n    fontWeight: 'bold'\n  }),\n  valueContainer: (provided: any) => ({\n    ...provided,\n    height: '2.5rem'\n  })\n};\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,YAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAMI,EAAQ,OACRC,EAAU,OACVC,EAAc,UACdC,EAAgB,UAITL,EAAS,CACpB,UAAYM,IAAmB,CAAE,GAAGA,EAAU,OAAQ,QAAS,GAC/D,QAAUA,IAAmB,CAC3B,GAAGA,EACH,OAAQ,SACR,aAAc,IACd,WAAY,OACZ,YAAa,OACb,UAAW,OACX,aAAc,SAASF,CAAW,OAClC,UAAW,OACX,UAAW,CAAE,aAAc,SAASA,CAAW,SAAU,CAC3D,GACA,kBAAoBE,IAAmB,CACrC,GAAGA,EACH,KAAMF,CACR,GACA,OAAQ,CAACE,EAAe,CAAE,WAAAC,EAAY,UAAAC,EAAW,WAAAC,CAAW,KAAY,CACtE,GAAGH,EACH,WAAY,QACZ,eAAgBE,GAAaC,EAAa,YAAc,OACxD,MAAOA,EAAaJ,EAAgBF,EACpC,OAAQI,EAAa,cAAgB,SACvC,GACA,YAAcD,IAAmB,CAC/B,GAAGA,EACH,KAAMF,CACR,GACA,YAAcE,IAAmB,CAC/B,GAAGA,EACH,MAAOJ,EACP,WAAY,MACd,GACA,eAAiBI,IAAmB,CAClC,GAAGA,EACH,OAAQ,QACV,EACF","names":["shared_exports","__export","styles","__toCommonJS","black","primary","primaryDark","primaryDarker","provided","isDisabled","isFocused","isSelected"]}

package/dist/Select/shared.js

@@ -1,45 +0,0 @@
-const black = '#000';
-const primary = '#06c';
-const primaryDark = '#435a70';
-const primaryDarker = '#17324d';
-// Types here depend of react-select internal emotion dep + more parametric stuff
-// @TODO: fix it this way for now, will review later on
-export const styles = {
-    container: (provided) => ({ ...provided, height: '2.5rem' }),
-    control: (provided) => ({
-        ...provided,
-        height: '2.5rem',
-        borderRadius: '0',
-        borderLeft: 'none',
-        borderRight: 'none',
-        borderTop: 'none',
-        borderBottom: `solid ${primaryDark} 1px`,
-        boxShadow: 'none',
-        '&:hover': { borderBottom: `solid ${primaryDark} 1.25px` } // border style on hover
-    }),
-    dropdownIndicator: (provided) => ({
-        ...provided,
-        fill: primaryDark
-    }),
-    option: (provided, { isDisabled, isFocused, isSelected }) => ({
-        ...provided,
-        background: 'white',
-        textDecoration: isFocused || isSelected ? 'underline' : 'none',
-        color: isSelected ? primaryDarker : primary,
-        cursor: isDisabled ? 'not-allowed' : 'pointer'
-    }),
-    placeholder: (provided) => ({
-        ...provided,
-        fill: primaryDark
-    }),
-    singleValue: (provided) => ({
-        ...provided,
-        color: black,
-        fontWeight: 'bold'
-    }),
-    valueContainer: (provided) => ({
-        ...provided,
-        height: '2.5rem'
-    })
-};
-//# sourceMappingURL=shared.js.map

package/dist/Select/shared.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../src/Select/shared.tsx"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG,MAAM,CAAC;AACrB,MAAM,OAAO,GAAG,MAAM,CAAC;AACvB,MAAM,WAAW,GAAG,SAAS,CAAC;AAC9B,MAAM,aAAa,GAAG,SAAS,CAAC;AAEhC,iFAAiF;AACjF,uDAAuD;AACvD,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,SAAS,EAAE,CAAC,QAAa,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;IACjE,OAAO,EAAE,CAAC,QAAa,EAAE,EAAE,CAAC,CAAC;QAC3B,GAAG,QAAQ;QACX,MAAM,EAAE,QAAQ;QAChB,YAAY,EAAE,GAAG;QACjB,UAAU,EAAE,MAAM;QAClB,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,MAAM;QACjB,YAAY,EAAE,SAAS,WAAW,MAAM;QACxC,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,EAAE,YAAY,EAAE,SAAS,WAAW,SAAS,EAAE,CAAC,wBAAwB;KACpF,CAAC;IACF,iBAAiB,EAAE,CAAC,QAAa,EAAE,EAAE,CAAC,CAAC;QACrC,GAAG,QAAQ;QACX,IAAI,EAAE,WAAW;KAClB,CAAC;IACF,MAAM,EAAE,CAAC,QAAa,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAO,EAAE,EAAE,CAAC,CAAC;QACtE,GAAG,QAAQ;QACX,UAAU,EAAE,OAAO;QACnB,cAAc,EAAE,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM;QAC9D,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;QAC3C,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;KAC/C,CAAC;IACF,WAAW,EAAE,CAAC,QAAa,EAAE,EAAE,CAAC,CAAC;QAC/B,GAAG,QAAQ;QACX,IAAI,EAAE,WAAW;KAClB,CAAC;IACF,WAAW,EAAE,CAAC,QAAa,EAAE,EAAE,CAAC,CAAC;QAC/B,GAAG,QAAQ;QACX,KAAK,EAAE,KAAK;QACZ,UAAU,EAAE,MAAM;KACnB,CAAC;IACF,cAAc,EAAE,CAAC,QAAa,EAAE,EAAE,CAAC,CAAC;QAClC,GAAG,QAAQ;QACX,MAAM,EAAE,QAAQ;KACjB,CAAC;CACH,CAAC"}

package/dist/assets.d.cjs

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=assets.d.cjs.map

package/dist/assets.d.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/assets.d.js

@@ -1 +0,0 @@
-//# sourceMappingURL=assets.d.js.map

package/dist/assets.d.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/types/Select/shared.d.ts

@@ -1,9 +0,0 @@
-export declare const styles: {
-    container: (provided: any) => any;
-    control: (provided: any) => any;
-    dropdownIndicator: (provided: any) => any;
-    option: (provided: any, { isDisabled, isFocused, isSelected }: any) => any;
-    placeholder: (provided: any) => any;
-    singleValue: (provided: any) => any;
-    valueContainer: (provided: any) => any;
-};

package/src/Select/shared.tsx

@@ -1,45 +0,0 @@
-const black = '#000';
-const primary = '#06c';
-const primaryDark = '#435a70';
-const primaryDarker = '#17324d';
-
-// Types here depend of react-select internal emotion dep + more parametric stuff
-// @TODO: fix it this way for now, will review later on
-export const styles = {
-  container: (provided: any) => ({ ...provided, height: '2.5rem' }),
-  control: (provided: any) => ({
-    ...provided,
-    height: '2.5rem',
-    borderRadius: '0',
-    borderLeft: 'none',
-    borderRight: 'none',
-    borderTop: 'none',
-    borderBottom: `solid ${primaryDark} 1px`,
-    boxShadow: 'none',
-    '&:hover': { borderBottom: `solid ${primaryDark} 1.25px` } // border style on hover
-  }),
-  dropdownIndicator: (provided: any) => ({
-    ...provided,
-    fill: primaryDark
-  }),
-  option: (provided: any, { isDisabled, isFocused, isSelected }: any) => ({
-    ...provided,
-    background: 'white',
-    textDecoration: isFocused || isSelected ? 'underline' : 'none',
-    color: isSelected ? primaryDarker : primary,
-    cursor: isDisabled ? 'not-allowed' : 'pointer'
-  }),
-  placeholder: (provided: any) => ({
-    ...provided,
-    fill: primaryDark
-  }),
-  singleValue: (provided: any) => ({
-    ...provided,
-    color: black,
-    fontWeight: 'bold'
-  }),
-  valueContainer: (provided: any) => ({
-    ...provided,
-    height: '2.5rem'
-  })
-};

package/src/assets.d.ts

@@ -1,4 +0,0 @@
-declare module '*.svg' {
-  const svgUrl: string;
-  export default svgUrl;
-}