@shopify/ui-extensions 0.0.0-internal-20230622171951

package/build/cjs/surfaces/checkout.js

@@ -0,0 +1,88 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var extension = require('./checkout/extension.js');
+var Banner = require('./checkout/components/Banner/Banner.js');
+var BlockLayout = require('./checkout/components/BlockLayout/BlockLayout.js');
+var BlockSpacer = require('./checkout/components/BlockSpacer/BlockSpacer.js');
+var BlockStack = require('./checkout/components/BlockStack/BlockStack.js');
+var Button = require('./checkout/components/Button/Button.js');
+var Checkbox = require('./checkout/components/Checkbox/Checkbox.js');
+var Choice = require('./checkout/components/Choice/Choice.js');
+var ChoiceList = require('./checkout/components/ChoiceList/ChoiceList.js');
+var Divider = require('./checkout/components/Divider/Divider.js');
+var Form = require('./checkout/components/Form/Form.js');
+var Grid = require('./checkout/components/Grid/Grid.js');
+var GridItem = require('./checkout/components/GridItem/GridItem.js');
+var Heading = require('./checkout/components/Heading/Heading.js');
+var HeadingGroup = require('./checkout/components/HeadingGroup/HeadingGroup.js');
+var Icon = require('./checkout/components/Icon/Icon.js');
+var Image = require('./checkout/components/Image/Image.js');
+var InlineLayout = require('./checkout/components/InlineLayout/InlineLayout.js');
+var InlineStack = require('./checkout/components/InlineStack/InlineStack.js');
+var InlineSpacer = require('./checkout/components/InlineSpacer/InlineSpacer.js');
+var Link = require('./checkout/components/Link/Link.js');
+var List = require('./checkout/components/List/List.js');
+var ListItem = require('./checkout/components/ListItem/ListItem.js');
+var PhoneField = require('./checkout/components/PhoneField/PhoneField.js');
+var Pressable = require('./checkout/components/Pressable/Pressable.js');
+var ScrollView = require('./checkout/components/ScrollView/ScrollView.js');
+var Select = require('./checkout/components/Select/Select.js');
+var SkeletonImage = require('./checkout/components/SkeletonImage/SkeletonImage.js');
+var SkeletonText = require('./checkout/components/SkeletonText/SkeletonText.js');
+var SkeletonTextBlock = require('./checkout/components/SkeletonTextBlock/SkeletonTextBlock.js');
+var Spinner = require('./checkout/components/Spinner/Spinner.js');
+var Stepper = require('./checkout/components/Stepper/Stepper.js');
+var Tag = require('./checkout/components/Tag/Tag.js');
+var Text = require('./checkout/components/Text/Text.js');
+var TextBlock = require('./checkout/components/TextBlock/TextBlock.js');
+var TextField = require('./checkout/components/TextField/TextField.js');
+var Tooltip = require('./checkout/components/Tooltip/Tooltip.js');
+var View = require('./checkout/components/View/View.js');
+var style = require('./checkout/style/style.js');
+
+
+
+exports.extend = extension.extend;
+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/utilities/registration.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@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 = core.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;
+}
+
+exports.createExtensionRegistrationFunction = createExtensionRegistrationFunction;

package/build/esm/index.mjs

@@ -0,0 +1 @@
+

package/build/esm/surfaces/admin/components/Badge/Badge.mjs

@@ -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/esm/surfaces/admin/components/Banner/Banner.mjs

@@ -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/esm/surfaces/admin/components/BlockStack/BlockStack.mjs

@@ -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/esm/surfaces/admin/components/Button/Button.mjs

@@ -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/esm/surfaces/admin/components/Card/Card.mjs

@@ -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/esm/surfaces/admin/components/CardSection/CardSection.mjs

@@ -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/esm/surfaces/admin/components/Checkbox/Checkbox.mjs

@@ -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/esm/surfaces/admin/components/CustomerSegmentationTemplate/CustomerSegmentationTemplate.mjs

@@ -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/esm/surfaces/admin/components/Heading/Heading.mjs

@@ -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 };

package/build/esm/surfaces/admin/components/Icon/Icon.mjs

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Icons are small visual indicators from a set of pre-defined glyphs.
+ */
+const Icon = createRemoteComponent('Icon');
+
+export { Icon };

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

@@ -0,0 +1,11 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Use to lay out a horizontal row of components.
+ *
+ * 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 `InlineStack` together.
+ */
+const InlineStack = createRemoteComponent('InlineStack');
+
+export { InlineStack };

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

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Links take users to another place, and usually appear within or directly following a sentence.
+ */
+const Link = createRemoteComponent('Link');
+
+export { Link };

package/build/esm/surfaces/admin/components/Modal/Modal.mjs

@@ -0,0 +1,10 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Modals are overlays that prevent merchants from interacting with the rest of the application until a specific action is taken.
+ *
+ * Modals are disruptive by design, requiring merchants to take an action before they can continue, so use them thoughtfully and sparingly.
+ */
+const Modal = createRemoteComponent('Modal');
+
+export { Modal };

package/build/esm/surfaces/admin/components/OptionList/OptionList.mjs

@@ -0,0 +1,11 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * **Note:** This component is not available in Product Subscription extensions.
+ *
+ * Option lists let you create grouped items. This can include single selection or multiple selection of options.
+ * Option lists are styled differently than choice lists and should not be used within a form, but as a standalone menu.
+ */
+const OptionList = createRemoteComponent('OptionList');
+
+export { OptionList };

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

@@ -0,0 +1,9 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Pressable wraps components to add interactivity with rendering a UI element.
+ * Wrap small UI elements in Pressable to perform actions that don’t fit Button or Link.
+ */
+const Pressable = createRemoteComponent('Pressable');
+
+export { Pressable };

