Merge branch 'main' into task/Add_strategy_information_to_playground_results

2025-10-27 11:02:16 +01:00 · 2022-07-28 14:34:47 +03:00 · 2022-07-28 14:34:47 +03:00 · 562ca62b42
commit 562ca62b42
parent 1d83643e15 850c7a26db
25 changed files with 520 additions and 291 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -55,7 +55,7 @@
    "@types/jest": "27.5.2",
    "@types/lodash.clonedeep": "4.5.7",
    "@types/node": "17.0.18",
-    "@types/react": "17.0.47",
+    "@types/react": "17.0.48",
    "@types/react-dom": "17.0.17",
    "@types/react-router-dom": "5.3.3",
    "@types/react-table": "7.7.12",
@ -94,11 +94,11 @@
    "sass": "1.53.0",
    "semver": "7.3.7",
    "swr": "1.3.0",
-    "tss-react": "3.7.0",
+    "tss-react": "3.7.1",
    "typescript": "4.7.4",
-    "vite": "2.9.13",
+    "vite": "2.9.14",
    "vite-plugin-env-compatible": "^1.1.1",
-    "vite-plugin-svgr": "2.2.0",
+    "vite-plugin-svgr": "2.2.1",
    "vite-tsconfig-paths": "3.5.0",
    "vitest": "0.16.0",
    "whatwg-fetch": "^3.6.2",
