@salutejs/plasma-new-hope 0.328.0-canary.2047.15880698675.0 → 0.328.0-canary.2047.15976223953.0

package/styled-components/cjs/components/Tour/variatoins/_view/base.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "base", {
+    enumerable: true,
+    get: function() {
+        return base;
+    }
+});
+var _styledcomponents = require("styled-components");
+var base = (0, _styledcomponents.css)([
+    ""
+]);

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+var _styledcomponents = require("styled-components");
+var _Tourtokens = require("../../../../components/Tour/Tour.tokens");
+var config = {
+    defaults: {
+        view: 'accent',
+        size: 's'
+    },
+    variations: {
+        view: {
+            default: (0, _styledcomponents.css)([
+                ""
+            ])
+        },
+        size: {
+            s: (0, _styledcomponents.css)([
+                "",
+                ":0.75rem;",
+                ":0.75rem;",
+                ":0.75rem;"
+            ], _Tourtokens.tokens.cardPadding, _Tourtokens.tokens.cardRadius, _Tourtokens.tokens.highlightRadius)
+        }
+    }
+};

package/styled-components/cjs/examples/plasma_b2c/components/Tour/Tour.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Tour", {
+    enumerable: true,
+    get: function() {
+        return Tour;
+    }
+});
+var _Tour = require("../../../../components/Tour");
+var _engines = require("../../../../engines");
+var _Tourconfig = require("./Tour.config");
+var mergedConfig = (0, _engines.mergeConfig)(_Tour.tourConfig, _Tourconfig.config);
+var Tour = (0, _engines.component)(mergedConfig);

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+var _styledcomponents = require("styled-components");
+var _Tourtokens = require("../../../../components/Tour/Tour.tokens");
+var config = {
+    defaults: {
+        view: 'accent',
+        size: 's'
+    },
+    variations: {
+        view: {
+            default: (0, _styledcomponents.css)([
+                ""
+            ])
+        },
+        size: {
+            s: (0, _styledcomponents.css)([
+                "",
+                ":0.75rem;",
+                ":0.75rem;",
+                ":0.75rem;"
+            ], _Tourtokens.tokens.cardPadding, _Tourtokens.tokens.cardRadius, _Tourtokens.tokens.highlightRadius)
+        }
+    }
+};

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Tour", {
+    enumerable: true,
+    get: function() {
+        return Tour;
+    }
+});
+var _Tour = require("../../../../components/Tour");
+var _engines = require("../../../../engines");
+var _Tourconfig = require("./Tour.config");
+var mergedConfig = (0, _engines.mergeConfig)(_Tour.tourConfig, _Tourconfig.config);
+var Tour = (0, _engines.component)(mergedConfig);

package/styled-components/cjs/index.js

@@ -82,6 +82,7 @@ _export_star(require("./components/Carousel"), exports);
 _export_star(require("./components/PaginationDots"), exports);
 _export_star(require("./components/CodeInput"), exports);
 _export_star(require("./components/CodeField"), exports);
