@telus-uds/components-base 1.0.1 → 1.3.0

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -11,18 +11,24 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _InputLabel = _interopRequireDefault(require("../InputLabel"));
 
 var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
 
+var _StackView = _interopRequireDefault(require("../StackView"));
+
 var _ThemeProvider = require("../ThemeProvider");
 
-var _propTypes2 = require("../utils/propTypes");
+var _props = require("../utils/props");
 
 var _input = require("../utils/input");
 
+var _utils = require("../utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,7 +37,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const selectButtonTokens = tokens => (0, _propTypes2.selectTokens)('Button', { ...tokens,
+const selectButtonTokens = tokens => (0, _props.selectTokens)('Button', { ...tokens,
   // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
   width: null
 }); // Map and rename icon-specific tokens to name used within Icon
@@ -80,16 +86,41 @@ const selectSwitchStyles = ({
   })
 });
 
+const selectLabelStyles = ({
+  labelMarginLeft
+}) => ({
+  marginLeft: labelMarginLeft
+});
+
+const selectLabelTokens = ({
+  labelColor,
+  labelFontName,
+  labelFontSize,
+  labelFontWeight,
+  labelLineHeight
+}) => ({
+  color: labelColor,
+  fontName: labelFontName,
+  fontWeight: labelFontWeight,
+  fontSize: labelFontSize,
+  lineHeight: labelLineHeight
+});
+
 const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   initialValue,
   onChange,
+  id,
+  label,
   inactive,
   tokens,
+  tooltip,
   variant,
-  accessibilityRole = 'switch'
+  accessibilityRole = 'switch',
+  accessibilityLabel = label
 }, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
+  const themeTokens = getTokens();
   const {
     currentValue,
     setValue
@@ -103,48 +134,64 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
 
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
-    ref: ref,
-    selected: currentValue,
-    inactive: inactive,
-    tokens: getButtonTokens,
-    accessibilityRole: accessibilityRole,
-    accessibilityState: {
-      checked: currentValue
-    },
-    onPress: handlePress,
-    children: buttonState => {
-      const themeTokens = getTokens(buttonState);
-      const IconComponent = themeTokens.icon;
-      const switchStyles = selectSwitchStyles(themeTokens);
-      const trackStyles = selectTrackStyles(themeTokens);
-      const iconTokens = selectIconTokens(themeTokens); // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
-      // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
-
-      const slideStart = 0;
-      const slideEnd = themeTokens.width - themeTokens.switchSize - themeTokens.trackBorderWidth * 2;
-      const switchOffset = buttonState.selected ? slideEnd : slideStart;
-      const switchPositionStyle = {
-        transform: [{
-          translateX: switchOffset
-        }]
-      };
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: [staticStyles.track, trackStyles],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: [staticStyles.switch, switchStyles, switchPositionStyle],
-          children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
+  const uniqueId = (0, _utils.useUniqueId)('toggleSwitch');
+  const inputId = id ?? uniqueId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    space: 2,
+    direction: "row",
+    children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectLabelStyles(themeTokens),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+        forId: inputId,
+        label: label,
+        tokens: selectLabelTokens(themeTokens),
+        tooltip: tooltip
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+      id: id,
+      ref: ref,
+      selected: currentValue,
+      inactive: inactive,
+      tokens: getButtonTokens,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityRole: accessibilityRole,
+      accessibilityState: {
+        checked: currentValue
+      },
+      onPress: handlePress,
+      children: buttonState => {
+        const stateTokens = getTokens(buttonState);
+        const IconComponent = stateTokens.icon;
+        const switchStyles = selectSwitchStyles(stateTokens);
+        const trackStyles = selectTrackStyles(stateTokens);
+        const iconTokens = selectIconTokens(stateTokens); // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
+        // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
+
+        const slideStart = 0;
+        const slideEnd = stateTokens.width - stateTokens.switchSize - stateTokens.trackBorderWidth * 2;
+        const switchOffset = buttonState.selected ? slideEnd : slideStart;
+        const switchPositionStyle = {
+          transform: [{
+            translateX: switchOffset
+          }]
+        };
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.track, trackStyles],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: [staticStyles.switch, switchStyles, switchPositionStyle],
+            children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
+            })
           })
-        })
-      });
-    }
+        });
+      }
+    })]
   });
 });
 ToggleSwitch.displayName = 'ToggleSwitch';
