@carbon/ibm-products 1.34.1 → 1.35.0

package/es/components/CreateFullPage/CreateFullPageStep.js

@@ -3,13 +3,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "subtitle", "description", "disableSubmit", "includeStep", "introStep", "title", "hasFieldset", "fieldsetLegendText", "onNext", "onMount", "secondaryLabel"];
-
 /**
  * Copyright IBM Corp. 2021, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -19,38 +19,35 @@ import { StepsContext, StepNumberContext } from './CreateFullPage';
 import { usePreviousValue, useRetrieveStepData } from '../../global/js/hooks';
 import pconsole from '../../global/js/utils/pconsole';
 var componentName = 'CreateFullPageStep';
-var blockClass = "".concat(pkg.prefix, "--create-full-page__step"); // Default values for props
+var blockClass = "".concat(pkg.prefix, "--create-full-page__step");
 
+// Default values for props
 var defaults = {
   includeStep: true
 };
 export var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _cx;
-
   var children = _ref.children,
-      className = _ref.className,
-      subtitle = _ref.subtitle,
-      description = _ref.description,
-      disableSubmit = _ref.disableSubmit,
-      _ref$includeStep = _ref.includeStep,
-      includeStep = _ref$includeStep === void 0 ? defaults.includeStep : _ref$includeStep,
-      introStep = _ref.introStep,
-      title = _ref.title,
-      hasFieldset = _ref.hasFieldset,
-      fieldsetLegendText = _ref.fieldsetLegendText,
-      onNext = _ref.onNext,
-      onMount = _ref.onMount,
-      secondaryLabel = _ref.secondaryLabel,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    className = _ref.className,
+    subtitle = _ref.subtitle,
+    description = _ref.description,
+    disableSubmit = _ref.disableSubmit,
+    _ref$includeStep = _ref.includeStep,
+    includeStep = _ref$includeStep === void 0 ? defaults.includeStep : _ref$includeStep,
+    introStep = _ref.introStep,
+    title = _ref.title,
+    hasFieldset = _ref.hasFieldset,
+    fieldsetLegendText = _ref.fieldsetLegendText,
+    onNext = _ref.onNext,
+    onMount = _ref.onMount,
+    secondaryLabel = _ref.secondaryLabel,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var stepsContext = useContext(StepsContext);
   var stepNumber = useContext(StepNumberContext);
-
   var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      shouldIncludeStep = _useState2[0],
-      setShouldIncludeStep = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldIncludeStep = _useState2[0],
+    setShouldIncludeStep = _useState2[1];
   var previousState = usePreviousValue({
     currentStep: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
   });
@@ -61,9 +58,10 @@ export var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
     shouldIncludeStep: shouldIncludeStep,
     secondaryLabel: secondaryLabel,
     title: title
-  }); // This useEffect reports back the onMount value so that they can be used
-  // in the appropriate custom hooks.
+  });
 
+  // This useEffect reports back the onMount value so that they can be used
+  // in the appropriate custom hooks.
   useEffect(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
       stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnMount(onMount);
@@ -71,9 +69,10 @@ export var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [onMount, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
   useEffect(function () {
     setShouldIncludeStep(includeStep);
-  }, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit and onNext values to the
-  // steps container context so that it can manage the 'Next' button appropriately.
+  }, [includeStep, stepsContext, title]);
 
+  // Whenever we are the current step, supply our disableSubmit and onNext values to the
+  // steps container context so that it can manage the 'Next' button appropriately.
   useEffect(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
       stepsContext.setIsDisabled(disableSubmit);
@@ -93,30 +92,27 @@ export var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
     legendText: fieldsetLegendText,
     className: "".concat(blockClass, "-fieldset")
   }, children) : children) : pconsole.warn("You have tried using a ".concat(componentName, " component outside of a CreateFullPage. This is not allowed. ").concat(componentName, "s should always be children of the CreateFullPage"));
-}); // Return a placeholder if not released and not enabled by feature flag
+});
 
+// Return a placeholder if not released and not enabled by feature flag
 CreateFullPageStep = pkg.checkComponentEnabled(CreateFullPageStep, componentName);
 CreateFullPageStep.propTypes = {
   /**
    * Content that shows in the CreateFullPage step
    */
   children: PropTypes.node,
-
   /**
    * Sets an optional className to be added to the CreateFullPage step
    */
   className: PropTypes.string,
-
   /**
    * Sets an optional description on the progress step component
    */
   description: PropTypes.string,
-
   /**
    * This will conditionally disable the submit button in the multi step CreateFullPage
    */
   disableSubmit: PropTypes.bool,
