@shopify/ui-extensions 2.0.0-alpha.2 → 2022.10.1

package/build/cjs/surfaces/checkout/index.js

@@ -1,70 +1,87 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _api = require("./api");
+var extension = require('./extension.js');
+var Banner = require('./components/Banner/Banner.js');
+var BlockLayout = require('./components/BlockLayout/BlockLayout.js');
+var BlockSpacer = require('./components/BlockSpacer/BlockSpacer.js');
+var BlockStack = require('./components/BlockStack/BlockStack.js');
+var Button = require('./components/Button/Button.js');
+var Checkbox = require('./components/Checkbox/Checkbox.js');
+var Choice = require('./components/Choice/Choice.js');
+var ChoiceList = require('./components/ChoiceList/ChoiceList.js');
+var Divider = require('./components/Divider/Divider.js');
+var Form = require('./components/Form/Form.js');
+var Grid = require('./components/Grid/Grid.js');
+var GridItem = require('./components/GridItem/GridItem.js');
+var Heading = require('./components/Heading/Heading.js');
+var HeadingGroup = require('./components/HeadingGroup/HeadingGroup.js');
+var Icon = require('./components/Icon/Icon.js');
+var Image = require('./components/Image/Image.js');
+var InlineLayout = require('./components/InlineLayout/InlineLayout.js');
+var InlineStack = require('./components/InlineStack/InlineStack.js');
+var InlineSpacer = require('./components/InlineSpacer/InlineSpacer.js');
+var Link = require('./components/Link/Link.js');
+var List = require('./components/List/List.js');
+var ListItem = require('./components/ListItem/ListItem.js');
+var PhoneField = require('./components/PhoneField/PhoneField.js');
+var Pressable = require('./components/Pressable/Pressable.js');
+var ScrollView = require('./components/ScrollView/ScrollView.js');
+var Select = require('./components/Select/Select.js');
+var SkeletonImage = require('./components/SkeletonImage/SkeletonImage.js');
+var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
+var SkeletonTextBlock = require('./components/SkeletonTextBlock/SkeletonTextBlock.js');
+var Spinner = require('./components/Spinner/Spinner.js');
+var Stepper = require('./components/Stepper/Stepper.js');
+var Tag = require('./components/Tag/Tag.js');
+var Text = require('./components/Text/Text.js');
+var TextBlock = require('./components/TextBlock/TextBlock.js');
+var TextField = require('./components/TextField/TextField.js');
+var Tooltip = require('./components/Tooltip/Tooltip.js');
+var View = require('./components/View/View.js');
+var style = require('./style/style.js');
 
-Object.keys(_api).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _api[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _api[key];
-    }
-  });
-});
 
-var _components = require("./components");
 
