@alfalab/core-components 27.3.0 → 27.5.0-beta.0

package/select-with-tags/esm/types.d.ts

@@ -25,6 +25,7 @@ type SelectWithTagsProps = Omit<BaseSelectProps, 'Field' | 'nativeSelect' | 'mul
      */
     onChange?: (payload: {
         selectedMultiple: Array<OptionShape | string>;
+        initiator?: OptionShape | null;
         name?: string;
     }) => void;
     /**
@@ -35,10 +36,6 @@ type SelectWithTagsProps = Omit<BaseSelectProps, 'Field' | 'nativeSelect' | 'mul
      * Функция сравнения при поиске
      */
     match?: OptionMatcher;
-    /**
-     * Будет отображаться, если компонент списка пустой
-     */
-    emptyListPlaceholder?: string;
     /**
      * Компонент Тэг
      */

package/select-with-tags/esm/utils/index.js

@@ -1,3 +1,3 @@
-import '../tslib.es6-c2d7fa8e.js';
+import '../tslib.es6-1394dc57.js';
 import '../../../select/esm';
 export { filterOptions } from './match.js';

package/select-with-tags/esm/utils/match.js

@@ -1,4 +1,4 @@
-import { a as __assign } from '../tslib.es6-c2d7fa8e.js';
+import { a as __assign } from '../tslib.es6-1394dc57.js';
 import { isGroup } from '../../../select/esm';
 
 var defaultMatch = function (option, inputValue) {

package/select-with-tags/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-7b3beefc.js');
+require('./tslib.es6-a8343e8d.js');
 require('react');
 require('../select');
 require('classnames');

package/select-with-tags/modern/component.d.ts

@@ -1,17 +1,17 @@
 /// <reference types="react" />
 import React from 'react';
 import { BaseSelectProps } from "../../select";
-declare const SelectWithTags: React.ForwardRefExoticComponent<Pick<BaseSelectProps, "block" | "size" | "className" | "fieldClassName" | "disabled" | "error" | "hint" | "label" | "dataTestId" | "id" | "placeholder" | "onFocus" | "onBlur" | "onScroll" | "preventFlip" | "popperClassName" | "open" | "name" | "options" | "valueRenderer" | "Optgroup" | "visibleOptions" | "Arrow" | "optionGroupClassName" | "Option" | "optionsListClassName" | "optionClassName" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "defaultOpen" | "popoverPosition" | "optionsListWidth" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "zIndexPopover" | "showEmptyOptionsList"> & {
+declare const SelectWithTags: React.ForwardRefExoticComponent<Pick<BaseSelectProps, "block" | "size" | "className" | "fieldClassName" | "disabled" | "error" | "hint" | "label" | "dataTestId" | "id" | "placeholder" | "onFocus" | "onBlur" | "onScroll" | "preventFlip" | "popperClassName" | "open" | "name" | "options" | "valueRenderer" | "Optgroup" | "optionsListWidth" | "visibleOptions" | "Arrow" | "optionGroupClassName" | "Option" | "optionsListClassName" | "optionClassName" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "defaultOpen" | "popoverPosition" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "zIndexPopover" | "showEmptyOptionsList"> & {
     value: string;
     onInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
     selected?: (string | import("../../select").OptionShape)[] | undefined;
     onChange?: ((payload: {
         selectedMultiple: (string | import("../../select").OptionShape)[];
+        initiator?: import("../../select").OptionShape | null | undefined;
         name?: string | undefined;
     }) => void) | undefined;
     autocomplete?: boolean | undefined;
     match?: import("./types").OptionMatcher | undefined;
-    emptyListPlaceholder?: string | undefined;
     Tag?: React.FC<import("./types").TagProps> | undefined;
     collapseTagList?: boolean | undefined;
     moveInputToNewLine?: boolean | undefined;

package/select-with-tags/modern/component.js

@@ -10,7 +10,7 @@ import './utils/calculate-collapse-size.js';
 import { TagList } from './components/tag-list/component.js';
 import { filterOptions } from './utils/match.js';
 
-const SelectWithTags = forwardRef(({ OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Arrow: Arrow$1 = Arrow, value, selected, size = 'xl', onInput, onChange, options, autocomplete = true, match, allowUnselect = true, collapseTagList = false, moveInputToNewLine = true, emptyListPlaceholder = 'Ничего не найдено.', transformCollapsedTagText, transformTagText, Tag, ...restProps }, ref) => {
+const SelectWithTags = forwardRef(({ OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Arrow: Arrow$1 = Arrow, value, selected, size = 'xl', onOpen, onInput, onChange, options, autocomplete = true, match, allowUnselect = true, collapseTagList = false, moveInputToNewLine = true, transformCollapsedTagText, transformTagText, Tag, ...restProps }, ref) => {
     const controlled = Boolean(selected);
     const [selectedTags, setSelectedTags] = useState(selected || []);
     const [isPopoverOpen, setPopoverOpen] = useState(false);
@@ -37,9 +37,9 @@ const SelectWithTags = forwardRef(({ OptionsList: OptionsList$1 = OptionsList, O
             setSelectedTags(tags);
         }
     }, [controlled, onChange, selected, selectedTags]);
-    const handleChange = useCallback(({ selectedMultiple, name }) => {
+    const handleChange = useCallback(({ selectedMultiple, name, initiator }) => {
         if (onChange) {
-            onChange({ selectedMultiple, name });
+            onChange({ selectedMultiple, name, initiator });
         }
         if (!controlled) {
             setSelectedTags(selectedMultiple);
@@ -48,12 +48,15 @@ const SelectWithTags = forwardRef(({ OptionsList: OptionsList$1 = OptionsList, O
             resetValue();
         }
     }, [onChange, controlled, value, resetValue]);
-    const handleOpen = useCallback(({ open }) => {
+    const handleOpen = useCallback(payload => {
+        const { open } = payload;
         if (!open && value) {
             resetValue();
         }
         setPopoverOpen(open);
-    }, [resetValue, value]);
+        if (onOpen)
+            onOpen(payload);
+    }, [onOpen, resetValue, value]);
     const filteredOptions = filterOptions(options, value, match);
     const isAutocomplete = autocomplete || Boolean(match);
     return (React.createElement(BaseSelect, Object.assign({}, restProps, { ref: ref, Option: Option$1, Field: TagList, Optgroup: Optgroup$1, OptionsList: OptionsList$1, Arrow: Arrow$1, multiple: true, updatePopover: updatePopover, allowUnselect: allowUnselect, showEmptyOptionsList: true, fieldProps: {
@@ -68,8 +71,6 @@ const SelectWithTags = forwardRef(({ OptionsList: OptionsList$1 = OptionsList, O
             transformTagText,
             handleUpdatePopover,
             isPopoverOpen,
-        }, optionsListProps: {
-            emptyPlaceholder: emptyListPlaceholder,
         }, selected: selected || selectedTags, autocomplete: isAutocomplete, size: size, options: filteredOptions, onChange: handleChange, onOpen: handleOpen })));
 });
 

package/select-with-tags/modern/components/tag/component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';
 import { Tag as Tag$1 } from '../../../../tag/modern';
 
-var styles = {"tag":"select-with-tags__tag_14xe4","tagNoClose":"select-with-tags__tagNoClose_14xe4","tagContentWrap":"select-with-tags__tagContentWrap_14xe4","tagCross":"select-with-tags__tagCross_14xe4"};
+var styles = {"tag":"select-with-tags__tag_1rtmx","tagNoClose":"select-with-tags__tagNoClose_1rtmx","tagContentWrap":"select-with-tags__tagContentWrap_1rtmx","tagCross":"select-with-tags__tagCross_1rtmx"};
 require('./index.css');
 
 const Tag = ({ option: { content, key }, onClick, handleDeleteTag, ...props }) => {

package/select-with-tags/modern/components/tag/index.css

@@ -1,4 +1,4 @@
-/* hash: 10wgt */
+/* hash: 22qhg */
 :root {
 
     /* Hard */
@@ -12,44 +12,44 @@
     --gap-xs: 8px;
     --gap-m: 16px;
 }
-.select-with-tags__tag_14xe4 {
+.select-with-tags__tag_1rtmx {
     padding: 0;
     padding-left: var(--gap-m);
     margin: var(--gap-2xs);
     cursor: default
 }
-.select-with-tags__tag_14xe4:active:not(:disabled) {
+.select-with-tags__tag_1rtmx:active:not(:disabled) {
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked);
     }
-.select-with-tags__tag_14xe4:hover:not(:disabled):not(:active) {
+.select-with-tags__tag_1rtmx:hover:not(:disabled):not(:active) {
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked);
     }
-.select-with-tags__tag_14xe4 > span {
+.select-with-tags__tag_1rtmx > span {
         width: 100%;
         height: 100%;
     }
-.select-with-tags__tagNoClose_14xe4 {
+.select-with-tags__tagNoClose_1rtmx {
     padding-right: var(--gap-m);
 }
-.select-with-tags__tagContentWrap_14xe4 {
+.select-with-tags__tagContentWrap_1rtmx {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     height: 100%;
     cursor: pointer;
 }
-.select-with-tags__tagCross_14xe4 {
+.select-with-tags__tagCross_1rtmx {
     padding-right: var(--gap-xs);
     height: 100%
 }
-.select-with-tags__tagCross_14xe4:hover {
+.select-with-tags__tagCross_1rtmx:hover {
         opacity: 0.7;
     }
-.select-with-tags__tagCross_14xe4:active {
+.select-with-tags__tagCross_1rtmx:active {
         opacity: 0.5;
     }
-.select-with-tags__tagCross_14xe4 svg {
+.select-with-tags__tagCross_1rtmx svg {
         height: 100%;
     }

package/select-with-tags/modern/components/tag-list/component.js

@@ -7,7 +7,7 @@ import '../../../../tag/modern';
 import { Tag } from '../tag/component.js';
 import { calculateTotalElementsPerRow } from '../../utils/calculate-collapse-size.js';
 
-var styles = {"component":"select-with-tags__component_tssgt","xl":"select-with-tags__xl_tssgt","contentWrapper":"select-with-tags__contentWrapper_tssgt","l":"select-with-tags__l_tssgt","m":"select-with-tags__m_tssgt","s":"select-with-tags__s_tssgt","contentWrapperVertical":"select-with-tags__contentWrapperVertical_tssgt","hasLabel":"select-with-tags__hasLabel_tssgt","hasTags":"select-with-tags__hasTags_tssgt","addons":"select-with-tags__addons_tssgt","field":"select-with-tags__field_tssgt","input":"select-with-tags__input_tssgt","block":"select-with-tags__block_tssgt","focusVisible":"select-with-tags__focusVisible_tssgt","placeholder":"select-with-tags__placeholder_tssgt","addons-size-m":"select-with-tags__addons-size-m_tssgt","addons-size-l":"select-with-tags__addons-size-l_tssgt","addons-size-xl":"select-with-tags__addons-size-xl_tssgt","label":"select-with-tags__label_tssgt"};
+var styles = {"component":"select-with-tags__component_h57m8","xl":"select-with-tags__xl_h57m8","contentWrapper":"select-with-tags__contentWrapper_h57m8","l":"select-with-tags__l_h57m8","m":"select-with-tags__m_h57m8","s":"select-with-tags__s_h57m8","contentWrapperVertical":"select-with-tags__contentWrapperVertical_h57m8","hasLabel":"select-with-tags__hasLabel_h57m8","hasTags":"select-with-tags__hasTags_h57m8","addons":"select-with-tags__addons_h57m8","field":"select-with-tags__field_h57m8","input":"select-with-tags__input_h57m8","block":"select-with-tags__block_h57m8","focusVisible":"select-with-tags__focusVisible_h57m8","placeholder":"select-with-tags__placeholder_h57m8","addons-size-m":"select-with-tags__addons-size-m_h57m8","addons-size-l":"select-with-tags__addons-size-l_h57m8","addons-size-xl":"select-with-tags__addons-size-xl_h57m8","label":"select-with-tags__label_h57m8"};
 require('./index.css');
 
 const TagList = ({ size = 'xl', open, disabled, placeholder, selectedMultiple = [], Arrow, innerProps, className, fieldClassName, value = '', autocomplete, label, valueRenderer, onInput, handleDeleteTag, collapseTagList, moveInputToNewLine, transformCollapsedTagText, transformTagText, isPopoverOpen, handleUpdatePopover, Tag: Tag$1 = Tag, ...restProps }) => {

package/select-with-tags/modern/components/tag-list/index.css

@@ -1,4 +1,4 @@
-/* hash: 1woim */
+/* hash: rtyk3 */
 :root {
     --color-light-border-link: #007aff;
     --color-light-text-primary: #0b1f35;
@@ -27,59 +27,59 @@
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 }
-.select-with-tags__component_tssgt.select-with-tags__xl_tssgt .select-with-tags__contentWrapper_tssgt {
+.select-with-tags__component_h57m8.select-with-tags__xl_h57m8 .select-with-tags__contentWrapper_h57m8 {
     padding: var(--gap-l) var(--gap-m);
 }
-.select-with-tags__component_tssgt.select-with-tags__l_tssgt .select-with-tags__contentWrapper_tssgt {
+.select-with-tags__component_h57m8.select-with-tags__l_h57m8 .select-with-tags__contentWrapper_h57m8 {
     padding: var(--gap-m) var(--gap-m);
 }
-.select-with-tags__component_tssgt.select-with-tags__m_tssgt .select-with-tags__contentWrapper_tssgt {
+.select-with-tags__component_h57m8.select-with-tags__m_h57m8 .select-with-tags__contentWrapper_h57m8 {
     padding: var(--gap-m) var(--gap-s);
 }
-.select-with-tags__component_tssgt.select-with-tags__s_tssgt .select-with-tags__contentWrapper_tssgt {
+.select-with-tags__component_h57m8.select-with-tags__s_h57m8 .select-with-tags__contentWrapper_h57m8 {
     padding: var(--gap-s) var(--gap-s);
 }
-.select-with-tags__component_tssgt.select-with-tags__xl_tssgt .select-with-tags__contentWrapperVertical_tssgt {
+.select-with-tags__component_h57m8.select-with-tags__xl_h57m8 .select-with-tags__contentWrapperVertical_h57m8 {
     padding-top: var(--gap-l);
     padding-bottom: var(--gap-l);
 }
-.select-with-tags__component_tssgt.select-with-tags__l_tssgt .select-with-tags__contentWrapperVertical_tssgt {
+.select-with-tags__component_h57m8.select-with-tags__l_h57m8 .select-with-tags__contentWrapperVertical_h57m8 {
     padding-top: var(--gap-m);
     padding-bottom: var(--gap-m);
 }
-.select-with-tags__component_tssgt.select-with-tags__m_tssgt .select-with-tags__contentWrapperVertical_tssgt {
+.select-with-tags__component_h57m8.select-with-tags__m_h57m8 .select-with-tags__contentWrapperVertical_h57m8 {
     padding-top: var(--gap-s);
     padding-bottom: var(--gap-s);
 }
-.select-with-tags__component_tssgt.select-with-tags__s_tssgt .select-with-tags__contentWrapperVertical_tssgt {
+.select-with-tags__component_h57m8.select-with-tags__s_h57m8 .select-with-tags__contentWrapperVertical_h57m8 {
     padding-top: var(--gap-xs);
     padding-bottom: var(--gap-xs);
 }
-.select-with-tags__component_tssgt .select-with-tags__contentWrapper_tssgt {
+.select-with-tags__component_h57m8 .select-with-tags__contentWrapper_h57m8 {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     margin: var(--gap-2xs-neg)
 }
-.select-with-tags__component_tssgt .select-with-tags__contentWrapper_tssgt:not(.select-with-tags__contentWrapperVertical_tssgt):not(.select-with-tags__hasLabel_tssgt) {
+.select-with-tags__component_h57m8 .select-with-tags__contentWrapper_h57m8:not(.select-with-tags__contentWrapperVertical_h57m8):not(.select-with-tags__hasLabel_h57m8) {
         padding-top: 0;
         padding-bottom: 0;
     }
-.select-with-tags__component_tssgt .select-with-tags__contentWrapper_tssgt.select-with-tags__hasLabel_tssgt {
+.select-with-tags__component_h57m8 .select-with-tags__contentWrapper_h57m8.select-with-tags__hasLabel_h57m8 {
         margin-top: var(--gap-xs);
         padding-bottom: var(--gap-xs);
     }
-.select-with-tags__component_tssgt .select-with-tags__contentWrapper_tssgt.select-with-tags__hasTags_tssgt.select-with-tags__hasLabel_tssgt {
+.select-with-tags__component_h57m8 .select-with-tags__contentWrapper_h57m8.select-with-tags__hasTags_h57m8.select-with-tags__hasLabel_h57m8 {
         margin-top: var(--gap-m);
         padding-bottom: var(--gap-s);
     }
-.select-with-tags__component_tssgt:hover .select-with-tags__addons_tssgt {
+.select-with-tags__component_h57m8:hover .select-with-tags__addons_h57m8 {
     opacity: 0.7;
 }
-.select-with-tags__field_tssgt {
+.select-with-tags__field_h57m8 {
     cursor: pointer;
 }
-.select-with-tags__input_tssgt {
+.select-with-tags__input_h57m8 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -94,23 +94,23 @@
     font-family: var(--font-family);
     color: var(--color-light-text-primary)
 }
-.select-with-tags__input_tssgt:disabled {
+.select-with-tags__input_h57m8:disabled {
         color: var(--color-light-text-secondary);
     }
-.select-with-tags__input_tssgt::placeholder {
+.select-with-tags__input_h57m8::placeholder {
         color: var(--color-light-text-secondary);
     }
-.select-with-tags__input_tssgt:focus::placeholder {
+.select-with-tags__input_h57m8:focus::placeholder {
         color: var(--color-light-text-tertiary);
     }
-.select-with-tags__block_tssgt {
+.select-with-tags__block_h57m8 {
     min-width: 100%;
 }
-.select-with-tags__focusVisible_tssgt {
+.select-with-tags__focusVisible_h57m8 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.select-with-tags__placeholder_tssgt {
+.select-with-tags__placeholder_h57m8 {
     display: flex;
     align-items: center;
     min-height: 28px;
@@ -118,36 +118,36 @@
     color: var(--color-light-text-tertiary);
     pointer-events: none;
 }
-.select-with-tags__addons_tssgt {
+.select-with-tags__addons_h57m8 {
     align-self: flex-start;
     padding-top: var(--gap-s);
 }
-.select-with-tags__addons-size-m_tssgt {
+.select-with-tags__addons-size-m_h57m8 {
     padding-top: var(--gap-m);
 }
-.select-with-tags__addons-size-l_tssgt {
+.select-with-tags__addons-size-l_h57m8 {
     padding-top: var(--gap-l);
 }
-.select-with-tags__addons-size-xl_tssgt {
+.select-with-tags__addons-size-xl_h57m8 {
     padding-top: var(--gap-xl);
 }
-.select-with-tags__component_tssgt.select-with-tags__s_tssgt .select-with-tags__label_tssgt {
+.select-with-tags__component_h57m8.select-with-tags__s_h57m8 .select-with-tags__label_h57m8 {
     top: 5px;
     left: 12px;
 }
-.select-with-tags__component_tssgt.select-with-tags__m_tssgt .select-with-tags__label_tssgt {
+.select-with-tags__component_h57m8.select-with-tags__m_h57m8 .select-with-tags__label_h57m8 {
     top: 8px;
     left: 12px;
 }
-.select-with-tags__component_tssgt.select-with-tags__l_tssgt .select-with-tags__label_tssgt {
+.select-with-tags__component_h57m8.select-with-tags__l_h57m8 .select-with-tags__label_h57m8 {
     top: 10px;
     left: 16px;
 }
-.select-with-tags__component_tssgt.select-with-tags__xl_tssgt .select-with-tags__label_tssgt {
+.select-with-tags__component_h57m8.select-with-tags__xl_h57m8 .select-with-tags__label_h57m8 {
     top: 14px;
     left: 16px;
 }
-.select-with-tags__component_tssgt .select-with-tags__label_tssgt {
+.select-with-tags__component_h57m8 .select-with-tags__label_h57m8 {
     top: 14px;
     align-items: flex-start;
     height: auto;

package/select-with-tags/modern/types.d.ts

@@ -25,6 +25,7 @@ type SelectWithTagsProps = Omit<BaseSelectProps, 'Field' | 'nativeSelect' | 'mul
      */
     onChange?: (payload: {
         selectedMultiple: Array<OptionShape | string>;
+        initiator?: OptionShape | null;
         name?: string;
     }) => void;
     /**
@@ -35,10 +36,6 @@ type SelectWithTagsProps = Omit<BaseSelectProps, 'Field' | 'nativeSelect' | 'mul
      * Функция сравнения при поиске
      */
     match?: OptionMatcher;
-    /**
-     * Будет отображаться, если компонент списка пустой
-     */
-    emptyListPlaceholder?: string;
     /**
      * Компонент Тэг
      */

package/select-with-tags/types.d.ts

@@ -25,6 +25,7 @@ type SelectWithTagsProps = Omit<BaseSelectProps, 'Field' | 'nativeSelect' | 'mul
      */
     onChange?: (payload: {
         selectedMultiple: Array<OptionShape | string>;
+        initiator?: OptionShape | null;
         name?: string;
     }) => void;
     /**
@@ -35,10 +36,6 @@ type SelectWithTagsProps = Omit<BaseSelectProps, 'Field' | 'nativeSelect' | 'mul
      * Функция сравнения при поиске
      */
     match?: OptionMatcher;
-    /**
-     * Будет отображаться, если компонент списка пустой
-     */
-    emptyListPlaceholder?: string;
     /**
      * Компонент Тэг
      */

package/select-with-tags/utils/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../tslib.es6-7b3beefc.js');
+require('../tslib.es6-a8343e8d.js');
 require('../../select');
 var utils_match = require('./match.js');
 

package/select-with-tags/utils/match.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-7b3beefc.js');
+var tslib_es6 = require('../tslib.es6-a8343e8d.js');
 var coreComponentsSelect = require('../../select');
 
 var defaultMatch = function (option, inputValue) {

package/skeleton/Component.js

@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"skeleton__component_1ugom","animate":"skeleton__animate_1ugom","background":"skeleton__background_1ugom","gradient":"skeleton__gradient_1ugom"};
+var styles = {"component":"skeleton__component_9017c","animate":"skeleton__animate_9017c","background":"skeleton__background_9017c","gradient":"skeleton__gradient_9017c"};
 require('./index.css');
 
 var Skeleton = function (_a) {

package/skeleton/esm/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"skeleton__component_1ugom","animate":"skeleton__animate_1ugom","background":"skeleton__background_1ugom","gradient":"skeleton__gradient_1ugom"};
+var styles = {"component":"skeleton__component_9017c","animate":"skeleton__animate_9017c","background":"skeleton__background_9017c","gradient":"skeleton__gradient_9017c"};
 require('./index.css');
 
 var Skeleton = function (_a) {

package/skeleton/esm/index.css

@@ -23,7 +23,7 @@
     --skeleton-gradient-animation-display: block;
     --skeleton-bg-animation-display: none;
 }
-.skeleton__component_1ugom {
+.skeleton__component_9017c {
     position: relative;
     display: var(--skeleton-display);
     vertical-align: middle;
@@ -36,10 +36,10 @@
     /* Safari overflow fix https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b */
     -webkit-mask-image: -webkit-radial-gradient(white, black);
 }
-.skeleton__component_1ugom > * {
+.skeleton__component_9017c > * {
     visibility: hidden;
 }
-.skeleton__component_1ugom:before {
+.skeleton__component_9017c:before {
     content: '';
     position: absolute;
     top: 0;
@@ -48,9 +48,9 @@
     bottom: 0;
     background: var(--skeleton-default-color);
 }
-.skeleton__animate_1ugom:before {
+.skeleton__animate_9017c:before {
     display: var(--skeleton-bg-animation-display);
-    animation-name: skeleton__background_1ugom;
+    animation-name: skeleton__background_9017c;
     animation-duration: 0.5s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
@@ -59,11 +59,11 @@
     opacity: 0.5;
 }
 @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-    .skeleton__animate_1ugom:before {
+    .skeleton__animate_9017c:before {
         opacity: 0.4;
     }
 }
-.skeleton__animate_1ugom:after {
+.skeleton__animate_9017c:after {
     display: var(--skeleton-gradient-animation-display);
     content: '';
     position: absolute;
@@ -72,7 +72,7 @@
     width: 500%;
     height: 100%;
     transform: translateX(-80%);
-    animation-name: skeleton__gradient_1ugom;
+    animation-name: skeleton__gradient_9017c;
     animation-duration: 2s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
@@ -86,7 +86,7 @@
         rgba(0, 0, 0, 0)
     );
 }
-@keyframes skeleton__gradient_1ugom {
+@keyframes skeleton__gradient_9017c {
     0% {
         transform: translateX(-80%);
     }
@@ -97,7 +97,7 @@
         transform: translateX(0);
     }
 }
-@keyframes skeleton__background_1ugom {
+@keyframes skeleton__background_9017c {
     0% {
         background: rgb(182, 188, 195);
     }

package/skeleton/index.css

@@ -23,7 +23,7 @@
     --skeleton-gradient-animation-display: block;
     --skeleton-bg-animation-display: none;
 }
-.skeleton__component_1ugom {
+.skeleton__component_9017c {
     position: relative;
     display: var(--skeleton-display);
     vertical-align: middle;
@@ -36,10 +36,10 @@
     /* Safari overflow fix https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b */
     -webkit-mask-image: -webkit-radial-gradient(white, black);
 }
-.skeleton__component_1ugom > * {
+.skeleton__component_9017c > * {
     visibility: hidden;
 }
-.skeleton__component_1ugom:before {
+.skeleton__component_9017c:before {
     content: '';
     position: absolute;
     top: 0;
@@ -48,9 +48,9 @@
     bottom: 0;
     background: var(--skeleton-default-color);
 }
-.skeleton__animate_1ugom:before {
+.skeleton__animate_9017c:before {
     display: var(--skeleton-bg-animation-display);
-    animation-name: skeleton__background_1ugom;
+    animation-name: skeleton__background_9017c;
     animation-duration: 0.5s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
@@ -59,11 +59,11 @@
     opacity: 0.5;
 }
 @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-    .skeleton__animate_1ugom:before {
+    .skeleton__animate_9017c:before {
         opacity: 0.4;
     }
 }
-.skeleton__animate_1ugom:after {
+.skeleton__animate_9017c:after {
     display: var(--skeleton-gradient-animation-display);
     content: '';
     position: absolute;
@@ -72,7 +72,7 @@
     width: 500%;
     height: 100%;
     transform: translateX(-80%);
-    animation-name: skeleton__gradient_1ugom;
+    animation-name: skeleton__gradient_9017c;
     animation-duration: 2s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
@@ -86,7 +86,7 @@
         rgba(0, 0, 0, 0)
     );
 }
-@keyframes skeleton__gradient_1ugom {
+@keyframes skeleton__gradient_9017c {
     0% {
         transform: translateX(-80%);
     }
@@ -97,7 +97,7 @@
         transform: translateX(0);
     }
 }
-@keyframes skeleton__background_1ugom {
+@keyframes skeleton__background_9017c {
     0% {
         background: rgb(182, 188, 195);
     }

package/skeleton/modern/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"skeleton__component_1ugom","animate":"skeleton__animate_1ugom","background":"skeleton__background_1ugom","gradient":"skeleton__gradient_1ugom"};
+var styles = {"component":"skeleton__component_9017c","animate":"skeleton__animate_9017c","background":"skeleton__background_9017c","gradient":"skeleton__gradient_9017c"};
 require('./index.css');
 
 const Skeleton = ({ visible, animate = true, className, dataTestId, children, }) => {