@telus-uds/components-base 1.74.0 → 1.76.0

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 18 Jan 2024 22:43:26 GMT and should not be manually modified.
+This log was last generated on Wed, 07 Feb 2024 19:09:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.76.0
+
+Wed, 07 Feb 2024 19:09:40 GMT
+
+### Minor changes
+
+- Changes to enable the key recogniztion in the press state (35577399+JoshHC@users.noreply.github.com)
+- carouselThumbnail component modified to match design intention (35577399+JoshHC@users.noreply.github.com)
+- refactor(PriceLockup): started the migration to component-base (chris.tafts@telus.com)
+- refactor(PriceLuckup): started the migration to component-base (chris.tafts@telus.com)
+
+### Patches
+
+- fix ordered-list component single child render (guillermo.peitzner@telus.com)
+
+## 1.75.0
+
+Mon, 29 Jan 2024 18:41:50 GMT
+
+### Minor changes
+
+- Styles changed in notification component to be SSR (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v2.50.1
+
 ## 1.74.0
 
-Thu, 18 Jan 2024 22:43:26 GMT
+Thu, 18 Jan 2024 22:55:53 GMT
 
 ### Minor changes
 

package/lib/Carousel/CarouselThumbnail.js

@@ -61,7 +61,8 @@ const CarouselThumbnail = _ref2 => {
     padding,
     selectedBorderColor,
     selectedBorderWidth,
-    size
+    size,
+    margin
   } = getThumbnailTokens({
     viewport
   });
@@ -73,7 +74,12 @@ const CarouselThumbnail = _ref2 => {
     selected: {
       borderColor: selectedBorderColor,
       borderWidth: selectedBorderWidth,
-      padding: padding - selectedBorderWidth + borderWidth
+      padding: padding - selectedBorderWidth,
+      marginBottom: margin + selectedBorderWidth
+    },
+    nonSelected: {
+      padding: padding - borderWidth,
+      marginBottom: margin + selectedBorderWidth
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
@@ -90,9 +96,9 @@ const CarouselThumbnail = _ref2 => {
         pressed,
         focus: focused
       }));
-      return [pressableStyles, index === activeIndex && styles.selected, {
+      return [pressableStyles, index === activeIndex ? [styles.selected, {
         outline: 'none'
-      }];
+      }] : styles.nonSelected];
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
       accessibilityIgnoresInvertColors: true,

package/lib/Carousel/CarouselThumbnailNavigation.js

@@ -33,8 +33,7 @@ const CarouselThumbnailNavigation = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
     throw new Error('Thumbnail set provided does not match the number of slides in the carousel');
   }
   const {
-    containerPaddingTop: thumbnailContainerPaddingTop,
-    margin: thumbnailMargin
+    containerPaddingTop: thumbnailContainerPaddingTop
   } = (0, _ThemeProvider.useThemeTokens)('CarouselThumbnail');
   const stackWrapTokens = {
     justifyContent: 'flex-start'
@@ -42,13 +41,14 @@ const CarouselThumbnailNavigation = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   const containerStyles = {
     justifyContent: 'center',
     alignItems,
-    paddingTop: thumbnailContainerPaddingTop - thumbnailMargin
+    paddingTop: thumbnailContainerPaddingTop
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: containerStyles,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
       direction: "row",
       tokens: stackWrapTokens,
+      space: 2,
       ref: ref,
       children: thumbnails.map((_ref2, index) => {
         let {

package/lib/Footnote/Footnote.js

@@ -173,19 +173,15 @@ const Footnote = _ref6 => {
         children: content
       });
     }
-    return (
-      /*#__PURE__*/
-      // TODO: Extract the OrderedList.Item from the array when the issue #4361 is fixed
-      (0, _jsxRuntime.jsx)(_OrderedList.default, {
-        start: number,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedList.default.Item, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-            style: selectCustomContentFontStyle(themeTokens),
-            children: content
-          })
-        }, number)]
-      })
-    );
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedList.default, {
+      start: number,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedList.default.Item, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          style: selectCustomContentFontStyle(themeTokens),
+          children: content
+        })
+      }, number)
+    });
   }, [content, number, themeTokens]);
   (0, _react.useEffect)(() => {
     if (isOpen) {

package/lib/Link/ChevronLink.js

@@ -25,6 +25,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     tokens = {},
     variant,
     dataSet,
+    onPress,
     ...otherlinkProps
   } = _ref;
   const getChevronTokens = (0, _ThemeProvider.useThemeTokensCallback)('ChevronLink', tokens, variant);
@@ -53,6 +54,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     tokens: getTokens,
     dataSet: dataSet,
     ref: ref,
+    onPress: onPress,
     children: children
   });
 });

