@telus-uds/components-web 4.19.1 → 5.0.0-alpha.0

package/lib/cjs/NavigationBar/NavigationBar.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.NavigationBar = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _utils = require("../utils");
-var _NavigationItem = _interopRequireDefault(require("./NavigationItem"));
-var _NavigationSubMenu = _interopRequireDefault(require("./NavigationSubMenu"));
-var _collapseItems = _interopRequireDefault(require("./collapseItems"));
+var _NavigationItem = require("./NavigationItem");
+var _NavigationSubMenu = require("./NavigationSubMenu");
+var _collapseItems = require("./collapseItems");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
@@ -49,7 +49,7 @@ const ContentWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
  * NavigationBar can be used to allow customers to consistently navigate across
  * key pages within a specific product line
  */
-const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const NavigationBar = exports.NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     accessibilityRole = 'navigation',
     heading,
@@ -113,7 +113,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     sm: 'row'
   });
   const itemsForViewport = (0, _componentsBase.useResponsiveProp)({
-    xs: (0, _collapseItems.default)(items, currentValue),
+    xs: (0, _collapseItems.collapseItems)(items, currentValue),
     lg: items
   });
   const openOverlayRef = _react.default.useRef(null);
@@ -211,7 +211,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         }
         onClick?.(event);
       };
-      const ItemComponent = nestedItems ? _NavigationSubMenu.default : _NavigationItem.default;
+      const ItemComponent = nestedItems ? _NavigationSubMenu.NavigationSubMenu : _NavigationItem.NavigationItem;
       const isOpen = itemId === openSubMenuId;
       const scrollableNestedItems = nestedItems?.map(item => ({
         ...item,
@@ -328,5 +328,4 @@ NavigationBar.propTypes = {
     sm: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
     xs: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number])
   })
-};
-var _default = exports.default = NavigationBar;
+};

package/lib/cjs/NavigationBar/NavigationItem.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.NavigationItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -18,17 +18,17 @@ const ItemContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-ql9x7c-0"
 })(_ref => {
   let {
-    targetWidth,
-    viewport
+    $targetWidth,
+    $viewport
   } = _ref;
   return {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
-    maxWidth: viewport !== 'xs' ? `${Math.max(defaultMaxWidth, targetWidth ?? 0)}px` : '100%',
-    flexGrow: targetWidth ? 1 : 0,
+    maxWidth: $viewport !== 'xs' ? `${Math.max(defaultMaxWidth, $targetWidth ?? 0)}px` : '100%',
+    flexGrow: $targetWidth ? 1 : 0,
     flexShrink: 1,
-    ...(viewport === 'xs' && {
+    ...($viewport === 'xs' && {
       width: '100%',
       flex: 1
     })
@@ -40,7 +40,7 @@ const ItemContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-const NavigationItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const NavigationItem = exports.NavigationItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     accessibilityRole = 'link',
     // @todo switch to 'button' for dropdowns
@@ -82,8 +82,8 @@ const NavigationItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     return tokensWithoutWidth;
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContainer, {
-    targetWidth: targetWidth,
-    viewport: viewport,
+    $targetWidth: targetWidth,
+    $viewport: viewport,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Button, {
       accessibilityRole: accessibilityRole,
       accessibilityState: accessibilityState,
@@ -111,5 +111,4 @@ NavigationItem.propTypes = {
   onClick: _propTypes.default.func,
   selected: _propTypes.default.bool,
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired
-};
-var _default = exports.default = NavigationItem;
+};

package/lib/cjs/NavigationBar/NavigationSubMenu.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.NavigationSubMenu = 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 _NavigationItem = require("./NavigationItem");
+var _useOverlaidPosition = require("../utils/useOverlaidPosition");
+var _resolveItemSelection = require("./resolveItemSelection");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MIN_WIDTH = 192;
@@ -57,7 +57,7 @@ const getResponsiveBreakpoints = sourceWidth => ({
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-const NavigationSubMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const NavigationSubMenu = exports.NavigationSubMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     id,
@@ -87,14 +87,14 @@ const NavigationSubMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     targetRef,
     onTargetLayout,
     isReady
-  } = (0, _useOverlaidPosition.default)({
+  } = (0, _useOverlaidPosition.useOverlaidPosition)({
     isShown: isOpen,
     offsets,
     align
   });
   const {
     selected
-  } = (0, _resolveItemSelection.default)({
+  } = (0, _resolveItemSelection.resolveItemSelection)({
     id,
     label,
     items
@@ -113,7 +113,7 @@ const NavigationSubMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     });
   }, [isOpen, sourceRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationItem.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationItem.NavigationItem, {
       ref: sourceRef,
       accessibilityRole: "button",
       id: id,
@@ -136,7 +136,7 @@ const NavigationSubMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
         }, `${id}_icon`)];
       }
     }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Listbox.Overlay, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ListboxOverlay, {
         overlaidPosition: overlaidPosition,
         maxWidth: maxWidth,
         minWidth: minWidth,
@@ -181,5 +181,4 @@ NavigationSubMenu.propTypes = {
   linkRouterProps: _propTypes.default.object,
   itemsContainerRef: _propTypes.default.object,
   variant: _propTypes.default.object
-};
-var _default = exports.default = NavigationSubMenu;
+};

package/lib/cjs/NavigationBar/collapseItems.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.collapseItems = void 0;
 /**
  * Make a list of items into a one-item list where all items are nested under the first item
  */
@@ -40,4 +40,4 @@ const collapseItems = (items, selectedId) => {
     items
   }];
 };
-var _default = exports.default = collapseItems;
+exports.collapseItems = collapseItems;

package/lib/cjs/NavigationBar/resolveItemSelection.js

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

package/lib/cjs/OptimizeImage/OptimizeImage.js

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.OptimizeImage = 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 _ResponsiveImage = require("../ResponsiveImage/ResponsiveImage");
 var _utils = require("./utils");
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils2.htmlAttrs]);
-const OptimizeImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const OptimizeImage = exports.OptimizeImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     contentfulAssetUrl,
     alt,
@@ -27,8 +27,7 @@ const OptimizeImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     disableRetina = false,
     ...rest
   } = _ref;
