@mirai/ui 1.0.245 → 1.0.246

package/README.md

@@ -42,9 +42,11 @@ const MyComponent = () => (
 
 This primitive returns a span with an icon based on a mandatory string prop `name`.
 
+- `accent:boolean` use theme's accent color
 - `action:boolean` modifying font-size
 - `headline:boolean` modifying font-size (default headline:3)
 - `level:number` assign the level of heading (1, 2, 3 or 4)
+- `lighten:boolean` use theme's content-light color
 - `paragraph:boolean` modifying font-size
 - `small:boolean` modifying font-size
 - `value:func` Enum value
@@ -1048,6 +1050,7 @@ const MyComponent = (props) => {
 A Slider component receiving the following props:
 
 - `auto:bool` if you want auto slide feature (default is false).
+- `behavior:string` type of scroll animation
 - `captions:arrayOf:string` if you want show a determinate caption for a determinate image.
 - `fullScreen:boolean` if you want start in fullScreen mode.
 - `height:number` Height of component (required).

package/build/components/Slider/Slider.js

@@ -13,7 +13,7 @@ var _primitives = require("../../primitives");
 var _helpers2 = require("./helpers");
 var _Slider = require("./Slider.constants");
 var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
-var _excluded = ["auto", "captions", "height", "images", "index", "width", "onChange", "onCounter"];
+var _excluded = ["auto", "behavior", "captions", "height", "images", "index", "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 }; }
@@ -36,6 +36,8 @@ var timeout;
 var Slider = function Slider(_ref) {
   var _ref$auto = _ref.auto,
     auto = _ref$auto === void 0 ? false : _ref$auto,
+    _ref$behavior = _ref.behavior,
+    behavior = _ref$behavior === void 0 ? 'smooth' : _ref$behavior,
     _ref$captions = _ref.captions,
     captions = _ref$captions === void 0 ? [] : _ref$captions,
     _ref$height = _ref.height,
@@ -52,7 +54,7 @@ var Slider = function Slider(_ref) {
     others = _objectWithoutProperties(_ref, _excluded);
   var _useDevice = (0, _hooks.useDevice)(),
     isDesktop = _useDevice.isDesktop;
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(true),
     _useState2 = _slicedToArray(_useState, 2),
     disabledScroll = _useState2[0],
     setDisabledScroll = _useState2[1];
@@ -77,15 +79,18 @@ var Slider = function Slider(_ref) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   (0, _react.useEffect)(function () {
     clearTimeout(timeout);
-    setDisabledScroll(true);
     timeout = setTimeout(function () {
       return setDisabledScroll(false);
-    }, (0, _helpers2.getMotionExpand)() * 2);
+    }, (0, _helpers2.getMotionExpand)() * 3);
     onChange(index);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [index]);
   var height = propHeight;
   var width = propWidth;
+  var handleIndex = function handleIndex(nextIndex) {
+    setDisabledScroll(true);
+    setIndex(nextIndex);
+  };
   var handleScroll = function handleScroll() {
     var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       x = _ref2.x;
@@ -106,12 +111,13 @@ var Slider = function Slider(_ref) {
     })
   }), /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     onPress: function onPress() {
-      return setIndex(index - 1);
+      return handleIndex(index - 1);
     },
     className: (0, _helpers.styles)(_SliderModule.default.button, (index <= 0 || isDesktop && !focus) && _SliderModule.default.hide, _SliderModule.default.back)
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: _primitives.ICON.LEFT
   })), /*#__PURE__*/_react.default.createElement(_primitives.ScrollView, {
+    behavior: behavior,
     horizontal: true,
     scrollTo: index * Math.floor(width),
     snap: true,
@@ -148,7 +154,7 @@ var Slider = function Slider(_ref) {
     small: true
   }, images.length))), /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     onPress: function onPress() {
-      return setIndex(index + 1);
+      return handleIndex(index + 1);
     },
     className: (0, _helpers.styles)(_SliderModule.default.button, (index >= images.length - 1 || isDesktop && !focus) && _SliderModule.default.hide && _SliderModule.default.hide, _SliderModule.default.forward)
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
@@ -159,6 +165,7 @@ exports.Slider = Slider;
 Slider.displayName = 'Component:Slider';
 Slider.propTypes = {
   auto: _propTypes.default.bool,
+  behavior: _propTypes.default.string,
   captions: _propTypes.default.arrayOf(_propTypes.default.string),
   height: _propTypes.default.number.isRequired,
   images: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","captions","height","propHeight","images","index","propIndex","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","getMotionExpand","handleScroll","x","nextIndex","Math","round","undefined","styles","style","container","className","button","hide","back","ICON","LEFT","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","overlay","text","counter","PHOTO_LIBRARY","forward","RIGHT","displayName","propTypes","PropTypes","bool","arrayOf","string","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 { getMotionExpand } from './helpers';\nimport { PRELOAD_IMAGES } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n  auto = false,\n  captions = [],\n  height: propHeight = 240,\n  images = [],\n  index: propIndex = 0,\n  width: propWidth = 320,\n  onChange = () => {},\n  onCounter,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const [disabledScroll, setDisabledScroll] = useState(false);\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    setDisabledScroll(true);\n    timeout = setTimeout(() => setDisabledScroll(false), getMotionExpand() * 2);\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 handleScroll = ({ x } = {}) => {\n    const nextIndex = x < width ? 0 : Math.round(x / width);\n\n    if (nextIndex !== index) setIndex(nextIndex);\n  };\n\n  return (\n    <View\n      {...others}\n      role=\"slider\"\n      onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n      onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n      className={styles(style.container, others.className)}\n      style={{ ...others.style, width }}\n    >\n      <Pressable\n        onPress={() => setIndex(index - 1)}\n        className={styles(style.button, (index <= 0 || (isDesktop && !focus)) && style.hide, style.back)}\n      >\n        <Icon value={ICON.LEFT} />\n      </Pressable>\n\n      <ScrollView\n        horizontal\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} className={style.item}>\n            <View\n              role=\"image\"\n              className={style.image}\n              style={{\n                backgroundImage:\n                  imageIndex >= index - PRELOAD_IMAGES && imageIndex <= index + PRELOAD_IMAGES\n                    ? `url(${image})`\n                    : undefined,\n                height,\n                width,\n              }}\n            />\n            {captions[imageIndex] && (\n              <View className={style.caption}>\n                <Text bold small className={[style.overlay, style.text]}>\n                  {captions[imageIndex]}\n                </Text>\n              </View>\n            )}\n          </View>\n        ))}\n\n        {images.length > 1 && onCounter && (\n          <Pressable className={[style.overlay, style.counter]} onPress={onCounter}>\n            <Icon action value={ICON.PHOTO_LIBRARY} />\n            <Text bold small>\n              {images.length}\n            </Text>\n          </Pressable>\n        )}\n      </ScrollView>\n\n      <Pressable\n        onPress={() => setIndex(index + 1)}\n        className={styles(\n          style.button,\n          (index >= images.length - 1 || (isDesktop && !focus)) && style.hide && style.hide,\n          style.forward,\n        )}\n      >\n        <Icon value={ICON.RIGHT} />\n      </Pressable>\n    </View>\n  );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n  auto: PropTypes.bool,\n  captions: PropTypes.arrayOf(PropTypes.string),\n  height: PropTypes.number.isRequired,\n  images: PropTypes.arrayOf(PropTypes.string).isRequired,\n  index: PropTypes.number,\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","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","getMotionExpand","handleIndex","nextIndex","handleScroll","x","Math","round","undefined","styles","style","container","className","button","hide","back","ICON","LEFT","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","overlay","text","counter","PHOTO_LIBRARY","forward","RIGHT","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 { getMotionExpand } from './helpers';\nimport { PRELOAD_IMAGES } 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  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), getMotionExpand() * 3);\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(nextIndex);\n  };\n\n  const handleScroll = ({ x } = {}) => {\n    const nextIndex = x < width ? 0 : Math.round(x / width);\n\n    if (nextIndex !== index) setIndex(nextIndex);\n  };\n\n  return (\n    <View\n      {...others}\n      role=\"slider\"\n      onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n      onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n      className={styles(style.container, others.className)}\n      style={{ ...others.style, width }}\n    >\n      <Pressable\n        onPress={() => handleIndex(index - 1)}\n        className={styles(style.button, (index <= 0 || (isDesktop && !focus)) && style.hide, style.back)}\n      >\n        <Icon value={ICON.LEFT} />\n      </Pressable>\n\n      <ScrollView\n        behavior={behavior}\n        horizontal\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} className={style.item}>\n            <View\n              role=\"image\"\n              className={style.image}\n              style={{\n                backgroundImage:\n                  imageIndex >= index - PRELOAD_IMAGES && imageIndex <= index + PRELOAD_IMAGES\n                    ? `url(${image})`\n                    : undefined,\n                height,\n                width,\n              }}\n            />\n            {captions[imageIndex] && (\n              <View className={style.caption}>\n                <Text bold small className={[style.overlay, style.text]}>\n                  {captions[imageIndex]}\n                </Text>\n              </View>\n            )}\n          </View>\n        ))}\n\n        {images.length > 1 && onCounter && (\n          <Pressable className={[style.overlay, style.counter]} onPress={onCounter}>\n            <Icon action value={ICON.PHOTO_LIBRARY} />\n            <Text bold small>\n              {images.length}\n            </Text>\n          </Pressable>\n        )}\n      </ScrollView>\n\n      <Pressable\n        onPress={() => handleIndex(index + 1)}\n        className={styles(\n          style.button,\n          (index >= images.length - 1 || (isDesktop && !focus)) && style.hide && style.hide,\n          style.forward,\n        )}\n      >\n        <Icon value={ICON.RIGHT} />\n      </Pressable>\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  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.stories.js

@@ -35,13 +35,14 @@ exports.Story = Story;
 Story.storyName = 'Slider';
 Story.args = {
   auto: false,
+  behavior: 'smooth',
   captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],
-  height: 200,
-  index: 1,
+  height: 208,
+  index: 2,
   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'],
   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'],
-  width: 320,
+  width: 408,
   // inherited properties
   testId: 'test-story',
   style: {

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","captions","undefined","height","index","images","fullScreen","thumbnails","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  captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],\n  height: 200,\n  index: 1,\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  width: 320,\n  // inherited properties\n  testId: 'test-story',\n  style: { borderRadius: 16 },\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,CAAC,MAAM,EAAE,MAAM,EAAEC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;EACjEC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,CAAC;EACRC,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,GAAG;EACV;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAAG;AAC5B,CAAC;AAEDlB,KAAK,CAACmB,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Slider.stories.js","names":["title","Story","props","params","console","log","storyName","args","auto","behavior","captions","undefined","height","index","images","fullScreen","thumbnails","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  index: 2,\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  width: 408,\n  // inherited properties\n  testId: 'test-story',\n  style: { borderRadius: 16 },\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,KAAK,EAAE,CAAC;EACRC,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,GAAG;EACV;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAAG;AAC5B,CAAC;AAEDnB,KAAK,CAACoB,QAAQ,GAAG,CAAC,CAAC"}

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

@@ -226,6 +226,119 @@ exports[`component:<Slider> prop:auto 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Slider> prop:behavior 1`] = `
+<DocumentFragment>
+  <div
+    class="view container"
+    style="width: 360px;"
+  >
+    <div
+      class="pressable button hide back"
+    >
+      <span
+        class="icon headline-3"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="scrollview snap horizontal notIndicator scrollView"
+      style="width: 360px;"
+    >
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="height: 230px; width: 360px;"
+        />
+      </div>
+    </div>
+    <div
+      class="pressable button hide forward"
+    >
+      <span
+        class="icon headline-3"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<Slider> prop:captions 1`] = `
 <DocumentFragment>
   <div

package/build/components/Table/Table.js

@@ -114,9 +114,6 @@ var Table = function Table(_ref) {
       updatedSelected = selected.includes(rowId) ? selected.filter(function (selectedId) {
         return selectedId !== rowId;
       }) : [].concat(_toConsumableArray(selected), [rowId]);
-      console.log({
-        selected: selected
-      });
     } else {
       updatedSelected = (0, _helpers2.exists)(row, selected) ? selected.filter(function (item) {
         return !(0, _helpers2.exists)(row, [item]);

package/build/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":["Table","dataSource","propFilter","filter","inline","id","l10n","pagination","schema","search","selected","sort","propSort","store","onPress","onScroll","onSelect","others","useState","setFilter","limit","setLimit","setSort","useEffect","nextFilter","storeFilter","Storage","get","length","set","handleAddFilter","item","handleRemoveFilter","index","splice","handleHeadSelect","row","event","next","select","map","handleScroll","percentY","PAGINATION_DISPATCHER","handleSelect","updatedSelected","rowId","includes","selectedId","console","log","exists","handleSort","field","undefined","role","testId","fields","Object","keys","filterFields","React","createElement","ScrollView","className","styles","style","container","outlined","table","useMemo","displayName","propTypes","PropTypes","arrayOf","shape","bool","L10N_SHAPE","number","isRequired","string","func"],"sources":["../../../src/components/Table/Table.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { Fragment, useEffect, useMemo, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive, ScrollView } from '../../primitives';\nimport { exists, select, Storage } from './helpers';\nimport { L10N_SHAPE, PAGINATION_DISPATCHER } from './Table.constants';\nimport { Filter } from './Table.Filter';\nimport style from './Table.module.css';\nimport { Row } from './Table.Row';\n\nexport const Table = ({\n  dataSource = [],\n  filter: propFilter,\n  inline = true,\n  id = false,\n  l10n,\n  pagination,\n  schema,\n  search,\n  selected = [],\n  sort: propSort = true,\n  store,\n  onPress,\n  onScroll = () => {},\n  onSelect,\n  ...others\n}) => {\n  const [filter, setFilter] = useState([]);\n  const [limit, setLimit] = useState(pagination);\n  const [sort, setSort] = useState({});\n\n  useEffect(() => {\n    let nextFilter = propFilter;\n    if (store) {\n      const storeFilter = Storage.get(`${store}:filter`);\n      if (storeFilter?.length) nextFilter = storeFilter;\n    }\n\n    setFilter(nextFilter);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (!store) return;\n    Storage.set(`${store}:filter`, filter);\n  }, [filter, store]);\n\n  const handleAddFilter = (item) => {\n    setFilter([...filter, item]);\n  };\n\n  const handleRemoveFilter = (index) => {\n    filter?.splice(index, 1);\n    setFilter([...filter]);\n  };\n\n  const handleHeadSelect = (row, event) => {\n    const next = select({ dataSource, filter, schema, search, selected, sort });\n    onSelect(selected.length !== next.length ? (id ? next.map(({ id }) => id) : next) : [], event);\n  };\n\n  const handleScroll = (event) => {\n    if (pagination && event.percentY > PAGINATION_DISPATCHER && limit < dataSource.length) setLimit(limit + pagination);\n    onScroll(event);\n  };\n\n  const handleSelect = (row, event) => {\n    let updatedSelected;\n\n    if (id) {\n      const rowId = row.id;\n      updatedSelected = selected.includes(rowId)\n        ? selected.filter((selectedId) => selectedId !== rowId)\n        : [...selected, rowId];\n      console.log({ selected });\n    } else {\n      updatedSelected = exists(row, selected) ? selected.filter((item) => !exists(row, [item])) : [...selected, row];\n    }\n\n    onSelect(updatedSelected, event);\n  };\n\n  const handleSort = (field) => {\n    setSort(sort[field] === undefined ? { [field]: true } : sort[field] ? { [field]: false } : {});\n  };\n\n  const { role = 'table', testId } = others;\n  const fields = Object.keys(schema);\n  const { length: filterFields } = filter?.filter(({ field } = {}) => fields.includes(field)) || {};\n\n  return React.createElement(\n    ScrollView,\n    {\n      ...others,\n      role,\n      onScroll: handleScroll,\n      className: styles(style.container, !inline && style.outlined, others.className),\n    },\n    <>\n      {filterFields > 0 && (\n        <Filter filter={filter} schema={schema} role=\"table-filter\" onRemove={(index) => handleRemoveFilter(index)} />\n      )}\n      <Primitive tag=\"table\" className={style.table}>\n        <Primitive tag=\"thead\">\n          <Row\n            checked={dataSource.length > 0 ? selected.length === dataSource.length : undefined}\n            indeterminate={dataSource.length > 0 && selected.length > 0}\n            l10n={l10n}\n            schema={schema}\n            sort={sort}\n            onFilter={propFilter ? handleAddFilter : undefined}\n            onSelect={onSelect ? handleHeadSelect : undefined}\n            onSort={propSort ? handleSort : undefined}\n            testId={testId ? `${testId}-head` : undefined}\n          />\n        </Primitive>\n        <Primitive tag=\"tbody\">\n          {useMemo(\n            () => select({ dataSource, filter, limit, schema, search, selected, sort }),\n            [dataSource, filter, limit, schema, search, selected, sort],\n          ).map((row, index) => (\n            <Row\n              checked={exists(row, selected)}\n              dataSource={row}\n              key={index}\n              schema={schema}\n              onPress={onPress}\n              onSelect={onSelect ? handleSelect : undefined}\n              testId={testId ? `${testId}-${index}` : undefined}\n            />\n          ))}\n        </Primitive>\n      </Primitive>\n    </>,\n  );\n};\n\nTable.displayName = 'Component:Table';\n\nTable.propTypes = {\n  dataSource: PropTypes.arrayOf(PropTypes.shape({})),\n  filter: PropTypes.arrayOf(PropTypes.shape({})),\n  inline: PropTypes.bool,\n  id: PropTypes.bool,\n  l10n: L10N_SHAPE,\n  pagination: PropTypes.number,\n  schema: PropTypes.shape({}).isRequired,\n  search: PropTypes.string,\n  selected: PropTypes.arrayOf(PropTypes.shape()),\n  sort: PropTypes.bool,\n  store: PropTypes.string,\n  onPress: PropTypes.func,\n  onScroll: PropTypes.func,\n  onSelect: PropTypes.func,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Table.js","names":["Table","dataSource","propFilter","filter","inline","id","l10n","pagination","schema","search","selected","sort","propSort","store","onPress","onScroll","onSelect","others","useState","setFilter","limit","setLimit","setSort","useEffect","nextFilter","storeFilter","Storage","get","length","set","handleAddFilter","item","handleRemoveFilter","index","splice","handleHeadSelect","row","event","next","select","map","handleScroll","percentY","PAGINATION_DISPATCHER","handleSelect","updatedSelected","rowId","includes","selectedId","exists","handleSort","field","undefined","role","testId","fields","Object","keys","filterFields","React","createElement","ScrollView","className","styles","style","container","outlined","table","useMemo","displayName","propTypes","PropTypes","arrayOf","shape","bool","L10N_SHAPE","number","isRequired","string","func"],"sources":["../../../src/components/Table/Table.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { Fragment, useEffect, useMemo, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive, ScrollView } from '../../primitives';\nimport { exists, select, Storage } from './helpers';\nimport { L10N_SHAPE, PAGINATION_DISPATCHER } from './Table.constants';\nimport { Filter } from './Table.Filter';\nimport style from './Table.module.css';\nimport { Row } from './Table.Row';\n\nexport const Table = ({\n  dataSource = [],\n  filter: propFilter,\n  inline = true,\n  id = false,\n  l10n,\n  pagination,\n  schema,\n  search,\n  selected = [],\n  sort: propSort = true,\n  store,\n  onPress,\n  onScroll = () => {},\n  onSelect,\n  ...others\n}) => {\n  const [filter, setFilter] = useState([]);\n  const [limit, setLimit] = useState(pagination);\n  const [sort, setSort] = useState({});\n\n  useEffect(() => {\n    let nextFilter = propFilter;\n    if (store) {\n      const storeFilter = Storage.get(`${store}:filter`);\n      if (storeFilter?.length) nextFilter = storeFilter;\n    }\n\n    setFilter(nextFilter);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (!store) return;\n    Storage.set(`${store}:filter`, filter);\n  }, [filter, store]);\n\n  const handleAddFilter = (item) => {\n    setFilter([...filter, item]);\n  };\n\n  const handleRemoveFilter = (index) => {\n    filter?.splice(index, 1);\n    setFilter([...filter]);\n  };\n\n  const handleHeadSelect = (row, event) => {\n    const next = select({ dataSource, filter, schema, search, selected, sort });\n    onSelect(selected.length !== next.length ? (id ? next.map(({ id }) => id) : next) : [], event);\n  };\n\n  const handleScroll = (event) => {\n    if (pagination && event.percentY > PAGINATION_DISPATCHER && limit < dataSource.length) setLimit(limit + pagination);\n    onScroll(event);\n  };\n\n  const handleSelect = (row, event) => {\n    let updatedSelected;\n\n    if (id) {\n      const rowId = row.id;\n      updatedSelected = selected.includes(rowId)\n        ? selected.filter((selectedId) => selectedId !== rowId)\n        : [...selected, rowId];\n    } else {\n      updatedSelected = exists(row, selected) ? selected.filter((item) => !exists(row, [item])) : [...selected, row];\n    }\n\n    onSelect(updatedSelected, event);\n  };\n\n  const handleSort = (field) => {\n    setSort(sort[field] === undefined ? { [field]: true } : sort[field] ? { [field]: false } : {});\n  };\n\n  const { role = 'table', testId } = others;\n  const fields = Object.keys(schema);\n  const { length: filterFields } = filter?.filter(({ field } = {}) => fields.includes(field)) || {};\n\n  return React.createElement(\n    ScrollView,\n    {\n      ...others,\n      role,\n      onScroll: handleScroll,\n      className: styles(style.container, !inline && style.outlined, others.className),\n    },\n    <>\n      {filterFields > 0 && (\n        <Filter filter={filter} schema={schema} role=\"table-filter\" onRemove={(index) => handleRemoveFilter(index)} />\n      )}\n      <Primitive tag=\"table\" className={style.table}>\n        <Primitive tag=\"thead\">\n          <Row\n            checked={dataSource.length > 0 ? selected.length === dataSource.length : undefined}\n            indeterminate={dataSource.length > 0 && selected.length > 0}\n            l10n={l10n}\n            schema={schema}\n            sort={sort}\n            onFilter={propFilter ? handleAddFilter : undefined}\n            onSelect={onSelect ? handleHeadSelect : undefined}\n            onSort={propSort ? handleSort : undefined}\n            testId={testId ? `${testId}-head` : undefined}\n          />\n        </Primitive>\n        <Primitive tag=\"tbody\">\n          {useMemo(\n            () => select({ dataSource, filter, limit, schema, search, selected, sort }),\n            [dataSource, filter, limit, schema, search, selected, sort],\n          ).map((row, index) => (\n            <Row\n              checked={exists(row, selected)}\n              dataSource={row}\n              key={index}\n              schema={schema}\n              onPress={onPress}\n              onSelect={onSelect ? handleSelect : undefined}\n              testId={testId ? `${testId}-${index}` : undefined}\n            />\n          ))}\n        </Primitive>\n      </Primitive>\n    </>,\n  );\n};\n\nTable.displayName = 'Component:Table';\n\nTable.propTypes = {\n  dataSource: PropTypes.arrayOf(PropTypes.shape({})),\n  filter: PropTypes.arrayOf(PropTypes.shape({})),\n  inline: PropTypes.bool,\n  id: PropTypes.bool,\n  l10n: L10N_SHAPE,\n  pagination: PropTypes.number,\n  schema: PropTypes.shape({}).isRequired,\n  search: PropTypes.string,\n  selected: PropTypes.arrayOf(PropTypes.shape()),\n  sort: PropTypes.bool,\n  store: PropTypes.string,\n  onPress: PropTypes.func,\n  onScroll: PropTypes.func,\n  onSelect: PropTypes.func,\n};\n"],"mappings":"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"}

package/build/primitives/Icon/Icon.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _Primitive = require("../Primitive");
 var _IconModule = _interopRequireDefault(require("./Icon.module.css"));
-var _excluded = ["action", "headline", "level", "paragraph", "small", "value"];
+var _excluded = ["accent", "action", "headline", "level", "lighten", "paragraph", "small", "value"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -20,10 +20,12 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Icon = function Icon(_ref) {
-  var action = _ref.action,
+  var accent = _ref.accent,
+    action = _ref.action,
     headline = _ref.headline,
     _ref$level = _ref.level,
     level = _ref$level === void 0 ? 3 : _ref$level,
+    lighten = _ref.lighten,
     paragraph = _ref.paragraph,
     small = _ref.small,
     value = _ref.value,
@@ -31,15 +33,17 @@ var Icon = function Icon(_ref) {
   return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread({}, others), {}, {
     role: others.role || 'icon',
     tag: 'span',
-    className: (0, _helpers.styles)(_IconModule.default.icon, headline ? _IconModule.default["headline-".concat(level)] : action ? _IconModule.default.action : small ? _IconModule.default.small : paragraph ? _IconModule.default.paragraph : _IconModule.default["headline-".concat(level)], others.className)
+    className: (0, _helpers.styles)(_IconModule.default.icon, accent && _IconModule.default.accent, headline ? _IconModule.default["headline-".concat(level)] : action ? _IconModule.default.action : small ? _IconModule.default.small : paragraph ? _IconModule.default.paragraph : _IconModule.default["headline-".concat(level)], lighten && _IconModule.default.lighten, others.className)
   }), value ? /*#__PURE__*/_react.default.createElement(value) : undefined);
 };
 exports.Icon = Icon;
 Icon.displayName = 'Primitive:Icon';
 Icon.propTypes = {
+  accent: _propTypes.default.bool,
   action: _propTypes.default.bool,
   headline: _propTypes.default.bool,
   level: _propTypes.default.number,
+  lighten: _propTypes.default.bool,
   paragraph: _propTypes.default.bool,
   small: _propTypes.default.bool,
   value: _propTypes.default.func.isRequired

package/build/primitives/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["Icon","action","headline","level","paragraph","small","value","others","React","createElement","Primitive","role","tag","className","styles","style","icon","undefined","displayName","propTypes","PropTypes","bool","number","func","isRequired"],"sources":["../../../src/primitives/Icon/Icon.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Icon.module.css';\n\nconst Icon = ({ action, headline, level = 3, paragraph, small, value, ...others }) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'icon',\n      tag: 'span',\n      className: styles(\n        style.icon,\n        headline\n          ? style[`headline-${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : paragraph\n          ? style.paragraph\n          : style[`headline-${level}`],\n        others.className,\n      ),\n    },\n    value ? React.createElement(value) : undefined,\n  );\n\nIcon.displayName = 'Primitive:Icon';\n\nIcon.propTypes = {\n  action: PropTypes.bool,\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  paragraph: PropTypes.bool,\n  small: PropTypes.bool,\n  value: PropTypes.func.isRequired,\n};\n\nexport { Icon };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,GAAG,SAAPA,IAAI;EAAA,IAAMC,MAAM,QAANA,MAAM;IAAEC,QAAQ,QAARA,QAAQ;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAEC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAKC,MAAM;EAAA,oBAC7EC,cAAK,CAACC,aAAa,CACjBC,oBAAS,kCAEJH,MAAM;IACTI,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,MAAM;IAC3BC,GAAG,EAAE,MAAM;IACXC,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACVd,QAAQ,GACJa,mBAAK,oBAAaZ,KAAK,EAAG,GAC1BF,MAAM,GACNc,mBAAK,CAACd,MAAM,GACZI,KAAK,GACLU,mBAAK,CAACV,KAAK,GACXD,SAAS,GACTW,mBAAK,CAACX,SAAS,GACfW,mBAAK,oBAAaZ,KAAK,EAAG,EAC9BI,MAAM,CAACM,SAAS;EACjB,IAEHP,KAAK,gBAAGE,cAAK,CAACC,aAAa,CAACH,KAAK,CAAC,GAAGW,SAAS,CAC/C;AAAA;AAAC;AAEJjB,IAAI,CAACkB,WAAW,GAAG,gBAAgB;AAEnClB,IAAI,CAACmB,SAAS,GAAG;EACflB,MAAM,EAAEmB,kBAAS,CAACC,IAAI;EACtBnB,QAAQ,EAAEkB,kBAAS,CAACC,IAAI;EACxBlB,KAAK,EAAEiB,kBAAS,CAACE,MAAM;EACvBlB,SAAS,EAAEgB,kBAAS,CAACC,IAAI;EACzBhB,KAAK,EAAEe,kBAAS,CAACC,IAAI;EACrBf,KAAK,EAAEc,kBAAS,CAACG,IAAI,CAACC;AACxB,CAAC"}
+{"version":3,"file":"Icon.js","names":["Icon","accent","action","headline","level","lighten","paragraph","small","value","others","React","createElement","Primitive","role","tag","className","styles","style","icon","undefined","displayName","propTypes","PropTypes","bool","number","func","isRequired"],"sources":["../../../src/primitives/Icon/Icon.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Icon.module.css';\n\nconst Icon = ({ accent, action, headline, level = 3, lighten, paragraph, small, value, ...others }) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'icon',\n      tag: 'span',\n      className: styles(\n        style.icon,\n        accent && style.accent,\n        headline\n          ? style[`headline-${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : paragraph\n          ? style.paragraph\n          : style[`headline-${level}`],\n        lighten && style.lighten,\n        others.className,\n      ),\n    },\n    value ? React.createElement(value) : undefined,\n  );\n\nIcon.displayName = 'Primitive:Icon';\n\nIcon.propTypes = {\n  accent: PropTypes.bool,\n  action: PropTypes.bool,\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  lighten: PropTypes.bool,\n  paragraph: PropTypes.bool,\n  small: PropTypes.bool,\n  value: PropTypes.func.isRequired,\n};\n\nexport { Icon };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,GAAG,SAAPA,IAAI;EAAA,IAAMC,MAAM,QAANA,MAAM;IAAEC,MAAM,QAANA,MAAM;IAAEC,QAAQ,QAARA,QAAQ;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAEC,OAAO,QAAPA,OAAO;IAAEC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAKC,MAAM;EAAA,oBAC9FC,cAAK,CAACC,aAAa,CACjBC,oBAAS,kCAEJH,MAAM;IACTI,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,MAAM;IAC3BC,GAAG,EAAE,MAAM;IACXC,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACVjB,MAAM,IAAIgB,mBAAK,CAAChB,MAAM,EACtBE,QAAQ,GACJc,mBAAK,oBAAab,KAAK,EAAG,GAC1BF,MAAM,GACNe,mBAAK,CAACf,MAAM,GACZK,KAAK,GACLU,mBAAK,CAACV,KAAK,GACXD,SAAS,GACTW,mBAAK,CAACX,SAAS,GACfW,mBAAK,oBAAab,KAAK,EAAG,EAC9BC,OAAO,IAAIY,mBAAK,CAACZ,OAAO,EACxBI,MAAM,CAACM,SAAS;EACjB,IAEHP,KAAK,gBAAGE,cAAK,CAACC,aAAa,CAACH,KAAK,CAAC,GAAGW,SAAS,CAC/C;AAAA;AAAC;AAEJnB,IAAI,CAACoB,WAAW,GAAG,gBAAgB;AAEnCpB,IAAI,CAACqB,SAAS,GAAG;EACfpB,MAAM,EAAEqB,kBAAS,CAACC,IAAI;EACtBrB,MAAM,EAAEoB,kBAAS,CAACC,IAAI;EACtBpB,QAAQ,EAAEmB,kBAAS,CAACC,IAAI;EACxBnB,KAAK,EAAEkB,kBAAS,CAACE,MAAM;EACvBnB,OAAO,EAAEiB,kBAAS,CAACC,IAAI;EACvBjB,SAAS,EAAEgB,kBAAS,CAACC,IAAI;EACzBhB,KAAK,EAAEe,kBAAS,CAACC,IAAI;EACrBf,KAAK,EAAEc,kBAAS,CAACG,IAAI,CAACC;AACxB,CAAC"}

package/build/primitives/Icon/Icon.module.css

@@ -2,6 +2,10 @@
   display: block;
 }
 
