@automattic/vip-design-system 1.2.1 → 1.2.2

package/build/system/NewForm/FormAutocompleteMultiselect.stories.js

@@ -1,231 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.WithStaticData = exports.WithDynamicData = exports.Inline = exports.Default = void 0;
-var _react = require("react");
-var Form = _interopRequireWildcard(require("."));
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["label", "width"];
-/** @jsxImportSource theme-ui */
-/**
- * Internal dependencies
- */
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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 _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; }
-var _default = {
-  title: 'Form/AutocompleteMulti',
-  argTypes: {
-    placeholder: {
-      type: {
-        name: 'string',
-        required: false
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    label: {
-      type: {
-        name: 'string',
-        required: false
-      },
-      control: {
-        type: 'text'
-      }
-    }
-  }
-};
-exports["default"] = _default;
-var shortOptions = [{
-  value: 'chocolate',
-  label: 'Chocolate'
-}, {
-  value: 'strawberry',
-  label: 'Strawberry'
-}, {
-  value: 'vanilla',
-  label: 'Vanilla'
-}, {
-  value: 'pistachio',
-  label: 'Pistachio'
-}, {
-  value: 'bubblegum',
-  label: 'Bubblegum'
-}, {
-  value: 'ube',
-  label: 'Ube'
-}, {
-  value: 'mango',
-  label: 'Mango'
-}, {
-  value: 'buko',
-  label: 'Buko'
-}, {
-  value: 'durian',
-  label: 'Durian'
-}, {
-  value: 'lecheflan',
-  label: 'Leche Flan'
-}];
-var longOptions = [{
-  value: 'chocolate',
-  label: 'www.chocolate.com'
-}, {
-  value: 'strawberry',
-  label: 'www.chocolatevanillastrawberry.com'
-}, {
-  value: 'vanilla',
-  label: 'www.vanilla.com'
-}, {
-  value: 'pistachio',
-  label: 'www.pistachio.com'
-}, {
-  value: 'bubblegum',
-  label: 'www.bubblegum.com'
-}, {
-  value: 'ube',
-  label: 'www.ube.com'
-}, {
-  value: 'mango',
-  label: 'www.mango.com'
-}, {
-  value: 'buko',
-  label: 'www.buko.com'
-}, {
-  value: 'durian',
-  label: 'www.thesuperfruitdurian.com'
-}, {
-  value: 'lecheflan',
-  label: 'www.deliciousdessertnamedfromcursewordlecheflan.com'
-}, {
-  value: 'optionwithspace',
-  label: 'This a very long option that has spaces and it should wrap.'
-}];
-var args = {
-  label: 'Ice Cream Flavors',
-  options: shortOptions
-};
-
-// eslint-disable-next-line react/prop-types
-var DefaultComponent = function DefaultComponent(_ref) {
-  var _ref$label = _ref.label,
-    label = _ref$label === void 0 ? 'Label' : _ref$label,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 250 : _ref$width,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = (0, _react.useState)([]),
-    selectedValues = _useState[0],
-    setSelectedValues = _useState[1];
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsxs)(Form.Root, {
-      children: [(0, _jsxRuntime.jsx)("div", {
-        sx: {
-          width: width
-        },
-        children: (0, _jsxRuntime.jsx)(Form.AutocompleteMulti, _extends({
-          forLabel: "form-autocompletemultiselect",
-          label: label,
-          onChange: function onChange(obj) {
-            setSelectedValues(obj);
-          }
-        }, rest))
-      }), (0, _jsxRuntime.jsxs)("div", {
-        sx: {
-          mt: 3
-        },
-        children: ["Selected value: ", selectedValues.join(', ')]
-      })]
-    })
-  });
-};
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, _extends({
-      required: true
-    }, args, {
-      placeholder: "Start typing..."
-    }))
-  });
-};
-exports.Default = Default;
-var Inline = function Inline() {
-  var customArgs = _extends({
-    isInline: true
-  }, args, {
-    showAllValues: true
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, _extends({}, customArgs))
-  });
-};
-exports.Inline = Inline;
-Inline.displayName = 'Inline';
-var WithStaticData = function WithStaticData() {
-  var customArgs = {
-    label: 'Select domains',
-    searchIcon: true,
-    required: true,
-    options: longOptions,
-    showAllValues: true,
-    placeholder: 'Select domains',
-    hasError: true,
-    errorMessage: 'Domain is required.'
-  };
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, _extends({}, customArgs))
-  });
-};
-exports.WithStaticData = WithStaticData;
-WithStaticData.displayName = 'WithStaticData';
-var WithDynamicData = function WithDynamicData() {
-  var _useState2 = (0, _react.useState)([]),
-    selectedValues = _useState2[0],
-    setSelectedValues = _useState2[1];
-  var customArgs = {
-    label: 'Select domains',
-    searchIcon: true,
-    required: true,
-    placeholder: 'Start typing...',
-    source: function source(q, populateResults) {
-      var filtered = longOptions.filter(function (option) {
-        return option.label.toLowerCase().includes(q);
-      });
-      var optionForDisplay = filtered == null ? void 0 : filtered.map(function (option) {
-        return option.label;
-      });
-      populateResults(optionForDisplay.filter(function (option) {
-        return !selectedValues.includes(option);
-      }));
-    },
-    onChange: function onChange(obj) {
-      setSelectedValues(obj);
-    }
-  };
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsxs)(Form.Root, {
-      children: [(0, _jsxRuntime.jsx)("div", {
-        sx: {
-          width: '100%'
-        },
-        children: (0, _jsxRuntime.jsx)(Form.AutocompleteMulti, _extends({
-          forLabel: "form-autocompletemultiselect",
-          label: customArgs.label,
-          onChange: function onChange(obj) {
-            setSelectedValues(obj);
-          },
-          hasError: true,
-          errorMessage: "Please select a value."
-        }, customArgs))
-      }), (0, _jsxRuntime.jsxs)("div", {
-        sx: {
-          mt: 3
-        },
-        children: ["Selected value: ", selectedValues.join(', ')]
-      })]
-    })
-  });
-};
-exports.WithDynamicData = WithDynamicData;
-WithDynamicData.displayName = 'WithDynamicDataFullSize';

