@mirai/ui 1.0.26 → 1.0.27

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

@@ -75,11 +75,11 @@ var Month = function Month(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     name: "Left"
   })), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-    bold: true,
     subheadline: true,
     className: _CalendarModule.default.title
   }, (0, _helpers2.getHeader)(instance, locale)), onNext && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    onPress: onNext
+    onPress: onNext,
+    className: _CalendarModule.default.pressable
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     name: "Right"
   }))), isDesktop && /*#__PURE__*/_react.default.createElement(_Calendar3.Weekdays, {

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","isDesktop","weekNumber","style","month","className","header","title","VISIBLE_WEEKS","map","week","getMonth","getFullYear","displayName","propTypes","captions","PropTypes","shape","any","disabledDates","arrayOf","string","bool","disabledWeekends","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, 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 = true,\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  return (\n    <View className={styles(style.month, others.className)}>\n      <View row className={style.header}>\n        {onPrevious && (\n          <Pressable onPress={onPrevious}>\n            <Icon name=\"Left\" />\n          </Pressable>\n        )}\n        <Text bold subheadline className={style.title}>\n          {getHeader(instance, locale)}\n        </Text>\n        {onNext && (\n          <Pressable onPress={onNext}>\n            <Icon name=\"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  disabledWeekends: 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","isDesktop","weekNumber","style","month","className","header","title","pressable","VISIBLE_WEEKS","map","week","getMonth","getFullYear","displayName","propTypes","captions","PropTypes","shape","any","disabledDates","arrayOf","string","bool","disabledWeekends","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, 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 = true,\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  return (\n    <View className={styles(style.month, others.className)}>\n      <View row className={style.header}>\n        {onPrevious && (\n          <Pressable onPress={onPrevious}>\n            <Icon name=\"Left\" />\n          </Pressable>\n        )}\n        <Text subheadline className={style.title}>\n          {getHeader(instance, locale)}\n        </Text>\n        {onNext && (\n          <Pressable onPress={onNext} className={style.pressable}>\n            <Icon name=\"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  disabledWeekends: 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/Calendar.js

@@ -27,7 +27,8 @@ var _Calendar2 = require("./Calendar.Weekdays");
 
 var _helpers2 = require("./helpers");
 
-var _excluded = ["disabledPast", "format", "from", "months", "locale", "range", "rangeMaxDays", "to", "value", "onChange", "onFocus", "onScroll"];
+var _excluded = ["disabledPast", "format", "from", "months", "locale", "range", "rangeMaxDays", "to", "value", "onChange", "onFocus", "onScroll"],
+    _excluded2 = ["className"];
 
 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); }
 
@@ -138,7 +139,10 @@ var Calendar = function Calendar(_ref) {
   var disabledPrevious = disabledPast && instanceTS <= todayMonthTS || from && instanceTS <= (0, _helpers2.getFirstDateOfMonth)((0, _locale.parseDate)(from, format)).getTime();
   var disabledNext = to && instanceTS >= (0, _helpers2.getFirstDateOfMonth)((0, _locale.parseDate)(to, format)).getTime();
 
-  var props = _objectSpread(_objectSpread({}, others), {}, {
+  var className = others.className,
+      props = _objectWithoutProperties(others, _excluded2);
+
+  props = _objectSpread(_objectSpread({}, props), {}, {
     disabledPast: disabledPast,
     focus: focus,
     format: format,
@@ -150,15 +154,15 @@ var Calendar = function Calendar(_ref) {
     onChange: handleChange,
     onFocus: isDesktop ? setFocus : undefined
   });
-
   return /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    "data-testid": others['data-testid']
+    "data-testid": others['data-testid'],
+    className: (0, _helpers.styles)(_CalendarModule.default.container, className)
   }, !isDesktop && /*#__PURE__*/_react.default.createElement(_Calendar2.Weekdays, {
     locale: locale
   }), /*#__PURE__*/_react.default.createElement(_primitives.ScrollView, {
-    onScroll: onScroll,
     horizontal: isDesktop,
-    className: (0, _helpers.styles)(_CalendarModule.default.scrollview, others.className)
+    className: _CalendarModule.default.scrollview,
+    onScroll: onScroll
   }, Array.from({
     length: months
   }, function (empty, index) {

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","names":["Calendar","disabledPast","format","from","months","locale","range","rangeMaxDays","to","value","onChange","onFocus","onScroll","others","isDesktop","focus","setFocus","instance","setInstance","undefined","selected","setSelected","date","length","handleChange","next","getTime","handleMonth","month","Date","getFullYear","getMonth","instanceTS","todayMonthTS","disabledPrevious","disabledNext","props","style","scrollview","className","Array","empty","index","displayName","propTypes","captions","PropTypes","shape","disabledDates","arrayOf","string","bool","disabledWeekends","highlights","number","rangeMinDays","oneOfType","func"],"sources":["../../../src/components/Calendar/Calendar.jsx"],"sourcesContent":["import { dateCalc, parseDate, UTC } from '@mirai/locale';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { ScrollView, View } from '../../primitives';\nimport style from './Calendar.module.css';\nimport { Month } from './Calendar.Month';\nimport { Weekdays } from './Calendar.Weekdays';\nimport { getFirstDateOfMonth, getToday } from './helpers';\n\nexport const Calendar = ({\n  disabledPast = true,\n  format = 'YYYY/MM/DD',\n  from,\n  months = 2,\n  locale,\n  range = false,\n  rangeMaxDays,\n  to,\n  value,\n  onChange = () => {},\n  onFocus = () => {},\n  onScroll,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const [focus, setFocus] = useState();\n  const [instance, setInstance] = useState(getFirstDateOfMonth(getToday()));\n  const [selected, setSelected] = useState(range ? [] : undefined);\n\n  useEffect(() => {\n    let date = range ? (value ? value[0] : undefined) : value;\n    if (!date) return setSelected(range ? [] : undefined);\n\n    date = parseDate(date, format);\n    if ((range && selected.length === 0) || !range) setInstance(getFirstDateOfMonth(date));\n\n    setSelected(range ? [UTC(date), value[1] ? UTC(parseDate(value[1], format)) : undefined] : UTC(date));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [format, range, value]);\n\n  useEffect(() => {\n    onFocus(focus);\n  }, [focus, onFocus]);\n\n  const handleChange = (date) => {\n    setSelected(() => {\n      let next;\n\n      if (!range) {\n        next = date;\n      } else if (selected[1] === undefined && date > selected[0]) {\n        next = [selected[0], date];\n      } else {\n        next = [selected[0]?.getTime() === date.getTime() ? undefined : date];\n        setFocus(undefined);\n      }\n      onChange(next);\n\n      return next;\n    });\n  };\n\n  const handleMonth = (month) => {\n    setInstance(getFirstDateOfMonth(new Date(instance.getFullYear(), instance.getMonth() + month)));\n  };\n\n  const instanceTS = instance.getTime();\n  const todayMonthTS = getFirstDateOfMonth(getToday()).getTime();\n  const disabledPrevious =\n    (disabledPast && instanceTS <= todayMonthTS) ||\n    (from && instanceTS <= getFirstDateOfMonth(parseDate(from, format)).getTime());\n\n  const disabledNext = to && instanceTS >= getFirstDateOfMonth(parseDate(to, format)).getTime();\n\n  const props = {\n    ...others,\n    disabledPast,\n    focus,\n    format,\n    from: from ? parseDate(from, format) : undefined,\n    locale,\n    range,\n    to:\n      range && rangeMaxDays && selected[0]\n        ? dateCalc(selected[0], rangeMaxDays, 'days')\n        : to\n        ? parseDate(to, format)\n        : undefined,\n    selected,\n    onChange: handleChange,\n    onFocus: isDesktop ? setFocus : undefined,\n  };\n\n  return (\n    <View data-testid={others['data-testid']}>\n      {!isDesktop && <Weekdays locale={locale} />}\n      <ScrollView onScroll={onScroll} horizontal={isDesktop} className={styles(style.scrollview, others.className)}>\n        {Array.from({ length: months }, (empty, index) => (\n          <Month\n            key={index}\n            onNext={isDesktop && index === months - 1 && !disabledNext ? () => handleMonth(months) : undefined}\n            onPrevious={isDesktop && index === 0 && !disabledPrevious ? () => handleMonth(-months) : undefined}\n            instance={new Date(instance.getFullYear(), instance.getMonth() + index, 1)}\n            {...props}\n          />\n        ))}\n      </ScrollView>\n    </View>\n  );\n};\n\nCalendar.displayName = 'Component:Calendar';\n\nCalendar.propTypes = {\n  captions: PropTypes.shape({}),\n  disabledDates: PropTypes.arrayOf(PropTypes.string),\n  disabledPast: PropTypes.bool,\n  disabledWeekends: PropTypes.bool,\n  format: PropTypes.string,\n  from: PropTypes.string,\n  highlights: PropTypes.arrayOf(PropTypes.string),\n  locale: PropTypes.string,\n  months: PropTypes.number,\n  range: PropTypes.bool,\n  rangeMaxDays: PropTypes.number,\n  rangeMinDays: PropTypes.number,\n  to: PropTypes.string,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),\n  onChange: PropTypes.func,\n  onFocus: PropTypes.func,\n  onScroll: PropTypes.func,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","names":["Calendar","disabledPast","format","from","months","locale","range","rangeMaxDays","to","value","onChange","onFocus","onScroll","others","isDesktop","focus","setFocus","instance","setInstance","undefined","selected","setSelected","date","length","handleChange","next","getTime","handleMonth","month","Date","getFullYear","getMonth","instanceTS","todayMonthTS","disabledPrevious","disabledNext","className","props","style","container","scrollview","Array","empty","index","displayName","propTypes","captions","PropTypes","shape","disabledDates","arrayOf","string","bool","disabledWeekends","highlights","number","rangeMinDays","oneOfType","func"],"sources":["../../../src/components/Calendar/Calendar.jsx"],"sourcesContent":["import { dateCalc, parseDate, UTC } from '@mirai/locale';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { ScrollView, View } from '../../primitives';\nimport style from './Calendar.module.css';\nimport { Month } from './Calendar.Month';\nimport { Weekdays } from './Calendar.Weekdays';\nimport { getFirstDateOfMonth, getToday } from './helpers';\n\nexport const Calendar = ({\n  disabledPast = true,\n  format = 'YYYY/MM/DD',\n  from,\n  months = 2,\n  locale,\n  range = false,\n  rangeMaxDays,\n  to,\n  value,\n  onChange = () => {},\n  onFocus = () => {},\n  onScroll,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const [focus, setFocus] = useState();\n  const [instance, setInstance] = useState(getFirstDateOfMonth(getToday()));\n  const [selected, setSelected] = useState(range ? [] : undefined);\n\n  useEffect(() => {\n    let date = range ? (value ? value[0] : undefined) : value;\n    if (!date) return setSelected(range ? [] : undefined);\n\n    date = parseDate(date, format);\n    if ((range && selected.length === 0) || !range) setInstance(getFirstDateOfMonth(date));\n\n    setSelected(range ? [UTC(date), value[1] ? UTC(parseDate(value[1], format)) : undefined] : UTC(date));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [format, range, value]);\n\n  useEffect(() => {\n    onFocus(focus);\n  }, [focus, onFocus]);\n\n  const handleChange = (date) => {\n    setSelected(() => {\n      let next;\n\n      if (!range) {\n        next = date;\n      } else if (selected[1] === undefined && date > selected[0]) {\n        next = [selected[0], date];\n      } else {\n        next = [selected[0]?.getTime() === date.getTime() ? undefined : date];\n        setFocus(undefined);\n      }\n      onChange(next);\n\n      return next;\n    });\n  };\n\n  const handleMonth = (month) => {\n    setInstance(getFirstDateOfMonth(new Date(instance.getFullYear(), instance.getMonth() + month)));\n  };\n\n  const instanceTS = instance.getTime();\n  const todayMonthTS = getFirstDateOfMonth(getToday()).getTime();\n  const disabledPrevious =\n    (disabledPast && instanceTS <= todayMonthTS) ||\n    (from && instanceTS <= getFirstDateOfMonth(parseDate(from, format)).getTime());\n\n  const disabledNext = to && instanceTS >= getFirstDateOfMonth(parseDate(to, format)).getTime();\n\n  let { className, ...props } = others;\n\n  props = {\n    ...props,\n    disabledPast,\n    focus,\n    format,\n    from: from ? parseDate(from, format) : undefined,\n    locale,\n    range,\n    to:\n      range && rangeMaxDays && selected[0]\n        ? dateCalc(selected[0], rangeMaxDays, 'days')\n        : to\n        ? parseDate(to, format)\n        : undefined,\n    selected,\n    onChange: handleChange,\n    onFocus: isDesktop ? setFocus : undefined,\n  };\n\n  return (\n    <View data-testid={others['data-testid']} className={styles(style.container, className)}>\n      {!isDesktop && <Weekdays locale={locale} />}\n      <ScrollView horizontal={isDesktop} className={style.scrollview} onScroll={onScroll}>\n        {Array.from({ length: months }, (empty, index) => (\n          <Month\n            key={index}\n            onNext={isDesktop && index === months - 1 && !disabledNext ? () => handleMonth(months) : undefined}\n            onPrevious={isDesktop && index === 0 && !disabledPrevious ? () => handleMonth(-months) : undefined}\n            instance={new Date(instance.getFullYear(), instance.getMonth() + index, 1)}\n            {...props}\n          />\n        ))}\n      </ScrollView>\n    </View>\n  );\n};\n\nCalendar.displayName = 'Component:Calendar';\n\nCalendar.propTypes = {\n  captions: PropTypes.shape({}),\n  disabledDates: PropTypes.arrayOf(PropTypes.string),\n  disabledPast: PropTypes.bool,\n  disabledWeekends: PropTypes.bool,\n  format: PropTypes.string,\n  from: PropTypes.string,\n  highlights: PropTypes.arrayOf(PropTypes.string),\n  locale: PropTypes.string,\n  months: PropTypes.number,\n  range: PropTypes.bool,\n  rangeMaxDays: PropTypes.number,\n  rangeMinDays: PropTypes.number,\n  to: PropTypes.string,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),\n  onChange: PropTypes.func,\n  onFocus: PropTypes.func,\n  onScroll: PropTypes.func,\n};\n"],"mappings":"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"}

package/build/components/Calendar/Calendar.module.css

@@ -9,10 +9,6 @@
   --mirai-ui-calendar-week-margin: 2px;
 }
 
-.scrollview {
-  max-height: calc(var(--mirai-ui-calendar-cell) * 13.2);
-}
-
 .month {
   justify-content: flex-start;
   padding: var(--mirai-ui-calendar-padding);
@@ -23,6 +19,11 @@
   padding: var(--mirai-ui-calendar-padding);
 }
 
+.scrollview {
+  height: 100%;
+  width: 100%;
+}
+
 .title {
   flex: 1;
   text-align: center;
@@ -94,8 +95,8 @@
 }
 
 @media only screen and (max-width: 600px) {
-  .scrollview {
-    width: 100vw;
+  .container {
+    max-height: calc(var(--mirai-ui-calendar-cell) * 15);
   }
 
   .month {

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

@@ -3,19 +3,19 @@
 exports[`component:<Calendar> inherit:className 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container mirai"
   >
     <div
-      class="scrollview snap horizontal scrollview mirai"
+      class="scrollview snap horizontal scrollview"
     >
       <div
-        class="view month mirai"
+        class="view month"
       >
         <div
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -595,18 +595,18 @@ exports[`component:<Calendar> inherit:className 1`] = `
         </div>
       </div>
       <div
-        class="view month mirai"
+        class="view month"
       >
         <div
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -1227,7 +1227,7 @@ exports[`component:<Calendar> inherit:className 1`] = `
 exports[`component:<Calendar> prop:captions 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -1239,7 +1239,7 @@ exports[`component:<Calendar> prop:captions 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -1915,12 +1915,12 @@ exports[`component:<Calendar> prop:captions 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -2634,7 +2634,7 @@ exports[`component:<Calendar> prop:captions 1`] = `
 exports[`component:<Calendar> prop:disabledDates 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -2646,7 +2646,7 @@ exports[`component:<Calendar> prop:disabledDates 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -3232,12 +3232,12 @@ exports[`component:<Calendar> prop:disabledDates 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -3858,7 +3858,7 @@ exports[`component:<Calendar> prop:disabledDates 1`] = `
 exports[`component:<Calendar> prop:disabledPast 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -3870,7 +3870,7 @@ exports[`component:<Calendar> prop:disabledPast 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -4456,12 +4456,12 @@ exports[`component:<Calendar> prop:disabledPast 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -5082,7 +5082,7 @@ exports[`component:<Calendar> prop:disabledPast 1`] = `
 exports[`component:<Calendar> prop:disabledWeekends 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -5094,7 +5094,7 @@ exports[`component:<Calendar> prop:disabledWeekends 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -5680,12 +5680,12 @@ exports[`component:<Calendar> prop:disabledWeekends 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -6306,7 +6306,7 @@ exports[`component:<Calendar> prop:disabledWeekends 1`] = `
 exports[`component:<Calendar> prop:format 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -6318,7 +6318,7 @@ exports[`component:<Calendar> prop:format 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -6904,12 +6904,12 @@ exports[`component:<Calendar> prop:format 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -7530,7 +7530,7 @@ exports[`component:<Calendar> prop:format 1`] = `
 exports[`component:<Calendar> prop:from 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -7542,7 +7542,7 @@ exports[`component:<Calendar> prop:from 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -8128,12 +8128,12 @@ exports[`component:<Calendar> prop:from 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -8754,7 +8754,7 @@ exports[`component:<Calendar> prop:from 1`] = `
 exports[`component:<Calendar> prop:highlights 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -8766,7 +8766,7 @@ exports[`component:<Calendar> prop:highlights 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -9352,12 +9352,12 @@ exports[`component:<Calendar> prop:highlights 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -9978,7 +9978,7 @@ exports[`component:<Calendar> prop:highlights 1`] = `
 exports[`component:<Calendar> prop:locale 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -9990,7 +9990,7 @@ exports[`component:<Calendar> prop:locale 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -10576,12 +10576,12 @@ exports[`component:<Calendar> prop:locale 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -11202,7 +11202,7 @@ exports[`component:<Calendar> prop:locale 1`] = `
 exports[`component:<Calendar> prop:locale en-US 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -11214,7 +11214,7 @@ exports[`component:<Calendar> prop:locale en-US 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             April 1980
           </span>
@@ -11800,12 +11800,12 @@ exports[`component:<Calendar> prop:locale en-US 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             May 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -12426,7 +12426,7 @@ exports[`component:<Calendar> prop:locale en-US 1`] = `
 exports[`component:<Calendar> prop:months 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -12438,7 +12438,7 @@ exports[`component:<Calendar> prop:months 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -13024,7 +13024,7 @@ exports[`component:<Calendar> prop:months 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
@@ -13620,12 +13620,12 @@ exports[`component:<Calendar> prop:months 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             junio 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -14236,7 +14236,7 @@ exports[`component:<Calendar> prop:months 1`] = `
 exports[`component:<Calendar> prop:range 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -14248,7 +14248,7 @@ exports[`component:<Calendar> prop:range 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -14834,12 +14834,12 @@ exports[`component:<Calendar> prop:range 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -15460,7 +15460,7 @@ exports[`component:<Calendar> prop:range 1`] = `
 exports[`component:<Calendar> prop:rangeMaxDays 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -15472,7 +15472,7 @@ exports[`component:<Calendar> prop:rangeMaxDays 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -16058,12 +16058,12 @@ exports[`component:<Calendar> prop:rangeMaxDays 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -16684,7 +16684,7 @@ exports[`component:<Calendar> prop:rangeMaxDays 1`] = `
 exports[`component:<Calendar> prop:rangeMinDays 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -16696,7 +16696,7 @@ exports[`component:<Calendar> prop:rangeMinDays 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -17282,12 +17282,12 @@ exports[`component:<Calendar> prop:rangeMinDays 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -17908,7 +17908,7 @@ exports[`component:<Calendar> prop:rangeMinDays 1`] = `
 exports[`component:<Calendar> prop:to 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -17920,7 +17920,7 @@ exports[`component:<Calendar> prop:to 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -18506,12 +18506,12 @@ exports[`component:<Calendar> prop:to 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -19132,7 +19132,7 @@ exports[`component:<Calendar> prop:to 1`] = `
 exports[`component:<Calendar> renders 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
   >
     <div
       class="scrollview snap horizontal scrollview"
@@ -19144,7 +19144,7 @@ exports[`component:<Calendar> renders 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -19730,12 +19730,12 @@ exports[`component:<Calendar> renders 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"
@@ -20356,7 +20356,7 @@ exports[`component:<Calendar> renders 1`] = `
 exports[`component:<Calendar> testID 1`] = `
 <DocumentFragment>
   <div
-    class="view"
+    class="view container"
     data-testid="mirai"
   >
     <div
@@ -20369,7 +20369,7 @@ exports[`component:<Calendar> testID 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             abril 1980
           </span>
@@ -20955,12 +20955,12 @@ exports[`component:<Calendar> testID 1`] = `
           class="view row header"
         >
           <span
-            class="text bold subheadline title"
+            class="text subheadline title"
           >
             mayo 1980
           </span>
           <button
-            class="pressable"
+            class="pressable pressable"
           >
             <span
               class="icon"

package/build/components/Modal/Modal.js

@@ -17,7 +17,7 @@ var _primitives = require("../../primitives");
 
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
 
-var _excluded = ["children", "visible", "onClose"];
+var _excluded = ["children", "overflow", "title", "visible", "onBack", "onClose"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -29,7 +29,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Modal = function Modal(_ref) {
   var children = _ref.children,
+      _ref$overflow = _ref.overflow,
+      overflow = _ref$overflow === void 0 ? true : _ref$overflow,
+      title = _ref.title,
       visible = _ref.visible,
+      onBack = _ref.onBack,
       onClose = _ref.onClose,
       others = _objectWithoutProperties(_ref, _excluded);
 
@@ -38,24 +42,36 @@ var Modal = function Modal(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true,
-    className: (0, _helpers.styles)(_ModalModule.default.overflow, visible && _ModalModule.default.visible)
+    className: (0, _helpers.styles)(_ModalModule.default.container, overflow && _ModalModule.default.overflow, visible && _ModalModule.default.visible)
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
     fit: true,
     className: (0, _helpers.styles)(_ModalModule.default.modal, visible && _ModalModule.default.visible, others.className)
-  }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    className: _ModalModule.default.pressable,
+  }), (title || onBack || onClose) && /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    row: true,
+    className: _ModalModule.default.header
+  }, onBack && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    onPress: onBack
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    name: "Left",
+    className: _ModalModule.default.icon
+  })), title && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    headline: true,
+    className: (0, _helpers.styles)(_ModalModule.default.title, !onBack && _ModalModule.default.left, !onClose && _ModalModule.default.right)
+  }, title), onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     onPress: onClose
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    name: isDesktop ? 'Close' : 'CloseArrow',
+    name: isDesktop || title !== undefined ? 'Close' : 'CloseArrow',
     className: _ModalModule.default.icon
-  })), children)));
+  }))), children));
 };
 
 exports.Modal = Modal;
-Modal.displayName = 'Component:Modal';
 Modal.propTypes = {
   children: _propTypes.default.node,
+  overflow: _propTypes.default.bool,
+  title: _propTypes.default.string,
   visible: _propTypes.default.bool,
+  onBack: _propTypes.default.func,
   onClose: _propTypes.default.func
 };
 //# sourceMappingURL=Modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","children","visible","onClose","others","isDesktop","style","overflow","modal","className","pressable","icon","displayName","propTypes","PropTypes","node","bool","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, Pressable, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({ children, visible, onClose, ...others }) => {\n  const { isDesktop } = useDevice();\n\n  return (\n    <View row className={styles(style.overflow, visible && style.visible)}>\n      <View {...others} fit className={styles(style.modal, visible && style.visible, others.className)}>\n        <>\n          {onClose && (\n            <Pressable className={style.pressable} onPress={onClose}>\n              <Icon name={isDesktop ? 'Close' : 'CloseArrow'} className={style.icon} />\n            </Pressable>\n          )}\n          {children}\n        </>\n      </View>\n    </View>\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  children: PropTypes.node,\n  visible: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAA+C;EAAA,IAA5CC,QAA4C,QAA5CA,QAA4C;EAAA,IAAlCC,OAAkC,QAAlCA,OAAkC;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAbC,MAAa;;EAC3D,iBAAsB,uBAAtB;EAAA,IAAQC,SAAR,cAAQA,SAAR;;EAEA,oBACE,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAE,qBAAOC,qBAAMC,QAAb,EAAuBL,OAAO,IAAII,qBAAMJ,OAAxC;EAArB,gBACE,6BAAC,gBAAD,eAAUE,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOE,qBAAME,KAAb,EAAoBN,OAAO,IAAII,qBAAMJ,OAArC,EAA8CE,MAAM,CAACK,SAArD;EAAjC,iBACE,4DACGN,OAAO,iBACN,6BAAC,qBAAD;IAAW,SAAS,EAAEG,qBAAMI,SAA5B;IAAuC,OAAO,EAAEP;EAAhD,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAEE,SAAS,GAAG,OAAH,GAAa,YAAlC;IAAgD,SAAS,EAAEC,qBAAMK;EAAjE,EADF,CAFJ,EAMGV,QANH,CADF,CADF,CADF;AAcD,CAjBD;;;AAmBAD,KAAK,CAACY,WAAN,GAAoB,iBAApB;AAEAZ,KAAK,CAACa,SAAN,GAAkB;EAChBZ,QAAQ,EAAEa,mBAAUC,IADJ;EAEhBb,OAAO,EAAEY,mBAAUE,IAFH;EAGhBb,OAAO,EAAEW,mBAAUG;AAHH,CAAlB"}
+{"version":3,"file":"Modal.js","names":["Modal","children","overflow","title","visible","onBack","onClose","others","isDesktop","style","container","modal","className","header","icon","left","right","undefined","propTypes","PropTypes","node","bool","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({ children, overflow = true, title, visible, onBack, onClose, ...others }) => {\n  const { isDesktop } = useDevice();\n\n  return (\n    <View row className={styles(style.container, overflow && style.overflow, visible && style.visible)}>\n      <View {...others} fit className={styles(style.modal, visible && style.visible, others.className)}>\n        {(title || onBack || onClose) && (\n          <View row className={style.header}>\n            {onBack && (\n              <Pressable onPress={onBack}>\n                <Icon name=\"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}>\n                <Icon name={isDesktop || title !== undefined ? 'Close' : 'CloseArrow'} className={style.icon} />\n              </Pressable>\n            )}\n          </View>\n        )}\n        {children}\n      </View>\n    </View>\n  );\n};\n\nModal.propTypes = {\n  children: PropTypes.node,\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":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAA+E;EAAA,IAA5EC,QAA4E,QAA5EA,QAA4E;EAAA,yBAAlEC,QAAkE;EAAA,IAAlEA,QAAkE,8BAAvD,IAAuD;EAAA,IAAjDC,KAAiD,QAAjDA,KAAiD;EAAA,IAA1CC,OAA0C,QAA1CA,OAA0C;EAAA,IAAjCC,MAAiC,QAAjCA,MAAiC;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAbC,MAAa;;EAC3F,iBAAsB,uBAAtB;EAAA,IAAQC,SAAR,cAAQA,SAAR;;EAEA,oBACE,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAE,qBAAOC,qBAAMC,SAAb,EAAwBR,QAAQ,IAAIO,qBAAMP,QAA1C,EAAoDE,OAAO,IAAIK,qBAAML,OAArE;EAArB,gBACE,6BAAC,gBAAD,eAAUG,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOE,qBAAME,KAAb,EAAoBP,OAAO,IAAIK,qBAAML,OAArC,EAA8CG,MAAM,CAACK,SAArD;EAAjC,IACG,CAACT,KAAK,IAAIE,MAAT,IAAmBC,OAApB,kBACC,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAEG,qBAAMI;EAA3B,GACGR,MAAM,iBACL,6BAAC,qBAAD;IAAW,OAAO,EAAEA;EAApB,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC,MAAX;IAAkB,SAAS,EAAEI,qBAAMK;EAAnC,EADF,CAFJ,EAMGX,KAAK,iBACJ,6BAAC,gBAAD;IAAM,QAAQ,MAAd;IAAe,SAAS,EAAE,qBAAOM,qBAAMN,KAAb,EAAoB,CAACE,MAAD,IAAWI,qBAAMM,IAArC,EAA2C,CAACT,OAAD,IAAYG,qBAAMO,KAA7D;EAA1B,GACGb,KADH,CAPJ,EAWGG,OAAO,iBACN,6BAAC,qBAAD;IAAW,OAAO,EAAEA;EAApB,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAEE,SAAS,IAAIL,KAAK,KAAKc,SAAvB,GAAmC,OAAnC,GAA6C,YAAzD;IAAuE,SAAS,EAAER,qBAAMK;EAAxF,EADF,CAZJ,CAFJ,EAoBGb,QApBH,CADF,CADF;AA0BD,CA7BD;;;AA+BAD,KAAK,CAACkB,SAAN,GAAkB;EAChBjB,QAAQ,EAAEkB,mBAAUC,IADJ;EAEhBlB,QAAQ,EAAEiB,mBAAUE,IAFJ;EAGhBlB,KAAK,EAAEgB,mBAAUG,MAHD;EAIhBlB,OAAO,EAAEe,mBAAUE,IAJH;EAKhBhB,MAAM,EAAEc,mBAAUI,IALF;EAMhBjB,OAAO,EAAEa,mBAAUI;AANH,CAAlB"}

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

@@ -1,11 +1,44 @@
 :root {
   --mirai-ui-modal-background: var(--mirai-ui-base);
-  --mirai-ui-modal-overflow: rgba(0, 0, 0, 0.2);
+  --mirai-ui-modal-overflow: rgba(0, 0, 0, 0.1);
+  --mirai-ui-modal-header-padding: var(--mirai-ui-space-M);
   --mirai-ui-modal-icon: var(--mirai-ui-space-L);
   --mirai-ui-modal-layer: var(--mirai-ui-layer-L);
 }
 
-.icon {
+.container {
+  height: 100vh;
+  justify-content: center;
+  left: 0;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: var(--mirai-ui-modal-layer);
+}
+
+.header {
+  align-items: center;
+  border-bottom: solid 1px var(--mirai-ui-content-border);
+  padding: var(--mirai-ui-modal-header-padding);
+  width: 100%;
+}
+
+.header .title {
+  flex: 1;
+  padding: 0 var(--mirai-ui-modal-header-padding);
+  text-align: center;
+}
+
+.header .title.left {
+  margin-left: var(--mirai-ui-modal-icon);
+}
+
+.header .title.right {
+  margin-right: var(--mirai-ui-modal-icon);
+}
+
+.header .icon {
   font-size: var(--mirai-ui-modal-icon);
   line-height: var(--mirai-ui-modal-icon);
   height: var(--mirai-ui-modal-icon);
@@ -16,38 +49,39 @@
   background-color: var(--mirai-ui-modal-background);
   pointer-events: none;
   transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
-    transform var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+    transform var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    box-shadow var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
 }
 
 .modal.visible {
+  box-shadow: var(--mirai-ui-shadow);
   pointer-events: all;
 }
 
 .overflow {
   background-color: var(--mirai-ui-modal-overflow);
-  height: 100vh;
-  justify-content: center;
-  left: 0;
   opacity: 0;
   pointer-events: none;
-  position: fixed;
   transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
-  top: 0;
-  width: 100vw;
-  z-index: var(--mirai-ui-modal-layer);
 }
 
-.overflow.visible {
+.container.visible {
   opacity: 1;
 }
 
-.pressable {
-  padding: var(--mirai-ui-space-XS);
-}
-
 @media only screen and (max-width: 600px) {
+  .container {
+    align-items: flex-end;
+    align-content: flex-end;
+  }
+
+  .header {
+    justify-content: center;
+  }
+
   .modal {
-    transform: translateY(110%);
+    transform: translateY(100%);
+    width: 100%;
   }
 
   .modal.visible {
@@ -55,21 +89,23 @@
   }
 
   .overflow {
-    align-items: flex-end;
-    align-content: flex-end;
     transition-delay: calc(var(--mirai-ui-motion-expand) / 2);
   }
 
   .overflow.visible {
     transition-delay: 0s;
   }
-
-  .pressable {
-    align-self: center;
-  }
 }
 
 @media only screen and (min-width: 600px) {
+  .container {
+    align-items: center;
+  }
+
+  .header {
+    justify-content: flex-end;
+  }
+
   .modal {
     opacity: 0;
     transform: scale(1.1);
@@ -80,10 +116,6 @@
     transform: scale(1);
   }
 
-  .overflow {
-    align-items: center;
-  }
-
   .pressable {
     align-self: flex-end;
   }

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

@@ -3,34 +3,38 @@
 exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow visible"
+    class="view row container overflow visible"
   >
     <div
       class="view fit modal visible"
     >
-      <button
-        class="pressable pressable"
+      <div
+        class="view row header"
       >
-        <span
-          class="icon icon"
+        <button
+          class="pressable"
         >
-          <svg
-            fill="none"
-            height="1em"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="icon icon"
           >
-            <polyline
-              points="6 9 12 15 18 9"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              fill="none"
+              height="1em"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <polyline
+                points="6 9 12 15 18 9"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -39,7 +43,7 @@ exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
 exports[`component:<Modal> Mobile environment prop:visible 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow visible"
+    class="view row container overflow visible"
   >
     <div
       class="view fit modal visible"
@@ -51,7 +55,7 @@ exports[`component:<Modal> Mobile environment prop:visible 1`] = `
 exports[`component:<Modal> inherit:className 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow"
+    class="view row container overflow"
   >
     <div
       class="view fit modal mirai"
@@ -63,7 +67,7 @@ exports[`component:<Modal> inherit:className 1`] = `
 exports[`component:<Modal> prop:children 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow"
+    class="view row container overflow"
   >
     <div
       class="view fit modal"
@@ -76,46 +80,130 @@ exports[`component:<Modal> prop:children 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Modal> prop:onBack 1`] = `
+<DocumentFragment>
+  <div
+    class="view row container overflow visible"
+  >
+    <div
+      class="view fit modal visible"
+    >
+      <div
+        class="view row header"
+      >
+        <button
+          class="pressable"
+        >
+          <span
+            class="icon icon"
+          >
+            <svg
+              fill="none"
+              height="1em"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <line
+                x1="19"
+                x2="5"
+                y1="12"
+                y2="12"
+              />
+              <polyline
+                points="12 19 5 12 12 5"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<Modal> prop:onClose 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow visible"
+    class="view row container overflow visible"
   >
     <div
       class="view fit modal visible"
     >
-      <button
-        class="pressable pressable"
+      <div
+        class="view row header"
       >
-        <span
-          class="icon icon"
+        <button
+          class="pressable"
         >
-          <svg
-            fill="none"
-            height="1em"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="icon icon"
           >
-            <polyline
-              points="6 9 12 15 18 9"
-            />
-          </svg>
+            <svg
+              fill="none"
+              height="1em"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <polyline
+                points="6 9 12 15 18 9"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Modal> prop:title 1`] = `
+<DocumentFragment>
+  <div
+    class="view row container overflow"
+  >
+    <div
+      class="view fit modal"
+    >
+      <div
+        class="view row header"
+      >
+        <span
+          class="text headline title left right"
+        >
+          Modal
         </span>
-      </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
 `;
 
+exports[`component:<Modal> prop:visible & prop:overflow (false) 1`] = `
+<DocumentFragment>
+  <div
+    class="view row container visible"
+  >
+    <div
+      class="view fit modal visible"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<Modal> prop:visible 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow visible"
+    class="view row container overflow visible"
   >
     <div
       class="view fit modal visible"
@@ -127,7 +215,7 @@ exports[`component:<Modal> prop:visible 1`] = `
 exports[`component:<Modal> renders 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow"
+    class="view row container overflow"
   >
     <div
       class="view fit modal"
@@ -139,7 +227,7 @@ exports[`component:<Modal> renders 1`] = `
 exports[`component:<Modal> testID 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow"
+    class="view row container overflow"
   >
     <div
       class="view fit modal"

package/build/theme/default.theme.css

@@ -70,5 +70,5 @@
 
   /* defaults */
   --mirai-ui-border-radius: 4px;
-  --mirai-ui-shadow: 0 1px var(--mirai-ui-space-XS) var(--mirai-ui-content-light);
+  --mirai-ui-shadow: 0 0 var(--mirai-ui-space-XS) var(--mirai-ui-content-border);
 }

package/package.json

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