@telus-uds/components-base 1.97.0 → 1.97.1

package/lib/Spacer/Spacer.js

@@ -1,20 +1,15 @@
-"use strict";
+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';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(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 }; }
 /**
  * @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`.
@@ -61,15 +56,15 @@ 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__*/_react.default.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)
@@ -83,19 +78,18 @@ Spacer.propTypes = {
    * 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,10 +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,21 +1,14 @@
-"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 _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 }; }
-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 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]);
 
 /**
  * StackView evenly spaces its children, by default placing `Spacer` components between them.
@@ -59,7 +52,7 @@ 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__*/_react.default.forwardRef((_ref, ref) => {
+const StackView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 0,
     divider,
@@ -71,64 +64,63 @@ const StackView = /*#__PURE__*/_react.default.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);
+  const flexStyles = selectFlexStyles(themeTokens);
   const size = {
     width: themeTokens.width
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...selectedProps,
-    style: [flexStyles, _common.staticStyles[direction], size],
+    style: [flexStyles, staticStyles[direction], size],
     children: content
   });
 });
 StackView.displayName = 'StackView';
 StackView.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('StackView'),
-  variant: _utils.variantProp.propType,
+  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,20 +1,14 @@
-"use strict";
+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';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(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 }; }
 // 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.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);
+  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);
 };
 
 // CSS.supports needs an example of the type of value you intend to use.
@@ -28,8 +22,8 @@ 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__*/_react.default.forwardRef((props, ref) => {
-  const [canUseCSSGap, setCanUseCSSGap] = _react.default.useState(false);
+const StackWrap = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const [canUseCSSGap, setCanUseCSSGap] = React.useState(false);
   const {
     space
   } = props;
@@ -41,18 +35,17 @@ const StackWrap = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   // 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;
+  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,11 +1,4 @@
-"use strict";
+import StackWrapBox from './StackWrapBox';
 
-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 }; }
 // 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,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 _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 }; }
-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'
@@ -40,7 +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__*/_react.default.forwardRef((_ref, ref) => {
+const StackWrapBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     gap = space,
@@ -52,20 +45,20 @@ const StackWrapBox = /*#__PURE__*/_react.default.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);
+  const gapSize = useSpacingScale(gap);
   const offsetStyle = {
     [offsetSides[direction]]: -1 * gapSize
   };
@@ -73,50 +66,49 @@ const StackWrapBox = /*#__PURE__*/_react.default.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'),
+  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,20 +1,13 @@
-"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 _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 }; }
-const [selectProps] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+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]);
 
 /**
  * The primary implementation of StackWrap.
@@ -26,7 +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__*/_react.default.forwardRef((_ref, ref) => {
+const StackWrapGap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     tokens,
@@ -37,33 +30,32 @@ const StackWrapGap = /*#__PURE__*/_react.default.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;

package/lib/StackView/common.js

@@ -1,12 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.staticStyles = exports.selectFlexStyles = void 0;
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const selectFlexStyles = _ref => {
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+export const selectFlexStyles = _ref => {
   let {
     alignItems,
     justifyContent,
@@ -20,8 +13,7 @@ const selectFlexStyles = _ref => {
     flexShrink
   };
 };
-exports.selectFlexStyles = selectFlexStyles;
-const staticStyles = _StyleSheet.default.create({
+export const staticStyles = StyleSheet.create({
   wrap: {
     flexShrink: 1,
     flexWrap: 'wrap'
@@ -40,5 +32,4 @@ const staticStyles = _StyleSheet.default.create({
   'column-reverse': {
     flexDirection: 'column-reverse'
   }
-});
-exports.staticStyles = staticStyles;
+});

package/lib/StackView/getStackedContent.js

@@ -1,17 +1,8 @@
-"use strict";
+import React, { createElement as _createElement } from 'react';
+import Box from '../Box';
+import Divider from '../Divider';
+import Spacer from '../Spacer';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Box = _interopRequireDefault(require("../Box"));
-var _Divider = _interopRequireDefault(require("../Divider"));
-var _Spacer = _interopRequireDefault(require("../Spacer"));
-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; }
 /**
  * @typedef {import('react').ReactChildren} ReactChildren
  * @typedef {import('react').ReactElement} ReactElement
@@ -37,7 +28,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @param {"row" | "column" | "row-reverse" | "column-reverse"} [options.direction]
  * @param {boolean} [options.preserveFragments]
  * @returns {ReactElement[]}
- */const getStackedContent = (children, _ref) => {
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const getStackedContent = (children, _ref) => {
   let {
     divider,
     space,
@@ -52,14 +45,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
   // Avoid surprises if children contains comments, nulls, or is a variable wrapped as a fragment
   const topLevelChildren = preserveFragments ? children : unpackFragment(children);
-  const validChildren = _react.default.Children.toArray(topLevelChildren).filter(Boolean);
+  const validChildren = React.Children.toArray(topLevelChildren).filter(Boolean);
   const content = validChildren.reduce((newChildren, child, index) => {
     const boxID = `Stack-Box-${index}`;
     const item = box ?
     /*#__PURE__*/
     // If wrapped in Box, that Box needs a key.
     // If possible, use an existing content key; use an index-based key only if necessary.
-    (0, _react.createElement)(_Box.default, {
+    _createElement(Box, {
       ...boxProps,
       key: child.key || boxID,
       testID: boxID
@@ -70,11 +63,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
       testID,
       space
     };
-    const separator = divider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+    const separator = divider ? /*#__PURE__*/_jsx(Divider, {
       vertical: direction.startsWith('row'),
       ...dividerProps,
       ...commonProps
-    }, testID) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }, testID) : /*#__PURE__*/_jsx(Spacer, {
       direction: direction.startsWith('row') ? 'row' : 'column',
       ...commonProps
     }, testID);
@@ -118,13 +111,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const unpackFragment = child => {
   var _child$props;
   // If this level is a set of top-level siblings rather than one child, check each in turn
-  if (_react.default.Children.count(child) > 1) return _react.default.Children.map(child, unpackFragment);
+  if (React.Children.count(child) > 1) return React.Children.map(child, unpackFragment);
 
   // When a fragment is found, unpack its children to the top level and check them
-  if ((child === null || child === void 0 ? void 0 : child.type) === _react.default.Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
+  if ((child === null || child === void 0 ? void 0 : child.type) === React.Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
 
   // Stop unpacking as soon as any non-fragment child is found
   return child;
 };
-var _default = getStackedContent;
-exports.default = _default;
+export default getStackedContent;

package/lib/StackView/index.js

@@ -1,24 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "StackWrap", {
-  enumerable: true,
-  get: function () {
-    return _StackWrap.default;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "getStackedContent", {
-  enumerable: true,
-  get: function () {
-    return _getStackedContent.default;
-  }
-});
-var _StackView = _interopRequireDefault(require("./StackView"));
-var _StackWrap = _interopRequireDefault(require("./StackWrap"));
-var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _StackView.default;
-exports.default = _default;
+import StackView from './StackView';
+import StackWrap from './StackWrap';
+export default StackView;
+export { StackWrap };
+export { default as getStackedContent } from './getStackedContent';