newspack-components 4.3.0 → 4.4.0-epic-editor-refactor.1

package/dist/esm/select-control/index.js

@@ -1,5 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+var _excluded = ["className", "optgroups", "buttonOptions", "buttonSmall"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * Select Control
+ *
+ * @deprecated For new features, use the core `SelectControl` (and `__experimentalToggleGroupControl` for
+ * grouped/button-style selections) from `@wordpress/components` instead of this wrapper. This component
+ * is kept only for existing usages and should not be used in new code.
  */
 
 /**
@@ -20,32 +36,36 @@ import './style.scss';
 import GroupedSelectControl from './GroupedSelectControl';
 import ButtonGroupControl from './ButtonGroupControl';
 import { jsx as _jsx } from "react/jsx-runtime";
-class SelectControl extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      optgroups,
-      buttonOptions,
-      buttonSmall,
-      ...otherProps
-    } = this.props;
-    const classes = classNames('newspack-select-control', optgroups && 'newspack-grouped-select-control', buttonOptions && 'newspack-buttons-select-control', className);
-    return /*#__PURE__*/_jsx("div", {
-      className: classes,
-      children: optgroups ? /*#__PURE__*/_jsx(GroupedSelectControl, {
-        optgroups: optgroups,
-        ...otherProps
-      }) : buttonOptions ? /*#__PURE__*/_jsx(ButtonGroupControl, {
-        buttonOptions: buttonOptions,
-        buttonSmall: buttonSmall,
-        ...otherProps
-      }) : /*#__PURE__*/_jsx(BaseComponent, {
-        ...otherProps
-      })
-    });
+var SelectControl = /*#__PURE__*/function (_Component) {
+  function SelectControl() {
+    _classCallCheck(this, SelectControl);
+    return _callSuper(this, SelectControl, arguments);
   }
-}
+  _inherits(SelectControl, _Component);
+  return _createClass(SelectControl, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        optgroups = _this$props.optgroups,
+        buttonOptions = _this$props.buttonOptions,
+        buttonSmall = _this$props.buttonSmall,
+        otherProps = _objectWithoutProperties(_this$props, _excluded);
+      var classes = classNames('newspack-select-control', optgroups && 'newspack-grouped-select-control', buttonOptions && 'newspack-buttons-select-control', className);
+      return /*#__PURE__*/_jsx("div", {
+        className: classes,
+        children: optgroups ? /*#__PURE__*/_jsx(GroupedSelectControl, _objectSpread({
+          optgroups: optgroups
+        }, otherProps)) : buttonOptions ? /*#__PURE__*/_jsx(ButtonGroupControl, _objectSpread({
+          buttonOptions: buttonOptions,
+          buttonSmall: buttonSmall
+        }, otherProps)) : /*#__PURE__*/_jsx(BaseComponent, _objectSpread({}, otherProps))
+      });
+    }
+  }]);
+}(Component);
 export default SelectControl;

package/dist/esm/settings/MinMaxSetting.js

@@ -1,3 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["min", "max", "onChangeMin", "onChangeMax", "minPlaceholder", "maxPlaceholder"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * WordPress dependencies.
  */
@@ -9,45 +14,51 @@ import { CheckboxControl } from '@wordpress/components';
  */
 import { TextControl } from '../';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const MinMaxSetting = ({
-  min,
-  max,
-  onChangeMin,
-  onChangeMax,
-  minPlaceholder,
-  maxPlaceholder,
-  ...props
-}) => {
-  return /*#__PURE__*/_jsxs("div", {
-    ...props,
+var MinMaxSetting = function MinMaxSetting(_ref) {
+  var min = _ref.min,
+    max = _ref.max,
+    onChangeMin = _ref.onChangeMin,
+    onChangeMax = _ref.onChangeMax,
+    minPlaceholder = _ref.minPlaceholder,
+    maxPlaceholder = _ref.maxPlaceholder,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/_jsxs("div", {
       className: "newspack-settings__min-max",
       children: [/*#__PURE__*/_jsx(CheckboxControl, {
         checked: min > 0,
-        onChange: value => onChangeMin(value ? 1 : 0),
+        onChange: function onChange(value) {
+          return onChangeMin(value ? 1 : 0);
+        },
         label: __('Min', 'newspack-plugin')
       }), /*#__PURE__*/_jsx(TextControl, {
         "data-testid": "min",
         type: "number",
         value: min,
         placeholder: minPlaceholder,
-        onChange: value => onChangeMin(value > 0 ? value : 0)
+        onChange: function onChange(value) {
+          return onChangeMin(value > 0 ? value : 0);
+        }
       })]
     }), /*#__PURE__*/_jsxs("div", {
       className: "newspack-settings__min-max",
       "data-testid": "max",
       children: [/*#__PURE__*/_jsx(CheckboxControl, {
         checked: max > 0,
-        onChange: value => onChangeMax(value ? min || 1 : 0),
+        onChange: function onChange(value) {
+          return onChangeMax(value ? min || 1 : 0);
+        },
         label: __('Max', 'newspack-plugin')
       }), /*#__PURE__*/_jsx(TextControl, {
         "data-testid": "max",
         type: "number",
         value: max,
         placeholder: maxPlaceholder,
-        onChange: value => onChangeMax(value > 0 ? value : 0)
+        onChange: function onChange(value) {
+          return onChangeMax(value > 0 ? value : 0);
+        }
       })]
     })]
-  });
+  }));
 };
 export default MinMaxSetting;

