@carbon/ibm-products 2.24.0 → 2.26.0

package/lib/components/Datagrid/utils/getInlineEditColumns.js

@@ -1,164 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.inlineEditSelectItems = exports.getInlineEditColumns = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _icons = require("@carbon/react/icons");
-/**
- * Copyright IBM Corp. 2022, 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.
- */
-
-var inlineEditSelectItems = exports.inlineEditSelectItems = [{
-  id: 'option-0',
-  icon: function icon(props) {
-    return /*#__PURE__*/_react.default.createElement(_icons.ChartColumnFloating, (0, _extends2.default)({
-      size: 16
-    }, props));
-  },
-  text: 'Column Chart'
-}, {
-  id: 'option-1',
-  icon: function icon(props) {
-    return /*#__PURE__*/_react.default.createElement(_icons.ChartBubble, (0, _extends2.default)({
-      size: 16
-    }, props));
-  },
-  text: 'Bubble Chart'
-}, {
-  id: 'option-2',
-  icon: function icon(props) {
-    return /*#__PURE__*/_react.default.createElement(_icons.ChartVennDiagram, (0, _extends2.default)({
-      size: 16
-    }, props));
-  },
-  text: 'Venn Diagram'
-}];
-var getInlineEditColumns = exports.getInlineEditColumns = function getInlineEditColumns() {
-  return [{
-    Header: 'Row Index',
-    accessor: function accessor(row, i) {
-      return i;
-    },
-    id: 'rowIndex' // id is required when accessor is a function.
-  }, {
-    Header: 'First Name',
-    accessor: 'firstName',
-    inlineEdit: {
-      type: 'text',
-      // required for including validation, this is used to set the invalid prop internally
-      validator: function validator(n) {
-        return n.length > 40;
-      },
-      // These props are passed to the Carbon component used for inline editing
-      inputProps: {
-        invalidText: 'Invalid text, character count must be less than 40'
-      }
-    }
-  }, {
-    Header: 'Last Name',
-    accessor: 'lastName',
-    inlineEdit: {
-      type: 'text',
-      // required for including validation, this is used to set the invalid prop internally
-      validator: function validator(n) {
-        return n.length > 40;
-      },
-      // These props are passed to the Carbon component used for inline editing
-      inputProps: {
-        invalidText: 'Invalid text, character count must be less than 40'
-      }
-    }
-  }, {
-    Header: 'Age',
-    accessor: 'age',
-    width: 120,
-    inlineEdit: {
-      // required for including validation, this is used to set the invalid prop internally
-      validator: function validator(n) {
-        return n && n < 18;
-      },
-      type: 'number',
-      // These props are passed to the Carbon component used for inline editing
-      inputProps: {
-        invalidText: 'Invalid number, must be 18 or greater'
-      }
-    }
-  }, {
-    Header: 'Visits',
-    accessor: 'visits',
-    width: 120,
-    inlineEdit: {
-      validator: function validator(n) {
-        return n && n < 10;
-      },
-      type: 'number',
-      inputProps: {
-        invalidText: 'Invalid number, must be 10 or greater'
-      } // These props are passed to the Carbon component used for inline editing
-    }
-  }, {
-    Header: 'Active since',
-    accessor: 'activeSince',
-    inlineEdit: {
-      type: 'date',
-      inputProps: {
-        // optionally pass props here to be passed through to Carbon's DatePicker component
-        onChange: function onChange(newDateObj, cell) {
-          console.log(newDateObj, cell);
-        },
-        dateFormat: 'd/m/Y',
-        // optionally pass props here to be passed through to Carbon's DatePickerInput component
-        datePickerInputProps: {
-          labelText: 'Change active since date'
-        }
-      }
-    }
-  }, {
-    Header: 'Chart type',
-    accessor: 'chartType',
-    inlineEdit: {
-      type: 'selection',
-      inputProps: {
-        // These props are passed to the Carbon component used for inline editing
-        items: inlineEditSelectItems,
-        onChange: function onChange(item) {
-          return console.log(item);
-        }
-      }
-    }
-  }, {
-    Header: 'Someone 2',
-    accessor: 'someone2'
-  }, {
-    Header: 'Someone 3',
-    accessor: 'someone3'
-  }, {
-    Header: 'Someone 4',
-    accessor: 'someone4'
-  }, {
-    Header: 'Someone 5',
-    accessor: 'someone5'
-  }, {
-    Header: 'Someone 6',
-    accessor: 'someone6'
-  }, {
-    Header: 'Someone 7',
-    accessor: 'someone7'
-  }, {
-    Header: 'Someone 8',
-    accessor: 'someone8'
-  }, {
-    Header: 'Someone 9',
-    accessor: 'someone9'
-  }, {
-    Header: 'Someone 10',
-    accessor: 'someone10'
-  }];
-};

