@mirai/ui 1.0.128 → 1.0.129

package/build/components/InputNumber/InputNumber.js

@@ -9,8 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _Button = require("../Button");
+var _partials = require("../InputText/partials");
 var _InputNumberModule = _interopRequireDefault(require("./InputNumber.module.css"));
-var _excluded = ["disabled", "hint", "label", "max", "min", "name", "rounded", "step", "value", "onChange"];
+var _excluded = ["disabled", "hint", "label", "max", "min", "name", "required", "rounded", "step", "value", "onChange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -23,6 +24,7 @@ var InputNumber = function InputNumber(_ref) {
     _ref$min = _ref.min,
     min = _ref$min === void 0 ? 0 : _ref$min,
     name = _ref.name,
+    required = _ref.required,
     _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? true : _ref$rounded,
     _ref$step = _ref.step,
@@ -37,14 +39,16 @@ var InputNumber = function InputNumber(_ref) {
     className: (0, _helpers.styles)(_InputNumberModule.default.inputNumber, others.className)
   }), /*#__PURE__*/_react.default.createElement(_primitives.View, {
     className: _InputNumberModule.default.texts
-  }, label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-    headline: true,
-    level: 4,
-    className: (0, _helpers.styles)(_InputNumberModule.default.label, 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, {
+  }, label && /*#__PURE__*/_react.default.createElement(_partials.Label, {
+    disabled: disabled,
+    label: label,
+    required: required,
+    className: _InputNumberModule.default.label
+  }), hint && /*#__PURE__*/_react.default.createElement(_partials.Hint, {
+    disabled: disabled,
+    hint: hint,
+    className: _InputNumberModule.default.hint
+  })), /*#__PURE__*/_react.default.createElement(_Button.Button, {
     disabled: disabled || value <= min,
     rounded: rounded,
     secondary: true,
@@ -79,6 +83,7 @@ InputNumber.propTypes = {
   max: _propTypes.default.number,
   min: _propTypes.default.number,
   name: _propTypes.default.string.isRequired,
+  required: _propTypes.default.bool,
   rounded: _propTypes.default.bool,
   step: _propTypes.default.number,
   value: _propTypes.default.number,

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","styles","style","inputNumber","className","texts","ICON","REMOVE","ADD","displayName","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, ICON, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport style from './InputNumber.module.css';\n\nconst 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={styles(style.label, 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      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value - step, name)}\n    >\n      <Icon value={ICON.REMOVE} />\n    </Button>\n    <Text headline tag=\"span\" className={styles(style.value, disabled && style.disabled)}>\n      {typeof value === 'number' ? value : min}\n    </Text>\n    <Button\n      disabled={disabled || value >= max}\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value + step, name)}\n    >\n      <Icon value={ICON.ADD} />\n    </Button>\n  </View>\n);\n\nInputNumber.displayName = 'Component:InputOption';\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\nexport { InputNumber };\n"],"mappings":"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"}
+{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","required","rounded","step","value","onChange","others","styles","style","inputNumber","className","texts","ICON","REMOVE","ADD","displayName","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, ICON, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport { Hint, Label } from '../InputText/partials';\nimport style from './InputNumber.module.css';\n\nconst InputNumber = ({\n  disabled,\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  required,\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 && <Label {...{ disabled, label, required }} className={style.label} />}\n      {hint && <Hint {...{ disabled, hint }} className={style.hint} />}\n    </View>\n    <Button\n      disabled={disabled || value <= min}\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value - step, name)}\n    >\n      <Icon value={ICON.REMOVE} />\n    </Button>\n    <Text headline tag=\"span\" className={styles(style.value, disabled && style.disabled)}>\n      {typeof value === 'number' ? value : min}\n    </Text>\n    <Button\n      disabled={disabled || value >= max}\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value + step, name)}\n    >\n      <Icon value={ICON.ADD} />\n    </Button>\n  </View>\n);\n\nInputNumber.displayName = 'Component:InputOption';\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  required: PropTypes.bool,\n  rounded: PropTypes.bool,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n\nexport { InputNumber };\n"],"mappings":"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"}

package/build/components/InputNumber/InputNumber.module.css

@@ -18,13 +18,9 @@
 }
 
 .label {
+  color: var(--mirai-ui-input-text-focus);
 }
 
 .hint {
-  color: var(--mirai-ui-content-light);
-}
-
-.hint.disabled,
-.label.disabled {
-  color: var(--mirai-ui-input-text-disabled);
+  margin: 0;
 }

