@mirai/ui 1.0.115 → 1.0.117

package/build/components/Button/Button.module.css

@@ -1,4 +1,4 @@
-.button {
+button.button {
   align-items: center;
   background-color: var(--mirai-ui-button-background);
   border-radius: var(--mirai-ui-button-radius);
@@ -13,76 +13,83 @@
   width: fit-content;
 }
 
-.button:disabled:not(.busy) {
+button.button {
+  background-color: var(--mirai-ui-button-background);
+  color: var(--mirai-ui-button-color);
+}
+
+button.button:disabled:not(.busy) {
   background-color: var(--mirai-ui-button-disabled-background);
   color: var(--mirai-ui-button-disabled-color);
 }
 
-.button:not(.secondary):not(:disabled):active {
+button.button:hover {
+  color: var(--mirai-ui-button-color);
+}
+
+button.button:not(.secondary):not(:disabled):active {
   box-shadow: inset 0 0 var(--mirai-ui-space-XL) var(--mirai-ui-space-XL) var(--mirai-ui-button-color-active);
 }
 
-.button.secondary:not(:disabled):active {
+button.button.secondary:not(:disabled):active {
   background-color: var(--mirai-ui-button-color-hover);
   box-shadow: none;
   color: var(--mirai-ui-button-color);
 }
 
-.large:not(.squared) {
+button.large:not(.squared) {
   font-size: var(--mirai-ui-font-size-paragraph);
   padding: var(--mirai-ui-button-padding-y)
     calc(var(--mirai-ui-button-padding-x) + calc(var(--mirai-ui-button-padding-y) / 2));
 }
 
-.secondary {
+button.secondary {
   background-color: var(--mirai-ui-button-secondary-background);
   box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-background);
   color: var(--mirai-ui-button-background);
 }
 
-.secondary.disabled:not(.busy) {
+button.secondary.disabled:not(.busy) {
   box-shadow: none;
 }
 
-.rounded {
+button.rounded {
   border-radius: var(--mirai-ui-space-XXL);
 }
 
-.small:not(.squared) {
+button.small:not(.squared) {
   font-size: var(--mirai-ui-font-size-small);
   padding: var(--mirai-ui-button-padding-y) calc(var(--mirai-ui-button-padding-x) / 2);
 }
 
-.squared {
+button.squared {
   height: var(--mirai-ui-button-squared);
   padding: 0;
   min-width: var(--mirai-ui-button-squared);
   width: var(--mirai-ui-button-squared);
 }
 
-.wide {
+button.wide {
   width: 100%;
 }
 
-/* busy:bool */
-
-.button .children,
-.button .spinner {
+button.button .children,
+button.button .spinner {
   transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
     transform var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
 }
 
-.button.busy .children {
+button.button.busy .children {
   opacity: 0;
   transform: translateY(var(--mirai-ui-space-XL));
 }
 
-.button .spinner {
+button.button .spinner {
   opacity: 0;
   transform: translateY(calc(var(--mirai-ui-space-XL) * -1));
 }
 
-.button.busy .spinner {
+button.button.busy .spinner {
   opacity: 1;
   transform: translateY(0%);
 }

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

@@ -54,7 +54,6 @@ var Month = function Month(_ref) {
     row: true,
     className: _CalendarModule.default.header
   }, onPrevious && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    tag: "button",
     onPress: onPrevious,
     "data-testid": testID ? "".concat(testID, "-previous") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
@@ -65,7 +64,6 @@ var Month = function Month(_ref) {
     level: 4,
     className: _CalendarModule.default.title
   }, (0, _helpers2.getHeader)(instance, locale)), onNext && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    tag: "button",
     onPress: onNext,
     "data-testid": testID ? "".concat(testID, "-next") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {

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","timestamp","to","onChange","onFocus","onNext","onPrevious","others","useDevice","isDesktop","weekNumber","getWeekNumber","testID","styles","style","month","className","header","undefined","ICON","LEFT","title","getHeader","RIGHT","VISIBLE_WEEKS","map","week","getMonth","getFullYear","displayName","propTypes","captions","PropTypes","shape","any","disabledDates","arrayOf","string","bool","instanceOf","Date","number","tooltips","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  timestamp,\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 tag=\"button\" 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 tag=\"button\" onPress={onNext} 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            range,\n            selected,\n            timestamp,\n            to,\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  timestamp: PropTypes.number,\n  to: PropTypes.instanceOf(Date),\n  tooltips: PropTypes.shape({}),\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","timestamp","to","onChange","onFocus","onNext","onPrevious","others","useDevice","isDesktop","weekNumber","getWeekNumber","testID","styles","style","month","className","header","undefined","ICON","LEFT","title","getHeader","RIGHT","VISIBLE_WEEKS","map","week","getMonth","getFullYear","displayName","propTypes","captions","PropTypes","shape","any","disabledDates","arrayOf","string","bool","instanceOf","Date","number","tooltips","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  timestamp,\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} 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            range,\n            selected,\n            timestamp,\n            to,\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  timestamp: PropTypes.number,\n  to: PropTypes.instanceOf(Date),\n  tooltips: PropTypes.shape({}),\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

@@ -755,7 +755,7 @@ exports[`component:<Calendar> desktop environment prop:captions 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -779,7 +779,7 @@ exports[`component:<Calendar> desktop environment prop:captions 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -2130,7 +2130,7 @@ exports[`component:<Calendar> desktop environment prop:disabledDates 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -2154,7 +2154,7 @@ exports[`component:<Calendar> desktop environment prop:disabledDates 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -2759,7 +2759,7 @@ exports[`component:<Calendar> desktop environment prop:disabledPast 1`] = `
         <div
           class="view row header"
         >
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -2783,7 +2783,7 @@ exports[`component:<Calendar> desktop environment prop:disabledPast 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
           <h4
             class="text bold headline-4 title"
           >
@@ -3375,7 +3375,7 @@ exports[`component:<Calendar> desktop environment prop:disabledPast 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -3399,7 +3399,7 @@ exports[`component:<Calendar> desktop environment prop:disabledPast 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -4595,7 +4595,7 @@ exports[`component:<Calendar> desktop environment prop:format 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -4619,7 +4619,7 @@ exports[`component:<Calendar> desktop environment prop:format 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -5815,7 +5815,7 @@ exports[`component:<Calendar> desktop environment prop:from 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -5839,7 +5839,7 @@ exports[`component:<Calendar> desktop environment prop:from 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -7035,7 +7035,7 @@ exports[`component:<Calendar> desktop environment prop:highlights 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -7059,7 +7059,7 @@ exports[`component:<Calendar> desktop environment prop:highlights 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -8255,7 +8255,7 @@ exports[`component:<Calendar> desktop environment prop:locale 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -8279,7 +8279,7 @@ exports[`component:<Calendar> desktop environment prop:locale 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -9475,7 +9475,7 @@ exports[`component:<Calendar> desktop environment prop:locale en-US 1`] = `
           >
             May 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -9499,7 +9499,7 @@ exports[`component:<Calendar> desktop environment prop:locale en-US 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -11291,7 +11291,7 @@ exports[`component:<Calendar> desktop environment prop:months 1`] = `
           >
             junio 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -11315,7 +11315,7 @@ exports[`component:<Calendar> desktop environment prop:months 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -12501,7 +12501,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:disabledDates
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -12525,7 +12525,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:disabledDates
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -13721,7 +13721,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:rangeMaxDays 1
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -13745,7 +13745,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:rangeMaxDays 1
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -14941,7 +14941,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:rangeMinDays 1
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -14965,7 +14965,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:rangeMinDays 1
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -16161,7 +16161,7 @@ exports[`component:<Calendar> desktop environment prop:range renders 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -16185,7 +16185,7 @@ exports[`component:<Calendar> desktop environment prop:range renders 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -18576,7 +18576,7 @@ exports[`component:<Calendar> desktop environment renders 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -18600,7 +18600,7 @@ exports[`component:<Calendar> desktop environment renders 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -19796,7 +19796,7 @@ exports[`component:<Calendar> inherit:className 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -19820,7 +19820,7 @@ exports[`component:<Calendar> inherit:className 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -21166,7 +21166,7 @@ exports[`component:<Calendar> mobile environment prop:captions 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -21190,7 +21190,7 @@ exports[`component:<Calendar> mobile environment prop:captions 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -22541,7 +22541,7 @@ exports[`component:<Calendar> mobile environment prop:disabledDates 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -22565,7 +22565,7 @@ exports[`component:<Calendar> mobile environment prop:disabledDates 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -23170,7 +23170,7 @@ exports[`component:<Calendar> mobile environment prop:disabledPast 1`] = `
         <div
           class="view row header"
         >
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -23194,7 +23194,7 @@ exports[`component:<Calendar> mobile environment prop:disabledPast 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
           <h4
             class="text bold headline-4 title"
           >
@@ -23786,7 +23786,7 @@ exports[`component:<Calendar> mobile environment prop:disabledPast 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -23810,7 +23810,7 @@ exports[`component:<Calendar> mobile environment prop:disabledPast 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -25006,7 +25006,7 @@ exports[`component:<Calendar> mobile environment prop:format 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -25030,7 +25030,7 @@ exports[`component:<Calendar> mobile environment prop:format 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -26226,7 +26226,7 @@ exports[`component:<Calendar> mobile environment prop:from 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -26250,7 +26250,7 @@ exports[`component:<Calendar> mobile environment prop:from 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -27446,7 +27446,7 @@ exports[`component:<Calendar> mobile environment prop:highlights 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -27470,7 +27470,7 @@ exports[`component:<Calendar> mobile environment prop:highlights 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -28666,7 +28666,7 @@ exports[`component:<Calendar> mobile environment prop:locale 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -28690,7 +28690,7 @@ exports[`component:<Calendar> mobile environment prop:locale 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -29886,7 +29886,7 @@ exports[`component:<Calendar> mobile environment prop:locale en-US 1`] = `
           >
             May 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -29910,7 +29910,7 @@ exports[`component:<Calendar> mobile environment prop:locale en-US 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -31702,7 +31702,7 @@ exports[`component:<Calendar> mobile environment prop:months 1`] = `
           >
             junio 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -31726,7 +31726,7 @@ exports[`component:<Calendar> mobile environment prop:months 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -32912,7 +32912,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:disabledDates 1
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -32936,7 +32936,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:disabledDates 1
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -34132,7 +34132,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:rangeMaxDays 1`
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -34156,7 +34156,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:rangeMaxDays 1`
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -35352,7 +35352,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:rangeMinDays 1`
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -35376,7 +35376,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:rangeMinDays 1`
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -36572,7 +36572,7 @@ exports[`component:<Calendar> mobile environment prop:range renders 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -36596,7 +36596,7 @@ exports[`component:<Calendar> mobile environment prop:range renders 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -38987,7 +38987,7 @@ exports[`component:<Calendar> mobile environment renders 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
           >
             <span
@@ -39011,7 +39011,7 @@ exports[`component:<Calendar> mobile environment renders 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"
@@ -40208,7 +40208,7 @@ exports[`component:<Calendar> testID 1`] = `
           >
             mayo 1980
           </h4>
-          <button
+          <div
             class="pressable"
             data-testid="mirai-next"
           >
@@ -40233,7 +40233,7 @@ exports[`component:<Calendar> testID 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="view row weekdays"

package/build/components/Form/Form.stories.js

@@ -176,7 +176,7 @@ var Story = function Story(props) {
       return setForm({});
     },
     style: {
-      marginRight: 'var(--mirai-ui-space-M'
+      marginRight: 'var(--mirai-ui-space-M)'
     }
   }, "Reset"), /*#__PURE__*/_react.default.createElement(_.Button, {
     small: true,

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

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.js","names":["title","Story","props","useState","condition","setCondition","email","checkbox","dateOfBirth","switch","radio","form","setForm","error","setError","useEffect","handleBlur","others","console","log","handleChange","next","handleError","handleFocus","handleSubmit","value","includes","password","children","Array","from","keys","map","index","Object","length","justifyContent","marginTop","marginRight","storyName","args","debounce","schema","showErrors","validateOnMount","argTypes"],"sources":["../../../src/components/Form/Form.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, InputDate, InputNumber, InputOption, InputText, Text, View } from '../../';\nimport { Form } from './Form';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n  const [condition, setCondition] = useState(false);\n  const [form, setForm] = useState({\n    email: 'javi@mirai.com',\n    checkbox: true,\n    dateOfBirth: '04/10/1980',\n    switch: true,\n    radio: 'radio-2',\n  });\n  const [error, setError] = useState({});\n\n  useEffect(\n    () =>\n      setForm({\n        email: 'javi@mirai.com',\n        checkbox: true,\n        dateOfBirth: '04/10/1980',\n        switch: true,\n        radio: 'radio-2',\n      }),\n    [],\n  ); // * Simulate a state hydration\n\n  const handleBlur = (...others) => console.log('<Form>::onBlur', ...others);\n\n  const handleChange = (next, ...others) => {\n    setForm(next);\n    console.log('<Form>::onChange', next, ...others);\n  };\n\n  const handleError = (next, ...others) => {\n    setError(next);\n    console.log('<Form>::onError', next, ...others);\n  };\n\n  const handleFocus = (...others) => console.log('<Form>::onFocus', ...others);\n\n  const handleSubmit = (...others) => console.log('<Form>::onSubmit', ...others);\n\n  return (\n    <>\n      <Form\n        {...props}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onError={handleError}\n        onFocus={handleFocus}\n        onSubmit={handleSubmit}\n      >\n        <Text headline>Form component</Text>\n        <InputText\n          name=\"email\"\n          error={!!error.email}\n          test={(value) => value.includes('@mirai.com')}\n          label=\"Email\"\n          hint=\"Should contains @mirai.com\"\n          required\n          type=\"email\"\n          value={form.email}\n        />\n        <InputText\n          name=\"password\"\n          error={!!error.password}\n          hint=\"At least 10 chars.\"\n          label=\"Password\"\n          required\n          minLength={10}\n          type=\"password\"\n          value={form.password}\n        />\n        <InputDate\n          name=\"dateOfBirth\"\n          error={!!error.dateOfBirth}\n          label=\"Your birthdate\"\n          max=\"31/12/2022\"\n          min=\"10/04/1980\"\n          required\n          type=\"inputDate\"\n          value={form.dateOfBirth}\n        />\n        <InputText name=\"bio\" label=\"Bio\" multiLine />\n        <InputNumber name=\"children\" label=\"Children\" hint=\"Ages 0 - 17\" value={form.children} />\n        <InputOption type=\"checkbox\" name=\"checkbox\" label=\"checkbox\" checked={form.checkbox} />\n        <InputOption type=\"switch\" name=\"switch\" label=\"switch\" checked={form.switch} />\n        {Array.from(Array(2).keys()).map((index) => (\n          <InputOption\n            key={index}\n            type=\"radio\"\n            name=\"radio\"\n            value={`radio-${index}`}\n            label={`radio-${index}`}\n            checked={form.radio === `radio-${index}`}\n          />\n        ))}\n        {condition && <InputText label=\"condition\" name=\"condition\" />}\n\n        <Button disabled={Object.keys(error).length !== 0} type=\"submit\" wide>\n          Submit\n        </Button>\n      </Form>\n\n      <View row style={{ justifyContent: 'flex-end', marginTop: 'var(--mirai-ui-space-L)' }}>\n        <Button small secondary onPress={() => setForm({})} style={{ marginRight: 'var(--mirai-ui-space-M' }}>\n          Reset\n        </Button>\n        <Button small secondary onPress={() => setCondition(!condition)}>\n          {`${condition ? 'Hide' : 'Show'} dynamic field`}\n        </Button>\n      </View>\n    </>\n  );\n};\n\nStory.storyName = 'Form';\n\nStory.args = {\n  debounce: 0,\n  schema: {},\n  showErrors: false,\n  validateOnMount: false,\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}
+{"version":3,"file":"Form.stories.js","names":["title","Story","props","useState","condition","setCondition","email","checkbox","dateOfBirth","switch","radio","form","setForm","error","setError","useEffect","handleBlur","others","console","log","handleChange","next","handleError","handleFocus","handleSubmit","value","includes","password","children","Array","from","keys","map","index","Object","length","justifyContent","marginTop","marginRight","storyName","args","debounce","schema","showErrors","validateOnMount","argTypes"],"sources":["../../../src/components/Form/Form.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, InputDate, InputNumber, InputOption, InputText, Text, View } from '../../';\nimport { Form } from './Form';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n  const [condition, setCondition] = useState(false);\n  const [form, setForm] = useState({\n    email: 'javi@mirai.com',\n    checkbox: true,\n    dateOfBirth: '04/10/1980',\n    switch: true,\n    radio: 'radio-2',\n  });\n  const [error, setError] = useState({});\n\n  useEffect(\n    () =>\n      setForm({\n        email: 'javi@mirai.com',\n        checkbox: true,\n        dateOfBirth: '04/10/1980',\n        switch: true,\n        radio: 'radio-2',\n      }),\n    [],\n  ); // * Simulate a state hydration\n\n  const handleBlur = (...others) => console.log('<Form>::onBlur', ...others);\n\n  const handleChange = (next, ...others) => {\n    setForm(next);\n    console.log('<Form>::onChange', next, ...others);\n  };\n\n  const handleError = (next, ...others) => {\n    setError(next);\n    console.log('<Form>::onError', next, ...others);\n  };\n\n  const handleFocus = (...others) => console.log('<Form>::onFocus', ...others);\n\n  const handleSubmit = (...others) => console.log('<Form>::onSubmit', ...others);\n\n  return (\n    <>\n      <Form\n        {...props}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onError={handleError}\n        onFocus={handleFocus}\n        onSubmit={handleSubmit}\n      >\n        <Text headline>Form component</Text>\n        <InputText\n          name=\"email\"\n          error={!!error.email}\n          test={(value) => value.includes('@mirai.com')}\n          label=\"Email\"\n          hint=\"Should contains @mirai.com\"\n          required\n          type=\"email\"\n          value={form.email}\n        />\n        <InputText\n          name=\"password\"\n          error={!!error.password}\n          hint=\"At least 10 chars.\"\n          label=\"Password\"\n          required\n          minLength={10}\n          type=\"password\"\n          value={form.password}\n        />\n        <InputDate\n          name=\"dateOfBirth\"\n          error={!!error.dateOfBirth}\n          label=\"Your birthdate\"\n          max=\"31/12/2022\"\n          min=\"10/04/1980\"\n          required\n          type=\"inputDate\"\n          value={form.dateOfBirth}\n        />\n        <InputText name=\"bio\" label=\"Bio\" multiLine />\n        <InputNumber name=\"children\" label=\"Children\" hint=\"Ages 0 - 17\" value={form.children} />\n        <InputOption type=\"checkbox\" name=\"checkbox\" label=\"checkbox\" checked={form.checkbox} />\n        <InputOption type=\"switch\" name=\"switch\" label=\"switch\" checked={form.switch} />\n        {Array.from(Array(2).keys()).map((index) => (\n          <InputOption\n            key={index}\n            type=\"radio\"\n            name=\"radio\"\n            value={`radio-${index}`}\n            label={`radio-${index}`}\n            checked={form.radio === `radio-${index}`}\n          />\n        ))}\n        {condition && <InputText label=\"condition\" name=\"condition\" />}\n\n        <Button disabled={Object.keys(error).length !== 0} type=\"submit\" wide>\n          Submit\n        </Button>\n      </Form>\n\n      <View row style={{ justifyContent: 'flex-end', marginTop: 'var(--mirai-ui-space-L)' }}>\n        <Button small secondary onPress={() => setForm({})} style={{ marginRight: 'var(--mirai-ui-space-M)' }}>\n          Reset\n        </Button>\n        <Button small secondary onPress={() => setCondition(!condition)}>\n          {`${condition ? 'Hide' : 'Show'} dynamic field`}\n        </Button>\n      </View>\n    </>\n  );\n};\n\nStory.storyName = 'Form';\n\nStory.args = {\n  debounce: 0,\n  schema: {},\n  showErrors: false,\n  validateOnMount: false,\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}

package/build/components/InputText/InputText.js

@@ -90,7 +90,6 @@ var InputText = function InputText(_ref) {
     type: !is.password || password ? type : 'text',
     value: others.value || '',
     className: (0, _helpers.styles)(_InputTextModule.default.input, has.label && _InputTextModule.default.withLabel, has.icon && _InputTextModule.default.iconLeft),
-    style: undefined,
     onChange: handleChange,
     onEnter: handleEnter,
     onLeave: handleLeave

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

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

package/build/components/InputText/InputText.module.css

@@ -131,3 +131,11 @@
 .icon.warning {
   color: var(--mirai-ui-warning);
 }
+
+/* -- reset defaults -------------------------------------------------------- */
+input.input,
+textarea.input {
+  border: none;
+  margin: 0;
+  padding: var(--mirai-ui-input-text-padding-y) var(--mirai-ui-input-text-padding-x);
+}

package/build/components/Modal/Modal.js

@@ -74,7 +74,6 @@ var Modal = function Modal(_ref) {
     row: true,
     className: _ModalModule.default.header
   }, onBack && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    tag: "button",
     onPress: onBack,
     "data-testid": testId ? "".concat(testId, "-button-back") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
@@ -84,7 +83,6 @@ var Modal = function Modal(_ref) {
     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, {
-    tag: "button",
     onPress: onClose,
     "data-testid": testId ? "".concat(testId, "-button-close") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","overflow","portal","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","useState","dataset","setDataset","useEffect","document","body","miraiModal","undefined","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","styles","style","container","modal","calcWidth","className","header","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, useState } 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  onOverflow,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { ['data-testid']: testId } = others;\n\n  return renderer(\n    <Pressable\n      className={styles(\n        style.container,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      onPress={visible && overflow ? onOverflow : undefined}\n      data-testid={testId ? `${testId}-overflow` : undefined}\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 tag=\"button\" 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 tag=\"button\" 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    </Pressable>,\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":";;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEvC,IAAMA,KAAK,GAAG,SAARA,KAAK,OAYL;EAAA,qBAXJC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,KAAK;IAAA,qBACXC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IAAA,mBACfC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IACPC,MAAM;EAET,iBAAsB,IAAAC,gBAAS,GAAE;IAAzBC,SAAS,cAATA,SAAS;EAEjB,gBAA8B,IAAAC,eAAQ,GAAE;IAAA;IAAjCC,OAAO;IAAEC,UAAU;EAE1B,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAIV,OAAO,IAAI,CAACQ,OAAO,EAAE;MACvBC,UAAU,CAAC,IAAI,CAAC;MAChBE,QAAQ,CAACC,IAAI,CAACJ,OAAO,CAACK,UAAU,GAAG,IAAI;IACzC;IAEA,OAAO,YAAM;MACX,IAAIb,OAAO,IAAIQ,OAAO,EAAE;QACtBC,UAAU,CAACK,SAAS,CAAC;QACrB,OAAOH,QAAQ,CAACC,IAAI,CAACJ,OAAO,CAACK,UAAU;MACzC;IACF,CAAC;EACH,CAAC,EAAE,CAACL,OAAO,EAAER,OAAO,CAAC,CAAC;EAEtB,IAAMe,QAAQ,GAAGC,gBAAO,IAAI,CAAClB,MAAM,GAAG,UAACmB,GAAG;IAAA,OAAKA,GAAG;EAAA,IAAGC,iBAAQ,CAACC,YAAY;EAE1E,IAAyBC,MAAM,GAAKhB,MAAM,CAAjC,aAAa;EAEtB,OAAOW,QAAQ,eACb,6BAAC,qBAAS;IACR,SAAS,EAAE,IAAAM,eAAM,EACfC,oBAAK,CAACC,SAAS,EACf1B,QAAQ,IAAIyB,oBAAK,CAACzB,QAAQ,EAC1BA,QAAQ,IAAIH,IAAI,IAAI4B,oBAAK,CAAC5B,IAAI,EAC9BM,OAAO,IAAIsB,oBAAK,CAACtB,OAAO,EACxBG,UAAU,IAAImB,oBAAK,CAACnB,UAAU,CAC9B;IACF,OAAO,EAAEH,OAAO,IAAIH,QAAQ,GAAGM,UAAU,GAAGW,SAAU;IACtD,eAAaM,MAAM,aAAMA,MAAM,iBAAcN;EAAU,gBAEvD,6BAAC,gBAAI,eACCV,MAAM;IACV,GAAG;IACH,SAAS,EAAE,IAAAiB,eAAM,EAACC,oBAAK,CAACE,KAAK,EAAE,CAAC5B,GAAG,IAAI0B,oBAAK,CAACG,SAAS,EAAEzB,OAAO,IAAIsB,oBAAK,CAACtB,OAAO,EAAEI,MAAM,CAACsB,SAAS;EAAE,IAEnG,CAAC3B,KAAK,IAAIE,MAAM,IAAIC,OAAO,kBAC1B,6BAAC,gBAAI;IAAC,GAAG;IAAC,SAAS,EAAEoB,oBAAK,CAACK;EAAO,GAC/B1B,MAAM,iBACL,6BAAC,qBAAS;IAAC,GAAG,EAAC,QAAQ;IAAC,OAAO,EAAEA,MAAO;IAAC,eAAamB,MAAM,aAAMA,MAAM,oBAAiBN;EAAU,gBACjG,6BAAC,gBAAI;IAAC,KAAK,EAAEc,gBAAI,CAACC,IAAK;IAAC,SAAS,EAAEP,oBAAK,CAACQ;EAAK,EAAG,CAEpD,EACA/B,KAAK,iBACJ,6BAAC,gBAAI;IAAC,QAAQ;IAAC,SAAS,EAAE,IAAAsB,eAAM,EAACC,oBAAK,CAACvB,KAAK,EAAE,CAACE,MAAM,IAAIqB,oBAAK,CAACS,IAAI,EAAE,CAAC7B,OAAO,IAAIoB,oBAAK,CAACU,KAAK;EAAE,GAC3FjC,KAAK,CAET,EACAG,OAAO,iBACN,6BAAC,qBAAS;IAAC,GAAG,EAAC,QAAQ;IAAC,OAAO,EAAEA,OAAQ;IAAC,eAAakB,MAAM,aAAMA,MAAM,qBAAkBN;EAAU,gBACnG,6BAAC,gBAAI;IAAC,KAAK,EAAER,SAAS,IAAIP,KAAK,KAAKe,SAAS,GAAGc,gBAAI,CAACK,KAAK,GAAGL,gBAAI,CAACM,WAAY;IAAC,SAAS,EAAEZ,oBAAK,CAACQ;EAAK,EAAG,CAE3G,CAEJ,EACAnC,QAAQ,CACJ,CACG,EACZgB,QAAQ,CAACC,IAAI,CACd;AACH,CAAC;AAAC;AAEFnB,KAAK,CAAC0C,SAAS,GAAG;EAChBzC,IAAI,EAAE0C,kBAAS,CAACC,IAAI;EACpB1C,QAAQ,EAAEyC,kBAAS,CAACE,IAAI;EACxB1C,GAAG,EAAEwC,kBAAS,CAACC,IAAI;EACnBxC,QAAQ,EAAEuC,kBAAS,CAACC,IAAI;EACxBvC,MAAM,EAAEsC,kBAAS,CAACC,IAAI;EACtBtC,KAAK,EAAEqC,kBAAS,CAACG,MAAM;EACvBvC,OAAO,EAAEoC,kBAAS,CAACC,IAAI;EACvBpC,MAAM,EAAEmC,kBAAS,CAACI,IAAI;EACtBtC,OAAO,EAAEkC,kBAAS,CAACI;AACrB,CAAC"}
+{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","overflow","portal","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","useState","dataset","setDataset","useEffect","document","body","miraiModal","undefined","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","styles","style","container","modal","calcWidth","className","header","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, useState } 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  onOverflow,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { ['data-testid']: testId } = others;\n\n  return renderer(\n    <Pressable\n      className={styles(\n        style.container,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      onPress={visible && overflow ? onOverflow : undefined}\n      data-testid={testId ? `${testId}-overflow` : undefined}\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    </Pressable>,\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/__tests__/__snapshots__/Modal.test.js.snap

@@ -13,7 +13,7 @@ exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
       <div
         class="view row header"
       >
-        <button
+        <div
           class="pressable"
           data-testid="mirai-onClose-button-close"
         >
@@ -39,7 +39,7 @@ exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
               />
             </svg>
           </span>
-        </button>
+        </div>
       </div>
     </div>
   </div>
@@ -111,7 +111,7 @@ exports[`component:<Modal> prop:onBack 1`] = `
       <div
         class="view row header"
       >
-        <button
+        <div
           class="pressable"
           data-testid="mirai-onBack-button-back"
         >
@@ -136,7 +136,7 @@ exports[`component:<Modal> prop:onBack 1`] = `
               />
             </svg>
           </span>
-        </button>
+        </div>
       </div>
     </div>
   </div>
@@ -156,7 +156,7 @@ exports[`component:<Modal> prop:onClose 1`] = `
       <div
         class="view row header"
       >
-        <button
+        <div
           class="pressable"
           data-testid="mirai-onClose-button-close"
         >
@@ -182,7 +182,7 @@ exports[`component:<Modal> prop:onClose 1`] = `
               />
             </svg>
           </span>
-        </button>
+        </div>
       </div>
     </div>
   </div>

package/build/components/Notification/Notification.js

@@ -44,9 +44,9 @@ var Notification = function Notification(_ref) {
     small: small,
     className: (0, _helpers.styles)(_NotificationModule.default.text, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined)
   }, children), !large && onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    tag: "button",
     onPress: onClose,
-    className: (0, _helpers.styles)(_NotificationModule.default.pressable, _NotificationModule.default.icon)
+    className: (0, _helpers.styles)(_NotificationModule.default.pressable, _NotificationModule.default.icon),
+    "data-testid": others['data-testid'] ? "".concat(others['data-testid'], "-button-close") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: _primitives.ICON.CLOSE,
     paragraph: small

package/build/components/Notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","names":["Notification","children","error","info","inline","large","small","success","warning","wide","onClose","others","styles","style","notification","undefined","outlined","className","getIconState","icon","text","pressable","ICON","CLOSE","displayName","propTypes","PropTypes","any","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({\n  children,\n  error,\n  info,\n  inline = false,\n  large,\n  small,\n  success,\n  warning,\n  wide,\n  onClose,\n  ...others\n}) => (\n  <View\n    {...others}\n    row\n    className={styles(\n      style.notification,\n      error ? style.error : warning ? style.warning : success ? style.success : info ? style.info : undefined,\n      inline ? style.inline : style.outlined,\n      inline && style.inline,\n      large ? style.large : small && style.small,\n      wide && style.wide,\n      others.className,\n    )}\n  >\n    <Icon\n      headline={large}\n      level={large ? 1 : undefined}\n      paragraph={small}\n      value={getIconState({ error, success, warning })}\n      className={style.icon}\n    />\n    <Text\n      small={small}\n      className={styles(\n        style.text,\n        error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      )}\n    >\n      {children}\n    </Text>\n    {!large && onClose && (\n      <Pressable tag=\"button\" onPress={onClose} className={styles(style.pressable, style.icon)}>\n        <Icon value={ICON.CLOSE} paragraph={small} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.any.isRequired,\n  error: PropTypes.bool,\n  info: PropTypes.bool,\n  inline: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  warning: PropTypes.bool,\n  wide: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":"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"}
+{"version":3,"file":"Notification.js","names":["Notification","children","error","info","inline","large","small","success","warning","wide","onClose","others","styles","style","notification","undefined","outlined","className","getIconState","icon","text","pressable","ICON","CLOSE","displayName","propTypes","PropTypes","any","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({\n  children,\n  error,\n  info,\n  inline = false,\n  large,\n  small,\n  success,\n  warning,\n  wide,\n  onClose,\n  ...others\n}) => (\n  <View\n    {...others}\n    row\n    className={styles(\n      style.notification,\n      error ? style.error : warning ? style.warning : success ? style.success : info ? style.info : undefined,\n      inline ? style.inline : style.outlined,\n      inline && style.inline,\n      large ? style.large : small && style.small,\n      wide && style.wide,\n      others.className,\n    )}\n  >\n    <Icon\n      headline={large}\n      level={large ? 1 : undefined}\n      paragraph={small}\n      value={getIconState({ error, success, warning })}\n      className={style.icon}\n    />\n    <Text\n      small={small}\n      className={styles(\n        style.text,\n        error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      )}\n    >\n      {children}\n    </Text>\n    {!large && onClose && (\n      <Pressable\n        onPress={onClose}\n        className={styles(style.pressable, style.icon)}\n        data-testid={others['data-testid'] ? `${others['data-testid']}-button-close` : undefined}\n      >\n        <Icon value={ICON.CLOSE} paragraph={small} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.any.isRequired,\n  error: PropTypes.bool,\n  info: PropTypes.bool,\n  inline: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  warning: PropTypes.bool,\n  wide: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":"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"}

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

@@ -319,6 +319,7 @@ exports[`component:<Notification> prop:onClose 1`] = `
 <DocumentFragment>
   <div
     class="view row notification outlined"
+    data-testid="mirai-onClose"
   >
     <span
       class="icon headline-3 icon"
@@ -346,8 +347,9 @@ exports[`component:<Notification> prop:onClose 1`] = `
     >
       Lorem Ipsum...
     </span>
-    <button
+    <div
       class="pressable pressable icon"
+      data-testid="mirai-onClose-button-close"
     >
       <span
         class="icon headline-3"
@@ -370,7 +372,7 @@ exports[`component:<Notification> prop:onClose 1`] = `
           />
         </svg>
       </span>
-    </button>
+    </div>
   </div>
 </DocumentFragment>
 `;

package/build/primitives/Input/Input.module.css

@@ -1,9 +1,3 @@
-input.input,
-textarea.input {
-  border: none;
-  margin: 0;
-}
-
 .input {
   background-color: var(--mirai-ui-input-background);
   box-sizing: border-box;
@@ -28,17 +22,25 @@ textarea.input {
   color: var(--mirai-ui-input-disabled);
 }
 
-.input::-webkit-search-cancel-button {
+/* -- reset defaults -------------------------------------------------------- */
+input.input,
+textarea.input {
+  border: none;
+  margin: 0;
+}
+
+input.input::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
 
-.input::-ms-clear {
+input.input::-ms-clear {
   appearance: none;
 }
 
-.input:-webkit-autofill,
-.input:-webkit-autofill:hover,
-.input:-webkit-autofill:focus {
+input.input:focus,
+input.input:-webkit-autofill,
+input.input:-webkit-autofill:hover,
+input.input:-webkit-autofill:focus {
   -webkit-box-shadow: 0 0 0px 1000px var(--mirai-ui-input-background) inset;
   -webkit-text-fill-color: var(--mirai-ui-input-color);
   transition: none;

package/package.json

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