@shopify/ui-extensions 2025.7.1 → 2025.7.3

package/src/surfaces/point-of-sale/render/components/Icon/Icon.ts

@@ -4,274 +4,280 @@ import {createRemoteComponent} from '@remote-ui/core';
  * @deprecated Use `IconName` instead. These deprecated icon names will be removed in 2025-10.
  */
 export type DeprecatedIconName =
-  | 'add-customer'
-  | 'analytics'
-  | 'apps'
-  | 'arrow'
-  | 'arrow-left'
-  | 'backspace'
-  | 'card-reader'
-  | 'call'
-  | 'cancel'
-  | 'not-stocked'
-  | 'cash'
-  | 'checkmark'
-  | 'caret-down'
-  | 'checkmark-active'
-  | 'checkmark-inactive'
-  | 'chevron-up'
-  | 'chevron-right'
-  | 'chevron-down'
-  | 'circle-alert'
-  | 'circle-cancel'
-  | 'circle-checkmark'
-  | 'circle-disconnected'
-  | 'circle-info'
-  | 'circle-outline'
-  | 'clock'
-  | 'collections'
-  | 'copy'
-  | 'credit-card'
-  | 'custom-payment'
-  | 'custom-sale'
-  | 'discount'
-  | 'external-link'
-  | 'flag'
-  | 'flip-camera'
-  | 'gallery-view'
-  | 'gift-card'
-  | 'help'
-  | 'hide-keyboard'
-  | 'home'
-  | 'horizontal-dots'
-  | 'keypad'
-  | 'lightning'
-  | 'link'
-  | 'list'
-  | 'list-view'
-  | 'lock'
-  | 'mail'
-  | 'available-at-other-locations'
-  | 'menu'
-  | 'minus'
-  | 'mobile'
-  | 'note-report'
-  | 'drawer'
-  | 'orders'
-  | 'shopify-payments'
-  | 'play-button'
-  | 'plus'
-  | 'products'
-  | 'radio-active'
-  | 'radio-inactive'
-  | 'rearrange'
-  | 'receipt'
-  | 'refresh'
-  | 'register'
-  | 'retrieve-cart'
-  | 'image-placeholder'
-  | 'save-cart'
-  | 'scan-barcode'
-  | 'search'
-  | 'send'
-  | 'settings'
-  | 'shipment'
-  | 'split-payment'
-  | 'sort'
-  | 'staff'
-  | 'star'
-  | 'unordered-list'
-  | 'connectivity-warning'
-  | 'internet'
-  | 'delivery'
-  | 'shop-pay';
+  | 'add-customer' /** Add customer symbol. Use for creating new customer accounts. Removed in version 2025-10. Use `'customer-outlined'` instead. */
+  | 'analytics' /** Analytics symbol. Use for data analysis and reports. Removed in version 2025-10. Use `'analytics'` from `IconName` instead. */
+  | 'apps' /** Applications symbol. Use for app launchers. Removed in version 2025-10. Use `'apps'` from `IconName` instead. */
+  | 'arrow' /** A generic arrow symbol. Removed in version 2025-10. Use specific directional arrows instead (`'arrow-up'`, `'arrow-down'`, `'arrow-left'`, `'arrow-right'`). */
+  | 'arrow-left' /** Left arrow symbol. Removed in version 2025-10. Use `'arrow-left'` from `IconName` instead. */
+  | 'backspace' /** A backspace symbol. Removed in version 2025-10. Use `'backspace'` from `IconName` instead. */
+  | 'card-reader' /** Card reader device symbol. Removed in version 2025-10. Use `'card-reader'` from `IconName` instead. */
+  | 'call' /** A phone call symbol. Removed in version 2025-10. Use `'call'` from `IconName` instead. */
+  | 'cancel' /** A cancel symbol. Removed in version 2025-10. Use `'cancel'` from `IconName` instead. */
+  | 'not-stocked' /** Not stocked symbol. Removed in version 2025-10. Use `'not-stocked'` from `IconName` instead. */
+  | 'cash' /** A cash symbol. Removed in version 2025-10. Use `'cash'` from `IconName` instead. */
+  | 'checkmark' /** A checkmark symbol. Removed in version 2025-10. Use `'checkmark'` from `IconName` instead. */
+  | 'caret-down' /** Small downward caret. Removed in version 2025-10. Use `'caret-down'` from `IconName` instead. */
+  | 'checkmark-active' /** Active checkmark symbol. Removed in version 2025-10. Use `'checkmark-active'` from `IconName` instead. */
+  | 'checkmark-inactive' /** Inactive checkmark symbol. Removed in version 2025-10. Use `'checkmark-inactive'` from `IconName` instead. */
+  | 'chevron-up' /** Upward chevron. Removed in version 2025-10. Use `'chevron-up'` from `IconName` instead. */
+  | 'chevron-right' /** Rightward chevron. Removed in version 2025-10. Use `'chevron-right'` from `IconName` instead. */
+  | 'chevron-down' /** Downward chevron. Removed in version 2025-10. Use `'chevron-down'` from `IconName` instead. */
+  | 'circle-alert' /** Alert symbol in circle. Removed in version 2025-10. Use `'circle-alert'` from `IconName` instead. */
+  | 'circle-cancel' /** Cancel symbol in circle. Removed in version 2025-10. Use `'circle-cancel'` from `IconName` instead. */
+  | 'circle-checkmark' /** Checkmark in circle. Removed in version 2025-10. Use `'circle-checkmark'` from `IconName` instead. */
+  | 'circle-disconnected' /** Disconnected circle symbol. Removed in version 2025-10. Use `'circle-disconnected'` from `IconName` instead. */
+  | 'circle-info' /** Information symbol in circle. Removed in version 2025-10. Use `'circle-info'` from `IconName` instead. */
+  | 'circle-outline' /** Simple circle outline. Removed in version 2025-10. Use `'circle-outline'` from `IconName` instead. */
+  | 'clock' /** Clock or time symbol. Removed in version 2025-10. Use `'clock'` from `IconName` instead. */
+  | 'collections' /** Product collections symbol. Removed in version 2025-10. Use `'collection'` from `IconName` instead. */
+  | 'copy' /** Copy or duplicate symbol. Removed in version 2025-10. Use `'copy'` from `IconName` instead. */
+  | 'credit-card' /** Credit card symbol. Removed in version 2025-10. Use `'credit-card'` from `IconName` instead. */
+  | 'custom-payment' /** Custom payment method symbol. Removed in version 2025-10. Use `'custom-payment'` from `IconName` instead. */
+  | 'custom-sale' /** Custom sale symbol. Removed in version 2025-10. Use `'custom-sale'` from `IconName` instead. */
+  | 'discount' /** Discount or sale symbol. Removed in version 2025-10. Use `'discount'` from `IconName` instead. */
+  | 'external-link' /** External link symbol. Removed in version 2025-10. Use `'external-link'` from `IconName` instead. */
+  | 'flag' /** Flag or marker symbol. Removed in version 2025-10. Use `'flag'` from `IconName` instead. */
+  | 'flip-camera' /** Camera rotation or flip symbol. Removed in version 2025-10. Use `'flip-camera'` from `IconName` instead. */
+  | 'gallery-view' /** Gallery view symbol. Removed in version 2025-10. Use `'gallery-view'` from `IconName` instead. */
+  | 'gift-card' /** Gift card symbol. Removed in version 2025-10. Use `'gift-card'` from `IconName` instead. */
+  | 'help' /** Help symbol. Removed in version 2025-10. Use `'help'` from `IconName` instead. */
+  | 'hide-keyboard' /** Hide keyboard symbol. Removed in version 2025-10. Use `'hide-keyboard'` from `IconName` instead. */
+  | 'home' /** Home symbol. Removed in version 2025-10. Use `'home-filled'` or `'home-outlined'` from `IconName` instead. */
+  | 'horizontal-dots' /** Horizontal dots or more options symbol. Removed in version 2025-10. Use `'horizontal-dots'` from `IconName` instead. */
+  | 'keypad' /** Numeric keypad symbol. Removed in version 2025-10. Use `'keypad'` from `IconName` instead. */
+  | 'lightning' /** Lightning bolt symbol. Removed in version 2025-10. Use `'lightning'` from `IconName` instead. */
+  | 'link' /** Link or chain symbol. Removed in version 2025-10. Use `'link'` from `IconName` instead. */
+  | 'list' /** List symbol. Removed in version 2025-10. Use `'list'` from `IconName` instead. */
+  | 'list-view' /** List view layout symbol. Removed in version 2025-10. Use `'list-view'` from `IconName` instead. */
+  | 'lock' /** Lock or security symbol. Removed in version 2025-10. Use `'lock'` from `IconName` instead. */
+  | 'mail' /** Email or message symbol. Removed in version 2025-10. Use `'mail'` from `IconName` instead. */
+  | 'available-at-other-locations' /** Available at other locations symbol. Removed in version 2025-10. Use appropriate `IconName` alternative. */
+  | 'menu' /** Menu symbol. Removed in version 2025-10. Use `'horizontal-dots'` or other `IconName` alternative. */
+  | 'minus' /** Minus or subtract symbol. Removed in version 2025-10. Use `'minus'` from `IconName` instead. */
+  | 'mobile' /** Mobile phone symbol. Removed in version 2025-10. Use `'mobile'` from `IconName` instead. */
+  | 'note-report' /** Note or report symbol. Removed in version 2025-10. Use `'note-report'` from `IconName` instead. */
+  | 'drawer' /** Cash drawer symbol. Removed in version 2025-10. Use `'drawer'` from `IconName` instead. */
+  | 'orders' /** Orders symbol. Removed in version 2025-10. Use `'orders-filled'` or `'orders-outlined'` from `IconName` instead. */
+  | 'shopify-payments' /** Shopify payments symbol. Removed in version 2025-10. Use `'shopify-payments'` from `IconName` instead. */
+  | 'play-button' /** Play button symbol. Removed in version 2025-10. Use `'play-button'` from `IconName` instead. */
+  | 'plus' /** Plus or add symbol. Removed in version 2025-10. Use `'plus'` from `IconName` instead. */
+  | 'products' /** Products symbol. Removed in version 2025-10. Use `'products-filled'` or `'products-outlined'` from `IconName` instead. */
+  | 'radio-active' /** Active radio button symbol. Removed in version 2025-10. Use `'radio-active'` from `IconName` instead. */
+  | 'radio-inactive' /** Inactive radio button symbol. Removed in version 2025-10. Use `'radio-inactive'` from `IconName` instead. */
+  | 'rearrange' /** Rearrange or reorder symbol. Removed in version 2025-10. Use `'rearrange'` from `IconName` instead. */
+  | 'receipt' /** Receipt symbol. Removed in version 2025-10. Use `'receipt'` from `IconName` instead. */
+  | 'refresh' /** Refresh or reload symbol. Removed in version 2025-10. Use `'refresh'` from `IconName` instead. */
+  | 'register' /** Cash register symbol. Removed in version 2025-10. Use `'register'` from `IconName` instead. */
+  | 'retrieve-cart' /** Retrieve cart symbol. Removed in version 2025-10. Use `'retrieve-cart'` from `IconName` instead. */
+  | 'image-placeholder' /** Image placeholder symbol. Removed in version 2025-10. Use `'image'` from `IconName` instead. */
+  | 'save-cart' /** Save cart symbol. Removed in version 2025-10. Use `'save-cart'` from `IconName` instead. */
+  | 'scan-barcode' /** Barcode scanning symbol. Removed in version 2025-10. Use `'scan-barcode'` from `IconName` instead. */
+  | 'search' /** Search or magnifying glass symbol. Removed in version 2025-10. Use `'search'` from `IconName` instead. */
+  | 'send' /** Send or submit symbol. Removed in version 2025-10. Use `'send'` from `IconName` instead. */
+  | 'settings' /** Settings or gear symbol. Removed in version 2025-10. Use `'settings'` from `IconName` instead. */
+  | 'shipment' /** Shipment symbol. Removed in version 2025-10. Use `'fulfillment-shipment'` from `IconName` instead. */
+  | 'split-payment' /** Split payment symbol. Removed in version 2025-10. Use `'split-payment'` from `IconName` instead. */
+  | 'sort' /** Sort or arrange symbol. Removed in version 2025-10. Use `'sort'` from `IconName` instead. */
+  | 'staff' /** Staff or employee symbol. Removed in version 2025-10. Use `'staff'` from `IconName` instead. */
+  | 'star' /** Star symbol. Removed in version 2025-10. Use `'star'` from `IconName` instead. */
+  | 'unordered-list' /** Unordered list symbol. Removed in version 2025-10. Use `'unordered-list'` from `IconName` instead. */
+  | 'connectivity-warning' /** Connectivity warning symbol. Removed in version 2025-10. Use `'connectivity-issue'` from `IconName` instead. */
+  | 'internet' /** Internet connectivity symbol. Removed in version 2025-10. Use `'connectivity'` or `'no-internet'` from `IconName` instead. */
+  | 'delivery' /** Delivery symbol. Removed in version 2025-10. Use `'fulfillment-delivery'` from `IconName` instead. */
+  | 'shop-pay' /** Shop Pay symbol. Removed in version 2025-10. Use `'shop-pay'` from `IconName` instead. */;
 
 /**
  * @deprecated Use `IconSize` instead. These deprecated icon sizes will be removed in 2025-10.
  */
 export type DeprecatedIconSize =