-Object.keys(_components).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _components[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _components[key];
-    }
-  });
-});
-
-var _extensionPoints = require("./extension-points");
-
-Object.keys(_extensionPoints).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _extensionPoints[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _extensionPoints[key];
-    }
-  });
-});
-
-var _extension = require("./extension");
-
-Object.keys(_extension).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _extension[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _extension[key];
-    }
-  });
-});
-
-var _shared = require("./shared");
-
-Object.keys(_shared).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _shared[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _shared[key];
-    }
-  });
-});
+exports.extension = extension.extension;
+exports.Banner = Banner.Banner;
+exports.BlockLayout = BlockLayout.BlockLayout;
+exports.BlockSpacer = BlockSpacer.BlockSpacer;
+exports.BlockStack = BlockStack.BlockStack;
+exports.Button = Button.Button;
+exports.Checkbox = Checkbox.Checkbox;
+exports.Choice = Choice.Choice;
+exports.ChoiceList = ChoiceList.ChoiceList;
+exports.Divider = Divider.Divider;
+exports.Form = Form.Form;
+exports.Grid = Grid.Grid;
+exports.GridItem = GridItem.GridItem;
+exports.Heading = Heading.Heading;
+exports.HeadingGroup = HeadingGroup.HeadingGroup;
+exports.Icon = Icon.Icon;
+exports.Image = Image.Image;
+exports.InlineLayout = InlineLayout.InlineLayout;
+exports.InlineStack = InlineStack.InlineStack;
+exports.InlineSpacer = InlineSpacer.InlineSpacer;
+exports.Link = Link.Link;
+exports.List = List.List;
+exports.ListItem = ListItem.ListItem;
+exports.PhoneField = PhoneField.PhoneField;
+exports.Pressable = Pressable.Pressable;
+exports.ScrollView = ScrollView.ScrollView;
+exports.Select = Select.Select;
+exports.SkeletonImage = SkeletonImage.SkeletonImage;
+exports.SkeletonText = SkeletonText.SkeletonText;
+exports.SkeletonTextBlock = SkeletonTextBlock.SkeletonTextBlock;
+exports.Spinner = Spinner.Spinner;
+exports.Stepper = Stepper.Stepper;
+exports.Tag = Tag.Tag;
+exports.Text = Text.Text;
+exports.TextBlock = TextBlock.TextBlock;
+exports.TextField = TextField.TextField;
+exports.Tooltip = Tooltip.Tooltip;
+exports.View = View.View;
+exports.Style = style.Style;
+exports.isConditionalStyle = style.isConditionalStyle;
+exports.isConditionalStyleWithDefault = style.isConditionalStyleWithDefault;

package/build/cjs/surfaces/checkout/style/isEqual.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * A simple isEqual function that can be used to compare two style objects that's
+ * good enough for our use case on the style builder.
+ */
+function isEqual(first, second) {
+  if (Object.is(first, second)) {
+    return true;
+  }
+  if (typeof first === 'object' && typeof second === 'object') {
+    if (Array.isArray(first) && Array.isArray(second)) {
+      if (first.length === second.length) {
+        return first.every((value, index) => isEqual(value, second[index]));
+      }
+    } else {
+      const firstEntries = Object.entries(first);
+      const secondEntries = Object.entries(second);
+      if (firstEntries.length === secondEntries.length) {
+        return firstEntries.every(([key]) => isEqual(first[key], second[key]));
+      }
+    }
+  }
+  return false;
+}
+
+exports.isEqual = isEqual;

package/build/cjs/surfaces/checkout/style/memoize.js

