polaris-react-extended 13.10.3

package/build/esm/components/TextField/TextField.js

@@ -0,0 +1,474 @@
+import React, { useState, useId, useRef, useCallback, useEffect, createElement } from 'react';
+import { XCircleIcon } from '@shopify/polaris-icons';
+import { classNames, variationName } from '../../utilities/css.js';
+import { useIsAfterInitialMount } from '../../utilities/use-is-after-initial-mount.js';
+import { Key } from '../../types.js';
+import { useEventListener } from '../../utilities/use-event-listener.js';
+import styles from './TextField.css.js';
+import { Labelled, helpTextID } from '../Labelled/Labelled.js';
+import { Connected } from '../Connected/Connected.js';
+import { Spinner as Spinner$1 } from './components/Spinner/Spinner.js';
+import { Resizer } from './components/Resizer/Resizer.js';
+import { labelID } from '../Label/Label.js';
+import { useI18n } from '../../utilities/i18n/hooks.js';
+import { Icon } from '../Icon/Icon.js';
+import { Text } from '../Text/Text.js';
+import { Spinner } from '../Spinner/Spinner.js';
+
+function TextField({
+  prefix,
+  suffix,
+  verticalContent,
+  placeholder,
+  value = '',
+  helpText,
+  label,
+  labelAction,
+  labelHidden,
+  disabled,
+  clearButton,
+  readOnly,
+  autoFocus,
+  focused,
+  multiline,
+  error,
+  connectedRight,
+  connectedLeft,
+  type = 'text',
+  name,
+  id: idProp,
+  role,
+  step,
+  largeStep,
+  autoComplete,
+  max,
+  maxLength,
+  maxHeight,
+  min,
+  minLength,
+  pattern,
+  inputMode,
+  spellCheck,
+  ariaOwns,
+  ariaControls,
+  ariaExpanded,
+  ariaActiveDescendant,
+  ariaAutocomplete,
+  showCharacterCount,
+  align,
+  requiredIndicator,
+  monospaced,
+  selectTextOnFocus,
+  suggestion,
+  variant = 'inherit',
+  size = 'medium',
+  onClearButtonClick,
+  onChange,
+  onSpinnerChange,
+  onFocus,
+  onBlur,
+  tone,
+  autoSize,
+  loading
+}) {
+  const i18n = useI18n();
+  const [height, setHeight] = useState(null);
+  const [focus, setFocus] = useState(Boolean(focused));
+  const isAfterInitial = useIsAfterInitialMount();
+  const uniqId = useId();
+  const id = idProp ?? uniqId;
+  const textFieldRef = useRef(null);
+  const inputRef = useRef(null);
+  const textAreaRef = useRef(null);
+  const prefixRef = useRef(null);
+  const suffixRef = useRef(null);
+  const loadingRef = useRef(null);
+  const verticalContentRef = useRef(null);
+  const buttonPressTimer = useRef();
+  const spinnerRef = useRef(null);
+  const getInputRef = useCallback(() => {
+    return multiline ? textAreaRef.current : inputRef.current;
+  }, [multiline]);
+  useEffect(() => {
+    const input = getInputRef();
+    if (!input || focused === undefined) return;
+    focused ? input.focus() : input.blur();
+  }, [focused, verticalContent, getInputRef]);
+  useEffect(() => {
+    const input = inputRef.current;
+    const isSupportedInputType = type === 'text' || type === 'tel' || type === 'search' || type === 'url' || type === 'password';
+    if (!input || !isSupportedInputType || !suggestion) {
+      return;
+    }
+    input.setSelectionRange(value.length, suggestion.length);
+  }, [focus, value, type, suggestion]);
+  const normalizedValue = suggestion ? suggestion : value;
+  const normalizedStep = step != null ? step : 1;
+  const normalizedMax = max != null ? max : Infinity;
+  const normalizedMin = min != null ? min : -Infinity;
+  const className = classNames(styles.TextField, Boolean(normalizedValue) && styles.hasValue, disabled && styles.disabled, readOnly && styles.readOnly, error && styles.error, tone && styles[variationName('tone', tone)], multiline && styles.multiline, focus && !disabled && styles.focus, variant !== 'inherit' && styles[variant], size === 'slim' && styles.slim);
+  const inputType = type === 'currency' ? 'text' : type;
+  const isNumericType = type === 'number' || type === 'integer';
+  const iconPrefix = /*#__PURE__*/React.isValidElement(prefix) && prefix.type === Icon;
+  const prefixMarkup = prefix ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.Prefix, iconPrefix && styles.PrefixIcon),
+    id: `${id}-Prefix`,
+    ref: prefixRef
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "bodyMd"
+  }, prefix)) : null;
+  const suffixMarkup = suffix ? /*#__PURE__*/React.createElement("div", {
+    className: styles.Suffix,
+    id: `${id}-Suffix`,
+    ref: suffixRef
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "bodyMd"
+  }, suffix)) : null;
+  const loadingMarkup = loading ? /*#__PURE__*/React.createElement("div", {
+    className: styles.Loading,
+    id: `${id}-Loading`,
+    ref: loadingRef
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "small"
+  })) : null;
+  let characterCountMarkup = null;
+  if (showCharacterCount) {
+    const characterCount = normalizedValue.length;
+    const characterCountLabel = maxLength ? i18n.translate('Polaris.TextField.characterCountWithMaxLength', {
+      count: characterCount,
+      limit: maxLength
+    }) : i18n.translate('Polaris.TextField.characterCount', {
+      count: characterCount
+    });
+    const characterCountClassName = classNames(styles.CharacterCount, multiline && styles.AlignFieldBottom);
+    const characterCountText = !maxLength ? characterCount : `${characterCount}/${maxLength}`;
+    characterCountMarkup = /*#__PURE__*/React.createElement("div", {
+      id: `${id}-CharacterCounter`,
+      className: characterCountClassName,
+      "aria-label": characterCountLabel,
+      "aria-live": focus ? 'polite' : 'off',
+      "aria-atomic": "true",
+      onClick: handleClickChild
+    }, /*#__PURE__*/React.createElement(Text, {
+      as: "span",
+      variant: "bodyMd"
+    }, characterCountText));
+  }
+  const clearButtonVisible = normalizedValue !== '';
+  const clearButtonMarkup = clearButton && clearButtonVisible ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.ClearButton,
+    onClick: handleClearButtonPress,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    visuallyHidden: true
+  }, i18n.translate('Polaris.Common.clear')), /*#__PURE__*/React.createElement(Icon, {
+    source: XCircleIcon,
+    tone: "base"
+  })) : null;
+  const handleNumberChange = useCallback((steps, stepAmount = normalizedStep) => {
+    if (onChange == null && onSpinnerChange == null) {
+      return;
+    }
+    // Returns the length of decimal places in a number
+    const dpl = num => (num.toString().split('.')[1] || []).length;
+    const numericValue = value ? parseFloat(value) : 0;
+    if (isNaN(numericValue)) {
+      return;
+    }
+
+    // Making sure the new value has the same length of decimal places as the
+    // step / value has.
+    const decimalPlaces = type === 'integer' ? 0 : Math.max(dpl(numericValue), dpl(stepAmount));
+    const newValue = Math.min(Number(normalizedMax), Math.max(numericValue + steps * stepAmount, Number(normalizedMin)));
+    if (onSpinnerChange != null) {
+      onSpinnerChange(String(newValue.toFixed(decimalPlaces)), id);
+    } else if (onChange != null) {
+      onChange(String(newValue.toFixed(decimalPlaces)), id);
+    }
+  }, [id, normalizedMax, normalizedMin, onChange, onSpinnerChange, normalizedStep, type, value]);
+  const handleSpinnerButtonRelease = useCallback(() => {
+    clearTimeout(buttonPressTimer.current);
+  }, []);
+  const handleSpinnerButtonPress = useCallback(onChange => {
+    const minInterval = 50;
+    const decrementBy = 10;
+    let interval = 200;
+    const onChangeInterval = () => {
+      if (interval > minInterval) interval -= decrementBy;
+      onChange(0);
+      buttonPressTimer.current = window.setTimeout(onChangeInterval, interval);
+    };
+    buttonPressTimer.current = window.setTimeout(onChangeInterval, interval);
+    document.addEventListener('mouseup', handleSpinnerButtonRelease, {
+      once: true
+    });
+  }, [handleSpinnerButtonRelease]);
+  const spinnerMarkup = isNumericType && step !== 0 && !disabled && !readOnly ? /*#__PURE__*/React.createElement(Spinner$1, {
+    onClick: handleClickChild,
+    onChange: handleNumberChange,
+    onMouseDown: handleSpinnerButtonPress,
+    onMouseUp: handleSpinnerButtonRelease,
+    ref: spinnerRef,
+    onBlur: handleOnBlur
+  }) : null;
+  const style = multiline && height ? {
+    height,
+    maxHeight
+  } : null;
+  const handleExpandingResize = useCallback(height => {
+    setHeight(height);
+  }, []);
+  const resizer = multiline && isAfterInitial ? /*#__PURE__*/React.createElement(Resizer, {
+    contents: normalizedValue || placeholder,
+    currentHeight: height,
+    minimumLines: typeof multiline === 'number' ? multiline : 1,
+    onHeightChange: handleExpandingResize
+  }) : null;
+  const describedBy = [];
+  if (error) {
+    describedBy.push(`${id}Error`);
+  }
+  if (helpText) {
+    describedBy.push(helpTextID(id));
+  }
+  if (showCharacterCount) {
+    describedBy.push(`${id}-CharacterCounter`);
+  }
+  const labelledBy = [];
+  if (prefix) {
+    labelledBy.push(`${id}-Prefix`);
+  }
+  if (suffix) {
+    labelledBy.push(`${id}-Suffix`);
+  }
+  if (verticalContent) {
+    labelledBy.push(`${id}-VerticalContent`);
+  }
+  labelledBy.unshift(labelID(id));
+  const inputClassName = classNames(styles.Input, align && styles[variationName('Input-align', align)], suffix && styles['Input-suffixed'], clearButton && styles['Input-hasClearButton'], monospaced && styles.monospaced, suggestion && styles.suggestion, autoSize && styles['Input-autoSize']);
+  const handleOnFocus = event => {
+    setFocus(true);
+    if (selectTextOnFocus && !suggestion) {
+      const input = getInputRef();
+      input?.select();
+    }
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
+  useEventListener('wheel', handleOnWheel, inputRef);
+  function handleOnWheel(event) {
+    if (document.activeElement === event.target && isNumericType) {
+      event.stopPropagation();
+    }
+  }
+  const input = /*#__PURE__*/createElement(multiline ? 'textarea' : 'input', {
+    name,
+    id,
+    disabled,
+    readOnly,
+    role,
+    autoFocus,
+    value: normalizedValue,
+    placeholder,
+    style,
+    autoComplete,
+    className: inputClassName,
+    ref: multiline ? textAreaRef : inputRef,
+    min,
+    max,
+    step,
+    minLength,
+    maxLength,
+    spellCheck,
+    pattern,
+    inputMode,
+    type: inputType,
+    rows: getRows(multiline),
+    size: autoSize ? 1 : undefined,
+    'aria-describedby': describedBy.length ? describedBy.join(' ') : undefined,
+    'aria-labelledby': labelledBy.join(' '),
+    'aria-invalid': Boolean(error),
+    'aria-owns': ariaOwns,
+    'aria-activedescendant': ariaActiveDescendant,
+    'aria-autocomplete': ariaAutocomplete,
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-required': requiredIndicator,
+    ...normalizeAriaMultiline(multiline),
+    onFocus: handleOnFocus,
+    onBlur: handleOnBlur,
+    onClick: handleClickChild,
+    onKeyPress: handleKeyPress,
+    onKeyDown: handleKeyDown,
+    onChange: !suggestion ? handleChange : undefined,
+    onInput: suggestion ? handleChange : undefined,
+    // 1Password disable data attribute
+    'data-1p-ignore': autoComplete === 'off' || undefined,
+    // LastPass disable data attribute
+    'data-lpignore': autoComplete === 'off' || undefined,
+    // Dashlane disable data attribute
+    'data-form-type': autoComplete === 'off' ? 'other' : undefined
+  });
+  const inputWithVerticalContentMarkup = verticalContent ? /*#__PURE__*/React.createElement("div", {
+    className: styles.VerticalContent,
+    id: `${id}-VerticalContent`,
+    ref: verticalContentRef,
+    onClick: handleClickChild
+  }, verticalContent, input) : null;
+  const inputMarkup = verticalContent ? inputWithVerticalContentMarkup : input;
+  const backdropMarkup = /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.Backdrop, connectedLeft && styles['Backdrop-connectedLeft'], connectedRight && styles['Backdrop-connectedRight'])
+  });
+  const inputAndSuffixMarkup = autoSize ? /*#__PURE__*/React.createElement("div", {
+    className: styles.InputAndSuffixWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.AutoSizeWrapper, suffix && styles.AutoSizeWrapperWithSuffix),
+    "data-auto-size-value": value || placeholder
+  }, inputMarkup), suffixMarkup) : /*#__PURE__*/React.createElement(React.Fragment, null, inputMarkup, suffixMarkup);
+  return /*#__PURE__*/React.createElement(Labelled, {
+    label: label,
+    id: id,
+    error: error,
+    action: labelAction,
+    labelHidden: labelHidden,
+    helpText: helpText,
+    requiredIndicator: requiredIndicator,
+    disabled: disabled,
+    readOnly: readOnly
+  }, /*#__PURE__*/React.createElement(Connected, {
+    left: connectedLeft,
+    right: connectedRight
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className,
+    onClick: handleClick,
+    ref: textFieldRef
+  }, prefixMarkup, inputAndSuffixMarkup, characterCountMarkup, loadingMarkup, clearButtonMarkup, spinnerMarkup, backdropMarkup, resizer)));
+  function handleChange(event) {
+    onChange && onChange(event.currentTarget.value, id);
+  }
+  function handleClick(event) {
+    const {
+      target
+    } = event;
+
+    // For TextFields used with Combobox, focus needs to be set again even
+    // if the TextField is already focused to trigger the logic to open the
+    // Combobox activator
+    const inputRefRole = inputRef?.current?.getAttribute('role');
+    if (target === inputRef.current && inputRefRole === 'combobox') {
+      inputRef.current?.focus();
+      handleOnFocus(event);
+      return;
+    }
+    if (isPrefixOrSuffix(target) || isVerticalContent(target) || isInput(target) || isSpinner(target) || isLoadingSpinner(target) || focus) {
+      return;
+    }
+    getInputRef()?.focus();
+  }
+  function handleClickChild(event) {
+    if (!isSpinner(event.target) && !isInput(event.target)) {
+      event.stopPropagation();
+    }
+    if (isPrefixOrSuffix(event.target) || isVerticalContent(event.target) || isInput(event.target) || isLoadingSpinner(event.target) || focus) {
+      return;
+    }
+    setFocus(true);
+    getInputRef()?.focus();
+  }
+  function handleClearButtonPress() {
+    onClearButtonClick && onClearButtonClick(id);
+  }
+  function handleKeyPress(event) {
+    const {
+      key,
+      which
+    } = event;
+    const numbersSpec = /[\d.,eE+-]$/;
+    const integerSpec = /[\deE+-]$/;
+    if (!isNumericType || which === Key.Enter || type === 'number' && numbersSpec.test(key) || type === 'integer' && integerSpec.test(key)) {
+      return;
+    }
+    event.preventDefault();
+  }
+  function handleKeyDown(event) {
+    if (!isNumericType) {
+      return;
+    }
+    const {
+      key,
+      which
+    } = event;
+    if (type === 'integer' && (key === 'ArrowUp' || which === Key.UpArrow)) {
+      handleNumberChange(1);
+      event.preventDefault();
+    }
+    if (type === 'integer' && (key === 'ArrowDown' || which === Key.DownArrow)) {
+      handleNumberChange(-1);
+      event.preventDefault();
+    }
+    if ((which === Key.Home || key === 'Home') && min !== undefined) {
+      if (onSpinnerChange != null) {
+        onSpinnerChange(String(min), id);
+      } else if (onChange != null) {
+        onChange(String(min), id);
+      }
+    }
+    if ((which === Key.End || key === 'End') && max !== undefined) {
+      if (onSpinnerChange != null) {
+        onSpinnerChange(String(max), id);
+      } else if (onChange != null) {
+        onChange(String(max), id);
+      }
+    }
+    if ((which === Key.PageUp || key === 'PageUp') && largeStep !== undefined) {
+      handleNumberChange(1, largeStep);
+    }
+    if ((which === Key.PageDown || key === 'PageDown') && largeStep !== undefined) {
+      handleNumberChange(-1, largeStep);
+    }
+  }
+  function handleOnBlur(event) {
+    setFocus(false);
+
+    // Return early if new focus target is inside the TextField component
+    if (textFieldRef.current?.contains(event?.relatedTarget)) {
+      return;
+    }
+    if (onBlur) {
+      onBlur(event);
+    }
+  }
+  function isInput(target) {
+    const input = getInputRef();
+    return target instanceof HTMLElement && input && (input.contains(target) || input.contains(document.activeElement));
+  }
+  function isPrefixOrSuffix(target) {
+    return target instanceof Element && (prefixRef.current && prefixRef.current.contains(target) || suffixRef.current && suffixRef.current.contains(target));
+  }
+  function isSpinner(target) {
+    return target instanceof Element && spinnerRef.current && spinnerRef.current.contains(target);
+  }
+  function isLoadingSpinner(target) {
+    return target instanceof Element && loadingRef.current && loadingRef.current.contains(target);
+  }
+  function isVerticalContent(target) {
+    return target instanceof Element && verticalContentRef.current && (verticalContentRef.current.contains(target) || verticalContentRef.current.contains(document.activeElement));
+  }
+}
+function getRows(multiline) {
+  if (!multiline) return undefined;
+  return typeof multiline === 'number' ? multiline : 1;
+}
+function normalizeAriaMultiline(multiline) {
+  if (!multiline) return undefined;
+  return Boolean(multiline) || typeof multiline === 'number' && multiline > 0 ? {
+    'aria-multiline': true
+  } : undefined;
+}
+
+export { TextField };

