@salutejs/plasma-new-hope 0.326.0-canary.2013.15538813402.0 → 0.326.0-canary.2013.15555525626.0

package/styled-components/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js

@@ -13,8 +13,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
 /**
  * Подсчет смещения из-за паддингов.
  */
-var getCalculatedOffset = exports.getCalculatedOffset = function getCalculatedOffset(scrollEl, trackEl, axis) {
-  var paddingProp = axis === 'x' ? 'paddingLeft' : 'paddingTop';
+var getCalculatedOffset = exports.getCalculatedOffset = function getCalculatedOffset(scrollEl, trackEl) {
+  var paddingProp = 'paddingLeft';
   return parseInt(getComputedStyle(scrollEl)[paddingProp], 10) + parseInt(getComputedStyle(trackEl)[paddingProp], 10);
 };
 var positionModByScrollAlign = function positionModByScrollAlign(_ref) {
@@ -23,11 +23,9 @@ var positionModByScrollAlign = function positionModByScrollAlign(_ref) {
     carouselSize = _ref.carouselSize,
     itemSize = _ref.itemSize,
     offset = _ref.offset,
-    scrollStart = _ref.scrollStart,
-    axis = _ref.axis;
+    scrollStart = _ref.scrollStart;
   if (scrollAlign === 'start') {
-    var inaccuracy = 1;
-    var paddingOffset = axis === 'y' ? offset - itemSize / 2 + inaccuracy : 0;
+    var paddingOffset = 0;
     return position + paddingOffset;
   }
   if (scrollAlign === 'center') {
@@ -51,47 +49,30 @@ var positionModByScrollAlign = function positionModByScrollAlign(_ref) {
  * Подсчет скролла до переданного индекса.
  */
 var getCalculatedPos = exports.getCalculatedPos = function getCalculatedPos(_ref2) {
+  var _items$item$offsetWid2, _items$item2;
   var scrollEl = _ref2.scrollEl,
     items = _ref2.items,
-    axis = _ref2.axis,
     index = _ref2.index,
     offset = _ref2.offset,
     scrollAlign = _ref2.scrollAlign;
   var position = scrollAlign === 'center' ? offset : 0;
-  var carouselSize;
-  var itemSize;
-  var scrollStart;
   if (items.item(index) === null) {
     return position;
   }
   for (var i = 0; i < index; i++) {
-    if (axis === 'x') {
-      var _items$item$offsetWid, _items$item;
-      position += (_items$item$offsetWid = (_items$item = items.item(i)) === null || _items$item === void 0 ? void 0 : _items$item.offsetWidth) !== null && _items$item$offsetWid !== void 0 ? _items$item$offsetWid : 0;
-    } else {
-      var _items$item$offsetHei, _items$item2;
-      position += (_items$item$offsetHei = (_items$item2 = items.item(i)) === null || _items$item2 === void 0 ? void 0 : _items$item2.offsetHeight) !== null && _items$item$offsetHei !== void 0 ? _items$item$offsetHei : 0;
-    }
-  }
-  if (axis === 'x') {
-    var _items$item$offsetWid2, _items$item3;
-    carouselSize = scrollEl.offsetWidth;
-    itemSize = (_items$item$offsetWid2 = (_items$item3 = items.item(index)) === null || _items$item3 === void 0 ? void 0 : _items$item3.offsetWidth) !== null && _items$item$offsetWid2 !== void 0 ? _items$item$offsetWid2 : 0;
-    scrollStart = scrollEl.scrollLeft;
-  } else {
-    var _items$item$offsetHei2, _items$item4;
-    carouselSize = scrollEl.offsetHeight;
-    itemSize = (_items$item$offsetHei2 = (_items$item4 = items.item(index)) === null || _items$item4 === void 0 ? void 0 : _items$item4.offsetHeight) !== null && _items$item$offsetHei2 !== void 0 ? _items$item$offsetHei2 : 0;
-    scrollStart = scrollEl.scrollTop;
+    var _items$item$offsetWid, _items$item;
+    position += (_items$item$offsetWid = (_items$item = items.item(i)) === null || _items$item === void 0 ? void 0 : _items$item.offsetWidth) !== null && _items$item$offsetWid !== void 0 ? _items$item$offsetWid : 0;
   }
+  var carouselSize = scrollEl.offsetWidth;
+  var itemSize = (_items$item$offsetWid2 = (_items$item2 = items.item(index)) === null || _items$item2 === void 0 ? void 0 : _items$item2.offsetWidth) !== null && _items$item$offsetWid2 !== void 0 ? _items$item$offsetWid2 : 0;
+  var scrollStart = scrollEl.scrollLeft;
   return positionModByScrollAlign({
     scrollAlign: scrollAlign,
     position: position,
     carouselSize: carouselSize,
     itemSize: itemSize,
     offset: offset,
-    scrollStart: scrollStart,
-    axis: axis
+    scrollStart: scrollStart
   });
 };
 var DEFAULT_DURATION = 300;
@@ -145,11 +126,10 @@ var animatedScrollToX = exports.animatedScrollToX = function animatedScrollToX(e
 var scrollToPos = exports.scrollToPos = function scrollToPos(_ref3) {
   var scrollEl = _ref3.scrollEl,
     pos = _ref3.pos,
-    axis = _ref3.axis,
     animated = _ref3.animated,
     duration = _ref3.duration,
     timingFunction = _ref3.timingFunction;
-  if (axis === 'x' && Math.abs(pos - scrollEl.scrollLeft) > 1) {
+  if (Math.abs(pos - scrollEl.scrollLeft) > 1) {
     if (animated) {
       animatedScrollToX(scrollEl, pos, duration, timingFunction);
     } else {
@@ -337,7 +317,7 @@ var useCarousel = exports.useCarousel = function useCarousel(_ref4) {
         }
       }
     }, throttleMs);
-  }, [axis, debouncedOnIndexChange, detectActive, detectThreshold, scrollAlign, throttleMs]);
+  }, [debouncedOnIndexChange, detectActive, detectThreshold, scrollAlign, throttleMs]);
 
   /**
    * Прокрутка до нужной позиции индекса.
@@ -351,21 +331,19 @@ var useCarousel = exports.useCarousel = function useCarousel(_ref4) {
         pos: getCalculatedPos({
           scrollEl: scrollEl,
           items: items,
-          axis: axis,
           index: i,
           offset: offset.current,
           scrollAlign: scrollAlign
-        }),
-        axis: axis
+        })
       });
       prevIndex.current = i;
     }
-  }, [axis, scrollAlign]);
+  }, [scrollAlign]);
   (0, _react.useEffect)(function () {
     if (scrollRef.current && trackRef.current) {
-      offset.current = getCalculatedOffset(scrollRef.current, trackRef.current, axis);
+      offset.current = getCalculatedOffset(scrollRef.current, trackRef.current);
     }
-  }, [axis]);
+  }, []);
 
   /**
    * Операции на маунте/анмаунте компонента.
@@ -383,27 +361,6 @@ var useCarousel = exports.useCarousel = function useCarousel(_ref4) {
     };
   }, [throttledDetectActiveItem]);
 
-  /**
-   * Нужно вызвать только при первом рендере
-   */
-  // useEffect(() => {
-  //     requestAnimationFrame(() => {
-  //         /**
-  //          * Прокрутка до начального индекса.
-  //          */
-  //         toIndex(index);
-  //
-  //         /**
-  //          * Если на момент запуска карусель уже находится на нужной позиции,
-  //          * событие скролла не произойдет, не сработает и определение центра,
-  //          * необходимо вызвать его вручную.
-  //          */
-  //         throttledDetectActiveItem();
-  //     });
-  //
-  //     // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, []);
-
   /**
    * Прокрутка до нужной позиции индекса, если индекс изменился.
    */

package/styled-components/cjs/components/Carousel/CarouselNew/ui/index.js

@@ -3,17 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _Item = /*#__PURE__*/require("./Item/Item");
-Object.keys(_Item).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Item[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Item[key];
-    }
-  });
-});
 var _Dots = /*#__PURE__*/require("./Dots/Dots");
 Object.keys(_Dots).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/styled-components/cjs/components/Carousel/CarouselOld/CarouselItem.js