@@ -0,0 +1,138 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/* eslint-disable prefer-rest-params */
+/* eslint-disable prefer-spread */
+
+// This memoize function is heavily inspired by reselect's defaultMemoize
+// https://github.com/reduxjs/reselect
+
+// Cache implementation based on Erik Rasmussen's `lru-memoize`:
+// https://github.com/erikras/lru-memoize
+
+const NOT_FOUND = 'NOT_FOUND';
+function createSingletonCache(equals) {
+  let entry;
+  return {
+    get(key) {
+      if (entry && equals(entry.key, key)) {
+        return entry.value;
+      }
+      return NOT_FOUND;
+    },
+    put(key, value) {
+      entry = {
+        key,
+        value
+      };
+    },
+    getEntries() {
+      return entry ? [entry] : [];
+    },
+    clear() {
+      entry = undefined;
+    }
+  };
+}
+function createLruCache(maxSize, equals) {
+  let entries = [];
+  function get(key) {
+    const cacheIndex = entries.findIndex(entry => equals(key, entry.key));
+
+    // We found a cached entry
+    if (cacheIndex > -1) {
+      const entry = entries[cacheIndex];
+
+      // Cached entry not at top of cache, move it to the top
+      if (cacheIndex > 0) {
+        entries.splice(cacheIndex, 1);
+        entries.unshift(entry);
+      }
+      return entry.value;
+    }
+
+    // No entry found in cache, return sentinel
+    return NOT_FOUND;
+  }
+  function put(key, value) {
+    if (get(key) === NOT_FOUND) {
+      entries.unshift({
+        key,
+        value
+      });
+      if (entries.length > maxSize) {
+        entries.pop();
+      }
+    }
+  }
+  function getEntries() {
+    return entries;
+  }
+  function clear() {
+    entries = [];
+  }
+  return {
+    get,
+    put,
+    getEntries,
+    clear
+  };
+}
+const defaultEqualityCheck = (first, second) => {
+  return first === second;
+};
+function createCacheKeyComparator(equalityCheck) {
+  return function areArgumentsShallowlyEqual(prev, next) {
+    if (prev === null || next === null || prev.length !== next.length) {
+      return false;
+    }
+
+    // Do this in a for loop (and not a `forEach` or an `every`) so we can determine equality as fast as possible.
+    const length = prev.length;
+    for (let i = 0; i < length; i++) {
+      if (!equalityCheck(prev[i], next[i])) {
+        return false;
+      }
+    }
+    return true;
+  };
+}
+// defaultMemoize now supports a configurable cache size with LRU behavior,
+// and optional comparison of the result value with existing values
+function memoize(func, equalityCheckOrOptions) {
+  const providedOptions = typeof equalityCheckOrOptions === 'object' ? equalityCheckOrOptions : {
+    equalityCheck: equalityCheckOrOptions
+  };
+  const {
+    equalityCheck = defaultEqualityCheck,
+    maxSize = 1,
+    resultEqualityCheck
+  } = providedOptions;
+  const comparator = createCacheKeyComparator(equalityCheck);
+  const cache = maxSize === 1 ? createSingletonCache(comparator) : createLruCache(maxSize, comparator);
+
+  // we reference arguments instead of spreading them for performance reasons
+  function memoized() {
+    let value = cache.get(arguments);
+    if (value === NOT_FOUND) {
+      // @ts-expect-error - we know that arguments is an array-like object
+      value = func.apply(null, arguments);
+      if (resultEqualityCheck) {
+        const entries = cache.getEntries();
+        const matchingEntry = entries.find(entry => resultEqualityCheck(entry.value, value));
+        if (matchingEntry) {
+          value = matchingEntry.value;
+        }
+      }
+      cache.put(arguments, value);
+    }
+    return value;
+  }
+  memoized.clearCache = () => cache.clear();
+  return memoized;
+}
+
+exports.createCacheKeyComparator = createCacheKeyComparator;
+exports.defaultEqualityCheck = defaultEqualityCheck;
+exports.memoize = memoize;

package/build/cjs/surfaces/checkout/style/style.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var memoize = require('./memoize.js');
+var isEqual = require('./isEqual.js');
+
+const MAX_CACHE_SIZE = 50;
+const MEMOIZE_OPTIONS = {
+  equalityCheck: isEqual.isEqual,
+  maxSize: MAX_CACHE_SIZE
+};
+// eslint-disable-next-line func-style
+const when = function when(conditions, value) {
+  const config = isConditionalStyle(this) ? {
+    default: this.default,
+    conditionals: [...this.conditionals, {
+      conditions,
+      value
+    }]
+  } : {
+    conditionals: [{
+      conditions,
+      value
+    }]
+  };
+  return createChainableConditionalStyle(config);
+};
+
+/**
+ * Style is a helper for authoring conditional values for prop styles.
+ * Write complex conditional styles based on one or more conditions (viewport
+ * sizes and interactive states) in a concise and expressive way.
+ */
+const Style = {
+  /**
+   * Sets an optional default value to use when no other condition is met.
+   *
+   * @param defaultValue The default value
+   * @returns The chainable condition style
+   */
+  default: memoize.memoize(defaultValue => createChainableConditionalStyle({
+    default: defaultValue,
+    conditionals: []
+  }), MEMOIZE_OPTIONS),
+  /**
+   * Adjusts the style based on different conditions. All conditions, expressed
+   * as a literal object, must be met for the associated value to be applied.
+   *
+   * The `when` method can be chained together to build more complex styles.
+   *
+   * @param conditions The condition(s)
+   * @param value The conditional value that can be applied if the conditions are met
+   * @returns The chainable condition style
+   */
+  when: memoize.memoize(when, MEMOIZE_OPTIONS)
+};
+function createChainableConditionalStyle(conditionalStyle) {
+  const proto = {};
+  const returnConditionalStyle = Object.create(proto);
+  Object.assign(returnConditionalStyle, conditionalStyle);
+  proto.when = memoize.memoize(when.bind(returnConditionalStyle), MEMOIZE_OPTIONS);
+  return returnConditionalStyle;
+}
+function isConditionalStyle(value) {
+  return value !== null && typeof value === 'object' && 'conditionals' in value;
+}
+function isConditionalStyleWithDefault(value) {
+  return isConditionalStyle(value) && 'default' in value && value.default !== undefined;
+}
+
+exports.Style = Style;
+exports.isConditionalStyle = isConditionalStyle;
+exports.isConditionalStyleWithDefault = isConditionalStyleWithDefault;

