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

package/dist/esm/progress-bar/index.test.js

@@ -1,53 +1,52 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
 import React, { createElement as _createElement } from 'react';
 import { render } from '@testing-library/react';
 import ProgressBar from './';
 import { jsx as _jsx } from "react/jsx-runtime";
-describe('ProgressBar', () => {
-  it('should render a progress indicator', () => {
-    const {
-      getByTestId
-    } = render(/*#__PURE__*/_jsx(ProgressBar, {
-      completed: "1",
-      total: "2"
-    }));
-    const indicator = getByTestId('progress-bar-indicator');
+describe('ProgressBar', function () {
+  it('should render a progress indicator', function () {
+    var _render = render(/*#__PURE__*/_jsx(ProgressBar, {
+        completed: "1",
+        total: "2"
+      })),
+      getByTestId = _render.getByTestId;
+    var indicator = getByTestId('progress-bar-indicator');
     expect(indicator).toHaveAttribute('style', 'width: 50%;');
   });
-  it('should render a label', () => {
-    const label = 'test label';
-    const {
-      getByText
-    } = render(/*#__PURE__*/_jsx(ProgressBar, {
-      completed: "1",
-      total: "2",
-      label: label
-    }));
+  it('should render a label', function () {
+    var label = 'test label';
+    var _render2 = render(/*#__PURE__*/_jsx(ProgressBar, {
+        completed: "1",
+        total: "2",
+        label: label
+      })),
+      getByText = _render2.getByText;
     expect(getByText(label)).toBeInTheDocument();
   });
-  it('should render progress as a fraction', () => {
-    const {
-      getByText
-    } = render(/*#__PURE__*/_jsx(ProgressBar, {
-      completed: "1",
-      total: "2",
-      displayFraction: true
-    }));
+  it('should render progress as a fraction', function () {
+    var _render3 = render(/*#__PURE__*/_jsx(ProgressBar, {
+        completed: "1",
+        total: "2",
+        displayFraction: true
+      })),
+      getByText = _render3.getByText;
     expect(getByText('1/2')).toBeInTheDocument();
   });
-  it('should render with both label and fraction', () => {
-    const label = 'test label';
-    const {
-      getByText
-    } = render(/*#__PURE__*/_jsx(ProgressBar, {
-      completed: "1",
-      total: "2",
-      label: label,
-      displayFraction: true
-    }));
+  it('should render with both label and fraction', function () {
+    var label = 'test label';
+    var _render4 = render(/*#__PURE__*/_jsx(ProgressBar, {
+        completed: "1",
+        total: "2",
+        label: label,
+        displayFraction: true
+      })),
+      getByText = _render4.getByText;
     expect(getByText(label)).toBeInTheDocument();
     expect(getByText('1/2')).toBeInTheDocument();
   });
-  describe('should calculate progress correctly', () => {
+  describe('should calculate progress correctly', function () {
     [{
       props: {
         completed: 1,
@@ -66,42 +65,37 @@ describe('ProgressBar', () => {
         total: 3
       },
       expectedWidth: 100
-    }].forEach(({
-      props,
-      expectedWidth
-    }) => {
-      it(`with expected  progress of ${expectedWidth}`, () => {
-        const {
-          getByTestId
-        } = render(/*#__PURE__*/_createElement(ProgressBar, {
-          ...props,
-          key: expectedWidth
-        }));
-        expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', `width: ${expectedWidth}%;`);
+    }].forEach(function (_ref) {
+      var props = _ref.props,
+        expectedWidth = _ref.expectedWidth;
+      it("with expected  progress of ".concat(expectedWidth), function () {
+        var _render5 = render(/*#__PURE__*/_createElement(ProgressBar, _objectSpread(_objectSpread({}, props), {}, {
+            key: expectedWidth
+          }))),
+          getByTestId = _render5.getByTestId;
+        expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', "width: ".concat(expectedWidth, "%;"));
       });
     });
   });
-  it('should handle non-numeric values in ProgressBar element', () => {
-    const {
-      getByText,
-      getByTestId
-    } = render(/*#__PURE__*/_jsx(ProgressBar, {
-      completed: "cats",
-      total: "dogs",
-      displayFraction: true
-    }));
+  it('should handle non-numeric values in ProgressBar element', function () {
+    var _render6 = render(/*#__PURE__*/_jsx(ProgressBar, {
+        completed: "cats",
+        total: "dogs",
+        displayFraction: true
+      })),
+      getByText = _render6.getByText,
+      getByTestId = _render6.getByTestId;
     expect(getByText('0/0')).toBeInTheDocument();
     expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', 'width: 100%;');
   });
-  it('should handle non-logical values in ProgressBar element', () => {
-    const {
-      getByText,
-      getByTestId
-    } = render(/*#__PURE__*/_jsx(ProgressBar, {
-      completed: "3",
-      total: "-1",
-      displayFraction: true
-    }));
+  it('should handle non-logical values in ProgressBar element', function () {
+    var _render7 = render(/*#__PURE__*/_jsx(ProgressBar, {
+        completed: "3",
+        total: "-1",
+        displayFraction: true
+      })),
+      getByText = _render7.getByText,
+      getByTestId = _render7.getByTestId;
     expect(getByText('0/0')).toBeInTheDocument();
     expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', 'width: 100%;');
   });

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

@@ -1,3 +1,15 @@
+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"];
+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; })(); }
 /**
  * WordPress dependencies.
  */
@@ -18,20 +30,27 @@ import classnames from 'classnames';
  * Radio Control.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-class RadioControl extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-radio-control', className);
-    return /*#__PURE__*/_jsx(BaseComponent, {
-      className: classes,
-      ...otherProps
-    });
+var RadioControl = /*#__PURE__*/function (_Component) {
+  function RadioControl() {
+    _classCallCheck(this, RadioControl);
+    return _callSuper(this, RadioControl, arguments);
   }
-}
+  _inherits(RadioControl, _Component);
+  return _createClass(RadioControl, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        otherProps = _objectWithoutProperties(_this$props, _excluded);
+      var classes = classnames('newspack-radio-control', className);
+      return /*#__PURE__*/_jsx(BaseComponent, _objectSpread({
+        className: classes
+      }, otherProps));
+    }
+  }]);
+}(Component);
 export default RadioControl;

package/dist/esm/section-header/index.js

@@ -5,12 +5,15 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
+import { DropdownMenu, MenuItem, Tooltip, __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { Icon, chevronLeft, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Grid } from '..';
+import { Badge, Button, Grid } from '..';
 import './style.scss';
 
 /**
@@ -22,14 +25,20 @@ import classnames from 'classnames';
  * Represents a section header component.
  *
  * @typedef {Object} SectionHeaderProps
- * @property {boolean}           [centered=false] - Indicates if the header is centered.
- * @property {?string}           [className=null] - Additional CSS class name.
- * @property {string|Function|*} [description]    - Description of the section.
- * @property {number}            [heading=2]      - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
- * @property {boolean}           [isWhite=false]  - Indicates if the header should use a white theme.
- * @property {boolean}           [noMargin=false] - Indicates if the header should have no margin.
- * @property {string}            title            - The title of the section.
- * @property {?string}           [id=null]        - Optional ID for the header element.
+ * @property {string}             [backNav='']       - URL to navigate back to.
+ * @property {string|string[]}    [badge]            - Badge to display in the header.
+ * @property {string}             [badgeLevel]       - Badge level, e.g., 'success', 'info', 'warning', 'error'.
+ * @property {boolean}            [centered=false]   - Indicates if the header is centered.
+ * @property {?string}            [className=null]   - Additional CSS class name.
+ * @property {string|Function|*}  [description]      - Description of the section.
+ * @property {number}             [heading=2]        - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
+ * @property {string|Function|*}  [icon]             - Icon to display in the header.
+ * @property {boolean}            [isWhite=false]    - Indicates if the header should use a white theme.
+ * @property {boolean}            [noMargin=false]   - Indicates if the header should have no margin.
+ * @property {boolean}            [pageHeader=false] - Indicates if the header is used as a page header.
+ * @property {string}             title              - The title of the section.
+ * @property {?string}            [id=null]          - Optional ID for the header element.
+ * @property {?string|Function|*} [children=null]    - Optional children to display in the header.
  */
 
 /**
@@ -38,52 +47,145 @@ import classnames from 'classnames';
  * @param {SectionHeaderProps} props - The properties for the section header.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SectionHeader = ({
-  centered = false,
-  className = null,
-  description = '',
-  heading = 2,
-  isWhite = false,
-  noMargin = false,
-  title,
-  id = null
-}) => {
+var SectionHeader = function SectionHeader(_ref) {
+  var _ref$backNav = _ref.backNav,
+    backNav = _ref$backNav === void 0 ? '' : _ref$backNav,
+    badges = _ref.badges,
+    _ref$centered = _ref.centered,
+    centered = _ref$centered === void 0 ? false : _ref$centered,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? '' : _ref$description,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? 2 : _ref$heading,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? null : _ref$icon,
+    _ref$isWhite = _ref.isWhite,
+    isWhite = _ref$isWhite === void 0 ? false : _ref$isWhite,
+    _ref$noMargin = _ref.noMargin,
+    noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
+    _ref$pageHeader = _ref.pageHeader,
+    pageHeader = _ref$pageHeader === void 0 ? false : _ref$pageHeader,
+    title = _ref.title,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? null : _ref$id,
+    menu = _ref.menu,
+    primaryAction = _ref.primaryAction,
+    secondaryAction = _ref.secondaryAction,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children;
   // If id is in the URL as a scrollTo param, scroll to it on render.
-  const ref = useRef();
-  useEffect(() => {
-    const params = new Proxy(new URLSearchParams(window.location.search), {
-      get: (searchParams, prop) => searchParams.get(prop)
+  var ref = useRef();
+  useEffect(function () {
+    var params = new Proxy(new URLSearchParams(window.location.search), {
+      get: function get(searchParams, prop) {
+        return searchParams.get(prop);
+      }
     });
-    const scrollToId = params.scrollTo;
+    var scrollToId = params.scrollTo;
     if (scrollToId && scrollToId === id) {
       // Let parent scroll action run before running this.
-      window.setTimeout(() => ref.current.scrollIntoView({
-        behavior: 'smooth'
-      }), 250);
+      window.setTimeout(function () {
+        return ref.current.scrollIntoView({
+          behavior: 'smooth'
+        });
+      }, 250);
     }
   }, []);
-  const classes = classnames('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 /*#__PURE__*/_jsx("div", {
+  var classes = classnames('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', pageHeader && 'newspack-section-header--page-header');
+  var HeadingTag = pageHeader ? 'h1' : "h".concat(heading);
+  var titleContent = null;
+  if (typeof title === 'string') {
+    titleContent = /*#__PURE__*/_jsxs("div", {
+      className: "newspack-section-header__title-container",
+      children: [/*#__PURE__*/_jsxs(HeadingTag, {
+        children: [title, badges !== null && badges !== void 0 && badges.length ? badges.map(function (badge, i) {
+          return /*#__PURE__*/_jsx(Badge, {
+            text: badge.label,
+            level: badge.level || 'default'
+          }, i);
+        }) : null]
+      }), (menu === null || menu === void 0 ? void 0 : menu.length) > 0 && /*#__PURE__*/_jsx(DropdownMenu, {
+        className: "newspack-section-header__menu",
+        icon: moreVertical,
+        label: __('More options', 'newspack-plugin'),
+        children: function children() {
+          return menu.map(function (item, index) {
+            return /*#__PURE__*/_jsx(MenuItem, {
+              icon: item.icon,
+              href: item.href,
+              onClick: item.action,
+              disabled: item.disabled || false,
+              isDestructive: item.destructive || false,
+              children: item.label
+            }, index);
+          });
+        }
+      }), secondaryAction && /*#__PURE__*/_jsx("div", {
+        className: "newspack-section-header__secondary-action",
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "link",
+          href: secondaryAction.href,
+          onClick: secondaryAction.action,
+          children: secondaryAction.label
+        })
+      })]
+    });
+  } else if (typeof title === 'function') {
+    titleContent = /*#__PURE__*/_jsx(HeadingTag, {
+      children: title()
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
     id: id,
-    className: "newspack-section-header__container",
+    className: classnames('newspack-section-header__container', backNav && 'newspack-section-header--has-back-nav', primaryAction && 'newspack-section-header--has-primary-action', className),
     ref: ref,
-    children: /*#__PURE__*/_jsxs(Grid, {
+    children: [/*#__PURE__*/_jsxs(Grid, {
       columns: 1,
       gutter: 8,
       className: classes,
-      children: [typeof title === 'string' && /*#__PURE__*/_jsx(HeadingTag, {
-        children: title
-      }), typeof title === 'function' && /*#__PURE__*/_jsx(HeadingTag, {
-        children: title()
-      }), description && typeof description === 'string' && /*#__PURE__*/_jsx("p", {
+      children: [icon && /*#__PURE__*/_jsx("div", {
+        className: "newspack-section-header__icon",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: icon,
+          size: 48
+        })
+      }), backNav ? /*#__PURE__*/_jsxs(HStack, {
+        alignment: "left",
+        style: {
+          position: 'relative'
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "newspack-section-header__back-nav",
+          children: /*#__PURE__*/_jsx(Tooltip, {
+            text: __('Go back', 'newspack-plugin'),
+            children: /*#__PURE__*/_jsx(Button, {
+              href: backNav,
+              icon: chevronLeft,
+              variant: "tertiary"
+            })
+          })
+        }), titleContent]
+      }) : titleContent, description && typeof description === 'string' && /*#__PURE__*/_jsx("p", {
         children: description
       }), typeof description === 'function' && /*#__PURE__*/_jsx("p", {
         children: description()
       }), description && typeof description !== 'string' && typeof description !== 'function' && /*#__PURE__*/_jsx("p", {
         children: description
+      }), children && /*#__PURE__*/_jsx("div", {
+        className: "newspack-section-header__children",
+        children: children
       })]
-    })
+    }), primaryAction && /*#__PURE__*/_jsx("div", {
+      className: "newspack-section-header__primary-action",
+      children: /*#__PURE__*/_jsx(Button, {
+        href: primaryAction.href,
+        variant: "primary",
+        onClick: primaryAction.action,
+        children: primaryAction.label
+      })
+    })]
   });
 };
 export default SectionHeader;

package/dist/esm/section-header/style.scss

@@ -3,21 +3,66 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+@use "../../../colors/colors.module" as colors;
 
 .newspack-section-header {
+	flex: 1;
 	margin: 64px 0 32px;
 
-	&__container:not(:first-child) {
-		margin-top: 48px;
+	&__container {
+		position: relative;
+		&:not(:first-child) {
+			margin-top: 48px;
+		}
+		&:has(> .newspack-section-header--no-margin) {
+			margin-top: 0;
+		}
+		&.newspack-section-header--has-primary-action {
+			display: flex;
+			flex-direction: column;
+			gap: 32px;
+			@media (min-width: 782px) {
+				align-items: flex-start;
+				flex-direction: row;
+			}
+		}
+		&.newspack-section-header--has-back-nav {
+			@media (min-width: 782px) {
+				.newspack-section-header__title-container,
+				p {
+					max-width: calc(50% - 16px);
+				}
+			}
+		}
+	}
+
+	&__back-nav {
+		@media (min-width: 1280px) {
+			left: 0;
+			position: absolute;
+			top: 50%;
+			transform: translate(calc(-100% - 8px), -50%);
+		}
+		a,
+		button {
+			color: inherit !important;
+		}
 	}
 
-	&--no-margin,
 	h1,
 	h2,
 	h3,
 	h4,
 	h5,
 	h6 {
+		align-items: center;
+		display: flex;
+		gap: 8px;
+		margin: 0 !important;
+	}
+
+	&--no-margin {
 		margin: 0 !important;
 	}
 
@@ -25,7 +70,7 @@
 		text-align: center;
 	}
 
-	&:not( #{&}--no-margin ) + *:not( #{&} ) {
+	&:not( #{&}--no-margin ) + *:not( #{&} ):not(.newspack-wizard__section-header):not(.newspack-section-header__primary-action) {
 		margin-top: -16px !important;
 	}
 
@@ -39,7 +84,87 @@
 		color: wp-colors.$gray-700;
 	}
 
+	&__title-container {
+		align-items: center;
+		display: flex;
+		gap: 8px;
+
+		h2 {
+			font-size: wp-vars.$font-size-x-large;
+			font-weight: wp-vars.$font-weight-medium;
+			line-height: wp-vars.$font-line-height-x-large;
+		}
+
+		.newspack-section-header__menu,
+		.newspack-section-header__secondary-action,
+		.newspack-badge {
+			margin-top: 8px;
+		}
+	}
+
+	&__menu {
+		align-self: center;
+	}
+
+	&__primary-action {
+		@media (min-width: 782px) {
+			display: flex;
+			flex: 1;
+			justify-content: flex-end;
+		}
+	}
+
+	&__secondary-action {
+		display: flex;
+		margin-left: 8px;
+	}
+
+	&__children {
+		margin-top: 32px;
+		width: 100%;
+		.newspack-button-card:not(.grouped) {
+			margin-bottom: 0;
+			& + .newspack-button-card:not(.grouped) {
+				margin-top: 16px;
+			}
+		}
+	}
+
 	.newspack-wizard__content &:first-child {
 		margin-top: 32px;
 	}
+	&.newspack-section-header--page-header {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin-left: auto;
+		margin-right: auto;
+		> h1,
+		> h2,
+		> h3,
+		> h4,
+		> h5,
+		> h6,
+		> p {
+			text-align: center;
+		}
+		.newspack-section-header__icon {
+			background-color: var(--wp-admin-theme-color-lighter-10);
+			border-radius: 100%;
+			display: grid;
+			height: 80px;
+			margin-bottom: 8px !important;
+			width: 80px;
+			place-items: center;
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+		}
+		h1 {
+			font-size: wp-vars.$font-size-x-large;
+			font-weight: wp-vars.$font-weight-medium;
+			line-height: wp-vars.$font-line-height-x-large;
+		}
+	}
 }

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

@@ -14,17 +14,16 @@ import { BaseControl, Button, ButtonGroup } from '@wordpress/components';
  */
 import { hooks } from '..';
 import { jsx as _jsx } from "react/jsx-runtime";
-const ButtonGroupControl = ({
-  buttonOptions,
-  buttonSmall,
-  className,
-  help,
-  hideLabelFromVision,
-  label,
-  onChange,
-  value
-}) => {
-  const id = hooks.useUniqueId('button-group');
+var ButtonGroupControl = function ButtonGroupControl(_ref) {
+  var buttonOptions = _ref.buttonOptions,
+    buttonSmall = _ref.buttonSmall,
+    className = _ref.className,
+    help = _ref.help,
+    hideLabelFromVision = _ref.hideLabelFromVision,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    value = _ref.value;
+  var id = hooks.useUniqueId('button-group');
   return /*#__PURE__*/_jsx(BaseControl, {
     label: label,
     help: help,
@@ -32,19 +31,25 @@ const ButtonGroupControl = ({
     id: id.current,
     className: classnames(className, 'components-select-control'),
     children: /*#__PURE__*/_jsx(ButtonGroup, {
-      children: buttonOptions.map(option => {
-        const isSelected = value === option.value;
-        let Label = () => option.label;
+      children: buttonOptions.map(function (option) {
+        var isSelected = value === option.value;
+        var Label = function Label() {
+          return option.label;
+        };
         if (option.icon) {
           // eslint-disable-next-line react/display-name
-          Label = () => /*#__PURE__*/_jsx(Icon, {
-            icon: option.icon
-          });
+          Label = function Label() {
+            return /*#__PURE__*/_jsx(Icon, {
+              icon: option.icon
+            });
+          };
         }
         return /*#__PURE__*/_jsx(Button, {
           variant: isSelected ? 'primary' : null,
           isPressed: isSelected,
-          onClick: () => onChange(option.value),
+          onClick: function onClick() {
+            return onChange(option.value);
+          },
           isSmall: buttonSmall,
           children: /*#__PURE__*/_jsx(Label, {})
         }, option.value);