@telus-uds/components-base 1.84.0 → 1.85.0

package/lib-module/Autocomplete/Autocomplete.js

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Dimensions from "react-native-web/dist/exports/Dimensions";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -87,7 +86,7 @@ const highlight = function () {
     return [...acc, item];
   }, []);
 };
-const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var _ref3;
   let {
     children,
@@ -122,23 +121,23 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
   const isControlled = value !== undefined;
 
   // We need to store current items for uncontrolled usage
-  const [currentItems, setCurrentItems] = useState(initialItems);
-  const [otherItems, setOtherItems] = useState(items);
+  const [currentItems, setCurrentItems] = React.useState(initialItems);
+  const [otherItems, setOtherItems] = React.useState(items);
 
   // We need to store the current value as well to be able to highlight it
-  const [currentValue, setCurrentValue] = useState(value ?? initialValue);
+  const [currentValue, setCurrentValue] = React.useState(value ?? initialValue);
   const inputTokens = {
     paddingLeft: INPUT_LEFT_PADDING
   };
 
   // Setting up the overlay
-  const openOverlayRef = useRef();
-  const [isExpanded, setIsExpanded] = useState(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
-  const [isFocused, setisFocused] = useState(false);
-  const [sourceLayout, setSourceLayout] = useState(null);
+  const openOverlayRef = React.useRef();
+  const [isExpanded, setIsExpanded] = React.useState(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
+  const [isFocused, setisFocused] = React.useState(false);
+  const [sourceLayout, setSourceLayout] = React.useState(null);
 
   // When it's nested, selected value
-  const [nestedSelectedValue, setNestedSelectedValue] = useState(null);
+  const [nestedSelectedValue, setNestedSelectedValue] = React.useState(null);
   const {
     supportsProps,
     ...selectedProps
@@ -160,7 +159,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
       vertical: Platform.OS !== 'web' && (hint || inputLabel) ? 28 : 4
     }
   });
-  const targetRef = useRef(null);
+  const targetRef = React.useRef(null);
   // We limit the number of suggestions displayed to avoid huge lists
   // TODO: add a way to make the `Listbox` occupy fixed height and be scrollable
   // within that height, which will unlock similar behaviour for `AutoComplete` as well
@@ -173,7 +172,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     copy
   });
   // Tracking input width changes to resize the listbox overlay accordingly
