Add textAlign to Paragraph and improve JSDoc

Replace the 'type' prop with 'textAlign' on ParagraphElementProps
to align with the underlying s-paragraph web component change.

- Add textAlign prop ('start' | 'end' | 'center' | 'auto')
- Remove type prop ('paragraph' | 'small')
- Add @publicdocs annotations
- Improve JSDoc for BaseElementProps and BaseElementPropsWithChildren

Author: justinhenricks

.changeset/paragraph-text-align.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': patch
+---
+
+Add `textAlign` prop to the checkout `Paragraph` component, supporting `'start'`, `'end'`, `'center'`, and `'auto'` values.

packages/ui-extensions/src/surfaces/checkout/components/Paragraph.d.ts

@@ -11,17 +11,30 @@
 import type {ParagraphProps$1} from './components-shared.d.ts';
 
 /**
- * Used when an element does not have children.
+ * The base properties for elements that don't have children, providing essential attributes like keys and refs for component management.
  */
 export interface BaseElementProps<TClass = HTMLElement> {
+    /**
+     * A unique identifier for this element within its parent. This is used by the rendering engine for efficient reconciliation when lists change.
+     */
     key?: preact.Key;
+    /**
+     * A reference to the underlying DOM element, typically created using `useRef()`. This allows you to access and manipulate the DOM element directly in your component logic.
+     */
     ref?: preact.Ref<TClass>;
+    /**
+     * Assigns the element to a named slot in a parent component that uses slot-based composition patterns.
+     */
     slot?: Lowercase<string>;
 }
 /**
- * Used when an element has children.
+ * The base properties for elements that have children, extending `BaseElementProps` with children support.
+ * @publicDocs
  */
 export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends BaseElementProps<TClass> {
+    /**
+     * The child elements to render within this component.
+     */
     children?: preact.ComponentChildren;
 }
 
@@ -31,19 +44,17 @@ export interface ParagraphElementProps extends Pick<ParagraphProps$1, 'accessibi
     color?: Extract<ParagraphProps$1['color'], 'subdued' | 'base'>;
     tone?: Extract<ParagraphProps$1['tone'], 'auto' | 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'custom'>;
     /**
-     * The semantic type and styling treatment for the paragraph content.
-     *
-     * Other presentation properties on `s-paragraph` override the default styling.
+     * Sets the alignment of the text.
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
      *
-     * - `paragraph`: A semantic type that indicates the text is a structural grouping of related content.
-     * - `small`: A semantic type that indicates the text is considered less important than the main content, but is still necessary for the reader to understand.
-     *
-     * @default 'paragraph'
+     * @default 'auto'
      */
-    type?: Extract<ParagraphProps$1['type'], 'paragraph' | 'small'>;
+    textAlign?: 'start' | 'end' | 'center' | 'auto';
 }
+/** @publicDocs */
 export interface ParagraphElement extends ParagraphElementProps, Omit<HTMLElement, 'id' | 'dir' | 'lang'> {
 }
+/** @publicDocs */
 export interface ParagraphProps extends ParagraphElementProps {
 }
 declare global {