@mirai/ui 1.0.74 → 1.0.76

package/README.md

@@ -669,6 +669,7 @@ const MyComponent = () => {
 
 A modal component receiving the following props:
 
+- `blur:bool` if you want use a _glashmorphism_ effect in the overflow
 - `children:node`
 - `fit:bool` if you want use fit width with the content
 - `overflow:bool` wraps all modal in a semi-transparent layer

package/build/components/Calendar/Calendar.Month.js

@@ -58,6 +58,7 @@ var Month = function Month(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: _primitives.ICON.LEFT
   })), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    bold: true,
     headline: true,
     level: 4,
     className: _CalendarModule.default.title

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.Month.js","names":["Month","focus","instance","selected","disabledPast","format","from","locale","range","to","onChange","onFocus","onNext","onPrevious","others","useDevice","isDesktop","weekNumber","getWeekNumber","testID","styles","style","month","className","header","undefined","ICON","LEFT","title","getHeader","pressable","RIGHT","VISIBLE_WEEKS","map","week","getMonth","getFullYear","displayName","propTypes","captions","PropTypes","shape","any","disabledDates","arrayOf","string","bool","instanceOf","Date","value","oneOfType","func"],"sources":["../../../src/components/Calendar/Calendar.Month.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { VISIBLE_WEEKS } from './Calendar.constants';\nimport style from './Calendar.module.css';\nimport { Week } from './Calendar.Week';\nimport { Weekdays } from './Calendar.Weekdays';\nimport { getHeader, getWeekNumber } from './helpers';\n\nexport const Month = ({\n  focus,\n  instance,\n  selected,\n  disabledPast,\n  format,\n  from,\n  locale,\n  range = false,\n  to,\n  onChange = () => {},\n  onFocus = () => {},\n  onNext,\n  onPrevious,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n  const weekNumber = getWeekNumber(instance);\n\n  const { ['data-testid']: testID } = others;\n\n  return (\n    <View className={styles(style.month, others.className)}>\n      <View row className={style.header}>\n        {onPrevious && (\n          <Pressable onPress={onPrevious} data-testid={testID ? `${testID}-previous` : undefined}>\n            <Icon value={ICON.LEFT} />\n          </Pressable>\n        )}\n        <Text headline level={4} className={style.title}>\n          {getHeader(instance, locale)}\n        </Text>\n        {onNext && (\n          <Pressable onPress={onNext} className={style.pressable} data-testid={testID ? `${testID}-next` : undefined}>\n            <Icon value={ICON.RIGHT} />\n          </Pressable>\n        )}\n      </View>\n\n      {isDesktop && <Weekdays locale={locale} />}\n\n      {VISIBLE_WEEKS.map((week) => (\n        <Week\n          {...{\n            ...others,\n            disabledPast,\n            focus,\n            format,\n            from,\n            locale,\n            to,\n            range,\n            selected,\n          }}\n          key={week}\n          month={instance.getMonth()}\n          number={weekNumber + week}\n          year={instance.getFullYear()}\n          onFocus={onFocus}\n          onPress={onChange}\n        />\n      ))}\n    </View>\n  );\n};\n\nMonth.displayName = 'Component:Calendar:Month';\n\nMonth.propTypes = {\n  captions: PropTypes.shape({}),\n  focus: PropTypes.any,\n  instance: PropTypes.any,\n  selected: PropTypes.any,\n  disabledDates: PropTypes.arrayOf(PropTypes.string),\n  disabledPast: PropTypes.bool,\n  format: PropTypes.string,\n  from: PropTypes.instanceOf(Date),\n  locale: PropTypes.string,\n  range: PropTypes.bool,\n  to: PropTypes.instanceOf(Date),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),\n  onChange: PropTypes.func,\n  onFocus: PropTypes.func,\n  onNext: PropTypes.func,\n  onPrevious: PropTypes.func,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Calendar.Month.js","names":["Month","focus","instance","selected","disabledPast","format","from","locale","range","to","onChange","onFocus","onNext","onPrevious","others","useDevice","isDesktop","weekNumber","getWeekNumber","testID","styles","style","month","className","header","undefined","ICON","LEFT","title","getHeader","pressable","RIGHT","VISIBLE_WEEKS","map","week","getMonth","getFullYear","displayName","propTypes","captions","PropTypes","shape","any","disabledDates","arrayOf","string","bool","instanceOf","Date","value","oneOfType","func"],"sources":["../../../src/components/Calendar/Calendar.Month.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { VISIBLE_WEEKS } from './Calendar.constants';\nimport style from './Calendar.module.css';\nimport { Week } from './Calendar.Week';\nimport { Weekdays } from './Calendar.Weekdays';\nimport { getHeader, getWeekNumber } from './helpers';\n\nexport const Month = ({\n  focus,\n  instance,\n  selected,\n  disabledPast,\n  format,\n  from,\n  locale,\n  range = false,\n  to,\n  onChange = () => {},\n  onFocus = () => {},\n  onNext,\n  onPrevious,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n  const weekNumber = getWeekNumber(instance);\n\n  const { ['data-testid']: testID } = others;\n\n  return (\n    <View className={styles(style.month, others.className)}>\n      <View row className={style.header}>\n        {onPrevious && (\n          <Pressable onPress={onPrevious} data-testid={testID ? `${testID}-previous` : undefined}>\n            <Icon value={ICON.LEFT} />\n          </Pressable>\n        )}\n        <Text bold headline level={4} className={style.title}>\n          {getHeader(instance, locale)}\n        </Text>\n        {onNext && (\n          <Pressable onPress={onNext} className={style.pressable} data-testid={testID ? `${testID}-next` : undefined}>\n            <Icon value={ICON.RIGHT} />\n          </Pressable>\n        )}\n      </View>\n\n      {isDesktop && <Weekdays locale={locale} />}\n\n      {VISIBLE_WEEKS.map((week) => (\n        <Week\n          {...{\n            ...others,\n            disabledPast,\n            focus,\n            format,\n            from,\n            locale,\n            to,\n            range,\n            selected,\n          }}\n          key={week}\n          month={instance.getMonth()}\n          number={weekNumber + week}\n          year={instance.getFullYear()}\n          onFocus={onFocus}\n          onPress={onChange}\n        />\n      ))}\n    </View>\n  );\n};\n\nMonth.displayName = 'Component:Calendar:Month';\n\nMonth.propTypes = {\n  captions: PropTypes.shape({}),\n  focus: PropTypes.any,\n  instance: PropTypes.any,\n  selected: PropTypes.any,\n  disabledDates: PropTypes.arrayOf(PropTypes.string),\n  disabledPast: PropTypes.bool,\n  format: PropTypes.string,\n  from: PropTypes.instanceOf(Date),\n  locale: PropTypes.string,\n  range: PropTypes.bool,\n  to: PropTypes.instanceOf(Date),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),\n  onChange: PropTypes.func,\n  onFocus: PropTypes.func,\n  onNext: PropTypes.func,\n  onPrevious: PropTypes.func,\n};\n"],"mappings":"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"}

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

@@ -15,7 +15,7 @@ exports[`component:<Calendar> desktop environment prop:captions 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -691,7 +691,7 @@ exports[`component:<Calendar> desktop environment prop:captions 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -1418,7 +1418,7 @@ exports[`component:<Calendar> desktop environment prop:disabledDates 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -2004,7 +2004,7 @@ exports[`component:<Calendar> desktop environment prop:disabledDates 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -2663,7 +2663,7 @@ exports[`component:<Calendar> desktop environment prop:disabledPast 1`] = `
             </span>
           </button>
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -3249,7 +3249,7 @@ exports[`component:<Calendar> desktop environment prop:disabledPast 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -3883,7 +3883,7 @@ exports[`component:<Calendar> desktop environment prop:format 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -4469,7 +4469,7 @@ exports[`component:<Calendar> desktop environment prop:format 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -5103,7 +5103,7 @@ exports[`component:<Calendar> desktop environment prop:from 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -5689,7 +5689,7 @@ exports[`component:<Calendar> desktop environment prop:from 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -6323,7 +6323,7 @@ exports[`component:<Calendar> desktop environment prop:highlights 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -6909,7 +6909,7 @@ exports[`component:<Calendar> desktop environment prop:highlights 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -7543,7 +7543,7 @@ exports[`component:<Calendar> desktop environment prop:locale 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -8129,7 +8129,7 @@ exports[`component:<Calendar> desktop environment prop:locale 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -8763,7 +8763,7 @@ exports[`component:<Calendar> desktop environment prop:locale en-US 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             April 1980
           </h4>
@@ -9349,7 +9349,7 @@ exports[`component:<Calendar> desktop environment prop:locale en-US 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             May 1980
           </h4>
@@ -9983,7 +9983,7 @@ exports[`component:<Calendar> desktop environment prop:months 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -10569,7 +10569,7 @@ exports[`component:<Calendar> desktop environment prop:months 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -11165,7 +11165,7 @@ exports[`component:<Calendar> desktop environment prop:months 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             junio 1980
           </h4>
@@ -11789,7 +11789,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:disabledDates
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -12375,7 +12375,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:disabledDates
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -13009,7 +13009,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:rangeMaxDays 1
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -13595,7 +13595,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:rangeMaxDays 1
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -14229,7 +14229,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:rangeMinDays 1
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -14815,7 +14815,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:rangeMinDays 1
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -15449,7 +15449,7 @@ exports[`component:<Calendar> desktop environment prop:range renders 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -16035,7 +16035,7 @@ exports[`component:<Calendar> desktop environment prop:range renders 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -16669,7 +16669,7 @@ exports[`component:<Calendar> desktop environment prop:to 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -17255,7 +17255,7 @@ exports[`component:<Calendar> desktop environment prop:to 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -17864,7 +17864,7 @@ exports[`component:<Calendar> desktop environment renders 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -18450,7 +18450,7 @@ exports[`component:<Calendar> desktop environment renders 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -19084,7 +19084,7 @@ exports[`component:<Calendar> inherit:className 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -19670,7 +19670,7 @@ exports[`component:<Calendar> inherit:className 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -20304,7 +20304,7 @@ exports[`component:<Calendar> mobile environment prop:captions 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -20980,7 +20980,7 @@ exports[`component:<Calendar> mobile environment prop:captions 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -21707,7 +21707,7 @@ exports[`component:<Calendar> mobile environment prop:disabledDates 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -22293,7 +22293,7 @@ exports[`component:<Calendar> mobile environment prop:disabledDates 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -22952,7 +22952,7 @@ exports[`component:<Calendar> mobile environment prop:disabledPast 1`] = `
             </span>
           </button>
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -23538,7 +23538,7 @@ exports[`component:<Calendar> mobile environment prop:disabledPast 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -24172,7 +24172,7 @@ exports[`component:<Calendar> mobile environment prop:format 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -24758,7 +24758,7 @@ exports[`component:<Calendar> mobile environment prop:format 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -25392,7 +25392,7 @@ exports[`component:<Calendar> mobile environment prop:from 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -25978,7 +25978,7 @@ exports[`component:<Calendar> mobile environment prop:from 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -26612,7 +26612,7 @@ exports[`component:<Calendar> mobile environment prop:highlights 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -27198,7 +27198,7 @@ exports[`component:<Calendar> mobile environment prop:highlights 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -27832,7 +27832,7 @@ exports[`component:<Calendar> mobile environment prop:locale 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -28418,7 +28418,7 @@ exports[`component:<Calendar> mobile environment prop:locale 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -29052,7 +29052,7 @@ exports[`component:<Calendar> mobile environment prop:locale en-US 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             April 1980
           </h4>
@@ -29638,7 +29638,7 @@ exports[`component:<Calendar> mobile environment prop:locale en-US 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             May 1980
           </h4>
@@ -30272,7 +30272,7 @@ exports[`component:<Calendar> mobile environment prop:months 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -30858,7 +30858,7 @@ exports[`component:<Calendar> mobile environment prop:months 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -31454,7 +31454,7 @@ exports[`component:<Calendar> mobile environment prop:months 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             junio 1980
           </h4>
@@ -32078,7 +32078,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:disabledDates 1
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -32664,7 +32664,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:disabledDates 1
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -33298,7 +33298,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:rangeMaxDays 1`
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -33884,7 +33884,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:rangeMaxDays 1`
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -34518,7 +34518,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:rangeMinDays 1`
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -35104,7 +35104,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:rangeMinDays 1`
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -35738,7 +35738,7 @@ exports[`component:<Calendar> mobile environment prop:range renders 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -36324,7 +36324,7 @@ exports[`component:<Calendar> mobile environment prop:range renders 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -36958,7 +36958,7 @@ exports[`component:<Calendar> mobile environment prop:to 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -37544,7 +37544,7 @@ exports[`component:<Calendar> mobile environment prop:to 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -38153,7 +38153,7 @@ exports[`component:<Calendar> mobile environment renders 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -38739,7 +38739,7 @@ exports[`component:<Calendar> mobile environment renders 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>
@@ -39374,7 +39374,7 @@ exports[`component:<Calendar> testID 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             abril 1980
           </h4>
@@ -39960,7 +39960,7 @@ exports[`component:<Calendar> testID 1`] = `
           class="view row header"
         >
           <h4
-            class="text headline-4 title"
+            class="text bold headline-4 title"
           >
             mayo 1980
           </h4>

package/build/components/Modal/Modal.js

@@ -1,23 +1,28 @@
 "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.Modal = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _helpers = require("../../helpers");
 var _hooks = require("../../hooks");
 var _primitives = require("../../primitives");
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
-var _excluded = ["children", "fit", "overflow", "portal", "title", "visible", "onBack", "onClose"];
+var _excluded = ["blur", "children", "fit", "overflow", "portal", "title", "visible", "onBack", "onClose"];
+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 _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 Modal = function Modal(_ref) {
-  var children = _ref.children,
+  var _ref$blur = _ref.blur,
+    blur = _ref$blur === void 0 ? false : _ref$blur,
+    children = _ref.children,
     _ref$fit = _ref.fit,
     fit = _ref$fit === void 0 ? false : _ref$fit,
     _ref$overflow = _ref.overflow,
@@ -31,13 +36,16 @@ var Modal = function Modal(_ref) {
     others = _objectWithoutProperties(_ref, _excluded);
   var _useDevice = (0, _hooks.useDevice)(),
     isDesktop = _useDevice.isDesktop;
+  (0, _react.useEffect)(function () {
+    document.body.style.overflow = visible ? 'hidden' : 'inherit';
+  }, [visible]);
   var renderer = _helpers.IS_JEST || !portal ? function (jsx) {
     return jsx;
   } : _reactDom.default.createPortal;
   var testId = others['data-testid'];
   return renderer( /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true,
-    className: (0, _helpers.styles)(_ModalModule.default.container, overflow && _ModalModule.default.overflow, visible && _ModalModule.default.visible)
+    className: (0, _helpers.styles)(_ModalModule.default.container, overflow && _ModalModule.default.overflow, overflow && blur && _ModalModule.default.blur, visible && _ModalModule.default.visible)
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
     fit: true,
     className: (0, _helpers.styles)(_ModalModule.default.modal, !fit && _ModalModule.default.calcWidth, visible && _ModalModule.default.visible, others.className)
@@ -63,10 +71,11 @@ var Modal = function Modal(_ref) {
 };
 exports.Modal = Modal;
 Modal.propTypes = {
+  blur: _propTypes.default.bool,
   children: _propTypes.default.node,
   fit: _propTypes.default.bool,
-  portal: _propTypes.default.bool,
   overflow: _propTypes.default.bool,
+  portal: _propTypes.default.bool,
   title: _propTypes.default.string,
   visible: _propTypes.default.bool,
   onBack: _propTypes.default.func,

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","children","fit","overflow","portal","title","visible","onBack","onClose","others","useDevice","isDesktop","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","styles","style","container","modal","calcWidth","className","header","undefined","ICON","LEFT","icon","left","right","CLOSE","EXPAND_MORE","document","body","propTypes","PropTypes","node","bool","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  children,\n  fit = false,\n  overflow = true,\n  portal = false,\n  title,\n  visible,\n  onBack,\n  onClose,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { ['data-testid']: testId } = others;\n\n  return renderer(\n    <View row className={styles(style.container, overflow && style.overflow, visible && style.visible)}>\n      <View\n        {...others}\n        fit\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View row className={style.header}>\n            {onBack && (\n              <Pressable onPress={onBack} data-testid={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Pressable>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Pressable onPress={onClose} data-testid={testId ? `${testId}-button-close` : undefined}>\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Pressable>\n            )}\n          </View>\n        )}\n        {children}\n      </View>\n    </View>,\n    document.body,\n  );\n};\n\nModal.propTypes = {\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  portal: PropTypes.bool,\n  overflow: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","overflow","portal","title","visible","onBack","onClose","others","useDevice","isDesktop","useEffect","document","body","style","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","styles","container","modal","calcWidth","className","header","undefined","ICON","LEFT","icon","left","right","CLOSE","EXPAND_MORE","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  fit = false,\n  overflow = true,\n  portal = false,\n  title,\n  visible,\n  onBack,\n  onClose,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  useEffect(() => {\n    document.body.style.overflow = visible ? 'hidden' : 'inherit';\n  }, [visible]);\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { ['data-testid']: testId } = others;\n\n  return renderer(\n    <View\n      row\n      className={styles(\n        style.container,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n      )}\n    >\n      <View\n        {...others}\n        fit\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View row className={style.header}>\n            {onBack && (\n              <Pressable onPress={onBack} data-testid={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Pressable>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Pressable onPress={onClose} data-testid={testId ? `${testId}-button-close` : undefined}>\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Pressable>\n            )}\n          </View>\n        )}\n        {children}\n      </View>\n    </View>,\n    document.body,\n  );\n};\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}

package/build/components/Modal/Modal.module.css

@@ -9,6 +9,10 @@
   z-index: var(--mirai-ui-modal-layer);
 }
 
+.container.visible {
+  pointer-events: all;
+}
+
 .header {
   align-items: center;
   border-bottom: solid var(--mirai-ui-border-width) var(--mirai-ui-content-border);
@@ -53,14 +57,18 @@
 .overflow {
   background-color: var(--mirai-ui-modal-overflow);
   opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+  transition: backdrop-filter var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
 }
 
-.container.visible {
+.overflow.visible {
   opacity: 1;
 }
 
+.overflow.blur.visible {
+  backdrop-filter: blur(4px);
+}
+
 /* S */
 @media only screen and (max-width: 430px) {
   .container {
@@ -73,6 +81,8 @@
   }
 
   .modal {
+    border-top-left-radius: var(--mirai-ui-modal-border-radius);
+    border-top-right-radius: var(--mirai-ui-modal-border-radius);
     transform: translateY(100%);
     width: 100%;
   }
@@ -90,7 +100,7 @@
   }
 }
 
-/* M */
+/* M & L */
 @media only screen and (min-width: 431px) {
   .container {
     align-items: center;

package/build/components/Modal/Modal.stories.js

@@ -24,6 +24,7 @@ var Story = function Story(props) {
 exports.Story = Story;
 Story.storyName = 'Modal';
 Story.args = _defineProperty({
+  blur: false,
   fit: false,
   overflow: true,
   portal: false,

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.js","names":["title","Story","props","storyName","args","fit","overflow","portal","visible","argTypes","onBack","action","onClose"],"sources":["../../../src/components/Modal/Modal.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Modal } from './Modal';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Modal {...props}>\n    <span className=\"children\">children</span>\n  </Modal>\n);\n\nStory.storyName = 'Modal';\n\nStory.args = {\n  fit: false,\n  overflow: true,\n  portal: false,\n  title: 'title',\n  visible: true,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onBack: { action: 'onBack' },\n  onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,oBAAC,YAAK,EAAKA,KAAK,eACd;IAAM,SAAS,EAAC;EAAU,cAAgB,CACpC;AAAA,CACT;AAAC;AAEFD,KAAK,CAACE,SAAS,GAAG,OAAO;AAEzBF,KAAK,CAACG,IAAI;EACRC,GAAG,EAAE,KAAK;EACVC,QAAQ,EAAE,IAAI;EACdC,MAAM,EAAE,KAAK;EACbP,KAAK,EAAE,OAAO;EACdQ,OAAO,EAAE;AAAI,GACZ,aAAa,EAAG,YAAY,CAC9B;AAEDP,KAAK,CAACQ,QAAQ,GAAG;EACfC,MAAM,EAAE;IAAEC,MAAM,EAAE;EAAS,CAAC;EAC5BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU;AAC/B,CAAC"}
+{"version":3,"file":"Modal.stories.js","names":["title","Story","props","storyName","args","blur","fit","overflow","portal","visible","argTypes","onBack","action","onClose"],"sources":["../../../src/components/Modal/Modal.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Modal } from './Modal';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Modal {...props}>\n    <span className=\"children\">children</span>\n  </Modal>\n);\n\nStory.storyName = 'Modal';\n\nStory.args = {\n  blur: false,\n  fit: false,\n  overflow: true,\n  portal: false,\n  title: 'title',\n  visible: true,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onBack: { action: 'onBack' },\n  onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,oBAAC,YAAK,EAAKA,KAAK,eACd;IAAM,SAAS,EAAC;EAAU,cAAgB,CACpC;AAAA,CACT;AAAC;AAEFD,KAAK,CAACE,SAAS,GAAG,OAAO;AAEzBF,KAAK,CAACG,IAAI;EACRC,IAAI,EAAE,KAAK;EACXC,GAAG,EAAE,KAAK;EACVC,QAAQ,EAAE,IAAI;EACdC,MAAM,EAAE,KAAK;EACbR,KAAK,EAAE,OAAO;EACdS,OAAO,EAAE;AAAI,GACZ,aAAa,EAAG,YAAY,CAC9B;AAEDR,KAAK,CAACS,QAAQ,GAAG;EACfC,MAAM,EAAE;IAAEC,MAAM,EAAE;EAAS,CAAC;EAC5BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU;AAC/B,CAAC"}

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

@@ -220,6 +220,18 @@ exports[`component:<Modal> prop:title 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Modal> prop:visible & prop:blur 1`] = `
+<DocumentFragment>
+  <div
+    class="view row container overflow blur visible"
+  >
+    <div
+      class="view fit modal calcWidth visible"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<Modal> prop:visible & prop:overflow (false) 1`] = `
 <DocumentFragment>
   <div
@@ -232,7 +244,7 @@ exports[`component:<Modal> prop:visible & prop:overflow (false) 1`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Modal> prop:visible 1`] = `
+exports[`component:<Modal> prop:visible renders 1`] = `
 <DocumentFragment>
   <div
     class="view row container overflow visible"

package/build/theme/default.theme.css

@@ -224,11 +224,11 @@
 
   /* Modal */
   --mirai-ui-modal-background: var(--mirai-ui-base);
-  --mirai-ui-modal-border-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-modal-border-radius: calc(var(--mirai-ui-border-radius) * 2);
   --mirai-ui-modal-header-padding: var(--mirai-ui-space-M);
   --mirai-ui-modal-icon: var(--mirai-ui-font-size-headline-2);
   --mirai-ui-modal-layer: var(--mirai-ui-layer-L);
-  --mirai-ui-modal-overflow: rgba(72, 72, 72, 0.15);
+  --mirai-ui-modal-overflow: rgba(72, 72, 72, 0.2);
   --mirai-ui-modal-shadow: var(--mirai-ui-shadow);
 
   /* Notification */

package/package.json

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