@alfalab/core-components 45.9.0-beta.0 → 45.9.0-beta.2

package/themes/breakpoints/breakpoint-768.css

@@ -0,0 +1,3 @@
+:root {
+    --global-breakpoint-desktop: 768;
+}

package/themes/compiled/mobile-dark-bluetint.css

@@ -1,23 +1,4 @@
-.backdrop__backdrop_1bojg {
-    -webkit-tap-highlight-color: transparent;
-} .backdrop__appear_1bojg,
-.backdrop__enter_1bojg {
-    background-color: transparent;
-} .backdrop__appearActive_1bojg,
-.backdrop__enterActive_1bojg,
-.backdrop__appearDone_1bojg,
-.backdrop__enterDone_1bojg {
-    background-color: rgba(0, 0, 0, 0.7);
-} .backdrop__exit_1bojg {
-    background-color: rgba(0, 0, 0, 0.7);
-} .backdrop__exitActive_1bojg,
-.backdrop__exitDone_1bojg {
-    background-color: transparent;
-}.card-image__cardImage_1jnst {
-    background: #e7e8ea;
-} .card-image__loaded_1jnst {
-    background: transparent
-}.badge__component_1l6wq.badge__background-accent_1l6wq {
+.badge__component_1l6wq.badge__background-accent_1l6wq {
         background-color: #f83a2a;
         color: rgba(255, 255, 255, 0.94);
     } .badge__component_1l6wq.badge__background-specialbg-secondary-transparent_1l6wq {
@@ -77,6 +58,25 @@
         background-color: #fff;
     } .badge__dot_1l6wq.badge__outlineCount_1l6wq {
     border: 1px solid #121213;
+}.card-image__cardImage_1jnst {
+    background: #e7e8ea;
+} .card-image__loaded_1jnst {
+    background: transparent
+}.backdrop__backdrop_1bojg {
+    -webkit-tap-highlight-color: transparent;
+} .backdrop__appear_1bojg,
+.backdrop__enter_1bojg {
+    background-color: transparent;
+} .backdrop__appearActive_1bojg,
+.backdrop__enterActive_1bojg,
+.backdrop__appearDone_1bojg,
+.backdrop__enterDone_1bojg {
+    background-color: rgba(0, 0, 0, 0.7);
+} .backdrop__exit_1bojg {
+    background-color: rgba(0, 0, 0, 0.7);
+} .backdrop__exitActive_1bojg,
+.backdrop__exitDone_1bojg {
+    background-color: transparent;
 }.divider__component_cigz3 {
     border-bottom: 1px solid #353539;
 }.dropzone__component_1isbj {
@@ -168,7 +168,14 @@
         background: #fff;
     } .hatching-progress-bar__accent_5j2u0 {
         background: #f83a2a;
-    }.indicator__component_96ho4 {
+    }.icon-view__component_10g9p {
+    color: rgba(238, 238, 251, 0.55)
+} .icon-view__bg_10g9p {
+    fill: #1c1c1e;
+} .icon-view__border_10g9p {
+    stroke: rgba(225, 225, 248, 0.09);
+    fill: transparent;
+}.indicator__component_96ho4 {
     color: rgba(255, 255, 255, 0.94);
     background-color: #f83a2a;
 } .indicator__red_96ho4 {
@@ -186,14 +193,7 @@
     color: rgba(255, 255, 255, 0.94)
 } .indicator__grey_96ho4.indicator__border_96ho4 {
         outline: 2px solid #121213;
-    }.icon-view__component_10g9p {
-    color: rgba(238, 238, 251, 0.55)
-} .icon-view__bg_10g9p {
-    fill: #1c1c1e;
-} .icon-view__border_10g9p {
-    stroke: rgba(225, 225, 248, 0.09);
-    fill: transparent;
-}@keyframes loader__blink_13yub {
+    }@keyframes loader__blink_13yub {
 }.link__primary_1594o {
     color: rgba(255, 255, 255, 0.94);
     border-bottom-color: rgba(255, 255, 255, 0.94)
@@ -310,7 +310,25 @@
     100% {
         background: rgb(198, 205, 214);
     }
-}.segmented-control__wrapper_3hkmf {
+}.slider__component_1tniw .noUi-base:hover .noUi-connects {
+            background: rgba(222, 222, 238, 0.13);
+        } .slider__component_1tniw .noUi-base:hover .noUi-connect {
+            background: #f83a2a;
+        } .slider__component_1tniw .noUi-handle:hover .noUi-touch-area {
+        background: #ff503e;
+    } .slider__component_1tniw .noUi-handle:active .noUi-touch-area {
+        background: #fd624e;
+    } .slider__component_1tniw .noUi-connects {
+        background: rgba(222, 222, 238, 0.13);
+    } .slider__component_1tniw .noUi-connect {
+        background: #f83a2a;
+    } .slider__component_1tniw .noUi-handle {
+        border: 2px solid transparent;
+    } .slider__component_1tniw .noUi-touch-area {
+        background: #f83a2a;
+    } .slider__component_1tniw .noUi-pips {
+        color: rgba(238, 238, 251, 0.55);
+    }.segmented-control__wrapper_3hkmf {
     background-color: rgba(225, 225, 248, 0.09);
 } .segmented-control__segment_3hkmf.segmented-control__selected_3hkmf {
     color: rgba(255, 255, 255, 0.94);
@@ -344,24 +362,6 @@
     color: rgba(3, 3, 6, 0.88)
 } .segmented-control__segment_15rjq:not(:first-child):before {
         background-color: rgba(15, 25, 55, 0.1);
-    }.slider__component_1tniw .noUi-base:hover .noUi-connects {
-            background: rgba(222, 222, 238, 0.13);
-        } .slider__component_1tniw .noUi-base:hover .noUi-connect {
-            background: #f83a2a;
-        } .slider__component_1tniw .noUi-handle:hover .noUi-touch-area {
-        background: #ff503e;
-    } .slider__component_1tniw .noUi-handle:active .noUi-touch-area {
-        background: #fd624e;
-    } .slider__component_1tniw .noUi-connects {
-        background: rgba(222, 222, 238, 0.13);
-    } .slider__component_1tniw .noUi-connect {
-        background: #f83a2a;
-    } .slider__component_1tniw .noUi-handle {
-        border: 2px solid transparent;
-    } .slider__component_1tniw .noUi-touch-area {
-        background: #f83a2a;
-    } .slider__component_1tniw .noUi-pips {
-        color: rgba(238, 238, 251, 0.55);
     }.spinner__component_1a4j5 {
     color: #fff;
 }
@@ -434,143 +434,4 @@
 .status-badge__neutral-operation_55f9k,
 .status-badge__neutral-cross_55f9k {
     background-color: #898991;
-}.underlay__background-accent_uyp16 {
-            background-color: #ef3124;
-        } .underlay__background-info_uyp16 {
-            background-color: #001c3c;
-        } .underlay__background-attention-muted_uyp16 {
-            background-color: #36291f;
-        } .underlay__background-positive-muted_uyp16 {
-            background-color: #232d25;
-        } .underlay__background-negative-muted_uyp16 {
-            background-color: #392523;
-        } .underlay__background-primary_uyp16 {
-            background-color: #0e0e0e;
-        } .underlay__background-primary-inverted_uyp16 {
-            background-color: #fff;
-        } .underlay__background-secondary_uyp16 {
-            background-color: #1c1c1e;
-        } .underlay__background-secondary-inverted_uyp16 {
-            background-color: #f2f3f5;
-        } .underlay__background-tertiary_uyp16 {
-            background-color: #27272a;
-        } .underlay__background-tertiary-inverted_uyp16 {
-            background-color: #e7e8ea;
-        } .underlay__background-quaternary_uyp16 {
-            background-color: #36363a;
-        } .underlay__background-quaternary-inverted_uyp16 {
-            background-color: #dcdee2;
-        } .underlay__background-specialbg-component_uyp16 {
-            background-color: rgba(255, 255, 255, 0.1);
-        } .underlay__background-specialbg-component-inverted_uyp16 {
-            background-color: rgba(11, 31, 53, 0.07);
-        } .underlay__background-specialbg-primary-grouped_uyp16 {
-            background-color: #1c1c1e;
-        } .underlay__background-specialbg-secondary-grouped_uyp16 {
-            background-color: #27272a;
-        } .underlay__background-specialbg-tertiary-grouped_uyp16 {
-            background-color: #36363a;
-        } .underlay__background-specialbg-secondary-transparent_uyp16 {
-            background-color: rgba(214, 214, 229, 0.07);
-        } .underlay__background-specialbg-secondary-transparent-inverted_uyp16 {
-            background-color: rgba(38, 55, 88, 0.06);
-        } .underlay__background-specialbg-tertiary-transparent_uyp16 {
-            background-color: rgba(222, 222, 240, 0.12);
-        } .underlay__background-specialbg-tertiary-transparent-inverted_uyp16 {
-            background-color: rgba(30, 43, 68, 0.08);
-        } .underlay__shadow-xs_uyp16 {
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    } .underlay__shadow-s_uyp16 {
-        box-shadow: 0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04),
-        0 0 1px rgba(0, 0, 0, 0.04);
-    } .underlay__shadow-m_uyp16 {
-        box-shadow: 0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
-        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    } .underlay__shadow-l_uyp16 {
-        box-shadow: 0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),
-        0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    } .underlay__shadow-xl_uyp16 {
-        box-shadow: 0 32px 40px rgba(0, 0, 0, 0.08), 0 24px 32px rgba(0, 0, 0, 0.08),
-        0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
-        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    } .underlay__shadow-xs-hard_uyp16 {
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-s-hard_uyp16 {
-        box-shadow: 0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16),
-        0 0 1px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-m-hard_uyp16 {
-        box-shadow: 0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
-        0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-l-hard_uyp16 {
-        box-shadow: 0 24px 32px rgba(0, 0, 0, 0.2), 0 20px 24px rgba(0, 0, 0, 0.2),
-        0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-xl-hard_uyp16 {
-        box-shadow: 0 32px 40px rgba(0, 0, 0, 0.2), 0 24px 32px rgba(0, 0, 0, 0.2),
-        0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
-        0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-xs-up_uyp16 {
-        box-shadow: 0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04);
-    } .underlay__shadow-s-up_uyp16 {
-        box-shadow: 0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08);
-    } .underlay__shadow-m-up_uyp16 {
-        box-shadow: 0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-l-up_uyp16 {
-        box-shadow: 0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24);
-    } .underlay__shadow-xl-up_uyp16 {
-        box-shadow: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32);
-    } .underlay__shadow-xs-hard-up_uyp16 {
-        box-shadow: 0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04),
-        0 -2px 4px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-s-hard-up_uyp16 {
-        box-shadow: 0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08),
-        0 -4px 8px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-m-hard-up_uyp16 {
-        box-shadow: 0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16),
-        0 -8px 16px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-l-hard-up_uyp16 {
-        box-shadow: 0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24),
-        0 -12px 24px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-xl-hard-up_uyp16 {
-        box-shadow: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32),
-        0 -16px 32px rgba(0, 0, 0, 0.16);
-    } .underlay__border-color-accent_uyp16 {
-        border-color: #f83a2a;
-    } .underlay__border-color-key_uyp16 {
-        border-color: #fff;
-    } .underlay__border-color-key-inverted_uyp16 {
-        border-color: #121213;
-    } .underlay__border-color-link_uyp16 {
-        border-color: #3193fc;
-    } .underlay__border-color-primary_uyp16 {
-        border-color: #353539;
-    } .underlay__border-color-primary-inverted_uyp16 {
-        border-color: #d2d3d9;
-    } .underlay__border-color-secondary_uyp16 {
-        border-color: #29292c;
-    } .underlay__border-color-secondary-inverted_uyp16 {
-        border-color: #e7e8eb;
-    } .underlay__border-color-tertiary_uyp16 {
-        border-color: #212124;
-    } .underlay__border-color-tertiary-inverted_uyp16 {
-        border-color: #edeef0;
-    } .underlay__border-color-underline_uyp16 {
-        border-color: #4a4a51;
-    } .underlay__border-color-underline-inverted_uyp16 {
-        border-color: #babbc2;
-    } .underlay__border-color-graphic-attention_uyp16 {
-        border-color: #fda136;
-    } .underlay__border-color-graphic-link_uyp16 {
-        border-color: #3193fc;
-    } .underlay__border-color-graphic-negative_uyp16 {
-        border-color: #ff4837;
-    } .underlay__border-color-graphic-positive_uyp16 {
-        border-color: #17d055;
-    } .underlay__border-color-specialbg-secondary-transparent_uyp16 {
-        border-color: rgba(225, 225, 248, 0.09);
-    } .underlay__border-color-specialbg-secondary-transparent-inverted_uyp16 {
-        border-color: rgba(30, 43, 68, 0.08);
-    } .underlay__border-color-specialbg-tertiary-transparent_uyp16 {
-        border-color: rgba(222, 222, 238, 0.13);
-    } .underlay__border-color-specialbg-tertiary-transparent-inverted_uyp16 {
-        border-color: rgba(15, 25, 55, 0.1);
-    }
+}