-
   /**
    * This is the legend text that appears above a fieldset html element for accessibility purposes. It is required when the optional `hasFieldset` prop is provided to a FullPageStep.
    */
@@ -124,46 +120,38 @@ CreateFullPageStep.propTypes = {
     var hasFieldset = _ref2.hasFieldset;
     return hasFieldset === true;
   }),
-
   /**
    * This optional prop will render your form content inside of a fieldset html element
    */
   hasFieldset: PropTypes.bool,
-
   /**
    * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
    * steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
    */
   includeStep: PropTypes.bool,
-
   /**
    * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
    */
   introStep: PropTypes.bool,
-
   /**
    * Optional function to be called on initial mount of a step.
    * For example, this can be used to fetch data that is required on a particular step.
    */
   onMount: PropTypes.func,
-
   /**
    * Optional function to be called on a step change.
    * For example, this can be used to validate input fields before proceeding to the next step.
    * This function can _optionally_ return a promise that is either resolved or rejected and the CreateFullPage will handle the submitting state of the next button.
    */
   onNext: PropTypes.func,
-
   /**
    * Sets the optional secondary label on the progress step component
    */
   secondaryLabel: PropTypes.string,
-
   /**
    * Sets an optional subtitle on the progress step component
    */
   subtitle: PropTypes.string,
-
   /**
    * Sets the title text for a create full page step
    */

package/es/components/CreateFullPage/index.js

@@ -4,5 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 export { CreateFullPage } from './CreateFullPage';
 export { CreateFullPageStep } from './CreateFullPageStep';

package/es/components/CreateInfluencer/CreateInfluencer.js

@@ -4,46 +4,46 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 // Import portions of React that are needed.
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ProgressIndicator, ProgressStep } from 'carbon-components-react';
 import '../../global/js/utils/props-helper';
-import { pkg } from '../../settings'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { pkg } from '../../settings';
 
+// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--create-influencer");
 var componentName = 'CreateInfluencer';
 export var CreateInfluencer = function CreateInfluencer(_ref) {
   var className = _ref.className,
-      currentStep = _ref.currentStep,
-      stepData = _ref.stepData;
-
+    currentStep = _ref.currentStep,
+    stepData = _ref.stepData;
   var getNumberOfDynamicStepsBeforeCurrentStep = function getNumberOfDynamicStepsBeforeCurrentStep(array, key) {
     var dynamicSteps = [];
     array.forEach(function (item, index) {
       var _array$index;
-
       if (((_array$index = array[index]) === null || _array$index === void 0 ? void 0 : _array$index[key]) === false && index <= currentStep - 1) {
         dynamicSteps.push(item);
       }
     });
     return dynamicSteps.length;
-  }; // renders the step progression components in the left influencer area
-
+  };
 
+  // renders the step progression components in the left influencer area
   var renderProgressSteps = function renderProgressSteps() {
     var _stepData$, _stepData$2;
-
     var extractedSteps = stepData === null || stepData === void 0 ? void 0 : stepData.filter(function (item) {
       return !(item !== null && item !== void 0 && item.introStep);
     });
     var progressSteps = extractedSteps === null || extractedSteps === void 0 ? void 0 : extractedSteps.filter(function (item) {
       return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
-    }); // To get the ProgressIndicator's `currentIndex`, accounting for dynamic steps,
+    });
+
+    // To get the ProgressIndicator's `currentIndex`, accounting for dynamic steps,
     // we need to subtract the number of !shouldIncludeStep/s before the current step
     // which we get from `getNumberOfDynamicStepsBeforeCurrentStep()`
-
     var totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__left-nav")
@@ -51,6 +51,7 @@ export var CreateInfluencer = function CreateInfluencer(_ref) {
       currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.introStep ? currentStep - totalDynamicSteps - 2 // minus 2 because we need to account for the intro step in addition to `currentIndex` being 0 index based and our steps being 1 index based
       : currentStep - totalDynamicSteps - 1 // minus 1 because ProgressIndicator currentIndex prop is 0 index based, but our steps are 1 index based
       ,
+
       spaceEqually: true,
       vertical: true,
       className: cx("".concat(blockClass, "__progress-indicator"))
@@ -62,25 +63,23 @@ export var CreateInfluencer = function CreateInfluencer(_ref) {
       });
     })));
   };
-
   return /*#__PURE__*/React.createElement("div", {
     className: cx(blockClass, className)
   }, renderProgressSteps());
