@mirai/ui 2.0.13 → 2.0.15

package/build/components/Menu/Menu.js

@@ -30,19 +30,19 @@ var Menu = function Menu(_ref) {
     others = _objectWithoutProperties(_ref, _excluded);
   var _useDevice = (0, _hooks.useDevice)(),
     isMobile = _useDevice.isMobile;
+  var testId = others.testId;
   var renderOptions = function renderOptions() {
     return options.filter(function (option) {
       return !!option;
     }).map(function () {
       var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var index = arguments.length > 1 ? arguments[1] : undefined;
-      return /*#__PURE__*/_react.default.createElement(Template, _extends({
-        testId: others.testId ? "".concat(others.testId, "-").concat(index) : undefined
-      }, option, {
+      return /*#__PURE__*/_react.default.createElement(Template, _extends({}, option, {
         key: index,
         onPress: function onPress(event) {
           return _onPress(option.value, event);
-        }
+        },
+        testId: testId ? "".concat(testId, "-").concat(index) : undefined
       }));
     });
   };
@@ -61,7 +61,8 @@ var Menu = function Menu(_ref) {
     onOverflow: function onOverflow(event) {
       return _onPress(undefined, event);
     },
-    className: (0, _helpers.styles)(_MenuModule.default.menu, others.className)
+    className: (0, _helpers.styles)(_MenuModule.default.menu, others.className),
+    testId: testId ? "".concat(testId, "-modal") : undefined
   }, renderOptions()));
 };
 exports.Menu = Menu;

