@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/Spacer/Spacer.js

@@ -1,39 +1,21 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _utils = require("../utils");
-
-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; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import { a11yProps, selectSystemProps, spacingProps, useSpacingScale, viewProps } from '../utils';
 
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
  */
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectSizeStyle = (size, direction) => ({
   // Only apply space in one direction at a time, else large spacers will increase the
   // 'across' size of the parent and mess up siblings with styles like `alignItems: stretch`.
   [direction === 'row' ? 'width' : 'height']: size
 });
+
 /**
  * An empty element used to create a gap between components that is sized according to the theme spacing scale,
  * passing its `space` prop ({@link SpacingValue}) to `useSpacingScale`.
@@ -74,46 +56,40 @@ const selectSizeStyle = (size, direction) => ({
  * Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
  * separations between elements that may be treated as semantically meaningful on web.
  */
-
-
-const Spacer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Spacer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     direction = 'column',
     ...rest
   } = _ref;
-  const size = (0, _utils.useSpacingScale)(space);
+  const size = useSpacingScale(space);
   const sizeStyle = selectSizeStyle(size, direction);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [staticStyles.stretch, sizeStyle],
     ...selectProps(rest)
   });
 });
 Spacer.displayName = 'Spacer';
-Spacer.propTypes = { ...selectedSystemPropTypes,
-
+Spacer.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The size of the spacer according to the theme's spacing scale.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
    * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
    */
-  space: _utils.spacingProps.types.spacingValue,
-
+  space: spacingProps.types.spacingValue,
   /**
    * The spacer applies space in only one direction, which is controlled by the `direction` prop:
    *
    * - `'column'` (default) applies space vertically; has a fixed height and not width.
    * - `'row'` applies space horizontally; has a fixed width and not height.
    */
-  direction: _propTypes.default.oneOf(['column', 'row'])
+  direction: PropTypes.oneOf(['column', 'row'])
 };
-
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   stretch: {
     alignSelf: 'stretch'
   }
 });
-
-var _default = Spacer;
-exports.default = _default;
+export default Spacer;

package/lib/Spacer/index.js

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

package/lib/StackView/StackView.js

@@ -1,37 +1,15 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import Divider from '../Divider';
+import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, variantProp, viewProps } from '../utils';
+import { useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import getStackedContent from './getStackedContent';
+import { staticStyles, selectFlexStyles } from './common';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _Divider = _interopRequireDefault(require("../Divider"));
-
-var _utils = require("../utils");
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _ViewportProvider = require("../ViewportProvider");
-
-var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
-
-var _common = require("./common");
-
-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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 /**
  * StackView evenly spaces its children, by default placing `Spacer` components between them.
  *
@@ -74,10 +52,9 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * It applies no accessibility props of its own, unless `divider` prop is passed (`Divider` has a
  * semantic role but only on web, not within native apps).
  */
-
-const StackView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const StackView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
-    space = 1,
+    space = 0,
     divider,
     direction: directionProp = 'column',
     children,
@@ -87,65 +64,63 @@ const StackView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     accessibilityRole,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const direction = (0, _utils.useResponsiveProp)(directionProp, 'column');
+  const viewport = useViewport();
+  const direction = useResponsiveProp(directionProp, 'column');
   const selectedProps = selectProps({
     accessibilityRole,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...rest
   });
-  const content = (0, _getStackedContent.default)(children, {
+  const content = getStackedContent(children, {
     direction,
     divider,
     space
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
+  const themeTokens = useThemeTokens('StackView', tokens, variant, {
     viewport
   });
-  const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const flexStyles = selectFlexStyles(themeTokens);
+  const size = {
+    width: themeTokens.width
+  };
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...selectedProps,
-    style: [flexStyles, _common.staticStyles[direction]],
+    style: [flexStyles, staticStyles[direction], size],
     children: content
   });
 });
 StackView.displayName = 'StackView';
-StackView.propTypes = { ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('StackView'),
-  variant: _utils.variantProp.propType,
-
+StackView.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('StackView'),
+  variant: variantProp.propType,
   /**
    * Sets the `flexDirection` of the container and, if `divider` is used, gives the Divider the appropriate direction.
    */
-  direction: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['column', 'row', 'column-reverse', 'row-reverse'])),
-
+  direction: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['column', 'row', 'column-reverse', 'row-reverse'])),
   /**
    * If true, renders a UDS `Divider` component between each item. If an object is passed,
    * this object is passes as props to each Divider.
    */
-  divider: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape(_Divider.default.propTypes)]),
-
+  divider: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape(Divider.propTypes)]),
   /**
    * The size of the spacer according to the theme's spacing scale.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
    * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
    */
-  space: _utils.spacingProps.types.spacingValue,
-
+  space: spacingProps.types.spacingValue,
   /**
    * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
    *
    * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
    * is not defined, the accessibilityRole will default to "heading".
    */
