@mirai/ui 1.0.175 → 1.0.181

package/README.md

@@ -313,6 +313,7 @@ A primitive for displaying text. It receives the following props:
 - `headline:boolean` modifying font-size
 - `level:number` assign the level of heading (1, 2, 3 or 4)
 - `lighten:boolean` use theme's content-light color
+- `markdown:boolean` if true renders content as parsed markdown
 - `small:boolean` modifying font-size
 - `tag:string` html tag of resulting element
 - `underline:boolean` use an underline text decoration
@@ -1033,6 +1034,39 @@ const MyComponent = (props) => {
 --mirai-ui-progress-motion: calc(var(--mirai-ui-motion-expand) * 3);
 ```
 
+### Slider
+
+A Slider component receiving the following props:
+
+- `auto:bool` if you want auto slide feature (default is false).
+- `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).
+- `images:arrayOf:string` images to show (required).
+- `index:number` If you want show a determinate image at atart.
+- `thumbnails:arrayOf:string` if you want use thumbnails of images in fullScreen mode.
+- `width:number` width of component (required).
+- `onChange:function` executed when image (index) is visible
+- `onFullScreen:function` executed when toggle fullScreen property
+
+```jsx
+import { Slider } from '@mirai/ui';
+
+const MyComponent = (props) => {
+
+  return <Slider height={320} images={[...]} width={480} />;
+};
+```
+
+**Theming variables**
+
+```css
+--mirai-ui-slider-background: var(--mirai-ui-content-dark);
+--mirai-ui-slider-overlay: rgba(0, 0, 0, 0.66);
+--mirai-ui-slider-color: var(--mirai-ui-base);
+--mirai-ui-slider-border-radius: var(--mirai-ui-border-radius);
+```
+
 ### Table
 
 This component helps you to create a pure html table receiving the following props:

package/build/components/Calendar/Calendar.stories.js