package/build/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","title","visible","onPress","others","useDevice","isMobile","renderOptions","filter","option","map","index","testId","undefined","event","value","styles","style","menu","className","displayName","propTypes","PropTypes","node","arrayOf","shape","disabled","bool","divider","icon","func","label","string","oneOfType","number","any"],"sources":["../../../src/components/Menu/Menu.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Layer, LayerContent } from '../../primitives';\nimport { Modal } from '../Modal';\nimport style from './Menu.module.css';\nimport { Option } from './Menu.Option';\n\nconst Menu = ({ children, options = [], Template = Option, title, visible, onPress = () => {}, ...others }) => {\n  const { isMobile } = useDevice();\n\n  const renderOptions = () =>\n    options\n      .filter((option) => !!option)\n      .map((option = {}, index) => (\n        <Template\n          testId={others.testId ? `${others.testId}-${index}` : undefined}\n          {...option}\n          key={index}\n          onPress={(event) => onPress(option.value, event)}\n        />\n      ));\n\n  return !isMobile ? (\n    <Layer\n      forceRender={false}\n      {...others}\n      tag=\"menu\"\n      visible={visible}\n      className={styles(style.menu, visible && style.visible, others.className)}\n    >\n      {children}\n      <LayerContent>{renderOptions()}</LayerContent>\n    </Layer>\n  ) : (\n    <>\n      {children}\n      <Modal\n        title={title}\n        visible={visible}\n        onClose={(event) => onPress(undefined, event)}\n        onOverflow={(event) => onPress(undefined, event)}\n        className={styles(style.menu, others.className)}\n      >\n        {renderOptions()}\n      </Modal>\n    </>\n  );\n};\n\nMenu.displayName = 'Component:Menu';\n\nMenu.propTypes = {\n  children: PropTypes.node,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      children: PropTypes.node,\n      disabled: PropTypes.bool,\n      divider: PropTypes.bool,\n      icon: PropTypes.func,\n      label: PropTypes.string,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    }),\n  ),\n  Template: PropTypes.any,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onPress: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":"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"}
+{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","title","visible","onPress","others","useDevice","isMobile","testId","renderOptions","filter","option","map","index","event","value","undefined","styles","style","menu","className","displayName","propTypes","PropTypes","node","arrayOf","shape","disabled","bool","divider","icon","func","label","string","oneOfType","number","any"],"sources":["../../../src/components/Menu/Menu.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Layer, LayerContent } from '../../primitives';\nimport { Modal } from '../Modal';\nimport style from './Menu.module.css';\nimport { Option } from './Menu.Option';\n\nconst Menu = ({ children, options = [], Template = Option, title, visible, onPress = () => {}, ...others }) => {\n  const { isMobile } = useDevice();\n\n  const { testId } = others;\n\n  const renderOptions = () =>\n    options\n      .filter((option) => !!option)\n      .map((option = {}, index) => (\n        <Template\n          {...option}\n          key={index}\n          onPress={(event) => onPress(option.value, event)}\n          testId={testId ? `${testId}-${index}` : undefined}\n        />\n      ));\n\n  return !isMobile ? (\n    <Layer\n      forceRender={false}\n      {...others}\n      tag=\"menu\"\n      visible={visible}\n      className={styles(style.menu, visible && style.visible, others.className)}\n    >\n      {children}\n      <LayerContent>{renderOptions()}</LayerContent>\n    </Layer>\n  ) : (\n    <>\n      {children}\n      <Modal\n        title={title}\n        visible={visible}\n        onClose={(event) => onPress(undefined, event)}\n        onOverflow={(event) => onPress(undefined, event)}\n        className={styles(style.menu, others.className)}\n        testId={testId ? `${testId}-modal` : undefined}\n      >\n        {renderOptions()}\n      </Modal>\n    </>\n  );\n};\n\nMenu.displayName = 'Component:Menu';\n\nMenu.propTypes = {\n  children: PropTypes.node,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      children: PropTypes.node,\n      disabled: PropTypes.bool,\n      divider: PropTypes.bool,\n      icon: PropTypes.func,\n      label: PropTypes.string,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    }),\n  ),\n  Template: PropTypes.any,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onPress: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":"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"}

package/build/components/Menu/__tests__/__snapshots__/Menu.test.jsx.snap

@@ -108,7 +108,6 @@ exports[`component:<Menu> prop:options & visible 1`] = `
       </ui-pressable>
       <ui-pressable
         class="pressable option value disabled"
-        data-testid="two"
         tabindex="0"
       >
         <ui-view

package/build/components/Modal/Modal.js

@@ -132,7 +132,7 @@ var Modal = function Modal(_ref) {
     style: {
       height: height
     },
-    testId: testId ? "".concat(testId, "-overflow") : undefined
+    testId: testId && overflow ? "".concat(testId, "-overflow") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
     fit: true,
     ref: ref,

package/build/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Event","publish","subscribe","Modal","blur","children","displayName","fit","mobileBehavior","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","aria","buttonBack","ariaBack","buttonClose","ariaClose","others","useDevice","isDesktop","isMobile","height","ref","useRef","useState","dataset","setDataset","useEffect","EVENT_VISIBLE","handleKeydown","event","key","handleClose","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","styles","style","container","modal","calcWidth","className","header","reverse","hideBack","hideClose","ICON","icon","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","role","propTypes","PropTypes","bool","node","string","func","shape"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["// import { Event } from '@mirai/data-sources';\nconst Event = {\n  publish: () => {},\n  subscribe: () => {},\n};\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { EVENT_VISIBLE } from './Modal.constants';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  displayName,\n  fit = false,\n  mobileBehavior = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  aria: { buttonBack: ariaBack = 'Back', buttonClose: ariaClose = 'Close' } = {},\n  ...others\n}) => {\n  const { isDesktop, isMobile, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (!visible || !onClose) return;\n    Event.publish(EVENT_VISIBLE, { visible, displayName });\n\n    const handleKeydown = (event) => event.key === 'Escape' && handleClose();\n\n    document.addEventListener('keydown', handleKeydown);\n    return () => document.removeEventListener('keydown', handleKeydown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const handleOverflow = (event) => {\n    const { target } = event;\n\n    if (onOverflow && !ref.current?.contains(target)) {\n      Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n      onOverflow(event);\n    }\n  };\n\n  const handleClose = (event) => {\n    Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n    onClose(event);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      tag=\"modal-overflow\"\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        isDesktop && mobileBehavior && style.mobileBehavior,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      style={{ height }}\n      testId={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        tag=\"modal\"\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n        aria-hidden={visible ? 'false' : 'true'}\n      >\n        {(title || onBack || onClose) && (\n          <View\n            row\n            className={styles(\n              style.header,\n              !defaultDirection && style.reverse,\n              !onBack && style.hideBack,\n              !onClose && style.hideClose,\n            )}\n          >\n            {onBack && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={onBack}\n                aria-label={ariaBack}\n                testId={testId ? `${testId}-button-back` : undefined}\n              >\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline={!isMobile} className={style.title}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={handleClose}\n                className={style.button}\n                aria-label={ariaClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n\n        {React.Children.map(children, (child, index) =>\n          !child || child === null\n            ? null\n            : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n        )}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  displayName: PropTypes.string,\n  fit: PropTypes.bool,\n  mobileBehavior: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n  aria: PropTypes.shape({\n    buttonBack: PropTypes.string,\n    buttonClose: PropTypes.string,\n  }),\n};\n\nexport { Modal };\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["Event","publish","subscribe","Modal","blur","children","displayName","fit","mobileBehavior","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","aria","buttonBack","ariaBack","buttonClose","ariaClose","others","useDevice","isDesktop","isMobile","height","ref","useRef","useState","dataset","setDataset","useEffect","EVENT_VISIBLE","handleKeydown","event","key","handleClose","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","styles","style","container","modal","calcWidth","className","header","reverse","hideBack","hideClose","ICON","icon","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","role","propTypes","PropTypes","bool","node","string","func","shape"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["// import { Event } from '@mirai/data-sources';\nconst Event = {\n  publish: () => {},\n  subscribe: () => {},\n};\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { EVENT_VISIBLE } from './Modal.constants';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  displayName,\n  fit = false,\n  mobileBehavior = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  aria: { buttonBack: ariaBack = 'Back', buttonClose: ariaClose = 'Close' } = {},\n  ...others\n}) => {\n  const { isDesktop, isMobile, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (!visible || !onClose) return;\n    Event.publish(EVENT_VISIBLE, { visible, displayName });\n\n    const handleKeydown = (event) => event.key === 'Escape' && handleClose();\n\n    document.addEventListener('keydown', handleKeydown);\n    return () => document.removeEventListener('keydown', handleKeydown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const handleOverflow = (event) => {\n    const { target } = event;\n\n    if (onOverflow && !ref.current?.contains(target)) {\n      Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n      onOverflow(event);\n    }\n  };\n\n  const handleClose = (event) => {\n    Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n    onClose(event);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      tag=\"modal-overflow\"\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        isDesktop && mobileBehavior && style.mobileBehavior,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      style={{ height }}\n      testId={testId && overflow ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        tag=\"modal\"\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n        aria-hidden={visible ? 'false' : 'true'}\n      >\n        {(title || onBack || onClose) && (\n          <View\n            row\n            className={styles(\n              style.header,\n              !defaultDirection && style.reverse,\n              !onBack && style.hideBack,\n              !onClose && style.hideClose,\n            )}\n          >\n            {onBack && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={onBack}\n                aria-label={ariaBack}\n                testId={testId ? `${testId}-button-back` : undefined}\n              >\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline={!isMobile} className={style.title}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={handleClose}\n                className={style.button}\n                aria-label={ariaClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n\n        {React.Children.map(children, (child, index) =>\n          !child || child === null\n            ? null\n            : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n        )}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  displayName: PropTypes.string,\n  fit: PropTypes.bool,\n  mobileBehavior: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n  aria: PropTypes.shape({\n    buttonBack: PropTypes.string,\n    buttonClose: PropTypes.string,\n  }),\n};\n\nexport { Modal };\n"],"mappings":"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"}

package/build/components/Notification/Notification.js

@@ -31,7 +31,7 @@ var Notification = function Notification(_ref) {
     others = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
     row: true,
-    tag: "notification",
+    tag: "notification".concat(error ? '-error' : warning ? '-warning' : ''),
     className: (0, _helpers.styles)(_NotificationModule.default.notification, contrast ? _NotificationModule.default.contrast : error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : info ? _NotificationModule.default.info : undefined, inline ? _NotificationModule.default.inline : _NotificationModule.default.outlined, large ? _NotificationModule.default.large : small ? _NotificationModule.default.small : undefined, wide && _NotificationModule.default.wide, others.className)
   }), /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     headline: large,

package/build/components/Notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","names":["Notification","children","contrast","error","info","inline","large","small","success","title","warning","wide","onClose","others","styles","style","notification","undefined","outlined","className","getIconState","texts","testId","ICON","CLOSE","displayName","propTypes","PropTypes","any","isRequired","bool","string","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({\n  children,\n  contrast,\n  error,\n  info,\n  inline = false,\n  large,\n  small,\n  success,\n  title,\n  warning,\n  wide,\n  onClose,\n  ...others\n}) => (\n  <View\n    {...others}\n    row\n    tag=\"notification\"\n    className={styles(\n      style.notification,\n      contrast\n        ? style.contrast\n        : error\n        ? style.error\n        : warning\n        ? style.warning\n        : success\n        ? style.success\n        : info\n        ? style.info\n        : undefined,\n      inline ? style.inline : style.outlined,\n      large ? style.large : small ? style.small : undefined,\n      wide && style.wide,\n      others.className,\n    )}\n  >\n    <Icon headline={large} paragraph={small} level={large ? 1 : 3} value={getIconState({ error, success, warning })} />\n\n    <View className={style.texts}>\n      {title && (\n        <Text action={small} bold headline={large}>\n          {title}\n        </Text>\n      )}\n      {children && (\n        <Text action={!small && !large} small={small}>\n          {children}\n        </Text>\n      )}\n    </View>\n\n    {!inline && !large && onClose && (\n      <Pressable onPress={onClose} testId={others.testId ? `${others.testId}-button-close` : undefined}>\n        <Icon headline={large} paragraph={small} level={large ? 1 : 3} value={ICON.CLOSE} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.any.isRequired,\n  contrast: PropTypes.bool,\n  error: PropTypes.bool,\n  info: PropTypes.bool,\n  inline: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  title: PropTypes.string,\n  warning: PropTypes.bool,\n  wide: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":"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"}
+{"version":3,"file":"Notification.js","names":["Notification","children","contrast","error","info","inline","large","small","success","title","warning","wide","onClose","others","styles","style","notification","undefined","outlined","className","getIconState","texts","testId","ICON","CLOSE","displayName","propTypes","PropTypes","any","isRequired","bool","string","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({\n  children,\n  contrast,\n  error,\n  info,\n  inline = false,\n  large,\n  small,\n  success,\n  title,\n  warning,\n  wide,\n  onClose,\n  ...others\n}) => (\n  <View\n    {...others}\n    row\n    tag={`notification${error ? '-error' : warning ? '-warning' : ''}`}\n    className={styles(\n      style.notification,\n      contrast\n        ? style.contrast\n        : error\n        ? style.error\n        : warning\n        ? style.warning\n        : success\n        ? style.success\n        : info\n        ? style.info\n        : undefined,\n      inline ? style.inline : style.outlined,\n      large ? style.large : small ? style.small : undefined,\n      wide && style.wide,\n      others.className,\n    )}\n  >\n    <Icon headline={large} paragraph={small} level={large ? 1 : 3} value={getIconState({ error, success, warning })} />\n\n    <View className={style.texts}>\n      {title && (\n        <Text action={small} bold headline={large}>\n          {title}\n        </Text>\n      )}\n      {children && (\n        <Text action={!small && !large} small={small}>\n          {children}\n        </Text>\n      )}\n    </View>\n\n    {!inline && !large && onClose && (\n      <Pressable onPress={onClose} testId={others.testId ? `${others.testId}-button-close` : undefined}>\n        <Icon headline={large} paragraph={small} level={large ? 1 : 3} value={ICON.CLOSE} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.any.isRequired,\n  contrast: PropTypes.bool,\n  error: PropTypes.bool,\n  info: PropTypes.bool,\n  inline: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  title: PropTypes.string,\n  warning: PropTypes.bool,\n  wide: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA8C;AAAA;AAAA;AAAA;AAAA;AAE9C,IAAMA,YAAY,GAAG,SAAfA,YAAY;EAAA,IAChBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IAAA,mBACJC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACJC,MAAM;EAAA,oBAET,6BAAC,gBAAI,eACCA,MAAM;IACV,GAAG;IACH,GAAG,wBAAiBV,KAAK,GAAG,QAAQ,GAAGO,OAAO,GAAG,UAAU,GAAG,EAAE,CAAG;IACnE,SAAS,EAAE,IAAAI,eAAM,EACfC,2BAAK,CAACC,YAAY,EAClBd,QAAQ,GACJa,2BAAK,CAACb,QAAQ,GACdC,KAAK,GACLY,2BAAK,CAACZ,KAAK,GACXO,OAAO,GACPK,2BAAK,CAACL,OAAO,GACbF,OAAO,GACPO,2BAAK,CAACP,OAAO,GACbJ,IAAI,GACJW,2BAAK,CAACX,IAAI,GACVa,SAAS,EACbZ,MAAM,GAAGU,2BAAK,CAACV,MAAM,GAAGU,2BAAK,CAACG,QAAQ,EACtCZ,KAAK,GAAGS,2BAAK,CAACT,KAAK,GAAGC,KAAK,GAAGQ,2BAAK,CAACR,KAAK,GAAGU,SAAS,EACrDN,IAAI,IAAII,2BAAK,CAACJ,IAAI,EAClBE,MAAM,CAACM,SAAS;EAChB,iBAEF,6BAAC,gBAAI;IAAC,QAAQ,EAAEb,KAAM;IAAC,SAAS,EAAEC,KAAM;IAAC,KAAK,EAAED,KAAK,GAAG,CAAC,GAAG,CAAE;IAAC,KAAK,EAAE,IAAAc,qBAAY,EAAC;MAAEjB,KAAK,EAALA,KAAK;MAAEK,OAAO,EAAPA,OAAO;MAAEE,OAAO,EAAPA;IAAQ,CAAC;EAAE,EAAG,eAEnH,6BAAC,gBAAI;IAAC,SAAS,EAAEK,2BAAK,CAACM;EAAM,GAC1BZ,KAAK,iBACJ,6BAAC,gBAAI;IAAC,MAAM,EAAEF,KAAM;IAAC,IAAI;IAAC,QAAQ,EAAED;EAAM,GACvCG,KAAK,CAET,EACAR,QAAQ,iBACP,6BAAC,gBAAI;IAAC,MAAM,EAAE,CAACM,KAAK,IAAI,CAACD,KAAM;IAAC,KAAK,EAAEC;EAAM,GAC1CN,QAAQ,CAEZ,CACI,EAEN,CAACI,MAAM,IAAI,CAACC,KAAK,IAAIM,OAAO,iBAC3B,6BAAC,qBAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,MAAM,EAAEC,MAAM,CAACS,MAAM,aAAMT,MAAM,CAACS,MAAM,qBAAkBL;EAAU,gBAC/F,6BAAC,gBAAI;IAAC,QAAQ,EAAEX,KAAM;IAAC,SAAS,EAAEC,KAAM;IAAC,KAAK,EAAED,KAAK,GAAG,CAAC,GAAG,CAAE;IAAC,KAAK,EAAEiB,gBAAI,CAACC;EAAM,EAAG,CAEvF,CACI;AAAA,CACR;AAAC;AAEFxB,YAAY,CAACyB,WAAW,GAAG,wBAAwB;AAEnDzB,YAAY,CAAC0B,SAAS,GAAG;EACvBzB,QAAQ,EAAE0B,kBAAS,CAACC,GAAG,CAACC,UAAU;EAClC3B,QAAQ,EAAEyB,kBAAS,CAACG,IAAI;EACxB3B,KAAK,EAAEwB,kBAAS,CAACG,IAAI;EACrB1B,IAAI,EAAEuB,kBAAS,CAACG,IAAI;EACpBzB,MAAM,EAAEsB,kBAAS,CAACG,IAAI;EACtBxB,KAAK,EAAEqB,kBAAS,CAACG,IAAI;EACrBvB,KAAK,EAAEoB,kBAAS,CAACG,IAAI;EACrBtB,OAAO,EAAEmB,kBAAS,CAACG,IAAI;EACvBrB,KAAK,EAAEkB,kBAAS,CAACI,MAAM;EACvBrB,OAAO,EAAEiB,kBAAS,CAACG,IAAI;EACvBnB,IAAI,EAAEgB,kBAAS,CAACG,IAAI;EACpBlB,OAAO,EAAEe,kBAAS,CAACK;AACrB,CAAC"}

package/build/components/Notification/__tests__/__snapshots__/Notification.test.js.snap

@@ -197,7 +197,7 @@ exports[`component:<Notification> prop:contrast 1`] = `
 
 exports[`component:<Notification> prop:error & inline 1`] = `
 <DocumentFragment>
-  <ui-notification
+  <ui-notification-error
     class="view row notification error inline"
   >
     <ui-icon
@@ -230,13 +230,13 @@ exports[`component:<Notification> prop:error & inline 1`] = `
         Lorem Ipsum...
       </ui-text>
     </ui-view>
-  </ui-notification>
+  </ui-notification-error>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:error & large 1`] = `
 <DocumentFragment>
-  <ui-notification
+  <ui-notification-error
     class="view row notification error outlined large"
   >
     <ui-icon
@@ -269,13 +269,13 @@ exports[`component:<Notification> prop:error & large 1`] = `
         Lorem Ipsum...
       </ui-text>
     </ui-view>
-  </ui-notification>
+  </ui-notification-error>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:error & small 1`] = `
 <DocumentFragment>
-  <ui-notification
+  <ui-notification-error
     class="view row notification error outlined small"
   >
     <ui-icon
@@ -308,13 +308,13 @@ exports[`component:<Notification> prop:error & small 1`] = `
         Lorem Ipsum...
       </ui-text>
     </ui-view>
-  </ui-notification>
+  </ui-notification-error>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:error 1`] = `
 <DocumentFragment>
-  <ui-notification
+  <ui-notification-error
     class="view row notification error outlined"
   >
     <ui-icon
@@ -347,7 +347,7 @@ exports[`component:<Notification> prop:error 1`] = `
         Lorem Ipsum...
       </ui-text>
     </ui-view>
-  </ui-notification>
+  </ui-notification-error>
 </DocumentFragment>
 `;
 
@@ -937,7 +937,7 @@ exports[`component:<Notification> prop:title 2`] = `
 
 exports[`component:<Notification> prop:title 3`] = `
 <DocumentFragment>
-  <ui-notification
+  <ui-notification-error
     class="view row notification error outlined"
   >
     <ui-icon
@@ -975,13 +975,13 @@ exports[`component:<Notification> prop:title 3`] = `
         Lorem Ipsum...
       </ui-text>
     </ui-view>
-  </ui-notification>
+  </ui-notification-error>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:title 4`] = `
 <DocumentFragment>
-  <ui-notification
+  <ui-notification-warning
     class="view row notification warning outlined"
   >
     <ui-icon
@@ -1015,7 +1015,7 @@ exports[`component:<Notification> prop:title 4`] = `
         Lorem Ipsum...
       </ui-text>
     </ui-view>
