@salutejs/plasma-new-hope 0.157.1-canary.1412.11127658499.0 → 0.158.0-canary.1443.11125700749.0

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

@@ -8,15 +8,14 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { forwardRef, useRef } from 'react';
-import ReactDOM from 'react-dom';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { useForkRef, safeUseId } from '@salutejs/plasma-core';
-import { canUseDOM, cx } from '../../utils';
+import { cx } from '../../utils';
 import { Portal } from '../Portal';
+import { POPUP_PORTAL_ID } from './PopupContext';
 import { PopupRoot } from './PopupRoot';
 import { usePopup } from './hooks';
 import { classes } from './Popup.tokens';
-import { StyledPortalContainer } from './Popup.styles';
 export var handlePosition = function handlePosition(placement, offset) {
   var x = '0rem';
   var y = '0rem';
@@ -40,8 +39,8 @@ export var handlePosition = function handlePosition(placement, offset) {
   var bottom;
   var transform;
   var placements = placement.split('-');
-  placements.forEach(function (placementValue) {
-    switch (placementValue) {
+  placements.forEach(function (placement) {
+    switch (placement) {
       case 'left':
         left = x;
         break;
@@ -76,7 +75,7 @@ export var handlePosition = function handlePosition(placement, offset) {
 };
 
 /**
- * Базовый компонент Popup.
+ * Базовый копмонент Popup.
  */
 export var popupRoot = function popupRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
@@ -106,49 +105,63 @@ export var popupRoot = function popupRoot(Root) {
     var _usePopup = usePopup({
         isOpen: innerIsOpen,
         id: innerId,
-        isGlobalPopup: !frame || frame === 'document',
         popupInfo: popupInfo,
         withAnimation: withAnimation
       }),
       isVisible = _usePopup.isVisible,
       animationInfo = _usePopup.animationInfo,
-      setVisible = _usePopup.setVisible,
-      rootId = _usePopup.rootId;
+      setVisible = _usePopup.setVisible;
     var portalRef = useRef(null);
     var contentRef = useRef(null);
     var innerRef = useForkRef(contentRef, outerRootRef);
+    var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      forceRender = _useState2[1];
+    useEffect(function () {
+      var portal = document.getElementById(POPUP_PORTAL_ID);
+      if (typeof frame !== 'string' && frame && frame.current) {
+        portal = frame.current;
+      }
+      if (!portal) {
+        portal = document.createElement('div');
+        portal.setAttribute('id', POPUP_PORTAL_ID);
+        /**
+         * Нужно для того, чтобы во фрейме не происходило скачков контента
+         * при анимации через transform, если есть элемент с шириной/высотой в 100% (Overlay)
+         */
+        portal.style.width = '0';
+        if (typeof frame === 'string' && frame !== 'document') {
+          var _document$getElementB;
+          (_document$getElementB = document.getElementById(frame)) === null || _document$getElementB === void 0 || _document$getElementB.appendChild(portal);
+        } else {
+          document.body.appendChild(portal);
+        }
+      }
+      portalRef.current = portal;
+
+      /**
+       * Изменение стейта нужно для того, чтобы Popup
+       * отобразился после записи DOM элемента в portalRef.current
+       */
+      forceRender(true);
+    }, []);
     if (!isVisible && !innerIsOpen) {
       return null;
     }
     var cls = cx(className, animationInfo !== null && animationInfo !== void 0 && animationInfo.endAnimation ? classes.endAnimation : '', animationInfo !== null && animationInfo !== void 0 && animationInfo.endTransition ? classes.endTransition : '');
-    var rootNode = /*#__PURE__*/React.createElement(Root, _extends({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, portalRef.current && /*#__PURE__*/React.createElement(Portal, {
+      container: portalRef.current
+    }, /*#__PURE__*/React.createElement(Root, _extends({
       className: cls
     }, rest), overlay, /*#__PURE__*/React.createElement(PopupRoot, {
       id: innerId,
       ref: innerRef,
       position: handlePosition(placement, offset),
+      frame: frame,
       zIndex: zIndex,
       animationInfo: animationInfo,
       setVisible: setVisible
-    }, children));
-    if (typeof frame !== 'string' && frame && frame.current) {
-      return /*#__PURE__*/React.createElement(Portal, {
-        container: frame.current
-      }, rootNode);
-    }
-    var withFrameId = typeof frame === 'string' && frame !== 'document';
-    var containerElement = withFrameId && document.getElementById(frame);
-    if (containerElement) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(StyledPortalContainer, {
-        ref: portalRef
-      }, portalRef.current && /*#__PURE__*/React.createElement(Portal, {
-        container: portalRef.current
-      }, rootNode)), containerElement));
-    }
-    var globalPortal = canUseDOM && document.getElementById(rootId);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, globalPortal && /*#__PURE__*/React.createElement(Portal, {
-      container: globalPortal
-    }, rootNode));
+    }, children))));
   });
 };
 export var popupConfig = {

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

@@ -2,37 +2,28 @@ import styled from 'styled-components';
 import { DEFAULT_Z_INDEX } from './utils';
 export var StyledPortal = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-rkhnjn-0"
-})(["position:fixed;top:0;left:0;right:0;bottom:0;z-index:", ";width:", ";pointer-events:", ";"], DEFAULT_Z_INDEX, function (_ref) {
-  var hasContent = _ref.hasContent;
-  return hasContent ? 'auto' : '0';
-}, function (_ref2) {
-  var hasContent = _ref2.hasContent;
-  return hasContent ? 'auto' : 'none';
-});
-export var StyledPortalContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-rkhnjn-1"
-})(["width:0;"]);
+})([""]);
 export var PopupView = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-rkhnjn-2"
