@mirai/ui 1.0.59 → 1.0.60

package/build/components/InputOption/InputOption.js

@@ -17,7 +17,7 @@ var _InputOption = require("./InputOption.constants");
 
 var _InputOptionModule = _interopRequireDefault(require("./InputOption.module.css"));
 
-var _excluded = ["checked", "disabled", "label", "name", "reverse", "type", "value", "onChange"];
+var _excluded = ["checked", "disabled", "indeterminate", "label", "name", "reverse", "type", "value", "onChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -30,6 +30,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var InputOption = function InputOption(_ref) {
   var checked = _ref.checked,
       disabled = _ref.disabled,
+      indeterminate = _ref.indeterminate,
       label = _ref.label,
       name = _ref.name,
       reverse = _ref.reverse,
@@ -52,13 +53,13 @@ var InputOption = function InputOption(_ref) {
     className: (0, _helpers.styles)(_InputOptionModule.default.inputOption, reverse && _InputOptionModule.default.reverse, others.className),
     onPress: handleChange
   }), /*#__PURE__*/_react.default.createElement(Primitive, {
-    checked: checked,
+    checked: checked || type === _InputOption.CHECKBOX && indeterminate,
     disabled: disabled,
     name: name,
     type: type,
     value: value
-  }, type === _InputOption.CHECKBOX && checked ? /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    name: "Check",
+  }, type === _InputOption.CHECKBOX && (checked || indeterminate) ? /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    name: checked ? 'Check' : 'Remove',
     className: _InputOptionModule.default.icon
   }) : undefined), label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     className: (0, _helpers.styles)(_InputOptionModule.default.label, disabled && _InputOptionModule.default.disabled)
