@alfalab/core-components-tabs 10.0.7 → 10.0.8-alfasans

package/modern/components/primary-tablist/mobile.module.css.js

@@ -1,6 +1,6 @@
 import './mobile.css';
 
-const mobileStyles = {"title":"tabs__title_2favr tabs__title_1psse","mobile":"tabs__mobile_2favr","paragraph-primary-large":"tabs__paragraph-primary-large_2favr","paragraph-primary-medium":"tabs__paragraph-primary-medium_2favr","paragraph-primary-small":"tabs__paragraph-primary-small_2favr","action-primary-large":"tabs__action-primary-large_2favr","action-primary-medium":"tabs__action-primary-medium_2favr","action-primary-small":"tabs__action-primary-small_2favr","accent-primary-large":"tabs__accent-primary-large_2favr","accent-primary-medium":"tabs__accent-primary-medium_2favr","accent-primary-small":"tabs__accent-primary-small_2favr","pickerWrapper":"tabs__pickerWrapper_2favr","option":"tabs__option_2favr","scrollControls":"tabs__scrollControls_2favr","headline-system-xlarge":"tabs__headline-system-xlarge_2favr","headline-system-large":"tabs__headline-system-large_2favr","headline-system-medium":"tabs__headline-system-medium_2favr","headline-system-small":"tabs__headline-system-small_2favr","headline-system-xsmall":"tabs__headline-system-xsmall_2favr","headline-xlarge":"tabs__headline-xlarge_2favr","headline-large":"tabs__headline-large_2favr","headline-medium":"tabs__headline-medium_2favr","headline-small":"tabs__headline-small_2favr","headline-xsmall":"tabs__headline-xsmall_2favr","noTextStyle":"tabs__noTextStyle_2favr"};
+const mobileStyles = {"title":"tabs__title_1gf93 tabs__title_1hn1u","mobile":"tabs__mobile_1gf93","paragraph-primary-large":"tabs__paragraph-primary-large_1gf93","paragraph-primary-medium":"tabs__paragraph-primary-medium_1gf93","paragraph-primary-small":"tabs__paragraph-primary-small_1gf93","action-primary-large":"tabs__action-primary-large_1gf93","action-primary-medium":"tabs__action-primary-medium_1gf93","action-primary-small":"tabs__action-primary-small_1gf93","accent-primary-large":"tabs__accent-primary-large_1gf93","accent-primary-medium":"tabs__accent-primary-medium_1gf93","accent-primary-small":"tabs__accent-primary-small_1gf93","pickerWrapper":"tabs__pickerWrapper_1gf93","option":"tabs__option_1gf93","scrollControls":"tabs__scrollControls_1gf93","headline-system-xlarge":"tabs__headline-system-xlarge_1gf93","headline-system-large":"tabs__headline-system-large_1gf93","headline-system-medium":"tabs__headline-system-medium_1gf93","headline-system-small":"tabs__headline-system-small_1gf93","headline-system-xsmall":"tabs__headline-system-xsmall_1gf93","headline-xlarge":"tabs__headline-xlarge_1gf93","headline-large":"tabs__headline-large_1gf93","headline-medium":"tabs__headline-medium_1gf93","headline-small":"tabs__headline-small_1gf93","headline-xsmall":"tabs__headline-xsmall_1gf93","noTextStyle":"tabs__noTextStyle_1gf93"};
 
 export { mobileStyles as default };
 //# sourceMappingURL=mobile.module.css.js.map

package/modern/components/primary-tablist/mobile.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile.module.css.js","sources":["../../src/components/primary-tablist/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../vars.css';\n@import './text-styles.module.css';\n\n.title {\n    composes: title from 'index.module.css';\n}\n\n.mobile {\n    & .title {\n        padding: var(--primary-tablist-mobile-padding);\n\n        & + .title {\n            margin-left: var(--primary-tablist-mobile-gaps);\n        }\n    }\n\n    @mixin text-style;\n    @mixin text-style-mobile;\n}\n\n.title.noTextStyle {\n    @mixin paragraph_primary_medium;\n}\n"],"names":[],"mappings":";;AAEgB,qBAAe,CAAC,OAAO,CAAC,qCAAqC,CAAC,QAAQ,CAAC,oBAAoB,CAAC,yBAAyB,CAAC,qCAAqC,CAAC,0BAA0B,CAAC,sCAAsC,CAAC,yBAAyB,CAAC,qCAAqC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,eAAe,CAAC,2BAA2B,CAAC,QAAQ,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,wBAAwB,CAAC,oCAAoC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,wBAAwB,CAAC,oCAAoC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,wBAAwB,CAAC,oCAAoC,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,aAAa,CAAC,yBAAyB,CAAC;;;;"}
+{"version":3,"file":"mobile.module.css.js","sources":["../../src/components/primary-tablist/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../vars.css';\n@import './text-styles.module.css';\n\n.title {\n    composes: title from 'index.module.css';\n}\n\n.mobile {\n    & .title {\n        padding: var(--primary-tablist-mobile-padding);\n\n        & + .title {\n            margin-left: var(--primary-tablist-mobile-gaps);\n        }\n    }\n\n    @mixin text-style;\n    @mixin text-style-mobile;\n}\n\n.title.noTextStyle {\n    @mixin paragraph_primary_medium;\n}\n"],"names":[],"mappings":";;AAEgB,qBAAe,CAAC,OAAO,CAAC,qCAAqC,CAAC,QAAQ,CAAC,oBAAoB,CAAC,yBAAyB,CAAC,qCAAqC,CAAC,0BAA0B,CAAC,sCAAsC,CAAC,yBAAyB,CAAC,qCAAqC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,sBAAsB,CAAC,kCAAkC,CAAC,eAAe,CAAC,2BAA2B,CAAC,QAAQ,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,wBAAwB,CAAC,oCAAoC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,wBAAwB,CAAC,oCAAoC,CAAC,uBAAuB,CAAC,mCAAmC,CAAC,wBAAwB,CAAC,oCAAoC,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,aAAa,CAAC,yBAAyB,CAAC;;;;"}

package/modern/components/scroll-controls/Component.d.ts

@@ -1,6 +1,6 @@
 import React, { type RefObject } from 'react';
 import { type TabsProps } from '../../typings';