@@ -13,7 +13,7 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 var StyledItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1b1k2uh-0"
-})(["scroll-snap-align:", ";scroll-snap-stop:", ";"], function (_ref) {
+})(["scroll-snap-align:", ";scroll-snap-stop:", ";padding:0 var(--temporary-carousel-padding);"], function (_ref) {
   var scrollSnapAlign = _ref.scrollSnapAlign;
   return scrollSnapAlign || 'none';
 }, function (_ref2) {

package/styled-components/cjs/components/Carousel/index.js

@@ -33,16 +33,16 @@ Object.defineProperty(exports, "carouselNewRoot", {
     return _Carousel3.carouselNewRoot;
   }
 });
-Object.defineProperty(exports, "carouselRoot", {
+Object.defineProperty(exports, "carouselNewTokens", {
   enumerable: true,
   get: function get() {
-    return _Carousel.carouselRoot;
+    return _Carousel4.tokens;
   }
 });
-Object.defineProperty(exports, "carouselTokens", {
+Object.defineProperty(exports, "carouselRoot", {
   enumerable: true,
   get: function get() {
-    return _Carousel4.tokens;
+    return _Carousel.carouselRoot;
   }
 });
 var _Carousel = /*#__PURE__*/require("./CarouselOld/Carousel");

package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.config.js

@@ -9,11 +9,11 @@ var _Carousel = /*#__PURE__*/require("../../../../components/Carousel");
 var config = exports.config = {
   defaults: {
     view: 'default',
-    size: 'm'
+    size: 's'
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-tertiary);", ":var(--surface-solid-default);"], _Carousel.carouselTokens.paginationDotBackground, _Carousel.carouselTokens.paginationDotActiveBackground)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-tertiary);", ":var(--surface-solid-default);"], _Carousel.carouselNewTokens.paginationDotBackground, _Carousel.carouselNewTokens.paginationDotActiveBackground)
     },
     size: {
       s: /*#__PURE__*/(0, _styledComponents.css)([""])

package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx

@@ -12,6 +12,7 @@ import { Carousel, CarouselItem } from './Carousel';
 type StoryCarouselProps = ComponentProps<typeof Carousel> & {
     slides: number;
     visibleDots: number;
+    paginationDisabled: boolean;
     paginationCentered: boolean;
 };
 
@@ -35,40 +36,48 @@ const meta: Meta<StoryCarouselProps> = {
             },
         },
         align: {
-            options: ['start', 'center', 'end'],
+            options: ['start', 'center', 'end', 'activeDirection'],
             control: {
                 type: 'inline-radio',
             },
         },
-        isDragScrollDisabled: {
-            control: 'boolean',
-        },
         slides: {
             control: 'number',
         },
         visibleDots: {
             control: 'number',
         },
-        paginationCentered: {
+        controlArrowsDisabled: {
             control: 'boolean',
         },
-        gap: {
-            control: 'text',
+        paginationDisabled: {
+            control: 'boolean',
+        },
+        paginationCentered: {
+            control: 'boolean',
         },
     },
     args: {
         view: 'default',
         size: 's',
         align: 'center',
-        isDragScrollDisabled: false,
         visibleDots: 6,
         slides: 10,
+        controlArrowsDisabled: false,
+        paginationDisabled: false,
         paginationCentered: false,
-        gap: '20px',
     },
     parameters: {
         controls: {
-            include: ['align', 'isDragScrollDisabled', 'visibleDots', 'slides', 'paginationCentered', 'gap'],
+            include: [
+                'align',
+                'visibleDots',
+                'slides',
+                'controlArrowsDisabled',
+                'paginationDisabled',
+                'paginationCentered',
+                'gap',
+            ],
         },
     },
 };
@@ -81,7 +90,7 @@ const StyledCard = styled.div`
     justify-content: center;
     position: relative;
     border-radius: 8px;
-    width: 500px;
+    width: 400px;
     height: 370px;
     background-color: #add8e6;
     font-size: 30px;
@@ -91,9 +100,8 @@ const StoryDefault = ({
     align,
     visibleDots,
     slides,
+    paginationDisabled,
     paginationCentered,
-    isDragScrollDisabled,
-    gap,
     ...rest
 }: StoryCarouselProps) => {
     const items = Array(slides)
@@ -109,9 +117,8 @@ const StoryDefault = ({
                 <Carousel
                     detectActive
                     scrollAlign={align}
-                    isDragScrollDisabled={isDragScrollDisabled}
-                    gap={gap}
                     paginationOptions={{
+                        disabled: paginationDisabled,
                         visibleDots,
                         centered: paginationCentered,
                     }}

package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.config.js

@@ -4,7 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Carousel = /*#__PURE__*/require("../../../../components/Carousel");
 var config = exports.config = {
-  defaults: {},
-  variations: {}
+  defaults: {
+    view: 'default',
+    size: 's'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-tertiary);", ":var(--surface-solid-default);"], _Carousel.carouselNewTokens.paginationDotBackground, _Carousel.carouselNewTokens.paginationDotActiveBackground)
+    },
+    size: {
+      s: /*#__PURE__*/(0, _styledComponents.css)([""])
+    }
+  }
 };

package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.js

@@ -14,5 +14,5 @@ exports.mergedConfig = void 0;
 var _Carousel = /*#__PURE__*/require("../../../../components/Carousel");
 var _engines = /*#__PURE__*/require("../../../../engines");
 var _Carousel2 = /*#__PURE__*/require("./Carousel.config");
-var mergedConfig = exports.mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Carousel.carouselConfig, _Carousel2.config);
+var mergedConfig = exports.mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Carousel.carouselNewConfig, _Carousel2.config);
 var Carousel = exports.Carousel = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.stories.tsx

@@ -2,76 +2,136 @@ import * as React from 'react';
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import styled from 'styled-components';
+import { getConfigVariations } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 
+import { config } from './Carousel.config';
 import { Carousel, CarouselItem } from './Carousel';
 
-type StoryCarouselProps = ComponentProps<typeof Carousel>;
+type StoryCarouselProps = ComponentProps<typeof Carousel> & {
+    slides: number;
+    visibleDots: number;
+    paginationDisabled: boolean;
+    paginationCentered: boolean;
+};
+
+const { views, sizes } = getConfigVariations(config);
 
 const meta: Meta<StoryCarouselProps> = {
     title: 'web/Navigation/Carousel',
     component: Carousel,
     decorators: [WithTheme],
     argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
         align: {
-            options: ['center', 'start', 'end'],
+            options: ['start', 'center', 'end', 'activeDirection'],
             control: {
                 type: 'inline-radio',
             },
         },
-        isDragScrollDisabled: {
+        slides: {
+            control: 'number',
+        },
+        visibleDots: {
+            control: 'number',
+        },
+        controlArrowsDisabled: {
+            control: 'boolean',
+        },
+        paginationDisabled: {
+            control: 'boolean',
+        },
+        paginationCentered: {
             control: 'boolean',
         },
     },
     args: {
+        view: 'default',
+        size: 's',
         align: 'center',
-        isDragScrollDisabled: false,
+        visibleDots: 6,
+        slides: 10,
+        controlArrowsDisabled: false,
+        paginationDisabled: false,
+        paginationCentered: false,
     },
     parameters: {
         controls: {
-            include: ['align', 'isDragScrollDisabled'],
+            include: [
+                'align',
+                'visibleDots',
+                'slides',
+                'controlArrowsDisabled',
+                'paginationDisabled',
+                'paginationCentered',
+                'gap',
+            ],
         },
     },
 };
 
 export default meta;
 
-const items = Array(25)
-    .fill({
-        title: 'Заголовок',
-    })
-    .map(({ title }, i) => ({
-        id: i,
-        title: `${title} ${i}`,
-    }));
-
 const StyledCard = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
     border-radius: 8px;
-    width: 350px;
-    height: 50px;
-    padding: 8px;
+    width: 400px;
+    height: 370px;
     background-color: #add8e6;
+    font-size: 30px;
 `;
 
-const StoryDefault = ({ align, isDragScrollDisabled }: StoryCarouselProps) => {
-    const [index, setIndex] = React.useState(0);
+const StoryDefault = ({
+    align,
+    visibleDots,
+    slides,
+    paginationDisabled,
+    paginationCentered,
+    ...rest
+}: StoryCarouselProps) => {
+    const items = Array(slides)
+        .fill(1)
+        .map((_, i) => ({
+            id: i,
+            title: i,
+        }));
 
     return (
-        <Carousel
-            index={index}
-            detectActive
-            onIndexChange={setIndex}
-            scrollAlign={align}
-            isDragScrollDisabled={isDragScrollDisabled}
-        >
-            {items.map((item, i) => (
-                <CarouselItem key={i} style={{ padding: '0 0.5rem' }} scrollSnapAlign={align}>
-                    <StyledCard>{item.title}</StyledCard>
-                </CarouselItem>
-            ))}
-        </Carousel>
+        <>
+            <div style={{ width: '600px' }}>
+                <Carousel
+                    detectActive
+                    scrollAlign={align}
+                    paginationOptions={{
+                        disabled: paginationDisabled,
+                        visibleDots,
+                        centered: paginationCentered,
+                    }}
+                    {...rest}
+                >
+                    {items.map((item, i) => (
+                        <CarouselItem key={i} scrollSnapAlign={align}>
+                            <StyledCard>{item.title}</StyledCard>
+                        </CarouselItem>
+                    ))}
+                </Carousel>
+            </div>
+        </>
     );
 };
 

package/styled-components/es/components/Carousel/CarouselNew/Carousel.js

@@ -12,7 +12,6 @@ import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
 import { base, CarouselWrapper, CarouselTrack, ControlsWrapper, IconButton } from "./Carousel.styles";
 import { useCarousel } from "./hooks/useCarousel";
-import { useDragScroll } from "./hooks/useDragScroll";
 import { Dots } from "./ui";
 
 /**
@@ -22,11 +21,11 @@ export var carouselNewRoot = function carouselNewRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
     var view = _ref.view,
       size = _ref.size,
-      scrollAlign = _ref.scrollAlign,
+      _ref$scrollAlign = _ref.scrollAlign,
+      scrollAlign = _ref$scrollAlign === void 0 ? 'center' : _ref$scrollAlign,
       children = _ref.children,
-      _ref$isDragScrollDisa = _ref.isDragScrollDisabled,
-      isDragScrollDisabled = _ref$isDragScrollDisa === void 0 ? false : _ref$isDragScrollDisa,
-      gap = _ref.gap,
+      _ref$controlArrowsDis = _ref.controlArrowsDisabled,
+      controlArrowsDisabled = _ref$controlArrowsDis === void 0 ? 'false' : _ref$controlArrowsDis,
       paginationOptions = _ref.paginationOptions,
       className = _ref.className,
       style = _ref.style;
@@ -48,14 +47,13 @@ export var carouselNewRoot = function carouselNewRoot(Root) {
       }),
       scrollRef = _useCarousel.scrollRef,
       trackRef = _useCarousel.trackRef;
-    useDragScroll(scrollRef, isDragScrollDisabled);
     return /*#__PURE__*/React.createElement(Root, {
       className: className,
       style: style,
       size: size,
       view: view,
       ref: ref
-    }, /*#__PURE__*/React.createElement(ControlsWrapper, null, index !== 0 && /*#__PURE__*/React.createElement(IconButton, {
+    }, /*#__PURE__*/React.createElement(ControlsWrapper, null, index !== 0 && !controlArrowsDisabled && /*#__PURE__*/React.createElement(IconButton, {
       pin: "circle-circle",
       onClick: handleClickLeft
     }, _IconDisclosureLeft || (_IconDisclosureLeft = /*#__PURE__*/React.createElement(IconDisclosureLeft, {
@@ -65,10 +63,7 @@ export var carouselNewRoot = function carouselNewRoot(Root) {
       ref: scrollRef
     }, /*#__PURE__*/React.createElement(CarouselTrack, {
       ref: trackRef
-      // aria-live={ariaLive}
-      ,
-      gap: gap
-    }, children)), index !== slidesAmount - 1 && /*#__PURE__*/React.createElement(IconButton, {
+    }, children)), index !== slidesAmount - 1 && !controlArrowsDisabled && /*#__PURE__*/React.createElement(IconButton, {
       className: classes.rightControlButton,
       pin: "circle-circle",
       onClick: handleClickRight

package/styled-components/es/components/Carousel/CarouselNew/Carousel.styles.js

@@ -8,13 +8,10 @@ export var IconButtonComponent = /*#__PURE__*/component(mergedConfig);
 export var base = /*#__PURE__*/css(["position:relative;"]);
 export var CarouselWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-vln28v-0"
-})(["position:relative;margin:0;padding:0;list-style:none;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);"]);
+})(["position:relative;margin-left:calc(var(--temporary-carousel-padding) * -1);margin-right:calc(var(--temporary-carousel-padding) * -1);padding:0;list-style:none;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);--temporary-carousel-padding:0.625rem;"]);
 export var CarouselTrack = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-vln28v-1"
-})(["display:inline-flex;flex-direction:row;gap:", ";"], function (_ref) {
-  var gap = _ref.gap;
-  return gap || 0;
-});
+})(["display:inline-flex;flex-direction:row;"]);
 export var IconButton = /*#__PURE__*/styled(IconButtonComponent).withConfig({
   componentId: "plasma-new-hope__sc-vln28v-2"
 })(["position:absolute;top:50%;transform:translateY(-50%);left:0.75rem;z-index:10;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(", ");", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);", ":2.5rem;", ":2.5rem;", ":1rem;", ":0.625rem;&.", "{left:auto;right:0.75rem;}"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonLoadingBackgroundColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonBackgroundColorActive, iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, classes.rightControlButton);