package/build/esm/components/TextField/components/Resizer/Resizer.js

@@ -0,0 +1,86 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import { useIsomorphicLayoutEffect } from '../../../../utilities/use-isomorphic-layout-effect.js';
+import styles from '../../TextField.css.js';
+import { EventListener } from '../../../EventListener/EventListener.js';
+
+function Resizer({
+  contents,
+  currentHeight: currentHeightProp = null,
+  minimumLines,
+  onHeightChange
+}) {
+  const contentNode = useRef(null);
+  const minimumLinesNode = useRef(null);
+  const animationFrame = useRef();
+  const currentHeight = useRef(currentHeightProp);
+  if (currentHeightProp !== currentHeight.current) {
+    currentHeight.current = currentHeightProp;
+  }
+  useEffect(() => {
+    return () => {
+      if (animationFrame.current) {
+        cancelAnimationFrame(animationFrame.current);
+      }
+    };
+  }, []);
+  const minimumLinesMarkup = minimumLines ? /*#__PURE__*/React.createElement("div", {
+    ref: minimumLinesNode,
+    className: styles.DummyInput,
+    dangerouslySetInnerHTML: {
+      __html: getContentsForMinimumLines(minimumLines)
+    }
+  }) : null;
+  const handleHeightCheck = useCallback(() => {
+    if (animationFrame.current) {
+      cancelAnimationFrame(animationFrame.current);
+    }
+    animationFrame.current = requestAnimationFrame(() => {
+      if (!contentNode.current || !minimumLinesNode.current) {
+        return;
+      }
+      const newHeight = Math.max(contentNode.current.offsetHeight, minimumLinesNode.current.offsetHeight);
+      if (newHeight !== currentHeight.current) {
+        onHeightChange(newHeight);
+      }
+    });
+  }, [onHeightChange]);
+  useIsomorphicLayoutEffect(() => {
+    handleHeightCheck();
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": true,
+    className: styles.Resizer
+  }, /*#__PURE__*/React.createElement(EventListener, {
+    event: "resize",
+    handler: handleHeightCheck
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: contentNode,
+    className: styles.DummyInput,
+    dangerouslySetInnerHTML: {
+      __html: getFinalContents(contents)
+    }
+  }), minimumLinesMarkup);
+}
+const ENTITIES_TO_REPLACE = {
+  '&': '&',
+  '<': '&lt;',
+  '>': '&gt;',
+  '\n': '<br>',
+  '\r': ''
+};
+const REPLACE_REGEX = new RegExp(`[${Object.keys(ENTITIES_TO_REPLACE).join()}]`, 'g');
+function replaceEntity(entity) {
+  return ENTITIES_TO_REPLACE[entity];
+}
+function getContentsForMinimumLines(minimumLines) {
+  let content = '';
+  for (let line = 0; line < minimumLines; line++) {
+    content += '<br>';
+  }
+  return content;
+}
+function getFinalContents(contents) {
+  return contents ? `${contents.replace(REPLACE_REGEX, replaceEntity)}<br>` : '<br>';
+}
+
+export { Resizer };

