@alfalab/core-components 46.0.0-beta.7 → 46.1.0-beta.0

package/pure-cell/modern/components/amount-title/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-be845c4f";

package/pure-cell/modern/components/amount-title/index.js

@@ -1,4 +1,4 @@
-export { b as AmountTitle } from '../../component-fe791444.js';
+export { b as AmountTitle } from '../../component-be845c4f.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/category/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { C as Category } from '../../component-fe791444.js';
+export { C as Category } from '../../component-be845c4f.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../comment/modern';

package/pure-cell/modern/components/category/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-be845c4f";

package/pure-cell/modern/components/category/index.js

@@ -1,4 +1,4 @@
-export { C as Category } from '../../component-fe791444.js';
+export { C as Category } from '../../component-be845c4f.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/content/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { c as Content } from '../../component-fe791444.js';
+export { c as Content } from '../../component-be845c4f.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/content/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-be845c4f";

package/pure-cell/modern/components/content/index.js

@@ -1,4 +1,4 @@
-export { c as Content } from '../../component-fe791444.js';
+export { c as Content } from '../../component-be845c4f.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/footer/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { F as Footer } from '../../component-fe791444.js';
+export { F as Footer } from '../../component-be845c4f.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/footer/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-be845c4f";

package/pure-cell/modern/components/footer/index.js

@@ -1,4 +1,4 @@
-export { F as Footer } from '../../component-fe791444.js';
+export { F as Footer } from '../../component-be845c4f.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/footer-button/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../button/modern';
 import '../../../../shared/modern';
-export { d as FooterButton } from '../../component-fe791444.js';
+export { d as FooterButton } from '../../component-be845c4f.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../comment/modern';

package/pure-cell/modern/components/footer-button/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-be845c4f";

package/pure-cell/modern/components/footer-button/index.js

@@ -1,4 +1,4 @@
-export { d as FooterButton } from '../../component-fe791444.js';
+export { d as FooterButton } from '../../component-be845c4f.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/footer-text/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { e as FooterText } from '../../component-fe791444.js';
+export { e as FooterText } from '../../component-be845c4f.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../comment/modern';

package/pure-cell/modern/components/footer-text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-be845c4f";

package/pure-cell/modern/components/footer-text/index.js

@@ -1,4 +1,4 @@
-export { e as FooterText } from '../../component-fe791444.js';
+export { e as FooterText } from '../../component-be845c4f.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/graphics/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { G as Graphics } from '../../component-fe791444.js';
+export { G as Graphics } from '../../component-be845c4f.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/graphics/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-be845c4f";

package/pure-cell/modern/components/graphics/index.js

@@ -1,4 +1,4 @@
-export { G as Graphics } from '../../component-fe791444.js';
+export { G as Graphics } from '../../component-be845c4f.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/main/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { M as Main } from '../../component-fe791444.js';
+export { M as Main } from '../../component-be845c4f.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/main/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-be845c4f";

package/pure-cell/modern/components/main/index.js

@@ -1,4 +1,4 @@
-export { M as Main } from '../../component-fe791444.js';
+export { M as Main } from '../../component-be845c4f.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/text/component.js

@@ -2,7 +2,7 @@ import 'react';
 import 'classnames';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { T as Text } from '../../component-fe791444.js';
+export { T as Text } from '../../component-be845c4f.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fe791444";
+export * from "../../component-be845c4f";

package/pure-cell/modern/components/text/index.js

@@ -1,4 +1,4 @@
-export { T as Text } from '../../component-fe791444.js';
+export { T as Text } from '../../component-be845c4f.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/index.d.ts

@@ -1,2 +1,2 @@
-export { PureCell } from "./component-6a954af1";
-export type { PureCellProps } from "./component-6a954af1";
+export { PureCell } from "./component-06012092";
+export type { PureCellProps } from "./component-06012092";

package/pure-cell/modern/index.js

@@ -1,4 +1,4 @@
-export { P as PureCell } from './component-fe791444.js';
+export { P as PureCell } from './component-be845c4f.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/radio/cssm/index.module.css

@@ -7,7 +7,7 @@
     --color-light-neutral-0: #fff;
     --color-light-neutral-0-hover: #e7e8eb;
     --color-light-neutral-0-press: #dcdde1;
-    --color-light-neutral-1500-inverted: #fff;
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
@@ -65,7 +65,7 @@
     --radio-checked-disabled-border-color: transparent;
 
     /* icon */