+_export_star(require("./components/Tour"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/styled-components/es/components/Calendar/utils/getDateWithModification.js

@@ -52,7 +52,7 @@ var isDisabledNextDate = function(param, type, max, includeEdgeDates) {
     var currentDate = new Date(year, monthIndex, day);
     dateOperationHandler[type].add(currentDate);
     var isOut = true;
-    while(isOut && includeEdgeDates ? currentDate < maxDate : currentDate <= maxDate){
+    while(isOut && (includeEdgeDates ? currentDate < maxDate : currentDate <= maxDate)){
         isOut = includeEdgeDates ? maxDate < currentDate : maxDate <= currentDate;
         dateOperationHandler[type].add(currentDate);
     }
@@ -68,7 +68,7 @@ var isDisabledPreviousDate = function(param, type, min, includeEdgeDates) {
     var currentDate = new Date(year, monthIndex, day);
     dateOperationHandler[type].subtract(currentDate);
     var isOut = true;
-    while(isOut && includeEdgeDates ? currentDate > minDate : currentDate >= minDate){
+    while(isOut && (includeEdgeDates ? currentDate > minDate : currentDate >= minDate)){
         isOut = includeEdgeDates ? minDate > currentDate : minDate >= currentDate;
         dateOperationHandler[type].subtract(currentDate);
     }

package/styled-components/es/components/TextArea/TextArea.js

@@ -314,7 +314,8 @@ export var textAreaRoot = function(Root) {
                 width: helperWidth
             }, style),
             className: cx(clearClass, hasDividerClass, hasHintClass, className),
-            onClick: handleTextAreaFocus
+            onClick: handleTextAreaFocus,
+            "data-root": true
         }, hintText && {
             hintView: hintView,
             hintSize: hintSize
@@ -386,7 +387,8 @@ export var textAreaRoot = function(Root) {
             cols: cols,
             resize: resize,
             defaultValue: defaultValue,
-            onChange: onChangeHandler
+            onChange: onChangeHandler,
+            "data-tour": true
         }, rest)), applyAutoResize && /*#__PURE__*/ React.createElement(StyledHiddenTextArea, {
             "aria-hidden": true,
             ref: hiddenRef,
@@ -396,7 +398,9 @@ export var textAreaRoot = function(Root) {
         })), hasHelper && /*#__PURE__*/ React.createElement(StyledHelpers, {
             className: styledHelpers,
             id: textareaHelperId
-        }, isInnerLeftHelperPlacement && (leftHelper || helperText) && /*#__PURE__*/ React.createElement(StyledLeftHelper, null, leftHelper || helperText), rightHelper && /*#__PURE__*/ React.createElement(StyledRightHelper, null, rightHelper)), placeholderLabel && /*#__PURE__*/ React.createElement(StyledPlaceholder, {
+        }, isInnerLeftHelperPlacement && (leftHelper || helperText) && /*#__PURE__*/ React.createElement(StyledLeftHelper, null, leftHelper || helperText), rightHelper && /*#__PURE__*/ React.createElement(StyledRightHelper, {
+            "data-root": true
+        }, rightHelper)), placeholderLabel && /*#__PURE__*/ React.createElement(StyledPlaceholder, {
             hasContentRight: Boolean(contentRight),
             className: styledPlaceholder,
             htmlFor: id

package/styled-components/es/components/TextArea/TextArea.tokens.js

@@ -1,3 +1,4 @@
+import { TOUR_BORDER_RADIUS_TOKEN } from "../Tour/utils";
 export var classes = {
     /** Класс отвечающий за поднятие и уменьшение плейсхолдера */ innerPlaceholderUp: 'inner-placeholder-up',
     /** Класс отвечающий за изменение цвета плейсхолдера при фокусе */ focusedOuterPlaceholderColor: 'focused-outer-placeholder-color',
@@ -165,5 +166,6 @@ export var tokens = {
     tooltipArrowMaskImage: '--plasma-textarea__tooltip-arrow-mask-image',
     tooltipArrowHeight: '--plasma-textarea__tooltip-arrow-height',
     tooltipArrowEdgeMargin: '--plasma-textarea__tooltip-arrow-edge-margin',
-    tooltipArrowBackground: '--plasma-textarea__tooltip-arrow-background'
+    tooltipArrowBackground: '--plasma-textarea__tooltip-arrow-background',
+    tourBorderRadius: TOUR_BORDER_RADIUS_TOKEN
 };

package/styled-components/es/components/TextArea/variations/_size/base.js

@@ -1,4 +1,7 @@
 import { css } from "styled-components";
+import { tokens } from "../../TextArea.tokens";
 export var base = css([
-    ""
-]);
+    "",
+    ":var(",
+    ");"
+], tokens.tourBorderRadius, tokens.borderRadius);

package/styled-components/es/components/TextField/TextField.js

@@ -380,6 +380,7 @@ export var textFieldRoot = function(Root) {
             readOnly: !disabled && readOnly,
             labelPlacement: innerLabelPlacementValue,
             onClick: handleInputFocus,
+            "data-root": true,
             className: cx(labelPlacementClass, clearClass, hasDividerClass, hasInnerHintClass, classes.textFieldGroupItem, className),
             style: style
         }, hintText && {
@@ -406,7 +407,9 @@ export var textFieldRoot = function(Root) {
             handleHintClick: handleHintClick
         })), required && hasRequiredIndicator && /*#__PURE__*/ React.createElement(StyledIndicator, {
             className: cx(classes.outerLabelPlacement, requiredPlacementClass, hasHintClass)
-        }), optionalTextNode), titleCaption && /*#__PURE__*/ React.createElement(TitleCaption, null, titleCaption)), /*#__PURE__*/ React.createElement(InputWrapper, {
+        }), optionalTextNode), titleCaption && /*#__PURE__*/ React.createElement(TitleCaption, {
+            "data-root": true
+        }, titleCaption)), /*#__PURE__*/ React.createElement(InputWrapper, {
             // Ref для внутреннего использования. Не отдается наружу.
             ref: rest.inputWrapperRef,
             // TODO: #1544, и после убрать classes.inputWrapper
@@ -432,6 +435,7 @@ export var textFieldRoot = function(Root) {
             handleHintClick: handleHintClick,
             isInnerLabel: true
         }))), contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, {
+            "data-root": true,
             isClear: clear,
             isDefaultView: isDefaultView
         }, contentLeft), /*#__PURE__*/ React.createElement(InputLabelWrapper, {
@@ -487,8 +491,10 @@ export var textFieldRoot = function(Root) {
             onChange: handleChange,
             onKeyDown: handleOnKeyDown,
             onFocus: handleFocus,
-            onBlur: handleBlur
+            onBlur: handleBlur,
+            "data-tour": true
         }, rest)), hasInnerLabel && /*#__PURE__*/ React.createElement(Label, {
+            "data-root": true,
             id: labelId,
             htmlFor: innerId
         }, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/ React.createElement(InputPlaceholder, {
@@ -497,7 +503,9 @@ export var textFieldRoot = function(Root) {
             isHidden: true
         }, textBefore), innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode), hasTextAfter && /*#__PURE__*/ React.createElement(StyledTextAfter, null, textAfter))), /*#__PURE__*/ React.createElement(StyledContentRightWrapper, {
             className: cx(contentRightCompensationMargin)
-        }, contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, null, contentRight), !hasOuterLabel && hintText && hintTargetPlacement === 'inner' && /*#__PURE__*/ React.createElement(HintComponent, {
+        }, contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, {
+            "data-root": true
+        }, contentRight), !hasOuterLabel && hintText && hintTargetPlacement === 'inner' && /*#__PURE__*/ React.createElement(HintComponent, {
             ref: hintForkRef,
             hintText: hintText,
             hintTrigger: hintTrigger,
@@ -514,6 +522,7 @@ export var textFieldRoot = function(Root) {
             handleHintClick: handleHintClick,
             isInnerLabel: true
         }))), leftHelper && /*#__PURE__*/ React.createElement(LeftHelper, {
+            "data-root": true,
             id: helperTextId
         }, leftHelper));
     });

