@mirai/ui 2.0.9 → 2.0.11

package/build/components/Slider/Slider.Item.js

@@ -0,0 +1,55 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Item = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _helpers = require("../../helpers");
+var _primitives = require("../../primitives");
+var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var Item = function Item(_ref) {
+  var height = _ref.height,
+    image = _ref.image,
+    width = _ref.width;
+  var _useState = (0, _react.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    portrait = _useState2[0],
+    setPortrait = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (!image || portrait !== undefined) return;
+    var img = new Image();
+    img.src = image;
+    img.onload = function () {
+      setPortrait(img.width / img.height < 1);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [image]);
+  return /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    tag: "image",
+    className: (0, _helpers.styles)(_SliderModule.default.image, portrait && _SliderModule.default.portrait),
+    style: {
+      backgroundImage: image ? "url(".concat(image, ")") : undefined,
+      height: height,
+      width: width
+    }
+  });
+};
+exports.Item = Item;
+Item.propTypes = {
+  height: _propTypes.default.number,
+  image: _propTypes.default.string,
+  width: _propTypes.default.number
+};
+//# sourceMappingURL=Slider.Item.js.map

package/build/components/Slider/Slider.Item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.Item.js","names":["Item","height","image","width","useState","portrait","setPortrait","useEffect","undefined","img","Image","src","onload","styles","style","backgroundImage","propTypes","PropTypes","number","string"],"sources":["../../../src/components/Slider/Slider.Item.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { View } from '../../primitives';\nimport style from './Slider.module.css';\n\nconst Item = ({ height, image, width }) => {\n  const [portrait, setPortrait] = useState();\n\n  useEffect(() => {\n    if (!image || portrait !== undefined) return;\n\n    const img = new Image();\n    img.src = image;\n    img.onload = () => {\n      setPortrait(img.width / img.height < 1);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [image]);\n\n  return (\n    <View\n      tag=\"image\"\n      className={styles(style.image, portrait && style.portrait)}\n      style={{ backgroundImage: image ? `url(${image})` : undefined, height, width }}\n    />\n  );\n};\n\nItem.propTypes = {\n  height: PropTypes.number,\n  image: PropTypes.string,\n  width: PropTypes.number,\n};\n\nexport { Item };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,IAAI,GAAG,SAAPA,IAAI,OAAiC;EAAA,IAA3BC,MAAM,QAANA,MAAM;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;EAClC,gBAAgC,IAAAC,eAAQ,GAAE;IAAA;IAAnCC,QAAQ;IAAEC,WAAW;EAE5B,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAI,CAACL,KAAK,IAAIG,QAAQ,KAAKG,SAAS,EAAE;IAEtC,IAAMC,GAAG,GAAG,IAAIC,KAAK,EAAE;IACvBD,GAAG,CAACE,GAAG,GAAGT,KAAK;IACfO,GAAG,CAACG,MAAM,GAAG,YAAM;MACjBN,WAAW,CAACG,GAAG,CAACN,KAAK,GAAGM,GAAG,CAACR,MAAM,GAAG,CAAC,CAAC;IACzC,CAAC;IACD;EACF,CAAC,EAAE,CAACC,KAAK,CAAC,CAAC;EAEX,oBACE,6BAAC,gBAAI;IACH,GAAG,EAAC,OAAO;IACX,SAAS,EAAE,IAAAW,eAAM,EAACC,qBAAK,CAACZ,KAAK,EAAEG,QAAQ,IAAIS,qBAAK,CAACT,QAAQ,CAAE;IAC3D,KAAK,EAAE;MAAEU,eAAe,EAAEb,KAAK,iBAAUA,KAAK,SAAMM,SAAS;MAAEP,MAAM,EAANA,MAAM;MAAEE,KAAK,EAALA;IAAM;EAAE,EAC/E;AAEN,CAAC;AAAC;AAEFH,IAAI,CAACgB,SAAS,GAAG;EACff,MAAM,EAAEgB,kBAAS,CAACC,MAAM;EACxBhB,KAAK,EAAEe,kBAAS,CAACE,MAAM;EACvBhB,KAAK,EAAEc,kBAAS,CAACC;AACnB,CAAC"}

package/build/components/Slider/Slider.constants.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SCROLL_DELAY = exports.PRELOAD_IMAGES = void 0;
-var PRELOAD_IMAGES = 2;
+var PRELOAD_IMAGES = 1;
 exports.PRELOAD_IMAGES = PRELOAD_IMAGES;
 var SCROLL_DELAY = 1000;
 exports.SCROLL_DELAY = SCROLL_DELAY;

package/build/components/Slider/Slider.constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.constants.js","names":["PRELOAD_IMAGES","SCROLL_DELAY"],"sources":["../../../src/components/Slider/Slider.constants.js"],"sourcesContent":["const PRELOAD_IMAGES = 2;\n\nconst SCROLL_DELAY = 1000;\n\nexport { PRELOAD_IMAGES, SCROLL_DELAY };\n"],"mappings":";;;;;;AAAA,IAAMA,cAAc,GAAG,CAAC;AAAC;AAEzB,IAAMC,YAAY,GAAG,IAAI;AAAC"}
+{"version":3,"file":"Slider.constants.js","names":["PRELOAD_IMAGES","SCROLL_DELAY"],"sources":["../../../src/components/Slider/Slider.constants.js"],"sourcesContent":["const PRELOAD_IMAGES = 1;\n\nconst SCROLL_DELAY = 1000;\n\nexport { PRELOAD_IMAGES, SCROLL_DELAY };\n"],"mappings":";;;;;;AAAA,IAAMA,cAAc,GAAG,CAAC;AAAC;AAEzB,IAAMC,YAAY,GAAG,IAAI;AAAC"}

package/build/components/Slider/Slider.js

@@ -13,8 +13,9 @@ var _primitives = require("../../primitives");
 var _theme = require("../../theme");
 var _Progress = require("../Progress");
 var _Slider = require("./Slider.constants");
+var _Slider2 = require("./Slider.Item");
 var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
-var _excluded = ["auto", "behavior", "captions", "height", "images", "index", "indicator", "replay", "width", "onChange", "onCounter"];
+var _excluded = ["auto", "behavior", "captions", "height", "images", "index", "indicator", "preloadImages", "width", "onChange", "onCounter"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -49,8 +50,8 @@ var Slider = function Slider(_ref) {
     propIndex = _ref$index === void 0 ? 0 : _ref$index,
     _ref$indicator = _ref.indicator,
     indicator = _ref$indicator === void 0 ? false : _ref$indicator,
-    _ref$replay = _ref.replay,
-    replay = _ref$replay === void 0 ? true : _ref$replay,
+    _ref$preloadImages = _ref.preloadImages,
+    preloadImages = _ref$preloadImages === void 0 ? _Slider.PRELOAD_IMAGES : _ref$preloadImages,
     _ref$width = _ref.width,
     propWidth = _ref$width === void 0 ? 320 : _ref$width,
     _ref$onChange = _ref.onChange,
@@ -71,6 +72,10 @@ var Slider = function Slider(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     index = _useState6[0],
     setIndex = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    replay = _useState8[0],
+    setReplay = _useState8[1];
   (0, _react.useEffect)(function () {
     if (auto) interval = setInterval(function () {
       return setIndex(index < images.length - 1 ? index + 1 : 0);
@@ -87,6 +92,7 @@ var Slider = function Slider(_ref) {
     timeout = setTimeout(function () {
       return setDisabledScroll(false);
     }, _Slider.SCROLL_DELAY);
+    if (!replay && index + 1 === images.length) setReplay(true);
     onChange(index);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [index]);
@@ -140,14 +146,10 @@ var Slider = function Slider(_ref) {
       key: imageIndex,
       tag: "images",
       className: _SliderModule.default.item
-    }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
-      tag: "image",
-      className: _SliderModule.default.image,
-      style: {
-        backgroundImage: replay || imageIndex >= Math.abs(index) - _Slider.PRELOAD_IMAGES && imageIndex <= Math.abs(index) + _Slider.PRELOAD_IMAGES ? "url(".concat(image, ")") : undefined,
-        height: height,
-        width: width
-      }
+    }, /*#__PURE__*/_react.default.createElement(_Slider2.Item, {
+      height: height,
+      width: width,
+      image: replay || imageIndex >= Math.abs(index) - preloadImages && imageIndex <= Math.abs(index) + preloadImages ? image : undefined
     }), captions[imageIndex] && /*#__PURE__*/_react.default.createElement(_primitives.View, {
       tag: "image-caption",
       className: _SliderModule.default.caption
@@ -188,6 +190,7 @@ Slider.propTypes = {
   images: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
   index: _propTypes.default.number,
   indicator: _propTypes.default.bool,
+  preloadImages: _propTypes.default.number,
   replay: _propTypes.default.bool,
   width: _propTypes.default.number.isRequired,
   onChange: _propTypes.default.func,

package/build/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","behavior","captions","height","propHeight","images","index","propIndex","indicator","replay","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","SCROLL_DELAY","handleIndex","nextIndex","Math","abs","defaultDirection","handleScroll","x","round","Theme","getDirection","DIRECTION_TYPE","LEFT","hasImages","isEnd","undefined","styles","style","slider","className","button","hide","first","ICON","REPLAY","icon","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","overlay","text","second","RIGHT","counter","reverse","PHOTO_LIBRARY","progress","visible","displayName","propTypes","PropTypes","bool","string","arrayOf","number","isRequired","func"],"sources":["../../../src/components/Slider/Slider.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, ScrollView, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { Progress } from '../Progress';\nimport { PRELOAD_IMAGES, SCROLL_DELAY } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n  auto = false,\n  behavior = 'smooth',\n  captions = [],\n  height: propHeight = 240,\n  images = [],\n  index: propIndex = 0,\n  indicator = false,\n  replay = true,\n  width: propWidth = 320,\n  onChange = () => {},\n  onCounter,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const [disabledScroll, setDisabledScroll] = useState(true);\n  const [focus, setFocus] = useState(false);\n  const [index, setIndex] = useState(propIndex);\n\n  useEffect(() => {\n    if (auto) interval = setInterval(() => setIndex(index < images.length - 1 ? index + 1 : 0), 2000);\n    return () => clearInterval(interval);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [auto, index]);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => setDisabledScroll(false), SCROLL_DELAY);\n\n    onChange(index);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [index]);\n\n  const height = propHeight;\n\n  const width = propWidth;\n\n  const handleIndex = (nextIndex) => {\n    setDisabledScroll(true);\n    setIndex(Math.abs(nextIndex) === images.length ? 0 : Math.abs(nextIndex) * (defaultDirection ? 1 : -1));\n  };\n\n  const handleScroll = ({ x = 0 } = {}) => {\n    const nextIndex = x < width ? 0 : Math.round(x / width);\n\n    if (nextIndex !== index) setIndex(nextIndex);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const hasImages = images.length > 1;\n  const isEnd = Math.abs(index) >= images.length - 1;\n\n  return (\n    <View\n      {...others}\n      tag=\"slider\"\n      onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n      onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n      className={styles(style.slider, others.className)}\n      style={{ ...others.style, width }}\n    >\n      {hasImages && (\n        <Pressable\n          onPress={() => handleIndex(index - 1)}\n          className={styles(\n            style.button,\n            ((defaultDirection ? index <= 0 : replay ? false : isEnd) || (isDesktop && !focus)) && style.hide,\n            style.first,\n          )}\n        >\n          <Icon value={replay && !defaultDirection && isEnd ? ICON.REPLAY : ICON.LEFT} className={style.icon} />\n        </Pressable>\n      )}\n\n      <ScrollView\n        behavior={behavior}\n        horizontal\n        scrollEventThrottle={SCROLL_DELAY}\n        scrollTo={index * Math.floor(width)}\n        snap\n        width={width}\n        onScroll={disabledScroll ? undefined : handleScroll}\n        className={style.scrollView}\n      >\n        {images.map((image, imageIndex) => (\n          <View key={imageIndex} tag=\"images\" className={style.item}>\n            <View\n              tag=\"image\"\n              className={style.image}\n              style={{\n                backgroundImage:\n                  replay ||\n                  (imageIndex >= Math.abs(index) - PRELOAD_IMAGES && imageIndex <= Math.abs(index) + PRELOAD_IMAGES)\n                    ? `url(${image})`\n                    : undefined,\n                height,\n                width,\n              }}\n            />\n            {captions[imageIndex] && (\n              <View tag=\"image-caption\" className={style.caption}>\n                <Text bold small className={[style.overlay, style.text]}>\n                  {captions[imageIndex]}\n                </Text>\n              </View>\n            )}\n          </View>\n        ))}\n      </ScrollView>\n\n      {hasImages && (\n        <Pressable\n          onPress={() => handleIndex(index + 1)}\n          className={styles(\n            style.button,\n            ((defaultDirection ? (replay ? false : isEnd) : index === 0) || (isDesktop && !focus)) && style.hide,\n            style.second,\n          )}\n        >\n          <Icon\n            value={replay && defaultDirection && index === images.length - 1 ? ICON.REPLAY : ICON.RIGHT}\n            className={style.icon}\n          />\n        </Pressable>\n      )}\n\n      {hasImages && onCounter && (\n        <Pressable\n          onPress={onCounter}\n          className={styles(style.overlay, style.counter, !defaultDirection && style.reverse)}\n        >\n          <Icon action value={ICON.PHOTO_LIBRARY} />\n          <Text bold small>\n            {images.length}\n          </Text>\n        </Pressable>\n      )}\n\n      {indicator && (\n        <Progress\n          value={(index * 100) / (images.length - 1)}\n          className={styles(style.progress, index > 0 && style.visible)}\n        />\n      )}\n    </View>\n  );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n  auto: PropTypes.bool,\n  behavior: PropTypes.string,\n  captions: PropTypes.arrayOf(PropTypes.string),\n  height: PropTypes.number.isRequired,\n  images: PropTypes.arrayOf(PropTypes.string).isRequired,\n  index: PropTypes.number,\n  indicator: PropTypes.bool,\n  replay: PropTypes.bool,\n  width: PropTypes.number.isRequired,\n  onChange: PropTypes.func,\n  onCounter: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","behavior","captions","height","propHeight","images","index","propIndex","indicator","preloadImages","PRELOAD_IMAGES","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","replay","setReplay","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","SCROLL_DELAY","handleIndex","nextIndex","Math","abs","defaultDirection","handleScroll","x","round","Theme","getDirection","DIRECTION_TYPE","LEFT","hasImages","isEnd","undefined","styles","style","slider","className","button","hide","first","ICON","REPLAY","icon","floor","scrollView","map","image","imageIndex","item","caption","overlay","text","second","RIGHT","counter","reverse","PHOTO_LIBRARY","progress","visible","displayName","propTypes","PropTypes","bool","string","arrayOf","number","isRequired","func"],"sources":["../../../src/components/Slider/Slider.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, ScrollView, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { Progress } from '../Progress';\nimport { PRELOAD_IMAGES, SCROLL_DELAY } from './Slider.constants';\nimport { Item } from './Slider.Item';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n  auto = false,\n  behavior = 'smooth',\n  captions = [],\n  height: propHeight = 240,\n  images = [],\n  index: propIndex = 0,\n  indicator = false,\n  preloadImages = PRELOAD_IMAGES,\n  width: propWidth = 320,\n  onChange = () => {},\n  onCounter,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const [disabledScroll, setDisabledScroll] = useState(true);\n  const [focus, setFocus] = useState(false);\n  const [index, setIndex] = useState(propIndex);\n  const [replay, setReplay] = useState(false);\n\n  useEffect(() => {\n    if (auto) interval = setInterval(() => setIndex(index < images.length - 1 ? index + 1 : 0), 2000);\n    return () => clearInterval(interval);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [auto, index]);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => setDisabledScroll(false), SCROLL_DELAY);\n\n    if (!replay && index + 1 === images.length) setReplay(true);\n\n    onChange(index);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [index]);\n\n  const height = propHeight;\n\n  const width = propWidth;\n\n  const handleIndex = (nextIndex) => {\n    setDisabledScroll(true);\n    setIndex(Math.abs(nextIndex) === images.length ? 0 : Math.abs(nextIndex) * (defaultDirection ? 1 : -1));\n  };\n\n  const handleScroll = ({ x = 0 } = {}) => {\n    const nextIndex = x < width ? 0 : Math.round(x / width);\n\n    if (nextIndex !== index) setIndex(nextIndex);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const hasImages = images.length > 1;\n  const isEnd = Math.abs(index) >= images.length - 1;\n\n  return (\n    <View\n      {...others}\n      tag=\"slider\"\n      onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n      onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n      className={styles(style.slider, others.className)}\n      style={{ ...others.style, width }}\n    >\n      {hasImages && (\n        <Pressable\n          onPress={() => handleIndex(index - 1)}\n          className={styles(\n            style.button,\n            ((defaultDirection ? index <= 0 : replay ? false : isEnd) || (isDesktop && !focus)) && style.hide,\n            style.first,\n          )}\n        >\n          <Icon value={replay && !defaultDirection && isEnd ? ICON.REPLAY : ICON.LEFT} className={style.icon} />\n        </Pressable>\n      )}\n\n      <ScrollView\n        behavior={behavior}\n        horizontal\n        scrollEventThrottle={SCROLL_DELAY}\n        scrollTo={index * Math.floor(width)}\n        snap\n        width={width}\n        onScroll={disabledScroll ? undefined : handleScroll}\n        className={style.scrollView}\n      >\n        {images.map((image, imageIndex) => (\n          <View key={imageIndex} tag=\"images\" className={style.item}>\n            <Item\n              {...{ height, width }}\n              image={\n                replay ||\n                (imageIndex >= Math.abs(index) - preloadImages && imageIndex <= Math.abs(index) + preloadImages)\n                  ? image\n                  : undefined\n              }\n            />\n            {captions[imageIndex] && (\n              <View tag=\"image-caption\" className={style.caption}>\n                <Text bold small className={[style.overlay, style.text]}>\n                  {captions[imageIndex]}\n                </Text>\n              </View>\n            )}\n          </View>\n        ))}\n      </ScrollView>\n\n      {hasImages && (\n        <Pressable\n          onPress={() => handleIndex(index + 1)}\n          className={styles(\n            style.button,\n            ((defaultDirection ? (replay ? false : isEnd) : index === 0) || (isDesktop && !focus)) && style.hide,\n            style.second,\n          )}\n        >\n          <Icon\n            value={replay && defaultDirection && index === images.length - 1 ? ICON.REPLAY : ICON.RIGHT}\n            className={style.icon}\n          />\n        </Pressable>\n      )}\n\n      {hasImages && onCounter && (\n        <Pressable\n          onPress={onCounter}\n          className={styles(style.overlay, style.counter, !defaultDirection && style.reverse)}\n        >\n          <Icon action value={ICON.PHOTO_LIBRARY} />\n          <Text bold small>\n            {images.length}\n          </Text>\n        </Pressable>\n      )}\n\n      {indicator && (\n        <Progress\n          value={(index * 100) / (images.length - 1)}\n          className={styles(style.progress, index > 0 && style.visible)}\n        />\n      )}\n    </View>\n  );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n  auto: PropTypes.bool,\n  behavior: PropTypes.string,\n  captions: PropTypes.arrayOf(PropTypes.string),\n  height: PropTypes.number.isRequired,\n  images: PropTypes.arrayOf(PropTypes.string).isRequired,\n  index: PropTypes.number,\n  indicator: PropTypes.bool,\n  preloadImages: PropTypes.number,\n  replay: PropTypes.bool,\n  width: PropTypes.number.isRequired,\n  onChange: PropTypes.func,\n  onCounter: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":"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"}

package/build/components/Slider/Slider.module.css

@@ -1,5 +1,6 @@
 .slider {
   align-items: center;
+  background-color: var(--mirai-ui-content-border);
   justify-content: center;
   overflow: hidden;
   position: relative;
@@ -41,13 +42,17 @@
 }
 
 .item .image {
-  background-color: var(--mirai-ui-content-border);
   background-position: center;
+  background-repeat: no-repeat;
   background-size: cover;
   height: 100%;
   width: 100%;
 }
 
+.item .image.portrait {
+  background-size: contain;
+}
+
 .item .caption {
   align-items: center;
   bottom: var(--mirai-ui-space-S);

package/build/components/Slider/Slider.stories.js

@@ -38,12 +38,11 @@ Story.args = {
   behavior: 'smooth',
   captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],
   height: 208,
-  images: ['https://picsum.photos/seed/@soyjavi/1024/768', 'https://picsum.photos/seed/@jose/1024/768', 'https://picsum.photos/seed/@mario1/1024/768', 'https://picsum.photos/seed/@victor/1024/768', 'https://picsum.photos/seed/@svet/1024/768', 'https://picsum.photos/seed/@mario2/1024/768', 'https://picsum.photos/seed/1/1024/768', 'https://picsum.photos/seed/2/1024/768', 'https://picsum.photos/seed/3/1024/768', 'https://picsum.photos/seed/4/1024/768', 'https://picsum.photos/seed/5/1024/768', 'https://picsum.photos/seed/6/1024/768', 'https://picsum.photos/seed/7/1024/768', 'https://picsum.photos/seed/8/1024/768', 'https://picsum.photos/seed/9/1024/768', 'https://picsum.photos/seed/10/1024/768', 'https://picsum.photos/seed/11/1024/768', 'https://picsum.photos/seed/12/1024/768'],
+  images: ['https://picsum.photos/seed/@soyjavi/1024/768', 'https://picsum.photos/seed/@jose/768/1024', 'https://picsum.photos/seed/@mario1/1024/768', 'https://picsum.photos/seed/@victor/1024/768', 'https://picsum.photos/seed/@svet/1024/768', 'https://picsum.photos/seed/@mario2/1024/768', 'https://picsum.photos/seed/1/1024/768', 'https://picsum.photos/seed/2/1024/768', 'https://picsum.photos/seed/3/1024/768', 'https://picsum.photos/seed/4/1024/768', 'https://picsum.photos/seed/5/1024/768', 'https://picsum.photos/seed/6/1024/768', 'https://picsum.photos/seed/7/1024/768', 'https://picsum.photos/seed/8/1024/768', 'https://picsum.photos/seed/9/1024/768', 'https://picsum.photos/seed/10/1024/768', 'https://picsum.photos/seed/11/1024/768', 'https://picsum.photos/seed/12/1024/768'],
   fullScreen: false,
-  thumbnails: ['https://picsum.photos/seed/@soyjavi/128/128', 'https://picsum.photos/seed/@jose/128/128', 'https://picsum.photos/seed/@mario1/128/128', 'https://picsum.photos/seed/@victor/128/128', 'https://picsum.photos/seed/@svet/128/128', 'https://picsum.photos/seed/@mario2/128/128', 'https://picsum.photos/seed/1/128/128', 'https://picsum.photos/seed/2/128/128', 'https://picsum.photos/seed/3/128/128', 'https://picsum.photos/seed/4/128/128', 'https://picsum.photos/seed/5/128/128', 'https://picsum.photos/seed/6/128/128', 'https://picsum.photos/seed/7/128/128', 'https://picsum.photos/seed/8/128/128', 'https://picsum.photos/seed/9/128/128', 'https://picsum.photos/seed/10/128/128', 'https://picsum.photos/seed/11/128/128', 'https://picsum.photos/seed/12/128/128'],
   index: 0,
   indicator: true,
-  replay: true,
+  preloadImages: 1,
   width: 408,
   // inherited properties
   testId: 'test-story',

package/build/components/Slider/Slider.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.stories.js","names":["title","Story","props","params","console","log","storyName","args","auto","behavior","captions","undefined","height","images","fullScreen","thumbnails","index","indicator","replay","width","testId","style","borderRadius","argTypes"],"sources":["../../../src/components/Slider/Slider.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Slider } from './Slider';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Slider\n    {...props}\n    onChange={(...params) => console.log('onChange', ...params)}\n    onCounter={(...params) => console.log('onCounter', ...params)}\n  />\n);\n\nStory.storyName = 'Slider';\n\nStory.args = {\n  auto: false,\n  behavior: 'smooth',\n  captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],\n  height: 208,\n  images: [\n    'https://picsum.photos/seed/@soyjavi/1024/768',\n    'https://picsum.photos/seed/@jose/1024/768',\n    'https://picsum.photos/seed/@mario1/1024/768',\n    'https://picsum.photos/seed/@victor/1024/768',\n    'https://picsum.photos/seed/@svet/1024/768',\n    'https://picsum.photos/seed/@mario2/1024/768',\n    'https://picsum.photos/seed/1/1024/768',\n    'https://picsum.photos/seed/2/1024/768',\n    'https://picsum.photos/seed/3/1024/768',\n    'https://picsum.photos/seed/4/1024/768',\n    'https://picsum.photos/seed/5/1024/768',\n    'https://picsum.photos/seed/6/1024/768',\n    'https://picsum.photos/seed/7/1024/768',\n    'https://picsum.photos/seed/8/1024/768',\n    'https://picsum.photos/seed/9/1024/768',\n    'https://picsum.photos/seed/10/1024/768',\n    'https://picsum.photos/seed/11/1024/768',\n    'https://picsum.photos/seed/12/1024/768',\n  ],\n  fullScreen: false,\n  thumbnails: [\n    'https://picsum.photos/seed/@soyjavi/128/128',\n    'https://picsum.photos/seed/@jose/128/128',\n    'https://picsum.photos/seed/@mario1/128/128',\n    'https://picsum.photos/seed/@victor/128/128',\n    'https://picsum.photos/seed/@svet/128/128',\n    'https://picsum.photos/seed/@mario2/128/128',\n    'https://picsum.photos/seed/1/128/128',\n    'https://picsum.photos/seed/2/128/128',\n    'https://picsum.photos/seed/3/128/128',\n    'https://picsum.photos/seed/4/128/128',\n    'https://picsum.photos/seed/5/128/128',\n    'https://picsum.photos/seed/6/128/128',\n    'https://picsum.photos/seed/7/128/128',\n    'https://picsum.photos/seed/8/128/128',\n    'https://picsum.photos/seed/9/128/128',\n    'https://picsum.photos/seed/10/128/128',\n    'https://picsum.photos/seed/11/128/128',\n    'https://picsum.photos/seed/12/128/128',\n  ],\n  index: 0,\n  indicator: true,\n  replay: true,\n  width: 408,\n  // inherited properties\n  testId: 'test-story',\n  style: { borderRadius: 2 },\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,cAAM,eACDA,KAAK;IACT,QAAQ,EAAE;MAAA;MAAA,kCAAIC,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,YAAAC,OAAO,EAACC,GAAG,kBAAC,UAAU,SAAKF,MAAM,EAAC;IAAA,CAAC;IAC5D,SAAS,EAAE;MAAA;MAAA,mCAAIA,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,WAAW,SAAKF,MAAM,EAAC;IAAA;EAAC,GAC9D;AAAA,CACH;AAAC;AAEFF,KAAK,CAACK,SAAS,GAAG,QAAQ;AAE1BL,KAAK,CAACM,IAAI,GAAG;EACXC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,QAAQ;EAClBC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAEC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;EACjEC,MAAM,EAAE,GAAG;EACXC,MAAM,EAAE,CACN,8CAA8C,EAC9C,2CAA2C,EAC3C,6CAA6C,EAC7C,6CAA6C,EAC7C,2CAA2C,EAC3C,6CAA6C,EAC7C,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,wCAAwC,EACxC,wCAAwC,EACxC,wCAAwC,CACzC;EACDC,UAAU,EAAE,KAAK;EACjBC,UAAU,EAAE,CACV,6CAA6C,EAC7C,0CAA0C,EAC1C,4CAA4C,EAC5C,4CAA4C,EAC5C,0CAA0C,EAC1C,4CAA4C,EAC5C,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,CACxC;EACDC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,IAAI;EACfC,MAAM,EAAE,IAAI;EACZC,KAAK,EAAE,GAAG;EACV;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAAE;AAC3B,CAAC;AAEDrB,KAAK,CAACsB,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Slider.stories.js","names":["title","Story","props","params","console","log","storyName","args","auto","behavior","captions","undefined","height","images","fullScreen","index","indicator","preloadImages","width","testId","style","borderRadius","argTypes"],"sources":["../../../src/components/Slider/Slider.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Slider } from './Slider';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Slider\n    {...props}\n    onChange={(...params) => console.log('onChange', ...params)}\n    onCounter={(...params) => console.log('onCounter', ...params)}\n  />\n);\n\nStory.storyName = 'Slider';\n\nStory.args = {\n  auto: false,\n  behavior: 'smooth',\n  captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],\n  height: 208,\n  images: [\n    'https://picsum.photos/seed/@soyjavi/1024/768',\n    'https://picsum.photos/seed/@jose/768/1024',\n    'https://picsum.photos/seed/@mario1/1024/768',\n    'https://picsum.photos/seed/@victor/1024/768',\n    'https://picsum.photos/seed/@svet/1024/768',\n    'https://picsum.photos/seed/@mario2/1024/768',\n    'https://picsum.photos/seed/1/1024/768',\n    'https://picsum.photos/seed/2/1024/768',\n    'https://picsum.photos/seed/3/1024/768',\n    'https://picsum.photos/seed/4/1024/768',\n    'https://picsum.photos/seed/5/1024/768',\n    'https://picsum.photos/seed/6/1024/768',\n    'https://picsum.photos/seed/7/1024/768',\n    'https://picsum.photos/seed/8/1024/768',\n    'https://picsum.photos/seed/9/1024/768',\n    'https://picsum.photos/seed/10/1024/768',\n    'https://picsum.photos/seed/11/1024/768',\n    'https://picsum.photos/seed/12/1024/768',\n  ],\n  fullScreen: false,\n  index: 0,\n  indicator: true,\n  preloadImages: 1,\n  width: 408,\n  // inherited properties\n  testId: 'test-story',\n  style: { borderRadius: 2 },\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,cAAM,eACDA,KAAK;IACT,QAAQ,EAAE;MAAA;MAAA,kCAAIC,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,YAAAC,OAAO,EAACC,GAAG,kBAAC,UAAU,SAAKF,MAAM,EAAC;IAAA,CAAC;IAC5D,SAAS,EAAE;MAAA;MAAA,mCAAIA,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,WAAW,SAAKF,MAAM,EAAC;IAAA;EAAC,GAC9D;AAAA,CACH;AAAC;AAEFF,KAAK,CAACK,SAAS,GAAG,QAAQ;AAE1BL,KAAK,CAACM,IAAI,GAAG;EACXC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,QAAQ;EAClBC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAEC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;EACjEC,MAAM,EAAE,GAAG;EACXC,MAAM,EAAE,CACN,8CAA8C,EAC9C,2CAA2C,EAC3C,6CAA6C,EAC7C,6CAA6C,EAC7C,2CAA2C,EAC3C,6CAA6C,EAC7C,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,wCAAwC,EACxC,wCAAwC,EACxC,wCAAwC,CACzC;EACDC,UAAU,EAAE,KAAK;EACjBC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,IAAI;EACfC,aAAa,EAAE,CAAC;EAChBC,KAAK,EAAE,GAAG;EACV;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAAE;AAC3B,CAAC;AAEDpB,KAAK,CAACqB,QAAQ,GAAG,CAAC,CAAC"}

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

@@ -57,7 +57,7 @@ exports[`component:<Slider> inherit:className 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -65,7 +65,7 @@ exports[`component:<Slider> inherit:className 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -73,7 +73,7 @@ exports[`component:<Slider> inherit:className 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -81,7 +81,7 @@ exports[`component:<Slider> inherit:className 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
     </ui-scrollview>
@@ -172,7 +172,7 @@ exports[`component:<Slider> prop:auto 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -180,7 +180,7 @@ exports[`component:<Slider> prop:auto 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -188,7 +188,7 @@ exports[`component:<Slider> prop:auto 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -196,7 +196,7 @@ exports[`component:<Slider> prop:auto 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
     </ui-scrollview>
@@ -287,7 +287,7 @@ exports[`component:<Slider> prop:behavior 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -295,7 +295,7 @@ exports[`component:<Slider> prop:behavior 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -303,7 +303,7 @@ exports[`component:<Slider> prop:behavior 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -311,7 +311,7 @@ exports[`component:<Slider> prop:behavior 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
     </ui-scrollview>
@@ -420,7 +420,7 @@ exports[`component:<Slider> prop:captions 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -428,7 +428,7 @@ exports[`component:<Slider> prop:captions 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
         <ui-image-caption
           class="view caption"
@@ -445,7 +445,7 @@ exports[`component:<Slider> prop:captions 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
         <ui-image-caption
           class="view caption"
@@ -462,7 +462,7 @@ exports[`component:<Slider> prop:captions 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
         <ui-image-caption
           class="view caption"
@@ -546,7 +546,7 @@ exports[`component:<Slider> prop:index 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -554,7 +554,7 @@ exports[`component:<Slider> prop:index 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -562,7 +562,7 @@ exports[`component:<Slider> prop:index 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -677,7 +677,7 @@ exports[`component:<Slider> prop:indicator 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -685,7 +685,7 @@ exports[`component:<Slider> prop:indicator 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -693,7 +693,7 @@ exports[`component:<Slider> prop:indicator 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -701,7 +701,7 @@ exports[`component:<Slider> prop:indicator 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
     </ui-scrollview>
@@ -800,7 +800,7 @@ exports[`component:<Slider> prop:onCounter 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -808,7 +808,7 @@ exports[`component:<Slider> prop:onCounter 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -816,7 +816,7 @@ exports[`component:<Slider> prop:onCounter 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -824,7 +824,7 @@ exports[`component:<Slider> prop:onCounter 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
     </ui-scrollview>
@@ -889,7 +889,7 @@ exports[`component:<Slider> prop:onCounter 1`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Slider> prop:replay (false) 1`] = `
+exports[`component:<Slider> prop:preloadImages 1`] = `
 <DocumentFragment>
   <ui-slider
     class="view slider"
@@ -1061,7 +1061,7 @@ exports[`component:<Slider> renders 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -1069,7 +1069,7 @@ exports[`component:<Slider> renders 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -1077,7 +1077,7 @@ exports[`component:<Slider> renders 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -1085,7 +1085,7 @@ exports[`component:<Slider> renders 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
     </ui-scrollview>
@@ -1177,7 +1177,7 @@ exports[`component:<Slider> testId 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -1185,7 +1185,7 @@ exports[`component:<Slider> testId 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -1193,7 +1193,7 @@ exports[`component:<Slider> testId 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
       <ui-images
@@ -1201,7 +1201,7 @@ exports[`component:<Slider> testId 1`] = `
       >
         <ui-image
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
+          style="height: 230px; width: 360px;"
         />
       </ui-images>
     </ui-scrollview>

package/build/helpers/CustomElement.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CustomElement = void 0;
+var _getNavigator2 = require("./getNavigator");
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
@@ -17,12 +18,13 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-var userAgent = navigator.userAgent.toLowerCase();
-var isSafari = userAgent.includes('safari') && !userAgent.includes('chrome') && !userAgent.includes('android');
+var _getNavigator = (0, _getNavigator2.getNavigator)(),
+  safari = _getNavigator.safari;
 var CustomElement = function CustomElement(component) {
   var TagElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : HTMLElement;
   var tag = arguments.length > 2 ? arguments[2] : undefined;
-  var ClassElement = isSafari ? HTMLElement : TagElement;
+  if (!component || !tag) return;
+  var ClassElement = safari ? HTMLElement : TagElement;
   return customElements.define(component, /*#__PURE__*/function (_ClassElement) {
     _inherits(_class, _ClassElement);
     var _super = _createSuper(_class);

package/build/helpers/CustomElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomElement.js","names":["userAgent","navigator","toLowerCase","isSafari","includes","CustomElement","component","TagElement","HTMLElement","tag","ClassElement","customElements","define","extends"],"sources":["../../src/helpers/CustomElement.js"],"sourcesContent":["const userAgent = navigator.userAgent.toLowerCase();\nconst isSafari = userAgent.includes('safari') && !userAgent.includes('chrome') && !userAgent.includes('android');\n\nexport const CustomElement = (component, TagElement = HTMLElement, tag) => {\n  const ClassElement = isSafari ? HTMLElement : TagElement;\n\n  return customElements.define(component, class extends ClassElement {}, { extends: tag });\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAMA,SAAS,GAAGC,SAAS,CAACD,SAAS,CAACE,WAAW,EAAE;AACnD,IAAMC,QAAQ,GAAGH,SAAS,CAACI,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAACJ,SAAS,CAACI,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAACJ,SAAS,CAACI,QAAQ,CAAC,SAAS,CAAC;AAEzG,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,SAAS,EAAoC;EAAA,IAAlCC,UAAU,uEAAGC,WAAW;EAAA,IAAEC,GAAG;EACpE,IAAMC,YAAY,GAAGP,QAAQ,GAAGK,WAAW,GAAGD,UAAU;EAExD,OAAOI,cAAc,CAACC,MAAM,CAACN,SAAS;IAAA;IAAA;IAAA;MAAA;MAAA;IAAA;IAAA;EAAA,EAAgBI,YAAY,GAAK;IAAEG,OAAO,EAAEJ;EAAI,CAAC,CAAC;AAC1F,CAAC;AAAC"}
+{"version":3,"file":"CustomElement.js","names":["getNavigator","safari","CustomElement","component","TagElement","HTMLElement","tag","ClassElement","customElements","define","extends"],"sources":["../../src/helpers/CustomElement.js"],"sourcesContent":["import { getNavigator } from './getNavigator';\n\nconst { safari } = getNavigator();\n\nexport const CustomElement = (component, TagElement = HTMLElement, tag) => {\n  if (!component || !tag) return;\n\n  const ClassElement = safari ? HTMLElement : TagElement;\n\n  return customElements.define(component, class extends ClassElement {}, { extends: tag });\n};\n"],"mappings":";;;;;;;AAAA;AAA8C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE9C,oBAAmB,IAAAA,2BAAY,GAAE;EAAzBC,MAAM,iBAANA,MAAM;AAEP,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,SAAS,EAAoC;EAAA,IAAlCC,UAAU,uEAAGC,WAAW;EAAA,IAAEC,GAAG;EACpE,IAAI,CAACH,SAAS,IAAI,CAACG,GAAG,EAAE;EAExB,IAAMC,YAAY,GAAGN,MAAM,GAAGI,WAAW,GAAGD,UAAU;EAEtD,OAAOI,cAAc,CAACC,MAAM,CAACN,SAAS;IAAA;IAAA;IAAA;MAAA;MAAA;IAAA;IAAA;EAAA,EAAgBI,YAAY,GAAK;IAAEG,OAAO,EAAEJ;EAAI,CAAC,CAAC;AAC1F,CAAC;AAAC"}

package/build/{hooks/helpers → helpers}/getNavigator.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getNavigator = void 0;
 var MATCH_SAFARI = /^((?!chrome|android).)*safari/i;
-var MATCH_MOBILE = /^Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile/i;
-var FB_IN_APP = /fb_iab|fban/;
-var PINTEREST_IN_APP = /pinterest/;
+var MATCH_MOBILE = /(Mobile|Tablet|iPad|iPod|iPhone|Android|BlackBerry|IEMobile|Silk|Kindle|KF[A-Z]{2,4}|Samsung|Nexus|Nook|webOS|PlayBook)/i;
 var getNavigator = function getNavigator() {
   var _ref = typeof navigator !== 'undefined' ? navigator : {},
     _ref$userAgent = _ref.userAgent,
@@ -19,7 +17,6 @@ var getNavigator = function getNavigator() {
     // browsers
     chrome: !safari && Boolean(ua.indexOf('chrome') !== -1),
     firefox: Boolean(ua.indexOf('firefox') !== -1),
-    inApp: FB_IN_APP.test(ua) || PINTEREST_IN_APP.test(ua),
     mobile: Boolean(ua.match(MATCH_MOBILE)),
     safari: safari,
     // touch

package/build/helpers/getNavigator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getNavigator.js","names":["MATCH_SAFARI","MATCH_MOBILE","getNavigator","navigator","userAgent","ua","toLowerCase","safari","Boolean","match","chrome","indexOf","firefox","mobile","touch","test"],"sources":["../../src/helpers/getNavigator.js"],"sourcesContent":["const MATCH_SAFARI = /^((?!chrome|android).)*safari/i;\nconst MATCH_MOBILE =\n  /(Mobile|Tablet|iPad|iPod|iPhone|Android|BlackBerry|IEMobile|Silk|Kindle|KF[A-Z]{2,4}|Samsung|Nexus|Nook|webOS|PlayBook)/i;\n\nexport const getNavigator = () => {\n  const { userAgent = '' } = typeof navigator !== 'undefined' ? navigator : {};\n\n  const ua = userAgent.toLowerCase();\n  const safari = Boolean(ua.match(MATCH_SAFARI));\n\n  return {\n    userAgent,\n    // browsers\n    chrome: !safari && Boolean(ua.indexOf('chrome') !== -1),\n    firefox: Boolean(ua.indexOf('firefox') !== -1),\n    mobile: Boolean(ua.match(MATCH_MOBILE)),\n    safari,\n    // touch\n    touch: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(userAgent),\n  };\n};\n"],"mappings":";;;;;;AAAA,IAAMA,YAAY,GAAG,gCAAgC;AACrD,IAAMC,YAAY,GAChB,0HAA0H;AAErH,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;EAChC,WAA2B,OAAOC,SAAS,KAAK,WAAW,GAAGA,SAAS,GAAG,CAAC,CAAC;IAAA,sBAApEC,SAAS;IAATA,SAAS,+BAAG,EAAE;EAEtB,IAAMC,EAAE,GAAGD,SAAS,CAACE,WAAW,EAAE;EAClC,IAAMC,MAAM,GAAGC,OAAO,CAACH,EAAE,CAACI,KAAK,CAACT,YAAY,CAAC,CAAC;EAE9C,OAAO;IACLI,SAAS,EAATA,SAAS;IACT;IACAM,MAAM,EAAE,CAACH,MAAM,IAAIC,OAAO,CAACH,EAAE,CAACM,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IACvDC,OAAO,EAAEJ,OAAO,CAACH,EAAE,CAACM,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9CE,MAAM,EAAEL,OAAO,CAACH,EAAE,CAACI,KAAK,CAACR,YAAY,CAAC,CAAC;IACvCM,MAAM,EAANA,MAAM;IACN;IACAO,KAAK,EAAE,oFAAoF,CAACC,IAAI,CAACX,SAAS;EAC5G,CAAC;AACH,CAAC;AAAC"}

package/build/helpers/index.js

@@ -58,6 +58,17 @@ Object.keys(_getInputErrors).forEach(function (key) {
     }
   });
 });
+var _getNavigator = require("./getNavigator");
+Object.keys(_getNavigator).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getNavigator[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _getNavigator[key];
+    }
+  });
+});
 var _isJest = require("./isJest");
 Object.keys(_isJest).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 './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"}
+{"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"}

package/build/hooks/helpers/index.js

@@ -3,17 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _getNavigator = require("./getNavigator");
-Object.keys(_getNavigator).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _getNavigator[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _getNavigator[key];
-    }
-  });
-});
 var _getResolution = require("./getResolution");
 Object.keys(_getResolution).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/build/hooks/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/hooks/helpers/index.js"],"sourcesContent":["export * from './getNavigator';\nexport * from './getResolution';\nexport * from './sanitizePx';\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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/hooks/helpers/index.js"],"sourcesContent":["export * from './getResolution';\nexport * from './sanitizePx';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/hooks/useDevice.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDevice = void 0;
 var _react = require("react");
+var _helpers = require("../helpers");
 var _theme = require("../theme");
-var _helpers = require("./helpers");
+var _helpers2 = require("./helpers");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -20,13 +21,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var useDevice = function useDevice() {
-  var _useState = (0, _react.useState)((0, _helpers.getResolution)()),
+  var _useState = (0, _react.useState)((0, _helpers2.getResolution)()),
     _useState2 = _slicedToArray(_useState, 2),
     resolution = _useState2[0],
     setResolution = _useState2[1];
   (0, _react.useEffect)(function () {
     var handleResize = function handleResize() {
-      return setResolution((0, _helpers.getResolution)());
+      return setResolution((0, _helpers2.getResolution)());
     };
     window.addEventListener('resize', handleResize);
     return function () {
@@ -40,8 +41,8 @@ var useDevice = function useDevice() {
       _Theme$get$breakpoint2 = _Theme$get.breakpointM,
       breakpointM = _Theme$get$breakpoint2 === void 0 ? '820px' : _Theme$get$breakpoint2;
     var isLandscape = resolution.width >= resolution.height;
-    var isMobile = resolution.width <= (0, _helpers.sanitizePx)(breakpointS);
-    var isTablet = !isMobile && resolution.width <= (0, _helpers.sanitizePx)(breakpointM);
+    var isMobile = resolution.width <= (0, _helpers2.sanitizePx)(breakpointS);
+    var isTablet = !isMobile && resolution.width <= (0, _helpers2.sanitizePx)(breakpointM);
     var navigator = (0, _helpers.getNavigator)();
     return _objectSpread(_objectSpread(_objectSpread({}, resolution), navigator), {}, {
       isLandscape: isLandscape,

package/build/hooks/useDevice.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDevice.js","names":["useDevice","useState","getResolution","resolution","setResolution","useEffect","handleResize","window","addEventListener","removeEventListener","useMemo","Theme","get","breakpointS","breakpointM","isLandscape","width","height","isMobile","sanitizePx","isTablet","navigator","getNavigator","isPortrait","isDesktop"],"sources":["../../src/hooks/useDevice.js"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { Theme } from '../theme';\nimport { getResolution, getNavigator, sanitizePx } from './helpers';\n\nexport const useDevice = () => {\n  const [resolution, setResolution] = useState(getResolution());\n\n  useEffect(() => {\n    const handleResize = () => setResolution(getResolution());\n\n    window.addEventListener('resize', handleResize);\n\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return useMemo(() => {\n    const { breakpointS = '480px', breakpointM = '820px' } = Theme.get();\n    const isLandscape = resolution.width >= resolution.height;\n    const isMobile = resolution.width <= sanitizePx(breakpointS);\n    const isTablet = !isMobile && resolution.width <= sanitizePx(breakpointM);\n    const navigator = getNavigator();\n\n    return {\n      ...resolution,\n      ...navigator,\n      isLandscape,\n      isPortrait: !isLandscape,\n      isMobile,\n      isTablet,\n      isDesktop: !isMobile && !isTablet,\n    };\n  }, [resolution]);\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7D,IAAMA,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC7B,gBAAoC,IAAAC,eAAQ,EAAC,IAAAC,sBAAa,GAAE,CAAC;IAAA;IAAtDC,UAAU;IAAEC,aAAa;EAEhC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAMC,YAAY,GAAG,SAAfA,YAAY;MAAA,OAASF,aAAa,CAAC,IAAAF,sBAAa,GAAE,CAAC;IAAA;IAEzDK,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAE/C,OAAO;MAAA,OAAMC,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEH,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAAI,cAAO,EAAC,YAAM;IACnB,iBAAyDC,YAAK,CAACC,GAAG,EAAE;MAAA,mCAA5DC,WAAW;MAAXA,WAAW,sCAAG,OAAO;MAAA,oCAAEC,WAAW;MAAXA,WAAW,uCAAG,OAAO;IACpD,IAAMC,WAAW,GAAGZ,UAAU,CAACa,KAAK,IAAIb,UAAU,CAACc,MAAM;IACzD,IAAMC,QAAQ,GAAGf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACN,WAAW,CAAC;IAC5D,IAAMO,QAAQ,GAAG,CAACF,QAAQ,IAAIf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACL,WAAW,CAAC;IACzE,IAAMO,SAAS,GAAG,IAAAC,qBAAY,GAAE;IAEhC,qDACKnB,UAAU,GACVkB,SAAS;MACZN,WAAW,EAAXA,WAAW;MACXQ,UAAU,EAAE,CAACR,WAAW;MACxBG,QAAQ,EAARA,QAAQ;MACRE,QAAQ,EAARA,QAAQ;MACRI,SAAS,EAAE,CAACN,QAAQ,IAAI,CAACE;IAAQ;EAErC,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAC;AAClB,CAAC;AAAC"}
+{"version":3,"file":"useDevice.js","names":["useDevice","useState","getResolution","resolution","setResolution","useEffect","handleResize","window","addEventListener","removeEventListener","useMemo","Theme","get","breakpointS","breakpointM","isLandscape","width","height","isMobile","sanitizePx","isTablet","navigator","getNavigator","isPortrait","isDesktop"],"sources":["../../src/hooks/useDevice.js"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { getNavigator } from '../helpers';\nimport { Theme } from '../theme';\nimport { getResolution, sanitizePx } from './helpers';\n\nexport const useDevice = () => {\n  const [resolution, setResolution] = useState(getResolution());\n\n  useEffect(() => {\n    const handleResize = () => setResolution(getResolution());\n\n    window.addEventListener('resize', handleResize);\n\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return useMemo(() => {\n    const { breakpointS = '480px', breakpointM = '820px' } = Theme.get();\n    const isLandscape = resolution.width >= resolution.height;\n    const isMobile = resolution.width <= sanitizePx(breakpointS);\n    const isTablet = !isMobile && resolution.width <= sanitizePx(breakpointM);\n    const navigator = getNavigator();\n\n    return {\n      ...resolution,\n      ...navigator,\n      isLandscape,\n      isPortrait: !isLandscape,\n      isMobile,\n      isTablet,\n      isDesktop: !isMobile && !isTablet,\n    };\n  }, [resolution]);\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE/C,IAAMA,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC7B,gBAAoC,IAAAC,eAAQ,EAAC,IAAAC,uBAAa,GAAE,CAAC;IAAA;IAAtDC,UAAU;IAAEC,aAAa;EAEhC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAMC,YAAY,GAAG,SAAfA,YAAY;MAAA,OAASF,aAAa,CAAC,IAAAF,uBAAa,GAAE,CAAC;IAAA;IAEzDK,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAE/C,OAAO;MAAA,OAAMC,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEH,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAAI,cAAO,EAAC,YAAM;IACnB,iBAAyDC,YAAK,CAACC,GAAG,EAAE;MAAA,mCAA5DC,WAAW;MAAXA,WAAW,sCAAG,OAAO;MAAA,oCAAEC,WAAW;MAAXA,WAAW,uCAAG,OAAO;IACpD,IAAMC,WAAW,GAAGZ,UAAU,CAACa,KAAK,IAAIb,UAAU,CAACc,MAAM;IACzD,IAAMC,QAAQ,GAAGf,UAAU,CAACa,KAAK,IAAI,IAAAG,oBAAU,EAACN,WAAW,CAAC;IAC5D,IAAMO,QAAQ,GAAG,CAACF,QAAQ,IAAIf,UAAU,CAACa,KAAK,IAAI,IAAAG,oBAAU,EAACL,WAAW,CAAC;IACzE,IAAMO,SAAS,GAAG,IAAAC,qBAAY,GAAE;IAEhC,qDACKnB,UAAU,GACVkB,SAAS;MACZN,WAAW,EAAXA,WAAW;MACXQ,UAAU,EAAE,CAACR,WAAW;MACxBG,QAAQ,EAARA,QAAQ;MACRE,QAAQ,EAARA,QAAQ;MACRI,SAAS,EAAE,CAACN,QAAQ,IAAI,CAACE;IAAQ;EAErC,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAC;AAClB,CAAC;AAAC"}

package/package.json

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

package/build/hooks/helpers/getNavigator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getNavigator.js","names":["MATCH_SAFARI","MATCH_MOBILE","FB_IN_APP","PINTEREST_IN_APP","getNavigator","navigator","userAgent","ua","toLowerCase","safari","Boolean","match","chrome","indexOf","firefox","inApp","test","mobile","touch"],"sources":["../../../src/hooks/helpers/getNavigator.js"],"sourcesContent":["const MATCH_SAFARI = /^((?!chrome|android).)*safari/i;\nconst MATCH_MOBILE = /^Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile/i;\nconst FB_IN_APP = /fb_iab|fban/;\nconst PINTEREST_IN_APP = /pinterest/;\n\nexport const getNavigator = () => {\n  const { userAgent = '' } = typeof navigator !== 'undefined' ? navigator : {};\n\n  const ua = userAgent.toLowerCase();\n  const safari = Boolean(ua.match(MATCH_SAFARI));\n\n  return {\n    userAgent,\n    // browsers\n    chrome: !safari && Boolean(ua.indexOf('chrome') !== -1),\n    firefox: Boolean(ua.indexOf('firefox') !== -1),\n    inApp: FB_IN_APP.test(ua) || PINTEREST_IN_APP.test(ua),\n    mobile: Boolean(ua.match(MATCH_MOBILE)),\n    safari,\n    // touch\n    touch: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(userAgent),\n  };\n};\n"],"mappings":";;;;;;AAAA,IAAMA,YAAY,GAAG,gCAAgC;AACrD,IAAMC,YAAY,GAAG,qDAAqD;AAC1E,IAAMC,SAAS,GAAG,aAAa;AAC/B,IAAMC,gBAAgB,GAAG,WAAW;AAE7B,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;EAChC,WAA2B,OAAOC,SAAS,KAAK,WAAW,GAAGA,SAAS,GAAG,CAAC,CAAC;IAAA,sBAApEC,SAAS;IAATA,SAAS,+BAAG,EAAE;EAEtB,IAAMC,EAAE,GAAGD,SAAS,CAACE,WAAW,EAAE;EAClC,IAAMC,MAAM,GAAGC,OAAO,CAACH,EAAE,CAACI,KAAK,CAACX,YAAY,CAAC,CAAC;EAE9C,OAAO;IACLM,SAAS,EAATA,SAAS;IACT;IACAM,MAAM,EAAE,CAACH,MAAM,IAAIC,OAAO,CAACH,EAAE,CAACM,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IACvDC,OAAO,EAAEJ,OAAO,CAACH,EAAE,CAACM,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9CE,KAAK,EAAEb,SAAS,CAACc,IAAI,CAACT,EAAE,CAAC,IAAIJ,gBAAgB,CAACa,IAAI,CAACT,EAAE,CAAC;IACtDU,MAAM,EAAEP,OAAO,CAACH,EAAE,CAACI,KAAK,CAACV,YAAY,CAAC,CAAC;IACvCQ,MAAM,EAANA,MAAM;IACN;IACAS,KAAK,EAAE,oFAAoF,CAACF,IAAI,CAACV,SAAS;EAC5G,CAAC;AACH,CAAC;AAAC"}