-declare type ScrollControlsProps = {
+type ScrollControlsProps = {
     className?: string;
     view: Exclude<TabsProps['view'], undefined>;
     size: TabsProps['size'];

package/modern/components/scroll-controls/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/scroll-controls/Component.tsx"],"sourcesContent":["import React, { forwardRef, type RefObject, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport _debounce from 'lodash/debounce';\n\nimport { IconButton } from '@alfalab/core-components-icon-button';\nimport { ChevronLeftCompactSIcon } from '@alfalab/icons-glyph/ChevronLeftCompactSIcon';\nimport { ChevronRightCompactSIcon } from '@alfalab/icons-glyph/ChevronRightCompactSIcon';\n\nimport { type TabsProps } from '../../typings';\n\nimport { getDisabledState, scrollIntoFirstTab, scrollIntoLastTab } from './utils';\n\nimport styles from './index.module.css';\n\ntype ScrollControlsProps = {\n    className?: string;\n    view: Exclude<TabsProps['view'], undefined>;\n    size: TabsProps['size'];\n    containerRef: RefObject<HTMLDivElement>;\n    showSkeleton?: boolean;\n};\n\nexport const ScrollControls = forwardRef<HTMLDivElement, ScrollControlsProps>(\n    ({ containerRef, view, size: sizeProp, className, showSkeleton }, ref) => {\n        const container = containerRef.current;\n        const [disabledState, updateDisabledState] = useState(() => getDisabledState(container));\n\n        useEffect(() => {\n            const handleScroll = _debounce(\n                () => updateDisabledState(getDisabledState(container)),\n                100,\n                { leading: true, maxWait: 100, trailing: true },\n            );\n\n            container?.addEventListener('scroll', handleScroll);\n\n            return () => container?.removeEventListener('scroll', handleScroll);\n        }, [container]);\n\n        const getSize = () => {\n            if (view === 'primary') {\n                return sizeProp === 'xl' ? 32 : 24;\n            }\n\n            return sizeProp && ['s', 'm', 'l', 'xl'].includes(sizeProp) ? 48 : 32;\n        };\n\n        const handleScrollLeft = () => scrollIntoFirstTab(container);\n\n        const handleScrollRight = () => scrollIntoLastTab(container);\n\n        const commonButtonProps = {\n            className: styles.button,\n            size: getSize(),\n            view: 'secondary',\n        } as const;\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    styles[view],\n                    sizeProp && styles[sizeProp],\n                    className,\n                    {\n                        [styles.borderVisible]: !disabledState.toRight,\n                    },\n                )}\n            >\n                <IconButton\n                    {...commonButtonProps}\n                    icon={ChevronLeftCompactSIcon}\n                    disabled={disabledState.toLeft || showSkeleton}\n                    onClick={handleScrollLeft}\n                />\n                <IconButton\n                    {...commonButtonProps}\n                    icon={ChevronRightCompactSIcon}\n                    disabled={disabledState.toRight || showSkeleton}\n                    onClick={handleScrollRight}\n                />\n            </div>\n        );\n    },\n);\n\nScrollControls.displayName = 'ScrollControls';\n"],"names":[],"mappings":";;;;;;;;;MAsBa,cAAc,GAAG,UAAU,CACpC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,GAAG,KAAI;AACrE,IAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AACtC,IAAA,MAAM,CAAC,aAAa,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,MAAM,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAExF,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,YAAY,GAAG,SAAS,CAC1B,MAAM,mBAAmB,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,EACtD,GAAG,EACH,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAClD;AAED,QAAA,SAAS,EAAE,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QAEnD,OAAO,MAAM,SAAS,EAAE,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;AACvE,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,MAAM,OAAO,GAAG,MAAK;QACjB,IAAI,IAAI,KAAK,SAAS,EAAE;YACpB,OAAO,QAAQ,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE;AACrC;QAED,OAAO,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE;AACzE,KAAC;IAED,MAAM,gBAAgB,GAAG,MAAM,kBAAkB,CAAC,SAAS,CAAC;IAE5D,MAAM,iBAAiB,GAAG,MAAM,iBAAiB,CAAC,SAAS,CAAC;AAE5D,IAAA,MAAM,iBAAiB,GAAG;QACtB,SAAS,EAAE,MAAM,CAAC,MAAM;QACxB,IAAI,EAAE,OAAO,EAAE;AACf,QAAA,IAAI,EAAE,WAAW;KACX;IAEV,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,IAAI,CAAC,EACZ,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC5B,SAAS,EACT;YACI,CAAC,MAAM,CAAC,aAAa,GAAG,CAAC,aAAa,CAAC,OAAO;SACjD,CACJ,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EACH,EAAA,GAAA,iBAAiB,EACrB,IAAI,EAAE,uBAAuB,EAC7B,QAAQ,EAAE,aAAa,CAAC,MAAM,IAAI,YAAY,EAC9C,OAAO,EAAE,gBAAgB,EAC3B,CAAA;QACF,KAAC,CAAA,aAAA,CAAA,UAAU,OACH,iBAAiB,EACrB,IAAI,EAAE,wBAAwB,EAC9B,QAAQ,EAAE,aAAa,CAAC,OAAO,IAAI,YAAY,EAC/C,OAAO,EAAE,iBAAiB,EAAA,CAC5B,CACA;AAEd,CAAC;AAGL,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/scroll-controls/Component.tsx"],"sourcesContent":["import React, { forwardRef, type RefObject, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport _debounce from 'lodash/debounce';\n\nimport { IconButton } from '@alfalab/core-components-icon-button';\nimport { ChevronLeftCompactSIcon } from '@alfalab/icons-glyph/ChevronLeftCompactSIcon';\nimport { ChevronRightCompactSIcon } from '@alfalab/icons-glyph/ChevronRightCompactSIcon';\n\nimport { type TabsProps } from '../../typings';\n\nimport { getDisabledState, scrollIntoFirstTab, scrollIntoLastTab } from './utils';\n\nimport styles from './index.module.css';\n\ntype ScrollControlsProps = {\n    className?: string;\n    view: Exclude<TabsProps['view'], undefined>;\n    size: TabsProps['size'];\n    containerRef: RefObject<HTMLDivElement>;\n    showSkeleton?: boolean;\n};\n\nexport const ScrollControls = forwardRef<HTMLDivElement, ScrollControlsProps>(\n    ({ containerRef, view, size: sizeProp, className, showSkeleton }, ref) => {\n        const container = containerRef.current;\n        const [disabledState, updateDisabledState] = useState(() => getDisabledState(container));\n\n        useEffect(() => {\n            const handleScroll = _debounce(\n                () => updateDisabledState(getDisabledState(container)),\n                100,\n                { leading: true, maxWait: 100, trailing: true },\n            );\n\n            container?.addEventListener('scroll', handleScroll);\n\n            return () => container?.removeEventListener('scroll', handleScroll);\n        }, [container]);\n\n        const getSize = () => {\n            if (view === 'primary') {\n                return sizeProp === 'xl' ? 32 : 24;\n            }\n\n            return sizeProp && ['s', 'm', 'l', 'xl'].includes(sizeProp) ? 48 : 32;\n        };\n\n        const handleScrollLeft = () => scrollIntoFirstTab(container);\n\n        const handleScrollRight = () => scrollIntoLastTab(container);\n\n        const commonButtonProps = {\n            className: styles.button,\n            size: getSize(),\n            view: 'secondary',\n        } as const;\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    styles[view],\n                    sizeProp && styles[sizeProp],\n                    className,\n                    {\n                        [styles.borderVisible]: !disabledState.toRight,\n                    },\n                )}\n            >\n                <IconButton\n                    {...commonButtonProps}\n                    icon={ChevronLeftCompactSIcon}\n                    disabled={disabledState.toLeft || showSkeleton}\n                    onClick={handleScrollLeft}\n                />\n                <IconButton\n                    {...commonButtonProps}\n                    icon={ChevronRightCompactSIcon}\n                    disabled={disabledState.toRight || showSkeleton}\n                    onClick={handleScrollRight}\n                />\n            </div>\n        );\n    },\n);\n\nScrollControls.displayName = 'ScrollControls';\n"],"names":[],"mappings":";;;;;;;;;MAsBa,cAAc,GAAG,UAAU,CACpC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,GAAG,KAAI;AACrE,IAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AACtC,IAAA,MAAM,CAAC,aAAa,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,MAAM,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAExF,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,YAAY,GAAG,SAAS,CAC1B,MAAM,mBAAmB,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,EACtD,GAAG,EACH,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAClD;AAED,QAAA,SAAS,EAAE,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QAEnD,OAAO,MAAM,SAAS,EAAE,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;AACvE,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,MAAM,OAAO,GAAG,MAAK;AACjB,QAAA,IAAI,IAAI,KAAK,SAAS,EAAE;YACpB,OAAO,QAAQ,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE;;QAGtC,OAAO,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE;AACzE,KAAC;IAED,MAAM,gBAAgB,GAAG,MAAM,kBAAkB,CAAC,SAAS,CAAC;IAE5D,MAAM,iBAAiB,GAAG,MAAM,iBAAiB,CAAC,SAAS,CAAC;AAE5D,IAAA,MAAM,iBAAiB,GAAG;QACtB,SAAS,EAAE,MAAM,CAAC,MAAM;QACxB,IAAI,EAAE,OAAO,EAAE;AACf,QAAA,IAAI,EAAE,WAAW;KACX;IAEV,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,IAAI,CAAC,EACZ,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC5B,SAAS,EACT;YACI,CAAC,MAAM,CAAC,aAAa,GAAG,CAAC,aAAa,CAAC,OAAO;SACjD,CACJ,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EACH,EAAA,GAAA,iBAAiB,EACrB,IAAI,EAAE,uBAAuB,EAC7B,QAAQ,EAAE,aAAa,CAAC,MAAM,IAAI,YAAY,EAC9C,OAAO,EAAE,gBAAgB,EAC3B,CAAA;QACF,KAAC,CAAA,aAAA,CAAA,UAAU,OACH,iBAAiB,EACrB,IAAI,EAAE,wBAAwB,EAC9B,QAAQ,EAAE,aAAa,CAAC,OAAO,IAAI,YAAY,EAC/C,OAAO,EAAE,iBAAiB,EAAA,CAC5B,CACA;AAEd,CAAC;AAGL,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/modern/components/scroll-controls/index.css

@@ -12,16 +12,16 @@
 :root {
     --primary-tablist-bottom-border-color: var(--color-light-neutral-translucent-500);
 }