package/build/components/InputNumber/InputNumber.stories.js

@@ -51,6 +51,7 @@ Story.args = (_Story$args = {
   max: 4,
   min: 1,
   name: 'name',
+  required: false,
   rounded: false,
   step: 1
 }, _defineProperty(_Story$args, 'data-testid', 'test-story'), _defineProperty(_Story$args, "style", {}), _Story$args);

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

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","storyName","args","disabled","hint","label","max","min","name","rounded","step","argTypes"],"sources":["../../../src/components/InputNumber/InputNumber.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { InputNumber } from './InputNumber';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n  const [value, setValue] = useState(1);\n\n  const handleChange = (next, ...others) => {\n    setValue(next);\n    console.log('<InputNumber>::onChange', next, ...others);\n  };\n\n  return <InputNumber {...props} value={value} onChange={handleChange} />;\n};\n\nStory.storyName = 'InputNumber';\n\nStory.args = {\n  disabled: false,\n  hint: 'hint',\n  label: 'label',\n  max: 4,\n  min: 1,\n  name: 'name',\n  rounded: false,\n  step: 1,\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AAA4C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAE7B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,EAAC,CAAC,CAAC;IAAA;IAA9BC,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IACxCF,QAAQ,CAACE,IAAI,CAAC;IAAC,kCADcC,MAAM;MAANA,MAAM;IAAA;IAEnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,yBAAyB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACzD,CAAC;EAED,oBAAO,6BAAC,wBAAW,eAAKN,KAAK;IAAE,KAAK,EAAEE,KAAM;IAAC,QAAQ,EAAEE;EAAa,GAAG;AACzE,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,aAAa;AAE/BV,KAAK,CAACW,IAAI;EACRC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE,OAAO;EACdC,GAAG,EAAE,CAAC;EACNC,GAAG,EAAE,CAAC;EACNC,IAAI,EAAE,MAAM;EACZC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE;AAAC,gCAEN,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDnB,KAAK,CAACoB,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"InputNumber.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","storyName","args","disabled","hint","label","max","min","name","required","rounded","step","argTypes"],"sources":["../../../src/components/InputNumber/InputNumber.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { InputNumber } from './InputNumber';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n  const [value, setValue] = useState(1);\n\n  const handleChange = (next, ...others) => {\n    setValue(next);\n    console.log('<InputNumber>::onChange', next, ...others);\n  };\n\n  return <InputNumber {...props} value={value} onChange={handleChange} />;\n};\n\nStory.storyName = 'InputNumber';\n\nStory.args = {\n  disabled: false,\n  hint: 'hint',\n  label: 'label',\n  max: 4,\n  min: 1,\n  name: 'name',\n  required: false,\n  rounded: false,\n  step: 1,\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AAA4C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAE7B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,EAAC,CAAC,CAAC;IAAA;IAA9BC,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IACxCF,QAAQ,CAACE,IAAI,CAAC;IAAC,kCADcC,MAAM;MAANA,MAAM;IAAA;IAEnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,yBAAyB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACzD,CAAC;EAED,oBAAO,6BAAC,wBAAW,eAAKN,KAAK;IAAE,KAAK,EAAEE,KAAM;IAAC,QAAQ,EAAEE;EAAa,GAAG;AACzE,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,aAAa;AAE/BV,KAAK,CAACW,IAAI;EACRC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE,OAAO;EACdC,GAAG,EAAE,CAAC;EACNC,GAAG,EAAE,CAAC;EACNC,IAAI,EAAE,MAAM;EACZC,QAAQ,EAAE,KAAK;EACfC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE;AAAC,gCAEN,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDpB,KAAK,CAACqB,QAAQ,GAAG,CAAC,CAAC"}

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

@@ -146,7 +146,7 @@ exports[`component:<InputNumber> prop:hint 1`] = `
       class="view texts"
     >
       <span
-        class="text small hint"
+        class="text small text hint hint"
       >
         hint
       </span>
@@ -219,11 +219,11 @@ exports[`component:<InputNumber> prop:label 1`] = `
     <div
       class="view texts"
     >
-      <h4
-        class="text headline-4 label"
+      <span
+        class="text paragraph text label"
       >
         label
-      </h4>
+      </span>
     </div>
     <button
       class="pressable disabled button rounded squared disabled"