-  // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
-  const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w';
+  const dimension = sizeByHeight ? '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(() => {
@@ -39,7 +38,7 @@ const OptimizeImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     });
   }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs]);
   if (!imgUrls) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.ResponsiveImage, {
     ...imgUrls,
     alt: alt,
     ...selectProps(rest),
@@ -95,5 +94,4 @@ OptimizeImage.propTypes = {
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
    */
   loading: _propTypes.default.oneOf(['eager', 'lazy'])
-};
-var _default = exports.default = OptimizeImage;
+};

package/lib/cjs/OptimizeImage/utils/getFallbackUrl.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = getFallbackUrl;
-var _isSvgUrl = _interopRequireDefault(require("./isSvgUrl"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+exports.getFallbackUrl = getFallbackUrl;
+var _isSvgUrl = require("./isSvgUrl");
 function getFallbackUrl(url, dimension, size, quality) {
-  if (!(0, _isSvgUrl.default)(url)) {
+  if (!(0, _isSvgUrl.isSvgUrl)(url)) {
     return `${url}?${dimension}=${size}&q=${quality}`;
   }
   return url;

package/lib/cjs/OptimizeImage/utils/getImageUrls.js

@@ -3,17 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = getImageUrls;
-var _getOptimizedUrl = _interopRequireDefault(require("./getOptimizedUrl"));
-var _getFallbackUrl = _interopRequireDefault(require("./getFallbackUrl"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+exports.getImageUrls = getImageUrls;
+var _getOptimizedUrl = require("./getOptimizedUrl");
+var _getFallbackUrl = require("./getFallbackUrl");
 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: (0, _getOptimizedUrl.getOptimizedUrl)(contentfulAssetUrl, dimension, xs, quality, disableRetina, supportsWebp),
+    smSrc: (0, _getOptimizedUrl.getOptimizedUrl)(contentfulAssetUrl, dimension, sm, quality, disableRetina, supportsWebp),
+    mdSrc: (0, _getOptimizedUrl.getOptimizedUrl)(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
+    lgSrc: (0, _getOptimizedUrl.getOptimizedUrl)(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
+    xlSrc: (0, _getOptimizedUrl.getOptimizedUrl)(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
+    fallbackSrc: (0, _getFallbackUrl.getFallbackUrl)(contentfulAssetUrl, dimension, xl, quality)
   };
 }

package/lib/cjs/OptimizeImage/utils/getOptimizedUrl.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = getOptimizedUrl;
-var _isSvgUrl = _interopRequireDefault(require("./isSvgUrl"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+exports.getOptimizedUrl = getOptimizedUrl;
+var _isSvgUrl = require("./isSvgUrl");
 function getOptimizedUrl(url, dimension, size, quality, disableRetina, supportsWebp) {
-  if (!(0, _isSvgUrl.default)(url)) {
+  if (!(0, _isSvgUrl.isSvgUrl)(url)) {
     let format = '';
     if (supportsWebp) {
       format = 'fm=webp';

package/lib/cjs/OptimizeImage/utils/hasWebpSupport.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = hasWebpSupport;
+exports.hasWebpSupport = hasWebpSupport;
 let promise;
 
 /**

package/lib/cjs/OptimizeImage/utils/index.js

@@ -6,29 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "getFallbackUrl", {
   enumerable: true,
   get: function () {
-    return _getFallbackUrl.default;
+    return _getFallbackUrl.getFallbackUrl;
   }
 });
 Object.defineProperty(exports, "getImageUrls", {
   enumerable: true,
   get: function () {
-    return _getImageUrls.default;
+    return _getImageUrls.getImageUrls;
   }
 });
 Object.defineProperty(exports, "getOptimizedUrl", {
   enumerable: true,
   get: function () {
-    return _getOptimizedUrl.default;
+    return _getOptimizedUrl.getOptimizedUrl;
   }
 });
 Object.defineProperty(exports, "hasWebpSupport", {
   enumerable: true,
   get: function () {
-    return _hasWebpSupport.default;
+    return _hasWebpSupport.hasWebpSupport;
   }
 });
-var _getOptimizedUrl = _interopRequireDefault(require("./getOptimizedUrl"));
-var _getFallbackUrl = _interopRequireDefault(require("./getFallbackUrl"));
-var _hasWebpSupport = _interopRequireDefault(require("./hasWebpSupport"));
-var _getImageUrls = _interopRequireDefault(require("./getImageUrls"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _getOptimizedUrl = require("./getOptimizedUrl");
+var _getFallbackUrl = require("./getFallbackUrl");
+var _hasWebpSupport = require("./hasWebpSupport");
+var _getImageUrls = require("./getImageUrls");

package/lib/cjs/OptimizeImage/utils/isSvgUrl.js

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

package/lib/cjs/OrderedList/OrderedList.js

@@ -3,19 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.OrderedList = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _utils = require("../utils");
-var _OrderedListBase = _interopRequireDefault(require("./OrderedListBase"));
-var _Item = _interopRequireDefault(require("./Item"));
+var _OrderedListBase = require("./OrderedListBase");
 var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-const StyledOrderedListBase = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
+const StyledOrderedListBase = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.OrderedListBase).withConfig({
   displayName: "OrderedList__StyledOrderedListBase",
   componentId: "components-web__sc-t5az8z-0"
 })(_ref => {
@@ -32,7 +31,7 @@ const StyledOrderedListBase = /*#__PURE__*/(0, _styledComponents.default)(_Order
 /**
  * Themed semantic ordered list.
  */
-const OrderedList = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const OrderedList = exports.OrderedList = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     start = 1,
@@ -78,7 +77,7 @@ OrderedList.displayName = 'OrderedList';
 OrderedList.propTypes = {
   ...selectedSystemPropTypes,
   /**
-   * A list of ordered items wrapped in `OrderedList.Item`.
+   * A list of ordered items wrapped in `OrderedListItem`.
    */
   children: _propTypes.default.node.isRequired,
   /**
@@ -87,6 +86,4 @@ OrderedList.propTypes = {
   start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   variant: _componentsBase.variantProp.propType,
   tokens: (0, _componentsBase.getTokensPropType)('OrderedList')
-};
-OrderedList.Item = _Item.default;
-var _default = exports.default = OrderedList;
+};

package/lib/cjs/OrderedList/OrderedListBase.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.OrderedListBase = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _ItemBase = _interopRequireDefault(require("./ItemBase"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
@@ -24,7 +23,7 @@ const StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
 /**
  * Semantic ordered list.
  */
-const OrderedListBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const OrderedListBase = exports.OrderedListBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     start = 1,
@@ -37,7 +36,7 @@ const OrderedListBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: children
   });
 });
-OrderedListBase.displayName = 'OrderedList';
+OrderedListBase.displayName = 'OrderedListBase';
 OrderedListBase.propTypes = {
   /**
    * A list of ordered items wrapped in `OrderedListBase.Item`.
@@ -47,6 +46,4 @@ OrderedListBase.propTypes = {
    * The position to start the list with.
    */
   start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
-};
-OrderedListBase.Item = _ItemBase.default;
-var _default = exports.default = OrderedListBase;
+};

package/lib/cjs/OrderedList/{Item.js → OrderedListItem.js}

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.OrderedListItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _ItemBase = _interopRequireDefault(require("./ItemBase"));
+var _OrderedListItemBase = require("./OrderedListItemBase");
 var _utils = require("../utils");
 var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -32,57 +32,57 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     lineHeight: itemLineHeight
   });
 };
-const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.default).withConfig({
-  displayName: "Item__StyledItemBase",
-  componentId: "components-web__sc-7jzwcq-0"
+const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListItemBase.OrderedListItemBase).withConfig({
+  displayName: "OrderedListItem__StyledItemBase",
+  componentId: "components-web__sc-o9eecv-0"
 })(_ref2 => {
   let {
-    interItemMargin,
-    itemBulletContainerWidth,
-    itemBulletTextAlign,
-    itemFontWeight,
-    itemFontSize,
-    itemFontName,
-    itemLineHeight,
-    themeOptions,
-    listGutter,
-    itemColor,
-    itemTextColor
+    $interItemMargin,
+    $itemBulletContainerWidth,
+    $itemBulletTextAlign,
+    $itemFontWeight,
+    $itemFontSize,
+    $itemFontName,
+    $itemLineHeight,
+    $themeOptions,
+    $listGutter,
+    $itemColor,
+    $itemTextColor
   } = _ref2;
   return {
     counterIncrement: _constants.OL_COUNTER_NAME,
-    '::before': {
+    '&::before': {
       content: `counter(${_constants.OL_COUNTER_NAME})'.'`,
       display: 'inline-block',
-      color: itemColor || itemTextColor,
-      width: itemBulletContainerWidth,
-      paddingRight: listGutter,
-      textAlign: itemBulletTextAlign,
+      color: $itemColor || $itemTextColor,
+      width: $itemBulletContainerWidth,
+      paddingRight: $listGutter,
+      textAlign: $itemBulletTextAlign,
       flexShrink: 0,
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       ...(0, _componentsBase.applyTextStyles)({
-        fontWeight: itemFontWeight,
-        fontSize: itemFontSize,
-        fontName: itemFontName,
-        themeOptions
+        fontWeight: $itemFontWeight,
+        fontSize: $itemFontSize,
+        fontName: $itemFontName,
+        themeOptions: $themeOptions
       }),
-      lineHeight: `${itemLineHeight * itemFontSize}px`
+      lineHeight: `${$itemLineHeight * $itemFontSize}px`
     },
-    ':not(:last-child)': {
-      marginBottom: interItemMargin
+    '&:not(:last-child)': {
+      marginBottom: $interItemMargin
     }
   };
 });
 const ItemContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
-  displayName: "Item__ItemContent",
-  componentId: "components-web__sc-7jzwcq-1"
+  displayName: "OrderedListItem__ItemContent",
+  componentId: "components-web__sc-o9eecv-1"
 })({
   display: 'flex',
   flexDirection: 'column',
   gap: 0
 });
-const Item = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const OrderedListItem = exports.OrderedListItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     counterName,
@@ -109,8 +109,17 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItemBase, {
     ref: ref,
-    themeOptions: themeOptions,
-    ...themeTokens,
+    $themeOptions: themeOptions,
+    $interItemMargin: themeTokens.interItemMargin,
+    $itemBulletContainerWidth: themeTokens.itemBulletContainerWidth,
+    $itemBulletTextAlign: themeTokens.itemBulletTextAlign,
+    $itemFontWeight: themeTokens.itemFontWeight,
+    $itemFontSize: themeTokens.itemFontSize,
+    $itemFontName: themeTokens.itemFontName,
+    $itemLineHeight: themeTokens.itemLineHeight,
+    $listGutter: themeTokens.listGutter,
+    $itemColor: themeTokens.itemColor,
+    $itemTextColor: themeTokens.itemTextColor,
     ...selectProps(rest),
     children: title ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       tokens: {
@@ -124,7 +133,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         tokens: headingTokens,
         children: title
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, {
-        ...themeTokens,
         children: itemContent
       })]
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, {
@@ -132,20 +140,19 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     })
   });
 });
-Item.displayName = 'OrderedListItem';
-Item.propTypes = {
+OrderedListItem.displayName = 'OrderedListItem';
+OrderedListItem.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * Item content
    */
   children: _propTypes.default.node.isRequired,
   /**
-   * Defines the title of the `OrderedList.Item`
+   * Defines the title of the `OrderedListItem`
    */
   title: _propTypes.default.string,
   /**
    * Item tokens
    */
   tokens: (0, _componentsBase.getTokensPropType)('OrderedList')
-};
-var _default = exports.default = Item;
+};

package/lib/cjs/OrderedList/{ItemBase.js → OrderedListItemBase.js}

@@ -3,19 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.OrderedListItemBase = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledItem = /*#__PURE__*/_styledComponents.default.li.withConfig({
-  displayName: "ItemBase__StyledItem",
-  componentId: "components-web__sc-o0oiv5-0"
+  displayName: "OrderedListItemBase__StyledItem",
+  componentId: "components-web__sc-qnynme-0"
 })({
   display: 'flex'
 });
-const Item = _ref => {
+const OrderedListItemBase = _ref => {
   let {
     children,
     ...rest
@@ -25,10 +25,10 @@ const Item = _ref => {
     children: children
   });
 };
-Item.propTypes = {
+exports.OrderedListItemBase = OrderedListItemBase;
+OrderedListItemBase.propTypes = {
   /**
    * Item content
    */
   children: _propTypes.default.node.isRequired
-};
-var _default = exports.default = Item;
+};