+.accent {
+  color: var(--mirai-ui-accent);
+}
+
 .headline-1 {
   font-size: var(--mirai-ui-font-size-headline-1);
   height: var(--mirai-ui-font-size-headline-1);
@@ -30,6 +34,10 @@
   width: var(--mirai-ui-font-size-headline-4);
 }
 
+.lighten {
+  color: var(--mirai-ui-content-light);
+}
+
 .paragraph {
   font-size: var(--mirai-ui-font-size-paragraph);
   height: var(--mirai-ui-font-size-paragraph);

package/build/primitives/Icon/Icon.stories.js

@@ -25,9 +25,11 @@ var Story = function Story(_ref) {
 exports.Story = Story;
 Story.storyName = 'Icon';
 Story.args = {
+  accent: false,
   action: false,
   headline: false,
   level: 3,
+  lighten: false,
   paragraph: false,
   small: false,
   value: undefined,

package/build/primitives/Icon/Icon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.js","names":["title","Story","value","props","ICON","storyName","args","action","headline","level","paragraph","small","undefined","testId","style","argTypes","options","Object","keys","control","type","defaultValue"],"sources":["../../../src/primitives/Icon/Icon.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React from 'react';\n\nimport { Icon, ICON } from './';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ value, ...props }) => <Icon {...props} value={ICON[value]} />;\n\nStory.storyName = 'Icon';\n\nStory.args = {\n  action: false,\n  headline: false,\n  level: 3,\n  paragraph: false,\n  small: false,\n  value: undefined,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  value: {\n    options: Object.keys(ICON),\n    control: { type: 'select' },\n    defaultValue: Object.keys(ICON)[0],\n  },\n};\n"],"mappings":";;;;;;AACA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,KAAK,QAALA,KAAK;IAAKC,KAAK;EAAA,oBAAO,6BAAC,MAAI,eAAKA,KAAK;IAAE,KAAK,EAAEC,MAAI,CAACF,KAAK;EAAE,GAAG;AAAA;AAAC;AAEtFD,KAAK,CAACI,SAAS,GAAG,MAAM;AAExBJ,KAAK,CAACK,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZT,KAAK,EAAEU,SAAS;EAChB;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDb,KAAK,CAACc,QAAQ,GAAG;EACfb,KAAK,EAAE;IACLc,OAAO,EAAEC,MAAM,CAACC,IAAI,CAACd,MAAI,CAAC;IAC1Be,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAACd,MAAI,CAAC,CAAC,CAAC;EACnC;AACF,CAAC"}
+{"version":3,"file":"Icon.stories.js","names":["title","Story","value","props","ICON","storyName","args","accent","action","headline","level","lighten","paragraph","small","undefined","testId","style","argTypes","options","Object","keys","control","type","defaultValue"],"sources":["../../../src/primitives/Icon/Icon.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React from 'react';\n\nimport { Icon, ICON } from './';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ value, ...props }) => <Icon {...props} value={ICON[value]} />;\n\nStory.storyName = 'Icon';\n\nStory.args = {\n  accent: false,\n  action: false,\n  headline: false,\n  level: 3,\n  lighten: false,\n  paragraph: false,\n  small: false,\n  value: undefined,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  value: {\n    options: Object.keys(ICON),\n    control: { type: 'select' },\n    defaultValue: Object.keys(ICON)[0],\n  },\n};\n"],"mappings":";;;;;;AACA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,KAAK,QAALA,KAAK;IAAKC,KAAK;EAAA,oBAAO,6BAAC,MAAI,eAAKA,KAAK;IAAE,KAAK,EAAEC,MAAI,CAACF,KAAK;EAAE,GAAG;AAAA;AAAC;AAEtFD,KAAK,CAACI,SAAS,GAAG,MAAM;AAExBJ,KAAK,CAACK,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZX,KAAK,EAAEY,SAAS;EAChB;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDf,KAAK,CAACgB,QAAQ,GAAG;EACff,KAAK,EAAE;IACLgB,OAAO,EAAEC,MAAM,CAACC,IAAI,CAAChB,MAAI,CAAC;IAC1BiB,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAAChB,MAAI,CAAC,CAAC,CAAC;EACnC;AACF,CAAC"}

package/build/primitives/Icon/__tests__/__snapshots__/Icon.test.js.snap

@@ -26,6 +26,32 @@ exports[`primitive:<Icon> inherit:className 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Icon> prop:accent 1`] = `
+<DocumentFragment>
+  <span
+    class="icon accent headline-3"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      stroke="currentColor"
+      stroke-width="0"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 0h24v24H0V0z"
+        fill="none"
+      />
+      <path
+        d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+      />
+    </svg>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Icon> prop:action 1`] = `
 <DocumentFragment>
   <span
@@ -182,6 +208,32 @@ exports[`primitive:<Icon> prop:headline 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Icon> prop:lighten 1`] = `
+<DocumentFragment>
+  <span
+    class="icon headline-3 lighten"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      stroke="currentColor"
+      stroke-width="0"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 0h24v24H0V0z"
+        fill="none"
+      />
+      <path
+        d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+      />
+    </svg>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Icon> prop:paragraph 1`] = `
 <DocumentFragment>
   <span

package/package.json

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