-  </ui-notification>
+  </ui-notification-warning>
 </DocumentFragment>
 `;
 
@@ -1109,7 +1109,7 @@ exports[`component:<Notification> prop:title 6`] = `
 
 exports[`component:<Notification> prop:warning & inline 1`] = `
 <DocumentFragment>
-  <ui-notification
+  <ui-notification-warning
     class="view row notification warning inline"
   >
     <ui-icon
@@ -1138,13 +1138,13 @@ exports[`component:<Notification> prop:warning & inline 1`] = `
         Lorem Ipsum...
       </ui-text>
     </ui-view>
-  </ui-notification>
+  </ui-notification-warning>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:warning & large 1`] = `
 <DocumentFragment>
-  <ui-notification
+  <ui-notification-warning
     class="view row notification warning outlined large"
   >
     <ui-icon
@@ -1173,13 +1173,13 @@ exports[`component:<Notification> prop:warning & large 1`] = `
         Lorem Ipsum...
       </ui-text>
     </ui-view>
-  </ui-notification>
+  </ui-notification-warning>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:warning & small 1`] = `
 <DocumentFragment>
-  <ui-notification
+  <ui-notification-warning
     class="view row notification warning outlined small"
   >
     <ui-icon
@@ -1208,13 +1208,13 @@ exports[`component:<Notification> prop:warning & small 1`] = `
         Lorem Ipsum...
       </ui-text>
     </ui-view>