--- a/frontend/src/assets/icons/rollout.svg
+++ b/frontend/src/assets/icons/rollout.svg
@ -1 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.584 10H22a2 2 0 1 1 0 4h-5.416a5.001 5.001 0 0 1-9.168 0H2a2 2 0 1 1 0-4h5.416a5.001 5.001 0 0 1 9.168 0Z" /></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M16.584 10H22a2 2 0 1 1 0 4h-5.416a5.001 5.001 0 0 1-9.168 0H2a2 2 0 1 1 0-4h5.416a5.001 5.001 0 0 1 9.168 0Z" />
+</svg>
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
@ -7,14 +7,11 @@ export const useStyles = makeStyles()(theme => ({
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
-        marginRight: theme.spacing(2),
+        marginRight: theme.spacing(1),
        [theme.breakpoints.down(650)]: {
            marginBottom: '1rem',
            marginRight: 0,
        },
-        [theme.breakpoints.between(1101, 1365)]: {
-            marginRight: '8px',
-        },
    },
    constraintIcon: {
        fill: '#fff',
@ -52,10 +49,13 @@ export const useStyles = makeStyles()(theme => ({
    headerValuesContainerWrapper: {
        display: 'flex',
        alignItems: 'stretch',
+        margin: 'auto 0',
    },
    headerValuesContainer: {
        display: 'flex',
-        alignItems: 'stretch',
+        justifyContent: 'stretch',
+        margin: 'auto 0',
+        flexDirection: 'column',
    },
    headerValues: {
        fontSize: theme.fontSizes.smallBody,
@ -72,9 +72,6 @@ export const useStyles = makeStyles()(theme => ({
        minWidth: '220px',
        position: 'relative',
        paddingRight: '1rem',
-        [theme.breakpoints.down(650)]: {
-            paddingRight: 0,
-        },
        [theme.breakpoints.between(1101, 1365)]: {
            minWidth: '152px',
            paddingRight: '0.5rem',
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts
@ -23,6 +23,7 @@ export const useStyles = makeStyles()(theme => ({
        margin: '0.75rem 0 ',
    },
    customConstraintLabel: {
+        marginBottom: theme.spacing(1),
        color: theme.palette.text.secondary,
    },
 }));
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, { forwardRef, Fragment, useImperativeHandle } from 'react';
 import { Button, Tooltip } from '@mui/material';
 import { HelpOutline } from '@mui/icons-material';
 import { IConstraint } from 'interfaces/strategy';
@ -10,11 +10,14 @@ import { objectId } from 'utils/objectId';
 import { useStyles } from './ConstraintAccordionList.styles';
 import { createEmptyConstraint } from 'component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';

 interface IConstraintAccordionListProps {
    constraints: IConstraint[];
    setConstraints?: React.Dispatch<React.SetStateAction<IConstraint[]>>;
    showCreateButton?: boolean;
+    /* Add "Custom constraints" title on the top - default `true` */
+    showLabel?: boolean;
 }

 // Ref methods exposed by this component.
@ -35,124 +38,138 @@ export const constraintAccordionListId = 'constraintAccordionListId';
 export const ConstraintAccordionList = forwardRef<
    IConstraintAccordionListRef | undefined,
    IConstraintAccordionListProps
->(({ constraints, setConstraints, showCreateButton }, ref) => {
-    const state = useWeakMap<IConstraint, IConstraintAccordionListItemState>();
-    const { context } = useUnleashContext();
-    const { classes: styles } = useStyles();
+>(
+    (
+        { constraints, setConstraints, showCreateButton, showLabel = true },
+        ref
+    ) => {
+        const state = useWeakMap<
+            IConstraint,
+            IConstraintAccordionListItemState
+        >();
+        const { context } = useUnleashContext();
+        const { classes: styles } = useStyles();

-    const addConstraint =
-        setConstraints &&
-        ((contextName: string) => {
-            const constraint = createEmptyConstraint(contextName);
-            state.set(constraint, { editing: true, new: true });
-            setConstraints(prev => [...prev, constraint]);
-        });
+        const addConstraint =
+            setConstraints &&
+            ((contextName: string) => {
+                const constraint = createEmptyConstraint(contextName);
+                state.set(constraint, { editing: true, new: true });
+                setConstraints(prev => [...prev, constraint]);
+            });

-    useImperativeHandle(ref, () => ({
-        addConstraint,
-    }));
+        useImperativeHandle(ref, () => ({
+            addConstraint,
+        }));

-    const onAdd =
-        addConstraint &&
-        (() => {
-            addConstraint(context[0].name);
-        });
+        const onAdd =
+            addConstraint &&
+            (() => {
+                addConstraint(context[0].name);
+            });

-    const onEdit =
-        setConstraints &&
-        ((constraint: IConstraint) => {
-            state.set(constraint, { editing: true });
-        });
+        const onEdit =
+            setConstraints &&
+            ((constraint: IConstraint) => {
+                state.set(constraint, { editing: true });
+            });

-    const onRemove =
-        setConstraints &&
-        ((index: number) => {
+        const onRemove =
+            setConstraints &&
+            ((index: number) => {
+                const constraint = constraints[index];
+                state.set(constraint, {});
+                setConstraints(
+                    produce(draft => {
+                        draft.splice(index, 1);
+                    })
+                );
+            });
+
+        const onSave =
+            setConstraints &&
+            ((index: number, constraint: IConstraint) => {
+                state.set(constraint, {});
+                setConstraints(
+                    produce(draft => {
+                        draft[index] = constraint;
+                    })
+                );
+            });
+
+        const onCancel = (index: number) => {
            const constraint = constraints[index];
+            state.get(constraint)?.new && onRemove?.(index);
            state.set(constraint, {});
-            setConstraints(
-                produce(draft => {
-                    draft.splice(index, 1);
-                })
-            );
-        });
+        };

-    const onSave =
-        setConstraints &&
-        ((index: number, constraint: IConstraint) => {
-            state.set(constraint, {});
-            setConstraints(
-                produce(draft => {
-                    draft[index] = constraint;
-                })
-            );
-        });
+        if (context.length === 0) {
+            return null;
+        }

-    const onCancel = (index: number) => {
-        const constraint = constraints[index];
-        state.get(constraint)?.new && onRemove?.(index);
-        state.set(constraint, {});
-    };
-
-    if (context.length === 0) {
-        return null;
-    }
-
-    return (
-        <div className={styles.container} id={constraintAccordionListId}>
-            <ConditionallyRender
-                condition={constraints && constraints.length > 0}
-                show={
-                    <p className={styles.customConstraintLabel}>
-                        Custom constraints
-                    </p>
-                }
-            />
-            {constraints.map((constraint, index) => (
-                <ConstraintAccordion
-                    key={objectId(constraint)}
-                    constraint={constraint}
-                    onEdit={onEdit && onEdit.bind(null, constraint)}
-                    onCancel={onCancel.bind(null, index)}
-                    onDelete={onRemove && onRemove.bind(null, index)}
-                    onSave={onSave && onSave.bind(null, index)}
-                    editing={Boolean(state.get(constraint)?.editing)}
-                    compact
+        return (
+            <div className={styles.container} id={constraintAccordionListId}>
+                <ConditionallyRender
+                    condition={
+                        constraints && constraints.length > 0 && showLabel
+                    }
+                    show={
+                        <p className={styles.customConstraintLabel}>
+                            Custom constraints
+                        </p>
+                    }
                />
-            ))}
-            <ConditionallyRender
-                condition={Boolean(showCreateButton && onAdd)}
-                show={
-                    <div>
-                        <div className={styles.addCustomLabel}>
-                            <p>Add any number of custom constraints</p>
-                            <Tooltip
-                                title="Help"
-                                arrow
-                                className={styles.helpWrapper}
-                            >
-                                <a
-                                    href={
-                                        'https://docs.getunleash.io/advanced/strategy_constraints'
-                                    }
-                                    target="_blank"
-                                    rel="noopener noreferrer"
+                {constraints.map((constraint, index) => (
+                    <Fragment key={objectId(constraint)}>
+                        <ConditionallyRender
+                            condition={index > 0}
+                            show={<StrategySeparator text="AND" />}
+                        />
+                        <ConstraintAccordion
+                            constraint={constraint}
+                            onEdit={onEdit && onEdit.bind(null, constraint)}
+                            onCancel={onCancel.bind(null, index)}
+                            onDelete={onRemove && onRemove.bind(null, index)}
+                            onSave={onSave && onSave.bind(null, index)}
+                            editing={Boolean(state.get(constraint)?.editing)}
+                            compact
+                        />
+                    </Fragment>
+                ))}
+                <ConditionallyRender
+                    condition={Boolean(showCreateButton && onAdd)}
+                    show={
+                        <div>
+                            <div className={styles.addCustomLabel}>
+                                <p>Add any number of custom constraints</p>
+                                <Tooltip
+                                    title="Help"
+                                    arrow
+                                    className={styles.helpWrapper}
                                >
-                                    <HelpOutline className={styles.help} />
-                                </a>
-                            </Tooltip>
+                                    <a
+                                        href={
+                                            'https://docs.getunleash.io/advanced/strategy_constraints'
+                                        }
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                    >
+                                        <HelpOutline className={styles.help} />
+                                    </a>
+                                </Tooltip>
+                            </div>
+                            <Button
+                                type="button"
+                                onClick={onAdd}
+                                variant="outlined"
+                                color="secondary"
+                            >
+                                Add custom constraint
+                            </Button>
                        </div>
-                        <Button
-                            type="button"
-                            onClick={onAdd}
-                            variant="outlined"
-                            color="secondary"
-                            sx={{ mb: 2 }}
-                        >
-                            Add custom constraint
-                        </Button>
-                    </div>
-                }
-            />
-        </div>
-    );
-});
+                    }
+                />
+            </div>
+        );
+    }
+);
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx
@ -1,10 +1,13 @@
-import { IConstraint } from '../../../../../../interfaces/strategy';
+import { IConstraint } from 'interfaces/strategy';
 import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
 import { Tooltip, Box } from '@mui/material';
-import { ReactComponent as NegatedIcon } from '../../../../../../assets/icons/24_Negator.svg';
+import { stringOperators } from 'constants/operators';
+import { ReactComponent as NegatedIcon } from 'assets/icons/24_Negator.svg';
 import { ConstraintOperator } from '../../../ConstraintOperator/ConstraintOperator';
 import { useStyles } from '../../../ConstraintAccordion.styles';
 import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper';
+import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
+import { oneOf } from 'utils/oneOf';

 interface ConstraintViewHeaderOperatorProps {
    constraint: IConstraint;
@ -35,6 +38,19 @@ export const ConstraintViewHeaderOperator = ({
                    hasPrefix={Boolean(constraint.inverted)}
                />
            </div>
+            <ConditionallyRender
+                condition={
+                    !Boolean(constraint.caseInsensitive) &&
+                    oneOf(stringOperators, constraint.operator)
+                }
+                show={
+                    <Tooltip title="Case sensitive is active" arrow>
+                        <StyledIconWrapper>
+                            <CaseSensitive />
+                        </StyledIconWrapper>
+                    </Tooltip>
+                }
+            />
        </div>
    );
 };
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx
@ -1,11 +1,7 @@
 import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
-import { oneOf } from '../../../../../../utils/oneOf';
-import { stringOperators } from '../../../../../../constants/operators';
-import { styled, Tooltip } from '@mui/material';
-import { ReactComponent as CaseSensitive } from '../../../../../../assets/icons/24_Text format.svg';
+import { styled } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
 import classnames from 'classnames';
-import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper';
 import { IConstraint } from '../../../../../../interfaces/strategy';
 import { useStyles } from '../../../ConstraintAccordion.styles';

@ -53,19 +49,6 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({

    return (
        <div className={styles.headerValuesContainerWrapper}>
-            <ConditionallyRender
-                condition={
-                    !Boolean(constraint.caseInsensitive) &&
-                    oneOf(stringOperators, constraint.operator)
-                }
-                show={
-                    <Tooltip title="Case sensitive is active" arrow>
-                        <StyledIconWrapper>
-                            <CaseSensitive />
-                        </StyledIconWrapper>
-                    </Tooltip>
-                }
-            />
            <div className={styles.headerValuesContainer}>
                <StyledValuesSpan>{text}</StyledValuesSpan>
                <ConditionallyRender
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx
@ -1,12 +1,7 @@
 import React, { useEffect } from 'react';
-import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
-import { oneOf } from '../../../../../../utils/oneOf';
-import { stringOperators } from '../../../../../../constants/operators';
-import { Chip, styled, Tooltip } from '@mui/material';
-import { ReactComponent as CaseSensitive } from '../../../../../../assets/icons/24_Text format.svg';
+import { Chip, styled } from '@mui/material';
 import { formatConstraintValue } from '../../../../../../utils/formatConstraintValue';
 import { useStyles } from '../../../ConstraintAccordion.styles';
-import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper';
 import { IConstraint } from '../../../../../../interfaces/strategy';
 import { useLocationSettings } from '../../../../../../hooks/useLocationSettings';

@ -35,19 +30,6 @@ export const ConstraintAccordionViewHeaderSingleValue = ({

    return (
        <div className={styles.headerValuesContainerWrapper}>
-            <ConditionallyRender
-                condition={
-                    !Boolean(constraint.caseInsensitive) &&
-                    oneOf(stringOperators, constraint.operator)
-                }
-                show={
-                    <Tooltip title="Case sensitive is active" arrow>
-                        <StyledIconWrapper>
-                            <CaseSensitive />{' '}
-                        </StyledIconWrapper>
-                    </Tooltip>
-                }
-            />
            <StyledSingleValueChip
                label={formatConstraintValue(constraint, locationSettings)}
            />
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx
@ -6,13 +6,13 @@ export const StyledIconWrapperBase = styled('div')<{
    prefix?: boolean;
 }>(({ theme }) => ({
    backgroundColor: theme.palette.grey[200],
-    width: 28,
+    width: 24,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'stretch',
    color: theme.palette.primary.main,
-    marginRight: '1rem',
+    marginRight: theme.spacing(1),
    borderRadius: theme.shape.borderRadius,
 }));

--- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts
@ -9,6 +9,7 @@ export const useStyles = makeStyles()(theme => ({
    },
    name: {
        fontSize: theme.fontSizes.smallBody,
+        lineHeight: 17 / 14,
    },
    text: {
        fontSize: theme.fontSizes.smallerBody,
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
@ -23,6 +23,7 @@ export const ConstraintOperator = ({
            style={{
                borderTopLeftRadius: hasPrefix ? 0 : undefined,
                borderBottomLeftRadius: hasPrefix ? 0 : undefined,
+                paddingLeft: hasPrefix ? 0 : undefined,
            }}
        >
            <div className={styles.name}>{operatorName}</div>
--- a/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx
+++ b/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx
@ -14,7 +14,7 @@ const EnvironmentIcon = ({ enabled, className }: IEnvironmentIcon) => {
    const container = {
        backgroundColor: enabled
            ? theme.palette.primary.light
-            : theme.palette.inactiveIcon,
+            : theme.palette.neutral.border,
        borderRadius: '50%',
        width: '28px',
        height: '28px',
@ -22,13 +22,13 @@ const EnvironmentIcon = ({ enabled, className }: IEnvironmentIcon) => {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
-        marginRight: '0.5rem',
+        marginRight: theme.spacing(1),
    };

    const icon = {
        fill: '#fff',
-        width: '17px',
-        height: '17px',
+        width: '16px',
+        height: '16px',
    };

    return (
--- a/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx
+++ b/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx
@ -6,7 +6,7 @@ interface IStrategySeparatorProps {
 }

 const StyledContainer = styled('div')(({ theme }) => ({
-    height: theme.spacing(2),
+    height: theme.spacing(1),
    position: 'relative',
    width: '100%',
 }));
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
@ -8,6 +8,7 @@ import { FeatureStrategyMenu } from '../FeatureStrategyMenu/FeatureStrategyMenu'
 import { PresetCard } from './PresetCard/PresetCard';
 import { useStyles } from './FeatureStrategyEmpty.styles';
 import { formatUnknownError } from 'utils/formatUnknownError';
+import { getFeatureStrategyIcon } from 'utils/strategyNames';

 interface IFeatureStrategyEmptyProps {
    projectId: string;
@ -93,6 +94,7 @@ export const FeatureStrategyEmpty = ({
            >
                <PresetCard
                    title="Standard strategy"
+                    Icon={getFeatureStrategyIcon('default')}
                    onClick={onAddSimpleStrategy}
                >
                    The standard strategy is strictly on/off for your entire
@ -100,6 +102,7 @@ export const FeatureStrategyEmpty = ({
                </PresetCard>
                <PresetCard
                    title="Gradual rollout"
+                    Icon={getFeatureStrategyIcon('flexibleRollout')}
                    onClick={onAddGradualRolloutStrategy}
                >
                    Roll out to a percentage of your userbase.
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/PresetCard/PresetCard.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/PresetCard/PresetCard.tsx
@ -1,22 +1,34 @@
-import { Button, Card, CardContent, Typography } from '@mui/material';
-import { FC } from 'react';
+import { ElementType, FC } from 'react';
+import { Button, Card, CardContent, styled, Typography } from '@mui/material';

 interface IPresetCardProps {
    title: string;
    onClick: () => void;
+    Icon: ElementType;
 }

+const StyledCard = styled(Card)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: theme.shape.borderRadiusMedium,
+}));
+
 export const PresetCard: FC<IPresetCardProps> = ({
    title,
    children,
+    Icon,
    onClick,
 }) => (
-    <Card variant="outlined" sx={{ display: 'flex', flexDirection: 'column' }}>
+    <StyledCard variant="outlined">
        <CardContent
            sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}
        >
-            <Typography variant="body1" fontWeight="medium" sx={{ mb: 0.5 }}>
-                {title}
+            <Typography
+                variant="body1"
+                fontWeight="medium"
+                sx={{ mb: 0.5, display: 'flex', alignItems: 'center' }}
+            >
+                <Icon color="disabled" sx={{ mr: 1 }} /> {title}
            </Typography>
            <Typography variant="body2" color="text.secondary" component="p">
                {children}
@ -31,5 +43,5 @@ export const PresetCard: FC<IPresetCardProps> = ({
                Use template
            </Button>
        </CardContent>
-    </Card>
+    </StyledCard>
 );
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx
@ -14,13 +14,11 @@ export const FeatureStrategyIcon = ({
    const Icon = getFeatureStrategyIcon(strategyName);

    return (
-        <StyledIcon>
-            <Tooltip title={formatStrategyName(strategyName)} arrow>
-                <>
-                    <Icon />
-                </>
-            </Tooltip>
-        </StyledIcon>
+        <Tooltip title={formatStrategyName(strategyName)} arrow>
+            <StyledIcon>
+                <Icon />
+            </StyledIcon>
+        </Tooltip>
    );
 };

--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx
@ -256,7 +256,10 @@ export const StrategyExecution = ({ strategy }: IStrategyExecutionProps) => {
                condition={constraints.length > 0}
                show={
                    <>
-                        <ConstraintAccordionList constraints={constraints} />
+                        <ConstraintAccordionList
+                            constraints={constraints}
+                            showLabel={false}
+                        />
                        <StrategySeparator text="AND" />
                    </>
                }
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts
@ -3,18 +3,18 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()(theme => ({
    container: {
        borderRadius: theme.shape.borderRadiusMedium,
-        border: `1px solid ${theme.palette.grey[300]}`,
+        border: `1px solid ${theme.palette.divider}`,
        '& + &': {
-            marginTop: '1rem',
+            marginTop: theme.spacing(2),
        },
        background: theme.palette.background.default,
    },
    header: {
        padding: theme.spacing(0.5, 2),
        display: 'flex',
-        gap: '0.5rem',
+        gap: theme.spacing(1),
        alignItems: 'center',
-        borderBottom: `1px solid ${theme.palette.grey[300]}`,
+        borderBottom: `1px solid ${theme.palette.divider}`,
        fontWeight: theme.typography.fontWeightMedium,
    },
    icon: {
@ -25,8 +25,7 @@ export const useStyles = makeStyles()(theme => ({
        display: 'flex',
    },
    body: {
-        padding: '1rem',
-        display: 'grid',
+        padding: theme.spacing(2),
        justifyItems: 'center',
    },
 }));
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts
@ -41,7 +41,6 @@ export const useStyles = makeStyles()(theme => ({
        display: 'flex',
        justifyContent: 'center',
        flexDirection: 'column',
-        // paddingTop: '1.5rem',
    },
    headerTitle: {
        display: 'flex',
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
@ -69,7 +69,7 @@ const FeatureOverviewEnvironment = ({
                        data-loading
                        style={{
                            color: !env.enabled
-                                ? theme.palette.text.disabled
+                                ? theme.palette.text.secondary
                                : theme.palette.text.primary,
                        }}
                    >
@ -91,7 +91,6 @@ const FeatureOverviewEnvironment = ({
                                        <Chip
                                            size="small"
                                            variant="outlined"
-                                            // severity="disabled"
                                            label="Disabled"
                                            sx={{ ml: 1 }}
                                        />
@ -115,6 +114,7 @@ const FeatureOverviewEnvironment = ({

                    <FeatureOverviewEnvironmentMetrics
                        environmentMetric={environmentMetric}
+                        disabled={!env.enabled}
                    />
                </AccordionSummary>

--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
@ -1,4 +1,5 @@
 import { FiberManualRecord } from '@mui/icons-material';
+import { useTheme } from '@mui/system';
 import { IFeatureEnvironmentMetrics } from 'interfaces/featureToggle';
 import { calculatePercentage } from 'utils/calculatePercentage';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
@ -6,12 +7,15 @@ import { useStyles } from './FeatureOverviewEnvironmentMetrics.styles';

 interface IFeatureOverviewEnvironmentMetrics {
    environmentMetric?: IFeatureEnvironmentMetrics;
+    disabled?: boolean;
 }

 const FeatureOverviewEnvironmentMetrics = ({
    environmentMetric,
+    disabled = false,
 }: IFeatureOverviewEnvironmentMetrics) => {
    const { classes: styles } = useStyles();
+    const theme = useTheme();

    if (!environmentMetric) return null;

@ -25,10 +29,26 @@ const FeatureOverviewEnvironmentMetrics = ({
        return (
            <div className={styles.container}>
                <div className={styles.info}>
-                    <p className={styles.percentage} data-loading>
+                    <p
+                        className={styles.percentage}
+                        style={{
+                            color: disabled
+                                ? theme.palette.text.secondary
+                                : undefined,
+                        }}
+                        data-loading
+                    >
                        {percentage}%
                    </p>
-                    <p className={styles.infoParagraph} data-loading>
+                    <p
+                        className={styles.infoParagraph}
+                        style={{
+                            color: disabled
+                                ? theme.palette.text.secondary
+                                : theme.palette.text.primary,
+                        }}
+                        data-loading
+                    >
                        The feature has been requested <b>0 times</b> and
                        exposed<b> 0 times</b> in the last hour
                    </p>
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts
@ -3,16 +3,18 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()(theme => ({
    container: {
        width: '100%',
-        padding: '1rem',
+        padding: theme.spacing(2, 3),
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
        fontSize: theme.fontSizes.smallBody,
-        backgroundColor: theme.palette.grey[200],
+        border: `1px solid ${theme.palette.dividerAlternative}`,
        position: 'relative',
        borderRadius: '5px',
-        textAlign: 'center',
    },
    link: {
        textDecoration: 'none',
-        fontWeight: theme.fontWeight.bold,
+        marginLeft: theme.spacing(1),
        '&:hover': {
            textDecoration: 'underline',
        },
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx
@ -1,8 +1,9 @@
+import { Fragment } from 'react';
+import { Link } from 'react-router-dom';
+import { DonutLarge } from '@mui/icons-material';
 import { useStyles } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles';
 import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
-import { Link } from 'react-router-dom';
-import { Fragment } from 'react';

 interface IFeatureOverviewSegmentProps {
    strategyId: string;
@ -23,7 +24,7 @@ export const FeatureOverviewSegment = ({
            {segments.map(segment => (
                <Fragment key={segment.id}>
                    <div className={styles.container}>
-                        Segment{' '}
+                        <DonutLarge color="secondary" sx={{ mr: 1 }} /> Segment:{' '}
                        <Link
                            to={segmentPath(segment.id)}
                            className={styles.link}
--- a/frontend/src/utils/strategyNames.tsx
+++ b/frontend/src/utils/strategyNames.tsx
@ -1,15 +1,24 @@
+import { FC, ElementType } from 'react';
+import { SvgIcon } from '@mui/material';
 import LocationOnIcon from '@mui/icons-material/LocationOn';
 import PeopleIcon from '@mui/icons-material/People';
 import LanguageIcon from '@mui/icons-material/Language';
 import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import CodeIcon from '@mui/icons-material/Code';
 import { ReactComponent as RolloutIcon } from 'assets/icons/rollout.svg';
-import { ElementType } from 'react';

 export const formatStrategyName = (strategyName: string): string => {
    return formattedStrategyNames[strategyName] ?? strategyName;
 };

+const RolloutSvgIcon: FC = props => (
+    <SvgIcon
+        {...props}
+        component={rest => <RolloutIcon {...rest} />}
+        inheritViewBox
+    />
+);
+
 export const getFeatureStrategyIcon = (strategyName: string): ElementType => {
    switch (strategyName) {
        case 'default':
@ -17,7 +26,7 @@ export const getFeatureStrategyIcon = (strategyName: string): ElementType => {
        case 'remoteAddress':
            return LanguageIcon;
        case 'flexibleRollout':
-            return RolloutIcon;
+            return RolloutSvgIcon;
        case 'userWithId':
            return PeopleIcon;
        case 'applicationHostname':
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -17,12 +17,24 @@
  dependencies:
    "@babel/highlight" "^7.16.7"

+"@babel/code-frame@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.10":
  version "7.17.10"
  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.10.tgz#711dc726a492dfc8be8220028b1b92482362baab"
  integrity sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==

-"@babel/core@^7.15.5", "@babel/core@^7.16.0", "@babel/core@^7.17.10":
+"@babel/compat-data@^7.18.8":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.8.tgz#2483f565faca607b8535590e84e7de323f27764d"
+  integrity sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ==
+
+"@babel/core@^7.16.0", "@babel/core@^7.17.10":
  version "7.17.10"
  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.10.tgz#74ef0fbf56b7dfc3f198fc2d927f4f03e12f4b05"
  integrity sha512-liKoppandF3ZcBnIYFjfSDHZLKdLHGJRkoWtG8zQyGJBQfIYobpnVGI5+pLBNtS6psFLDzyq8+h5HiVljW9PNA==
@ -43,6 +55,27 @@
    json5 "^2.2.1"
    semver "^6.3.0"

+"@babel/core@^7.18.5":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.9.tgz#805461f967c77ff46c74ca0460ccf4fe933ddd59"
+  integrity sha512-1LIb1eL8APMy91/IMW+31ckrfBM4yCoLaVzoDhZUKSM4cu1L1nIidyxkCgzPAgrC5WEz36IPEr/eSeSF9pIn+g==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.9"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-module-transforms" "^7.18.9"
+    "@babel/helpers" "^7.18.9"
+    "@babel/parser" "^7.18.9"
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.1"
+    semver "^6.3.0"
+
 "@babel/eslint-parser@^7.16.3":
  version "7.17.0"
  resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.17.0.tgz#eabb24ad9f0afa80e5849f8240d0e5facc2d90d6"
@ -70,6 +103,15 @@
    jsesc "^2.5.1"
    source-map "^0.5.0"

+"@babel/generator@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.9.tgz#68337e9ea8044d6ddc690fb29acae39359cca0a5"
+  integrity sha512-wt5Naw6lJrL1/SGkipMiFxJjtyczUWTP38deiP1PO60HsBjDeKk08CGC3S8iVuvf0FmTdgKwU1KIXzSKL1G0Ug==
+  dependencies:
+    "@babel/types" "^7.18.9"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.16.7":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
@ -95,6 +137,16 @@
    browserslist "^4.20.2"
    semver "^6.3.0"

+"@babel/helper-compilation-targets@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.9.tgz#69e64f57b524cde3e5ff6cc5a9f4a387ee5563bf"
+  integrity sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg==
+  dependencies:
+    "@babel/compat-data" "^7.18.8"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.20.2"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.6", "@babel/helper-create-class-features-plugin@^7.17.9":
  version "7.17.9"
  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz#71835d7fb9f38bd9f1378e40a4c0902fdc2ea49d"
@ -137,6 +189,11 @@
  dependencies:
    "@babel/types" "^7.16.7"

+"@babel/helper-environment-visitor@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
+  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
+
 "@babel/helper-explode-assignable-expression@^7.16.7":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz#12a6d8522fdd834f194e868af6354e8650242b7a"
@ -152,6 +209,14 @@
    "@babel/template" "^7.16.7"
    "@babel/types" "^7.17.0"

+"@babel/helper-function-name@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.18.9.tgz#940e6084a55dee867d33b4e487da2676365e86b0"
+  integrity sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A==
+  dependencies:
+    "@babel/template" "^7.18.6"
+    "@babel/types" "^7.18.9"
+
 "@babel/helper-hoist-variables@^7.16.7":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
@ -159,6 +224,13 @@
  dependencies:
    "@babel/types" "^7.16.7"

+"@babel/helper-hoist-variables@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-member-expression-to-functions@^7.16.7", "@babel/helper-member-expression-to-functions@^7.17.7":
  version "7.17.7"
  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz#a34013b57d8542a8c4ff8ba3f747c02452a4d8c4"
@ -173,6 +245,13 @@
  dependencies:
    "@babel/types" "^7.16.7"

+"@babel/helper-module-imports@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-module-transforms@^7.16.7", "@babel/helper-module-transforms@^7.17.7":
  version "7.17.7"
  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz#3943c7f777139e7954a5355c815263741a9c1cbd"
@ -187,6 +266,20 @@
    "@babel/traverse" "^7.17.3"
    "@babel/types" "^7.17.0"

+"@babel/helper-module-transforms@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.9.tgz#5a1079c005135ed627442df31a42887e80fcb712"
+  integrity sha512-KYNqY0ICwfv19b31XzvmI/mfcylOzbLtowkw+mfvGPAQ3kfCnMLYbED3YecL5tPd8nAYFQFAd6JHp2LxZk/J1g==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
 "@babel/helper-optimise-call-expression@^7.16.7":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz#a34e3560605abbd31a18546bd2aad3e6d9a174f2"
@ -226,6 +319,13 @@
  dependencies:
    "@babel/types" "^7.17.0"

+"@babel/helper-simple-access@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz#d6d8f51f4ac2978068df934b569f08f29788c7ea"
+  integrity sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
  version "7.16.0"
  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz#0ee3388070147c3ae051e487eca3ebb0e2e8bb09"
@ -240,16 +340,33 @@
  dependencies:
    "@babel/types" "^7.16.7"

+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-validator-identifier@^7.16.7":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==

+"@babel/helper-validator-identifier@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
+  integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
+
 "@babel/helper-validator-option@^7.16.7":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
  integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==

+"@babel/helper-validator-option@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
+  integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
+
 "@babel/helper-wrap-function@^7.16.8":
  version "7.16.8"
  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz#58afda087c4cd235de92f7ceedebca2c41274200"
@ -269,6 +386,15 @@
    "@babel/traverse" "^7.17.9"
    "@babel/types" "^7.17.0"

+"@babel/helpers@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.18.9.tgz#4bef3b893f253a1eced04516824ede94dcfe7ff9"
+  integrity sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ==
+  dependencies:
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
 "@babel/highlight@^7.16.7":
  version "7.17.9"
  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.9.tgz#61b2ee7f32ea0454612def4fccdae0de232b73e3"
@ -278,6 +404,15 @@
    chalk "^2.0.0"
    js-tokens "^4.0.0"

+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.16.7", "@babel/parser@^7.17.9":
  version "7.17.9"
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.9.tgz#9c94189a6062f0291418ca021077983058e171ef"
@ -288,6 +423,11 @@
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.10.tgz#873b16db82a8909e0fbd7f115772f4b739f6ce78"
  integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==

+"@babel/parser@^7.18.6", "@babel/parser@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.9.tgz#f2dde0c682ccc264a9a8595efd030a5cc8fd2539"
+  integrity sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz#4eda6d6c2a0aa79c70fa7b6da67763dfe2141050"
@ -1039,6 +1179,15 @@
    "@babel/parser" "^7.16.7"
    "@babel/types" "^7.16.7"

+"@babel/template@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.6.tgz#1283f4993e00b929d6e2d3c72fdc9168a2977a31"
+  integrity sha512-JoDWzPe+wgBsTTgdnIma3iHNFC7YVJoPssVBDjiHfNlyt4YcunDtcDOUmfVDfCK5MfdsaIoX9PkijPhjH3nYUw==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.18.6"
+    "@babel/types" "^7.18.6"
+
 "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.10":
  version "7.17.10"
  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.10.tgz#1ee1a5ac39f4eac844e6cf855b35520e5eb6f8b5"
@ -1071,7 +1220,23 @@
    debug "^4.1.0"
    globals "^11.1.0"

-"@babel/types@^7.15.6", "@babel/types@^7.16.0", "@babel/types@^7.16.8", "@babel/types@^7.17.10", "@babel/types@^7.4.4":
+"@babel/traverse@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.9.tgz#deeff3e8f1bad9786874cb2feda7a2d77a904f98"
+  integrity sha512-LcPAnujXGwBgv3/WHv01pHtb2tihcyW1XuL9wd7jqh1Z8AQkTd+QVjMrMijrln0T7ED3UXLIy36P9Ao7W75rYg==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.9"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.18.9"
+    "@babel/types" "^7.18.9"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.16.0", "@babel/types@^7.16.8", "@babel/types@^7.17.10", "@babel/types@^7.4.4":
  version "7.17.10"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.10.tgz#d35d7b4467e439fcf06d195f8100e0fea7fc82c4"
  integrity sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A==
@ -1087,6 +1252,14 @@
    "@babel/helper-validator-identifier" "^7.16.7"
    to-fast-properties "^2.0.0"

+"@babel/types@^7.18.4", "@babel/types@^7.18.6", "@babel/types@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.9.tgz#7148d64ba133d8d73a41b3172ac4b83a1452205f"
+  integrity sha512-WwMLAg2MvJmt/rKEVQBBhIVffMmnilX4oe0sRe7iPOHIGsqpruFHHdrfj4O1CMMtgMtCU4oPafZjDPCRgO57Wg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    to-fast-properties "^2.0.0"
+
 "@codemirror/autocomplete@^6.0.0":
  version "6.0.4"
  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.0.4.tgz#90a9c81cfddac528b9e9dc07415a7c6554dbe85c"
@ -1416,6 +1589,15 @@
    "@jridgewell/set-array" "^1.0.0"
    "@jridgewell/sourcemap-codec" "^1.4.10"

+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@jridgewell/resolve-uri@^3.0.3":
  version "3.0.6"
  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.6.tgz#4ac237f4dabc8dd93330386907b97591801f7352"
@ -1426,6 +1608,11 @@
  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.0.tgz#1179863356ac8fbea64a5a4bcde93a4871012c01"
  integrity sha512-SfJxIxNVYLTsKwzB3MoOQ1yxf4w/E6MdkvTgrgAt1bfxjSrLUoHMKrDOykwN14q65waezZIdqDneUIPh4/sKxg==

+"@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
 "@jridgewell/sourcemap-codec@^1.4.10":
  version "1.4.11"
  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
@ -1711,86 +1898,86 @@
  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz#6801033be7ff87a6b7cadaf5b337c9f366a3c4b0"
  integrity sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==

-"@svgr/babel-plugin-add-jsx-attribute@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.0.0.tgz#bd6d1ff32a31b82b601e73672a789cc41e84fe18"
-  integrity sha512-MdPdhdWLtQsjd29Wa4pABdhWbaRMACdM1h31BY+c6FghTZqNGT7pEYdBoaGeKtdTOBC/XNFQaKVj+r/Ei2ryWA==
+"@svgr/babel-plugin-add-jsx-attribute@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.3.1.tgz#b9a5d84902be75a05ede92e70b338d28ab63fa74"
+  integrity sha512-jDBKArXYO1u0B1dmd2Nf8Oy6aTF5vLDfLoO9Oon/GLkqZ/NiggYWZA+a2HpUMH4ITwNqS3z43k8LWApB8S583w==

-"@svgr/babel-plugin-remove-jsx-attribute@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.0.0.tgz#58654908beebfa069681a83332544b17e5237e89"
-  integrity sha512-aVdtfx9jlaaxc3unA6l+M9YRnKIZjOhQPthLKqmTXC8UVkBLDRGwPKo+r8n3VZN8B34+yVajzPTZ+ptTSuZZCw==
+"@svgr/babel-plugin-remove-jsx-attribute@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.3.1.tgz#4877995452efc997b36777abe1fde9705ef78e8b"
+  integrity sha512-dQzyJ4prwjcFd929T43Z8vSYiTlTu8eafV40Z2gO7zy/SV5GT+ogxRJRBIKWomPBOiaVXFg3jY4S5hyEN3IBjQ==

-"@svgr/babel-plugin-remove-jsx-empty-expression@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.0.0.tgz#d06dd6e8a8f603f92f9979bb9990a1f85a4f57ba"
-  integrity sha512-Ccj42ApsePD451AZJJf1QzTD1B/BOU392URJTeXFxSK709i0KUsGtbwyiqsKu7vsYxpTM0IA5clAKDyf9RCZyA==
+"@svgr/babel-plugin-remove-jsx-empty-expression@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.3.1.tgz#2d67a0e92904c9be149a5b22d3a3797ce4d7b514"
+  integrity sha512-HBOUc1XwSU67fU26V5Sfb8MQsT0HvUyxru7d0oBJ4rA2s4HW3PhyAPC7fV/mdsSGpAvOdd8Wpvkjsr0fWPUO7A==

-"@svgr/babel-plugin-replace-jsx-attribute-value@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.0.0.tgz#0b85837577b02c31c09c758a12932820f5245cee"
-  integrity sha512-88V26WGyt1Sfd1emBYmBJRWMmgarrExpKNVmI9vVozha4kqs6FzQJ/Kp5+EYli1apgX44518/0+t9+NU36lThQ==
+"@svgr/babel-plugin-replace-jsx-attribute-value@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.3.1.tgz#306f5247139c53af70d1778f2719647c747998ee"
+  integrity sha512-C12e6aN4BXAolRrI601gPn5MDFCRHO7C4TM8Kks+rDtl8eEq+NN1sak0eAzJu363x3TmHXdZn7+Efd2nr9I5dA==

-"@svgr/babel-plugin-svg-dynamic-title@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.0.0.tgz#28236ec26f7ab9d486a487d36ae52d58ba15676f"
-  integrity sha512-F7YXNLfGze+xv0KMQxrl2vkNbI9kzT9oDK55/kUuymh1ACyXkMV+VZWX1zEhSTfEKh7VkHVZGmVtHg8eTZ6PRg==
+"@svgr/babel-plugin-svg-dynamic-title@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.3.1.tgz#6ce26d34cbc93eb81737ef528528907c292e7aa2"
+  integrity sha512-6NU55Mmh3M5u2CfCCt6TX29/pPneutrkJnnDCHbKZnjukZmmgUAZLtZ2g6ZoSPdarowaQmAiBRgAHqHmG0vuqA==

-"@svgr/babel-plugin-svg-em-dimensions@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.0.0.tgz#40267c5dea1b43c4f83a0eb6169e08b43d8bafce"
-  integrity sha512-+rghFXxdIqJNLQK08kwPBD3Z22/0b2tEZ9lKiL/yTfuyj1wW8HUXu4bo/XkogATIYuXSghVQOOCwURXzHGKyZA==
+"@svgr/babel-plugin-svg-em-dimensions@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.3.1.tgz#5ade2a724b290873c30529d1d8cd23523856287a"
+  integrity sha512-HV1NGHYTTe1vCNKlBgq/gKuCSfaRlKcHIADn7P8w8U3Zvujdw1rmusutghJ1pZJV7pDt3Gt8ws+SVrqHnBO/Qw==

-"@svgr/babel-plugin-transform-react-native-svg@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.0.0.tgz#eb688d0a5f539e34d268d8a516e81f5d7fede7c9"
-  integrity sha512-VaphyHZ+xIKv5v0K0HCzyfAaLhPGJXSk2HkpYfXIOKb7DjLBv0soHDxNv6X0vr2titsxE7klb++u7iOf7TSrFQ==
+"@svgr/babel-plugin-transform-react-native-svg@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.3.1.tgz#d654f509d692c3a09dfb475757a44bd9f6ad7ddf"
+  integrity sha512-2wZhSHvTolFNeKDAN/ZmIeSz2O9JSw72XD+o2bNp2QAaWqa8KGpn5Yk5WHso6xqfSAiRzAE+GXlsrBO4UP9LLw==

-"@svgr/babel-plugin-transform-svg-component@^6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.2.0.tgz#7ba61d9fc1fb42b0ba1a04e4630019fa7e993c4f"
-  integrity sha512-bhYIpsORb++wpsp91fymbFkf09Z/YEKR0DnFjxvN+8JHeCUD2unnh18jIMKnDJTWtvpTaGYPXELVe4OOzFI0xg==
+"@svgr/babel-plugin-transform-svg-component@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.3.1.tgz#21a285dbffdce9567c437ebf0d081bf9210807e6"
+  integrity sha512-cZ8Tr6ZAWNUFfDeCKn/pGi976iWSkS8ijmEYKosP+6ktdZ7lW9HVLHojyusPw3w0j8PI4VBeWAXAmi/2G7owxw==

-"@svgr/babel-preset@^6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-6.2.0.tgz#1d3ad8c7664253a4be8e4a0f0e6872f30d8af627"
-  integrity sha512-4WQNY0J71JIaL03DRn0vLiz87JXx0b9dYm2aA8XHlQJQoixMl4r/soYHm8dsaJZ3jWtkCiOYy48dp9izvXhDkQ==
+"@svgr/babel-preset@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-6.3.1.tgz#8bd1ead79637d395e9362b01dd37cfd59702e152"
+  integrity sha512-tQtWtzuMMQ3opH7je+MpwfuRA1Hf3cKdSgTtAYwOBDfmhabP7rcTfBi3E7V3MuwJNy/Y02/7/RutvwS1W4Qv9g==
  dependencies:
-    "@svgr/babel-plugin-add-jsx-attribute" "^6.0.0"
-    "@svgr/babel-plugin-remove-jsx-attribute" "^6.0.0"
-    "@svgr/babel-plugin-remove-jsx-empty-expression" "^6.0.0"
-    "@svgr/babel-plugin-replace-jsx-attribute-value" "^6.0.0"
-    "@svgr/babel-plugin-svg-dynamic-title" "^6.0.0"
-    "@svgr/babel-plugin-svg-em-dimensions" "^6.0.0"
-    "@svgr/babel-plugin-transform-react-native-svg" "^6.0.0"
-    "@svgr/babel-plugin-transform-svg-component" "^6.2.0"
+    "@svgr/babel-plugin-add-jsx-attribute" "^6.3.1"
+    "@svgr/babel-plugin-remove-jsx-attribute" "^6.3.1"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "^6.3.1"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^6.3.1"
+    "@svgr/babel-plugin-svg-dynamic-title" "^6.3.1"
+    "@svgr/babel-plugin-svg-em-dimensions" "^6.3.1"
+    "@svgr/babel-plugin-transform-react-native-svg" "^6.3.1"
+    "@svgr/babel-plugin-transform-svg-component" "^6.3.1"

-"@svgr/core@^6.2.1":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-6.2.1.tgz#195de807a9f27f9e0e0d678e01084b05c54fdf61"
-  integrity sha512-NWufjGI2WUyrg46mKuySfviEJ6IxHUOm/8a3Ph38VCWSp+83HBraCQrpEM3F3dB6LBs5x8OElS8h3C0oOJaJAA==
+"@svgr/core@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-6.3.1.tgz#752adf49d8d5473b15d76ca741961de093f715bd"
+  integrity sha512-Sm3/7OdXbQreemf9aO25keerZSbnKMpGEfmH90EyYpj1e8wMD4TuwJIb3THDSgRMWk1kYJfSRulELBy4gVgZUA==
  dependencies:
-    "@svgr/plugin-jsx" "^6.2.1"
+    "@svgr/plugin-jsx" "^6.3.1"
    camelcase "^6.2.0"
    cosmiconfig "^7.0.1"

-"@svgr/hast-util-to-babel-ast@^6.2.1":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.2.1.tgz#ae065567b74cbe745afae617053adf9a764bea25"
-  integrity sha512-pt7MMkQFDlWJVy9ULJ1h+hZBDGFfSCwlBNW1HkLnVi7jUhyEXUaGYWi1x6bM2IXuAR9l265khBT4Av4lPmaNLQ==
+"@svgr/hast-util-to-babel-ast@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.3.1.tgz#59614e24d2a4a28010e02089213b3448d905769d"
+  integrity sha512-NgyCbiTQIwe3wHe/VWOUjyxmpUmsrBjdoIxKpXt3Nqc3TN30BpJG22OxBvVzsAh9jqep0w0/h8Ywvdk3D9niNQ==
  dependencies:
-    "@babel/types" "^7.15.6"
-    entities "^3.0.1"
+    "@babel/types" "^7.18.4"
+    entities "^4.3.0"

-"@svgr/plugin-jsx@^6.2.1":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-6.2.1.tgz#5668f1d2aa18c2f1bb7a1fc9f682d3f9aed263bd"
-  integrity sha512-u+MpjTsLaKo6r3pHeeSVsh9hmGRag2L7VzApWIaS8imNguqoUwDq/u6U/NDmYs/KAsrmtBjOEaAAPbwNGXXp1g==
+"@svgr/plugin-jsx@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-6.3.1.tgz#de7b2de824296b836d6b874d498377896e367f50"
+  integrity sha512-r9+0mYG3hD4nNtUgsTXWGYJomv/bNd7kC16zvsM70I/bGeoCi/3lhTmYqeN6ChWX317OtQCSZZbH4wq9WwoXbw==
  dependencies:
-    "@babel/core" "^7.15.5"
-    "@svgr/babel-preset" "^6.2.0"
-    "@svgr/hast-util-to-babel-ast" "^6.2.1"
-    svg-parser "^2.0.2"
+    "@babel/core" "^7.18.5"
+    "@svgr/babel-preset" "^6.3.1"
+    "@svgr/hast-util-to-babel-ast" "^6.3.1"
+    svg-parser "^2.0.4"

 "@testing-library/dom@8.14.0":
  version "8.14.0"
@ -2071,10 +2258,10 @@
    "@types/scheduler" "*"
    csstype "^3.0.2"

-"@types/react@17.0.47":
-  version "17.0.47"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.47.tgz#4ee71aaf4c5a9e290e03aa4d0d313c5d666b3b78"
-  integrity sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==
+"@types/react@17.0.48":
+  version "17.0.48"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.48.tgz#a4532a8b91d7b27b8768b6fc0c3bccb760d15a6c"
+  integrity sha512-zJ6IYlJ8cYYxiJfUaZOQee4lh99mFihBoqkOSEGV+dFi9leROW6+PgstzQ+w3gWTnUfskALtQPGHK6dYmPj+2A==
  dependencies:
    "@types/prop-types" "*"
    "@types/scheduler" "*"
@ -3328,11 +3515,6 @@ enquirer@^2.3.6:
  dependencies:
    ansi-colors "^4.1.1"

-entities@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
-  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
-
 entities@^4.3.0:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/entities/-/entities-4.3.0.tgz#62915f08d67353bb4eb67e3d62641a4059aec656"
@ -5948,7 +6130,7 @@ supports-preserve-symlinks-flag@^1.0.0:
  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==

-svg-parser@^2.0.2:
+svg-parser@^2.0.4:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
@ -6087,10 +6269,10 @@ tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

-tss-react@3.7.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-3.7.0.tgz#664b4259c36800eb5285a583f6d8c1d5d1d1a30f"
-  integrity sha512-thvJWR+sr3ZGMcV/Ryo1F5RzjXd1gMTzYV/ckfUEBhu701uTYE3KyL9DNxv827uRFPFSLYG7bKefuc7kmYMB9Q==
+tss-react@3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-3.7.1.tgz#119647731490f9e7e62c7f6a38a78df981929a4b"
+  integrity sha512-dfWUoxBlKZfIG9UC1A2h02OmcE/Ni0itCmmZu94E9g+KyBhKMHKcsKvUm0bNlRqTmYjXiCgPJDmj5fyc8CSrLg==
  dependencies:
    "@emotion/cache" "*"
    "@emotion/serialize" "*"
@ -6238,13 +6420,13 @@ vite-plugin-env-compatible@^1.1.1:
  resolved "https://registry.yarnpkg.com/vite-plugin-env-compatible/-/vite-plugin-env-compatible-1.1.1.tgz#2e11b059a5f3e8fc609d6a4bba84ca497081ee20"
  integrity sha512-4lqhBWhOzP+SaCPoCVdmpM5cXzjKQV5jgFauxea488oOeElXo/kw6bXkMIooZhrh9q7gclTl8en6N9NmnqUwRQ==

-vite-plugin-svgr@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-2.2.0.tgz#1943e070b24d91c30dc247d0475fe04393f74b31"
-  integrity sha512-CRJgz92vf3SQbt3jwF6/BhyQIhbY0pwbXAPqUh1/EMG6a4eHsHCECcDNrKZMhlRBj3LyXQSfHXJLtM2ISP5rfg==
+vite-plugin-svgr@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-2.2.1.tgz#6e1132a3b66f71e1d69e8c5fe989393260184ac3"
+  integrity sha512-+EqwahbwjETJH/ssA/66dNYyKN1cO0AStq96MuXmq5maU7AePBMf2lDKfQna49tJZAjtRz+R899BWCsUUP45Fg==
  dependencies:
    "@rollup/pluginutils" "^4.2.1"
-    "@svgr/core" "^6.2.1"
+    "@svgr/core" "^6.3.1"

 vite-tsconfig-paths@3.5.0:
  version "3.5.0"
@ -6256,10 +6438,10 @@ vite-tsconfig-paths@3.5.0:
    recrawl-sync "^2.0.3"
    tsconfig-paths "^4.0.0"

-vite@2.9.13:
-  version "2.9.13"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.13.tgz#859cb5d4c316c0d8c6ec9866045c0f7858ca6abc"
-  integrity sha512-AsOBAaT0AD7Mhe8DuK+/kE4aWYFMx/i0ZNi98hJclxb4e0OhQcZYUrvLjIaQ8e59Ui7txcvKMiJC1yftqpQoDw==
+vite@2.9.14:
+  version "2.9.14"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.14.tgz#c438324c6594afd1050df3777da981dee988bb1b"
+  integrity sha512-P/UCjSpSMcE54r4mPak55hWAZPlyfS369svib/gpmz8/01L822lMPOJ/RYW6tLCe1RPvMvOsJ17erf55bKp4Hw==
  dependencies:
    esbuild "^0.14.27"
    postcss "^8.4.13"