-    --radio-icon-color: var(--color-light-neutral-1500-inverted);
+    --radio-icon-color: var(--color-light-neutral-translucent-1300-inverted);
     --radio-icon-disabled-color: var(--color-light-neutral-translucent-500);
 } .container {
     display: inline-flex;

package/radio/esm/index.css

@@ -8,7 +8,7 @@
     --color-light-neutral-0: #fff;
     --color-light-neutral-0-hover: #e7e8eb;
     --color-light-neutral-0-press: #dcdde1;
-    --color-light-neutral-1500-inverted: #fff;
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
@@ -66,7 +66,7 @@
     --radio-checked-disabled-border-color: transparent;
 
     /* icon */
-    --radio-icon-color: var(--color-light-neutral-1500-inverted);
+    --radio-icon-color: var(--color-light-neutral-translucent-1300-inverted);
     --radio-icon-disabled-color: var(--color-light-neutral-translucent-500);
 } .radio__container_i0e8s {
     display: inline-flex;

package/radio/index.css

@@ -8,7 +8,7 @@
     --color-light-neutral-0: #fff;
     --color-light-neutral-0-hover: #e7e8eb;
     --color-light-neutral-0-press: #dcdde1;
-    --color-light-neutral-1500-inverted: #fff;
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
@@ -66,7 +66,7 @@
     --radio-checked-disabled-border-color: transparent;
 
     /* icon */
-    --radio-icon-color: var(--color-light-neutral-1500-inverted);
+    --radio-icon-color: var(--color-light-neutral-translucent-1300-inverted);
     --radio-icon-disabled-color: var(--color-light-neutral-translucent-500);
 } .radio__container_i0e8s {
     display: inline-flex;

package/radio/modern/index.css

@@ -8,7 +8,7 @@
     --color-light-neutral-0: #fff;
     --color-light-neutral-0-hover: #e7e8eb;
     --color-light-neutral-0-press: #dcdde1;
-    --color-light-neutral-1500-inverted: #fff;
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
@@ -66,7 +66,7 @@
     --radio-checked-disabled-border-color: transparent;
 
     /* icon */
-    --radio-icon-color: var(--color-light-neutral-1500-inverted);
+    --radio-icon-color: var(--color-light-neutral-translucent-1300-inverted);
     --radio-icon-disabled-color: var(--color-light-neutral-translucent-500);
 } .radio__container_i0e8s {
     display: inline-flex;

package/radio-group/Component.responsive.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../mq');
-var coreComponentsShared = require('../shared');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -12,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var RadioGroup = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
     var Component = isDesktop ? desktop_Component_desktop.RadioGroupDesktop : mobile_Component_mobile.RadioGroupMobile;

package/radio-group/cssm/Component.responsive.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../mq/cssm');
-var coreComponentsShared = require('../../shared/cssm');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -12,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var RadioGroup = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
     var Component = isDesktop ? desktop_Component_desktop.RadioGroupDesktop : mobile_Component_mobile.RadioGroupMobile;

package/radio-group/esm/Component.responsive.js

@@ -1,7 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/esm';
-import { getComponentBreakpoint } from '../../shared/esm';
 import { RadioGroupDesktop } from './desktop/Component.desktop.js';
 import { RadioGroupMobile } from './mobile/Component.mobile.js';
 import './components/base-radio-group/Component.js';
@@ -9,7 +8,7 @@ import 'classnames';
 import '@alfalab/hooks';
 
 var RadioGroup = forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = useMatchMedia(query)[0];
     var Component = isDesktop ? RadioGroupDesktop : RadioGroupMobile;

package/radio-group/esm/index.js

@@ -2,7 +2,6 @@ export { RadioGroup } from './Component.responsive.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
-import '../../shared/esm';
 import './desktop/Component.desktop.js';
 import './components/base-radio-group/Component.js';
 import 'classnames';

package/radio-group/modern/Component.responsive.js

@@ -1,13 +1,12 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
-import { getComponentBreakpoint } from '../../shared/modern';
 import { RadioGroupDesktop } from './desktop/Component.desktop.js';
 import { RadioGroupMobile } from './mobile/Component.mobile.js';
 import './components/base-radio-group/Component.js';
 import 'classnames';
 import '@alfalab/hooks';
 
-const RadioGroup = forwardRef(({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
+const RadioGroup = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
     const query = `(min-width: ${breakpoint}px)`;
     const [isDesktop] = useMatchMedia(query);
     const Component = isDesktop ? RadioGroupDesktop : RadioGroupMobile;

package/radio-group/modern/index.js

@@ -1,7 +1,6 @@
 export { RadioGroup } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
-import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import './components/base-radio-group/Component.js';
 import 'classnames';

package/select/Component.responsive.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../mq');
-var coreComponentsShared = require('../shared');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 require('./mobile/Component.modal.mobile.js');
@@ -13,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SelectResponsive = React.forwardRef(function (_a, ref) {
-    var onScroll = _a.onScroll, fieldProps = _a.fieldProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["onScroll", "fieldProps", "breakpoint", "defaultMatchMediaValue"]);
+    var onScroll = _a.onScroll, fieldProps = _a.fieldProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["onScroll", "fieldProps", "breakpoint", "defaultMatchMediaValue"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     if (isDesktop) {
         return (React__default.default.createElement(desktop_Component_desktop.SelectDesktop, tslib.__assign({ onScroll: onScroll }, restProps, { ref: ref, fieldProps: fieldProps })));

package/select/components/base-select/Component.js

@@ -363,7 +363,7 @@ function (_a, ref) {
         return (React__default.default.createElement("div", tslib.__assign({}, menuProps, { ref: view === 'desktop' ? menuRef : undefined, className: cn__default.default(optionsListClassName, view === 'mobile' && mobileStyles.optionsListWrapper, view === 'desktop' && styles.optionsListWrapper) }),
             React__default.default.createElement(OptionsList, tslib.__assign({}, listProps, { ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn__default.default((_a = {}, _a[mobileStyles.optionsList] = view === 'mobile', _a)), scrollbarClassName: cn__default.default((_b = {}, _b[mobileStyles.scrollbar] = view === 'mobile', _b)), optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: view === 'desktop' ? visibleOptions : 0, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn__default.default(optionGroupClassName, (_c = {},
                     _c[mobileStyles.optionGroup] = view === 'mobile',
-                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll })),
+                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search })),
             view === 'desktop' && React__default.default.createElement("div", { className: styles.optionsListBorder })));
     };
     var renderInPopover = function () {

package/select/components/checkmark/index.css

@@ -1,7 +1,7 @@
 /* hash: lgfms */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
-    --color-light-neutral-1500: #121213;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-status-positive: #0cc44d; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -35,7 +35,7 @@
     --select-checkmark-before-display-multiple: block;
     --select-checkmark-after-display-single: none;
     --select-checkmark-unselected-opacity: 0;
-    --select-checkmark-background: var(--color-light-neutral-1500);
+    --select-checkmark-background: var(--color-light-neutral-translucent-1300);
     --select-checkmark-border-radius: var(--border-radius-circle);
 
     /* optgroup */

package/select/components/options-list/Component.js

@@ -27,7 +27,7 @@ var createCounter = function () {
 };
 var OptionsList = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.Optgroup, Optgroup = _f === void 0 ? components_optgroup_Component.Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _g, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _h = _a.showFooter, showFooter = _h === void 0 ? true : _h, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _j = _a.flatOptions, flatOptions = _j === void 0 ? [] : _j, setHighlightedIndex = _a.setHighlightedIndex;
+    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.Optgroup, Optgroup = _f === void 0 ? components_optgroup_Component.Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _g, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _h = _a.showFooter, showFooter = _h === void 0 ? true : _h, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _j = _a.flatOptions, flatOptions = _j === void 0 ? [] : _j, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, search = _a.search, setSelectedItems = _a.setSelectedItems;
     var _k = React.useState(true), scrollTop = _k[0], setScrollTop = _k[1];
     var _l = React.useState(false), scrollBottom = _l[0], setScrollBottom = _l[1];
     var query = '(max-width: 1023px)';
@@ -47,7 +47,16 @@ var OptionsList = React.forwardRef(function (_a, ref) {
     var listRef = React.useRef(null);
     var scrollbarRef = React.useRef(null);
     var counter = createCounter();
-    var renderGroup = function (group) { return (React__default.default.createElement(Optgroup, { className: optionGroupClassName, label: group.label, key: group.label, size: size }, group.options.map(function (option) { return renderOption(option, counter()); }))); };
+    var renderGroup = function (group) {
+        var groupSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) {
+            return group.options.includes(item);
+        });
+        var handleSelectedItems = function (items) {
+            var _a;
+            setSelectedItems(((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) { return !group.options.includes(item); })) !== null && _a !== void 0 ? _a : []).concat(items));
+        };
+        return (React__default.default.createElement(Optgroup, { className: optionGroupClassName, label: group.label, key: group.label, size: size, options: group.options, selectedItems: groupSelectedItems, setSelectedItems: handleSelectedItems, search: search }, group.options.map(function (option) { return renderOption(option, counter()); })));
+    };
     utils.useVisibleOptions(tslib.__assign(tslib.__assign({}, (!nativeScrollbar && { styleTargetRef: scrollbarRef })), { visibleOptions: visibleOptions, listRef: listRef, open: open, invalidate: options }));
     if (options.length === 0 && !emptyPlaceholder && !header && !footer) {
         return null;

package/select/components/virtual-options-list/Component.js

@@ -23,7 +23,7 @@ require('./index.css');
 
 var VirtualOptionsList = React.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.size, size = _c === void 0 ? 48 : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.highlightedIndex, highlightedIndex = _e === void 0 ? -1 : _e, optionGroupClassName = _a.optionGroupClassName, className = _a.className, getOptionProps = _a.getOptionProps, Option = _a.Option, open = _a.open, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.Optgroup, Optgroup = _g === void 0 ? components_optgroup_Component.Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _h, header = _a.header, footer = _a.footer, _j = _a.showFooter, showFooter = _j === void 0 ? true : _j, optionsListWidth = _a.optionsListWidth, onScroll = _a.onScroll, nativeScrollbarProp = _a.nativeScrollbar, setHighlightedIndex = _a.setHighlightedIndex;
+    var _c = _a.size, size = _c === void 0 ? 48 : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.highlightedIndex, highlightedIndex = _e === void 0 ? -1 : _e, optionGroupClassName = _a.optionGroupClassName, className = _a.className, getOptionProps = _a.getOptionProps, Option = _a.Option, open = _a.open, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.Optgroup, Optgroup = _g === void 0 ? components_optgroup_Component.Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _h, header = _a.header, footer = _a.footer, _j = _a.showFooter, showFooter = _j === void 0 ? true : _j, optionsListWidth = _a.optionsListWidth, onScroll = _a.onScroll, nativeScrollbarProp = _a.nativeScrollbar, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, setSelectedItems = _a.setSelectedItems, search = _a.search;
     var listRef = React.useRef(null);
     var parentRef = React.useRef(null);
     var scrollbarRef = React.useRef(null);
@@ -108,13 +108,25 @@ var VirtualOptionsList = React.forwardRef(function (_a, ref) {
         return rowVirtualizer.virtualItems.map(function (virtualRow) {
             var _a;
             var option = flatOptions[virtualRow.index];
-            var group = options[groupStartIndexes[virtualRow.index]];
+            var renderGroup = function () {
+                var group = options[groupStartIndexes[virtualRow.index]];
+                if (!group)
+                    return null;
+                var groupSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) {
+                    return group.options.includes(item);
+                });
+                var handleSelectedItems = function (items) {
+                    var _a;
+                    setSelectedItems(((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) { return !group.options.includes(item); })) !== null && _a !== void 0 ? _a : []).concat(items));
+                };
+                return (React__default.default.createElement(Optgroup, { label: group.label, size: size, className: optionGroupClassName, options: group.options, selectedItems: groupSelectedItems, setSelectedItems: handleSelectedItems, search: search }));
+            };
             return (React__default.default.createElement("div", { key: virtualRow.index, ref: virtualRow.measureRef, className: cn__default.default(styles.virtualRow, (_a = {},
                     _a[styles.highlighted] = highlightedIndex === virtualRow.index,
                     _a)), style: {
                     transform: "translateY(".concat(virtualRow.start, "px)"),
                 } },
-                group && (React__default.default.createElement(Optgroup, { label: group.label, size: size, className: optionGroupClassName })),
+                renderGroup(),
                 !utils.isGroup(option) && (React__default.default.createElement(Option, tslib.__assign({}, getOptionProps(option, virtualRow.index))))));
         });
     };

package/select/components/virtual-options-list/index.css

@@ -40,6 +40,7 @@
     outline: none;
     box-sizing: border-box;
     position: sticky;
+    justify-content: space-between;
 } .select__virtualOptionsListHeader_p60lz {
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-light-neutral-300);
@@ -80,6 +81,7 @@
     } .select__emptyPlaceholder_p60lz {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
+    flex: 1;
 } .select__size-64_p60lz .select__emptyPlaceholder_p60lz,
 .select__size-72_p60lz .select__emptyPlaceholder_p60lz {
     padding: var(--gap-xl) var(--gap-m);

package/select/cssm/Component.responsive.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../mq/cssm');
-var coreComponentsShared = require('../../shared/cssm');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 require('./mobile/Component.modal.mobile.js');
@@ -13,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SelectResponsive = React.forwardRef(function (_a, ref) {
-    var onScroll = _a.onScroll, fieldProps = _a.fieldProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["onScroll", "fieldProps", "breakpoint", "defaultMatchMediaValue"]);
+    var onScroll = _a.onScroll, fieldProps = _a.fieldProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["onScroll", "fieldProps", "breakpoint", "defaultMatchMediaValue"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     if (isDesktop) {
         return (React__default.default.createElement(desktop_Component_desktop.SelectDesktop, tslib.__assign({ onScroll: onScroll }, restProps, { ref: ref, fieldProps: fieldProps })));

package/select/cssm/components/base-select/Component.js

@@ -361,7 +361,7 @@ function (_a, ref) {
         return (React__default.default.createElement("div", tslib.__assign({}, menuProps, { ref: view === 'desktop' ? menuRef : undefined, className: cn__default.default(optionsListClassName, view === 'mobile' && mobileStyles__default.default.optionsListWrapper, view === 'desktop' && styles__default.default.optionsListWrapper) }),
             React__default.default.createElement(OptionsList, tslib.__assign({}, listProps, { ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn__default.default((_a = {}, _a[mobileStyles__default.default.optionsList] = view === 'mobile', _a)), scrollbarClassName: cn__default.default((_b = {}, _b[mobileStyles__default.default.scrollbar] = view === 'mobile', _b)), optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: view === 'desktop' ? visibleOptions : 0, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn__default.default(optionGroupClassName, (_c = {},
                     _c[mobileStyles__default.default.optionGroup] = view === 'mobile',
-                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll })),
+                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search })),
             view === 'desktop' && React__default.default.createElement("div", { className: styles__default.default.optionsListBorder })));
     };
     var renderInPopover = function () {

package/select/cssm/components/checkmark/index.module.css

@@ -1,6 +1,6 @@
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
-    --color-light-neutral-1500: #121213;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-status-positive: #0cc44d; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -34,7 +34,7 @@
     --select-checkmark-before-display-multiple: block;
     --select-checkmark-after-display-single: none;
     --select-checkmark-unselected-opacity: 0;
-    --select-checkmark-background: var(--color-light-neutral-1500);
+    --select-checkmark-background: var(--color-light-neutral-translucent-1300);
     --select-checkmark-border-radius: var(--border-radius-circle);
 
     /* optgroup */

package/select/cssm/components/options-list/Component.js

@@ -26,7 +26,7 @@ var createCounter = function () {
 };
 var OptionsList = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.Optgroup, Optgroup = _f === void 0 ? components_optgroup_Component.Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _g, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _h = _a.showFooter, showFooter = _h === void 0 ? true : _h, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _j = _a.flatOptions, flatOptions = _j === void 0 ? [] : _j, setHighlightedIndex = _a.setHighlightedIndex;
+    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.Optgroup, Optgroup = _f === void 0 ? components_optgroup_Component.Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _g, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _h = _a.showFooter, showFooter = _h === void 0 ? true : _h, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _j = _a.flatOptions, flatOptions = _j === void 0 ? [] : _j, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, search = _a.search, setSelectedItems = _a.setSelectedItems;
     var _k = React.useState(true), scrollTop = _k[0], setScrollTop = _k[1];
     var _l = React.useState(false), scrollBottom = _l[0], setScrollBottom = _l[1];
     var query = '(max-width: 1023px)';
@@ -46,7 +46,16 @@ var OptionsList = React.forwardRef(function (_a, ref) {
     var listRef = React.useRef(null);
     var scrollbarRef = React.useRef(null);
     var counter = createCounter();
-    var renderGroup = function (group) { return (React__default.default.createElement(Optgroup, { className: optionGroupClassName, label: group.label, key: group.label, size: size }, group.options.map(function (option) { return renderOption(option, counter()); }))); };
+    var renderGroup = function (group) {
+        var groupSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) {
+            return group.options.includes(item);
+        });
+        var handleSelectedItems = function (items) {
+            var _a;
+            setSelectedItems(((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) { return !group.options.includes(item); })) !== null && _a !== void 0 ? _a : []).concat(items));
+        };
+        return (React__default.default.createElement(Optgroup, { className: optionGroupClassName, label: group.label, key: group.label, size: size, options: group.options, selectedItems: groupSelectedItems, setSelectedItems: handleSelectedItems, search: search }, group.options.map(function (option) { return renderOption(option, counter()); })));
+    };
     utils.useVisibleOptions(tslib.__assign(tslib.__assign({}, (!nativeScrollbar && { styleTargetRef: scrollbarRef })), { visibleOptions: visibleOptions, listRef: listRef, open: open, invalidate: options }));
     if (options.length === 0 && !emptyPlaceholder && !header && !footer) {
         return null;