@mirai/ui 1.0.63 → 1.0.64

package/build/components/InputOption/InputOption.js

@@ -62,6 +62,7 @@ var InputOption = function InputOption(_ref) {
     value: checked ? _primitives.ICON.CHECK : _primitives.ICON.REMOVE,
     className: _InputOptionModule.default.icon
   }) : undefined), label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    action: true,
     className: (0, _helpers.styles)(_InputOptionModule.default.label, disabled && _InputOptionModule.default.disabled)
   }, label));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"InputOption.js","names":["InputOption","checked","disabled","indeterminate","label","name","reverse","type","CHECKBOX","value","onChange","others","Primitive","Checkbox","RADIO","Radio","Switch","handleChange","event","SWITCH","includes","style","inputOption","className","ICON","CHECK","REMOVE","icon","undefined","displayName","propTypes","PropTypes","bool","string","isRequired","oneOf","func"],"sources":["../../../src/components/InputOption/InputOption.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Checkbox, Icon, ICON, Pressable, Radio, Switch, Text } from '../../primitives';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\nimport style from './InputOption.module.css';\n\nconst InputOption = ({\n  checked,\n  disabled,\n  indeterminate,\n  label,\n  name,\n  reverse,\n  type = CHECKBOX,\n  value = '',\n  onChange = () => {},\n  ...others\n}) => {\n  const Primitive = type === CHECKBOX ? Checkbox : type === RADIO ? Radio : Switch;\n\n  const handleChange = (event) => {\n    onChange([CHECKBOX, SWITCH].includes(type) ? !checked : value, event);\n  };\n\n  return (\n    <Pressable\n      {...others}\n      type=\"button\"\n      className={styles(style.inputOption, reverse && style.reverse, others.className)}\n      onPress={handleChange}\n    >\n      <Primitive\n        checked={checked || (type === CHECKBOX && indeterminate)}\n        disabled={disabled}\n        name={name}\n        type={type}\n        value={value}\n      >\n        {type === CHECKBOX && (checked || indeterminate) ? (\n          <Icon value={checked ? ICON.CHECK : ICON.REMOVE} className={style.icon} />\n        ) : undefined}\n      </Primitive>\n      {label && <Text className={styles(style.label, disabled && style.disabled)}>{label}</Text>}\n    </Pressable>\n  );\n};\n\nInputOption.displayName = 'Component:InputOption';\n\nInputOption.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  indeterminate: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  reverse: PropTypes.bool,\n  type: PropTypes.oneOf([CHECKBOX, RADIO, SWITCH]),\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n};\n\nexport { InputOption };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAWd;EAAA,IAVJC,OAUI,QAVJA,OAUI;EAAA,IATJC,QASI,QATJA,QASI;EAAA,IARJC,aAQI,QARJA,aAQI;EAAA,IAPJC,KAOI,QAPJA,KAOI;EAAA,IANJC,IAMI,QANJA,IAMI;EAAA,IALJC,OAKI,QALJA,OAKI;EAAA,qBAJJC,IAII;EAAA,IAJJA,IAII,0BAJGC,qBAIH;EAAA,sBAHJC,KAGI;EAAA,IAHJA,KAGI,2BAHI,EAGJ;EAAA,yBAFJC,QAEI;EAAA,IAFJA,QAEI,8BAFO,YAAM,CAAE,CAEf;EAAA,IADDC,MACC;;EACJ,IAAMC,SAAS,GAAGL,IAAI,KAAKC,qBAAT,GAAoBK,oBAApB,GAA+BN,IAAI,KAAKO,kBAAT,GAAiBC,iBAAjB,GAAyBC,kBAA1E;;EAEA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;IAC9BR,QAAQ,CAAC,CAACF,qBAAD,EAAWW,mBAAX,EAAmBC,QAAnB,CAA4Bb,IAA5B,IAAoC,CAACN,OAArC,GAA+CQ,KAAhD,EAAuDS,KAAvD,CAAR;EACD,CAFD;;EAIA,oBACE,6BAAC,qBAAD,eACMP,MADN;IAEE,IAAI,EAAC,QAFP;IAGE,SAAS,EAAE,qBAAOU,2BAAMC,WAAb,EAA0BhB,OAAO,IAAIe,2BAAMf,OAA3C,EAAoDK,MAAM,CAACY,SAA3D,CAHb;IAIE,OAAO,EAAEN;EAJX,iBAME,6BAAC,SAAD;IACE,OAAO,EAAEhB,OAAO,IAAKM,IAAI,KAAKC,qBAAT,IAAqBL,aAD5C;IAEE,QAAQ,EAAED,QAFZ;IAGE,IAAI,EAAEG,IAHR;IAIE,IAAI,EAAEE,IAJR;IAKE,KAAK,EAAEE;EALT,GAOGF,IAAI,KAAKC,qBAAT,KAAsBP,OAAO,IAAIE,aAAjC,iBACC,6BAAC,gBAAD;IAAM,KAAK,EAAEF,OAAO,GAAGuB,iBAAKC,KAAR,GAAgBD,iBAAKE,MAAzC;IAAiD,SAAS,EAAEL,2BAAMM;EAAlE,EADD,GAEGC,SATN,CANF,EAiBGxB,KAAK,iBAAI,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOiB,2BAAMjB,KAAb,EAAoBF,QAAQ,IAAImB,2BAAMnB,QAAtC;EAAjB,GAAmEE,KAAnE,CAjBZ,CADF;AAqBD,CAvCD;;;AAyCAJ,WAAW,CAAC6B,WAAZ,GAA0B,uBAA1B;AAEA7B,WAAW,CAAC8B,SAAZ,GAAwB;EACtB7B,OAAO,EAAE8B,mBAAUC,IADG;EAEtB9B,QAAQ,EAAE6B,mBAAUC,IAFE;EAGtB7B,aAAa,EAAE4B,mBAAUC,IAHH;EAItB5B,KAAK,EAAE2B,mBAAUE,MAJK;EAKtB5B,IAAI,EAAE0B,mBAAUE,MAAV,CAAiBC,UALD;EAMtB5B,OAAO,EAAEyB,mBAAUC,IANG;EAOtBzB,IAAI,EAAEwB,mBAAUI,KAAV,CAAgB,CAAC3B,qBAAD,EAAWM,kBAAX,EAAkBK,mBAAlB,CAAhB,CAPgB;EAQtBV,KAAK,EAAEsB,mBAAUE,MARK;EAStBvB,QAAQ,EAAEqB,mBAAUK;AATE,CAAxB"}