@@ -70,6 +71,7 @@ InputOption.displayName = 'Component:InputOption';
 InputOption.propTypes = {
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
+  indeterminate: _propTypes.default.bool,
   label: _propTypes.default.string,
   name: _propTypes.default.string.isRequired,
   reverse: _propTypes.default.bool,

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

@@ -1 +1 @@
-{"version":3,"file":"InputOption.js","names":["InputOption","checked","disabled","label","name","reverse","type","CHECKBOX","value","onChange","others","Primitive","Checkbox","RADIO","Radio","Switch","handleChange","event","SWITCH","includes","style","inputOption","className","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, 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  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 checked={checked} disabled={disabled} name={name} type={type} value={value}>\n        {type === CHECKBOX && checked ? <Icon name=\"Check\" className={style.icon} /> : 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  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,OAUd;EAAA,IATJC,OASI,QATJA,OASI;EAAA,IARJC,QAQI,QARJA,QAQI;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,CAACL,OAArC,GAA+CO,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;IAAW,OAAO,EAAEf,OAApB;IAA6B,QAAQ,EAAEC,QAAvC;IAAiD,IAAI,EAAEE,IAAvD;IAA6D,IAAI,EAAEE,IAAnE;IAAyE,KAAK,EAAEE;EAAhF,GACGF,IAAI,KAAKC,qBAAT,IAAqBN,OAArB,gBAA+B,6BAAC,gBAAD;IAAM,IAAI,EAAC,OAAX;IAAmB,SAAS,EAAEmB,2BAAMG;EAApC,EAA/B,GAA8EC,SADjF,CANF,EASGrB,KAAK,iBAAI,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOiB,2BAAMjB,KAAb,EAAoBD,QAAQ,IAAIkB,2BAAMlB,QAAtC;EAAjB,GAAmEC,KAAnE,CATZ,CADF;AAaD,CA9BD;;;AAgCAH,WAAW,CAACyB,WAAZ,GAA0B,uBAA1B;AAEAzB,WAAW,CAAC0B,SAAZ,GAAwB;EACtBzB,OAAO,EAAE0B,mBAAUC,IADG;EAEtB1B,QAAQ,EAAEyB,mBAAUC,IAFE;EAGtBzB,KAAK,EAAEwB,mBAAUE,MAHK;EAItBzB,IAAI,EAAEuB,mBAAUE,MAAV,CAAiBC,UAJD;EAKtBzB,OAAO,EAAEsB,mBAAUC,IALG;EAMtBtB,IAAI,EAAEqB,mBAAUI,KAAV,CAAgB,CAACxB,qBAAD,EAAWM,kBAAX,EAAkBK,mBAAlB,CAAhB,CANgB;EAOtBV,KAAK,EAAEmB,mBAAUE,MAPK;EAQtBpB,QAAQ,EAAEkB,mBAAUK;AARE,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","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, 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 name={checked ? 'Check' : '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,IAAI,EAAEF,OAAO,GAAG,OAAH,GAAa,QAAhC;IAA0C,SAAS,EAAEoB,2BAAMG;EAA3D,EADD,GAEGC,SATN,CANF,EAiBGrB,KAAK,iBAAI,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOiB,2BAAMjB,KAAb,EAAoBF,QAAQ,IAAImB,2BAAMnB,QAAtC;EAAjB,GAAmEE,KAAnE,CAjBZ,CADF;AAqBD,CAvCD;;;AAyCAJ,WAAW,CAAC0B,WAAZ,GAA0B,uBAA1B;AAEA1B,WAAW,CAAC2B,SAAZ,GAAwB;EACtB1B,OAAO,EAAE2B,mBAAUC,IADG;EAEtB3B,QAAQ,EAAE0B,mBAAUC,IAFE;EAGtB1B,aAAa,EAAEyB,mBAAUC,IAHH;EAItBzB,KAAK,EAAEwB,mBAAUE,MAJK;EAKtBzB,IAAI,EAAEuB,mBAAUE,MAAV,CAAiBC,UALD;EAMtBzB,OAAO,EAAEsB,mBAAUC,IANG;EAOtBtB,IAAI,EAAEqB,mBAAUI,KAAV,CAAgB,CAACxB,qBAAD,EAAWM,kBAAX,EAAkBK,mBAAlB,CAAhB,CAPgB;EAQtBV,KAAK,EAAEmB,mBAAUE,MARK;EAStBpB,QAAQ,EAAEkB,mBAAUK;AATE,CAAxB"}

package/build/components/InputOption/InputOption.module.css

@@ -9,7 +9,7 @@
 .icon {
   color: var(--mirai-ui-base);
   left: 0;
-  margin: calc(calc(var(--mirai-ui-checkbox-size) - var(--mirai-ui-font-size-paragraph)) / 2);
+  margin: calc(calc(var(--mirai-ui-checkbox-size) - var(--mirai-ui-input-text-icon)) / 2);
   position: absolute;
   top: 0;
 }
@@ -20,6 +20,7 @@
 
 .label.disabled {
   color: var(--mirai-ui-input-option-disabled);
+  cursor: default;
 }
 
 .reverse {

package/build/components/InputOption/InputOption.stories.js

@@ -31,6 +31,7 @@ Story.storyName = 'InputOption';
 Story.args = {
   checked: true,
   disabled: false,
+  indeterminate: false,
   label: 'label',
   name: 'name',
   reverse: false,

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

@@ -1 +1 @@
-{"version":3,"file":"InputOption.stories.js","names":["title","Story","props","storyName","args","checked","disabled","label","name","reverse","type","value","onChange","console","log","argTypes","options","CHECKBOX","RADIO","SWITCH","control","defaultValue"],"sources":["../../../src/components/InputOption/InputOption.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { InputOption } from './InputOption';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <InputOption {...props} />;\n\nStory.storyName = 'InputOption';\n\nStory.args = {\n  checked: true,\n  disabled: false,\n  label: 'label',\n  name: 'name',\n  reverse: false,\n  type: 'checkbox',\n  value: 'value',\n  onChange: (...props) => console.log('<InputOption>::onChange', ...props),\n};\n\nStory.argTypes = {\n  type: {\n    options: [CHECKBOX, RADIO, SWITCH],\n    control: { type: 'select' },\n    defaultValue: CHECKBOX,\n  },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,wBAAD,EAAiBA,KAAjB,CAAX;AAAA,CAAd;;;AAEPD,KAAK,CAACE,SAAN,GAAkB,aAAlB;AAEAF,KAAK,CAACG,IAAN,GAAa;EACXC,OAAO,EAAE,IADE;EAEXC,QAAQ,EAAE,KAFC;EAGXC,KAAK,EAAE,OAHI;EAIXC,IAAI,EAAE,MAJK;EAKXC,OAAO,EAAE,KALE;EAMXC,IAAI,EAAE,UANK;EAOXC,KAAK,EAAE,OAPI;EAQXC,QAAQ,EAAE;IAAA;;IAAA,kCAAIV,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,YAAAW,OAAO,EAACC,GAAR,kBAAY,yBAAZ,SAA0CZ,KAA1C,EAAd;EAAA;AARC,CAAb;AAWAD,KAAK,CAACc,QAAN,GAAiB;EACfL,IAAI,EAAE;IACJM,OAAO,EAAE,CAACC,sBAAD,EAAWC,mBAAX,EAAkBC,oBAAlB,CADL;IAEJC,OAAO,EAAE;MAAEV,IAAI,EAAE;IAAR,CAFL;IAGJW,YAAY,EAAEJ;EAHV;AADS,CAAjB"}
+{"version":3,"file":"InputOption.stories.js","names":["title","Story","props","storyName","args","checked","disabled","indeterminate","label","name","reverse","type","value","onChange","console","log","argTypes","options","CHECKBOX","RADIO","SWITCH","control","defaultValue"],"sources":["../../../src/components/InputOption/InputOption.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { InputOption } from './InputOption';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <InputOption {...props} />;\n\nStory.storyName = 'InputOption';\n\nStory.args = {\n  checked: true,\n  disabled: false,\n  indeterminate: false,\n  label: 'label',\n  name: 'name',\n  reverse: false,\n  type: 'checkbox',\n  value: 'value',\n  onChange: (...props) => console.log('<InputOption>::onChange', ...props),\n};\n\nStory.argTypes = {\n  type: {\n    options: [CHECKBOX, RADIO, SWITCH],\n    control: { type: 'select' },\n    defaultValue: CHECKBOX,\n  },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,wBAAD,EAAiBA,KAAjB,CAAX;AAAA,CAAd;;;AAEPD,KAAK,CAACE,SAAN,GAAkB,aAAlB;AAEAF,KAAK,CAACG,IAAN,GAAa;EACXC,OAAO,EAAE,IADE;EAEXC,QAAQ,EAAE,KAFC;EAGXC,aAAa,EAAE,KAHJ;EAIXC,KAAK,EAAE,OAJI;EAKXC,IAAI,EAAE,MALK;EAMXC,OAAO,EAAE,KANE;EAOXC,IAAI,EAAE,UAPK;EAQXC,KAAK,EAAE,OARI;EASXC,QAAQ,EAAE;IAAA;;IAAA,kCAAIX,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,YAAAY,OAAO,EAACC,GAAR,kBAAY,yBAAZ,SAA0Cb,KAA1C,EAAd;EAAA;AATC,CAAb;AAYAD,KAAK,CAACe,QAAN,GAAiB;EACfL,IAAI,EAAE;IACJM,OAAO,EAAE,CAACC,sBAAD,EAAWC,mBAAX,EAAkBC,oBAAlB,CADL;IAEJC,OAAO,EAAE;MAAEV,IAAI,EAAE;IAAR,CAFL;IAGJW,YAAY,EAAEJ;EAHV;AADS,CAAjB"}

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

@@ -38,21 +38,23 @@ exports[`primitive:<InputOption> prop:checked && disabled 1`] = `
         value=""
       />
       <span
-        class="icon paragraph icon"
+        class="icon headline-3 icon"
       >
         <svg
-          fill="none"
+          fill="currentColor"
           height="1em"
           stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
+          stroke-width="0"
           viewBox="0 0 24 24"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polyline
-            points="20 6 9 17 4 12"
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"
           />
         </svg>
       </span>
@@ -78,21 +80,23 @@ exports[`primitive:<InputOption> prop:checked 1`] = `
         value=""
       />
       <span
-        class="icon paragraph icon"
+        class="icon headline-3 icon"
       >
         <svg
-          fill="none"
+          fill="currentColor"
           height="1em"
           stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
+          stroke-width="0"
           viewBox="0 0 24 24"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polyline
-            points="20 6 9 17 4 12"
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"
           />
         </svg>
       </span>
@@ -122,6 +126,91 @@ exports[`primitive:<InputOption> prop:disabled 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<InputOption> prop:indeterminate && disabled 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable inputOption"
+    type="button"
+  >
+    <div
+      class="checkbox"
+    >
+      <input
+        checked=""
+        class="checked"
+        disabled=""
+        name="name"
+        type="checkbox"
+        value=""
+      />
+      <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="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M19 13H5v-2h14v2z"
+          />
+        </svg>
+      </span>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`primitive:<InputOption> prop:indeterminate 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable inputOption"
+    type="button"
+  >
+    <div
+      class="checkbox"
+    >
+      <input
+        checked=""
+        class="checked"
+        name="name"
+        type="checkbox"
+        value=""
+      />
+      <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="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M19 13H5v-2h14v2z"
+          />
+        </svg>
+      </span>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
 exports[`primitive:<InputOption> prop:label 1`] = `
 <DocumentFragment>
   <button

package/build/components/InputSelect/InputSelect.js

@@ -106,7 +106,7 @@ var InputSelect = function InputSelect(_ref) {
       error: error,
       success: success,
       warning: warning
-    }) : 'CloseArrow',
+    }) : 'ExpandMore',
     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, {
     small: true,

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","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 { getIconName, styles } from '../../helpers';\nimport { 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            name={!focus && (error || success || warning) ? getIconName({ error, success, warning }) : 'CloseArrow'}\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","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","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 { getIconName, styles } from '../../helpers';\nimport { 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            name={!focus && (error || success || warning) ? getIconName({ error, success, warning }) : 'ExpandMore'}\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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"}

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

@@ -39,21 +39,24 @@ exports[`component:<InputSelect> inherit:className 1`] = `
         </option>
       </select>
       <span
-        class="icon paragraph icon right"
+        class="icon headline-3 icon right"
       >
         <svg
-          fill="none"
+          fill="currentColor"
           height="1em"
           stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
+          stroke-width="0"
           viewBox="0 0 24 24"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polyline
-            points="6 9 12 15 18 9"
+          <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>
@@ -145,21 +148,24 @@ exports[`component:<InputSelect> prop:error 1`] = `
         </option>
       </select>
       <span
-        class="icon paragraph icon right"
+        class="icon headline-3 icon right"
       >
         <svg
-          fill="none"
+          fill="currentColor"
           height="1em"
           stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
+          stroke-width="0"
           viewBox="0 0 24 24"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polyline
-            points="6 9 12 15 18 9"
+          <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>
@@ -207,21 +213,24 @@ exports[`component:<InputSelect> prop:hint 1`] = `
         </option>
       </select>
       <span
-        class="icon paragraph icon right"
+        class="icon headline-3 icon right"
       >
         <svg
-          fill="none"
+          fill="currentColor"
           height="1em"
           stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
+          stroke-width="0"
           viewBox="0 0 24 24"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polyline
-            points="6 9 12 15 18 9"
+          <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>
@@ -279,21 +288,24 @@ exports[`component:<InputSelect> prop:label 1`] = `
         </option>
       </select>
       <span
-        class="icon paragraph icon right"
+        class="icon headline-3 icon right"
       >
         <svg
-          fill="none"
+          fill="currentColor"
           height="1em"
           stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
+          stroke-width="0"
           viewBox="0 0 24 24"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polyline
-            points="6 9 12 15 18 9"
+          <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>
@@ -341,21 +353,24 @@ exports[`component:<InputSelect> prop:label 2`] = `
         </option>
       </select>
       <span
-        class="icon paragraph icon right"
+        class="icon headline-3 icon right"
       >
         <svg
-          fill="none"
+          fill="currentColor"
           height="1em"
           stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
+          stroke-width="0"
           viewBox="0 0 24 24"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polyline
-            points="6 9 12 15 18 9"
+          <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>
@@ -447,7 +462,7 @@ exports[`component:<InputSelect> prop:warning 1`] = `
         </option>
       </select>
       <span
-        class="icon paragraph icon right warning"
+        class="icon headline-3 icon right warning"
       >
         <svg
           fill="currentColor"
@@ -458,10 +473,6 @@ exports[`component:<InputSelect> prop:warning 1`] = `
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
           <path
             d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
           />
@@ -511,21 +522,24 @@ exports[`component:<InputSelect> renders 1`] = `
         </option>
       </select>
       <span
-        class="icon paragraph icon right"
+        class="icon headline-3 icon right"
       >
         <svg
-          fill="none"
+          fill="currentColor"
           height="1em"
           stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
+          stroke-width="0"
           viewBox="0 0 24 24"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polyline
-            points="6 9 12 15 18 9"
+          <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>
@@ -574,21 +588,24 @@ exports[`component:<InputSelect> testID 1`] = `
         </option>
       </select>
       <span
-        class="icon paragraph icon right"
+        class="icon headline-3 icon right"
       >
         <svg
-          fill="none"
+          fill="currentColor"
           height="1em"
           stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
+          stroke-width="0"
           viewBox="0 0 24 24"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polyline
-            points="6 9 12 15 18 9"
+          <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>