@@ -164,7 +164,7 @@ Story.args = {
 };
 Story.argTypes = {
   locale: {
-    options: ['es-ES', 'en-GB', 'fr-FR', 'it-IT', 'pt-PT', 'fr-BE', 'de-DE', 'ja-JA'],
+    options: ['es-ES', 'en-GB', 'en-US', 'fr-FR', 'it-IT', 'pt-PT', 'fr-BE', 'de-DE', 'ja-JA'],
     control: {
       type: 'select'
     },

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.stories.js","names":["title","format","today","Date","Story","props","useState","focus","setFocus","value","setValue","handleChange","from","to","console","log","dateFormat","undefined","handleFocus","nextFocus","dateDiff","parseDate","nights","days","tooltips","text","rangeMinDays","pressable","storyName","args","captions","dateCalc","disabledDates","disabledPast","highlights","locale","months","range","rangeMaxDays","onNavigation","onScroll","testId","style","argTypes","options","control","type","defaultValue"],"sources":["../../../src/components/Calendar/Calendar.stories.jsx"],"sourcesContent":["import { dateCalc, dateDiff, dateFormat, parseDate } from '@mirai/locale';\nimport React, { useState } from 'react';\n\nimport { Calendar } from './Calendar';\n\nexport default { title: 'Components' };\n\nconst format = 'DD/MM/YYYY';\nconst today = new Date();\n\nexport const Story = (props) => {\n  const [focus, setFocus] = useState();\n  const [value, setValue] = useState(props.value || []);\n\n  const handleChange = ([from, to], ...props) => {\n    console.log('<Calendar>::onChange', [from, to], ...props);\n    setValue([from ? dateFormat(from, { format }) : undefined, to ? dateFormat(to, { format }) : undefined]);\n  };\n\n  const handleFocus = (nextFocus, ...props) => {\n    console.log('<Calendar>::onFocus', nextFocus, ...props);\n    setFocus(nextFocus ? dateFormat(nextFocus, { format }) : undefined);\n  };\n\n  const [from, to] = value;\n  const { days: nights } = dateDiff(parseDate(from, format), parseDate(to || focus, format));\n\n  const tooltips = from ? {} : props.tooltips;\n  if (from && !to) tooltips[from] = { text: `Min. ${props.rangeMinDays} nights`, pressable: false };\n  if (to && nights < 5) tooltips[to] = { text: 'Need more nights', pressable: false };\n  else if (!to && from && focus && focus > from) tooltips[focus] = { text: `${nights} nights`, pressable: false };\n\n  return <Calendar {...props} {...{ tooltips, value }} onChange={handleChange} onFocus={handleFocus} />;\n};\n\nStory.storyName = 'Calendar';\n\nStory.args = {\n  captions: {\n    [dateFormat(dateCalc(today, -2, 'days'), { format })]: '10.95$',\n    [dateFormat(dateCalc(today, 6, 'days'), { format })]: '10.95$',\n    [dateFormat(dateCalc(today, 8, 'days'), { format })]: '129510.95$',\n    [dateFormat(dateCalc(today, 16, 'days'), { format })]: '10.95$',\n    [dateFormat(dateCalc(today, 18, 'days'), { format })]: '9.95$',\n  },\n  disabledDates: [\n    dateFormat(dateCalc(today, 20, 'days'), { format }),\n    dateFormat(dateCalc(today, 21, 'days'), { format }),\n    dateFormat(dateCalc(today, 22, 'days'), { format }),\n    dateFormat(dateCalc(today, 23, 'days'), { format }),\n    dateFormat(dateCalc(today, 24, 'days'), { format }),\n  ],\n  disabledPast: true,\n  format,\n  from: dateFormat(dateCalc(today, 2, 'days')),\n  highlights: [\n    dateFormat(dateCalc(today, 6, 'days'), { format }),\n    dateFormat(dateCalc(today, 10, 'days'), { format }),\n    dateFormat(dateCalc(today, 12, 'days'), { format }),\n    dateFormat(dateCalc(today, 14, 'days'), { format }),\n    dateFormat(dateCalc(today, 16, 'days'), { format }),\n  ],\n  locale: 'en-US',\n  months: 2,\n  range: true,\n  rangeMaxDays: 30,\n  rangeMinDays: 3,\n  to: dateFormat(dateCalc(today, 6, 'months')),\n  tooltips: {\n    [dateFormat(dateCalc(today, 15, 'days'), { format })]: { text: '10.95$' },\n    [dateFormat(dateCalc(today, 30, 'days'), { format })]: { text: '10.95$' },\n    [dateFormat(dateCalc(today, 45, 'days'), { format })]: { text: '10.95$' },\n  },\n  value: [dateFormat(dateCalc(today, 10, 'days')), dateFormat(dateCalc(today, 13, 'days'))],\n  onNavigation: (...props) => console.log('<Calendar>::onNavigation', ...props),\n  onScroll: (...props) => console.log('<Calendar>::onScroll', ...props),\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  locale: {\n    options: ['es-ES', 'en-GB', 'fr-FR', 'it-IT', 'pt-PT', 'fr-BE', 'de-DE', 'ja-JA'],\n    control: { type: 'select' },\n    defaultValue: 'es-ES',\n  },\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEvB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAEtC,IAAMC,MAAM,GAAG,YAAY;AAC3B,IAAMC,KAAK,GAAG,IAAIC,IAAI,EAAE;AAEjB,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,GAAE;IAAA;IAA7BC,KAAK;IAAEC,QAAQ;EACtB,iBAA0B,IAAAF,eAAQ,EAACD,KAAK,CAACI,KAAK,IAAI,EAAE,CAAC;IAAA;IAA9CA,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA6B;IAAA;IAAA;MAAxBC,IAAI;MAAEC,EAAE;IAAA,kCAAMR,KAAK;MAALA,KAAK;IAAA;IACxC,YAAAS,OAAO,EAACC,GAAG,kBAAC,sBAAsB,EAAE,CAACH,IAAI,EAAEC,EAAE,CAAC,SAAKR,KAAK,EAAC;IACzDK,QAAQ,CAAC,CAACE,IAAI,GAAG,IAAAI,kBAAU,EAACJ,IAAI,EAAE;MAAEX,MAAM,EAANA;IAAO,CAAC,CAAC,GAAGgB,SAAS,EAAEJ,EAAE,GAAG,IAAAG,kBAAU,EAACH,EAAE,EAAE;MAAEZ,MAAM,EAANA;IAAO,CAAC,CAAC,GAAGgB,SAAS,CAAC,CAAC;EAC1G,CAAC;EAED,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,SAAS,EAAe;IAAA;IAAA,mCAAVd,KAAK;MAALA,KAAK;IAAA;IACtC,aAAAS,OAAO,EAACC,GAAG,mBAAC,qBAAqB,EAAEI,SAAS,SAAKd,KAAK,EAAC;IACvDG,QAAQ,CAACW,SAAS,GAAG,IAAAH,kBAAU,EAACG,SAAS,EAAE;MAAElB,MAAM,EAANA;IAAO,CAAC,CAAC,GAAGgB,SAAS,CAAC;EACrE,CAAC;EAED,4BAAmBR,KAAK;IAAjBG,IAAI;IAAEC,EAAE;EACf,gBAAyB,IAAAO,gBAAQ,EAAC,IAAAC,iBAAS,EAACT,IAAI,EAAEX,MAAM,CAAC,EAAE,IAAAoB,iBAAS,EAACR,EAAE,IAAIN,KAAK,EAAEN,MAAM,CAAC,CAAC;IAA5EqB,MAAM,aAAZC,IAAI;EAEZ,IAAMC,QAAQ,GAAGZ,IAAI,GAAG,CAAC,CAAC,GAAGP,KAAK,CAACmB,QAAQ;EAC3C,IAAIZ,IAAI,IAAI,CAACC,EAAE,EAAEW,QAAQ,CAACZ,IAAI,CAAC,GAAG;IAAEa,IAAI,iBAAUpB,KAAK,CAACqB,YAAY,YAAS;IAAEC,SAAS,EAAE;EAAM,CAAC;EACjG,IAAId,EAAE,IAAIS,MAAM,GAAG,CAAC,EAAEE,QAAQ,CAACX,EAAE,CAAC,GAAG;IAAEY,IAAI,EAAE,kBAAkB;IAAEE,SAAS,EAAE;EAAM,CAAC,CAAC,KAC/E,IAAI,CAACd,EAAE,IAAID,IAAI,IAAIL,KAAK,IAAIA,KAAK,GAAGK,IAAI,EAAEY,QAAQ,CAACjB,KAAK,CAAC,GAAG;IAAEkB,IAAI,YAAKH,MAAM,YAAS;IAAEK,SAAS,EAAE;EAAM,CAAC;EAE/G,oBAAO,6BAAC,kBAAQ,eAAKtB,KAAK;IAAQmB,QAAQ,EAARA,QAAQ;IAAEf,KAAK,EAALA,KAAK;IAAI,QAAQ,EAAEE,YAAa;IAAC,OAAO,EAAEO;EAAY,GAAG;AACvG,CAAC;AAAC;AAEFd,KAAK,CAACwB,SAAS,GAAG,UAAU;AAE5BxB,KAAK,CAACyB,IAAI,GAAG;EACXC,QAAQ,8CACL,IAAAd,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EAAG,QAAQ,8BAC9D,IAAAe,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EAAG,QAAQ,8BAC7D,IAAAe,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EAAG,YAAY,8BACjE,IAAAe,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EAAG,QAAQ,8BAC9D,IAAAe,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EAAG,OAAO,aAC/D;EACD+B,aAAa,EAAE,CACb,IAAAhB,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EACnD,IAAAe,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EACnD,IAAAe,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EACnD,IAAAe,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EACnD,IAAAe,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,CACpD;EACDgC,YAAY,EAAE,IAAI;EAClBhC,MAAM,EAANA,MAAM;EACNW,IAAI,EAAE,IAAAI,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;EAC5CgC,UAAU,EAAE,CACV,IAAAlB,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EAClD,IAAAe,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EACnD,IAAAe,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EACnD,IAAAe,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EACnD,IAAAe,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,CACpD;EACDkC,MAAM,EAAE,OAAO;EACfC,MAAM,EAAE,CAAC;EACTC,KAAK,EAAE,IAAI;EACXC,YAAY,EAAE,EAAE;EAChBZ,YAAY,EAAE,CAAC;EACfb,EAAE,EAAE,IAAAG,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;EAC5CsB,QAAQ,8CACL,IAAAR,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EAAG;IAAEwB,IAAI,EAAE;EAAS,CAAC,8BACxE,IAAAT,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EAAG;IAAEwB,IAAI,EAAE;EAAS,CAAC,8BACxE,IAAAT,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE;IAAED,MAAM,EAANA;EAAO,CAAC,CAAC,EAAG;IAAEwB,IAAI,EAAE;EAAS,CAAC,aAC1E;EACDhB,KAAK,EAAE,CAAC,IAAAO,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC,EAAE,IAAAc,kBAAU,EAAC,IAAAe,gBAAQ,EAAC7B,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC;EACzFqC,YAAY,EAAE;IAAA;IAAA,mCAAIlC,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAS,OAAO,EAACC,GAAG,mBAAC,0BAA0B,SAAKV,KAAK,EAAC;EAAA;EAC7EmC,QAAQ,EAAE;IAAA;IAAA,mCAAInC,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAS,OAAO,EAACC,GAAG,mBAAC,sBAAsB,SAAKV,KAAK,EAAC;EAAA;EACrE;EACAoC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDtC,KAAK,CAACuC,QAAQ,GAAG;EACfR,MAAM,EAAE;IACNS,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;IACjFC,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAE;EAChB;AACF,CAAC"}
+{"version":3,"file":"Calendar.stories.js","names":["title","format","today","Date","Story","props","useState","focus","setFocus","value","setValue","handleChange","from","to","console","log","dateFormat","undefined","handleFocus","nextFocus","dateDiff","parseDate","nights","days","tooltips","text","rangeMinDays","pressable","storyName","args","captions","dateCalc","disabledDates","disabledPast","highlights","locale","months","range","rangeMaxDays","onNavigation","onScroll","testId","style","argTypes","options","control","type","defaultValue"],"sources":["../../../src/components/Calendar/Calendar.stories.jsx"],"sourcesContent":["import { dateCalc, dateDiff, dateFormat, parseDate } from '@mirai/locale';\nimport React, { useState } from 'react';\n\nimport { Calendar } from './Calendar';\n\nexport default { title: 'Components' };\n\nconst format = 'DD/MM/YYYY';\nconst today = new Date();\n\nexport const Story = (props) => {\n  const [focus, setFocus] = useState();\n  const [value, setValue] = useState(props.value || []);\n\n  const handleChange = ([from, to], ...props) => {\n    console.log('<Calendar>::onChange', [from, to], ...props);\n    setValue([from ? dateFormat(from, { format }) : undefined, to ? dateFormat(to, { format }) : undefined]);\n  };\n\n  const handleFocus = (nextFocus, ...props) => {\n    console.log('<Calendar>::onFocus', nextFocus, ...props);\n    setFocus(nextFocus ? dateFormat(nextFocus, { format }) : undefined);\n  };\n\n  const [from, to] = value;\n  const { days: nights } = dateDiff(parseDate(from, format), parseDate(to || focus, format));\n\n  const tooltips = from ? {} : props.tooltips;\n  if (from && !to) tooltips[from] = { text: `Min. ${props.rangeMinDays} nights`, pressable: false };\n  if (to && nights < 5) tooltips[to] = { text: 'Need more nights', pressable: false };\n  else if (!to && from && focus && focus > from) tooltips[focus] = { text: `${nights} nights`, pressable: false };\n\n  return <Calendar {...props} {...{ tooltips, value }} onChange={handleChange} onFocus={handleFocus} />;\n};\n\nStory.storyName = 'Calendar';\n\nStory.args = {\n  captions: {\n    [dateFormat(dateCalc(today, -2, 'days'), { format })]: '10.95$',\n    [dateFormat(dateCalc(today, 6, 'days'), { format })]: '10.95$',\n    [dateFormat(dateCalc(today, 8, 'days'), { format })]: '129510.95$',\n    [dateFormat(dateCalc(today, 16, 'days'), { format })]: '10.95$',\n    [dateFormat(dateCalc(today, 18, 'days'), { format })]: '9.95$',\n  },\n  disabledDates: [\n    dateFormat(dateCalc(today, 20, 'days'), { format }),\n    dateFormat(dateCalc(today, 21, 'days'), { format }),\n    dateFormat(dateCalc(today, 22, 'days'), { format }),\n    dateFormat(dateCalc(today, 23, 'days'), { format }),\n    dateFormat(dateCalc(today, 24, 'days'), { format }),\n  ],\n  disabledPast: true,\n  format,\n  from: dateFormat(dateCalc(today, 2, 'days')),\n  highlights: [\n    dateFormat(dateCalc(today, 6, 'days'), { format }),\n    dateFormat(dateCalc(today, 10, 'days'), { format }),\n    dateFormat(dateCalc(today, 12, 'days'), { format }),\n    dateFormat(dateCalc(today, 14, 'days'), { format }),\n    dateFormat(dateCalc(today, 16, 'days'), { format }),\n  ],\n  locale: 'en-US',\n  months: 2,\n  range: true,\n  rangeMaxDays: 30,\n  rangeMinDays: 3,\n  to: dateFormat(dateCalc(today, 6, 'months')),\n  tooltips: {\n    [dateFormat(dateCalc(today, 15, 'days'), { format })]: { text: '10.95$' },\n    [dateFormat(dateCalc(today, 30, 'days'), { format })]: { text: '10.95$' },\n    [dateFormat(dateCalc(today, 45, 'days'), { format })]: { text: '10.95$' },\n  },\n  value: [dateFormat(dateCalc(today, 10, 'days')), dateFormat(dateCalc(today, 13, 'days'))],\n  onNavigation: (...props) => console.log('<Calendar>::onNavigation', ...props),\n  onScroll: (...props) => console.log('<Calendar>::onScroll', ...props),\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  locale: {\n    options: ['es-ES', 'en-GB', 'en-US', 'fr-FR', 'it-IT', 'pt-PT', 'fr-BE', 'de-DE', 'ja-JA'],\n    control: { type: 'select' },\n    defaultValue: 'es-ES',\n  },\n};\n"],"mappings":"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"}

package/build/components/InputOption/InputOption.js

@@ -1,6 +1,5 @@
 "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
 });
@@ -15,13 +14,9 @@ var _InputOptionModule = _interopRequireDefault(require("./InputOption.module.cs
 var _excluded = ["checked", "disabled", "indeterminate", "label", "name", "required", "showRequired", "small", "type", "value", "onChange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-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; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(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 InputOption = function InputOption(_ref) {
-  var _React$createElement;
   var checked = _ref.checked,
     disabled = _ref.disabled,
     indeterminate = _ref.indeterminate,
@@ -56,13 +51,14 @@ var InputOption = function InputOption(_ref) {
   }, type === _InputOption.CHECKBOX && (checked || indeterminate) ? /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: checked ? _primitives.ICON.CHECK : _primitives.ICON.REMOVE,
     className: _InputOptionModule.default.icon
-  }) : undefined), label && /*#__PURE__*/_react.default.createElement(_partials.Label, (_React$createElement = {
+  }) : undefined), label && /*#__PURE__*/_react.default.createElement(_partials.Label, {
     action: !small,
     small: small,
     disabled: disabled,
     label: label,
-    required: showRequired && required
-  }, _defineProperty(_React$createElement, "small", small), _defineProperty(_React$createElement, "className", _InputOptionModule.default.label), _React$createElement)));
+    required: showRequired && required,
+    className: _InputOptionModule.default.label
+  }));
 };
 exports.InputOption = InputOption;
 InputOption.displayName = 'Component:InputOption';