-  | 'minor'
-  | 'major'
-  | 'spot'
-  | 'caption'
-  | 'badge';
+  | 'minor' /** A minor size for small elements. Removed in version 2025-10. Use `'s'` or `'m'` size instead. */
+  | 'major' /** A major size for prominent elements. Removed in version 2025-10. Use `'l'` or `'xl'` size instead. */
+  | 'spot' /** A spot size for specific use cases. Removed in version 2025-10. Use `'m'` or `'l'` size instead. */
+  | 'caption' /** A caption size for small text accompaniment. Removed in version 2025-10. Use `'s'` size instead. */
+  | 'badge' /** A badge size for small indicators. Removed in version 2025-10. Use `'s'` size instead. */;
 
 export type IconName =
-  | 'add-customer'
-  | 'activity'
-  | 'analytics'
-  | 'apps'
-  | 'arrow-down'
-  | 'arrow-left'
-  | 'arrow-right'
-  | 'arrow-up'
-  | 'backspace'
-  | 'call'
-  | 'cancel-fulfillment'
-  | 'cancel'
-  | 'card-reader'
-  | 'caret-down'
-  | 'caret-up'
-  | 'cart-filled'
-  | 'cart-outlined'
-  | 'cash'
-  | 'checklist'
-  | 'checkmark'
-  | 'checkmark-active'
-  | 'checkmark-inactive'
-  | 'chevron-down'
-  | 'chevron-left'
-  | 'chevron-right'
-  | 'chevron-up'
-  | 'circle-alert'
-  | 'circle-cancel'
-  | 'circle-checkmark'
-  | 'circle-disconnected'
-  | 'circle-info'
-  | 'circle-outline'
-  | 'clock'
-  | 'collection'
-  | 'connectivity'
-  | 'connectivity-issue'
-  | 'connectivity-critical-issue'
-  | 'copy'
-  | 'credit-card'
-  | 'custom-payment'
-  | 'custom-sale'
-  | 'customer-filled'
-  | 'customer-outlined'
-  | 'delete'
-  | 'desktop'
-  | 'discount'
-  | 'discount-automatic'
-  | 'discount-code'
-  | 'discount-custom'
-  | 'discount-remove'
-  | 'dockside'
-  | 'draft-orders'
-  | 'drawer'
-  | 'exchange'
-  | 'external-link'
-  | 'fees'
-  | 'flag'
-  | 'flip-camera'
-  | 'fulfillment-delivery'
-  | 'fulfillment-shipment'
-  | 'gallery-view'
-  | 'gift-card'
-  | 'help'
-  | 'hide'
-  | 'hide-keyboard'
-  | 'home-filled'
-  | 'home-outlined'
-  | 'horizontal-dots'
-  | 'image'
-  | 'images'
-  | 'inventory-adjustments'
-  | 'inventory-counts'
-  | 'inventory-po'
-  | 'inventory-transfer'
-  | 'keypad'
-  | 'learn'
-  | 'lightning'
-  | 'link'
-  | 'list'
-  | 'list-view'
-  | 'location'
-  | 'lock'
-  | 'low-battery'
-  | 'mail'
-  | 'maximize'
-  | 'minimize'
-  | 'minus'
-  | 'mobile'
-  | 'more-filled'
-  | 'more-outlined'
-  | 'no-internet'
-  | 'note-report'
-  | 'not-stocked'
-  | 'orders-filled'
-  | 'orders-outlined'
-  | 'pencil'
-  | 'play-button'
-  | 'plus'
-  | 'point-of-sale'
-  | 'print'
-  | 'pro'
-  | 'products-filled'
-  | 'products-outlined'
-  | 'radio-active'
-  | 'radio-inactive'
-  | 'reassign-fulfillment'
-  | 'rearrange'
-  | 'receipt'
-  | 'refresh'
-  | 'register'
-  | 'return'
-  | 'retrieve-cart'
-  | 'save-cart'
-  | 'scan-barcode'
-  | 'scan-qr-code'
-  | 'search'
-  | 'send'
-  | 'send-cart'
-  | 'settings'
-  | 'shop-app'
-  | 'shop-pay'
-  | 'shopify-payments'
-  | 'sort'
-  | 'split-payment'
-  | 'staff'
-  | 'star'
-  | 'store'
-  | 'tablet-l'
-  | 'tablet-s'
-  | 'tap-to-pay'
-  | 'unlock'
-  | 'unordered-list'
-  | 'variant'
-  | 'view'
-  | 'void-shipping-label';
+  | 'add-customer' /** Add customer symbol. Use for creating new customer accounts. Removed in version 2025-10. Use `IconName` equivalent instead. */
+  | 'activity' /** An activity or action indicator. Use for activity feeds, action logs, or recent activity displays. */
+  | 'analytics' /** Analytics symbol. Use for data analysis and reports. Removed in version 2025-10. Use `IconName` equivalent instead. */
+  | 'apps' /** Applications symbol. Use for app launchers. Removed in version 2025-10. Use `IconName` equivalent instead. */
+  | 'arrow-down' /** A downward pointing arrow. Use for dropdown menus, collapsing content, downloading actions, or indicating downward movement. */
+  | 'arrow-left' /** A left arrow symbol. Removed in version 2025-10. Use `IconName` equivalent instead. */
+  | 'arrow-right' /** A rightward pointing arrow. Use for forward navigation, next actions, or indicating rightward movement and progression. */
+  | 'arrow-up' /** An upward pointing arrow. Use for expanding content, uploading actions, or indicating upward movement and elevation. */
+  | 'backspace' /** A backspace symbol. Removed in version 2025-10. Use `IconName` equivalent instead. */
+  | 'call' /** A phone call symbol. Removed in version 2025-10. Use `IconName` equivalent instead. */
+  | 'cancel-fulfillment' /** A cancel fulfillment symbol. Use for stopping order fulfillment, canceling shipments, or fulfillment management. */
+  | 'cancel' /** A cancel symbol. Removed in version 2025-10. Use `IconName` equivalent instead. */
+  | 'card-reader' /** A card reader symbol. Removed in version 2025-10. Use `IconName` equivalent instead. */
+  | 'caret-down' /** A small downward caret. Use for dropdown indicators, collapsible sections, or subtle directional cues. */
+  | 'caret-up' /** A small upward caret. Use for expandable sections, sort indicators, or subtle upward directional cues. */
+  | 'cart-filled' /** A filled shopping cart. Use to indicate items in cart, active shopping session, or cart with contents. */
+  | 'cart-outlined' /** A shopping cart outline. Use for shopping functionality, adding items to cart, or e-commerce actions. */
+  | 'cash' /** A cash symbol. Removed in version 2025-10. Use `IconName` equivalent instead. */
+  | 'checklist' /** A checklist symbol. Use for tasks, order fulfillment, inventory checks, or process completion. */
+  | 'checkmark' /** A checkmark symbol. Removed in version 2025-10. Use `IconName` equivalent instead. */
+  | 'checkmark-active' /** Active checkmark symbol. Use for selected items, active confirmations, or enabled states. */
+  | 'checkmark-inactive' /** An inactive checkmark symbol. Use for unselected items, disabled confirmations, or inactive states. */
+  | 'chevron-down' /** A downward chevron. Use for dropdown menus, expandable content, or indicating downward navigation. */
+  | 'chevron-left' /** A leftward chevron. Use for back navigation, previous items, or leftward movement in carousels and lists. */
+  | 'chevron-right' /** A rightward chevron. Use for forward navigation, next items, or rightward movement and progression. */
+  | 'chevron-up' /** An upward chevron. Use for collapsible content, scroll to top, or indicating upward navigation. */
+  | 'circle-alert' /** Alert symbol in circle. Use for system alerts, validation errors, or important notifications that require attention. */
+  | 'circle-cancel' /** A cancel symbol in circle. Use for cancellation actions, error states, or removing items with emphasis. */
+  | 'circle-checkmark' /** A checkmark in circle. Use for completed tasks, successful operations, or positive confirmation states. */
+  | 'circle-disconnected' /** A disconnected circle symbol. Use for offline states, connection issues, or unavailable services. */
+  | 'circle-info' /** An information symbol in circle. Use for help content, additional details, or informational messages. */
+  | 'circle-outline' /** A simple circle outline. Use for radio buttons, status indicators, or basic geometric markers. */
+  | 'clock' /** A clock or time symbol. Use for scheduling, time tracking, business hours, or temporal information. */
+  | 'collection' /** A product collection or group symbol. Use for product categories, grouped items, or collection management. */
+  | 'connectivity' /** A connectivity indicator. Use for network status, connection quality, or connectivity features. */
+  | 'connectivity-issue' /** A connectivity problem indicator. Use for network issues, connection warnings, or connectivity troubleshooting. */
+  | 'connectivity-critical-issue' /** A critical connectivity problem. Use for severe network failures, critical connection errors, or urgent connectivity issues. */
+  | 'copy' /** A copy or duplicate symbol. Use for copying items, duplicating records, or replication actions. */
+  | 'credit-card' /** A credit card symbol. Use for payment methods, card transactions, or financial operations. */
+  | 'custom-payment' /** A custom payment method symbol. Use for alternative payment options, custom payment processing, or specialized payment types. */
+  | 'custom-sale' /** A custom sale symbol. Use for special sales, custom pricing, or non-standard sale transactions. */
+  | 'customer-filled' /** A filled customer symbol. Use for active customers, selected customer profiles, or customer highlights. */
+  | 'customer-outlined' /** A customer outline symbol. Use for customer accounts, customer profiles, or customer-related features. */
+  | 'delete' /** A delete or trash symbol. Use for removing items, deleting records, or destructive actions. */
+  | 'desktop' /** A desktop computer symbol. Use for device types, platform indicators, or desktop-specific features. */
+  | 'discount' /** A discount or sale symbol. Use for promotions, price reductions, or special offers. */
+  | 'discount-automatic' /** Automatic discount symbol. Use for system-applied discounts, automatic promotions, or rule-based reductions. */
+  | 'discount-code' /** A discount code symbol. Use for coupon codes, promotional codes, or manual discount entry. */
+  | 'discount-custom' /** A custom discount symbol. Use for manual discounts, custom pricing adjustments, or personalized promotions. */
+  | 'discount-remove' /** A remove discount symbol. Use for removing applied discounts, canceling promotions, or undoing price reductions. */
+  | 'dockside' /** A dockside or shipping dock symbol. Use for shipping operations, dock management, or logistics features. */
+  | 'draft-orders' /** A draft orders symbol. Use for incomplete orders, order drafts, or pending order creation. */
+  | 'drawer' /** A cash drawer symbol. Use for cash register operations, drawer opening, or cash management. */
+  | 'exchange' /** An exchange or swap symbol. Use for product exchanges, return processing, or item swapping. */
+  | 'external-link' /** An external link symbol. Use for links that open in new windows, external resources, or outside navigation. */
+  | 'fees' /** A fees symbol. Use for transaction fees, additional charges, or fee management. */
+  | 'flag' /** A flag or marker symbol. Use for flagging items, marking important content, or status indicators. */
+  | 'flip-camera' /** A camera rotation or flip symbol. Use for switching camera views, rotating images, or camera-related controls. */
+  | 'fulfillment-delivery' /** A delivery fulfillment symbol. Use for delivery options, shipping fulfillment, or delivery tracking. */
+  | 'fulfillment-shipment' /** A shipment fulfillment symbol. Use for shipping operations, package fulfillment, or shipment tracking. */
+  | 'gallery-view' /** A gallery view symbol. Use for image galleries, grid layouts, or visual content displays. */
+  | 'gift-card' /** A gift card symbol. Use for gift card sales, redemption, or gift card management features. */
+  | 'help' /** A help symbol. Use for help features, support, or informational assistance. */
+  | 'hide' /** A hide or visibility off symbol. Use for hiding content, privacy controls, or visibility toggles. */
+  | 'hide-keyboard' /** A hide keyboard symbol. Use for dismissing on-screen keyboards or input controls. */
+  | 'home-filled' /** A filled home symbol. Use for active home state, main navigation, or primary dashboard indicator. */
+  | 'home-outlined' /** A home outline symbol. Use for home navigation, main dashboard, or returning to start screen. */
+  | 'horizontal-dots' /** A horizontal dots or more options symbol. Use for additional actions, overflow menus, or more options. */
+  | 'image' /** A single image symbol. Use for image upload, photo features, or visual content indicators. */
+  | 'images' /** A multiple images symbol. Use for image galleries, bulk photo operations, or media collections. */
+  | 'inventory-adjustments' /** An inventory adjustments symbol. Use for stock adjustments, inventory corrections, or quantity modifications. */
+  | 'inventory-counts' /** An inventory counts symbol. Use for stock counting, inventory audits, or quantity verification. */
+  | 'inventory-po' /** A purchase order inventory symbol. Use for purchase orders, inventory procurement, or stock ordering. */
+  | 'inventory-transfer' /** An inventory transfer symbol. Use for moving stock between locations, transfers, or redistribution. */
+  | 'keypad' /** A numeric keypad symbol. Use for number entry, PIN input, or calculator functions. */
+  | 'learn' /** A learning or education symbol. Use for training, tutorials, or educational features. */
+  | 'lightning' /** A lightning bolt symbol. Use for power, energy, fast actions, or high-priority features. */
+  | 'link' /** A link or chain symbol. Use for hyperlinks, connections, or linking functionality. */
+  | 'list' /** A list symbol. Use for list views, itemized content, or list formatting. */
+  | 'list-view' /** A list view layout symbol. Use for switching to list layout, organizing content, or list-based displays. */
+  | 'location' /** A location or map pin symbol. Use for store locations, addresses, or geographic features. */
+  | 'lock' /** A lock or security symbol. Use for secure features, locked content, or security settings. */
+  | 'low-battery' /** A low battery indicator. Use for device status, power warnings, or battery-related notifications. */
+  | 'mail' /** An email or message symbol. Use for email functionality, messaging, or communication features. */
+  | 'maximize' /** A maximize or expand symbol. Use for fullscreen mode, expanding windows, or enlarging content. */
+  | 'minimize' /** A minimize or collapse symbol. Use for reducing windows, collapsing content, or minimizing interfaces. */
+  | 'minus' /** A minus or subtract symbol. Use for decreasing quantities, removing items, or subtraction operations. */
+  | 'mobile' /** A mobile phone symbol. Use for mobile features, device types, or mobile-specific functionality. */
+  | 'more-filled' /** A filled more options symbol. Use for active additional actions, prominent overflow menus, or emphasized options. */
+  | 'more-outlined' /** An outlined more options symbol. Use for additional actions, overflow menus, or more options. */
+  | 'no-internet' /** A no internet connection symbol. Use for offline states, connection failures, or network unavailability. */
+  | 'note-report' /** A note or report symbol. Use for notes, documentation, reports, or text content features. */
+  | 'not-stocked' /** A not stocked symbol. Removed in version 2025-10. Use `IconName` equivalent instead. */
+  | 'orders-filled' /** A filled orders symbol. Use for completed orders, active order states, or order fulfillment. */
+  | 'orders-outlined' /** An orders outline symbol. Use for order management, order history, or order-related functions. */
+  | 'pencil' /** A pencil or edit symbol. Use for editing content, modifying records, or entering edit mode. */
+  | 'play-button' /** A play button symbol. Use for starting processes, playing media, or initiating actions. */
+  | 'plus' /** A plus or add symbol. Use for adding items, creating new content, or addition operations. */
+  | 'point-of-sale' /** A point of sale system symbol. Use for POS features, retail operations, or sales terminals. */
+  | 'print' /** A print symbol. Use for printing receipts, documents, or print-related functionality. */
+  | 'pro' /** A pro or premium symbol. Use for professional features, premium content, or advanced functionality. */
+  | 'products-filled' /** A filled products symbol. Use for active products, selected items, or product highlights. */
+  | 'products-outlined' /** A products outline symbol. Use for product management, catalog features, or product-related functions. */
+  | 'radio-active' /** Active radio button symbol. Use for selected radio options, active choices, or enabled selections. */
+  | 'radio-inactive' /** An inactive radio button symbol. Use for unselected radio options, inactive choices, or disabled selections. */
+  | 'reassign-fulfillment' /** A reassign fulfillment symbol. Use for changing fulfillment locations, reassigning orders, or fulfillment redirection. */
+  | 'rearrange' /** A rearrange or reorder symbol. Use for reordering lists, organizing content, or arrangement controls. */
+  | 'receipt' /** A receipt symbol. Use for transaction receipts, purchase confirmations, or receipt management. */
+  | 'refresh' /** A refresh or reload symbol. Use for updating content, refreshing data, or reload operations. */
+  | 'register' /** A cash register symbol. Use for register operations, cash handling, or traditional POS functions. */
+  | 'return' /** A return symbol. Use for product returns, refund processing, or return management. */
+  | 'retrieve-cart' /** A retrieve cart symbol. Use for recovering saved carts, loading previous carts, or cart restoration. */
+  | 'save-cart' /** A save cart symbol. Use for saving current cart, cart preservation, or cart storage. */
+  | 'scan-barcode' /** A barcode scanning symbol. Use for product scanning, inventory management, or barcode-related functionality. */
+  | 'scan-qr-code' /** A QR code scanning symbol. Use for QR code features, digital scanning, or code-based interactions. */
+  | 'search' /** A search or magnifying glass symbol. Use for search functionality, finding content, or lookup features. */
+  | 'send' /** A send or submit symbol. Use for sending messages, submitting forms, or transmission actions. */
+  | 'send-cart' /** A send cart symbol. Use for sharing cart contents, sending cart to another device, or cart transfer actions. */
+  | 'settings' /** A settings or gear symbol. Use for configuration, preferences, or system settings. */
+  | 'shop-app' /** A shop app symbol. Use for shopping app features, mobile commerce, or app-specific functionality. */
+  | 'shop-pay' /** A shop pay symbol. Use for Shop Pay payment method, express checkout, or Shopify payment features. */
+  | 'shopify-payments' /** A shopify payments symbol. Use for Shopify payment processing, payment gateway features, or payment management. */
+  | 'sort' /** A sort or arrange symbol. Use for sorting lists, organizing content, or arrangement controls. */
+  | 'split-payment' /** A split payment symbol. Use for divided payments, partial payments, or payment splitting features. */
+  | 'staff' /** A staff or employee symbol. Use for staff management, employee features, or personnel-related functions. */
+  | 'star' /** A star symbol. Use for ratings, favorites, or highlighting important content. */
+  | 'store' /** A store or shop symbol. Use for store information, retail locations, or shop-related features. */
+  | 'tablet-l' /** A large tablet device symbol. Use for large tablet features, device types, or tablet-specific functionality. */
+  | 'tablet-s' /** A small tablet device symbol. Use for small tablet features, compact devices, or mini tablet functionality. */
+  | 'tap-to-pay' /** A tap to pay symbol. Use for contactless payments, NFC transactions, or tap payment features. */
+  | 'unlock' /** An unlock symbol. Use for unlocking features, accessing content, or security controls. */
+  | 'unordered-list' /** An unordered list symbol. Use for bulleted lists, itemized content, or list formatting. */
+  | 'variant' /** A product variant symbol. Use for product variations, different options, or variant management. */
+  | 'view' /** A view or eye symbol. Use for viewing content, visibility controls, or display options. */
+  | 'void-shipping-label' /** A void shipping label symbol. Use for canceling shipping labels, voiding shipments, or shipping corrections. */;
 
