@telus-uds/components-base 0.0.2-prerelease.1 → 0.0.2-prerelease.5

package/lib/InputLabel/InputLabel.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { getTokensPropType, selectTokens, variantProp } from '../utils';
+import LabelContent from './LabelContent';
+
+const selectLabelStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
+
+const selectHintStyles = ({
+  hintColor,
+  hintFontName,
+  hintFontSize,
+  hintFontWeight,
+  hintLineHeight
+}) => applyTextStyles({
+  color: hintColor,
+  fontName: hintFontName,
+  fontSize: hintFontSize,
+  fontWeight: hintFontWeight,
+  lineHeight: hintLineHeight
+});
+
+const selectGapStyles = ({
+  gap
+}) => ({
+  marginRight: gap
+});
+
+function InputLabel({
+  label,
+  forId,
+  hint,
+  hintPosition = 'inline',
+  hintId,
+  tooltip,
+  tokens,
+  variant
+}) {
+  const themeTokens = useThemeTokens('InputLabel', tokens, variant); // TODO: use the actual Tooltip component here
+
+  const hasTooltip = tooltip !== undefined;
+  const isHintInline = hintPosition === 'inline';
+  return /*#__PURE__*/React.createElement(View, {
+    style: [staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label]
+  }, /*#__PURE__*/React.createElement(LabelContent, {
+    forId: forId
+  }, label)), hint && isHintInline && /*#__PURE__*/React.createElement(Text, {
+    style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens)],
+    nativeID: hintId
+  }, hint), tooltip && /*#__PURE__*/React.createElement(Text, null, "?"), hint && !isHintInline && /*#__PURE__*/React.createElement(Text, {
+    style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
+    nativeID: hintId
+  }, hint));
+}
+
+InputLabel.propTypes = {
+  label: PropTypes.string.isRequired,
+  forId: PropTypes.string,
+  hint: PropTypes.string,
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
+  hintId: PropTypes.string,
+  tooltip: PropTypes.string,
+  tokens: getTokensPropType('InputLabel'),
+  variant: variantProp.propType
+};
+export default InputLabel;
+const staticStyles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  containerWithHintBelow: {
+    flexWrap: 'wrap'
+  },
+  label: {
+    flexShrink: 0
+  },
+  hintBelow: {
+    flexBasis: '100%',
+    flexShrink: 0
+  }
+});

package/lib/InputLabel/LabelContent.native.js

@@ -0,0 +1,8 @@
+// Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
+function LabelContent({
+  children
+}) {
+  return children;
+}
+
+export default LabelContent;

package/lib/InputLabel/LabelContent.web.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function LabelContent({
+  children,
+  forId
+}) {
+  return /*#__PURE__*/React.createElement("label", {
+    htmlFor: forId
+  }, children);
+}
+
+export default LabelContent;
+LabelContent.propTypes = {
+  children: PropTypes.string,
+  forId: PropTypes.string
+};

package/lib/InputLabel/index.js

@@ -0,0 +1,2 @@
+import InputLabel from './InputLabel';
+export default InputLabel;

