@carbon/ibm-products 2.27.0 → 2.28.0-alpha.4

package/lib/components/CreateSidePanel/CreateSidePanel.js

@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../node_modules/prop-types/index.js');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var settings = require('../../settings.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var react = require('@carbon/react');
@@ -22,6 +22,7 @@ var SidePanel = require('../SidePanel/SidePanel.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["className", "children", "disableSubmit", "formTitle", "formDescription", "id", "onRequestClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "selectorPageContent", "selectorPrimaryFocus", "subtitle", "title"];
 
@@ -79,7 +80,7 @@ exports.CreateSidePanel = /*#__PURE__*/React__default["default"].forwardRef(func
     placement: "right",
     slideIn: true,
     animateTitle: false,
-    className: index["default"](blockClass, className),
+    className: cx__default["default"](blockClass, className),
     size: "md",
     actions: actions
   }), /*#__PURE__*/React__default["default"].createElement("h3", {
@@ -98,73 +99,73 @@ exports.CreateSidePanel.propTypes = {
   /**
    * Sets the body content of the create side panel
    */
-  children: index$1["default"].oneOfType([index$1["default"].arrayOf(index$1["default"].node), index$1["default"].node]).isRequired,
+  children: index["default"].oneOfType([index["default"].arrayOf(index["default"].node), index["default"].node]).isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * The description of the CreateSidePanel serves to provide more information about the form within the panel.
    */
-  description: index$1["default"].node,
+  description: index["default"].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: index$1["default"].bool,
+  disableSubmit: index["default"].bool,
   /**
    * Specifies an optional field that provides a additional context for a form
    */
-  formDescription: index$1["default"].node,
+  formDescription: index["default"].node,
   /**
    * Specifies a required field that provides a title for a form
    */
-  formTitle: index$1["default"].node.isRequired,
+  formTitle: index["default"].node.isRequired,
   /**
    * Unique identifier
    */
-  id: index$1["default"].string,
+  id: index["default"].string,
   /**
    * Specifies an optional handler which is called when the CreateSidePanel
    * is closed.
    */
-  onRequestClose: index$1["default"].func,
+  onRequestClose: index["default"].func,
   /**
    * Specifies an optional handler which is called when the CreateSidePanel
    * primary button is pressed.
    */
-  onRequestSubmit: index$1["default"].func,
+  onRequestSubmit: index["default"].func,
   /**
    * Specifies whether the CreateSidePanel is open or not.
    */
-  open: index$1["default"].bool,
+  open: index["default"].bool,
   /**
    * Specifies the primary button's text in the modal.
    */
-  primaryButtonText: index$1["default"].string.isRequired,
+  primaryButtonText: index["default"].string.isRequired,
   /**
    * Specifies the secondary button's text in the modal.
    */
-  secondaryButtonText: index$1["default"].string.isRequired,
+  secondaryButtonText: index["default"].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: index$1["default"].string.isRequired,
+  selectorPageContent: index["default"].string.isRequired,
   /**
    * Specifies which DOM element in the form should be focused.
    */
-  selectorPrimaryFocus: index$1["default"].node.isRequired,
+  selectorPrimaryFocus: index["default"].node.isRequired,
   /**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
    */
-  slug: index$1["default"].node,
+  slug: index["default"].node,
   /**
    * The subtitle of the CreateSidePanel is optional and serves to provide more information about the modal.
    */
-  subtitle: index$1["default"].node,
+  subtitle: index["default"].node,
   /**
    * The title of the CreateSidePanel is usually the product or service name.
    */
-  title: index$1["default"].node.isRequired
+  title: index["default"].node.isRequired
 };

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../node_modules/prop-types/index.js');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var react = require('@carbon/react');
 var wrapFocus = require('../../global/js/utils/wrapFocus.js');
 var TearsheetShell = require('../Tearsheet/TearsheetShell.js');
@@ -30,8 +30,9 @@ var CreateInfluencer = require('../CreateInfluencer/CreateInfluencer.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "firstFocusElement", "submitButtonText", "title", "verticalPosition"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "firstFocusElement", "slug", "submitButtonText", "title", "verticalPosition"];
 var componentName = 'CreateTearsheet';
 var blockClass = "".concat(settings.pkg.prefix, "--tearsheet-create");
 
@@ -64,6 +65,7 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onRequestSubmit = _ref.onRequestSubmit,
     open = _ref.open,
     firstFocusElement = _ref.firstFocusElement,
+    slug = _ref.slug,
     submitButtonText = _ref.submitButtonText,
     title = _ref.title,
     _ref$verticalPosition = _ref.verticalPosition,
@@ -198,7 +200,7 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement(TearsheetShell.TearsheetShell, _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
     actions: createTearsheetActions,
-    className: index["default"](blockClass, className),
+    className: cx__default["default"](blockClass, className),
     description: description,
     hasCloseIcon: false,
     influencer: /*#__PURE__*/React__default["default"].createElement(CreateInfluencer.CreateInfluencer, {
@@ -211,6 +213,7 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClose: onClose,
     open: open,
     size: "wide",
+    slug: slug,
     title: title,
     verticalPosition: verticalPosition,
     ref: ref
@@ -262,70 +265,74 @@ exports.CreateTearsheet.propTypes = {
   /**
    * The back button text
    */
-  backButtonText: index$1["default"].string.isRequired,
+  backButtonText: index["default"].string.isRequired,
   /**
    * The cancel button text
    */
-  cancelButtonText: index$1["default"].string.isRequired,
+  cancelButtonText: index["default"].string.isRequired,
   /**
    * The main content of the tearsheet
    */
-  children: index$1["default"].node,
+  children: index["default"].node,
   /**
    * An optional class or classes to be added to the outermost element.
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
-  description: index$1["default"].node,
+  description: index["default"].node,
   /**
    * Specifies elements to focus on first on render.
    */
-  firstFocusElement: index$1["default"].string,
+  firstFocusElement: index["default"].string,
   /**
    * Used to set the size of the influencer
    */
-  influencerWidth: index$1["default"].oneOf(['narrow', 'wide']),
+  influencerWidth: index["default"].oneOf(['narrow', 'wide']),
   /**
    * This can be used to open the component to a step other than the first step.
    * For example, a create flow was previously in progress, data was saved, and
    * is now being completed.
    */
-  initialStep: index$1["default"].number,
+  initialStep: index["default"].number,
   /**
    * A label for the tearsheet, displayed in the header area of the tearsheet
    * to maintain context for the tearsheet (e.g. as the title changes from page
    * to page of a multi-page task).
    */
-  label: index$1["default"].node,
+  label: index["default"].node,
   /**
    * The next button text
    */
-  nextButtonText: index$1["default"].string.isRequired,
+  nextButtonText: index["default"].string.isRequired,
   /**
    * An optional handler that is called when the user closes the tearsheet (by
    * clicking the close button, if enabled, or clicking outside, if enabled).
    * Returning `false` here prevents the modal from closing.
    */
-  onClose: index$1["default"].func,
+  onClose: index["default"].func,
   /**
    * Specify a handler for submitting the multi step tearsheet (final step).
    * This function can _optionally_ return a promise that is either resolved or rejected and the CreateTearsheet will handle the submitting state of the create button.
    */
-  onRequestSubmit: index$1["default"].func.isRequired,
+  onRequestSubmit: index["default"].func.isRequired,
   /**
    * Specifies whether the tearsheet is currently open.
    */
-  open: index$1["default"].bool,
+  open: index["default"].bool,
+  /**
+   *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
+   */
+  slug: index["default"].node,
   /**
    * The submit button text
    */
-  submitButtonText: index$1["default"].string.isRequired,
+  submitButtonText: index["default"].string.isRequired,
   /**
    * The main title of the tearsheet, displayed in the header area.
    */
-  title: index$1["default"].node,
+  title: index["default"].node,
   /**
    * The position of the top of tearsheet in the viewport. The 'normal'
    * position (the default) is a short distance down from the top of the
@@ -333,7 +340,7 @@ exports.CreateTearsheet.propTypes = {
    * from below. The 'lower' position provides a little extra room at the top
    * to allow an action bar navigation or breadcrumbs to also show through.
    */
-  verticalPosition: index$1["default"].oneOf(['normal', 'lower'])
+  verticalPosition: index["default"].oneOf(['normal', 'lower'])
 };
 
 exports.StepNumberContext = StepNumberContext;

package/lib/components/CreateTearsheet/CreateTearsheetDivider.js

@@ -11,13 +11,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../node_modules/prop-types/index.js');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var settings = require('../../settings.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["className"];
 var componentName = 'CreateTearsheetDivider';
@@ -27,7 +28,7 @@ exports.CreateTearsheetDivider = /*#__PURE__*/React.forwardRef(function (_ref, r
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
-    className: index["default"](blockClass, className)
+    className: cx__default["default"](blockClass, className)
   }));
 });
 
@@ -37,5 +38,5 @@ exports.CreateTearsheetDivider.propTypes = {
   /**
    * Sets an optional className to be added to the tearsheet step
    */
-  className: index$1["default"].string
+  className: index["default"].string
 };

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../node_modules/prop-types/index.js');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var react = require('@carbon/react');
 var CreateTearsheet = require('./CreateTearsheet.js');
 var settings = require('../../settings.js');
@@ -23,6 +23,7 @@ var useRetrieveStepData = require('../../global/js/hooks/useRetrieveStepData.js'
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["children", "className", "description", "disableSubmit", "fieldsetLegendText", "hasFieldset", "includeStep", "introStep", "invalid", "onMount", "onNext", "onPrevious", "secondaryLabel", "subtitle", "title"];
 var componentName = 'CreateTearsheetStep';
@@ -109,7 +110,7 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     return null;
   };
   return stepsContext ? /*#__PURE__*/React__default["default"].createElement(react.Grid, _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: index["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep))),
+    className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep))),
     ref: ref
   }), /*#__PURE__*/React__default["default"].createElement(react.Column, {
     xlg: 12,
@@ -134,25 +135,25 @@ exports.CreateTearsheetStep.propTypes = {
   /**
    * Content that shows in the tearsheet step
    */
-  children: index$1["default"].node,
+  children: index["default"].node,
   /**
    * Sets an optional className to be added to the tearsheet step
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * Sets an optional description on the step component
    */
-  description: index$1["default"].node,
+  description: index["default"].node,
   /**
    * This will conditionally disable the submit button in the multi step Tearsheet
    */
-  disableSubmit: index$1["default"].bool,
+  disableSubmit: index["default"].bool,
   /**
    * This is the required legend text that appears above a fieldset html element for accessibility purposes.
    * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
    * Otherwise, use CSS to hide/remove this label text.
    */
-  fieldsetLegendText: index$1["default"].string.isRequired.if(function (_ref2) {
+  fieldsetLegendText: index["default"].string.isRequired.if(function (_ref2) {
     var hasFieldset = _ref2.hasFieldset;
     return !!hasFieldset;
   }),
@@ -161,45 +162,45 @@ exports.CreateTearsheetStep.propTypes = {
    * and is defaulted to true.
    * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's step content.
    */
-  hasFieldset: index$1["default"].bool,
+  hasFieldset: index["default"].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: index$1["default"].bool,
+  includeStep: index["default"].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: index$1["default"].bool,
+  introStep: index["default"].bool,
   /**
    * This optional prop will indicate an error icon on the progress indicator step item
    */
-  invalid: index$1["default"].bool,
+  invalid: index["default"].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: index$1["default"].func,
+  onMount: index["default"].func,
   /**
    * Optional function to be called when you move to the next step.
    * 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 CreateTearsheet will handle the submitting state of the next button.
    */
-  onNext: index$1["default"].func,
+  onNext: index["default"].func,
   /**
    * Optional function to be called when you move to the previous step.
    */
-  onPrevious: index$1["default"].func,
+  onPrevious: index["default"].func,
   /**
    * Sets the optional secondary label on the progress step component
    */
-  secondaryLabel: index$1["default"].string,
+  secondaryLabel: index["default"].string,
   /**
    * Sets an optional subtitle on the step component
    */
-  subtitle: index$1["default"].string,
+  subtitle: index["default"].string,
   /**
    * Sets the title text for a tearsheet step
    */
-  title: index$1["default"].node.isRequired
+  title: index["default"].node.isRequired
 };

package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../node_modules/prop-types/index.js');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var react = require('@carbon/react');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
@@ -22,6 +22,7 @@ var uuidv4 = require('../../global/js/utils/uuidv4.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["children", "className", "description", "disableSubmit", "formDescription", "formTitle", "label", "open", "onRequestClose", "onRequestSubmit", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "title", "verticalPosition"];
 
@@ -67,7 +68,7 @@ exports.CreateTearsheetNarrow = /*#__PURE__*/React__default["default"].forwardRe
   return /*#__PURE__*/React__default["default"].createElement(TearsheetNarrow.TearsheetNarrow, _rollupPluginBabelHelpers["extends"]({}, rest, {
     title: title,
     description: description,
-    className: index["default"](blockClass, className),
+    className: cx__default["default"](blockClass, className),
     actions: actions,
     open: open,
     ref: ref,
@@ -80,10 +81,10 @@ exports.CreateTearsheetNarrow = /*#__PURE__*/React__default["default"].forwardRe
     verticalPosition: verticalPosition,
     role: "presentation"
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("h3", {
-    className: index["default"]("".concat(blockClass, "__form-title-text"), formTextClass),
+    className: cx__default["default"]("".concat(blockClass, "__form-title-text"), formTextClass),
     id: formTitleId
   }, formTitle), /*#__PURE__*/React__default["default"].createElement("p", {
-    className: index["default"]("".concat(blockClass, "__form-description-text"), formTextClass)
+    className: cx__default["default"]("".concat(blockClass, "__form-description-text"), formTextClass)
   }, formDescription), /*#__PURE__*/React__default["default"].createElement(react.Form, {
     className: "".concat(blockClass, "__form"),
     "aria-labelledby": formTitleId
@@ -104,65 +105,65 @@ exports.CreateTearsheetNarrow.propTypes = {
   /**
    * Provide the contents of the CreateTearsheetNarrow.
    */
-  children: index$1["default"].node.isRequired,
+  children: index["default"].node.isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
-  description: index$1["default"].node,
+  description: index["default"].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: index$1["default"].bool,
+  disableSubmit: index["default"].bool,
   /**
    * Specifies an optional field that provides a additional context for a form
    */
-  formDescription: index$1["default"].node,
+  formDescription: index["default"].node,
   /**
    * Specifies a field that provides a title for a form
    */
-  formTitle: index$1["default"].node,
+  formTitle: index["default"].node,
   /**
    * A label for the tearsheet, displayed in the header area of the tearsheet
    * to maintain context for the tearsheet (e.g. as the title changes from page
    * to page of a multi-page task).
    */
-  label: index$1["default"].node,
+  label: index["default"].node,
   /**
    * An optional handler that is called when the user closes the tearsheet (by
    * clicking the close button, if enabled, or clicking outside, if enabled).
    * Returning `false` here prevents the modal from closing.
    */
-  onRequestClose: index$1["default"].func,
+  onRequestClose: index["default"].func,
   /**
    * Specifies an optional handler which is called when the CreateTearsheetNarrow
    * primary button is pressed.
    */
-  onRequestSubmit: index$1["default"].func,
+  onRequestSubmit: index["default"].func,
   /**
    * Specifies whether the tearsheet is currently open.
    */
-  open: index$1["default"].bool,
+  open: index["default"].bool,
   /**
    * Specifies the primary button's text in the CreateTearsheetNarrow.
    */
-  primaryButtonText: index$1["default"].string.isRequired,
+  primaryButtonText: index["default"].string.isRequired,
   /**
    * Specifies the secondary button's text in the CreateTearsheetNarrow.
    */
-  secondaryButtonText: index$1["default"].string.isRequired,
+  secondaryButtonText: index["default"].string.isRequired,
   /**
    * Specifies which DOM element in the form should be focused.
    */
-  selectorPrimaryFocus: index$1["default"].node,
+  selectorPrimaryFocus: index["default"].node,
   /**
    * The main title of the tearsheet, displayed in the header area.
    */
-  title: index$1["default"].node,
+  title: index["default"].node,
   /**
    * The position of the top of tearsheet in the viewport. The 'normal'
    * position (the default) is a short distance down from the top of the
@@ -170,5 +171,5 @@ exports.CreateTearsheetNarrow.propTypes = {
    * from below. The 'lower' position provides a little extra room at the top
    * to allow an action bar navigation or breadcrumbs to also show through.
    */
-  verticalPosition: index$1["default"].oneOf(['normal', 'lower'])
+  verticalPosition: index["default"].oneOf(['normal', 'lower'])
 };