package/dist/esm/settings/SettingsCard.js

@@ -1,3 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "columns", "gutter", "noBorder", "rowGap"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * External dependencies.
  */
@@ -8,18 +13,18 @@ import classnames from 'classnames';
  */
 import { Grid, ActionCard } from '../';
 import { jsx as _jsx } from "react/jsx-runtime";
-const SettingsCard = ({
-  children,
-  className,
-  columns = 3,
-  gutter = 32,
-  noBorder,
-  rowGap,
-  ...props
-}) => {
-  const classes = classnames('newspack-settings__card', noBorder && 'newspack-settings__no-border', className);
-  return /*#__PURE__*/_jsx(ActionCard, {
-    ...props,
+var SettingsCard = function SettingsCard(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? 3 : _ref$columns,
+    _ref$gutter = _ref.gutter,
+    gutter = _ref$gutter === void 0 ? 32 : _ref$gutter,
+    noBorder = _ref.noBorder,
+    rowGap = _ref.rowGap,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var classes = classnames('newspack-settings__card', noBorder && 'newspack-settings__no-border', className);
+  return /*#__PURE__*/_jsx(ActionCard, _objectSpread(_objectSpread({}, props), {}, {
     className: classes,
     notificationLevel: "info",
     noBorder: noBorder,
@@ -29,6 +34,6 @@ const SettingsCard = ({
       rowGap: rowGap,
       children: children
     })
-  });
+  }));
 };
 export default SettingsCard;

package/dist/esm/settings/SettingsSection.js

@@ -3,24 +3,25 @@
  */
 import { Grid, InfoButton } from '../';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SettingSection = ({
-  title,
-  description,
-  children
-}) => /*#__PURE__*/_jsxs(Grid, {
-  columns: 1,
-  gutter: 8,
-  className: "newspack-settings__section",
-  children: [/*#__PURE__*/_jsxs("div", {
-    className: "newspack-settings__section__title",
-    children: [/*#__PURE__*/_jsx("span", {
-      children: title
-    }), description && /*#__PURE__*/_jsx(InfoButton, {
-      text: description
+var SettingSection = function SettingSection(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    children = _ref.children;
+  return /*#__PURE__*/_jsxs(Grid, {
+    columns: 1,
+    gutter: 8,
+    className: "newspack-settings__section",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "newspack-settings__section__title",
+      children: [/*#__PURE__*/_jsx("span", {
+        children: title
+      }), description && /*#__PURE__*/_jsx(InfoButton, {
+        text: description
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "newspack-settings__section__content",
+      children: children
     })]
-  }), /*#__PURE__*/_jsx("div", {
-    className: "newspack-settings__section__content",
-    children: children
-  })]
-});
+  });
+};
 export default SettingSection;

package/dist/esm/settings/index.js

@@ -3,7 +3,7 @@ import SettingsSection from './SettingsSection';
 import MinMaxSetting from './MinMaxSetting';
 import './style.scss';
 export default {
-  SettingsCard,
-  SettingsSection,
-  MinMaxSetting
+  SettingsCard: SettingsCard,
+  SettingsSection: SettingsSection,
+  MinMaxSetting: MinMaxSetting
 };

package/dist/esm/sortable-newsletter-list-control/index.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /**
  * WordPress dependencies
  */
@@ -12,11 +13,12 @@ import ActionCard from '../action-card';
 import Button from '../button';
 import './style.scss';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export default function SortableNewsletterListControl({
-  lists,
-  selected = [],
-  onChange = () => {}
-}) {
+export default function SortableNewsletterListControl(_ref) {
+  var lists = _ref.lists,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? [] : _ref$selected,
+    _ref$onChange = _ref.onChange,
+    _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
   if (!Array.isArray(lists) && lists.errors) {
     return /*#__PURE__*/_jsx(Notice, {
       status: "error",
@@ -24,44 +26,57 @@ export default function SortableNewsletterListControl({
       children: Object.values(lists.errors).join(', ')
     });
   }
-  const getList = id => lists.find(list => list.id === id);
-  const getAvailableLists = () => {
-    return lists.filter(list => list.active && !selected.find(({
-      id
-    }) => id === list.id));
+  var getList = function getList(id) {
+    return lists.find(function (list) {
+      return list.id === id;
+    });
+  };
+  var getAvailableLists = function getAvailableLists() {
+    return lists.filter(function (list) {
+      return list.active && !selected.find(function (_ref2) {
+        var id = _ref2.id;
+        return id === list.id;
+      });
+    });
   };
   return /*#__PURE__*/_jsxs("div", {
     className: "newspack__newsletter-list-control",
     children: [/*#__PURE__*/_jsx("div", {
       className: "newspack__newsletter-list-control__selected",
-      children: selected.map(selectedList => {
-        const list = getList(selectedList.id);
+      children: selected.map(function (selectedList) {
+        var list = getList(selectedList.id);
         if (!list) {
           return null;
         }
         return /*#__PURE__*/_jsx(ActionCard, {
           title: list.name,
-          description: () => /*#__PURE__*/_jsx(_Fragment, {
-            children: /*#__PURE__*/_jsx(CheckboxControl, {
-              label: __('Checked by default', 'newspack-plugin'),
-              checked: selectedList.checked,
-              onChange: () => {
-                const index = selected.findIndex(({
-                  id
-                }) => id === selectedList.id);
-                const newSelected = [...selected];
-                newSelected[index].checked = !newSelected[index].checked;
-                onChange(newSelected);
-              }
-            })
-          }),
+          description: function description() {
+            return /*#__PURE__*/_jsx(_Fragment, {
+              children: /*#__PURE__*/_jsx(CheckboxControl, {
+                label: __('Checked by default', 'newspack-plugin'),
+                checked: selectedList.checked,
+                onChange: function onChange() {
+                  var index = selected.findIndex(function (_ref3) {
+                    var id = _ref3.id;
+                    return id === selectedList.id;
+                  });
+                  var newSelected = _toConsumableArray(selected);
+                  newSelected[index].checked = !newSelected[index].checked;
+                  _onChange(newSelected);
+                }
+              })
+            });
+          },
           isSmall: true,
           hasWhiteHeader: true,
           actionText: /*#__PURE__*/_jsx(_Fragment, {
             children: /*#__PURE__*/_jsx(Button, {
-              onClick: () => onChange(selected.filter(({
-                id
-              }) => id !== selectedList.id)),
+              onClick: function onClick() {
+                return _onChange(selected.filter(function (_ref4) {
+                  var id = _ref4.id;
+                  return id !== selectedList.id;
+                }));
+              },
               label: __('Remove', 'newspack-plugin'),
               icon: trash,
               isDestructive: true
@@ -70,43 +85,47 @@ export default function SortableNewsletterListControl({
           children: selected.length > 1 && /*#__PURE__*/_jsxs("span", {
             className: "newspack__newsletter-list-control__sort-handle",
             children: [/*#__PURE__*/_jsx("button", {
-              onClick: () => {
-                const index = selected.findIndex(({
-                  id
-                }) => id === selectedList.id);
+              onClick: function onClick() {
+                var index = selected.findIndex(function (_ref5) {
+                  var id = _ref5.id;
+                  return id === selectedList.id;
+                });
                 if (index === 0) {
                   return;
                 }
-                const newSelected = [...selected];
+                var newSelected = _toConsumableArray(selected);
                 newSelected.splice(index, 1);
                 newSelected.splice(index - 1, 0, selectedList);
-                onChange(newSelected);
+                _onChange(newSelected);
               },
-              className: selected.findIndex(({
-                id
-              }) => id === selectedList.id) === 0 ? 'disabled' : '',
+              className: selected.findIndex(function (_ref6) {
+                var id = _ref6.id;
+                return id === selectedList.id;
+              }) === 0 ? 'disabled' : '',
               children: /*#__PURE__*/_jsx(Icon, {
                 icon: chevronUp
               })
             }), /*#__PURE__*/_jsx("button", {
-              onClick: () => {
-                const index = selected.findIndex(({
-                  id
-                }) => id === selectedList.id);
-                const newSelected = [...selected];
+              onClick: function onClick() {
+                var index = selected.findIndex(function (_ref7) {
+                  var id = _ref7.id;
+                  return id === selectedList.id;
+                });
+                var newSelected = _toConsumableArray(selected);
                 newSelected.splice(index, 1);
                 newSelected.splice(index + 1, 0, selectedList);
-                onChange(newSelected);
+                _onChange(newSelected);
               },
-              className: selected.findIndex(({
-                id
-              }) => id === selectedList.id) === selected.length - 1 ? 'disabled' : '',
+              className: selected.findIndex(function (_ref8) {
+                var id = _ref8.id;
+                return id === selectedList.id;
+              }) === selected.length - 1 ? 'disabled' : '',
               children: /*#__PURE__*/_jsx(Icon, {
                 icon: chevronDown
               })
             })]
           })
-        }, `selected-${selectedList.id}`);
+        }, "selected-".concat(selectedList.id));
       })
     }), getAvailableLists().length > 0 && /*#__PURE__*/_jsxs("p", {
       className: "newspack__newsletter-list-control__lists",
@@ -114,13 +133,15 @@ export default function SortableNewsletterListControl({
         children: __('Add more lists:', 'newspack-plugin')
       }) : /*#__PURE__*/_jsx("strong", {
         children: __('Select lists:', 'newspack-plugin')
-      }), ' ', getAvailableLists().map(list => {
+      }), ' ', getAvailableLists().map(function (list) {
         return /*#__PURE__*/_jsx(Button, {
           variant: "secondary",
-          onClick: () => onChange([...selected, {
-            id: list.id,
-            checked: true
-          }]),
+          onClick: function onClick() {
+            return _onChange([].concat(_toConsumableArray(selected), [{
+              id: list.id,
+              checked: true
+            }]));
+          },
           children: list.name
         }, list.id);
       })]

package/dist/esm/steps-list/index.js

@@ -1,3 +1,10 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * Steps List
  */
@@ -18,26 +25,37 @@ import './style.scss';
  */
 import classnames from 'classnames';
 import { jsx as _jsx } from "react/jsx-runtime";
-class StepsList extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      className,
-      stepsListItems,
-      narrowList,
-      style = {}
-    } = this.props;
-    const classes = classnames('steps-list', className, narrowList && 'steps-list__narrow-list');
-    return /*#__PURE__*/_jsx("div", {
-      className: classes,
-      style: style,
-      children: stepsListItems.map((listItem, index) => /*#__PURE__*/_jsx(StepsListItem, {
-        listItemCount: index + 1,
-        listItemText: listItem
-      }, index))
-    });
+var StepsList = /*#__PURE__*/function (_Component) {
+  function StepsList() {
+    _classCallCheck(this, StepsList);
+    return _callSuper(this, StepsList, arguments);
   }
-}
+  _inherits(StepsList, _Component);
+  return _createClass(StepsList, [{
+    key: "render",
+    value:
+    /**
+     * Render
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        stepsListItems = _this$props.stepsListItems,
+        narrowList = _this$props.narrowList,
+        _this$props$style = _this$props.style,
+        style = _this$props$style === void 0 ? {} : _this$props$style;
+      var classes = classnames('steps-list', className, narrowList && 'steps-list__narrow-list');
+      return /*#__PURE__*/_jsx("div", {
+        className: classes,
+        style: style,
+        children: stepsListItems.map(function (listItem, index) {
+          return /*#__PURE__*/_jsx(StepsListItem, {
+            listItemCount: index + 1,
+            listItemText: listItem
+          }, index);
+        })
+      });
+    }
+  }]);
+}(Component);
 export default StepsList;

package/dist/esm/steps-list-item/index.js

@@ -1,3 +1,10 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * Steps List Item
  */
@@ -17,31 +24,40 @@ import './style.scss';
  */
 import classnames from 'classnames';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-class StepsListItem extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      className,
-      listItemCount,
-      listItemText,
-      style = {}
-    } = this.props;
-    const classes = classnames('steps-list-item', className);
-    return /*#__PURE__*/_jsxs("div", {
-      className: classes,
-      style: style,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "steps-list-item__number",
-        children: listItemCount
-      }), /*#__PURE__*/_jsx("div", {
-        className: "steps-list-item__content",
-        dangerouslySetInnerHTML: {
-          __html: listItemText
-        }
-      })]
-    });
+var StepsListItem = /*#__PURE__*/function (_Component) {
+  function StepsListItem() {
+    _classCallCheck(this, StepsListItem);
+    return _callSuper(this, StepsListItem, arguments);
   }
-}
+  _inherits(StepsListItem, _Component);
+  return _createClass(StepsListItem, [{
+    key: "render",
+    value:
+    /**
+     * Render
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        listItemCount = _this$props.listItemCount,
+        listItemText = _this$props.listItemText,
+        _this$props$style = _this$props.style,
+        style = _this$props$style === void 0 ? {} : _this$props$style;
+      var classes = classnames('steps-list-item', className);
+      return /*#__PURE__*/_jsxs("div", {
+        className: classes,
+        style: style,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "steps-list-item__number",
+          children: listItemCount
+        }), /*#__PURE__*/_jsx("div", {
+          className: "steps-list-item__content",
+          dangerouslySetInnerHTML: {
+            __html: listItemText
+          }
+        })]
+      });
+    }
+  }]);
+}(Component);
 export default StepsListItem;