-ToggleSwitch.propTypes = { ..._propTypes2.a11yProps.propTypes,
-  ..._propTypes2.pressProps.propTypes,
-  tokens: (0, _propTypes2.getTokensPropType)('ToggleSwitch'),
-  variant: _propTypes2.variantProp.propType,
+ToggleSwitch.propTypes = { ..._props.a11yProps.propTypes,
+  ..._props.pressProps.propTypes,
+  tokens: (0, _props.getTokensPropType)('ToggleSwitch'),
+  variant: _props.variantProp.propType,
 
   /**
    * If this is a "controlled" component and a parent handles its selected state,
@@ -165,11 +212,26 @@ ToggleSwitch.propTypes = { ..._propTypes2.a11yProps.propTypes,
    */
   onChange: _propTypes.default.func,
 
+  /**
+   * Input ID.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * An optional label.
+   */
+  label: _propTypes.default.string,
+
   /**
    * If passed, the switch does not respond to user input and may recieve different
    * theme tokens if the theme supports inactive appearance.
    */
-  inactive: _propTypes.default.bool
+  inactive: _propTypes.default.bool,
+
+  /**
+   * Content of an optional Tooltip. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: _propTypes.default.string
 };
 
 const staticStyles = _StyleSheet.default.create({

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+
+var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+
+var _StackView = require("../StackView");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _props = require("../utils/props");
+
+var _input = require("../utils/input");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
+  variant,
+  tokens,
+  items = [],
+  values,
+  initialValues,
+  maxValues = 1,
+  onChange,
+  readOnly = false,
+  inactive = false,
+  feedback,
+  hint,
+  tooltip,
+  legend,
+  name: inputGroupName,
+  accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
+  : _Platform.default.select({
+    web: 'group',
+    default: 'none'
+  }),
+  toggleSwitchTokens,
+  validation,
+  ...rest
+}, ref) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    space,
+    fieldSpace
+  } = (0, _ThemeProvider.useThemeTokens)('ToggleSwitchGroup', tokens, variant, {
+    viewport
+  });
+  const {
+    currentValues,
+    toggleOneValue
+  } = (0, _input.useMultipleInputValues)({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+
+  const a11y = _props.a11yProps.select({
+    accessibilityRole,
+    ...rest
+  });
+
+  const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
+  const toggleSwitches = items.map(({
+    label,
+    id = label,
+    accessibilityLabel = label,
+    onChange: itemOnChange,
+    ref: itemRef,
+    tooltip: itemTooltip
+  }, index) => {
+    const isSelected = currentValues.includes(id);
+
+    const handleChange = (newCheckedState, event) => {
+      if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
+      toggleOneValue(id, event);
+    };
+
+    const itemA11y = {
+      accessibilityState: {
+        checked: isSelected
+      },
+      accessibilityRole: itemA11yRole,
+      accessibilityLabel,
+      ..._props.a11yProps.getPositionInSet(items.length, index)
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleSwitch.default, {
+      id: id,
+      ref: itemRef,
+      onChange: handleChange,
+      tokens: toggleSwitchTokens,
+      value: isSelected,
+      inactive: inactive,
+      label: label,
+      tooltip: itemTooltip,
+      ...itemA11y
+    }, id);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    ref: ref,
+    name: inputGroupName,
+    legend: legend,
+    tooltip: tooltip,
+    hint: hint,
+    space: fieldSpace,
+    feedback: feedback,
+    inactive: inactive,
+    validation: validation,
+    ...a11y,
+    children: (0, _StackView.getStackedContent)(toggleSwitches, {
+      space,
+      direction: 'column'
+    })
+  });
+});
+ToggleSwitchGroup.displayName = 'ToggleSwitchGroup';
+ToggleSwitchGroup.propTypes = { ..._props.a11yProps.propTypes,
+  ..._props.pressProps.propTypes,
+  tokens: (0, _props.getTokensPropType)('ToggleSwitchGroup'),
+  variant: _props.variantProp.propType,
+
+  /**
+   * The maximum number of items a user may select at once. Defaults to 1 and behaves
+   * like radio buttons. To have no limit and allow any number of selections, pass `null`.
+   */
+  maxValues: _propTypes.default.number,
+
+  /**
+   * The options a user may select
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+     * The text displayed to the user on the label.
+     */
+    label: _propTypes.default.string.isRequired,
+
+    /**
+     * An optional accessibility label may be passed to each ToggleSwitch
+     * and will be applied as normal for a React Native accessibilityLabel prop.
+     */
+    accessibilityLabel: _propTypes.default.string,
+
+    /**
+     * An optional unique string may be provided to identify this option,
+     * which will be used in code and passed to any onChange function.
+     * If not provided, the label is used.
+     */
+    id: _propTypes.default.string,
+
+    /**
+     * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
+     */
+    ref: _airbnbPropTypes.default.ref()
+  })),
+
+  /**
+   * 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,
+
+  /**
+   * If the selected item(s) in the toggle switch group are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the ToggleSwitchGroup 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),
+
+  /**
+   * If `values` is not passed, making the ToggleSwitchGroup 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),
+
+  /**
+   * Optional additional text giving more detail to help a user make a choice.
+   */
+  hint: _propTypes.default.string,
+
+  /**
+   * Optional tooltip text content to include alongside the legend and hint.
+   */
+  tooltip: _propTypes.default.string,
+
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: _propTypes.default.string,
+
+  /**
+   * Main text used to describe this group, used in Fieldset's Legend element.
+   */
+  legend: _propTypes.default.string,
+
+  /**
+   * Toggle switch token overrides.
+   */
+  toggleSwitchTokens: (0, _props.getTokensPropType)('ToggleSwitch'),
+
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success'])
+};
+var _default = ToggleSwitchGroup;
+exports.default = _default;