package/build/components/InputOption/InputOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputOption.js","names":["InputOption","checked","disabled","indeterminate","label","name","required","showRequired","small","type","CHECKBOX","value","onChange","others","Primitive","Checkbox","RADIO","Radio","Switch","handleChange","event","SWITCH","includes","role","styles","style","inputOption","className","ICON","CHECK","REMOVE","icon","undefined","displayName","propTypes","PropTypes","bool","string","isRequired","oneOf","oneOfType","func"],"sources":["../../../src/components/InputOption/InputOption.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Checkbox, Icon, ICON, Pressable, Radio, Switch } from '../../primitives';\nimport { Label } from '../InputText/partials';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\nimport style from './InputOption.module.css';\n\nconst InputOption = ({\n  checked,\n  disabled,\n  indeterminate,\n  label,\n  name,\n  required,\n  showRequired = false,\n  small,\n  type = CHECKBOX,\n  value = '',\n  onChange = () => {},\n  ...others\n}) => {\n  const Primitive = type === CHECKBOX ? Checkbox : type === RADIO ? Radio : Switch;\n\n  const handleChange = (event) => {\n    onChange([CHECKBOX, SWITCH].includes(type) ? !checked : value, event);\n  };\n\n  return (\n    <Pressable\n      {...others}\n      role={others.role || 'input-option'}\n      preventDefault={false}\n      onPress={handleChange}\n      className={styles(style.inputOption, others.className)}\n    >\n      <Primitive\n        checked={checked || (type === CHECKBOX && indeterminate)}\n        disabled={disabled}\n        name={name}\n        type={type}\n        value={value}\n      >\n        {type === CHECKBOX && (checked || indeterminate) ? (\n          <Icon value={checked ? ICON.CHECK : ICON.REMOVE} className={style.icon} />\n        ) : undefined}\n      </Primitive>\n      {label && (\n        <Label\n          action={!small}\n          small={small}\n          {...{ disabled, label, required: showRequired && required, small }}\n          className={style.label}\n        />\n      )}\n    </Pressable>\n  );\n};\n\nInputOption.displayName = 'Component:InputOption';\n\nInputOption.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  indeterminate: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  showRequired: PropTypes.bool,\n  small: PropTypes.bool,\n  type: PropTypes.oneOf([CHECKBOX, RADIO, SWITCH]),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onChange: PropTypes.func,\n};\n\nexport { InputOption };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAA6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7C,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAaX;EAAA;EAAA,IAZJC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACbC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IAAA,yBACRC,YAAY;IAAZA,YAAY,kCAAG,KAAK;IACpBC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAGC,qBAAQ;IAAA,kBACfC,KAAK;IAALA,KAAK,2BAAG,EAAE;IAAA,qBACVC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IAChBC,MAAM;EAET,IAAMC,SAAS,GAAGL,IAAI,KAAKC,qBAAQ,GAAGK,oBAAQ,GAAGN,IAAI,KAAKO,kBAAK,GAAGC,iBAAK,GAAGC,kBAAM;EAEhF,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAK;IAC9BR,QAAQ,CAAC,CAACF,qBAAQ,EAAEW,mBAAM,CAAC,CAACC,QAAQ,CAACb,IAAI,CAAC,GAAG,CAACR,OAAO,GAAGU,KAAK,EAAES,KAAK,CAAC;EACvE,CAAC;EAED,oBACE,6BAAC,qBAAS,eACJP,MAAM;IACV,IAAI,EAAEA,MAAM,CAACU,IAAI,IAAI,cAAe;IACpC,cAAc,EAAE,KAAM;IACtB,OAAO,EAAEJ,YAAa;IACtB,SAAS,EAAE,IAAAK,eAAM,EAACC,0BAAK,CAACC,WAAW,EAAEb,MAAM,CAACc,SAAS;EAAE,iBAEvD,6BAAC,SAAS;IACR,OAAO,EAAE1B,OAAO,IAAKQ,IAAI,KAAKC,qBAAQ,IAAIP,aAAe;IACzD,QAAQ,EAAED,QAAS;IACnB,IAAI,EAAEG,IAAK;IACX,IAAI,EAAEI,IAAK;IACX,KAAK,EAAEE;EAAM,GAEZF,IAAI,KAAKC,qBAAQ,KAAKT,OAAO,IAAIE,aAAa,CAAC,gBAC9C,6BAAC,gBAAI;IAAC,KAAK,EAAEF,OAAO,GAAG2B,gBAAI,CAACC,KAAK,GAAGD,gBAAI,CAACE,MAAO;IAAC,SAAS,EAAEL,0BAAK,CAACM;EAAK,EAAG,GACxEC,SAAS,CACH,EACX5B,KAAK,iBACJ,6BAAC,eAAK;IACJ,MAAM,EAAE,CAACI,KAAM;IACf,KAAK,EAAEA,KAAM;IACPN,QAAQ,EAARA,QAAQ;IAAEE,KAAK,EAALA,KAAK;IAAEE,QAAQ,EAAEC,YAAY,IAAID;EAAQ,kDAAEE,KAAK,sDACrDiB,0BAAK,CAACrB,KAAK,yBAEzB,CACS;AAEhB,CAAC;AAAC;AAEFJ,WAAW,CAACiC,WAAW,GAAG,uBAAuB;AAEjDjC,WAAW,CAACkC,SAAS,GAAG;EACtBjC,OAAO,EAAEkC,kBAAS,CAACC,IAAI;EACvBlC,QAAQ,EAAEiC,kBAAS,CAACC,IAAI;EACxBjC,aAAa,EAAEgC,kBAAS,CAACC,IAAI;EAC7BhC,KAAK,EAAE+B,kBAAS,CAACE,MAAM;EACvBhC,IAAI,EAAE8B,kBAAS,CAACE,MAAM,CAACC,UAAU;EACjChC,QAAQ,EAAE6B,kBAAS,CAACC,IAAI;EACxB7B,YAAY,EAAE4B,kBAAS,CAACC,IAAI;EAC5B5B,KAAK,EAAE2B,kBAAS,CAACC,IAAI;EACrB3B,IAAI,EAAE0B,kBAAS,CAACI,KAAK,CAAC,CAAC7B,qBAAQ,EAAEM,kBAAK,EAAEK,mBAAM,CAAC,CAAC;EAChDV,KAAK,EAAEwB,kBAAS,CAACK,SAAS,CAAC,CAACL,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACC,IAAI,CAAC,CAAC;EAC9DxB,QAAQ,EAAEuB,kBAAS,CAACM;AACtB,CAAC"}
+{"version":3,"file":"InputOption.js","names":["InputOption","checked","disabled","indeterminate","label","name","required","showRequired","small","type","CHECKBOX","value","onChange","others","Primitive","Checkbox","RADIO","Radio","Switch","handleChange","event","SWITCH","includes","role","styles","style","inputOption","className","ICON","CHECK","REMOVE","icon","undefined","displayName","propTypes","PropTypes","bool","string","isRequired","oneOf","oneOfType","func"],"sources":["../../../src/components/InputOption/InputOption.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Checkbox, Icon, ICON, Pressable, Radio, Switch } from '../../primitives';\nimport { Label } from '../InputText/partials';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\nimport style from './InputOption.module.css';\n\nconst InputOption = ({\n  checked,\n  disabled,\n  indeterminate,\n  label,\n  name,\n  required,\n  showRequired = false,\n  small,\n  type = CHECKBOX,\n  value = '',\n  onChange = () => {},\n  ...others\n}) => {\n  const Primitive = type === CHECKBOX ? Checkbox : type === RADIO ? Radio : Switch;\n\n  const handleChange = (event) => {\n    onChange([CHECKBOX, SWITCH].includes(type) ? !checked : value, event);\n  };\n\n  return (\n    <Pressable\n      {...others}\n      role={others.role || 'input-option'}\n      preventDefault={false}\n      onPress={handleChange}\n      className={styles(style.inputOption, others.className)}\n    >\n      <Primitive\n        checked={checked || (type === CHECKBOX && indeterminate)}\n        disabled={disabled}\n        name={name}\n        type={type}\n        value={value}\n      >\n        {type === CHECKBOX && (checked || indeterminate) ? (\n          <Icon value={checked ? ICON.CHECK : ICON.REMOVE} className={style.icon} />\n        ) : undefined}\n      </Primitive>\n      {label && (\n        <Label\n          action={!small}\n          small={small}\n          {...{ disabled, label, required: showRequired && required }}\n          className={style.label}\n        />\n      )}\n    </Pressable>\n  );\n};\n\nInputOption.displayName = 'Component:InputOption';\n\nInputOption.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  indeterminate: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  showRequired: PropTypes.bool,\n  small: PropTypes.bool,\n  type: PropTypes.oneOf([CHECKBOX, RADIO, SWITCH]),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onChange: PropTypes.func,\n};\n\nexport { InputOption };\n"],"mappings":"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"}

