@spaced-out/ui-design-system 0.0.2 → 0.0.3-beta.1

package/.storybook/SenseTheme.js

@@ -3,7 +3,7 @@ import {create} from '@storybook/theming';
 export default create({
   base: 'light',
   brandTitle: 'Genesis',
-  brandImage: 'images/Logo.svg',
+  brandImage: 'images/Logo.png',
 
   fontBase: '"Centra No 2", "proxima-nova", "Helvetica Neue"',
   textColor: '#17172A',

package/.storybook/manager-head.html

@@ -37,6 +37,7 @@
   body {
     /* This will target all of the children */
     font-family: 'Centra No 2' !important;
+    background: #17172a;
   }
 
   .sidebar-container {
@@ -44,22 +45,22 @@
   }
 
   .sidebar-item {
-    color: #EFEBFA !important;
+    color: #efebfa !important;
   }
 
   .search-result-item--label {
-    color: #EFEBFA !important;
+    color: #efebfa !important;
   }
 
   .sidebar-item[data-selected='true'] {
     background: #5c34cd !important;
   }
 
-  .search-field svg {
-    color: #EFEBFA !important;
+  .search-field input {
+    border-color: #efebfa !important;
   }
 
-  .search-field input {
-    border-color: #EFEBFA !important;
+  #root > div:first-child {
+    background: #17172a;
   }
 </style>

package/.storybook/preview.js

@@ -62,8 +62,8 @@ export const parameters = {
       method: 'alphabetical',
       order: [
         'Introduction',
-        'Changelog',
         'Design Tokens',
+        'Changelog',
         'Tokens',
         'Components',
         [

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### 0.0.3-beta.1 (2022-11-21)
+
+
+### Bug Fixes
+
+* rename showBackdrop in modal to hideBackdrop and releated changes ([303c4d8](https://github.com/Spaced-Out/ui-design-system/commit/303c4d8c95aa75219cf5eca682ebdecf53c27e7c))
+
+### 0.0.3-beta.0 (2022-11-21)
+
+
+### Bug Fixes
+
+* documentation fixes and modal semantics ([45770ab](https://github.com/Spaced-Out/ui-design-system/commit/45770ab7e7a04ffa78c962fdef7bfc8971b54b3e))
+
 ### 0.0.2 (2022-11-16)
 
 

package/lib/components/Button/Button.js

@@ -32,9 +32,12 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     disabled,
     onClick,
     className,
+    ariaLabel,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("button", _extends({}, props, {
+  return /*#__PURE__*/React.createElement("button", _extends({}, props, ariaLabel ? {
+    'aria-label': ariaLabel
+  } : {}, {
     className: className,
     ref: ref,
     role: "button",

package/lib/components/Button/Button.js.flow

@@ -16,6 +16,7 @@ export type UnstyledButtonProps = {
   disabled?: mixed,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   className?: string,
+  ariaLabel?: string,
   ...
 };
 
@@ -41,6 +42,7 @@ export type ButtonProps = {
   isFluid?: boolean,
   disabled?: boolean,
   size?: 'medium' | 'small',
+  ariaLabel?: string,
   ...
 };
 
@@ -57,11 +59,12 @@ export const UnstyledButton: React$AbstractComponent<
   HTMLButtonElement,
 > = React.forwardRef<UnstyledButtonProps, HTMLButtonElement>(
   (
-    {disabled, onClick, className, ...props}: UnstyledButtonProps,
+    {disabled, onClick, className, ariaLabel, ...props}: UnstyledButtonProps,
     ref: React.Ref<'button'>,
   ) => (
     <button
       {...props}
+      {...(ariaLabel ? {'aria-label': ariaLabel} : {})}
       className={className}
       ref={ref}
       role="button"

package/lib/components/Checkbox/CheckboxGroup.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CheckboxGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
-var _Text = require("../Text/Text.js");
+var _Text = require("../Text/Text");
 var _CheckboxGroupModule = _interopRequireDefault(require("./CheckboxGroup.module.css"));
 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); }

package/lib/components/Checkbox/CheckboxGroup.js.flow

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import type {GroupAlign} from '../../types/common';
 import classify from '../../utils/classify';
-import {BodySmall} from '../Text/Text.js';
+import {BodySmall} from '../Text/Text';
 
 import css from './CheckboxGroup.module.css';
 

package/lib/components/Checkbox/index.js

@@ -15,5 +15,5 @@ Object.defineProperty(exports, "CheckboxGroup", {
     return _CheckboxGroup.CheckboxGroup;
   }
 });
-var _Checkbox = require("./Checkbox.js");
-var _CheckboxGroup = require("./CheckboxGroup.js");
+var _Checkbox = require("./Checkbox");
+var _CheckboxGroup = require("./CheckboxGroup");

package/lib/components/Checkbox/index.js.flow

@@ -1,3 +1,3 @@
 //@flow strict
-export {Checkbox} from './Checkbox.js';
-export {CheckboxGroup} from './CheckboxGroup.js';
+export {Checkbox} from './Checkbox';
+export {CheckboxGroup} from './CheckboxGroup';

package/lib/components/Dialog/Dialog.js

@@ -101,7 +101,7 @@ const Dialog = _ref5 => {
   let {
     children,
     isOpen = false,
-    showBackdrop = true,
+    hideBackdrop = false,
     onClose,
     tapOutsideToClose = false,
     iconName = '',
@@ -111,7 +111,7 @@ const Dialog = _ref5 => {
   return /*#__PURE__*/React.createElement(_Modal.Modal, _extends({
     isOpen: isOpen,
     onClose: onClose,
-    showBackdrop: showBackdrop,
+    hideBackdrop: hideBackdrop,
     tapOutsideToClose: tapOutsideToClose
   }, restDialogProps, {
     classNames: {

package/lib/components/Dialog/Dialog.js.flow

@@ -130,7 +130,7 @@ export const DialogFooter = ({children}: DialogFooterProps): React.Node => (
 export const Dialog = ({
   children,
   isOpen = false,
-  showBackdrop = true,
+  hideBackdrop = false,
   onClose,
   tapOutsideToClose = false,
   iconName = '',
@@ -140,7 +140,7 @@ export const Dialog = ({
   <Modal
     isOpen={isOpen}
     onClose={onClose}
-    showBackdrop={showBackdrop}
+    hideBackdrop={hideBackdrop}
     tapOutsideToClose={tapOutsideToClose}
     {...restDialogProps}
     classNames={{

package/lib/components/Dialog/index.js

@@ -33,4 +33,4 @@ Object.defineProperty(exports, "DialogHeader", {
     return _Dialog.DialogHeader;
   }
 });
-var _Dialog = require("./Dialog.js");
+var _Dialog = require("./Dialog");

package/lib/components/Dialog/index.js.flow

@@ -4,11 +4,11 @@ export type {
   DialogFooterProps,
   DialogHeaderProps,
   DialogProps,
-} from './Dialog.js';
+} from './Dialog';
 export {
   Dialog,
   DIALOG_SEMANTIC,
   DialogBody,
   DialogFooter,
   DialogHeader,
-} from './Dialog.js';
+} from './Dialog';

package/lib/components/Icon/ClickableIcon.js

@@ -18,9 +18,11 @@ const ClickableIcon = _ref => {
   let {
     size = 'medium',
     className,
+    ariaLabel,
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, props, {
+    ariaLabel: ariaLabel,
     className: (0, _classify.default)(_ClickableIconModule.default.button, {
       [_ClickableIconModule.default.small]: size === 'small',
       [_ClickableIconModule.default.medium]: size === 'medium'

package/lib/components/Icon/ClickableIcon.js.flow

@@ -16,10 +16,12 @@ import css from './ClickableIcon.module.css';
 export const ClickableIcon = ({
   size = 'medium',
   className,
+  ariaLabel,
   ...props
 }: IconProps): React.Node => (
   <UnstyledButton
     {...props}
+    ariaLabel={ariaLabel}
     className={classify(
       css.button,
       {
@@ -39,6 +41,7 @@ export type CloseIconProps = {
   color?: ColorTypes,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   className?: string,
+  ariaLabel?: string,
 };
 
 export const CloseIcon = ({

package/lib/components/Icon/Icon.js.flow

@@ -23,6 +23,7 @@ export type IconProps = {
   color?: ColorTypes,
   className?: string,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  ariaLabel?: string,
 };
 
 export const Icon = ({

package/lib/components/Icon/index.js

@@ -21,5 +21,5 @@ Object.defineProperty(exports, "Icon", {
     return _Icon.Icon;
   }
 });
-var _ClickableIcon = require("./ClickableIcon.js");
+var _ClickableIcon = require("./ClickableIcon");
 var _Icon = require("./Icon");

package/lib/components/Icon/index.js.flow

@@ -1,6 +1,6 @@
 // @flow strict
 
 export type {CloseIconProps} from './ClickableIcon';
-export {ClickableIcon, CloseIcon} from './ClickableIcon.js';
+export {ClickableIcon, CloseIcon} from './ClickableIcon';
 export type {IconProps, IconSize, IconType} from './Icon';
 export {Icon} from './Icon';

package/lib/components/Modal/Modal.js

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Modal = void 0;
+exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.Modal = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
 var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTransition"));
 var _motion = require("../../styles/variables/_motion");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button/Button");
+var _Truncate = require("../Truncate/Truncate");
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
 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); }
@@ -17,22 +19,60 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // $FlowFixMe[untyped-import]
 
+const ModalHeader = _ref => {
+  let {
+    children,
+    hideCloseBtn,
+    onCloseButtonClick
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
+    className: _ModalModule.default.modalHeader
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _ModalModule.default.headerContent
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)), !hideCloseBtn && /*#__PURE__*/React.createElement(_Button.Button, {
+    iconLeftName: "xmark",
+    type: "ghost",
+    onClick: onCloseButtonClick,
+    ariaLabel: "Close Button"
+  })));
+};
+exports.ModalHeader = ModalHeader;
+const ModalBody = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ModalModule.default.modalBody
+  }, children);
+};
+exports.ModalBody = ModalBody;
+const ModalFooter = _ref3 => {
+  let {
+    children
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
+    className: _ModalModule.default.modalFooter
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _ModalModule.default.modalFooterActions
+  }, children)));
+};
+exports.ModalFooter = ModalFooter;
 const createPortalRoot = () => {
   const modalRoot = document.createElement('div');
   modalRoot.setAttribute('id', 'modal-root');
   return modalRoot;
 };
-const Modal = _ref => {
+const Modal = _ref4 => {
   let {
     classNames,
     children,
     isOpen = false,
     onClose,
-    showBackdrop = false,
+    hideBackdrop = false,
     removeWhenClosed = true,
     tapOutsideToClose = true,
     initialFocus = -1
-  } = _ref;
+  } = _ref4;
   const {
     floating,
     context
@@ -106,7 +146,7 @@ const Modal = _ref => {
     }, classNames?.container)
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ModalModule.default.backdrop, {
-      [_ModalModule.default.darkBackdrop]: showBackdrop
+      [_ModalModule.default.darkBackdrop]: !hideBackdrop
     }, classNames?.backdrop),
     onClick: onBackdropClick
   }), /*#__PURE__*/React.createElement("div", {

package/lib/components/Modal/Modal.js.flow

@@ -13,6 +13,8 @@ import {
 import useMountTransition from '../../hooks/useMountTransition';
 import {motionDurationNormal} from '../../styles/variables/_motion';
 import classify from '../../utils/classify';
+import {Button} from '../Button/Button';
+import {Truncate} from '../Truncate/Truncate';
 
 import css from './Modal.module.css';
 
@@ -28,12 +30,64 @@ export type ModalProps = {
   children?: React.Node,
   isOpen?: boolean,
   onClose?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  showBackdrop?: boolean,
+  hideBackdrop?: boolean,
   removeWhenClosed?: boolean,
   tapOutsideToClose?: boolean,
   initialFocus?: number,
 };
 
+export type ModalHeaderProps = {
+  children?: React.Node,
+  hideCloseBtn?: boolean,
+  onCloseButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export type ModalFooterProps = {
+  children?: React.Node,
+};
+
+export type ModalBodyProps = {
+  children?: React.Node,
+};
+
+export const ModalHeader = ({
+  children,
+  hideCloseBtn,
+  onCloseButtonClick,
+}: ModalHeaderProps): React.Node => (
+  <>
+    {React.Children.count(children) > 0 && (
+      <div className={css.modalHeader}>
+        <div className={css.headerContent}>
+          <Truncate>{children}</Truncate>
+        </div>
+        {!hideCloseBtn && (
+          <Button
+            iconLeftName="xmark"
+            type="ghost"
+            onClick={onCloseButtonClick}
+            ariaLabel="Close Button"
+          ></Button>
+        )}
+      </div>
+    )}
+  </>
+);
+
+export const ModalBody = ({children}: ModalBodyProps): React.Node => (
+  <div className={css.modalBody}>{children}</div>
+);
+
+export const ModalFooter = ({children}: ModalFooterProps): React.Node => (
+  <>
+    {React.Children.count(children) > 0 && (
+      <div className={css.modalFooter}>
+        <div className={css.modalFooterActions}>{children}</div>
+      </div>
+    )}
+  </>
+);
+
 const createPortalRoot = () => {
   const modalRoot = document.createElement('div');
   modalRoot.setAttribute('id', 'modal-root');
@@ -46,7 +100,7 @@ export const Modal = ({
   children,
   isOpen = false,
   onClose,
-  showBackdrop = false,
+  hideBackdrop = false,
   removeWhenClosed = true,
   tapOutsideToClose = true,
   initialFocus = -1,
@@ -141,7 +195,7 @@ export const Modal = ({
           className={classify(
             css.backdrop,
             {
-              [css.darkBackdrop]: showBackdrop,
+              [css.darkBackdrop]: !hideBackdrop,
             },
             classNames?.backdrop,
           )}

package/lib/components/Modal/Modal.module.css

@@ -1,9 +1,10 @@
-@value (colorBackgroundTertiary, colorBackdropFill) from '../../styles/variables/_color.css';
-@value (spaceNone, spaceXXSmall, spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
-@value (sizeFluid) from '../../styles/variables/_size.css';
+@value (colorBackgroundTertiary, colorBackgroundPrimary, colorBackdropFill) from '../../styles/variables/_color.css';
+@value (spaceNone, spaceSmall, spaceMedium, spaceXXSmall, spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
+@value (sizeFluid, size60) from '../../styles/variables/_size.css';
 @value (elevationNone, elevationModal, elevationBackdrop) from '../../styles/variables/_elevation.css';
 @value (opacity100, opacity0) from '../../styles/variables/_opacity.css';
 @value (motionDurationNormal, motionEaseInEaseOut) from '../../styles/variables/_motion.css';
+@value (borderRadiusMedium) from '../../styles/variables/_border.css';
 
 .modalContainer {
   display: flex;
@@ -24,6 +25,7 @@
   overflow: auto;
   z-index: elevationModal;
   transition: opacity motionDurationNormal, transform motionDurationNormal;
+  border-radius: borderRadiusMedium;
 }
 
 .modalContainer.open.in .modal {
@@ -60,3 +62,40 @@
   backdrop-filter: blur(spaceXXSmall);
   background-color: colorBackdropFill;
 }
+
+.modalHeader {
+  composes: borderBottomPrimary from '../../styles/border.module.css';
+  composes: subTitleLarge from '../../styles/typography.module.css';
+  padding: spaceNone spaceSmall spaceNone spaceMedium;
+  min-height: size60;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: spaceMedium;
+}
+
+.headerContent {
+  display: flex;
+}
+
+.modalBody {
+  padding: spaceMedium;
+  height: sizeFluid;
+  overflow: auto;
+}
+
+.modalFooter {
+  composes: borderTopPrimary from '../../styles/border.module.css';
+  background-color: colorBackgroundPrimary;
+  margin-top: auto;
+  padding: spaceMedium;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: spaceMedium;
+}
+
+.modalFooterActions {
+  display: flex;
+  gap: spaceSmall;
+}

package/lib/components/Modal/index.js

@@ -9,4 +9,22 @@ Object.defineProperty(exports, "Modal", {
     return _Modal.Modal;
   }
 });
-var _Modal = require("./Modal.js");
+Object.defineProperty(exports, "ModalBody", {
+  enumerable: true,
+  get: function () {
+    return _Modal.ModalBody;
+  }
+});
+Object.defineProperty(exports, "ModalFooter", {
+  enumerable: true,
+  get: function () {
+    return _Modal.ModalFooter;
+  }
+});
+Object.defineProperty(exports, "ModalHeader", {
+  enumerable: true,
+  get: function () {
+    return _Modal.ModalHeader;
+  }
+});
+var _Modal = require("./Modal");

package/lib/components/Modal/index.js.flow

@@ -1,3 +1,8 @@
 //@flow strict
-export type {ModalProps} from './Modal.js';
-export {Modal} from './Modal.js';
+export type {
+  ModalBodyProps,
+  ModalFooterProps,
+  ModalHeaderProps,
+  ModalProps,
+} from './Modal';
+export {Modal, ModalBody, ModalFooter, ModalHeader} from './Modal';

package/lib/components/Panel/Panel.js

@@ -29,7 +29,8 @@ const PanelHeader = _ref => {
   }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)), !hideCloseBtn && /*#__PURE__*/React.createElement(_Button.Button, {
     iconLeftName: "xmark",
     type: "ghost",
-    onClick: onCloseButtonClick
+    onClick: onCloseButtonClick,
+    ariaLabel: "Close Button"
   })));
 };
 exports.PanelHeader = PanelHeader;
@@ -60,12 +61,14 @@ const Panel = _ref4 => {
     size = 'medium',
     anchor = 'left',
     onClose,
+    hideBackdrop = true,
     ...restPanelProps
   } = _ref4;
   const isTransitioning = (0, _useMountTransition.default)(isOpen, parseInt(_motion.motionDurationNormal));
   return /*#__PURE__*/React.createElement(_Modal.Modal, _extends({
     isOpen: isOpen,
-    onClose: onClose
+    onClose: onClose,
+    hideBackdrop: hideBackdrop
   }, restPanelProps, {
     classNames: {
       container: (0, _classify.default)(_PanelModule.default.panelContainer, {

package/lib/components/Panel/Panel.js.flow

@@ -52,6 +52,7 @@ export const PanelHeader = ({
             iconLeftName="xmark"
             type="ghost"
             onClick={onCloseButtonClick}
+            ariaLabel="Close Button"
           ></Button>
         )}
       </div>
@@ -79,6 +80,7 @@ export const Panel = ({
   size = 'medium',
   anchor = 'left',
   onClose,
+  hideBackdrop = true,
   ...restPanelProps
 }: PanelProps): React.Node => {
   const isTransitioning = useMountTransition(
@@ -90,6 +92,7 @@ export const Panel = ({
     <Modal
       isOpen={isOpen}
       onClose={onClose}
+      hideBackdrop={hideBackdrop}
       {...restPanelProps}
       classNames={{
         container: classify(css.panelContainer, {

package/lib/components/Panel/Panel.module.css

@@ -2,12 +2,14 @@
 @value (size4, size60, size480, size580, size720, sizeFluid) from '../../styles/variables/_size.css';
 @value (motionDurationNormal, motionEaseInEaseOut) from '../../styles/variables/_motion.css';
 @value (colorBackgroundTertiary, colorBackgroundPrimary) from '../../styles/variables/_color.css';
+@value (borderRadiusNone) from '../../styles/variables/_border.css';
 
 .panel {
   opacity: initial;
   height: sizeFluid;
   transition: transform motionDurationNormal motionEaseInEaseOut;
   background-color: colorBackgroundTertiary;
+  border-radius: borderRadiusNone;
 }
 
 .panel.small {

package/lib/components/Panel/index.js

@@ -27,4 +27,4 @@ Object.defineProperty(exports, "PanelHeader", {
     return _Panel.PanelHeader;
   }
 });
-var _Panel = require("./Panel.js");
+var _Panel = require("./Panel");

package/lib/components/Panel/index.js.flow

@@ -6,5 +6,5 @@ export type {
   PanelHeaderProps,
   PanelProps,
   PanelSize,
-} from './Panel.js';
-export {Panel, PanelBody, PanelFooter, PanelHeader} from './Panel.js';
+} from './Panel';
+export {Panel, PanelBody, PanelFooter, PanelHeader} from './Panel';

package/lib/components/RadioButton/RadioGroup.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadioGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
-var _Text = require("../Text/Text.js");
+var _Text = require("../Text/Text");
 var _RadioGroupModule = _interopRequireDefault(require("./RadioGroup.module.css"));
 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); }