-}; // The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
+};
 
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
 CreateInfluencer.displayName = componentName;
 CreateInfluencer.propTypes = {
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
-
   /**
    * Used to mark the current step on the ProgressIndicator component
    */
   currentStep: PropTypes.number.isRequired,
-
   /**
    * The step data that renders the progress items
    */

package/es/components/CreateInfluencer/index.js

@@ -4,4 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 export { CreateInfluencer } from './CreateInfluencer';

package/es/components/CreateModal/CreateModal.js

@@ -1,51 +1,49 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "children", "onRequestClose", "onRequestSubmit", "open", "title", "subtitle", "description", "secondaryButtonText", "primaryButtonText", "disableSubmit", "selectorPrimaryFocus"];
-
 /**
  * Copyright IBM Corp. 2021, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 // Import portions of React that are needed.
-import React from 'react'; // Carbon and package components we use.
+import React from 'react';
 
+// Carbon and package components we use.
 import { ComposedModal, ModalHeader, ModalFooter, ModalBody, Form, Button } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 var componentName = 'CreateModal';
-var blockClass = "".concat(pkg.prefix, "--create-modal"); // Custom PropType validator which checks and ensures that the children property has no more than 4 nodes
+var blockClass = "".concat(pkg.prefix, "--create-modal");
 
+// Custom PropType validator which checks and ensures that the children property has no more than 4 nodes
 var isValidChildren = function isValidChildren() {
   return function (_ref) {
     var children = _ref.children;
-
     if (children && children.length > 4) {
       throw new Error('The `CreateModal` component does not take more than 4 nodes as children. This is to ensure that the modal does not overflow. Please remove 1 or more nodes.');
     }
-
     return;
   };
 };
-
 export var CreateModal = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var className = _ref2.className,
-      children = _ref2.children,
-      onRequestClose = _ref2.onRequestClose,
-      onRequestSubmit = _ref2.onRequestSubmit,
-      open = _ref2.open,
-      title = _ref2.title,
-      subtitle = _ref2.subtitle,
-      description = _ref2.description,
-      secondaryButtonText = _ref2.secondaryButtonText,
-      primaryButtonText = _ref2.primaryButtonText,
-      disableSubmit = _ref2.disableSubmit,
-      selectorPrimaryFocus = _ref2.selectorPrimaryFocus,
-      rest = _objectWithoutProperties(_ref2, _excluded);
-
+    children = _ref2.children,
+    onRequestClose = _ref2.onRequestClose,
+    onRequestSubmit = _ref2.onRequestSubmit,
+    open = _ref2.open,
+    title = _ref2.title,
+    subtitle = _ref2.subtitle,
+    description = _ref2.description,
+    secondaryButtonText = _ref2.secondaryButtonText,
+    primaryButtonText = _ref2.primaryButtonText,
+    disableSubmit = _ref2.disableSubmit,
+    selectorPrimaryFocus = _ref2.selectorPrimaryFocus,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
     selectorPrimaryFocus: selectorPrimaryFocus,
     className: cx(blockClass, className),
@@ -79,68 +77,58 @@ export var CreateModal = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     onClick: onRequestSubmit,
     disabled: disableSubmit
   }, primaryButtonText)));
-}); // Return a placeholder if not released and not enabled by feature flag
+});
 
+// Return a placeholder if not released and not enabled by feature flag
 CreateModal = pkg.checkComponentEnabled(CreateModal, componentName);
 CreateModal.propTypes = {
   /**
    * Children refers to all form items within a form inside of the modal's body.
    */
   children: isValidChildren(),
-
   /**
    * Specify an optional className to be applied to the modal root node
    */
   className: PropTypes.string,
-
   /**
    * The description of the CreateModal serves to provide more information about the modal.
    */
   description: PropTypes.node.isRequired,
-
   /**
    * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
    * Returning `true` prevents the primary button from being clicked until required fields are completed.
    */
   disableSubmit: PropTypes.bool,
-
   /**
    * Specifies an optional handler which is called when the CreateModal
    * is closed.
    */
   onRequestClose: PropTypes.func,
-
   /**
    * Specifies an optional handler which is called when the CreateModal
    * primary button is pressed.
    */
   onRequestSubmit: PropTypes.func,
-
   /**
    * Specifies whether the CreateModal is open or not.
    */
   open: PropTypes.bool,
-
   /**
    * Specifies the primary button's text in the modal.
    */
   primaryButtonText: PropTypes.string.isRequired,
-
   /**
    * Specifies the secondary button's text in the modal.
    */
   secondaryButtonText: PropTypes.string.isRequired,
-
   /**
    * Specifies which DOM element in the form should be focused.
    */
   selectorPrimaryFocus: PropTypes.node.isRequired,
