@alfalab/core-components 42.15.0 → 43.0.0

package/number-input/utils.d.ts

@@ -1,13 +1,23 @@
-declare const SIGNS: string[];
+import { MaskitoOptions, MaskitoPlugin } from '@maskito/core';
+declare const MINUS_SIGN = "-";
 declare const SEPARATORS: string[];
-declare function createSeparatorsRegExp(): RegExp;
+declare const MAX_SAFE_INTEGER: number;
+declare const MIN_SAFE_INTEGER: number;
+declare const MAX_DIGITS = 15;
+declare function parseNumber(value?: string | number | null): number;
 /**
- * Проверка вводимых значений.
+ * Преобразовать число в строку с заменой экспоненты на десятичную дробь
  */
-declare const getAllowedValue: ({ value, fractionLength, separator, allowSigns, }: {
-    value: string;
-    fractionLength?: number | undefined;
+declare function stringifyNumberWithoutExp(value: number): string;
+declare function createMaskOptions({ separator, fractionLength, min, max, }: {
     separator: string;
-    allowSigns: boolean;
-}) => string;
-export { SIGNS, SEPARATORS, createSeparatorsRegExp, getAllowedValue };
+    fractionLength: number;
+    min: number;
+    max: number;
+}): MaskitoOptions;
+declare function createMinMaxPlugin({ min, max }: {
+    min: number;
+    max: number;
+}): MaskitoPlugin;
+declare function createNotEmptyPartsPlugin(separator: string): MaskitoPlugin;
+export { MINUS_SIGN, SEPARATORS, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, MAX_DIGITS, parseNumber, stringifyNumberWithoutExp, createMaskOptions, createMinMaxPlugin, createNotEmptyPartsPlugin };

package/number-input/utils.js

@@ -1,34 +1,257 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var SIGNS = ['-', '+'];
+var core = require('@maskito/core');
+var coreComponentsShared = require('../shared');
+
+/* eslint-disable no-param-reassign */
+var MINUS_SIGN = '-';
 var SEPARATORS = [',', '.'];