package/build/esm/components/TextField/components/Spinner/Spinner.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { ChevronUpIcon, ChevronDownIcon } from '@shopify/polaris-icons';
+import styles from '../../TextField.css.js';
+import { Icon } from '../../../Icon/Icon.js';
+
+const Spinner = /*#__PURE__*/React.forwardRef(function Spinner({
+  onChange,
+  onClick,
+  onMouseDown,
+  onMouseUp,
+  onBlur
+}, ref) {
+  function handleStep(step) {
+    return () => onChange(step);
+  }
+  function handleMouseDown(onChange) {
+    return event => {
+      if (event.button !== 0) return;
+      onMouseDown?.(onChange);
+    };
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.Spinner,
+    onClick: onClick,
+    "aria-hidden": true,
+    ref: ref
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    className: styles.Segment,
+    tabIndex: -1,
+    onClick: handleStep(1),
+    onMouseDown: handleMouseDown(handleStep(1)),
+    onMouseUp: onMouseUp,
+    onBlur: onBlur
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.SpinnerIcon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    source: ChevronUpIcon
+  }))), /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    className: styles.Segment,
+    tabIndex: -1,
+    onClick: handleStep(-1),
+    onMouseDown: handleMouseDown(handleStep(-1)),
+    onMouseUp: onMouseUp,
+    onBlur: onBlur
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.SpinnerIcon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    source: ChevronDownIcon
+  }))));
+});
+
+export { Spinner };

