@mirai/ui 1.0.254 → 1.0.255

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

@@ -25,7 +25,6 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var LEFT = _theme.DIRECTION_TYPE.LEFT;
 var Month = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var disabledPast = _ref.disabledPast,
     focus = _ref.focus,
@@ -46,7 +45,7 @@ var Month = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     onNext = _ref.onNext,
     onPrevious = _ref.onPrevious,
     others = _objectWithoutProperties(_ref, _excluded);
-  var direction = _theme.Theme.getDirection();
+  var defaultDirection = _theme.Theme.getDirection() === _theme.DIRECTION_TYPE.LEFT;
   var weekNumber = (0, _helpers2.getWeekNumber)(instance);
   var testId = others.testId;
   return /*#__PURE__*/_react.default.createElement(_primitives.View, {
@@ -59,7 +58,7 @@ var Month = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     onPress: onPrevious,
     testId: testId ? "".concat(testId, "-previous") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    value: direction === LEFT ? _primitives.ICON.LEFT : _primitives.ICON.RIGHT
+    value: defaultDirection ? _primitives.ICON.LEFT : _primitives.ICON.RIGHT
   })), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     bold: true,
     headline: true,
@@ -69,7 +68,7 @@ var Month = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     onPress: onNext,
     testId: testId ? "".concat(testId, "-next") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    value: direction === LEFT ? _primitives.ICON.RIGHT : _primitives.ICON.LEFT
