@gravity-ui/page-constructor 6.0.0 → 7.0.0-beta.1

package/build/esm/blocks/Slider/utils.d.ts

@@ -1,37 +1,16 @@
-import * as React from 'react';
-import { SliderBreakpointParams, SlidesToShow } from "./models.js";
+import type { SwiperOptions } from 'swiper/types/swiper-options';
+import { SlidesToShow } from "./models.js";
 export declare const DEFAULT_SLIDE_BREAKPOINTS: {
-    xl: number;
     lg: number;
     md: number;
     sm: number;
+    xs: number;
 };
 export interface GetSlidesToShowParams {
     contentLength: number;
-    breakpoints?: SlidesToShow;
+    slidesToShow?: SlidesToShow;
     mobileFullscreen?: boolean;
 }
-export declare const isFocusable: (element: Element) => boolean;
-export declare function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscreen, }: GetSlidesToShowParams): {
-    sm: number;
-    xl: number;
-    lg: number;
-    md: number;
-};
-export declare function getSliderResponsiveParams(breakpoints: SliderBreakpointParams): {
-    breakpoint: number;
-    settings: {
-        slidesToShow: number;
-    };
-}[];
-export declare function getSlidesCountByBreakpoint(breakpoint: number, breakpoints: SliderBreakpointParams): number;
-export declare function getSlidesToShowCount(breakpoints: SliderBreakpointParams): number;
-export declare function useRovingTabIndex(props: {
-    itemCount: number;
-    activeIndex: number;
-    firstIndex?: number;
-    uniqId: string;
-}): {
-    getRovingItemProps: (index: number) => Pick<React.HTMLAttributes<HTMLElement>, "id" | "tabIndex" | "onFocus">;
-    rovingListProps: React.HTMLAttributes<HTMLElement>;
-};
+export declare function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscreen, }: GetSlidesToShowParams): Record<number, SwiperOptions>;
+export declare const useMemoized: <T>(value: T) => T;
+export declare const setElementAtrributes: (element: Element, attributes: Record<string, unknown>) => void;

package/build/esm/blocks/Slider/utils.js

@@ -1,116 +1,37 @@
-import pickBy from "lodash/pickBy.js";
 import * as React from 'react';
+import isEqual from "lodash/isEqual.js";
+import pickBy from "lodash/pickBy.js";
 import { BREAKPOINTS } from "../../constants.js";
 import { SliderBreakpointNames } from "./models.js";
 export const DEFAULT_SLIDE_BREAKPOINTS = {
-    [SliderBreakpointNames.Xl]: 3,
-    [SliderBreakpointNames.Lg]: 2,
+    [SliderBreakpointNames.Lg]: 3,
     [SliderBreakpointNames.Md]: 2,
-    [SliderBreakpointNames.Sm]: 1.15,
-};
-const BREAKPOINT_NAMES_BY_VALUES = Object.entries(BREAKPOINTS).reduce((acc, [key, value]) => (Object.assign(Object.assign({}, acc), { [value]: key })), {});
-export const isFocusable = (element) => {
-    if (!(element instanceof HTMLElement)) {
-        return false;
-    }
-    const tabIndexAttr = element.getAttribute('tabindex');
-    const hasTabIndex = tabIndexAttr !== null;
-    const tabIndex = Number(tabIndexAttr);
-    if (element.ariaHidden === 'true' || (hasTabIndex && tabIndex < 0)) {
-        return false;
-    }
-    if (hasTabIndex && tabIndex >= 0) {
-        return true;
-    }
-    // without this jest fails here for some reason
-    let htmlElement;
-    switch (true) {
-        case element instanceof HTMLAnchorElement:
-            htmlElement = element;
-            return Boolean(htmlElement.href);
-        case element instanceof HTMLInputElement:
-            htmlElement = element;
-            return htmlElement.type !== 'hidden' && !htmlElement.disabled;
-        case element instanceof HTMLSelectElement:
-        case element instanceof HTMLTextAreaElement:
-        case element instanceof HTMLButtonElement:
-            htmlElement = element;
-            return !htmlElement.disabled;
-        default:
-            return false;
-    }
+    [SliderBreakpointNames.Sm]: 2,
+    [SliderBreakpointNames.Xs]: 1.15,
 };