package/build/system/NewForm/FormSelect.stories.js

@@ -1,171 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.WithOptionLabelAndValue = exports.WithOnChange = exports.WithGroup = exports.WithErrors = exports.IsInline = exports.Default = void 0;
-var _react = require("react");
-var Form = _interopRequireWildcard(require("."));
-var _Link = require("../Link");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["label", "width", "onChange"];
-/** @jsxImportSource theme-ui */
-/**
- * Internal dependencies
- */
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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 _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; }
-var _default = {
-  title: 'Form/Select',
-  argTypes: {
-    placeholder: {
-      type: {
-        name: 'string',
-        required: false
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    label: {
-      type: {
-        name: 'string',
-        required: false
-      },
-      control: {
-        type: 'text'
-      }
-    }
-  }
-};
-exports["default"] = _default;
-var options = [{
-  value: 'chocolate',
-  label: 'Chocolate'
-}, {
-  value: 'strawberry',
-  label: 'Strawberry Chocolate Vanilla Chocolate Vanilla'
-}, {
-  value: 'vanilla',
-  label: 'Vanilla'
-}];
-var groupedOptions = [{
-  label: 'Group name',
-  options: options
-}, {
-  label: 'Another Group name',
-  options: options
-}];
-
-// eslint-disable-next-line react/prop-types
-var DefaultComponent = function DefaultComponent(_ref) {
-  var _ref$label = _ref.label,
-    label = _ref$label === void 0 ? 'Label' : _ref$label,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 250 : _ref$width,
-    onChange = _ref.onChange,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)("p", {
-      children: ["This is a simple wrapper at the top of a browser default select component. This component should be used for situations where you have up to ", (0, _jsxRuntime.jsx)("strong", {
-        children: "15 options"
-      }), ". If you need to use a auto-complete, searchable solution, please use another component with a typeahead capability."]
-    }), (0, _jsxRuntime.jsxs)("p", {
-      children: ["This component was heavily inspired by the", ' ', (0, _jsxRuntime.jsxs)(_Link.Link, {
-        href: "https://designsystem.digital.gov/components/select/",
-        target: "_blank",
-        rel: "noreferrer",
-        children: [' ', "U.S. Web Design System (USWDS) Select component"]
-      }), "."]
-    }), (0, _jsxRuntime.jsx)(Form.Root, {
-      children: (0, _jsxRuntime.jsx)("div", {
-        sx: {
-          width: width
-        },
-        children: (0, _jsxRuntime.jsx)(Form.Select, _extends({
-          forLabel: "form-select",
-          label: label,
-          onChange: onChange
-        }, rest))
-      })
-    })]
-  });
-};
-var Default = DefaultComponent.bind({});
-exports.Default = Default;
-Default.args = {
-  placeholder: '- Select -',
-  required: true,
-  options: options
-};
-var WithErrors = DefaultComponent.bind({});
-exports.WithErrors = WithErrors;
-WithErrors.args = {
-  placeholder: '- Select -',
-  required: true,
-  hasError: true,
-  errorMessage: 'This is an error message',
-  options: options
-};
-var WithGroup = DefaultComponent.bind({});
-exports.WithGroup = WithGroup;
-WithGroup.args = {
-  label: 'Group Label',
-  options: [].concat(options, groupedOptions)
-};
-var IsInline = DefaultComponent.bind({});
-exports.IsInline = IsInline;
-IsInline.args = {
-  label: 'Inline Select',
-  isInline: true,
-  width: '100%',
-  options: groupedOptions
-};
-var WithOptionLabelAndValue = DefaultComponent.bind({});
-exports.WithOptionLabelAndValue = WithOptionLabelAndValue;
-WithOptionLabelAndValue.args = {
-  label: 'Select with getOptionLabel / getOptionValue',
-  width: '100%',
-  options: options.map(function (_ref2) {
-    var label = _ref2.label,
-      value = _ref2.value;
-    return {
-      name: label,
-      id: value
-    };
-  }),
-  getOptionLabel: function getOptionLabel(option) {
-    return option.name;
-  },
-  getOptionValue: function getOptionValue(option) {
-    return option.id;
-  }
-};
-var WithOnChange = function WithOnChange() {
-  var _useState = (0, _react.useState)(null),
-    option = _useState[0],
-    setOption = _useState[1];
-  var onChange = (0, _react.useCallback)(function (val, event) {
-    return setOption({
-      obj: val,
-      eventValue: event.target.value
-    });
-  });
-  var args = {
-    label: 'Select with onChange',
-    placeholder: '- Select -',
-    width: '100%',
-    onChange: onChange,
-    options: [].concat(options, groupedOptions)
-  };
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsx)(DefaultComponent, _extends({
-      onChange: onChange
-    }, args)), option && (0, _jsxRuntime.jsxs)("p", {
-      children: ["Object to JSON: ", JSON.stringify(option.obj)]
-    }), option && (0, _jsxRuntime.jsxs)("p", {
-      children: ["Original Event Value: ", option.eventValue]
-    })]
-  });
-};
-exports.WithOnChange = WithOnChange;