@@ -421,6 +421,73 @@ exports[`component:<InputNumber> prop:min 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<InputNumber> prop:required 1`] = `
+<DocumentFragment>
+  <div
+    class="view row inputNumber"
+  >
+    <div
+      class="view texts"
+    />
+    <button
+      class="pressable button rounded squared secondary"
+    >
+      <span
+        class="icon headline-3"
+      >
+        <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>
+    </button>
+    <span
+      class="text headline-3 value"
+    >
+      10
+    </span>
+    <button
+      class="pressable button rounded squared secondary"
+    >
+      <span
+        class="icon headline-3"
+      >
+        <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 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<InputNumber> prop:rounded 1`] = `
 <DocumentFragment>
   <div

package/build/components/InputOption/InputOption.js

@@ -8,9 +8,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
+var _partials = require("../InputText/partials");
 var _InputOption = require("./InputOption.constants");
 var _InputOptionModule = _interopRequireDefault(require("./InputOption.module.css"));
-var _excluded = ["checked", "disabled", "indeterminate", "label", "name", "type", "value", "onChange"];
+var _excluded = ["checked", "disabled", "indeterminate", "label", "name", "required", "type", "value", "onChange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -21,6 +22,7 @@ var InputOption = function InputOption(_ref) {
     indeterminate = _ref.indeterminate,
     label = _ref.label,
     name = _ref.name,
+    required = _ref.required,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? _InputOption.CHECKBOX : _ref$type,
     _ref$value = _ref.value,
@@ -44,10 +46,13 @@ var InputOption = function InputOption(_ref) {
   }, type === _InputOption.CHECKBOX && (checked || indeterminate) ? /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: checked ? _primitives.ICON.CHECK : _primitives.ICON.REMOVE,
     className: _InputOptionModule.default.icon
-  }) : undefined), label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+  }) : undefined), label && /*#__PURE__*/_react.default.createElement(_partials.Label, {
     action: true,
-    className: (0, _helpers.styles)(_InputOptionModule.default.label, disabled && _InputOptionModule.default.disabled)
-  }, label));
+    disabled: disabled,
+    label: label,
+    required: required,
+    className: _InputOptionModule.default.label
+  }));
 };
 exports.InputOption = InputOption;
 InputOption.displayName = 'Component:InputOption';
@@ -57,6 +62,7 @@ InputOption.propTypes = {
   indeterminate: _propTypes.default.bool,
   label: _propTypes.default.string,
   name: _propTypes.default.string.isRequired,
+  required: _propTypes.default.bool,
   type: _propTypes.default.oneOf([_InputOption.CHECKBOX, _InputOption.RADIO, _InputOption.SWITCH]),
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   onChange: _propTypes.default.func

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

@@ -1 +1 @@
-{"version":3,"file":"InputOption.js","names":["InputOption","checked","disabled","indeterminate","label","name","type","CHECKBOX","value","onChange","others","Primitive","Checkbox","RADIO","Radio","Switch","handleChange","event","SWITCH","includes","styles","style","inputOption","className","ICON","CHECK","REMOVE","icon","undefined","displayName","propTypes","PropTypes","bool","string","isRequired","oneOf","oneOfType","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  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 {...others} onPress={handleChange} className={styles(style.inputOption, others.className)}>\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  type: PropTypes.oneOf([CHECKBOX, RADIO, SWITCH]),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onChange: PropTypes.func,\n};\n\nexport { InputOption };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAA6C;AAAA;AAAA;AAAA;AAAA;AAE7C,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAUX;EAAA,IATJC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACbC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGC,qBAAQ;IAAA,kBACfC,KAAK;IAALA,KAAK,2BAAG,EAAE;IAAA,qBACVC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IAChBC,MAAM;EAET,IAAMC,SAAS,GAAGL,IAAI,KAAKC,qBAAQ,GAAGK,oBAAQ,GAAGN,IAAI,KAAKO,kBAAK,GAAGC,iBAAK,GAAGC,kBAAM;EAEhF,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAK;IAC9BR,QAAQ,CAAC,CAACF,qBAAQ,EAAEW,mBAAM,CAAC,CAACC,QAAQ,CAACb,IAAI,CAAC,GAAG,CAACL,OAAO,GAAGO,KAAK,EAAES,KAAK,CAAC;EACvE,CAAC;EAED,oBACE,6BAAC,qBAAS,eAAKP,MAAM;IAAE,OAAO,EAAEM,YAAa;IAAC,SAAS,EAAE,IAAAI,eAAM,EAACC,0BAAK,CAACC,WAAW,EAAEZ,MAAM,CAACa,SAAS;EAAE,iBACnG,6BAAC,SAAS;IACR,OAAO,EAAEtB,OAAO,IAAKK,IAAI,KAAKC,qBAAQ,IAAIJ,aAAe;IACzD,QAAQ,EAAED,QAAS;IACnB,IAAI,EAAEG,IAAK;IACX,IAAI,EAAEC,IAAK;IACX,KAAK,EAAEE;EAAM,GAEZF,IAAI,KAAKC,qBAAQ,KAAKN,OAAO,IAAIE,aAAa,CAAC,gBAC9C,6BAAC,gBAAI;IAAC,KAAK,EAAEF,OAAO,GAAGuB,gBAAI,CAACC,KAAK,GAAGD,gBAAI,CAACE,MAAO;IAAC,SAAS,EAAEL,0BAAK,CAACM;EAAK,EAAG,GACxEC,SAAS,CACH,EACXxB,KAAK,iBACJ,6BAAC,gBAAI;IAAC,MAAM;IAAC,SAAS,EAAE,IAAAgB,eAAM,EAACC,0BAAK,CAACjB,KAAK,EAAEF,QAAQ,IAAImB,0BAAK,CAACnB,QAAQ;EAAE,GACrEE,KAAK,CAET,CACS;AAEhB,CAAC;AAAC;AAEFJ,WAAW,CAAC6B,WAAW,GAAG,uBAAuB;AAEjD7B,WAAW,CAAC8B,SAAS,GAAG;EACtB7B,OAAO,EAAE8B,kBAAS,CAACC,IAAI;EACvB9B,QAAQ,EAAE6B,kBAAS,CAACC,IAAI;EACxB7B,aAAa,EAAE4B,kBAAS,CAACC,IAAI;EAC7B5B,KAAK,EAAE2B,kBAAS,CAACE,MAAM;EACvB5B,IAAI,EAAE0B,kBAAS,CAACE,MAAM,CAACC,UAAU;EACjC5B,IAAI,EAAEyB,kBAAS,CAACI,KAAK,CAAC,CAAC5B,qBAAQ,EAAEM,kBAAK,EAAEK,mBAAM,CAAC,CAAC;EAChDV,KAAK,EAAEuB,kBAAS,CAACK,SAAS,CAAC,CAACL,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACC,IAAI,CAAC,CAAC;EAC9DvB,QAAQ,EAAEsB,kBAAS,CAACM;AACtB,CAAC"}
+{"version":3,"file":"InputOption.js","names":["InputOption","checked","disabled","indeterminate","label","name","required","type","CHECKBOX","value","onChange","others","Primitive","Checkbox","RADIO","Radio","Switch","handleChange","event","SWITCH","includes","styles","style","inputOption","className","ICON","CHECK","REMOVE","icon","undefined","displayName","propTypes","PropTypes","bool","string","isRequired","oneOf","oneOfType","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 } from '../../primitives';\nimport { Label } from '../InputText/partials';\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  required,\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 {...others} onPress={handleChange} className={styles(style.inputOption, others.className)}>\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 && <Label action {...{ disabled, label, required }} className={style.label} />}\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  required: PropTypes.bool,\n  type: PropTypes.oneOf([CHECKBOX, RADIO, SWITCH]),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onChange: PropTypes.func,\n};\n\nexport { InputOption };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAA6C;AAAA;AAAA;AAAA;AAAA;AAE7C,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAWX;EAAA,IAVJC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACbC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAGC,qBAAQ;IAAA,kBACfC,KAAK;IAALA,KAAK,2BAAG,EAAE;IAAA,qBACVC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IAChBC,MAAM;EAET,IAAMC,SAAS,GAAGL,IAAI,KAAKC,qBAAQ,GAAGK,oBAAQ,GAAGN,IAAI,KAAKO,kBAAK,GAAGC,iBAAK,GAAGC,kBAAM;EAEhF,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAK;IAC9BR,QAAQ,CAAC,CAACF,qBAAQ,EAAEW,mBAAM,CAAC,CAACC,QAAQ,CAACb,IAAI,CAAC,GAAG,CAACN,OAAO,GAAGQ,KAAK,EAAES,KAAK,CAAC;EACvE,CAAC;EAED,oBACE,6BAAC,qBAAS,eAAKP,MAAM;IAAE,OAAO,EAAEM,YAAa;IAAC,SAAS,EAAE,IAAAI,eAAM,EAACC,0BAAK,CAACC,WAAW,EAAEZ,MAAM,CAACa,SAAS;EAAE,iBACnG,6BAAC,SAAS;IACR,OAAO,EAAEvB,OAAO,IAAKM,IAAI,KAAKC,qBAAQ,IAAIL,aAAe;IACzD,QAAQ,EAAED,QAAS;IACnB,IAAI,EAAEG,IAAK;IACX,IAAI,EAAEE,IAAK;IACX,KAAK,EAAEE;EAAM,GAEZF,IAAI,KAAKC,qBAAQ,KAAKP,OAAO,IAAIE,aAAa,CAAC,gBAC9C,6BAAC,gBAAI;IAAC,KAAK,EAAEF,OAAO,GAAGwB,gBAAI,CAACC,KAAK,GAAGD,gBAAI,CAACE,MAAO;IAAC,SAAS,EAAEL,0BAAK,CAACM;EAAK,EAAG,GACxEC,SAAS,CACH,EACXzB,KAAK,iBAAI,6BAAC,eAAK;IAAC,MAAM;IAAOF,QAAQ,EAARA,QAAQ;IAAEE,KAAK,EAALA,KAAK;IAAEE,QAAQ,EAARA,QAAQ;IAAI,SAAS,EAAEgB,0BAAK,CAAClB;EAAM,EAAG,CAC3E;AAEhB,CAAC;AAAC;AAEFJ,WAAW,CAAC8B,WAAW,GAAG,uBAAuB;AAEjD9B,WAAW,CAAC+B,SAAS,GAAG;EACtB9B,OAAO,EAAE+B,kBAAS,CAACC,IAAI;EACvB/B,QAAQ,EAAE8B,kBAAS,CAACC,IAAI;EACxB9B,aAAa,EAAE6B,kBAAS,CAACC,IAAI;EAC7B7B,KAAK,EAAE4B,kBAAS,CAACE,MAAM;EACvB7B,IAAI,EAAE2B,kBAAS,CAACE,MAAM,CAACC,UAAU;EACjC7B,QAAQ,EAAE0B,kBAAS,CAACC,IAAI;EACxB1B,IAAI,EAAEyB,kBAAS,CAACI,KAAK,CAAC,CAAC5B,qBAAQ,EAAEM,kBAAK,EAAEK,mBAAM,CAAC,CAAC;EAChDV,KAAK,EAAEuB,kBAAS,CAACK,SAAS,CAAC,CAACL,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACC,IAAI,CAAC,CAAC;EAC9DvB,QAAQ,EAAEsB,kBAAS,CAACM;AACtB,CAAC"}

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

@@ -2,24 +2,20 @@
   align-items: center;
   display: flex;
   flex-direction: var(--mirai-ui-row-direction);
+  gap: var(--mirai-ui-input-option-label-margin);
   margin-bottom: var(--mirai-ui-input-option-padding-y);
   position: relative;
-  gap: var(--mirai-ui-input-option-label-margin);
 }
 
 .icon {
   color: var(--mirai-ui-base);
   left: 0;
   margin: calc(calc(var(--mirai-ui-checkbox-size) - var(--mirai-ui-input-text-icon)) / 2);
-  position: absolute;
   pointer-events: none;
+  position: absolute;
   top: 0;
 }
 
 .label {
-}
-
-.label.disabled {
-  color: var(--mirai-ui-input-option-disabled);
-  cursor: default;
+  color: var(--mirai-ui-input-text-focus);
 }

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

@@ -50,6 +50,7 @@ Story.args = (_Story$args = {
   indeterminate: false,
   label: 'label',
   name: 'name',
+  required: false,
   type: 'checkbox',
   value: 'value'
 }, _defineProperty(_Story$args, 'data-testid', 'test-story'), _defineProperty(_Story$args, "style", {}), _Story$args);

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

@@ -1 +1 @@
-{"version":3,"file":"InputOption.stories.js","names":["title","Story","props","useState","checked","setChecked","handleChange","next","others","console","log","storyName","args","disabled","indeterminate","label","name","type","value","argTypes","options","CHECKBOX","RADIO","SWITCH","control","defaultValue"],"sources":["../../../src/components/InputOption/InputOption.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { InputOption } from './InputOption';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n  const [checked, setChecked] = useState(true);\n\n  const handleChange = (next, ...others) => {\n    setChecked(next);\n    console.log('<InputOption>::onChange', next, ...others);\n  };\n\n  return <InputOption {...props} checked={checked} onChange={handleChange} />;\n};\n\nStory.storyName = 'InputOption';\n\nStory.args = {\n  disabled: false,\n  indeterminate: false,\n  label: 'label',\n  name: 'name',\n  type: 'checkbox',\n  value: 'value',\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: {},\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;AAAkE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnD;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA8B,IAAAC,eAAQ,EAAC,IAAI,CAAC;IAAA;IAArCC,OAAO;IAAEC,UAAU;EAE1B,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IACxCF,UAAU,CAACE,IAAI,CAAC;IAAC,kCADYC,MAAM;MAANA,MAAM;IAAA;IAEnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,yBAAyB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACzD,CAAC;EAED,oBAAO,6BAAC,wBAAW,eAAKN,KAAK;IAAE,OAAO,EAAEE,OAAQ;IAAC,QAAQ,EAAEE;EAAa,GAAG;AAC7E,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,aAAa;AAE/BV,KAAK,CAACW,IAAI;EACRC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE,KAAK;EACpBC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE,MAAM;EACZC,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE;AAAO,gCAEb,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDjB,KAAK,CAACkB,QAAQ,GAAG;EACfF,IAAI,EAAE;IACJG,OAAO,EAAE,CAACC,sBAAQ,EAAEC,mBAAK,EAAEC,oBAAM,CAAC;IAClCC,OAAO,EAAE;MAAEP,IAAI,EAAE;IAAS,CAAC;IAC3BQ,YAAY,EAAEJ;EAChB;AACF,CAAC"}
+{"version":3,"file":"InputOption.stories.js","names":["title","Story","props","useState","checked","setChecked","handleChange","next","others","console","log","storyName","args","disabled","indeterminate","label","name","required","type","value","argTypes","options","CHECKBOX","RADIO","SWITCH","control","defaultValue"],"sources":["../../../src/components/InputOption/InputOption.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { InputOption } from './InputOption';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n  const [checked, setChecked] = useState(true);\n\n  const handleChange = (next, ...others) => {\n    setChecked(next);\n    console.log('<InputOption>::onChange', next, ...others);\n  };\n\n  return <InputOption {...props} checked={checked} onChange={handleChange} />;\n};\n\nStory.storyName = 'InputOption';\n\nStory.args = {\n  disabled: false,\n  indeterminate: false,\n  label: 'label',\n  name: 'name',\n  required: false,\n  type: 'checkbox',\n  value: 'value',\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: {},\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;AAAkE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnD;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA8B,IAAAC,eAAQ,EAAC,IAAI,CAAC;IAAA;IAArCC,OAAO;IAAEC,UAAU;EAE1B,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IACxCF,UAAU,CAACE,IAAI,CAAC;IAAC,kCADYC,MAAM;MAANA,MAAM;IAAA;IAEnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,yBAAyB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACzD,CAAC;EAED,oBAAO,6BAAC,wBAAW,eAAKN,KAAK;IAAE,OAAO,EAAEE,OAAQ;IAAC,QAAQ,EAAEE;EAAa,GAAG;AAC7E,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,aAAa;AAE/BV,KAAK,CAACW,IAAI;EACRC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE,KAAK;EACpBC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE,MAAM;EACZC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE;AAAO,gCAEb,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDlB,KAAK,CAACmB,QAAQ,GAAG;EACfF,IAAI,EAAE;IACJG,OAAO,EAAE,CAACC,sBAAQ,EAAEC,mBAAK,EAAEC,oBAAM,CAAC;IAClCC,OAAO,EAAE;MAAEP,IAAI,EAAE;IAAS,CAAC;IAC3BQ,YAAY,EAAEJ;EAChB;AACF,CAAC"}

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

@@ -221,7 +221,7 @@ exports[`primitive:<InputOption> prop:label 1`] = `
       />
     </div>
     <span