-function createSeparatorsRegExp() {
-    return new RegExp("[".concat(SEPARATORS.map(function (s) { return "\\".concat(s); }).join(''), "]"), 'g');
+var MAX_SAFE_INTEGER = Math.pow(2, 53) - 1;
+var MIN_SAFE_INTEGER = -MAX_SAFE_INTEGER;
+var MAX_DIGITS = 15; // с 16 уже упираемся в MAX_SAFE_INTEGER
+function parseNumber(value) {
+    if (value === void 0) { value = ''; }
+    if (typeof value === 'number')
+        return value;
+    var pseudoSeparatorsRegExp = new RegExp("[".concat(SEPARATORS.join(''), "]"), 'gi');
+    return value
+        ? parseFloat(value
+            .replace(new RegExp("[^".concat(MINUS_SIGN).concat(SEPARATORS.join(''), "0-9]"), 'gi'), '')
+            .replace(pseudoSeparatorsRegExp, '.'))
+        : NaN;
 }
-var getNumberRegExp = function (fractionLength) {
-    var reStr = '[0-9]+';
+/**
+ * Преобразовать число в строку с заменой экспоненты на десятичную дробь
+ */
+function stringifyNumberWithoutExp(value) {
+    var valueString = String(value);
+    var _a = valueString.split('e-'), numberPart = _a[0], expPart = _a[1];
+    var valueWithoutExp = valueString;
+    if (expPart) {
+        var _b = numberPart.split('.'), fractionalPart = _b[1];
+        var decimalDigits = Number(expPart) + ((fractionalPart === null || fractionalPart === void 0 ? void 0 : fractionalPart.length) || 0);
+        valueWithoutExp = value.toFixed(decimalDigits);
+    }
+    return valueWithoutExp;
+}
+var getNumberRegExp = function (min, fractionLength) {
+    var reStr = '[0-9]*';
+    if (min < 0) {
+        reStr = "(\\".concat(MINUS_SIGN, ")?").concat(reStr);
+    }
     if (fractionLength !== 0) {
-        reStr = "".concat(reStr, "[").concat(SEPARATORS.map(function (s) { return "\\".concat(s); }).join(''), "]?[0-9]{0,").concat(fractionLength || Number.MAX_SAFE_INTEGER, "}");
+        reStr = "".concat(reStr, "[").concat(SEPARATORS.map(function (s) { return "\\".concat(s); }).join(''), "]?[0-9]{0,").concat(fractionLength || MAX_DIGITS, "}");
     }
     return new RegExp("^".concat(reStr, "$"));
 };
+function createMaskOptions(_a) {
+    var separator = _a.separator, fractionLength = _a.fractionLength, min = _a.min, max = _a.max;
+    return {
+        mask: getNumberRegExp(min, fractionLength),
+        preprocessors: [
+            createPseudoSeparatorPreprocessor(separator),
+            createNotEmptyIntegerPartPreprocessor({ separator: separator, fractionLength: fractionLength }),
+            createZeroFractionLengthPreprocessor(fractionLength, separator),
+            createRepeatedSeparatorPreprocessor(separator),
+        ],
+        postprocessors: [
+            createLeadingZeroesValidationPostprocessor(separator),
+            createMinMaxPostprocessor({ min: min, max: max, separator: separator }),
+        ],
+        plugins: [createNotEmptyPartsPlugin(separator), createMinMaxPlugin({ min: min, max: max })],
+    };
+}
 /**
- * Проверка вводимых значений.
+ *  Заполняет целочисленную часть при вводе separator.
+ *  @example Type , => 0,
  */
-var getAllowedValue = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? '' : _b, fractionLength = _a.fractionLength, separator = _a.separator, allowSigns = _a.allowSigns;
-    var sign = allowSigns && SIGNS.some(function (s) { return s === value[0]; }) ? value[0] : '';
-    var testedValue = sign ? value.slice(1) : value;
-    if (getNumberRegExp(fractionLength).test(testedValue)) {
-        return value;
+function createNotEmptyIntegerPartPreprocessor(_a) {
+    var separator = _a.separator, fractionLength = _a.fractionLength;
+    var startWithDecimalSepRegExp = new RegExp("^\\D*\\".concat(separator));
+    return function (_a) {
+        var elementState = _a.elementState, data = _a.data;
+        var value = elementState.value, selection = elementState.selection;
+        var from = selection[0];
+        if (fractionLength <= 0 ||
+            value.includes(separator) ||
+            !data.match(startWithDecimalSepRegExp)) {
+            return { elementState: elementState, data: data };
+        }
+        var digitsBeforeCursor = value.slice(0, from).match(/\d+/);
+        return {
+            elementState: elementState,
+            data: digitsBeforeCursor ? data : "0".concat(data),
+        };
+    };
+}
+/**
+ * Не позволяет вводить невалидный разделитель.
+ */
+function createPseudoSeparatorPreprocessor(separator) {
+    var pseudoSeparatorsRegExp = new RegExp("[".concat(SEPARATORS.join(''), "]"), 'gi');
+    return function (_a) {
+        var elementState = _a.elementState, data = _a.data;
+        var value = elementState.value, selection = elementState.selection;
+        return {
+            elementState: {
+                selection: selection,
+                value: value.replace(pseudoSeparatorsRegExp, separator),
+            },
+            data: data.replace(pseudoSeparatorsRegExp, separator),
+        };
+    };
+}
+/**
+ * Помогает верно обрезать значения при вставке, если fractionLength===0
+ * @example paste 123,123 -> 123
+ */
+function createZeroFractionLengthPreprocessor(fractionLength, separator) {
+    if (fractionLength > 0) {
+        return function (state) { return state; };
     }
-    var _c = testedValue
-        .split(separator)
-        .map(function (v) { return v.replace(/[^0-9]/g, ''); }), majorPart = _c[0], minorPart = _c[1];
-    return "".concat(sign).concat(majorPart).concat(minorPart ? separator + minorPart.slice(0, fractionLength) : '');
-};
+    var decimalPartRegExp = new RegExp("\\".concat(separator, ".*$"), 'g');
+    return function (_a) {
+        var elementState = _a.elementState, data = _a.data;
+        var value = elementState.value, selection = elementState.selection;
+        var from = selection[0], to = selection[1];
+        var newValue = value.replace(decimalPartRegExp, '');
+        return {
+            elementState: {
+                selection: [Math.min(from, newValue.length), Math.min(to, newValue.length)],
+                value: newValue,
+            },
+            data: data.replace(decimalPartRegExp, ''),
+        };
+    };
+}
+/**
+ *  Запрещает вводить второй сепаратор
+ */
+function createRepeatedSeparatorPreprocessor(separator) {
+    return function (_a) {
+        var elementState = _a.elementState, data = _a.data;
+        var value = elementState.value, selection = elementState.selection;
+        var from = selection[0], to = selection[1];
+        return {
+            elementState: elementState,
+            data: !value.includes(separator) || value.slice(from, to + 1).includes(separator)
+                ? data
+                : data.replace(new RegExp("\\".concat(separator)), ''),
+        };
+    };
+}
+/**
+ * Удаляет лишние нули в начале целой части.
+ * @example 0,|00005 => Backspace => |5
+ * @example -0,|00005 => Backspace => -|5
+ * @example "000000" => 0|
+ * @example 0| => Type "5" => 5|
+ */
+function createLeadingZeroesValidationPostprocessor(separator) {
+    var trimLeadingZeroes = function (value) {
+        return value
+            .replace(new RegExp('^(\\D+)?0+(?=0)'), '$1')
+            .replace(new RegExp('^(\\D+)?0+(?=[1-9])'), '$1');
+    };
+    var countTrimmedZeroesBefore = function (value, index) {
+        var valueBefore = value.slice(0, index);
+        var followedByZero = value.slice(index).startsWith('0');
+        return (valueBefore.length - trimLeadingZeroes(valueBefore).length + (followedByZero ? 1 : 0));
+    };
+    return function (_a) {
+        var value = _a.value, selection = _a.selection;
+        var from = selection[0], to = selection[1];
+        var hasSeparator = value.includes(separator);
+        var _b = value.split(separator), integerPart = _b[0], _c = _b[1], decimalPart = _c === void 0 ? '' : _c;
+        var zeroTrimmedIntegerPart = trimLeadingZeroes(integerPart);
+        if (integerPart === zeroTrimmedIntegerPart) {
+            return { value: value, selection: selection };
+        }
+        var newFrom = from - countTrimmedZeroesBefore(value, from);
+        var newTo = to - countTrimmedZeroesBefore(value, to);
+        return {
+            value: zeroTrimmedIntegerPart + (hasSeparator ? separator : '') + decimalPart,
+            selection: [Math.max(newFrom, 0), Math.max(newTo, 0)],
+        };
+    };
+}
+/**
+ * Валидирует значение с учетом min max значений.
+ * Работает совместно с createMinMaxPlugin
+ */
+function createMinMaxPostprocessor(_a) {
+    var min = _a.min, max = _a.max, separator = _a.separator;
+    return function (_a) {
+        var value = _a.value, selection = _a.selection;
+        var parsedNumber = parseNumber(value);
+        var limitedValue = 
+        /**
+         * Здесь невозможно ограничить нижнюю границу, если пользователь вводит положительное число.
+         * То же самое для верхней границы и отрицательного числа.
+         * Если min=5, то без этого условия не получится ввести 40, похожая ситуация и с отрицательным max
+         */
+        parsedNumber > 0 ? Math.min(parsedNumber, max) : Math.max(parsedNumber, min);
+        if (!Number.isNaN(parsedNumber) && limitedValue !== parsedNumber) {
+            var newValue = "".concat(limitedValue).replace('.', separator);
+            return {
+                value: newValue,
+                selection: [newValue.length, newValue.length],
+            };
+        }
+        return {
+            value: value,
+            selection: selection,
+        };
+    };
+}
+function createMinMaxPlugin(_a) {
+    var min = _a.min, max = _a.max;
+    return function (element, options) {
+        var listener = function () {
+            var parsedNumber = parseNumber(element.value);
+            var clampedNumber = coreComponentsShared.fnUtils.clamp(parsedNumber, min, max);
+            if (!Number.isNaN(parsedNumber) && parsedNumber !== clampedNumber) {
+                element.value = core.maskitoTransform(stringifyNumberWithoutExp(clampedNumber), options);
+                element.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        };
+        var evListenerOptions = { capture: true };
+        element.addEventListener('blur', listener, evListenerOptions);
+        return function () { return element.removeEventListener('blur', listener, evListenerOptions); };
+    };
+}
+function createNotEmptyPartsPlugin(separator) {
+    return function (element) {
+        var listener = function () {
+            var newValue = element.value
+                // 0,9000000 -> 0,9
+                .replace(new RegExp("(\\".concat(separator, "\\d*?)(0+$)")), '$1')
+                // ,2 => 0,2
+                .replace(new RegExp("^(\\D+)?\\".concat(separator)), "$10".concat(separator))
+                // 0, -> 0
+                .replace(new RegExp("\\".concat(separator, "$")), '')
+                // -0 -> 0
+                .replace(new RegExp("^".concat(MINUS_SIGN, "0$")), '0')
+                // - -> ''
+                .replace(new RegExp("^".concat(MINUS_SIGN, "$")), '');
+            if (newValue !== element.value) {
+                element.value = newValue;
+                element.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        };
+        var evListenerOptions = { capture: true };
+        element.addEventListener('blur', listener, evListenerOptions);
+        return function () { return element.removeEventListener('blur', listener, evListenerOptions); };
+    };
+}
 
+exports.MAX_DIGITS = MAX_DIGITS;
+exports.MAX_SAFE_INTEGER = MAX_SAFE_INTEGER;
+exports.MINUS_SIGN = MINUS_SIGN;
+exports.MIN_SAFE_INTEGER = MIN_SAFE_INTEGER;
 exports.SEPARATORS = SEPARATORS;
-exports.SIGNS = SIGNS;
-exports.createSeparatorsRegExp = createSeparatorsRegExp;
-exports.getAllowedValue = getAllowedValue;
+exports.createMaskOptions = createMaskOptions;
+exports.createMinMaxPlugin = createMinMaxPlugin;
+exports.createNotEmptyPartsPlugin = createNotEmptyPartsPlugin;
+exports.parseNumber = parseNumber;
+exports.stringifyNumberWithoutExp = stringifyNumberWithoutExp;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfalab/core-components",
-  "version": "42.15.0",
+  "version": "43.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -65,9 +65,9 @@
     "@popperjs/core": "^2.3.3",
     "can-use-dom": "^0.1.0",
     "classnames": "^2.3.1",
-    "compute-scroll-into-view": "^1.0.20",
+    "compute-scroll-into-view": "^3.1.0",
     "date-fns": "^2.16.1",
-    "downshift": "^5.4.7",
+    "downshift": "^8.2.2",
     "element-closest": "^3.0.2",
     "intersection-observer": "^0.12.0",
     "libphonenumber-js": "^1.10.30",
@@ -94,7 +94,7 @@
     "swiper": "^6.8.2",
     "text-mask-core": "^5.1.2",
     "tslib": "^2.4.0",
-    "ui-primitives": "^11.17.0"
+    "ui-primitives": "^13.9.0"
   },
   "devDependencies": {
     "@alfalab/rollup-plugin-postcss": "^3.6.1",

package/pagination/Component.js

@@ -15,7 +15,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"pagination__component_102kp","defaultView":"pagination__defaultView_102kp"};
+var styles = {"component":"pagination__component_18pxw","defaultView":"pagination__defaultView_18pxw"};
 require('./index.css');
 
 var Pagination = function (_a) {

package/pagination/components/default-view/index.css

@@ -1,7 +1,7 @@
-/* hash: 1hrje */
+/* hash: 98now */
 :root {
 } /* deprecated */ :root {
-    --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* 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 */
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* 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 {
 } :root {
@@ -15,7 +15,7 @@
 } :root {
 } :root {
 } :root {
-} .pagination__dots_1ijpy {
+} .pagination__dots_116jn {
     width: 32px;
     height: 32px;
     text-align: center;

package/pagination/components/default-view/index.js

@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"dots":"pagination__dots_1ijpy"};
+var styles = {"dots":"pagination__dots_116jn"};
 require('./index.css');
 
 /* eslint-disable react/no-array-index-key */

package/pagination/components/per-page-view/index.css

@@ -1,4 +1,4 @@
-/* hash: 2o2z4 */
+/* hash: 1g1w1 */
 :root {
 } /* 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 */ /* 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 */
@@ -15,7 +15,7 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .pagination__component_nd4q6 {
+} .pagination__component_5zyfi {
     display: block;
     margin: 0 var(--gap-m);
 }

package/pagination/components/per-page-view/index.js

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"component":"pagination__component_nd4q6"};
+var styles = {"component":"pagination__component_5zyfi"};
 require('./index.css');
 
 var PerPageView = function (_a) {

package/pagination/components/tag/index.css

@@ -1,12 +1,12 @@
-/* hash: 1uow6 */
+/* hash: kmguk */
 :root {
 } /* deprecated */ :root {
-    --color-light-bg-quaternary: #dcdcdd;
-    --color-light-bg-secondary-inverted: #202022;
-    --color-light-bg-tertiary: #e9e9eb;
+    --color-light-bg-quaternary: #dcdee2;
+    --color-light-bg-secondary-inverted: #1c1c1e;
+    --color-light-bg-tertiary: #e7e8ea;
     --color-light-text-primary: #0e0e0e;
     --color-light-text-primary-inverted: #fff;
-    --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* 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 */
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* 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 {
 } :root {
@@ -21,7 +21,7 @@
 } :root {
 } :root {
 } :root {
-} button.pagination__tag_1y875.pagination__tag_1y875 {
+} button.pagination__tag_7ugah.pagination__tag_7ugah {
     color: var(--color-light-text-secondary);
     border-radius: var(--border-radius-m);
     border: none;
@@ -31,19 +31,19 @@
     width: 32px;
     height: 32px;
     padding: 0
-} button.pagination__tag_1y875.pagination__tag_1y875:disabled:not(.pagination__checked_1y875) {
+} button.pagination__tag_7ugah.pagination__tag_7ugah:disabled:not(.pagination__checked_7ugah) {
         opacity: 0.3;
-    } button.pagination__tag_1y875.pagination__tag_1y875:hover:not(:disabled) {
+    } button.pagination__tag_7ugah.pagination__tag_7ugah:hover:not(:disabled) {
         background-color: var(--color-light-bg-tertiary);
         color: var(--color-light-text-primary);
-    } button.pagination__tag_1y875.pagination__tag_1y875:active:not(:disabled) {
+    } button.pagination__tag_7ugah.pagination__tag_7ugah:active:not(:disabled) {
         background-color: var(--color-light-bg-quaternary);
-    } button.pagination__tag_1y875.pagination__tag_1y875.pagination__checked_1y875 {
+    } button.pagination__tag_7ugah.pagination__tag_7ugah.pagination__checked_7ugah {
         cursor: default;
         background-color: var(--color-light-bg-secondary-inverted);
         color: var(--color-light-text-primary-inverted);
-    } button.pagination__tag_1y875.pagination__tag_1y875.pagination__checked_1y875:hover:not(:disabled) {
+    } button.pagination__tag_7ugah.pagination__tag_7ugah.pagination__checked_7ugah:hover:not(:disabled) {
         color: var(--color-light-text-primary-inverted);
-    } button.pagination__tag_1y875.pagination__tag_1y875.pagination__checked_1y875:active:not(:disabled) {
+    } button.pagination__tag_7ugah.pagination__tag_7ugah.pagination__checked_7ugah:active:not(:disabled) {
         color: var(--color-light-text-primary);
     }

package/pagination/components/tag/index.js

@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"tag":"pagination__tag_1y875","checked":"pagination__checked_1y875"};
+var styles = {"tag":"pagination__tag_7ugah","checked":"pagination__checked_7ugah"};
 require('./index.css');
 
 var Tag = function (_a) {

package/pagination/cssm/components/default-view/index.module.css

@@ -1,6 +1,6 @@
 :root {
 } /* deprecated */ :root {
-    --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* 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 */
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* 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 {
 } :root {

package/pagination/cssm/components/tag/index.module.css

@@ -1,11 +1,11 @@
 :root {
 } /* deprecated */ :root {
-    --color-light-bg-quaternary: #dcdcdd;
-    --color-light-bg-secondary-inverted: #202022;
-    --color-light-bg-tertiary: #e9e9eb;
+    --color-light-bg-quaternary: #dcdee2;
+    --color-light-bg-secondary-inverted: #1c1c1e;
+    --color-light-bg-tertiary: #e7e8ea;
     --color-light-text-primary: #0e0e0e;
     --color-light-text-primary-inverted: #fff;
-    --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* 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 */
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* 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 {
 } :root {

package/pagination/esm/Component.js

@@ -8,7 +8,7 @@ import { Tag } from './components/tag/index.js';
 import 'tslib';
 import '../../tag/esm/desktop';
 
-var styles = {"component":"pagination__component_102kp","defaultView":"pagination__defaultView_102kp"};
+var styles = {"component":"pagination__component_18pxw","defaultView":"pagination__defaultView_18pxw"};
 require('./index.css');
 
 var Pagination = function (_a) {

package/pagination/esm/components/default-view/index.css

@@ -1,7 +1,7 @@
-/* hash: 1hrje */
+/* hash: 98now */
 :root {
 } /* deprecated */ :root {
-    --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* 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 */
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* 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 {
 } :root {
@@ -15,7 +15,7 @@
 } :root {
 } :root {
 } :root {
-} .pagination__dots_1ijpy {
+} .pagination__dots_116jn {
     width: 32px;
     height: 32px;
     text-align: center;

package/pagination/esm/components/default-view/index.js

@@ -4,7 +4,7 @@ import 'tslib';
 import 'classnames';
 import '../../../../tag/esm/desktop';
 
-var styles = {"dots":"pagination__dots_1ijpy"};
+var styles = {"dots":"pagination__dots_116jn"};
 require('./index.css');
 
 /* eslint-disable react/no-array-index-key */

package/pagination/esm/components/per-page-view/index.css

@@ -1,4 +1,4 @@
-/* hash: 2o2z4 */
+/* hash: 1g1w1 */
 :root {
 } /* 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 */ /* 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 */
@@ -15,7 +15,7 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .pagination__component_nd4q6 {
+} .pagination__component_5zyfi {
     display: block;
     margin: 0 var(--gap-m);
 }

package/pagination/esm/components/per-page-view/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-var styles = {"component":"pagination__component_nd4q6"};
+var styles = {"component":"pagination__component_5zyfi"};
 require('./index.css');
 
 var PerPageView = function (_a) {