-  tag: _propTypes.default.oneOf(_utils.layoutTags),
-
+  tag: PropTypes.oneOf(layoutTags),
   /**
    * A StackView may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.
    */
-  children: _propTypes.default.node
+  children: PropTypes.node
 };
-var _default = StackView;
-exports.default = _default;
+export default StackView;

package/lib/StackView/StackWrap.js

@@ -1,38 +1,20 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _useSafeLayoutEffect = _interopRequireDefault(require("../utils/useSafeLayoutEffect"));
-
-var _StackWrapBox = _interopRequireDefault(require("./StackWrapBox"));
-
-var _StackWrapGap = _interopRequireDefault(require("./StackWrapGap"));
-
-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; }
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import useSafeLayoutEffect from '../utils/useSafeLayoutEffect';
+import StackWrapBox from './StackWrapBox';
+import StackWrapGap from './StackWrapGap';
 
 // In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
+import { jsx as _jsx } from "react/jsx-runtime";
 const cssSupports = (property, value) => {
   var _window$CSS;
+  return Platform.OS === 'web' && typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(property, value);
+};
 
-  return _Platform.default.OS === 'web' && typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(property, value);
-}; // CSS.supports needs an example of the type of value you intend to use.
+// CSS.supports needs an example of the type of value you intend to use.
 // Will be an integer appended `px` after hooks and JSX styles are resolved.
-
-
 const exampleGapValue = '1px';
+
 /**
  * StackWrap is an alternative to StackView where the spaced items are allowed to wrap.
  *
@@ -40,33 +22,30 @@ const exampleGapValue = '1px';
  * wrapped lines of items. By default, this `gap` is the same as the gap between spaced items.
  * If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
  */
-
-const StackWrap = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  var _props$gap;
-
-  const [canUseCSSGap, setCanUseCSSGap] = (0, _react.useState)(false);
+const StackWrap = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const [canUseCSSGap, setCanUseCSSGap] = React.useState(false);
   const {
     space
-  } = props; // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
+  } = props;
+  // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
+  const gap = props.gap ?? space;
+  const gapEqualsSpace = gap === space;
 
-  const gap = (_props$gap = props.gap) !== null && _props$gap !== void 0 ? _props$gap : space;
-  const gapEqualsSpace = gap === space; // If possible, use the cleaner implementation that applies CSS `gap` styles to the container,
+  // If possible, use the cleaner implementation that applies CSS `gap` styles to the container,
   // preserving direct parent-child relationships between the container and each item, which
   // can result in clearer descriptions on some screen readers (e.g. radio "X of Y" on MacOS).
   // Else, use the fallback implementation which renders a `Box` component around each child.
-
-  const Component = canUseCSSGap ? _StackWrapGap.default : _StackWrapBox.default; // In SSR, the type of implementation must match the server during hydration, but
+  const Component = canUseCSSGap ? StackWrapGap : StackWrapBox;
+  // In SSR, the type of implementation must match the server during hydration, but
   // the server can't know if gap is supported, so never use it until after hydration.
-
-  (0, _useSafeLayoutEffect.default)(() => {
+  useSafeLayoutEffect(() => {
     setCanUseCSSGap(gapEqualsSpace && cssSupports('gap', exampleGapValue));
   }, [gapEqualsSpace]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+  return /*#__PURE__*/_jsx(Component, {
     ref: ref,
     ...props
   });
 });
 StackWrap.displayName = 'StackWrap';
-StackWrap.propTypes = _StackWrapBox.default.propTypes;
-var _default = StackWrap;
-exports.default = _default;
+StackWrap.propTypes = StackWrapBox.propTypes;
+export default StackWrap;

package/lib/StackView/StackWrap.native.js

@@ -1,14 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _StackWrapBox = _interopRequireDefault(require("./StackWrapBox"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import StackWrapBox from './StackWrapBox';
 
 // No support for CSS `gap` on React Native, so always use the fallback "box" implementation.
-var _default = _StackWrapBox.default;
-exports.default = _default;
+export default StackWrapBox;

package/lib/StackView/StackWrapBox.js

@@ -1,35 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _utils = require("../utils");
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _ViewportProvider = require("../ViewportProvider");
-
-var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
-
-var _common = require("./common");
-
-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 [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 { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useSpacingScale, useResponsiveProp, viewProps } from '../utils';
+import { useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import getStackedContent from './getStackedContent';
+import { staticStyles, selectFlexStyles } from './common';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const offsetSides = {
   row: 'marginBottom',
   column: 'marginRight'
@@ -42,6 +20,7 @@ const spaceSides = {
   row: 'right',
   column: 'bottom'
 };
+
 /**
  * An alternative fallback implementation of `StackWrap` that doesn't use CSS `gap`.
  *
@@ -54,8 +33,7 @@ const spaceSides = {
  * Unlike the cleaner and more side-effect-free CSS gap StackWrap implementation, this renders a Box (View)
  * between the container and the stacked children, and requires a negative margin on the container.
  */
-
-const StackWrapBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const StackWrapBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     gap = space,
@@ -67,19 +45,20 @@ const StackWrapBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     accessibilityRole,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
+  const viewport = useViewport();
+  const direction = useResponsiveProp(directionProp, 'row');
+  const themeTokens = useThemeTokens('StackView', tokens, variant, {
     viewport
   });
-  const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
+  const flexStyles = selectFlexStyles(themeTokens);
   const selectedProps = selectProps({
     accessibilityRole,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...rest
-  }); // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
+  });
 
-  const gapSize = (0, _utils.useSpacingScale)(gap);
+  // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
+  const gapSize = useSpacingScale(gap);
   const offsetStyle = {
     [offsetSides[direction]]: -1 * gapSize
   };
@@ -87,54 +66,49 @@ const StackWrapBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     [gapSides[direction]]: gap,
     [spaceSides[direction]]: space
   };
-  const content = (0, _getStackedContent.default)(children, {
+  const content = getStackedContent(children, {
     direction,
     space: 0,
     box: boxProps
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...selectedProps,
-    style: [flexStyles, _common.staticStyles.wrap, _common.staticStyles[direction], offsetStyle],
+    style: [flexStyles, staticStyles.wrap, staticStyles[direction], offsetStyle],
     children: content
   });
 });
 StackWrapBox.displayName = 'StackWrapBox';
-StackWrapBox.propTypes = { ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('StackView'),
-
+StackWrapBox.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('StackView'),
   /**
    * Sets the `flexDirection` of the container
    */
-  direction: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['column', 'row', 'row-reverse', 'column-reverse'])),
-
+  direction: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['column', 'row', 'row-reverse', 'column-reverse'])),
   /**
    * The size of the space between items according to the theme's spacing scale.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
    * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
    */