package/build/cjs/utilities/registration.js

@@ -1,33 +1,6 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createExtensionRegistrationFunction = createExtensionRegistrationFunction;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _core = require("@remote-ui/core");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+Object.defineProperty(exports, '__esModule', { value: true });
 
 /**
  * This function takes an extension function that is expecting a `RemoteRoot` as its
@@ -37,74 +10,11 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
  * provided by a version of `@remote-ui/core` that the extension controls.
  */
 function createExtensionRegistrationFunction() {
-  var extensionWrapper = function extensionWrapper(_extensionPoint, extensionWithRemoteRoot) {
-    function extension() {
-      return _extension.apply(this, arguments);
-    }
-
-    function _extension() {
-      _extension = _asyncToGenerator( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-        var _len,
-            args,
-            _key,
-            _result,
-            _args$,
-            channel,
-            components,
-            rest,
-            root,
-            result,
-            _args = arguments;
-
-        return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                for (_len = _args.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-                  args[_key] = _args[_key];
-                }
-
-                if (!(args.length === 1 || _typeof(args[0]) !== 'object' || args[0] == null || !('channel' in args[0]))) {
-                  _context.next = 6;
-                  break;
-                }
-
-                _context.next = 4;
-                return extensionWithRemoteRoot.apply(void 0, args);
-
-              case 4:
-                _result = _context.sent;
-                return _context.abrupt("return", _result);
-
-              case 6:
-                _args$ = args[0], channel = _args$.channel, components = _args$.components, rest = args.slice(1);
-                root = (0, _core.createRemoteRoot)(channel, {
-                  components: components,
-                  strict: true
-                });
-                _context.next = 10;
-                return extensionWithRemoteRoot.apply(void 0, [root].concat(_toConsumableArray(rest)));
-
-              case 10:
-                result = _context.sent;
-                _context.next = 13;
-                return root.mount();
-
-              case 13:
-                return _context.abrupt("return", result);
-
-              case 14:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }));
-      return _extension.apply(this, arguments);
-    }
-
-    return extension;
+  const extensionWrapper = (target, implementation) => {
+    globalThis.shopify.extend(target, implementation);
+    return implementation;
   };
-
   return extensionWrapper;
-}
+}
+
+exports.createExtensionRegistrationFunction = createExtensionRegistrationFunction;

package/build/esm/index.mjs

@@ -1,3 +1 @@
-export * from './api';
-export * from './components';
-export * from './extension';
+

package/build/esm/surfaces/checkout/components/Banner/Banner.mjs

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Use banners to communicate important messages to customers in a prominent way.
+ */
+const Banner = createRemoteComponent('Banner');
+
+export { Banner };

