newspack-components 3.0.0-alpha.1 → 3.0.0-alpha.2

package/dist/{cjs/section-header → section-header}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +9,7 @@ var _element = require("@wordpress/element");
 var _ = require("..");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Section Header
  */
@@ -52,21 +52,21 @@ const SectionHeader = ({
   }, []);
   const classes = (0, _classnames.default)('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', className);
   const HeadingTag = `h${heading}`;
-  return (0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     id: id,
     className: "newspack-section-header__container",
     ref: ref,
-    children: (0, _jsxRuntime.jsxs)(_.Grid, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
       columns: 1,
       gutter: 8,
       className: classes,
-      children: [typeof title === 'string' && (0, _jsxRuntime.jsx)(HeadingTag, {
+      children: [typeof title === 'string' && /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingTag, {
         children: title
-      }), typeof title === 'function' && (0, _jsxRuntime.jsx)(HeadingTag, {
+      }), typeof title === 'function' && /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingTag, {
         children: title()
-      }), description && typeof description === 'string' && (0, _jsxRuntime.jsx)("p", {
+      }), description && typeof description === 'string' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: description
-      }), typeof description === 'function' && (0, _jsxRuntime.jsx)("p", {
+      }), typeof description === 'function' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: description()
       })]
     })

package/dist/{cjs/section-header → section-header}/style.scss

