@telus-uds/components-base 1.97.0 → 1.97.1

package/lib/DownloadApp/DownloadApp.js

@@ -1,20 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-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 _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-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.linkProps, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { a11yProps, linkProps, hrefAttrsProp, viewProps, getTokensPropType, resolvePressableTokens, variantProp, copyPropTypes, selectSystemProps, useCopy } from '../utils';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import defaultDictionary from './dictionary';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
 const selectOuterStyles = _ref => {
   let {
     borderColor,
@@ -32,10 +25,10 @@ const selectOuterStyles = _ref => {
     padding
   };
 };
-const DownloadApp = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const DownloadApp = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
-    dictionary = _dictionary.default,
+    dictionary = defaultDictionary,
     type = 'ios',
     href,
     onPress,
@@ -43,27 +36,27 @@ const DownloadApp = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     variant = {},
     ...props
   } = _ref2;
-  const getCopy = (0, _utils.useCopy)({
+  const getCopy = useCopy({
     dictionary,
     copy
   });
   const {
     hrefAttrs,
     rest
-  } = _utils.hrefAttrsProp.bundle(props);
+  } = hrefAttrsProp.bundle(props);
   const selectedProps = selectProps({
     accessibilityRole: href ? 'link' : 'button',
     href,
-    onPress: _utils.linkProps.handleHref({
+    onPress: linkProps.handleHref({
       href,
       onPress
     }),
     hrefAttrs,
     ...rest
   });
-  const getDownloadAppTokens = (0, _ThemeProvider.useThemeTokensCallback)('DownloadApp', tokens, variant);
+  const getDownloadAppTokens = useThemeTokensCallback('DownloadApp', tokens, variant);
   const resolveDownloadAppTokens = pressableState => {
-    const themeTokens = (0, _utils.resolvePressableTokens)(getDownloadAppTokens, pressableState, {});
+    const themeTokens = resolvePressableTokens(getDownloadAppTokens, pressableState, {});
     return selectOuterStyles(themeTokens);
   };
   const {
@@ -83,55 +76,55 @@ const DownloadApp = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     }
   };
   const IconComponent = imageResources[copy][type];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     style: pressState => [resolveDownloadAppTokens(pressState), staticStyles.row],
     ...selectedProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+    children: /*#__PURE__*/_jsx(IconComponent, {
       style: staticImageSizes[type][copy],
       alt: type === 'ios' ? getCopy('altTextIos') : getCopy('altTextAndroid')
     })
   });
 });
 DownloadApp.displayName = 'DownloadApp';