package/lib/components/Datagrid/utils/handleFilterTagLabelText.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.handleFilterTagLabelText = void 0;
-/**
- * Copyright IBM Corp. 2023, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// Example usage for custom filter tag labels, in practice this
-// is where a translation service would be utilized. This
-// utility is for storybook demonstration purposes only.
-var handleFilterTagLabelText = exports.handleFilterTagLabelText = function handleFilterTagLabelText(key, value) {
-  switch (key) {
-    case 'role':
-      return "Role: ".concat(value);
-    case 'joined':
-      return "Joined: ".concat(value);
-    case 'visits':
-      return "Visits: ".concat(value);
-    case 'passwordStrength':
-      return "Password strength: ".concat(value);
-    case 'status':
-      return "Status: ".concat(value);
-    default:
-      return "".concat(key, ": ").concat(value);
-  }
-};

package/lib/components/Datagrid/utils/makeData.js

@@ -1,198 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.range = exports.newPersonWithTwoLines = exports.makeData = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _namor = _interopRequireDefault(require("namor"));
-var _getInlineEditColumns = require("./getInlineEditColumns");
-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) { (0, _defineProperty2.default)(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; } /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * Copyright IBM Corp. 2022, 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.
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                       */
-var getRandomInteger = function getRandomInteger(min, max, decimalPlaces) {
-  var roundedMin = Math.ceil(min);
-  var roundedMax = Math.floor(max);
-  var randomNumber = Math.random() * (max - min) + min;
-  if (!decimalPlaces) {
-    return Math.floor(Math.random() * (roundedMax - roundedMin + 1)) + roundedMin;
-  }
-  var power = Math.pow(10, decimalPlaces);
-  return Math.floor(randomNumber * power) / power;
-};
-var makeData = exports.makeData = function makeData() {
-  for (var _len = arguments.length, lens = new Array(_len), _key = 0; _key < _len; _key++) {
-    lens[_key] = arguments[_key];
-  }
-  var makeDataLevel = function makeDataLevel() {
-    var depth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    var len = lens[depth];
-    return range(len).map(function () {
-      return _objectSpread(_objectSpread({}, newPerson()), {}, {
-        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined
-      });
-    });
-  };
-  return makeDataLevel();
-};
-var range = exports.range = function range(len) {
-  var arr = [];
-  for (var i = 0; i < len; i++) {
-    arr.push(i);
-  }
-  return arr;
-};
-
-/** This function is only to create a random data point when the person joined */
-var getRandomDateJoined = function getRandomDateJoined() {
-  return randomDate(new Date(2022, 0, 1), new Date());
-};
-var getPasswordStrength = function getPasswordStrength() {
-  var chance = Math.random();
-  return chance > 0.66 ? 'critical' : chance > 0.33 ? 'minor-warning' : 'normal';
-};
-var renderDocLink = function renderDocLink() {
-  var chance = Math.random();
-  var docLinkObj = {
-    href: chance > 0.66 ? 'https://carbondesignsystem.com/' : chance > 0.33 ? 'https://pages.github.ibm.com/cdai-design/pal/' : 'https://ibm-products.carbondesignsystem.com/',
-    text: chance > 0.66 ? 'Carbon Design System' : chance > 0.33 ? 'Carbon for IBM Products PAL' : 'Carbon for IBM Products storybook'
-  };
-  return docLinkObj;
-};
-var newPerson = function newPerson() {
-  var statusChance = Math.random();
-  var roleChance = Math.random();
-  var activeChance = Math.random();
-  var initialChartTypeIndex = getRandomInteger(0, 2);
-  var activeSinceDate = new Date();
-  var yesterdayDate = new Date();
-  yesterdayDate.setDate(yesterdayDate.getDate() - 1);
-  var twoDaysAgoDate = new Date();
-  twoDaysAgoDate.setDate(twoDaysAgoDate.getDate() - 2);
-  return {
-    firstName: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    lastName: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    age: Math.floor(Math.random() * 30),
-    visits: Math.floor(Math.random() * 100),
-    progress: Math.floor(Math.random() * 100),
-    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
-    role: roleChance > 0.66 ? 'developer' : roleChance > 0.33 ? 'designer' : 'researcher',
-    joined: getRandomDateJoined(),
-    someone1: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone2: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone3: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone4: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone5: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone6: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone7: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone8: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone9: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone10: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone11: _namor.default.generate({
-      words: 4,
-      numbers: 0
-    }),
-    someone12: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone13: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone14: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone15: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone16: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone17: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone18: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone19: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone20: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    chartType: initialChartTypeIndex === 0 ? _getInlineEditColumns.inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? _getInlineEditColumns.inlineEditSelectItems[1] : _getInlineEditColumns.inlineEditSelectItems[2],
-    activeSince: activeChance > 0.66 ? activeSinceDate : activeChance > 0.33 ? yesterdayDate : '23/05/2020',
-    bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
-    passwordStrength: getPasswordStrength(),
-    doc_link: renderDocLink()
-  };
-};
-var newPersonWithTwoLines = exports.newPersonWithTwoLines = function newPersonWithTwoLines() {
-  return {
-    firstName: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, _namor.default.generate({
-      words: 1,
-      numbers: 0
-    })), /*#__PURE__*/_react.default.createElement("div", null, _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }))),
-    lastName: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    age: Math.floor(Math.random() * 30)
-  };
-};
-var randomDate = function randomDate(start, end) {
-  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
-};

