@telus-uds/components-base 1.97.0 → 1.97.1

package/lib/MultiSelectFilter/ModalOverlay.js

@@ -1,24 +1,17 @@
-"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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _portal = require("@gorhom/portal");
-var _utils = require("../utils");
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _Card = _interopRequireDefault(require("../Card"));
-var _IconButton = _interopRequireDefault(require("../IconButton"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const staticStyles = _StyleSheet.default.create({
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { Portal } from '@gorhom/portal';
+import { useCopy, copyPropTypes, getTokensPropType, variantProp } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens } from '../ThemeProvider';
+import dictionary from './dictionary';
+import Card from '../Card';
+import IconButton from '../IconButton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const staticStyles = StyleSheet.create({
   positioner: {
     flex: 1,
     // Grow to maxWidth when possible, shrink when not possible
@@ -27,7 +20,7 @@ const staticStyles = _StyleSheet.default.create({
     elevation: 10000,
     // Position on top of all the other overlays, including backdrops and modals,
     borderRadius: 4,
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 8px 0px'
       },
@@ -62,7 +55,7 @@ const staticStyles = _StyleSheet.default.create({
 });
 const selectContainerStyle = (enableFullscreen, themeTokens) => ({
   borderColor: themeTokens.borderColor,
-  ..._Platform.default.select({
+  ...Platform.select({
     web: {
       position: enableFullscreen ? 'fixed' : 'absolute'
     },
@@ -81,7 +74,7 @@ const selectCloseButtonContainerStyles = _ref => {
     paddingTop
   };
 };
-const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     isReady = false,
@@ -98,8 +91,8 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     onClose,
     enableFullscreen = false
   } = _ref2;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Modal', tokens, variant, {
     viewport,
     maxWidth: false
   });
@@ -112,21 +105,21 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const {
     closeIcon: CloseIconComponent
   } = themeTokens;
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const getCopy = useCopy({
+    dictionary,
     copy
   });
   const closeLabel = getCopy('closeButton');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(View, {
       ref: ref,
       onLayout: onLayout,
       style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden, selectContainerStyle(enableFullscreen, themeTokens)],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
+      children: /*#__PURE__*/_jsxs(Card, {
         tokens: staticStyles.card,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        children: [/*#__PURE__*/_jsx(View, {
           style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+          children: /*#__PURE__*/_jsx(IconButton, {
             onPress: onClose,
             icon: CloseIconComponent,
             accessibilityRole: "button",
@@ -139,25 +132,24 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 });
 ModalOverlay.displayName = 'ModalOverlay';
 ModalOverlay.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  isReady: _propTypes.default.bool,
-  overlaidPosition: _propTypes.default.shape({
-    top: _propTypes.default.number,
-    left: _propTypes.default.number,
-    width: _propTypes.default.number
+  children: PropTypes.node.isRequired,
+  isReady: PropTypes.bool,
+  overlaidPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number,
+    width: PropTypes.number
   }),
-  minWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  minHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  maxHeightSize: _propTypes.default.number,
-  maxWidthSize: _propTypes.default.number,
-  maxHeight: _propTypes.default.bool,
-  maxWidth: _propTypes.default.bool,
-  onLayout: _propTypes.default.func,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('Modal'),
-  copy: _utils.copyPropTypes,
-  onClose: _propTypes.default.func,
-  enableFullscreen: _propTypes.default.bool
+  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  maxHeightSize: PropTypes.number,
+  maxWidthSize: PropTypes.number,
+  maxHeight: PropTypes.bool,
+  maxWidth: PropTypes.bool,
+  onLayout: PropTypes.func,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Modal'),
+  copy: copyPropTypes,
+  onClose: PropTypes.func,
+  enableFullscreen: PropTypes.bool
 };
-var _default = ModalOverlay;
-exports.default = _default;
+export default ModalOverlay;

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -1,37 +1,30 @@
-"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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
-var _SafeAreaView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/SafeAreaView"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _ViewportProvider = require("../ViewportProvider");
-var _Box = _interopRequireDefault(require("../Box"));
-var _Button = require("../Button");
-var _Checkbox = require("../Checkbox");
-var _Divider = _interopRequireDefault(require("../Divider"));
-var _FlexGrid = _interopRequireDefault(require("../FlexGrid"));
-var _Spacer = _interopRequireDefault(require("../Spacer"));
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _Link = require("../Link");
-var _ModalOverlay = _interopRequireDefault(require("./ModalOverlay"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import SafeAreaView from "react-native-web/dist/exports/SafeAreaView";
+import Platform from "react-native-web/dist/exports/Platform";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
+import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider';
+import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useOverlaidPosition, useCopy, useMultipleInputValues, useResponsiveProp, variantProp, useScrollBlocking } from '../utils';
+import defaultDictionary from './dictionary';
+import { useViewport } from '../ViewportProvider';
+import Box from '../Box';
+import { Button, ButtonDropdown } from '../Button';
+import { CheckboxGroup } from '../Checkbox';
+import Divider from '../Divider';
+import FlexGrid from '../FlexGrid';
+import Spacer from '../Spacer';
+import StackView from '../StackView';
+import Typography from '../Typography';
+import { TextButton } from '../Link';
+import ModalOverlay from './ModalOverlay';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   Col,
   Row
-} = _FlexGrid.default;
+} = FlexGrid;
 const selectSubTitleTokens = _ref => {
   let {
     subtitleColor
@@ -87,7 +80,7 @@ const selectContainerStyle = (windowHeight, windowWidth) => ({
 });
 const TOTAL_COLUMNS = 12;
 const MAX_ITEMS_THRESHOLD = 12;
-const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     label,
     subtitle,
@@ -107,27 +100,27 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
     readOnly = false,
     inactive = false,
     rowLimit = 12,
-    dictionary = _dictionary.default,
+    dictionary = defaultDictionary,
     ...rest
   } = _ref5;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = useViewport();
   const {
     currentValues,
     setValues
-  } = (0, _utils.useMultipleInputValues)({
+  } = useMultipleInputValues({
     initialValues,
     values,
     maxValues,
     onChange,
     readOnly
   });
-  const [isOpen, setIsOpen] = _react.default.useState(false);
-  const [checkedIds, setCheckedIds] = _react.default.useState(currentValues ?? []);
-  const [maxWidth, setMaxWidth] = _react.default.useState(false);
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonDropdown', tokens, variant);
-  const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, variant);
-  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getItemTokens(buttonState));
-  const getCopy = (0, _utils.useCopy)({
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [checkedIds, setCheckedIds] = React.useState(currentValues ?? []);
+  const [maxWidth, setMaxWidth] = React.useState(false);
+  const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant);
+  const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant);
+  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
+  const getCopy = useCopy({
     dictionary,
     copy
   });
@@ -136,11 +129,11 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
   const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit;
   const isSelected = currentValues.length > 0;
   const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length;
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     if (colSize === 1) return setMaxWidth(false);
     return colSize === 2 && setMaxWidth(true);
   }, [colSize]);
-  _react.default.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
+  React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
   const {
     headerFontColor,
     headerFontSize,
@@ -155,7 +148,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
     minHeight,
     minWidth,
     ...restTokens
-  } = (0, _ThemeProvider.useThemeTokens)('MultiSelectFilter', tokens, {
+  } = useThemeTokens('MultiSelectFilter', tokens, {
     ...variant,
     maxHeight,
     maxWidth
@@ -163,17 +156,17 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
     viewport
   });
   const uniqueFields = ['id', 'label'];
-  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+  if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
   }
   // Pass an object of relevant component state as first argument for any passed-in press handlers
-  const pressHandlers = (0, _utils.getPressHandlersWithArgs)(rest, [{
+  const pressHandlers = getPressHandlersWithArgs(rest, [{
     id,
     label,
     currentValues
   }]);
   const handleChange = event => {
-    if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+    if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 || pressHandlers.onPress(event);
     if (isOpen) onOpen();
     setIsOpen(!isOpen);
   };
@@ -195,7 +188,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
   const {
     align,
     offsets
-  } = (0, _utils.useResponsiveProp)({
+  } = useResponsiveProp({
     xs: {
       align: {
         top: 'top',
@@ -212,12 +205,12 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
       }
     }
   });
-  const headerStyles = (0, _ThemeProvider.applyTextStyles)({
+  const headerStyles = applyTextStyles({
     fontSize: headerFontSize,
     fontWeight: headerFontWeight,
     fontColor: headerFontColor
   });
-  const subeHeaderStyles = (0, _ThemeProvider.applyTextStyles)({
+  const subeHeaderStyles = applyTextStyles({
     fontSize: subHeaderFontSize,
     fontWeight: subHeaderFontWeight,
     fontColor: selectSubTitleTokens(themeTokens)
@@ -227,18 +220,18 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
     onTargetLayout,
     isReady,
     sourceRef
-  } = (0, _utils.useOverlaidPosition)({
+  } = useOverlaidPosition({
     isShown: isOpen,
     offsets,
     align
   });
-  const [isScrolling, setIsScrolling] = _react.default.useState(false);
-  const [scrollViewHeight, setScrollViewHeight] = _react.default.useState(0);
-  const [rowHeight, setRowHeight] = _react.default.useState(0);
-  const modalRef = (0, _utils.useScrollBlocking)(isOpen);
-  const windowWidth = _Dimensions.default.get('window').width;
-  const windowHeight = _Dimensions.default.get('window').height;
-  _react.default.useEffect(() => {
+  const [isScrolling, setIsScrolling] = React.useState(false);
+  const [scrollViewHeight, setScrollViewHeight] = React.useState(0);
+  const [rowHeight, setRowHeight] = React.useState(0);
+  const modalRef = useScrollBlocking(isOpen);
+  const windowWidth = Dimensions.get('window').width;
+  const windowHeight = Dimensions.get('window').height;
+  React.useEffect(() => {
     if (rowHeight > scrollViewHeight) {
       setIsScrolling(true);
     } else {
@@ -257,11 +250,11 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
     } = event.nativeEvent.layout;
     setRowHeight(height);
   };
-  const headerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  const headerContent = /*#__PURE__*/_jsxs(View, {
     style: [selectHeaderTokens(restTokens), styles.container],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    children: [/*#__PURE__*/_jsx(Row, {
+      children: /*#__PURE__*/_jsx(View, {
+        children: /*#__PURE__*/_jsx(Typography, {
           tokens: {
             ...headerStyles,
             lineHeight: headerLineHeight
@@ -269,34 +262,34 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
           children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
         })
       })
-    }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Spacer, {
         space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      }), /*#__PURE__*/_jsx(Row, {
+        children: /*#__PURE__*/_jsx(Typography, {
           tokens: {
             ...subeHeaderStyles,
             lineHeight: subHeaderLineHeight
           },
           children: subtitle
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      }), /*#__PURE__*/_jsx(Spacer, {
         space: 4
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    }), /*#__PURE__*/_jsx(View, {
       style: styles.options,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+      children: /*#__PURE__*/_jsx(ScrollView, {
         onLayout: handleScrollViewLayout,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+        children: /*#__PURE__*/_jsx(Row, {
           distribute: "between",
           onLayout: handleRowLayout,
-          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Col, {
+          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(Col, {
             xs: TOTAL_COLUMNS / colSize,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.CheckboxGroup, {
+            children: [/*#__PURE__*/_jsx(CheckboxGroup, {
               items: items.slice(i * rowLength, (i + 1) * rowLength),
               checkedIds: checkedIds,
               onChange: e => setCheckedIds(e, i)
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+            }), /*#__PURE__*/_jsx(Spacer, {
               size: 4
             })]
           }, i))
@@ -304,17 +297,17 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
       })
     })]
   });
-  const controlsContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [isScrolling ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  const controlsContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isScrolling ? /*#__PURE__*/_jsx(Divider, {
       tokens: selectDividerTokens(themeTokens),
       space: 4
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }) : /*#__PURE__*/_jsx(Spacer, {
       space: 4
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    }), /*#__PURE__*/_jsx(View, {
       style: selectControlsTokens(restTokens),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+      children: /*#__PURE__*/_jsx(Row, {
         horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+        children: /*#__PURE__*/_jsxs(StackView, {
           direction: buttonDirection,
           space: 3,
           tokens: {
@@ -323,7 +316,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
               flexGrow: 1
             })
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+          children: [/*#__PURE__*/_jsx(Button, {
             onPress: () => onApply(checkedIds),
             variant: {
               priority: 'high',
@@ -332,8 +325,8 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
               })
             },
             children: getCopy('applyButtonLabel')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.TextButton, {
+          }), /*#__PURE__*/_jsx(Box, {
+            children: /*#__PURE__*/_jsx(TextButton, {
               onPress: onClear,
               children: getCopy('clearButtonLabel')
             })
@@ -342,8 +335,8 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
       })
     })]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ButtonDropdown, {
       ref: sourceRef,
       ...pressHandlers,
       value: isOpen,
@@ -352,7 +345,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
       onChange: handleChange,
       tokens: getButtonTokens,
       inactive: inactive
-    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalOverlay.default, {
+    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/_jsx(ModalOverlay, {
       overlaidPosition: {
         top: 0,
         left: 0
@@ -372,15 +365,15 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
       onLayout: onTargetLayout,
       ref: modalRef,
       enableFullscreen: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SafeAreaView.default, {
+      children: /*#__PURE__*/_jsxs(SafeAreaView, {
         style: [selectContainerStyle(windowHeight, windowWidth), styles.content],
         ref: ref,
-        children: [headerContent, /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        children: [headerContent, /*#__PURE__*/_jsx(View, {
           style: styles.controls,
           children: controlsContent
         })]
       })
-    }), isOpen && viewport !== 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
+    }), isOpen && viewport !== 'xs' && /*#__PURE__*/_jsxs(ModalOverlay, {
       overlaidPosition: overlaidPosition,
       onClose: onClose,
       maxHeight: items.length > MAX_ITEMS_THRESHOLD ? true : maxHeight,
@@ -401,11 +394,11 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) =>
   });
 });
 MultiSelectFilter.displayName = 'MultiSelectFilter';
-const styles = _StyleSheet.default.create({
+const styles = StyleSheet.create({
   container: {
     flex: 1
   },
-  controls: _Platform.default.select({
+  controls: Platform.select({
     web: {},
     default: {
       flex: 0.35
@@ -422,46 +415,46 @@ const styles = _StyleSheet.default.create({
 });
 
 // If a language dictionary entry is provided, it must contain every key
-const dictionaryContentShape = _propTypes.default.shape({
-  filterByLabel: _propTypes.default.string.isRequired,
-  applyButtonLabel: _propTypes.default.string.isRequired,
-  clearButtonLabel: _propTypes.default.string.isRequired
+const dictionaryContentShape = PropTypes.shape({
+  filterByLabel: PropTypes.string.isRequired,
+  applyButtonLabel: PropTypes.string.isRequired,
+  clearButtonLabel: PropTypes.string.isRequired
 });
 MultiSelectFilter.propTypes = {
   /**
    * The text displayed to the user in a ButtonDropdown.
    */
-  label: _propTypes.default.string.isRequired,
+  label: PropTypes.string.isRequired,
   /**
    * The text for the subtitle
    */
-  subtitle: _propTypes.default.string,
+  subtitle: PropTypes.string,
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.
    */
-  id: _propTypes.default.string,
+  id: PropTypes.string,
   /**
    * Sets the variant for ButtonDropdown element.
    */
-  variant: _utils.variantProp.propType,
+  variant: variantProp.propType,
   /**
    * Sets the tokens for MultiSelectFilter element.
    */
-  tokens: (0, _utils.getTokensPropType)('MultiSelectFilter'),
+  tokens: getTokensPropType('MultiSelectFilter'),
   /**
    * The options a user may select.
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+  items: PropTypes.arrayOf(PropTypes.shape({
     /**
      * The text displayed to the user with a checkbox, describing this option.
      */
-    label: _propTypes.default.string.isRequired,
+    label: PropTypes.string.isRequired,
     /**
      * An optional unique string may be provided to identify this option.
      * If not provided, the label is used.
      */
-    id: _propTypes.default.string
+    id: PropTypes.string
   })),
   /**
    * If the selected item(s) in the checkbox group(s) are to be controlled externally by
@@ -469,64 +462,63 @@ MultiSelectFilter.propTypes = {
    * Passing an array for "values" makes the MultiSelectFilter a "controlled" component that
    * expects its state to be handled via `onChange` and so doesn't handle it itself.
    */
-  values: _propTypes.default.arrayOf(_propTypes.default.string),
+  values: PropTypes.arrayOf(PropTypes.string),
   /**
    * If `values` is not passed, making the MultiSelectFilter an "uncontrolled" component
    * managing its own selected state, a default set of selections may be provided.
    * Changing the `initialValues` does not change the user's selections.
    */
-  initialValues: _propTypes.default.arrayOf(_propTypes.default.string),
+  initialValues: PropTypes.arrayOf(PropTypes.string),
   /**
    * If provided, sets a maximum number of items a user may select at once.
    */
-  maxValues: _propTypes.default.number,
+  maxValues: PropTypes.number,
   /**
    * If provided sets maxHeight to be active
    */
-  maxHeight: _propTypes.default.bool,
+  maxHeight: PropTypes.bool,
   /**
    * If provided, this function is called when the current selection is changed
    * and is passed an array of the `id`s of all currently selected `items`.
    */
-  onChange: _propTypes.default.func,
+  onChange: PropTypes.func,
   /**
    * If provided, this function is called when the selection is confirmed.
    */
-  onConfirm: _propTypes.default.func,
+  onConfirm: PropTypes.func,
   /**
    * If provided, this function is called when the modal with options is opened.
    * */
-  onOpen: _propTypes.default.func,
+  onOpen: PropTypes.func,
   /**
    * If provided, this function is called when `MultiSelectFilter` is closed.
    * */
-  onCancel: _propTypes.default.func,
+  onCancel: PropTypes.func,
   /**
    * Select English or French copy for the accessible label.
    */
-  copy: _propTypes.default.oneOf(['en', 'fr']),
+  copy: PropTypes.oneOf(['en', 'fr']),
   /**
    * Custom dictionary containing the labels
    */
-  dictionary: _propTypes.default.shape({
+  dictionary: PropTypes.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
   /**
    * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
    */
-  readOnly: _propTypes.default.string,
+  readOnly: PropTypes.string,
   /**
    * If true, the MultiSelectFilter cannot be interacted with, ButtonDropdown is
    * set as `disabled` and if the theme supports `inactive` appearances rules, these
    * are applied.
    */
-  inactive: _propTypes.default.string,
+  inactive: PropTypes.string,
   /**
    * Sets the maximum number of items in one column. If number of items are more
    * than the `rowLimit`, they will be rendered in 2 columns.
    */
-  rowLimit: _propTypes.default.number
+  rowLimit: PropTypes.number
 };
-var _default = MultiSelectFilter;
-exports.default = _default;
+export default MultiSelectFilter;