-
   /**
    * The subtitle of the CreateModal is optional and serves to provide more information about the modal.
    */
   subtitle: PropTypes.node,
-
   /**
    * The title of the CreateModal is usually the product or service name.
    */

package/es/components/CreateModal/index.js

@@ -4,5 +4,7 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+
 // NOTE: An index file is most useful when you have multiple components
+
 export { CreateModal } from './CreateModal';

package/es/components/CreateSidePanel/CreateSidePanel.js

@@ -2,52 +2,53 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "children", "disableSubmit", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "selectorPageContent", "selectorPrimaryFocus", "subtitle", "title"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /**
  * Copyright IBM Corp. 2021, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 // Import portions of React that are needed.
-import React from 'react'; // Other standard imports.
+import React from 'react';
 
+// Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
-import { getDevtoolsProps } from '../../global/js/utils/devtools'; // Carbon and package components we use.
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
 
+// Carbon and package components we use.
 import { Form } from 'carbon-components-react';
-import { SidePanel } from '../SidePanel'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { SidePanel } from '../SidePanel';
 
+// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--create-side-panel");
-var componentName = 'CreateSidePanel'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
+var componentName = 'CreateSidePanel';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
  * This is an example component to show relevant conventions and usage.
  */
-
 export var CreateSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
-      children = _ref.children,
-      disableSubmit = _ref.disableSubmit,
-      formTitle = _ref.formTitle,
-      formDescription = _ref.formDescription,
-      onRequestClose = _ref.onRequestClose,
-      onRequestSubmit = _ref.onRequestSubmit,
-      open = _ref.open,
-      primaryButtonText = _ref.primaryButtonText,
-      secondaryButtonText = _ref.secondaryButtonText,
-      selectorPageContent = _ref.selectorPageContent,
-      selectorPrimaryFocus = _ref.selectorPrimaryFocus,
-      subtitle = _ref.subtitle,
-      title = _ref.title,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    children = _ref.children,
+    disableSubmit = _ref.disableSubmit,
+    formTitle = _ref.formTitle,
+    formDescription = _ref.formDescription,
+    onRequestClose = _ref.onRequestClose,
+    onRequestSubmit = _ref.onRequestSubmit,
+    open = _ref.open,
+    primaryButtonText = _ref.primaryButtonText,
+    secondaryButtonText = _ref.secondaryButtonText,
+    selectorPageContent = _ref.selectorPageContent,
+    selectorPrimaryFocus = _ref.selectorPrimaryFocus,
+    subtitle = _ref.subtitle,
+    title = _ref.title,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var actions = [{
     label: primaryButtonText,
     onClick: function onClick(event) {
@@ -92,76 +93,62 @@ CreateSidePanel.propTypes = {
    * Sets the body content of the create side panel
    */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
-
   /**
    * The description of the CreateSidePanel serves to provide more information about the form within the panel.
    */
   description: PropTypes.node,
-
   /**
    * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
    * Returning `true` prevents the primary button from being clicked until required fields are completed.
    */
   disableSubmit: PropTypes.bool,
-
   /**
    * Specifies an optional field that provides a additional context for a form
    */
   formDescription: PropTypes.node,
-
   /**
    * Specifies a required field that provides a title for a form
    */
   formTitle: PropTypes.node.isRequired,
-
   /**
    * Specifies an optional handler which is called when the CreateSidePanel
    * is closed.
    */
   onRequestClose: PropTypes.func,
-
   /**
    * Specifies an optional handler which is called when the CreateSidePanel
    * primary button is pressed.
    */
   onRequestSubmit: PropTypes.func,
-
   /**
    * Specifies whether the CreateSidePanel is open or not.
    */
   open: PropTypes.bool,
-
   /**
    * Specifies the primary button's text in the modal.
    */
   primaryButtonText: PropTypes.string.isRequired,
-
   /**
    * Specifies the secondary button's text in the modal.
    */
   secondaryButtonText: PropTypes.string.isRequired,
-
   /**
    * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
    * This prop is required when using the `slideIn` variant of the side panel.
    */
   selectorPageContent: PropTypes.string.isRequired,
-
   /**
    * Specifies which DOM element in the form should be focused.
    */
   selectorPrimaryFocus: PropTypes.node.isRequired,
-
   /**
    * The subtitle of the CreateSidePanel is optional and serves to provide more information about the modal.
    */
   subtitle: PropTypes.node,
-
   /**
    * The title of the CreateSidePanel is usually the product or service name.
    */

package/es/components/CreateSidePanel/index.js

@@ -4,4 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 export { CreateSidePanel } from './CreateSidePanel';