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

package/esm/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/esm/components/bullet/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var 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"};
+var 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/esm/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,aAAe,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,aAAe,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/esm/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/esm/components/bullet/inverted.module.css.js

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

package/esm/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/esm/components/bullet/static-inverted.module.css.js

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

package/esm/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/esm/components/bullet/static.module.css.js

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

package/esm/components/dynamic/Component.js

@@ -15,7 +15,7 @@ var colorsStyle = {
 };
 var FULL_PROGRESS = 100;
 var PageIndicatorDynamic = function (props) {
-    var _a = props.size, height = _a === void 0 ? 8 : _a, _b = props.gap, gap = _b === void 0 ? 8 : _b, _c = props.activeElementWidth, activeElementWidth = _c === void 0 ? height * 7 : _c, _d = props.elements, count = _d === void 0 ? 10 : _d, indexFromProps = props.activeElement, onActiveElementChange = props.onActiveElementChange, _e = props.defaultActiveElement, defaultIndex = _e === void 0 ? 0 : _e, _f = props.active, active = _f === void 0 ? true : _f, _g = props.duration, durationFromProps = _g === void 0 ? 3000 : _g, _h = props.cycle, cycle = _h === void 0 ? false : _h, _j = props.colors, colors = _j === void 0 ? 'default' : _j;
+    var _a = props.size, height = _a === void 0 ? 8 : _a, _b = props.gap, gap = _b === void 0 ? 8 : _b, _c = props.activeElementWidth, activeElementWidth = _c === void 0 ? height * 7 : _c, _d = props.elements, count = _d === void 0 ? 10 : _d, indexFromProps = props.activeElement, onActiveElementChange = props.onActiveElementChange, _e = props.defaultActiveElement, defaultIndex = _e === void 0 ? 0 : _e, _f = props.active, active = _f === void 0 ? true : _f, _g = props.duration, durationFromProps = _g === void 0 ? 3000 : _g, _h = props.cycle, cycle = _h === void 0 ? false : _h, _j = props.colors, colors = _j === void 0 ? 'default' : _j, className = props.className;
     var _k = useState(indexFromProps !== null && indexFromProps !== void 0 ? indexFromProps : defaultIndex), activeIndex = _k[0], setActiveIndex = _k[1];
     var _l = useState(0), progress = _l[0], setProgress = _l[1];
     var inProgress = progress < FULL_PROGRESS;
@@ -53,7 +53,7 @@ var PageIndicatorDynamic = function (props) {
         setActiveIndex(nextActiveIndex);
         setProgress(0);
     }, [activeIndex, activeIndexInProps, count, cycle, inProgress, onActiveElementChange]);