-export function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscreen, }) {
+export function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscreen, }) {
     let result;
-    if (typeof breakpoints === 'number') {
-        result = Object.keys(DEFAULT_SLIDE_BREAKPOINTS).reduce((acc, breakpointName) => (Object.assign(Object.assign({}, acc), { [breakpointName]: breakpoints })), {});
+    if (typeof slidesToShow === 'number') {
+        result = Object.keys(DEFAULT_SLIDE_BREAKPOINTS).reduce((acc, breakpointName) => (Object.assign(Object.assign({}, acc), { [breakpointName]: slidesToShow })), {});
     }
     else {
-        result = breakpoints || DEFAULT_SLIDE_BREAKPOINTS;
+        result = slidesToShow || DEFAULT_SLIDE_BREAKPOINTS;
     }
-    return Object.assign(Object.assign(Object.assign({}, DEFAULT_SLIDE_BREAKPOINTS), pickBy(result, (value) => !isNaN(value))), { sm: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.sm : 1 });
-}
-export function getSliderResponsiveParams(breakpoints) {
-    return Object.entries(breakpoints).map(([breakpointName, slidesToShow]) => ({
-        breakpoint: BREAKPOINTS[breakpointName],
-        settings: { slidesToShow },
-    }));
-}
-export function getSlidesCountByBreakpoint(breakpoint, breakpoints) {
-    const breakpointName = BREAKPOINT_NAMES_BY_VALUES[breakpoint];
-    return Math.floor(breakpoints[breakpointName]);
-}
-export function getSlidesToShowCount(breakpoints) {
-    return Math.floor(Math.max(...Object.values(breakpoints)));
-}
-const getRovingListItemId = (uniqId, index) => `${uniqId}-roving-tabindex-item-${index}`;
-export function useRovingTabIndex(props) {
-    const { itemCount, activeIndex, firstIndex = 0, uniqId } = props;
-    const [currentIndex, setCurrentIndex] = React.useState(firstIndex);
-    const hasFocusRef = React.useRef(false);
-    const lastIndex = itemCount + firstIndex - 1;
-    const getRovingItemProps = (index) => {
-        return {
-            id: getRovingListItemId(uniqId, index),
-            tabIndex: index === activeIndex ? 0 : -1,
-            onFocus: () => {
-                setCurrentIndex(index);
-                hasFocusRef.current = true;
-            },
+    const showCount = Object.assign(Object.assign(Object.assign({}, DEFAULT_SLIDE_BREAKPOINTS), pickBy(result, (value) => !isNaN(value))), { xs: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.xs : 1 });
+    return Object.entries(showCount).reduce((res, [breakpointName, value]) => {
+        // eslint-disable-next-line no-param-reassign
+        res[BREAKPOINTS[breakpointName] + 1] = {
+            slidesPerView: value,
         };
-    };
-    React.useEffect(() => {
-        var _a;
-        if (!hasFocusRef.current) {
-            return;
-        }
-        (_a = document.getElementById(getRovingListItemId(uniqId, currentIndex))) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [activeIndex, currentIndex, uniqId]);
-    const setNextIndex = () => setCurrentIndex((prev) => (prev >= lastIndex ? firstIndex : prev + 1));
-    const setPrevIndex = () => setCurrentIndex((prev) => (prev <= firstIndex ? lastIndex : prev - 1));
-    const onRovingListKeyDown = (e) => {
-        const key = e.key.toLowerCase();
-        if (key !== 'tab' && key !== 'enter') {
-            e.preventDefault();
-        }
-        switch (key) {
-            case 'arrowleft':
-            case 'arrowup':
-                setPrevIndex();
-                return;
-            case 'arrowright':
-            case 'arrowdown':
-                setNextIndex();
-                return;
-        }
-    };
-    const onRovingListBlur = () => {
-        hasFocusRef.current = false;
-    };
-    const rovingListProps = {
-        onKeyDown: onRovingListKeyDown,
-        onBlur: onRovingListBlur,
-    };
-    return { getRovingItemProps, rovingListProps };
+        return res;
+    }, {});
 }
+export const useMemoized = (value) => {
+    const [memoizedValue, setMemoizedValue] = React.useState(value);
+    React.useEffect(() => {
+        setMemoizedValue((memoized) => value && typeof value === 'object' && isEqual(memoized, value) ? memoized : value);
+    }, [value]);
+    return memoizedValue;
+};
+export const setElementAtrributes = (element, attributes) => Object.entries(attributes).forEach(([attribute, value]) => element.setAttribute(attribute, String(value)));
 //# sourceMappingURL=utils.js.map

package/build/esm/blocks/Slider/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"../../../../src","sources":["blocks/Slider/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import pickBy from 'lodash/pickBy';\nimport * as React from 'react';\n\nimport {BREAKPOINTS} from '../../constants';\n\nimport {SliderBreakpointNames, SliderBreakpointParams, SlidesToShow} from './models';\n\nexport const DEFAULT_SLIDE_BREAKPOINTS = {\n    [SliderBreakpointNames.Xl]: 3,\n    [SliderBreakpointNames.Lg]: 2,\n    [SliderBreakpointNames.Md]: 2,\n    [SliderBreakpointNames.Sm]: 1.15,\n};\n\nconst BREAKPOINT_NAMES_BY_VALUES = Object.entries(BREAKPOINTS).reduce<\n    Record<number, SliderBreakpointNames>\n>((acc, [key, value]) => ({...acc, [value]: key as SliderBreakpointNames}), {});\n\nexport interface GetSlidesToShowParams {\n    contentLength: number;\n    breakpoints?: SlidesToShow;\n    mobileFullscreen?: boolean;\n}\n\nexport const isFocusable = (element: Element): boolean => {\n    if (!(element instanceof HTMLElement)) {\n        return false;\n    }\n    const tabIndexAttr = element.getAttribute('tabindex');\n    const hasTabIndex = tabIndexAttr !== null;\n    const tabIndex = Number(tabIndexAttr);\n    if (element.ariaHidden === 'true' || (hasTabIndex && tabIndex < 0)) {\n        return false;\n    }\n    if (hasTabIndex && tabIndex >= 0) {\n        return true;\n    }\n\n    // without this jest fails here for some reason\n    let htmlElement:\n        | HTMLAnchorElement\n        | HTMLInputElement\n        | HTMLSelectElement\n        | HTMLTextAreaElement\n        | HTMLButtonElement;\n    switch (true) {\n        case element instanceof HTMLAnchorElement:\n            htmlElement = element as HTMLAnchorElement;\n            return Boolean(htmlElement.href);\n        case element instanceof HTMLInputElement:\n            htmlElement = element as HTMLInputElement;\n            return htmlElement.type !== 'hidden' && !htmlElement.disabled;\n        case element instanceof HTMLSelectElement:\n        case element instanceof HTMLTextAreaElement:\n        case element instanceof HTMLButtonElement:\n            htmlElement = element as HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement;\n            return !htmlElement.disabled;\n        default:\n            return false;\n    }\n};\n\nexport function getSlidesToShowWithDefaults({\n    contentLength,\n    breakpoints,\n    mobileFullscreen,\n}: GetSlidesToShowParams) {\n    let result;\n\n    if (typeof breakpoints === 'number') {\n        result = Object.keys(DEFAULT_SLIDE_BREAKPOINTS).reduce(\n            (acc, breakpointName) => ({...acc, [breakpointName]: breakpoints}),\n            {} as SliderBreakpointParams,\n        );\n    } else {\n        result = breakpoints || DEFAULT_SLIDE_BREAKPOINTS;\n    }\n\n    return {\n        ...DEFAULT_SLIDE_BREAKPOINTS,\n        ...pickBy(result, (value) => !isNaN(value)),\n        sm: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.sm : 1,\n    };\n}\n\nexport function getSliderResponsiveParams(breakpoints: SliderBreakpointParams) {\n    return Object.entries(breakpoints).map(([breakpointName, slidesToShow]) => ({\n        breakpoint: BREAKPOINTS[breakpointName as SliderBreakpointNames],\n        settings: {slidesToShow},\n    }));\n}\n\nexport function getSlidesCountByBreakpoint(\n    breakpoint: number,\n    breakpoints: SliderBreakpointParams,\n) {\n    const breakpointName = BREAKPOINT_NAMES_BY_VALUES[breakpoint];\n\n    return Math.floor(breakpoints[breakpointName]);\n}\n\nexport function getSlidesToShowCount(breakpoints: SliderBreakpointParams) {\n    return Math.floor(Math.max(...Object.values(breakpoints)));\n}\n\nconst getRovingListItemId = (uniqId: string, index: number) =>\n    `${uniqId}-roving-tabindex-item-${index}`;\nexport function useRovingTabIndex(props: {\n    itemCount: number;\n    activeIndex: number;\n    firstIndex?: number;\n    uniqId: string;\n}) {\n    const {itemCount, activeIndex, firstIndex = 0, uniqId} = props;\n    const [currentIndex, setCurrentIndex] = React.useState(firstIndex);\n    const hasFocusRef = React.useRef(false);\n    const lastIndex = itemCount + firstIndex - 1;\n\n    const getRovingItemProps = (\n        index: number,\n    ): Pick<React.HTMLAttributes<HTMLElement>, 'id' | 'tabIndex' | 'onFocus'> => {\n        return {\n            id: getRovingListItemId(uniqId, index),\n            tabIndex: index === activeIndex ? 0 : -1,\n            onFocus: () => {\n                setCurrentIndex(index);\n                hasFocusRef.current = true;\n            },\n        };\n    };\n\n    React.useEffect(() => {\n        if (!hasFocusRef.current) {\n            return;\n        }\n        document.getElementById(getRovingListItemId(uniqId, currentIndex))?.focus();\n    }, [activeIndex, currentIndex, uniqId]);\n\n    const setNextIndex = () =>\n        setCurrentIndex((prev) => (prev >= lastIndex ? firstIndex : prev + 1));\n    const setPrevIndex = () =>\n        setCurrentIndex((prev) => (prev <= firstIndex ? lastIndex : prev - 1));\n\n    const onRovingListKeyDown: React.KeyboardEventHandler<HTMLElement> = (e) => {\n        const key = e.key.toLowerCase();\n\n        if (key !== 'tab' && key !== 'enter') {\n            e.preventDefault();\n        }\n\n        switch (key) {\n            case 'arrowleft':\n            case 'arrowup':\n                setPrevIndex();\n                return;\n            case 'arrowright':\n            case 'arrowdown':\n                setNextIndex();\n                return;\n        }\n    };\n\n    const onRovingListBlur: React.FocusEventHandler<HTMLElement> = () => {\n        hasFocusRef.current = false;\n    };\n\n    const rovingListProps: React.HTMLAttributes<HTMLElement> = {\n        onKeyDown: onRovingListKeyDown,\n        onBlur: onRovingListBlur,\n    };\n\n    return {getRovingItemProps, rovingListProps};\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"../../../../src","sources":["blocks/Slider/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,OAAO,0BAAuB;AACrC,OAAO,MAAM,yBAAsB;AAGnC,OAAO,EAAC,WAAW,EAAC,2BAAwB;AAE5C,OAAO,EAAC,qBAAqB,EAAuC,oBAAiB;AAErF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACrC,CAAC,qBAAqB,CAAC,EAAE,CAAC,EAAE,CAAC;IAC7B,CAAC,qBAAqB,CAAC,EAAE,CAAC,EAAE,CAAC;IAC7B,CAAC,qBAAqB,CAAC,EAAE,CAAC,EAAE,CAAC;IAC7B,CAAC,qBAAqB,CAAC,EAAE,CAAC,EAAE,IAAI;CACnC,CAAC;AAOF,MAAM,UAAU,yBAAyB,CAAC,EACtC,aAAa,EACb,YAAY,EACZ,gBAAgB,GACI;IACpB,IAAI,MAAM,CAAC;IAEX,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE,CAAC;QACnC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,MAAM,CAClD,CAAC,GAAG,EAAE,cAAc,EAAE,EAAE,CAAC,iCAAK,GAAG,KAAE,CAAC,cAAc,CAAC,EAAE,YAAY,IAAE,EACnE,EAA4B,CAC/B,CAAC;IACN,CAAC;SAAM,CAAC;QACJ,MAAM,GAAG,YAAY,IAAI,yBAAyB,CAAC;IACvD,CAAC;IAED,MAAM,SAAS,iDACR,yBAAyB,GACzB,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAC3C,EAAE,EAAE,CAAC,gBAAgB,IAAI,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAChF,CAAC;IAEF,OAAO,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,MAAM,CACnC,CAAC,GAAG,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,EAAE,EAAE;QAC7B,6CAA6C;QAC7C,GAAG,CAAC,WAAW,CAAC,cAAuC,CAAC,GAAG,CAAC,CAAC,GAAG;YAC5D,aAAa,EAAE,KAAK;SACvB,CAAC;QACF,OAAO,GAAG,CAAC;IACf,CAAC,EACD,EAAmC,CACtC,CAAC;AACN,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAI,KAAQ,EAAK,EAAE;IAC1C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,gBAAgB,CAAC,CAAC,QAAQ,EAAE,EAAE,CAC1B,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CACpF,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,aAAa,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAAgB,EAAE,UAAmC,EAAE,EAAE,CAC1F,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE,CACtD,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CACjD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport isEqual from 'lodash/isEqual';\nimport pickBy from 'lodash/pickBy';\nimport type {SwiperOptions} from 'swiper/types/swiper-options';\n\nimport {BREAKPOINTS} from '../../constants';\n\nimport {SliderBreakpointNames, SliderBreakpointParams, SlidesToShow} from './models';\n\nexport const DEFAULT_SLIDE_BREAKPOINTS = {\n    [SliderBreakpointNames.Lg]: 3,\n    [SliderBreakpointNames.Md]: 2,\n    [SliderBreakpointNames.Sm]: 2,\n    [SliderBreakpointNames.Xs]: 1.15,\n};\n\nexport interface GetSlidesToShowParams {\n    contentLength: number;\n    slidesToShow?: SlidesToShow;\n    mobileFullscreen?: boolean;\n}\nexport function getSliderResponsiveParams({\n    contentLength,\n    slidesToShow,\n    mobileFullscreen,\n}: GetSlidesToShowParams) {\n    let result;\n\n    if (typeof slidesToShow === 'number') {\n        result = Object.keys(DEFAULT_SLIDE_BREAKPOINTS).reduce(\n            (acc, breakpointName) => ({...acc, [breakpointName]: slidesToShow}),\n            {} as SliderBreakpointParams,\n        );\n    } else {\n        result = slidesToShow || DEFAULT_SLIDE_BREAKPOINTS;\n    }\n\n    const showCount = {\n        ...DEFAULT_SLIDE_BREAKPOINTS,\n        ...pickBy(result, (value) => !isNaN(value)),\n        xs: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.xs : 1,\n    };\n\n    return Object.entries(showCount).reduce(\n        (res, [breakpointName, value]) => {\n            // eslint-disable-next-line no-param-reassign\n            res[BREAKPOINTS[breakpointName as SliderBreakpointNames] + 1] = {\n                slidesPerView: value,\n            };\n            return res;\n        },\n        {} as Record<number, SwiperOptions>,\n    );\n}\n\nexport const useMemoized = <T>(value: T): T => {\n    const [memoizedValue, setMemoizedValue] = React.useState(value);\n\n    React.useEffect(() => {\n        setMemoizedValue((memoized) =>\n            value && typeof value === 'object' && isEqual(memoized, value) ? memoized : value,\n        );\n    }, [value]);\n\n    return memoizedValue;\n};\n\nexport const setElementAtrributes = (element: Element, attributes: Record<string, unknown>) =>\n    Object.entries(attributes).forEach(([attribute, value]) =>\n        element.setAttribute(attribute, String(value)),\n    );\n"]}

package/build/esm/blocks/{SliderNew → SliderOld}/Arrow/Arrow.css

@@ -1,34 +1,37 @@
-.pc-slider-new-block-arrow__button {
+.pc-slider-old-block-arrow__button {
   box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
 }
 
-.pc-slider-new-block-arrow__button:hover {
+.pc-slider-old-block-arrow__button:hover {
   box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
   cursor: pointer;
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-slider-new-block-arrow__icon-wrapper, .pc-slider-new-block-arrow__button, .pc-slider-new-block-arrow {
+.pc-slider-old-block-arrow__icon-wrapper, .pc-slider-old-block-arrow__button, .pc-slider-old-block-arrow {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.pc-slider-new-block-arrow {
+.pc-slider-old-block-arrow {
   width: 42px;
   height: 42px;
   cursor: pointer;
 }
 @media (max-width: 576px) {
-  .pc-slider-new-block-arrow {
+  .pc-slider-old-block-arrow {
     display: none;
   }
 }
-.pc-slider-new-block-arrow_type_left .pc-slider-new-block-arrow__icon-wrapper {
+.pc-slider-old-block-arrow_type_left {
+  margin-right: 16px;
+}
+.pc-slider-old-block-arrow_type_left .pc-slider-old-block-arrow__icon-wrapper {
   transform: rotate(180deg);
 }
-.pc-slider-new-block-arrow__button {
+.pc-slider-old-block-arrow__button {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -44,19 +47,19 @@ unpredictable css rules order in build */
   border-radius: 100%;
   background-color: var(--g-color-base-background);
   box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
-  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 1s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
-.pc-slider-new-block-arrow__button:focus {
+.pc-slider-old-block-arrow__button:focus {
   outline: 2px solid var(--g-color-line-focus);
   outline-offset: 0;
 }
-.pc-slider-new-block-arrow__button:focus:not(:focus-visible) {
+.pc-slider-old-block-arrow__button:focus:not(:focus-visible) {
   outline: 0;
 }
-.pc-slider-new-block-arrow:hover .pc-slider-new-block-arrow__button {
+.pc-slider-old-block-arrow:hover .pc-slider-old-block-arrow__button {
   color: var(--g-color-text-primary);
   box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
 }
-.pc-slider-new-block-arrow__icon {
+.pc-slider-old-block-arrow__icon {
   position: relative;
 }

package/build/esm/blocks/SliderOld/Arrow/Arrow.d.ts

@@ -0,0 +1,10 @@
+import { ClassNameProps } from "../../../models/index.js";
+import './Arrow.css';
+export type ArrowType = 'left' | 'right';
+export interface ArrowProps {
+    type: ArrowType;
+    handleClick?: (direction: ArrowType) => void;
+    size?: number;
+}
+declare const Arrow: ({ type, handleClick, className, size }: ArrowProps & ClassNameProps) => import("react/jsx-runtime").JSX.Element;
+export default Arrow;

package/build/esm/blocks/SliderOld/Arrow/Arrow.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ToggleArrow from "../../../components/ToggleArrow/ToggleArrow.js";
+import { block } from "../../../utils/index.js";
+import { i18n } from "../i18n/index.js";
+import './Arrow.css';
+const b = block('slider-old-block-arrow');
+const Arrow = ({ type, handleClick, className, size = 16 }) => (_jsx("div", { className: b({ type }, className), children: _jsx("button", { className: b('button'), onClick: handleClick ? () => handleClick(type) : undefined, "aria-label": i18n(`arrow-${type}`), children: _jsx("span", { className: b('icon-wrapper'), children: _jsx(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') }) }) }) }));
+export default Arrow;
+//# sourceMappingURL=Arrow.js.map

package/build/esm/blocks/SliderOld/Arrow/Arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrow.js","sourceRoot":"../../../../../src","sources":["blocks/SliderOld/Arrow/Arrow.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,uDAAoD;AAEtE,OAAO,EAAC,KAAK,EAAC,gCAAuB;AACrC,OAAO,EAAC,IAAI,EAAC,yBAAgB;AAE7B,OAAO,aAAa,CAAC;AAErB,MAAM,CAAC,GAAG,KAAK,CAAC,wBAAwB,CAAC,CAAC;AAU1C,MAAM,KAAK,GAAG,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,GAAG,EAAE,EAA8B,EAAE,EAAE,CAAC,CACtF,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,YAChC,iBACI,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,gBAC9C,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,YAEjC,eAAM,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAC9B,KAAC,WAAW,IACR,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,GACC,GACF,GACP,CACT,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';\nimport {ClassNameProps} from '../../../models';\nimport {block} from '../../../utils';\nimport {i18n} from '../i18n';\n\nimport './Arrow.scss';\n\nconst b = block('slider-old-block-arrow');\n\nexport type ArrowType = 'left' | 'right';\n\nexport interface ArrowProps {\n    type: ArrowType;\n    handleClick?: (direction: ArrowType) => void;\n    size?: number;\n}\n\nconst Arrow = ({type, handleClick, className, size = 16}: ArrowProps & ClassNameProps) => (\n    <div className={b({type}, className)}>\n        <button\n            className={b('button')}\n            onClick={handleClick ? () => handleClick(type) : undefined}\n            aria-label={i18n(`arrow-${type}`)}\n        >\n            <span className={b('icon-wrapper')}>\n                <ToggleArrow\n                    size={size}\n                    type={'horizontal'}\n                    iconType=\"navigation\"\n                    className={b('icon')}\n                />\n            </span>\n        </button>\n    </div>\n);\n\nexport default Arrow;\n"]}