@telus-uds/components-base 1.97.0 → 1.97.1

package/lib/CheckboxCardGroup/CheckboxCardGroup.js

@@ -1,24 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _StackView = _interopRequireWildcard(require("../StackView"));
-var _CheckboxCard = _interopRequireDefault(require("../CheckboxCard"));
-var _Fieldset = _interopRequireDefault(require("../Fieldset"));
-var _jsxRuntime = require("react/jsx-runtime");
-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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
-const CheckboxCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
+import StackView, { StackWrap } from '../StackView';
+import CheckboxCard from '../CheckboxCard';
+import Fieldset from '../Fieldset';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
+const CheckboxCardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     tokens,
@@ -39,7 +30,7 @@ const CheckboxCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     inactive,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = useViewport();
   const {
     space,
     fieldSpace,
@@ -51,7 +42,7 @@ const CheckboxCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     borderBottomLeftRadius,
     borderBottomRightRadius,
     outlineOffset
-  } = (0, _ThemeProvider.useThemeTokens)('CheckboxCardGroup', tokens, variant, {
+  } = useThemeTokens('CheckboxCardGroup', tokens, variant, {
     viewport
   });
   const borderTokens = {
@@ -65,22 +56,22 @@ const CheckboxCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   const {
     currentValues,
     toggleOneValue
-  } = (0, _utils.useMultipleInputValues)({
+  } = useMultipleInputValues({
     value: checkedIds,
     initialValues: initialCheckedIds,
     onChange,
     readOnly: readOnly || inactive
   });
-  const StackContainer = direction === 'row' ? _StackView.StackWrap : _StackView.default;
+  const StackContainer = direction === 'row' ? StackWrap : StackView;
   // Needs 'checkboxgroup' role on direct parent of checkboxes for MacOS Voiceover's numbering to work,
   // and also needs 'checkboxgroup' role on fieldset for correct description on focusing the set.
   // TODO: test this on more web screen readers.
 
   const uniqueFields = ['id'];
-  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+  if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`CheckboxCardGroup items must have unique ${uniqueFields.join(', ')}`);
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+  return /*#__PURE__*/_jsx(Fieldset, {
     copy: copy,
     ref: ref,
     name: inputGroupName,
@@ -97,7 +88,7 @@ const CheckboxCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     showIcon: showIcon,
     accessibilityRole: "checkbox",
     ...selectProps(rest),
-    children: checkboxCardProperties => /*#__PURE__*/(0, _jsxRuntime.jsx)(StackContainer, {
+    children: checkboxCardProperties => /*#__PURE__*/_jsx(StackContainer, {
       space: space,
       accessibilityRole: "checkbox",
       children: items.map((_ref2, index) => {
@@ -113,7 +104,7 @@ const CheckboxCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
           if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
           toggleOneValue(cardId, event);
         };
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxCard.default, {
+        return /*#__PURE__*/_jsx(CheckboxCard, {
           id: cardId,
           checked: currentValues.includes(cardId),
           onChange: handleChange,
@@ -137,80 +128,79 @@ CheckboxCardGroup.propTypes = {
   /**
    * Whether the English or French copy will be used (e.g. for accessibility labels).
    */
-  copy: _propTypes.default.oneOf(['en', 'fr']),
+  copy: PropTypes.oneOf(['en', 'fr']),
   /**
    * Optional theme token overrides for the outer CheckboxCardGroup component
    */
-  tokens: (0, _utils.getTokensPropType)('CheckboxCardGroup'),
+  tokens: getTokensPropType('CheckboxCardGroup'),
   /**
    * Optional theme token overrides for each inner CheckboxCard component
    */
-  checkboxCardTokens: (0, _utils.getTokensPropType)('CheckboxCard'),
+  checkboxCardTokens: getTokensPropType('CheckboxCard'),
   /**
    * Theme variants, shared between both CheckboxCardGroup and CheckboxCard
    */
-  variant: _utils.variantProp.propType,
+  variant: variantProp.propType,
   /**
    * Array of objects containing specifics for each CheckboxCard to be rendered in the group.
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.exact({
+  items: PropTypes.arrayOf(PropTypes.exact({
     ...selectedItemPropTypes,
-    title: _propTypes.default.string,
-    content: _propTypes.default.node,
-    id: _propTypes.default.string,
-    onChange: _propTypes.default.func
+    title: PropTypes.string,
+    content: PropTypes.node,
+    id: PropTypes.string,
+    onChange: PropTypes.func
   })),
   /**
    * Main text used to describe this group, used in Fieldset's Legend element.
    */
-  legend: _propTypes.default.string,
+  legend: PropTypes.string,
   /**
    * Optional additional text giving more detail to help a user make a choice.
    */
-  hint: _propTypes.default.string,
+  hint: PropTypes.string,
   /**
    * Position of the hint relative to label. Use `below` to display a larger hint below the label.
    */
-  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */
-  tooltip: _propTypes.default.string,
+  tooltip: PropTypes.string,
   /**
    * Current validation status of the group, passed to the feedback element if there is one.
    */
-  validation: _propTypes.default.oneOf(['error', 'success']),
+  validation: PropTypes.oneOf(['error', 'success']),
   /**
    * If provided, a Feedback element is rendered containing this text.
    */
-  feedback: _propTypes.default.string,
+  feedback: PropTypes.string,
   /**
    * If provided, the checkboxed with this ids are selected on first render.
    */
-  initialCheckedIds: _propTypes.default.arrayOf(_propTypes.default.string),
+  initialCheckedIds: PropTypes.arrayOf(PropTypes.string),
   /**
    * If not undefined, the checkboxes with these ids is selected, and the
    * element's selection state will be controlled by its parent using the `onChange` function.
    */
-  checkedIds: _propTypes.default.arrayOf(_propTypes.default.string),
+  checkedIds: PropTypes.arrayOf(PropTypes.string),
   /**
    * Function to call on change in selection state. Is required if the selection state is controlled
    * by a parent using checkedId and the input is not readOnly.
    */
-  onChange: _propTypes.default.func,
+  onChange: PropTypes.func,
   /**
    * If true, the checkbox cards cannot be selected by the user and simply show their current state.
    */
-  readOnly: _propTypes.default.bool,
+  readOnly: PropTypes.bool,
   /**
    * If true, the checkbox card cannot be interacted with, elements are set as `disabled` and if the
    * theme supports `inactive` appearances rules, these are applied.
    */
-  inactive: _propTypes.default.bool,
+  inactive: PropTypes.bool,
   /**
    * On Web, this is passed to the `name` attribute of the fieldset and each checkbox input.
    */
-  name: _propTypes.default.string
+  name: PropTypes.string
 };
-var _default = CheckboxCardGroup;
-exports.default = _default;
+export default CheckboxCardGroup;

package/lib/CheckboxCardGroup/index.js

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

package/lib/ColourToggle/ColourBubble.js

@@ -1,19 +1,12 @@
-"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 _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _pressability = require("../utils/pressability");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-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 Pressable from "react-native-web/dist/exports/Pressable";
+import Platform from "react-native-web/dist/exports/Platform";
+import { resolvePressableTokens } from '../utils/pressability';
+import { applyShadowToken } from '../ThemeProvider';
+import { getTokensPropType } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const selectGeneralBubbleTokens = _ref => {
   let {
     outerBubbleHeight,
@@ -32,7 +25,7 @@ const selectGeneralBubbleTokens = _ref => {
     borderColor: bubbleBorderColor,
     borderWidth: bubbleBorderWidth,
     borderRadius: bubbleBorderRadius,
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         outline: 'none'
       }
@@ -54,7 +47,7 @@ const selectInnerBubbleTokens = _ref2 => {
     borderRadius: innerBubbleBorderRadius,
     borderColor,
     borderWidth,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+    ...applyShadowToken(shadow)
   };
 };
 const selectBorderBubbleTokens = _ref3 => {
@@ -69,7 +62,7 @@ const selectBorderBubbleTokens = _ref3 => {
     borderRadius: bubbleBorderRadius
   };
 };
-const ColourBubble = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const ColourBubble = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     tokens = {},
     id,
@@ -81,9 +74,9 @@ const ColourBubble = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   const defaultTokens = tokens({
     selected: isSelected
   });
-  const resolveColourBubbleTokens = pressState => (0, _pressability.resolvePressableTokens)(tokens, pressState, {});
-  const themeTokens = _react.default.useMemo(() => tokens(), [tokens]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  const resolveColourBubbleTokens = pressState => resolvePressableTokens(tokens, pressState, {});
+  const themeTokens = React.useMemo(() => tokens(), [tokens]);
+  return /*#__PURE__*/_jsx(Pressable, {
     style: state => [selectGeneralBubbleTokens(resolveColourBubbleTokens(state)), isSelected && selectBorderBubbleTokens(defaultTokens)],
     onPress: onPress,
     accessible: true,
@@ -94,7 +87,7 @@ const ColourBubble = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     },
     ref: ref,
     testID: id,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    children: /*#__PURE__*/_jsx(View, {
       style: [selectInnerBubbleTokens(themeTokens), {
         backgroundColor: colourHexCode
       }]
@@ -106,29 +99,28 @@ ColourBubble.propTypes = {
   /**
    * Colour toggle tokens callback.
    */
-  tokens: (0, _utils.getTokensPropType)('ColourToggle'),
+  tokens: getTokensPropType('ColourToggle'),
   /**
    * ID of each colour bubble
    */
-  id: _propTypes.default.string,
+  id: PropTypes.string,
   /**
    * Hexadecimal code for the background of the colour bubble
    */
-  colourHexCode: _propTypes.default.string,
+  colourHexCode: PropTypes.string,
   /**
    * Name of the colour bubble
    */
-  colourName: _propTypes.default.string,
+  colourName: PropTypes.string,
   /**
    * If the current colour bubble is selected
    */
-  isSelected: _propTypes.default.bool,
+  isSelected: PropTypes.bool,
   /**
    * If provided, this function is called when the current selection
    * of the color is changed of all currently `items`.
    * Receives two parameters: item object selected and the event
    */
-  onPress: _propTypes.default.func
+  onPress: PropTypes.func
 };
-var _default = ColourBubble;
-exports.default = _default;
+export default ColourBubble;

package/lib/ColourToggle/ColourToggle.js

@@ -1,21 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _StackView = require("../StackView");
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _ColourBubble = _interopRequireDefault(require("./ColourBubble"));
-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]);
-const ColourToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { StackWrap } from '../StackView';
+import Typography from '../Typography';
+import ColourBubble from './ColourBubble';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -24,20 +17,20 @@ const ColourToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onChange,
     ...rest
   } = _ref;
-  const [currentColourId, setCurrentColourId] = _react.default.useState(defaultColourId);
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ColourToggle', tokens, variant);
+  const [currentColourId, setCurrentColourId] = React.useState(defaultColourId);
+  const getTokens = useThemeTokensCallback('ColourToggle', tokens, variant);
   const {
     space
   } = getTokens();
   const {
     colourName: currentColourName = ''
   } = items.find(item => item.id === currentColourId) || '';
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  return /*#__PURE__*/_jsxs(View, {
     ref: ref,
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    children: [/*#__PURE__*/_jsx(Typography, {
       children: currentColourName
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    }), /*#__PURE__*/_jsx(StackWrap, {
       space: space,
       accessibilityRole: "radiogroup",
       children: items.map((_ref2, index) => {
@@ -49,13 +42,13 @@ const ColourToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         const colourBubbleId = id || `ColourBubble[${index}]`;
         const handleChangeColour = event => {
           setCurrentColourId(id);
-          onChange === null || onChange === void 0 ? void 0 : onChange(event, {
+          onChange === null || onChange === void 0 || onChange(event, {
             id,
             colourHexCode,
             colourName
           });
         };
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColourBubble.default, {
+        return /*#__PURE__*/_jsx(ColourBubble, {
           id: colourBubbleId,
           tokens: getTokens,
           isSelected: id === currentColourId,
@@ -73,27 +66,26 @@ ColourToggle.propTypes = {
   /**
    * Optional theme token overrides for the outer ColourToggle component
    */
-  tokens: (0, _utils.getTokensPropType)('ColourToggle'),
+  tokens: getTokensPropType('ColourToggle'),
   /**
    * Colour toggle variant.
    */
-  variant: _utils.variantProp.propType,
+  variant: variantProp.propType,
   /**
    * Id of the selected color when component mounts
    */
-  defaultColourId: _propTypes.default.string,
+  defaultColourId: PropTypes.string,
   /**
    * Array of objects containing specifics for each ColourBubble to be rendered in the group.
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.exact({
-    colourHexCode: _propTypes.default.string,
-    colourName: _propTypes.default.string,
-    id: _propTypes.default.string
+  items: PropTypes.arrayOf(PropTypes.exact({
+    colourHexCode: PropTypes.string,
+    colourName: PropTypes.string,
+    id: PropTypes.string
   })),
   /**
    * If provided, this function is called when the current selection of the color is changed of all currently `items`. Receives two parameters: item object selected and the event
    */
-  onChange: _propTypes.default.func
+  onChange: PropTypes.func
 };
-var _default = ColourToggle;
-exports.default = _default;
+export default ColourToggle;

package/lib/ColourToggle/index.js

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

package/lib/Divider/Divider.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 _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 _ThemeProvider = require("../ThemeProvider");
-var _Spacer = _interopRequireDefault(require("../Spacer"));
-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 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 { useThemeTokens } from '../ThemeProvider';
+import Spacer from '../Spacer';
+import { a11yProps, getTokensPropType, selectSystemProps, spacingProps, variantProp, viewProps } from '../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
@@ -57,7 +50,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
-const Divider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Divider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant,
     vertical = false,
@@ -68,7 +61,7 @@ const Divider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const {
     color,
     width
-  } = (0, _ThemeProvider.useThemeTokens)('Divider', tokens, variant);
+  } = useThemeTokens('Divider', tokens, variant);
   const borderStyles = vertical ? {
     borderRightColor: color,
     borderRightWidth: width
@@ -76,7 +69,7 @@ const Divider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     borderBottomColor: color,
     borderBottomWidth: width
   };
-  const a11y = _Platform.default.OS === 'web' ?
+  const a11y = Platform.OS === 'web' ?
   // There are aria attributes for dividers on web
   {
     // Early versions of React Native Web support 'aria-orientation' while
@@ -94,7 +87,7 @@ const Divider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ...a11y,
     ...rest
   });
-  const divider = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const divider = /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [styles.divider, borderStyles],
     testID: testID,
@@ -105,11 +98,11 @@ const Divider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     space,
     direction: vertical ? 'row' : 'column'
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Spacer, {
       ...spacerProps,
       testID: testID ? `${testID}-Spacer-before` : undefined
-    }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }), divider, /*#__PURE__*/_jsx(Spacer, {
       ...spacerProps,
       testID: testID ? `${testID}-Spacer-after` : undefined
     })]
@@ -118,22 +111,21 @@ const Divider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 Divider.displayName = 'Divider';
 Divider.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Divider'),
+  tokens: getTokensPropType('Divider'),
   /**
    * A number referring to a position on the space scale to create space on either side of the divider
    */
-  space: _utils.spacingProps.types.spacingValue,
-  variant: _utils.variantProp.propType,
+  space: spacingProps.types.spacingValue,
+  variant: variantProp.propType,
   /**
    * By default, the divider is a horizontal line the full width of its parent.
    * With `vertical` prop and when inside a container with { flexDirection: row }, draws a full height vertical line.
    */
-  vertical: _propTypes.default.bool
+  vertical: PropTypes.bool
 };
-const styles = _StyleSheet.default.create({
+const styles = StyleSheet.create({
   divider: {
     alignSelf: 'stretch'
   }
 });
-var _default = Divider;
-exports.default = _default;
+export default Divider;

package/lib/Divider/index.js

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