@cloud-ru/uikit-product-mobile-chips 0.8.36 → 0.8.37

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.8.37 (2025-11-12)
+
+
+### Bug Fixes
+
+* **PD-3377:** contributors update to publish all packages ([719fd3e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/719fd3e1249e247443b125c47ea408d92c8395c3))
+
+
+
+
+
 ## 0.8.36 (2025-11-12)
 
 ### Only dependencies have been changed

package/dist/cjs/components/AdaptiveChips/AdaptiveChips.d.ts

@@ -0,0 +1,6 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { ChipChoice, ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
+export type AdaptiveChipChoiceRow<T extends FiltersState> = WithLayoutType<ChipChoiceRowProps<T>>;
+export declare function AdaptiveChipChoiceRow<T extends FiltersState>({ layoutType, ...props }: AdaptiveChipChoiceRow<T>): import("react/jsx-runtime").JSX.Element;
+export declare function useAdaptiveChipChoice({ layoutType }: WithLayoutType): typeof ChipChoice;
+export type { ChipChoiceRowProps };

package/dist/cjs/components/AdaptiveChips/AdaptiveChips.js

@@ -0,0 +1,28 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptiveChipChoiceRow = AdaptiveChipChoiceRow;
+exports.useAdaptiveChipChoice = useAdaptiveChipChoice;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const chips_1 = require("@snack-uikit/chips");
+const MobileChipChoice_1 = require("../MobileChipChoice");
+const MobileChipChoiceRow_1 = require("../MobileChipChoiceRow");
+function AdaptiveChipChoiceRow(_a) {
+    var { layoutType } = _a, props = __rest(_a, ["layoutType"]);
+    const isMobile = layoutType === 'mobile';
+    return isMobile ? (0, jsx_runtime_1.jsx)(MobileChipChoiceRow_1.MobileChipChoiceRow, Object.assign({}, props)) : (0, jsx_runtime_1.jsx)(chips_1.ChipChoiceRow, Object.assign({}, props));
+}
+function useAdaptiveChipChoice({ layoutType }) {
+    const isMobile = layoutType === 'mobile';
+    return isMobile ? MobileChipChoice_1.MobileChipChoice : chips_1.ChipChoice;
+}

package/dist/cjs/components/AdaptiveChips/index.d.ts

@@ -0,0 +1 @@
+export * from './AdaptiveChips';

package/dist/cjs/components/AdaptiveChips/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AdaptiveChips"), exports);

package/dist/cjs/components/MobileChipChoice/components/ChipChoiceBase/ChipChoiceBase.d.ts

@@ -0,0 +1,20 @@
+import { KeyboardEvent, MouseEventHandler, ReactNode } from 'react';
+import { ChipChoiceCommonProps } from '../../types';
+export type ChipChoiceBaseProps = Pick<ChipChoiceCommonProps, 'loading' | 'tabIndex' | 'disabled' | 'icon' | 'label' | 'size' | 'onClick' | 'className' | 'truncateVariant'> & {
+    /** Отображаемое значение */
+    valueToRender?: ReactNode;
+    /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
+    value?: any;
+    /** Колбек для клика по кнопке очистки */
+    onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?(e: KeyboardEvent<HTMLDivElement>): void;
+};
+export declare const ChipChoiceBase: import("react").ForwardRefExoticComponent<Pick<ChipChoiceCommonProps, "disabled" | "className" | "onClick" | "label" | "loading" | "tabIndex" | "size" | "icon" | "truncateVariant"> & {
+    /** Отображаемое значение */
+    valueToRender?: ReactNode;
+    /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
+    value?: any;
+    /** Колбек для клика по кнопке очистки */
+    onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?(e: KeyboardEvent<HTMLDivElement>): void;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/MobileChipChoice/components/ChipChoiceBase/ChipChoiceBase.js

@@ -0,0 +1,72 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChipChoiceBase = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const loaders_1 = require("@snack-uikit/loaders");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../../../constants");
+const helperComponents_1 = require("../../../../helperComponents");
+const constants_2 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.ChipChoiceBase = (0, react_1.forwardRef)((_a, ref) => {
+    var { size = constants_1.SIZE.S, disabled, loading, icon, label, valueToRender, value, onClick, className, tabIndex = 0, onClearButtonClick, onKeyDown, truncateVariant = 'middle' } = _a, rest = __rest(_a, ["size", "disabled", "loading", "icon", "label", "valueToRender", "value", "onClick", "className", "tabIndex", "onClearButtonClick", "onKeyDown", "truncateVariant"]);
+    const variant = icon && size !== constants_1.SIZE.Xs ? constants_1.VARIANT.IconBefore : constants_1.VARIANT.LabelOnly;
+    const spinnerSize = size === constants_1.SIZE.Xs ? 'xs' : 's';
+    const localRef = (0, react_1.useRef)(null);
+    const clearButtonRef = (0, react_1.useRef)(null);
+    const showClearButton = Boolean(onClearButtonClick);
+    const [isDroplistOpened, setIsDroplistOpened] = (0, react_1.useState)(false);
+    const handleChipClick = e => {
+        if (loading || disabled)
+            return;
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        !isDroplistOpened && setIsDroplistOpened(true);
+    };
+    const handleChipKeyDown = e => {
+        var _a;
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+        if (e.key === 'ArrowRight') {
+            (_a = clearButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
+    const handleClearButtonClick = e => {
+        onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick(e);
+    };
+    const handleClearButtonKeyDown = e => {
+        var _a;
+        switch (e.key) {
+            case 'ArrowLeft': {
+                (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                return;
+            }
+            case 'Enter':
+            case ' ': {
+                e.stopPropagation();
+                return;
+            }
+            default:
+                break;
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, (0, utils_1.extractSupportProps)(rest), { role: 'button', ref: (0, merge_refs_1.default)(localRef, ref), className: (0, classnames_1.default)(styles_module_scss_1.default.choiceChip, className), "data-size": size, "data-variant": variant, "data-loading": loading || undefined, "data-disabled": (!loading && disabled) || undefined, onClick: handleChipClick, onKeyDown: handleChipKeyDown, tabIndex: tabIndex, children: [variant === constants_1.VARIANT.IconBefore && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.icon, "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.icon, children: icon })), (0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.labelLayout, children: [label && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.label, "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.label, children: label + ': ' })), loading ? ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.spinner, "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.spinner, children: (0, jsx_runtime_1.jsx)(loaders_1.Sun, { size: spinnerSize }) })) : ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.value, "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.value, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: valueToRender !== null && valueToRender !== void 0 ? valueToRender : value, variant: truncateVariant }) }))] }), !disabled && !loading && showClearButton && ((0, jsx_runtime_1.jsx)(helperComponents_1.ButtonClearValue, { size: constants_2.BUTTON_CLEAR_VALUE_SIZE_MAP[size], onClick: handleClearButtonClick, "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.clearButton, onKeyDown: handleClearButtonKeyDown, ref: clearButtonRef }))] })));
+});

package/dist/cjs/components/MobileChipChoice/components/ChipChoiceBase/index.d.ts

@@ -0,0 +1 @@
+export * from './ChipChoiceBase';

package/dist/cjs/components/MobileChipChoice/components/ChipChoiceBase/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChipChoiceBase"), exports);

package/dist/cjs/components/MobileChipChoice/components/ChipChoiceBase/styles.module.css

@@ -0,0 +1,427 @@
+.label,
+.value{
+  display:inline-flex;
+  align-items:center;
+}
+
+.choiceChip{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:-moz-max-content;
+  min-width:max-content;
+  margin:0;
+  padding:0;
+  text-decoration:none;
+  text-transform:none;
+  border-style:solid;
+  outline:0;
+  outline-offset:0;
+}
+.choiceChip .spinner{
+  display:inline-flex;
+}
+.choiceChip .icon{
+  display:inline-flex;
+}
+.choiceChip .icon svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.choiceChip .labelLayout{
+  display:inline-flex;
+  align-items:center;
+  min-width:0;
+}
+.choiceChip[data-size=xs]{
+  height:var(--size-chips-xs, 24px);
+  padding-left:var(--space-chips-container-padding-xs, 3px);
+  padding-right:var(--space-chips-container-padding-xs, 3px);
+  border-radius:var(--radius-chips-xs, 12px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=xs] .label{
+  font-family:var(--light-label-s-font-family, SB Sans Interface);
+  font-weight:var(--light-label-s-font-weight, Regular);
+  line-height:var(--light-label-s-line-height, 14px);
+  font-size:var(--light-label-s-font-size, 11px);
+  letter-spacing:var(--light-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-s-paragraph-spacing, 6.05px);
+}
+.choiceChip[data-size=xs] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-xs, 4px);
+  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=s]{
+  height:var(--size-chips-s, 32px);
+  padding-left:var(--space-chips-container-padding-s, 3px);
+  padding-right:var(--space-chips-container-padding-s, 3px);
+  border-radius:var(--radius-chips-s, 16px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=s] .label{
+  font-family:var(--light-label-m-font-family, SB Sans Interface);
+  font-weight:var(--light-label-m-font-weight, Regular);
+  line-height:var(--light-label-m-line-height, 16px);
+  font-size:var(--light-label-m-font-size, 12px);
+  letter-spacing:var(--light-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=s] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-s, 4px);
+  padding-right:var(--space-chips-label-layout-padding-s, 4px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=m]{
+  height:var(--size-chips-m, 40px);
+  padding-left:var(--space-chips-container-padding-m, 7px);
+  padding-right:var(--space-chips-container-padding-m, 7px);
+  border-radius:var(--radius-chips-m, 20px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=m] .label{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=m] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-m, 8px);
+  padding-right:var(--space-chips-label-layout-padding-m, 8px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=l]{
+  height:var(--size-chips-l, 48px);
+  padding-left:var(--space-chips-container-padding-l, 11px);
+  padding-right:var(--space-chips-container-padding-l, 11px);
+  border-radius:var(--radius-chips-l, 24px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=l] .label{
+  font-family:var(--light-label-l-font-family, SB Sans Interface);
+  font-weight:var(--light-label-l-font-weight, Regular);
+  line-height:var(--light-label-l-line-height, 20px);
+  font-size:var(--light-label-l-font-size, 14px);
+  letter-spacing:var(--light-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=l] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-l, 12px);
+  padding-right:var(--space-chips-label-layout-padding-l, 12px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip .label,
+.choiceChip .value{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.choiceChip .icon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.choiceChip[data-size=xs] .value{
+  font-family:var(--sans-label-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-s-font-weight, Semibold);
+  line-height:var(--sans-label-s-line-height, 14px);
+  font-size:var(--sans-label-s-font-size, 11px);
+  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+}
+.choiceChip[data-size=s] .value{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=m] .value{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=l] .value{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.choiceChip:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-color:var(--sys-available-complementary, #1c1c24);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.choiceChip[data-disabled]{
+  cursor:not-allowed;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+}
+.choiceChip[data-disabled] .label,
+.choiceChip[data-disabled] .value{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.choiceChip[data-loading]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #b6bac7);
+  cursor:progress;
+}
+.choiceChip[data-loading] true .spinner{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.choiceChip[data-loading] .label,
+.choiceChip[data-loading] .value{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.triggerClassName{
+  --offset:var(--space-drop-list-drop-offset, 4px);
+}
+
+.autoApplyFooter{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:8px;
+}
+
+.label{
+  display:inline-flex;
+  flex-grow:1;
+  align-items:center;
+  white-space:nowrap;
+}
+
+.value{
+  display:inline-flex;
+  align-items:center;
+  min-width:0;
+}
+
+.choiceChip{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:-moz-max-content;
+  min-width:max-content;
+  margin:0;
+  padding:0;
+  text-decoration:none;
+  text-transform:none;
+  border-style:solid;
+  outline:0;
+  outline-offset:0;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  min-width:0;
+}
+.choiceChip .spinner{
+  display:inline-flex;
+}
+.choiceChip .icon{
+  display:inline-flex;
+}
+.choiceChip .icon svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.choiceChip .labelLayout{
+  display:inline-flex;
+  align-items:center;
+  min-width:0;
+}
+.choiceChip[data-size=xs]{
+  height:var(--size-chips-xs, 24px);
+  padding-left:var(--space-chips-container-padding-xs, 3px);
+  padding-right:var(--space-chips-container-padding-xs, 3px);
+  border-radius:var(--radius-chips-xs, 12px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=xs] .label{
+  font-family:var(--light-label-s-font-family, SB Sans Interface);
+  font-weight:var(--light-label-s-font-weight, Regular);
+  line-height:var(--light-label-s-line-height, 14px);
+  font-size:var(--light-label-s-font-size, 11px);
+  letter-spacing:var(--light-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-s-paragraph-spacing, 6.05px);
+}
+.choiceChip[data-size=xs] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-xs, 4px);
+  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=s]{
+  height:var(--size-chips-s, 32px);
+  padding-left:var(--space-chips-container-padding-s, 3px);
+  padding-right:var(--space-chips-container-padding-s, 3px);
+  border-radius:var(--radius-chips-s, 16px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=s] .label{
+  font-family:var(--light-label-m-font-family, SB Sans Interface);
+  font-weight:var(--light-label-m-font-weight, Regular);
+  line-height:var(--light-label-m-line-height, 16px);
+  font-size:var(--light-label-m-font-size, 12px);
+  letter-spacing:var(--light-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=s] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-s, 4px);
+  padding-right:var(--space-chips-label-layout-padding-s, 4px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=m]{
+  height:var(--size-chips-m, 40px);
+  padding-left:var(--space-chips-container-padding-m, 7px);
+  padding-right:var(--space-chips-container-padding-m, 7px);
+  border-radius:var(--radius-chips-m, 20px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=m] .label{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=m] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-m, 8px);
+  padding-right:var(--space-chips-label-layout-padding-m, 8px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=l]{
+  height:var(--size-chips-l, 48px);
+  padding-left:var(--space-chips-container-padding-l, 11px);
+  padding-right:var(--space-chips-container-padding-l, 11px);
+  border-radius:var(--radius-chips-l, 24px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=l] .label{
+  font-family:var(--light-label-l-font-family, SB Sans Interface);
+  font-weight:var(--light-label-l-font-weight, Regular);
+  line-height:var(--light-label-l-line-height, 20px);
+  font-size:var(--light-label-l-font-size, 14px);
+  letter-spacing:var(--light-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=l] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-l, 12px);
+  padding-right:var(--space-chips-label-layout-padding-l, 12px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip .label,
+.choiceChip .value{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.choiceChip .icon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.choiceChip[data-size=xs] .value{
+  font-family:var(--sans-label-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-s-font-weight, Semibold);
+  line-height:var(--sans-label-s-line-height, 14px);
+  font-size:var(--sans-label-s-font-size, 11px);
+  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+}
+.choiceChip[data-size=s] .value{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=m] .value{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=l] .value{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.choiceChip:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-color:var(--sys-available-complementary, #1c1c24);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.choiceChip[data-disabled]{
+  cursor:not-allowed;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+}
+.choiceChip[data-disabled] .label,
+.choiceChip[data-disabled] .value{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.choiceChip[data-loading]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #b6bac7);
+  cursor:progress;
+}
+.choiceChip[data-loading]:not([data-label]) .value{
+  opacity:var(--opacity-a0, 0);
+}
+.choiceChip[data-loading]:not([data-label]) .spinner{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.choiceChip[data-loading] .label,
+.choiceChip[data-loading] .value{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.triggerClassName{
+  --offset:var(--space-drop-list-drop-offset, 4px);
+}

package/dist/cjs/components/MobileChipChoice/components/MobileChipChoiceCustom.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { ChipChoiceCommonProps } from '../types';
+type AnyType = any;
+export type CustomContentRenderProps<T = AnyType> = {
+    closeDroplist(): void;
+    value: T;
+    onChange?(value: T): void;
+};
+export type MobileChipChoiceCustomProps = ChipChoiceCommonProps & {
+    /** Отображаемое значение */
+    valueRender?(value: AnyType): ReactNode;
+    /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
+    value?: AnyType;
+    onChange?(value: AnyType): void;
+    /** Контент выпадающего меню
+     <br>
+     <br> Принимает <strong>ReactNode</strong>
+     <br> Или функцию с аргументами:
+     <br> <strong>handleDroplistItemKeyDown</strong>: Обработчик нажатия клавиши на элемент выпадающего меню
+     <br> <strong>closeDroplist</strong>: Метод для закрытия выпадающего меню
+     */
+    content?: (props: CustomContentRenderProps) => ReactNode;
+};
+export declare function MobileChipChoiceCustom({ size, value: valueProp, onChange: onChangeProp, content, valueRender, onClearButtonClick, open: openProp, onOpenChange, ...rest }: MobileChipChoiceCustomProps): import("react/jsx-runtime").JSX.Element;
+export {};