-      class="text action label"
+      class="text action text label"
     >
       label
     </span>
@@ -229,7 +229,7 @@ exports[`primitive:<InputOption> prop:label 1`] = `
 </DocumentFragment>
 `;
 
-exports[`primitive:<InputOption> prop:reverse + label 1`] = `
+exports[`primitive:<InputOption> prop:required 1`] = `
 <DocumentFragment>
   <div
     class="pressable inputOption"
@@ -245,9 +245,14 @@ exports[`primitive:<InputOption> prop:reverse + label 1`] = `
       />
     </div>
     <span
-      class="text action label"
+      class="text action text label"
     >
       label
+      <span
+        class="required"
+      >
+         *
+      </span>
     </span>
   </div>
 </DocumentFragment>
@@ -271,7 +276,7 @@ exports[`primitive:<InputOption> prop:type 1`] = `
       />
     </div>
     <span
-      class="text action label"
+      class="text action text label"
     >
       label
     </span>

package/build/components/InputPhone/InputPhone.js

@@ -114,7 +114,7 @@ var InputPhone = function InputPhone(_ref) {
     style: others.style
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true,
-    className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, disabled && _InputTextModule.default.disabled, (focus || prefixFocus) && !error && _InputTextModule.default.focus, error && _InputTextModule.default.error)
+    className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error, (focus || prefixFocus) && !error && _InputTextModule.default.focus)
   }, hasPrefixes && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, {

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

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

package/build/components/InputPhone/InputPhone.module.css

@@ -8,12 +8,12 @@
 }
 
 .prefix {
-  min-width: calc(var(--mirai-ui-space-XXL) + var(--mirai-ui-space-L));
+  width: calc(var(--mirai-ui-space-XXL) + var(--mirai-ui-space-XS) + var(--mirai-ui-input-text-padding-x));
 }
 
 .separator {
   border-right: var(--mirai-ui-input-text-border);
   margin-left: calc(var(--mirai-ui-input-text-padding-x) / 2);
   margin-right: calc(var(--mirai-ui-input-text-padding-x) / 2);
-  padding: var(--mirai-ui-space-M) 0 var(--mirai-ui-space-M) 0;
+  padding: var(--mirai-ui-space-M) 0;
 }

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