package/build/system/Notification/Notification.js

@@ -1,97 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Notification = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _md = require("react-icons/md");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ = require("../");
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-var Notification = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var title = _ref.title,
-    body = _ref.body,
-    _ref$status = _ref.status,
-    status = _ref$status === void 0 ? 'success' : _ref$status,
-    onClose = _ref.onClose;
-  return (0, _jsxRuntime.jsxs)(_.Card, {
-    role: "alert",
-    className: "vip-notification-component",
-    sx: {
-      boxShadow: 'medium',
-      width: 320,
-      position: 'relative',
-      variant: "notification." + status
-    },
-    ref: forwardRef,
-    children: [(0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
-      children: "Alert,"
-    }), (0, _jsxRuntime.jsxs)(_.Flex, {
-      sx: {
-        alignItems: 'center'
-      },
-      children: [status === 'error' ? (0, _jsxRuntime.jsx)(_md.MdError, {
-        sx: {
-          color: 'error',
-          flex: '0 0 auto'
-        },
-        "aria-hidden": "true"
-      }) : (0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
-        sx: {
-          color: 'success',
-          flex: '0 0 auto'
-        },
-        "aria-hidden": "true"
-      }), (0, _jsxRuntime.jsxs)(_.Box, {
-        sx: {
-          flex: '1 1 auto',
-          ml: 3
-        },
-        children: [(0, _jsxRuntime.jsx)("p", {
-          sx: {
-            my: 0,
-            color: 'heading',
-            fontWeight: 'bold'
-          },
-          children: title
-        }), body && (0, _jsxRuntime.jsx)(_.Text, {
-          sx: {
-            mb: 0,
-            mt: 1
-          },
-          children: body
-        })]
-      })]
-    }), onClose && (0, _jsxRuntime.jsx)(_.Button, {
-      onClick: onClose,
-      variant: "icon",
-      sx: {
-        color: 'muted',
-        position: 'absolute',
-        top: 2,
-        right: 2
-      },
-      "aria-hidden": "true",
-      children: (0, _jsxRuntime.jsx)(_md.MdClose, {})
-    })]
-  });
-});
-exports.Notification = Notification;
-Notification.displayName = 'Notification';
-Notification.propTypes = {
-  title: _propTypes["default"].node,
-  body: _propTypes["default"].node,
-  status: _propTypes["default"].string,
-  onClose: _propTypes["default"].func
-};