-  </ui-notification>
+  </ui-notification-warning>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:warning 1`] = `
 <DocumentFragment>
-  <ui-notification
+  <ui-notification-warning
     class="view row notification warning outlined"
   >
     <ui-icon
@@ -1243,7 +1243,7 @@ exports[`component:<Notification> prop:warning 1`] = `
         Lorem Ipsum...
       </ui-text>
     </ui-view>
-  </ui-notification>
+  </ui-notification-warning>
 </DocumentFragment>
 `;
 

package/build/helpers/index.js

@@ -80,6 +80,17 @@ Object.keys(_isJest).forEach(function (key) {
     }
   });
 });
+var _isPlaywright = require("./isPlaywright");
+Object.keys(_isPlaywright).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _isPlaywright[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _isPlaywright[key];
+    }
+  });
+});
 var _styles = require("./styles");
 Object.keys(_styles).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/build/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/helpers/index.js"],"sourcesContent":["export * from './CustomElement';\nexport * from './getIconState';\nexport * from './getInputDateErrors';\nexport * from './getInputPhoneErrors';\nexport * from './getInputErrors';\nexport * from './getNavigator';\nexport * from './isJest';\nexport * from './styles';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/helpers/index.js"],"sourcesContent":["export * from './CustomElement';\nexport * from './getIconState';\nexport * from './getInputDateErrors';\nexport * from './getInputPhoneErrors';\nexport * from './getInputErrors';\nexport * from './getNavigator';\nexport * from './isJest';\nexport * from './isPlaywright';\nexport * from './styles';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/helpers/isPlaywright.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IS_PLAYWRIGHT = void 0;