+{"version":3,"file":"InputOption.js","names":["InputOption","checked","disabled","indeterminate","label","name","reverse","type","CHECKBOX","value","onChange","others","Primitive","Checkbox","RADIO","Radio","Switch","handleChange","event","SWITCH","includes","style","inputOption","className","ICON","CHECK","REMOVE","icon","undefined","displayName","propTypes","PropTypes","bool","string","isRequired","oneOf","func"],"sources":["../../../src/components/InputOption/InputOption.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Checkbox, Icon, ICON, Pressable, Radio, Switch, Text } from '../../primitives';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\nimport style from './InputOption.module.css';\n\nconst InputOption = ({\n  checked,\n  disabled,\n  indeterminate,\n  label,\n  name,\n  reverse,\n  type = CHECKBOX,\n  value = '',\n  onChange = () => {},\n  ...others\n}) => {\n  const Primitive = type === CHECKBOX ? Checkbox : type === RADIO ? Radio : Switch;\n\n  const handleChange = (event) => {\n    onChange([CHECKBOX, SWITCH].includes(type) ? !checked : value, event);\n  };\n\n  return (\n    <Pressable\n      {...others}\n      type=\"button\"\n      className={styles(style.inputOption, reverse && style.reverse, others.className)}\n      onPress={handleChange}\n    >\n      <Primitive\n        checked={checked || (type === CHECKBOX && indeterminate)}\n        disabled={disabled}\n        name={name}\n        type={type}\n        value={value}\n      >\n        {type === CHECKBOX && (checked || indeterminate) ? (\n          <Icon value={checked ? ICON.CHECK : ICON.REMOVE} className={style.icon} />\n        ) : undefined}\n      </Primitive>\n      {label && (\n        <Text action className={styles(style.label, disabled && style.disabled)}>\n          {label}\n        </Text>\n      )}\n    </Pressable>\n  );\n};\n\nInputOption.displayName = 'Component:InputOption';\n\nInputOption.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  indeterminate: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  reverse: PropTypes.bool,\n  type: PropTypes.oneOf([CHECKBOX, RADIO, SWITCH]),\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n};\n\nexport { InputOption };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAWd;EAAA,IAVJC,OAUI,QAVJA,OAUI;EAAA,IATJC,QASI,QATJA,QASI;EAAA,IARJC,aAQI,QARJA,aAQI;EAAA,IAPJC,KAOI,QAPJA,KAOI;EAAA,IANJC,IAMI,QANJA,IAMI;EAAA,IALJC,OAKI,QALJA,OAKI;EAAA,qBAJJC,IAII;EAAA,IAJJA,IAII,0BAJGC,qBAIH;EAAA,sBAHJC,KAGI;EAAA,IAHJA,KAGI,2BAHI,EAGJ;EAAA,yBAFJC,QAEI;EAAA,IAFJA,QAEI,8BAFO,YAAM,CAAE,CAEf;EAAA,IADDC,MACC;;EACJ,IAAMC,SAAS,GAAGL,IAAI,KAAKC,qBAAT,GAAoBK,oBAApB,GAA+BN,IAAI,KAAKO,kBAAT,GAAiBC,iBAAjB,GAAyBC,kBAA1E;;EAEA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;IAC9BR,QAAQ,CAAC,CAACF,qBAAD,EAAWW,mBAAX,EAAmBC,QAAnB,CAA4Bb,IAA5B,IAAoC,CAACN,OAArC,GAA+CQ,KAAhD,EAAuDS,KAAvD,CAAR;EACD,CAFD;;EAIA,oBACE,6BAAC,qBAAD,eACMP,MADN;IAEE,IAAI,EAAC,QAFP;IAGE,SAAS,EAAE,qBAAOU,2BAAMC,WAAb,EAA0BhB,OAAO,IAAIe,2BAAMf,OAA3C,EAAoDK,MAAM,CAACY,SAA3D,CAHb;IAIE,OAAO,EAAEN;EAJX,iBAME,6BAAC,SAAD;IACE,OAAO,EAAEhB,OAAO,IAAKM,IAAI,KAAKC,qBAAT,IAAqBL,aAD5C;IAEE,QAAQ,EAAED,QAFZ;IAGE,IAAI,EAAEG,IAHR;IAIE,IAAI,EAAEE,IAJR;IAKE,KAAK,EAAEE;EALT,GAOGF,IAAI,KAAKC,qBAAT,KAAsBP,OAAO,IAAIE,aAAjC,iBACC,6BAAC,gBAAD;IAAM,KAAK,EAAEF,OAAO,GAAGuB,iBAAKC,KAAR,GAAgBD,iBAAKE,MAAzC;IAAiD,SAAS,EAAEL,2BAAMM;EAAlE,EADD,GAEGC,SATN,CANF,EAiBGxB,KAAK,iBACJ,6BAAC,gBAAD;IAAM,MAAM,MAAZ;IAAa,SAAS,EAAE,qBAAOiB,2BAAMjB,KAAb,EAAoBF,QAAQ,IAAImB,2BAAMnB,QAAtC;EAAxB,GACGE,KADH,CAlBJ,CADF;AAyBD,CA3CD;;;AA6CAJ,WAAW,CAAC6B,WAAZ,GAA0B,uBAA1B;AAEA7B,WAAW,CAAC8B,SAAZ,GAAwB;EACtB7B,OAAO,EAAE8B,mBAAUC,IADG;EAEtB9B,QAAQ,EAAE6B,mBAAUC,IAFE;EAGtB7B,aAAa,EAAE4B,mBAAUC,IAHH;EAItB5B,KAAK,EAAE2B,mBAAUE,MAJK;EAKtB5B,IAAI,EAAE0B,mBAAUE,MAAV,CAAiBC,UALD;EAMtB5B,OAAO,EAAEyB,mBAAUC,IANG;EAOtBzB,IAAI,EAAEwB,mBAAUI,KAAV,CAAgB,CAAC3B,qBAAD,EAAWM,kBAAX,EAAkBK,mBAAlB,CAAhB,CAPgB;EAQtBV,KAAK,EAAEsB,mBAAUE,MARK;EAStBvB,QAAQ,EAAEqB,mBAAUK;AATE,CAAxB"}

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

@@ -228,7 +228,7 @@ exports[`primitive:<InputOption> prop:label 1`] = `
       />
     </div>
     <span
-      class="text paragraph label"
+      class="text action label"
     >
       label
     </span>
@@ -253,7 +253,7 @@ exports[`primitive:<InputOption> prop:reverse + label 1`] = `
       />
     </div>
     <span
-      class="text paragraph label"
+      class="text action label"
     >
       label
     </span>
@@ -280,7 +280,7 @@ exports[`primitive:<InputOption> prop:type 1`] = `
       />
     </div>
     <span
-      class="text paragraph label"
+      class="text action label"
     >
       label
     </span>

package/build/components/InputSelect/InputSelect.js

@@ -17,7 +17,7 @@ var _primitives = require("../../primitives");
 
 var _InputTextModule = _interopRequireDefault(require("../InputText/InputText.module.css"));
 
-var _excluded = ["disabled", "error", "hint", "label", "success", "warning", "onChange", "onEnter", "onLeave"];
+var _excluded = ["disabled", "error", "hint", "label", "showState", "success", "warning", "onChange", "onEnter", "onLeave"];
 
 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); }
 
@@ -50,6 +50,8 @@ var InputSelect = function InputSelect(_ref) {
       error = _ref.error,
       hint = _ref.hint,
       label = _ref.label,
+      _ref$showState = _ref.showState,
+      showState = _ref$showState === void 0 ? true : _ref$showState,
       success = _ref.success,
       warning = _ref.warning,
       _ref$onChange = _ref.onChange,
@@ -83,7 +85,8 @@ var InputSelect = function InputSelect(_ref) {
   };
 
   var has = {
-    value: others.value !== undefined && ((_others$value = others.value) === null || _others$value === void 0 ? void 0 : _others$value.length) > 0
+    value: others.value !== undefined && ((_others$value = others.value) === null || _others$value === void 0 ? void 0 : _others$value.length) > 0,
+    stateIcon: showState && (error || success || warning)
   };
   return /*#__PURE__*/_react.default.createElement(_primitives.View, {
     className: (0, _helpers.styles)(_InputTextModule.default.inputContainer, others.className),
@@ -101,14 +104,20 @@ var InputSelect = function InputSelect(_ref) {
     onChange: handleChange,
     onEnter: handleEnter,
     onLeave: handleLeave
-  })), !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    value: !focus && (error || success || warning) ? (0, _helpers.getIconState)({
+  })), (!disabled || has.stateIcon) && /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    row: true,
+    className: _InputTextModule.default.icons
+  }, !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    value: _primitives.ICON.EXPAND_MORE,
+    className: _InputTextModule.default.icon
+  }), has.stateIcon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    value: (0, _helpers.getIconState)({
       error: error,
       success: success,
       warning: warning
-    }) : _primitives.ICON.EXPAND_MORE,
-    className: (0, _helpers.styles)(_InputTextModule.default.icon, _InputTextModule.default.right, error ? _InputTextModule.default.error : warning ? _InputTextModule.default.warning : success ? _InputTextModule.default.success : undefined)
-  })), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    }),
+    className: (0, _helpers.styles)(_InputTextModule.default.icon, error ? _InputTextModule.default.error : warning ? _InputTextModule.default.warning : success ? _InputTextModule.default.success : undefined)
+  }))), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     small: true,
     className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error)
   }, hint));
@@ -122,6 +131,7 @@ InputSelect.propTypes = {
   hint: _propTypes.default.string,
   label: _propTypes.default.string,
   name: _propTypes.default.string.isRequired,
+  showState: _propTypes.default.bool,
   success: _propTypes.default.bool,
   warning: _propTypes.default.bool,
   onChange: _propTypes.default.func,

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

@@ -1 +1 @@
-{"version":3,"file":"InputSelect.js","names":["InputSelect","disabled","error","hint","label","success","warning","onChange","onEnter","onLeave","others","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","style","inputContainer","className","text","inputBorder","input","iconRight","empty","ICON","EXPAND_MORE","icon","right","displayName","propTypes","PropTypes","bool","string","name","isRequired","func"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Select, Text, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\n\nconst InputSelect = ({\n  disabled,\n  error,\n  hint,\n  label,\n  success,\n  warning,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n    event.target?.blur();\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const has = {\n    value: others.value !== undefined && others.value?.length > 0,\n  };\n\n  return (\n    <View className={styles(style.inputContainer, others.className)} style={others.style}>\n      {label && (\n        <Text\n          className={styles(\n            style.text,\n            style.label,\n            disabled && style.disabled,\n            error && style.error,\n            focus && style.focus,\n            (focus || error || has.value) && style.value,\n          )}\n        >\n          {label}\n        </Text>\n      )}\n\n      <View\n        row\n        className={styles(\n          style.inputBorder,\n          disabled && style.disabled,\n          focus && !error && style.focus,\n          error && style.error,\n        )}\n      >\n        <Select\n          {...others}\n          disabled={disabled}\n          value={others.value || ''}\n          className={styles(style.input, style.iconRight, !!label && !(focus || error || has.value) && style.empty)}\n          style={undefined}\n          onChange={handleChange}\n          onEnter={handleEnter}\n          onLeave={handleLeave}\n        />\n        {!disabled && (\n          <Icon\n            value={\n              !focus && (error || success || warning) ? getIconState({ error, success, warning }) : ICON.EXPAND_MORE\n            }\n            className={styles(\n              style.icon,\n              style.right,\n              error ? style.error : warning ? style.warning : success ? style.success : undefined,\n            )}\n          />\n        )}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nInputSelect.displayName = 'Component:InputSelect';\n\nInputSelect.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  success: PropTypes.bool,\n  warning: PropTypes.bool,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputSelect };\n"],"mappings":"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"}
+{"version":3,"file":"InputSelect.js","names":["InputSelect","disabled","error","hint","label","showState","success","warning","onChange","onEnter","onLeave","others","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","stateIcon","style","inputContainer","className","text","inputBorder","input","iconRight","empty","icons","ICON","EXPAND_MORE","icon","displayName","propTypes","PropTypes","bool","string","name","isRequired","func"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Select, Text, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\n\nconst InputSelect = ({\n  disabled,\n  error,\n  hint,\n  label,\n  showState = true,\n  success,\n  warning,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n    event.target?.blur();\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const has = {\n    value: others.value !== undefined && others.value?.length > 0,\n    stateIcon: showState && (error || success || warning),\n  };\n\n  return (\n    <View className={styles(style.inputContainer, others.className)} style={others.style}>\n      {label && (\n        <Text\n          className={styles(\n            style.text,\n            style.label,\n            disabled && style.disabled,\n            error && style.error,\n            focus && style.focus,\n            (focus || error || has.value) && style.value,\n          )}\n        >\n          {label}\n        </Text>\n      )}\n\n      <View\n        row\n        className={styles(\n          style.inputBorder,\n          disabled && style.disabled,\n          focus && !error && style.focus,\n          error && style.error,\n        )}\n      >\n        <Select\n          {...others}\n          disabled={disabled}\n          value={others.value || ''}\n          className={styles(style.input, style.iconRight, !!label && !(focus || error || has.value) && style.empty)}\n          style={undefined}\n          onChange={handleChange}\n          onEnter={handleEnter}\n          onLeave={handleLeave}\n        />\n        {(!disabled || has.stateIcon) && (\n          <View row className={style.icons}>\n            {!disabled && <Icon value={ICON.EXPAND_MORE} className={style.icon} />}\n            {has.stateIcon && (\n              <Icon\n                value={getIconState({ error, success, warning })}\n                className={styles(\n                  style.icon,\n                  error ? style.error : warning ? style.warning : success ? style.success : undefined,\n                )}\n              />\n            )}\n          </View>\n        )}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nInputSelect.displayName = 'Component:InputSelect';\n\nInputSelect.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  showState: PropTypes.bool,\n  success: PropTypes.bool,\n  warning: PropTypes.bool,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputSelect };\n"],"mappings":"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"}

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

@@ -38,28 +38,32 @@ exports[`component:<InputSelect> inherit:className 1`] = `
           five
         </option>
       </select>
-      <span
-        class="icon headline-3 icon right"
+      <div
+        class="view row icons"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M24 24H0V0h24v24z"
-            fill="none"
-            opacity=".87"
-          />
-          <path
-            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
-          />
-        </svg>
-      </span>
+        <span
+          class="icon headline-3 icon"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M24 24H0V0h24v24z"
+              fill="none"
+              opacity=".87"
+            />
+            <path
+              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+            />
+          </svg>
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -147,28 +151,32 @@ exports[`component:<InputSelect> prop:error 1`] = `
           five
         </option>
       </select>
-      <span
-        class="icon headline-3 icon right"
+      <div
+        class="view row icons"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M24 24H0V0h24v24z"
-            fill="none"
-            opacity=".87"
-          />
-          <path
-            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
-          />
-        </svg>
-      </span>
+        <span
+          class="icon headline-3 icon"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M24 24H0V0h24v24z"
+              fill="none"
+              opacity=".87"
+            />
+            <path
+              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+            />
+          </svg>
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -212,28 +220,32 @@ exports[`component:<InputSelect> prop:hint 1`] = `
           five
         </option>
       </select>
-      <span
-        class="icon headline-3 icon right"
+      <div
+        class="view row icons"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M24 24H0V0h24v24z"
-            fill="none"
-            opacity=".87"
-          />
-          <path
-            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
-          />
-        </svg>
-      </span>
+        <span
+          class="icon headline-3 icon"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M24 24H0V0h24v24z"
+              fill="none"
+              opacity=".87"
+            />
+            <path
+              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+            />
+          </svg>
+        </span>
+      </div>
     </div>
     <span
       class="text small text hint"
@@ -287,28 +299,32 @@ exports[`component:<InputSelect> prop:label 1`] = `
           five
         </option>
       </select>
-      <span
-        class="icon headline-3 icon right"
+      <div
+        class="view row icons"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M24 24H0V0h24v24z"
-            fill="none"
-            opacity=".87"
-          />
-          <path
-            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
-          />
-        </svg>
-      </span>
+        <span
+          class="icon headline-3 icon"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M24 24H0V0h24v24z"
+              fill="none"
+              opacity=".87"
+            />
+            <path
+              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+            />
+          </svg>
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -352,28 +368,32 @@ exports[`component:<InputSelect> prop:label 2`] = `
           five
         </option>
       </select>
-      <span
-        class="icon headline-3 icon right"
+      <div
+        class="view row icons"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M24 24H0V0h24v24z"
-            fill="none"
-            opacity=".87"
-          />
-          <path
-            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
-          />
-        </svg>
-      </span>
+        <span
+          class="icon headline-3 icon"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M24 24H0V0h24v24z"
+              fill="none"
+              opacity=".87"
+            />
+            <path
+              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+            />
+          </svg>
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -461,23 +481,49 @@ exports[`component:<InputSelect> prop:warning 1`] = `
           five
         </option>
       </select>
-      <span
-        class="icon headline-3 icon right warning"
+      <div
+        class="view row icons"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
-          />
-        </svg>
-      </span>
+        <span
+          class="icon headline-3 icon"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M24 24H0V0h24v24z"
+              fill="none"
+              opacity=".87"
+            />
+            <path
+              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+            />
+          </svg>
+        </span>
+        <span
+          class="icon headline-3 icon warning"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
+            />
+          </svg>
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -521,28 +567,32 @@ exports[`component:<InputSelect> renders 1`] = `
           five
         </option>
       </select>
-      <span
-        class="icon headline-3 icon right"
+      <div
+        class="view row icons"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M24 24H0V0h24v24z"
-            fill="none"
-            opacity=".87"
-          />
-          <path
-            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
-          />
-        </svg>
-      </span>
+        <span
+          class="icon headline-3 icon"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M24 24H0V0h24v24z"
+              fill="none"
+              opacity=".87"
+            />
+            <path
+              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+            />
+          </svg>
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -587,28 +637,32 @@ exports[`component:<InputSelect> testID 1`] = `
           five
         </option>
       </select>
-      <span
-        class="icon headline-3 icon right"
+      <div
+        class="view row icons"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M24 24H0V0h24v24z"
-            fill="none"
-            opacity=".87"
-          />
-          <path
-            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
-          />
-        </svg>
-      </span>
+        <span
+          class="icon headline-3 icon"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M24 24H0V0h24v24z"
+              fill="none"
+              opacity=".87"
+            />
+            <path
+              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+            />
+          </svg>
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>

package/build/components/InputText/InputText.js

@@ -115,22 +115,25 @@ var InputText = function InputText(_ref) {
     onChange: handleChange,
     onEnter: handleEnter,
     onLeave: handleLeave
-  })), has.stateIcon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    value: (0, _helpers.getIconState)({
-      error: error,
-      success: success,
-      warning: warning
-    }),
-    className: (0, _helpers.styles)(_InputTextModule.default.icon, _InputTextModule.default.right, error ? _InputTextModule.default.error : warning ? _InputTextModule.default.warning : success ? _InputTextModule.default.success : undefined)
-  }), is.password && !disabled && !has.stateIcon && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+  })), (is.password && !disabled || has.stateIcon) && /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    row: true,
+    className: _InputTextModule.default.icons
+  }, is.password && !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     tabIndex: -1,
     type: "button",
-    className: _InputTextModule.default.pressable,
     onPress: function onPress() {
       return setPassword(!password);
     }
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    value: password ? _primitives.ICON.EYE_CLOSE : _primitives.ICON.EYE_OPEN
+    value: password ? _primitives.ICON.EYE_CLOSE : _primitives.ICON.EYE_OPEN,
+    className: _InputTextModule.default.icon
+  })), has.stateIcon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    value: (0, _helpers.getIconState)({
+      error: error,
+      success: success,
+      warning: warning
+    }),
+    className: (0, _helpers.styles)(_InputTextModule.default.icon, error ? _InputTextModule.default.error : warning ? _InputTextModule.default.warning : success ? _InputTextModule.default.success : undefined)
   }))), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     small: true,
     className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error)