package/build/esm/components/ThemeProvider/ThemeProvider.css.js

@@ -0,0 +1,5 @@
+var styles = {
+  "themeContainer": "Polaris-ThemeProvider--themeContainer"
+};
+
+export { styles as default };

package/build/esm/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createThemeClassName, themeNameDefault } from '@shopify/polaris-tokens';
+import { ThemeNameContext, ThemeContext, getTheme } from '../../utilities/use-theme.js';
+import { classNames } from '../../utilities/css.js';
+import styles from './ThemeProvider.css.js';
+
+/**
+ * Allowlist of local themes
+ * TODO: Replace `as const` with `satisfies ThemeName[]`
+ */
+const themeNamesLocal = ['light', 'dark-experimental'];
+const isThemeNameLocal = name => themeNamesLocal.includes(name);
+function ThemeProvider(props) {
+  const {
+    as: ThemeContainer = 'div',
+    children,
+    className,
+    theme: themeName = themeNameDefault
+  } = props;
+  return /*#__PURE__*/React.createElement(ThemeNameContext.Provider, {
+    value: themeName
+  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: getTheme(themeName)
+  }, /*#__PURE__*/React.createElement(ThemeContainer, {
+    "data-portal-id": props['data-portal-id'],
+    className: classNames(createThemeClassName(themeName), styles.themeContainer, className)
+  }, children)));
+}
+
+export { ThemeProvider, isThemeNameLocal, themeNamesLocal };

