npm - @shopify/ui-extensions - Versions diffs - 2025.10.1 → 2025.10.3 - Mend

@shopify/ui-extensions 2025.10.1 → 2025.10.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (873) hide show

package/src/surfaces/admin/components/Grid.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.22.1 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -329,7 +329,7 @@ export interface GridProps
    * Adjust spacing between elements.
    *
    * `gap` can either accept:
-   * - a single SpacingKeyword value applied to both axes (e.g. `large-100`)
+   * - a single [SpacingKeyword](https://shopify.dev/docs/api/app-home/using-polaris-components#scale) value applied to both axes (e.g. `large-100`)
    * - OR a pair of values (eg `large-100 large-500`) can be used to set the inline and block axes respectively
    * - OR a [responsive value](https://shopify.dev/docs/api/app-home/using-polaris-components#responsive-values) string with the supported SpacingKeyword as a query value.
    *
@@ -341,7 +341,7 @@ export interface GridProps
    *
    * This overrides the row value of `gap`.
    * `rowGap` either accepts:
-   * - a single SpacingKeyword value (e.g. `large-100`)
+   * - a single [SpacingKeyword](https://shopify.dev/docs/api/app-home/using-polaris-components#scale) value (e.g. `large-100`)
    * - OR a [responsive value](https://shopify.dev/docs/api/app-home/using-polaris-components#responsive-values) string with the supported SpacingKeyword as a query value.
    *
    * @default '' - meaning no override
@@ -352,7 +352,7 @@ export interface GridProps
    *
    * This overrides the column value of `gap`.
    * `columnGap` either accepts:
-   * - a single SpacingKeyword value (e.g. `large-100`)
+   * - a single [SpacingKeyword](https://shopify.dev/docs/api/app-home/using-polaris-components#scale) value (e.g. `large-100`)
    * - OR a [responsive value](https://shopify.dev/docs/api/app-home/using-polaris-components#responsive-values) string with the supported SpacingKeyword as a query value.
    *
    * @default '' - meaning no override

package/src/surfaces/admin/components/GridItem.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.22.1 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Heading/examples/basic-heading.html ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-heading>Product details</s-heading>

package/src/surfaces/admin/components/Heading/examples/basic-heading.jsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-heading>Product details</s-heading>

package/src/surfaces/admin/components/Heading/examples/default.jsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-heading>Online store dashboard</s-heading>

package/src/surfaces/admin/components/Heading/examples/heading-with-custom-accessibility.html ADDED Viewed

@@ -0,0 +1,3 @@
+<s-heading accessibilityRole="presentation" accessibilityVisibility="hidden">
+  Sale badge
+</s-heading>

package/src/surfaces/admin/components/Heading/examples/heading-with-custom-accessibility.jsx ADDED Viewed

@@ -0,0 +1,3 @@
+<s-heading accessibilityRole="presentation" accessibilityVisibility="hidden">
+  Sale badge
+</s-heading>

package/src/surfaces/admin/components/Heading/examples/heading-with-line-clamping.html ADDED Viewed

@@ -0,0 +1,5 @@
+<s-box inlineSize="200px">
+  <s-heading lineClamp="2">
+    Premium organic cotton t-shirt with sustainable manufacturing practices
+  </s-heading>
+</s-box>

package/src/surfaces/admin/components/Heading/examples/heading-with-line-clamping.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+<s-box inlineSize="200px">
+  <s-heading lineClamp={2}>
+    Premium organic cotton t-shirt with sustainable manufacturing practices
+  </s-heading>
+</s-box>

package/src/surfaces/admin/components/Heading/examples/heading-within-section-hierarchy.html ADDED Viewed

@@ -0,0 +1,12 @@
+<s-section>
+  <s-heading>Order information</s-heading>
+  <!-- Renders as h2 -->
+  <s-section>
+    <s-heading>Shipping details</s-heading>
+    <!-- Renders as h3 -->
+    <s-section>
+      <s-heading>Tracking updates</s-heading>
+      <!-- Renders as h4 -->
+    </s-section>
+  </s-section>
+</s-section>

package/src/surfaces/admin/components/Heading/examples/heading-within-section-hierarchy.jsx ADDED Viewed

@@ -0,0 +1,12 @@
+<s-section>
+  <s-heading>Order information</s-heading>
+  {/* Renders as h2 */}
+  <s-section>
+    <s-heading>Shipping details</s-heading>
+    {/* Renders as h3 */}
+    <s-section>
+      <s-heading>Tracking updates</s-heading>
+      {/* Renders as h4 */}
+    </s-section>
+  </s-section>
+</s-section>

package/src/surfaces/admin/components/Heading.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.22.1 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -8,16 +8,13 @@
 /// <reference lib="DOM" />
 import type {ComponentChildren, HeadingProps$1} from './shared.d.ts';
-export type RequiredHeadingProps = Required<HeadingProps$1>;
 export interface HeadingProps
-  extends Pick<
-    HeadingProps$1,
-    'accessibilityRole' | 'accessibilityVisibility' | 'lineClamp'
-  > {
-  accessibilityRole: RequiredHeadingProps['accessibilityRole'];
-  accessibilityVisibility: RequiredHeadingProps['accessibilityVisibility'];
-  lineClamp: RequiredHeadingProps['lineClamp'];
-}
+  extends Required<
+    Pick<
+      HeadingProps$1,
+      'accessibilityRole' | 'accessibilityVisibility' | 'lineClamp'
+    >
+  > {}
 export type Styles = string;
 export type RenderImpl = Omit<ShadowRootInit, 'mode'> & {

package/src/surfaces/admin/components/Icon/examples/basic-usage.html ADDED Viewed

@@ -0,0 +1,7 @@
+<s-stack direction="inline" gap="base">
+  <s-icon type="home"></s-icon>
+  <s-icon type="edit"></s-icon>
+  <s-icon type="duplicate"></s-icon>
+  <s-icon type="save"></s-icon>
+  <s-icon type="export"></s-icon>
+</s-stack>

package/src/surfaces/admin/components/Icon/examples/basic-usage.jsx ADDED Viewed

@@ -0,0 +1,7 @@
+<s-stack direction="inline" gap="base">
+  <s-icon type="home" />
+  <s-icon type="edit" />
+  <s-icon type="duplicate" />
+  <s-icon type="save" />
+  <s-icon type="export" />
+</s-stack>

package/src/surfaces/admin/components/Icon/examples/default.html CHANGED Viewed

@@ -1,4 +1,6 @@
-<s-icon type="home"></s-icon>
-<s-icon type="order"></s-icon>
-<s-icon type="product"></s-icon>
-<s-icon type="settings"></s-icon>
+<s-stack direction="inline" gap="base">
+  <s-icon type="home"></s-icon>
+  <s-icon type="order"></s-icon>
+  <s-icon type="product"></s-icon>
+  <s-icon type="settings"></s-icon>
+</s-stack>

package/src/surfaces/admin/components/Icon/examples/default.jsx ADDED Viewed

@@ -0,0 +1,6 @@
+<s-stack direction="inline" gap="base">
+  <s-icon type="home" />
+  <s-icon type="order" />
+  <s-icon type="product" />
+  <s-icon type="settings" />
+</s-stack>

package/src/surfaces/admin/components/Icon/examples/in-badge-components.html ADDED Viewed

@@ -0,0 +1,4 @@
+<s-stack direction="inline" gap="base">
+  <s-badge tone="success" icon="check-circle">Active</s-badge>
+  <s-badge tone="warning" icon="alert-triangle">Pending</s-badge>
+</s-stack>

package/src/surfaces/admin/components/Icon/examples/in-badge-components.jsx ADDED Viewed

@@ -0,0 +1,8 @@
+<s-stack direction="inline" gap="base">
+  <s-badge tone="success" icon="check-circle">
+    Active
+  </s-badge>
+  <s-badge tone="warning" icon="alert-triangle">
+    Pending
+  </s-badge>
+</s-stack>

package/src/surfaces/admin/components/Icon/examples/in-button-components.html ADDED Viewed

@@ -0,0 +1,6 @@
+<s-button-group>
+  <s-button slot="secondary-actions" icon="plus">Add product</s-button>
+  <s-button slot="secondary-actions" icon="delete" tone="critical">
+    Delete
+  </s-button>
+</s-button-group>

package/src/surfaces/admin/components/Icon/examples/in-button-components.jsx ADDED Viewed

@@ -0,0 +1,8 @@
+<s-button-group>
+  <s-button slot="secondary-actions" icon="plus">
+    Add product
+  </s-button>
+  <s-button slot="secondary-actions" icon="delete" tone="critical">
+    Delete
+  </s-button>
+</s-button-group>

package/src/surfaces/admin/components/Icon/examples/small-size.html ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-icon type="search" size="small"></s-icon>

package/src/surfaces/admin/components/Icon/examples/small-size.jsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-icon type="search" size="small" />

package/src/surfaces/admin/components/Icon/examples/subdued-color.html ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-icon type="question-circle" color="subdued"></s-icon>

package/src/surfaces/admin/components/Icon/examples/subdued-color.jsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-icon type="question-circle" color="subdued" />

package/src/surfaces/admin/components/Icon/examples/with-id-property.html ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-icon type="settings" id="settings-icon"></s-icon>

package/src/surfaces/admin/components/Icon/examples/with-id-property.jsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-icon type="settings" id="settings-icon" />

package/src/surfaces/admin/components/Icon/examples/with-interest-relationship.html ADDED Viewed

@@ -0,0 +1,4 @@
+<s-tooltip id="info-tooltip">
+  SKU must be unique across all products and cannot be changed after creation
+</s-tooltip>
+<s-icon type="info" tone="info" interestFor="info-tooltip" />

package/src/surfaces/admin/components/Icon/examples/with-interest-relationship.jsx ADDED Viewed

@@ -0,0 +1,6 @@
+<>
+  <s-tooltip id="info-tooltip">
+    SKU must be unique across all products and cannot be changed after creation
+  </s-tooltip>
+  <s-icon type="info" tone="info" interestFor="info-tooltip" />
+</>

package/src/surfaces/admin/components/Icon/examples/with-semantic-tone.html ADDED Viewed

@@ -0,0 +1,6 @@
+<s-stack direction="inline" gap="base">
+  <s-icon type="alert-circle" tone="warning"></s-icon>
+  <s-icon type="check-circle" tone="success"></s-icon>
+  <s-icon type="info" tone="info"></s-icon>
+  <s-icon type="alert-triangle" tone="caution"></s-icon>
+</s-stack>

package/src/surfaces/admin/components/Icon/examples/with-semantic-tone.jsx ADDED Viewed

@@ -0,0 +1,6 @@
+<s-stack direction="inline" gap="base">
+  <s-icon type="alert-circle" tone="warning" />
+  <s-icon type="check-circle" tone="success" />
+  <s-icon type="info" tone="info" />
+  <s-icon type="alert-triangle" tone="caution" />
+</s-stack>

package/src/surfaces/admin/components/Icon.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.22.1 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Image/examples/auto-sized-image.html ADDED Viewed

@@ -0,0 +1,5 @@
+<s-image
+  src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+  alt="Product image"
+  inlineSize="auto"
+></s-image>

package/src/surfaces/admin/components/Image/examples/auto-sized-image.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+<s-image
+  src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+  alt="Product image"
+  inlineSize="auto"
+ />

package/src/surfaces/admin/components/Image/examples/basic-usage.html ADDED Viewed

@@ -0,0 +1,4 @@
+<s-image
+  src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+  alt="Product image"
+></s-image>

package/src/surfaces/admin/components/Image/examples/basic-usage.jsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-image src="https://cdn.shopify.com/static/sample-product/House-Plant1.png" alt="Product image" />

package/src/surfaces/admin/components/Image/examples/decorative-image.html ADDED Viewed

@@ -0,0 +1,6 @@
+<s-image
+  src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+  alt=""
+  accessibilityRole="presentation"
+  objectFit="cover"
+></s-image>

package/src/surfaces/admin/components/Image/examples/decorative-image.jsx ADDED Viewed

@@ -0,0 +1,6 @@
+<s-image
+  src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+  alt=""
+  accessibilityRole="presentation"
+  objectFit="cover"
+ />

package/src/surfaces/admin/components/Image/examples/default.jsx ADDED Viewed

@@ -0,0 +1,6 @@
+<s-image
+  src="https://cdn.shopify.com/static/images/polaris/image-wc_src.png"
+  alt="Four pixelated characters ready to build amazing Shopify apps"
+  aspectRatio="59/161"
+  inlineSize="auto"
+ />

package/src/surfaces/admin/components/Image/examples/responsive-images-with-srcset.html ADDED Viewed

@@ -0,0 +1,9 @@
+<s-image
+  src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+  srcSet="https://cdn.shopify.com/static/sample-product/House-Plant1.png 400w,
+          https://cdn.shopify.com/static/sample-product/House-Plant1.png 800w"
+  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 400px"
+  alt="Product detail"
+  aspectRatio="16/9"
+  objectFit="cover"
+></s-image>

package/src/surfaces/admin/components/Image/examples/responsive-images-with-srcset.jsx ADDED Viewed

@@ -0,0 +1,9 @@
+<s-image
+  src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+  srcSet="https://cdn.shopify.com/static/sample-product/House-Plant1.png 400w,
+          https://cdn.shopify.com/static/sample-product/House-Plant1.png 800w"
+  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 400px"
+  alt="Product detail"
+  aspectRatio="16/9"
+  objectFit="cover"
+ />

package/src/surfaces/admin/components/Image/examples/responsive-layout-with-aspect-ratio.html ADDED Viewed

@@ -0,0 +1,7 @@
+<s-image
+  src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+  alt="Featured product"
+  aspectRatio="16/9"
+  objectFit="cover"
+  loading="lazy"
+></s-image>

package/src/surfaces/admin/components/Image/examples/responsive-layout-with-aspect-ratio.jsx ADDED Viewed

@@ -0,0 +1,7 @@
+<s-image
+  src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+  alt="Featured product"
+  aspectRatio="16/9"
+  objectFit="cover"
+  loading="lazy"
+ />

package/src/surfaces/admin/components/Image/examples/with-border-styling.html ADDED Viewed

@@ -0,0 +1,12 @@
+<s-box inlineSize="300px">
+  <s-image
+    src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+    alt="Product thumbnail"
+    borderWidth="large"
+    borderStyle="solid"
+    borderColor="strong"
+    borderRadius="large"
+    objectFit="cover"
+    aspectRatio="1/1"
+  ></s-image>
+</s-box>

package/src/surfaces/admin/components/Image/examples/with-border-styling.jsx ADDED Viewed

@@ -0,0 +1,12 @@
+<s-box inlineSize="300px">
+  <s-image
+    src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+    alt="Product thumbnail"
+    borderWidth="large"
+    borderStyle="solid"
+    borderColor="strong"
+    borderRadius="large"
+    objectFit="cover"
+    aspectRatio="1/1"
+   />
+</s-box>

package/src/surfaces/admin/components/Image/examples/within-layout-components.html ADDED Viewed

@@ -0,0 +1,26 @@
+<s-grid gridTemplateColumns="repeat(3, 150px)" gap="base" alignItems="center">
+  <s-image
+    src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+    alt="Main view"
+    aspectRatio="1/1"
+    objectFit="cover"
+    borderRadius="base"
+    inlineSize="fill"
+  ></s-image>
+  <s-image
+    src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+    alt="Side view"
+    aspectRatio="1/1"
+    objectFit="cover"
+    borderRadius="base"
+    inlineSize="fill"
+  ></s-image>
+  <s-image
+    src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+    alt="Detail view"
+    aspectRatio="1/1"
+    objectFit="cover"
+    borderRadius="base"
+    inlineSize="fill"
+  ></s-image>
+</s-grid>

package/src/surfaces/admin/components/Image/examples/within-layout-components.jsx ADDED Viewed

@@ -0,0 +1,26 @@
+<s-grid gridTemplateColumns="repeat(3, 150px)" gap="base" alignItems="center">
+  <s-image
+    src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+    alt="Main view"
+    aspectRatio="1/1"
+    objectFit="cover"
+    borderRadius="base"
+    inlineSize="fill"
+   />
+  <s-image
+    src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+    alt="Side view"
+    aspectRatio="1/1"
+    objectFit="cover"
+    borderRadius="base"
+    inlineSize="fill"
+   />
+  <s-image
+    src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+    alt="Detail view"
+    aspectRatio="1/1"
+    objectFit="cover"
+    borderRadius="base"
+    inlineSize="fill"
+   />
+</s-grid>

package/src/surfaces/admin/components/Image.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.22.1 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Link/examples/basic-links-in-paragraph.html ADDED Viewed

@@ -0,0 +1,3 @@
+<s-paragraph>
+  Your product catalog is empty. Start by <s-link href="javascript:void(0)">adding your first product</s-link> or <s-link href="javascript:void(0)">importing existing inventory</s-link>.
+</s-paragraph>

package/src/surfaces/admin/components/Link/examples/basic-links-in-paragraph.jsx ADDED Viewed

@@ -0,0 +1,3 @@
+<s-paragraph>
+  Your product catalog is empty. Start by <s-link href="javascript:void(0)">adding your first product</s-link> or <s-link href="javascript:void(0)">importing existing inventory</s-link>.
+</s-paragraph>

package/src/surfaces/admin/components/Link/examples/critical-context-links.html ADDED Viewed

@@ -0,0 +1,3 @@
+<s-paragraph tone="critical">
+  Your store will be suspended in 24 hours due to unpaid balance. <s-link href="javascript:void(0)">Update payment method</s-link> to avoid service interruption.
+</s-paragraph>

package/src/surfaces/admin/components/Link/examples/critical-context-links.jsx ADDED Viewed

@@ -0,0 +1,3 @@
+<s-paragraph tone="critical">
+  Your store will be suspended in 24 hours due to unpaid balance. <s-link href="javascript:void(0)">Update payment method</s-link> to avoid service interruption.
+</s-paragraph>

package/src/surfaces/admin/components/Link/examples/default.jsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-link href="javascript:void(0)">fufilling orders</s-link>

package/src/surfaces/admin/components/Link/examples/download-links.html ADDED Viewed

@@ -0,0 +1,3 @@
+<s-paragraph>
+  Export your customer data for marketing analysis. <s-link href="javascript:void(0)" download="customer-export.csv">Download customer list</s-link>
+</s-paragraph>

package/src/surfaces/admin/components/Link/examples/download-links.jsx ADDED Viewed

@@ -0,0 +1,3 @@
+<s-paragraph>
+  Export your customer data for marketing analysis. <s-link href="javascript:void(0)" download="customer-export.csv">Download customer list</s-link>
+</s-paragraph>

package/src/surfaces/admin/components/Link/examples/external-links.html ADDED Viewed

@@ -0,0 +1,5 @@
+<s-box padding="base">
+  <s-paragraph>
+    Need help with policies? Read our <s-link href="javascript:void(0)" target="_blank">billing docs</s-link> or review the <s-link href="javascript:void(0)" target="_blank">terms of service</s-link>.
+  </s-paragraph>
+</s-box>

package/src/surfaces/admin/components/Link/examples/external-links.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+<s-box padding="base">
+  <s-paragraph>
+    Need help with policies? Read our <s-link href="javascript:void(0)" target="_blank">billing docs</s-link> or review the <s-link href="javascript:void(0)" target="_blank">terms of service</s-link>.
+  </s-paragraph>
+</s-box>

package/src/surfaces/admin/components/Link/examples/links-in-banner-context.html ADDED Viewed

@@ -0,0 +1,5 @@
+<s-banner tone="warning">
+  <s-paragraph>
+    Your inventory for "Vintage t-shirt" is running low (3 remaining). <s-link>Restock inventory</s-link>
+  </s-paragraph>
+</s-banner>

package/src/surfaces/admin/components/Link/examples/links-in-banner-context.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+<s-banner tone="warning">
+  <s-paragraph>
+    Your inventory for "Vintage t-shirt" is running low (3 remaining).  <s-link>Restock inventory</s-link>
+  </s-paragraph>
+</s-banner>

package/src/surfaces/admin/components/Link/examples/links-in-banner.html ADDED Viewed

@@ -0,0 +1,6 @@
+<s-banner tone="info">
+  <s-paragraph>
+    Black Friday campaigns are now available!
+    <s-link href="javascript:void(0)">Create your campaign</s-link>
+  </s-paragraph>
+</s-banner>

package/src/surfaces/admin/components/Link/examples/links-in-banner.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+<s-banner tone="info">
+  <s-paragraph>
+    Black Friday campaigns are now available!  <s-link href="javascript:void(0)">Create your campaign</s-link>
+  </s-paragraph>
+</s-banner>

package/src/surfaces/admin/components/Link/examples/links-in-box-container.html ADDED Viewed

@@ -0,0 +1,5 @@
+<s-box padding="base" background="base" borderWidth="base" borderColor="base">
+  <s-paragraph>
+    Boost your store's conversion with professional themes. <s-link href="javascript:void(0)">Browse theme store</s-link> or <s-link href="javascript:void(0)">customize your current theme</s-link>.
+  </s-paragraph>
+</s-box>

package/src/surfaces/admin/components/Link/examples/links-in-box-container.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+<s-box padding="base" background="base" borderWidth="base" borderColor="base">
+  <s-paragraph>
+    Boost your store's conversion with professional themes. <s-link href="javascript:void(0)">Browse theme store</s-link> or <s-link href="javascript:void(0)">customize your current theme</s-link>.
+  </s-paragraph>
+</s-box>

package/src/surfaces/admin/components/Link/examples/links-in-subdued-paragraph.html ADDED Viewed

@@ -0,0 +1,3 @@
+<s-paragraph color="subdued">
+  Need help setting up shipping rates? <s-link href="javascript:void(0)" target="_blank">View shipping guide</s-link> or <s-link href="javascript:void(0)">contact merchant support</s-link>.
+</s-paragraph>

package/src/surfaces/admin/components/Link/examples/links-in-subdued-paragraph.jsx ADDED Viewed

@@ -0,0 +1,3 @@
+<s-paragraph color="subdued">
+  Need help setting up shipping rates? <s-link>View shipping guide</s-link> or <s-link>contact merchant support</s-link>.
+</s-paragraph>

package/src/surfaces/admin/components/Link/examples/links-with-auto-tone.html ADDED Viewed

@@ -0,0 +1,3 @@
+<s-paragraph>
+  You have 15 pending orders to fulfill. <s-link href="javascript:void(0)">Review unfulfilled orders</s-link> to keep customers happy.
+</s-paragraph>

package/src/surfaces/admin/components/Link/examples/links-with-auto-tone.jsx ADDED Viewed

@@ -0,0 +1,3 @@
+<s-paragraph>
+  You have 15 pending orders to fulfill. <s-link href="javascript:void(0)">Review unfulfilled orders</s-link> to keep customers happy.
+</s-paragraph>

package/src/surfaces/admin/components/Link/examples/links-with-different-tones.html ADDED Viewed

@@ -0,0 +1,25 @@
+<s-stack gap="base">
+  <s-paragraph>
+    Default tone: <s-link>View orders</s-link>
+  </s-paragraph>
+  <s-paragraph tone="success">
+    Neutral tone: <s-link>Inventory help</s-link>
+  </s-paragraph>
+  <s-paragraph tone="critical">
+    Critical tone: <s-link>Close store</s-link>
+  </s-paragraph>
+  <s-paragraph tone="warning">
+    Warning tone: <s-link>Update billing info</s-link>
+  </s-paragraph>
+  <s-paragraph tone="info">
+    Info tone: <s-link>Learn more about reports</s-link>
+  </s-paragraph>
+  <s-paragraph tone="caution">
+    Subdued tone: <s-link>View archived products</s-link>
+  </s-paragraph>
+</s-stack>

package/src/surfaces/admin/components/Link/examples/links-with-different-tones.jsx ADDED Viewed

@@ -0,0 +1,25 @@
+<s-stack gap="base">
+  <s-paragraph>
+    Default tone: <s-link>View orders</s-link>
+  </s-paragraph>
+  <s-paragraph tone="success">
+    Success tone: <s-link>Inventory help</s-link>
+  </s-paragraph>
+  <s-paragraph tone="critical">
+    Critical tone: <s-link>Close store</s-link>
+  </s-paragraph>
+  <s-paragraph tone="warning">
+    Warning tone: <s-link>Update billing info</s-link>
+  </s-paragraph>
+  <s-paragraph tone="info">
+    Info tone: <s-link>Learn more about reports</s-link>
+  </s-paragraph>
+  <s-paragraph tone="caution">
+    Caution tone: <s-link>View archived products</s-link>
+  </s-paragraph>
+</s-stack>

package/src/surfaces/admin/components/Link/examples/links-with-language-attribute.html ADDED Viewed

@@ -0,0 +1,3 @@
+<s-paragraph>
+  Voir en français: <s-link lang="fr">Gérer les produits</s-link>
+</s-paragraph>

package/src/surfaces/admin/components/Link/examples/links-with-language-attribute.jsx ADDED Viewed

@@ -0,0 +1,3 @@
+<s-paragraph>
+  Voir en français: <s-link lang="fr">Gérer les produits</s-link>
+</s-paragraph>