-  const [inputWidth, setInputWidth] = useState();
+  const [inputWidth, setInputWidth] = React.useState();
   useSafeLayoutEffect(() => {
     if (Platform.OS === 'web') {
       const updateInputWidth = () => {
@@ -248,7 +247,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
    * within the list, if doesn't exist the nested item is added to the top of the list,
    * the nested item is added with an id equal "0"
    */
-  useEffect(() => {
+  React.useEffect(() => {
     if (nestedSelectedValue && !items.find(item => item.id === 0)) {
       const tmpItems = [...items];
       tmpItems.unshift({

package/lib-module/Autocomplete/Loading.js

@@ -6,12 +6,13 @@ import Box from '../Box';
 import StackView from '../StackView';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Loading = _ref => {
+const Loading = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     label
   } = _ref;
   return /*#__PURE__*/_jsx(Box, {
     space: 3,
+    ref: ref,
     children: /*#__PURE__*/_jsxs(StackView, {
       direction: "row",
       space: 2,
@@ -27,7 +28,8 @@ const Loading = _ref => {
       })]
     })
   });
-};
+});
+Loading.displayName = 'Loading';
 Loading.propTypes = {
   label: PropTypes.string
 };

package/lib-module/Autocomplete/Suggestions.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import A11yText from '../A11yText';
 import Typography from '../Typography';
@@ -7,7 +7,7 @@ import Listbox from '../Listbox';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Suggestions = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Suggestions = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     hasResults,
     items = [],

package/lib-module/Badge/Badge.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
@@ -66,7 +66,7 @@ const getTypographyVariant = _ref5 => {
     size: fontSizeMapping[fontSize]
   };
 };
-const Badge = /*#__PURE__*/forwardRef((_ref6, ref) => {
+const Badge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     tokens,

package/lib-module/BaseProvider/HydrationContext.js

@@ -1,8 +1,8 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import { jsx as _jsx } from "react/jsx-runtime";
-const HydrationContext = /*#__PURE__*/createContext();
+const HydrationContext = /*#__PURE__*/React.createContext();
 const isSSR = typeof window === 'undefined';
 const hasWebStyleTag = () => {
   var _document;
@@ -19,7 +19,7 @@ const hasWebStyleTag = () => {
  * during the very first client-side render or hydration, but not available on the server,
  * to ensure no changes happen until the original SSR DOM has been hydrated.
  */
-export const useHydrationContext = () => useContext(HydrationContext);
+export const useHydrationContext = () => React.useContext(HydrationContext);
 
 /**
  * Allows components and hooks to observe if SSR hydration is currently in progress
@@ -29,8 +29,8 @@ export const HydrationProvider = _ref => {
   let {
     children
   } = _ref;
-  const [hasMounted, setHasMounted] = useState(false);
-  useEffect(() => {
+  const [hasMounted, setHasMounted] = React.useState(false);
+  React.useEffect(() => {
     setHasMounted(true);
   }, []);
 

package/lib-module/Box/Box.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import ScrollView from "react-native-web/dist/exports/ScrollView";
@@ -170,7 +170,7 @@ const setBackgroundImage = _ref2 => {
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-const Box = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     space,
     horizontal = space,
@@ -218,8 +218,8 @@ const Box = /*#__PURE__*/forwardRef((_ref3, ref) => {
   const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover');
   const backgroundImagePosition = useResponsiveProp(position, 'none');
   const backgroundImageAlign = useResponsiveProp(align, 'stretch');
-  const [backgroundImageWidth, setBackgroundImageWidth] = useState(0);
-  const [backgroundImageHeight, setBackgroundImageHeight] = useState(0);
+  const [backgroundImageWidth, setBackgroundImageWidth] = React.useState(0);
+  const [backgroundImageHeight, setBackgroundImageHeight] = React.useState(0);
   if (backgroundImage) content = setBackgroundImage({
     src,
     alt,
@@ -230,7 +230,7 @@ const Box = /*#__PURE__*/forwardRef((_ref3, ref) => {
     backgroundImageHeight,
     content
   });
-  useEffect(() => {
+  React.useEffect(() => {
     if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
       Image.getSize(src, (width, height) => {
         // Only update the state if the size has changed

package/lib-module/Button/Button.js

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import ButtonBase from './ButtonBase';
 import buttonPropTypes, { textAndA11yText } from './propTypes';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps } from '../utils/props';
 import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'button',
     tokens,

package/lib-module/Button/ButtonBase.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import View from "react-native-web/dist/exports/View";
@@ -218,7 +218,7 @@ const selectItemIconTokens = _ref10 => {
     color: iconColor || color
   };
 };
-const ButtonBase = /*#__PURE__*/forwardRef((_ref11, ref) => {
+const ButtonBase = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   let {
     id,
     href,
@@ -321,9 +321,6 @@ ButtonBase.propTypes = {
   ...selectedSystemPropTypes,
   ...buttonPropTypes
 };
-ButtonBase.defaultProps = {
-  id: undefined
-};
 const staticStyles = StyleSheet.create({
   row: {
     // Apply all button alignment horizontally; no vertical stacking within a button

package/lib-module/Button/ButtonDropdown.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import Text from "react-native-web/dist/exports/Text";
@@ -49,7 +49,7 @@ const selectIconTokens = _ref => {
     }
   };
 };
-const ButtonDropdown = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     value,
     initialValue,

package/lib-module/Button/ButtonGroup.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
@@ -12,7 +12,7 @@ import { getPressHandlersWithArgs } from '../utils/pressability';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
-const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant,
     buttonVariant,

package/lib-module/Button/ButtonLink.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ButtonBase from './ButtonBase';
 import buttonPropTypes, { textAndA11yText } from './propTypes';
@@ -11,7 +11,7 @@ import { useViewport } from '../ViewportProvider';
  * ButtonLink is a block-level component and should not be used inline.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ButtonLink = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ButtonLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'link',
     tokens,

package/lib-module/Card/Card.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import { useThemeTokens, useThemeTokensCallback, useResponsiveThemeTokens, useTheme } from '../ThemeProvider';
@@ -7,10 +7,52 @@ import { useViewport } from '../ViewportProvider';
 import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
 import CardBase from './CardBase';
 import PressableCardBase from './PressableCardBase';
+import CheckboxButton from '../Checkbox/CheckboxButton';
+import RadioButton from '../Radio/RadioButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const SelectionType = {
+  Checkbox: 'checkbox',
+  Radio: 'radiogroup',
+  None: undefined
+};
+const selectInputStyle = _ref => {
+  let {
+    paddingTop,
+    paddingRight
+  } = _ref;
+  return {
+    position: 'absolute',
+    top: paddingTop,
+    right: paddingRight
+  };
+};
+const getInputProps = _ref2 => {
+  let {
+    id,
+    checkColor,
+    boxBackgroundColor,
+    checkBackgroundColor,
+    isControlled,
+    isChecked,
+    isInactive,
+    handleChange
+  } = _ref2;
+  return {
+    inputId: id,
+    tokens: {
+      iconColor: checkColor,
+      inputBackgroundColor: boxBackgroundColor,
+      iconBackgroundColor: checkBackgroundColor
+    },
+    isControlled,
+    isChecked,
+    inactive: isInactive,
+    handleChange
+  };
+};
 
 /**
  * A basic card component, unstyled by default.
@@ -60,16 +102,18 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  var _interactiveCard$vari, _interactiveCard$vari2;
   let {
     children,
     tokens,
     variant,
     dataSet,
     onPress,
+    id,
     interactiveCard,
     ...rest
-  } = _ref;
+  } = _ref3;
   const viewport = useViewport();
   const {
     themeOptions
@@ -81,6 +125,9 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
   const themeTokens = useTokens('Card', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
+  const selected = interactiveCard === null || interactiveCard === void 0 ? void 0 : (_interactiveCard$vari = interactiveCard.variant) === null || _interactiveCard$vari === void 0 ? void 0 : _interactiveCard$vari.selected;
+  const inactive = interactiveCard === null || interactiveCard === void 0 ? void 0 : (_interactiveCard$vari2 = interactiveCard.variant) === null || _interactiveCard$vari2 === void 0 ? void 0 : _interactiveCard$vari2.inactive;
+  const selectionType = interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.selectionType;
   const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
     interactive: true,
     ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
@@ -93,7 +140,45 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
     paddingLeft,
     paddingRight,
     ...restOfTokens
-  } = themeTokens;
+  } = selectionType ? getThemeTokens() : themeTokens;
+  const {
+    inputBackgroundColor,
+    iconBackgroundColor,
+    iconColor,
+    icon,
+    inputBorderRadius,
+    inputHeight,
+    inputWidth,
+    iconSize,
+    inputShadow,
+    inputBorderWidth,
+    inputBorderColor
+  } = getThemeTokens();
+  const checkboxTokens = {
+    inputBackgroundColor,
+    iconBackgroundColor,
+    icon,
+    iconColor,
+    inputBorderRadius,
+    inputHeight,
+    inputWidth,
+    iconSize,
+    inputShadow,
+    inputBorderWidth,
+    inputBorderColor
+  };
+  const radioTokens = {
+    iconBackgroundColor,
+    iconColor,
+    containerShadow: inputShadow,
+    icon,
+    inputBackgroundColor,
+    inputBorderRadius,
+    inputSize: inputHeight,
+    checkedSize: iconSize,
+    inputBorderWidth,
+    inputBorderColor
+  };
   let cardStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
@@ -109,6 +194,43 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
   } else {
     cardStyles = themeTokens;
   }
+  const renderInputPerSelectionType = props => {
+    switch (selectionType) {
+      case SelectionType.Checkbox:
+        return /*#__PURE__*/_jsx(View, {
+          style: selectInputStyle(getThemeTokens()),
+          children: /*#__PURE__*/_jsx(CheckboxButton, {
+            ...props,
+            tokens: {
+              ...checkboxTokens,
+              ...(props === null || props === void 0 ? void 0 : props.tokens)
+            }
+          })
+        });
+      case SelectionType.Radio:
+        return /*#__PURE__*/_jsx(View, {
+          style: selectInputStyle(getThemeTokens()),
+          children: /*#__PURE__*/_jsx(RadioButton, {
+            ...props,
+            tokens: {
+              ...radioTokens,
+              ...(props === null || props === void 0 ? void 0 : props.tokens)
+            }
+          })
+        });
+      default:
+        return null;
+    }
+  };
+  const renderNoSelectionView = () => /*#__PURE__*/_jsx(View, {
+    style: {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight
+    },
+    children: children
+  });
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(CardBase, {
       ref: ref,
@@ -124,16 +246,31 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
           dataSet: dataSet,
           onPress: onPress,
           ...selectProps(rest),
-          children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
-        }), children ? /*#__PURE__*/_jsx(View, {
-          style: {
-            paddingTop,
-            paddingBottom,
-            paddingLeft,
-            paddingRight
-          },
-          children: children
-        }) : null]
+          children: cardState => {
+            const {
+              iconColor: checkColor,
+              inputBackgroundColor: boxBackgroundColor,
+              iconBackgroundColor: checkBackgroundColor
+            } = getThemeTokens({
+              ...cardState,
+              selected,
+              interactive: true,
+              isControl: true
+            }, interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens);
+            return /*#__PURE__*/_jsxs(_Fragment, {
+              children: [renderInputPerSelectionType(getInputProps({
+                id,
+                checkColor,
+                boxBackgroundColor,
+                checkBackgroundColor,
+                isControlled: true,
+                isChecked: selected || (cardState === null || cardState === void 0 ? void 0 : cardState.hover),
+                isInactive: inactive,
+                onPress
+              })), interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body]
+            });
+          }
+        }), children && selectionType !== SelectionType.None ? renderNoSelectionView() : null]
       }) : children
     })
   });
@@ -158,15 +295,23 @@ Card.propTypes = {
    * Note: This is only available when `interactiveCard` prop is used.
    */
   onPress: PropTypes.func,
+  /**
+   * Card ID.
+   */
+  id: PropTypes.string,
   /**
    * Object to set interactive card's properties
    * - body: The body of the interactive card, can be any renderable node
    * - tokens: The tokens to be used for the interactive card
+   * - selectionType: If the card has `isControl` variant set to `true`, the selectionType can have one of the following options: 
+        - `radiogroup`
+        - `checkbox`
    * - variant: The variant to be used for the interactive card
    */
   interactiveCard: PropTypes.shape({
     body: PropTypes.node,
     tokens: getTokensPropType('Card'),
+    selectionType: PropTypes.oneOf(Object.values(SelectionType)),
     variant: variantProp.propType
   })
 };

package/lib-module/Card/CardBase.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -49,7 +49,7 @@ const selectStyles = _ref => {
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
-const CardBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const CardBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,

package/lib-module/Card/PressableCardBase.js

@@ -1,14 +1,14 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
 import { useViewport } from '../ViewportProvider';
 import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider';
-import { a11yProps, clickProps, focusHandlerProps, getTokenNames, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
+import { a11yProps, clickProps, focusHandlerProps, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
 import CardBase from './CardBase';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const tokenKeys = [...getTokenNames('Card'),
+const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
 // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];
@@ -19,7 +19,7 @@ export const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const PressableCardBase = /*#__PURE__*/forwardRef((_ref, ref) => {
+const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     tokens,