@alfalab/core-components-select 13.0.2 → 13.0.3

package/Component-21b7a86d.d.ts

@@ -0,0 +1,241 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode, FC, ButtonHTMLAttributes, ElementType, AnchorHTMLAttributes } from "react";
+import { BottomSheetProps } from "@alfalab/core-components-bottom-sheet";
+import { BaseSelectProps, OptionShape, OptionsListProps } from "./typings";
+import { BaseModalProps, BaseModalContext } from "@alfalab/core-components-base-modal";
+import { ButtonProps } from "@alfalab/core-components-button";
+type AdditionalMobileProps = {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+};
+type SelectMobileProps = Omit<BaseSelectProps, "OptionsList" | "Checkmark" | "onScroll"> & AdditionalMobileProps;
+declare const SelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "OptionsList" | "Checkmark"> & AdditionalMobileProps & React.RefAttributes<unknown>>;
+type SelectMobileProps$0 = Omit<BaseSelectProps, "OptionsList" | "Checkmark" | "onScroll"> & {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean;
+    /**
+     * Отображать в BottomSheet
+     */
+    isBottomSheet?: boolean;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+};
+declare const BaseSelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "OptionsList" | "Checkmark"> & {
+    footer?: ReactNode;
+    swipeable?: boolean | undefined;
+    isBottomSheet?: boolean | undefined;
+    bottomSheetProps?: Partial<BottomSheetProps> | undefined;
+} & React.RefAttributes<unknown>>;
+declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListProps & {
+    showClear?: boolean | undefined;
+    onClose?: (() => void) | undefined;
+    selectedDraft?: OptionShape[] | undefined;
+    OptionsList?: React.FC<OptionsListProps & React.RefAttributes<unknown>> | undefined;
+} & React.RefAttributes<unknown>>;
+type ModalDesktopProps = BaseModalProps & {
+    /**
+     * Ширина модального окна
+     * @default "m"
+     */
+    size?: "s" | "m" | "l" | "xl" | "fullscreen";
+    /**
+     * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
+     */
+    fullscreen?: boolean;
+    /**
+     * Фиксирует позицию модального окна после открытия,
+     * предотвращая скачки, если контент внутри будет меняться
+     */
+    fixedPosition?: boolean;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+type ModalMobileProps = Omit<ModalDesktopProps, "size" | "fixedPosition" | "fullscreen">;
+type View = "desktop" | "mobile";
+type TResponsiveModalContext = {
+    view: View;
+    size: NonNullable<ModalDesktopProps["size"]>;
+};
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Растягивает контент на всю высоту
+     */
+    flex?: boolean;
+};
+type HeaderProps = {
+    /**
+     * Контент шапки
+     */
+    children?: ReactNode;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для контента
+     */
+    contentClassName?: string;
+    /**
+     * Заголовок шапки
+     */
+    title?: string;
+    /**
+     * Выравнивание заголовка
+     */
+    align?: "left" | "center";
+    /**
+     * Обрезать ли заголовок
+     */
+    trim?: boolean;
+    /**
+     * Фиксирует шапку
+     */
+    sticky?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: "start" | "center" | "space-between" | "column";
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+};
+type IconButtonProps = {
+    /**
+     * Компонент иконки
+     */
+    icon: ElementType<{
+        className?: string;
+    }>;
+    /**
+     * Тип кнопки
+     */
+    view?: "primary" | "secondary" | "transparent" | "tertiary" | "negative";
+    /**
+     * Размер компонента
+     */
+    size?: "xxs" | "xs" | "s";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted";
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "loading"> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "download">;
+type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Позиция крестика
+     */
+    align?: "left" | "right";
+    /**
+     * Размер кнопки
+     */
+    size?: IconButtonProps["size"];
+    /**
+     * Фиксирует крестик
+     */
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<ContentProps>;
+    Header: React.FC<HeaderProps>;
+    Footer: React.FC<FooterProps>;
+    Closer: React.FC<CloserProps>;
+};
+declare const Content: FC<ContentProps>;
+declare const Modal: React.ForwardRefExoticComponent<import("@alfalab/core-components-base-modal").BaseModalProps & {
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    fullscreen?: boolean | undefined;
+    fixedPosition?: boolean | undefined;
+    hasCloser?: boolean | undefined;
+} & {
+    view: View;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
+declare const ModalContext: import("react").Context<BaseModalContext>;
+type SelectModalMobileProps = Omit<BaseSelectProps, 'OptionsList' | 'Checkmark' | 'onScroll'>;
+declare const SelectModalMobile: React.ForwardRefExoticComponent<SelectModalMobileProps & React.RefAttributes<unknown>>;
+export { AdditionalMobileProps, SelectMobileProps, SelectMobile, BaseSelectMobile, OptionsListWithApply, ModalMobile, Content, Modal, ResponsiveContext, ModalContext, SelectModalMobileProps, SelectModalMobile };

package/{Component-6d167ee5.js → Component-21b7a86d.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-c5796feb.js');
+var tslib_es6 = require('./tslib.es6-e8cb2975.js');
 var React = require('react');
 var cn = require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
@@ -8,7 +8,7 @@ var components_arrow_Component = require('./components/arrow/Component.js');
 var mergeRefs = require('react-merge-refs');
 var downshift = require('downshift');
 require('@alfalab/hooks');
-var components_baseSelect_Component = require('./Component-47b7b784.js');
+var components_baseSelect_Component = require('./Component-ed89ed0b.js');
 var utils = require('./utils.js');
 require('@alfalab/core-components-form-control');
 var components_field_Component = require('./components/field/Component.js');
@@ -25,7 +25,7 @@ var components_baseSelectMobile_checkmark_Component = require('./components/base
 var components_baseSelectMobile_optionsList_Component = require('./components/base-select-mobile/options-list/Component.js');
 require('react-virtual');
 require('@alfalab/core-components-skeleton');
-require('./intersection-observer-a8302d8a.js');
+require('./intersection-observer-6dcf1728.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -98,7 +98,7 @@ function useSelectWithApply(_a) {
     };
 }
 
-var styles = {"footer":"select__footer_1hohp","withBorder":"select__withBorder_1hohp"};
+var styles = {"footer":"select__footer_izxok","withBorder":"select__withBorder_izxok"};
 require('./presets/useSelectWithApply/options-list-with-apply/index.css')
 
 var OptionsListWithApply = React.forwardRef(function (_a, ref) {
@@ -144,7 +144,7 @@ var OptionsListWithApply = React.forwardRef(function (_a, ref) {
             showClear && (React__default['default'].createElement(coreComponentsButton.Button, { size: 'xxs', view: 'secondary', onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))) })));
 });
 