package/time-input/cssm/Component.js

@@ -1,47 +1,55 @@
-import React, { useState } from 'react';
-import { Input } from '../../input/cssm';
-import { format, isCompleteTimeInput, isValidInputValue } from './utils/format.js';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsInput = require('../../input/cssm');
+var utils_format = require('./utils/format.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 /* eslint-disable no-useless-escape */
 /**
  * @deprecated
  * use UniversalDateInput instead
  */
-const TimeInput = React.forwardRef(({ defaultValue = '', value: propValue, onChange, onComplete, className, ...restProps }, ref) => {
-    const [value, setValue] = useState(propValue || defaultValue);
-    const handleChange = (event) => {
-        const { value: newValue } = event.target;
+var TimeInput = React__default.default.forwardRef(function (_a, ref) {
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, className = _a.className, restProps = tslib.__rest(_a, ["defaultValue", "value", "onChange", "onComplete", "className"]);
+    var _c = React.useState(propValue || defaultValue), value = _c[0], setValue = _c[1];
+    var handleChange = function (event) {
+        var newValue = event.target.value;
         if (newValue.length > 5)
             return;
         // Позволяем вводить только цифры и двоеточия
         if (/[^\d:]/.test(newValue)) {
             return;
         }
-        const colon = newValue.match(/\:/g);
+        var colon = newValue.match(/\:/g);
         // Не даем вводить больше, чем одно двоеточие
         if (colon && colon.length > 1) {
             return;
         }
-        const formattedValue = format(newValue);
-        const formattedValueArr = formattedValue.split(':');
-        const hours = Number(formattedValueArr[0]);
-        const mins = Number(formattedValueArr[1]);
+        var formattedValue = utils_format.format(newValue);
+        var formattedValueArr = formattedValue.split(':');
+        var hours = Number(formattedValueArr[0]);
+        var mins = Number(formattedValueArr[1]);
         setValue(formattedValue);
         if (onChange)
-            onChange(event, { hours, mins, value: formattedValue });
-        if (isCompleteTimeInput(formattedValue)) {
-            const valid = formattedValue.length > 0 && isValidInputValue(formattedValue);
+            onChange(event, { hours: hours, mins: mins, value: formattedValue });
+        if (utils_format.isCompleteTimeInput(formattedValue)) {
+            var valid = formattedValue.length > 0 && utils_format.isValidInputValue(formattedValue);
             if (!valid)
                 return;
             if (onComplete) {
-                onComplete(event, { hours, mins, value: formattedValue });
+                onComplete(event, { hours: hours, mins: mins, value: formattedValue });
             }
         }
     };
-    const handleClearClick = () => {
+    var handleClearClick = function () {
         setValue('');
     };
-    return (React.createElement(Input, { ...restProps, ref: ref, value: value, className: className, onChange: handleChange, onClear: handleClearClick }));
+    return (React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { ref: ref, value: value, className: className, onChange: handleChange, onClear: handleClearClick })));
 });
 
-export { TimeInput };
+exports.TimeInput = TimeInput;

package/time-input/cssm/index.js

@@ -1,4 +1,9 @@
-export { TimeInput } from './Component.js';
-export { isValidInputValue } from './utils/format.js';
-import 'react';
-import '../../input/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+var utils_format = require('./utils/format.js');
+
+
+
+exports.TimeInput = Component.TimeInput;
+exports.isValidInputValue = utils_format.isValidInputValue;

package/time-input/cssm/utils/format.js

@@ -1,10 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
 /* eslint-disable no-useless-escape */
-const DATE_MASK = [/\d/, /\d/, ':', /\d/, /\d/];
-const isCompleteTimeInput = (input) => input.length === DATE_MASK.length;
-const isValidTimeFormat = (value) => {
-    const timeArr = value.split(':');
-    const hours = timeArr[0];
-    const mins = timeArr[1];
+var DATE_MASK = [/\d/, /\d/, ':', /\d/, /\d/];
+var isCompleteTimeInput = function (input) { return input.length === DATE_MASK.length; };
+var isValidTimeFormat = function (value) {
+    var timeArr = value.split(':');
+    var hours = timeArr[0];
+    var mins = timeArr[1];
     if (hours.length !== 2 || Number(hours) > 23) {
         return false;
     }
@@ -13,11 +15,19 @@ const isValidTimeFormat = (value) => {
     }
     return true;
 };
-const isValidInputValue = (inputValue) => !inputValue || (isCompleteTimeInput(inputValue) && isValidTimeFormat(inputValue));
-const format = (value) => value
-    .replace(/^(\d\d)(\d)$/, '$1:$2') // 123 => 12:3
-    .replace(/^(\d\d)(\d\d)/, '$1:$2') // 12345 => 12:45 (если вместо двоеточия введена цифра, она обратно заменяется на двоеточие)
-    .replace(/^(\d):(\d\d)(\d)/, '$1:$2') // 1:234 => 1:23
-    .replace(/\:$/, ''); // 12: => 12 || : => void
+var isValidInputValue = function (inputValue) {
+    return !inputValue || (isCompleteTimeInput(inputValue) && isValidTimeFormat(inputValue));
+};
+var format = function (value) {
+    return value
+        .replace(/^(\d\d)(\d)$/, '$1:$2') // 123 => 12:3
+        .replace(/^(\d\d)(\d\d)/, '$1:$2') // 12345 => 12:45 (если вместо двоеточия введена цифра, она обратно заменяется на двоеточие)
+        .replace(/^(\d):(\d\d)(\d)/, '$1:$2') // 1:234 => 1:23
+        .replace(/\:$/, '');
+}; // 12: => 12 || : => void
 
-export { DATE_MASK, format, isCompleteTimeInput, isValidInputValue, isValidTimeFormat };
+exports.DATE_MASK = DATE_MASK;
+exports.format = format;
+exports.isCompleteTimeInput = isCompleteTimeInput;
+exports.isValidInputValue = isValidInputValue;
+exports.isValidTimeFormat = isValidTimeFormat;

package/time-input/cssm/utils/index.js

@@ -1 +1,11 @@
-export { DATE_MASK, format, isCompleteTimeInput, isValidInputValue, isValidTimeFormat } from './format.js';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils_format = require('./format.js');
+
+
+
+exports.DATE_MASK = utils_format.DATE_MASK;
+exports.format = utils_format.format;
+exports.isCompleteTimeInput = utils_format.isCompleteTimeInput;
+exports.isValidInputValue = utils_format.isValidInputValue;
+exports.isValidTimeFormat = utils_format.isValidTimeFormat;

package/toast/Component.responsive.js

@@ -3,6 +3,7 @@ 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');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var Toast = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
     var Component = isDesktop ? desktop_Component_desktop.ToastDesktop : mobile_Component_mobile.ToastMobile;

package/toast/cssm/Component.responsive.js

@@ -1,24 +1,22 @@
-import React, { forwardRef } from 'react';
-import { useMatchMedia } from '../../mq/cssm';
-import { ToastDesktop } from './desktop/Component.desktop.js';
-import { ToastMobile } from './mobile/Component.mobile.js';
-import '../../toast-plate/cssm/desktop';
-import './components/base-toast/component.js';
-import 'react-merge-refs';
-import 'react-transition-group';
-import 'classnames';
-import '../../popover/cssm';
-import '../../portal/cssm';
-import '../../stack/cssm';
-import '@alfalab/hooks';
-import './components/base-toast/index.module.css';
-import '../../toast-plate/cssm/mobile';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const Toast = forwardRef(({ children, breakpoint = 1024, ...restProps }, ref) => {
-    const query = `(min-width: ${breakpoint}px)`;
-    const [isDesktop] = useMatchMedia(query);
-    const Component = isDesktop ? ToastDesktop : ToastMobile;
-    return (React.createElement(Component, { ref: ref, ...restProps }, children));
+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');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var Toast = React.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
+    var query = "(min-width: ".concat(breakpoint, "px)");
+    var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
+    var Component = isDesktop ? desktop_Component_desktop.ToastDesktop : mobile_Component_mobile.ToastMobile;
+    return (React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps), children));
 });
 
-export { Toast };
+exports.Toast = Toast;

package/toast/cssm/components/base-toast/component.js

@@ -1,78 +1,86 @@
-import React, { forwardRef, useRef, useCallback, useEffect } from 'react';
-import mergeRefs from 'react-merge-refs';
-import { CSSTransition } from 'react-transition-group';
-import cn from 'classnames';
-import { Popover } from '../../../../popover/cssm';
-import { Portal } from '../../../../portal/cssm';
-import { Stack, stackingOrder } from '../../../../stack/cssm';
-import { usePrevious, useClickOutside } from '@alfalab/hooks';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const CSS_TRANSITION_CLASS_NAMES = {
-    enter: styles.enter,
-    enterActive: styles.enterActive,
-    exit: styles.exit,
-    exitActive: styles.exitActive,
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var reactTransitionGroup = require('react-transition-group');
+var cn = require('classnames');
+var coreComponentsPopover = require('../../../../popover/cssm');
+var coreComponentsPortal = require('../../../../portal/cssm');
+var coreComponentsStack = require('../../../../stack/cssm');
+var hooks = require('@alfalab/hooks');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var CSS_TRANSITION_CLASS_NAMES = {
+    enter: styles__default.default.enter,
+    enterActive: styles__default.default.enterActive,
+    exit: styles__default.default.exit,
+    exitActive: styles__default.default.exitActive,
 };
-const noop = () => { };
-const BaseToast = forwardRef(({ anchorElement, position, offset, open, autoCloseDelay = 3000, className, titleClassName, bottomOffset, style = {}, block, zIndex = stackingOrder.TOAST, ToastPlate, onMouseEnter, onMouseLeave, onTouchStart, onClose, getPortalContainer, useAnchorWidth, closeWithClickOutside = true, fallbackPlacements, ...restProps }, ref) => {
-    const plateRef = useRef(null);
-    const timerId = useRef(0);
-    const prevOpen = usePrevious(open);
-    const startTimer = useCallback(() => {
+var noop = function () { };
+var BaseToast = React.forwardRef(function (_a, ref) {
+    var _b;
+    var anchorElement = _a.anchorElement, position = _a.position, offset = _a.offset, open = _a.open, _c = _a.autoCloseDelay, autoCloseDelay = _c === void 0 ? 3000 : _c, className = _a.className, titleClassName = _a.titleClassName, bottomOffset = _a.bottomOffset, _d = _a.style, style = _d === void 0 ? {} : _d, block = _a.block, _e = _a.zIndex, zIndex = _e === void 0 ? coreComponentsStack.stackingOrder.TOAST : _e, ToastPlate = _a.ToastPlate, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onClose = _a.onClose, getPortalContainer = _a.getPortalContainer, useAnchorWidth = _a.useAnchorWidth, _f = _a.closeWithClickOutside, closeWithClickOutside = _f === void 0 ? true : _f, fallbackPlacements = _a.fallbackPlacements, restProps = tslib.__rest(_a, ["anchorElement", "position", "offset", "open", "autoCloseDelay", "className", "titleClassName", "bottomOffset", "style", "block", "zIndex", "ToastPlate", "onMouseEnter", "onMouseLeave", "onTouchStart", "onClose", "getPortalContainer", "useAnchorWidth", "closeWithClickOutside", "fallbackPlacements"]);
+    var plateRef = React.useRef(null);
+    var timerId = React.useRef(0);
+    var prevOpen = hooks.usePrevious(open);
+    var startTimer = React.useCallback(function () {
         clearTimeout(timerId.current);
         timerId.current = window.setTimeout(onClose, autoCloseDelay);
     }, [autoCloseDelay, onClose]);
-    const stopTimer = useCallback(() => {
+    var stopTimer = React.useCallback(function () {
         clearTimeout(timerId.current);
     }, []);
-    const handleMouseEnter = useCallback((event) => {
+    var handleMouseEnter = React.useCallback(function (event) {
         stopTimer();
         if (onMouseEnter) {
             onMouseEnter(event);
         }
     }, [onMouseEnter, stopTimer]);
-    const handleMouseLeave = useCallback((event) => {
+    var handleMouseLeave = React.useCallback(function (event) {
         startTimer();
         if (onMouseLeave) {
             onMouseLeave(event);
         }
     }, [onMouseLeave, startTimer]);
-    const handleTouchStart = useCallback((event) => {
+    var handleTouchStart = React.useCallback(function (event) {
         stopTimer();
         if (onTouchStart) {
             onTouchStart(event);
         }
     }, [onTouchStart, stopTimer]);
-    const handleClickOutside = useCallback(() => {
+    var handleClickOutside = React.useCallback(function () {
         onClose();
         stopTimer();
     }, [onClose, stopTimer]);
-    useClickOutside(plateRef, closeWithClickOutside ? handleClickOutside : noop);
-    useEffect(() => () => clearTimeout(timerId.current), []);
-    useEffect(() => {
+    hooks.useClickOutside(plateRef, closeWithClickOutside ? handleClickOutside : noop);
+    React.useEffect(function () { return function () { return clearTimeout(timerId.current); }; }, []);
+    React.useEffect(function () {
         if (open !== prevOpen && open) {
             startTimer();
         }
     }, [open, prevOpen, startTimer, stopTimer]);
-    const props = {
-        block,
-        titleClassName: cn(titleClassName, styles.title),
-        onClose,
+    var props = {
+        block: block,
+        titleClassName: cn__default.default(titleClassName, styles__default.default.title),
+        onClose: onClose,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onTouchStart: handleTouchStart,
-        ref: mergeRefs([ref, plateRef]),
+        ref: mergeRefs__default.default([ref, plateRef]),
     };
     if (anchorElement) {
-        return (React.createElement(Popover, { open: open, anchorElement: anchorElement, position: position, offset: offset, popperClassName: styles.popoverInner, className: cn({ [styles.block]: block }), getPortalContainer: getPortalContainer, zIndex: zIndex, useAnchorWidth: useAnchorWidth, fallbackPlacements: fallbackPlacements }, ToastPlate ? (React.createElement(ToastPlate, { ...restProps, style: style, className: className, ...props })) : null));
+        return (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, anchorElement: anchorElement, position: position, offset: offset, popperClassName: styles__default.default.popoverInner, className: cn__default.default((_b = {}, _b[styles__default.default.block] = block, _b)), getPortalContainer: getPortalContainer, zIndex: zIndex, useAnchorWidth: useAnchorWidth, fallbackPlacements: fallbackPlacements }, ToastPlate ? (React__default.default.createElement(ToastPlate, tslib.__assign({}, restProps, { style: style, className: className }, props))) : null));
     }
-    return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: getPortalContainer },
-        React.createElement(CSSTransition, { unmountOnExit: true, in: open, timeout: 150, nodeRef: plateRef, classNames: CSS_TRANSITION_CLASS_NAMES }, ToastPlate ? (React.createElement(ToastPlate, { ...restProps, className: cn(styles.fixed, styles.toastPlate, className), style: {
-                ...style,
-                bottom: bottomOffset && `${bottomOffset}px`,
-                zIndex: computedZIndex,
-            }, ...props })) : null)))));
+    return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer },
+        React__default.default.createElement(reactTransitionGroup.CSSTransition, { unmountOnExit: true, in: open, timeout: 150, nodeRef: plateRef, classNames: CSS_TRANSITION_CLASS_NAMES }, ToastPlate ? (React__default.default.createElement(ToastPlate, tslib.__assign({}, restProps, { className: cn__default.default(styles__default.default.fixed, styles__default.default.toastPlate, className), style: tslib.__assign(tslib.__assign({}, style), { bottom: bottomOffset && "".concat(bottomOffset, "px"), zIndex: computedZIndex }) }, props))) : null))); }));
 });
 
-export { BaseToast };
+exports.BaseToast = BaseToast;

package/toast/cssm/components/base-toast/index.js

@@ -1,10 +1,7 @@
-export { BaseToast } from './component.js';
-import 'react';
-import 'react-merge-refs';
-import 'react-transition-group';
-import 'classnames';
-import '../../../../popover/cssm';
-import '../../../../portal/cssm';
-import '../../../../stack/cssm';
-import '@alfalab/hooks';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseToast_component = require('./component.js');
+
+
+
+exports.BaseToast = components_baseToast_component.BaseToast;