package/build/esm/surfaces/checkout/components/BlockLayout/BlockLayout.mjs

@@ -0,0 +1,10 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * BlockLayout is used to lay out content over multiple rows.
+ *
+ * By default, all rows fill the available block space, sharing it equally.
+ */
+const BlockLayout = createRemoteComponent('BlockLayout');
+
+export { BlockLayout };

package/build/esm/surfaces/checkout/components/BlockSpacer/BlockSpacer.mjs

@@ -0,0 +1,11 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * BlockSpacer is used to create empty block space, typically when variable spacing
+ * is needed between multiple elements.
+ *
+ * Note that you should favor BlockStack when spacing between all elements is the same.
+ */
+const BlockSpacer = createRemoteComponent('BlockSpacer');
+
+export { BlockSpacer };

package/build/esm/surfaces/checkout/components/BlockStack/BlockStack.mjs

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * BlockStack is used to vertically stack elements.
+ */
+const BlockStack = createRemoteComponent('BlockStack');
+
+export { BlockStack };

package/build/esm/surfaces/checkout/components/Button/Button.mjs

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”.
+ */
+const Button = createRemoteComponent('Button');
+
+export { Button };

package/build/esm/surfaces/checkout/components/Checkbox/Checkbox.mjs

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions.
+ */
+const Checkbox = createRemoteComponent('Checkbox');
+
+export { Checkbox };

package/build/esm/surfaces/checkout/components/Choice/Choice.mjs

@@ -0,0 +1,9 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Options inside a `ChoiceList`.
+ * The wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes.
+ */
+const Choice = createRemoteComponent('Choice');
+
+export { Choice };

package/build/esm/surfaces/checkout/components/ChoiceList/ChoiceList.mjs

@@ -0,0 +1,9 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Use choice lists to present a list of choices where buyers can make
+ * a single selection or multiple selections.
+ */
+const ChoiceList = createRemoteComponent('ChoiceList');
+
+export { ChoiceList };

package/build/esm/surfaces/checkout/components/Divider/Divider.mjs

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * A divider separates content and represents a thematic break between elements.
+ */
+const Divider = createRemoteComponent('Divider');
+
+export { Divider };

package/build/esm/surfaces/checkout/components/Form/Form.mjs

@@ -0,0 +1,16 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * The form component should be used to wrap one or more form controls. This
+ * component provides an "implicit submit" behavior, where customers can submit
+ * the form from any input by pressing "Enter" on their keyboards. This
+ * behavior is widely expected, and should be respected as often as possible.
+ *
+ * Unlike an HTML `form` element, this component does not support configuring
+ * the descendant fields to be submitted via HTTP automatically. Instead, you
+ * must provide an `onSubmit` callback that will perform the necessary HTTP
+ * requests in JavaScript.
+ */
+const Form = createRemoteComponent('Form');
+
+export { Form };

package/build/esm/surfaces/checkout/components/Grid/Grid.mjs

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Grid is used to lay out content in a matrix of rows and columns.
+ */
+const Grid = createRemoteComponent('Grid');
+
+export { Grid };

package/build/esm/surfaces/checkout/components/GridItem/GridItem.mjs

@@ -0,0 +1,10 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * GridItem can be used as children of Grid.
+ *
+ * It offers a way to span the element across a number of columns and rows.
+ */
+const GridItem = createRemoteComponent('GridItem');
+
+export { GridItem };

package/build/esm/surfaces/checkout/components/Heading/Heading.mjs

@@ -0,0 +1,13 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Headings control the visual style of headings. Use headings to introduce major
+ * sections, like Contact information, Shipping address, or Shipping method.
+ *
+ * Unlike HTML headings, you don’t explicitly specify the position of the heading in the
+ * document outline. Nest headings within the heading group component to control
+ * the document outline structure used by assistive technologies.
+ */
+const Heading = createRemoteComponent('Heading');
+
+export { Heading };