package/lib/ToggleSwitch/index.js

@@ -3,11 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+Object.defineProperty(exports, "ToggleSwitch", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitch.default;
+  }
+});
+Object.defineProperty(exports, "ToggleSwitchGroup", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitchGroup.default;
+  }
+});
 
 var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _ToggleSwitchGroup = _interopRequireDefault(require("./ToggleSwitchGroup"));
 
-var _default = _ToggleSwitch.default;
-exports.default = _default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/index.js

@@ -21,6 +21,8 @@ var _exportNames = {
   IconButton: true,
   InputLabel: true,
   List: true,
+  ListItem: true,
+  ListBase: true,
   Modal: true,
   Notification: true,
   Pagination: true,
@@ -36,7 +38,6 @@ var _exportNames = {
   StepTracker: true,
   Tabs: true,
   Tags: true,
-  ToggleSwitch: true,
   Tooltip: true,
   TooltipButton: true,
   Typography: true,
@@ -153,6 +154,18 @@ Object.defineProperty(exports, "List", {
     return _List.default;
   }
 });
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function () {
+    return _List.ListItem;
+  }
+});
+Object.defineProperty(exports, "ListBase", {
+  enumerable: true,
+  get: function () {
+    return _List.ListBase;
+  }
+});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
@@ -243,12 +256,6 @@ Object.defineProperty(exports, "Tags", {
     return _Tags.default;
   }
 });
-Object.defineProperty(exports, "ToggleSwitch", {
-  enumerable: true,
-  get: function () {
-    return _ToggleSwitch.default;
-  }
-});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
@@ -420,7 +427,7 @@ Object.keys(_Link).forEach(function (key) {
   });
 });
 
-var _List = _interopRequireDefault(require("./List"));
+var _List = _interopRequireWildcard(require("./List"));
 
 var _Modal = _interopRequireDefault(require("./Modal"));
 
@@ -502,7 +509,19 @@ Object.keys(_TextInput).forEach(function (key) {
   });
 });
 
-var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+var _ToggleSwitch = require("./ToggleSwitch");
+
+Object.keys(_ToggleSwitch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ToggleSwitch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToggleSwitch[key];
+    }
+  });
+});
 
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 

package/lib/utils/a11y/semantics.js

@@ -154,9 +154,10 @@ const getA11yPropsFromHtmlTag = (tag, nativeRole) => {
   };
 
   if (tag) {
-    const accessibilityRole = tagsToRoles[tag];
-    if (accessibilityRole) return {
-      accessibilityRole
+    // aria roles don't have native counterparts and RN may throw an error if an unrecognised role is passed
+    const ariaRole = _Platform.default.OS === 'web' && tagsToRoles[tag];
+    if (ariaRole) return {
+      accessibilityRole: ariaRole
     };
     const accessibilityLevel = getHeadingLevel(tag);
     if (accessibilityLevel) return {

package/lib/utils/index.js

@@ -9,7 +9,8 @@ var _exportNames = {
   useHash: true,
   useSpacingScale: true,
   useResponsiveProp: true,
-  useUniqueId: true
+  useUniqueId: true,
+  withLinkRouter: true
 };
 Object.defineProperty(exports, "info", {
   enumerable: true,
@@ -47,6 +48,12 @@ Object.defineProperty(exports, "useUniqueId", {
     return _useUniqueId.default;
   }
 });
+Object.defineProperty(exports, "withLinkRouter", {
+  enumerable: true,
+  get: function () {
+    return _withLinkRouter.default;
+  }
+});
 
 var _a11y = require("./a11y");
 
@@ -118,16 +125,16 @@ Object.keys(_pressability).forEach(function (key) {
   });
 });
 
-var _propTypes = require("./propTypes");
+var _props = require("./props");
 
-Object.keys(_propTypes).forEach(function (key) {
+Object.keys(_props).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _propTypes[key]) return;
+  if (key in exports && exports[key] === _props[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _propTypes[key];
+      return _props[key];
     }
   });
 });
@@ -156,6 +163,8 @@ Object.keys(_useResponsiveProp).forEach(function (key) {
 
 var _useUniqueId = _interopRequireDefault(require("./useUniqueId"));
 
+var _withLinkRouter = _interopRequireDefault(require("./withLinkRouter"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/utils/pressability.js

@@ -9,7 +9,7 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
-var _propTypes = require("./propTypes");
+var _pressProps = _interopRequireDefault(require("./props/pressProps"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -108,7 +108,7 @@ const staticStyles = _StyleSheet.default.create(_Platform.default.select({
 
 const getPressHandlersWithArgs = (pressableProps = {}, args = []) => {
   // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
-  const pressHandlers = Object.fromEntries(Object.entries(_propTypes.pressProps.selectHandlers(pressableProps)).map(([key, handler]) => ({
+  const pressHandlers = Object.fromEntries(Object.entries(_pressProps.default.selectHandlers(pressableProps)).map(([key, handler]) => ({
     [key]: (...defaultArgs) => {
       // Pass each handler data on this button and current selection
       handler(...args, ...defaultArgs);