package/styled-components/es/components/TextField/TextField.tokens.js

@@ -1,3 +1,4 @@
+import { TOUR_BORDER_RADIUS_TOKEN } from "../Tour/utils";
 export var classes = {
     hasChips: 'has-chips',
     chipsWrapper: 'chips-wrapper',
@@ -176,5 +177,6 @@ export var tokens = {
     indicatorLabelPlacementHintOuterRight: '--plasma-textfield__indicator-hint-placement-outer-right',
     clearIndicatorLabelPlacementInner: '--plasma-textfield__clear-indicator-placement-inner',
     clearIndicatorLabelPlacementInnerRight: '--plasma-textfield__clear-indicator-placement-inner-right',
-    clearIndicatorHintInnerRight: '--plasma-textfield__clear-indicator-hint-placement-inner-right'
+    clearIndicatorHintInnerRight: '--plasma-textfield__clear-indicator-hint-placement-inner-right',
+    tourBorderRadius: TOUR_BORDER_RADIUS_TOKEN
 };

package/styled-components/es/components/TextField/variations/_size/base.js

@@ -3,6 +3,8 @@ import { classes, tokens } from "../../TextField.tokens";
 import { HintTargetWrapper, Input, InputContainer, InputWrapper, Label, LeftHelper, StyledContentRight, StyledContentRightWrapper, StyledHintWrapper, StyledOptionalText, StyledTextAfter, StyledTextBefore, TitleCaption } from "../../TextField.styles";
 export var base = css([
     "",
+    ":var(",
+    ");",
     "{width:100%;font:inherit;letter-spacing:inherit;line-height:inherit;}",
     "{width:100%;font-family:var(",
     ");font-size:var(",
@@ -71,4 +73,4 @@ export var base = css([
     ");",
     "{margin:var(",
     ");}}"
-], Input, InputContainer, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, classes.innerLabelPlacement, StyledOptionalText, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, StyledHintWrapper, tokens.hintMargin, tokens.hintTargetSize, tokens.hintTargetSize, HintTargetWrapper, tokens.hintTargetSize, tokens.hintTargetSize, TitleCaption, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, StyledTextBefore, StyledTextAfter, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, StyledTextBefore, tokens.textBeforeMargin, StyledTextAfter, tokens.textAfterMargin, StyledContentRightWrapper, classes.contentRightCompensationMargin, tokens.contentRightWrapperGap, tokens.contentRightWrapperMargin, StyledContentRight, tokens.rightContentWithHintMargin);
+], tokens.tourBorderRadius, tokens.borderRadius, Input, InputContainer, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, classes.innerLabelPlacement, StyledOptionalText, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, StyledHintWrapper, tokens.hintMargin, tokens.hintTargetSize, tokens.hintTargetSize, HintTargetWrapper, tokens.hintTargetSize, tokens.hintTargetSize, TitleCaption, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, StyledTextBefore, StyledTextAfter, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, StyledTextBefore, tokens.textBeforeMargin, StyledTextAfter, tokens.textAfterMargin, StyledContentRightWrapper, classes.contentRightCompensationMargin, tokens.contentRightWrapperGap, tokens.contentRightWrapperMargin, StyledContentRight, tokens.rightContentWithHintMargin);

package/styled-components/es/components/Tour/Tour.js

@@ -0,0 +1,328 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import React, { forwardRef, useEffect, useState, useRef } from "react";
+import { createPortal } from "react-dom";
+import { useFloating, offset, flip, shift, autoUpdate } from "@floating-ui/react-dom";
+import { canUseDOM } from "../../utils";
+import { getHTMLElement, getIncreasedRadius, findRootElement } from "./utils";
+import { MaskContainer, Mask, Highlight, TourPortal } from "./Tour.styles";
+import { base as viewCSS } from "./variatoins/_view/base";
+import { base as sizeCSS } from "./variatoins/_size/base";
+import { classes } from "./Tour.tokens";
+export var tourRoot = function(Root) {
+    return /*#__PURE__*/ forwardRef(function(_param, outerRef) {
+        var steps = _param.steps, current = _param.current, _param_defaultCurrent = _param.defaultCurrent, defaultCurrent = _param_defaultCurrent === void 0 ? 0 : _param_defaultCurrent, open = _param.open, _param_defaultOpen = _param.defaultOpen, defaultOpen = _param_defaultOpen === void 0 ? false : _param_defaultOpen, onClose = _param.onClose, _param_withOverlay = _param.withOverlay, withOverlay = _param_withOverlay === void 0 ? true : _param_withOverlay, overlayColor = _param.overlayColor, _param_zIndex = _param.zIndex, zIndex = _param_zIndex === void 0 ? 9000 : _param_zIndex, view = _param.view, size = _param.size, tmp = _param.offset, offsetProp = tmp === void 0 ? [
+            12,
+            12
+        ] : tmp, _param_highlightOffset = _param.highlightOffset, highlightOffset = _param_highlightOffset === void 0 ? 4 : _param_highlightOffset, renderStep = _param.renderStep, rest = _object_without_properties(_param, [
+            "steps",
+            "current",
+            "defaultCurrent",
+            "open",
+            "defaultOpen",
+            "onClose",
+            "withOverlay",
+            "overlayColor",
+            "zIndex",
+            "view",
+            "size",
+            "offset",
+            "highlightOffset",
+            "renderStep"
+        ]);
+        var TOUR_PORTAL_ID = "plasma-tour-portal-".concat(Date.now());
+        var isCurrentControlled = typeof current === 'number';
+        var isOpenControlled = typeof open === 'boolean';
+        var _useState = _sliced_to_array(useState(defaultCurrent), 2), innerCurrent = _useState[0], setInnerCurrent = _useState[1];
+        var _useState1 = _sliced_to_array(useState(defaultOpen), 2), innerOpen = _useState1[0], setInnerOpen = _useState1[1];
+        var _useState2 = _sliced_to_array(useState(null), 2), highlightRect = _useState2[0], setHighlightRect = _useState2[1];
+        var _useState3 = _sliced_to_array(useState(null), 2), highlightBorderRadius = _useState3[0], setHighlightBorderRadius = _useState3[1];
+        var _useState4 = _sliced_to_array(useState(null), 2), targetElement = _useState4[0], setTargetElement = _useState4[1];
+        var portalRef = useRef(null);
+        var active = isCurrentControlled ? current : innerCurrent;
+        var isOpen = isOpenControlled ? open : innerOpen;
+        var currentStep = steps[active];
+        var rawPlacement = currentStep === null || currentStep === void 0 ? void 0 : currentStep.placement;
+        var placement = (Array.isArray(rawPlacement) ? rawPlacement[0] : rawPlacement) || 'bottom';
+        var middleware = [
+            offset(offsetProp[0]),
+            flip({
+                fallbackPlacements: Array.isArray(currentStep === null || currentStep === void 0 ? void 0 : currentStep.placement) ? currentStep.placement : undefined
+            }),
+            shift({
+                padding: offsetProp[1]
+            })
+        ];
+        var _useFloating = useFloating({
+            placement: placement,
+            middleware: middleware,
+            whileElementsMounted: autoUpdate
+        }), refs = _useFloating.refs, floatingStyles = _useFloating.floatingStyles, calculatedPlacement = _useFloating.placement;
+        var handleSetOpen = function(value) {
+            if (!isOpenControlled) {
+                setInnerOpen(value);
+            }
+            if (!value) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+                setInnerCurrent(0);
+                setHighlightRect(null);
+                setTargetElement(null);
+            }
+        };
+        var handleClose = function() {
+            handleSetOpen(false);
+        };
+        var updateHighlight = function() {
+            if (!isOpen || !currentStep) {
+                return;
+            }
+            var rootItem = findRootElement(currentStep.target);
+            var highlightElement = getHTMLElement(rootItem);
+            if (highlightElement) {
+                var rect = highlightElement.getBoundingClientRect();
+                setHighlightRect(rect);
+                setTargetElement(highlightElement);
+                var _currentStep_borderRadius;
+                var borderRadius = currentStep.borderRadius === 'auto' || currentStep.borderRadius === undefined || currentStep.borderRadius === null ? getIncreasedRadius(rootItem, highlightOffset) : (_currentStep_borderRadius = currentStep === null || currentStep === void 0 ? void 0 : currentStep.borderRadius) !== null && _currentStep_borderRadius !== void 0 ? _currentStep_borderRadius : '0px';
+                setHighlightBorderRadius(borderRadius);
+            } else {
+                setHighlightRect(null);
+                setTargetElement(null);
+            }
+        };
+        useEffect(function() {
+            refs.setReference(targetElement);
+        }, [
+            refs,
+            targetElement
+        ]);
+        useEffect(function() {
+            if (!canUseDOM) {
+                return;
+            }
+            var portal = document.getElementById(TOUR_PORTAL_ID);
+            if (!portal) {
+                portal = document.createElement('div');
+                portal.setAttribute('id', TOUR_PORTAL_ID);
+                document.body.appendChild(portal);
+            }
+            portalRef.current = portal;
+            return function() {
+                if (portal) {
+                    portal.remove();
+                }
+            };
+        }, []);
+        useEffect(function() {
+            updateHighlight();
+            window.addEventListener('resize', updateHighlight);
+            window.addEventListener('scroll', updateHighlight, true);
+            return function() {
+                window.removeEventListener('resize', updateHighlight);
+                window.removeEventListener('scroll', updateHighlight, true);
+            };
+        }, [
+            currentStep
+        ]);
+        useEffect(function() {
+            if (isOpen && targetElement) {
+                targetElement.scrollIntoView({
+                    block: 'center',
+                    inline: 'center',
+                    behavior: 'smooth'
+                });
+            }
+        }, [
+            isOpen,
+            active,
+            targetElement
+        ]);
+        useEffect(function() {
+            var handleKeyDown = function(e) {
+                if (e.key === 'Escape') {
+                    handleClose();
+                }
+            };
+            if (isOpen) {
+                window.addEventListener('keydown', handleKeyDown);
+            }
+            return function() {
+                window.removeEventListener('keydown', handleKeyDown);
+            };
+        }, [
+            isOpen,
+            handleClose
+        ]);
+        if (!currentStep || !canUseDOM || !portalRef.current) {
+            return null;
+        }
+        var _highlightRect_left, _highlightRect_top, _highlightRect_width, _highlightRect_height;
+        var tourContent = /*#__PURE__*/ React.createElement(Root, _object_spread({
+            renderStep: renderStep,
+            steps: steps,
+            ref: outerRef,
+            view: view,
+            size: size
+        }, rest), isOpen && withOverlay && /*#__PURE__*/ React.createElement(MaskContainer, {
+            className: classes.mask,
+            zIndex: zIndex
+        }, /*#__PURE__*/ React.createElement(Mask, null), Boolean(highlightRect) && /*#__PURE__*/ React.createElement(Highlight, {
+            overlayColor: overlayColor,
+            borderRadius: highlightBorderRadius,
+            style: {
+                left: ((_highlightRect_left = highlightRect === null || highlightRect === void 0 ? void 0 : highlightRect.left) !== null && _highlightRect_left !== void 0 ? _highlightRect_left : 0) - highlightOffset,
+                top: ((_highlightRect_top = highlightRect === null || highlightRect === void 0 ? void 0 : highlightRect.top) !== null && _highlightRect_top !== void 0 ? _highlightRect_top : 0) - highlightOffset,
+                width: ((_highlightRect_width = highlightRect === null || highlightRect === void 0 ? void 0 : highlightRect.width) !== null && _highlightRect_width !== void 0 ? _highlightRect_width : 0) + highlightOffset * 2,
+                height: ((_highlightRect_height = highlightRect === null || highlightRect === void 0 ? void 0 : highlightRect.height) !== null && _highlightRect_height !== void 0 ? _highlightRect_height : 0) + highlightOffset * 2
+            }
+        })), isOpen && Boolean(targetElement) && /*#__PURE__*/ React.createElement(TourPortal, {
+            ref: refs.setFloating,
+            style: _object_spread_props(_object_spread({}, floatingStyles), {
+                zIndex: Number(zIndex)
+            }),
+            "data-placement": calculatedPlacement
+        }, renderStep && renderStep(active, steps.length, active === steps.length - 1, steps[active])));
+        return /*#__PURE__*/ createPortal(tourContent, portalRef.current);
+    });
+};
+export var tourConfig = {
+    name: 'Tour',
+    tag: 'div',
+    layout: tourRoot,
+    base: '',
+    variations: {
+        view: {
+            css: viewCSS
+        },
+        size: {
+            css: sizeCSS
+        }
+    },
+    defaults: {
+        view: 'default',
+        size: 'm'
+    }
+};

