@shopify/ui-extensions 0.0.0-internal-20230622171951

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

@@ -0,0 +1,12 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * InlineLayout is used to lay out content over multiple columns.
+ *
+ * By default, all columns are of equal size and fill the available inline space.
+ * Content does not wrap on new rows when not enough columns have been explicitly set,
+ * instead they are added as new column and fill the remaining inline space.
+ */
+const InlineLayout = createRemoteComponent('InlineLayout');
+
+export { InlineLayout };

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

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

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

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * InlineStack is used to lay out a horizontal row of elements. Elements always wrap.
+ */
+const InlineStack = createRemoteComponent('InlineStack');
+
+export { InlineStack };

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

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Link makes text interactive so customers can perform an action, such as navigating to another location.
+ */
+const Link = createRemoteComponent('Link');
+
+export { Link };

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

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Lists display a set of related content. Each list item usually begins with a bullet or a number.
+ */
+const List = createRemoteComponent('List');
+
+export { List };

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

@@ -0,0 +1,10 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * List items are used as children of the `List` component.
+ *
+ * They usually begins with a bullet or a number.
+ */
+const ListItem = createRemoteComponent('ListItem');
+
+export { ListItem };

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

@@ -0,0 +1,13 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * A PhoneField is an input field that merchants can type into optimized
+ * for phone numbers with a country code base auto-formatting.
+ * The country code is required for the initial render of the field but
+ * it can be overriden later by the user either by selecting a country
+ * in the country selection dropdown or by manually editing the country phone code
+ * directly in the text field.
+ */
+const PhoneField = createRemoteComponent('PhoneField');
+
+export { PhoneField };

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

@@ -0,0 +1,10 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Pressable is a generic interactive component. It shares the same styling properties as View but also adds
+ * pressable behavior, meaning that you can execute some logic in response to user interaction.
+ * Use this component for creating interactive elements without the default styling that comes with `Button` and `Link`.
+ */
+const Pressable = createRemoteComponent('Pressable');
+
+export { Pressable };

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

@@ -0,0 +1,9 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * ScrollView is a container for long form content, such as order summary line items,
+ * that allows for scrolling so customers can expose more content as they view.
+ */
+const ScrollView = createRemoteComponent('ScrollView');
+
+export { ScrollView };

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

@@ -0,0 +1,9 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Selects let buyers choose one option from an options menu. Consider select
+ * when you have 4 or more options, to avoid cluttering the interface.
+ */
+const Select = createRemoteComponent('Select');
+
+export { Select };

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

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page.
+ */
+const SkeletonImage = createRemoteComponent('SkeletonImage');
+
+export { SkeletonImage };

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

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * SkeletonText is used to provide a low fidelity representation of text content before it appears on the page.
+ */
+const SkeletonText = createRemoteComponent('SkeletonText');
+
+export { SkeletonText };

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

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page.
+ */
+const SkeletonTextBlock = createRemoteComponent('SkeletonTextBlock');
+
+export { SkeletonTextBlock };

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

@@ -0,0 +1,9 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Spinner is used to notify buyers that their action is being processed.
+ * The Spinner is usually used when sending or receiving data from a server.
+ */
+const Spinner = createRemoteComponent('Spinner');
+
+export { Spinner };

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

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2.
+ */
+const Stepper = createRemoteComponent('Stepper');
+
+export { Stepper };

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

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart.
+ */
+const Tag = createRemoteComponent('Tag');
+
+export { Tag };

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

@@ -0,0 +1,9 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Text is used to visually style and provide semantic value for a small piece of text
+ * content.
+ */
+const Text = createRemoteComponent('Text');
+
+export { Text };

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

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Text block is used to render a block of text that occupies the full width available, like a paragraph.
+ */
+const TextBlock = createRemoteComponent('TextBlock');
+
+export { TextBlock };

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

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Use a text field to get text input from a customer.
+ */
+const TextField = createRemoteComponent('TextField');
+
+export { TextField };

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

@@ -0,0 +1,13 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Tooltips are floating labels that briefly explain the function of a user interface element.
+ * They must be specified inside the `overlay` prop of an activator component.
+ * Currently, activator components are `Button`, `Link`, and `Pressable`.
+ *
+ * The library takes care of applying the WAI-ARIA Tooltip Widget pattern automatically for the activator
+ * and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator.
+ */
+const Tooltip = createRemoteComponent('Tooltip');
+
+export { Tooltip };

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