-const dictionaryContentShape = _propTypes.default.shape({
-  altTextAndroid: _propTypes.default.string.isRequired,
-  altTextIos: _propTypes.default.string.isRequired
+const dictionaryContentShape = PropTypes.shape({
+  altTextAndroid: PropTypes.string.isRequired,
+  altTextIos: PropTypes.string.isRequired
 });
 DownloadApp.propTypes = {
   ...selectedSystemPropTypes,
-  copy: _utils.copyPropTypes,
+  copy: copyPropTypes,
   /**
    * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
    */
-  dictionary: _propTypes.default.shape({
+  dictionary: PropTypes.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
   /**
    * Select the type of image to show.
    */
-  type: _propTypes.default.oneOf(['android', 'ios']),
+  type: PropTypes.oneOf(['android', 'ios']),
   /**
    * It's a simple link that opens the Download Button instead of the onPress function.
    */
-  href: _propTypes.default.string,
+  href: PropTypes.string,
   /**
    * Function called when the button is pressed. Required unless the button has a href.
    */
-  onPress: _propTypes.default.func,
+  onPress: PropTypes.func,
   /**
    * DownloadApp tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('DownloadApp'),
+  tokens: getTokensPropType('DownloadApp'),
   /**
    * DownloadApp variant.
    */
-  variant: _utils.variantProp.propType
+  variant: variantProp.propType
 };
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   row: {
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         display: 'inline-flex',
         width: 'fit-content'
@@ -164,5 +157,4 @@ const staticImageSizes = {
     }
   }
 };
-var _default = DownloadApp;
-exports.default = _default;
+export default DownloadApp;

package/lib/DownloadApp/dictionary.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
+export default {
   en: {
     altTextAndroid: 'Get it on Google Play',
     altTextIos: 'Download on the App Store'
@@ -13,5 +7,4 @@ var _default = {
     altTextAndroid: 'Disponible sur Google Play',
     altTextIos: 'Télécharger dans l’App Store'
   }
-};
-exports.default = _default;
+};

package/lib/DownloadApp/index.js

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

package/lib/ExpandCollapse/Accordion.js

@@ -1,21 +1,15 @@
-"use strict";
+import React from 'react';
+import ExpandCollapse from './ExpandCollapse';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ExpandCollapse = _interopRequireDefault(require("./ExpandCollapse"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * 'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
- */const Accordion = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const Accordion = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(ExpandCollapse, {
   ref: ref,
   ...props,
   maxOpen: 1
 }));
 Accordion.displayName = 'Accordion';
-Accordion.propTypes = _ExpandCollapse.default.propTypes;
-var _default = Accordion;
-exports.default = _default;
+Accordion.propTypes = ExpandCollapse.propTypes;
+export default Accordion;

package/lib/ExpandCollapse/Control.js

@@ -1,20 +1,13 @@
-"use strict";
-
-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 _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-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 Pressable from "react-native-web/dist/exports/Pressable";
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 function selectContainerStyles(_ref) {
   let {
     backgroundColor,
@@ -48,7 +41,7 @@ function selectContainerStyles(_ref) {
     borderBottomRightRadius,
     borderTopLeftRadius,
     borderBottomLeftRadius,
-    ...(0, _ThemeProvider.verticalAlignRow)(verticalAlign, iconPosition === 'right')
+    ...verticalAlignRow(verticalAlign, iconPosition === 'right')
   };
 }
 
@@ -80,7 +73,7 @@ function selectIconTokens(tokens) {
     size: tokens.iconSize
   };
 }
-const ExpandCollapseControl = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const ExpandCollapseControl = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     onPress,
     isExpanded,
@@ -90,7 +83,7 @@ const ExpandCollapseControl = /*#__PURE__*/_react.default.forwardRef((_ref4, ref
     variant,
     ...rest
   } = _ref4;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
+  const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant);
   const selectedProps = selectProps({
     accessibilityRole,
     ...rest,
@@ -115,11 +108,11 @@ const ExpandCollapseControl = /*#__PURE__*/_react.default.forwardRef((_ref4, ref
   const getControlTokens = pressableState => getTokens(getControlState(pressableState));
   const getPressableStyle = pressableState => ({
     ...selectContainerStyles(getControlTokens(pressableState)),
-    ...(_Platform.default.OS === 'web' ? {
+    ...(Platform.OS === 'web' ? {
       outline: 'none'
     } : {})
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     ...selectedProps,
     onPress: onPress,
@@ -129,13 +122,13 @@ const ExpandCollapseControl = /*#__PURE__*/_react.default.forwardRef((_ref4, ref
         icon: IconComponent,
         ...themeTokens
       } = getControlTokens(pressableState);
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [IconComponent && /*#__PURE__*/_jsx(View, {
           style: [selectIconContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+          children: /*#__PURE__*/_jsx(IconComponent, {
             ...selectIconTokens(themeTokens)
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        }), /*#__PURE__*/_jsx(View, {
           style: [selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
           children: typeof children === 'function' ? children(getControlState(pressableState)) : children
         })]
@@ -144,28 +137,27 @@ const ExpandCollapseControl = /*#__PURE__*/_react.default.forwardRef((_ref4, ref
   });
 });
 ExpandCollapseControl.displayName = 'ExpandCollapseControl';
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   bubblePointerEvents: {
     pointerEvents: 'none'
   }
 });
 ExpandCollapseControl.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('ExpandCollapseControl'),
-  variant: _utils.variantProp.propType,
+  tokens: getTokensPropType('ExpandCollapseControl'),
+  variant: variantProp.propType,
   /**
    * ExpandCollapseControl's children are the content within the button that opens or closes this panel. May
    * accept a render function that recieves the control state: { pressed, hover, focus, expanded }
    */
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   /**
    * Whether the linked ExpandCollapsePanel is opened or closed. Allows themes to set `expanded` styles.
    */
-  isExpanded: _propTypes.default.bool,
+  isExpanded: PropTypes.bool,
   /**
    * Function called when the ExpandCollapse is pressed.
    */
-  onPress: _propTypes.default.func.isRequired
+  onPress: PropTypes.func.isRequired
 };
-var _default = ExpandCollapseControl;
-exports.default = _default;
+export default ExpandCollapseControl;

package/lib/ExpandCollapse/ExpandCollapse.js

@@ -1,18 +1,11 @@
-"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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-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 View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 function selectBorderStyles(tokens) {
   return {
     borderBottomWidth: tokens.borderWidth,
@@ -28,7 +21,7 @@ function selectBorderStyles(tokens) {
  * <ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be
  * nested (they do not need to be direct children), and non-interactive items may be included too.
  */
-const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     tokens,
@@ -45,18 +38,18 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     resetValues,
     setValues,
     unsetValues
-  } = (0, _utils.useMultipleInputValues)({
+  } = useMultipleInputValues({
     maxValues: maxOpen,
     values: open,
     initialValues: initialOpen,
     onChange
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapse', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const themeTokens = useThemeTokens('ExpandCollapse', tokens, variant);
+  return /*#__PURE__*/_jsx(View, {
     style: staticStyles.container,
     ref: ref,
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    children: /*#__PURE__*/_jsx(View, {
       style: selectBorderStyles(themeTokens),
       children: typeof children === 'function' ? children({
         openIds,
@@ -71,35 +64,34 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 ExpandCollapse.displayName = 'ExpandCollapse';
 ExpandCollapse.propTypes = {
   ...selectedSystemPropTypes,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('ExpandCollapse'),
+  variant: variantProp.propType,
+  tokens: getTokensPropType('ExpandCollapse'),
   /**
    * ExpandCollapse usually takes a render function to which it passes an object with properties
    * { openIds, onToggle, resetValues, setValues, unsetValues }. openIds (array of ids) and
    * onToggle (function) will usually be passed to `<ExpandCollapse.Panel>`
    */
-  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
   /**
    * If set, enforces a specific maximum number of open items, closing already-open items when new
    * items are opened. By default, any number of items may be open at once.
    */
-  maxOpen: _propTypes.default.number,
+  maxOpen: PropTypes.number,
   /**
    * If passed, the item or items that are expanded will be controlled by a parent component
    */
-  open: _propTypes.default.arrayOf(_propTypes.default.string),
+  open: PropTypes.arrayOf(PropTypes.string),
   /**
    * Function called when which panels are currently open changes. Necessary if `open` is passed.
    */
-  onChange: _propTypes.default.func,
+  onChange: PropTypes.func,
   /**
    * Allows items with specified ids to be open by default on first load. Should not be used with `open`.
    */
-  initialOpen: _propTypes.default.arrayOf(_propTypes.default.string)
+  initialOpen: PropTypes.arrayOf(PropTypes.string)
 };
-var _default = ExpandCollapse;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
+export default ExpandCollapse;
+const staticStyles = StyleSheet.create({
   container: {
     display: 'flex'
   }

package/lib/ExpandCollapse/Panel.js

@@ -1,23 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
-var _Control = _interopRequireDefault(require("./Control"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-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 Animated from "react-native-web/dist/exports/Animated";
+import Platform from "react-native-web/dist/exports/Platform";
+import View from "react-native-web/dist/exports/View";
+import Text from "react-native-web/dist/exports/Text";
+import PropTypes from 'prop-types';
+import ABBPropTypes from 'airbnb-prop-types';
+import ExpandCollapseControl from './Control';
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, useVerticalExpandAnimation, variantProp, viewProps, useCopy } from '../utils';
+import dictionary from './dictionary';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 // just void functions for now, since there are no style tokens for a panel or control at this point
 const selectContainerStyles = _ref => {
@@ -94,7 +87,7 @@ const selectControlPanelStyles = _ref4 => {
  * The panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required
  * by the chosen accessibility props for a particular accessibility tools).
  */
-const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     openIds = [],
     panelId,
@@ -110,10 +103,10 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
     copy = 'en',
     ...rest
   } = _ref5;
-  const [containerHeight, setContainerHeight] = _react.default.useState(null);
+  const [containerHeight, setContainerHeight] = React.useState(null);
   const isExpanded = openIds.includes(panelId);
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const getCopy = useCopy({
+    dictionary,
     copy
   });
   const selectedProps = selectProps({
@@ -123,7 +116,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
       expanded: isExpanded
     }
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapsePanel', tokens, variant, {
+  const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });
   const handleControlPress = event => {
@@ -136,33 +129,33 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
         height = 0
       } = {}
     } = event.nativeEvent;
-    if (_Platform.default.OS === 'web' || _Platform.default.OS !== 'web' && containerHeight === null) {
+    if (Platform.OS === 'web' || Platform.OS !== 'web' && containerHeight === null) {
       setContainerHeight(height);
     }
   };
-  const [animatedStyles, animatedRef] = (0, _utils.useVerticalExpandAnimation)({
+  const [animatedStyles, animatedRef] = useVerticalExpandAnimation({
     containerHeight,
     isExpanded,
     tokens: themeTokens
   });
-  const focusabilityProps = isExpanded ? {} : _utils.a11yProps.nonFocusableProps;
+  const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps;
   const panelAccessibilityLabel = `${panelId} ${getCopy('panel')}`;
   const subPanelAccessibilityLabel = `${panelId} ${getCopy('subPanel')}`;
-  return content ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return content ? /*#__PURE__*/_jsx(View, {
     style: selectContentPanelStyles(themeTokens),
     accessibilityLabel: panelAccessibilityLabel,
-    children: typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
       style: selectTextStyles(themeTokens),
       accessibilityLabel: subPanelAccessibilityLabel,
       children: children
     }) : children
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  }) : /*#__PURE__*/_jsxs(View, {
     ref: ref,
     style: themeTokens,
     accessibilityLabel: panelAccessibilityLabel,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    children: [/*#__PURE__*/_jsx(View, {
       style: selectControlPanelStyles(themeTokens),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Control.default, {
+      children: /*#__PURE__*/_jsx(ExpandCollapseControl, {
         ...selectedProps,
         isExpanded: isExpanded,
         tokens: controlTokens,
@@ -171,28 +164,28 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
         ref: controlRef,
         children: control
       })
-    }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    }), isExpanded && /*#__PURE__*/_jsx(View, {
       style: {
         borderTopColor: themeTokens.expandDividerColor,
         borderTopWidth: themeTokens.expandDividerWidth,
         marginLeft: themeTokens.contentPaddingLeft,
         marginRight: themeTokens.contentPaddingRight
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+    }), /*#__PURE__*/_jsx(Animated.View, {
       ref: animatedRef,
       style: animatedStyles,
       ...focusabilityProps,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: /*#__PURE__*/_jsx(View, {
         onLayout: onContainerLayout,
         style: {
-          ..._Platform.default.select({
+          ...Platform.select({
             default: {
               flex: 1
             },
             web: {}
           })
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        children: /*#__PURE__*/_jsx(View, {
           style: selectContainerStyles(themeTokens),
           accessibilityLabel: subPanelAccessibilityLabel,
           children: children
@@ -204,46 +197,45 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
 ExpandCollapsePanel.displayName = 'ExpandCollapsePanel';
 ExpandCollapsePanel.propTypes = {
   ...selectedSystemPropTypes,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('ExpandCollapsePanel'),
+  variant: variantProp.propType,
+  tokens: getTokensPropType('ExpandCollapsePanel'),
   /**
    * Array of the ids of currently open groups
    */
-  openIds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
+  openIds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
   /**
    * Unique name by which the ExpandCollapse controls this element.
    */
-  panelId: _propTypes.default.string.isRequired,
+  panelId: PropTypes.string.isRequired,
   /**
    * Function to call on pressing the panel's control, which should open or close the panel.
    * If Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent.
    */
-  onToggle: _propTypes.default.func,
+  onToggle: PropTypes.func,
   /**
    * Optional function to call on pressing the panel's control, in addition to opening or closing the panel.
    */
-  onPress: _propTypes.default.func,
+  onPress: PropTypes.func,
   /**
    * ExpandCollapsePanel's children are the content that is hidden or revealed on open or close, and may be any
    * single React element or a render function which takes this group's isExpanded state, onToggle function and panelId
    */
-  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   /**
    * The content inside the control element that opens and closes the ExpandCollapse when pressed.
    */
-  control: _Control.default.propTypes.children,
+  control: ExpandCollapseControl.propTypes.children,
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
-  controlTokens: (0, _utils.getTokensPropType)('ExpandCollapseControl'),
+  controlTokens: getTokensPropType('ExpandCollapseControl'),
   /**
    * An optional ref to be attached to the control
    */
-  controlRef: _airbnbPropTypes.default.ref(),
+  controlRef: ABBPropTypes.ref(),
   /**
    * A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control
    */
-  content: _propTypes.default.bool
+  content: PropTypes.bool
 };
-var _default = ExpandCollapsePanel;
-exports.default = _default;
+export default ExpandCollapsePanel;