@mirai/ui 1.0.54 → 1.0.55

package/build/components/InputNumber/InputNumber.js

@@ -51,16 +51,17 @@ var InputNumber = function InputNumber(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_primitives.View, {
     className: _InputNumberModule.default.texts
   }, label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-    subheadline: true,
+    headline: true,
+    level: 4,
     className: disabled && _InputNumberModule.default.disabled
   }, label), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     small: true,
     className: (0, _helpers.styles)(_InputNumberModule.default.hint, disabled && _InputNumberModule.default.disabled)
   }, hint)), /*#__PURE__*/_react.default.createElement(_Button.Button, {
     disabled: disabled || value <= min,
-    outlined: true,
     preventDefault: true,
     rounded: rounded,
+    secondary: true,
     squared: true,
     onPress: function onPress() {
       return onChange(value - step, name);
@@ -72,9 +73,9 @@ var InputNumber = function InputNumber(_ref) {
     className: _InputNumberModule.default.value
   }, typeof value === 'number' ? value : min), /*#__PURE__*/_react.default.createElement(_Button.Button, {
     disabled: disabled || value >= max,
-    outlined: true,
     preventDefault: true,
     rounded: rounded,
+    secondary: true,
     squared: true,
     onPress: function onPress() {
       return onChange(value + step, name);

package/build/components/InputNumber/InputNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","rounded","step","value","onChange","others","style","inputNumber","className","texts","propTypes","PropTypes","bool","oneOfType","string","array","number","isRequired","func"],"sources":["../../../src/components/InputNumber/InputNumber.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport style from './InputNumber.module.css';\n\nexport const InputNumber = ({\n  disabled,\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  rounded = true,\n  step = 1,\n  value = 0,\n  onChange = () => {},\n  ...others\n}) => (\n  <View {...others} row className={styles(style.inputNumber, others.className)}>\n    <View className={style.texts}>\n      {label && (\n        <Text subheadline className={disabled && style.disabled}>\n          {label}\n        </Text>\n      )}\n      {hint && (\n        <Text small className={styles(style.hint, disabled && style.disabled)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n    <Button\n      disabled={disabled || value <= min}\n      outlined\n      preventDefault\n      rounded={rounded}\n      squared\n      onPress={() => onChange(value - step, name)}\n    >\n      <Icon name=\"Minus\" />\n    </Button>\n    <Text headline className={style.value}>\n      {typeof value === 'number' ? value : min}\n    </Text>\n    <Button\n      disabled={disabled || value >= max}\n      outlined\n      preventDefault\n      rounded={rounded}\n      squared\n      onPress={() => onChange(value + step, name)}\n    >\n      <Icon name=\"Plus\" />\n    </Button>\n  </View>\n);\n\nInputNumber.propTypes = {\n  disabled: PropTypes.bool,\n  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n  label: PropTypes.string,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  rounded: PropTypes.bool,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc;EAAA,IACzBC,QADyB,QACzBA,QADyB;EAAA,IAEzBC,IAFyB,QAEzBA,IAFyB;EAAA,IAGzBC,KAHyB,QAGzBA,KAHyB;EAAA,IAIzBC,GAJyB,QAIzBA,GAJyB;EAAA,oBAKzBC,GALyB;EAAA,IAKzBA,GALyB,yBAKnB,CALmB;EAAA,IAMzBC,IANyB,QAMzBA,IANyB;EAAA,wBAOzBC,OAPyB;EAAA,IAOzBA,OAPyB,6BAOf,IAPe;EAAA,qBAQzBC,IARyB;EAAA,IAQzBA,IARyB,0BAQlB,CARkB;EAAA,sBASzBC,KATyB;EAAA,IASzBA,KATyB,2BASjB,CATiB;EAAA,yBAUzBC,QAVyB;EAAA,IAUzBA,QAVyB,8BAUd,YAAM,CAAE,CAVM;EAAA,IAWtBC,MAXsB;;EAAA,oBAazB,6BAAC,gBAAD,eAAUA,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOC,2BAAMC,WAAb,EAA0BF,MAAM,CAACG,SAAjC;EAAjC,iBACE,6BAAC,gBAAD;IAAM,SAAS,EAAEF,2BAAMG;EAAvB,GACGZ,KAAK,iBACJ,6BAAC,gBAAD;IAAM,WAAW,MAAjB;IAAkB,SAAS,EAAEF,QAAQ,IAAIW,2BAAMX;EAA/C,GACGE,KADH,CAFJ,EAMGD,IAAI,iBACH,6BAAC,gBAAD;IAAM,KAAK,MAAX;IAAY,SAAS,EAAE,qBAAOU,2BAAMV,IAAb,EAAmBD,QAAQ,IAAIW,2BAAMX,QAArC;EAAvB,GACGC,IADH,CAPJ,CADF,eAaE,6BAAC,cAAD;IACE,QAAQ,EAAED,QAAQ,IAAIQ,KAAK,IAAIJ,GADjC;IAEE,QAAQ,MAFV;IAGE,cAAc,MAHhB;IAIE,OAAO,EAAEE,OAJX;IAKE,OAAO,MALT;IAME,OAAO,EAAE;MAAA,OAAMG,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeF,IAAf,CAAd;IAAA;EANX,gBAQE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EARF,CAbF,eAuBE,6BAAC,gBAAD;IAAM,QAAQ,MAAd;IAAe,SAAS,EAAEM,2BAAMH;EAAhC,GACG,OAAOA,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCJ,GADvC,CAvBF,eA0BE,6BAAC,cAAD;IACE,QAAQ,EAAEJ,QAAQ,IAAIQ,KAAK,IAAIL,GADjC;IAEE,QAAQ,MAFV;IAGE,cAAc,MAHhB;IAIE,OAAO,EAAEG,OAJX;IAKE,OAAO,MALT;IAME,OAAO,EAAE;MAAA,OAAMG,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeF,IAAf,CAAd;IAAA;EANX,gBAQE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EARF,CA1BF,CAbyB;AAAA,CAApB;;;AAoDPN,WAAW,CAACgB,SAAZ,GAAwB;EACtBf,QAAQ,EAAEgB,mBAAUC,IADE;EAEtBhB,IAAI,EAAEe,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,KAA7B,CAApB,CAFgB;EAGtBlB,KAAK,EAAEc,mBAAUG,MAHK;EAItBhB,GAAG,EAAEa,mBAAUK,MAJO;EAKtBjB,GAAG,EAAEY,mBAAUK,MALO;EAMtBhB,IAAI,EAAEW,mBAAUG,MAAV,CAAiBG,UAND;EAOtBhB,OAAO,EAAEU,mBAAUC,IAPG;EAQtBV,IAAI,EAAES,mBAAUK,MARM;EAStBb,KAAK,EAAEQ,mBAAUK,MATK;EAUtBZ,QAAQ,EAAEO,mBAAUO;AAVE,CAAxB"}
+{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","rounded","step","value","onChange","others","style","inputNumber","className","texts","propTypes","PropTypes","bool","oneOfType","string","array","number","isRequired","func"],"sources":["../../../src/components/InputNumber/InputNumber.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport style from './InputNumber.module.css';\n\nexport const InputNumber = ({\n  disabled,\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  rounded = true,\n  step = 1,\n  value = 0,\n  onChange = () => {},\n  ...others\n}) => (\n  <View {...others} row className={styles(style.inputNumber, others.className)}>\n    <View className={style.texts}>\n      {label && (\n        <Text headline level={4} className={disabled && style.disabled}>\n          {label}\n        </Text>\n      )}\n      {hint && (\n        <Text small className={styles(style.hint, disabled && style.disabled)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n    <Button\n      disabled={disabled || value <= min}\n      preventDefault\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value - step, name)}\n    >\n      <Icon name=\"Minus\" />\n    </Button>\n    <Text headline className={style.value}>\n      {typeof value === 'number' ? value : min}\n    </Text>\n    <Button\n      disabled={disabled || value >= max}\n      preventDefault\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value + step, name)}\n    >\n      <Icon name=\"Plus\" />\n    </Button>\n  </View>\n);\n\nInputNumber.propTypes = {\n  disabled: PropTypes.bool,\n  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n  label: PropTypes.string,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  rounded: PropTypes.bool,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc;EAAA,IACzBC,QADyB,QACzBA,QADyB;EAAA,IAEzBC,IAFyB,QAEzBA,IAFyB;EAAA,IAGzBC,KAHyB,QAGzBA,KAHyB;EAAA,IAIzBC,GAJyB,QAIzBA,GAJyB;EAAA,oBAKzBC,GALyB;EAAA,IAKzBA,GALyB,yBAKnB,CALmB;EAAA,IAMzBC,IANyB,QAMzBA,IANyB;EAAA,wBAOzBC,OAPyB;EAAA,IAOzBA,OAPyB,6BAOf,IAPe;EAAA,qBAQzBC,IARyB;EAAA,IAQzBA,IARyB,0BAQlB,CARkB;EAAA,sBASzBC,KATyB;EAAA,IASzBA,KATyB,2BASjB,CATiB;EAAA,yBAUzBC,QAVyB;EAAA,IAUzBA,QAVyB,8BAUd,YAAM,CAAE,CAVM;EAAA,IAWtBC,MAXsB;;EAAA,oBAazB,6BAAC,gBAAD,eAAUA,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOC,2BAAMC,WAAb,EAA0BF,MAAM,CAACG,SAAjC;EAAjC,iBACE,6BAAC,gBAAD;IAAM,SAAS,EAAEF,2BAAMG;EAAvB,GACGZ,KAAK,iBACJ,6BAAC,gBAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAE,CAAtB;IAAyB,SAAS,EAAEF,QAAQ,IAAIW,2BAAMX;EAAtD,GACGE,KADH,CAFJ,EAMGD,IAAI,iBACH,6BAAC,gBAAD;IAAM,KAAK,MAAX;IAAY,SAAS,EAAE,qBAAOU,2BAAMV,IAAb,EAAmBD,QAAQ,IAAIW,2BAAMX,QAArC;EAAvB,GACGC,IADH,CAPJ,CADF,eAaE,6BAAC,cAAD;IACE,QAAQ,EAAED,QAAQ,IAAIQ,KAAK,IAAIJ,GADjC;IAEE,cAAc,MAFhB;IAGE,OAAO,EAAEE,OAHX;IAIE,SAAS,MAJX;IAKE,OAAO,MALT;IAME,OAAO,EAAE;MAAA,OAAMG,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeF,IAAf,CAAd;IAAA;EANX,gBAQE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EARF,CAbF,eAuBE,6BAAC,gBAAD;IAAM,QAAQ,MAAd;IAAe,SAAS,EAAEM,2BAAMH;EAAhC,GACG,OAAOA,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCJ,GADvC,CAvBF,eA0BE,6BAAC,cAAD;IACE,QAAQ,EAAEJ,QAAQ,IAAIQ,KAAK,IAAIL,GADjC;IAEE,cAAc,MAFhB;IAGE,OAAO,EAAEG,OAHX;IAIE,SAAS,MAJX;IAKE,OAAO,MALT;IAME,OAAO,EAAE;MAAA,OAAMG,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeF,IAAf,CAAd;IAAA;EANX,gBAQE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EARF,CA1BF,CAbyB;AAAA,CAApB;;;AAoDPN,WAAW,CAACgB,SAAZ,GAAwB;EACtBf,QAAQ,EAAEgB,mBAAUC,IADE;EAEtBhB,IAAI,EAAEe,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,KAA7B,CAApB,CAFgB;EAGtBlB,KAAK,EAAEc,mBAAUG,MAHK;EAItBhB,GAAG,EAAEa,mBAAUK,MAJO;EAKtBjB,GAAG,EAAEY,mBAAUK,MALO;EAMtBhB,IAAI,EAAEW,mBAAUG,MAAV,CAAiBG,UAND;EAOtBhB,OAAO,EAAEU,mBAAUC,IAPG;EAQtBV,IAAI,EAAES,mBAAUK,MARM;EAStBb,KAAK,EAAEQ,mBAAUK,MATK;EAUtBZ,QAAQ,EAAEO,mBAAUO;AAVE,CAAxB"}

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

@@ -9,11 +9,11 @@ exports[`component:<InputNumber> inherit:className 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared outlined disabled"
+      class="pressable button rounded squared secondary disabled"
       disabled=""
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -35,16 +35,16 @@ exports[`component:<InputNumber> inherit:className 1`] = `
         </svg>
       </span>
     </button>
-    <span
-      class="text headline value"
+    <h3
+      class="text headline-3 value"
     >
       0
-    </span>
+    </h3>
     <button
-      class="pressable button rounded squared outlined"
+      class="pressable button rounded squared secondary"
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -85,11 +85,11 @@ exports[`component:<InputNumber> prop:disabled 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared outlined disabled"
+      class="pressable button rounded squared secondary disabled"
       disabled=""
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -111,17 +111,17 @@ exports[`component:<InputNumber> prop:disabled 1`] = `
         </svg>
       </span>
     </button>
-    <span
-      class="text headline value"
+    <h3
+      class="text headline-3 value"
     >
       0
-    </span>
+    </h3>
     <button
-      class="pressable button rounded squared outlined disabled"
+      class="pressable button rounded squared secondary disabled"
       disabled=""
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -168,11 +168,11 @@ exports[`component:<InputNumber> prop:hint 1`] = `
       </span>
     </div>
     <button
-      class="pressable button rounded squared outlined disabled"
+      class="pressable button rounded squared secondary disabled"
       disabled=""
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -194,16 +194,16 @@ exports[`component:<InputNumber> prop:hint 1`] = `
         </svg>
       </span>
     </button>
-    <span
-      class="text headline value"
+    <h3
+      class="text headline-3 value"
     >
       0
-    </span>
+    </h3>
     <button
-      class="pressable button rounded squared outlined"
+      class="pressable button rounded squared secondary"
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -243,18 +243,18 @@ exports[`component:<InputNumber> prop:label 1`] = `
     <div
       class="view texts"
     >
-      <span
-        class="text subheadline"
+      <h4
+        class="text headline-4"
       >
         label
-      </span>
+      </h4>
     </div>
     <button
-      class="pressable button rounded squared outlined disabled"
+      class="pressable button rounded squared secondary disabled"
       disabled=""
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -276,16 +276,16 @@ exports[`component:<InputNumber> prop:label 1`] = `
         </svg>
       </span>
     </button>
-    <span
-      class="text headline value"
+    <h3
+      class="text headline-3 value"
     >
       0
-    </span>
+    </h3>
     <button
-      class="pressable button rounded squared outlined"
+      class="pressable button rounded squared secondary"
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -326,10 +326,10 @@ exports[`component:<InputNumber> prop:max 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared outlined"
+      class="pressable button rounded squared secondary"
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -351,17 +351,17 @@ exports[`component:<InputNumber> prop:max 1`] = `
         </svg>
       </span>
     </button>
-    <span
-      class="text headline value"
+    <h3
+      class="text headline-3 value"
     >
       10
-    </span>
+    </h3>
     <button
-      class="pressable button rounded squared outlined disabled"
+      class="pressable button rounded squared secondary disabled"
       disabled=""
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -402,11 +402,11 @@ exports[`component:<InputNumber> prop:min 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared outlined disabled"
+      class="pressable button rounded squared secondary disabled"
       disabled=""
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -428,16 +428,16 @@ exports[`component:<InputNumber> prop:min 1`] = `
         </svg>
       </span>
     </button>
-    <span
-      class="text headline value"
+    <h3
+      class="text headline-3 value"
     >
       10
-    </span>
+    </h3>
     <button
-      class="pressable button rounded squared outlined"
+      class="pressable button rounded squared secondary"
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -478,10 +478,10 @@ exports[`component:<InputNumber> prop:rounded 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared outlined"
+      class="pressable button rounded squared secondary"
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -503,16 +503,16 @@ exports[`component:<InputNumber> prop:rounded 1`] = `
         </svg>
       </span>
     </button>
-    <span
-      class="text headline value"
+    <h3
+      class="text headline-3 value"
     >
       10
-    </span>
+    </h3>
     <button
-      class="pressable button rounded squared outlined"
+      class="pressable button rounded squared secondary"
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -553,10 +553,10 @@ exports[`component:<InputNumber> prop:value 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared outlined"
+      class="pressable button rounded squared secondary"
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -578,16 +578,16 @@ exports[`component:<InputNumber> prop:value 1`] = `
         </svg>
       </span>
     </button>
-    <span
-      class="text headline value"
+    <h3
+      class="text headline-3 value"
     >
       10
-    </span>
+    </h3>
     <button
-      class="pressable button rounded squared outlined"
+      class="pressable button rounded squared secondary"
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -628,11 +628,11 @@ exports[`component:<InputNumber> renders 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared outlined disabled"
+      class="pressable button rounded squared secondary disabled"
       disabled=""
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -654,16 +654,16 @@ exports[`component:<InputNumber> renders 1`] = `
         </svg>
       </span>
     </button>
-    <span
-      class="text headline value"
+    <h3
+      class="text headline-3 value"
     >
       0
-    </span>
+    </h3>
     <button
-      class="pressable button rounded squared outlined"
+      class="pressable button rounded squared secondary"
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -705,11 +705,11 @@ exports[`component:<InputNumber> testID 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared outlined disabled"
+      class="pressable button rounded squared secondary disabled"
       disabled=""
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"
@@ -731,16 +731,16 @@ exports[`component:<InputNumber> testID 1`] = `
         </svg>
       </span>
     </button>
-    <span
-      class="text headline value"
+    <h3
+      class="text headline-3 value"
     >
       0
-    </span>
+    </h3>
     <button
-      class="pressable button rounded squared outlined"
+      class="pressable button rounded squared secondary"
     >
       <span
-        class="icon"
+        class="icon paragraph"
       >
         <svg
           fill="none"

package/build/components/InputOption/InputOption.js

@@ -59,7 +59,7 @@ var InputOption = function InputOption(_ref) {
     value: value
   }, type === _InputOption.CHECKBOX && checked ? /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     name: "Check",
-    className: (0, _helpers.styles)(_InputOptionModule.default.icon)
+    className: _InputOptionModule.default.icon
   }) : undefined), label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     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","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={styles(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,EAAE,qBAAOmB,2BAAMG,IAAb;EAA9B,EAA/B,GAAsFC,SADzF,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","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"}

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

@@ -5,7 +5,7 @@
 }
 
 .inputOption {
-  align-items: flex-start;
+  align-items: center;
   display: flex;
   flex-direction: row;
   margin-bottom: var(--mirai-ui-input-option-padding-y);

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

@@ -38,7 +38,7 @@ exports[`primitive:<InputOption> prop:checked && disabled 1`] = `
         value=""
       />
       <span
-        class="icon icon"
+        class="icon paragraph icon"
       >
         <svg
           fill="none"
@@ -78,7 +78,7 @@ exports[`primitive:<InputOption> prop:checked 1`] = `
         value=""
       />
       <span
-        class="icon icon"
+        class="icon paragraph icon"
       >
         <svg
           fill="none"

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

@@ -39,7 +39,7 @@ exports[`component:<InputSelect> inherit:className 1`] = `
         </option>
       </select>
       <span
-        class="icon icon right"
+        class="icon paragraph icon right"
       >
         <svg
           fill="none"
@@ -145,7 +145,7 @@ exports[`component:<InputSelect> prop:error 1`] = `
         </option>
       </select>
       <span
-        class="icon icon right"
+        class="icon paragraph icon right"
       >
         <svg
           fill="none"
@@ -207,7 +207,7 @@ exports[`component:<InputSelect> prop:hint 1`] = `
         </option>
       </select>
       <span
-        class="icon icon right"
+        class="icon paragraph icon right"
       >
         <svg
           fill="none"
@@ -279,7 +279,7 @@ exports[`component:<InputSelect> prop:label 1`] = `
         </option>
       </select>
       <span
-        class="icon icon right"
+        class="icon paragraph icon right"
       >
         <svg
           fill="none"
@@ -341,7 +341,7 @@ exports[`component:<InputSelect> prop:label 2`] = `
         </option>
       </select>
       <span
-        class="icon icon right"
+        class="icon paragraph icon right"
       >
         <svg
           fill="none"
@@ -403,7 +403,7 @@ exports[`component:<InputSelect> renders 1`] = `
         </option>
       </select>
       <span
-        class="icon icon right"
+        class="icon paragraph icon right"
       >
         <svg
           fill="none"
@@ -466,7 +466,7 @@ exports[`component:<InputSelect> testID 1`] = `
         </option>
       </select>
       <span
-        class="icon icon right"
+        class="icon paragraph icon right"
       >
         <svg
           fill="none"

package/build/components/InputText/InputText.js

@@ -100,7 +100,7 @@ var InputText = function InputText(_ref) {
     className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error, focus && !error && _InputTextModule.default.focus)
   }, icon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     name: icon,
-    className: [_InputTextModule.default.icon, _InputTextModule.default.left]
+    className: (0, _helpers.styles)(_InputTextModule.default.icon, _InputTextModule.default.left, disabled && _InputTextModule.default.disabled)
   }), /*#__PURE__*/_react.default.createElement(_primitives.Input, _extends({}, others, {
     disabled: disabled,
     type: !is.password || password ? type : 'text',

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

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

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

@@ -3,7 +3,7 @@
   --mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
   --mirai-ui-input-text-error: var(--mirai-ui-error);
   --mirai-ui-input-text-focus: var(--mirai-ui-accent);
-  --mirai-ui-input-text-icon: var(--mirai-ui-icon);
+  --mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-4);
   --mirai-ui-input-text-padding-x: var(--mirai-ui-space-S);
   --mirai-ui-input-text-padding-y: var(--mirai-ui-space-S);
   --mirai-ui-input-text-radius: var(--mirai-ui-border-radius);
@@ -35,12 +35,12 @@
 
 .icon {
   color: var(--mirai-ui-input-disabled);
-  line-height: var(--mirai-ui-input-text-icon);
-  height: var(--mirai-ui-input-text-icon);
-  width: var(--mirai-ui-input-text-icon);
   font-size: var(--mirai-ui-input-text-icon);
+  height: var(--mirai-ui-input-text-icon);
+  line-height: var(--mirai-ui-input-text-icon);
   pointer-events: none;
   position: absolute;
+  width: var(--mirai-ui-input-text-icon);
 }
 
 .icon.left {
@@ -101,7 +101,6 @@
 
 .label.withIcon:not(.value) {
   background-color: transparent;
-  /* left: calc(var(--mirai-ui-input-text-icon) + var(--mirai-ui-input-text-padding-x)); */
   left: calc(var(--mirai-ui-input-text-icon) + calc(var(--mirai-ui-input-text-padding-x) / 2));
 }
 
@@ -122,7 +121,8 @@
   color: var(--mirai-ui-input-disabled);
 }
 
-.text.disabled {
+.text.disabled,
+.icon.disabled {
   color: var(--mirai-ui-input-text-disabled);
 }
 

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

@@ -91,7 +91,7 @@ exports[`component:<InputText> prop:icon 1`] = `
       class="view row inputBorder"
     >
       <span
-        class="icon icon left"
+        class="icon paragraph icon left"
       >
         <svg
           fill="none"
@@ -187,7 +187,7 @@ exports[`component:<InputText> prop:type 1`] = `
         type="button"
       >
         <span
-          class="icon"
+          class="icon paragraph"
         >
           <svg
             fill="none"