@mirai/ui 1.0.134 → 1.0.136

package/README.md

@@ -493,6 +493,7 @@ Input number component controlling the value with 2 buttons. Receives the follow
 - `min:number` minimum input value
 - `name:string` input name attribute (required)
 - `rounded:bool` if you want use the `rounded` property of `<Button>`
+- `showRequired:bool` displays `*` next to the label
 - `step:number` to be added/subtracted from value on each button click
 - `value:number` input value
 - `onChange:function` executed when input value changes
@@ -522,6 +523,8 @@ This component is used to display a radio button or checkbox base on a mandatory
 - `indeterminate:boolean` applying 'indeterminate' attribute (only for type checkbox)
 - `label:string` input label
 - `name:string` input name
+- `showRequired:bool` displays `*` next to the label
+- `small:bool` modifying font-size
 - `type:string` type of input (radio or checkbox)
 - `value:number` input value
 - `onChange:function` executed when input value changes
@@ -584,10 +587,14 @@ Text input component receiving the following props:
 - `hint:string` brief message
 - `icon:string` if you want use an `<Icon>` within the component
 - `label:string` input label
-- `multiline:boolean` : if true returning textarea
-- `name:string` : input name (required)
-- `type:string` : input type attribute
-- `onChange:function` : executed when input value changes
+- `multiline:boolean` if true returning textarea
+- `name:string` input name (required)
+- `showRequired:bool` displays `*` next to the label
+- `showState:bool` displays state of input (error, warning or success)
+- `success:bool` sets success state
+- `type:string` input type attribute
+- `warning:bool` sets warning state
+- `onChange:function` executed when input value changes
 - `onEnter:function` executed when user clicks on input
 - `onLeave:function` executed on click outside the input
 