-export type IconSize = 's' | 'm' | 'l' | 'xl';
+export type IconSize =
+  | 's' /** A small icon size. Use for compact spaces, inline text accompaniment, or when minimal visual weight is needed. */
+  | 'm' /** A medium icon size. Use for secondary navigation, list items, or compact interface elements. */
+  | 'l' /** A large icon size (default). Provides optimal visibility and balance for most interface elements, primary actions, and standard components. */
+  | 'xl' /** An extra large icon size. Use for prominent actions, headers, or when icons need maximum visibility and impact. */;
 
 export type IconTone =
-  | 'icon-primary'
-  | 'icon-inverse'
-  | 'icon-subdued'
-  | 'icon-disabled'
-  | 'icon-warning'
-  | 'icon-critical'
-  | 'icon-success'
-  | 'icon-interactive'
-  | 'icon-highlight'
-  | 'icon-shoppay'
-  | 'icon-static-light'
-  | 'icon-static-dark'
-  | 'icon-inactive'
-  | 'icon-badge-neutral'
-  | 'icon-search'
-  | 'icon-tile-default'
-  | 'icon-tile-stack'
-  | 'icon-tile-disabled'
-  | 'icon-tile-pink'
-  | 'icon-tile-purple'
-  | 'icon-tile-orange'
-  | 'icon-subnavigation-inactive'
-  | 'icon-primary-pressed';
+  | 'icon-primary' /** Primary icon color. Use for main content and standard icon displays with default contrast. */
+  | 'icon-inverse' /** Inverse icon color. Use for icons on dark backgrounds or to create contrast in inverse color schemes. */
+  | 'icon-subdued' /** Subdued icon color. Use for secondary icons, less prominent content, or when reduced visual emphasis is needed. */
+  | 'icon-disabled' /** Disabled icon color. Use for inactive or unavailable icons that users cannot interact with. */
+  | 'icon-warning' /** Warning icon color. Use for caution states, important notices, or situations requiring attention. */
+  | 'icon-critical' /** Critical icon color. Use for errors, urgent issues, or destructive actions requiring immediate attention. */
+  | 'icon-success' /** Success icon color. Use for positive outcomes, confirmations, or completed actions. */
+  | 'icon-interactive' /** Interactive icon color. Use for clickable icons, links, or interactive elements to indicate interactivity. */
+  | 'icon-highlight' /** Highlight icon color. Use for emphasized content, featured items, or icons requiring special attention. */
+  | 'icon-shoppay' /** Shop Pay brand color. Use specifically for Shop Pay related features and branding. */
+  | 'icon-static-light' /** Static light icon color. Use for icons on light backgrounds with fixed, non-adaptive coloring. */
+  | 'icon-static-dark' /** Static dark icon color. Use for icons on dark backgrounds with fixed, non-adaptive coloring. */
+  | 'icon-inactive' /** Inactive icon color. Use for temporarily disabled or inactive interface elements. */
+  | 'icon-badge-neutral' /** Neutral badge icon color. Use for general badge icons without specific semantic meaning. */
+  | 'icon-search' /** Search icon color. Use specifically for search-related icons and search interface elements. */
+  | 'icon-tile-default' /** Default tile icon color. Use for standard tile icons in grid or tile-based layouts. */
+  | 'icon-tile-stack' /** Stack tile icon color. Use for grouped or stacked tile icons in organizational views. */
+  | 'icon-tile-disabled' /** Disabled tile icon color. Use for inactive or unavailable tile icons in grid layouts. */
+  | 'icon-tile-pink' /** Pink tile icon color. Use for color-coded pink category tiles or themed content. */
+  | 'icon-tile-purple' /** Purple tile icon color. Use for color-coded purple category tiles or themed content. */
+  | 'icon-tile-orange' /** Orange tile icon color. Use for color-coded orange category tiles or themed content. */
+  | 'icon-subnavigation-inactive' /** Inactive sub-navigation icon color. Use for unselected items in secondary navigation menus. */
+  | 'icon-primary-pressed' /** Pressed primary icon color. Use for the pressed state of primary interactive icons. */;
 
 export interface IconProps {
   /**
-   * A name used to render the icon.
+   * A name used to render the icon. Choose from the available icon set including commerce-specific symbols like `'cart'`, `'payment'`, `'search'`, navigation arrows, and system indicators.
    */
   name: IconName | DeprecatedIconName;
   /**
-   * Size of the icon.
+   * The size of the icon. Use `'s'` for small icons, `'m'` for medium, `'l'` for large (default), or `'xl'` for extra large.
+   *
    * @defaultValue 'l'
    */
   size?: IconSize | DeprecatedIconSize;
   /**
-   * Color of the icon.
+   * The color of the icon. Use semantic tones like `'icon-critical'` for errors, `'icon-warning'` for cautions, `'icon-success'` for confirmations, or contextual tones like `'icon-subdued'` for secondary elements and `'icon-interactive'` for clickable elements.
+   *
    * @defaultValue 'icon-primary'
    */
   tone?: IconTone;

package/src/surfaces/point-of-sale/render/components/Image/Image.ts

@@ -1,11 +1,20 @@
 import {createRemoteComponent} from '@remote-ui/core';
 
-export type ImageSize = 's' | 'm' | 'l' | 'xl';
+export type ImageSize =
+  | 's' /** A small image size. Use for thumbnails, compact layouts, or when minimal space is available for image display. */
+  | 'm' /** A medium image size. Use for secondary content, list items, or compact interface elements where space is moderately constrained. */
+  | 'l' /** A large image size (default). Provides optimal visibility and balance for most interface elements, product displays, and standard image content. */
+  | 'xl' /** An extra large image size. Use for hero images, featured content, or when maximum visual impact and detail visibility are needed. */;
 
 /**
- * FillResizeMode will apply formatting to the image to fill the container.
+ * Defines how images are resized and positioned within their containers. Controls image scaling, cropping, and aspect ratio handling.
  *
- * https://reactnative.dev/docs/image#resizemode
+ * Available resize modes:
+ * - `center`: Centers the image within its container without scaling. The image maintains its original size and is positioned in the center, potentially leaving empty space or being cropped if the container is smaller.
+ * - `contain`: Scales the image to fit entirely within the container while maintaining aspect ratio. The entire image will be visible, but there may be empty space if the aspect ratios don't match.
+ * - `cover`: Scales the image to fill the entire container while maintaining aspect ratio. Parts of the image may be cropped if the aspect ratios don't match, but the container will be completely filled.
+ * - `repeat`: Repeats the image to fill the container. The image maintains its original size and is tiled both horizontally and vertically to cover the entire container area.
+ * - `stretch`: Stretches the image to fill the container completely, potentially distorting the aspect ratio. The image will fill the entire container but may appear stretched or compressed.
  */
 export type FillResizeMode =
   | 'cover'
@@ -16,12 +25,12 @@ export type FillResizeMode =
 
 export interface ImageProps {
   /**
-   * The source of the image to be displayed.
+   * The source of the image to be displayed. Provide a valid URL to a remote image or a local file resource. When no `src` is provided or the image is loading, a placeholder will be rendered.
    */
   src?: string;
 
   /**
-   * The size or fill size of the image.
+   * The size or fill behavior of the image. Use `ImageSize` values (`'s'`, `'m'`, `'l'`, `'xl'`) for fixed dimensions, or `FillResizeMode` values (`'cover'`, `'contain'`, `'stretch'`, `'repeat'`, `'center'`) to control how the image fills its container.
    *
    * @default 'l'
    */