+var IS_PLAYWRIGHT = function () {
+  try {
+    return window.IS_PLAYWRIGHT || false;
+  } catch (_unused) {
+    return false;
+  }
+}();
+exports.IS_PLAYWRIGHT = IS_PLAYWRIGHT;
+//# sourceMappingURL=isPlaywright.js.map

package/build/helpers/isPlaywright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isPlaywright.js","names":["IS_PLAYWRIGHT","window"],"sources":["../../src/helpers/isPlaywright.js"],"sourcesContent":["export const IS_PLAYWRIGHT = (() => {\n  try {\n    return window.IS_PLAYWRIGHT || false;\n  } catch {\n    return false;\n  }\n})();\n"],"mappings":";;;;;;AAAO,IAAMA,aAAa,GAAI,YAAM;EAClC,IAAI;IACF,OAAOC,MAAM,CAACD,aAAa,IAAI,KAAK;EACtC,CAAC,CAAC,gBAAM;IACN,OAAO,KAAK;EACd;AACF,CAAC,EAAG;AAAC"}

package/build/primitives/Primitive/Primitive.constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NATIVE_TAGS = exports.COMMON_PROPS = exports.BANNED_JEST_PROPS = void 0;
+exports.TESTING_PROPS = exports.NATIVE_TAGS = exports.COMMON_PROPS = exports.BANNED_JEST_PROPS = void 0;
 var BANNED_JEST_PROPS = ['is', 'role', 'aria-hidden', 'aria-label'];
 exports.BANNED_JEST_PROPS = BANNED_JEST_PROPS;
 var COMMON_PROPS = {
@@ -27,4 +27,6 @@ var NATIVE_TAGS = [
 // <Table>
 'table', 'thead', 'tbody', 'tr', 'th', 'td'];
 exports.NATIVE_TAGS = NATIVE_TAGS;
+var TESTING_PROPS = ['testId'];
+exports.TESTING_PROPS = TESTING_PROPS;
 //# sourceMappingURL=Primitive.constants.js.map

package/build/primitives/Primitive/Primitive.constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"Primitive.constants.js","names":["BANNED_JEST_PROPS","COMMON_PROPS","for","role","testId","NATIVE_TAGS"],"sources":["../../../src/primitives/Primitive/Primitive.constants.js"],"sourcesContent":["const BANNED_JEST_PROPS = ['is', 'role', 'aria-hidden', 'aria-label'];\n\nconst COMMON_PROPS = {\n  for: 'htmlFor',\n  role: 'data-role',\n  testId: 'data-testid',\n};\n\nconst NATIVE_TAGS = [\n  // -- PRIMITIVES -------------------------------------------------------------\n  'iframe',\n  'img',\n  // <Input>\n  'input',\n  'textarea',\n  // <Select>\n  'select',\n  'option',\n  // -- COMPONENTS -------------------------------------------------------------\n  // <Action>\n  'a',\n  // <Form>\n  'form',\n  // <Table>\n  'table',\n  'thead',\n  'tbody',\n  'tr',\n  'th',\n  'td',\n];\n\nexport { BANNED_JEST_PROPS, COMMON_PROPS, NATIVE_TAGS };\n"],"mappings":";;;;;;AAAA,IAAMA,iBAAiB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,CAAC;AAAC;AAEtE,IAAMC,YAAY,GAAG;EACnBC,GAAG,EAAE,SAAS;EACdC,IAAI,EAAE,WAAW;EACjBC,MAAM,EAAE;AACV,CAAC;AAAC;AAEF,IAAMC,WAAW,GAAG;AAClB;AACA,QAAQ,EACR,KAAK;AACL;AACA,OAAO,EACP,UAAU;AACV;AACA,QAAQ,EACR,QAAQ;AACR;AACA;AACA,GAAG;AACH;AACA,MAAM;AACN;AACA,OAAO,EACP,OAAO,EACP,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAI,CACL;AAAC"}
+{"version":3,"file":"Primitive.constants.js","names":["BANNED_JEST_PROPS","COMMON_PROPS","for","role","testId","NATIVE_TAGS","TESTING_PROPS"],"sources":["../../../src/primitives/Primitive/Primitive.constants.js"],"sourcesContent":["const BANNED_JEST_PROPS = ['is', 'role', 'aria-hidden', 'aria-label'];\n\nconst COMMON_PROPS = {\n  for: 'htmlFor',\n  role: 'data-role',\n  testId: 'data-testid',\n};\n\nconst NATIVE_TAGS = [\n  // -- PRIMITIVES -------------------------------------------------------------\n  'iframe',\n  'img',\n  // <Input>\n  'input',\n  'textarea',\n  // <Select>\n  'select',\n  'option',\n  // -- COMPONENTS -------------------------------------------------------------\n  // <Action>\n  'a',\n  // <Form>\n  'form',\n  // <Table>\n  'table',\n  'thead',\n  'tbody',\n  'tr',\n  'th',\n  'td',\n];\n\nconst TESTING_PROPS = ['testId'];\n\nexport { BANNED_JEST_PROPS, COMMON_PROPS, NATIVE_TAGS, TESTING_PROPS };\n"],"mappings":";;;;;;AAAA,IAAMA,iBAAiB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,CAAC;AAAC;AAEtE,IAAMC,YAAY,GAAG;EACnBC,GAAG,EAAE,SAAS;EACdC,IAAI,EAAE,WAAW;EACjBC,MAAM,EAAE;AACV,CAAC;AAAC;AAEF,IAAMC,WAAW,GAAG;AAClB;AACA,QAAQ,EACR,KAAK;AACL;AACA,OAAO,EACP,UAAU;AACV;AACA,QAAQ,EACR,QAAQ;AACR;AACA;AACA,GAAG;AACH;AACA,MAAM;AACN;AACA,OAAO,EACP,OAAO,EACP,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAI,CACL;AAAC;AAEF,IAAMC,aAAa,GAAG,CAAC,QAAQ,CAAC;AAAC"}