package/lib/Link/InlinePressable.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -24,17 +25,29 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-// eslint-disable-next-line react/prop-types
-const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+/* eslint-disable react/prop-types */const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
     style,
+    onPress,
     ...props
   } = _ref;
+  const handlePress = (0, _react.useCallback)(() => {
+    if (onPress) {
+      onPress();
+    }
+  }, [onPress]);
+  const handleKeyPress = (0, _react.useCallback)(e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      handlePress();
+    }
+  }, [handlePress]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     style: pressState => [typeof style === 'function' ? style(pressState) : style, staticStyles[inlineFlex ? 'inlineFlex' : 'inline']],
+    onPress: handlePress,
+    onKeyDown: _Platform.default.OS === 'web' ? handleKeyPress : undefined,
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });

package/lib/Link/LinkBase.js

@@ -187,6 +187,7 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     // assuming links without icons should be inline (even if they are long)
     ,
     ref: ref,
+    keyboardShouldPersistTaps: "handled",
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);

package/lib/Notification/Notification.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
@@ -75,6 +74,156 @@ const selectDismissButtonContainerStyles = _ref4 => {
 const selectContentContainerStyle = maxWidth => ({
   width: maxWidth || '100%'
 });
+const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
+  const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
+    let [vp, viewportTokens] = _ref5;
+    acc[vp] = selectContainerStyles({
+      ...viewportTokens
+    });
+    return acc;
+  }, {});
+  const selectContainerMediaQueryStyles = (0, _utils.createMediaQueryStyles)(transformedSelectContainerStyles);
+  const {
+    ids: containerIds,
+    styles: containerStyles
+  } = _utils.StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      ...selectContainerMediaQueryStyles
+    }
+  });
+  const {
+    ids: contentContainerIds,
+    styles: contentContainerStyles
+  } = _utils.StyleSheet.create({
+    contentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...(0, _utils.createMediaQueryStyles)({
+        xs: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.xs) || '100%'
+        },
+        md: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.md) || '100%'
+        },
+        lg: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.lg) || '100%'
+        },
+        sm: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.sm) || '100%'
+        },
+        xl: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.xl) || '100%'
+        }
+      })
+    }
+  });
+  const {
+    ids: staticContentContainerIds,
+    styles: staticContentContainerStyles
+  } = _utils.StyleSheet.create({
+    staticContentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1
+    }
+  });
+  const {
+    ids: iconContainerIds,
+    styles: iconContainerStyles
+  } = _utils.StyleSheet.create({
+    iconContainer: selectIconContainerStyles(themeTokens[viewport])
+  });
+  const {
+    ids: dismissButtonContainerIds,
+    styles: dismissButtonContainerStyles
+  } = _utils.StyleSheet.create({
+    dismissButtonContainer: selectDismissButtonContainerStyles(themeTokens[viewport])
+  });
+  const {
+    ids: textIds,
+    styles: textStyles
+  } = _utils.StyleSheet.create({
+    text: selectTextStyles(themeTokens[viewport], themeOptions, dismissible)
+  });
+  const {
+    styles: selectIconPropsStyles
+  } = _utils.StyleSheet.create({
+    selectIconProps: selectIconProps(themeTokens[viewport])
+  });
+  const {
+    styles: selectDismissIconPropsStyles
+  } = _utils.StyleSheet.create({
+    selectDismissIconProps: selectDismissIconProps(themeTokens[viewport])
+  });
+
+  // eslint-disable-next-line no-param-reassign
+  mediaIdsRef.current = {
+    containerIds,
+    contentContainerIds,
+    staticContentContainerIds,
+    iconContainerIds,
+    dismissButtonContainerIds,
+    textIds
+  };
+  return {
+    containerStyles,
+    contentContainerStyles,
+    staticContentContainerStyles,
+    iconContainerStyles,
+    dismissButtonContainerStyles,
+    textStyles,
+    selectIconPropsStyles,
+    selectDismissIconPropsStyles
+  };
+};
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible) => ({
+  containerStyles: {
+    container: {
+      flexDirection: 'row',
+      ...selectContainerStyles(themeTokens)
+    }
+  },
+  contentContainerStyles: {
+    contentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...selectContentContainerStyle(maxWidth)
+    }
+  },
+  staticContentContainerStyles: {
+    staticContentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1
+    }
+  },
+  iconContainerStyles: {
+    iconContainer: {
+      ...selectIconContainerStyles(themeTokens)
+    }
+  },
+  dismissButtonContainerStyles: {
+    dismissButtonContainer: {
+      ...selectDismissButtonContainerStyles(themeTokens)
+    }
+  },
+  textStyles: {
+    text: {
+      ...selectTextStyles(themeTokens, themeOptions, dismissible)
+    }
+  },
+  selectIconPropsStyles: {
+    selectIconProps: {
+      ...selectIconProps(themeTokens)
+    }
+  },
+  selectDismissIconPropsStyles: {
+    selectDismissIconProps: {
+      ...selectDismissIconProps(themeTokens)
+    }
+  }
+});
 
 /**
  * A banner that highlights important messages:
@@ -127,7 +276,7 @@ const selectContentContainerStyle = maxWidth => ({
  * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
-const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   let {
     children,
     system,
@@ -136,13 +285,9 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref5;
+  } = _ref6;
   const [isDismissed, setIsDismissed] = (0, _react.useState)(false);
   const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Notification', tokens, variant, {
-    system,
-    viewport
-  });
   const getCopy = (0, _useCopy.default)({
     dictionary: _dictionary.default,
     copy
@@ -150,42 +295,89 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
-  const contentMaxWidth = (0, _utils.useResponsiveProp)(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const themeTokens = useTokens('Notification', tokens, variant, {
+    system,
+    viewport
+  });
+  const maxWidth = (0, _utils.useResponsiveProp)(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
+  const notificationComponentRef = (0, _react.useRef)({
+    containerStyles: {},
+    contentContainerStyles: {},
+    staticContentContainerStyles: {},
+    iconContainerStyles: {},
+    dismissButtonContainerStyles: {},
+    textStyles: {},
+    selectIconPropsStyles: {},
+    selectDismissIconPropsStyles: {}
+  });
+  const mediaIdsRef = (0, _react.useRef)({
+    containerIds: {},
+    contentContainerIds: {},
+    staticContentContainerIds: {},
+    iconContainerIds: {},
+    dismissButtonContainerIds: {},
+    textIds: {},
+    selectIconPropsIds: {},
+    selectDismissIconPropsIds: {}
+  });
+  if (enableMediaQueryStyleSheet) {
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, viewport, mediaIdsRef, dismissible);
+  } else {
+    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible);
+  }
   if (isDismissed) {
     return null;
   }
-  const textStyles = selectTextStyles(themeTokens, themeOptions, dismissible);
   const content = (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({
-    textStyles,
+    textStyles: notificationComponentRef.current.textStyles.text,
     variant
   }) : children, {
-    style: textStyles
+    style: notificationComponentRef.current.textStyles.text
   });
   const {
     icon: IconComponent,
     dismissIcon: DismissIconComponent,
     dismissIconColor
-  } = themeTokens;
+  } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport];
   const onDismissPress = () => setIsDismissed(true);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    style: [staticStyles.container, selectContainerStyles(themeTokens)],
+    style: notificationComponentRef.current.containerStyles.container,
+    dataSet: mediaIdsRef && {
+      media: mediaIdsRef.current.containerIds.container
+    },
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: [staticStyles.content, selectContentContainerStyle(contentMaxWidth)],
+      style: notificationComponentRef.current.contentContainerStyles.contentContainer,
+      dataSet: mediaIdsRef && {
+        media: mediaIdsRef.current.contentContainerIds.contentContainer
+      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-        style: staticStyles.contentContainer,
+        style: notificationComponentRef.current.staticContentContainerStyles.staticContentContainer,
+        dataSet: mediaIdsRef && {
+          media: mediaIdsRef.current.staticContentContainerIds.staticContentContainer
+        },
         children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectIconContainerStyles(themeTokens),
+          style: notificationComponentRef.current.iconContainerStyles.iconContainer,
+          dataSet: mediaIdsRef && {
+            media: mediaIdsRef.current.iconContainerIds.iconContainer
+          },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
-            ...selectIconProps(themeTokens)
+            ...notificationComponentRef.current.selectIconPropsStyles.selectIconProps
           })
         }), content && typeof content === 'function' ? content({
-          textStyles,
+          textStyles: notificationComponentRef.current.textStyles.text,
           variant
         }) : content]
       }), dismissible && DismissIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: selectDismissButtonContainerStyles(themeTokens),
+        style: notificationComponentRef.current.dismissButtonContainerStyles.dismissButtonContainer,
+        dataSet: mediaIdsRef && {
+          media: mediaIdsRef.current.dismissButtonContainerIds.dismissButtonContainer
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
           action: "close",
           onPress: onDismissPress,
@@ -197,7 +389,7 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
             size: 'small'
           },
           children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(DismissIconComponent, {
-            ...selectDismissIconProps(themeTokens)
+            ...notificationComponentRef.current.selectDismissIconPropsStyles.selectDismissIconProps
           })
         })
       })]
@@ -229,18 +421,4 @@ Notification.propTypes = {
   variant: _utils.variantProp.propType
 };
 var _default = Notification;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
-  container: {
-    flexDirection: 'row'
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    flexShrink: 1
-  },
-  content: {
-    flexDirection: 'row',
-    flexShrink: 1,
-    justifyContent: 'space-between'
-  }
-});
+exports.default = _default;

package/lib/OrderedList/OrderedList.js

@@ -14,25 +14,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropsTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
-const getChildrenWithParentVariants = (variant, children, start) => {
-  if (variant) return children.map((child, i) => {
-    var _child$props;
-    const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-    return {
-      ...child,
-      props: {
-        ...child.props,
-        index: start + i,
-        isLastChild: i === children.length - 1,
-        variant: {
-          ...existingChildVariants,
-          ...variant
-        }
-      }
-    };
-  });
-  return children;
-};
 const OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
@@ -40,7 +21,27 @@ const OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     variant,
     ...rest
   } = _ref;
-  const childrenWithParentVariants = (0, _react.useMemo)(() => getChildrenWithParentVariants(variant, children, start), [children, variant, start]);
+  const childrenWithParentVariants = (0, _react.useMemo)(() => {
+    const addVariantToProps = (child, i, isLastChild) => {
+      var _child$props;
+      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        index: start + i,
+        isLastChild,
+        variant: {
+          ...existingChildVariants,
+          ...variant
+        }
+      });
+    };
+    if (variant) {
+      if (Array.isArray(children)) {
+        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1));
+      }
+      return [addVariantToProps(children, 0, true)];
+    }
+    return children;
+  }, [children, variant, start]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedListBase.default, {
     ref: ref,
     ...selectProps(rest),