@alfalab/core-components-select 19.1.7 → 19.1.8

package/moderncssm/components/base-checkmark/Component.js

@@ -4,17 +4,11 @@ import { Checkbox } from '@alfalab/core-components-checkbox/moderncssm';
 import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 import styles from './index.module.css';
 
-const BaseCheckmark = ({ selected, disabled = false, className, multiple, align = 'center', position = 'before', content, }) => {
-    const renderCheckmarkIcon = () => (React.createElement(CheckmarkMIcon, { className: cn(styles.singleIcon, styles[position], {
-            [styles.selected]: selected,
-        }) }));
-    return multiple ? (React.createElement(Checkbox, { block: true, checked: selected, disabled: disabled, contentClassName: cn({ [styles.positionAfter]: position === 'after' }), className: cn(styles.checkmark, styles[align], className, {
-            [styles.selected]: selected,
-        }), size: 24, position: position, label: content, hiddenInput: true })) : (React.createElement("div", { className: cn(styles.container, styles[align], className) },
-        position === 'before' && renderCheckmarkIcon(),
-        React.createElement("div", { className: styles.content }, content),
-        position === 'after' && renderCheckmarkIcon()));
-};
+const BaseCheckmark = ({ selected, disabled = false, className, multiple, align = 'center', position = 'before', }) => multiple ? (React.createElement(Checkbox, { checked: selected, disabled: disabled, className: cn(styles.checkmark, styles[position], styles[align], className, {
+        [styles.selected]: selected,
+    }), size: 24, hiddenInput: true })) : (React.createElement(CheckmarkMIcon, { className: cn(styles.singleIcon, styles[position], styles[align], className, {
+        [styles.selected]: selected,
+    }) }));
 
 export { BaseCheckmark };
 //# sourceMappingURL=Component.js.map