package/build/esm/surfaces/admin/components/Radio/Radio.mjs

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Radio allows merchants to choose a single item from a list.
+ */
+const Radio = createRemoteComponent('Radio');
+
+export { Radio };

package/build/esm/surfaces/admin/components/ResourceItem/ResourceItem.mjs

@@ -0,0 +1,10 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Resource items represent specific objects within a collection, such as products or orders. They provide contextual information on the resource type and link to the object’s detail page.
+ *
+ * A `ResourceItem` should be rendered within a `ResourceList`.
+ */
+const ResourceItem = createRemoteComponent('ResourceItem');
+
+export { ResourceItem };

package/build/esm/surfaces/admin/components/ResourceList/ResourceList.mjs

@@ -0,0 +1,11 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * `ResourceList` displays a filterable collection of objects of the same type, like products or customers.
+ *
+ * `ResourceList` should help merchants find an object and navigate to a full-page representation of it.
+ * A resource list should contain `ResourceItem` components.
+ */
+const ResourceList = createRemoteComponent('ResourceList');
+
+export { ResourceList };

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

@@ -0,0 +1,10 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Select allows merchants to choose one option from a dropdown menu.
+ *
+ * Consider Select when you have 4 or more options, to avoid creating clutter and make your component more scalable.
+ */
+const Select = createRemoteComponent('Select');
+
+export { Select };

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

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Spinners are used to show merchants that your app is loading, or an action is being performed. Generally when a spinner is being used, the user shouldn't be able to interact.
+ */
+const Spinner = createRemoteComponent('Spinner');
+
+export { Spinner };

package/build/esm/surfaces/admin/components/StackItem/StackItem.mjs

@@ -0,0 +1,10 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * By default, each individual element in a Stack is treated as one stack item.
+ *
+ * Wrap multiple elements in a `StackItem` component, and the `Stack` component will treat them as one item.
+ */
+const StackItem = createRemoteComponent('StackItem');
+
+export { StackItem };

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

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * The Text component is used to render text in different sizes, colors, and alignments.
+ */
+const Text = createRemoteComponent('Text');
+
+export { Text };

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

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

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

@@ -0,0 +1,10 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * TextField is a versatile input field that merchants can type into.
+ *
+ * It supports several input formats including numbers.
+ */
+const TextField = createRemoteComponent('TextField');
+
+export { TextField };

package/build/esm/surfaces/admin/components/Thumbnail/Thumbnail.mjs

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Thumbnails are used as a visual anchor and identifier for an object. They should be used along with text to provide context.
+ */
+const Thumbnail = createRemoteComponent('Thumbnail');
+
+export { Thumbnail };

package/build/esm/surfaces/admin/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/admin.mjs

@@ -0,0 +1,26 @@
+export { extend, extension } from './admin/extension.mjs';
+export { Badge } from './admin/components/Badge/Badge.mjs';
+export { Banner } from './admin/components/Banner/Banner.mjs';
+export { BlockStack } from './admin/components/BlockStack/BlockStack.mjs';
+export { Button } from './admin/components/Button/Button.mjs';
+export { Card } from './admin/components/Card/Card.mjs';
+export { CardSection } from './admin/components/CardSection/CardSection.mjs';
+export { Checkbox } from './admin/components/Checkbox/Checkbox.mjs';
+export { CustomerSegmentationTemplate } from './admin/components/CustomerSegmentationTemplate/CustomerSegmentationTemplate.mjs';
+export { Heading } from './admin/components/Heading/Heading.mjs';
+export { Icon } from './admin/components/Icon/Icon.mjs';
+export { InlineStack } from './admin/components/InlineStack/InlineStack.mjs';
+export { Modal } from './admin/components/Modal/Modal.mjs';
+export { Link } from './admin/components/Link/Link.mjs';
+export { OptionList } from './admin/components/OptionList/OptionList.mjs';
+export { Pressable } from './admin/components/Pressable/Pressable.mjs';
+export { Radio } from './admin/components/Radio/Radio.mjs';
+export { ResourceItem } from './admin/components/ResourceItem/ResourceItem.mjs';
+export { ResourceList } from './admin/components/ResourceList/ResourceList.mjs';
+export { Select } from './admin/components/Select/Select.mjs';
+export { Spinner } from './admin/components/Spinner/Spinner.mjs';
+export { StackItem } from './admin/components/StackItem/StackItem.mjs';
+export { Text } from './admin/components/Text/Text.mjs';
+export { TextBlock } from './admin/components/TextBlock/TextBlock.mjs';
+export { TextField } from './admin/components/TextField/TextField.mjs';
+export { Thumbnail } from './admin/components/Thumbnail/Thumbnail.mjs';

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 };

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

@@ -0,0 +1,12 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Heading group controls the heading level of headings nested within it, like H1, H2, H3.
+ *
+ * Use a heading group whenever you use a heading to ensure the experience is the same
+ * for screen reader users. When using a heading, any children related to that
+ * heading should be nested within the same heading group.
+ */
+const HeadingGroup = createRemoteComponent('HeadingGroup');
+
+export { HeadingGroup };

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

@@ -0,0 +1,9 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Icons are pictograms or graphic symbols.
+ * They can act as wayfinding tools or as a means of communicating functionality.
+ */
+const Icon = createRemoteComponent('Icon');
+
+export { Icon };

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

@@ -0,0 +1,8 @@
+import { createRemoteComponent } from '@remote-ui/core';
+
+/**
+ * Image is used for large format, responsive images.
+ */
+const Image = createRemoteComponent('Image');
+
+export { Image };