@@ -85,10 +85,6 @@
   top: var(--mirai-ui-space-XS);
 }
 
-.label .required {
-  color: var(--mirai-ui-error);
-}
-
 .text {
   color: var(--mirai-ui-input-disabled);
 }
@@ -102,6 +98,10 @@
   color: var(--mirai-ui-input-text-focus);
 }
 
+.text .required {
+  color: var(--mirai-ui-error);
+}
+
 .icon.error,
 .text.error {
   color: var(--mirai-ui-error);

package/build/components/InputText/partials/InputText.Label.js

@@ -11,6 +11,7 @@ var _primitives = require("../../../primitives");
 var _InputTextModule = _interopRequireDefault(require("../InputText.module.css"));
 var _excluded = ["disabled", "error", "focus", "label", "required", "value"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Label = function Label(_ref) {
@@ -22,9 +23,9 @@ var Label = function Label(_ref) {
     required = _ref$required === void 0 ? false : _ref$required,
     value = _ref.value,
     others = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Text, _extends({}, others, {
     className: (0, _helpers.styles)(_InputTextModule.default.text, others.className || _InputTextModule.default.label, disabled && _InputTextModule.default.disabled, focus && _InputTextModule.default.focus, error && _InputTextModule.default.error, (focus || error || value !== undefined && (value === null || value === void 0 ? void 0 : value.length) > 0) && _InputTextModule.default.withValue)
-  }, label, required && !disabled && /*#__PURE__*/_react.default.createElement("span", {
+  }), label, required && !disabled && /*#__PURE__*/_react.default.createElement("span", {
     className: _InputTextModule.default.required
   }, " *"));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"InputText.Label.js","names":["Label","disabled","error","focus","label","required","value","others","styles","style","text","className","undefined","length","withValue","displayName","propTypes","PropTypes","bool","string"],"sources":["../../../../src/components/InputText/partials/InputText.Label.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../../helpers';\nimport { Text } from '../../../primitives';\nimport style from '../InputText.module.css';\n\nconst Label = ({ disabled, error, focus, label, required = false, value, ...others }) => (\n  <Text\n    className={styles(\n      style.text,\n      others.className || style.label,\n      disabled && style.disabled,\n      focus && style.focus,\n      error && style.error,\n      (focus || error || (value !== undefined && value?.length > 0)) && style.withValue,\n    )}\n  >\n    {label}\n    {required && !disabled && <span className={style.required}> *</span>}\n  </Text>\n);\n\nLabel.displayName = 'Component:InputText.Label';\n\nLabel.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  focus: PropTypes.bool,\n  label: PropTypes.string,\n  required: PropTypes.bool,\n  value: PropTypes.string,\n};\n\nexport { Label };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA4C;AAAA;AAAA;AAAA;AAE5C,IAAMA,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,QAAQ,QAARA,QAAQ;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAKC,MAAM;EAAA,oBAChF,6BAAC,gBAAI;IACH,SAAS,EAAE,IAAAC,eAAM,EACfC,wBAAK,CAACC,IAAI,EACVH,MAAM,CAACI,SAAS,IAAIF,wBAAK,CAACL,KAAK,EAC/BH,QAAQ,IAAIQ,wBAAK,CAACR,QAAQ,EAC1BE,KAAK,IAAIM,wBAAK,CAACN,KAAK,EACpBD,KAAK,IAAIO,wBAAK,CAACP,KAAK,EACpB,CAACC,KAAK,IAAID,KAAK,IAAKI,KAAK,KAAKM,SAAS,IAAI,CAAAN,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEO,MAAM,IAAG,CAAE,KAAKJ,wBAAK,CAACK,SAAS;EACjF,GAEDV,KAAK,EACLC,QAAQ,IAAI,CAACJ,QAAQ,iBAAI;IAAM,SAAS,EAAEQ,wBAAK,CAACJ;EAAS,QAAU,CAC/D;AAAA,CACR;AAAC;AAEFL,KAAK,CAACe,WAAW,GAAG,2BAA2B;AAE/Cf,KAAK,CAACgB,SAAS,GAAG;EAChBf,QAAQ,EAAEgB,kBAAS,CAACC,IAAI;EACxBhB,KAAK,EAAEe,kBAAS,CAACC,IAAI;EACrBf,KAAK,EAAEc,kBAAS,CAACC,IAAI;EACrBd,KAAK,EAAEa,kBAAS,CAACE,MAAM;EACvBd,QAAQ,EAAEY,kBAAS,CAACC,IAAI;EACxBZ,KAAK,EAAEW,kBAAS,CAACE;AACnB,CAAC"}
+{"version":3,"file":"InputText.Label.js","names":["Label","disabled","error","focus","label","required","value","others","styles","style","text","className","undefined","length","withValue","displayName","propTypes","PropTypes","bool","string"],"sources":["../../../../src/components/InputText/partials/InputText.Label.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../../helpers';\nimport { Text } from '../../../primitives';\nimport style from '../InputText.module.css';\n\nconst Label = ({ disabled, error, focus, label, required = false, value, ...others }) => (\n  <Text\n    {...others}\n    className={styles(\n      style.text,\n      others.className || style.label,\n      disabled && style.disabled,\n      focus && style.focus,\n      error && style.error,\n      (focus || error || (value !== undefined && value?.length > 0)) && style.withValue,\n    )}\n  >\n    {label}\n    {required && !disabled && <span className={style.required}> *</span>}\n  </Text>\n);\n\nLabel.displayName = 'Component:InputText.Label';\n\nLabel.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  focus: PropTypes.bool,\n  label: PropTypes.string,\n  required: PropTypes.bool,\n  value: PropTypes.string,\n};\n\nexport { Label };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA4C;AAAA;AAAA;AAAA;AAAA;AAE5C,IAAMA,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,QAAQ,QAARA,QAAQ;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAKC,MAAM;EAAA,oBAChF,6BAAC,gBAAI,eACCA,MAAM;IACV,SAAS,EAAE,IAAAC,eAAM,EACfC,wBAAK,CAACC,IAAI,EACVH,MAAM,CAACI,SAAS,IAAIF,wBAAK,CAACL,KAAK,EAC/BH,QAAQ,IAAIQ,wBAAK,CAACR,QAAQ,EAC1BE,KAAK,IAAIM,wBAAK,CAACN,KAAK,EACpBD,KAAK,IAAIO,wBAAK,CAACP,KAAK,EACpB,CAACC,KAAK,IAAID,KAAK,IAAKI,KAAK,KAAKM,SAAS,IAAI,CAAAN,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEO,MAAM,IAAG,CAAE,KAAKJ,wBAAK,CAACK,SAAS;EACjF,IAEDV,KAAK,EACLC,QAAQ,IAAI,CAACJ,QAAQ,iBAAI;IAAM,SAAS,EAAEQ,wBAAK,CAACJ;EAAS,QAAU,CAC/D;AAAA,CACR;AAAC;AAEFL,KAAK,CAACe,WAAW,GAAG,2BAA2B;AAE/Cf,KAAK,CAACgB,SAAS,GAAG;EAChBf,QAAQ,EAAEgB,kBAAS,CAACC,IAAI;EACxBhB,KAAK,EAAEe,kBAAS,CAACC,IAAI;EACrBf,KAAK,EAAEc,kBAAS,CAACC,IAAI;EACrBd,KAAK,EAAEa,kBAAS,CAACE,MAAM;EACvBd,QAAQ,EAAEY,kBAAS,CAACC,IAAI;EACxBZ,KAAK,EAAEW,kBAAS,CAACE;AACnB,CAAC"}

package/package.json

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