+  componentId: "plasma-new-hope__sc-rkhnjn-1"
 })(["position:relative;max-width:100%;pointer-events:all;"]);
 export var PopupRootContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-rkhnjn-3"
-})(["position:absolute;z-index:", ";left:", ";right:", ";top:", ";bottom:", ";transform:", ";"], function (_ref3) {
-  var zIndex = _ref3.zIndex;
+  componentId: "plasma-new-hope__sc-rkhnjn-2"
+})(["position:absolute;z-index:", ";left:", ";right:", ";top:", ";bottom:", ";transform:", ";"], function (_ref) {
+  var zIndex = _ref.zIndex;
   return zIndex || DEFAULT_Z_INDEX;
+}, function (_ref2) {
+  var position = _ref2.position;
+  return position.left || '';
+}, function (_ref3) {
+  var position = _ref3.position;
+  return position.right || '';
 }, function (_ref4) {
   var position = _ref4.position;
-  return position.left || '';
+  return position.top || '';
 }, function (_ref5) {
   var position = _ref5.position;
-  return position.right || '';
+  return position.bottom || '';
 }, function (_ref6) {
   var position = _ref6.position;
-  return position.top || '';
-}, function (_ref7) {
-  var position = _ref7.position;
-  return position.bottom || '';
-}, function (_ref8) {
-  var position = _ref8.position;
   return position.transform || '';
 });

package/styled-components/es/components/Popup/PopupContext.js

@@ -8,21 +8,15 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { createContext, useState, useContext, useRef } from 'react';
-import ReactDOM from 'react-dom';
+import React, { createContext, useEffect, useState, useContext, useRef } from 'react';
 import { hasModals } from '../Modal/ModalContext';