package/build/system/Notification/Notification.stories.js

@@ -1,29 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Error = exports.Default = void 0;
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Notification',
-  component: _.Notification
-};
-exports["default"] = _default;
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Notification, {
-    title: "Awesome!",
-    body: "Your message has been sent successfully."
-  });
-};
-exports.Default = Default;
-var Error = function Error() {
-  return (0, _jsxRuntime.jsx)(_.Notification, {
-    status: "error",
-    title: "Snag!",
-    body: "Your message could not be sent."
-  });
-};
-exports.Error = Error;

package/build/system/Notification/index.js

@@ -1,5 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-var _Notification = require("./Notification");
-exports.Notification = _Notification.Notification;

package/build/system/OptionRow/OptionRow.stories.js

@@ -1,64 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = exports.Alternative = void 0;
-var _bi = require("react-icons/bi");
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/**
- * External dependencies
- */
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'OptionRow',
-  component: _.OptionRow
-}; // eslint-disable-next-line react/prop-types
-exports["default"] = _default;
-var Base = function Base(_ref) {
-  var variant = _ref.variant;
-  return (0, _jsxRuntime.jsxs)(_.Box, {
-    children: [(0, _jsxRuntime.jsx)(_.OptionRow, {
-      image: (0, _jsxRuntime.jsx)(_bi.BiAddToQueue, {
-        size: 24
-      }),
-      label: "Option Row 1",
-      subTitle: "Mostly used to link off to other pages.",
-      as: "a",
-      href: "http://google.com/",
-      variant: variant
-    }), (0, _jsxRuntime.jsx)(_.OptionRow, {
-      image: (0, _jsxRuntime.jsx)(_bi.BiCalendarHeart, {
-        size: 24
-      }),
-      label: "Option Row 2",
-      subTitle: "Mostly used to link off to other pages.",
-      as: "a",
-      href: "http://google.com/",
-      order: 2,
-      variant: variant
-    }), (0, _jsxRuntime.jsx)(_.OptionRow, {
-      image: (0, _jsxRuntime.jsx)(_bi.BiBellMinus, {
-        size: 24
-      }),
-      label: "Custom heading HTML h2",
-      subTitle: "Use the variant prop to adjust the heading structure",
-      as: "a",
-      href: "http://google.com/",
-      titleVariant: "h2",
-      meta: "",
-      variant: variant
-    })]
-  });
-};
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(Base, {});
-};
-exports.Default = Default;
-var Alternative = function Alternative() {
-  return (0, _jsxRuntime.jsx)(Base, {
-    variant: "alt"
-  });
-};
-exports.Alternative = Alternative;

package/build/system/Progress/Progress.stories.js

@@ -1,36 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Progress',
-  component: _.Progress
-};
-exports["default"] = _default;
-var Default = function Default() {
-  var _React$useState = _react["default"].useState(0),
-    counter = _React$useState[0],
-    setCounter = _React$useState[1];
-  var steps = ['Downloading Data', 'Importing Data...', 'Finalizing', 'Done'];
-  (0, _react.useEffect)(function () {
-    setTimeout(function () {
-      if (counter < steps.length - 1) {
-        setCounter(counter + 1);
-      }
-    }, 2000);
-  }, [counter, setCounter]);
-  return (0, _jsxRuntime.jsx)(_.Progress, {
-    forLabel: "Update site progress",
-    steps: steps,
-    activeStep: counter
-  });
-};
-exports.Default = Default;