@alfalab/core-components-page-indicator 3.0.3 → 3.0.4-alfasans

package/esm/components/step/inverted.module.css.js

@@ -1,6 +1,6 @@
 import './inverted.css';
 
-var invertedColors = {"element":"page-indicator__element_1ebaj","active":"page-indicator__active_1ebaj"};
+var invertedColors = {"element":"page-indicator__element_7acin","active":"page-indicator__active_7acin"};
 
 export { invertedColors as default };
 //# sourceMappingURL=inverted.module.css.js.map

package/esm/components/step/static-inverted.css

@@ -6,9 +6,9 @@
     --page-indicator-color-static-inverted: var(--color-static-neutral-translucent-300-inverted);
     --page-indicator-active-color-static-inverted: var(--color-static-neutral-1300-inverted);
 }
-.page-indicator__element_16rgk {
+.page-indicator__element_13iar {
     background: var(--page-indicator-color-static-inverted);
 }
-.page-indicator__element_16rgk.page-indicator__active_16rgk {
+.page-indicator__element_13iar.page-indicator__active_13iar {
         background: var(--page-indicator-active-color-static-inverted);
     }

package/esm/components/step/static-inverted.module.css.js

@@ -1,6 +1,6 @@
 import './static-inverted.css';
 
-var staticInvertedColors = {"element":"page-indicator__element_16rgk","active":"page-indicator__active_16rgk"};
+var staticInvertedColors = {"element":"page-indicator__element_13iar","active":"page-indicator__active_13iar"};
 
 export { staticInvertedColors as default };
 //# sourceMappingURL=static-inverted.module.css.js.map

package/esm/components/step/static.css

@@ -6,9 +6,9 @@
     --page-indicator-color-static: var(--color-static-neutral-translucent-300);
     --page-indicator-active-color-static: var(--color-static-neutral-1300);
 }
-.page-indicator__element_1c81w {
+.page-indicator__element_r31gi {
     background: var(--page-indicator-color-static);
 }
-.page-indicator__element_1c81w.page-indicator__active_1c81w {
+.page-indicator__element_r31gi.page-indicator__active_r31gi {
         background: var(--page-indicator-active-color-static);
     }

package/esm/components/step/static.module.css.js

@@ -1,6 +1,6 @@
 import './static.css';
 
-var staticColors = {"element":"page-indicator__element_1c81w","active":"page-indicator__active_1c81w"};
+var staticColors = {"element":"page-indicator__element_r31gi","active":"page-indicator__active_r31gi"};
 
 export { staticColors as default };
 //# sourceMappingURL=static.module.css.js.map

package/esm/types.d.ts

@@ -1,18 +1,24 @@
-export interface PageIndicatorDynamicProps {
+interface BasePageIndicatorProps {
     /**
-     * Индекс выбранного элемента по-умолчанию
-     * @default 0
+     * Имя класса
      */
-    defaultActiveElement?: number;
+    className?: string;
     /**
      * Индекс выбранного элемента
      */
-    activeElement?: number;
+    activeElement: number;
     /**
      * Количество элементов (минимум 2)
      * @default 10
      */
     elements?: number;
+}
+export interface PageIndicatorDynamicProps extends BasePageIndicatorProps {
+    /**
+     * Индекс выбранного элемента по-умолчанию
+     * @default 0
+     */
+    defaultActiveElement?: number;
     /**
      * Высота компонента
      * @default 8
@@ -53,16 +59,7 @@ export interface PageIndicatorDynamicProps {
      */
     colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
 }
-export interface PageIndicatorBulletProps {
-    /**
-     * Индекс выбранного элемента
-     */
-    activeElement: number;
-    /**
-     * Количество элементов (минимум 2)
-     * @default 10
-     */
-    elements?: number;
+export interface PageIndicatorBulletProps extends BasePageIndicatorProps {
     /**
      * Высота компонента
      * @default 8
@@ -79,16 +76,7 @@ export interface PageIndicatorBulletProps {
      */
     colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
 }
-export interface PageIndicatorStepProps {
-    /**
-     * Индекс выбранного элемента
-     */
-    activeElement: number;
-    /**
-     * Количество элементов (минимум 2)
-     * @default 10
-     */
-    elements?: number;
+export interface PageIndicatorStepProps extends BasePageIndicatorProps {
     /**
      * Высота компонента
      * @default 4
@@ -105,16 +93,7 @@ export interface PageIndicatorStepProps {
      */
     colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
 }
-export interface PageIndicatorRunnerProps {
-    /**
-     * Индекс выбранного элемента
-     */
-    activeElement: number;
-    /**
-     * Количество элементов (минимум 2)
-     * @default 10
-     */
-    elements?: number;
+export interface PageIndicatorRunnerProps extends BasePageIndicatorProps {
     /**
      * Высота компонента
      * @default 4
@@ -126,3 +105,4 @@ export interface PageIndicatorRunnerProps {
      */
     colors?: 'default' | 'inverted' | 'static' | 'static-inverted';
 }
+export {};

package/modern/components/bullet/Component.js

@@ -15,11 +15,11 @@ const colorsStyle = {
     'static-inverted': staticInvertedColors,
 };
 const transitionClassess = {};
-const PageIndicatorBullet = ({ elements: count = 10, activeElement: activeElementIndex, size = 8, gap = 8, colors = 'default', }) => {
+const PageIndicatorBullet = ({ elements: count = 10, activeElement: activeElementIndex, size = 8, gap = 8, colors = 'default', className, }) => {
     const refs = useMemo(() => Array.from({ length: count }, () => createRef()), [count]);
     const [height, width, offset, elementSize, firstVisibleElementIndex, lastVisibleElementIndex] = useMemo(() => calcParams(size, gap, activeElementIndex, count), [activeElementIndex, count, gap, size]);
-    return (React.createElement("div", { className: cn(styles.pageIndicator, styles.bullet), style: { height, width } },
-        React.createElement("ol", { className: styles.elementsList, style: { gap, transform: `translate(${offset}px)` } }, refs.map((ref, index) => {
+    return (React.createElement("div", { className: cn(styles.pageIndicator, styles.bullet, className), style: { height, width } },
+        React.createElement("div", { className: styles.elementsList, style: { gap, transform: `translate(${offset}px)` } }, refs.map((ref, index) => {
             const sizeOfElement = elementSize(index);
             const isActive = activeElementIndex === index;
             const isVisible = firstVisibleElementIndex <= index && index <= lastVisibleElementIndex;
@@ -33,7 +33,7 @@ const PageIndicatorBullet = ({ elements: count = 10, activeElement: activeElemen
                 // eslint-disable-next-line react/no-array-index-key
                 key: index, nodeRef: ref, addEndListener: addListTransitionEndListener, in: isVisible, 
                 // passed empty object so any classes aren't added
-                classNames: transitionClassess }, (status) => (React.createElement("li", { ref: ref, "data-index": index, className: cn(styles.element, colorsStyle[colors].element, { [colorsStyle[colors].active]: isActive }, styles[status]), style: { height: sizeOfElement, width: sizeOfElement } }))));
+                classNames: transitionClassess }, (status) => (React.createElement("div", { ref: ref, "data-index": index, className: cn(styles.element, colorsStyle[colors].element, { [colorsStyle[colors].active]: isActive }, styles[status]), style: { height: sizeOfElement, width: sizeOfElement } }))));
         }))));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/bullet/Component.tsx"],"sourcesContent":["import React, { createRef, type FC, useMemo } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { type PageIndicatorBulletProps } from '../../types';\n\nimport { calcParams } from './utils';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n    inverted: invertedColors,\n    default: defaultColors,\n    static: staticColors,\n    'static-inverted': staticInvertedColors,\n} as const;\n\nconst transitionClassess = {} as const;\n\nexport const PageIndicatorBullet: FC<PageIndicatorBulletProps> = ({\n    elements: count = 10,\n    activeElement: activeElementIndex,\n    size = 8,\n    gap = 8,\n    colors = 'default',\n}) => {\n    const refs = useMemo(\n        () => Array.from({ length: count }, () => createRef<HTMLLIElement>()),\n        [count],\n    );\n    const [height, width, offset, elementSize, firstVisibleElementIndex, lastVisibleElementIndex] =\n        useMemo(\n            () => calcParams(size, gap, activeElementIndex, count),\n            [activeElementIndex, count, gap, size],\n        );\n\n    return (\n        <div className={cn(styles.pageIndicator, styles.bullet)} style={{ height, width }}>\n            <ol\n                className={styles.elementsList}\n                style={{ gap, transform: `translate(${offset}px)` }}\n            >\n                {refs.map((ref, index) => {\n                    const sizeOfElement = elementSize(index);\n                    const isActive = activeElementIndex === index;\n                    const isVisible =\n                        firstVisibleElementIndex <= index && index <= lastVisibleElementIndex;\n                    const addListTransitionEndListener = (done: () => void) => {\n                        const parentElement = ref.current?.parentElement;\n\n                        parentElement?.addEventListener('transitionend', done, { once: true });\n                    };\n\n                    return (\n                        <CSSTransition\n                            // eslint-disable-next-line react/no-array-index-key\n                            key={index}\n                            nodeRef={ref}\n                            addEndListener={addListTransitionEndListener}\n                            in={isVisible}\n                            // passed empty object so any classes aren't added\n                            classNames={transitionClassess}\n                        >\n                            {(status) => (\n                                <li\n                                    ref={ref}\n                                    data-index={index}\n                                    className={cn(\n                                        styles.element,\n                                        colorsStyle[colors].element,\n                                        { [colorsStyle[colors].active]: isActive },\n                                        styles[status],\n                                    )}\n                                    style={{ height: sizeOfElement, width: sizeOfElement }}\n                                />\n                            )}\n                        </CSSTransition>\n                    );\n                })}\n            </ol>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAcA,MAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;AAEV,MAAM,kBAAkB,GAAG,EAAW;AAE/B,MAAM,mBAAmB,GAAiC,CAAC,EAC9D,QAAQ,EAAE,KAAK,GAAG,EAAE,EACpB,aAAa,EAAE,kBAAkB,EACjC,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACP,MAAM,GAAG,SAAS,GACrB,KAAI;AACD,IAAA,MAAM,IAAI,GAAG,OAAO,CAChB,MAAM,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,MAAM,SAAS,EAAiB,CAAC,EACrE,CAAC,KAAK,CAAC,CACV;AACD,IAAA,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,wBAAwB,EAAE,uBAAuB,CAAC,GACzF,OAAO,CACH,MAAM,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,kBAAkB,EAAE,KAAK,CAAC,EACtD,CAAC,kBAAkB,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,CACzC;IAEL,QACI,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAAA;QAC7E,KACI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,CAAa,UAAA,EAAA,MAAM,CAAK,GAAA,CAAA,EAAE,EAElD,EAAA,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAI;AACrB,YAAA,MAAM,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC;AACxC,YAAA,MAAM,QAAQ,GAAG,kBAAkB,KAAK,KAAK;YAC7C,MAAM,SAAS,GACX,wBAAwB,IAAI,KAAK,IAAI,KAAK,IAAI,uBAAuB;AACzE,YAAA,MAAM,4BAA4B,GAAG,CAAC,IAAgB,KAAI;AACtD,gBAAA,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,EAAE,aAAa;AAEhD,gBAAA,aAAa,EAAE,gBAAgB,CAAC,eAAe,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAC1E,aAAC;YAED,QACI,oBAAC;;;;AAEG,gBAAA,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EACZ,cAAc,EAAE,4BAA4B,EAC5C,EAAE,EAAE,SAAS;;AAEb,gBAAA,UAAU,EAAE,kBAAkB,EAE7B,EAAA,CAAC,MAAM,MACJ,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACI,GAAG,EAAE,GAAG,EACI,YAAA,EAAA,KAAK,EACjB,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,OAAO,EACd,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,EAC3B,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,QAAQ,EAAE,EAC1C,MAAM,CAAC,MAAM,CAAC,CACjB,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAA,CACxD,CACL,CACW;AAExB,SAAC,CAAC,CACD,CACH;AAEd;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/bullet/Component.tsx"],"sourcesContent":["import React, { createRef, type FC, useMemo } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { type PageIndicatorBulletProps } from '../../types';\n\nimport { calcParams } from './utils';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n    inverted: invertedColors,\n    default: defaultColors,\n    static: staticColors,\n    'static-inverted': staticInvertedColors,\n} as const;\n\nconst transitionClassess = {} as const;\n\nexport const PageIndicatorBullet: FC<PageIndicatorBulletProps> = ({\n    elements: count = 10,\n    activeElement: activeElementIndex,\n    size = 8,\n    gap = 8,\n    colors = 'default',\n    className,\n}) => {\n    const refs = useMemo(\n        () => Array.from({ length: count }, () => createRef<HTMLDivElement>()),\n        [count],\n    );\n    const [height, width, offset, elementSize, firstVisibleElementIndex, lastVisibleElementIndex] =\n        useMemo(\n            () => calcParams(size, gap, activeElementIndex, count),\n            [activeElementIndex, count, gap, size],\n        );\n\n    return (\n        <div\n            className={cn(styles.pageIndicator, styles.bullet, className)}\n            style={{ height, width }}\n        >\n            <div\n                className={styles.elementsList}\n                style={{ gap, transform: `translate(${offset}px)` }}\n            >\n                {refs.map((ref, index) => {\n                    const sizeOfElement = elementSize(index);\n                    const isActive = activeElementIndex === index;\n                    const isVisible =\n                        firstVisibleElementIndex <= index && index <= lastVisibleElementIndex;\n                    const addListTransitionEndListener = (done: () => void) => {\n                        const parentElement = ref.current?.parentElement;\n\n                        parentElement?.addEventListener('transitionend', done, { once: true });\n                    };\n\n                    return (\n                        <CSSTransition\n                            // eslint-disable-next-line react/no-array-index-key\n                            key={index}\n                            nodeRef={ref}\n                            addEndListener={addListTransitionEndListener}\n                            in={isVisible}\n                            // passed empty object so any classes aren't added\n                            classNames={transitionClassess}\n                        >\n                            {(status) => (\n                                <div\n                                    ref={ref}\n                                    data-index={index}\n                                    className={cn(\n                                        styles.element,\n                                        colorsStyle[colors].element,\n                                        { [colorsStyle[colors].active]: isActive },\n                                        styles[status],\n                                    )}\n                                    style={{ height: sizeOfElement, width: sizeOfElement }}\n                                />\n                            )}\n                        </CSSTransition>\n                    );\n                })}\n            </div>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAcA,MAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;AAEV,MAAM,kBAAkB,GAAG,EAAW;AAE/B,MAAM,mBAAmB,GAAiC,CAAC,EAC9D,QAAQ,EAAE,KAAK,GAAG,EAAE,EACpB,aAAa,EAAE,kBAAkB,EACjC,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACP,MAAM,GAAG,SAAS,EAClB,SAAS,GACZ,KAAI;AACD,IAAA,MAAM,IAAI,GAAG,OAAO,CAChB,MAAM,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,MAAM,SAAS,EAAkB,CAAC,EACtE,CAAC,KAAK,CAAC,CACV;AACD,IAAA,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,wBAAwB,EAAE,uBAAuB,CAAC,GACzF,OAAO,CACH,MAAM,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,kBAAkB,EAAE,KAAK,CAAC,EACtD,CAAC,kBAAkB,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,CACzC;IAEL,QACI,6BACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC7D,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAAA;QAExB,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,CAAa,UAAA,EAAA,MAAM,CAAK,GAAA,CAAA,EAAE,EAElD,EAAA,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAI;AACrB,YAAA,MAAM,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC;AACxC,YAAA,MAAM,QAAQ,GAAG,kBAAkB,KAAK,KAAK;YAC7C,MAAM,SAAS,GACX,wBAAwB,IAAI,KAAK,IAAI,KAAK,IAAI,uBAAuB;AACzE,YAAA,MAAM,4BAA4B,GAAG,CAAC,IAAgB,KAAI;AACtD,gBAAA,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,EAAE,aAAa;AAEhD,gBAAA,aAAa,EAAE,gBAAgB,CAAC,eAAe,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAC1E,aAAC;YAED,QACI,oBAAC;;;;AAEG,gBAAA,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EACZ,cAAc,EAAE,4BAA4B,EAC5C,EAAE,EAAE,SAAS;;AAEb,gBAAA,UAAU,EAAE,kBAAkB,EAE7B,EAAA,CAAC,MAAM,MACJ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,GAAG,EACI,YAAA,EAAA,KAAK,EACjB,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,OAAO,EACd,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,EAC3B,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,QAAQ,EAAE,EAC1C,MAAM,CAAC,MAAM,CAAC,CACjB,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAA,CACxD,CACL,CACW;AAExB,SAAC,CAAC,CACA,CACJ;AAEd;;;;"}

package/modern/components/bullet/default.css

@@ -6,9 +6,9 @@
     --page-indicator-color: var(--color-light-neutral-translucent-300);
     --page-indicator-active-color: var(--color-light-neutral-translucent-1300);
 }
-.page-indicator__element_e3ryn {
+.page-indicator__element_p30ls {
     background: var(--page-indicator-color);
 }
-.page-indicator__element_e3ryn.page-indicator__active_e3ryn {
+.page-indicator__element_p30ls.page-indicator__active_p30ls {
         background: var(--page-indicator-active-color);
     }

package/modern/components/bullet/default.module.css.js

@@ -1,6 +1,6 @@
 import './default.css';
 
-const defaultColors = {"element":"page-indicator__element_e3ryn","active":"page-indicator__active_e3ryn"};
+const defaultColors = {"element":"page-indicator__element_p30ls","active":"page-indicator__active_p30ls"};
 
 export { defaultColors as default };
 //# sourceMappingURL=default.module.css.js.map

package/modern/components/bullet/index.css

@@ -5,29 +5,27 @@
     --page-indicator-animation-duration: 0.2s;
     --page-indicator-animation-timing-function: ease-in-out;
 }
-.page-indicator__pageIndicator_1b9v5.page-indicator__bullet_1b9v5 {
+.page-indicator__pageIndicator_wp2vf.page-indicator__bullet_wp2vf {
         overflow: hidden;
     }
-.page-indicator__elementsList_1b9v5 {
-    margin: 0;
-    padding: 0;
+.page-indicator__elementsList_wp2vf {
     display: flex;
     align-items: center;
     will-change: transform;
     transition: transform var(--page-indicator-animation-duration)
         var(--page-indicator-animation-timing-function);
 }
-.page-indicator__element_1b9v5 {
+.page-indicator__element_wp2vf {
     list-style-type: none;
     flex-shrink: 0;
     transition: background var(--page-indicator-animation-duration)
         var(--page-indicator-animation-timing-function);
     border-radius: var(--border-radius-circle);
 }
-.page-indicator__element_1b9v5.page-indicator__entering_1b9v5 {
+.page-indicator__element_wp2vf.page-indicator__entering_wp2vf {
         opacity: 0;
     }
-.page-indicator__element_1b9v5.page-indicator__entered_1b9v5 {
+.page-indicator__element_wp2vf.page-indicator__entered_wp2vf {
         opacity: 1;
         transition:
             background var(--page-indicator-animation-duration)
@@ -35,9 +33,9 @@
             opacity var(--page-indicator-animation-duration)
                 var(--page-indicator-animation-timing-function);
     }
-.page-indicator__element_1b9v5.page-indicator__exiting_1b9v5 {
+.page-indicator__element_wp2vf.page-indicator__exiting_wp2vf {
         opacity: 0;
     }
-.page-indicator__element_1b9v5.page-indicator__exited_1b9v5 {
+.page-indicator__element_wp2vf.page-indicator__exited_wp2vf {
         opacity: 0;
     }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"pageIndicator":"page-indicator__pageIndicator_1b9v5","bullet":"page-indicator__bullet_1b9v5","elementsList":"page-indicator__elementsList_1b9v5","element":"page-indicator__element_1b9v5","entering":"page-indicator__entering_1b9v5","entered":"page-indicator__entered_1b9v5","exiting":"page-indicator__exiting_1b9v5","exited":"page-indicator__exited_1b9v5"};
+const styles = {"pageIndicator":"page-indicator__pageIndicator_wp2vf","bullet":"page-indicator__bullet_wp2vf","elementsList":"page-indicator__elementsList_wp2vf","element":"page-indicator__element_wp2vf","entering":"page-indicator__entering_wp2vf","entered":"page-indicator__entered_wp2vf","exiting":"page-indicator__exiting_wp2vf","exited":"page-indicator__exited_wp2vf"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/bullet/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/bullet/index.module.css"],"sourcesContent":["@import '../../vars.css';\n\n.pageIndicator {\n    &.bullet {\n        overflow: hidden;\n    }\n}\n\n.elementsList {\n    margin: 0;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    will-change: transform;\n    transition: transform var(--page-indicator-animation-duration)\n        var(--page-indicator-animation-timing-function);\n}\n\n.element {\n    list-style-type: none;\n    flex-shrink: 0;\n    transition: background var(--page-indicator-animation-duration)\n        var(--page-indicator-animation-timing-function);\n    border-radius: var(--border-radius-circle);\n\n    &.entering {\n        opacity: 0;\n    }\n    &.entered {\n        opacity: 1;\n        transition:\n            background var(--page-indicator-animation-duration)\n                var(--page-indicator-animation-timing-function),\n            opacity var(--page-indicator-animation-duration)\n                var(--page-indicator-animation-timing-function);\n    }\n    &.exiting {\n        opacity: 0;\n    }\n    &.exited {\n        opacity: 0;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,eAAe,CAAC,qCAAqC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,cAAc,CAAC,oCAAoC,CAAC,SAAS,CAAC,+BAA+B,CAAC,UAAU,CAAC,gCAAgC,CAAC,SAAS,CAAC,+BAA+B,CAAC,SAAS,CAAC,+BAA+B,CAAC,QAAQ,CAAC,8BAA8B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/bullet/index.module.css"],"sourcesContent":["@import '../../vars.css';\n\n.pageIndicator {\n    &.bullet {\n        overflow: hidden;\n    }\n}\n\n.elementsList {\n    display: flex;\n    align-items: center;\n    will-change: transform;\n    transition: transform var(--page-indicator-animation-duration)\n        var(--page-indicator-animation-timing-function);\n}\n\n.element {\n    list-style-type: none;\n    flex-shrink: 0;\n    transition: background var(--page-indicator-animation-duration)\n        var(--page-indicator-animation-timing-function);\n    border-radius: var(--border-radius-circle);\n\n    &.entering {\n        opacity: 0;\n    }\n    &.entered {\n        opacity: 1;\n        transition:\n            background var(--page-indicator-animation-duration)\n                var(--page-indicator-animation-timing-function),\n            opacity var(--page-indicator-animation-duration)\n                var(--page-indicator-animation-timing-function);\n    }\n    &.exiting {\n        opacity: 0;\n    }\n    &.exited {\n        opacity: 0;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,eAAe,CAAC,qCAAqC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,cAAc,CAAC,oCAAoC,CAAC,SAAS,CAAC,+BAA+B,CAAC,UAAU,CAAC,gCAAgC,CAAC,SAAS,CAAC,+BAA+B,CAAC,SAAS,CAAC,+BAA+B,CAAC,QAAQ,CAAC,8BAA8B,CAAC;;;;"}

package/modern/components/bullet/inverted.css

@@ -6,9 +6,9 @@
     --page-indicator-color-inverted: var(--color-light-neutral-translucent-300-inverted);
     --page-indicator-active-color-inverted: var(--color-light-neutral-translucent-1300-inverted);
 }
-.page-indicator__element_psio5 {
+.page-indicator__element_jrt7t {
     background: var(--page-indicator-color-inverted);
 }
-.page-indicator__element_psio5.page-indicator__active_psio5 {
+.page-indicator__element_jrt7t.page-indicator__active_jrt7t {
         background: var(--page-indicator-active-color-inverted);
     }

package/modern/components/bullet/inverted.module.css.js

@@ -1,6 +1,6 @@
 import './inverted.css';
 
-const invertedColors = {"element":"page-indicator__element_psio5","active":"page-indicator__active_psio5"};
+const invertedColors = {"element":"page-indicator__element_jrt7t","active":"page-indicator__active_jrt7t"};
 
 export { invertedColors as default };
 //# sourceMappingURL=inverted.module.css.js.map

package/modern/components/bullet/static-inverted.css

@@ -6,9 +6,9 @@
     --page-indicator-color-static-inverted: var(--color-static-neutral-translucent-300-inverted);
     --page-indicator-active-color-static-inverted: var(--color-static-neutral-1300-inverted);
 }
-.page-indicator__element_hggv9 {
+.page-indicator__element_l4x8q {
     background: var(--page-indicator-color-static-inverted);
 }
-.page-indicator__element_hggv9.page-indicator__active_hggv9 {
+.page-indicator__element_l4x8q.page-indicator__active_l4x8q {
         background: var(--page-indicator-active-color-static-inverted);
     }

package/modern/components/bullet/static-inverted.module.css.js

@@ -1,6 +1,6 @@
 import './static-inverted.css';
 
-const staticInvertedColors = {"element":"page-indicator__element_hggv9","active":"page-indicator__active_hggv9"};
+const staticInvertedColors = {"element":"page-indicator__element_l4x8q","active":"page-indicator__active_l4x8q"};
 
 export { staticInvertedColors as default };
 //# sourceMappingURL=static-inverted.module.css.js.map

package/modern/components/bullet/static.css

@@ -6,9 +6,9 @@
     --page-indicator-color-static: var(--color-static-neutral-translucent-300);
     --page-indicator-active-color-static: var(--color-static-neutral-1300);
 }
-.page-indicator__element_2j1m7 {
+.page-indicator__element_1fl6e {
     background: var(--page-indicator-color-static);
 }
-.page-indicator__element_2j1m7.page-indicator__active_2j1m7 {
+.page-indicator__element_1fl6e.page-indicator__active_1fl6e {
         background: var(--page-indicator-active-color-static);
     }

package/modern/components/bullet/static.module.css.js

@@ -1,6 +1,6 @@
 import './static.css';
 
-const staticColors = {"element":"page-indicator__element_2j1m7","active":"page-indicator__active_2j1m7"};
+const staticColors = {"element":"page-indicator__element_1fl6e","active":"page-indicator__active_1fl6e"};
 
 export { staticColors as default };
 //# sourceMappingURL=static.module.css.js.map

package/modern/components/dynamic/Component.js

@@ -15,7 +15,7 @@ const colorsStyle = {
 };
 const FULL_PROGRESS = 100;
 const PageIndicatorDynamic = (props) => {
-    const { size: height = 8, gap = 8, activeElementWidth = height * 7, elements: count = 10, activeElement: indexFromProps, onActiveElementChange, defaultActiveElement: defaultIndex = 0, active = true, duration: durationFromProps = 3000, cycle = false, colors = 'default', } = props;
+    const { size: height = 8, gap = 8, activeElementWidth = height * 7, elements: count = 10, activeElement: indexFromProps, onActiveElementChange, defaultActiveElement: defaultIndex = 0, active = true, duration: durationFromProps = 3000, cycle = false, colors = 'default', className, } = props;
     const [activeIndex, setActiveIndex] = useState(indexFromProps ?? defaultIndex);
     const [progress, setProgress] = useState(0);
     const inProgress = progress < FULL_PROGRESS;
@@ -53,7 +53,7 @@ const PageIndicatorDynamic = (props) => {
         setActiveIndex(nextActiveIndex);
         setProgress(0);
     }, [activeIndex, activeIndexInProps, count, cycle, inProgress, onActiveElementChange]);
-    return (React.createElement("ol", { className: styles.pageIndicator, style: { height, gap } }, Array.from({ length: count }, (_, index) => {
+    return (React.createElement("div", { className: cn(styles.pageIndicator, className), style: { height, gap } }, Array.from({ length: count }, (_, index) => {
         const isActive = index === activeIndex;
         const style = {
             width: isActive ? activeElementWidth : height,
@@ -62,7 +62,7 @@ const PageIndicatorDynamic = (props) => {
         const progressStyle = isActive
             ? { transform: `translateX(${progress - FULL_PROGRESS}%)` }
             : undefined;
-        return (React.createElement("li", { key: index, style: style, className: cn(styles.element, colorsStyle[colors].element, {
+        return (React.createElement("div", { key: index, style: style, className: cn(styles.element, colorsStyle[colors].element, {
                 [styles.active]: isActive,
                 [colorsStyle[colors].active]: isActive,
             }) },

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

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/dynamic/Component.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport cn from 'classnames';\n\nimport {\n    hasOwnProperty,\n    isFn,\n    isNonNullable,\n    isNullable,\n    noop,\n} from '@alfalab/core-components-shared';\n\nimport { type PageIndicatorDynamicProps } from '../../types';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n    inverted: invertedColors,\n    default: defaultColors,\n    static: staticColors,\n    'static-inverted': staticInvertedColors,\n} as const;\n\nconst FULL_PROGRESS = 100;\n\nexport const PageIndicatorDynamic: React.FC<PageIndicatorDynamicProps> = (props) => {\n    const {\n        size: height = 8,\n        gap = 8,\n        activeElementWidth = height * 7,\n        elements: count = 10,\n        activeElement: indexFromProps,\n        onActiveElementChange,\n        defaultActiveElement: defaultIndex = 0,\n        active = true,\n        duration: durationFromProps = 3000,\n        cycle = false,\n        colors = 'default',\n    } = props;\n    const [activeIndex, setActiveIndex] = useState<number | undefined>(\n        indexFromProps ?? defaultIndex,\n    );\n    const [progress, setProgress] = useState(0);\n    const inProgress = progress < FULL_PROGRESS;\n    const activeIndexInProps = hasOwnProperty(props, 'activeElement');\n    let duration: number;\n\n    if (active && isNonNullable(activeIndex) && inProgress) {\n        duration = isFn(durationFromProps) ? durationFromProps(activeIndex) : durationFromProps;\n    } else {\n        duration = -1;\n    }\n\n    // getDerivedStateFromProps\n    if (activeIndexInProps && !(activeIndex === indexFromProps)) {\n        setActiveIndex(indexFromProps);\n        setProgress(0);\n    }\n\n    useEffect(() => {\n        if (duration === -1) {\n            return noop;\n        }\n\n        const interval = duration / FULL_PROGRESS;\n        const timer = setInterval(\n            () => setProgress((prevProgress) => Math.min(prevProgress + 1, FULL_PROGRESS)),\n            interval,\n        );\n\n        return () => clearInterval(timer);\n    }, [duration]);\n\n    useEffect(() => {\n        const isLast = activeIndex === count - 1;\n\n        if (inProgress || isNullable(activeIndex) || (isLast && !cycle)) {\n            return;\n        }\n\n        const nextActiveIndex = isLast && cycle ? 0 : activeIndex + 1;\n\n        onActiveElementChange?.(nextActiveIndex);\n\n        if (activeIndexInProps) {\n            return;\n        }\n\n        setActiveIndex(nextActiveIndex);\n        setProgress(0);\n    }, [activeIndex, activeIndexInProps, count, cycle, inProgress, onActiveElementChange]);\n\n    return (\n        <ol className={styles.pageIndicator} style={{ height, gap }}>\n            {Array.from({ length: count }, (_, index) => {\n                const isActive = index === activeIndex;\n                const style: React.CSSProperties = {\n                    width: isActive ? activeElementWidth : height,\n                    borderRadius: height / 2,\n                };\n                const progressStyle: React.CSSProperties | undefined = isActive\n                    ? { transform: `translateX(${progress - FULL_PROGRESS}%)` }\n                    : undefined;\n\n                return (\n                    <li\n                        key={index}\n                        style={style}\n                        className={cn(styles.element, colorsStyle[colors].element, {\n                            [styles.active]: isActive,\n                            [colorsStyle[colors].active]: isActive,\n                        })}\n                    >\n                        <div\n                            style={progressStyle}\n                            className={cn(styles.progress, colorsStyle[colors].progress)}\n                        />\n                    </li>\n                );\n            })}\n        </ol>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/dynamic/Component.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport cn from 'classnames';\n\nimport {\n    hasOwnProperty,\n    isFn,\n    isNonNullable,\n    isNullable,\n    noop,\n} from '@alfalab/core-components-shared';\n\nimport { type PageIndicatorDynamicProps } from '../../types';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n    inverted: invertedColors,\n    default: defaultColors,\n    static: staticColors,\n    'static-inverted': staticInvertedColors,\n} as const;\n\nconst FULL_PROGRESS = 100;\n\nexport const PageIndicatorDynamic: React.FC<PageIndicatorDynamicProps> = (props) => {\n    const {\n        size: height = 8,\n        gap = 8,\n        activeElementWidth = height * 7,\n        elements: count = 10,\n        activeElement: indexFromProps,\n        onActiveElementChange,\n        defaultActiveElement: defaultIndex = 0,\n        active = true,\n        duration: durationFromProps = 3000,\n        cycle = false,\n        colors = 'default',\n        className,\n    } = props;\n    const [activeIndex, setActiveIndex] = useState<number | undefined>(\n        indexFromProps ?? defaultIndex,\n    );\n    const [progress, setProgress] = useState(0);\n    const inProgress = progress < FULL_PROGRESS;\n    const activeIndexInProps = hasOwnProperty(props, 'activeElement');\n    let duration: number;\n\n    if (active && isNonNullable(activeIndex) && inProgress) {\n        duration = isFn(durationFromProps) ? durationFromProps(activeIndex) : durationFromProps;\n    } else {\n        duration = -1;\n    }\n\n    // getDerivedStateFromProps\n    if (activeIndexInProps && !(activeIndex === indexFromProps)) {\n        setActiveIndex(indexFromProps);\n        setProgress(0);\n    }\n\n    useEffect(() => {\n        if (duration === -1) {\n            return noop;\n        }\n\n        const interval = duration / FULL_PROGRESS;\n        const timer = setInterval(\n            () => setProgress((prevProgress) => Math.min(prevProgress + 1, FULL_PROGRESS)),\n            interval,\n        );\n\n        return () => clearInterval(timer);\n    }, [duration]);\n\n    useEffect(() => {\n        const isLast = activeIndex === count - 1;\n\n        if (inProgress || isNullable(activeIndex) || (isLast && !cycle)) {\n            return;\n        }\n\n        const nextActiveIndex = isLast && cycle ? 0 : activeIndex + 1;\n\n        onActiveElementChange?.(nextActiveIndex);\n\n        if (activeIndexInProps) {\n            return;\n        }\n\n        setActiveIndex(nextActiveIndex);\n        setProgress(0);\n    }, [activeIndex, activeIndexInProps, count, cycle, inProgress, onActiveElementChange]);\n\n    return (\n        <div className={cn(styles.pageIndicator, className)} style={{ height, gap }}>\n            {Array.from({ length: count }, (_, index) => {\n                const isActive = index === activeIndex;\n                const style: React.CSSProperties = {\n                    width: isActive ? activeElementWidth : height,\n                    borderRadius: height / 2,\n                };\n                const progressStyle: React.CSSProperties | undefined = isActive\n                    ? { transform: `translateX(${progress - FULL_PROGRESS}%)` }\n                    : undefined;\n\n                return (\n                    <div\n                        key={index}\n                        style={style}\n                        className={cn(styles.element, colorsStyle[colors].element, {\n                            [styles.active]: isActive,\n                            [colorsStyle[colors].active]: isActive,\n                        })}\n                    >\n                        <div\n                            style={progressStyle}\n                            className={cn(styles.progress, colorsStyle[colors].progress)}\n                        />\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/modern/components/dynamic/default.css

@@ -6,11 +6,11 @@
     --page-indicator-color: var(--color-light-neutral-translucent-300);
     --page-indicator-active-color: var(--color-light-neutral-translucent-1300);
 }
-.page-indicator__element_k9ry7 {
+.page-indicator__element_o4ub7 {
     background: var(--page-indicator-color);
 }
-.page-indicator__element_k9ry7.page-indicator__active_k9ry7 {
-        .page-indicator__progress_k9ry7 {
+.page-indicator__element_o4ub7.page-indicator__active_o4ub7 {
+        .page-indicator__progress_o4ub7 {
             background: var(--page-indicator-active-color);
         }
     }

package/modern/components/dynamic/default.module.css.js

@@ -1,6 +1,6 @@
 import './default.css';
 
-const defaultColors = {"element":"page-indicator__element_k9ry7","active":"page-indicator__active_k9ry7","progress":"page-indicator__progress_k9ry7"};
+const defaultColors = {"element":"page-indicator__element_o4ub7","active":"page-indicator__active_o4ub7","progress":"page-indicator__progress_o4ub7"};
 
 export { defaultColors as default };
 //# sourceMappingURL=default.module.css.js.map

package/modern/components/dynamic/index.css

@@ -1,24 +1,22 @@
 :root {
     --page-indicator-animation-duration: 0.2s;
 }
-.page-indicator__pageIndicator_zobdi {
-    margin: 0;
-    padding: 0;
+.page-indicator__pageIndicator_h7ekc {
     display: flex;
 }
-.page-indicator__element_zobdi {
+.page-indicator__element_h7ekc {
     list-style-type: none;
     overflow: hidden;
     transition: width var(--page-indicator-animation-duration) linear;
 }
-.page-indicator__element_zobdi:not(.page-indicator__active_zobdi) {
-        .page-indicator__progress_zobdi {
+.page-indicator__element_h7ekc:not(.page-indicator__active_h7ekc) {
+        .page-indicator__progress_h7ekc {
             display: none;
         }
     }
-.page-indicator__element_zobdi {
+.page-indicator__element_h7ekc {
 
-    .page-indicator__progress_zobdi {
+    .page-indicator__progress_h7ekc {
         width: 100%;
         height: 100%;
         will-change: transform;

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"pageIndicator":"page-indicator__pageIndicator_zobdi","element":"page-indicator__element_zobdi","active":"page-indicator__active_zobdi","progress":"page-indicator__progress_zobdi"};
+const styles = {"pageIndicator":"page-indicator__pageIndicator_h7ekc","element":"page-indicator__element_h7ekc","active":"page-indicator__active_h7ekc","progress":"page-indicator__progress_h7ekc"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/dynamic/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/dynamic/index.module.css"],"sourcesContent":["@import '../../vars.css';\n\n.pageIndicator {\n    margin: 0;\n    padding: 0;\n    display: flex;\n}\n\n.element {\n    list-style-type: none;\n    overflow: hidden;\n    transition: width var(--page-indicator-animation-duration) linear;\n\n    &:not(.active) {\n        .progress {\n            display: none;\n        }\n    }\n\n    .progress {\n        width: 100%;\n        height: 100%;\n        will-change: transform;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,eAAe,CAAC,qCAAqC,CAAC,SAAS,CAAC,+BAA+B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/dynamic/index.module.css"],"sourcesContent":["@import '../../vars.css';\n\n.pageIndicator {\n    display: flex;\n}\n\n.element {\n    list-style-type: none;\n    overflow: hidden;\n    transition: width var(--page-indicator-animation-duration) linear;\n\n    &:not(.active) {\n        .progress {\n            display: none;\n        }\n    }\n\n    .progress {\n        width: 100%;\n        height: 100%;\n        will-change: transform;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,eAAe,CAAC,qCAAqC,CAAC,SAAS,CAAC,+BAA+B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC;;;;"}

package/modern/components/dynamic/inverted.css

@@ -6,11 +6,11 @@
     --page-indicator-color-inverted: var(--color-light-neutral-translucent-300-inverted);
     --page-indicator-active-color-inverted: var(--color-light-neutral-translucent-1300-inverted);
 }
-.page-indicator__element_qpgvo {
+.page-indicator__element_mqocy {
     background: var(--page-indicator-color-inverted);
 }
-.page-indicator__element_qpgvo.page-indicator__active_qpgvo {
-        .page-indicator__progress_qpgvo {
+.page-indicator__element_mqocy.page-indicator__active_mqocy {
+        .page-indicator__progress_mqocy {
             background: var(--page-indicator-active-color-inverted);
         }
     }

package/modern/components/dynamic/inverted.module.css.js

@@ -1,6 +1,6 @@
 import './inverted.css';
 
-const invertedColors = {"element":"page-indicator__element_qpgvo","active":"page-indicator__active_qpgvo","progress":"page-indicator__progress_qpgvo"};
+const invertedColors = {"element":"page-indicator__element_mqocy","active":"page-indicator__active_mqocy","progress":"page-indicator__progress_mqocy"};
 
 export { invertedColors as default };
 //# sourceMappingURL=inverted.module.css.js.map

package/modern/components/dynamic/static-inverted.css

@@ -6,11 +6,11 @@
     --page-indicator-color-static-inverted: var(--color-static-neutral-translucent-300-inverted);
     --page-indicator-active-color-static-inverted: var(--color-static-neutral-1300-inverted);
 }
-.page-indicator__element_1umjl {
+.page-indicator__element_6rxth {
     background: var(--page-indicator-color-static-inverted);
 }
-.page-indicator__element_1umjl.page-indicator__active_1umjl {
-        .page-indicator__progress_1umjl {
+.page-indicator__element_6rxth.page-indicator__active_6rxth {
+        .page-indicator__progress_6rxth {
             background: var(--page-indicator-active-color-static-inverted);
         }
     }

package/modern/components/dynamic/static-inverted.module.css.js

@@ -1,6 +1,6 @@
 import './static-inverted.css';
 
-const staticInvertedColors = {"element":"page-indicator__element_1umjl","active":"page-indicator__active_1umjl","progress":"page-indicator__progress_1umjl"};
+const staticInvertedColors = {"element":"page-indicator__element_6rxth","active":"page-indicator__active_6rxth","progress":"page-indicator__progress_6rxth"};
 
 export { staticInvertedColors as default };
 //# sourceMappingURL=static-inverted.module.css.js.map

package/modern/components/dynamic/static.css

@@ -6,11 +6,11 @@
     --page-indicator-color-static: var(--color-static-neutral-translucent-300);
     --page-indicator-active-color-static: var(--color-static-neutral-1300);
 }
-.page-indicator__element_1196f {
+.page-indicator__element_1u5rb {
     background: var(--page-indicator-color-static);
 }
-.page-indicator__element_1196f.page-indicator__active_1196f {
-        .page-indicator__progress_1196f {
+.page-indicator__element_1u5rb.page-indicator__active_1u5rb {
+        .page-indicator__progress_1u5rb {
             background: var(--page-indicator-active-color-static);
         }
     }

package/modern/components/dynamic/static.module.css.js

@@ -1,6 +1,6 @@
 import './static.css';
 
-const staticColors = {"element":"page-indicator__element_1196f","active":"page-indicator__active_1196f","progress":"page-indicator__progress_1196f"};
+const staticColors = {"element":"page-indicator__element_1u5rb","active":"page-indicator__active_1u5rb","progress":"page-indicator__progress_1u5rb"};
 
 export { staticColors as default };
 //# sourceMappingURL=static.module.css.js.map

package/modern/components/runner/Component.js

@@ -12,7 +12,7 @@ const colorsStyle = {
     static: staticColors,
     'static-inverted': staticInvertedColors,
 };
-const PageIndicatorRunner = ({ activeElement, elements: count = 10, size = 4, colors = 'default', }) => (React.createElement("div", { className: cn(styles.pageIndicator, colorsStyle[colors].pageIndicator), style: { height: size, borderRadius: size / 2 } },
+const PageIndicatorRunner = ({ activeElement, elements: count = 10, size = 4, colors = 'default', className, }) => (React.createElement("div", { className: cn(styles.pageIndicator, colorsStyle[colors].pageIndicator, className), style: { height: size, borderRadius: size / 2 } },
     React.createElement("div", { style: {
             transform: `translate(${activeElement * 100}%, 0)`,
             height: size,

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

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/runner/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { type PageIndicatorRunnerProps } from '../../types';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n    inverted: invertedColors,\n    default: defaultColors,\n    static: staticColors,\n    'static-inverted': staticInvertedColors,\n} as const;\n\nexport const PageIndicatorRunner: React.FC<PageIndicatorRunnerProps> = ({\n    activeElement,\n    elements: count = 10,\n    size = 4,\n    colors = 'default',\n}) => (\n    <div\n        className={cn(styles.pageIndicator, colorsStyle[colors].pageIndicator)}\n        style={{ height: size, borderRadius: size / 2 }}\n    >\n        <div\n            style={{\n                transform: `translate(${activeElement * 100}%, 0)`,\n                height: size,\n                width: `${100 / count}%`,\n                borderRadius: size / 2,\n            }}\n            className={cn(styles.element, colorsStyle[colors].element)}\n        />\n    </div>\n);\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;AAEG,MAAA,mBAAmB,GAAuC,CAAC,EACpE,aAAa,EACb,QAAQ,EAAE,KAAK,GAAG,EAAE,EACpB,IAAI,GAAG,CAAC,EACR,MAAM,GAAG,SAAS,GACrB,MACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,aAAa,CAAC,EACtE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE,EAAA;AAE/C,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE;AACH,YAAA,SAAS,EAAE,CAAA,UAAA,EAAa,aAAa,GAAG,GAAG,CAAO,KAAA,CAAA;AAClD,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,KAAK,EAAE,CAAA,EAAG,GAAG,GAAG,KAAK,CAAG,CAAA,CAAA;YACxB,YAAY,EAAE,IAAI,GAAG,CAAC;AACzB,SAAA,EACD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAC5D,CAAA,CACA;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/runner/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { type PageIndicatorRunnerProps } from '../../types';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\nimport staticColors from './static.module.css';\nimport staticInvertedColors from './static-inverted.module.css';\n\nconst colorsStyle = {\n    inverted: invertedColors,\n    default: defaultColors,\n    static: staticColors,\n    'static-inverted': staticInvertedColors,\n} as const;\n\nexport const PageIndicatorRunner: React.FC<PageIndicatorRunnerProps> = ({\n    activeElement,\n    elements: count = 10,\n    size = 4,\n    colors = 'default',\n    className,\n}) => (\n    <div\n        className={cn(styles.pageIndicator, colorsStyle[colors].pageIndicator, className)}\n        style={{ height: size, borderRadius: size / 2 }}\n    >\n        <div\n            style={{\n                transform: `translate(${activeElement * 100}%, 0)`,\n                height: size,\n                width: `${100 / count}%`,\n                borderRadius: size / 2,\n            }}\n            className={cn(styles.element, colorsStyle[colors].element)}\n        />\n    </div>\n);\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;AAEG,MAAA,mBAAmB,GAAuC,CAAC,EACpE,aAAa,EACb,QAAQ,EAAE,KAAK,GAAG,EAAE,EACpB,IAAI,GAAG,CAAC,EACR,MAAM,GAAG,SAAS,EAClB,SAAS,GACZ,MACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,aAAa,EAAE,SAAS,CAAC,EACjF,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE,EAAA;AAE/C,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE;AACH,YAAA,SAAS,EAAE,CAAA,UAAA,EAAa,aAAa,GAAG,GAAG,CAAO,KAAA,CAAA;AAClD,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,KAAK,EAAE,CAAA,EAAG,GAAG,GAAG,KAAK,CAAG,CAAA,CAAA;YACxB,YAAY,EAAE,IAAI,GAAG,CAAC;AACzB,SAAA,EACD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAC5D,CAAA,CACA;;;;"}

package/modern/components/runner/default.css

@@ -6,9 +6,9 @@
     --page-indicator-color: var(--color-light-neutral-translucent-300);
     --page-indicator-active-color: var(--color-light-neutral-translucent-1300);
 }
-.page-indicator__pageIndicator_1ddtz {
+.page-indicator__pageIndicator_wiz49 {
     background: var(--page-indicator-color);
 }
-.page-indicator__element_1ddtz {
+.page-indicator__element_wiz49 {
     background: var(--page-indicator-active-color);
 }

package/modern/components/runner/default.module.css.js

@@ -1,6 +1,6 @@
 import './default.css';
 
-const defaultColors = {"pageIndicator":"page-indicator__pageIndicator_1ddtz","element":"page-indicator__element_1ddtz"};
+const defaultColors = {"pageIndicator":"page-indicator__pageIndicator_wiz49","element":"page-indicator__element_wiz49"};
 
 export { defaultColors as default };
 //# sourceMappingURL=default.module.css.js.map