package/moderncssm/components/base-checkmark/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/base-checkmark/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { Checkbox } from '@alfalab/core-components-checkbox';\nimport { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const BaseCheckmark: FC<CheckmarkProps> = ({\n    selected,\n    disabled = false,\n    className,\n    multiple,\n    align = 'center',\n    position = 'before',\n    content,\n}) => {\n    const renderCheckmarkIcon = () => (\n        <CheckmarkMIcon\n            className={cn(styles.singleIcon, styles[position], {\n                [styles.selected]: selected,\n            })}\n        />\n    );\n\n    return multiple ? (\n        <Checkbox\n            block={true}\n            checked={selected}\n            disabled={disabled}\n            contentClassName={cn({ [styles.positionAfter]: position === 'after' })}\n            className={cn(styles.checkmark, styles[align], className, {\n                [styles.selected]: selected,\n            })}\n            size={24}\n            position={position}\n            label={content}\n            hiddenInput={true}\n        />\n    ) : (\n        <div className={cn(styles.container, styles[align], className)}>\n            {position === 'before' && renderCheckmarkIcon()}\n\n            <div className={styles.content}>{content}</div>\n\n            {position === 'after' && renderCheckmarkIcon()}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAUa,MAAA,aAAa,GAAuB,CAAC,EAC9C,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,GAAG,QAAQ,EAChB,QAAQ,GAAG,QAAQ,EACnB,OAAO,GACV,KAAI;IACD,MAAM,mBAAmB,GAAG,OACxB,KAAA,CAAA,aAAA,CAAC,cAAc,EACX,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;AAC/C,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;SAC9B,CAAC,EAAA,CACJ,CACL;IAED,OAAO,QAAQ,IACX,KAAC,CAAA,aAAA,CAAA,QAAQ,EACL,EAAA,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,aAAa,GAAG,QAAQ,KAAK,OAAO,EAAE,CAAC,EACtE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;AACtD,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,SAAA,CAAC,EACF,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,IAAI,EACnB,CAAA,KAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAAA;AACzD,QAAA,QAAQ,KAAK,QAAQ,IAAI,mBAAmB,EAAE;AAE/C,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,EAAG,OAAO,CAAO;AAE9C,QAAA,QAAQ,KAAK,OAAO,IAAI,mBAAmB,EAAE,CAC5C,CACT;AACL;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/base-checkmark/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { Checkbox } from '@alfalab/core-components-checkbox';\nimport { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const BaseCheckmark: FC<CheckmarkProps> = ({\n    selected,\n    disabled = false,\n    className,\n    multiple,\n    align = 'center',\n    position = 'before',\n}) =>\n    multiple ? (\n        <Checkbox\n            checked={selected}\n            disabled={disabled}\n            className={cn(styles.checkmark, styles[position], styles[align], className, {\n                [styles.selected]: selected,\n            })}\n            size={24}\n            hiddenInput={true}\n        />\n    ) : (\n        <CheckmarkMIcon\n            className={cn(styles.singleIcon, styles[position], styles[align], className, {\n                [styles.selected]: selected,\n            })}\n        />\n    );\n"],"names":[],"mappings":";;;;;;AAUO,MAAM,aAAa,GAAuB,CAAC,EAC9C,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,GAAG,QAAQ,EAChB,QAAQ,GAAG,QAAQ,GACtB,KACG,QAAQ,IACJ,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACL,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;AACxE,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,KAAA,CAAC,EACF,IAAI,EAAE,EAAE,EACR,WAAW,EAAE,IAAI,EACnB,CAAA,KAEF,KAAA,CAAA,aAAA,CAAC,cAAc,EACX,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;AACzE,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;KAC9B,CAAC,EAAA,CACJ;;;;"}

package/moderncssm/components/base-checkmark/index.module.css

@@ -3,32 +3,20 @@
     box-sizing: border-box;
 }
 
-.checkmark.start {
-        align-self: start;
+.checkmark.before {
+        margin-right: var(--gap-12);
     }
 
-.checkmark.center {
-        align-self: center;
+.checkmark.after {
+        margin-left: var(--gap-12);
     }
 
-.positionAfter {
-    margin-left: 0;
-    margin-left: initial;
-}
-
-.container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-}
-
-.container.start {
-        align-items: flex-start;
+.checkmark.start {
+        align-self: start;
     }
 
-.container.center {
-        align-items: center;
+.checkmark.center {
+        align-self: center;
     }
 
 .singleIcon {
@@ -47,7 +35,3 @@
 .singleIcon.selected {
         opacity: 1;
     }
-
-.content {
-    flex: 1;
-}

package/moderncssm/components/base-option/Component.js

@@ -8,6 +8,7 @@ const BaseOption = ({ className, option, children, selected, highlighted, disabl
     const { showCheckMark = true } = option;
     const isTextContent = !isValidElement(content);
     const showCheckmark = Checkmark && showCheckMark;
+    const renderCheckmark = (position) => showCheckmark && (React.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, align: align, position: position }));
     return (React.createElement("div", { ...innerProps, className: cn(styles.option, size && styles[`size-${size}`], className, {
             [styles.highlighted]: !mobile && highlighted,
             [styles.selected]: selected,
@@ -16,7 +17,10 @@ const BaseOption = ({ className, option, children, selected, highlighted, disabl
             [styles.mobile]: mobile,
             [styles.checkmarkAfter]: showCheckmark && !isTextContent && checkmarkPosition === 'after',
             [styles.checkmarkBefore]: showCheckmark && !isTextContent && checkmarkPosition === 'before',
-        }), "data-test-id": dataTestId, "aria-label": option?.value?.name }, showCheckmark ? (React.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, align: align, position: checkmarkPosition, content: content })) : (React.createElement("div", { className: cn(styles.content) }, content))));
+        }), "data-test-id": dataTestId, "aria-label": option?.value?.name },
+        checkmarkPosition === 'before' && renderCheckmark('before'),
+        React.createElement("div", { className: cn(styles.content) }, content),
+        checkmarkPosition === 'after' && renderCheckmark('after')));
 };
 
 export { BaseOption };

package/moderncssm/components/base-option/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/base-option/Component.tsx"],"sourcesContent":["import React, { type FC, isValidElement } from 'react';\nimport cn from 'classnames';\n\nimport { type OptionProps } from '../../typings';\nimport { BaseCheckmark } from '../base-checkmark';\n\nimport styles from './index.module.css';\n\nexport const BaseOption: FC<OptionProps> = ({\n    className,\n    option,\n    children,\n    selected,\n    highlighted,\n    disabled,\n    multiple,\n    Checkmark = BaseCheckmark,\n    checkmarkPosition = multiple ? 'before' : 'after',\n    align = 'center',\n    innerProps,\n    dataTestId,\n    mobile = false,\n    size,\n}) => {\n    const content = children || option.content || option.key;\n    const { showCheckMark = true } = option;\n    const isTextContent = !isValidElement(content);\n    const showCheckmark = Checkmark && showCheckMark;\n\n    return (\n        <div\n            {...innerProps}\n            className={cn(styles.option, size && styles[`size-${size}`], className, {\n                [styles.highlighted]: !mobile && highlighted,\n                [styles.selected]: selected,\n                [styles.disabled]: disabled,\n                [styles.textContent]: isTextContent,\n                [styles.mobile]: mobile,\n                [styles.checkmarkAfter]:\n                    showCheckmark && !isTextContent && checkmarkPosition === 'after',\n                [styles.checkmarkBefore]:\n                    showCheckmark && !isTextContent && checkmarkPosition === 'before',\n            })}\n            data-test-id={dataTestId}\n            aria-label={option?.value?.name}\n        >\n            {showCheckmark ? (\n                <Checkmark\n                    disabled={disabled}\n                    selected={selected}\n                    multiple={multiple}\n                    align={align}\n                    position={checkmarkPosition}\n                    content={content}\n                />\n            ) : (\n                <div className={cn(styles.content)}>{content}</div>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;MAQa,UAAU,GAAoB,CAAC,EACxC,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,GAAG,aAAa,EACzB,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,EACjD,KAAK,GAAG,QAAQ,EAChB,UAAU,EACV,UAAU,EACV,MAAM,GAAG,KAAK,EACd,IAAI,GACP,KAAI;IACD,MAAM,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,GAAG;AACxD,IAAA,MAAM,EAAE,aAAa,GAAG,IAAI,EAAE,GAAG,MAAM;AACvC,IAAA,MAAM,aAAa,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC;AAC9C,IAAA,MAAM,aAAa,GAAG,SAAS,IAAI,aAAa;IAEhD,QACI,gCACQ,UAAU,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,IAAI,MAAM,CAAC,CAAA,KAAA,EAAQ,IAAI,CAAE,CAAA,CAAC,EAAE,SAAS,EAAE;YACpE,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,MAAM,IAAI,WAAW;AAC5C,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,WAAW,GAAG,aAAa;AACnC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,cAAc,GAClB,aAAa,IAAI,CAAC,aAAa,IAAI,iBAAiB,KAAK,OAAO;AACpE,YAAA,CAAC,MAAM,CAAC,eAAe,GACnB,aAAa,IAAI,CAAC,aAAa,IAAI,iBAAiB,KAAK,QAAQ;AACxE,SAAA,CAAC,EACY,cAAA,EAAA,UAAU,EACZ,YAAA,EAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAE9B,EAAA,aAAa,IACV,KAAC,CAAA,aAAA,CAAA,SAAS,EACN,EAAA,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,OAAO,EAClB,CAAA,KAEF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAA,EAAG,OAAO,CAAO,CACtD,CACC;AAEd;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/base-option/Component.tsx"],"sourcesContent":["import React, { type FC, isValidElement } from 'react';\nimport cn from 'classnames';\n\nimport { type OptionProps } from '../../typings';\nimport { BaseCheckmark } from '../base-checkmark';\n\nimport styles from './index.module.css';\n\nexport const BaseOption: FC<OptionProps> = ({\n    className,\n    option,\n    children,\n    selected,\n    highlighted,\n    disabled,\n    multiple,\n    Checkmark = BaseCheckmark,\n    checkmarkPosition = multiple ? 'before' : 'after',\n    align = 'center',\n    innerProps,\n    dataTestId,\n    mobile = false,\n    size,\n}) => {\n    const content = children || option.content || option.key;\n    const { showCheckMark = true } = option;\n    const isTextContent = !isValidElement(content);\n    const showCheckmark = Checkmark && showCheckMark;\n\n    const renderCheckmark = (position: 'before' | 'after') =>\n        showCheckmark && (\n            <Checkmark\n                disabled={disabled}\n                selected={selected}\n                multiple={multiple}\n                align={align}\n                position={position}\n            />\n        );\n\n    return (\n        <div\n            {...innerProps}\n            className={cn(styles.option, size && styles[`size-${size}`], className, {\n                [styles.highlighted]: !mobile && highlighted,\n                [styles.selected]: selected,\n                [styles.disabled]: disabled,\n                [styles.textContent]: isTextContent,\n                [styles.mobile]: mobile,\n                [styles.checkmarkAfter]:\n                    showCheckmark && !isTextContent && checkmarkPosition === 'after',\n                [styles.checkmarkBefore]:\n                    showCheckmark && !isTextContent && checkmarkPosition === 'before',\n            })}\n            data-test-id={dataTestId}\n            aria-label={option?.value?.name}\n        >\n            {checkmarkPosition === 'before' && renderCheckmark('before')}\n\n            <div className={cn(styles.content)}>{content}</div>\n\n            {checkmarkPosition === 'after' && renderCheckmark('after')}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;MAQa,UAAU,GAAoB,CAAC,EACxC,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,GAAG,aAAa,EACzB,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,EACjD,KAAK,GAAG,QAAQ,EAChB,UAAU,EACV,UAAU,EACV,MAAM,GAAG,KAAK,EACd,IAAI,GACP,KAAI;IACD,MAAM,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,GAAG;AACxD,IAAA,MAAM,EAAE,aAAa,GAAG,IAAI,EAAE,GAAG,MAAM;AACvC,IAAA,MAAM,aAAa,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC;AAC9C,IAAA,MAAM,aAAa,GAAG,SAAS,IAAI,aAAa;AAEhD,IAAA,MAAM,eAAe,GAAG,CAAC,QAA4B,KACjD,aAAa,KACT,KAAC,CAAA,aAAA,CAAA,SAAS,EACN,EAAA,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAAA,CACpB,CACL;IAEL,QACI,gCACQ,UAAU,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,IAAI,MAAM,CAAC,CAAA,KAAA,EAAQ,IAAI,CAAE,CAAA,CAAC,EAAE,SAAS,EAAE;YACpE,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,MAAM,IAAI,WAAW;AAC5C,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,WAAW,GAAG,aAAa;AACnC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,cAAc,GAClB,aAAa,IAAI,CAAC,aAAa,IAAI,iBAAiB,KAAK,OAAO;AACpE,YAAA,CAAC,MAAM,CAAC,eAAe,GACnB,aAAa,IAAI,CAAC,aAAa,IAAI,iBAAiB,KAAK,QAAQ;AACxE,SAAA,CAAC,kBACY,UAAU,EAAA,YAAA,EACZ,MAAM,EAAE,KAAK,EAAE,IAAI,EAAA;AAE9B,QAAA,iBAAiB,KAAK,QAAQ,IAAI,eAAe,CAAC,QAAQ,CAAC;QAE5D,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAG,EAAA,OAAO,CAAO;QAElD,iBAAiB,KAAK,OAAO,IAAI,eAAe,CAAC,OAAO,CAAC,CACxD;AAEd;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-select",
-    "version": "19.1.7",
+    "version": "19.1.8",
     "description": "Select component",
     "keywords": [],
     "license": "MIT",
@@ -14,15 +14,15 @@
     },
     "dependencies": {
         "@alfalab/core-components-base-modal": "^7.1.5",
-        "@alfalab/core-components-bottom-sheet": "^8.1.7",
+        "@alfalab/core-components-bottom-sheet": "^8.1.8",
         "@alfalab/core-components-button": "^13.1.3",
         "@alfalab/core-components-checkbox": "^6.2.1",
         "@alfalab/core-components-form-control": "^14.0.6",
         "@alfalab/core-components-input": "^17.1.6",
-        "@alfalab/core-components-modal": "^11.0.10",
+        "@alfalab/core-components-modal": "^11.0.11",
         "@alfalab/core-components-mq": "^6.0.4",
         "@alfalab/core-components-popover": "^8.0.4",
-        "@alfalab/core-components-scrollbar": "^5.0.2",
+        "@alfalab/core-components-scrollbar": "^5.0.3",
         "@alfalab/core-components-shared": "^2.2.0",
         "@alfalab/core-components-skeleton": "^7.0.3",
         "@alfalab/hooks": "^1.13.1",
@@ -46,5 +46,5 @@
         "directory": "dist"
     },
     "themesVersion": "15.1.0",
-    "varsVersion": "11.0.2"
+    "varsVersion": "11.1.0"
 }

package/presets/useSelectWithApply/options-list-with-apply/footer/index.css

@@ -12,14 +12,14 @@
 :root {
     --select-option-list-footer-button-gap: var(--gap-8);
 }
-.select__footer_1sfv8 {
+.select__footer_12x24 {
     background-color: var(--color-light-base-bg-primary);
     padding: var(--gap-12);
     outline: none;
 }
-.select__footer_1sfv8.select__size-72_1sfv8 {
+.select__footer_12x24.select__size-72_12x24 {
         padding: var(--gap-12) var(--gap-16);
     }
-.select__footer_1sfv8 > .select__button_1sfv8 + .select__button_1sfv8 {
+.select__footer_12x24 > .select__button_12x24 + .select__button_12x24 {
         margin-left: var(--select-option-list-footer-button-gap);
     }

package/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"footer":"select__footer_1sfv8","size-72":"select__size-72_1sfv8","button":"select__button_1sfv8"};
+var styles = {"footer":"select__footer_12x24","size-72":"select__size-72_12x24","button":"select__button_12x24"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/presets/useSelectWithApply/options-list-with-apply/header/index.css

@@ -6,16 +6,16 @@
     --gap-12: var(--gap-s);
     --gap-16: var(--gap-m);
 }
-.select__desktop_xi3y4 {
+.select__desktop_kklzv {
     padding: var(--gap-12);
 }
-.select__desktop_xi3y4.select__size-72_xi3y4 {
+.select__desktop_kklzv.select__size-72_kklzv {
         padding-left: var(--gap-16);
     }
-.select__mobile_xi3y4 {
+.select__mobile_kklzv {
     padding: var(--gap-12) var(--gap-12) var(--gap-12) var(--gap-8);
 }
-.select__positionAfter_xi3y4 {
+.select__positionAfter_kklzv {
     margin-left: 0;
     margin-left: initial;
 }

package/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"desktop":"select__desktop_xi3y4","size-72":"select__size-72_xi3y4","mobile":"select__mobile_xi3y4","positionAfter":"select__positionAfter_xi3y4"};
+var styles = {"desktop":"select__desktop_kklzv","size-72":"select__size-72_kklzv","mobile":"select__mobile_kklzv","positionAfter":"select__positionAfter_kklzv"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/presets/useSelectWithLoading/index.css

@@ -1,4 +1,4 @@
-.select__skeleton_sbv5r {
+.select__skeleton_1jflm {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/presets/useSelectWithLoading/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"skeleton":"select__skeleton_sbv5r"};
+var styles = {"skeleton":"select__skeleton_1jflm"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/src/components/base-checkmark/Component.tsx

@@ -15,37 +15,21 @@ export const BaseCheckmark: FC<CheckmarkProps> = ({
     multiple,
     align = 'center',
     position = 'before',
-    content,
-}) => {
-    const renderCheckmarkIcon = () => (
-        <CheckmarkMIcon
-            className={cn(styles.singleIcon, styles[position], {
-                [styles.selected]: selected,
-            })}
-        />
-    );
-
-    return multiple ? (
+}) =>
+    multiple ? (
         <Checkbox
-            block={true}
             checked={selected}
             disabled={disabled}
-            contentClassName={cn({ [styles.positionAfter]: position === 'after' })}
-            className={cn(styles.checkmark, styles[align], className, {
+            className={cn(styles.checkmark, styles[position], styles[align], className, {
                 [styles.selected]: selected,
             })}
             size={24}
-            position={position}
-            label={content}
             hiddenInput={true}
         />
     ) : (
-        <div className={cn(styles.container, styles[align], className)}>
-            {position === 'before' && renderCheckmarkIcon()}
-
-            <div className={styles.content}>{content}</div>
-
-            {position === 'after' && renderCheckmarkIcon()}
-        </div>
+        <CheckmarkMIcon
+            className={cn(styles.singleIcon, styles[position], styles[align], className, {
+                [styles.selected]: selected,
+            })}
+        />
     );
-};

package/src/components/base-checkmark/index.module.css

@@ -5,31 +5,20 @@
     flex-shrink: 0;
     box-sizing: border-box;
 
-    &.start {
-        align-self: start;
+    &.before {
+        margin-right: var(--gap-12);
     }
 
-    &.center {
-        align-self: center;
+    &.after {
+        margin-left: var(--gap-12);
     }
-}
-
-.positionAfter {
-    margin-left: unset;
-}
-
-.container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
 
     &.start {
-        align-items: flex-start;
+        align-self: start;
     }
 
     &.center {
-        align-items: center;
+        align-self: center;
     }
 }
 
@@ -49,7 +38,3 @@
         opacity: 1;
     }
 }
-
-.content {
-    flex: 1;
-}

package/src/components/base-option/Component.tsx

@@ -27,6 +27,17 @@ export const BaseOption: FC<OptionProps> = ({
     const isTextContent = !isValidElement(content);
     const showCheckmark = Checkmark && showCheckMark;
 
+    const renderCheckmark = (position: 'before' | 'after') =>
+        showCheckmark && (
+            <Checkmark
+                disabled={disabled}
+                selected={selected}
+                multiple={multiple}
+                align={align}
+                position={position}
+            />
+        );
+
     return (
         <div
             {...innerProps}
@@ -44,18 +55,11 @@ export const BaseOption: FC<OptionProps> = ({
             data-test-id={dataTestId}
             aria-label={option?.value?.name}
         >
-            {showCheckmark ? (
-                <Checkmark
-                    disabled={disabled}
-                    selected={selected}
-                    multiple={multiple}
-                    align={align}
-                    position={checkmarkPosition}
-                    content={content}
-                />
-            ) : (
-                <div className={cn(styles.content)}>{content}</div>
-            )}
+            {checkmarkPosition === 'before' && renderCheckmark('before')}
+
+            <div className={cn(styles.content)}>{content}</div>
+
+            {checkmarkPosition === 'after' && renderCheckmark('after')}
         </div>
     );
 };