package/build/primitives/Primitive/helpers/getProps.js

@@ -14,11 +14,12 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var getProps = function getProps() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var TESTING = _helpers.IS_JEST || _helpers.IS_PLAYWRIGHT;
   var values = {};
   Object.entries(props).filter(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 1),
       key = _ref2[0];
-    return !(_helpers.IS_JEST && _Primitive.BANNED_JEST_PROPS.includes(key));
+    return !(!TESTING && _Primitive.TESTING_PROPS.includes(key) || TESTING && _Primitive.BANNED_JEST_PROPS.includes(key));
   }).forEach(function (_ref3) {
     var _ref4 = _slicedToArray(_ref3, 2),
       key = _ref4[0],

package/build/primitives/Primitive/helpers/getProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"getProps.js","names":["getProps","props","values","Object","entries","filter","key","IS_JEST","BANNED_JEST_PROPS","includes","forEach","value","COMMON_PROPS"],"sources":["../../../../src/primitives/Primitive/helpers/getProps.js"],"sourcesContent":["import { IS_JEST } from '../../../helpers';\nimport { BANNED_JEST_PROPS, COMMON_PROPS } from '../Primitive.constants';\n\nexport const getProps = (props = {}) => {\n  let values = {};\n\n  Object.entries(props)\n    .filter(([key]) => !(IS_JEST && BANNED_JEST_PROPS.includes(key)))\n    .forEach(([key, value]) => (values[COMMON_PROPS[key] || key] = value));\n\n  return values;\n};\n"],"mappings":";;;;;;AAAA;AACA;AAAyE;AAAA;AAAA;AAAA;AAAA;AAAA;AAElE,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,GAAmB;EAAA,IAAfC,KAAK,uEAAG,CAAC,CAAC;EACjC,IAAIC,MAAM,GAAG,CAAC,CAAC;EAEfC,MAAM,CAACC,OAAO,CAACH,KAAK,CAAC,CAClBI,MAAM,CAAC;IAAA;MAAEC,GAAG;IAAA,OAAM,EAAEC,gBAAO,IAAIC,4BAAiB,CAACC,QAAQ,CAACH,GAAG,CAAC,CAAC;EAAA,EAAC,CAChEI,OAAO,CAAC;IAAA;MAAEJ,GAAG;MAAEK,KAAK;IAAA,OAAOT,MAAM,CAACU,uBAAY,CAACN,GAAG,CAAC,IAAIA,GAAG,CAAC,GAAGK,KAAK;EAAA,CAAC,CAAC;EAExE,OAAOT,MAAM;AACf,CAAC;AAAC"}
+{"version":3,"file":"getProps.js","names":["getProps","props","TESTING","IS_JEST","IS_PLAYWRIGHT","values","Object","entries","filter","key","TESTING_PROPS","includes","BANNED_JEST_PROPS","forEach","value","COMMON_PROPS"],"sources":["../../../../src/primitives/Primitive/helpers/getProps.js"],"sourcesContent":["import { IS_JEST, IS_PLAYWRIGHT } from '../../../helpers';\nimport { BANNED_JEST_PROPS, COMMON_PROPS, TESTING_PROPS } from '../Primitive.constants';\n\nexport const getProps = (props = {}) => {\n  const TESTING = IS_JEST || IS_PLAYWRIGHT;\n  let values = {};\n\n  Object.entries(props)\n    .filter(([key]) => !((!TESTING && TESTING_PROPS.includes(key)) || (TESTING && BANNED_JEST_PROPS.includes(key))))\n    .forEach(([key, value]) => (values[COMMON_PROPS[key] || key] = value));\n\n  return values;\n};\n"],"mappings":";;;;;;AAAA;AACA;AAAwF;AAAA;AAAA;AAAA;AAAA;AAAA;AAEjF,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,GAAmB;EAAA,IAAfC,KAAK,uEAAG,CAAC,CAAC;EACjC,IAAMC,OAAO,GAAGC,gBAAO,IAAIC,sBAAa;EACxC,IAAIC,MAAM,GAAG,CAAC,CAAC;EAEfC,MAAM,CAACC,OAAO,CAACN,KAAK,CAAC,CAClBO,MAAM,CAAC;IAAA;MAAEC,GAAG;IAAA,OAAM,EAAG,CAACP,OAAO,IAAIQ,wBAAa,CAACC,QAAQ,CAACF,GAAG,CAAC,IAAMP,OAAO,IAAIU,4BAAiB,CAACD,QAAQ,CAACF,GAAG,CAAE,CAAC;EAAA,EAAC,CAC/GI,OAAO,CAAC;IAAA;MAAEJ,GAAG;MAAEK,KAAK;IAAA,OAAOT,MAAM,CAACU,uBAAY,CAACN,GAAG,CAAC,IAAIA,GAAG,CAAC,GAAGK,KAAK;EAAA,CAAC,CAAC;EAExE,OAAOT,MAAM;AACf,CAAC;AAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "2.0.13",
+  "version": "2.0.15",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",