@zendeskgarden/react-theming 8.75.1 → 8.76.0

package/dist/index.esm.js

@@ -1,648 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { ThemeProvider as ThemeProvider$1, withTheme as withTheme$1, css, keyframes } from 'styled-components';
-import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
-import { getControlledValue } from '@zendeskgarden/container-utilities';
-import { rgba, darken, lighten, getValueAndUnit, math } from 'polished';
-import memoize from 'lodash.memoize';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const PALETTE = {
-  black: '#000',
-  white: '#fff',
-  product: {
-    support: '#00a656',
-    message: '#37b8af',
-    explore: '#30aabc',
-    gather: '#f6c8be',
-    guide: '#eb4962',
-    connect: '#ff6224',
-    chat: '#f79a3e',
-    talk: '#efc93d',
-    sell: '#c38f00'
-  },
-  grey: {
-    100: '#f8f9f9',
-    200: '#e9ebed',
-    300: '#d8dcde',
-    400: '#c2c8cc',
-    500: '#87929d',
-    600: '#68737d',
-    700: '#49545c',
-    800: '#2f3941'
-  },
-  blue: {
-    100: '#edf7ff',
-    200: '#cee2f2',
-    300: '#adcce4',
-    400: '#5293c7',
-    500: '#337fbd',
-    600: '#1f73b7',
-    700: '#144a75',
-    800: '#0f3554'
-  },
-  red: {
-    100: '#fff0f1',
-    200: '#f5d5d8',
-    300: '#f5b5ba',
-    400: '#e35b66',
-    500: '#d93f4c',
-    600: '#cc3340',
-    700: '#8c232c',
-    800: '#681219'
-  },
-  yellow: {
-    100: '#fff7ed',
-    200: '#ffeedb',
-    300: '#fed6a8',
-    400: '#ffb057',
-    500: '#f79a3e',
-    600: '#ed8f1c',
-    700: '#ad5918',
-    800: '#703815'
-  },
-  green: {
-    100: '#edf8f4',
-    200: '#d1e8df',
-    300: '#aecfc2',
-    400: '#5eae91',
-    500: '#228f67',
-    600: '#038153',
-    700: '#186146',
-    800: '#0b3b29'
-  },
-  kale: {
-    100: '#f5fcfc',
-    200: '#daeded',
-    300: '#bdd9d7',
-    400: '#90bbbb',
-    500: '#498283',
-    600: '#17494d',
-    700: '#03363d',
-    800: '#012b30'
-  },
-  fuschia: {
-    400: '#d653c2',
-    600: '#a81897',
-    M400: '#cf62a8',
-    M600: '#a8458c'
-  },
-  pink: {
-    400: '#ec4d63',
-    600: '#d42054',
-    M400: '#d57287',
-    M600: '#b23a5d'
-  },
-  crimson: {
-    400: '#e34f32',
-    600: '#c72a1c',
-    M400: '#cc6c5b',
-    M600: '#b24a3c'
-  },
-  orange: {
-    400: '#de701d',
-    600: '#bf5000',
-    M400: '#d4772c',
-    M600: '#b35827'
-  },
-  lemon: {
-    400: '#ffd424',
-    600: '#ffbb10',
-    M400: '#e7a500',
-    M600: '#c38f00'
-  },
-  lime: {
-    400: '#43b324',
-    600: '#2e8200',
-    M400: '#519e2d',
-    M600: '#47782c'
-  },
-  mint: {
-    400: '#00a656',
-    600: '#058541',
-    M400: '#299c66',
-    M600: '#2e8057'
-  },
-  teal: {
-    400: '#02a191',
-    600: '#028079',
-    M400: '#2d9e8f',
-    M600: '#3c7873'
-  },
-  azure: {
-    400: '#3091ec',
-    600: '#1371d6',
-    M400: '#5f8dcf',
-    M600: '#3a70b2'
-  },
-  royal: {
-    400: '#5d7df5',
-    600: '#3353e2',
-    M400: '#7986d8',
-    M600: '#4b61c3'
-  },
-  purple: {
-    400: '#b552e2',
-    600: '#6a27b8',
-    M400: '#b072cc',
-    M600: '#9358b0'
-  }
-};
-
-const BASE = 4;
-const borderRadii = {
-  sm: `${BASE / 2}px`,
-  md: `${BASE}px`
-};
-const borderStyles = {
-  solid: 'solid'
-};
-const borderWidths = {
-  sm: '1px',
-  md: '3px'
-};
-const borders = {
-  sm: `${borderWidths.sm} ${borderStyles.solid}`,
-  md: `${borderWidths.md} ${borderStyles.solid}`
-};
-const breakpoints = {
-  xs: '0px',
-  sm: `${BASE * 144}px`,
-  md: `${BASE * 192}px`,
-  lg: `${BASE * 248}px`,
-  xl: `${BASE * 300}px`
-};
-const colors = {
-  background: PALETTE.white,
-  foreground: PALETTE.grey[800],
-  primaryHue: 'blue',
-  dangerHue: 'red',
-  warningHue: 'yellow',
-  successHue: 'green',
-  neutralHue: 'grey',
-  chromeHue: 'kale'
-};
-const fonts = {
-  mono: ['SFMono-Regular' , 'Consolas' , '"Liberation Mono"' , 'Menlo', 'Courier', 'monospace'].join(','),
-  system: ['system-ui' , '-apple-system' , 'BlinkMacSystemFont' , '"Segoe UI"' , 'Roboto' , 'Oxygen-Sans' , 'Ubuntu' , 'Cantarell' , '"Helvetica Neue"', 'Arial', 'sans-serif'].join(',')
-};
-const fontSizes = {
-  xs: '10px',
-  sm: '12px',
-  md: '14px',
-  lg: '18px',
-  xl: '22px',
-  xxl: '26px',
-  xxxl: '36px'
-};
-const fontWeights = {
-  thin: 100,
-  extralight: 200,
-  light: 300,
-  regular: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-  extrabold: 800,
-  black: 900
-};
-const iconSizes = {
-  sm: '12px',
-  md: '16px',
-  lg: '26px'
-};
-const lineHeights = {
-  sm: `${BASE * 4}px`,
-  md: `${BASE * 5}px`,
-  lg: `${BASE * 6}px`,
-  xl: `${BASE * 7}px`,
-  xxl: `${BASE * 8}px`,
-  xxxl: `${BASE * 11}px`
-};
-const palette = {
-  ...PALETTE
-};
-delete palette.product;
-const shadowWidths = {
-  xs: '1px',
-  sm: '2px',
-  md: '3px'
-};
-const shadows = {
-  xs: color => `0 0 0 ${shadowWidths.xs} ${color}`,
-  sm: color => `0 0 0 ${shadowWidths.sm} ${color}`,
-  md: color => `0 0 0 ${shadowWidths.md} ${color}`,
-  lg: (offsetY, blurRadius, color) => `0 ${offsetY} ${blurRadius} 0 ${color}`
-};
-const space = {
-  base: BASE,
-  xxs: `${BASE}px`,
-  xs: `${BASE * 2}px`,
-  sm: `${BASE * 3}px`,
-  md: `${BASE * 5}px`,
-  lg: `${BASE * 8}px`,
-  xl: `${BASE * 10}px`,
-  xxl: `${BASE * 12}px`
-};
-const DEFAULT_THEME = {
-  borders,
-  borderRadii,
-  borderStyles,
-  borderWidths,
-  breakpoints,
-  colors: {
-    base: 'light',
-    ...colors
-  },
-  components: {},
-  fonts,
-  fontSizes,
-  fontWeights,
-  iconSizes,
-  lineHeights,
-  palette,
-  rtl: false,
-  shadowWidths,
-  shadows,
-  space
-};
-
-const useDocument = theme => {
-  const [controlledDocument, setControlledDocument] = useState();
-  useEffect(() => {
-    if (theme && theme.document) {
-      setControlledDocument(theme.document);
-    } else {
-      setControlledDocument(document);
-    }
-  }, [theme]);
-  return controlledDocument;
-};
-
-const ThemeProvider = _ref => {
-  let {
-    theme,
-    focusVisibleRef,
-    children,
-    ...other
-  } = _ref;
-  const scopeRef = useRef(null);
-  const relativeDocument = useDocument(theme);
-  const controlledScopeRef = focusVisibleRef === null ? React.createRef() : getControlledValue(focusVisibleRef, scopeRef);
-  useFocusVisible({
-    scope: controlledScopeRef,
-    relativeDocument
-  });
-  return React.createElement(ThemeProvider$1, _extends({
-    theme: theme
-  }, other), focusVisibleRef === undefined ? React.createElement("div", {
-    ref: scopeRef
-  }, children) : children);
-};
-ThemeProvider.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-function isRtl() {
-  let {
-    theme
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return Boolean(theme && theme.rtl);
-}
-
-function retrieveComponentStyles(componentId, props) {
-  const components = props.theme && props.theme.components;
-  if (!components) {
-    return undefined;
-  }
-  const componentStyles = components[componentId];
-  if (typeof componentStyles === 'function') {
-    return componentStyles(props);
-  }
-  return componentStyles;
-}
-
-function withTheme(WrappedComponent) {
-  return withTheme$1(WrappedComponent);
-}
-
-function getDocument() {
-  let {
-    theme
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return theme && theme.document || document;
-}
-
-const DEFAULT_SHADE = 600;
-const adjust = (color, expected, actual) => {
-  if (expected !== actual) {
-    const amount = Math.abs(expected - actual) / 100 * 0.05;
-    return expected > actual ? darken(amount, color) : lighten(amount, color);
-  }
-  return color;
-};
-const getColorV8 = memoize(function (hue) {
-  let shade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_SHADE;
-  let theme = arguments.length > 2 ? arguments[2] : undefined;
-  let transparency = arguments.length > 3 ? arguments[3] : undefined;
-  let retVal;
-  if (isNaN(shade)) {
-    return undefined;
-  }
-  const palette = theme && theme.palette ? theme.palette : DEFAULT_THEME.palette;
-  const colors = theme && theme.colors ? theme.colors : DEFAULT_THEME.colors;
-  let _hue;
-  if (typeof hue === 'string') {
-    _hue = colors[hue] || hue;
-  } else {
-    _hue = hue;
-  }
-  if (Object.prototype.hasOwnProperty.call(palette, _hue)) {
-    _hue = palette[_hue];
-  }
-  if (typeof _hue === 'object') {
-    retVal = _hue[shade];
-    if (!retVal) {
-      const _shade = Object.keys(_hue).map(hueKey => parseInt(hueKey, 10)).reduce((previous, current) => {
-        return Math.abs(current - shade) < Math.abs(previous - shade) ? current : previous;
-      });
-      retVal = adjust(_hue[_shade], shade, _shade);
-    }
-  } else {
-    retVal = adjust(_hue, shade, DEFAULT_SHADE);
-  }
-  if (transparency) {
-    retVal = rgba(retVal, transparency);
-  }
-  return retVal;
-}, (hue, shade, theme, transparency) => JSON.stringify({
-  hue,
-  shade,
-  palette: theme?.palette,
-  colors: theme?.colors,
-  transparency
-}));
-
-const getFocusBoxShadow = _ref => {
-  let {
-    boxShadow,
-    inset = false,
-    hue = 'primaryHue',
-    shade = DEFAULT_SHADE,
-    shadowWidth = 'md',
-    spacerHue = 'background',
-    spacerShade = DEFAULT_SHADE,
-    spacerWidth = 'xs',
-    theme = DEFAULT_THEME
-  } = _ref;
-  const color = getColorV8(hue, shade, theme);
-  const shadow = theme.shadows[shadowWidth](color);
-  if (spacerWidth === null) {
-    return `${inset ? 'inset' : ''} ${shadow}`;
-  }
-  const spacerColor = getColorV8(spacerHue, spacerShade, theme);
-  const retVal = `
-    ${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](spacerColor)},
-    ${inset ? 'inset' : ''} ${shadow}`;
-  return boxShadow ? `${retVal}, ${boxShadow}` : retVal;
-};
-
-function getLineHeight(height, fontSize) {
-  const [heightValue, heightUnit] = getValueAndUnit(height.toString());
-  const [fontSizeValue, fontSizeUnit] = getValueAndUnit(fontSize.toString());
-  const PIXELS = 'px';
-  if (heightUnit && heightUnit !== PIXELS) {
-    throw new Error(`Unexpected \`height\` with '${heightUnit}' units.`);
-  }
-  if (fontSizeUnit && fontSizeUnit !== PIXELS) {
-    throw new Error(`Unexpected \`fontSize\` with '${fontSizeUnit}' units.`);
-  }
-  return heightValue / fontSizeValue;
-}
-
-const maxWidth = (breakpoints, breakpoint) => {
-  const keys = Object.keys(breakpoints);
-  const index = keys.indexOf(breakpoint) + 1;
-  if (keys[index]) {
-    const dimension = getValueAndUnit(breakpoints[keys[index]]);
-    const value = dimension[0] - 0.02;
-    const unit = dimension[1];
-    return `${value}${unit}`;
-  }
-  return undefined;
-};
-function mediaQuery(query, breakpoint, theme) {
-  let retVal;
-  let min;
-  let max;
-  const breakpoints = theme && theme.breakpoints ? theme.breakpoints : DEFAULT_THEME.breakpoints;
-  if (typeof breakpoint === 'string') {
-    if (query === 'up') {
-      min = breakpoints[breakpoint];
-    } else if (query === 'down') {
-      if (breakpoint === 'xl') {
-        min = DEFAULT_THEME.breakpoints.xs;
-      } else {
-        max = maxWidth(breakpoints, breakpoint);
-      }
-    } else if (query === 'only') {
-      min = breakpoints[breakpoint];
-      max = maxWidth(breakpoints, breakpoint);
-    }
-  } else if (query === 'between') {
-    min = breakpoints[breakpoint[0]];
-    max = maxWidth(breakpoints, breakpoint[1]);
-  }
-  if (min) {
-    retVal = `@media (min-width: ${min})`;
-    if (max) {
-      retVal = `${retVal} and (max-width: ${max})`;
-    }
-  } else if (max) {
-    retVal = `@media (max-width: ${max})`;
-  } else {
-    throw new Error(`Unexpected query and breakpoint combination: '${query}', '${breakpoint}'.`);
-  }
-  return retVal;
-}
-
-const exponentialSymbols = {
-  symbols: {
-    sqrt: {
-      func: {
-        symbol: 'sqrt',
-        f: a => Math.sqrt(a),
-        notation: 'func',
-        precedence: 0,
-        rightToLeft: 0,
-        argCount: 1
-      },
-      symbol: 'sqrt',
-      regSymbol: 'sqrt\\b'
-    }
-  }
-};
-const animationStyles$1 = (position, modifier) => {
-  const property = position.split('-')[0];
-  const animationName = keyframes(["0%,66%{", ":2px;border:transparent;}"], property);
-  return css(["&", "::before,&", "::after{animation:0.3s ease-in-out ", ";}"], modifier, modifier, animationName);
-};
-const positionStyles = (position, size, inset) => {
-  const margin = math(`${size} / -2`);
-  const placement = math(`${margin} + ${inset}`);
-  let clipPath;
-  let positionCss;
-  let propertyRadius;
-  if (position.startsWith('top')) {
-    propertyRadius = 'border-bottom-right-radius';
-    clipPath = 'polygon(100% 0, 100% 1px, 1px 100%, 0 100%, 0 0)';
-    positionCss = css(["top:", ";right:", ";left:", ";margin-left:", ";"], placement, position === 'top-right' && size, position === 'top' ? '50%' : position === 'top-left' && size, position === 'top' && margin);
-  } else if (position.startsWith('right')) {
-    propertyRadius = 'border-bottom-left-radius';
-    clipPath = 'polygon(100% 0, 100% 100%, calc(100% - 1px) 100%, 0 1px, 0 0)';
-    positionCss = css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && size, placement, position === 'right-bottom' && size, position === 'right' && margin);
-  } else if (position.startsWith('bottom')) {
-    propertyRadius = 'border-top-left-radius';
-    clipPath = 'polygon(100% 0, calc(100% - 1px) 0, 0 calc(100% - 1px), 0 100%, 100% 100%)';
-    positionCss = css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && size, placement, position === 'bottom' ? '50%' : position === 'bottom-left' && size, position === 'bottom' && margin);
-  } else if (position.startsWith('left')) {
-    propertyRadius = 'border-top-right-radius';
-    clipPath = 'polygon(0 100%, 100% 100%, 100% calc(100% - 1px), 1px 0, 0 0)';
-    positionCss = css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && size, size, placement, position === 'left' && margin);
-  }
-  return css(["&::before{", ":100%;clip-path:", ";}&::before,&::after{", "}"], propertyRadius, clipPath, positionCss);
-};
-function arrowStyles(position) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const size = options.size || '6px';
-  const inset = options.inset || '0';
-  const squareSize = math(`${size} * 2 / sqrt(2)`, exponentialSymbols);
-  return css(["position:relative;&::before{border-width:inherit;border-style:inherit;border-color:transparent;background-clip:content-box;}&::after{z-index:-1;border:inherit;box-shadow:inherit;}&::before,&::after{position:absolute;transform:rotate(45deg);background-color:inherit;box-sizing:inherit;width:", ";height:", ";content:'';}", ";", ";"], squareSize, squareSize, positionStyles(position, squareSize, inset), options.animationModifier && animationStyles$1(position, options.animationModifier));
-}
-
-const useWindow = theme => {
-  const [controlledWindow, setControlledWindow] = useState();
-  useEffect(() => {
-    if (theme && theme.window) {
-      setControlledWindow(theme.window);
-    } else {
-      setControlledWindow(window);
-    }
-  }, [theme]);
-  return controlledWindow;
-};
-
-const useText = function (component, props, name, text) {
-  let condition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-  const value = condition ? props[name] : undefined;
-  return useMemo(() => {
-    if (condition) {
-      if (name === 'children') {
-        throw new Error('Error: `children` is not a valid `useText` prop.');
-      } else if (value === null || value === '') {
-        throw new Error(component.displayName ? `Error: you must provide a valid \`${name}\` text value for <${component.displayName}>.` : `Error: you must provide a valid \`${name}\` text value.`);
-      } else if (value === undefined) {
-        if (process.env.NODE_ENV === 'development') {
-          console.warn(component.displayName ? `Warning: you did not provide a customized/translated \`${name}\` text value for <${component.displayName}>. Zendesk Garden is rendering <${component.displayName} ${name}="${text}"> by default.` : `Warning: you did not provide a customized/translated \`${name}\` text value. Zendesk Garden is rendering ${name}="${text}" by default.`);
-        }
-        return text;
-      }
-    }
-    return value;
-  }, [component.displayName, value, name, text, condition]);
-};
-
-const animationStyles = (position, options) => {
-  const theme = options.theme || DEFAULT_THEME;
-  let translateValue = `${theme.space.base * 5}px`;
-  let transformFunction;
-  if (position === 'top') {
-    transformFunction = 'translateY';
-  } else if (position === 'right') {
-    transformFunction = 'translateX';
-    translateValue = `-${translateValue}`;
-  } else if (position === 'bottom') {
-    transformFunction = 'translateY';
-    translateValue = `-${translateValue}`;
-  } else {
-    transformFunction = 'translateX';
-  }
-  const animationName = keyframes(["0%{transform:", "(", ");}"], transformFunction, translateValue);
-  return css(["&", " ", "{animation:0.2s cubic-bezier(0.15,0.85,0.35,1.2) ", ";}"], options.animationModifier, options.childSelector || '> *', animationName);
-};
-const hiddenStyles = options => {
-  const transition = 'opacity 0.2s ease-in-out, 0.2s visibility 0s linear';
-  return css(["transition:", ";visibility:hidden;opacity:0;"], options.animationModifier && transition);
-};
-function menuStyles(position) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const theme = options.theme || DEFAULT_THEME;
-  let marginProperty;
-  if (position === 'top') {
-    marginProperty = 'margin-bottom';
-  } else if (position === 'right') {
-    marginProperty = 'margin-left';
-  } else if (position === 'bottom') {
-    marginProperty = 'margin-top';
-  } else {
-    marginProperty = 'margin-right';
-  }
-  return css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColorV8('neutralHue', 300, theme), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColorV8('chromeHue', 600, theme, 0.15)), getColorV8('background', 600 , theme), theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
-}
-
-const SELECTOR_FOCUS_VISIBLE = '&:focus-visible, &[data-garden-focus-visible="true"]';
-const focusStyles = _ref => {
-  let {
-    condition = true,
-    selector = SELECTOR_FOCUS_VISIBLE,
-    shadowWidth = 'md',
-    spacerWidth = 'xs',
-    styles: {
-      boxShadow,
-      ...styles
-    } = {},
-    theme,
-    ...options
-  } = _ref;
-  const _boxShadow = condition ? getFocusBoxShadow({
-    boxShadow,
-    shadowWidth,
-    spacerWidth,
-    theme,
-    ...options
-  }) : boxShadow;
-  let outline;
-  let outlineOffset;
-  if (spacerWidth === null) {
-    outline = theme.shadowWidths[shadowWidth];
-  } else {
-    outline = `${math(`${theme.shadowWidths[shadowWidth]} - ${theme.shadowWidths[spacerWidth]}`)} solid transparent`;
-    outlineOffset = theme.shadowWidths[spacerWidth];
-  }
-  return css(["&:focus{outline:none;}", "{outline:", ";outline-offset:", ";box-shadow:", ";", "}"], selector, outline, outlineOffset, _boxShadow, styles);
-};
-
-const ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
-const MENU_POSITION = ['top', 'right', 'bottom', 'left'];
-
-export { ARROW_POSITION as ARRAY_ARROW_POSITION, MENU_POSITION as ARRAY_MENU_POSITION, DEFAULT_THEME, PALETTE, SELECTOR_FOCUS_VISIBLE, ThemeProvider, arrowStyles, focusStyles, getColorV8 as getColor, getColorV8, getDocument, getFocusBoxShadow, getLineHeight, isRtl, mediaQuery, menuStyles, retrieveComponentStyles, retrieveComponentStyles as retrieveTheme, useDocument, useText, useWindow, withTheme };