@alfalab/core-components 48.21.0-beta.4 → 48.21.0

package/filter-tag/moderncssm/components/base-filter-tag/Component.js

@@ -5,9 +5,15 @@ import { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompact
 import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
 import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon';
 import { CrossCircleSIcon } from '@alfalab/icons-glyph/CrossCircleSIcon';
+import { isKeyBoardEvent } from '../../helpers/is-keyboard-event.js';
+import defaultColors from './default.module.css';
 import commonStyles from './index.module.css';
+import invertedColors from './inverted.module.css';
 
-const isKeyBoardEvent = (event) => event.key !== undefined;
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 const SIZE_TO_CLASSNAME_MAP = {
     xxs: 'size-32',
     xs: 'size-40',
@@ -16,7 +22,7 @@ const SIZE_TO_CLASSNAME_MAP = {
     40: 'size-40',
     48: 'size-48',
 };
-const BaseFilterTag = forwardRef(({ children, checked, disabled, open, onClick, size = 48, variant = 'default', shape, view = 'outlined', onClear = () => null, showClear = true, block = false, className, dataTestId, styles = {}, }, ref) => {
+const BaseFilterTag = forwardRef(({ children, checked, disabled, open, onClick, size = 48, variant = 'default', shape, view = 'outlined', onClear = () => null, showClear = true, block = false, className, dataTestId, styles = {}, colors = 'default', colorStylesMap = { default: {}, inverted: {} }, leftAddons, }, ref) => {
     const valueRef = useRef(null);
     const [focused] = useFocus(valueRef, 'keyboard');
     const handleClear = (event) => {
@@ -33,28 +39,33 @@ const BaseFilterTag = forwardRef(({ children, checked, disabled, open, onClick,
     const shapeClassName = shape || variantClassName;
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React.createElement("div", { className: cn(className, commonStyles.component, commonStyles[shapeClassName], commonStyles[SIZE_TO_CLASSNAME_MAP[size]], styles.component, styles[shapeClassName], styles[SIZE_TO_CLASSNAME_MAP[size]], {
+    React.createElement("div", { className: cn(className, commonStyles.component, colorStyles[colors].component, commonStyles[shapeClassName], commonStyles[SIZE_TO_CLASSNAME_MAP[size]], styles.component, styles[shapeClassName], styles[SIZE_TO_CLASSNAME_MAP[size]], {
             [commonStyles.checked]: checked,
+            [colorStyles[colors].checked]: checked,
             [styles.checked]: checked,
             [commonStyles.disabled]: disabled,
+            [colorStyles[colors].disabled]: disabled,
             [styles.disabled]: disabled,
             [commonStyles.focused]: focused,
             [commonStyles.open]: open,
             [commonStyles.block]: block,
         }), ref: ref, "data-test-id": dataTestId, onClick: disabled ? undefined : onClick },
-        React.createElement("button", { type: 'button', ref: valueRef, disabled: disabled, className: cn(commonStyles.valueButton, styles.valueButton, commonStyles[SIZE_TO_CLASSNAME_MAP[size]], styles[SIZE_TO_CLASSNAME_MAP[size]], commonStyles[shapeClassName], styles[shapeClassName], commonStyles[view], {
+        React.createElement("button", { type: 'button', ref: valueRef, disabled: disabled, className: cn(commonStyles.valueButton, colorStyles[colors].valueButton, styles.valueButton, colorStylesMap[colors].valueButton, commonStyles[SIZE_TO_CLASSNAME_MAP[size]], styles[SIZE_TO_CLASSNAME_MAP[size]], commonStyles[shapeClassName], styles[shapeClassName], commonStyles[view], colorStyles[colors][view], {
                 [styles[view]]: Boolean(styles[view]),
+                [colorStylesMap[colors][view]]: Boolean(colorStylesMap[colors][view]),
                 [commonStyles.checked]: checked,
+                [colorStyles[colors].checked]: checked,
                 [styles.checked]: checked,
                 [commonStyles.open]: open,
                 [commonStyles.close]: !showClear,
                 [styles.close]: !showClear,
                 [commonStyles.block]: block,
+                [commonStyles.withClear]: showClear,
             }) },
+            leftAddons && React.createElement("div", { className: commonStyles.addons }, leftAddons),
             React.createElement("span", { className: commonStyles.content }, children),
-            React.createElement("span", { className: commonStyles.chevron }, ['size-40', 'size-32'].includes(SIZE_TO_CLASSNAME_MAP[size]) ? (React.createElement(ChevronDownCompactSIcon, null)) : (React.createElement(ChevronDownMIcon, null)))),
-        checked && !disabled && showClear && (React.createElement("div", { role: 'button', className: cn(commonStyles.clear, styles.clear, commonStyles[SIZE_TO_CLASSNAME_MAP[size]], styles[SIZE_TO_CLASSNAME_MAP[size]], styles[shapeClassName], commonStyles[shapeClassName]), onClick: handleClear, onKeyDown: handleClear, tabIndex: 0 },
-            React.createElement("span", { className: commonStyles.iconWrapper }, SIZE_TO_CLASSNAME_MAP[size] === 'size-32' ? (React.createElement(CrossCircleSIcon, null)) : (React.createElement(CrossCircleMIcon, null)))))));
+            React.createElement("span", { className: cn(commonStyles.chevron, colorStyles[colors].chevron) }, ['size-40', 'size-32'].includes(SIZE_TO_CLASSNAME_MAP[size]) ? (React.createElement(ChevronDownCompactSIcon, null)) : (React.createElement(ChevronDownMIcon, null)))),
+        checked && !disabled && showClear && (React.createElement("div", { role: 'button', className: cn(commonStyles.clear, [colorStyles[colors].clear], styles.clear, commonStyles[SIZE_TO_CLASSNAME_MAP[size]], styles[SIZE_TO_CLASSNAME_MAP[size]], styles[shapeClassName], commonStyles[shapeClassName]), onClick: handleClear, onKeyDown: handleClear, tabIndex: 0 }, ['size-40', 'size-32'].includes(SIZE_TO_CLASSNAME_MAP[size]) ? (React.createElement(CrossCircleSIcon, null)) : (React.createElement(CrossCircleMIcon, null))))));
 });
 
 export { BaseFilterTag };

package/filter-tag/moderncssm/components/base-filter-tag/default.module.css

@@ -0,0 +1,210 @@
+/* */
+
+:root {
+    /* border */
+    --tag-border-color: var(--color-light-neutral-translucent-500);
+    --tag-filled-border-color: transparent;
+    --tag-border-color-hover: var(--color-light-neutral-translucent-500);
+    --tag-border-color-active: var(--color-light-neutral-translucent-500);
+    --tag-border-color-checked: var(--color-light-accent-secondary);
+    --tag-border-color-disabled: var(--color-light-neutral-translucent-500);
+    --tag-border-width: 1px;
+
+    /* rectangular border-radius */
+
+    /* rounded border-radius */
+
+    /* background-color outlined */
+    --tag-outlined-background-color: transparent;
+    --tag-outlined-background-color-hover: var(--color-light-transparent-default-hover);
+    --tag-outlined-background-color-active: var(--color-light-transparent-default-press);
+    --tag-outlined-background-color-disabled: transparent;
+
+    /* background-color filled */
+
+    /* background-color checked */
+    --tag-background-color-checked: var(--color-light-accent-secondary);
+    --tag-background-color-checked-hover: var(--color-light-accent-secondary-hover);
+    --tag-background-color-checked-active: var(--color-light-accent-secondary-press);
+    --tag-background-color-checked-disabled: var(--color-light-neutral-translucent-100);
+
+    /* text color */
+    --tag-text-color: var(--color-light-text-primary);
+    --tag-text-color-checked: var(--color-light-text-primary-inverted);
+    --tag-text-color-disabled: var(--color-light-text-tertiary);
+    --tag-text-color-checked-disabled: var(--color-light-text-tertiary);
+
+    /* inverted */
+
+    /* border */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
+
+    /* text color */
+
+    /* mobile */
+
+    /* mobile inverted */
+}
+
+:root {
+    /* chevron */
+    --filter-tag-chevron-color: var(--color-light-neutral-translucent-1300);
+    --filter-tag-chevron-disabled-color: var(--color-light-neutral-500);
+
+    /* chevron inverted */
+    --filter-tag-inverted-chevron-color: var(--color-light-neutral-translucent-1300-inverted);
+
+    /* separator */
+    --filter-tag-separator-background-color-hover: transparent;
+    --filter-tag-separator-background-color-active: transparent;
+
+    /* separator inverted */
+
+    /* clear */
+    --filter-tag-clear-color: var(--color-light-neutral-translucent-700-inverted);
+    --filter-tag-clear-color-hover: var(--color-light-neutral-translucent-700-inverted-hover);
+    --filter-tag-clear-color-active: var(--color-light-neutral-translucent-700-inverted-press);
+    --filter-tag-clear-before-background-color: var(--color-light-neutral-translucent-500-inverted);
+
+    /* clear inverted */
+}
+
+.component.disabled {
+        background-color: var(--tag-outlined-background-color-disabled);
+    }
+
+.component.checked:not(.disabled) {
+            background-color: var(--tag-background-color-checked);
+        }
+
+@media (hover: hover) {
+            .component.checked:not(.disabled):hover {
+                background-color: var(--tag-background-color-checked-hover);
+            }
+        }
+
+.component.checked:not(.disabled):active {
+            background-color: var(--tag-background-color-checked-active);
+        }
+
+.chevron {
+    color: var(--filter-tag-chevron-color);
+}
+
+.valueButton {
+    color: var(--tag-text-color);
+    background-color: var(--tag-outlined-background-color);
+    border: var(--tag-border-width) solid var(--tag-border-color)
+}
+
+.valueButton:disabled > .chevron {
+            color: var(--filter-tag-chevron-disabled-color);
+        }
+
+.valueButton.outlined {
+        color: var(--tag-text-color);
+        border-color: var(--tag-border-color);
+        background-color: var(--tag-outlined-background-color)
+    }
+
+.valueButton.outlined:disabled {
+            border-color: var(--tag-border-color-disabled);
+            color: var(--tag-text-color-disabled);
+            background-color: var(--tag-outlined-background-color-disabled);
+        }
+
+@media (hover: hover) {
+            .valueButton.outlined:not(:disabled):hover {
+                border-color: var(--tag-border-color-hover);
+                background-color: var(--tag-outlined-background-color-hover);
+            }
+        }
+
+.valueButton.outlined:not(:disabled):active {
+            border-color: var(--tag-border-color-active);
+            background-color: var(--tag-outlined-background-color-active);
+        }
+
+.valueButton.filled {
+        color: var(--tag-text-color);
+        border-color: var(--tag-filled-border-color)
+    }
+
+.valueButton.filled:disabled {
+            color: var(--tag-text-color-disabled);
+        }
+
+.valueButton.checked {
+        color: var(--tag-text-color-checked);
+        background-color: var(--tag-background-color-checked);
+        border-color: var(--tag-border-color-checked)
+    }
+
+.valueButton.checked > .chevron {
+            color: var(--filter-tag-inverted-chevron-color);
+        }
+
+@media (hover: hover) {
+            .valueButton.checked:not(:disabled):hover {
+                background-color: var(--tag-background-color-checked-hover);
+            }
+        }
+
+.valueButton.checked:not(:disabled):active {
+            background-color: var(--tag-background-color-checked-active);
+        }
+
+@media (hover: hover) {
+            .valueButton.checked:not(:disabled):hover + .clear:before {
+                background-color: var(--filter-tag-separator-background-color-hover);
+            }
+        }
+
+.valueButton.checked:not(:disabled):active + .clear:before {
+            background-color: var(--filter-tag-separator-background-color-active);
+        }
+
+.valueButton.checked:disabled {
+            color: var(--tag-text-color-checked-disabled);
+            background-color: var(--tag-background-color-checked-disabled)
+        }
+
+.valueButton.checked:disabled > .chevron {
+                color: var(--filter-tag-chevron-disabled-color);
+            }
+
+.clear {
+    color: var(--filter-tag-clear-color);
+    background-color: var(--tag-background-color-checked)
+}
+
+.clear:before {
+        background-color: var(--filter-tag-clear-before-background-color);
+    }
+
+@media (hover: hover) {
+        .clear:hover:before {
+            background-color: var(--filter-tag-separator-background-color-hover);
+        }
+    }
+
+.clear:active:before {
+        background-color: var(--filter-tag-separator-background-color-active);
+    }
+
+@media (hover: hover) {
+        .clear:hover {
+            color: var(--filter-tag-clear-color-hover);
+            background-color: var(--tag-background-color-checked-hover);
+        }
+    }
+
+.clear:active {
+        color: var(--filter-tag-clear-color-active);
+        background-color: var(--tag-background-color-checked-active);
+    }

package/filter-tag/moderncssm/components/base-filter-tag/index.js

@@ -6,4 +6,7 @@ import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
 import '@alfalab/icons-glyph/CrossCircleSIcon';
+import '../../helpers/is-keyboard-event.js';
+import './default.module.css';
 import './index.module.css';
+import './inverted.module.css';

package/filter-tag/moderncssm/components/base-filter-tag/index.module.css

@@ -1,12 +1,7 @@
 /* */
 :root {
     /* border */
-    --tag-border-color: var(--color-light-neutral-translucent-500);
-    --tag-filled-border-color: transparent;
-    --tag-border-color-hover: var(--color-light-neutral-translucent-500);
-    --tag-border-color-active: var(--color-light-neutral-translucent-500);
-    --tag-border-color-disabled: var(--color-light-neutral-translucent-500);
-    --tag-border-width: 1px;
+    --tag-border-color-checked-disabled: transparent;
     --tag-border-radius: var(--border-radius-pill);
 
     /* rectangular border-radius */
@@ -17,24 +12,12 @@
     --tag-rounded-s-border-radius: var(--border-radius-pill);
 
     /* background-color outlined */
-    --tag-outlined-background-color: transparent;
-    --tag-outlined-background-color-hover: var(--color-light-transparent-default-hover);
-    --tag-outlined-background-color-active: var(--color-light-transparent-default-press);
-    --tag-outlined-background-color-disabled: transparent;
 
     /* background-color filled */
 
     /* background-color checked */
-    --tag-background-color-checked: var(--color-light-accent-secondary);
-    --tag-background-color-checked-hover: var(--color-light-accent-secondary-hover);
-    --tag-background-color-checked-active: var(--color-light-accent-secondary-press);
-    --tag-background-color-checked-disabled: var(--color-light-neutral-translucent-100);
 
     /* text color */
-    --tag-text-color: var(--color-light-text-primary);
-    --tag-text-color-checked: var(--color-light-text-primary-inverted);
-    --tag-text-color-disabled: var(--color-light-text-tertiary);
-    --tag-text-color-checked-disabled: var(--color-light-text-tertiary);
 
     /* inverted */
 
@@ -53,7 +36,17 @@
     /* mobile inverted */
 }
 :root {
-    --filter-tag-separator-background-color-hover: transparent;
+    /* chevron */
+
+    /* chevron inverted */
+
+    /* separator */
+
+    /* separator inverted */
+
+    /* clear */
+
+    /* clear inverted */
 }
 .component {
     display: flex;
@@ -64,9 +57,6 @@
 .component.block {
         width: 100%;
     }
-.component.disabled {
-        background-color: var(--tag-outlined-background-color-disabled);
-    }
 .component.rounded.size-32 {
             border-radius: var(--tag-rounded-xxs-border-radius);
         }
@@ -76,9 +66,6 @@
 .component.rounded.size-48 {
             border-radius: var(--tag-rounded-s-border-radius);
         }
-.component.checked:not(.disabled) {
-            background-color: var(--tag-background-color-checked);
-        }
 .component.checked:not(.disabled).size-32 {
             min-width: 80px;
         }
@@ -88,15 +75,8 @@
 .component.checked:not(.disabled).size-48 {
             min-width: 112px;
         }
-@media (hover: hover) {
-            .component.checked:not(.disabled):hover {
-                background-color: var(--tag-background-color-checked-hover);
-            }
-        }
-.component.checked:not(.disabled):active {
-            background-color: var(--tag-background-color-checked-active);
-        }
 .content {
+    padding: 0 var(--gap-4);
     overflow: hidden;
     text-overflow: ellipsis;
 }
@@ -110,7 +90,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--color-light-neutral-translucent-1300);
 }
 .valueButton {
     display: flex;
@@ -122,22 +101,16 @@
     outline: none;
     white-space: nowrap;
     font-family: var(--font-family);
-    color: var(--tag-text-color);
-    background-color: var(--tag-outlined-background-color);
     transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
-    margin: var(--gap-0);
-    border: var(--tag-border-width) solid var(--tag-border-color)
+    margin: var(--gap-0)
 }
 .valueButton.block {
         width: inherit;
         justify-content: center;
     }
 .valueButton:disabled {
-        cursor: var(--disabled-cursor)
+        cursor: var(--disabled-cursor);
     }
-.valueButton:disabled > .chevron {
-            color: var(--color-light-neutral-500);
-        }
 .valueButton.rounded.size-32 {
             border-radius: var(--tag-rounded-xxs-border-radius);
         }
@@ -150,83 +123,45 @@
 .valueButton.size-32 {
         min-width: 52px;
         min-height: var(--size-xxs-height);
+
+        font-size: 14px;
+
+        line-height: 20px;
+
+        font-weight: 400;
+        padding: 0 var(--gap-8);
+        grid-gap: var(--gap-2);
+        gap: var(--gap-2);
     }
 .valueButton.size-40 {
         min-width: 64px;
         min-height: var(--size-xs-height);
+
+        font-size: 14px;
+
+        line-height: 20px;
+
+        font-weight: 400;
+        padding: 0 var(--gap-12);
+        grid-gap: var(--gap-2);
+        gap: var(--gap-2);
     }
 .valueButton.size-48 {
         min-width: 72px;
         min-height: var(--size-s-height);
-    }
-.valueButton.outlined {
-        color: var(--tag-text-color);
-        border-color: var(--tag-border-color);
-        background-color: var(--tag-outlined-background-color)
-    }
-.valueButton.outlined:disabled {
-            border-color: var(--tag-border-color-disabled);
-            color: var(--tag-text-color-disabled);
-            background-color: var(--tag-outlined-background-color-disabled);
-        }
-@media (hover: hover) {
-            .valueButton.outlined:not(:disabled):hover {
-                border-color: var(--tag-border-color-hover);
-                background-color: var(--tag-outlined-background-color-hover);
-            }
-        }
-.valueButton.outlined:not(:disabled):active {
-            border-color: var(--tag-border-color-active);
-            background-color: var(--tag-outlined-background-color-active);
-        }
-.valueButton.filled {
-        color: var(--tag-text-color);
-        border-color: var(--tag-filled-border-color)
-    }
-.valueButton.filled:disabled {
-            color: var(--tag-text-color-disabled);
-        }
-.valueButton.size-48 {
+
         font-size: 16px;
+
         line-height: 24px;
+
         font-weight: 400;
-        padding-right: var(--gap-8);
-        padding-left: var(--gap-20)
-    }
-.valueButton.size-48 .chevron {
-            margin: var(--gap-0) var(--gap-8);
-        }
-.valueButton.size-40 {
-        font-size: 14px;
-        line-height: 20px;
-        font-weight: 400;
-        padding-right: var(--gap-4);
-        padding-left: var(--gap-16)
-    }
-.valueButton.size-40 .chevron {
-            margin: var(--gap-0) var(--gap-12) var(--gap-0) 6px;
-        }
-.valueButton.size-32 {
-        font-size: 14px;
-        line-height: 20px;
-        font-weight: 400;
-        padding-right: var(--gap-0);
-        padding-left: var(--gap-12)
+        padding: 0 var(--gap-16);
+        grid-gap: var(--gap-4);
+        gap: var(--gap-4);
     }
-.valueButton.size-32 .chevron {
-            margin: var(--gap-0) var(--gap-8) var(--gap-0) 6px;
-        }
 .valueButton.open .chevron {
         transform: rotateZ(180deg);
     }
-.valueButton.checked {
-        border-width: 0;
-        color: var(--tag-text-color-checked);
-        background-color: var(--tag-background-color-checked)
-    }
-.valueButton.checked > .chevron {
-            color: var(--color-light-neutral-translucent-1300-inverted);
-        }
 .valueButton.checked.rounded.size-32 {
                 border-radius: var(--tag-rounded-xxs-border-radius) 0 0
                     var(--tag-rounded-xxs-border-radius);
@@ -243,49 +178,25 @@
             .valueButton.checked.rounded.close {
                 border-radius: var(--tag-border-radius);
             }
-.valueButton.checked:not(:disabled) {
-            padding-right: var(--gap-0);
-            border-right-width: 0
-        }
-.valueButton.checked:not(:disabled).close.size-32 {
-                    padding-right: var(--gap-0);
-                }
-.valueButton.checked:not(:disabled).close.size-40 {
-                    padding-right: var(--gap-4);
-                }
-.valueButton.checked:not(:disabled).close.size-48 {
-                    padding-right: var(--gap-8);
-                }
-@media (hover: hover) {
-            .valueButton.checked:not(:disabled):hover {
-                background-color: var(--tag-background-color-checked-hover);
-            }
-        }
-.valueButton.checked:not(:disabled):active {
-            background-color: var(--tag-background-color-checked-active);
-        }
-@media (hover: hover) {
-            .valueButton.checked:not(:disabled):hover + .clear:before {
-                background-color: var(--filter-tag-separator-background-color-hover);
-            }
-        }
-.valueButton.checked:not(:disabled):active + .clear:before {
-            background-color: transparent;
-        }
 .valueButton.checked:disabled {
-            color: var(--tag-text-color-checked-disabled);
-            background-color: var(--tag-background-color-checked-disabled)
+            border-color: var(--tag-border-color-checked-disabled);
         }
-.valueButton.checked:disabled > .chevron {
-                color: var(--color-light-neutral-500);
+.valueButton.checked:not(:disabled).withClear {
+                border-right-width: 0
             }
+.valueButton.checked:not(:disabled).withClear.size-48 {
+                    padding-right: var(--gap-8);
+                }
+.valueButton .addons {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 .clear {
     position: relative;
     cursor: pointer;
     display: flex;
-    align-items: center;
-    color: var(--color-light-neutral-translucent-700-inverted);
-    background-color: var(--tag-background-color-checked)
+    align-items: center
 }
 .clear.rounded.size-32 {
             border-radius: 0 var(--tag-rounded-xxs-border-radius)
@@ -305,50 +216,24 @@
         top: 50%;
         transform: translateY(-50%);
         display: block;
-        background-color: var(--color-light-neutral-translucent-500-inverted);
         width: 1px;
         transition: background-color 0.2s ease;
     }
-@media (hover: hover) {
-        .clear:hover:before {
-            background-color: var(--filter-tag-separator-background-color-hover);
-        }
-    }
-.clear:active:before {
-        background-color: transparent;
-    }
-@media (hover: hover) {
-        .clear:hover {
-            color: var(--color-light-neutral-translucent-700-inverted-hover);
-            background-color: var(--tag-background-color-checked-hover);
-        }
-    }
-.clear:active {
-        color: var(--color-light-neutral-translucent-700-inverted-press);
-        background-color: var(--tag-background-color-checked-active);
-    }
-.clear.size-48 {
-        padding: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-8)
+.clear.size-32 {
+        padding: var(--gap-0) var(--gap-8)
     }
-.clear.size-48:before {
-            height: 24px;
+.clear.size-32:before {
+            height: 20px;
         }
 .clear.size-40 {
-        padding: var(--gap-0) var(--gap-8)
+        padding: var(--gap-0) var(--gap-12)
     }
 .clear.size-40:before {
             height: 24px;
         }
-.clear.size-32 {
-        padding: var(--gap-0) 3px var(--gap-0) var(--gap-4)
+.clear.size-48 {
+        padding: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-8)
     }
-.clear.size-32:before {
-            height: 20px;
+.clear.size-48:before {
+            height: 24px;
         }
-.iconWrapper {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}