-  space: _utils.spacingProps.types.spacingValue,
-
+  space: spacingProps.types.spacingValue,
   /**
    * The size of the space between lines of content, according to the theme's spacing scale. By default, matches `space`.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
    * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
    */
-  gap: _utils.spacingProps.types.spacingValue,
-
+  gap: spacingProps.types.spacingValue,
   /**
    * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
    *
    * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
    * is not defined, the accessibilityRole will default to "heading".
    */
-  tag: _propTypes.default.oneOf(_utils.layoutTags),
-
+  tag: PropTypes.oneOf(layoutTags),
   /**
    * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.
    */
-  children: _propTypes.default.node
+  children: PropTypes.node
 };
-var _default = StackWrapBox;
-exports.default = _default;
+export default StackWrapBox;

package/lib/StackView/StackWrapGap.js

@@ -1,35 +1,14 @@
-"use strict";
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import StackWrapBox from './StackWrapBox';
+import { a11yProps, getA11yPropsFromHtmlTag, selectSystemProps, useSpacingScale, useResponsiveProp, viewProps } from '../utils';
+import { useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import getStackedContent from './getStackedContent';
+import { staticStyles, selectFlexStyles } from './common';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps] = selectSystemProps([a11yProps, viewProps]);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _StackWrapBox = _interopRequireDefault(require("./StackWrapBox"));
-
-var _utils = require("../utils");
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _ViewportProvider = require("../ViewportProvider");
-
-var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
-
-var _common = require("./common");
-
-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 [selectProps] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 /**
  * The primary implementation of StackWrap.
  *
@@ -40,8 +19,7 @@ const [selectProps] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.vi
  * - The `space` between items is the same as the `gap` between wrapped rows (this is the
  *   default if `gap` prop is undefined)
  */
-
-const StackWrapGap = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const StackWrapGap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     tokens,
@@ -52,33 +30,32 @@ const StackWrapGap = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     accessibilityRole,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
+  const viewport = useViewport();
+  const direction = useResponsiveProp(directionProp, 'row');
+  const themeTokens = useThemeTokens('StackView', tokens, variant, {
     viewport
   });
-  const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
+  const flexStyles = selectFlexStyles(themeTokens);
   const selectedProps = selectProps({
     accessibilityRole,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...rest
   });
-  const size = (0, _utils.useSpacingScale)(space);
+  const size = useSpacingScale(space);
   const gapStyle = {
     gap: size
   };
-  const content = (0, _getStackedContent.default)(children, {
+  const content = getStackedContent(children, {
     direction,
     space: 0
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...selectedProps,
-    style: [flexStyles, _common.staticStyles.wrap, _common.staticStyles[direction], gapStyle],
+    style: [flexStyles, staticStyles.wrap, staticStyles[direction], gapStyle],
     children: content
   });
 });
 StackWrapGap.displayName = 'StackWrapGap';
-StackWrapGap.propTypes = _StackWrapBox.default.propTypes;
-var _default = StackWrapGap;
-exports.default = _default;
+StackWrapGap.propTypes = StackWrapBox.propTypes;
+export default StackWrapGap;