package/lib/components/DelimitedList/DelimitedList.docs-page.js

@@ -1,25 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var stories = _interopRequireWildcard(require("./DelimitedList.stories"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    blocks: [{
-      story: stories.delimited
-    }, {
-      story: stories.notDelimited
-    }, {
-      story: stories.empty
-    }]
-  });
-};
-var _default = exports.default = DocsPage;

package/lib/components/DelimitedList/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "DelimitedList", {
-  enumerable: true,
-  get: function get() {
-    return _DelimitedList.DelimitedList;
-  }
-});
-var _DelimitedList = require("./DelimitedList");

package/lib/components/EditFullPage/EditFullPage.docs-page.js

@@ -1,49 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var stories = _interopRequireWildcard(require("./EditFullPage.stories"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/edit/usage#full-page-edit",
-    blocks: [{
-      description: "There are **2** components that make up a Create Full Page component, which can\nbe used in unison to create the desired look, or flow. Please note, to utilize\nthe Create Full Page component, you'll need to have a minimum of two steps. If\nyou are looking for a one step creation flow, consider Create Tearsheet, Create\nSide Panel, or Create Modal."
-    }, {
-      story: stories.editFullPage,
-      description: "This is used when you have one section per step. This can be created by passing\nin the overall `<CreateFullPage />` component and the `<CreateFullPageStep />`\ncomponent with form items as children:",
-      source: {
-        code: "<CreateFullPage {...props}>\n      <CreateFullPageStep\n          title=\"Required title\"\n          subtitle=\"Optional subtitle\"\n          description=\"Optional description\"\n          onNext={() => {'Optional function'}}\n          >\n          <Row>\n            <Column xlg={5} lg={5} md={4} sm={4}>\n              <TextInput\n                id=\"test-1\"\n                invalidText=\"A valid value is required\"\n                labelText=\"Topic name\"\n                placeholder=\"Enter topic name\"\n              />\n            </Column>\n          </Row>\n      </CreateFullPageStep>\n    </CreateFullPage>"
-      }
-    }, {
-      story: stories.editFullPageWithSections,
-      description: "This is used when you have several sections per step. This can be created by\npassing in the overall `<CreateFullPage />` component and the\n`<CreateFullPageStep />` component for the first `section`. All additional\n`sections` must be passed in as children, as shown below:",
-      source: {
-        code: "<CreateFullPageStep\n    title=\"Required title\"\n    subtitle=\"Optional subtitle\"\n    description=\"Optional description\"\n    onNext={() => {'Optional function'}}\n    >\n    <Row>\n      <Column xlg={5} lg={5} md={4} sm={4}>\n        <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n          <TextInput\n            id=\"test-1\"\n            invalidText=\"A valid value is required\"\n            labelText=\"Topic name\"\n            placeholder=\"Enter topic name\"\n          />\n        </fieldset>\n      </Column>\n    </Row>\n    <span className={`#{$pkg-prefix}--create-full-page__section-divider`} />\n    <h5 className={`#{$pkg-prefix}--create-full-page__step-title`}>Required title</h5>\n    <h6 className={`#{$pkg-prefix}--create-full-page__step-subtitle`}>\n      Optional subtitle\n    </h6>\n    <p className={`#{$pkg-prefix}--create-full-page__step-description`}>\n      Optional description\n    </p>\n    <Row>\n      <Column xlg={5} lg={5} md={4} sm={4}>\n        <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n          <TextInput\n            id=\"test-2\"\n            invalidText=\"A valid value is required\"\n            labelText=\"Topic name\"\n            placeholder=\"Enter topic name\"\n          />\n        </fieldset>\n      </Column>\n    </Row>\n</CreateFullPageStep>"
-      }
-    }, {
-      title: 'Using custom components',
-      description: "It is possible to use custom components that return `CreateFullPageStep`s in\norder to help reduce the amount of logic in the component that contains the main\n`CreateFullPage`. _It is required that each child of the `CreateFullPage` either\nbe a custom step or a `CreateFullPageStep`_. An example of this could look like\nthe following:",
-      source: {
-        code: "const CreateStepCustom = ({ subtitle, ...rest }) => {\n  return (\n    <CreateFullPageStep\n      {...rest}\n      subtitle={subtitle}\n      title=\"Step 1\"\n      onNext={() => console.log('optional validation check')}\n      onMount={() => console.log('optional onMount fn')}\n      disableSubmit={false}\n    >\n      step content here\n    </CreateFullPageStep>\n  );\n};\n\nconst CreateComponent = () => {\n  return (\n    <CreateFullPage {...createFullPageProps}>\n      <CreateStepCustom subtitle=\"Custom step subtitle\" />\n      <CreateFullPageStep\n        title=\"Topic name\"\n        fieldsetLegendText=\"Topic information\"\n        disableSubmit={!value}\n        subtitle=\"This is the unique name used to recognize your topic\"\n        description=\"It will also be used by your producers and consumers as part of the\n        connection information, so make it something easy to recognize.\"\n      >\n        Content for second step\n      </CreateFullPageStep>\n    </CreateFullPage>\n  );\n};"
-      }
-    }, {
-      title: 'Using dynamic steps',
-      description: "The use of dynamic steps can be utilized in a scenario when the user makes a\ncertain selection on one step that effects which steps will follow it, this is\ncontrolled via the `includeStep` prop. See abbreviated example below:",
-      source: {
-        code: "import { useState } from 'react';\n\nconst CreateFlow = () => {\n  const [shouldIncludeAdditionalStep, setShouldIncludeAdditionalStep] =\n    useState(false);\n  return (\n    <CreateFullPage {...createFullPageProps}>\n      <CreateFullPageStep {...step1Props}>\n        Step 1 content\n        <Checkbox\n          labelText={`Include additional step`}\n          id=\"include-additional-step-checkbox\"\n          onChange={(value) => setShouldIncludeAdditionalStep(value)}\n          checked={shouldIncludeAdditionalStep}\n        />\n      </CreateFullPageStep>\n      <CreateFullPageStep\n        {...step2Props}\n        includeStep={shouldIncludeAdditionalStep}\n      >\n        Dynamic step content\n      </CreateFullPageStep>\n      <CreateFullPageStep {...step3Props}>\n        Final step content\n      </CreateFullPageStep>\n    </CreateFullPage>\n  );\n};"
-      }
-    }, {
-      title: 'Class names',
-      description: "Additionally, to get the preferred styling when including your own children as\nsections, you can utilize the below included class names.\n\n| Class name                                           | Element     | Features                                                   |\n| ---------------------------------------------------- | ----------- | ---------------------------------------------------------- |\n| `#{$pkg-prefix}--create-full-page__step-title`       | title       | `productive-heading-04` & `margin-bottom` of `$spacing-05` |\n| `#{$pkg-prefix}--create-full-page__step-subtitle`    | subtitle    | `productive-heading-01` & `margin-bottom` of `$spacing-03` |\n| `#{$pkg-prefix}--create-full-page__step-description` | description | `body-long-01` & `margin-bottom` of `$spacing-06`          |\n| `#{$pkg-prefix}--create-full-page__step-fieldset`    | fieldset    | `margin-bottom` of `$spacing-05` to all children elements  |\n| `#{$pkg-prefix}--create-full-page__section-divider`  | divider     | Includes a `1px` divider line inside the `main` content    |\n"
-    }]
-  });
-};
-var _default = exports.default = DocsPage;