-.tabs__component_kn4jt {
+.tabs__component_l47fh {
     position: relative;
     display: flex;
     flex-shrink: 0;
 }
-.tabs__primary_kn4jt {
+.tabs__primary_l47fh {
     align-items: flex-start;
     justify-content: flex-end;
 }
-.tabs__primary_kn4jt:after {
+.tabs__primary_l47fh:after {
         content: '';
         display: block;
         position: absolute;
@@ -30,21 +30,21 @@
         width: 100%;
         background-color: var(--primary-tablist-bottom-border-color);
     }
-.tabs__primary_kn4jt {
+.tabs__primary_l47fh {
 
-    .tabs__button_kn4jt:first-child {
+    .tabs__button_l47fh:first-child {
         padding-left: var(--gap-8);
         margin-right: var(--gap-8);
     }
 }
-.tabs__primary_kn4jt.tabs__xl_kn4jt .tabs__button_kn4jt:first-child {
+.tabs__primary_l47fh.tabs__xl_l47fh .tabs__button_l47fh:first-child {
         margin-right: var(--gap-4);
     }
-.tabs__secondary_kn4jt {
+.tabs__secondary_l47fh {
     align-items: center;
     justify-content: center;
 }
-.tabs__secondary_kn4jt:before {
+.tabs__secondary_l47fh:before {
         content: '';
         display: block;
         position: absolute;
@@ -55,13 +55,13 @@
         transition: background-color 0.3s ease;
         bottom: var(--gap-0);
     }
-.tabs__secondary_kn4jt.tabs__xs_kn4jt {
+.tabs__secondary_l47fh.tabs__xs_l47fh {
         width: 76px;
 
-        .tabs__button_kn4jt:first-child {
+        .tabs__button_l47fh:first-child {
             margin-right: var(--gap-4);
         }
     }
-.tabs__borderVisible_kn4jt:before {
+.tabs__borderVisible_l47fh:before {
     background-color: var(--color-light-neutral-translucent-300);
 }

package/modern/components/scroll-controls/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"tabs__component_kn4jt","primary":"tabs__primary_kn4jt","button":"tabs__button_kn4jt","xl":"tabs__xl_kn4jt","secondary":"tabs__secondary_kn4jt","xs":"tabs__xs_kn4jt","borderVisible":"tabs__borderVisible_kn4jt"};
+const styles = {"component":"tabs__component_l47fh","primary":"tabs__primary_l47fh","button":"tabs__button_l47fh","xl":"tabs__xl_l47fh","secondary":"tabs__secondary_l47fh","xs":"tabs__xs_l47fh","borderVisible":"tabs__borderVisible_l47fh"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/scroll-controls/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/scroll-controls/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../vars.css';\n\n.component {\n    position: relative;\n    display: flex;\n    flex-shrink: 0;\n}\n\n.primary {\n    align-items: flex-start;\n    justify-content: flex-end;\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        bottom: 1px;\n        height: 1px;\n        width: 100%;\n        background-color: var(--primary-tablist-bottom-border-color);\n    }\n\n    .button:first-child {\n        padding-left: var(--gap-8);\n        margin-right: var(--gap-8);\n    }\n\n    &.xl .button:first-child {\n        margin-right: var(--gap-4);\n    }\n}\n\n.secondary {\n    align-items: center;\n    justify-content: center;\n\n    &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: var(--gap-0);\n        left: var(--gap-0);\n        width: 1px;\n        background-color: transparent;\n        transition: background-color 0.3s ease;\n        bottom: var(--gap-0);\n    }\n\n    &.xs {\n        width: 76px;\n\n        .button:first-child {\n            margin-right: var(--gap-4);\n        }\n    }\n}\n\n.borderVisible:before {\n    background-color: var(--color-light-neutral-translucent-300);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,uBAAuB,CAAC,SAAS,CAAC,qBAAqB,CAAC,QAAQ,CAAC,oBAAoB,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,uBAAuB,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,2BAA2B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/scroll-controls/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../vars.css';\n\n.component {\n    position: relative;\n    display: flex;\n    flex-shrink: 0;\n}\n\n.primary {\n    align-items: flex-start;\n    justify-content: flex-end;\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        bottom: 1px;\n        height: 1px;\n        width: 100%;\n        background-color: var(--primary-tablist-bottom-border-color);\n    }\n\n    .button:first-child {\n        padding-left: var(--gap-8);\n        margin-right: var(--gap-8);\n    }\n\n    &.xl .button:first-child {\n        margin-right: var(--gap-4);\n    }\n}\n\n.secondary {\n    align-items: center;\n    justify-content: center;\n\n    &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: var(--gap-0);\n        left: var(--gap-0);\n        width: 1px;\n        background-color: transparent;\n        transition: background-color 0.3s ease;\n        bottom: var(--gap-0);\n    }\n\n    &.xs {\n        width: 76px;\n\n        .button:first-child {\n            margin-right: var(--gap-4);\n        }\n    }\n}\n\n.borderVisible:before {\n    background-color: var(--color-light-neutral-translucent-300);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,uBAAuB,CAAC,SAAS,CAAC,qBAAqB,CAAC,QAAQ,CAAC,oBAAoB,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,uBAAuB,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,2BAA2B,CAAC;;;;"}

package/modern/components/scroll-controls/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/scroll-controls/utils.ts"],"sourcesContent":["const ADDITIONAL_OFFSET = 15;\n\nfunction getTabs(container: HTMLDivElement) {\n    return Array.from(container.querySelectorAll<HTMLButtonElement>('button[role=\"tab\"]'));\n}\n\nfunction findLastVisibleTab(container: HTMLDivElement) {\n    const tabs = getTabs(container);\n\n    return tabs.reduce((res, tab) => {\n        if (tab.offsetLeft + ADDITIONAL_OFFSET < container.clientWidth + container.scrollLeft) {\n            return tab;\n        }\n\n        return res;\n    }, tabs[0]);\n}\n\nfunction findFirstVisibleTab(container: HTMLDivElement) {\n    const tabs = getTabs(container);\n\n    return tabs.reduceRight(\n        (res, tab) => {\n            if (tab.offsetLeft + tab.clientWidth > container.scrollLeft + ADDITIONAL_OFFSET) {\n                return tab;\n            }\n\n            return res;\n        },\n        tabs[tabs.length - 1],\n    );\n}\n\nexport function scrollIntoLastTab(container: HTMLDivElement | null) {\n    if (!container) return;\n\n    findLastVisibleTab(container).scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n        inline: 'start',\n    });\n}\n\nexport function scrollIntoFirstTab(container: HTMLDivElement | null) {\n    if (!container) return;\n\n    findFirstVisibleTab(container).scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n        inline: 'end',\n    });\n}\n\nexport function getDisabledState(container: HTMLDivElement | null) {\n    if (!container) return { toLeft: false, toRight: false };\n    const scrollOffset = 2;\n\n    const toLeft = container.scrollLeft <= scrollOffset;\n    const toRight =\n        container.scrollLeft + container.clientWidth >= container.scrollWidth - scrollOffset;\n\n    return { toLeft, toRight };\n}\n"],"names":[],"mappings":"AAAA,MAAM,iBAAiB,GAAG,EAAE;AAE5B,SAAS,OAAO,CAAC,SAAyB,EAAA;IACtC,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAoB,oBAAoB,CAAC,CAAC;AAC1F;AAEA,SAAS,kBAAkB,CAAC,SAAyB,EAAA;AACjD,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC;IAE/B,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,KAAI;AAC5B,QAAA,IAAI,GAAG,CAAC,UAAU,GAAG,iBAAiB,GAAG,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE;AACnF,YAAA,OAAO,GAAG;AACb;AAED,QAAA,OAAO,GAAG;AACd,KAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;AACf;AAEA,SAAS,mBAAmB,CAAC,SAAyB,EAAA;AAClD,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC;IAE/B,OAAO,IAAI,CAAC,WAAW,CACnB,CAAC,GAAG,EAAE,GAAG,KAAI;AACT,QAAA,IAAI,GAAG,CAAC,UAAU,GAAG,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,GAAG,iBAAiB,EAAE;AAC7E,YAAA,OAAO,GAAG;AACb;AAED,QAAA,OAAO,GAAG;KACb,EACD,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CACxB;AACL;AAEM,SAAU,iBAAiB,CAAC,SAAgC,EAAA;AAC9D,IAAA,IAAI,CAAC,SAAS;QAAE;AAEhB,IAAA,kBAAkB,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC;AACzC,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,OAAO;AAClB,KAAA,CAAC;AACN;AAEM,SAAU,kBAAkB,CAAC,SAAgC,EAAA;AAC/D,IAAA,IAAI,CAAC,SAAS;QAAE;AAEhB,IAAA,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC;AAC1C,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,KAAK;AAChB,KAAA,CAAC;AACN;AAEM,SAAU,gBAAgB,CAAC,SAAgC,EAAA;AAC7D,IAAA,IAAI,CAAC,SAAS;QAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;IACxD,MAAM,YAAY,GAAG,CAAC;AAEtB,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,IAAI,YAAY;AACnD,IAAA,MAAM,OAAO,GACT,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,WAAW,GAAG,YAAY;AAExF,IAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE;AAC9B;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/scroll-controls/utils.ts"],"sourcesContent":["const ADDITIONAL_OFFSET = 15;\n\nfunction getTabs(container: HTMLDivElement) {\n    return Array.from(container.querySelectorAll<HTMLButtonElement>('button[role=\"tab\"]'));\n}\n\nfunction findLastVisibleTab(container: HTMLDivElement) {\n    const tabs = getTabs(container);\n\n    return tabs.reduce((res, tab) => {\n        if (tab.offsetLeft + ADDITIONAL_OFFSET < container.clientWidth + container.scrollLeft) {\n            return tab;\n        }\n\n        return res;\n    }, tabs[0]);\n}\n\nfunction findFirstVisibleTab(container: HTMLDivElement) {\n    const tabs = getTabs(container);\n\n    return tabs.reduceRight(\n        (res, tab) => {\n            if (tab.offsetLeft + tab.clientWidth > container.scrollLeft + ADDITIONAL_OFFSET) {\n                return tab;\n            }\n\n            return res;\n        },\n        tabs[tabs.length - 1],\n    );\n}\n\nexport function scrollIntoLastTab(container: HTMLDivElement | null) {\n    if (!container) return;\n\n    findLastVisibleTab(container).scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n        inline: 'start',\n    });\n}\n\nexport function scrollIntoFirstTab(container: HTMLDivElement | null) {\n    if (!container) return;\n\n    findFirstVisibleTab(container).scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n        inline: 'end',\n    });\n}\n\nexport function getDisabledState(container: HTMLDivElement | null) {\n    if (!container) return { toLeft: false, toRight: false };\n    const scrollOffset = 2;\n\n    const toLeft = container.scrollLeft <= scrollOffset;\n    const toRight =\n        container.scrollLeft + container.clientWidth >= container.scrollWidth - scrollOffset;\n\n    return { toLeft, toRight };\n}\n"],"names":[],"mappings":"AAAA,MAAM,iBAAiB,GAAG,EAAE;AAE5B,SAAS,OAAO,CAAC,SAAyB,EAAA;IACtC,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAoB,oBAAoB,CAAC,CAAC;AAC1F;AAEA,SAAS,kBAAkB,CAAC,SAAyB,EAAA;AACjD,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC;IAE/B,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,KAAI;AAC5B,QAAA,IAAI,GAAG,CAAC,UAAU,GAAG,iBAAiB,GAAG,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE;AACnF,YAAA,OAAO,GAAG;;AAGd,QAAA,OAAO,GAAG;AACd,KAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;AACf;AAEA,SAAS,mBAAmB,CAAC,SAAyB,EAAA;AAClD,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC;IAE/B,OAAO,IAAI,CAAC,WAAW,CACnB,CAAC,GAAG,EAAE,GAAG,KAAI;AACT,QAAA,IAAI,GAAG,CAAC,UAAU,GAAG,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,GAAG,iBAAiB,EAAE;AAC7E,YAAA,OAAO,GAAG;;AAGd,QAAA,OAAO,GAAG;KACb,EACD,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CACxB;AACL;AAEM,SAAU,iBAAiB,CAAC,SAAgC,EAAA;AAC9D,IAAA,IAAI,CAAC,SAAS;QAAE;AAEhB,IAAA,kBAAkB,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC;AACzC,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,OAAO;AAClB,KAAA,CAAC;AACN;AAEM,SAAU,kBAAkB,CAAC,SAAgC,EAAA;AAC/D,IAAA,IAAI,CAAC,SAAS;QAAE;AAEhB,IAAA,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC;AAC1C,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,KAAK;AAChB,KAAA,CAAC;AACN;AAEM,SAAU,gBAAgB,CAAC,SAAgC,EAAA;AAC7D,IAAA,IAAI,CAAC,SAAS;QAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;IACxD,MAAM,YAAY,GAAG,CAAC;AAEtB,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,IAAI,YAAY;AACnD,IAAA,MAAM,OAAO,GACT,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,WAAW,GAAG,YAAY;AAExF,IAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE;AAC9B;;;;"}

package/modern/components/scrollable-container/Component.d.ts

@@ -1,6 +1,6 @@
 import React, { type ReactNode } from 'react';
 import { type PlatformProps, type TabsProps } from '../../typings';
-export declare type ScrollableContainerProps = {
+export type ScrollableContainerProps = {
     /**
      * Дополнительный класс враппера контейнера
      */
@@ -38,4 +38,4 @@ export declare type ScrollableContainerProps = {
      */
     showSkeleton?: boolean;
 };
-export declare const ScrollableContainer: ({ containerWrapperClassName, containerClassName, scrollControlsClassName, children, activeChild, fullWidthScroll, view, size, platform, inlineStyle, showSkeleton, }: ScrollableContainerProps & Pick<TabsProps, 'fullWidthScroll'> & PlatformProps) => React.JSX.Element;
+export declare const ScrollableContainer: ({ containerWrapperClassName, containerClassName, scrollControlsClassName, children, activeChild, fullWidthScroll, view, size, platform, inlineStyle, showSkeleton, }: ScrollableContainerProps & Pick<TabsProps, "fullWidthScroll"> & PlatformProps) => React.JSX.Element;

package/modern/components/scrollable-container/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/scrollable-container/Component.tsx"],"sourcesContent":["import React, { type ReactNode, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\nimport { compute } from 'compute-scroll-into-view';\n\nimport { type PlatformProps, type TabsProps } from '../../typings';\nimport { ScrollControls } from '../scroll-controls';\n\nimport styles from './index.module.css';\n\n/**\n * Дополнительная прокрутка при клике на не поместившийся таб\n */\nconst ADDITIONAL_SCROLL_LEFT_VALUE = 50;\n\nexport type ScrollableContainerProps = {\n    /**\n     * Дополнительный класс враппера контейнера\n     */\n    containerWrapperClassName?: string;\n\n    /**\n     * Дополнительный класс контейнера\n     */\n    containerClassName?: string;\n\n    /**\n     * Дополнительный класс кнопок прокрутки\n     */\n    scrollControlsClassName?: string;\n\n    /**\n     * Дочерние компоненты\n     */\n    children: ReactNode;\n\n    /**\n     * Активный элемент (всегда будет в видимой области)\n     */\n    activeChild: HTMLElement | null;\n\n    /**\n     * Внешний вид заголовков табов\n     */\n    view: Exclude<TabsProps['view'], undefined>;\n\n    /**\n     *  Размер\n     */\n    size: TabsProps['size'];\n\n    /**\n     * Дополнительные инлайн стили для заголовка\n     */\n    inlineStyle?: React.CSSProperties;\n\n    /**\n     * Показать скелетон\n     */\n    showSkeleton?: boolean;\n};\n\nconst isOverflown = (\n    { clientWidth, scrollWidth }: HTMLDivElement,\n    controlsNode: HTMLDivElement | null,\n) => {\n    const controlsWidth = controlsNode?.offsetWidth || 0;\n\n    return scrollWidth > clientWidth + controlsWidth;\n};\n\nexport const ScrollableContainer = ({\n    containerWrapperClassName,\n    containerClassName,\n    scrollControlsClassName,\n    children,\n    activeChild,\n    fullWidthScroll,\n    view,\n    size,\n    platform,\n    inlineStyle,\n    showSkeleton,\n}: ScrollableContainerProps & Pick<TabsProps, 'fullWidthScroll'> & PlatformProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const controlsRef = useRef<HTMLDivElement>(null);\n    const [overflown, setOverflown] = useState(false);\n\n    useEffect(() => {\n        if (activeChild) {\n            const actions = compute(activeChild, {\n                scrollMode: 'if-needed',\n                block: 'nearest',\n                inline: 'nearest',\n                boundary: (parent) => !parent.isSameNode(containerRef.current),\n            });\n\n            // TODO: animate?\n            actions.forEach(({ el, left }) => {\n                // eslint-disable-next-line no-param-reassign\n                el.scrollLeft =\n                    el.scrollLeft > left\n                        ? left - ADDITIONAL_SCROLL_LEFT_VALUE\n                        : left + ADDITIONAL_SCROLL_LEFT_VALUE;\n            });\n        }\n    }, [activeChild]);\n\n    useEffect(() => {\n        const scrollableNode = containerRef.current;\n        const tabsContainer = scrollableNode?.firstElementChild;\n\n        if (platform === 'desktop' && scrollableNode && tabsContainer && window.ResizeObserver) {\n            const observerCb = () => {\n                if (isOverflown(scrollableNode, controlsRef.current)) {\n                    setOverflown(true);\n                } else {\n                    setOverflown(false);\n                }\n            };\n\n            const observer = new ResizeObserver(observerCb);\n\n            observer.observe(scrollableNode);\n            observer.observe(tabsContainer);\n\n            return () => observer.disconnect();\n        }\n\n        return () => {};\n    }, [platform]);\n\n    return (\n        <div\n            className={cn(styles.scrollableContainerWrapper, containerWrapperClassName)}\n            style={inlineStyle}\n        >\n            <div\n                ref={containerRef}\n                className={cn(styles.container, containerClassName, {\n                    [styles.fullWidthScroll]: fullWidthScroll,\n                })}\n            >\n                {children}\n            </div>\n            {overflown && platform === 'desktop' ? (\n                <ScrollControls\n                    className={scrollControlsClassName}\n                    ref={controlsRef}\n                    containerRef={containerRef}\n                    view={view}\n                    size={size}\n                    showSkeleton={showSkeleton}\n                />\n            ) : null}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/scrollable-container/Component.tsx"],"sourcesContent":["import React, { type ReactNode, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\nimport { compute } from 'compute-scroll-into-view';\n\nimport { type PlatformProps, type TabsProps } from '../../typings';\nimport { ScrollControls } from '../scroll-controls';\n\nimport styles from './index.module.css';\n\n/**\n * Дополнительная прокрутка при клике на не поместившийся таб\n */\nconst ADDITIONAL_SCROLL_LEFT_VALUE = 50;\n\nexport type ScrollableContainerProps = {\n    /**\n     * Дополнительный класс враппера контейнера\n     */\n    containerWrapperClassName?: string;\n\n    /**\n     * Дополнительный класс контейнера\n     */\n    containerClassName?: string;\n\n    /**\n     * Дополнительный класс кнопок прокрутки\n     */\n    scrollControlsClassName?: string;\n\n    /**\n     * Дочерние компоненты\n     */\n    children: ReactNode;\n\n    /**\n     * Активный элемент (всегда будет в видимой области)\n     */\n    activeChild: HTMLElement | null;\n\n    /**\n     * Внешний вид заголовков табов\n     */\n    view: Exclude<TabsProps['view'], undefined>;\n\n    /**\n     *  Размер\n     */\n    size: TabsProps['size'];\n\n    /**\n     * Дополнительные инлайн стили для заголовка\n     */\n    inlineStyle?: React.CSSProperties;\n\n    /**\n     * Показать скелетон\n     */\n    showSkeleton?: boolean;\n};\n\nconst isOverflown = (\n    { clientWidth, scrollWidth }: HTMLDivElement,\n    controlsNode: HTMLDivElement | null,\n) => {\n    const controlsWidth = controlsNode?.offsetWidth || 0;\n\n    return scrollWidth > clientWidth + controlsWidth;\n};\n\nexport const ScrollableContainer = ({\n    containerWrapperClassName,\n    containerClassName,\n    scrollControlsClassName,\n    children,\n    activeChild,\n    fullWidthScroll,\n    view,\n    size,\n    platform,\n    inlineStyle,\n    showSkeleton,\n}: ScrollableContainerProps & Pick<TabsProps, 'fullWidthScroll'> & PlatformProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const controlsRef = useRef<HTMLDivElement>(null);\n    const [overflown, setOverflown] = useState(false);\n\n    useEffect(() => {\n        if (activeChild) {\n            const actions = compute(activeChild, {\n                scrollMode: 'if-needed',\n                block: 'nearest',\n                inline: 'nearest',\n                boundary: (parent) => !parent.isSameNode(containerRef.current),\n            });\n\n            // TODO: animate?\n            actions.forEach(({ el, left }) => {\n                // eslint-disable-next-line no-param-reassign\n                el.scrollLeft =\n                    el.scrollLeft > left\n                        ? left - ADDITIONAL_SCROLL_LEFT_VALUE\n                        : left + ADDITIONAL_SCROLL_LEFT_VALUE;\n            });\n        }\n    }, [activeChild]);\n\n    useEffect(() => {\n        const scrollableNode = containerRef.current;\n        const tabsContainer = scrollableNode?.firstElementChild;\n\n        if (platform === 'desktop' && scrollableNode && tabsContainer && window.ResizeObserver) {\n            const observerCb = () => {\n                if (isOverflown(scrollableNode, controlsRef.current)) {\n                    setOverflown(true);\n                } else {\n                    setOverflown(false);\n                }\n            };\n\n            const observer = new ResizeObserver(observerCb);\n\n            observer.observe(scrollableNode);\n            observer.observe(tabsContainer);\n\n            return () => observer.disconnect();\n        }\n\n        return () => {};\n    }, [platform]);\n\n    return (\n        <div\n            className={cn(styles.scrollableContainerWrapper, containerWrapperClassName)}\n            style={inlineStyle}\n        >\n            <div\n                ref={containerRef}\n                className={cn(styles.container, containerClassName, {\n                    [styles.fullWidthScroll]: fullWidthScroll,\n                })}\n            >\n                {children}\n            </div>\n            {overflown && platform === 'desktop' ? (\n                <ScrollControls\n                    className={scrollControlsClassName}\n                    ref={controlsRef}\n                    containerRef={containerRef}\n                    view={view}\n                    size={size}\n                    showSkeleton={showSkeleton}\n                />\n            ) : null}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/modern/components/scrollable-container/index.css

@@ -7,10 +7,10 @@
     --gap-4-neg: var(--gap-2xs-neg);
     --gap-16-neg: var(--gap-m-neg);
 }
-.tabs__scrollableContainerWrapper_oj2rw {
+.tabs__scrollableContainerWrapper_i5h6l {
     display: flex;
 }
-.tabs__container_oj2rw {
+.tabs__container_i5h6l {
     position: relative;
     overflow-x: auto;
     overflow-y: hidden;
@@ -20,13 +20,13 @@
     margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);
     padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);
 }
-.tabs__container_oj2rw::-webkit-scrollbar {
+.tabs__container_i5h6l::-webkit-scrollbar {
         display: none;
     }
-.tabs__container_oj2rw > * {
+.tabs__container_i5h6l > * {
         flex-shrink: 0;
     }
-.tabs__fullWidthScroll_oj2rw {
+.tabs__fullWidthScroll_i5h6l {
     padding-left: var(--gap-0);
     margin: var(--gap-4-neg) var(--gap-16-neg);
 }

package/modern/components/scrollable-container/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"scrollableContainerWrapper":"tabs__scrollableContainerWrapper_oj2rw","container":"tabs__container_oj2rw","fullWidthScroll":"tabs__fullWidthScroll_oj2rw"};
+const styles = {"scrollableContainerWrapper":"tabs__scrollableContainerWrapper_i5h6l","container":"tabs__container_i5h6l","fullWidthScroll":"tabs__fullWidthScroll_i5h6l"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/scrollable-container/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/scrollable-container/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../vars.css';\n\n.scrollableContainerWrapper {\n    display: flex;\n}\n\n.container {\n    position: relative;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    flex: 1;\n\n    /* focus-outline fix */\n    margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);\n    padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);\n\n    &::-webkit-scrollbar {\n        display: none;\n    }\n\n    & > * {\n        flex-shrink: 0;\n    }\n}\n\n.fullWidthScroll {\n    padding-left: var(--gap-0);\n    margin: var(--gap-4-neg) var(--gap-16-neg);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,4BAA4B,CAAC,wCAAwC,CAAC,WAAW,CAAC,uBAAuB,CAAC,iBAAiB,CAAC,6BAA6B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/scrollable-container/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../vars.css';\n\n.scrollableContainerWrapper {\n    display: flex;\n}\n\n.container {\n    position: relative;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    flex: 1;\n\n    /* focus-outline fix */\n    margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);\n    padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);\n\n    &::-webkit-scrollbar {\n        display: none;\n    }\n\n    & > * {\n        flex-shrink: 0;\n    }\n}\n\n.fullWidthScroll {\n    padding-left: var(--gap-0);\n    margin: var(--gap-4-neg) var(--gap-16-neg);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,4BAA4B,CAAC,wCAAwC,CAAC,WAAW,CAAC,uBAAuB,CAAC,iBAAiB,CAAC,6BAA6B,CAAC;;;;"}

package/modern/components/secondary-tablist/Component.desktop.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type SecondaryTabListProps } from '../../typings';
-export declare type SecondaryTabListDesktopProps = Omit<SecondaryTabListProps, 'tagSize' | 'breakpoint'>;
+export type SecondaryTabListDesktopProps = Omit<SecondaryTabListProps, 'tagSize' | 'breakpoint'>;
 export declare const SecondaryTabListDesktop: ({ className, size, tagView, ...restProps }: SecondaryTabListDesktopProps) => React.JSX.Element;

package/modern/components/secondary-tablist/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/secondary-tablist/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { Skeleton } from '@alfalab/core-components-skeleton';\n\nimport { useTabs } from '../../hooks/use-tabs';\nimport { type PlatformProps, type SecondaryTabListProps, type Styles } from '../../typings';\nimport { ScrollableContainer } from '../scrollable-container';\n\nfunction getBorderRadius(\n    shape?: SecondaryTabListProps['tagShape'],\n    size?: SecondaryTabListProps['size'],\n    isMobile?: boolean,\n) {\n    if (shape === 'rounded') {\n        return 99;\n    }\n\n    if (size === 'xxs') return isMobile ? 8 : 6;\n    if (size === 'xs' || size === 's') return isMobile ? 12 : 8;\n\n    return isMobile ? 16 : 4;\n}\n\nexport const SecondaryTabList = ({\n    styles = {},\n    className,\n    containerClassName,\n    size,\n    titles = [],\n    selectedId = titles.length ? titles[0].id : undefined,\n    scrollable = true,\n    fullWidthScroll,\n    tagSize = 40,\n    onChange,\n    dataTestId,\n    TagComponent,\n    platform,\n    tagShape = 'rounded',\n    tagView,\n    inlineStyle,\n    showSkeleton,\n    skeletonProps,\n}: SecondaryTabListProps & Styles & PlatformProps) => {\n    const { focusedTab, selectedTab, getTabListItemProps } = useTabs({\n        titles,\n        selectedId,\n        onChange,\n    });\n\n    const renderContent = () => {\n        if (!TagComponent) return null;\n\n        return (\n            <div\n                role='tablist'\n                data-test-id={dataTestId}\n                className={cn(styles.component, className, size && styles[size], {\n                    [styles.fullWidthScroll]: fullWidthScroll,\n                })}\n            >\n                {titles.map((item, index) => {\n                    if (item.hidden) return null;\n\n                    const renderTab = () => (\n                        <TagComponent\n                            {...getTabListItemProps(index)}\n                            shape={tagShape}\n                            view={tagView}\n                            key={item.id}\n                            className={cn(styles.title, item.toggleClassName)}\n                            checked={item.id === selectedId}\n                            size={tagSize}\n                            rightAddons={item.rightAddons}\n                        >\n                            {item.title}\n                        </TagComponent>\n                    );\n\n                    return showSkeleton ? (\n                        <Skeleton\n                            {...skeletonProps}\n                            className={cn(styles.skeleton, skeletonProps?.className)}\n                            key={item.id}\n                            visible={true}\n                            style={{\n                                ...skeletonProps?.style,\n                                borderRadius: getBorderRadius(\n                                    tagShape,\n                                    (\n                                        {\n                                            32: 'xxs',\n                                            40: 'xs',\n                                            48: 's',\n                                            56: 'm',\n                                            64: 'l',\n                                            72: 'xl',\n                                        } as const\n                                    )[tagSize],\n                                    platform === 'mobile',\n                                ),\n                            }}\n                        >\n                            {renderTab()}\n                        </Skeleton>\n                    ) : (\n                        renderTab()\n                    );\n                })}\n            </div>\n        );\n    };\n\n    return scrollable ? (\n        <ScrollableContainer\n            activeChild={focusedTab || selectedTab}\n            containerClassName={containerClassName}\n            fullWidthScroll={fullWidthScroll}\n            view='secondary'\n            size={size}\n            platform={platform}\n            inlineStyle={inlineStyle}\n            showSkeleton={showSkeleton}\n        >\n            {renderContent()}\n        </ScrollableContainer>\n    ) : (\n        <div className={cn(styles.container, containerClassName)} style={inlineStyle}>\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/secondary-tablist/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { Skeleton } from '@alfalab/core-components-skeleton';\n\nimport { useTabs } from '../../hooks/use-tabs';\nimport { type PlatformProps, type SecondaryTabListProps, type Styles } from '../../typings';\nimport { ScrollableContainer } from '../scrollable-container';\n\nfunction getBorderRadius(\n    shape?: SecondaryTabListProps['tagShape'],\n    size?: SecondaryTabListProps['size'],\n    isMobile?: boolean,\n) {\n    if (shape === 'rounded') {\n        return 99;\n    }\n\n    if (size === 'xxs') return isMobile ? 8 : 6;\n    if (size === 'xs' || size === 's') return isMobile ? 12 : 8;\n\n    return isMobile ? 16 : 4;\n}\n\nexport const SecondaryTabList = ({\n    styles = {},\n    className,\n    containerClassName,\n    size,\n    titles = [],\n    selectedId = titles.length ? titles[0].id : undefined,\n    scrollable = true,\n    fullWidthScroll,\n    tagSize = 40,\n    onChange,\n    dataTestId,\n    TagComponent,\n    platform,\n    tagShape = 'rounded',\n    tagView,\n    inlineStyle,\n    showSkeleton,\n    skeletonProps,\n}: SecondaryTabListProps & Styles & PlatformProps) => {\n    const { focusedTab, selectedTab, getTabListItemProps } = useTabs({\n        titles,\n        selectedId,\n        onChange,\n    });\n\n    const renderContent = () => {\n        if (!TagComponent) return null;\n\n        return (\n            <div\n                role='tablist'\n                data-test-id={dataTestId}\n                className={cn(styles.component, className, size && styles[size], {\n                    [styles.fullWidthScroll]: fullWidthScroll,\n                })}\n            >\n                {titles.map((item, index) => {\n                    if (item.hidden) return null;\n\n                    const renderTab = () => (\n                        <TagComponent\n                            {...getTabListItemProps(index)}\n                            shape={tagShape}\n                            view={tagView}\n                            key={item.id}\n                            className={cn(styles.title, item.toggleClassName)}\n                            checked={item.id === selectedId}\n                            size={tagSize}\n                            rightAddons={item.rightAddons}\n                        >\n                            {item.title}\n                        </TagComponent>\n                    );\n\n                    return showSkeleton ? (\n                        <Skeleton\n                            {...skeletonProps}\n                            className={cn(styles.skeleton, skeletonProps?.className)}\n                            key={item.id}\n                            visible={true}\n                            style={{\n                                ...skeletonProps?.style,\n                                borderRadius: getBorderRadius(\n                                    tagShape,\n                                    (\n                                        {\n                                            32: 'xxs',\n                                            40: 'xs',\n                                            48: 's',\n                                            56: 'm',\n                                            64: 'l',\n                                            72: 'xl',\n                                        } as const\n                                    )[tagSize],\n                                    platform === 'mobile',\n                                ),\n                            }}\n                        >\n                            {renderTab()}\n                        </Skeleton>\n                    ) : (\n                        renderTab()\n                    );\n                })}\n            </div>\n        );\n    };\n\n    return scrollable ? (\n        <ScrollableContainer\n            activeChild={focusedTab || selectedTab}\n            containerClassName={containerClassName}\n            fullWidthScroll={fullWidthScroll}\n            view='secondary'\n            size={size}\n            platform={platform}\n            inlineStyle={inlineStyle}\n            showSkeleton={showSkeleton}\n        >\n            {renderContent()}\n        </ScrollableContainer>\n    ) : (\n        <div className={cn(styles.container, containerClassName)} style={inlineStyle}>\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/modern/components/secondary-tablist/Component.mobile.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type SecondaryTabListProps } from '../../typings';
-export declare type SecondaryTabListMobileProps = Omit<SecondaryTabListProps, 'tagSize'>;
+export type SecondaryTabListMobileProps = Omit<SecondaryTabListProps, 'tagSize'>;
 export declare const SecondaryTabListMobile: ({ className, size, tagView, ...restProps }: SecondaryTabListMobileProps) => React.JSX.Element;

package/modern/components/secondary-tablist/index.css

@@ -20,47 +20,47 @@
     --secondary-tablist-xl-gaps: var(--gap-16);
     --secondary-tablist-transparent-gaps: var(--gap-0);
 }
-.tabs__component_1ce3f {
+.tabs__component_1j6ak {
     position: relative;
     display: inline-flex;
 }
-.tabs__fullWidthScroll_1ce3f {
+.tabs__fullWidthScroll_1j6ak {
     margin: var(--gap-0) var(--gap-16);
 }
-.tabs__container_1ce3f {
+.tabs__container_1j6ak {
     overflow: hidden;
     margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);
     padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);
 }
-.tabs__title_1ce3f {
+.tabs__title_1j6ak {
     white-space: nowrap;
 }
-.tabs__desktop_1ce3f.tabs__desktop_1ce3f.tabs__transparentView_1ce3f.tabs__transparentView_1ce3f {
-        .tabs__title_1ce3f.tabs__title_1ce3f {
+.tabs__desktop_1j6ak.tabs__desktop_1j6ak.tabs__transparentView_1j6ak.tabs__transparentView_1j6ak {
+        .tabs__title_1j6ak.tabs__title_1j6ak {
             margin-left: var(--secondary-tablist-transparent-gaps);
         }
     }
-.tabs__xxs_1ce3f .tabs__title_1ce3f + .tabs__title_1ce3f,
-    .tabs__xxs_1ce3f .tabs__skeleton_1ce3f + .tabs__skeleton_1ce3f {
+.tabs__xxs_1j6ak .tabs__title_1j6ak + .tabs__title_1j6ak,
+    .tabs__xxs_1j6ak .tabs__skeleton_1j6ak + .tabs__skeleton_1j6ak {
         margin-left: var(--secondary-tablist-xxs-gaps);
     }
-.tabs__xs_1ce3f .tabs__title_1ce3f + .tabs__title_1ce3f,
-    .tabs__xs_1ce3f .tabs__skeleton_1ce3f + .tabs__skeleton_1ce3f {
+.tabs__xs_1j6ak .tabs__title_1j6ak + .tabs__title_1j6ak,
+    .tabs__xs_1j6ak .tabs__skeleton_1j6ak + .tabs__skeleton_1j6ak {
         margin-left: var(--secondary-tablist-xs-gaps);
     }
-.tabs__s_1ce3f .tabs__title_1ce3f + .tabs__title_1ce3f,
-    .tabs__s_1ce3f .tabs__skeleton_1ce3f + .tabs__skeleton_1ce3f {
+.tabs__s_1j6ak .tabs__title_1j6ak + .tabs__title_1j6ak,
+    .tabs__s_1j6ak .tabs__skeleton_1j6ak + .tabs__skeleton_1j6ak {
         margin-left: var(--secondary-tablist-s-gaps);
     }
-.tabs__m_1ce3f .tabs__title_1ce3f + .tabs__title_1ce3f,
-    .tabs__m_1ce3f .tabs__skeleton_1ce3f + .tabs__skeleton_1ce3f {
+.tabs__m_1j6ak .tabs__title_1j6ak + .tabs__title_1j6ak,
+    .tabs__m_1j6ak .tabs__skeleton_1j6ak + .tabs__skeleton_1j6ak {
         margin-left: var(--secondary-tablist-m-gaps);
     }
-.tabs__l_1ce3f .tabs__title_1ce3f + .tabs__title_1ce3f,
-    .tabs__l_1ce3f .tabs__skeleton_1ce3f + .tabs__skeleton_1ce3f {
+.tabs__l_1j6ak .tabs__title_1j6ak + .tabs__title_1j6ak,
+    .tabs__l_1j6ak .tabs__skeleton_1j6ak + .tabs__skeleton_1j6ak {
         margin-left: var(--secondary-tablist-l-gaps);
     }
-.tabs__xl_1ce3f .tabs__title_1ce3f + .tabs__title_1ce3f,
-    .tabs__xl_1ce3f .tabs__skeleton_1ce3f + .tabs__skeleton_1ce3f {
+.tabs__xl_1j6ak .tabs__title_1j6ak + .tabs__title_1j6ak,
+    .tabs__xl_1j6ak .tabs__skeleton_1j6ak + .tabs__skeleton_1j6ak {
         margin-left: var(--secondary-tablist-xl-gaps);
     }

package/modern/components/secondary-tablist/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const commonStyles = {"component":"tabs__component_1ce3f","fullWidthScroll":"tabs__fullWidthScroll_1ce3f","container":"tabs__container_1ce3f","title":"tabs__title_1ce3f","desktop":"tabs__desktop_1ce3f","transparentView":"tabs__transparentView_1ce3f","xxs":"tabs__xxs_1ce3f","skeleton":"tabs__skeleton_1ce3f","xs":"tabs__xs_1ce3f","s":"tabs__s_1ce3f","m":"tabs__m_1ce3f","l":"tabs__l_1ce3f","xl":"tabs__xl_1ce3f"};
+const commonStyles = {"component":"tabs__component_1j6ak","fullWidthScroll":"tabs__fullWidthScroll_1j6ak","container":"tabs__container_1j6ak","title":"tabs__title_1j6ak","desktop":"tabs__desktop_1j6ak","transparentView":"tabs__transparentView_1j6ak","xxs":"tabs__xxs_1j6ak","skeleton":"tabs__skeleton_1j6ak","xs":"tabs__xs_1j6ak","s":"tabs__s_1j6ak","m":"tabs__m_1j6ak","l":"tabs__l_1j6ak","xl":"tabs__xl_1j6ak"};
 
 export { commonStyles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/secondary-tablist/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/secondary-tablist/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../vars.css';\n\n.component {\n    position: relative;\n    display: inline-flex;\n}\n\n.fullWidthScroll {\n    margin: var(--gap-0) var(--gap-16);\n}\n\n.container {\n    overflow: hidden;\n\n    /* focus-outline fix */\n    margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);\n    padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);\n}\n\n.title {\n    white-space: nowrap;\n}\n\n.desktop.desktop {\n    &.transparentView.transparentView {\n        .title.title {\n            margin-left: var(--secondary-tablist-transparent-gaps);\n        }\n    }\n}\n\n/* sizes */\n\n.xxs {\n    & .title + .title,\n    & .skeleton + .skeleton {\n        margin-left: var(--secondary-tablist-xxs-gaps);\n    }\n}\n\n.xs {\n    & .title + .title,\n    & .skeleton + .skeleton {\n        margin-left: var(--secondary-tablist-xs-gaps);\n    }\n}\n\n.s {\n    & .title + .title,\n    & .skeleton + .skeleton {\n        margin-left: var(--secondary-tablist-s-gaps);\n    }\n}\n\n.m {\n    & .title + .title,\n    & .skeleton + .skeleton {\n        margin-left: var(--secondary-tablist-m-gaps);\n    }\n}\n\n.l {\n    & .title + .title,\n    & .skeleton + .skeleton {\n        margin-left: var(--secondary-tablist-l-gaps);\n    }\n}\n\n.xl {\n    & .title + .title,\n    & .skeleton + .skeleton {\n        margin-left: var(--secondary-tablist-xl-gaps);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,qBAAe,CAAC,WAAW,CAAC,uBAAuB,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,WAAW,CAAC,uBAAuB,CAAC,OAAO,CAAC,mBAAmB,CAAC,SAAS,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,sBAAsB,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/secondary-tablist/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../vars.css';\n\n.component {\n    position: relative;\n    display: inline-flex;\n}\n\n.fullWidthScroll {\n    margin: var(--gap-0) var(--gap-16);\n}\n\n.container {\n    overflow: hidden;\n\n    /* focus-outline fix */\n    margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);\n    padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);\n}\n\n.title {\n    white-space: nowrap;\n}\n\n.desktop.desktop {\n    &.transparentView.transparentView {\n        .title.title {\n            margin-left: var(--secondary-tablist-transparent-gaps);\n        }\n    }\n}\n\n/* sizes */\n\n.xxs {\n    & .title + .title,\n    & .skeleton + .skeleton {\n        margin-left: var(--secondary-tablist-xxs-gaps);\n    }\n}\n\n.xs {\n    & .title + .title,\n    & .skeleton + .skeleton {\n        margin-left: var(--secondary-tablist-xs-gaps);\n    }\n}\n\n.s {\n    & .title + .title,\n    & .skeleton + .skeleton {\n        margin-left: var(--secondary-tablist-s-gaps);\n    }\n}\n\n.m {\n    & .title + .title,\n    & .skeleton + .skeleton {\n        margin-left: var(--secondary-tablist-m-gaps);\n    }\n}\n\n.l {\n    & .title + .title,\n    & .skeleton + .skeleton {\n        margin-left: var(--secondary-tablist-l-gaps);\n    }\n}\n\n.xl {\n    & .title + .title,\n    & .skeleton + .skeleton {\n        margin-left: var(--secondary-tablist-xl-gaps);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,qBAAe,CAAC,WAAW,CAAC,uBAAuB,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,WAAW,CAAC,uBAAuB,CAAC,OAAO,CAAC,mBAAmB,CAAC,SAAS,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,6BAA6B,CAAC,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,sBAAsB,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC;;;;"}

package/modern/components/secondary-tablist/mobile.css

@@ -19,38 +19,38 @@
     --secondary-tablist-l-gaps: var(--gap-16);
     --secondary-tablist-xl-gaps: var(--gap-16);
     --secondary-tablist-transparent-gaps: var(--gap-0);
-}.tabs__component_1ce3f {
+}.tabs__component_1j6ak {
     position: relative;
     display: inline-flex;
-}.tabs__fullWidthScroll_1ce3f {
+}.tabs__fullWidthScroll_1j6ak {
     margin: var(--gap-0) var(--gap-16);
-}.tabs__container_1ce3f {
+}.tabs__container_1j6ak {
     overflow: hidden;
     margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);
     padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);
-}.tabs__title_1ce3f {
+}.tabs__title_1j6ak {
     white-space: nowrap;
-}.tabs__desktop_1ce3f.tabs__desktop_1ce3f.tabs__transparentView_1ce3f.tabs__transparentView_1ce3f {
-        .tabs__title_1ce3f.tabs__title_1ce3f {
+}.tabs__desktop_1j6ak.tabs__desktop_1j6ak.tabs__transparentView_1j6ak.tabs__transparentView_1j6ak {
+        .tabs__title_1j6ak.tabs__title_1j6ak {
             margin-left: var(--secondary-tablist-transparent-gaps);
         }
-    }.tabs__xxs_1ce3f .tabs__title_1ce3f + .tabs__title_1ce3f,
-    .tabs__xxs_1ce3f .tabs__skeleton_1ce3f + .tabs__skeleton_1ce3f {
+    }.tabs__xxs_1j6ak .tabs__title_1j6ak + .tabs__title_1j6ak,
+    .tabs__xxs_1j6ak .tabs__skeleton_1j6ak + .tabs__skeleton_1j6ak {
         margin-left: var(--secondary-tablist-xxs-gaps);
-    }.tabs__xs_1ce3f .tabs__title_1ce3f + .tabs__title_1ce3f,
-    .tabs__xs_1ce3f .tabs__skeleton_1ce3f + .tabs__skeleton_1ce3f {
+    }.tabs__xs_1j6ak .tabs__title_1j6ak + .tabs__title_1j6ak,
+    .tabs__xs_1j6ak .tabs__skeleton_1j6ak + .tabs__skeleton_1j6ak {
         margin-left: var(--secondary-tablist-xs-gaps);
-    }.tabs__s_1ce3f .tabs__title_1ce3f + .tabs__title_1ce3f,
-    .tabs__s_1ce3f .tabs__skeleton_1ce3f + .tabs__skeleton_1ce3f {
+    }.tabs__s_1j6ak .tabs__title_1j6ak + .tabs__title_1j6ak,
+    .tabs__s_1j6ak .tabs__skeleton_1j6ak + .tabs__skeleton_1j6ak {
         margin-left: var(--secondary-tablist-s-gaps);
-    }.tabs__m_1ce3f .tabs__title_1ce3f + .tabs__title_1ce3f,
-    .tabs__m_1ce3f .tabs__skeleton_1ce3f + .tabs__skeleton_1ce3f {
+    }.tabs__m_1j6ak .tabs__title_1j6ak + .tabs__title_1j6ak,
+    .tabs__m_1j6ak .tabs__skeleton_1j6ak + .tabs__skeleton_1j6ak {
         margin-left: var(--secondary-tablist-m-gaps);
-    }.tabs__l_1ce3f .tabs__title_1ce3f + .tabs__title_1ce3f,
-    .tabs__l_1ce3f .tabs__skeleton_1ce3f + .tabs__skeleton_1ce3f {
+    }.tabs__l_1j6ak .tabs__title_1j6ak + .tabs__title_1j6ak,
+    .tabs__l_1j6ak .tabs__skeleton_1j6ak + .tabs__skeleton_1j6ak {
         margin-left: var(--secondary-tablist-l-gaps);
-    }.tabs__xl_1ce3f .tabs__title_1ce3f + .tabs__title_1ce3f,
-    .tabs__xl_1ce3f .tabs__skeleton_1ce3f + .tabs__skeleton_1ce3f {
+    }.tabs__xl_1j6ak .tabs__title_1j6ak + .tabs__title_1j6ak,
+    .tabs__xl_1j6ak .tabs__skeleton_1j6ak + .tabs__skeleton_1j6ak {
         margin-left: var(--secondary-tablist-xl-gaps);
     }
 :root {
@@ -76,12 +76,12 @@
     --secondary-tablist-xl-gaps: var(--gap-16);
     --secondary-tablist-transparent-gaps: var(--gap-0);
 }
-.tabs__title_1qz6l {
+.tabs__title_vgd9z {
 }
-.tabs__mobile_1qz6l .tabs__title_1qz6l + .tabs__title_1qz6l,
-    .tabs__mobile_1qz6l .tabs__skeleton_1qz6l + .tabs__skeleton_1qz6l {
+.tabs__mobile_vgd9z .tabs__title_vgd9z + .tabs__title_vgd9z,
+    .tabs__mobile_vgd9z .tabs__skeleton_vgd9z + .tabs__skeleton_vgd9z {
         margin-left: var(--secondary-tablist-mobile-gaps);
     }
-.tabs__mobile_1qz6l.tabs__transparentView_1qz6l.tabs__transparentView_1qz6l .tabs__title_1qz6l {
+.tabs__mobile_vgd9z.tabs__transparentView_vgd9z.tabs__transparentView_vgd9z .tabs__title_vgd9z {
         margin-left: var(--secondary-tablist-transparent-gaps);
     }

package/modern/components/secondary-tablist/mobile.module.css.js

@@ -1,6 +1,6 @@
 import './mobile.css';
 
-const mobileStyles = {"title":"tabs__title_1qz6l tabs__title_1ce3f","mobile":"tabs__mobile_1qz6l","skeleton":"tabs__skeleton_1qz6l","transparentView":"tabs__transparentView_1qz6l"};
+const mobileStyles = {"title":"tabs__title_vgd9z tabs__title_1j6ak","mobile":"tabs__mobile_vgd9z","skeleton":"tabs__skeleton_vgd9z","transparentView":"tabs__transparentView_vgd9z"};
 
 export { mobileStyles as default };
 //# sourceMappingURL=mobile.module.css.js.map

package/modern/components/tab/Component.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import { type FC } from 'react';
 import { type TabProps } from '../../typings';
-export declare const Tab: ({ children, hidden, className, disabled, dataTestId, id, title, rightAddons, ...restProps }: TabProps) => React.JSX.Element | null;
+export declare const Tab: FC<TabProps>;

package/modern/components/tab/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/tab/Component.tsx"],"sourcesContent":["import React, { type AriaAttributes } from 'react';\nimport cn from 'classnames';\n\nimport { type TabProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Tab = ({\n    children,\n    hidden,\n    className,\n    disabled,\n    dataTestId,\n    // useless props\n    id,\n    title,\n    rightAddons,\n    ...restProps\n}: TabProps) =>\n    children ? (\n        <div\n            className={cn(\n                styles.component,\n                {\n                    [styles.hidden]: hidden,\n                },\n                className,\n            )}\n            hidden={hidden}\n            role='tabpanel'\n            tabIndex={disabled ? -1 : 0}\n            data-test-id={dataTestId}\n            {...(restProps as AriaAttributes)}\n        >\n            {children}\n        </div>\n    ) : null;\n"],"names":[],"mappings":";;;;AAOO,MAAM,GAAG,GAAG,CAAC,EAChB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,QAAQ,EACR,UAAU;AACV;AACA,EAAE,EACF,KAAK,EACL,WAAW,EACX,GAAG,SAAS,EACL,KACP,QAAQ,IACJ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB;AACI,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AAC1B,KAAA,EACD,SAAS,CACZ,EACD,MAAM,EAAE,MAAM,EACd,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,cAAA,EACb,UAAU,EACnB,GAAA,SAA4B,EAEhC,EAAA,QAAQ,CACP,IACN;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/tab/Component.tsx"],"sourcesContent":["import React, { type AriaAttributes, type FC } from 'react';\nimport cn from 'classnames';\n\nimport { type TabProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Tab: FC<TabProps> = ({\n    children,\n    hidden,\n    className,\n    disabled,\n    dataTestId,\n    // useless props\n    id,\n    title,\n    rightAddons,\n    ...restProps\n}) =>\n    children ? (\n        <div\n            className={cn(\n                styles.component,\n                {\n                    [styles.hidden]: hidden,\n                },\n                className,\n            )}\n            hidden={hidden}\n            role='tabpanel'\n            tabIndex={disabled ? -1 : 0}\n            data-test-id={dataTestId}\n            {...(restProps as AriaAttributes)}\n        >\n            {children}\n        </div>\n    ) : null;\n"],"names":[],"mappings":";;;;AAOO,MAAM,GAAG,GAAiB,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,SAAS,EACT,QAAQ,EACR,UAAU;AACV;AACA,EAAE,EACF,KAAK,EACL,WAAW,EACX,GAAG,SAAS,EACf,KACG,QAAQ,IACJ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB;AACI,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AAC1B,KAAA,EACD,SAAS,CACZ,EACD,MAAM,EAAE,MAAM,EACd,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,cAAA,EACb,UAAU,EACnB,GAAA,SAA4B,EAEhC,EAAA,QAAQ,CACP,IACN;;;;"}

package/modern/components/tab/index.css

@@ -1,7 +1,7 @@
-.tabs__component_1ba8u {
+.tabs__component_17bb0 {
     outline: none;
 }
 
-.tabs__hidden_1ba8u {
+.tabs__hidden_17bb0 {
     display: none;
 }

package/modern/components/tab/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"tabs__component_1ba8u","hidden":"tabs__hidden_1ba8u"};
+const styles = {"component":"tabs__component_17bb0","hidden":"tabs__hidden_17bb0"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/tabs/Component.collapsible.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type TabsProps } from '../../typings';
-export declare type TabsCollapsibleProps = Omit<TabsProps, 'TabList' | 'fullWidthScroll' | 'scrollable' | 'view'>;
+export type TabsCollapsibleProps = Omit<TabsProps, 'TabList' | 'fullWidthScroll' | 'scrollable' | 'view'>;
 export declare const TabsCollapsible: ({ ...restProps }: TabsCollapsibleProps) => React.JSX.Element;

package/modern/components/tabs/Component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type TabsProps } from '../../typings';
-export declare const Tabs: ({ TabList, className, containerClassName, size, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, client, defaultMatchMediaValue, tagShape, tagView, showSkeleton, skeletonProps, textStyle, style, titleProps, ...restProps }: Omit<TabsProps, 'view'>) => React.JSX.Element;
+export declare const Tabs: ({ TabList, className, containerClassName, size, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, client, defaultMatchMediaValue, tagShape, tagView, showSkeleton, skeletonProps, textStyle, style, titleProps, ...restProps }: Omit<TabsProps, "view">) => React.JSX.Element;

package/modern/components/tabs/Component.desktop.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type TabsProps } from '../../typings';
-export declare type TabsDesktopProps = Omit<TabsProps, 'TabList' | 'fullWidthScroll' | 'breakpoint' | 'collapsedTabsIds'>;
+export type TabsDesktopProps = Omit<TabsProps, 'TabList' | 'fullWidthScroll' | 'breakpoint' | 'collapsedTabsIds'>;
 export declare const TabsDesktop: ({ view, scrollable, size, ...restProps }: TabsDesktopProps) => React.JSX.Element;

package/modern/components/tabs/Component.mobile.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type TabsProps } from '../../typings';
-export declare type TabsMobileProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;
+export type TabsMobileProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;
 export declare const TabsMobile: ({ view, scrollable, ...restProps }: TabsMobileProps) => React.JSX.Element;

package/modern/components/tabs/Component.responsive.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type TabsProps } from '../../typings';
-export declare type TabsResponsiveProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;
+export type TabsResponsiveProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;
 export declare const TabsResponsive: ({ view, scrollable, breakpoint, client, defaultMatchMediaValue, ...restProps }: TabsResponsiveProps) => React.JSX.Element;

package/modern/components/title/Component.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import { type SkeletonProps } from '@alfalab/core-components-skeleton/modern';
 import { type Styles, type TabListTitle } from '../../typings';
 export declare const Title: React.ForwardRefExoticComponent<TabListTitle & Styles & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "title"> & {
-    focused?: boolean | undefined;
-    isOption?: boolean | undefined;
-    showSkeleton?: boolean | undefined;
-    skeletonProps?: Omit<SkeletonProps, "visible"> | undefined;
-    onResize?: (() => void) | undefined;
+    focused?: boolean;
+    isOption?: boolean;
+    showSkeleton?: boolean;
+    skeletonProps?: Omit<SkeletonProps, "visible">;
+    onResize?: () => void;
 } & React.RefAttributes<HTMLButtonElement>>;