package/build/components/InputText/InputText.js

@@ -119,6 +119,7 @@ var InputText = function InputText(_ref) {
     onEnter: handleEnter,
     onLeave: handleLeave
   })), markdown && !inputMode && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    markdown: true,
     onClick: function onClick() {
       return setInputMode(true);
     },

package/build/components/InputText/InputText.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","markdown","multiLine","showRequired","showState","success","type","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","password","setPassword","inputMode","setInputMode","handleChange","value","event","handleEnter","handleLeave","handlePress","is","search","undefined","has","length","stateIcon","role","styles","style","inputContainer","className","inputBorder","ICON","SEARCH","left","content","required","input","withLabel","MARKDOWN","EYE_CLOSE","EYE_OPEN","CLOSE","displayName","propTypes","PropTypes","bool","string","func","name","isRequired"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICON, Icon, Input, Pressable, Text, View } from '../../primitives';\nimport style from './InputText.module.css';\nimport { Hint, IconState, Label } from './partials';\n\nconst InputText = ({\n  disabled,\n  error,\n  hint,\n  icon,\n  label,\n  markdown,\n  multiLine,\n  showRequired = false,\n  showState = true,\n  success,\n  type,\n  warning,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n  const [password, setPassword] = useState(true);\n  const [inputMode, setInputMode] = useState(true);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const handlePress = (event) => {\n    if (is.password) setPassword(!password);\n    else if (is.search) onChange(undefined, event);\n  };\n\n  const is = {\n    password: type === 'password',\n    search: type === 'search',\n  };\n\n  const has = {\n    icon: !!icon || is.search,\n    label: !!label,\n    value: others.value !== undefined && others.value?.length > 0,\n    stateIcon: showState && (error || success || warning),\n  };\n\n  return (\n    <View\n      role={others.role || 'input-text'}\n      className={styles(style.inputContainer, others.className)}\n      style={others.style}\n    >\n      <View\n        row\n        className={styles(\n          style.inputBorder,\n          disabled && style.disabled,\n          error && style.error,\n          focus && !error && style.focus,\n        )}\n      >\n        {has.icon && (\n          <Icon\n            value={icon || ICON.SEARCH}\n            className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n          />\n        )}\n        <View wide className={style.content}>\n          {label && (\n            <Label\n              {...{ disabled, error, focus, label, required: showRequired && others.required, value: others.value }}\n            />\n          )}\n\n          {inputMode && (\n            <Input\n              {...{ disabled, multiLine, ...others }}\n              type={!is.password || password ? type : 'text'}\n              value={others.value || ''}\n              className={styles(style.input, has.label && style.withLabel, multiLine && style.multiLine)}\n              onChange={handleChange}\n              onEnter={handleEnter}\n              onLeave={handleLeave}\n            />\n          )}\n          {markdown && !inputMode && (\n            <Text\n              onClick={() => setInputMode(true)}\n              className={styles(style.input, has.label && style.withLabel, multiLine && style.multiLine)}\n            >\n              {others.value}\n            </Text>\n          )}\n        </View>\n\n        {markdown && (\n          <Pressable onPress={() => setInputMode(!inputMode)}>\n            <Icon value={ICON.MARKDOWN} className={styles(style.icon, inputMode && style.disabled)} />\n          </Pressable>\n        )}\n\n        {(is.password || (is.search && has.value)) && !disabled && (\n          <Pressable tabIndex={-1} onPress={handlePress}>\n            <Icon\n              value={is.password ? (password ? ICON.EYE_CLOSE : ICON.EYE_OPEN) : ICON.CLOSE}\n              className={style.icon}\n            />\n          </Pressable>\n        )}\n\n        {has.stateIcon && <IconState {...{ error, success, warning }} />}\n      </View>\n\n      {hint && <Hint {...{ disabled, error, hint }} />}\n    </View>\n  );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  icon: PropTypes.func,\n  label: PropTypes.string,\n  markdown: PropTypes.bool,\n  multiLine: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  showRequired: PropTypes.bool,\n  showState: PropTypes.bool,\n  success: PropTypes.bool,\n  type: PropTypes.string,\n  warning: PropTypes.bool,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":"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"}
+{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","markdown","multiLine","showRequired","showState","success","type","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","password","setPassword","inputMode","setInputMode","handleChange","value","event","handleEnter","handleLeave","handlePress","is","search","undefined","has","length","stateIcon","role","styles","style","inputContainer","className","inputBorder","ICON","SEARCH","left","content","required","input","withLabel","MARKDOWN","EYE_CLOSE","EYE_OPEN","CLOSE","displayName","propTypes","PropTypes","bool","string","func","name","isRequired"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICON, Icon, Input, Pressable, Text, View } from '../../primitives';\nimport style from './InputText.module.css';\nimport { Hint, IconState, Label } from './partials';\n\nconst InputText = ({\n  disabled,\n  error,\n  hint,\n  icon,\n  label,\n  markdown,\n  multiLine,\n  showRequired = false,\n  showState = true,\n  success,\n  type,\n  warning,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n  const [password, setPassword] = useState(true);\n  const [inputMode, setInputMode] = useState(true);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const handlePress = (event) => {\n    if (is.password) setPassword(!password);\n    else if (is.search) onChange(undefined, event);\n  };\n\n  const is = {\n    password: type === 'password',\n    search: type === 'search',\n  };\n\n  const has = {\n    icon: !!icon || is.search,\n    label: !!label,\n    value: others.value !== undefined && others.value?.length > 0,\n    stateIcon: showState && (error || success || warning),\n  };\n\n  return (\n    <View\n      role={others.role || 'input-text'}\n      className={styles(style.inputContainer, others.className)}\n      style={others.style}\n    >\n      <View\n        row\n        className={styles(\n          style.inputBorder,\n          disabled && style.disabled,\n          error && style.error,\n          focus && !error && style.focus,\n        )}\n      >\n        {has.icon && (\n          <Icon\n            value={icon || ICON.SEARCH}\n            className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n          />\n        )}\n        <View wide className={style.content}>\n          {label && (\n            <Label\n              {...{ disabled, error, focus, label, required: showRequired && others.required, value: others.value }}\n            />\n          )}\n\n          {inputMode && (\n            <Input\n              {...{ disabled, multiLine, ...others }}\n              type={!is.password || password ? type : 'text'}\n              value={others.value || ''}\n              className={styles(style.input, has.label && style.withLabel, multiLine && style.multiLine)}\n              onChange={handleChange}\n              onEnter={handleEnter}\n              onLeave={handleLeave}\n            />\n          )}\n          {markdown && !inputMode && (\n            <Text\n              markdown\n              onClick={() => setInputMode(true)}\n              className={styles(style.input, has.label && style.withLabel, multiLine && style.multiLine)}\n            >\n              {others.value}\n            </Text>\n          )}\n        </View>\n\n        {markdown && (\n          <Pressable onPress={() => setInputMode(!inputMode)}>\n            <Icon value={ICON.MARKDOWN} className={styles(style.icon, inputMode && style.disabled)} />\n          </Pressable>\n        )}\n\n        {(is.password || (is.search && has.value)) && !disabled && (\n          <Pressable tabIndex={-1} onPress={handlePress}>\n            <Icon\n              value={is.password ? (password ? ICON.EYE_CLOSE : ICON.EYE_OPEN) : ICON.CLOSE}\n              className={style.icon}\n            />\n          </Pressable>\n        )}\n\n        {has.stateIcon && <IconState {...{ error, success, warning }} />}\n      </View>\n\n      {hint && <Hint {...{ disabled, error, hint }} />}\n    </View>\n  );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  icon: PropTypes.func,\n  label: PropTypes.string,\n  markdown: PropTypes.bool,\n  multiLine: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  showRequired: PropTypes.bool,\n  showState: PropTypes.bool,\n  success: PropTypes.bool,\n  type: PropTypes.string,\n  warning: PropTypes.bool,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PRELOAD_IMAGES = void 0;
+var PRELOAD_IMAGES = 2;
+exports.PRELOAD_IMAGES = PRELOAD_IMAGES;
+//# sourceMappingURL=Slider.constants.js.map

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

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

package/build/components/Slider/Slider.js

@@ -0,0 +1,190 @@
+"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.Slider = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _helpers = require("../../helpers");
+var _hooks = require("../../hooks");
+var _primitives = require("../../primitives");
+var _helpers2 = require("./helpers");
+var _Slider = require("./Slider.constants");
+var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
+var _excluded = ["auto", "captions", "fullScreen", "height", "images", "index", "thumbnails", "width", "onChange", "onFullScreen"];
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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; }
+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 interval;
+var timeout;
+var Slider = function Slider(_ref) {
+  var _ref$auto = _ref.auto,
+    auto = _ref$auto === void 0 ? false : _ref$auto,
+    _ref$captions = _ref.captions,
+    captions = _ref$captions === void 0 ? [] : _ref$captions,
+    _ref$fullScreen = _ref.fullScreen,
+    propFullScreen = _ref$fullScreen === void 0 ? false : _ref$fullScreen,
+    _ref$height = _ref.height,
+    propHeight = _ref$height === void 0 ? 240 : _ref$height,
+    _ref$images = _ref.images,
+    images = _ref$images === void 0 ? [] : _ref$images,
+    _ref$index = _ref.index,
+    propIndex = _ref$index === void 0 ? 0 : _ref$index,
+    _ref$thumbnails = _ref.thumbnails,
+    thumbnails = _ref$thumbnails === void 0 ? [] : _ref$thumbnails,
+    _ref$width = _ref.width,
+    propWidth = _ref$width === void 0 ? 320 : _ref$width,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    _ref$onFullScreen = _ref.onFullScreen,
+    onFullScreen = _ref$onFullScreen === void 0 ? function () {} : _ref$onFullScreen,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var _useDevice = (0, _hooks.useDevice)(),
+    screenHeight = _useDevice.height,
+    isDesktop = _useDevice.isDesktop,
+    isLandscape = _useDevice.isLandscape,
+    screenWidth = _useDevice.width;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focus = _useState2[0],
+    setFocus = _useState2[1];
+  var _useState3 = (0, _react.useState)(propFullScreen),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fullScreen = _useState4[0],
+    setFullScreen = _useState4[1];
+  var _useState5 = (0, _react.useState)(propIndex),
+    _useState6 = _slicedToArray(_useState5, 2),
+    index = _useState6[0],
+    setIndex = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (auto) interval = setInterval(function () {
+      return setIndex(index < images.length - 1 ? index + 1 : 0);
+    }, 2000);
+    return function () {
+      return clearInterval(interval);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [auto, index]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useEffect)(function () {
+    return onChange(index);
+  }, [index]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useEffect)(function () {
+    return onFullScreen(fullScreen);
+  }, [fullScreen]);
+  var height = fullScreen ? screenHeight * (isLandscape ? 0.9 : 0.4) : propHeight;
+  var width = fullScreen ? screenWidth * (isLandscape ? 0.85 : 0.9) : propWidth;
+  var handleScroll = function handleScroll() {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      x = _ref2.x;
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      setIndex(x < width ? 0 : Math.round(x / width));
+    }, (0, _helpers2.getMotionExpand)());
+  };
+  return /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
+    role: "slider",
+    onMouseEnter: isDesktop ? function () {
+      return setFocus(true);
+    } : undefined,
+    onMouseLeave: isDesktop ? function () {
+      return setFocus(false);
+    } : undefined,
+    className: (0, _helpers.styles)(_SliderModule.default.container, fullScreen && _SliderModule.default.fullScreen, others.className),
+    style: _objectSpread(_objectSpread({}, !fullScreen ? others.style : undefined), {}, {
+      width: fullScreen ? screenWidth : width
+    })
+  }), !fullScreen && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    onPress: function onPress() {
+      return setIndex(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, {
+    horizontal: true,
+    scrollTo: index * Math.floor(width),
+    snap: true,
+    width: width,
+    onScroll: handleScroll,
+    className: _SliderModule.default.scrollView
+  }, images.map(function (image, imageIndex) {
+    return /*#__PURE__*/_react.default.createElement(_primitives.View, {
+      key: imageIndex,
+      className: _SliderModule.default.item
+    }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
+      role: "image",
+      onClick: function onClick() {
+        return setFullScreen(!fullScreen);
+      },
+      className: _SliderModule.default.image,
+      style: {
+        backgroundImage: fullScreen || imageIndex >= index - _Slider.PRELOAD_IMAGES && imageIndex <= index + _Slider.PRELOAD_IMAGES ? "url(".concat(image, ")") : undefined,
+        height: height,
+        width: width
+      }
+    }), captions[imageIndex] && /*#__PURE__*/_react.default.createElement(_primitives.View, {
+      className: _SliderModule.default.caption
+    }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      bold: true,
+      small: true,
+      className: _SliderModule.default.text
+    }, captions[imageIndex])));
+  })), !fullScreen && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    onPress: function onPress() {
+      return setIndex(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, {
+    value: _primitives.ICON.RIGHT
+  })), fullScreen && /*#__PURE__*/_react.default.createElement(_primitives.ScrollView, {
+    horizontal: true,
+    snap: true,
+    className: _SliderModule.default.thumbnails
+  }, images.map(function (image, imageIndex) {
+    return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+      key: imageIndex,
+      onPress: function onPress() {
+        return setIndex(imageIndex);
+      },
+      className: (0, _helpers.styles)(_SliderModule.default.thumbnail, index === imageIndex && _SliderModule.default.active),
+      style: {
+        backgroundImage: "url(".concat(thumbnails[imageIndex] || image, ")")
+      }
+    });
+  })));
+};
+exports.Slider = Slider;
+Slider.displayName = 'Component:Slider';
+Slider.propTypes = {
+  auto: _propTypes.default.bool,
+  captions: _propTypes.default.arrayOf(_propTypes.default.string),
+  fullScreen: _propTypes.default.bool,
+  height: _propTypes.default.number.isRequired,
+  images: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  index: _propTypes.default.number,
+  thumbnails: _propTypes.default.arrayOf(_propTypes.default.string),
+  width: _propTypes.default.number.isRequired,
+  onChange: _propTypes.default.func,
+  onFullScreen: _propTypes.default.func
+};
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","captions","fullScreen","propFullScreen","height","propHeight","images","index","propIndex","thumbnails","width","propWidth","onChange","onFullScreen","others","useDevice","screenHeight","isDesktop","isLandscape","screenWidth","useState","focus","setFocus","setFullScreen","setIndex","useEffect","setInterval","length","clearInterval","handleScroll","x","clearTimeout","setTimeout","Math","round","getMotionExpand","undefined","styles","style","container","className","button","hide","back","ICON","LEFT","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","text","forward","RIGHT","thumbnail","active","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  fullScreen: propFullScreen = false,\n  height: propHeight = 240,\n  images = [],\n  index: propIndex = 0,\n  thumbnails = [],\n  width: propWidth = 320,\n  onChange = () => {},\n  onFullScreen = () => {},\n  ...others\n}) => {\n  const { height: screenHeight, isDesktop, isLandscape, width: screenWidth } = useDevice();\n\n  const [focus, setFocus] = useState(false);\n  const [fullScreen, setFullScreen] = useState(propFullScreen);\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(() => onChange(index), [index]);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => onFullScreen(fullScreen), [fullScreen]);\n\n  const height = fullScreen ? screenHeight * (isLandscape ? 0.9 : 0.4) : propHeight;\n\n  const width = fullScreen ? screenWidth * (isLandscape ? 0.85 : 0.9) : propWidth;\n\n  const handleScroll = ({ x } = {}) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => {\n      setIndex(x < width ? 0 : Math.round(x / width));\n    }, getMotionExpand());\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, fullScreen && style.fullScreen, others.className)}\n      style={{ ...(!fullScreen ? others.style : undefined), width: fullScreen ? screenWidth : width }}\n    >\n      {!fullScreen && (\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\n      <ScrollView\n        horizontal\n        scrollTo={index * Math.floor(width)}\n        snap\n        width={width}\n        onScroll={handleScroll}\n        className={style.scrollView}\n      >\n        {images.map((image, imageIndex) => (\n          <View key={imageIndex} className={style.item}>\n            <View\n              role=\"image\"\n              onClick={() => setFullScreen(!fullScreen)}\n              className={style.image}\n              style={{\n                backgroundImage:\n                  fullScreen || (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.text}>\n                  {captions[imageIndex]}\n                </Text>\n              </View>\n            )}\n          </View>\n        ))}\n      </ScrollView>\n\n      {!fullScreen && (\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      )}\n\n      {fullScreen && (\n        <ScrollView horizontal snap className={style.thumbnails}>\n          {images.map((image, imageIndex) => (\n            <Pressable\n              key={imageIndex}\n              onPress={() => setIndex(imageIndex)}\n              className={styles(style.thumbnail, index === imageIndex && style.active)}\n              style={{ backgroundImage: `url(${thumbnails[imageIndex] || image})` }}\n            />\n          ))}\n        </ScrollView>\n      )}\n    </View>\n  );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n  auto: PropTypes.bool,\n  captions: PropTypes.arrayOf(PropTypes.string),\n  fullScreen: PropTypes.bool,\n  height: PropTypes.number.isRequired,\n  images: PropTypes.arrayOf(PropTypes.string).isRequired,\n  index: PropTypes.number,\n  thumbnails: PropTypes.arrayOf(PropTypes.string),\n  width: PropTypes.number.isRequired,\n  onChange: PropTypes.func,\n  onFullScreen: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":"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"}

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

@@ -0,0 +1,121 @@
+.container {
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.container.fullScreen {
+  background-color: var(--mirai-ui-slider-background);
+  height: 100vh;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+}
+
+.button {
+  align-items: center;
+  background-color: var(--mirai-ui-slider-overlay);
+  border-radius: 50%;
+  display: flex;
+  height: var(--mirai-ui-button-squared);
+  justify-content: center;
+  position: absolute;
+  top: calc(50% - calc(var(--mirai-ui-button-squared) / 2));
+  transition: transform var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
+  width: var(--mirai-ui-button-squared);
+  z-index: var(--mirai-ui-layer-M);
+}
+
+.button.hide {
+  transform: scale(0);
+}
+
+.button > * {
+  color: var(--mirai-ui-slider-color);
+}
+
+.button.back {
+  left: var(--mirai-ui-space-M);
+}
+
+.button.forward {
+  right: var(--mirai-ui-space-M);
+}
+
+.scrollView {
+}
+
+.fullScreen .scrollView {
+  gap: var(--mirai-ui-space-M);
+}
+
+.item {
+  position: relative;
+}
+
+.item .image {
+  background-color: var(--mirai-ui-content-background);
+  background-size: cover;
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+}
+
+.fullScreen .item .image {
+  border-radius: var(--mirai-ui-slider-border-radius);
+}
+
+.item .caption {
+  align-items: center;
+  bottom: var(--mirai-ui-space-S);
+  left: var(--mirai-ui-space-S);
+  position: absolute;
+  right: var(--mirai-ui-space-S);
+}
+
+.item .caption .text {
+  background-color: var(--mirai-ui-slider-overlay);
+  border-radius: var(--mirai-ui-slider-border-radius);
+  color: var(--mirai-ui-slider-color);
+  padding: calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-space-XS);
+}
+
+.thumbnails {
+  margin-top: var(--mirai-ui-space-S);
+  gap: var(--mirai-ui-space-S);
+  max-width: 90vw;
+}
+
+.thumbnail {
+  background-size: cover;
+  border-radius: var(--mirai-ui-slider-border-radius);
+  min-height: var(--mirai-ui-space-XL);
+  opacity: 0.66;
+  transition: all var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
+  width: var(--mirai-ui-space-XXL);
+  min-width: var(--mirai-ui-space-XXL);
+}
+
+.thumbnail:hover {
+  opacity: 1;
+}
+
+.thumbnail.active {
+  box-shadow: inset 0 0 0 2px var(--mirai-ui-slider-color);
+  opacity: 1;
+}
+
+/* S */
+@media only screen and (max-width: 430px) {
+  .thumbnails {
+    position: absolute;
+    bottom: var(--mirai-ui-space-M);
+  }
+}
+
+/* M & L */
+@media only screen and (min-width: 431px) {
+}