@@ -0,0 +1,13 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ *  View is a generic container component. Its contents will always be their
+ * “natural” size, so this component can be useful in layout components (like `Grid`,
+ * `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit.
+ *
+ * Note: View’s box model related properties like `padding`, `border`, `borderRadius`, and `borderColor` are implemented as
+ * [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts).
+ */
+const View = createRemoteComponent('View');
+
+export { View };

package/build/esm/surfaces/checkout/extension.mjs

@@ -0,0 +1,6 @@
+import { createExtensionRegistrationFunction } from '../../utilities/registration.mjs';
+
+const extension = createExtensionRegistrationFunction();
+const extend = extension;
+
+export { extend, extension };

package/build/esm/surfaces/checkout/style/isEqual.mjs

@@ -0,0 +1,25 @@
+/**
+ * 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;
+}
+
+export { isEqual };

package/build/esm/surfaces/checkout/style/memoize.mjs

@@ -0,0 +1,133 @@
+/* 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) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      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;
+}
+
+export { createCacheKeyComparator, defaultEqualityCheck, memoize };

package/build/esm/surfaces/checkout/style/style.mjs

@@ -0,0 +1,68 @@
+import { memoize } from './memoize.mjs';
+import { isEqual } from './isEqual.mjs';
+
+const MAX_CACHE_SIZE = 50;
+const MEMOIZE_OPTIONS = {
+  equalityCheck: 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(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(when, MEMOIZE_OPTIONS)
+};
+function createChainableConditionalStyle(conditionalStyle) {
+  const proto = {};
+  const returnConditionalStyle = Object.create(proto);
+  Object.assign(returnConditionalStyle, conditionalStyle);
+  proto.when = 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;
+}
+
+export { Style, isConditionalStyle, isConditionalStyleWithDefault };

package/build/esm/surfaces/checkout.mjs

@@ -0,0 +1,39 @@
+export { extend, extension } from './checkout/extension.mjs';
+export { Banner } from './checkout/components/Banner/Banner.mjs';
+export { BlockLayout } from './checkout/components/BlockLayout/BlockLayout.mjs';
+export { BlockSpacer } from './checkout/components/BlockSpacer/BlockSpacer.mjs';
+export { BlockStack } from './checkout/components/BlockStack/BlockStack.mjs';
+export { Button } from './checkout/components/Button/Button.mjs';
+export { Checkbox } from './checkout/components/Checkbox/Checkbox.mjs';
+export { Choice } from './checkout/components/Choice/Choice.mjs';
+export { ChoiceList } from './checkout/components/ChoiceList/ChoiceList.mjs';
+export { Divider } from './checkout/components/Divider/Divider.mjs';
+export { Form } from './checkout/components/Form/Form.mjs';
+export { Grid } from './checkout/components/Grid/Grid.mjs';
+export { GridItem } from './checkout/components/GridItem/GridItem.mjs';
+export { Heading } from './checkout/components/Heading/Heading.mjs';
+export { HeadingGroup } from './checkout/components/HeadingGroup/HeadingGroup.mjs';
+export { Icon } from './checkout/components/Icon/Icon.mjs';
+export { Image } from './checkout/components/Image/Image.mjs';
+export { InlineLayout } from './checkout/components/InlineLayout/InlineLayout.mjs';
+export { InlineStack } from './checkout/components/InlineStack/InlineStack.mjs';
+export { InlineSpacer } from './checkout/components/InlineSpacer/InlineSpacer.mjs';
+export { Link } from './checkout/components/Link/Link.mjs';
+export { List } from './checkout/components/List/List.mjs';
+export { ListItem } from './checkout/components/ListItem/ListItem.mjs';
+export { PhoneField } from './checkout/components/PhoneField/PhoneField.mjs';
+export { Pressable } from './checkout/components/Pressable/Pressable.mjs';
+export { ScrollView } from './checkout/components/ScrollView/ScrollView.mjs';
+export { Select } from './checkout/components/Select/Select.mjs';
+export { SkeletonImage } from './checkout/components/SkeletonImage/SkeletonImage.mjs';
+export { SkeletonText } from './checkout/components/SkeletonText/SkeletonText.mjs';
+export { SkeletonTextBlock } from './checkout/components/SkeletonTextBlock/SkeletonTextBlock.mjs';
+export { Spinner } from './checkout/components/Spinner/Spinner.mjs';
+export { Stepper } from './checkout/components/Stepper/Stepper.mjs';
+export { Tag } from './checkout/components/Tag/Tag.mjs';
+export { Text } from './checkout/components/Text/Text.mjs';
+export { TextBlock } from './checkout/components/TextBlock/TextBlock.mjs';
+export { TextField } from './checkout/components/TextField/TextField.mjs';
+export { Tooltip } from './checkout/components/Tooltip/Tooltip.mjs';
+export { View } from './checkout/components/View/View.mjs';
+export { Style, isConditionalStyle, isConditionalStyleWithDefault } from './checkout/style/style.mjs';

package/build/esm/utilities/registration.mjs

@@ -0,0 +1,41 @@
+import { createRemoteRoot } from '@remote-ui/core';
+
+/**
+ * This function takes an extension function that is expecting a `RemoteRoot` as its
+ * first argument, and returns a new function that accepts a `RemoteChannel` instead.
+ * This is a convenience that allows the raw UI extension API to only expose the simpler
+ * `RemoteChannel` type, while allowing the extension to use the more powerful `RemoteRoot`,
+ * provided by a version of `@remote-ui/core` that the extension controls.
+ */
+function createExtensionRegistrationFunction() {
+  const extensionWrapper = (target, implementation) => {
+    var _shopify;
+    async function extension(...args) {
+      // Rendering extensions have two arguments. Non-rendering extensions don’t have
+      // a `RemoteChannel` that needs to be normalized, so we can just pass the arguments
+      // through.
+      if (args.length === 1) {
+        return implementation(...args);
+      }
+      const [{
+        channel,
+        components
+      }, api] = args;
+      const root = createRemoteRoot(channel, {
+        components,
+        strict: true
+      });
+      let renderResult = implementation(root, api);
+      if (typeof renderResult === 'object' && renderResult != null && 'then' in renderResult) {
+        renderResult = await renderResult;
+      }
+      root.mount();
+      return renderResult;
+    }
+    (_shopify = globalThis.shopify) === null || _shopify === void 0 ? void 0 : _shopify.extend(target, extension);
+    return extension;
+  };
+  return extensionWrapper;
+}
+
+export { createExtensionRegistrationFunction };

package/build/esnext/index.esnext

@@ -0,0 +1 @@
+

package/build/esnext/surfaces/admin/components/Badge/Badge.esnext

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Badges are used to inform merchants of the status of an object, or the status of an action that’s been taken.
+ */
+const Badge = createRemoteComponent('Badge');
+
+export { Badge };

package/build/esnext/surfaces/admin/components/Banner/Banner.esnext

@@ -0,0 +1,10 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Banners inform merchants about important changes or persistent conditions. Use this component if you need to communicate to merchants in a prominent way.
+ *
+ * [Learn more about best practices and guidelines on using Banners](https://polaris.shopify.com/components/feedback-indicators/banner#section-best-practices).
+ */
+const Banner = createRemoteComponent('Banner');
+
+export { Banner };

package/build/esnext/surfaces/admin/components/BlockStack/BlockStack.esnext

@@ -0,0 +1,11 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Use to achieve no-fuss vertical centering.
+ *
+ * A stack is made of flexible items that wrap each of the stack’s children. Options provide control of the alignment and spacing of the items in the stack.
+ * Use `StackItem` to group multiple elements inside a `BlockStack` together.
+ */
+const BlockStack = createRemoteComponent('BlockStack');
+
+export { BlockStack };

package/build/esnext/surfaces/admin/components/Button/Button.esnext

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

package/build/esnext/surfaces/admin/components/Card/Card.esnext

@@ -0,0 +1,11 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Cards are used to group similar concepts and tasks together to make Shopify easier for merchants to scan, read, and get things done.
+ *
+ * The action API should be used to create actionable components for the card.
+ * Cards should be contained, independent, and individual.
+ */
+const Card = createRemoteComponent('Card');
+
+export { Card };

package/build/esnext/surfaces/admin/components/CardSection/CardSection.esnext

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * CardSections are used to group similar concepts within a Card. CardSections add dividers, which visually separate regions within cards.
+ */
+const CardSection = createRemoteComponent('CardSection');
+
+export { CardSection };

package/build/esnext/surfaces/admin/components/Checkbox/Checkbox.esnext

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Checkboxes are most commonly used to give merchants a way to make a range of selections (zero, one, or multiple).
+ */
+const Checkbox = createRemoteComponent('Checkbox');
+
+export { Checkbox };

package/build/esnext/surfaces/admin/components/CustomerSegmentationTemplate/CustomerSegmentationTemplate.esnext

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Customer segmentation templates are used to give merchants a starting point to create segments.
+ */
+const CustomerSegmentationTemplate = createRemoteComponent('CustomerSegmentationTemplate');
+
+export { CustomerSegmentationTemplate };

package/build/esnext/surfaces/admin/components/Heading/Heading.esnext

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Headings are used as the titles of each major section of an extension.
+ */
+const Heading = createRemoteComponent('Heading');
+
+export { Heading };