@@ -2,7 +2,7 @@
  * Section Header
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-section-header {
 	margin: 64px 0 32px;

package/dist/{cjs/select-control → select-control}/ButtonGroupControl.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +9,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _icons = require("@wordpress/icons");
 var _components = require("@wordpress/components");
 var _ = require("..");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -32,27 +32,27 @@ const ButtonGroupControl = ({
   value
 }) => {
   const id = _.hooks.useUniqueId('button-group');
-  return (0, _jsxRuntime.jsx)(_components.BaseControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl, {
     label: label,
     hideLabelFromVision: hideLabelFromVision,
     id: id.current,
     className: (0, _classnames.default)(className, 'components-select-control'),
-    children: (0, _jsxRuntime.jsx)(_components.ButtonGroup, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ButtonGroup, {
       children: buttonOptions.map(option => {
         const isSelected = value === option.value;
         let Label = () => option.label;
         if (option.icon) {
           // eslint-disable-next-line react/display-name
-          Label = () => (0, _jsxRuntime.jsx)(_icons.Icon, {
+          Label = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
             icon: option.icon
           });
         }
-        return (0, _jsxRuntime.jsx)(_components.Button, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
           variant: isSelected ? 'primary' : null,
           isPressed: isSelected,
           onClick: () => onChange(option.value),
           isSmall: buttonSmall,
-          children: (0, _jsxRuntime.jsx)(Label, {})
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {})
         }, option.value);
       })
     })

package/dist/{cjs/select-control → select-control}/GroupedSelectControl.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,21 +12,22 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _find = _interopRequireDefault(require("lodash/find"));
 var _some = _interopRequireDefault(require("lodash/some"));
 var _ = require("..");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
-const __ = _i18n.__;
+
 /**
  * External dependencies
  */
+
 /**
  * Internal dependencies
  */
+
 /**
  * SelectControl with optgroup support
- */
-function GroupedSelectControl({
+ */function GroupedSelectControl({
   help,
   label,
   onChange,
@@ -43,37 +44,37 @@ function GroupedSelectControl({
     onChange(value, optgroup);
   };
   const id = _.hooks.useUniqueId('group-select');
-  return (0, _jsxRuntime.jsx)(_components.BaseControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl, {
     label: label,
     hideLabelFromVision: hideLabelFromVision,
     id: id,
     help: help,
     className: (0, _classnames.default)(className, 'components-select-control'),
-    children: (0, _jsxRuntime.jsxs)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "relative",
-      children: [(0, _jsxRuntime.jsxs)("select", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
         id: id,
         className: "components-select-control__input",
         onChange: onChangeValue,
         "aria-describedby": !!help ? `${id}__help` : undefined,
         ...props,
-        children: [(0, _jsxRuntime.jsx)("option", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
           value: "",
-          children: __('-- Select --', 'newspack-plugin')
+          children: (0, _i18n.__)('-- Select --', 'newspack-plugin')
         }), optgroups.map(({
           label: optgroupLabel,
           options
-        }, optgroupIndex) => (0, _jsxRuntime.jsx)("optgroup", {
+        }, optgroupIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)("optgroup", {
           label: optgroupLabel,
-          children: options.map((option, optionIndex) => (0, _jsxRuntime.jsx)("option", {
+          children: options.map((option, optionIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
             value: option.value,
             disabled: option.disabled,
             children: option.label
           }, `${option.label}-${option.value}-${optionIndex}`))
         }, optgroupIndex))]
-      }), (0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "components-select-control__arrow-wrapper",
-        children: (0, _jsxRuntime.jsx)(_icons.Icon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
           icon: _icons.chevronDown,
           size: 18
         })

package/dist/{cjs/select-control → select-control}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 require("./style.scss");
 var _GroupedSelectControl = _interopRequireDefault(require("./GroupedSelectControl"));
 var _ButtonGroupControl = _interopRequireDefault(require("./ButtonGroupControl"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Select Control
  */
@@ -41,16 +41,16 @@ class SelectControl extends _element.Component {
       ...otherProps
     } = this.props;
     const classes = (0, _classnames.default)('newspack-select-control', optgroups && 'newspack-grouped-select-control', buttonOptions && 'newspack-buttons-select-control', className);
-    return (0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes,
-      children: optgroups ? (0, _jsxRuntime.jsx)(_GroupedSelectControl.default, {
+      children: optgroups ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedSelectControl.default, {
         optgroups: optgroups,
         ...otherProps
-      }) : buttonOptions ? (0, _jsxRuntime.jsx)(_ButtonGroupControl.default, {
+      }) : buttonOptions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroupControl.default, {
         buttonOptions: buttonOptions,
         buttonSmall: buttonSmall,
         ...otherProps
-      }) : (0, _jsxRuntime.jsx)(_components.SelectControl, {
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
         ...otherProps
       })
     });

package/dist/{esm/select-control → select-control}/style.scss

@@ -2,7 +2,7 @@
  * Select Control
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .components-select-control {
 	&__input {
@@ -22,7 +22,7 @@
 				padding: 8px;
 
 				&:checked {
-					background: var( --wp-admin-theme-color );
+					background: var(--wp-admin-theme-color);
 					color: white;
 				}
 			}
@@ -64,8 +64,8 @@
 			}
 
 			&:focus {
-				border-color: var( --wp-admin-theme-color-darker-10 ) !important;
-				box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color-darker-10 ) !important;
+				border-color: var(--wp-admin-theme-color-darker-10) !important;
+				box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10) !important;
 				color: inherit;
 			}
 		}

package/dist/{cjs/settings → settings}/MinMaxSetting.js

@@ -7,14 +7,15 @@ exports.default = void 0;
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _ = require("../");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies.
  */
-const __ = _i18n.__;
+
 /**
  * Internal dependencies.
  */
+
 const MinMaxSetting = ({
   min,
   max,
@@ -24,29 +25,29 @@ const MinMaxSetting = ({
   maxPlaceholder,
   ...props
 }) => {
-  return (0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ...props,
-    children: [(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-settings__min-max",
-      children: [(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
         checked: min > 0,
         onChange: value => onChangeMin(value ? 1 : 0),
-        label: __('Min', 'newspack-plugin')
-      }), (0, _jsxRuntime.jsx)(_.TextControl, {
+        label: (0, _i18n.__)('Min', 'newspack-plugin')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TextControl, {
         "data-testid": "min",
         type: "number",
         value: min,
         placeholder: minPlaceholder,
         onChange: value => onChangeMin(value > 0 ? value : 0)
       })]
-    }), (0, _jsxRuntime.jsxs)("div", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-settings__min-max",
       "data-testid": "max",
-      children: [(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
         checked: max > 0,
         onChange: value => onChangeMax(value ? min || 1 : 0),
-        label: __('Max', 'newspack-plugin')
-      }), (0, _jsxRuntime.jsx)(_.TextControl, {
+        label: (0, _i18n.__)('Max', 'newspack-plugin')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TextControl, {
         "data-testid": "max",
         type: "number",
         value: max,

package/dist/{cjs/settings → settings}/SettingsCard.js

@@ -1,13 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ = require("../");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies.
  */
@@ -26,12 +26,12 @@ const SettingsCard = ({
   ...props
 }) => {
   const classes = (0, _classnames.default)('newspack-settings__card', noBorder && 'newspack-settings__no-border', className);
-  return (0, _jsxRuntime.jsx)(_.ActionCard, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ActionCard, {
     ...props,
     className: classes,
     notificationLevel: "info",
     noBorder: noBorder,
-    children: (0, _jsxRuntime.jsx)(_.Grid, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Grid, {
       columns: columns,
       gutter: gutter,
       rowGap: rowGap,

package/dist/{cjs/settings → settings}/SettingsSection.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _ = require("../");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Internal dependencies.
  */
@@ -14,18 +14,18 @@ const SettingSection = ({
   title,
   description,
   children
-}) => (0, _jsxRuntime.jsxs)(_.Grid, {
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
   columns: 1,
   gutter: 8,
   className: "newspack-settings__section",
-  children: [(0, _jsxRuntime.jsxs)("div", {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "newspack-settings__section__title",
-    children: [(0, _jsxRuntime.jsx)("span", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: title
-    }), description && (0, _jsxRuntime.jsx)(_.InfoButton, {
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InfoButton, {
       text: description
     })]
-  }), (0, _jsxRuntime.jsx)("div", {
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "newspack-settings__section__content",
     children: children
   })]

package/dist/{cjs/settings → settings}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/dist/{cjs/settings → settings}/style.scss

@@ -44,7 +44,7 @@
 					align-items: center;
 					justify-content: space-between;
 					flex-wrap: wrap;
-					> *:not( [class*='help'], [class*='label'] ) {
+					> *:not([class*="help"], [class*="label"]) {
 						margin: 0;
 					}
 				}

package/dist/{cjs/sortable-newsletter-list-control → sortable-newsletter-list-control}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,21 +11,22 @@ var _i18n = require("@wordpress/i18n");
 var _actionCard = _interopRequireDefault(require("../action-card"));
 var _button = _interopRequireDefault(require("../button"));
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
+
 /**
  * Internal dependencies
  */
-const __ = _i18n.__;
+
 function SortableNewsletterListControl({
   lists,
   selected = [],
   onChange = () => {}
 }) {
   if (!Array.isArray(lists) && lists.errors) {
-    return (0, _jsxRuntime.jsx)(_components.Notice, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Notice, {
       status: "error",
       isDismissible: false,
       children: Object.values(lists.errors).join(', ')
@@ -37,19 +38,19 @@ function SortableNewsletterListControl({
       id
     }) => id === list.id));
   };
-  return (0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "newspack__newsletter-list-control",
-    children: [(0, _jsxRuntime.jsx)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "newspack__newsletter-list-control__selected",
       children: selected.map(selectedList => {
         const list = getList(selectedList.id);
         if (!list) {
           return null;
         }
-        return (0, _jsxRuntime.jsx)(_actionCard.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_actionCard.default, {
           title: list.name,
-          description: () => (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [(0, _jsxRuntime.jsx)("input", {
+          description: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
               type: "checkbox",
               checked: selectedList.checked,
               onChange: () => {
@@ -60,21 +61,21 @@ function SortableNewsletterListControl({
                 newSelected[index].checked = !newSelected[index].checked;
                 onChange(newSelected);
               }
-            }), __('Checked by default', 'newspack-plugin')]
+            }), (0, _i18n.__)('Checked by default', 'newspack-plugin')]
           }),
           isSmall: true,
-          actionText: (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: (0, _jsxRuntime.jsx)(_button.default, {
+          actionText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
               onClick: () => onChange(selected.filter(({
                 id
               }) => id !== selectedList.id)),
-              label: __('Remove', 'newspack-plugin'),
+              label: (0, _i18n.__)('Remove', 'newspack-plugin'),
               icon: _icons.trash
             })
           }),
-          children: selected.length > 1 && (0, _jsxRuntime.jsxs)("span", {
+          children: selected.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
             className: "newspack__newsletter-list-control__sort-handle",
-            children: [(0, _jsxRuntime.jsx)("button", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
               onClick: () => {
                 const index = selected.findIndex(({
                   id
@@ -90,10 +91,10 @@ function SortableNewsletterListControl({
               className: selected.findIndex(({
                 id
               }) => id === selectedList.id) === 0 ? 'disabled' : '',
-              children: (0, _jsxRuntime.jsx)(_icons.Icon, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
                 icon: _icons.chevronUp
               })
-            }), (0, _jsxRuntime.jsx)("button", {
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
               onClick: () => {
                 const index = selected.findIndex(({
                   id
@@ -106,21 +107,21 @@ function SortableNewsletterListControl({
               className: selected.findIndex(({
                 id
               }) => id === selectedList.id) === selected.length - 1 ? 'disabled' : '',
-              children: (0, _jsxRuntime.jsx)(_icons.Icon, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
                 icon: _icons.chevronDown
               })
             })]
           })
         }, `selected-${selectedList.id}`);
       })
-    }), getAvailableLists().length > 0 && (0, _jsxRuntime.jsxs)("p", {
+    }), getAvailableLists().length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
       className: "newspack__newsletter-list-control__lists",
-      children: [selected.length > 0 ? (0, _jsxRuntime.jsx)("strong", {
-        children: __('Add more lists:', 'newspack-plugin')
-      }) : (0, _jsxRuntime.jsx)("strong", {
-        children: __('Select lists:', 'newspack-plugin')
+      children: [selected.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+        children: (0, _i18n.__)('Add more lists:', 'newspack-plugin')
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+        children: (0, _i18n.__)('Select lists:', 'newspack-plugin')
       }), ' ', getAvailableLists().map(list => {
-        return (0, _jsxRuntime.jsx)(_button.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
           variant: "secondary",
           onClick: () => onChange([...selected, {
             id: list.id,

package/dist/{cjs/steps-list → steps-list}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +9,7 @@ var _element = require("@wordpress/element");
 var _ = require("../");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Steps List
  */
@@ -38,10 +38,10 @@ class StepsList extends _element.Component {
       style = {}
     } = this.props;
     const classes = (0, _classnames.default)('steps-list', className, narrowList && 'steps-list__narrow-list');
-    return (0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes,
       style: style,
-      children: stepsListItems.map((listItem, index) => (0, _jsxRuntime.jsx)(_.StepsListItem, {
+      children: stepsListItems.map((listItem, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.StepsListItem, {
         listItemCount: index + 1,
         listItemText: listItem
       }, index))

package/dist/{esm/steps-list → steps-list}/style.scss

@@ -1,5 +1,5 @@
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .steps-list {
 	margin-left: auto;

package/dist/{cjs/steps-list-item → steps-list-item}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,7 +8,7 @@ exports.default = void 0;
 var _element = require("@wordpress/element");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Steps List Item
  */
@@ -37,13 +37,13 @@ class StepsListItem extends _element.Component {
       style = {}
     } = this.props;
     const classes = (0, _classnames.default)('steps-list-item', className);
-    return (0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classes,
       style: style,
-      children: [(0, _jsxRuntime.jsx)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "steps-list-item__number",
         children: listItemCount
-      }), (0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "steps-list-item__content",
         dangerouslySetInnerHTML: {
           __html: listItemText

package/dist/{cjs/steps-list-item → steps-list-item}/style.scss

@@ -1,5 +1,5 @@
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .steps-list-item {
 	align-items: center;
@@ -9,9 +9,9 @@
 	position: relative;
 
 	&::before {
-		border: 1px solid #F0F0F0;
+		border: 1px solid #f0f0f0;
 		bottom: -16px;
-		content: '';
+		content: "";
 		display: block;
 		left: 14px;
 		position: absolute;
@@ -44,4 +44,4 @@
 		width: 28px;
 		z-index: 2;
 	}
-}
+}