package/styled-components/es/components/Tour/Tour.styles.js

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+export var MaskContainer = styled.div.withConfig({
+    displayName: "Tour.styles__MaskContainer",
+    componentId: "sc-d6b8d03d-0"
+})([
+    "z-index:",
+    ";"
+], function(param) {
+    var zIndex = param.zIndex;
+    return zIndex || 9000;
+});
+export var Mask = styled.div.withConfig({
+    displayName: "Tour.styles__Mask",
+    componentId: "sc-d6b8d03d-1"
+})([
+    "position:fixed;inset:0;pointer-events:all;"
+]);
+export var Highlight = styled.div.withConfig({
+    displayName: "Tour.styles__Highlight",
+    componentId: "sc-d6b8d03d-2"
+})([
+    "--private-mask-color:",
+    ";position:fixed;background:transparent;border-radius:",
+    ";box-shadow:0 0 0 9999px var(--private-mask-color);pointer-events:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);"
+], function(param) {
+    var overlayColor = param.overlayColor;
+    return "".concat(overlayColor || 'rgba(0, 0, 0, 0.45)');
+}, function(param) {
+    var borderRadius = param.borderRadius;
+    return borderRadius !== null && borderRadius !== void 0 ? borderRadius : 0;
+});
+export var TourPortal = styled.div.withConfig({
+    displayName: "Tour.styles__TourPortal",
+    componentId: "sc-d6b8d03d-3"
+})([
+    "position:absolute;"
+]);