+    value: defaultDirection ? _primitives.ICON.RIGHT : _primitives.ICON.LEFT
   }))), !vertical && /*#__PURE__*/_react.default.createElement(_Calendar3.Weekdays, {
     locale: locale
   }), _Calendar.VISIBLE_WEEKS.map(function (week) {

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.Month.js","names":["LEFT","DIRECTION_TYPE","Month","React","forwardRef","ref","disabledPast","focus","format","from","instance","locale","range","selected","timestamp","to","vertical","onChange","onFocus","onNext","onPrevious","others","direction","Theme","getDirection","weekNumber","getWeekNumber","testId","styles","style","month","className","header","undefined","ICON","RIGHT","title","getHeader","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 { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\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\nconst { LEFT } = DIRECTION_TYPE;\n\nexport const Month = React.forwardRef(\n  (\n    {\n      disabledPast,\n      focus,\n      format,\n      from,\n      instance,\n      locale,\n      range = false,\n      selected,\n      timestamp,\n      to,\n      vertical,\n      onChange = () => {},\n      onFocus = () => {},\n      onNext,\n      onPrevious,\n      ...others\n    },\n    ref,\n  ) => {\n    const direction = Theme.getDirection();\n    const weekNumber = getWeekNumber(instance);\n    const { testId } = others;\n\n    return (\n      <View ref={ref} className={styles(style.month, others.className)}>\n        <View forceRow className={style.header}>\n          {onPrevious && (\n            <Pressable onPress={onPrevious} testId={testId ? `${testId}-previous` : undefined}>\n              <Icon value={direction === LEFT ? ICON.LEFT : ICON.RIGHT} />\n            </Pressable>\n          )}\n          <Text bold headline level={4} className={style.title}>\n            {getHeader(instance, locale)}\n          </Text>\n          {onNext && (\n            <Pressable onPress={onNext} testId={testId ? `${testId}-next` : undefined}>\n              <Icon value={direction === LEFT ? ICON.RIGHT : ICON.LEFT} />\n            </Pressable>\n          )}\n        </View>\n\n        {!vertical && <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);\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  vertical: PropTypes.bool,\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","React","forwardRef","ref","disabledPast","focus","format","from","instance","locale","range","selected","timestamp","to","vertical","onChange","onFocus","onNext","onPrevious","others","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","weekNumber","getWeekNumber","testId","styles","style","month","className","header","undefined","ICON","RIGHT","title","getHeader","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 { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\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 = React.forwardRef(\n  (\n    {\n      disabledPast,\n      focus,\n      format,\n      from,\n      instance,\n      locale,\n      range = false,\n      selected,\n      timestamp,\n      to,\n      vertical,\n      onChange = () => {},\n      onFocus = () => {},\n      onNext,\n      onPrevious,\n      ...others\n    },\n    ref,\n  ) => {\n    const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n    const weekNumber = getWeekNumber(instance);\n    const { testId } = others;\n\n    return (\n      <View ref={ref} className={styles(style.month, others.className)}>\n        <View forceRow className={style.header}>\n          {onPrevious && (\n            <Pressable onPress={onPrevious} testId={testId ? `${testId}-previous` : undefined}>\n              <Icon value={defaultDirection ? ICON.LEFT : ICON.RIGHT} />\n            </Pressable>\n          )}\n          <Text bold headline level={4} className={style.title}>\n            {getHeader(instance, locale)}\n          </Text>\n          {onNext && (\n            <Pressable onPress={onNext} testId={testId ? `${testId}-next` : undefined}>\n              <Icon value={defaultDirection ? ICON.RIGHT : ICON.LEFT} />\n            </Pressable>\n          )}\n        </View>\n\n        {!vertical && <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);\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  vertical: PropTypes.bool,\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/InputPhone/InputPhone.js

@@ -54,7 +54,7 @@ var InputPhone = function InputPhone(_ref) {
     _ref$onLeave = _ref.onLeave,
     onLeave = _ref$onLeave === void 0 ? function () {} : _ref$onLeave,
     others = _objectWithoutProperties(_ref, _excluded);
-  var direction = _theme.Theme.getDirection();
+  var defaultDirection = _theme.Theme.getDirection() === _theme.DIRECTION_TYPE.LEFT;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     focus = _useState2[0],
@@ -120,7 +120,7 @@ var InputPhone = function InputPhone(_ref) {
     stateIcon: showState && (error || success || warning)
   };
   var testId = others.testId;
-  var prefixDirection = direction === _theme.DIRECTION_TYPE.RIGHT ? '‎' : '';
+  var prefixDirection = !defaultDirection ? '‎' : '';
   return /*#__PURE__*/_react.default.createElement(_primitives.View, {
     role: others.role || 'input-phone',
     className: (0, _helpers.styles)(_InputPhoneModule.default.container, others.className),

package/build/components/InputPhone/InputPhone.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPhone.js","names":["InputPhone","disabled","error","hint","icon","label","labelPrefix","name","prefixes","showRequired","showState","success","propValue","value","warning","onChange","onEnter","onError","onLeave","others","direction","Theme","getDirection","useState","focus","setFocus","prefixFocus","setPrefixFocus","parseValue","sanitizePrefixes","setValue","useEffect","getInputPhoneErrors","handleChange","next","event","isPhone","hasPrefixes","split","undefined","prefix","phone","nextValue","replace","join","trim","handleEnter","handleLeave","length","has","stateIcon","testId","prefixDirection","DIRECTION_TYPE","RIGHT","role","styles","stylePhone","container","className","style","inputBorder","content","prefixValue","map","input","withLabel","empty","separator","left","required","displayName","propTypes","PropTypes","bool","string","func","isRequired","arrayOf"],"sources":["../../../src/components/InputPhone/InputPhone.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { getInputPhoneErrors } from '../../helpers';\nimport { Icon, Input, Select, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { Expand } from '../InputSelect/partials';\nimport style from '../InputText/InputText.module.css';\nimport { Hint, IconState, Label } from '../InputText/partials';\nimport { parseValue, sanitizePrefixes } from './helpers';\nimport stylePhone from './InputPhone.module.css';\n\nconst InputPhone = ({\n  disabled,\n  error,\n  hint,\n  icon,\n  label,\n  labelPrefix,\n  name,\n  prefixes = [],\n  showRequired = false,\n  showState = true,\n  success,\n  value: propValue,\n  warning,\n  onChange = () => {},\n  onEnter = () => {},\n  onError = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const direction = Theme.getDirection();\n\n  const [focus, setFocus] = useState(false);\n  const [prefixFocus, setPrefixFocus] = useState(false);\n  const [value, setValue] = useState(parseValue(propValue, sanitizePrefixes(prefixes)));\n\n  useEffect(() => {\n    setValue(parseValue(propValue, sanitizePrefixes(prefixes)));\n  }, [prefixes, propValue]);\n\n  useEffect(() => {\n    onError(getInputPhoneErrors({ prefixes: sanitizePrefixes(prefixes), value }));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [prefixes, value]);\n\n  const handleChange = (next, event, { isPhone = true } = {}) => {\n    const [prefix = '', phone = ''] = hasPrefixes ? value?.split(' ') || [] : [undefined, value];\n    let nextValue = (isPhone ? [prefix, next?.replace(/[^\\d]/g, '')] : [next, phone]).join(' ');\n    if (!hasPrefixes) nextValue = nextValue.trim();\n\n    setValue(nextValue);\n    onChange(nextValue, event);\n  };\n\n  const handleEnter = (event, { isPhone = true } = {}) => {\n    isPhone ? setFocus(true) : setPrefixFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event, { isPhone = true } = {}) => {\n    isPhone ? setFocus(false) : setPrefixFocus(false);\n    onLeave(event);\n  };\n\n  const hasPrefixes = !!prefixes?.length;\n  const [prefix, phone] = hasPrefixes ? value?.split(' ') || [] : [undefined, value];\n  const has = {\n    icon: !!icon,\n    label: !!label,\n    labelPrefix: !!labelPrefix,\n    prefix: prefix?.length > 0,\n    phone: phone?.length > 0,\n    stateIcon: showState && (error || success || warning),\n  };\n  const { testId } = others;\n  const prefixDirection = direction === DIRECTION_TYPE.RIGHT ? '‎' : '';\n\n  return (\n    <View\n      role={others.role || 'input-phone'}\n      className={styles(stylePhone.container, others.className)}\n      style={others.style}\n    >\n      <View\n        row\n        className={styles(\n          style.inputBorder,\n          disabled && style.disabled,\n          error && style.error,\n          (focus || prefixFocus) && !error && style.focus,\n        )}\n      >\n        {hasPrefixes && (\n          <>\n            <View row>\n              <View className={style.content}>\n                {labelPrefix && (\n                  <Label {...{ disabled, error, focus: prefixFocus, label: labelPrefix, value: prefix }} />\n                )}\n                {prefix && (\n                  <Text className={stylePhone.prefixValue}>\n                    {prefixDirection}\n                    {prefix}\n                  </Text>\n                )}\n                <Select\n                  {...others}\n                  disabled={disabled}\n                  name={`${name}-prefix`}\n                  options={prefixes.map((prefix) => `${prefixDirection}${prefix}`)}\n                  values={sanitizePrefixes(prefixes)}\n                  style={undefined}\n                  type={undefined}\n                  value={prefix || ''}\n                  onChange={(value, event) => handleChange(value, event, { isPhone: false })}\n                  onEnter={(event) => handleEnter(event, { isPhone: false })}\n                  onLeave={(event) => handleLeave(event, { isPhone: false })}\n                  className={styles(\n                    style.input,\n                    stylePhone.prefix,\n                    has.labelPrefix && style.withLabel,\n                    has.labelPrefix && !(prefixFocus || error || has.prefix) && style.empty,\n                  )}\n                  testId={testId ? `${testId}-select` : undefined}\n                />\n              </View>\n\n              {!disabled && <Expand />}\n            </View>\n            <View forceRow className={stylePhone.separator}></View>\n          </>\n        )}\n\n        <View row wide>\n          {has.icon && (\n            <Icon\n              value={icon}\n              className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n            />\n          )}\n          <View wide className={style.content}>\n            {label && (\n              <Label {...{ disabled, error, focus, label, required: showRequired && others.required, value: phone }} />\n            )}\n            <Input\n              {...others}\n              disabled={disabled}\n              maxLength={12}\n              name={`${name}-phone`}\n              type=\"tel\"\n              value={phone || ''}\n              onChange={(value, event) => handleChange(value, event)}\n              onEnter={(event) => handleEnter(event)}\n              onLeave={(event) => handleLeave(event)}\n              className={styles(style.input, has.label && style.withLabel)}\n              testId={testId ? `${testId}-input` : undefined}\n            />\n          </View>\n        </View>\n        {has.stateIcon && <IconState {...{ error, success, warning }} />}\n      </View>\n      {hint && <Hint {...{ disabled, error, hint }} />}\n    </View>\n  );\n};\n\nInputPhone.displayName = 'Component:InputPhone';\n\nInputPhone.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  icon: PropTypes.func,\n  label: PropTypes.string,\n  labelPrefix: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  prefixes: PropTypes.arrayOf(PropTypes.string),\n  showRequired: PropTypes.bool,\n  showState: PropTypes.bool,\n  success: PropTypes.bool,\n  value: PropTypes.string,\n  warning: PropTypes.bool,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onError: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputPhone };\n"],"mappings":"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"}
+{"version":3,"file":"InputPhone.js","names":["InputPhone","disabled","error","hint","icon","label","labelPrefix","name","prefixes","showRequired","showState","success","propValue","value","warning","onChange","onEnter","onError","onLeave","others","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","useState","focus","setFocus","prefixFocus","setPrefixFocus","parseValue","sanitizePrefixes","setValue","useEffect","getInputPhoneErrors","handleChange","next","event","isPhone","hasPrefixes","split","undefined","prefix","phone","nextValue","replace","join","trim","handleEnter","handleLeave","length","has","stateIcon","testId","prefixDirection","role","styles","stylePhone","container","className","style","inputBorder","content","prefixValue","map","input","withLabel","empty","separator","left","required","displayName","propTypes","PropTypes","bool","string","func","isRequired","arrayOf"],"sources":["../../../src/components/InputPhone/InputPhone.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { getInputPhoneErrors } from '../../helpers';\nimport { Icon, Input, Select, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { Expand } from '../InputSelect/partials';\nimport style from '../InputText/InputText.module.css';\nimport { Hint, IconState, Label } from '../InputText/partials';\nimport { parseValue, sanitizePrefixes } from './helpers';\nimport stylePhone from './InputPhone.module.css';\n\nconst InputPhone = ({\n  disabled,\n  error,\n  hint,\n  icon,\n  label,\n  labelPrefix,\n  name,\n  prefixes = [],\n  showRequired = false,\n  showState = true,\n  success,\n  value: propValue,\n  warning,\n  onChange = () => {},\n  onEnter = () => {},\n  onError = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n\n  const [focus, setFocus] = useState(false);\n  const [prefixFocus, setPrefixFocus] = useState(false);\n  const [value, setValue] = useState(parseValue(propValue, sanitizePrefixes(prefixes)));\n\n  useEffect(() => {\n    setValue(parseValue(propValue, sanitizePrefixes(prefixes)));\n  }, [prefixes, propValue]);\n\n  useEffect(() => {\n    onError(getInputPhoneErrors({ prefixes: sanitizePrefixes(prefixes), value }));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [prefixes, value]);\n\n  const handleChange = (next, event, { isPhone = true } = {}) => {\n    const [prefix = '', phone = ''] = hasPrefixes ? value?.split(' ') || [] : [undefined, value];\n    let nextValue = (isPhone ? [prefix, next?.replace(/[^\\d]/g, '')] : [next, phone]).join(' ');\n    if (!hasPrefixes) nextValue = nextValue.trim();\n\n    setValue(nextValue);\n    onChange(nextValue, event);\n  };\n\n  const handleEnter = (event, { isPhone = true } = {}) => {\n    isPhone ? setFocus(true) : setPrefixFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event, { isPhone = true } = {}) => {\n    isPhone ? setFocus(false) : setPrefixFocus(false);\n    onLeave(event);\n  };\n\n  const hasPrefixes = !!prefixes?.length;\n  const [prefix, phone] = hasPrefixes ? value?.split(' ') || [] : [undefined, value];\n  const has = {\n    icon: !!icon,\n    label: !!label,\n    labelPrefix: !!labelPrefix,\n    prefix: prefix?.length > 0,\n    phone: phone?.length > 0,\n    stateIcon: showState && (error || success || warning),\n  };\n  const { testId } = others;\n  const prefixDirection = !defaultDirection ? '‎' : '';\n\n  return (\n    <View\n      role={others.role || 'input-phone'}\n      className={styles(stylePhone.container, others.className)}\n      style={others.style}\n    >\n      <View\n        row\n        className={styles(\n          style.inputBorder,\n          disabled && style.disabled,\n          error && style.error,\n          (focus || prefixFocus) && !error && style.focus,\n        )}\n      >\n        {hasPrefixes && (\n          <>\n            <View row>\n              <View className={style.content}>\n                {labelPrefix && (\n                  <Label {...{ disabled, error, focus: prefixFocus, label: labelPrefix, value: prefix }} />\n                )}\n                {prefix && (\n                  <Text className={stylePhone.prefixValue}>\n                    {prefixDirection}\n                    {prefix}\n                  </Text>\n                )}\n                <Select\n                  {...others}\n                  disabled={disabled}\n                  name={`${name}-prefix`}\n                  options={prefixes.map((prefix) => `${prefixDirection}${prefix}`)}\n                  values={sanitizePrefixes(prefixes)}\n                  style={undefined}\n                  type={undefined}\n                  value={prefix || ''}\n                  onChange={(value, event) => handleChange(value, event, { isPhone: false })}\n                  onEnter={(event) => handleEnter(event, { isPhone: false })}\n                  onLeave={(event) => handleLeave(event, { isPhone: false })}\n                  className={styles(\n                    style.input,\n                    stylePhone.prefix,\n                    has.labelPrefix && style.withLabel,\n                    has.labelPrefix && !(prefixFocus || error || has.prefix) && style.empty,\n                  )}\n                  testId={testId ? `${testId}-select` : undefined}\n                />\n              </View>\n\n              {!disabled && <Expand />}\n            </View>\n            <View forceRow className={stylePhone.separator}></View>\n          </>\n        )}\n\n        <View row wide>\n          {has.icon && (\n            <Icon\n              value={icon}\n              className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n            />\n          )}\n          <View wide className={style.content}>\n            {label && (\n              <Label {...{ disabled, error, focus, label, required: showRequired && others.required, value: phone }} />\n            )}\n            <Input\n              {...others}\n              disabled={disabled}\n              maxLength={12}\n              name={`${name}-phone`}\n              type=\"tel\"\n              value={phone || ''}\n              onChange={(value, event) => handleChange(value, event)}\n              onEnter={(event) => handleEnter(event)}\n              onLeave={(event) => handleLeave(event)}\n              className={styles(style.input, has.label && style.withLabel)}\n              testId={testId ? `${testId}-input` : undefined}\n            />\n          </View>\n        </View>\n        {has.stateIcon && <IconState {...{ error, success, warning }} />}\n      </View>\n      {hint && <Hint {...{ disabled, error, hint }} />}\n    </View>\n  );\n};\n\nInputPhone.displayName = 'Component:InputPhone';\n\nInputPhone.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  icon: PropTypes.func,\n  label: PropTypes.string,\n  labelPrefix: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  prefixes: PropTypes.arrayOf(PropTypes.string),\n  showRequired: PropTypes.bool,\n  showState: PropTypes.bool,\n  success: PropTypes.bool,\n  value: PropTypes.string,\n  warning: PropTypes.bool,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onError: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputPhone };\n"],"mappings":"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"}

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

@@ -36,7 +36,7 @@ exports[`component:<InputPhone> inherit:className 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -178,7 +178,7 @@ exports[`component:<InputPhone> prop:error 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -280,7 +280,7 @@ exports[`component:<InputPhone> prop:hint 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -448,7 +448,7 @@ exports[`component:<InputPhone> prop:icon & error 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -571,7 +571,7 @@ exports[`component:<InputPhone> prop:icon 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -673,7 +673,7 @@ exports[`component:<InputPhone> prop:label 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -764,7 +764,7 @@ exports[`component:<InputPhone> prop:labelPrefix 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -851,7 +851,7 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -949,7 +949,7 @@ exports[`component:<InputPhone> prop:required 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1036,7 +1036,7 @@ exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1138,7 +1138,7 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1240,7 +1240,7 @@ exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1338,7 +1338,7 @@ exports[`component:<InputPhone> prop:success 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1445,7 +1445,7 @@ exports[`component:<InputPhone> prop:value 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1554,7 +1554,7 @@ exports[`component:<InputPhone> prop:warning 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1652,7 +1652,7 @@ exports[`component:<InputPhone> renders 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1734,7 +1734,7 @@ exports[`component:<InputPhone> testId 1`] = `
           </select>
         </div>
         <span
-          class="icon headline-3 icon expand expandLeft"
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"

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

@@ -43,7 +43,7 @@ exports[`component:<InputSelect> inherit:className 1`] = `
         </select>
       </div>
       <span
-        class="icon headline-3 icon expand expandLeft"
+        class="icon headline-3 icon expand"
       >
         <svg
           fill="currentColor"
@@ -117,7 +117,7 @@ exports[`component:<InputSelect> prop:caption 1`] = `
         </select>
       </div>
       <span
-        class="icon headline-3 icon expand expandLeft"
+        class="icon headline-3 icon expand"
       >
         <svg
           fill="currentColor"
@@ -234,7 +234,7 @@ exports[`component:<InputSelect> prop:error 1`] = `
         </select>
       </div>
       <span
-        class="icon headline-3 icon expand expandLeft"
+        class="icon headline-3 icon expand"
       >
         <svg
           fill="currentColor"
@@ -303,7 +303,7 @@ exports[`component:<InputSelect> prop:hint 1`] = `
         </select>
       </div>
       <span
-        class="icon headline-3 icon expand expandLeft"
+        class="icon headline-3 icon expand"
       >
         <svg
           fill="currentColor"
@@ -382,7 +382,7 @@ exports[`component:<InputSelect> prop:label 1`] = `
         </select>
       </div>
       <span
-        class="icon headline-3 icon expand expandLeft"
+        class="icon headline-3 icon expand"
       >
         <svg
           fill="currentColor"
@@ -462,7 +462,7 @@ exports[`component:<InputSelect> prop:required & prop:showRequired (true) 1`] =
         </select>
       </div>
       <span
-        class="icon headline-3 icon expand expandLeft"
+        class="icon headline-3 icon expand"
       >
         <svg
           fill="currentColor"
@@ -537,7 +537,7 @@ exports[`component:<InputSelect> prop:required 1`] = `
         </select>
       </div>
       <span
-        class="icon headline-3 icon expand expandLeft"
+        class="icon headline-3 icon expand"
       >
         <svg
           fill="currentColor"
@@ -654,7 +654,7 @@ exports[`component:<InputSelect> prop:value 1`] = `
         </select>
       </div>
       <span
-        class="icon headline-3 icon expand expandLeft"
+        class="icon headline-3 icon expand"
       >
         <svg
           fill="currentColor"
@@ -723,7 +723,7 @@ exports[`component:<InputSelect> prop:warning 1`] = `
         </select>
       </div>
       <span
-        class="icon headline-3 icon expand expandLeft"
+        class="icon headline-3 icon expand"
       >
         <svg
           fill="currentColor"
@@ -809,7 +809,7 @@ exports[`component:<InputSelect> renders 1`] = `
         </select>
       </div>
       <span
-        class="icon headline-3 icon expand expandLeft"
+        class="icon headline-3 icon expand"
       >
         <svg
           fill="currentColor"
@@ -879,7 +879,7 @@ exports[`component:<InputSelect> testId 1`] = `
         </select>
       </div>
       <span
-        class="icon headline-3 icon expand expandLeft"
+        class="icon headline-3 icon expand"
       >
         <svg
           fill="currentColor"

package/build/components/InputSelect/partials/InputSelect.Expand.js

@@ -11,10 +11,10 @@ var _theme = require("../../../theme");
 var _InputTextModule = _interopRequireDefault(require("../../InputText/InputText.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Expand = function Expand() {
-  var direction = _theme.Theme.getDirection();
+  var defaultDirection = _theme.Theme.getDirection() === _theme.DIRECTION_TYPE.LEFT;
   return /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: _primitives.ICON.EXPAND_MORE,
-    className: (0, _helpers.styles)(_InputTextModule.default.icon, _InputTextModule.default.expand, direction === _theme.DIRECTION_TYPE.RIGHT ? _InputTextModule.default.expandRight : _InputTextModule.default.expandLeft)
+    className: (0, _helpers.styles)(_InputTextModule.default.icon, _InputTextModule.default.expand, !defaultDirection && _InputTextModule.default.reverse)
   });
 };
 exports.Expand = Expand;

package/build/components/InputSelect/partials/InputSelect.Expand.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputSelect.Expand.js","names":["Expand","direction","Theme","getDirection","ICON","EXPAND_MORE","styles","style","icon","expand","DIRECTION_TYPE","RIGHT","expandRight","expandLeft","displayName","propTypes"],"sources":["../../../../src/components/InputSelect/partials/InputSelect.Expand.jsx"],"sourcesContent":["import React from 'react';\n\nimport { styles } from '../../../helpers';\nimport { Icon, ICON } from '../../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../../theme';\nimport style from '../../InputText/InputText.module.css';\n\nconst Expand = () => {\n  const direction = Theme.getDirection();\n\n  return (\n    <Icon\n      value={ICON.EXPAND_MORE}\n      className={styles(\n        style.icon,\n        style.expand,\n        direction === DIRECTION_TYPE.RIGHT ? style.expandRight : style.expandLeft,\n      )}\n    />\n  );\n};\n\nExpand.displayName = 'Component:InputSelect.Expand';\n\nExpand.propTypes = {};\n\nexport { Expand };\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AACA;AAAyD;AAEzD,IAAMA,MAAM,GAAG,SAATA,MAAM,GAAS;EACnB,IAAMC,SAAS,GAAGC,YAAK,CAACC,YAAY,EAAE;EAEtC,oBACE,6BAAC,gBAAI;IACH,KAAK,EAAEC,gBAAI,CAACC,WAAY;IACxB,SAAS,EAAE,IAAAC,eAAM,EACfC,wBAAK,CAACC,IAAI,EACVD,wBAAK,CAACE,MAAM,EACZR,SAAS,KAAKS,qBAAc,CAACC,KAAK,GAAGJ,wBAAK,CAACK,WAAW,GAAGL,wBAAK,CAACM,UAAU;EACzE,EACF;AAEN,CAAC;AAAC;AAEFb,MAAM,CAACc,WAAW,GAAG,8BAA8B;AAEnDd,MAAM,CAACe,SAAS,GAAG,CAAC,CAAC"}
+{"version":3,"file":"InputSelect.Expand.js","names":["Expand","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","ICON","EXPAND_MORE","styles","style","icon","expand","reverse","displayName","propTypes"],"sources":["../../../../src/components/InputSelect/partials/InputSelect.Expand.jsx"],"sourcesContent":["import React from 'react';\n\nimport { styles } from '../../../helpers';\nimport { Icon, ICON } from '../../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../../theme';\nimport style from '../../InputText/InputText.module.css';\n\nconst Expand = () => {\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n\n  return (\n    <Icon value={ICON.EXPAND_MORE} className={styles(style.icon, style.expand, !defaultDirection && style.reverse)} />\n  );\n};\n\nExpand.displayName = 'Component:InputSelect.Expand';\n\nExpand.propTypes = {};\n\nexport { Expand };\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AACA;AAAyD;AAEzD,IAAMA,MAAM,GAAG,SAATA,MAAM,GAAS;EACnB,IAAMC,gBAAgB,GAAGC,YAAK,CAACC,YAAY,EAAE,KAAKC,qBAAc,CAACC,IAAI;EAErE,oBACE,6BAAC,gBAAI;IAAC,KAAK,EAAEC,gBAAI,CAACC,WAAY;IAAC,SAAS,EAAE,IAAAC,eAAM,EAACC,wBAAK,CAACC,IAAI,EAAED,wBAAK,CAACE,MAAM,EAAE,CAACV,gBAAgB,IAAIQ,wBAAK,CAACG,OAAO;EAAE,EAAG;AAEtH,CAAC;AAAC;AAEFZ,MAAM,CAACa,WAAW,GAAG,8BAA8B;AAEnDb,MAAM,CAACc,SAAS,GAAG,CAAC,CAAC"}

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

@@ -49,11 +49,11 @@
   z-index: var(--mirai-ui-layer-S);
 }
 
-.icon.expandLeft {
+.icon.expand:not(.reverse) {
   margin-left: calc(var(--mirai-ui-input-text-icon) * -1);
 }
 
-.icon.expandRight {
+.icon.expand.reverse {
   margin-right: calc(var(--mirai-ui-input-text-icon) * -1);
 }
 

package/build/components/Modal/Modal.js

@@ -12,6 +12,7 @@ var _components = require("../../components");
 var _helpers = require("../../helpers");
 var _hooks = require("../../hooks");
 var _primitives = require("../../primitives");
+var _theme = require("../../theme");
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
 var _excluded = ["blur", "children", "fit", "mobileBehavior", "overflow", "portal", "preventDefault", "title", "visible", "onBack", "onClose", "onOverflow"];
 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); }
@@ -87,6 +88,7 @@ var Modal = function Modal(_ref) {
     var target = event.target;
     onOverflow && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) && onOverflow(event);
   };
+  var defaultDirection = _theme.Theme.getDirection() === _theme.DIRECTION_TYPE.LEFT;
   var renderer = _helpers.IS_JEST || !portal ? function (jsx) {
     return jsx;
   } : _reactDom.default.createPortal;
@@ -106,8 +108,8 @@ var Modal = function Modal(_ref) {
     role: others.role || 'modal',
     className: (0, _helpers.styles)(_ModalModule.default.modal, !fit && _ModalModule.default.calcWidth, visible && _ModalModule.default.visible, others.className)
   }), (title || onBack || onClose) && /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    forceRow: true,
-    className: _ModalModule.default.header
+    row: true,
+    className: (0, _helpers.styles)(_ModalModule.default.header, !defaultDirection && _ModalModule.default.reverse, !onBack && _ModalModule.default.hideBack, !onClose && _ModalModule.default.hideClose)
   }, onBack && /*#__PURE__*/_react.default.createElement(_components.Button, {
     transparent: true,
     small: true,
@@ -119,7 +121,7 @@ var Modal = function Modal(_ref) {
     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)
+    className: _ModalModule.default.title
   }, title), onClose && /*#__PURE__*/_react.default.createElement(_components.Button, {
     transparent: true,
     small: true,

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","mobileBehavior","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","height","ref","useRef","useState","dataset","setDataset","useEffect","handleKeydown","event","key","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","styles","style","container","modal","calcWidth","className","header","ICON","LEFT","icon","left","right","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","displayName","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\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  mobileBehavior = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (!visible || !onClose) return;\n\n    const handleKeydown = (event) => event.key === 'Escape' && onClose();\n\n    document.addEventListener('keydown', handleKeydown);\n    return () => document.removeEventListener('keydown', handleKeydown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\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 handleOverflow = (event) => {\n    const { target } = event;\n    onOverflow && !ref.current?.contains(target) && onOverflow(event);\n  };\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      role={others.role ? `${others.role}-overflow` : 'modal-overflow'}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        isDesktop && mobileBehavior && style.mobileBehavior,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      style={{ height }}\n      testId={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        role={others.role || 'modal'}\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View forceRow className={style.header}>\n            {onBack && (\n              <Button transparent small squared onPress={onBack} testId={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                transparent\n                small\n                squared\n                onPress={onClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n                className={style.button}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n\n        {React.Children.map(children, (child, index) =>\n          !child || child === null\n            ? null\n            : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n        )}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  mobileBehavior: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEvC,IAAMA,KAAK,GAAG,SAARA,KAAK,OAcL;EAAA,qBAbJC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,KAAK;IAAA,2BACXC,cAAc;IAAdA,cAAc,oCAAG,KAAK;IAAA,qBACtBC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IAAA,mBACfC,MAAM;IAANA,MAAM,4BAAG,KAAK;IAAA,2BACdC,cAAc;IAAdA,cAAc,oCAAG,IAAI;IACrBC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IACPC,MAAM;EAET,iBAA8B,IAAAC,gBAAS,GAAE;IAAjCC,SAAS,cAATA,SAAS;IAAEC,MAAM,cAANA,MAAM;EACzB,IAAMC,GAAG,GAAG,IAAAC,aAAM,GAAE;EAEpB,gBAA8B,IAAAC,eAAQ,GAAE;IAAA;IAAjCC,OAAO;IAAEC,UAAU;EAE1B,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAI,CAACb,OAAO,IAAI,CAACE,OAAO,EAAE;IAE1B,IAAMY,aAAa,GAAG,SAAhBA,aAAa,CAAIC,KAAK;MAAA,OAAKA,KAAK,CAACC,GAAG,KAAK,QAAQ,IAAId,OAAO,EAAE;IAAA;IAEpEe,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEJ,aAAa,CAAC;IACnD,OAAO;MAAA,OAAMG,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEL,aAAa,CAAC;IAAA;IACnE;EACF,CAAC,EAAE,CAACd,OAAO,CAAC,CAAC;EAEb,IAAAa,gBAAS,EAAC,YAAM;IACd,IAAIb,OAAO,IAAI,CAACW,OAAO,EAAE;MACvBC,UAAU,CAAC,IAAI,CAAC;MAChBK,QAAQ,CAACG,IAAI,CAACT,OAAO,CAACU,UAAU,GAAG,IAAI;IACzC;IAEA,OAAO,YAAM;MACX,IAAIrB,OAAO,IAAIW,OAAO,EAAE;QACtBC,UAAU,CAACU,SAAS,CAAC;QACrB,OAAOL,QAAQ,CAACG,IAAI,CAACT,OAAO,CAACU,UAAU;MACzC;IACF,CAAC;EACH,CAAC,EAAE,CAACV,OAAO,EAAEX,OAAO,CAAC,CAAC;EAEtB,IAAMuB,cAAc,GAAG,SAAjBA,cAAc,CAAIR,KAAK,EAAK;IAAA;IAChC,IAAQS,MAAM,GAAKT,KAAK,CAAhBS,MAAM;IACdrB,UAAU,IAAI,kBAACK,GAAG,CAACiB,OAAO,yCAAX,aAAaC,QAAQ,CAACF,MAAM,CAAC,KAAIrB,UAAU,CAACY,KAAK,CAAC;EACnE,CAAC;EAED,IAAMY,QAAQ,GAAGC,gBAAO,IAAI,CAAC/B,MAAM,GAAG,UAACgC,GAAG;IAAA,OAAKA,GAAG;EAAA,IAAGC,iBAAQ,CAACC,YAAY;EAE1E,IAAQC,MAAM,GAAK5B,MAAM,CAAjB4B,MAAM;EAEd,OAAOL,QAAQ,eACb,6BAAC,qBAAS;IACR,cAAc,EAAE7B,cAAe;IAC/B,IAAI,EAAEM,MAAM,CAAC6B,IAAI,aAAM7B,MAAM,CAAC6B,IAAI,iBAAc,gBAAiB;IACjE,OAAO,EAAEjC,OAAO,IAAIJ,QAAQ,GAAG2B,cAAc,GAAGD,SAAU;IAC1D,SAAS,EAAE,IAAAY,eAAM,EACfC,oBAAK,CAACC,SAAS,EACf9B,SAAS,IAAIX,cAAc,IAAIwC,oBAAK,CAACxC,cAAc,EACnDC,QAAQ,IAAIuC,oBAAK,CAACvC,QAAQ,EAC1BA,QAAQ,IAAIJ,IAAI,IAAI2C,oBAAK,CAAC3C,IAAI,EAC9BQ,OAAO,IAAImC,oBAAK,CAACnC,OAAO,EACxBG,UAAU,IAAIgC,oBAAK,CAAChC,UAAU,CAC9B;IACF,KAAK,EAAE;MAAEI,MAAM,EAANA;IAAO,CAAE;IAClB,MAAM,EAAEyB,MAAM,aAAMA,MAAM,iBAAcV;EAAU,gBAElD,6BAAC,gBAAI,eACClB,MAAM;IACV,GAAG;IACH,GAAG,EAAEI,GAAI;IACT,IAAI,EAAEJ,MAAM,CAAC6B,IAAI,IAAI,OAAQ;IAC7B,SAAS,EAAE,IAAAC,eAAM,EAACC,oBAAK,CAACE,KAAK,EAAE,CAAC3C,GAAG,IAAIyC,oBAAK,CAACG,SAAS,EAAEtC,OAAO,IAAImC,oBAAK,CAACnC,OAAO,EAAEI,MAAM,CAACmC,SAAS;EAAE,IAEnG,CAACxC,KAAK,IAAIE,MAAM,IAAIC,OAAO,kBAC1B,6BAAC,gBAAI;IAAC,QAAQ;IAAC,SAAS,EAAEiC,oBAAK,CAACK;EAAO,GACpCvC,MAAM,iBACL,6BAAC,kBAAM;IAAC,WAAW;IAAC,KAAK;IAAC,OAAO;IAAC,OAAO,EAAEA,MAAO;IAAC,MAAM,EAAE+B,MAAM,aAAMA,MAAM,oBAAiBV;EAAU,gBACtG,6BAAC,gBAAI;IAAC,KAAK,EAAEmB,gBAAI,CAACC,IAAK;IAAC,SAAS,EAAEP,oBAAK,CAACQ;EAAK,EAAG,CAEpD,EACA5C,KAAK,iBACJ,6BAAC,gBAAI;IAAC,QAAQ;IAAC,SAAS,EAAE,IAAAmC,eAAM,EAACC,oBAAK,CAACpC,KAAK,EAAE,CAACE,MAAM,IAAIkC,oBAAK,CAACS,IAAI,EAAE,CAAC1C,OAAO,IAAIiC,oBAAK,CAACU,KAAK;EAAE,GAC3F9C,KAAK,CAET,EACAG,OAAO,iBACN,6BAAC,kBAAM;IACL,WAAW;IACX,KAAK;IACL,OAAO;IACP,OAAO,EAAEA,OAAQ;IACjB,MAAM,EAAE8B,MAAM,aAAMA,MAAM,qBAAkBV,SAAU;IACtD,SAAS,EAAEa,oBAAK,CAACW;EAAO,gBAExB,6BAAC,gBAAI;IAAC,KAAK,EAAExC,SAAS,IAAIP,KAAK,KAAKuB,SAAS,GAAGmB,gBAAI,CAACM,KAAK,GAAGN,gBAAI,CAACO,WAAY;IAAC,SAAS,EAAEb,oBAAK,CAACQ;EAAK,EAAG,CAE3G,CAEJ,EAEAM,cAAK,CAACC,QAAQ,CAACC,GAAG,CAAC1D,QAAQ,EAAE,UAAC2D,KAAK,EAAEC,KAAK;IAAA,OACzC,CAACD,KAAK,IAAIA,KAAK,KAAK,IAAI,GACpB,IAAI,gBACJH,cAAK,CAACK,YAAY,CAACF,KAAK;MAAIpC,GAAG,EAAEoC,KAAK,CAACpC,GAAG,IAAIqC;IAAK,GAAKD,KAAK,CAACG,KAAK;MAAEtB,IAAI,EAAE;IAAe,GAAG;EAAA,EAClG,CACI,CACG,EACZhB,QAAQ,CAACG,IAAI,CACd;AACH,CAAC;AAAC;AAEF7B,KAAK,CAACiE,WAAW,GAAG,iBAAiB;AAErCjE,KAAK,CAACkE,SAAS,GAAG;EAChBjE,IAAI,EAAEkE,kBAAS,CAACC,IAAI;EACpBlE,QAAQ,EAAEiE,kBAAS,CAACE,IAAI;EACxBlE,GAAG,EAAEgE,kBAAS,CAACC,IAAI;EACnBhE,cAAc,EAAE+D,kBAAS,CAACC,IAAI;EAC9B/D,QAAQ,EAAE8D,kBAAS,CAACC,IAAI;EACxB9D,MAAM,EAAE6D,kBAAS,CAACC,IAAI;EACtB7D,cAAc,EAAE4D,kBAAS,CAACC,IAAI;EAC9B5D,KAAK,EAAE2D,kBAAS,CAACG,MAAM;EACvB7D,OAAO,EAAE0D,kBAAS,CAACC,IAAI;EACvB1D,MAAM,EAAEyD,kBAAS,CAACI,IAAI;EACtB5D,OAAO,EAAEwD,kBAAS,CAACI,IAAI;EACvB3D,UAAU,EAAEuD,kBAAS,CAACI;AACxB,CAAC"}
+{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","mobileBehavior","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","height","ref","useRef","useState","dataset","setDataset","useEffect","handleKeydown","event","key","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","styles","style","container","modal","calcWidth","className","header","reverse","hideBack","hideClose","ICON","icon","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","displayName","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  fit = false,\n  mobileBehavior = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (!visible || !onClose) return;\n\n    const handleKeydown = (event) => event.key === 'Escape' && onClose();\n\n    document.addEventListener('keydown', handleKeydown);\n    return () => document.removeEventListener('keydown', handleKeydown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\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 handleOverflow = (event) => {\n    const { target } = event;\n    onOverflow && !ref.current?.contains(target) && onOverflow(event);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      role={others.role ? `${others.role}-overflow` : 'modal-overflow'}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        isDesktop && mobileBehavior && style.mobileBehavior,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      style={{ height }}\n      testId={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        role={others.role || 'modal'}\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View\n            row\n            className={styles(\n              style.header,\n              !defaultDirection && style.reverse,\n              !onBack && style.hideBack,\n              !onClose && style.hideClose,\n            )}\n          >\n            {onBack && (\n              <Button transparent small squared onPress={onBack} testId={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline className={style.title}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                transparent\n                small\n                squared\n                onPress={onClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n                className={style.button}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n\n        {React.Children.map(children, (child, index) =>\n          !child || child === null\n            ? null\n            : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n        )}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  mobileBehavior: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}

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

@@ -26,22 +26,25 @@
 .header {
   align-items: center;
   border-bottom: solid var(--mirai-ui-border-width) var(--mirai-ui-content-border);
-  padding: var(--mirai-ui-modal-header-padding);
+  gap: var(--mirai-ui-space-XS);
+  padding: var(--mirai-ui-modal-header-padding) calc(var(--mirai-ui-modal-header-padding) / 1.5);
   width: 100%;
 }
 
-.header .title {
-  flex: 1;
-  padding: 0 var(--mirai-ui-modal-header-padding);
-  text-align: center;
+.header:not(.reverse).hideBack,
+.header.reverse.hideClose {
+  padding-left: calc(var(--mirai-ui-modal-icon) + var(--mirai-ui-space-M));
 }
 
-.header .title.left {
-  margin-left: var(--mirai-ui-modal-icon);
+.header:not(.reverse).hideClose,
+.header.reverse.hideBack {
+  padding-right: calc(var(--mirai-ui-modal-icon) + var(--mirai-ui-space-M));
 }
 
-.header .title.right {
-  margin-right: var(--mirai-ui-modal-icon);
+.header .title {
+  flex: 1;
+  padding: 0 var(--mirai-ui-modal-header-padding);
+  text-align: center;
 }
 
 .header .icon {

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

@@ -91,7 +91,7 @@ Story.storyName = 'Modal';
 Story.args = {
   blur: false,
   fit: false,
-  mobileBehavior: true,
+  mobileBehavior: false,
   overflow: true,
   portal: false,
   title: 'title',

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.js","names":["title","Story","props","useState","visible","setVisible","visibleSecond","setVisibleSecond","handleBack","others","console","log","handleClose","handleOverflow","padding","storyName","args","blur","fit","mobileBehavior","overflow","portal","testId","style","argTypes"],"sources":["../../../src/components/Modal/Modal.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Button, Text, View } from '../../';\nimport { Modal } from './Modal';\n\nexport default {\n  title: 'Components',\n};\n\nexport const Story = (props) => {\n  const [visible, setVisible] = useState(true);\n  const [visibleSecond, setVisibleSecond] = useState(false);\n\n  const handleBack = (...others) => {\n    console.log('<Modal>::onBack', ...others);\n    setVisibleSecond(false);\n  };\n\n  const handleClose = (...others) => {\n    console.log('<Modal>::onClose', ...others);\n    setVisible(false);\n  };\n\n  const handleOverflow = (...others) => {\n    console.log('<Modal>::onOverflow', ...others);\n    handleClose(others);\n  };\n\n  return (\n    <>\n      <Text bold headline>\n        What is Lorem Ipsum?\n      </Text>\n      <Text>\n        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's\n        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make\n        a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,\n        remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing\n        Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions\n        of Lorem Ipsum.\n      </Text>\n\n      <Button onPress={() => setVisible(true)}>Show modal</Button>\n\n      <Text bold headline>\n        Where does it come from?\n      </Text>\n      <Text>\n        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin\n        literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney\n        College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and\n        going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum\n        comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by\n        Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.\n        The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.\n      </Text>\n\n      <Modal {...props} onClose={handleClose} onOverflow={handleOverflow} visible={visible}>\n        <View style={{ padding: 'var(--mirai-ui-space-L)' }}>\n          <Text>\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nemo adipisci consequatur et tenetur natus\n            dolore, facere facilis placeat nostrum unde cumque. Voluptas enim rerum voluptatum, deserunt fugiat\n            aspernatur excepturi.\n          </Text>\n          <Button onPress={() => setVisibleSecond(true)}>Show another Modal</Button>\n        </View>\n      </Modal>\n\n      <Modal {...props} onBack={handleBack} onOverflow={handleOverflow} visible={visibleSecond}>\n        <View style={{ padding: 'var(--mirai-ui-space-L)' }}>\n          <Text>\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nemo adipisci consequatur et tenetur natus\n            dolore, facere facilis placeat nostrum unde cumque. Voluptas enim rerum voluptatum, deserunt fugiat\n            aspernatur excepturi.\n          </Text>\n        </View>\n      </Modal>\n    </>\n  );\n};\nStory.storyName = 'Modal';\n\nStory.args = {\n  blur: false,\n  fit: false,\n  mobileBehavior: true,\n  overflow: true,\n  portal: false,\n  title: 'title',\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EACbA,KAAK,EAAE;AACT,CAAC;AAAA;AAEM,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA8B,IAAAC,eAAQ,EAAC,IAAI,CAAC;IAAA;IAArCC,OAAO;IAAEC,UAAU;EAC1B,iBAA0C,IAAAF,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAlDG,aAAa;IAAEC,gBAAgB;EAEtC,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAkB;IAAA;IAAA,kCAAXC,MAAM;MAANA,MAAM;IAAA;IAC3B,YAAAC,OAAO,EAACC,GAAG,kBAAC,iBAAiB,SAAKF,MAAM,EAAC;IACzCF,gBAAgB,CAAC,KAAK,CAAC;EACzB,CAAC;EAED,IAAMK,WAAW,GAAG,SAAdA,WAAW,GAAkB;IAAA;IAAA,mCAAXH,MAAM;MAANA,MAAM;IAAA;IAC5B,aAAAC,OAAO,EAACC,GAAG,mBAAC,kBAAkB,SAAKF,MAAM,EAAC;IAC1CJ,UAAU,CAAC,KAAK,CAAC;EACnB,CAAC;EAED,IAAMQ,cAAc,GAAG,SAAjBA,cAAc,GAAkB;IAAA;IAAA,mCAAXJ,MAAM;MAANA,MAAM;IAAA;IAC/B,aAAAC,OAAO,EAACC,GAAG,mBAAC,qBAAqB,SAAKF,MAAM,EAAC;IAC7CG,WAAW,CAACH,MAAM,CAAC;EACrB,CAAC;EAED,oBACE,yEACE,6BAAC,MAAI;IAAC,IAAI;IAAC,QAAQ;EAAA,0BAEZ,eACP,6BAAC,MAAI,ykBAOE,eAEP,6BAAC,QAAM;IAAC,OAAO,EAAE;MAAA,OAAMJ,UAAU,CAAC,IAAI,CAAC;IAAA;EAAC,gBAAoB,eAE5D,6BAAC,MAAI;IAAC,IAAI;IAAC,QAAQ;EAAA,8BAEZ,eACP,6BAAC,MAAI,0wBAQE,eAEP,6BAAC,YAAK,eAAKH,KAAK;IAAE,OAAO,EAAEU,WAAY;IAAC,UAAU,EAAEC,cAAe;IAAC,OAAO,EAAET;EAAQ,iBACnF,6BAAC,MAAI;IAAC,KAAK,EAAE;MAAEU,OAAO,EAAE;IAA0B;EAAE,gBAClD,6BAAC,MAAI,8OAIE,eACP,6BAAC,QAAM;IAAC,OAAO,EAAE;MAAA,OAAMP,gBAAgB,CAAC,IAAI,CAAC;IAAA;EAAC,wBAA4B,CACrE,CACD,eAER,6BAAC,YAAK,eAAKL,KAAK;IAAE,MAAM,EAAEM,UAAW;IAAC,UAAU,EAAEK,cAAe;IAAC,OAAO,EAAEP;EAAc,iBACvF,6BAAC,MAAI;IAAC,KAAK,EAAE;MAAEQ,OAAO,EAAE;IAA0B;EAAE,gBAClD,6BAAC,MAAI,8OAIE,CACF,CACD,CACP;AAEP,CAAC;AAAC;AACFb,KAAK,CAACc,SAAS,GAAG,OAAO;AAEzBd,KAAK,CAACe,IAAI,GAAG;EACXC,IAAI,EAAE,KAAK;EACXC,GAAG,EAAE,KAAK;EACVC,cAAc,EAAE,IAAI;EACpBC,QAAQ,EAAE,IAAI;EACdC,MAAM,EAAE,KAAK;EACbrB,KAAK,EAAE,OAAO;EACd;EACAsB,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDtB,KAAK,CAACuB,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Modal.stories.js","names":["title","Story","props","useState","visible","setVisible","visibleSecond","setVisibleSecond","handleBack","others","console","log","handleClose","handleOverflow","padding","storyName","args","blur","fit","mobileBehavior","overflow","portal","testId","style","argTypes"],"sources":["../../../src/components/Modal/Modal.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Button, Text, View } from '../../';\nimport { Modal } from './Modal';\n\nexport default {\n  title: 'Components',\n};\n\nexport const Story = (props) => {\n  const [visible, setVisible] = useState(true);\n  const [visibleSecond, setVisibleSecond] = useState(false);\n\n  const handleBack = (...others) => {\n    console.log('<Modal>::onBack', ...others);\n    setVisibleSecond(false);\n  };\n\n  const handleClose = (...others) => {\n    console.log('<Modal>::onClose', ...others);\n    setVisible(false);\n  };\n\n  const handleOverflow = (...others) => {\n    console.log('<Modal>::onOverflow', ...others);\n    handleClose(others);\n  };\n\n  return (\n    <>\n      <Text bold headline>\n        What is Lorem Ipsum?\n      </Text>\n      <Text>\n        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's\n        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make\n        a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,\n        remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing\n        Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions\n        of Lorem Ipsum.\n      </Text>\n\n      <Button onPress={() => setVisible(true)}>Show modal</Button>\n\n      <Text bold headline>\n        Where does it come from?\n      </Text>\n      <Text>\n        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin\n        literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney\n        College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and\n        going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum\n        comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by\n        Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.\n        The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.\n      </Text>\n\n      <Modal {...props} onClose={handleClose} onOverflow={handleOverflow} visible={visible}>\n        <View style={{ padding: 'var(--mirai-ui-space-L)' }}>\n          <Text>\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nemo adipisci consequatur et tenetur natus\n            dolore, facere facilis placeat nostrum unde cumque. Voluptas enim rerum voluptatum, deserunt fugiat\n            aspernatur excepturi.\n          </Text>\n          <Button onPress={() => setVisibleSecond(true)}>Show another Modal</Button>\n        </View>\n      </Modal>\n\n      <Modal {...props} onBack={handleBack} onOverflow={handleOverflow} visible={visibleSecond}>\n        <View style={{ padding: 'var(--mirai-ui-space-L)' }}>\n          <Text>\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nemo adipisci consequatur et tenetur natus\n            dolore, facere facilis placeat nostrum unde cumque. Voluptas enim rerum voluptatum, deserunt fugiat\n            aspernatur excepturi.\n          </Text>\n        </View>\n      </Modal>\n    </>\n  );\n};\nStory.storyName = 'Modal';\n\nStory.args = {\n  blur: false,\n  fit: false,\n  mobileBehavior: false,\n  overflow: true,\n  portal: false,\n  title: 'title',\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EACbA,KAAK,EAAE;AACT,CAAC;AAAA;AAEM,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA8B,IAAAC,eAAQ,EAAC,IAAI,CAAC;IAAA;IAArCC,OAAO;IAAEC,UAAU;EAC1B,iBAA0C,IAAAF,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAlDG,aAAa;IAAEC,gBAAgB;EAEtC,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAkB;IAAA;IAAA,kCAAXC,MAAM;MAANA,MAAM;IAAA;IAC3B,YAAAC,OAAO,EAACC,GAAG,kBAAC,iBAAiB,SAAKF,MAAM,EAAC;IACzCF,gBAAgB,CAAC,KAAK,CAAC;EACzB,CAAC;EAED,IAAMK,WAAW,GAAG,SAAdA,WAAW,GAAkB;IAAA;IAAA,mCAAXH,MAAM;MAANA,MAAM;IAAA;IAC5B,aAAAC,OAAO,EAACC,GAAG,mBAAC,kBAAkB,SAAKF,MAAM,EAAC;IAC1CJ,UAAU,CAAC,KAAK,CAAC;EACnB,CAAC;EAED,IAAMQ,cAAc,GAAG,SAAjBA,cAAc,GAAkB;IAAA;IAAA,mCAAXJ,MAAM;MAANA,MAAM;IAAA;IAC/B,aAAAC,OAAO,EAACC,GAAG,mBAAC,qBAAqB,SAAKF,MAAM,EAAC;IAC7CG,WAAW,CAACH,MAAM,CAAC;EACrB,CAAC;EAED,oBACE,yEACE,6BAAC,MAAI;IAAC,IAAI;IAAC,QAAQ;EAAA,0BAEZ,eACP,6BAAC,MAAI,ykBAOE,eAEP,6BAAC,QAAM;IAAC,OAAO,EAAE;MAAA,OAAMJ,UAAU,CAAC,IAAI,CAAC;IAAA;EAAC,gBAAoB,eAE5D,6BAAC,MAAI;IAAC,IAAI;IAAC,QAAQ;EAAA,8BAEZ,eACP,6BAAC,MAAI,0wBAQE,eAEP,6BAAC,YAAK,eAAKH,KAAK;IAAE,OAAO,EAAEU,WAAY;IAAC,UAAU,EAAEC,cAAe;IAAC,OAAO,EAAET;EAAQ,iBACnF,6BAAC,MAAI;IAAC,KAAK,EAAE;MAAEU,OAAO,EAAE;IAA0B;EAAE,gBAClD,6BAAC,MAAI,8OAIE,eACP,6BAAC,QAAM;IAAC,OAAO,EAAE;MAAA,OAAMP,gBAAgB,CAAC,IAAI,CAAC;IAAA;EAAC,wBAA4B,CACrE,CACD,eAER,6BAAC,YAAK,eAAKL,KAAK;IAAE,MAAM,EAAEM,UAAW;IAAC,UAAU,EAAEK,cAAe;IAAC,OAAO,EAAEP;EAAc,iBACvF,6BAAC,MAAI;IAAC,KAAK,EAAE;MAAEQ,OAAO,EAAE;IAA0B;EAAE,gBAClD,6BAAC,MAAI,8OAIE,CACF,CACD,CACP;AAEP,CAAC;AAAC;AACFb,KAAK,CAACc,SAAS,GAAG,OAAO;AAEzBd,KAAK,CAACe,IAAI,GAAG;EACXC,IAAI,EAAE,KAAK;EACXC,GAAG,EAAE,KAAK;EACVC,cAAc,EAAE,KAAK;EACrBC,QAAQ,EAAE,IAAI;EACdC,MAAM,EAAE,KAAK;EACbrB,KAAK,EAAE,OAAO;EACd;EACAsB,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDtB,KAAK,CAACuB,QAAQ,GAAG,CAAC,CAAC"}

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

@@ -12,7 +12,7 @@ exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
       data-testid="mirai-onClose"
     >
       <div
-        class="view forceRow header"
+        class="view row header hideBack"
       >
         <button
           class="pressable button small squared transparent button"
@@ -130,7 +130,7 @@ exports[`component:<Modal> prop:onBack 1`] = `
       data-testid="mirai-onBack"
     >
       <div
-        class="view forceRow header"
+        class="view row header hideClose"
       >
         <button
           class="pressable button small squared transparent"
@@ -176,7 +176,7 @@ exports[`component:<Modal> prop:onClose 1`] = `
       data-testid="mirai-onClose"
     >
       <div
-        class="view forceRow header"
+        class="view row header hideBack"
       >
         <button
           class="pressable button small squared transparent button"
@@ -249,10 +249,10 @@ exports[`component:<Modal> prop:title 1`] = `
       class="view fit modal calcWidth"
     >
       <div
-        class="view forceRow header"
+        class="view row header hideBack hideClose"
       >
         <h3
-          class="text headline-3 title left right"
+          class="text headline-3 title"
         >
           Modal
         </h3>

package/build/components/Slider/Slider.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../helpers");
 var _hooks = require("../../hooks");
 var _primitives = require("../../primitives");
+var _theme = require("../../theme");
 var _Slider = require("./Slider.constants");
 var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
 var _excluded = ["auto", "behavior", "captions", "height", "images", "index", "width", "onChange", "onCounter"];
@@ -88,7 +89,7 @@ var Slider = function Slider(_ref) {
   var width = propWidth;
   var handleIndex = function handleIndex(nextIndex) {
     setDisabledScroll(true);
-    setIndex(nextIndex);
+    setIndex(Math.abs(nextIndex) * (defaultDirection ? 1 : -1));
   };
   var handleScroll = function handleScroll() {
     var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -96,6 +97,7 @@ var Slider = function Slider(_ref) {
     var nextIndex = x < width ? 0 : Math.round(x / width);
     if (nextIndex !== index) setIndex(nextIndex);
   };
+  var defaultDirection = _theme.Theme.getDirection() === _theme.DIRECTION_TYPE.LEFT;
   return /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
     role: "slider",
     onMouseEnter: isDesktop ? function () {
@@ -112,7 +114,7 @@ var Slider = function Slider(_ref) {
     onPress: function onPress() {
       return handleIndex(index - 1);
     },
-    className: (0, _helpers.styles)(_SliderModule.default.button, (index <= 0 || isDesktop && !focus) && _SliderModule.default.hide, _SliderModule.default.back)
+    className: (0, _helpers.styles)(_SliderModule.default.button, ((defaultDirection ? index <= 0 : index >= images.length - 1) || isDesktop && !focus) && _SliderModule.default.hide, _SliderModule.default.first)
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: _primitives.ICON.LEFT
   })), /*#__PURE__*/_react.default.createElement(_primitives.ScrollView, {
@@ -132,7 +134,7 @@ var Slider = function Slider(_ref) {
       role: "image",
       className: _SliderModule.default.image,
       style: {
-        backgroundImage: imageIndex >= index - _Slider.PRELOAD_IMAGES && imageIndex <= index + _Slider.PRELOAD_IMAGES ? "url(".concat(image, ")") : undefined,
+        backgroundImage: imageIndex >= Math.abs(index) - _Slider.PRELOAD_IMAGES && imageIndex <= Math.abs(index) + _Slider.PRELOAD_IMAGES ? "url(".concat(image, ")") : undefined,
         height: height,
         width: width
       }
@@ -144,8 +146,8 @@ var Slider = function Slider(_ref) {
       className: [_SliderModule.default.overlay, _SliderModule.default.text]
     }, captions[imageIndex])));
   }), images.length > 1 && onCounter && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    className: [_SliderModule.default.overlay, _SliderModule.default.counter],
-    onPress: onCounter
+    onPress: onCounter,
+    className: (0, _helpers.styles)(_SliderModule.default.overlay, _SliderModule.default.counter, !defaultDirection && _SliderModule.default.reverse)
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     action: true,
     value: _primitives.ICON.PHOTO_LIBRARY
@@ -156,7 +158,7 @@ var Slider = function Slider(_ref) {
     onPress: function onPress() {
       return handleIndex(index + 1);
     },
-    className: (0, _helpers.styles)(_SliderModule.default.button, (index >= images.length - 1 || isDesktop && !focus) && _SliderModule.default.hide && _SliderModule.default.hide, _SliderModule.default.forward)
+    className: (0, _helpers.styles)(_SliderModule.default.button, ((defaultDirection ? index >= images.length - 1 : index === 0) || isDesktop && !focus) && _SliderModule.default.hide, _SliderModule.default.second)
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: _primitives.ICON.RIGHT
   })));

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","behavior","captions","height","propHeight","images","index","propIndex","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","SCROLL_DELAY","handleIndex","nextIndex","handleScroll","x","Math","round","undefined","styles","style","container","className","button","hide","back","ICON","LEFT","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","overlay","text","counter","PHOTO_LIBRARY","forward","RIGHT","displayName","propTypes","PropTypes","bool","string","arrayOf","number","isRequired","func"],"sources":["../../../src/components/Slider/Slider.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, ScrollView, Pressable, Text, View } from '../../primitives';\nimport { PRELOAD_IMAGES, SCROLL_DELAY } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n  auto = false,\n  behavior = 'smooth',\n  captions = [],\n  height: propHeight = 240,\n  images = [],\n  index: propIndex = 0,\n  width: propWidth = 320,\n  onChange = () => {},\n  onCounter,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const [disabledScroll, setDisabledScroll] = useState(true);\n  const [focus, setFocus] = useState(false);\n  const [index, setIndex] = useState(propIndex);\n\n  useEffect(() => {\n    if (auto) interval = setInterval(() => setIndex(index < images.length - 1 ? index + 1 : 0), 2000);\n    return () => clearInterval(interval);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [auto, index]);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => setDisabledScroll(false), SCROLL_DELAY);\n\n    onChange(index);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [index]);\n\n  const height = propHeight;\n\n  const width = propWidth;\n\n  const handleIndex = (nextIndex) => {\n    setDisabledScroll(true);\n    setIndex(nextIndex);\n  };\n\n  const handleScroll = ({ x } = {}) => {\n    const nextIndex = x < width ? 0 : Math.round(x / width);\n\n    if (nextIndex !== index) setIndex(nextIndex);\n  };\n\n  return (\n    <View\n      {...others}\n      role=\"slider\"\n      onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n      onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n      className={styles(style.container, others.className)}\n      style={{ ...others.style, width }}\n    >\n      <Pressable\n        onPress={() => handleIndex(index - 1)}\n        className={styles(style.button, (index <= 0 || (isDesktop && !focus)) && style.hide, style.back)}\n      >\n        <Icon value={ICON.LEFT} />\n      </Pressable>\n\n      <ScrollView\n        behavior={behavior}\n        horizontal\n        scrollEventThrottle={SCROLL_DELAY}\n        scrollTo={index * Math.floor(width)}\n        snap\n        width={width}\n        onScroll={disabledScroll ? undefined : handleScroll}\n        className={style.scrollView}\n      >\n        {images.map((image, imageIndex) => (\n          <View key={imageIndex} className={style.item}>\n            <View\n              role=\"image\"\n              className={style.image}\n              style={{\n                backgroundImage:\n                  imageIndex >= index - PRELOAD_IMAGES && imageIndex <= index + PRELOAD_IMAGES\n                    ? `url(${image})`\n                    : undefined,\n                height,\n                width,\n              }}\n            />\n            {captions[imageIndex] && (\n              <View className={style.caption}>\n                <Text bold small className={[style.overlay, style.text]}>\n                  {captions[imageIndex]}\n                </Text>\n              </View>\n            )}\n          </View>\n        ))}\n\n        {images.length > 1 && onCounter && (\n          <Pressable className={[style.overlay, style.counter]} onPress={onCounter}>\n            <Icon action value={ICON.PHOTO_LIBRARY} />\n            <Text bold small>\n              {images.length}\n            </Text>\n          </Pressable>\n        )}\n      </ScrollView>\n\n      <Pressable\n        onPress={() => handleIndex(index + 1)}\n        className={styles(\n          style.button,\n          (index >= images.length - 1 || (isDesktop && !focus)) && style.hide && style.hide,\n          style.forward,\n        )}\n      >\n        <Icon value={ICON.RIGHT} />\n      </Pressable>\n    </View>\n  );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n  auto: PropTypes.bool,\n  behavior: PropTypes.string,\n  captions: PropTypes.arrayOf(PropTypes.string),\n  height: PropTypes.number.isRequired,\n  images: PropTypes.arrayOf(PropTypes.string).isRequired,\n  index: PropTypes.number,\n  width: PropTypes.number.isRequired,\n  onChange: PropTypes.func,\n  onCounter: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","behavior","captions","height","propHeight","images","index","propIndex","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","SCROLL_DELAY","handleIndex","nextIndex","Math","abs","defaultDirection","handleScroll","x","round","Theme","getDirection","DIRECTION_TYPE","LEFT","undefined","styles","style","container","className","button","hide","first","ICON","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","overlay","text","counter","reverse","PHOTO_LIBRARY","second","RIGHT","displayName","propTypes","PropTypes","bool","string","arrayOf","number","isRequired","func"],"sources":["../../../src/components/Slider/Slider.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, ScrollView, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { PRELOAD_IMAGES, SCROLL_DELAY } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n  auto = false,\n  behavior = 'smooth',\n  captions = [],\n  height: propHeight = 240,\n  images = [],\n  index: propIndex = 0,\n  width: propWidth = 320,\n  onChange = () => {},\n  onCounter,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const [disabledScroll, setDisabledScroll] = useState(true);\n  const [focus, setFocus] = useState(false);\n  const [index, setIndex] = useState(propIndex);\n\n  useEffect(() => {\n    if (auto) interval = setInterval(() => setIndex(index < images.length - 1 ? index + 1 : 0), 2000);\n    return () => clearInterval(interval);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [auto, index]);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => setDisabledScroll(false), SCROLL_DELAY);\n\n    onChange(index);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [index]);\n\n  const height = propHeight;\n\n  const width = propWidth;\n\n  const handleIndex = (nextIndex) => {\n    setDisabledScroll(true);\n    setIndex(Math.abs(nextIndex) * (defaultDirection ? 1 : -1));\n  };\n\n  const handleScroll = ({ x } = {}) => {\n    const nextIndex = x < width ? 0 : Math.round(x / width);\n\n    if (nextIndex !== index) setIndex(nextIndex);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n\n  return (\n    <View\n      {...others}\n      role=\"slider\"\n      onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n      onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n      className={styles(style.container, others.className)}\n      style={{ ...others.style, width }}\n    >\n      <Pressable\n        onPress={() => handleIndex(index - 1)}\n        className={styles(\n          style.button,\n          ((defaultDirection ? index <= 0 : index >= images.length - 1) || (isDesktop && !focus)) && style.hide,\n          style.first,\n        )}\n      >\n        <Icon value={ICON.LEFT} />\n      </Pressable>\n\n      <ScrollView\n        behavior={behavior}\n        horizontal\n        scrollEventThrottle={SCROLL_DELAY}\n        scrollTo={index * Math.floor(width)}\n        snap\n        width={width}\n        onScroll={disabledScroll ? undefined : handleScroll}\n        className={style.scrollView}\n      >\n        {images.map((image, imageIndex) => (\n          <View key={imageIndex} className={style.item}>\n            <View\n              role=\"image\"\n              className={style.image}\n              style={{\n                backgroundImage:\n                  imageIndex >= Math.abs(index) - PRELOAD_IMAGES && imageIndex <= Math.abs(index) + PRELOAD_IMAGES\n                    ? `url(${image})`\n                    : undefined,\n                height,\n                width,\n              }}\n            />\n            {captions[imageIndex] && (\n              <View className={style.caption}>\n                <Text bold small className={[style.overlay, style.text]}>\n                  {captions[imageIndex]}\n                </Text>\n              </View>\n            )}\n          </View>\n        ))}\n\n        {images.length > 1 && onCounter && (\n          <Pressable\n            onPress={onCounter}\n            className={styles(style.overlay, style.counter, !defaultDirection && style.reverse)}\n          >\n            <Icon action value={ICON.PHOTO_LIBRARY} />\n            <Text bold small>\n              {images.length}\n            </Text>\n          </Pressable>\n        )}\n      </ScrollView>\n\n      <Pressable\n        onPress={() => handleIndex(index + 1)}\n        className={styles(\n          style.button,\n          ((defaultDirection ? index >= images.length - 1 : index === 0) || (isDesktop && !focus)) && style.hide,\n          style.second,\n        )}\n      >\n        <Icon value={ICON.RIGHT} />\n      </Pressable>\n    </View>\n  );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n  auto: PropTypes.bool,\n  behavior: PropTypes.string,\n  captions: PropTypes.arrayOf(PropTypes.string),\n  height: PropTypes.number.isRequired,\n  images: PropTypes.arrayOf(PropTypes.string).isRequired,\n  index: PropTypes.number,\n  width: PropTypes.number.isRequired,\n  onChange: PropTypes.func,\n  onCounter: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":"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"}

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

@@ -28,11 +28,11 @@
   color: var(--mirai-ui-slider-button-icon);
 }
 
-.button.back {
+.button.first {
   left: var(--mirai-ui-space-S);
 }
 
-.button.forward {
+.button.second {
   right: var(--mirai-ui-space-S);
 }
 
@@ -67,9 +67,16 @@
   flex-direction: row;
   gap: calc(var(--mirai-ui-space-XS) / 2);
   position: absolute;
+}
+
+.counter:not(.reverse) {
   right: var(--mirai-ui-space-S);
 }
 
+.counter.reverse {
+  left: var(--mirai-ui-space-S);
+}
+
 .counter [data-role] {
   color: var(--mirai-ui-slider-color);
 }

package/build/components/Slider/Slider.stories.js

@@ -38,7 +38,7 @@ Story.args = {
   behavior: 'smooth',
   captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],
   height: 208,
-  index: 2,
+  index: 0,
   images: ['https://picsum.photos/seed/@soyjavi/1024/768', 'https://picsum.photos/seed/@jose/1024/768', 'https://picsum.photos/seed/@mario1/1024/768', 'https://picsum.photos/seed/@victor/1024/768', 'https://picsum.photos/seed/@svet/1024/768', 'https://picsum.photos/seed/@mario2/1024/768', 'https://picsum.photos/seed/1/1024/768', 'https://picsum.photos/seed/2/1024/768', 'https://picsum.photos/seed/3/1024/768', 'https://picsum.photos/seed/4/1024/768', 'https://picsum.photos/seed/5/1024/768', 'https://picsum.photos/seed/6/1024/768', 'https://picsum.photos/seed/7/1024/768', 'https://picsum.photos/seed/8/1024/768', 'https://picsum.photos/seed/9/1024/768', 'https://picsum.photos/seed/10/1024/768', 'https://picsum.photos/seed/11/1024/768', 'https://picsum.photos/seed/12/1024/768'],
   fullScreen: false,
   thumbnails: ['https://picsum.photos/seed/@soyjavi/128/128', 'https://picsum.photos/seed/@jose/128/128', 'https://picsum.photos/seed/@mario1/128/128', 'https://picsum.photos/seed/@victor/128/128', 'https://picsum.photos/seed/@svet/128/128', 'https://picsum.photos/seed/@mario2/128/128', 'https://picsum.photos/seed/1/128/128', 'https://picsum.photos/seed/2/128/128', 'https://picsum.photos/seed/3/128/128', 'https://picsum.photos/seed/4/128/128', 'https://picsum.photos/seed/5/128/128', 'https://picsum.photos/seed/6/128/128', 'https://picsum.photos/seed/7/128/128', 'https://picsum.photos/seed/8/128/128', 'https://picsum.photos/seed/9/128/128', 'https://picsum.photos/seed/10/128/128', 'https://picsum.photos/seed/11/128/128', 'https://picsum.photos/seed/12/128/128'],

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.stories.js","names":["title","Story","props","params","console","log","storyName","args","auto","behavior","captions","undefined","height","index","images","fullScreen","thumbnails","width","testId","style","borderRadius","argTypes"],"sources":["../../../src/components/Slider/Slider.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Slider } from './Slider';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Slider\n    {...props}\n    onChange={(...params) => console.log('onChange', ...params)}\n    onCounter={(...params) => console.log('onCounter', ...params)}\n  />\n);\n\nStory.storyName = 'Slider';\n\nStory.args = {\n  auto: false,\n  behavior: 'smooth',\n  captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],\n  height: 208,\n  index: 2,\n  images: [\n    'https://picsum.photos/seed/@soyjavi/1024/768',\n    'https://picsum.photos/seed/@jose/1024/768',\n    'https://picsum.photos/seed/@mario1/1024/768',\n    'https://picsum.photos/seed/@victor/1024/768',\n    'https://picsum.photos/seed/@svet/1024/768',\n    'https://picsum.photos/seed/@mario2/1024/768',\n    'https://picsum.photos/seed/1/1024/768',\n    'https://picsum.photos/seed/2/1024/768',\n    'https://picsum.photos/seed/3/1024/768',\n    'https://picsum.photos/seed/4/1024/768',\n    'https://picsum.photos/seed/5/1024/768',\n    'https://picsum.photos/seed/6/1024/768',\n    'https://picsum.photos/seed/7/1024/768',\n    'https://picsum.photos/seed/8/1024/768',\n    'https://picsum.photos/seed/9/1024/768',\n    'https://picsum.photos/seed/10/1024/768',\n    'https://picsum.photos/seed/11/1024/768',\n    'https://picsum.photos/seed/12/1024/768',\n  ],\n  fullScreen: false,\n  thumbnails: [\n    'https://picsum.photos/seed/@soyjavi/128/128',\n    'https://picsum.photos/seed/@jose/128/128',\n    'https://picsum.photos/seed/@mario1/128/128',\n    'https://picsum.photos/seed/@victor/128/128',\n    'https://picsum.photos/seed/@svet/128/128',\n    'https://picsum.photos/seed/@mario2/128/128',\n    'https://picsum.photos/seed/1/128/128',\n    'https://picsum.photos/seed/2/128/128',\n    'https://picsum.photos/seed/3/128/128',\n    'https://picsum.photos/seed/4/128/128',\n    'https://picsum.photos/seed/5/128/128',\n    'https://picsum.photos/seed/6/128/128',\n    'https://picsum.photos/seed/7/128/128',\n    'https://picsum.photos/seed/8/128/128',\n    'https://picsum.photos/seed/9/128/128',\n    'https://picsum.photos/seed/10/128/128',\n    'https://picsum.photos/seed/11/128/128',\n    'https://picsum.photos/seed/12/128/128',\n  ],\n  width: 408,\n  // inherited properties\n  testId: 'test-story',\n  style: { borderRadius: 16 },\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,cAAM,eACDA,KAAK;IACT,QAAQ,EAAE;MAAA;MAAA,kCAAIC,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,YAAAC,OAAO,EAACC,GAAG,kBAAC,UAAU,SAAKF,MAAM,EAAC;IAAA,CAAC;IAC5D,SAAS,EAAE;MAAA;MAAA,mCAAIA,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,WAAW,SAAKF,MAAM,EAAC;IAAA;EAAC,GAC9D;AAAA,CACH;AAAC;AAEFF,KAAK,CAACK,SAAS,GAAG,QAAQ;AAE1BL,KAAK,CAACM,IAAI,GAAG;EACXC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,QAAQ;EAClBC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAEC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;EACjEC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE,CACN,8CAA8C,EAC9C,2CAA2C,EAC3C,6CAA6C,EAC7C,6CAA6C,EAC7C,2CAA2C,EAC3C,6CAA6C,EAC7C,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,wCAAwC,EACxC,wCAAwC,EACxC,wCAAwC,CACzC;EACDC,UAAU,EAAE,KAAK;EACjBC,UAAU,EAAE,CACV,6CAA6C,EAC7C,0CAA0C,EAC1C,4CAA4C,EAC5C,4CAA4C,EAC5C,0CAA0C,EAC1C,4CAA4C,EAC5C,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,CACxC;EACDC,KAAK,EAAE,GAAG;EACV;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAAG;AAC5B,CAAC;AAEDnB,KAAK,CAACoB,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Slider.stories.js","names":["title","Story","props","params","console","log","storyName","args","auto","behavior","captions","undefined","height","index","images","fullScreen","thumbnails","width","testId","style","borderRadius","argTypes"],"sources":["../../../src/components/Slider/Slider.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Slider } from './Slider';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Slider\n    {...props}\n    onChange={(...params) => console.log('onChange', ...params)}\n    onCounter={(...params) => console.log('onCounter', ...params)}\n  />\n);\n\nStory.storyName = 'Slider';\n\nStory.args = {\n  auto: false,\n  behavior: 'smooth',\n  captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],\n  height: 208,\n  index: 0,\n  images: [\n    'https://picsum.photos/seed/@soyjavi/1024/768',\n    'https://picsum.photos/seed/@jose/1024/768',\n    'https://picsum.photos/seed/@mario1/1024/768',\n    'https://picsum.photos/seed/@victor/1024/768',\n    'https://picsum.photos/seed/@svet/1024/768',\n    'https://picsum.photos/seed/@mario2/1024/768',\n    'https://picsum.photos/seed/1/1024/768',\n    'https://picsum.photos/seed/2/1024/768',\n    'https://picsum.photos/seed/3/1024/768',\n    'https://picsum.photos/seed/4/1024/768',\n    'https://picsum.photos/seed/5/1024/768',\n    'https://picsum.photos/seed/6/1024/768',\n    'https://picsum.photos/seed/7/1024/768',\n    'https://picsum.photos/seed/8/1024/768',\n    'https://picsum.photos/seed/9/1024/768',\n    'https://picsum.photos/seed/10/1024/768',\n    'https://picsum.photos/seed/11/1024/768',\n    'https://picsum.photos/seed/12/1024/768',\n  ],\n  fullScreen: false,\n  thumbnails: [\n    'https://picsum.photos/seed/@soyjavi/128/128',\n    'https://picsum.photos/seed/@jose/128/128',\n    'https://picsum.photos/seed/@mario1/128/128',\n    'https://picsum.photos/seed/@victor/128/128',\n    'https://picsum.photos/seed/@svet/128/128',\n    'https://picsum.photos/seed/@mario2/128/128',\n    'https://picsum.photos/seed/1/128/128',\n    'https://picsum.photos/seed/2/128/128',\n    'https://picsum.photos/seed/3/128/128',\n    'https://picsum.photos/seed/4/128/128',\n    'https://picsum.photos/seed/5/128/128',\n    'https://picsum.photos/seed/6/128/128',\n    'https://picsum.photos/seed/7/128/128',\n    'https://picsum.photos/seed/8/128/128',\n    'https://picsum.photos/seed/9/128/128',\n    'https://picsum.photos/seed/10/128/128',\n    'https://picsum.photos/seed/11/128/128',\n    'https://picsum.photos/seed/12/128/128',\n  ],\n  width: 408,\n  // inherited properties\n  testId: 'test-story',\n  style: { borderRadius: 16 },\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,cAAM,eACDA,KAAK;IACT,QAAQ,EAAE;MAAA;MAAA,kCAAIC,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,YAAAC,OAAO,EAACC,GAAG,kBAAC,UAAU,SAAKF,MAAM,EAAC;IAAA,CAAC;IAC5D,SAAS,EAAE;MAAA;MAAA,mCAAIA,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,WAAW,SAAKF,MAAM,EAAC;IAAA;EAAC,GAC9D;AAAA,CACH;AAAC;AAEFF,KAAK,CAACK,SAAS,GAAG,QAAQ;AAE1BL,KAAK,CAACM,IAAI,GAAG;EACXC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,QAAQ;EAClBC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAEC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;EACjEC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE,CACN,8CAA8C,EAC9C,2CAA2C,EAC3C,6CAA6C,EAC7C,6CAA6C,EAC7C,2CAA2C,EAC3C,6CAA6C,EAC7C,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,wCAAwC,EACxC,wCAAwC,EACxC,wCAAwC,CACzC;EACDC,UAAU,EAAE,KAAK;EACjBC,UAAU,EAAE,CACV,6CAA6C,EAC7C,0CAA0C,EAC1C,4CAA4C,EAC5C,4CAA4C,EAC5C,0CAA0C,EAC1C,4CAA4C,EAC5C,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,CACxC;EACDC,KAAK,EAAE,GAAG;EACV;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAAG;AAC5B,CAAC;AAEDnB,KAAK,CAACoB,QAAQ,GAAG,CAAC,CAAC"}

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

@@ -7,7 +7,7 @@ exports[`component:<Slider> inherit:className 1`] = `
     style="width: 360px;"
   >
     <div
-      class="pressable button hide back"
+      class="pressable button hide first"
     >
       <span
         class="icon headline-3"
@@ -85,7 +85,7 @@ exports[`component:<Slider> inherit:className 1`] = `
       </div>
     </div>
     <div
-      class="pressable button hide forward"
+      class="pressable button hide second"
     >
       <span
         class="icon headline-3"
@@ -120,7 +120,7 @@ exports[`component:<Slider> prop:auto 1`] = `
     style="width: 360px;"
   >
     <div
-      class="pressable button hide back"
+      class="pressable button hide first"
     >
       <span
         class="icon headline-3"
@@ -198,7 +198,7 @@ exports[`component:<Slider> prop:auto 1`] = `
       </div>
     </div>
     <div
-      class="pressable button hide forward"
+      class="pressable button hide second"
     >
       <span
         class="icon headline-3"
@@ -233,7 +233,7 @@ exports[`component:<Slider> prop:behavior 1`] = `
     style="width: 360px;"
   >
     <div
-      class="pressable button hide back"
+      class="pressable button hide first"
     >
       <span
         class="icon headline-3"
@@ -311,7 +311,7 @@ exports[`component:<Slider> prop:behavior 1`] = `
       </div>
     </div>
     <div
-      class="pressable button hide forward"
+      class="pressable button hide second"
     >
       <span
         class="icon headline-3"
@@ -346,7 +346,7 @@ exports[`component:<Slider> prop:captions 1`] = `
     style="width: 360px;"
   >
     <div
-      class="pressable button hide back"
+      class="pressable button hide first"
     >
       <span
         class="icon headline-3"
@@ -469,7 +469,7 @@ exports[`component:<Slider> prop:captions 1`] = `
       </div>
     </div>
     <div
-      class="pressable button hide forward"
+      class="pressable button hide second"
     >
       <span
         class="icon headline-3"
@@ -504,7 +504,7 @@ exports[`component:<Slider> prop:index 1`] = `
     style="width: 360px;"
   >
     <div
-      class="pressable button hide back"
+      class="pressable button hide first"
     >
       <span
         class="icon headline-3"
@@ -582,7 +582,7 @@ exports[`component:<Slider> prop:index 1`] = `
       </div>
     </div>
     <div
-      class="pressable button hide forward"
+      class="pressable button hide second"
     >
       <span
         class="icon headline-3"
@@ -617,7 +617,7 @@ exports[`component:<Slider> prop:onCounter 1`] = `
     style="width: 360px;"
   >
     <div
-      class="pressable button hide back"
+      class="pressable button hide first"
     >
       <span
         class="icon headline-3"
@@ -725,7 +725,7 @@ exports[`component:<Slider> prop:onCounter 1`] = `
       </div>
     </div>
     <div
-      class="pressable button hide forward"
+      class="pressable button hide second"
     >
       <span
         class="icon headline-3"
@@ -760,7 +760,7 @@ exports[`component:<Slider> renders 1`] = `
     style="width: 360px;"
   >
     <div
-      class="pressable button hide back"
+      class="pressable button hide first"
     >
       <span
         class="icon headline-3"
@@ -838,7 +838,7 @@ exports[`component:<Slider> renders 1`] = `
       </div>
     </div>
     <div
-      class="pressable button hide forward"
+      class="pressable button hide second"
     >
       <span
         class="icon headline-3"
@@ -874,7 +874,7 @@ exports[`component:<Slider> testId 1`] = `
     style="width: 360px;"
   >
     <div
-      class="pressable button hide back"
+      class="pressable button hide first"
     >
       <span
         class="icon headline-3"
@@ -952,7 +952,7 @@ exports[`component:<Slider> testId 1`] = `
       </div>
     </div>
     <div
-      class="pressable button hide forward"
+      class="pressable button hide second"
     >
       <span
         class="icon headline-3"

package/build/primitives/ScrollView/ScrollView.module.css

@@ -6,6 +6,7 @@
 }
 
 .scrollview.horizontal {
+  direction: var(--mirai-ui-text-direction);
   flex-direction: row;
   overflow-x: scroll;
 }

package/package.json

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