package/lib/Link/ChevronLink.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || 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); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import Link from './Link';
@@ -9,7 +7,7 @@ const ChevronLink = ({
   children,
   variant = {},
   ...linkProps
-}) => /*#__PURE__*/React.createElement(Link, _extends({
+}) => /*#__PURE__*/React.createElement(Link, Object.assign({
   variant: {
     component: 'ChevronLink',
     ...variant

package/lib/Link/Link.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || 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); }
-
 import React from 'react';
 import LinkBase from './LinkBase';
 
@@ -9,7 +7,7 @@ const Link = ({
   accessibilityRole = 'link',
   variant = {},
   ...linkProps
-}) => /*#__PURE__*/React.createElement(LinkBase, _extends({
+}) => /*#__PURE__*/React.createElement(LinkBase, Object.assign({
   href: href,
   accessibilityRole: accessibilityRole,
   variant: {

package/lib/Link/LinkBase.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || 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); }
-
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Text, Platform, StyleSheet, Pressable, PixelRatio, View, TouchableWithoutFeedback } from 'react-native';
@@ -27,7 +25,10 @@ Platform.OS === 'web' ? {
   outline: outerBorderOutline,
   borderWidth: outerBorderWidth,
   borderColor: outerBorderColor,
-  borderRadius: outerBorderRadius
+  borderRadius: outerBorderRadius,
+  // Stops focus ring stretching horizontally if parent has display: block
+  // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
+  display: 'inline-flex'
 } : {};
 
 const selectTextStyles = ({
@@ -55,10 +56,12 @@ const selectIconStyles = ({
   iconGapBefore,
   iconGapAfter,
   iconScale,
-  iconTranslateX
+  iconTranslateX,
+  iconTranslateY
 }) => ({
   scale: iconScale,
   translateX: iconTranslateX,
+  translateY: iconTranslateY,
   size: iconSize,
   gapBefore: iconGapBefore,
   gapAfter: iconGapAfter
@@ -173,7 +176,7 @@ const LinkBase = ({
         onPressIn: onPressIn,
         onPressOut: onPressOut,
         onPress: _onPress
-      }, /*#__PURE__*/React.createElement(Text, _extends({}, textProps, {
+      }, /*#__PURE__*/React.createElement(Text, Object.assign({}, textProps, {
         style: [outerBorderStyles, blockLeftStyle, contentStyles, blockTextStyles, textStyles]
       }), children))
     );
@@ -185,7 +188,8 @@ const LinkBase = ({
     size: iconStyles.size ? iconStyles.size * iconScale : undefined,
     color: contentStyles.color ?? undefined,
     scale: iconStyles.scale ?? undefined,
-    translateX: iconStyles.translateX ?? undefined
+    translateX: iconStyles.translateX ?? undefined,
+    translateY: iconStyles.translateY ?? undefined
   };
   const iconContent = /*#__PURE__*/React.createElement(IconComponent, {
     tokens: iconTokens,
@@ -203,7 +207,7 @@ const LinkBase = ({
   // properly on Android which purely inline links can't do. Add an isNested case that is similar to
   // https://github.com/telus/universal-design-system/pull/233
 
-  return /*#__PURE__*/React.createElement(Pressable, _extends({}, linkPropSet, {
+  return /*#__PURE__*/React.createElement(Pressable, Object.assign({}, linkPropSet, {
     style: [outerBorderStyles, blockLeftStyle, staticStyles.rowContainer]
   }), iconPosition === 'left' && iconBlock, /*#__PURE__*/React.createElement(Text, {
     style: [contentStyles, blockTextStyles, textStyles, Platform.select({

package/lib/Link/TextButton.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || 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); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import LinkBase from './LinkBase';
@@ -10,7 +8,7 @@ const TextButton = ({
   variant = {},
   accessibilityRole = 'button',
   ...linkProps
-}) => /*#__PURE__*/React.createElement(LinkBase, _extends({
+}) => /*#__PURE__*/React.createElement(LinkBase, Object.assign({
   onPress: onPress,
   accessibilityRole: accessibilityRole,
   variant: {

package/lib/Pagination/PageButton.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Text } from 'react-native';
+import PropTypes from 'prop-types';
+import ButtonBase from '../Button/ButtonBase';
+import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, copyPropTypes, getTokensPropType, hrefAttrsProp, linkProps, selectTokens, variantProp } from '../utils';
+import useCopy from './useCopy';
+import dictionary from './dictionary';
+
+const selectTextStyles = ({
+  color,
+  fontName,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  textLine
+}) => applyTextStyles({
+  color,
+  fontName,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  textDecorationLine: textLine
+});
+
+function PageButton({
+  label,
+  onPress,
+  href,
+  isActive,
+  copy,
+  variant,
+  tokens,
+  ...props
+}) {
+  const getTokens = useThemeTokensCallback('PaginationPageButton', tokens, variant);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+
+  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
+
+  const getTextStyles = buttonState => selectTextStyles(getTokens(buttonState));
+
+  const activeProps = isActive ? {
+    selected: true,
+    ...a11yProps.nonFocusableProps,
+    // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
+    // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
+    key: 'active-item'
+  } : {};
+  const accessibilityRole = href !== undefined ? 'link' : 'button';
+  const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
+  const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
+  const {
+    hrefAttrs,
+    rest
+  } = hrefAttrsProp.bundle(props);
+  const buttonProps = {
+    accessibilityRole,
+    accessibilityLabel,
+    onPress,
+    href,
+    hrefAttrs,
+    ...rest
+  };
+  return /*#__PURE__*/React.createElement(ButtonBase, Object.assign({}, buttonProps, {
+    tokens: getButtonTokens
+  }, activeProps), buttonState => {
+    return /*#__PURE__*/React.createElement(Text, {
+      style: getTextStyles(buttonState)
+    }, label);
+  });
+}
+
+PageButton.propTypes = {
+  label: PropTypes.string,
+  isActive: PropTypes.bool,
+  copy: copyPropTypes,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('PaginationPageButton'),
+  ...linkProps.types
+};
+export default PageButton;

package/lib/Pagination/Pagination.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { componentPropType, copyPropTypes, getTokensPropType, variantProp } from '../utils';
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import Box from '../Box';
+import usePagination from './usePagination';
+import PageButton from './PageButton';
+import SideButton from './SideButton';
+
+const selectTextStyles = ({
+  color,
+  fontName,
+  fontSize,
+  fontWeight,
+  lineHeight
+}) => applyTextStyles({
+  color,
+  fontName,
+  fontSize,
+  fontWeight,
+  lineHeight
+});
+
+function Pagination({
+  children,
+  copy = 'en',
+  variant,
+  tokens,
+  sideButtonVariant,
+  sideButtonTokens
+}) {
+  const viewport = useViewport();
+  const {
+    truncateAbove,
+    gap,
+    ...themeTokens
+  } = useThemeTokens('Pagination', tokens, variant, {
+    viewport
+  });
+  const items = React.Children.toArray(children);
+  const {
+    isItemActive,
+    getItemProps,
+    showPrevious,
+    showNext,
+    nextItemProps,
+    previousItemProps,
+    shouldRenderButton,
+    shouldRenderEllipsis
+  } = usePagination({
+    items,
+    truncateAbove
+  });
+  const ellipsisTextStyles = selectTextStyles(themeTokens);
+
+  if (items.length === 0) {
+    return null;
+  } // TODO: replace with a spacing component when https://github.com/telus/universal-design-system/pull/531 is implemented
+  // concatenate all items to easily wrap them in identical spacing components
+
+
+  const buttons = [showPrevious && /*#__PURE__*/React.createElement(SideButton, Object.assign({}, previousItemProps, {
+    direction: "previous",
+    copy: copy,
+    variant: sideButtonVariant,
+    tokens: sideButtonTokens
+  })), ...items.map((child, itemIndex) => {
+    const buttonLabel = `${itemIndex + 1}`;
+    const itemProps = getItemProps(itemIndex);
+
+    if (shouldRenderButton(itemIndex)) {
+      return /*#__PURE__*/React.createElement(PageButton, Object.assign({}, itemProps, {
+        label: buttonLabel,
+        copy: copy,
+        isActive: isItemActive(itemIndex)
+      }));
+    }
+
+    if (shouldRenderEllipsis(itemIndex)) {
+      return /*#__PURE__*/React.createElement(Text, {
+        style: ellipsisTextStyles
+      }, "...");
+    }
+
+    return null;
+  }), showNext && /*#__PURE__*/React.createElement(SideButton, Object.assign({}, nextItemProps, {
+    direction: "next",
+    copy: copy,
+    variant: sideButtonVariant,
+    tokens: sideButtonTokens
+  }))];
+  return /*#__PURE__*/React.createElement(View, {
+    style: staticStyles.container
+  }, buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
+  .map((element, index) => [element, `page-${index + 1}`]).filter(([element]) => element !== null).map(([element, key]) => /*#__PURE__*/React.createElement(Box, {
+    right: gap,
+    key: key
+  }, element)));
+}
+
+Pagination.PageButton = PageButton;
+Pagination.propTypes = {
+  children: componentPropType('PageButton'),
+  copy: copyPropTypes,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Pagination'),
+  sideButtonVariant: variantProp.propType,
+  sideButtonTokens: getTokensPropType('PaginationSideButton')
+};
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center'
+  }
+});
+export default Pagination;

package/lib/Pagination/SideButton.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { StyleSheet, View, Text, PixelRatio } from 'react-native';
+import PropTypes from 'prop-types';
+import ButtonBase from '../Button/ButtonBase';
+import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens } from '../utils';
+import dictionary from './dictionary';
+import useCopy from './useCopy';
+
+const selectTextStyles = ({
+  color,
+  fontName,
+  fontSize,
+  fontWeight,
+  lineHeight
+}) => applyTextStyles({
+  color,
+  fontName,
+  fontSize,
+  fontWeight,
+  lineHeight
+});
+
+const selectIconTokens = ({
+  color,
+  iconSize,
+  iconTranslateX
+}) => {
+  // Scale icon with text, but with a cap so text isn't squashed at large scales
+  const iconScale = Math.min(PixelRatio.getFontScale(), 2);
+  return {
+    color,
+    size: iconSize * iconScale,
+    translateX: iconTranslateX
+  };
+};
+
+function SideButton({
+  direction = 'previous',
+  onPress,
+  href,
+  copy,
+  variant,
+  tokens,
+  ...props
+}) {
+  const viewport = useViewport();
+  const buttonVariant = {
+    direction,
+    viewport,
+    ...variant
+  };
+  const getTokens = useThemeTokensCallback('PaginationSideButton', tokens, buttonVariant);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const {
+    icon: IconComponent
+  } = getTokens(tokens, buttonVariant);
+
+  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
+
+  const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState));
+
+  const getTextStyles = buttonState => selectTextStyles(getTokens(buttonState));
+
+  const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
+  const showLabel = viewport !== 'sm' && viewport !== 'xs';
+  const accessibilityLabel = direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel');
+  const accessibilityRole = href !== undefined ? 'link' : 'button';
+  const {
+    hrefAttrs,
+    rest
+  } = hrefAttrsProp.bundle(props);
+  const buttonProps = {
+    accessibilityRole,
+    accessibilityLabel,
+    onPress,
+    href,
+    hrefAttrs,
+    ...rest
+  };
+  return /*#__PURE__*/React.createElement(ButtonBase, Object.assign({}, buttonProps, {
+    tokens: getButtonTokens
+  }), buttonState => /*#__PURE__*/React.createElement(View, {
+    style: staticStyles.contentContainer
+  }, direction === 'previous' && IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
+    tokens: getIconTokens(buttonState)
+  }), showLabel && /*#__PURE__*/React.createElement(Text, {
+    style: getTextStyles(buttonState)
+  }, label), direction === 'next' && IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
+    tokens: getIconTokens(buttonState)
+  })));
+}
+
+SideButton.propTypes = {
+  direction: PropTypes.oneOf(['previous', 'next']),
+  copy: copyPropTypes,
+  ...linkProps.types
+};
+export default SideButton;
+const staticStyles = StyleSheet.create({
+  contentContainer: {
+    flexDirection: 'row'
+  }
+});

package/lib/Pagination/dictionary.js

@@ -0,0 +1,18 @@
+export default {
+  en: {
+    goToLabel: 'Go to page number',
+    currentLabel: '(current)',
+    previousLabel: 'Go to previous page',
+    previousText: 'Previous',
+    nextLabel: 'Go to next page',
+    nextText: 'Next'
+  },
+  fr: {
+    goToLabel: 'Aller au page n°',
+    currentLabel: '(page actuelle)',
+    previousLabel: 'Aller au page précédent',
+    previousText: 'Précédent',
+    nextLabel: 'Aller au prochain page',
+    nextText: 'Suivant'
+  }
+};

package/lib/Pagination/index.js

@@ -0,0 +1,2 @@
+import Pagination from './Pagination';
+export default Pagination;

package/lib/Pagination/useCopy.js

@@ -0,0 +1,10 @@
+function useCopy({
+  dictionary,
+  copy
+}) {
+  const getCopy = key => dictionary[copy][key];
+
+  return getCopy;
+}
+
+export default useCopy;

package/lib/Pagination/usePagination.js

@@ -0,0 +1,70 @@
+/**
+ * Handles configurable truncating of pagination items.
+ *
+ * @param {object} props
+ * @param {React.Element[]} items
+ * @param {number} truncateAbove
+ */
+function usePagination({
+  items,
+  truncateAbove
+}) {
+  const activeItemIndex = Math.max(items.findIndex(item => item.props.isActive), 0 // default to the first item if none is marked as active
+  );
+
+  const getItemProps = index => {
+    const {
+      onPress,
+      href,
+      hrefAttrs,
+      variant,
+      tokens
+    } = items[index]?.props ?? {};
+    return {
+      onPress,
+      href,
+      hrefAttrs,
+      variant,
+      tokens
+    };
+  };
+
+  const windowSize = truncateAbove > 4 ? 3 : 1;
+  const truncateEnabled = items.length > truncateAbove;
+  const truncateWindowStart = windowSize;
+  const truncateWindowEnd = items.length - 1 - windowSize; // basically how many items next to the currently active one do we want to render
+
+  const activeWindowStart = activeItemIndex - (windowSize - 1) / 2;
+  const activeWindowEnd = activeItemIndex + (windowSize - 1) / 2;
+  const isFirstActive = activeItemIndex === 0;
+  const isLastActive = activeItemIndex === items.length - 1; // start truncating when the active item is within the truncate window
+
+  const isLeftTruncated = truncateEnabled && activeItemIndex >= truncateWindowStart;
+  const isRightTruncated = truncateEnabled && activeItemIndex <= truncateWindowEnd;
+
+  function shouldRenderEllipsis(itemIndex) {
+    const isNextToFirst = itemIndex === 1;
+    const isNextToLast = itemIndex === items.length - 2;
+    return isLeftTruncated && isNextToFirst || isRightTruncated && isNextToLast;
+  }
+
+  function shouldRenderButton(itemIndex) {
+    const isFirst = itemIndex === 0;
+    const isLast = itemIndex === items.length - 1;
+    const isInActiveWindow = itemIndex >= activeWindowStart && itemIndex <= activeWindowEnd;
+    return isFirst || isLast || isInActiveWindow || !isLeftTruncated && itemIndex <= truncateWindowStart || !isRightTruncated && itemIndex >= truncateWindowEnd;
+  }
+
+  return {
+    showPrevious: !isFirstActive,
+    showNext: !isLastActive,
+    shouldRenderButton,
+    shouldRenderEllipsis,
+    isItemActive: itemIndex => itemIndex === activeItemIndex,
+    getItemProps,
+    nextItemProps: getItemProps(activeItemIndex + 1),
+    previousItemProps: getItemProps(activeItemIndex - 1)
+  };
+}
+
+export default usePagination;

package/lib/SideNav/Item.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || 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); }
-
 import React from 'react';
 import { Pressable } from 'react-native';
 import PropTypes from 'prop-types';
@@ -66,7 +64,7 @@ const Item = ({
     ...hrefAttrsProp.spread(hrefAttrs),
     ...rest
   });
-  const getTokens = useThemeTokensCallback('SideNavItem');
+  const getTokens = useThemeTokensCallback('SideNavItem', tokens, variant);
 
   const getAppearanceState = ({
     hovered
@@ -76,9 +74,9 @@ const Item = ({
     expanded: isExpanded
   });
 
-  const getPressableStyle = pressableState => selectItemStyles(getTokens(tokens, variant, getAppearanceState(pressableState)));
+  const getPressableStyle = pressableState => selectItemStyles(getTokens(getAppearanceState(pressableState)));
 
-  return /*#__PURE__*/React.createElement(Pressable, _extends({
+  return /*#__PURE__*/React.createElement(Pressable, Object.assign({
     style: getPressableStyle
   }, linkPropSet, {
     accessibilityState: {
@@ -86,7 +84,7 @@ const Item = ({
     },
     testID: testID
   }), pressableState => {
-    const themeTokens = getTokens(tokens, variant, getAppearanceState(pressableState));
+    const themeTokens = getTokens(getAppearanceState(pressableState));
     return /*#__PURE__*/React.createElement(ItemContent, {
       tokens: themeTokens
     }, children);