@@ -721,6 +728,33 @@ const MyComponent = (props) => {
 --mirai-ui-modal-shadow: var(--mirai-ui-shadow);
 ```
 
+### Progress
+
+A progress component receiving the following props:
+
+- `indeterminate:bool` express an unspecified amount of wait time.
+- `value:number` value of percentage
+- `visible:boolean` if true progress is shown
+
+```jsx
+import { Progress } from '@mirai/ui';
+
+const MyComponent = (props) => {
+  const [visible, setVisible] = useState(false);
+
+  return <Progress indeterminate visible={visible} />;
+};
+```
+
+**Theming variables**
+
+```css
+--mirai-ui-progress-background: var(--mirai-ui-content-background);
+--mirai-ui-progress-color: var(--mirai-ui-accent);
+--mirai-ui-progress-height: var(--mirai-ui-space-XS);
+--mirai-ui-progress-motion: calc(var(--mirai-ui-motion-expand) * 3);
+```
+
 ### Table
 
 This component helps you to create a pure html table receiving the following props:

package/build/components/InputDate/InputDate.js

@@ -68,22 +68,12 @@ var InputDate = function InputDate(_ref) {
 exports.InputDate = InputDate;
 InputDate.displayName = 'Component:InputDate';
 InputDate.propTypes = {
-  disabled: _propTypes.default.bool,
-  error: _propTypes.default.bool,
   format: _propTypes.default.string,
-  hint: _propTypes.default.string,
-  label: _propTypes.default.string,
   max: _propTypes.default.string,
   min: _propTypes.default.string,
-  name: _propTypes.default.string.isRequired,
   placeholder: _propTypes.default.bool,
-  required: _propTypes.default.bool,
-  success: _propTypes.default.bool,
   value: _propTypes.default.string,
-  warning: _propTypes.default.bool,
   onChange: _propTypes.default.func,
-  onError: _propTypes.default.func,
-  onEnter: _propTypes.default.func,
-  onLeave: _propTypes.default.func
+  onError: _propTypes.default.func
 };
 //# sourceMappingURL=InputDate.js.map

package/build/components/InputDate/InputDate.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputDate.js","names":["InputDate","format","DEFAULT_DATE_FORMAT","max","min","placeholder","value","propValue","onChange","onError","others","useState","setValue","useEffect","handleChange","nextValue","event","next","formatValue","errors","getInputDateErrors","required","Object","keys","length","displayName","propTypes","disabled","PropTypes","bool","error","string","hint","label","name","isRequired","success","warning","func","onEnter","onLeave"],"sources":["../../../src/components/InputDate/InputDate.jsx"],"sourcesContent":["import { DEFAULT_DATE_FORMAT } from '@mirai/locale';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { getInputDateErrors } from '../../helpers';\nimport { InputText } from '../InputText';\nimport { formatValue } from './helpers';\n\nconst InputDate = ({\n  format = DEFAULT_DATE_FORMAT,\n  max,\n  min,\n  placeholder,\n  value: propValue = '',\n  onChange = () => {},\n  onError = () => {},\n  ...others\n}) => {\n  const [value, setValue] = useState(propValue);\n\n  useEffect(() => {\n    setValue(propValue);\n  }, [propValue]);\n\n  const handleChange = (nextValue, event) => {\n    const next = formatValue(nextValue, format, value);\n    if (next === value) return;\n\n    setValue(next);\n    onChange(next, event);\n\n    const errors = getInputDateErrors({ format, max, min, value: next, required: others.required });\n    if (Object.keys(errors || {}).length > 0) onError(errors);\n  };\n\n  return (\n    <InputText\n      {...others}\n      maxLength={format.length}\n      placeholder={placeholder || format}\n      value={value}\n      onChange={handleChange}\n    />\n  );\n};\n\nInputDate.displayName = 'Component:InputDate';\n\nInputDate.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  format: PropTypes.string,\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  max: PropTypes.string,\n  min: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  placeholder: PropTypes.bool,\n  required: PropTypes.bool,\n  success: PropTypes.bool,\n  value: PropTypes.string,\n  warning: PropTypes.bool,\n  onChange: PropTypes.func,\n  onError: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputDate };\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,SAAS,GAAG,SAAZA,SAAS,OAST;EAAA,uBARJC,MAAM;IAANA,MAAM,4BAAGC,2BAAmB;IAC5BC,GAAG,QAAHA,GAAG;IACHC,GAAG,QAAHA,GAAG;IACHC,WAAW,QAAXA,WAAW;IAAA,kBACXC,KAAK;IAAEC,SAAS,2BAAG,EAAE;IAAA,qBACrBC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IAAA,oBACnBC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IACfC,MAAM;EAET,gBAA0B,IAAAC,eAAQ,EAACJ,SAAS,CAAC;IAAA;IAAtCD,KAAK;IAAEM,QAAQ;EAEtB,IAAAC,gBAAS,EAAC,YAAM;IACdD,QAAQ,CAACL,SAAS,CAAC;EACrB,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,IAAMO,YAAY,GAAG,SAAfA,YAAY,CAAIC,SAAS,EAAEC,KAAK,EAAK;IACzC,IAAMC,IAAI,GAAG,IAAAC,qBAAW,EAACH,SAAS,EAAEd,MAAM,EAAEK,KAAK,CAAC;IAClD,IAAIW,IAAI,KAAKX,KAAK,EAAE;IAEpBM,QAAQ,CAACK,IAAI,CAAC;IACdT,QAAQ,CAACS,IAAI,EAAED,KAAK,CAAC;IAErB,IAAMG,MAAM,GAAG,IAAAC,2BAAkB,EAAC;MAAEnB,MAAM,EAANA,MAAM;MAAEE,GAAG,EAAHA,GAAG;MAAEC,GAAG,EAAHA,GAAG;MAAEE,KAAK,EAAEW,IAAI;MAAEI,QAAQ,EAAEX,MAAM,CAACW;IAAS,CAAC,CAAC;IAC/F,IAAIC,MAAM,CAACC,IAAI,CAACJ,MAAM,IAAI,CAAC,CAAC,CAAC,CAACK,MAAM,GAAG,CAAC,EAAEf,OAAO,CAACU,MAAM,CAAC;EAC3D,CAAC;EAED,oBACE,6BAAC,oBAAS,eACJT,MAAM;IACV,SAAS,EAAET,MAAM,CAACuB,MAAO;IACzB,WAAW,EAAEnB,WAAW,IAAIJ,MAAO;IACnC,KAAK,EAAEK,KAAM;IACb,QAAQ,EAAEQ;EAAa,GACvB;AAEN,CAAC;AAAC;AAEFd,SAAS,CAACyB,WAAW,GAAG,qBAAqB;AAE7CzB,SAAS,CAAC0B,SAAS,GAAG;EACpBC,QAAQ,EAAEC,kBAAS,CAACC,IAAI;EACxBC,KAAK,EAAEF,kBAAS,CAACC,IAAI;EACrB5B,MAAM,EAAE2B,kBAAS,CAACG,MAAM;EACxBC,IAAI,EAAEJ,kBAAS,CAACG,MAAM;EACtBE,KAAK,EAAEL,kBAAS,CAACG,MAAM;EACvB5B,GAAG,EAAEyB,kBAAS,CAACG,MAAM;EACrB3B,GAAG,EAAEwB,kBAAS,CAACG,MAAM;EACrBG,IAAI,EAAEN,kBAAS,CAACG,MAAM,CAACI,UAAU;EACjC9B,WAAW,EAAEuB,kBAAS,CAACC,IAAI;EAC3BR,QAAQ,EAAEO,kBAAS,CAACC,IAAI;EACxBO,OAAO,EAAER,kBAAS,CAACC,IAAI;EACvBvB,KAAK,EAAEsB,kBAAS,CAACG,MAAM;EACvBM,OAAO,EAAET,kBAAS,CAACC,IAAI;EACvBrB,QAAQ,EAAEoB,kBAAS,CAACU,IAAI;EACxB7B,OAAO,EAAEmB,kBAAS,CAACU,IAAI;EACvBC,OAAO,EAAEX,kBAAS,CAACU,IAAI;EACvBE,OAAO,EAAEZ,kBAAS,CAACU;AACrB,CAAC"}
+{"version":3,"file":"InputDate.js","names":["InputDate","format","DEFAULT_DATE_FORMAT","max","min","placeholder","value","propValue","onChange","onError","others","useState","setValue","useEffect","handleChange","nextValue","event","next","formatValue","errors","getInputDateErrors","required","Object","keys","length","displayName","propTypes","PropTypes","string","bool","func"],"sources":["../../../src/components/InputDate/InputDate.jsx"],"sourcesContent":["import { DEFAULT_DATE_FORMAT } from '@mirai/locale';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { getInputDateErrors } from '../../helpers';\nimport { InputText } from '../InputText';\nimport { formatValue } from './helpers';\n\nconst InputDate = ({\n  format = DEFAULT_DATE_FORMAT,\n  max,\n  min,\n  placeholder,\n  value: propValue = '',\n  onChange = () => {},\n  onError = () => {},\n  ...others\n}) => {\n  const [value, setValue] = useState(propValue);\n\n  useEffect(() => {\n    setValue(propValue);\n  }, [propValue]);\n\n  const handleChange = (nextValue, event) => {\n    const next = formatValue(nextValue, format, value);\n    if (next === value) return;\n\n    setValue(next);\n    onChange(next, event);\n\n    const errors = getInputDateErrors({ format, max, min, value: next, required: others.required });\n    if (Object.keys(errors || {}).length > 0) onError(errors);\n  };\n\n  return (\n    <InputText\n      {...others}\n      maxLength={format.length}\n      placeholder={placeholder || format}\n      value={value}\n      onChange={handleChange}\n    />\n  );\n};\n\nInputDate.displayName = 'Component:InputDate';\n\nInputDate.propTypes = {\n  format: PropTypes.string,\n  max: PropTypes.string,\n  min: PropTypes.string,\n  placeholder: PropTypes.bool,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  onError: PropTypes.func,\n};\n\nexport { InputDate };\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,SAAS,GAAG,SAAZA,SAAS,OAST;EAAA,uBARJC,MAAM;IAANA,MAAM,4BAAGC,2BAAmB;IAC5BC,GAAG,QAAHA,GAAG;IACHC,GAAG,QAAHA,GAAG;IACHC,WAAW,QAAXA,WAAW;IAAA,kBACXC,KAAK;IAAEC,SAAS,2BAAG,EAAE;IAAA,qBACrBC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IAAA,oBACnBC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IACfC,MAAM;EAET,gBAA0B,IAAAC,eAAQ,EAACJ,SAAS,CAAC;IAAA;IAAtCD,KAAK;IAAEM,QAAQ;EAEtB,IAAAC,gBAAS,EAAC,YAAM;IACdD,QAAQ,CAACL,SAAS,CAAC;EACrB,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,IAAMO,YAAY,GAAG,SAAfA,YAAY,CAAIC,SAAS,EAAEC,KAAK,EAAK;IACzC,IAAMC,IAAI,GAAG,IAAAC,qBAAW,EAACH,SAAS,EAAEd,MAAM,EAAEK,KAAK,CAAC;IAClD,IAAIW,IAAI,KAAKX,KAAK,EAAE;IAEpBM,QAAQ,CAACK,IAAI,CAAC;IACdT,QAAQ,CAACS,IAAI,EAAED,KAAK,CAAC;IAErB,IAAMG,MAAM,GAAG,IAAAC,2BAAkB,EAAC;MAAEnB,MAAM,EAANA,MAAM;MAAEE,GAAG,EAAHA,GAAG;MAAEC,GAAG,EAAHA,GAAG;MAAEE,KAAK,EAAEW,IAAI;MAAEI,QAAQ,EAAEX,MAAM,CAACW;IAAS,CAAC,CAAC;IAC/F,IAAIC,MAAM,CAACC,IAAI,CAACJ,MAAM,IAAI,CAAC,CAAC,CAAC,CAACK,MAAM,GAAG,CAAC,EAAEf,OAAO,CAACU,MAAM,CAAC;EAC3D,CAAC;EAED,oBACE,6BAAC,oBAAS,eACJT,MAAM;IACV,SAAS,EAAET,MAAM,CAACuB,MAAO;IACzB,WAAW,EAAEnB,WAAW,IAAIJ,MAAO;IACnC,KAAK,EAAEK,KAAM;IACb,QAAQ,EAAEQ;EAAa,GACvB;AAEN,CAAC;AAAC;AAEFd,SAAS,CAACyB,WAAW,GAAG,qBAAqB;AAE7CzB,SAAS,CAAC0B,SAAS,GAAG;EACpBzB,MAAM,EAAE0B,kBAAS,CAACC,MAAM;EACxBzB,GAAG,EAAEwB,kBAAS,CAACC,MAAM;EACrBxB,GAAG,EAAEuB,kBAAS,CAACC,MAAM;EACrBvB,WAAW,EAAEsB,kBAAS,CAACE,IAAI;EAC3BvB,KAAK,EAAEqB,kBAAS,CAACC,MAAM;EACvBpB,QAAQ,EAAEmB,kBAAS,CAACG,IAAI;EACxBrB,OAAO,EAAEkB,kBAAS,CAACG;AACrB,CAAC"}

package/build/components/InputDate/InputDate.stories.js

@@ -85,6 +85,7 @@ Story.args = (_Story$args = {
   name: 'name',
   placeholder: undefined,
   required: false,
+  showRequired: false,
   success: false,
   value: '06/05/2020',
   warning: false

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

@@ -1 +1 @@
-{"version":3,"file":"InputDate.stories.js","names":["title","Story","propValue","value","props","useState","setValue","handleChange","next","others","console","log","handleEnter","handleError","handleLeave","storyName","args","disabled","error","format","DEFAULT_DATE_FORMAT","hint","label","max","min","name","placeholder","undefined","required","success","warning","argTypes"],"sources":["../../../src/components/InputDate/InputDate.stories.jsx"],"sourcesContent":["import { DEFAULT_DATE_FORMAT } from '@mirai/locale';\nimport React, { useState } from 'react';\n\nimport { InputDate } from './InputDate';\n\nexport default { title: 'Components' };\n\nexport const Story = ({ value: propValue, ...props }) => {\n  const [value, setValue] = useState(propValue);\n\n  const handleChange = (next, ...others) => {\n    setValue(next);\n    console.log('<InputDate>::onChange', next, ...others);\n  };\n\n  const handleEnter = (...others) => console.log('<InputDate>::onEnter', ...others);\n\n  const handleError = (...others) => console.log('<InputDate>::onError', ...others);\n\n  const handleLeave = (...others) => console.log('<InputDate>::onLeave', ...others);\n\n  return (\n    <InputDate\n      {...props}\n      value={value}\n      onChange={handleChange}\n      onEnter={handleEnter}\n      onError={handleError}\n      onLeave={handleLeave}\n    />\n  );\n};\n\nStory.storyName = 'InputDate';\n\nStory.args = {\n  disabled: false,\n  error: false,\n  format: DEFAULT_DATE_FORMAT,\n  hint: 'hint',\n  label: 'label',\n  max: '10/04/2080',\n  min: '10/04/1980',\n  name: 'name',\n  placeholder: undefined,\n  required: false,\n  success: false,\n  value: '06/05/2020',\n  warning: false,\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEzB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAAuC;EAAA,IAA1BC,SAAS,QAAhBC,KAAK;IAAgBC,KAAK;EAChD,gBAA0B,IAAAC,eAAQ,EAACH,SAAS,CAAC;IAAA;IAAtCC,KAAK;IAAEG,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,uBAAuB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACvD,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOH,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,sBAAsB,SAAKF,MAAM,EAAC;EAAA;EAEjF,IAAMI,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOJ,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,sBAAsB,SAAKF,MAAM,EAAC;EAAA;EAEjF,IAAMK,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOL,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,sBAAsB,SAAKF,MAAM,EAAC;EAAA;EAEjF,oBACE,6BAAC,oBAAS,eACJL,KAAK;IACT,KAAK,EAAED,KAAM;IACb,QAAQ,EAAEI,YAAa;IACvB,OAAO,EAAEK,WAAY;IACrB,OAAO,EAAEC,WAAY;IACrB,OAAO,EAAEC;EAAY,GACrB;AAEN,CAAC;AAAC;AAEFb,KAAK,CAACc,SAAS,GAAG,WAAW;AAE7Bd,KAAK,CAACe,IAAI;EACRC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,MAAM,EAAEC,2BAAmB;EAC3BC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE,OAAO;EACdC,GAAG,EAAE,YAAY;EACjBC,GAAG,EAAE,YAAY;EACjBC,IAAI,EAAE,MAAM;EACZC,WAAW,EAAEC,SAAS;EACtBC,QAAQ,EAAE,KAAK;EACfC,OAAO,EAAE,KAAK;EACd1B,KAAK,EAAE,YAAY;EACnB2B,OAAO,EAAE;AAAK,gCAEb,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAED7B,KAAK,CAAC8B,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"InputDate.stories.js","names":["title","Story","propValue","value","props","useState","setValue","handleChange","next","others","console","log","handleEnter","handleError","handleLeave","storyName","args","disabled","error","format","DEFAULT_DATE_FORMAT","hint","label","max","min","name","placeholder","undefined","required","showRequired","success","warning","argTypes"],"sources":["../../../src/components/InputDate/InputDate.stories.jsx"],"sourcesContent":["import { DEFAULT_DATE_FORMAT } from '@mirai/locale';\nimport React, { useState } from 'react';\n\nimport { InputDate } from './InputDate';\n\nexport default { title: 'Components' };\n\nexport const Story = ({ value: propValue, ...props }) => {\n  const [value, setValue] = useState(propValue);\n\n  const handleChange = (next, ...others) => {\n    setValue(next);\n    console.log('<InputDate>::onChange', next, ...others);\n  };\n\n  const handleEnter = (...others) => console.log('<InputDate>::onEnter', ...others);\n\n  const handleError = (...others) => console.log('<InputDate>::onError', ...others);\n\n  const handleLeave = (...others) => console.log('<InputDate>::onLeave', ...others);\n\n  return (\n    <InputDate\n      {...props}\n      value={value}\n      onChange={handleChange}\n      onEnter={handleEnter}\n      onError={handleError}\n      onLeave={handleLeave}\n    />\n  );\n};\n\nStory.storyName = 'InputDate';\n\nStory.args = {\n  disabled: false,\n  error: false,\n  format: DEFAULT_DATE_FORMAT,\n  hint: 'hint',\n  label: 'label',\n  max: '10/04/2080',\n  min: '10/04/1980',\n  name: 'name',\n  placeholder: undefined,\n  required: false,\n  showRequired: false,\n  success: false,\n  value: '06/05/2020',\n  warning: false,\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEzB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAAuC;EAAA,IAA1BC,SAAS,QAAhBC,KAAK;IAAgBC,KAAK;EAChD,gBAA0B,IAAAC,eAAQ,EAACH,SAAS,CAAC;IAAA;IAAtCC,KAAK;IAAEG,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,uBAAuB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACvD,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOH,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,sBAAsB,SAAKF,MAAM,EAAC;EAAA;EAEjF,IAAMI,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOJ,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,sBAAsB,SAAKF,MAAM,EAAC;EAAA;EAEjF,IAAMK,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOL,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,sBAAsB,SAAKF,MAAM,EAAC;EAAA;EAEjF,oBACE,6BAAC,oBAAS,eACJL,KAAK;IACT,KAAK,EAAED,KAAM;IACb,QAAQ,EAAEI,YAAa;IACvB,OAAO,EAAEK,WAAY;IACrB,OAAO,EAAEC,WAAY;IACrB,OAAO,EAAEC;EAAY,GACrB;AAEN,CAAC;AAAC;AAEFb,KAAK,CAACc,SAAS,GAAG,WAAW;AAE7Bd,KAAK,CAACe,IAAI;EACRC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,MAAM,EAAEC,2BAAmB;EAC3BC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE,OAAO;EACdC,GAAG,EAAE,YAAY;EACjBC,GAAG,EAAE,YAAY;EACjBC,IAAI,EAAE,MAAM;EACZC,WAAW,EAAEC,SAAS;EACtBC,QAAQ,EAAE,KAAK;EACfC,YAAY,EAAE,KAAK;EACnBC,OAAO,EAAE,KAAK;EACd3B,KAAK,EAAE,YAAY;EACnB4B,OAAO,EAAE;AAAK,gCAEb,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAED9B,KAAK,CAAC+B,QAAQ,GAAG,CAAC,CAAC"}

package/build/components/InputNumber/InputNumber.js

@@ -11,7 +11,7 @@ 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", "required", "rounded", "step", "value", "onChange"];
+var _excluded = ["disabled", "hint", "label", "max", "min", "name", "required", "rounded", "showRequired", "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; }
@@ -27,6 +27,8 @@ var InputNumber = function InputNumber(_ref) {
     required = _ref.required,
     _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? true : _ref$rounded,
+    _ref$showRequired = _ref.showRequired,
+    showRequired = _ref$showRequired === void 0 ? false : _ref$showRequired,
     _ref$step = _ref.step,
     step = _ref$step === void 0 ? 1 : _ref$step,
     _ref$value = _ref.value,
@@ -42,7 +44,7 @@ var InputNumber = function InputNumber(_ref) {
   }, label && /*#__PURE__*/_react.default.createElement(_partials.Label, {
     disabled: disabled,
     label: label,
-    required: required,
+    required: showRequired && required,
     className: _InputNumberModule.default.label
   }), hint && /*#__PURE__*/_react.default.createElement(_partials.Hint, {
     disabled: disabled,
@@ -85,6 +87,7 @@ InputNumber.propTypes = {
   name: _propTypes.default.string.isRequired,
   required: _propTypes.default.bool,
   rounded: _propTypes.default.bool,
+  showRequired: _propTypes.default.bool,
   step: _propTypes.default.number,
   value: _propTypes.default.number,
   onChange: _propTypes.default.func

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","required","rounded","showRequired","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  showRequired = false,\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: showRequired && 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  showRequired: 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.stories.js

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

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","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"}
+{"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","showRequired","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  showRequired: 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,YAAY,EAAE,KAAK;EACnBC,IAAI,EAAE;AAAC,gCAEN,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDrB,KAAK,CAACsB,QAAQ,GAAG,CAAC,CAAC"}

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

@@ -421,6 +421,73 @@ exports[`component:<InputNumber> prop:min 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<InputNumber> prop:required & prop:showRequired (true) 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:required 1`] = `
 <DocumentFragment>
   <div

package/build/components/InputOption/InputOption.js

@@ -1,5 +1,6 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,18 +12,25 @@ 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", "required", "type", "value", "onChange"];
+var _excluded = ["checked", "disabled", "indeterminate", "label", "name", "required", "showRequired", "small", "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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var InputOption = function InputOption(_ref) {
+  var _React$createElement;
   var checked = _ref.checked,
     disabled = _ref.disabled,
     indeterminate = _ref.indeterminate,
     label = _ref.label,
     name = _ref.name,
     required = _ref.required,
+    _ref$showRequired = _ref.showRequired,
+    showRequired = _ref$showRequired === void 0 ? false : _ref$showRequired,
+    small = _ref.small,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? _InputOption.CHECKBOX : _ref$type,
     _ref$value = _ref.value,
@@ -47,13 +55,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(_partials.Label, {
-    action: true,
+  }) : undefined), label && /*#__PURE__*/_react.default.createElement(_partials.Label, (_React$createElement = {
+    action: !small,
+    small: small,
     disabled: disabled,
     label: label,
-    required: required,
-    className: _InputOptionModule.default.label
-  }));
+    required: showRequired && required
+  }, _defineProperty(_React$createElement, "small", small), _defineProperty(_React$createElement, "className", _InputOptionModule.default.label), _React$createElement)));
 };
 exports.InputOption = InputOption;
 InputOption.displayName = 'Component:InputOption';
