@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/lib/cjs/ToggleSwitch/ToggleSwitchGroup.js

@@ -3,22 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ToggleSwitchGroup = void 0;
 var _react = _interopRequireDefault(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 _utils = require("../utils");
+var _ToggleSwitch = require("./ToggleSwitch");
+var _Fieldset = require("../Fieldset/Fieldset");
+var _getStackedContent = require("../StackView/getStackedContent");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _containUniqueFields = require("../utils/containUniqueFields");
+var _handlerProps = require("../utils/props/handlerProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _input = require("../utils/input");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
-const ToggleSwitchGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _viewProps.viewProps]);
+const ToggleSwitchGroup = exports.ToggleSwitchGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     variant,
@@ -45,17 +51,17 @@ const ToggleSwitchGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     validation,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     space,
     fieldSpace
-  } = (0, _ThemeProvider.useThemeTokens)('ToggleSwitchGroup', tokens, variant, {
+  } = (0, _useThemeTokens.useThemeTokens)('ToggleSwitchGroup', tokens, variant, {
     viewport
   });
   const {
     currentValues,
     toggleOneValue
-  } = (0, _utils.useMultipleInputValues)({
+  } = (0, _input.useMultipleInputValues)({
     initialValues,
     values,
     maxValues,
@@ -68,7 +74,7 @@ const ToggleSwitchGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   });
   const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
   const uniqueFields = ['id', 'label'];
-  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+  if (!(0, _containUniqueFields.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`ToggleSwitchGroup items must have unique ${uniqueFields.join(', ')}`);
   }
   const toggleSwitches = items.map((_ref2, index) => {
@@ -93,9 +99,9 @@ const ToggleSwitchGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
       },
       accessibilityRole: itemA11yRole,
       accessibilityLabel,
-      ..._utils.a11yProps.getPositionInSet(items.length, index)
+      ..._a11yProps.a11yProps.getPositionInSet(items.length, index)
     };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleSwitch.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleSwitch.ToggleSwitch, {
       copy: copy,
       id: id,
       ref: itemRef,
@@ -110,7 +116,7 @@ const ToggleSwitchGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
       ...selectItemProps(itemRest)
     }, id);
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.Fieldset, {
     ref: ref,
     name: inputGroupName,
     legend: legend,
@@ -122,7 +128,7 @@ const ToggleSwitchGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     inactive: inactive,
     validation: validation,
     ...selectedProps,
-    children: (0, _StackView.getStackedContent)(toggleSwitches, {
+    children: (0, _getStackedContent.getStackedContent)(toggleSwitches, {
       space,
       direction: 'column'
     })
@@ -135,8 +141,8 @@ ToggleSwitchGroup.propTypes = {
    * Whether the English or French copy will be used (e.g. for accessibility labels).
    */
   copy: _propTypes.default.oneOf(['en', 'fr']),
-  tokens: (0, _utils.getTokensPropType)('ToggleSwitchGroup'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('ToggleSwitchGroup'),
+  variant: _variantProp.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`.
@@ -165,7 +171,9 @@ ToggleSwitchGroup.propTypes = {
     /**
      * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
      */
-    ref: _airbnbPropTypes.default.ref(),
+    ref: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+      current: _propTypes.default.any
+    })]),
     /**
      * Controls the position of the switch in relation to the label.
      * - 'start': switch on the start, before the `label` and `tooltip`.
@@ -214,10 +222,9 @@ ToggleSwitchGroup.propTypes = {
   /**
    * Toggle switch token overrides.
    */
-  toggleSwitchTokens: (0, _utils.getTokensPropType)('ToggleSwitch'),
+  toggleSwitchTokens: (0, _tokens.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 = exports.default = ToggleSwitchGroup;
+};

package/lib/cjs/Tooltip/Backdrop.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Backdrop = Backdrop;
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -53,5 +53,4 @@ function Backdrop(_ref) {
 }
 Backdrop.propTypes = {
   children: _propTypes.default.node
-};
-var _default = exports.default = Backdrop;
+};

package/lib/cjs/Tooltip/Backdrop.native.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Backdrop = Backdrop;
 var _react = _interopRequireDefault(require("react"));
 var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
 var _Modal = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Modal"));
@@ -17,7 +17,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * the app's content, since this is the only reliable to do it. The only drawback of this
  * approach is that a press on the Backdrop will actually stop the press event from propagating,
  * i.e. anything rendered beneath the Backdrop can't be pressed until the Backdrop is closed.
- */function Backdrop(_ref) {
+ */
+function Backdrop(_ref) {
   let {
     onPress,
     children
@@ -33,7 +34,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     })
   });
 }
-var _default = exports.default = Backdrop;
 Backdrop.propTypes = {
   onPress: _propTypes.default.func,
   children: _propTypes.default.node

package/lib/cjs/Tooltip/Tooltip.js

@@ -3,23 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Tooltip = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _shared = _interopRequireDefault(require("./shared"));
+var _shared = require("./shared");
 var _floatingUi = require("../utils/floating-ui");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _TooltipButton = _interopRequireDefault(require("../TooltipButton"));
-var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _styles = require("../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _tokens = require("../utils/props/tokens");
+var _viewProps = require("../utils/props/viewProps");
+var _TooltipButton = require("../TooltipButton/TooltipButton");
+var _useCopy = require("../utils/useCopy");
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectTooltipStyles = _ref => {
   let {
     backgroundColor,
@@ -45,7 +49,7 @@ const selectTooltipShadowStyles = _ref2 => {
   } = _ref2;
   return {
     borderRadius,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+    ...(0, _styles.applyShadowToken)(shadow)
   };
 };
 const selectToolTipSizeStyles = _ref3 => {
@@ -97,7 +101,7 @@ const selectMobileArrowStyles = (_ref5, _ref6) => {
     transform: [{
       rotateZ: '45deg'
     }],
-    ...(0, _ThemeProvider.applyShadowToken)(shadow),
+    ...(0, _styles.applyShadowToken)(shadow),
     left: arrowX != null && arrowX,
     top: arrowY != null && arrowY,
     right: '',
@@ -105,8 +109,8 @@ const selectMobileArrowStyles = (_ref5, _ref6) => {
     [staticSide]: '-4px'
   };
 };
-const selectTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
-const defaultControl = (pressableState, variant) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipButton.default, {
+const selectTextStyles = tokens => (0, _styles.applyTextStyles)((0, _tokens.selectTokens)('Typography', tokens));
+const defaultControl = (pressableState, variant) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipButton.TooltipButton, {
   pressableState: pressableState,
   variant: variant
 });
@@ -126,7 +130,7 @@ const defaultControl = (pressableState, variant) => /*#__PURE__*/(0, _jsxRuntime
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
+const Tooltip = exports.Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   let {
     children,
     content,
@@ -169,11 +173,11 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
       element: arrowRef
     })]
   });
-  const getCopy = (0, _useCopy.default)({
-    dictionary: _dictionary.default,
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
     copy
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tooltip', tokens, variant);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Tooltip', tokens, variant);
   const toggleIsOpen = () => {
     onPress();
     setIsOpen(!isOpen);
@@ -276,9 +280,8 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
 Tooltip.displayName = 'Tooltip';
 Tooltip.propTypes = {
   ...selectedSystemPropTypes,
-  ..._shared.default
+  ..._shared.propTypes
 };
-var _default = exports.default = Tooltip;
 const staticStyles = _StyleSheet.default.create({
   container: {
     alignItems: 'flex-start',

package/lib/cjs/Tooltip/Tooltip.native.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Tooltip = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -11,17 +11,21 @@ var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/expor
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _shared = _interopRequireDefault(require("./shared"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Backdrop = _interopRequireDefault(require("./Backdrop"));
-var _getTooltipPosition = _interopRequireDefault(require("./getTooltipPosition"));
-var _TooltipButton = _interopRequireDefault(require("../TooltipButton"));
-var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _shared = require("./shared");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _tokens = require("../utils/props/tokens");
+var _viewProps = require("../utils/props/viewProps");
+var _Backdrop = require("./Backdrop");
+var _getTooltipPosition = require("./getTooltipPosition");
+var _TooltipButton = require("../TooltipButton/TooltipButton");
+var _useCopy = require("../utils/useCopy");
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectTooltipStyles = _ref => {
   let {
     backgroundColor,
@@ -47,7 +51,7 @@ const selectTooltipShadowStyles = _ref2 => {
   } = _ref2;
   return {
     borderRadius,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+    ...(0, _styles.applyShadowToken)(shadow)
   };
 };
 const selectToolTipSizeStyles = _ref3 => {
@@ -130,12 +134,12 @@ const selectArrowStyles = (_ref5, _ref6) => {
     height: rectangleSide,
     borderBottomRightRadius: arrowBorderRadius,
     // this corner will be the arrow tip after rotation
-    ...(0, _ThemeProvider.applyShadowToken)(shadow),
+    ...(0, _styles.applyShadowToken)(shadow),
     ...directionalStyles[position]
   };
 };
-const selectTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
-const defaultControl = (pressableState, variant, tokens) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipButton.default, {
+const selectTextStyles = tokens => (0, _styles.applyTextStyles)((0, _tokens.selectTokens)('Typography', tokens));
+const defaultControl = (pressableState, variant, tokens) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipButton.TooltipButton, {
   pressableState: pressableState,
   variant: variant,
   tokens: tokens
@@ -156,7 +160,7 @@ const defaultControl = (pressableState, variant, tokens) => /*#__PURE__*/(0, _js
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
+const Tooltip = exports.Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   let {
     children,
     content,
@@ -178,11 +182,11 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   const [tooltipDimensions, setTooltipDimensions] = _react.default.useState(null);
   const [windowDimensions, setWindowDimensions] = _react.default.useState(_Dimensions.default.get('window'));
   const [tooltipPosition, setTooltipPosition] = _react.default.useState(null);
-  const getCopy = (0, _useCopy.default)({
-    dictionary: _dictionary.default,
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
     copy
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tooltip', tokens, variant);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Tooltip', tokens, variant);
   const {
     arrowWidth,
     arrowOffset
@@ -213,7 +217,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
       focus: focused
     };
   };
-  const onTooltipLayout = _ref10 => {
+  const onTooltipLayout = _ref0 => {
     let {
       nativeEvent: {
         layout: {
@@ -221,7 +225,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
           height
         }
       }
-    } = _ref10;
+    } = _ref0;
     if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
       setTooltipDimensions({
         width: _Platform.default.select({
@@ -256,7 +260,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     if (tooltipPosition !== null && !tooltipPosition?.isNormalized || !isOpen || controlLayout === null || tooltipDimensions == null) {
       return;
     }
-    const updatedPosition = (0, _getTooltipPosition.default)(position, {
+    const updatedPosition = (0, _getTooltipPosition.getTooltipPosition)(position, {
       controlLayout,
       tooltipDimensions,
       windowDimensions,
@@ -325,7 +329,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
       accessibilityRole: "button",
       nativeID: nativeID,
       children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant, tooltipButtonTokens) : control
-    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.Backdrop, {
       onPress: close,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
         ref: ref,
@@ -351,9 +355,8 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
 Tooltip.displayName = 'NativeTooltip';
 Tooltip.propTypes = {
   ...selectedSystemPropTypes,
-  ..._shared.default
+  ..._shared.propTypes
 };
-var _default = exports.default = Tooltip;
 const staticStyles = _StyleSheet.default.create({
   container: {
     alignItems: 'flex-start'

package/lib/cjs/Tooltip/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     a11yText: 'Reveal additional information.'
   },

package/lib/cjs/Tooltip/getTooltipPosition.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getTooltipPosition = getTooltipPosition;
 function getAbsolutePosition(position) {
   const {
     left,
@@ -171,5 +171,4 @@ function getTooltipPosition(position, _ref2) {
   // prefer 'below' over 'above', since we can always expand the document downwards,
   // and 'above' might cause issues on small viewports with large tooltips
   return getAbsolutePosition(leastOverflowing.position === 'above' ? findRectByPosition('below', boundingRects) : leastOverflowing);
-}
-var _default = exports.default = getTooltipPosition;
+}

package/lib/cjs/Tooltip/shared.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.propTypes = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tokens = require("../utils/props/tokens");
-var _variantProp = _interopRequireDefault(require("../utils/props/variantProp"));
+var _variantProp = require("../utils/props/variantProp");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const propTypes = {
+const propTypes = exports.propTypes = {
   /**
    * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
    * pressable state and tooltip variant as an argument.
@@ -44,6 +44,5 @@ const propTypes = {
   activateOnHover: _propTypes.default.bool,
   tooltipButtonTokens: (0, _tokens.getTokensPropType)('TooltipButton'),
   tokens: (0, _tokens.getTokensPropType)('Tooltip'),
-  variant: _variantProp.default.propType
-};
-var _default = exports.default = propTypes;
+  variant: _variantProp.variantProp.propType
+};

package/lib/cjs/TooltipButton/TooltipButton.js

@@ -3,18 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TooltipButton = 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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _styles = require("../ThemeProvider/utils/styles");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _Icon = require("../Icon/Icon");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectInnerContainerStyles = _ref => {
   let {
     borderRadius,
@@ -45,26 +50,26 @@ const selectIconTokens = _ref2 => {
  * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
  * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
  */
-const TooltipButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const TooltipButton = exports.TooltipButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     pressableState,
     tokens,
     variant,
     ...rest
   } = _ref3;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TooltipButton', tokens, variant, pressableState);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('TooltipButton', tokens, variant, pressableState);
   const {
     icon: IconComponent
   } = themeTokens;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: [(0, _ThemeProvider.applyOuterBorder)(themeTokens), themeTokens.outerBorderWidth && {
+    style: [(0, _styles.applyOuterBorder)(themeTokens), themeTokens.outerBorderWidth && {
       margin: -themeTokens.outerBorderWidth
     }, staticStyles.bubblePointerEvents],
     ...selectProps(rest),
     ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectInnerContainerStyles(themeTokens),
-      children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         icon: IconComponent,
         tokens: selectIconTokens(themeTokens)
       })
@@ -91,7 +96,6 @@ TooltipButton.propTypes = {
     hover: _propTypes.default.bool,
     focus: _propTypes.default.bool
   }),
-  tokens: (0, _utils.getTokensPropType)('TooltipButton'),
-  variant: _utils.variantProp.propType
-};
-var _default = exports.default = TooltipButton;
+  tokens: (0, _tokens.getTokensPropType)('TooltipButton'),
+  variant: _variantProp.variantProp.propType
+};