@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/Carousel/CarouselContext.js

@@ -1,16 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CarouselProvider = void 0;
-exports.useCarousel = useCarousel;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const CarouselContext = /*#__PURE__*/_react.default.createContext();
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getTokensPropType } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const CarouselContext = /*#__PURE__*/React.createContext();
 const CarouselProvider = _ref => {
   let {
     activeIndex,
@@ -23,7 +15,7 @@ const CarouselProvider = _ref => {
     totalItems,
     width
   } = _ref;
-  const value = _react.default.useMemo(() => ({
+  const value = React.useMemo(() => ({
     activeIndex,
     goTo,
     getCopyWithPlaceholders,
@@ -33,27 +25,27 @@ const CarouselProvider = _ref => {
     totalItems,
     width
   }), [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselContext.Provider, {
+  return /*#__PURE__*/_jsx(CarouselContext.Provider, {
     value: value,
     children: children
   });
 };
-exports.CarouselProvider = CarouselProvider;
 function useCarousel() {
-  const context = _react.default.useContext(CarouselContext);
+  const context = React.useContext(CarouselContext);
   if (context === undefined) {
     throw new Error(`'useCarousel' must be used within a 'CarouselProvider'`);
   }
   return context;
 }
 CarouselProvider.propTypes = {
-  children: _propTypes.default.arrayOf(_propTypes.default.element).isRequired,
-  activeIndex: _propTypes.default.number.isRequired,
-  goTo: _propTypes.default.func.isRequired,
-  getCopyWithPlaceholders: _propTypes.default.func.isRequired,
-  itemLabel: _propTypes.default.string.isRequired,
-  refocus: _propTypes.default.bool,
-  themeTokens: (0, _utils.getTokensPropType)('Carousel'),
-  totalItems: _propTypes.default.number.isRequired,
-  width: _propTypes.default.number.isRequired
-};
+  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+  activeIndex: PropTypes.number.isRequired,
+  goTo: PropTypes.func.isRequired,
+  getCopyWithPlaceholders: PropTypes.func.isRequired,
+  itemLabel: PropTypes.string.isRequired,
+  refocus: PropTypes.bool,
+  themeTokens: getTokensPropType('Carousel'),
+  totalItems: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired
+};
+export { CarouselProvider, useCarousel };

package/lib/Carousel/CarouselFirstFocus/CarouselFirstFocus.js

@@ -1,47 +1,41 @@
-"use strict";
+import React from 'react';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { PropTypes } from 'prop-types';
+import { useCarousel } from '../CarouselContext';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _propTypes = require("prop-types");
-var _CarouselContext = require("../CarouselContext");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Focus target so that when a new slide is shown, the user can tab into
  * its content using the keyboard.
  *
  * @TODO rework this after integrating with SkipLink when available.
- */const CarouselFirstFocus = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const CarouselFirstFocus = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     title
   } = _ref;
   const {
     getCopyWithPlaceholders
-  } = (0, _CarouselContext.useCarousel)();
+  } = useCarousel();
 
   // TODO: integrate skip link description if behaving as skip link.
   // Consider moving this content to aria-live area while only the skip link is focused.
   const accessibilityLabel = `${title}, ${getCopyWithPlaceholders('stepTrackerLabel')}`;
-  const accessibilityRole = _Platform.default.select({
+  const accessibilityRole = Platform.select({
     web: 'link',
     // The focused item will ultimately be a skip link.
     default: 'button' // 'link' role usually denotes opening browser on Native.
   });
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default
+  return /*#__PURE__*/_jsx(Pressable
   // TODO: integrate skip link functionality, jump focus to after Carousel
   , {
     onPress: undefined,
     ref: ref,
     accessibilityLabel: accessibilityLabel,
     accessibilityRole: accessibilityRole,
-    style: _StyleSheet.default.absoluteFill,
+    style: StyleSheet.absoluteFill,
     focusable: true
   });
 });
@@ -53,7 +47,6 @@ CarouselFirstFocus.propTypes = {
    *
    * For example, "Summer offers" in "Summer offers, offer 1 of 3"
    */
-  title: _propTypes.PropTypes.string
+  title: PropTypes.string
 };
-var _default = CarouselFirstFocus;
-exports.default = _default;
+export default CarouselFirstFocus;

package/lib/Carousel/CarouselItem/CarouselItem.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _utils = require("../../utils");
-var _CarouselContext = require("../CarouselContext");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+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";
+import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, viewProps, variantProp } from '../../utils';
+import { useCarousel } from '../CarouselContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyle = _ref => {
   let {
     width,
@@ -21,39 +14,35 @@ const selectContainerStyle = _ref => {
     totalItems,
     enablePeeking,
     peekingMarginLeft,
-    peekingMarginRight,
     peekingFirstSpace,
     peekingLastSpace,
     peekingMiddleSpace,
     peekingGap,
     hidden
   } = _ref;
-  const isFirst = elementIndex === 0;
-  const isLast = elementIndex === totalItems - 1;
-  const isMiddle = !isFirst && !isLast;
-  const isActive = activeIndex === elementIndex;
   let adjustedWidth = width;
   let marginLeft = 0;
-  let marginRight = 0;
+  const marginRight = 0;
   if (enablePeeking) {
+    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
+    const isFirst = elementIndex === 0;
+    const isActive = activeIndex === elementIndex;
     if (isActive) {
-      adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
-    } else if (isMiddle) {
-      adjustedWidth = width - peekingGap;
-    }
-    if (isFirst) {
-      if (isActive) {
+      if (isFirst) {
         marginLeft = peekingMarginLeft;
-      } else if (activeIndex === totalItems - 1) {
-        marginLeft = peekingLastSpace;
       } else {
-        marginLeft = peekingMiddleSpace;
+        marginLeft = peekingGap;
+      }
+    } else if (isFirst) {
+      marginLeft = peekingMarginLeft + peekingGap + peekingFirstSpace + peekingMiddleSpace;
+      if (activeIndex > 1) {
+        marginLeft += (peekingGap + peekingMiddleSpace * 2) * (activeIndex - 1);
+      }
+      if (activeIndex === totalItems - 1) {
+        marginLeft += peekingLastSpace - peekingMiddleSpace;
       }
-    }
-    if (isLast && isActive) {
-      marginRight = peekingMarginRight;
     } else {
-      marginRight = peekingGap;
+      marginLeft = peekingGap;
     }
   }
   const style = {
@@ -61,7 +50,7 @@ const selectContainerStyle = _ref => {
     marginLeft,
     marginRight
   };
-  if (hidden && _Platform.default.OS === 'web') {
+  if (hidden && Platform.OS === 'web') {
     style.visibility = 'hidden';
   }
   return style;
@@ -71,7 +60,7 @@ const selectContainerStyle = _ref => {
  * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     elementIndex,
@@ -86,13 +75,13 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     activeIndex,
     totalItems,
     height
-  } = (0, _CarouselContext.useCarousel)();
+  } = useCarousel();
   const selectedProps = selectProps({
     ...rest,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole)
+    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
   });
-  const focusabilityProps = activeIndex === elementIndex ? {} : _utils.a11yProps.nonFocusableProps;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps;
+  return /*#__PURE__*/_jsx(View, {
     style: selectContainerStyle({
       width,
       activeIndex,
@@ -111,20 +100,20 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 });
 CarouselItem.propTypes = {
   ...selectedSystemPropTypes,
-  variant: _utils.variantProp.propType,
+  variant: variantProp.propType,
   /**
    * Index of the current slide
    * Don't pass this prop when using `Carousel.Item` as it is already being passed by `Carousel` top-level component
    */
-  elementIndex: _propTypes.default.number,
+  elementIndex: PropTypes.number,
   /**
    * Provide custom accessibilityLabelledBy for Carousel slide
    */
-  accessibilityLabelledBy: _propTypes.default.string,
+  accessibilityLabelledBy: PropTypes.string,
   /**
    * Content of the slide
    */
-  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   /**
    * Sets the HTML tag of the outer container. By default `'li'` so that assistive technology sees
    * the Carousel as a list of items.
@@ -132,27 +121,26 @@ CarouselItem.propTypes = {
    * Carousel's innermost container defaults to `'ul'` which can be overridden. If the tag of either
    * `Carousel` or `Carousel.Item` is overriden, the other should be too, to avoid producing invalid HTML.
    */
-  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  tag: PropTypes.oneOf(layoutTags),
   /**
    * Function to set carousel content background color when slide is being display
    */
-  setContentBackgroundColor: _propTypes.default.func,
+  setContentBackgroundColor: PropTypes.func,
   /**
    * Boolean to enable peeking effect on the first and last slide
    */
-  enablePeeking: _propTypes.default.bool,
+  enablePeeking: PropTypes.bool,
   /**
    * Object to configure the peeking effect
    */
-  peekingProps: _propTypes.default.shape({
-    peekingMarginLeft: _propTypes.default.number,
-    peekingMarginRight: _propTypes.default.number,
-    peekingFirstSpace: _propTypes.default.number,
-    peekingLastSpace: _propTypes.default.number,
-    peekingMiddleSpace: _propTypes.default.number,
-    peekingGap: _propTypes.default.number
+  peekingProps: PropTypes.shape({
+    peekingMarginLeft: PropTypes.number,
+    peekingMarginRight: PropTypes.number,
+    peekingFirstSpace: PropTypes.number,
+    peekingLastSpace: PropTypes.number,
+    peekingMiddleSpace: PropTypes.number,
+    peekingGap: PropTypes.number
   })
 };
 CarouselItem.displayName = 'Carousel.Item';
-var _default = CarouselItem;
-exports.default = _default;
+export default CarouselItem;

package/lib/Carousel/CarouselItem/index.js

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

package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -1,17 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _CarouselContext = require("../CarouselContext");
-var _StepTracker = _interopRequireDefault(require("../../StepTracker"));
-var _StackView = _interopRequireDefault(require("../../StackView"));
-var _utils = require("../../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import { useCarousel } from '../CarouselContext';
+import StepTracker from '../../StepTracker';
+import StackView from '../../StackView';
+import { variantProp } from '../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant
   } = _ref;
@@ -23,7 +16,7 @@ const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
       stepTrackerCurrentBackgroundColor,
       ...themeTokens
     }
-  } = (0, _CarouselContext.useCarousel)();
+  } = useCarousel();
   const stackViewTokens = {
     justifyContent: 'center'
   };
@@ -37,11 +30,11 @@ const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
     containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
   };
   const steps = Array.from(Array(totalItems)).map((_, index) => String(index));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+  return /*#__PURE__*/_jsx(StackView, {
     direction: "row",
     tokens: stackViewTokens,
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepTracker.default, {
+    children: /*#__PURE__*/_jsx(StepTracker, {
       current: activeIndex,
       steps: steps,
       copy: {
@@ -56,7 +49,6 @@ const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
 });
 CarouselStepTracker.displayName = 'CarouselStepTracker';
 CarouselStepTracker.propTypes = {
-  variant: _utils.variantProp.propType
+  variant: variantProp.propType
 };
-var _default = CarouselStepTracker;
-exports.default = _default;
+export default CarouselStepTracker;

package/lib/Carousel/CarouselStepTracker/index.js

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

package/lib/Carousel/CarouselTabs/CarouselTabs.js

@@ -1,29 +1,23 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../../utils");
-var _Carousel = _interopRequireDefault(require("../Carousel"));
-var _jsxRuntime = require("react/jsx-runtime");
 var _CarouselTabs$propTyp, _CarouselTabs$propTyp2;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useResponsiveProp } from '../../utils';
+import Carousel from '../Carousel';
+
 /**
  * @deprecated Please use Carousel and pass the `tabs` prop.
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const CarouselTabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+const CarouselTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     items,
     refocus = true,
     ...carouselProps
   } = _ref;
-  const tabs = (0, _utils.useResponsiveProp)({
+  const tabs = useResponsiveProp({
     md: items
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Carousel.default, {
+  return /*#__PURE__*/_jsx(Carousel, {
     refocus: refocus,
     ...carouselProps,
     ref: ref,
@@ -33,7 +27,7 @@ const CarouselTabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         title,
         content
       } = _ref2;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+      return /*#__PURE__*/_jsx(React.Fragment, {
         children: content
       }, title);
     })
@@ -44,14 +38,13 @@ CarouselTabs.propTypes = {
   /**
    * An array of objects where title is the string shown in the slide's tab and content is the JSX for the slide itself
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.string.isRequired,
-    content: _propTypes.default.node.isRequired
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    content: PropTypes.node.isRequired
   })),
-  ..._Carousel.default.propTypes
+  ...Carousel.propTypes
 };
 // CarouselTabs doesn't require `children` prop, it uses `items` instead.
 // eslint-disable-next-line react/forbid-foreign-prop-types
-if ((_CarouselTabs$propTyp = CarouselTabs.propTypes) !== null && _CarouselTabs$propTyp !== void 0 && _CarouselTabs$propTyp.children) (_CarouselTabs$propTyp2 = CarouselTabs.propTypes) === null || _CarouselTabs$propTyp2 === void 0 ? true : delete _CarouselTabs$propTyp2.children;
-var _default = CarouselTabs;
-exports.default = _default;
+if ((_CarouselTabs$propTyp = CarouselTabs.propTypes) !== null && _CarouselTabs$propTyp !== void 0 && _CarouselTabs$propTyp.children) (_CarouselTabs$propTyp2 = CarouselTabs.propTypes) === null || _CarouselTabs$propTyp2 === void 0 || delete _CarouselTabs$propTyp2.children;
+export default CarouselTabs;

package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -1,35 +1,28 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _StackView = _interopRequireDefault(require("../../StackView"));
-var _CarouselContext = require("../CarouselContext");
-var _CarouselTabsPanelItem = _interopRequireDefault(require("./CarouselTabsPanelItem"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import StackView from '../../StackView';
+import { useCarousel } from '../CarouselContext';
+import CarouselTabsPanelItem from './CarouselTabsPanelItem';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const selectTabPanelStyle = () => ({
   backgroundColor: 'transparent'
 });
-const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const CarouselTabsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     items
   } = _ref;
   const {
     activeIndex,
     goTo
-  } = (0, _CarouselContext.useCarousel)();
-  const nextFocusRef = _react.default.useRef();
-  const firstTabRef = _react.default.useRef();
-  const [isInverse, setIsInverse] = _react.default.useState(false);
+  } = useCarousel();
+  const nextFocusRef = React.useRef();
+  const firstTabRef = React.useRef();
+  const [isInverse, setIsInverse] = React.useState(false);
   const lastTabSelected = activeIndex === items.length - 1;
 
   // Get current select tab style
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex);
     setIsInverse(selectedVariantIsInverse === null || selectedVariantIsInverse === void 0 ? void 0 : selectedVariantIsInverse.inverse);
   }, [items, activeIndex]);
@@ -41,9 +34,9 @@ const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     decorative: true,
     inverse: isInverse
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  return /*#__PURE__*/_jsxs(View, {
     style: selectTabPanelStyle(),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+    children: [/*#__PURE__*/_jsx(StackView, {
       direction: "row",
       space: 3,
       divider: {
@@ -68,7 +61,7 @@ const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
           if (typeof onPress === 'function') onPress(event, index);
           goTo(index);
         };
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanelItem.default, {
+        return /*#__PURE__*/_jsx(CarouselTabsPanelItem, {
           ref: isNext && nextFocusRef || index === 0 && firstTabRef || null,
           title: title,
           selected: selected,
@@ -79,7 +72,7 @@ const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
           ...panelItemProps
         }, title);
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    }), /*#__PURE__*/_jsx(View, {
       focusable: true,
       accessible: true,
       ref: lastTabSelected ? nextFocusRef : null
@@ -88,9 +81,8 @@ const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
 });
 CarouselTabsPanel.displayName = 'CarouselTabsPanel';
 CarouselTabsPanel.propTypes = {
-  items: _propTypes.default.arrayOf(_propTypes.default.shape(_CarouselTabsPanelItem.default.propTypes || {})),
+  items: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
   // Color defined by `Carousel.item` variant otherwise fallback to transparent
-  contentBackgroundColor: _propTypes.default.string
+  contentBackgroundColor: PropTypes.string
 };
-var _default = CarouselTabsPanel;
-exports.default = _default;
+export default CarouselTabsPanel;