-    return (React.createElement("ol", { className: styles.pageIndicator, style: { height: height, gap: gap } }, Array.from({ length: count }, function (_, index) {
+    return (React.createElement("div", { className: cn(styles.pageIndicator, className), style: { height: height, gap: gap } }, Array.from({ length: count }, function (_, index) {
         var _a;
         var isActive = index === activeIndex;
         var style = {
@@ -63,7 +63,7 @@ var PageIndicatorDynamic = function (props) {
         var progressStyle = isActive
             ? { transform: "translateX(".concat(progress - FULL_PROGRESS, "%)") }
             : undefined;
-        return (React.createElement("li", { key: index, style: style, className: cn(styles.element, colorsStyle[colors].element, (_a = {},
+        return (React.createElement("div", { key: index, style: style, className: cn(styles.element, colorsStyle[colors].element, (_a = {},
                 _a[styles.active] = isActive,
                 _a[colorsStyle[colors].active] = isActive,
                 _a)) },

package/esm/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/esm/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/esm/components/dynamic/default.module.css.js

@@ -1,6 +1,6 @@
 import './default.css';
 
-var defaultColors = {"element":"page-indicator__element_k9ry7","active":"page-indicator__active_k9ry7","progress":"page-indicator__progress_k9ry7"};
+var 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/esm/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/esm/components/dynamic/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"pageIndicator":"page-indicator__pageIndicator_zobdi","element":"page-indicator__element_zobdi","active":"page-indicator__active_zobdi","progress":"page-indicator__progress_zobdi"};
+var 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/esm/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,aAAe,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,aAAe,CAAC,eAAe,CAAC,qCAAqC,CAAC,SAAS,CAAC,+BAA+B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC;;;;"}

package/esm/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/esm/components/dynamic/inverted.module.css.js

@@ -1,6 +1,6 @@
 import './inverted.css';
 
-var invertedColors = {"element":"page-indicator__element_qpgvo","active":"page-indicator__active_qpgvo","progress":"page-indicator__progress_qpgvo"};
+var 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/esm/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/esm/components/dynamic/static-inverted.module.css.js

@@ -1,6 +1,6 @@
 import './static-inverted.css';
 
-var staticInvertedColors = {"element":"page-indicator__element_1umjl","active":"page-indicator__active_1umjl","progress":"page-indicator__progress_1umjl"};
+var 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/esm/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/esm/components/dynamic/static.module.css.js

@@ -1,6 +1,6 @@
 import './static.css';
 
-var staticColors = {"element":"page-indicator__element_1196f","active":"page-indicator__active_1196f","progress":"page-indicator__progress_1196f"};
+var 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/esm/components/runner/Component.js

@@ -13,8 +13,8 @@ var colorsStyle = {
     'static-inverted': staticInvertedColors,
 };
 var PageIndicatorRunner = function (_a) {
-    var activeElement = _a.activeElement, _b = _a.elements, count = _b === void 0 ? 10 : _b, _c = _a.size, size = _c === void 0 ? 4 : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d;
-    return (React.createElement("div", { className: cn(styles.pageIndicator, colorsStyle[colors].pageIndicator), style: { height: size, borderRadius: size / 2 } },
+    var activeElement = _a.activeElement, _b = _a.elements, count = _b === void 0 ? 10 : _b, _c = _a.size, size = _c === void 0 ? 4 : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, className = _a.className;
+    return (React.createElement("div", { className: cn(styles.pageIndicator, colorsStyle[colors].pageIndicator, className), style: { height: size, borderRadius: size / 2 } },
         React.createElement("div", { style: {
                 transform: "translate(".concat(activeElement * 100, "%, 0)"),
                 height: size,

package/esm/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,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;AAEH,IAAM,mBAAmB,GAAuC,UAAC,EAKvE,EAAA;QAJG,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,EAAoB,GAAA,EAAA,CAAA,QAAA,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,EACpB,EAAA,GAAA,EAAA,CAAA,IAAQ,EAAR,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,CAAC,GAAA,EAAA,EACR,cAAkB,EAAlB,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA;AAChB,IAAA,QACF,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,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE;AACH,gBAAA,SAAS,EAAE,YAAA,CAAA,MAAA,CAAa,aAAa,GAAG,GAAG,EAAO,OAAA,CAAA;AAClD,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,KAAK,EAAE,EAAA,CAAA,MAAA,CAAG,GAAG,GAAG,KAAK,EAAG,GAAA,CAAA;gBACxB,YAAY,EAAE,IAAI,GAAG,CAAC;AACzB,aAAA,EACD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAA,CAC5D,CACA;AAdJ;;;;"}
+{"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,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;AAEH,IAAM,mBAAmB,GAAuC,UAAC,EAMvE,EAAA;QALG,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,EAAA,GAAA,EAAA,CAAA,QAAoB,EAAV,KAAK,mBAAG,EAAE,GAAA,EAAA,EACpB,EAAA,GAAA,EAAA,CAAA,IAAQ,EAAR,IAAI,mBAAG,CAAC,GAAA,EAAA,EACR,EAAA,GAAA,EAAA,CAAA,MAAkB,EAAlB,MAAM,mBAAG,SAAS,GAAA,EAAA,EAClB,SAAS,GAAA,EAAA,CAAA,SAAA;AACP,IAAA,QACF,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,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE;AACH,gBAAA,SAAS,EAAE,YAAA,CAAA,MAAA,CAAa,aAAa,GAAG,GAAG,EAAO,OAAA,CAAA;AAClD,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,KAAK,EAAE,EAAA,CAAA,MAAA,CAAG,GAAG,GAAG,KAAK,EAAG,GAAA,CAAA;gBACxB,YAAY,EAAE,IAAI,GAAG,CAAC;AACzB,aAAA,EACD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAA,CAC5D,CACA;AAdJ;;;;"}

package/esm/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/esm/components/runner/default.module.css.js

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

package/esm/components/runner/index.css

@@ -1,7 +1,10 @@
 :root {
     --page-indicator-animation-duration: 0.2s;
 }
-.page-indicator__element_qlc1d {
+.page-indicator__element_1nev8 {
     transition: transform var(--page-indicator-animation-duration) linear;
     will-change: transition;
 }
+.page-indicator__pageIndicator_1nev8 {
+    width: 100%;
+}

package/esm/components/runner/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"element":"page-indicator__element_qlc1d"};
+var styles = {"element":"page-indicator__element_1nev8","pageIndicator":"page-indicator__pageIndicator_1nev8"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/components/runner/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/runner/index.module.css"],"sourcesContent":["@import '../../vars.css';\n\n.element {\n    transition: transform var(--page-indicator-animation-duration) linear;\n    will-change: transition;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,SAAS,CAAC,+BAA+B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/runner/index.module.css"],"sourcesContent":["@import '../../vars.css';\n\n.element {\n    transition: transform var(--page-indicator-animation-duration) linear;\n    will-change: transition;\n}\n\n.pageIndicator {\n    width: 100%;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,SAAS,CAAC,+BAA+B,CAAC,eAAe,CAAC,qCAAqC,CAAC;;;;"}

package/esm/components/runner/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__pageIndicator_1hqt5 {
+.page-indicator__pageIndicator_7wz43 {
     background: var(--page-indicator-color-inverted);
 }
-.page-indicator__element_1hqt5 {
+.page-indicator__element_7wz43 {
     background: var(--page-indicator-active-color-inverted);
 }

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

@@ -1,6 +1,6 @@
 import './inverted.css';
 
-var invertedColors = {"pageIndicator":"page-indicator__pageIndicator_1hqt5","element":"page-indicator__element_1hqt5"};
+var invertedColors = {"pageIndicator":"page-indicator__pageIndicator_7wz43","element":"page-indicator__element_7wz43"};
 
 export { invertedColors as default };
 //# sourceMappingURL=inverted.module.css.js.map

package/esm/components/runner/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__pageIndicator_43pau {
+.page-indicator__pageIndicator_3tgal {
     background: var(--page-indicator-color-static-inverted);
 }
-.page-indicator__element_43pau {
+.page-indicator__element_3tgal {
     background: var(--page-indicator-active-color-static-inverted);
 }

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

@@ -1,6 +1,6 @@
 import './static-inverted.css';
 
-var staticInvertedColors = {"pageIndicator":"page-indicator__pageIndicator_43pau","element":"page-indicator__element_43pau"};
+var staticInvertedColors = {"pageIndicator":"page-indicator__pageIndicator_3tgal","element":"page-indicator__element_3tgal"};
 
 export { staticInvertedColors as default };
 //# sourceMappingURL=static-inverted.module.css.js.map

package/esm/components/runner/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__pageIndicator_19jfy {
+.page-indicator__pageIndicator_b9y6s {
     background: var(--page-indicator-color-static);
 }
-.page-indicator__element_19jfy {
+.page-indicator__element_b9y6s {
     background: var(--page-indicator-active-color-static);
 }

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

@@ -1,6 +1,6 @@
 import './static.css';
 
-var staticColors = {"pageIndicator":"page-indicator__pageIndicator_19jfy","element":"page-indicator__element_19jfy"};
+var staticColors = {"pageIndicator":"page-indicator__pageIndicator_b9y6s","element":"page-indicator__element_b9y6s"};
 
 export { staticColors as default };
 //# sourceMappingURL=static.module.css.js.map

package/esm/components/step/Component.js

@@ -13,10 +13,10 @@ var colorsStyle = {
     'static-inverted': staticInvertedColors,
 };
 var PageIndicatorStep = function (_a) {
-    var activeElement = _a.activeElement, _b = _a.elements, count = _b === void 0 ? 10 : _b, _c = _a.size, size = _c === void 0 ? 4 : _c, _d = _a.gap, gap = _d === void 0 ? 4 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e;
-    return (React.createElement("ol", { className: styles.pageIndicator, style: { height: size, gap: gap } }, Array.from({ length: count }, function (_, index) {
+    var activeElement = _a.activeElement, _b = _a.elements, count = _b === void 0 ? 10 : _b, _c = _a.size, size = _c === void 0 ? 4 : _c, _d = _a.gap, gap = _d === void 0 ? 4 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, className = _a.className;
+    return (React.createElement("div", { className: cn(styles.pageIndicator, className), style: { height: size, gap: gap } }, Array.from({ length: count }, function (_, index) {
         var _a;
-        return (React.createElement("li", { key: index, style: { height: size, borderRadius: size / 2 }, className: cn(styles.element, colorsStyle[colors].element, (_a = {},
+        return (React.createElement("div", { key: index, style: { height: size, borderRadius: size / 2 }, className: cn(styles.element, colorsStyle[colors].element, (_a = {},
                 _a[colorsStyle[colors].active] = index === activeElement,
                 _a)) }));
     })));

package/esm/components/step/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/step/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { type PageIndicatorStepProps } 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 PageIndicatorStep: React.FC<PageIndicatorStepProps> = ({\n    activeElement,\n    elements: count = 10,\n    size = 4,\n    gap = 4,\n    colors = 'default',\n}) => (\n    <ol className={styles.pageIndicator} style={{ height: size, gap }}>\n        {Array.from({ length: count }, (_, index) => (\n            <li\n                key={index}\n                style={{ height: size, borderRadius: size / 2 }}\n                className={cn(styles.element, colorsStyle[colors].element, {\n                    [colorsStyle[colors].active]: index === activeElement,\n                })}\n            />\n        ))}\n    </ol>\n);\n"],"names":[],"mappings":";;;;;;;;AAWA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;AAEH,IAAM,iBAAiB,GAAqC,UAAC,EAMnE,EAAA;AALG,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,EAAoB,GAAA,EAAA,CAAA,QAAA,EAAV,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACpB,EAAA,GAAA,EAAA,CAAA,IAAQ,EAAR,IAAI,GAAG,EAAA,KAAA,MAAA,GAAA,CAAC,GAAA,EAAA,EACR,EAAO,GAAA,EAAA,CAAA,GAAA,EAAP,GAAG,GAAA,EAAA,KAAA,MAAA,GAAG,CAAC,GAAA,EAAA,EACP,EAAA,GAAA,EAAA,CAAA,MAAkB,EAAlB,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA;AAChB,IAAA,QACF,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAA,GAAA,EAAE,EAC5D,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,UAAC,CAAC,EAAE,KAAK,EAAA;;AAAK,QAAA,QACzC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACI,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE,EAC/C,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA;gBACrD,EAAC,CAAA,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAA,GAAG,KAAK,KAAK,aAAa;AACvD,gBAAA,EAAA,EAAA,EAAA,CACJ;KACL,CAAC,CACD;AAXH;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/step/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { type PageIndicatorStepProps } 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 PageIndicatorStep: React.FC<PageIndicatorStepProps> = ({\n    activeElement,\n    elements: count = 10,\n    size = 4,\n    gap = 4,\n    colors = 'default',\n    className,\n}) => (\n    <div className={cn(styles.pageIndicator, className)} style={{ height: size, gap }}>\n        {Array.from({ length: count }, (_, index) => (\n            <div\n                key={index}\n                style={{ height: size, borderRadius: size / 2 }}\n                className={cn(styles.element, colorsStyle[colors].element, {\n                    [colorsStyle[colors].active]: index === activeElement,\n                })}\n            />\n        ))}\n    </div>\n);\n"],"names":[],"mappings":";;;;;;;;AAWA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,iBAAiB,EAAE,oBAAoB;CACjC;AAEH,IAAM,iBAAiB,GAAqC,UAAC,EAOnE,EAAA;AANG,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,EAAoB,GAAA,EAAA,CAAA,QAAA,EAAV,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACpB,EAAA,GAAA,EAAA,CAAA,IAAQ,EAAR,IAAI,mBAAG,CAAC,GAAA,EAAA,EACR,EAAA,GAAA,EAAA,CAAA,GAAO,EAAP,GAAG,GAAG,EAAA,KAAA,MAAA,GAAA,CAAC,KAAA,EACP,EAAA,GAAA,EAAA,CAAA,MAAkB,EAAlB,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA,EAClB,SAAS,GAAA,EAAA,CAAA,SAAA;AACP,IAAA,QACF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAA,GAAA,EAAE,EAC5E,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,UAAC,CAAC,EAAE,KAAK,EAAA;;AAAK,QAAA,QACzC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,GAAG,CAAC,EAAE,EAC/C,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA;gBACrD,EAAC,CAAA,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAA,GAAG,KAAK,KAAK,aAAa;AACvD,gBAAA,EAAA,EAAA,EAAA,CACJ;KACL,CAAC,CACA;AAXJ;;;;"}

package/esm/components/step/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_1ea0d {
+.page-indicator__element_nqwqn {
     background: var(--page-indicator-color);
 }
-.page-indicator__element_1ea0d.page-indicator__active_1ea0d {
+.page-indicator__element_nqwqn.page-indicator__active_nqwqn {
         background: var(--page-indicator-active-color);
     }

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

@@ -1,6 +1,6 @@
 import './default.css';
 
-var defaultColors = {"element":"page-indicator__element_1ea0d","active":"page-indicator__active_1ea0d"};
+var defaultColors = {"element":"page-indicator__element_nqwqn","active":"page-indicator__active_nqwqn"};
 
 export { defaultColors as default };
 //# sourceMappingURL=default.module.css.js.map

package/esm/components/step/index.css

@@ -2,12 +2,11 @@
     --page-indicator-animation-duration: 0.2s;
     --page-indicator-animation-timing-function: ease-in-out;
 }
-.page-indicator__pageIndicator_1n6uh {
-    margin: 0;
-    padding: 0;
+.page-indicator__pageIndicator_yfjk6 {
     display: flex;
+    width: 100%;
 }
-.page-indicator__element_1n6uh {
+.page-indicator__element_yfjk6 {
     list-style-type: none;
     flex-grow: 1;
     transition: backgroud var(--page-indicator-animation-duration)

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"pageIndicator":"page-indicator__pageIndicator_1n6uh","element":"page-indicator__element_1n6uh"};
+var styles = {"pageIndicator":"page-indicator__pageIndicator_yfjk6","element":"page-indicator__element_yfjk6"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/components/step/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/step/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    flex-grow: 1;\n    transition: backgroud var(--page-indicator-animation-duration)\n        var(--page-indicator-animation-timing-function);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,eAAe,CAAC,qCAAqC,CAAC,SAAS,CAAC,+BAA+B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/step/index.module.css"],"sourcesContent":["@import '../../vars.css';\n\n.pageIndicator {\n    display: flex;\n    width: 100%;\n}\n\n.element {\n    list-style-type: none;\n    flex-grow: 1;\n    transition: backgroud var(--page-indicator-animation-duration)\n        var(--page-indicator-animation-timing-function);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,eAAe,CAAC,qCAAqC,CAAC,SAAS,CAAC,+BAA+B,CAAC;;;;"}

package/esm/components/step/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_1ebaj {
+.page-indicator__element_7acin {
     background: var(--page-indicator-color-inverted);
 }
-.page-indicator__element_1ebaj.page-indicator__active_1ebaj {
+.page-indicator__element_7acin.page-indicator__active_7acin {
         background: var(--page-indicator-active-color-inverted);
     }