-import { canUseDOM, safeUseId } from '../../utils';
-import { StyledPortal } from './Popup.styles';
 export var POPUP_PORTAL_ID = 'plasma-popup-root';
 var items = [];
 var PopupContext = /*#__PURE__*/createContext({
   items: items,
-  rootId: POPUP_PORTAL_ID,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   register: function register(_info) {
     throw new Error('Function not implemented. Add PopupProvider');
   },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   unregister: function unregister(_id) {
     throw new Error('Function not implemented. Add PopupProvider');
   }
@@ -32,46 +26,29 @@ export var usePopupContext = function usePopupContext() {
 };
 export var PopupProvider = function PopupProvider(_ref) {
   var children = _ref.children;
-  var globalItemsCount = useRef(0);
-  var prevBodyOverflowY = useRef(canUseDOM ? document.body.style.overflowY : '');
-  // eslint-disable-next-line no-shadow
+  var prevBodyOverflowY = useRef(typeof document !== 'undefined' ? document.body.style.overflowY : '');
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],
     setItems = _useState2[1];
-  var uuid = safeUseId();
-  var rootId = "".concat(POPUP_PORTAL_ID, "-").concat(uuid);
   var register = function register(info) {
-    if (!canUseDOM) {
-      return;
-    }
     setItems(function (prevItems) {
       var _info$info;
       if ((_info$info = info.info) !== null && _info$info !== void 0 && _info$info.isModal && !hasModals(prevItems)) {
         prevBodyOverflowY.current = document.body.style.overflowY;
         document.body.style.overflowY = 'hidden';
       }
-      if (info.isGlobalPopup) {
-        globalItemsCount.current += 1;
-      }
       return [].concat(_toConsumableArray(prevItems), [info]);
     });
   };
   var unregister = function unregister(id) {
-    if (!canUseDOM) {
-      return;
-    }
     setItems(function (prevItems) {
-      var _prevItems$index;
       var index = prevItems.findIndex(function (item) {
         return id === item.id;
       });
       if (index === -1) {
         return prevItems;
       }
-      if (prevItems !== null && prevItems !== void 0 && (_prevItems$index = prevItems[index]) !== null && _prevItems$index !== void 0 && _prevItems$index.isGlobalPopup) {
-        globalItemsCount.current -= 1;
-      }
       var prevHasModals = hasModals(prevItems);
       prevItems.splice(index, 1);
       if (prevHasModals && !hasModals(prevItems)) {
@@ -84,14 +61,18 @@ export var PopupProvider = function PopupProvider(_ref) {
   };
   var context = {
     items: items,
-    rootId: rootId,
     register: register,
     unregister: unregister
   };
+  useEffect(function () {
+    return function () {
+      var portal = document.createElement('div');
+      if (portal && document.body.contains(portal)) {
+        document.body.removeChild(portal);
+      }
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(PopupContext.Provider, {
     value: context
-  }, children, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(StyledPortal, {
-    id: rootId,
-    hasContent: globalItemsCount.current > 0
-  }), document.body));
+  }, children);
 };

package/styled-components/es/components/Popup/PopupRoot.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "placement", "offset", "setVisible", "children", "role", "zIndex", "animationInfo"];
+var _excluded = ["id", "placement", "offset", "frame", "setVisible", "children", "role", "zIndex", "animationInfo", "className"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(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 _objectWithoutPropertiesLoose(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; }
@@ -16,11 +16,13 @@ export var PopupRoot = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     placement = _ref.placement,
     offset = _ref.offset,
+    frame = _ref.frame,
     setVisible = _ref.setVisible,
     children = _ref.children,
     role = _ref.role,
     zIndex = _ref.zIndex,
     animationInfo = _ref.animationInfo,
+    className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var contentRef = useRef(null);
   var innerRef = useForkRef(contentRef, ref);

package/styled-components/es/components/Popup/hooks/usePopup.js

@@ -13,7 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useEffect, useState } from 'react';
 import { usePopupContext } from '../PopupContext';
 
-// Хук для подключения анимации
+// Хук для поключения анимации
 var usePopupAnimation = function usePopupAnimation() {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -35,7 +35,6 @@ var usePopupAnimation = function usePopupAnimation() {
 export var usePopup = function usePopup(_ref) {
   var isOpen = _ref.isOpen,
     id = _ref.id,
-    isGlobalPopup = _ref.isGlobalPopup,
     popupInfo = _ref.popupInfo,
     withAnimation = _ref.withAnimation;
   var _useState5 = useState(false),
@@ -57,8 +56,7 @@ export var usePopup = function usePopup(_ref) {
     // при первом открытии
     if (isOpen && !isVisible) {
       popupController.register(_objectSpread({
-        id: id,
-        isGlobalPopup: isGlobalPopup
+        id: id
       }, popupInfo));
       setVisible(true);
       animationInfo.setEndAnimation(false);
@@ -87,7 +85,6 @@ export var usePopup = function usePopup(_ref) {
     isVisible: isVisible,
     setVisible: setVisible,
     animationInfo: animationInfo,
-    withAnimation: withAnimation,
-    rootId: popupController.rootId
+    withAnimation: withAnimation
   };
 };

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

@@ -0,0 +1,121 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["size", "orientation", "contentAlign", "hasLine", "hasContent", "hasLoader", "items", "onChange", "current", "status"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { 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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(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(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(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 _objectWithoutPropertiesLoose(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; }
+import React, { forwardRef, useState, useEffect } from 'react';
+import cls from 'classnames';
+import { classes } from './Steps.tokens';
+import { base } from './Steps.styles';
+import { StepItem } from './ui';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as viewCSS } from './variations/_view/base';
+export var stepsRoot = function stepsRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (props, outerRef) {
+    var _props$size = props.size,
+      size = _props$size === void 0 ? 's' : _props$size,
+      _props$orientation = props.orientation,
+      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
+      _props$contentAlign = props.contentAlign,
+      contentAlign = _props$contentAlign === void 0 ? 'left' : _props$contentAlign,
+      _props$hasLine = props.hasLine,
+      hasLine = _props$hasLine === void 0 ? true : _props$hasLine,
+      _props$hasContent = props.hasContent,
+      hasContent = _props$hasContent === void 0 ? 'all' : _props$hasContent,
+      hasLoader = props.hasLoader,
+      _props$items = props.items,
+      items = _props$items === void 0 ? [] : _props$items,
+      onChange = props.onChange,
+      current = props.current,
+      status = props.status,
+      rest = _objectWithoutProperties(props, _excluded);
+    var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      prevIndex = _useState2[0],
+      setPrevIndex = _useState2[1];
+    var isUncontrolled = current !== undefined;
+    var hasIndicator = items.some(function (item) {
+      return item.indicator != null;
+    });
+    var isSimple = items.every(function (item) {
+      return !item.title && !item.content;
+    });
+    useEffect(function () {
+      return function () {
+        if (current !== undefined) {
+          setPrevIndex(current);
+        } else {
+          var index = items.findIndex(function (item) {
+            return item.status === 'active';
+          });
+          setPrevIndex(index !== -1 ? index : undefined);
+        }
+      };
+    }, [current, items]);
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      size: size,
+      view: "default",
+      ref: outerRef,
+      className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, orientation === 'vertical'), classes.simple, isSimple), classes.hasIndicator, hasIndicator))
+    }, rest), items.map(function (item, index) {
+      var itemStatus = 'inactive';
+      if (isUncontrolled) {
+        if (current > index) {
+          itemStatus = 'completed';
+        } else if (current === index) {
+          itemStatus = status || 'active';
+        }
+      } else {
+        itemStatus = status || item.status || 'inactive';
+      }
+      if (item.disabled) {
+        itemStatus = 'inactive';
+      }
+      var isActive = itemStatus === 'active';
+      var content = item.content;
+      if (hasContent === 'active' && !isActive || hasContent === 'none') {
+        content = '';
+      }
+      return /*#__PURE__*/React.createElement(StepItem, {
+        key: index,
+        index: index,
+        title: item.title,
+        content: content,
+        indicator: item.indicator,
+        status: itemStatus,
+        size: size,
+        orientation: orientation,
+        contentAlign: orientation === 'horizontal' ? contentAlign : 'left',
+        hasLine: hasLine,
+        hasLoader: hasLoader && isActive,
+        onClick: onChange ? function () {
+          return onChange(item, index, prevIndex);
+        } : undefined,
+        items: items
+      });
+    }));
+  });
+};
+export var stepsConfig = {
+  name: 'Steps',
+  tag: 'div',
+  layout: stepsRoot,
+  base: base,
+  variations: {
+    size: sizeCSS,
+    view: viewCSS
+  },
+  defaults: {
+    view: 'default',
+    size: 's'
+  }
+};