package/lib/components/EditFullPage/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "EditFullPage", {
-  enumerable: true,
-  get: function get() {
-    return _EditFullPage.EditFullPage;
-  }
-});
-var _EditFullPage = require("./EditFullPage");

package/lib/components/EditInPlace/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "EditInPlace", {
-  enumerable: true,
-  get: function get() {
-    return _EditInPlace.EditInPlace;
-  }
-});
-var _EditInPlace = require("./EditInPlace");

package/lib/components/EditSidePanel/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "EditSidePanel", {
-  enumerable: true,
-  get: function get() {
-    return _EditSidePanel.EditSidePanel;
-  }
-});
-var _EditSidePanel = require("./EditSidePanel");

package/lib/components/EditTearsheet/EditTearsheet.docs-page.js

@@ -1,35 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var stories = _interopRequireWildcard(require("./EditTearsheet.stories"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/edit/usage#tearsheet-edit",
-    blocks: [{
-      story: stories.multiFormEditTearsheet,
-      description: "This is used when you have one section per step. This can be created by passing\nin the overall `<EditTearsheet />` component and the `<EditTearsheetForm />`\ncomponent with form items as children:",
-      source: {
-        code: "<EditTearsheet {...props}>\n  <EditTearsheetForm\n    title=\"Required title\"\n    subtitle=\"Optional subtitle\"\n    description=\"Optional description\"\n    onNext={() => {\n      'Optional function';\n    }}\n  >\n    <TextInput\n      id=\"test-1\"\n      invalidText=\"A valid value is required\"\n      labelText=\"Topic name\"\n      placeholder=\"Enter topic name\"\n    />\n  </EditTearsheetForm>\n</EditTearsheet>"
-      }
-    }, {
-      title: 'Using custom components',
-      description: "It is possible to use custom components that return `EditTearsheetForms` in\norder to help reduce the amount of logic in the component that contains the main\n`EditTearsheet`. _It is required that each child of the `EditTearsheet` either\nbe a custom step or a `EditTearsheetForm`_. An example of this could look like\nthe following:",
-      source: {
-        code: "const CreateFormCustom = ({ subtitle, ...rest }) => {\n  return (\n    <EditTearsheetForm {...rest} subtitle={subtitle} title=\"Form 1\">\n      form content here\n    </EditTearsheetForm>\n  );\n};\n\nconst CreateComponent = () => {\n  return (\n    <EditTearsheet {...EditTearsheetProps}>\n      <CreateFormCustom subtitle=\"Custom form subtitle\" />\n      <EditTearsheetForm\n        title=\"Topic name\"\n        fieldsetLegendText=\"Topic information\"\n        subtitle=\"This is the unique name used to recognize your topic\"\n        description=\"It will also be used by your producers and consumers as part of the\n        connection information, so make it something easy to recognize.\"\n      >\n        Content for second form\n      </EditTearsheetForm>\n    </EditTearsheet>\n  );\n};"
-      }
-    }, {
-      title: "Class names",
-      description: "Additionally, to get the preferred styling when including your own children as\nsections, you can utilize the below included class names.\n\n| Class name                                            | Element     | Features                                                   |\n| ----------------------------------------------------- | ----------- | ---------------------------------------------------------- |\n| `#{$pkg-prefix}--create-tearsheet__form--title`       | title       | `productive-heading-04` & `margin-bottom` of `$spacing-05` |\n| `#{$pkg-prefix}--create-tearsheet__form--subtitle`    | subtitle    | `productive-heading-01` & `margin-bottom` of `$spacing-03` |\n| `#{$pkg-prefix}--create-tearsheet__form--description` | description | `body-long-01` & `margin-bottom` of `$spacing-06`          |\n| `#{$pkg-prefix}--create-tearsheet__form--fieldset`    | fieldset    | `margin-bottom` of `$spacing-05` to all children elements  |\n"
-    }]
-  });
-};
-var _default = exports.default = DocsPage;

package/lib/components/EditTearsheet/index.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "EditTearsheet", {
-  enumerable: true,
-  get: function get() {
-    return _EditTearsheet.EditTearsheet;
-  }
-});
-Object.defineProperty(exports, "EditTearsheetForm", {
-  enumerable: true,
-  get: function get() {
-    return _EditTearsheetForm.EditTearsheetForm;
-  }
-});
-var _EditTearsheet = require("./EditTearsheet");
-var _EditTearsheetForm = require("./EditTearsheetForm");