npm - @alfalab/core-components-page-indicator - Versions diffs - 3.0.3 → 3.0.4-alfasans - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (195) hide show

package/components/bullet/Component.js CHANGED Viewed

@@ -25,11 +25,11 @@ var colorsStyle = {
 };
 var transitionClassess = {};
 var PageIndicatorBullet = function (_a) {
-    var _b = _a.elements, count = _b === void 0 ? 10 : _b, activeElementIndex = _a.activeElement, _c = _a.size, size = _c === void 0 ? 8 : _c, _d = _a.gap, gap = _d === void 0 ? 8 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e;
+    var _b = _a.elements, count = _b === void 0 ? 10 : _b, activeElementIndex = _a.activeElement, _c = _a.size, size = _c === void 0 ? 8 : _c, _d = _a.gap, gap = _d === void 0 ? 8 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, className = _a.className;
     var refs = React.useMemo(function () { return Array.from({ length: count }, function () { return React.createRef(); }); }, [count]);
     var _f = React.useMemo(function () { return utils.calcParams(size, gap, activeElementIndex, count); }, [activeElementIndex, count, gap, size]), height = _f[0], width = _f[1], offset = _f[2], elementSize = _f[3], firstVisibleElementIndex = _f[4], lastVisibleElementIndex = _f[5];
-    return (React__default.default.createElement("div", { className: cn__default.default(index_module.pageIndicator, index_module.bullet), style: { height: height, width: width } },
-        React__default.default.createElement("ol", { className: index_module.elementsList, style: { gap: gap, transform: "translate(".concat(offset, "px)") } }, refs.map(function (ref, index) {
+    return (React__default.default.createElement("div", { className: cn__default.default(index_module.pageIndicator, index_module.bullet, className), style: { height: height, width: width } },
+        React__default.default.createElement("div", { className: index_module.elementsList, style: { gap: gap, transform: "translate(".concat(offset, "px)") } }, refs.map(function (ref, index) {
             var sizeOfElement = elementSize(index);
             var isActive = activeElementIndex === index;
             var isVisible = firstVisibleElementIndex <= index && index <= lastVisibleElementIndex;
@@ -46,7 +46,7 @@ var PageIndicatorBullet = function (_a) {
                 // passed empty object so any classes aren't added
                 classNames: transitionClassess }, function (status) {
                 var _a;
-                return (React__default.default.createElement("li", { ref: ref, "data-index": index, className: cn__default.default(index_module.element, colorsStyle[colors].element, (_a = {}, _a[colorsStyle[colors].active] = isActive, _a), index_module[status]), style: { height: sizeOfElement, width: sizeOfElement } }));
+                return (React__default.default.createElement("div", { ref: ref, "data-index": index, className: cn__default.default(index_module.element, colorsStyle[colors].element, (_a = {}, _a[colorsStyle[colors].active] = isActive, _a), index_module[status]), style: { height: sizeOfElement, width: sizeOfElement } }));
             }));
         }))));
 };

package/components/bullet/Component.js.map CHANGED Viewed

	@@ -1 +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":["invertedColors","defaultColors","staticColors","staticInvertedColors","useMemo","createRef","calcParams","React","cn","styles","CSSTransition"],"mappings":";;;;;;;;;;;;;;;;;;;AAcA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAEA,eAAc;AACxB,IAAA,OAAO,EAAEC,cAAa;AACtB,IAAA,MAAM,EAAEC,aAAY;AACpB,IAAA,iBAAiB,EAAEC,qBAAoB;CACjC;AAEV,IAAM,kBAAkB,GAAG,EAAW;AAE/B,IAAM,mBAAmB,GAAiC,UAAC,~~EAMjE~~,EAAA;~~AALG~~,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,QAAoB,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACL,kBAAkB,GAAA,EAAA,CAAA,aAAA,EACjC,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;~~AAElB~~,IAAA,IAAM,IAAI,GAAGC,aAAO,CAChB,YAAM,EAAA,OAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,YAAA,EAAM,OAAAC,eAAS,~~EAAiB~~,CAAA,EAAA,CAAC,~~CAA/D~~,~~EAA+D~~,~~EACrE~~,CAAC,KAAK,CAAC,CACV;IACK,IAAA,EAAA,GACFD,aAAO,CACH,YAAA,EAAM,OAAAE,gBAAU,CAAC,IAAI,EAAE,GAAG,EAAE,kBAAkB,EAAE,KAAK,CAAC,CAAA,EAAA,EACtD,CAAC,kBAAkB,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,CACzC,EAJE,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,WAAW,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,wBAAwB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,uBAAuB,GAAA,EAAA,CAAA,CAAA,CAIvF;IAEL,QACIC,~~8CAAK~~,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,aAAa,EAAEA,YAAM,CAAC,MAAM,CAAC,~~EAAE~~,KAAK,EAAE,EAAE,MAAM,EAAA,MAAA,EAAE,KAAK,EAAA,KAAA,EAAE,EAAA;~~QAC7EF~~,sBACI,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,EAAA,SAAS,EAAEE,YAAM,CAAC,YAAY,EAC9B,KAAK,EAAE,EAAE,GAAG,EAAA,GAAA,EAAE,SAAS,EAAE,YAAa,CAAA,MAAA,CAAA,MAAM,EAAK,KAAA,CAAA,EAAE,EAElD,EAAA,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,KAAK,EAAA;AACjB,YAAA,IAAM,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC;AACxC,YAAA,IAAM,QAAQ,GAAG,kBAAkB,KAAK,KAAK;YAC7C,IAAM,SAAS,GACX,wBAAwB,IAAI,KAAK,IAAI,KAAK,IAAI,uBAAuB;YACzE,IAAM,4BAA4B,GAAG,UAAC,IAAgB,EAAA;;gBAClD,IAAM,aAAa,GAAG,CAAA,EAAA,GAAA,GAAG,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,aAAa;AAEhD,gBAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,gBAAgB,CAAC,eAAe,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAC1E,aAAC;YAED,QACIF,qCAACG;;;;AAEG,gBAAA,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EACZ,cAAc,EAAE,4BAA4B,EAC5C,EAAE,EAAE,SAAS;;AAEb,gBAAA,UAAU,EAAE,kBAAkB,EAE7B,EAAA,UAAC,MAAM,EAAA;;gBAAK,QACTH,~~6CACI~~,GAAG,EAAE,GAAG,EACI,YAAA,EAAA,KAAK,EACjB,SAAS,EAAEC,mBAAE,CACTC,YAAM,CAAC,OAAO,EACd,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA,EACzB,EAAC,CAAA,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAG,GAAA,QAAQ,OACxCA,YAAM,CAAC,MAAM,CAAC,CACjB,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAA,CACxD;aACL,CACW;AAExB,SAAC,CAAC,~~CACD~~,~~CACH~~;AAEd;;;;"}
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 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":["invertedColors","defaultColors","staticColors","staticInvertedColors","useMemo","createRef","calcParams","React","cn","styles","CSSTransition"],"mappings":"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"}

package/components/bullet/default.css CHANGED Viewed

@@ -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/components/bullet/default.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./default.css');
-var defaultColors = {"element":"page-indicator__element_e3ryn","active":"page-indicator__active_e3ryn"};
+var defaultColors = {"element":"page-indicator__element_p30ls","active":"page-indicator__active_p30ls"};
 module.exports = defaultColors;
 //# sourceMappingURL=default.module.css.js.map

package/components/bullet/index.css CHANGED Viewed

@@ -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/components/bullet/index.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./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"};
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/bullet/index.module.css.js.map CHANGED Viewed

	@@ -1 +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;;;;"}
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 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/components/bullet/inverted.css CHANGED Viewed

@@ -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/components/bullet/inverted.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./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"};
 module.exports = invertedColors;
 //# sourceMappingURL=inverted.module.css.js.map

package/components/bullet/static-inverted.css CHANGED Viewed

@@ -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/components/bullet/static-inverted.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./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"};
 module.exports = staticInvertedColors;
 //# sourceMappingURL=static-inverted.module.css.js.map

package/components/bullet/static.css CHANGED Viewed

@@ -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/components/bullet/static.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./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"};
 module.exports = staticColors;
 //# sourceMappingURL=static.module.css.js.map

package/components/dynamic/Component.js CHANGED Viewed

@@ -24,7 +24,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 = React.useState(indexFromProps !== null && indexFromProps !== void 0 ? indexFromProps : defaultIndex), activeIndex = _k[0], setActiveIndex = _k[1];
     var _l = React.useState(0), progress = _l[0], setProgress = _l[1];
     var inProgress = progress < FULL_PROGRESS;
@@ -62,7 +62,7 @@ var PageIndicatorDynamic = function (props) {
         setActiveIndex(nextActiveIndex);
         setProgress(0);
     }, [activeIndex, activeIndexInProps, count, cycle, inProgress, onActiveElementChange]);
-    return (React__default.default.createElement("ol", { className: index_module.pageIndicator, style: { height: height, gap: gap } }, Array.from({ length: count }, function (_, index) {
+    return (React__default.default.createElement("div", { className: cn__default.default(index_module.pageIndicator, className), style: { height: height, gap: gap } }, Array.from({ length: count }, function (_, index) {
         var _a;
         var isActive = index === activeIndex;
         var style = {
@@ -72,7 +72,7 @@ var PageIndicatorDynamic = function (props) {
         var progressStyle = isActive
             ? { transform: "translateX(".concat(progress - FULL_PROGRESS, "%)") }
             : undefined;
-        return (React__default.default.createElement("li", { key: index, style: style, className: cn__default.default(index_module.element, colorsStyle[colors].element, (_a = {},
+        return (React__default.default.createElement("div", { key: index, style: style, className: cn__default.default(index_module.element, colorsStyle[colors].element, (_a = {},
                 _a[index_module.active] = isActive,
                 _a[colorsStyle[colors].active] = isActive,
                 _a)) },

package/components/dynamic/Component.js.map CHANGED Viewed

	@@ -1 +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":["invertedColors","defaultColors","staticColors","staticInvertedColors","useState","hasOwnProperty","isNonNullable","isFn","useEffect","noop","isNullable","React","~~styles~~","cn"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAEA,eAAc;AACxB,IAAA,OAAO,EAAEC,cAAa;AACtB,IAAA,MAAM,EAAEC,aAAY;AACpB,IAAA,iBAAiB,EAAEC,qBAAoB;CACjC;AAEV,IAAM,aAAa,GAAG,GAAG;AAElB,IAAM,oBAAoB,GAAwC,UAAC,KAAK,EAAA;IAEvE,IAAA,EAAA,~~GAWA~~,KAAK,~~CAXW~~,IAAA,EAAV,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,CAAC,KAAA,EAChB,EAAA,~~GAUA~~,KAAK,~~CAVE~~,GAAA,EAAP,GAAG,GAAG,EAAA,KAAA,MAAA,GAAA,CAAC,KAAA,EACP,EAAA,~~GASA~~,KAAK,~~CAT0B~~,~~kBAAA~~,EAA/B,kBAAkB,~~GAAG~~,~~EAAA,KAAA,MAAA,GAAA,~~MAAM,GAAG,CAAC,GAAA,EAAA,EAC/B,~~EAQA~~,~~GAAA,~~KAAK,~~SARe~~,EAAV,KAAK,~~mBAAG~~,EAAE,GAAA,EAAA,EACL,cAAc,~~GAO7B~~,KAAK,~~CAPwB~~,~~aAAA,~~EAC7B,qBAAqB,~~GAMrB~~,KAAK,~~sBANgB~~,EACrB,~~EAAA~~,~~GAKA,~~KAAK,~~CALiC~~,~~oBAAA~~,EAAhB,YAAY,~~GAAG~~,EAAA,KAAA,MAAA,~~GAAA~~,CAAC,~~KAAA~~,EACtC,~~EAAA~~,~~GAIA,~~KAAK,~~CAJQ~~,~~MAAA~~,EAAb,MAAM,~~GAAG~~,EAAA,KAAA,MAAA,~~GAAA~~,IAAI,~~KAAA~~,EACb,~~EAAA~~,~~GAGA,~~KAAK,~~CAH6B~~,~~QAAA~~,EAAxB,iBAAiB,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,KAAA,EAClC,EAAA,~~GAEA~~,KAAK,~~CAFQ~~,KAAA,EAAb,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,KAAK,~~KAAA~~,EACb,~~EAAA~~,~~GACA~~,KAAK,~~CADa~~,~~MAAA,~~EAAlB,MAAM,~~GAAG~~,~~EAAA~~,~~KAAA~~,~~MAAA~~,~~GAAA~~,SAAS,~~KAAA~~;~~AAEhB~~,IAAA,IAAA,KAAgCC,cAAQ,CAC1C,cAAc,KAAA,IAAA,IAAd,cAAc,KAAd,MAAA,GAAA,cAAc,GAAI,YAAY,CACjC,EAFM,WAAW,QAAA,EAAE,cAAc,QAEjC;IACK,IAAA,EAAA,GAA0BA,cAAQ,CAAC,CAAC,CAAC,EAApC,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,WAAW,GAAA,EAAA,CAAA,CAAA,CAAe;AAC3C,IAAA,IAAM,UAAU,GAAG,QAAQ,GAAG,aAAa;IAC3C,IAAM,kBAAkB,GAAGC,mCAAc,CAAC,KAAK,EAAE,eAAe,CAAC;AACjE,IAAA,IAAI,QAAgB;IAEpB,IAAI,MAAM,IAAIC,kCAAa,CAAC,WAAW,CAAC,IAAI,UAAU,EAAE;AACpD,QAAA,QAAQ,GAAGC,yBAAI,CAAC,iBAAiB,CAAC,GAAG,iBAAiB,CAAC,WAAW,CAAC,GAAG,iBAAiB;;SACpF;QACH,QAAQ,GAAG,EAAE;;;IAIjB,IAAI,kBAAkB,IAAI,EAAE,WAAW,KAAK,cAAc,CAAC,EAAE;QACzD,cAAc,CAAC,cAAc,CAAC;QAC9B,WAAW,CAAC,CAAC,CAAC;;AAGlB,IAAAC,eAAS,CAAC,YAAA;AACN,QAAA,IAAI,QAAQ,KAAK,EAAE,EAAE;AACjB,YAAA,OAAOC,yBAAI;;AAGf,QAAA,IAAM,QAAQ,GAAG,QAAQ,GAAG,aAAa;AACzC,QAAA,IAAM,KAAK,GAAG,WAAW,CACrB,YAAM,EAAA,OAAA,WAAW,CAAC,UAAC,YAAY,EAAK,EAAA,OAAA,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,EAAE,aAAa,CAAC,CAAA,EAAA,CAAC,CAAxE,EAAwE,EAC9E,QAAQ,CACX;QAED,OAAO,YAAA,EAAM,OAAA,aAAa,CAAC,KAAK,CAAC,CAAA,EAAA;AACrC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAAD,eAAS,CAAC,YAAA;AACN,QAAA,IAAM,MAAM,GAAG,WAAW,KAAK,KAAK,GAAG,CAAC;AAExC,QAAA,IAAI,UAAU,IAAIE,+BAAU,CAAC,WAAW,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,EAAE;YAC7D;;AAGJ,QAAA,IAAM,eAAe,GAAG,MAAM,IAAI,KAAK,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC;AAE7D,QAAA,qBAAqB,aAArB,qBAAqB,KAAA,MAAA,GAAA,MAAA,GAArB,qBAAqB,CAAG,eAAe,CAAC;QAExC,IAAI,kBAAkB,EAAE;YACpB;;QAGJ,cAAc,CAAC,eAAe,CAAC;QAC/B,WAAW,CAAC,CAAC,CAAC;AAClB,KAAC,EAAE,CAAC,WAAW,EAAE,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,qBAAqB,CAAC,CAAC;AAEtF,IAAA,QACIC,~~sBAAA~~,CAAA,aAAA,CAAA,~~IAAA~~,EAAA,~~EAAI~~,SAAS,EAAEC,YAAM,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,MAAM,~~QAAA~~,EAAE,GAAG,~~EAAA~~,~~GAAA,~~EAAE,~~EACtD,~~EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,UAAC,CAAC,EAAE,KAAK,EAAA;;AACpC,QAAA,IAAM,QAAQ,GAAG,KAAK,KAAK,WAAW;AACtC,QAAA,IAAM,KAAK,GAAwB;YAC/B,KAAK,EAAE,QAAQ,GAAG,kBAAkB,GAAG,MAAM;YAC7C,YAAY,EAAE,MAAM,GAAG,CAAC;SAC3B;QACD,IAAM,aAAa,GAAoC;cACjD,EAAE,SAAS,EAAE,qBAAc,QAAQ,GAAG,aAAa,EAAA,IAAA,CAAI;cACvD,SAAS;QAEf,~~QACID~~,~~6CACI~~,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,~~EAAEE~~,mBAAE,~~CAACD~~,YAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA;AACrD,gBAAA,EAAA,CAACA,YAAM,CAAC,MAAM,CAAA,GAAG,QAAQ;AACzB,gBAAA,EAAA,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,IAAG,QAAQ;AACxC,gBAAA,EAAA,EAAA,EAAA;~~YAEFD~~,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,aAAa,EACpB,SAAS,~~EAAEE~~,mBAAE,~~CAACD~~,YAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAA,CAC9D,~~CACD~~;~~KAEZ~~,CAAC,~~CACD~~;~~AAEb~~;;;;"}
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 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":["invertedColors","defaultColors","staticColors","staticInvertedColors","useState","hasOwnProperty","isNonNullable","isFn","useEffect","noop","isNullable","React","cn","styles"],"mappings":"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"}

package/components/dynamic/default.css CHANGED Viewed

@@ -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/components/dynamic/default.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./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"};
 module.exports = defaultColors;
 //# sourceMappingURL=default.module.css.js.map

package/components/dynamic/index.css CHANGED Viewed

@@ -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/components/dynamic/index.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./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"};
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/dynamic/index.module.css.js.map CHANGED Viewed

	@@ -1 +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;;;;"}
1	+ {"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/components/dynamic/inverted.css CHANGED Viewed

@@ -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/components/dynamic/inverted.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./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"};
 module.exports = invertedColors;
 //# sourceMappingURL=inverted.module.css.js.map

package/components/dynamic/static-inverted.css CHANGED Viewed

@@ -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/components/dynamic/static-inverted.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./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"};
 module.exports = staticInvertedColors;
 //# sourceMappingURL=static-inverted.module.css.js.map

package/components/dynamic/static.css CHANGED Viewed

@@ -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/components/dynamic/static.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./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"};
 module.exports = staticColors;
 //# sourceMappingURL=static.module.css.js.map

package/components/runner/Component.js CHANGED Viewed

@@ -22,8 +22,8 @@ var colorsStyle = {
     'static-inverted': staticInverted_module,
 };
 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__default.default.createElement("div", { className: cn__default.default(index_module.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__default.default.createElement("div", { className: cn__default.default(index_module.pageIndicator, colorsStyle[colors].pageIndicator, className), style: { height: size, borderRadius: size / 2 } },
         React__default.default.createElement("div", { style: {
                 transform: "translate(".concat(activeElement * 100, "%, 0)"),
                 height: size,

package/components/runner/Component.js.map CHANGED Viewed

	@@ -1 +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":["invertedColors","defaultColors","staticColors","staticInvertedColors","React","cn","styles"],"mappings":";;;;;;;;;;;;;;;;;AAWA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAEA,eAAc;AACxB,IAAA,OAAO,EAAEC,cAAa;AACtB,IAAA,MAAM,EAAEC,aAAY;AACpB,IAAA,iBAAiB,EAAEC,qBAAoB;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,QACFC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,YAAM,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,QAAAF,sBAAA,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,EAAEC,mBAAE,CAACC,YAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAA,CAC5D,CACA;AAdJ;;;;"}
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 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":["invertedColors","defaultColors","staticColors","staticInvertedColors","React","cn","styles"],"mappings":";;;;;;;;;;;;;;;;;AAWA,IAAM,WAAW,GAAG;AAChB,IAAA,QAAQ,EAAEA,eAAc;AACxB,IAAA,OAAO,EAAEC,cAAa;AACtB,IAAA,MAAM,EAAEC,aAAY;AACpB,IAAA,iBAAiB,EAAEC,qBAAoB;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,QACFC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,YAAM,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,QAAAF,sBAAA,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,EAAEC,mBAAE,CAACC,YAAM,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAA,CAC5D,CACA;AAdJ;;;;"}

package/components/runner/default.css CHANGED Viewed

@@ -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/components/runner/default.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./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"};
 module.exports = defaultColors;
 //# sourceMappingURL=default.module.css.js.map

package/components/runner/index.css CHANGED Viewed

@@ -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/components/runner/index.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./index.css');
-var styles = {"element":"page-indicator__element_qlc1d"};
+var styles = {"element":"page-indicator__element_1nev8","pageIndicator":"page-indicator__pageIndicator_1nev8"};
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/runner/index.module.css.js.map CHANGED Viewed

	@@ -1 +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;;;;"}
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\n.pageIndicator {\n width: 100%;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,SAAS,CAAC,+BAA+B,CAAC,eAAe,CAAC,qCAAqC,CAAC;;;;"}

package/components/runner/inverted.css CHANGED Viewed

@@ -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/components/runner/inverted.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./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"};
 module.exports = invertedColors;
 //# sourceMappingURL=inverted.module.css.js.map

package/components/runner/static-inverted.css CHANGED Viewed

@@ -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/components/runner/static-inverted.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./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"};
 module.exports = staticInvertedColors;
 //# sourceMappingURL=static-inverted.module.css.js.map

package/components/runner/static.css CHANGED Viewed

@@ -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/components/runner/static.module.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 require('./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"};
 module.exports = staticColors;
 //# sourceMappingURL=static.module.css.js.map