@telus-uds/components-web 2.43.0 → 3.0.0

package/lib/NavigationBar/NavigationSubMenu.js

@@ -1,22 +1,17 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon, useResponsiveProp, useThemeTokens, Listbox, getTokensPropType } from '@telus-uds/components-base';
+import NavigationItem from './NavigationItem';
+import useOverlaidPosition from '../utils/useOverlaidPosition';
+import resolveItemSelection from './resolveItemSelection';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _NavigationItem = _interopRequireDefault(require("./NavigationItem"));
-var _useOverlaidPosition = _interopRequireDefault(require("../utils/useOverlaidPosition"));
-var _resolveItemSelection = _interopRequireDefault(require("./resolveItemSelection"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * A NavigationItem that opens or closes a Listbox of other NavigationItems.
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
- */const NavigationSubMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     id,
@@ -31,7 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     linkRouterProps,
     itemsContainerRef
   } = _ref;
-  const focusTrapRef = _react.default.useRef();
+  const focusTrapRef = React.useRef();
   const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
   const defaultOffsets = {
     offsets: {
@@ -42,7 +37,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     align,
     offsets,
     minWidth
-  } = (0, _componentsBase.useResponsiveProp)({
+  } = useResponsiveProp({
     xs: {
       ...defaultOffsets,
       align: {
@@ -74,14 +69,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     targetRef,
     onTargetLayout,
     isReady
-  } = (0, _useOverlaidPosition.default)({
+  } = useOverlaidPosition({
     isShown: isOpen,
     offsets,
     align
   });
   const {
     selected
-  } = (0, _resolveItemSelection.default)({
+  } = resolveItemSelection({
     id,
     label,
     items
@@ -91,11 +86,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   };
   const {
     icoMenu
-  } = (0, _componentsBase.useThemeTokens)('NavigationBar', {}, {}, {
+  } = useThemeTokens('NavigationBar', {}, {}, {
     expanded: isOpen
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationItem.default, {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(NavigationItem, {
       ref: sourceRef,
       accessibilityRole: "button",
       id: id,
@@ -108,7 +103,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         let {
           textStyles
         } = _ref2;
-        return [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+        return [children, /*#__PURE__*/_jsx(Icon, {
           icon: icoMenu,
           variant: {
             size: 'micro'
@@ -118,15 +113,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
           }
         }, `${id}_icon`)];
       }
-    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Listbox.Overlay, {
+    }), isOpen && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Listbox.Overlay, {
         overlaidPosition: overlaidPosition,
         maxWidth: maxWidth,
         minWidth: minWidth,
         isReady: isReady,
         onLayout: onTargetLayout,
         ref: openOverlayRef,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Listbox, {
+        children: /*#__PURE__*/_jsx(Listbox, {
           items: items,
           firstItemRef: targetRef,
           parentRef: sourceRef,
@@ -135,7 +130,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
           linkRouterProps: linkRouterProps,
           ref: itemsContainerRef || ref
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/_jsx("div", {
         // This catches and shifts focus to other interactive elements.
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex: 0,
@@ -149,18 +144,17 @@ NavigationSubMenu.displayName = 'NavigationSubMenu';
 
 // @TODO - proper prop types and comments
 NavigationSubMenu.propTypes = {
-  tokens: (0, _componentsBase.getTokensPropType)('NavigationBar'),
-  children: _propTypes.default.node,
-  id: _propTypes.default.string,
-  isOpen: _propTypes.default.bool,
-  label: _propTypes.default.string,
-  onClick: _propTypes.default.func,
-  selectedId: _propTypes.default.string,
-  items: _propTypes.default.array,
-  openOverlayRef: _propTypes.default.object,
-  LinkRouter: _propTypes.default.elementType,
-  linkRouterProps: _propTypes.default.object,
-  itemsContainerRef: _propTypes.default.object
+  tokens: getTokensPropType('NavigationBar'),
+  children: PropTypes.node,
+  id: PropTypes.string,
+  isOpen: PropTypes.bool,
+  label: PropTypes.string,
+  onClick: PropTypes.func,
+  selectedId: PropTypes.string,
+  items: PropTypes.array,
+  openOverlayRef: PropTypes.object,
+  LinkRouter: PropTypes.elementType,
+  linkRouterProps: PropTypes.object,
+  itemsContainerRef: PropTypes.object
 };
-var _default = NavigationSubMenu;
-exports.default = _default;
+export default NavigationSubMenu;

package/lib/NavigationBar/collapseItems.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /**
  * Make a list of items into a one-item list where all items are nested under the first item
  */
@@ -28,21 +22,17 @@ const collapseItems = (items, selectedId) => {
       rootLabel = item.label;
       return true; // break
     }
-
     const nestedMatch = (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.find(isSelected);
     if (nestedMatch) {
       rootLabel = nestedMatch.label;
       return true; // break
     }
-
     return false; // continue
   });
-
   return [{
     id: 'navigation-bar-root',
     label: rootLabel,
     items
   }];
 };
-var _default = collapseItems;
-exports.default = _default;
+export default collapseItems;

package/lib/NavigationBar/index.js

@@ -1,12 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
-var _NavigationItem = _interopRequireDefault(require("./NavigationItem"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-_NavigationBar.default.Item = _NavigationItem.default;
-var _default = _NavigationBar.default;
-exports.default = _default;
+import NavigationBar from './NavigationBar';
+import NavigationItem from './NavigationItem';
+NavigationBar.Item = NavigationItem;
+export default NavigationBar;

package/lib/NavigationBar/resolveItemSelection.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 const resolveItemSelection = (_ref, selectedId) => {
   let {
     id,
@@ -19,5 +13,4 @@ const resolveItemSelection = (_ref, selectedId) => {
     selected
   };
 };
-var _default = resolveItemSelection;
-exports.default = _default;
+export default resolveItemSelection;

package/lib/OptimizeImage/OptimizeImage.js

@@ -1,19 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _ResponsiveImage = _interopRequireDefault(require("../ResponsiveImage"));
-var _utils = require("./utils");
-var _utils2 = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils2.htmlAttrs]);
-const OptimizeImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { selectSystemProps } from '@telus-uds/components-base';
+import ResponsiveImage from '../ResponsiveImage';
+import { hasWebpSupport, getImageUrls } from './utils';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const OptimizeImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     contentfulAssetUrl,
     alt,
@@ -30,16 +23,16 @@ const OptimizeImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
   const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w';
   // by default assuming webP support for SSR
-  const [imgUrls, setImgUrls] = _react.default.useState((0, _utils.getImageUrls)(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true));
-  _react.default.useEffect(() => {
+  const [imgUrls, setImgUrls] = React.useState(getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true));
+  React.useEffect(() => {
     // Checking for webP support for CSR
-    (0, _utils.hasWebpSupport)().then(supportsWebp => {
-      const imageUrls = (0, _utils.getImageUrls)(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp);
+    hasWebpSupport().then(supportsWebp => {
+      const imageUrls = getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp);
       setImgUrls(imageUrls);
     });
   }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs]);
   if (!imgUrls) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.default, {
+  return /*#__PURE__*/_jsx(ResponsiveImage, {
     ...imgUrls,
     alt: alt,
     ...selectProps(rest),
@@ -52,49 +45,48 @@ OptimizeImage.propTypes = {
   /**
    * The source to load the image. Only contentful image urls are supported. See https://www.contentful.com/developers/docs/references/images-api/ for details.
    */
-  contentfulAssetUrl: _propTypes.default.string.isRequired,
+  contentfulAssetUrl: PropTypes.string.isRequired,
   /**
    * Alternative text to display if image cannot be loaded or a screen reader is used.
    */
-  alt: _propTypes.default.string.isRequired,
+  alt: PropTypes.string.isRequired,
   /**
    * Customize quality as a percentage between 1 and 100.
    */
-  quality: _propTypes.default.number,
+  quality: PropTypes.number,
   /**
    * Customize width for xs screen size in px, this may affect the quality of the image.
    */
-  xs: _propTypes.default.number,
+  xs: PropTypes.number,
   /**
    * Customize width for sm screen size in px, this may affect the quality of the image.
    */
-  sm: _propTypes.default.number,
+  sm: PropTypes.number,
   /**
    * Customize width for md screen size in px, this may affect the quality of the image.
    */
-  md: _propTypes.default.number,
+  md: PropTypes.number,
   /**
    * Customize width for lg screen size in px, this may affect the quality of the image.
    */
-  lg: _propTypes.default.number,
+  lg: PropTypes.number,
   /**
    * Customize width for xl screen size in px, this may affect the quality of the image.
    */
-  xl: _propTypes.default.number,
+  xl: PropTypes.number,
   /**
    * Switches size dimension to height, default is false
    */
-  sizeByHeight: _propTypes.default.bool,
+  sizeByHeight: PropTypes.bool,
   /**
    * Turns off retina display functionality
    */
-  disableRetina: _propTypes.default.bool,
+  disableRetina: PropTypes.bool,
   /**
    * Loading strategy.
    * @default 'eager'
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
    */
-  loading: _propTypes.default.oneOf(['eager', 'lazy'])
+  loading: PropTypes.oneOf(['eager', 'lazy'])
 };
-var _default = OptimizeImage;
-exports.default = _default;
+export default OptimizeImage;

package/lib/OptimizeImage/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _OptimizeImage = _interopRequireDefault(require("./OptimizeImage"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _OptimizeImage.default;
-exports.default = _default;
+import OptimizeImage from './OptimizeImage';
+export default OptimizeImage;

package/lib/OptimizeImage/utils/getFallbackUrl.js

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getFallbackUrl;
-var _isSvgUrl = _interopRequireDefault(require("./isSvgUrl"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function getFallbackUrl(url, dimension, size, quality) {
-  if (!(0, _isSvgUrl.default)(url)) {
+import isSvgUrl from './isSvgUrl';
+export default function getFallbackUrl(url, dimension, size, quality) {
+  if (!isSvgUrl(url)) {
     return `${url}?${dimension}=${size}&q=${quality}`;
   }
   return url;

package/lib/OptimizeImage/utils/getImageUrls.js

@@ -1,19 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getImageUrls;
-var _getOptimizedUrl = _interopRequireDefault(require("./getOptimizedUrl"));
-var _getFallbackUrl = _interopRequireDefault(require("./getFallbackUrl"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp) {
+import getOptimizedUrl from './getOptimizedUrl';
+import getFallbackUrl from './getFallbackUrl';
+export default function getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp) {
   return {
-    xsSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, xs, quality, disableRetina, supportsWebp),
-    smSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, sm, quality, disableRetina, supportsWebp),
-    mdSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
-    lgSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
-    xlSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
-    fallbackSrc: (0, _getFallbackUrl.default)(contentfulAssetUrl, dimension, xl, quality)
+    xsSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xs, quality, disableRetina, supportsWebp),
+    smSrc: getOptimizedUrl(contentfulAssetUrl, dimension, sm, quality, disableRetina, supportsWebp),
+    mdSrc: getOptimizedUrl(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
+    lgSrc: getOptimizedUrl(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
+    xlSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
+    fallbackSrc: getFallbackUrl(contentfulAssetUrl, dimension, xl, quality)
   };
 }

package/lib/OptimizeImage/utils/getOptimizedUrl.js

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getOptimizedUrl;
-var _isSvgUrl = _interopRequireDefault(require("./isSvgUrl"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function getOptimizedUrl(url, dimension, size, quality, disableRetina, supportsWebp) {
-  if (!(0, _isSvgUrl.default)(url)) {
+import isSvgUrl from './isSvgUrl';
+export default function getOptimizedUrl(url, dimension, size, quality, disableRetina, supportsWebp) {
+  if (!isSvgUrl(url)) {
     let format = '';
     if (supportsWebp) {
       format = 'fm=webp';

package/lib/OptimizeImage/utils/hasWebpSupport.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = hasWebpSupport;
 let promise;
 
 /**
@@ -12,7 +6,7 @@ let promise;
  * @see https://developers.google.com/speed/webp/faq#in_your_own_javascript
  * @return {Promise<boolean>}
  */
-function hasWebpSupport() {
+export default function hasWebpSupport() {
   // cache the result, so that this function runs only once
   if (!promise) {
     promise = new Promise(resolve => {

package/lib/OptimizeImage/utils/index.js

@@ -1,34 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "getFallbackUrl", {
-  enumerable: true,
-  get: function () {
-    return _getFallbackUrl.default;
-  }
-});
-Object.defineProperty(exports, "getImageUrls", {
-  enumerable: true,
-  get: function () {
-    return _getImageUrls.default;
-  }
-});
-Object.defineProperty(exports, "getOptimizedUrl", {
-  enumerable: true,
-  get: function () {
-    return _getOptimizedUrl.default;
-  }
-});
-Object.defineProperty(exports, "hasWebpSupport", {
-  enumerable: true,
-  get: function () {
-    return _hasWebpSupport.default;
-  }
-});
-var _getOptimizedUrl = _interopRequireDefault(require("./getOptimizedUrl"));
-var _getFallbackUrl = _interopRequireDefault(require("./getFallbackUrl"));
-var _hasWebpSupport = _interopRequireDefault(require("./hasWebpSupport"));
-var _getImageUrls = _interopRequireDefault(require("./getImageUrls"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import getOptimizedUrl from './getOptimizedUrl';
+import getFallbackUrl from './getFallbackUrl';
+import hasWebpSupport from './hasWebpSupport';
+import getImageUrls from './getImageUrls';
+export { getOptimizedUrl, getFallbackUrl, hasWebpSupport, getImageUrls };

package/lib/OptimizeImage/utils/isSvgUrl.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = isSvgUrl;
-function isSvgUrl(url) {
+export default function isSvgUrl(url) {
   return !!url.match(/\.svg$/i);
 }

package/lib/OrderedList/Item.js

@@ -1,19 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _componentsBase = require("@telus-uds/components-base");
-var _ItemBase = _interopRequireDefault(require("./ItemBase"));
-var _utils = require("../utils");
-var _constants = require("./constants");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { applyTextStyles, getTokensPropType, selectSystemProps, StackView, Typography, useTheme, useThemeTokens, wrapStringsInText } from '@telus-uds/components-base';
+import ItemBase from './ItemBase';
+import { htmlAttrs } from '../utils';
+import { OL_COUNTER_NAME } from './constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const selectItemTextStyles = (_ref, themeOptions) => {
   let {
     itemFontWeight,
@@ -23,7 +16,7 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemColor,
     itemTextColor
   } = _ref;
-  return (0, _componentsBase.applyTextStyles)({
+  return applyTextStyles({
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
@@ -32,7 +25,7 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     lineHeight: itemLineHeight
   });
 };
-const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.default).withConfig({
+const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
   displayName: "Item__StyledItemBase",
   componentId: "components-web__sc-7jzwcq-0"
 })(_ref2 => {
@@ -50,9 +43,9 @@ const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.def
     itemTextColor
   } = _ref2;
   return {
-    counterIncrement: _constants.OL_COUNTER_NAME,
+    counterIncrement: OL_COUNTER_NAME,
     '::before': {
-      content: `counter(${_constants.OL_COUNTER_NAME})'.'`,
+      content: `counter(${OL_COUNTER_NAME})'.'`,
       display: 'inline-block',
       color: itemColor || itemTextColor,
       width: itemBulletContainerWidth,
@@ -61,7 +54,7 @@ const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.def
       flexShrink: 0,
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      ...(0, _componentsBase.applyTextStyles)({
+      ...applyTextStyles({
         fontWeight: itemFontWeight,
         fontSize: itemFontSize,
         fontName: itemFontName,
@@ -74,7 +67,7 @@ const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.def
     }
   };
 });
-const ItemContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const ItemContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "Item__ItemContent",
   componentId: "components-web__sc-7jzwcq-1"
 })({
@@ -82,7 +75,7 @@ const ItemContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
   flexDirection: 'column',
   gap: 5
 });
-const Item = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Item = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     counterName,
@@ -93,7 +86,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   } = _ref3;
   // We are reusing some tokens from the list component here in order to provide a unified
   // experience
-  const themeTokens = (0, _componentsBase.useThemeTokens)('OrderedList', tokens, variant);
+  const themeTokens = useThemeTokens('OrderedList', tokens, variant);
   const headingTokens = title && {
     lineHeight: themeTokens.itemLineHeight,
     fontSize: themeTokens.itemFontSize,
@@ -103,31 +96,31 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   };
   const {
     themeOptions
-  } = (0, _componentsBase.useTheme)();
-  const itemContent = (0, _componentsBase.wrapStringsInText)(children, {
+  } = useTheme();
+  const itemContent = wrapStringsInText(children, {
     style: selectItemTextStyles(themeTokens, themeOptions)
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItemBase, {
+  return /*#__PURE__*/_jsx(StyledItemBase, {
     ref: ref,
     themeOptions: themeOptions,
     ...themeTokens,
     ...selectProps(rest),
-    children: title ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    children: title ? /*#__PURE__*/_jsxs(StackView, {
       tokens: {
         flexShrink: 1
       },
       space: 0,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      children: [/*#__PURE__*/_jsx(Typography, {
         variant: {
           size: 'h4'
         },
         tokens: headingTokens,
         children: title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, {
+      }), /*#__PURE__*/_jsx(ItemContent, {
         ...themeTokens,
         children: itemContent
       })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, {
+    }) : /*#__PURE__*/_jsx(ItemContent, {
       children: itemContent
     })
   });
@@ -138,15 +131,14 @@ Item.propTypes = {
   /**
    * Item content
    */
-  children: _propTypes.default.node.isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * Defines the title of the `OrderedList.Item`
    */
-  title: _propTypes.default.string,
+  title: PropTypes.string,
   /**
    * Item tokens
    */
-  tokens: (0, _componentsBase.getTokensPropType)('OrderedList')
+  tokens: getTokensPropType('OrderedList')
 };
-var _default = Item;
-exports.default = _default;
+export default Item;