package/build/esm/components/Thumbnail/Thumbnail.css.js

@@ -0,0 +1,10 @@
+var styles = {
+  "Thumbnail": "Polaris-Thumbnail",
+  "sizeExtraSmall": "Polaris-Thumbnail--sizeExtraSmall",
+  "sizeSmall": "Polaris-Thumbnail--sizeSmall",
+  "sizeMedium": "Polaris-Thumbnail--sizeMedium",
+  "sizeLarge": "Polaris-Thumbnail--sizeLarge",
+  "transparent": "Polaris-Thumbnail--transparent"
+};
+
+export { styles as default };

package/build/esm/components/Thumbnail/Thumbnail.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { classNames, variationName } from '../../utilities/css.js';
+import styles from './Thumbnail.css.js';
+import { Image } from '../Image/Image.js';
+import { Icon } from '../Icon/Icon.js';
+
+function Thumbnail({
+  source,
+  alt,
+  size = 'medium',
+  transparent
+}) {
+  const className = classNames(styles.Thumbnail, size && styles[variationName('size', size)], transparent && styles.transparent);
+  const content = typeof source === 'string' ? /*#__PURE__*/React.createElement(Image, {
+    alt: alt,
+    source: source
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    accessibilityLabel: alt,
+    source: source
+  });
+  return /*#__PURE__*/React.createElement("span", {
+    className: className
+  }, content);
+}
+
+export { Thumbnail };