-var styles$1 = {"component":"select__component_p7gkg","popoverInner":"select__popoverInner_p7gkg","sheet":"select__sheet_p7gkg","sheetContent":"select__sheetContent_p7gkg","sheetContainer":"select__sheetContainer_p7gkg","block":"select__block_p7gkg","option":"select__option_p7gkg","optionGroup":"select__optionGroup_p7gkg"};
+var styles$1 = {"component":"select__component_1pk0l","popoverInner":"select__popoverInner_1pk0l","sheet":"select__sheet_1pk0l","sheetContent":"select__sheetContent_1pk0l","sheetContainer":"select__sheetContainer_1pk0l","block":"select__block_1pk0l","option":"select__option_1pk0l","optionGroup":"select__optionGroup_1pk0l"};
 require('./components/base-select-mobile/index.css')
 
 var BaseSelectMobile = React.forwardRef(function (_a, ref) {

package/{Component-47b7b784.js → Component-ed89ed0b.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-c5796feb.js');
+var tslib_es6 = require('./tslib.es6-e8cb2975.js');
 var React = require('react');
 var cn = require('classnames');
 var mergeRefs = require('react-merge-refs');
@@ -22,7 +22,7 @@ var getDataTestId = function (dataTestId, element) {
     return dataTestId ? "" + dataTestId + elementPart : undefined;
 };
 
-var styles = {"component":"select__component_1et50","popoverInner":"select__popoverInner_1et50","optionsList":"select__optionsList_1et50","nativeSelect":"select__nativeSelect_1et50","block":"select__block_1et50"};
+var styles = {"component":"select__component_kmgc8","popoverInner":"select__popoverInner_kmgc8","optionsList":"select__optionsList_kmgc8","nativeSelect":"select__nativeSelect_kmgc8","block":"select__block_kmgc8"};
 require('./components/base-select/index.css')
 
 var BaseSelect = React.forwardRef(function (_a, ref) {

package/Component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-c5796feb.js');
+var tslib_es6 = require('./tslib.es6-e8cb2975.js');
 var React = require('react');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
@@ -12,7 +12,7 @@ require('@juggle/resize-observer');
 require('downshift');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
-var components_baseSelect_Component = require('./Component-47b7b784.js');
+var components_baseSelect_Component = require('./Component-ed89ed0b.js');
 require('./utils.js');
 require('./components/native-select/Component.js');
 require('@alfalab/core-components-form-control');

package/components/arrow/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"arrow":"select__arrow_c2ifz","open":"select__open_c2ifz"};
+var styles = {"arrow":"select__arrow_1w4em","open":"select__open_1w4em"};
 require('./index.css')
 
 var Arrow = function (_a) {

package/components/arrow/index.css

@@ -1,4 +1,4 @@
-/* hash: 5vg8t */
+/* hash: 1g38u */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -24,7 +24,7 @@
 
     /* optgroup */
 }
-.select__arrow_c2ifz {
+.select__arrow_1w4em {
     display: block;
     width: 24px;
     height: 24px;
@@ -32,6 +32,6 @@
 
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
 }
-.select__open_c2ifz {
+.select__open_1w4em {
     transform: var(--arrow-transform);
 }

package/components/base-select/Component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-c5796feb.js');
+require('../../tslib.es6-e8cb2975.js');
 require('react');
 require('classnames');
 require('react-merge-refs');
@@ -10,7 +10,7 @@ require('@juggle/resize-observer');
 require('downshift');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
-var components_baseSelect_Component = require('../../Component-47b7b784.js');
+var components_baseSelect_Component = require('../../Component-ed89ed0b.js');
 require('../../utils.js');
 require('../native-select/Component.js');
 

package/components/base-select/index.css

@@ -1,4 +1,4 @@
-/* hash: xasym */
+/* hash: 1ifm5 */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -34,12 +34,12 @@
 
     /* optgroup */
 }
-.select__component_1et50 {
+.select__component_kmgc8 {
     width: max-content;
     position: relative;
     outline: 0;
 }
-.select__popoverInner_1et50 {
+.select__popoverInner_kmgc8 {
     padding-top: var(--select-options-list-offset);
     padding-bottom: var(--select-options-list-offset);
     box-shadow: none;
@@ -48,7 +48,7 @@
     border-radius: 0;
     position: relative;
 }
-.select__optionsList_1et50 {
+.select__optionsList_kmgc8 {
     padding-top: var(--select-options-list-top-padding);
     padding-bottom: var(--select-options-list-bottom-padding);
     box-shadow: var(--select-options-list-box-shadow);
@@ -57,7 +57,7 @@
     overflow: hidden;
     will-change: transform;
 }
-.select__nativeSelect_1et50 {
+.select__nativeSelect_kmgc8 {
     opacity: 0;
     overflow: hidden;
     position: absolute;
@@ -71,12 +71,12 @@
     cursor: pointer;
     z-index: 1;
 }
-.select__block_1et50 {
+.select__block_kmgc8 {
     width: 100%;
 }
 /* width: max-content; fix for IE */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .select__component_1et50 {
+    .select__component_kmgc8 {
         float: left;
         clear: left;
     }

package/components/base-select/index.d.ts

@@ -1 +1 @@
-export * from "../../Component-47b7b784";
+export * from "../../Component-ed89ed0b";

package/components/base-select/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-c5796feb.js');
+require('../../tslib.es6-e8cb2975.js');
 require('react');
 require('classnames');
 require('react-merge-refs');
@@ -10,7 +10,7 @@ require('@juggle/resize-observer');
 require('downshift');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
-var components_baseSelect_Component = require('../../Component-47b7b784.js');
+var components_baseSelect_Component = require('../../Component-ed89ed0b.js');
 require('../../utils.js');
 require('../native-select/Component.js');
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-c5796feb.js');
+require('../../tslib.es6-e8cb2975.js');
 require('react');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
@@ -12,7 +12,7 @@ require('@juggle/resize-observer');
 require('downshift');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
-require('../../Component-47b7b784.js');
+require('../../Component-ed89ed0b.js');
 require('../../utils.js');
 require('../native-select/Component.js');
 require('@alfalab/core-components-form-control');
@@ -27,13 +27,13 @@ require('../../Component.js');
 require('@alfalab/core-components-bottom-sheet');
 require('@alfalab/core-components-modal/mobile');
 require('@alfalab/core-components-button');
-var presets_useSelectWithApply_hook = require('../../Component-6d167ee5.js');
+var presets_useSelectWithApply_hook = require('../../Component-21b7a86d.js');
 require('./checkmark/Component.js');
 require('@alfalab/core-components-base-modal');
 require('./options-list/Component.js');
 require('react-virtual');
 require('@alfalab/core-components-skeleton');
-require('../../intersection-observer-a8302d8a.js');
+require('../../intersection-observer-6dcf1728.js');
 
 
 

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

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"checkmark":"select__checkmark_15hr6","selected":"select__selected_15hr6"};
+var styles = {"checkmark":"select__checkmark_1c472","selected":"select__selected_1c472"};
 require('./index.css')
 
 var Checkmark = function (_a) {

package/components/base-select-mobile/checkmark/index.css

@@ -1,4 +1,4 @@
-/* hash: 4rj0q */
+/* hash: tdnuh */
 :root {
 
     /* Hard */
@@ -18,7 +18,7 @@
 
     /* optgroup */
 }
-.select__checkmark_15hr6 {
+.select__checkmark_1c472 {
     flex-shrink: 0;
     display: flex;
     align-items: center;
@@ -29,9 +29,9 @@
     height: 24px;
     opacity: 0
 }
-.select__checkmark_15hr6:first-child {
+.select__checkmark_1c472:first-child {
         display: none;
     }
-.select__checkmark_15hr6.select__selected_15hr6 {
+.select__checkmark_1c472.select__selected_1c472 {
         opacity: 1;
     }

package/components/base-select-mobile/index.css

@@ -1,4 +1,4 @@
-/* hash: 1jn2v */
+/* hash: 1qx96 */
 :root {
 
     /* Hard */
@@ -24,12 +24,12 @@
 
     /* optgroup */
 }
-.select__component_p7gkg {
+.select__component_1pk0l {
     width: max-content;
     position: relative;
     outline: 0;
 }
-.select__popoverInner_p7gkg {
+.select__popoverInner_1pk0l {
     padding-top: var(--select-options-list-offset);
     padding-bottom: var(--select-options-list-offset);
     box-shadow: none;
@@ -38,31 +38,31 @@
     border-radius: 0;
     position: relative;
 }
-.select__sheet_p7gkg {
+.select__sheet_1pk0l {
     overflow: hidden;
 }
-.select__sheetContent_p7gkg {
+.select__sheetContent_1pk0l {
     padding: 0;
 }
-.select__sheetContainer_p7gkg {
+.select__sheetContainer_1pk0l {
     padding: 0;
 }
-.select__block_p7gkg {
+.select__block_1pk0l {
     width: 100%;
 }
 /* width: max-content; fix for IE */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .select__component_p7gkg {
+    .select__component_1pk0l {
         float: left;
         clear: left;
     }
 }
-.select__option_p7gkg {
+.select__option_1pk0l {
     padding: var(--gap-2xs) var(--gap-l) var(--gap-2xs) var(--gap-m)
 }
-.select__option_p7gkg:before {
+.select__option_1pk0l:before {
         display: none;
     }
-.select__optionGroup_p7gkg {
+.select__optionGroup_1pk0l {
     padding: var(--gap-m) var(--gap-m) var(--gap-xs);
 }

package/components/base-select-mobile/index.d.ts

@@ -1 +1 @@
-export * from "../../Component-6d167ee5";
+export * from "../../Component-21b7a86d";

package/components/base-select-mobile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-c5796feb.js');
+require('../../tslib.es6-e8cb2975.js');
 require('react');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
@@ -12,7 +12,7 @@ require('@juggle/resize-observer');
 require('downshift');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
-require('../../Component-47b7b784.js');
+require('../../Component-ed89ed0b.js');
 require('../../utils.js');
 require('../native-select/Component.js');
 require('@alfalab/core-components-form-control');
@@ -27,13 +27,13 @@ require('../../Component.js');
 require('@alfalab/core-components-bottom-sheet');
 require('@alfalab/core-components-modal/mobile');
 require('@alfalab/core-components-button');
-var presets_useSelectWithApply_hook = require('../../Component-6d167ee5.js');
+var presets_useSelectWithApply_hook = require('../../Component-21b7a86d.js');
 require('./checkmark/Component.js');
 require('@alfalab/core-components-base-modal');
 require('./options-list/Component.js');
 require('react-virtual');
 require('@alfalab/core-components-skeleton');
-require('../../intersection-observer-a8302d8a.js');
+require('../../intersection-observer-6dcf1728.js');
 
 
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../../tslib.es6-c5796feb.js');
+var tslib_es6 = require('../../../tslib.es6-e8cb2975.js');
 var React = require('react');
 var cn = require('classnames');
 var utils = require('../../../utils.js');
@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"optionsList":"select__optionsList_gz5t9","emptyPlaceholder":"select__emptyPlaceholder_gz5t9","l":"select__l_gz5t9","xl":"select__xl_gz5t9","footer":"select__footer_gz5t9","footerButton":"select__footerButton_gz5t9","highlighted":"select__highlighted_gz5t9"};
+var styles = {"optionsList":"select__optionsList_s0sqn","emptyPlaceholder":"select__emptyPlaceholder_s0sqn","l":"select__l_s0sqn","xl":"select__xl_s0sqn","footer":"select__footer_s0sqn","footerButton":"select__footerButton_s0sqn","highlighted":"select__highlighted_s0sqn"};
 require('./index.css')
 
 var createCounter = function () {