@@ -64,6 +72,8 @@ InputOption.propTypes = {
   label: _propTypes.default.string,
   name: _propTypes.default.string.isRequired,
   required: _propTypes.default.bool,
+  showRequired: _propTypes.default.bool,
+  small: _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","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\n      {...others}\n      preventDefault={false}\n      onPress={handleChange}\n      className={styles(style.inputOption, others.className)}\n    >\n      <Primitive\n        checked={checked || (type === CHECKBOX && indeterminate)}\n        disabled={disabled}\n        name={name}\n        type={type}\n        value={value}\n      >\n        {type === CHECKBOX && (checked || indeterminate) ? (\n          <Icon value={checked ? ICON.CHECK : ICON.REMOVE} className={style.icon} />\n        ) : undefined}\n      </Primitive>\n      {label && <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,eACJP,MAAM;IACV,cAAc,EAAE,KAAM;IACtB,OAAO,EAAEM,YAAa;IACtB,SAAS,EAAE,IAAAI,eAAM,EAACC,0BAAK,CAACC,WAAW,EAAEZ,MAAM,CAACa,SAAS;EAAE,iBAEvD,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"}
+{"version":3,"file":"InputOption.js","names":["InputOption","checked","disabled","indeterminate","label","name","required","showRequired","small","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  showRequired = false,\n  small,\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      preventDefault={false}\n      onPress={handleChange}\n      className={styles(style.inputOption, others.className)}\n    >\n      <Primitive\n        checked={checked || (type === CHECKBOX && indeterminate)}\n        disabled={disabled}\n        name={name}\n        type={type}\n        value={value}\n      >\n        {type === CHECKBOX && (checked || indeterminate) ? (\n          <Icon value={checked ? ICON.CHECK : ICON.REMOVE} className={style.icon} />\n        ) : undefined}\n      </Primitive>\n      {label && (\n        <Label\n          action={!small}\n          small={small}\n          {...{ disabled, label, required: showRequired && required, small }}\n          className={style.label}\n        />\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  required: PropTypes.bool,\n  showRequired: PropTypes.bool,\n  small: 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":"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"}

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

@@ -51,6 +51,8 @@ Story.args = (_Story$args = {
   label: 'label',
   name: 'name',
   required: false,
+  showRequired: false,
+  small: 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","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"}
+{"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","showRequired","small","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  showRequired: false,\n  small: 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,YAAY,EAAE,KAAK;EACnBC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE;AAAO,gCAEb,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDpB,KAAK,CAACqB,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

@@ -9,7 +9,7 @@ exports[`primitive:<InputOption> inherit:className 1`] = `
       class="checkbox"
     >
       <input
-        class=""
+        class="input"
         name="name"
         type="checkbox"
         value=""
@@ -29,7 +29,7 @@ exports[`primitive:<InputOption> prop:checked && disabled 1`] = `
     >
       <input
         checked=""
-        class="checked"
+        class="checked input"
         disabled=""
         name="name"
         type="checkbox"
@@ -71,7 +71,7 @@ exports[`primitive:<InputOption> prop:checked 1`] = `
     >
       <input
         checked=""
-        class="checked"
+        class="checked input"
         name="name"
         type="checkbox"
         value=""
@@ -111,7 +111,7 @@ exports[`primitive:<InputOption> prop:disabled 1`] = `
       class="checkbox"
     >
       <input
-        class=""
+        class="input"
         disabled=""
         name="name"
         type="checkbox"
@@ -132,7 +132,7 @@ exports[`primitive:<InputOption> prop:indeterminate && disabled 1`] = `
     >
       <input
         checked=""
-        class="checked"
+        class="checked input"
         disabled=""
         name="name"
         type="checkbox"
@@ -174,7 +174,7 @@ exports[`primitive:<InputOption> prop:indeterminate 1`] = `
     >
       <input
         checked=""
-        class="checked"
+        class="checked input"
         name="name"
         type="checkbox"
         value=""
@@ -214,7 +214,7 @@ exports[`primitive:<InputOption> prop:label 1`] = `
       class="checkbox"
     >
       <input
-        class=""
+        class="input"
         name="name"
         type="checkbox"
         value=""
@@ -229,7 +229,7 @@ exports[`primitive:<InputOption> prop:label 1`] = `
 </DocumentFragment>
 `;
 
-exports[`primitive:<InputOption> prop:required 1`] = `
+exports[`primitive:<InputOption> prop:required & prop:showRequired 1`] = `
 <DocumentFragment>
   <div
     class="pressable inputOption"
@@ -238,7 +238,7 @@ exports[`primitive:<InputOption> prop:required 1`] = `
       class="checkbox"
     >
       <input
-        class=""
+        class="input"
         name="name"
         type="checkbox"
         value=""
@@ -258,6 +258,54 @@ exports[`primitive:<InputOption> prop:required 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<InputOption> prop:required 1`] = `
+<DocumentFragment>
+  <div
+    class="pressable inputOption"
+  >
+    <div
+      class="checkbox"
+    >
+      <input
+        class="input"
+        name="name"
+        type="checkbox"
+        value=""
+      />
+    </div>
+    <span
+      class="text action text label"
+    >
+      label
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<InputOption> prop:small 1`] = `
+<DocumentFragment>
+  <div
+    class="pressable inputOption"
+  >
+    <div
+      class="checkbox"
+    >
+      <input
+        class="input"
+        name="name"
+        type="checkbox"
+        value=""
+      />
+    </div>
+    <span
+      class="text small text label"
+    >
+      label
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`primitive:<InputOption> prop:type 1`] = `
 <DocumentFragment>
   <div
@@ -267,6 +315,7 @@ exports[`primitive:<InputOption> prop:type 1`] = `
       class="radio"
     >
       <input
+        class="input"
         name="name"
         type="radio"
         value=""
@@ -293,7 +342,7 @@ exports[`primitive:<InputOption> renders 1`] = `
       class="checkbox"
     >
       <input
-        class=""
+        class="input"
         name="name"
         type="checkbox"
         value=""
@@ -313,7 +362,7 @@ exports[`primitive:<InputOption> testID 1`] = `
       class="checkbox"
     >
       <input
-        class=""
+        class="input"
         name="name"
         type="checkbox"
         value=""

package/build/components/InputPhone/InputPhone.js

@@ -12,7 +12,7 @@ var _primitives = require("../../primitives");
 var _InputTextModule = _interopRequireDefault(require("../InputText/InputText.module.css"));
 var _partials = require("../InputText/partials");
 var _InputPhoneModule = _interopRequireDefault(require("./InputPhone.module.css"));
-var _excluded = ["disabled", "error", "hint", "icon", "label", "labelPrefix", "name", "prefixes", "showState", "success", "value", "warning", "onChange", "onEnter", "onError", "onLeave"];
+var _excluded = ["disabled", "error", "hint", "icon", "label", "labelPrefix", "name", "prefixes", "showRequired", "showState", "success", "value", "warning", "onChange", "onEnter", "onError", "onLeave"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -34,6 +34,8 @@ var InputPhone = function InputPhone(_ref) {
     labelPrefix = _ref.labelPrefix,
     name = _ref.name,
     prefixes = _ref.prefixes,
+    _ref$showRequired = _ref.showRequired,
+    showRequired = _ref$showRequired === void 0 ? false : _ref$showRequired,
     _ref$showState = _ref.showState,
     showState = _ref$showState === void 0 ? true : _ref$showState,
     success = _ref.success,
@@ -124,7 +126,7 @@ var InputPhone = function InputPhone(_ref) {
     error: error,
     focus: prefixFocus,
     label: labelPrefix,
-    required: others.required,
+    required: showRequired && others.required,
     value: prefix
   }), /*#__PURE__*/_react.default.createElement(_primitives.Select, _extends({}, others, {
     disabled: disabled,
@@ -170,7 +172,7 @@ var InputPhone = function InputPhone(_ref) {
     error: error,
     focus: focus,
     label: label,
-    required: others.required,
+    required: showRequired && others.required,
     value: phone
   }), /*#__PURE__*/_react.default.createElement(_primitives.Input, _extends({}, others, {
     disabled: disabled,
@@ -209,6 +211,7 @@ InputPhone.propTypes = {
   labelPrefix: _propTypes.default.string,
   name: _propTypes.default.string.isRequired,
   prefixes: _propTypes.default.arrayOf(_propTypes.default.string),
+  showRequired: _propTypes.default.bool,
   showState: _propTypes.default.bool,
   success: _propTypes.default.bool,
   value: _propTypes.default.string,