@mirai/ui 1.1.0-f → 1.1.1

package/build/primitives/Select/Select.js

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../helpers");
 var _Primitive = require("../Primitive");
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
-var _excluded = ["disabled", "emptyOption", "options", "value", "onChange", "onEnter", "onError", "onLeave"];
+var _excluded = ["disabled", "disabledOptions", "emptyOption", "options", "value", "values", "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 }; }
@@ -24,10 +24,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var EMPTY = '';
 var Select = function Select(_ref) {
   var disabled = _ref.disabled,
+    _ref$disabledOptions = _ref.disabledOptions,
+    disabledOptions = _ref$disabledOptions === void 0 ? [] : _ref$disabledOptions,
     emptyOption = _ref.emptyOption,
     _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
     value = _ref.value,
+    _ref$values = _ref.values,
+    values = _ref$values === void 0 ? [] : _ref$values,
     onChange = _ref.onChange,
     onEnter = _ref.onEnter,
     onError = _ref.onError,
@@ -60,21 +64,24 @@ var Select = function Select(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, emptyOption && /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
     tag: "option",
     value: EMPTY
-  }, emptyOption), options.map(function (option) {
+  }, emptyOption), options.map(function (option, index) {
     return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
       tag: "option",
-      value: option,
-      key: option
+      disabled: disabledOptions[index],
+      key: option,
+      value: values[index] || option
     }, option);
   })));
 };
 exports.Select = Select;
-Select.displayName = 'Primitive:Input';
+Select.displayName = 'Primitive:Select';
 Select.propTypes = {
   disabled: _propTypes.default.bool,
+  disabledOptions: _propTypes.default.arrayOf(_propTypes.default.bool),
   emptyOption: _propTypes.default.string,
   name: _propTypes.default.string.isRequired,
-  options: _propTypes.default.arrayOf(_propTypes.default.string),
+  options: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
+  values: _propTypes.default.arrayOf(_propTypes.default.string),
   value: _propTypes.default.string,
   onChange: _propTypes.default.func,
   onEnter: _propTypes.default.func,

package/build/primitives/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["EMPTY","Select","disabled","emptyOption","options","value","onChange","onEnter","onError","onLeave","others","useEffect","errors","getInputErrors","handleChange","event","React","createElement","Primitive","role","tag","target","onFocus","onBlur","className","styles","style","select","empty","map","option","displayName","propTypes","PropTypes","bool","string","name","isRequired","arrayOf","func"],"sources":["../../../src/primitives/Select/Select.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect } from 'react';\n\nimport { getInputErrors, styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Select.module.css';\n\nconst EMPTY = '';\n\nconst Select = ({ disabled, emptyOption, options = [], value, onChange, onEnter, onError, onLeave, ...others }) => {\n  useEffect(() => {\n    const errors = getInputErrors({ ...others });\n    if (errors && onError) onError(errors);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleChange = (value, event) => {\n    onError && onError(getInputErrors({ ...others, value }));\n    onChange && onChange(value, event);\n  };\n\n  return React.createElement(\n    Primitive,\n    {\n      ...others,\n      disabled,\n      role: others.role || 'select',\n      tag: 'select',\n      value,\n      ...(!disabled\n        ? {\n            onChange: (event) => handleChange(event.target.value, event),\n            onFocus: onEnter,\n            onBlur: onLeave,\n          }\n        : {}),\n      className: styles(style.select, value === EMPTY && style.empty, others.className),\n    },\n    <>\n      {emptyOption && (\n        <Primitive tag=\"option\" value={EMPTY}>\n          {emptyOption}\n        </Primitive>\n      )}\n      {options.map((option) => (\n        <Primitive tag=\"option\" value={option} key={option}>\n          {option}\n        </Primitive>\n      ))}\n    </>,\n  );\n};\n\nSelect.displayName = 'Primitive:Input';\n\nSelect.propTypes = {\n  disabled: PropTypes.bool,\n  emptyOption: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  options: PropTypes.arrayOf(PropTypes.string),\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onError: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { Select };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,KAAK,GAAG,EAAE;AAEhB,IAAMC,MAAM,GAAG,SAATA,MAAM,OAAuG;EAAA,IAAjGC,QAAQ,QAARA,QAAQ;IAAEC,WAAW,QAAXA,WAAW;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,OAAO,QAAPA,OAAO;IAAEC,OAAO,QAAPA,OAAO;IAAEC,OAAO,QAAPA,OAAO;IAAKC,MAAM;EAC1G,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAMC,MAAM,GAAG,IAAAC,uBAAc,oBAAMH,MAAM,EAAG;IAC5C,IAAIE,MAAM,IAAIJ,OAAO,EAAEA,OAAO,CAACI,MAAM,CAAC;IACtC;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,IAAME,YAAY,GAAG,SAAfA,YAAY,CAAIT,KAAK,EAAEU,KAAK,EAAK;IACrCP,OAAO,IAAIA,OAAO,CAAC,IAAAK,uBAAc,kCAAMH,MAAM;MAAEL,KAAK,EAALA;IAAK,GAAG,CAAC;IACxDC,QAAQ,IAAIA,QAAQ,CAACD,KAAK,EAAEU,KAAK,CAAC;EACpC,CAAC;EAED,oBAAOC,cAAK,CAACC,aAAa,CACxBC,oBAAS,gDAEJR,MAAM;IACTR,QAAQ,EAARA,QAAQ;IACRiB,IAAI,EAAET,MAAM,CAACS,IAAI,IAAI,QAAQ;IAC7BC,GAAG,EAAE,QAAQ;IACbf,KAAK,EAALA;EAAK,GACD,CAACH,QAAQ,GACT;IACEI,QAAQ,EAAE,kBAACS,KAAK;MAAA,OAAKD,YAAY,CAACC,KAAK,CAACM,MAAM,CAAChB,KAAK,EAAEU,KAAK,CAAC;IAAA;IAC5DO,OAAO,EAAEf,OAAO;IAChBgB,MAAM,EAAEd;EACV,CAAC,GACD,CAAC,CAAC;IACNe,SAAS,EAAE,IAAAC,eAAM,EAACC,qBAAK,CAACC,MAAM,EAAEtB,KAAK,KAAKL,KAAK,IAAI0B,qBAAK,CAACE,KAAK,EAAElB,MAAM,CAACc,SAAS;EAAC,iBAEnF,4DACGrB,WAAW,iBACV,6BAAC,oBAAS;IAAC,GAAG,EAAC,QAAQ;IAAC,KAAK,EAAEH;EAAM,GAClCG,WAAW,CAEf,EACAC,OAAO,CAACyB,GAAG,CAAC,UAACC,MAAM;IAAA,oBAClB,6BAAC,oBAAS;MAAC,GAAG,EAAC,QAAQ;MAAC,KAAK,EAAEA,MAAO;MAAC,GAAG,EAAEA;IAAO,GAChDA,MAAM,CACG;EAAA,CACb,CAAC,CACD,CACJ;AACH,CAAC;AAAC;AAEF7B,MAAM,CAAC8B,WAAW,GAAG,iBAAiB;AAEtC9B,MAAM,CAAC+B,SAAS,GAAG;EACjB9B,QAAQ,EAAE+B,kBAAS,CAACC,IAAI;EACxB/B,WAAW,EAAE8B,kBAAS,CAACE,MAAM;EAC7BC,IAAI,EAAEH,kBAAS,CAACE,MAAM,CAACE,UAAU;EACjCjC,OAAO,EAAE6B,kBAAS,CAACK,OAAO,CAACL,kBAAS,CAACE,MAAM,CAAC;EAC5C9B,KAAK,EAAE4B,kBAAS,CAACE,MAAM;EACvB7B,QAAQ,EAAE2B,kBAAS,CAACM,IAAI;EACxBhC,OAAO,EAAE0B,kBAAS,CAACM,IAAI;EACvB/B,OAAO,EAAEyB,kBAAS,CAACM,IAAI;EACvB9B,OAAO,EAAEwB,kBAAS,CAACM;AACrB,CAAC"}
+{"version":3,"file":"Select.js","names":["EMPTY","Select","disabled","disabledOptions","emptyOption","options","value","values","onChange","onEnter","onError","onLeave","others","useEffect","errors","getInputErrors","handleChange","event","React","createElement","Primitive","role","tag","target","onFocus","onBlur","className","styles","style","select","empty","map","option","index","displayName","propTypes","PropTypes","bool","arrayOf","string","name","isRequired","oneOfType","number","func"],"sources":["../../../src/primitives/Select/Select.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect } from 'react';\n\nimport { getInputErrors, styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Select.module.css';\n\nconst EMPTY = '';\n\nconst Select = ({\n  disabled,\n  disabledOptions = [],\n  emptyOption,\n  options = [],\n  value,\n  values = [],\n  onChange,\n  onEnter,\n  onError,\n  onLeave,\n  ...others\n}) => {\n  useEffect(() => {\n    const errors = getInputErrors({ ...others });\n    if (errors && onError) onError(errors);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleChange = (value, event) => {\n    onError && onError(getInputErrors({ ...others, value }));\n    onChange && onChange(value, event);\n  };\n\n  return React.createElement(\n    Primitive,\n    {\n      ...others,\n      disabled,\n      role: others.role || 'select',\n      tag: 'select',\n      value,\n      ...(!disabled\n        ? {\n            onChange: (event) => handleChange(event.target.value, event),\n            onFocus: onEnter,\n            onBlur: onLeave,\n          }\n        : {}),\n      className: styles(style.select, value === EMPTY && style.empty, others.className),\n    },\n    <>\n      {emptyOption && (\n        <Primitive tag=\"option\" value={EMPTY}>\n          {emptyOption}\n        </Primitive>\n      )}\n      {options.map((option, index) => (\n        <Primitive tag=\"option\" disabled={disabledOptions[index]} key={option} value={values[index] || option}>\n          {option}\n        </Primitive>\n      ))}\n    </>,\n  );\n};\n\nSelect.displayName = 'Primitive:Select';\n\nSelect.propTypes = {\n  disabled: PropTypes.bool,\n  disabledOptions: PropTypes.arrayOf(PropTypes.bool),\n  emptyOption: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n  values: PropTypes.arrayOf(PropTypes.string),\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onError: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { Select };\n"],"mappings":"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"}

package/build/primitives/Select/Select.stories.js

@@ -42,6 +42,7 @@ exports.Story = Story;
 Story.storyName = 'Select';
 Story.args = {
   disabled: false,
+  disabledOptions: [false, false, true],
   emptyOption: 'Select one option...',
   name: 'Select',
   options: ['one', 'two', 'three', 'four', 'five'],

package/build/primitives/Select/Select.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","storyName","args","disabled","emptyOption","name","options","onEnter","onError","onLeave","testId","style","argTypes"],"sources":["../../../src/primitives/Select/Select.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Select } from './Select';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => {\n  const [value, setValue] = useState('');\n\n  const handleChange = (next, ...others) => {\n    setValue(next);\n    console.log('<Select>::onChange', next, ...others);\n  };\n\n  return <Select {...props} value={value} onChange={handleChange} />;\n};\n\nStory.storyName = 'Select';\n\nStory.args = {\n  disabled: false,\n  emptyOption: 'Select one option...',\n  name: 'Select',\n  options: ['one', 'two', 'three', 'four', 'five'],\n  value: '',\n  onEnter: (...props) => console.log('<Select>::onEnter', ...props),\n  onError: (...props) => console.log('<Select>::onError', ...props),\n  onLeave: (...props) => console.log('<Select>::onLeave', ...props),\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,EAAC,EAAE,CAAC;IAAA;IAA/BC,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,oBAAoB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACpD,CAAC;EAED,oBAAO,6BAAC,cAAM,eAAKN,KAAK;IAAE,KAAK,EAAEE,KAAM;IAAC,QAAQ,EAAEE;EAAa,GAAG;AACpE,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,QAAQ;AAE1BV,KAAK,CAACW,IAAI,GAAG;EACXC,QAAQ,EAAE,KAAK;EACfC,WAAW,EAAE,sBAAsB;EACnCC,IAAI,EAAE,QAAQ;EACdC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC;EAChDZ,KAAK,EAAE,EAAE;EACTa,OAAO,EAAE;IAAA;IAAA,mCAAIf,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAO,OAAO,EAACC,GAAG,mBAAC,mBAAmB,SAAKR,KAAK,EAAC;EAAA;EACjEgB,OAAO,EAAE;IAAA;IAAA,mCAAIhB,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAO,OAAO,EAACC,GAAG,mBAAC,mBAAmB,SAAKR,KAAK,EAAC;EAAA;EACjEiB,OAAO,EAAE;IAAA;IAAA,mCAAIjB,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAO,OAAO,EAACC,GAAG,mBAAC,mBAAmB,SAAKR,KAAK,EAAC;EAAA;EACjE;EACAkB,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDpB,KAAK,CAACqB,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Select.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","storyName","args","disabled","disabledOptions","emptyOption","name","options","onEnter","onError","onLeave","testId","style","argTypes"],"sources":["../../../src/primitives/Select/Select.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Select } from './Select';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => {\n  const [value, setValue] = useState('');\n\n  const handleChange = (next, ...others) => {\n    setValue(next);\n    console.log('<Select>::onChange', next, ...others);\n  };\n\n  return <Select {...props} value={value} onChange={handleChange} />;\n};\n\nStory.storyName = 'Select';\n\nStory.args = {\n  disabled: false,\n  disabledOptions: [false, false, true],\n  emptyOption: 'Select one option...',\n  name: 'Select',\n  options: ['one', 'two', 'three', 'four', 'five'],\n  value: '',\n  onEnter: (...props) => console.log('<Select>::onEnter', ...props),\n  onError: (...props) => console.log('<Select>::onError', ...props),\n  onLeave: (...props) => console.log('<Select>::onLeave', ...props),\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,EAAC,EAAE,CAAC;IAAA;IAA/BC,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,oBAAoB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACpD,CAAC;EAED,oBAAO,6BAAC,cAAM,eAAKN,KAAK;IAAE,KAAK,EAAEE,KAAM;IAAC,QAAQ,EAAEE;EAAa,GAAG;AACpE,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,QAAQ;AAE1BV,KAAK,CAACW,IAAI,GAAG;EACXC,QAAQ,EAAE,KAAK;EACfC,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC;EACrCC,WAAW,EAAE,sBAAsB;EACnCC,IAAI,EAAE,QAAQ;EACdC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC;EAChDb,KAAK,EAAE,EAAE;EACTc,OAAO,EAAE;IAAA;IAAA,mCAAIhB,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAO,OAAO,EAACC,GAAG,mBAAC,mBAAmB,SAAKR,KAAK,EAAC;EAAA;EACjEiB,OAAO,EAAE;IAAA;IAAA,mCAAIjB,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAO,OAAO,EAACC,GAAG,mBAAC,mBAAmB,SAAKR,KAAK,EAAC;EAAA;EACjEkB,OAAO,EAAE;IAAA;IAAA,mCAAIlB,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAO,OAAO,EAACC,GAAG,mBAAC,mBAAmB,SAAKR,KAAK,EAAC;EAAA;EACjE;EACAmB,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDrB,KAAK,CAACsB,QAAQ,GAAG,CAAC,CAAC"}

package/build/primitives/Select/__tests__/__snapshots__/Select.test.js.snap

@@ -71,6 +71,42 @@ exports[`primitive:<Select> prop:disabled 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Select> prop:disabledOptions 1`] = `
+<DocumentFragment>
+  <select
+    class="select"
+    name="name"
+  >
+    <option
+      value="one"
+    >
+      one
+    </option>
+    <option
+      value="two"
+    >
+      two
+    </option>
+    <option
+      disabled=""
+      value="three"
+    >
+      three
+    </option>
+    <option
+      value="four"
+    >
+      four
+    </option>
+    <option
+      value="five"
+    >
+      five
+    </option>
+  </select>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Select> prop:value 1`] = `
 <DocumentFragment>
   <select

package/build/primitives/Switch/Switch.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _Primitive = require("../Primitive");
 var _SwitchModule = _interopRequireDefault(require("./Switch.module.css"));
-var _excluded = ["checked", "disabled", "name", "onChange"];
+var _excluded = ["checked", "disabled", "error", "name", "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; }
@@ -18,6 +18,7 @@ var Switch = function Switch(_ref) {
   var _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? false : _ref$checked,
     disabled = _ref.disabled,
+    error = _ref.error,
     name = _ref.name,
     onChange = _ref.onChange,
     others = _objectWithoutProperties(_ref, _excluded);
@@ -26,7 +27,6 @@ var Switch = function Switch(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _extends({}, others, {
     role: others.role || 'switch',
-    tag: "switch",
     onClick: !disabled ? handleChange : undefined,
     className: (0, _helpers.styles)(_SwitchModule.default.switch, others.className)
   }), /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
@@ -37,8 +37,9 @@ var Switch = function Switch(_ref) {
     type: "checkbox",
     onChange: function onChange() {}
   }), /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
-    className: _SwitchModule.default.area
+    className: (0, _helpers.styles)(_SwitchModule.default.area, error && !checked && !disabled && _SwitchModule.default.error)
   }, /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
+    tag: "span",
     className: _SwitchModule.default.toggle
   })));
 };
@@ -47,6 +48,7 @@ Switch.displayName = 'Primitive:Switch';
 Switch.propTypes = {
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
+  error: _propTypes.default.bool,
   name: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func
 };

package/build/primitives/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["Switch","checked","disabled","name","onChange","others","handleChange","event","role","undefined","styles","style","switch","className","area","toggle","displayName","propTypes","PropTypes","bool","string","isRequired","func"],"sources":["../../../src/primitives/Switch/Switch.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Switch.module.css';\n\nconst Switch = ({ checked = false, disabled, name, onChange, ...others }) => {\n  const handleChange = (event) => {\n    onChange && onChange(!checked, event);\n  };\n\n  return (\n    <Primitive\n      {...others}\n      role={others.role || 'switch'}\n      tag=\"switch\"\n      onClick={!disabled ? handleChange : undefined}\n      className={styles(style.switch, others.className)}\n    >\n      <Primitive checked={checked} disabled={disabled} name={name} tag=\"input\" type=\"checkbox\" onChange={() => {}} />\n      <Primitive className={style.area}>\n        <Primitive className={style.toggle} />\n      </Primitive>\n    </Primitive>\n  );\n};\n\nSwitch.displayName = 'Primitive:Switch';\n\nSwitch.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n};\n\nexport { Switch };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,MAAM,GAAG,SAATA,MAAM,OAAiE;EAAA,wBAA3DC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,MAAM;EACpE,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAK;IAC9BH,QAAQ,IAAIA,QAAQ,CAAC,CAACH,OAAO,EAAEM,KAAK,CAAC;EACvC,CAAC;EAED,oBACE,6BAAC,oBAAS,eACJF,MAAM;IACV,IAAI,EAAEA,MAAM,CAACG,IAAI,IAAI,QAAS;IAC9B,GAAG,EAAC,QAAQ;IACZ,OAAO,EAAE,CAACN,QAAQ,GAAGI,YAAY,GAAGG,SAAU;IAC9C,SAAS,EAAE,IAAAC,eAAM,EAACC,qBAAK,CAACC,MAAM,EAAEP,MAAM,CAACQ,SAAS;EAAE,iBAElD,6BAAC,oBAAS;IAAC,OAAO,EAAEZ,OAAQ;IAAC,QAAQ,EAAEC,QAAS;IAAC,IAAI,EAAEC,IAAK;IAAC,GAAG,EAAC,OAAO;IAAC,IAAI,EAAC,UAAU;IAAC,QAAQ,EAAE,oBAAM,CAAC;EAAE,EAAG,eAC/G,6BAAC,oBAAS;IAAC,SAAS,EAAEQ,qBAAK,CAACG;EAAK,gBAC/B,6BAAC,oBAAS;IAAC,SAAS,EAAEH,qBAAK,CAACI;EAAO,EAAG,CAC5B,CACF;AAEhB,CAAC;AAAC;AAEFf,MAAM,CAACgB,WAAW,GAAG,kBAAkB;AAEvChB,MAAM,CAACiB,SAAS,GAAG;EACjBhB,OAAO,EAAEiB,kBAAS,CAACC,IAAI;EACvBjB,QAAQ,EAAEgB,kBAAS,CAACC,IAAI;EACxBhB,IAAI,EAAEe,kBAAS,CAACE,MAAM,CAACC,UAAU;EACjCjB,QAAQ,EAAEc,kBAAS,CAACI;AACtB,CAAC"}
+{"version":3,"file":"Switch.js","names":["Switch","checked","disabled","error","name","onChange","others","handleChange","event","role","undefined","styles","style","switch","className","area","toggle","displayName","propTypes","PropTypes","bool","string","isRequired","func"],"sources":["../../../src/primitives/Switch/Switch.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Switch.module.css';\n\nconst Switch = ({ checked = false, disabled, error, name, onChange, ...others }) => {\n  const handleChange = (event) => {\n    onChange && onChange(!checked, event);\n  };\n\n  return (\n    <Primitive\n      {...others}\n      role={others.role || 'switch'}\n      onClick={!disabled ? handleChange : undefined}\n      className={styles(style.switch, others.className)}\n    >\n      <Primitive checked={checked} disabled={disabled} name={name} tag=\"input\" type=\"checkbox\" onChange={() => {}} />\n      <Primitive className={styles(style.area, error && !checked && !disabled && style.error)}>\n        <Primitive tag=\"span\" className={style.toggle} />\n      </Primitive>\n    </Primitive>\n  );\n};\n\nSwitch.displayName = 'Primitive:Switch';\n\nSwitch.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n};\n\nexport { Switch };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,MAAM,GAAG,SAATA,MAAM,OAAwE;EAAA,wBAAlEC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,MAAM;EAC3E,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAK;IAC9BH,QAAQ,IAAIA,QAAQ,CAAC,CAACJ,OAAO,EAAEO,KAAK,CAAC;EACvC,CAAC;EAED,oBACE,6BAAC,oBAAS,eACJF,MAAM;IACV,IAAI,EAAEA,MAAM,CAACG,IAAI,IAAI,QAAS;IAC9B,OAAO,EAAE,CAACP,QAAQ,GAAGK,YAAY,GAAGG,SAAU;IAC9C,SAAS,EAAE,IAAAC,eAAM,EAACC,qBAAK,CAACC,MAAM,EAAEP,MAAM,CAACQ,SAAS;EAAE,iBAElD,6BAAC,oBAAS;IAAC,OAAO,EAAEb,OAAQ;IAAC,QAAQ,EAAEC,QAAS;IAAC,IAAI,EAAEE,IAAK;IAAC,GAAG,EAAC,OAAO;IAAC,IAAI,EAAC,UAAU;IAAC,QAAQ,EAAE,oBAAM,CAAC;EAAE,EAAG,eAC/G,6BAAC,oBAAS;IAAC,SAAS,EAAE,IAAAO,eAAM,EAACC,qBAAK,CAACG,IAAI,EAAEZ,KAAK,IAAI,CAACF,OAAO,IAAI,CAACC,QAAQ,IAAIU,qBAAK,CAACT,KAAK;EAAE,gBACtF,6BAAC,oBAAS;IAAC,GAAG,EAAC,MAAM;IAAC,SAAS,EAAES,qBAAK,CAACI;EAAO,EAAG,CACvC,CACF;AAEhB,CAAC;AAAC;AAEFhB,MAAM,CAACiB,WAAW,GAAG,kBAAkB;AAEvCjB,MAAM,CAACkB,SAAS,GAAG;EACjBjB,OAAO,EAAEkB,kBAAS,CAACC,IAAI;EACvBlB,QAAQ,EAAEiB,kBAAS,CAACC,IAAI;EACxBjB,KAAK,EAAEgB,kBAAS,CAACC,IAAI;EACrBhB,IAAI,EAAEe,kBAAS,CAACE,MAAM,CAACC,UAAU;EACjCjB,QAAQ,EAAEc,kBAAS,CAACI;AACtB,CAAC"}

package/build/primitives/Switch/Switch.module.css

@@ -24,21 +24,27 @@
   border-radius: var(--mirai-ui-switch-border-radius);
   cursor: pointer;
   display: flex;
-  height: calc(var(--mirai-ui-switch-size) + calc(var(--mirai-ui-switch-border-size) * 2));
   position: relative;
-  transition: background-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
-  width: calc(var(--mirai-ui-switch-size) * 2);
+  transition: background-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing),
+    box-shadow var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
+}
+
+.switch:focus .area,
+.switch:hover .area {
+  box-shadow: var(--mirai-ui-focus-shadow);
+}
+
+.switch .area.error {
+  background-color: var(--mirai-ui-error);
 }
 
 .switch .toggle {
   background-color: var(--mirai-ui-switch-base);
   border-radius: calc(var(--mirai-ui-switch-border-radius) - var(--mirai-ui-switch-border-size));
-  height: var(--mirai-ui-switch-size);
   left: var(--mirai-ui-switch-border-size);
   position: absolute;
   top: var(--mirai-ui-switch-border-size);
   transition: var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
-  width: var(--mirai-ui-switch-size);
 }
 
 .switch input:checked + .area {
@@ -55,8 +61,30 @@
   transform: translateX(-100%);
 }
 
-@media only screen and (min-width: 600px) {
-  .switch:hover input:not(:disabled) + .area {
-    background-color: var(--mirai-ui-switch-color-hover);
+@media only screen and (max-width: 430px) {
+  .switch .area {
+    height: calc(var(--mirai-ui-switch-size-mobile) + calc(var(--mirai-ui-switch-border-size) * 2));
+    width: calc(var(--mirai-ui-switch-size-mobile) * 2.4);
+  }
+
+  .switch .toggle {
+    height: var(--mirai-ui-switch-size-mobile);
+    width: var(--mirai-ui-switch-size-mobile);
+  }
+}
+
+@media only screen and (min-width: 431px) {
+  .switch .area {
+    height: calc(var(--mirai-ui-switch-size) + calc(var(--mirai-ui-switch-border-size) * 2));
+    width: calc(var(--mirai-ui-switch-size) * 2.4);
+  }
+
+  .switch .toggle {
+    height: var(--mirai-ui-switch-size);
+    width: var(--mirai-ui-switch-size);
+  }
+
+  .switch:hover input:not(:disabled):not(:checked) + .area {
+    background-color: var(--mirai-ui-focus-color);
   }
 }

package/build/primitives/Switch/Switch.stories.js

@@ -43,6 +43,7 @@ Story.storyName = 'Switch';
 Story.args = {
   checked: false,
   disabled: false,
+  error: false,
   name: 'Switch',
   // inherited properties
   testId: 'test-story',

package/build/primitives/Switch/Switch.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.stories.js","names":["title","Story","props","useState","checked","setChecked","handleChange","next","others","console","log","storyName","args","disabled","name","testId","style","argTypes"],"sources":["../../../src/primitives/Switch/Switch.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Switch } from './Switch';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => {\n  const [checked, setChecked] = useState(false);\n\n  const handleChange = (next, ...others) => {\n    console.log('<Switch>::onChange', next, ...others);\n    setChecked(!checked);\n  };\n\n  return <Switch {...props} checked={checked} onChange={handleChange} />;\n};\n\nStory.storyName = 'Switch';\n\nStory.args = {\n  checked: false,\n  disabled: false,\n  name: 'Switch',\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA8B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAtCC,OAAO;IAAEC,UAAU;EAE1B,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IAAA,kCAAXC,MAAM;MAANA,MAAM;IAAA;IACnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,oBAAoB,EAAEH,IAAI,SAAKC,MAAM,EAAC;IAClDH,UAAU,CAAC,CAACD,OAAO,CAAC;EACtB,CAAC;EAED,oBAAO,6BAAC,cAAM,eAAKF,KAAK;IAAE,OAAO,EAAEE,OAAQ;IAAC,QAAQ,EAAEE;EAAa,GAAG;AACxE,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,QAAQ;AAE1BV,KAAK,CAACW,IAAI,GAAG;EACXR,OAAO,EAAE,KAAK;EACdS,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,QAAQ;EACd;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDf,KAAK,CAACgB,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Switch.stories.js","names":["title","Story","props","useState","checked","setChecked","handleChange","next","others","console","log","storyName","args","disabled","error","name","testId","style","argTypes"],"sources":["../../../src/primitives/Switch/Switch.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Switch } from './Switch';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => {\n  const [checked, setChecked] = useState(false);\n\n  const handleChange = (next, ...others) => {\n    console.log('<Switch>::onChange', next, ...others);\n    setChecked(!checked);\n  };\n\n  return <Switch {...props} checked={checked} onChange={handleChange} />;\n};\n\nStory.storyName = 'Switch';\n\nStory.args = {\n  checked: false,\n  disabled: false,\n  error: false,\n  name: 'Switch',\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA8B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAtCC,OAAO;IAAEC,UAAU;EAE1B,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IAAA,kCAAXC,MAAM;MAANA,MAAM;IAAA;IACnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,oBAAoB,EAAEH,IAAI,SAAKC,MAAM,EAAC;IAClDH,UAAU,CAAC,CAACD,OAAO,CAAC;EACtB,CAAC;EAED,oBAAO,6BAAC,cAAM,eAAKF,KAAK;IAAE,OAAO,EAAEE,OAAQ;IAAC,QAAQ,EAAEE;EAAa,GAAG;AACxE,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,QAAQ;AAE1BV,KAAK,CAACW,IAAI,GAAG;EACXR,OAAO,EAAE,KAAK;EACdS,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,QAAQ;EACd;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDhB,KAAK,CAACiB,QAAQ,GAAG,CAAC,CAAC"}

package/build/primitives/Switch/__tests__/__snapshots__/Switch.test.js.snap

@@ -2,27 +2,49 @@
 
 exports[`primitive:<Switch> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_switch
+  <div
     class="switch mirai"
   >
     <input
       name="name"
       type="checkbox"
     />
-    <ui_primitive
+    <div
       class="area"
     >
-      <ui_primitive
+      <span
         class="toggle"
       />
-    </ui_primitive>
-  </ui_switch>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Switch> prop:checked && disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="switch"
+  >
+    <input
+      checked=""
+      disabled=""
+      name="name"
+      type="checkbox"
+    />
+    <div
+      class="area"
+    >
+      <span
+        class="toggle"
+      />
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Switch> prop:checked 1`] = `
 <DocumentFragment>
-  <ui_switch
+  <div
     class="switch"
   >
     <input
@@ -30,20 +52,41 @@ exports[`primitive:<Switch> prop:checked 1`] = `
       name="name"
       type="checkbox"
     />
-    <ui_primitive
+    <div
       class="area"
     >
-      <ui_primitive
+      <span
         class="toggle"
       />
-    </ui_primitive>
-  </ui_switch>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Switch> prop:disabled 1`] = `
 <DocumentFragment>
-  <ui_switch
+  <div
+    class="switch"
+  >
+    <input
+      disabled=""
+      name="name"
+      type="checkbox"
+    />
+    <div
+      class="area"
+    >
+      <span
+        class="toggle"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Switch> prop:error && disabled 1`] = `
+<DocumentFragment>
+  <div
     class="switch"
   >
     <input
@@ -51,40 +94,60 @@ exports[`primitive:<Switch> prop:disabled 1`] = `
       name="name"
       type="checkbox"
     />
-    <ui_primitive
+    <div
       class="area"
     >
-      <ui_primitive
+      <span
+        class="toggle"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Switch> prop:error 1`] = `
+<DocumentFragment>
+  <div
+    class="switch"
+  >
+    <input
+      name="name"
+      type="checkbox"
+    />
+    <div
+      class="area error"
+    >
+      <span
         class="toggle"
       />
-    </ui_primitive>
-  </ui_switch>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Switch> render 1`] = `
 <DocumentFragment>
-  <ui_switch
+  <div
     class="switch"
   >
     <input
       name="name"
       type="checkbox"
     />
-    <ui_primitive
+    <div
       class="area"
     >
-      <ui_primitive
+      <span
         class="toggle"
       />
-    </ui_primitive>
-  </ui_switch>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Switch> testId 1`] = `
 <DocumentFragment>
-  <ui_switch
+  <div
     class="switch"
     data-testid="mirai"
   >
@@ -92,13 +155,13 @@ exports[`primitive:<Switch> testId 1`] = `
       name="name"
       type="checkbox"
     />
-    <ui_primitive
+    <div
       class="area"
     >
-      <ui_primitive
+      <span
         class="toggle"
       />
-    </ui_primitive>
-  </ui_switch>
+    </div>
+  </div>
 </DocumentFragment>
 `;

package/build/primitives/Text/Text.js

@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
 var _Primitive = require("../Primitive");
 var _helpers2 = require("./helpers");
 var _TextModule = _interopRequireDefault(require("./Text.module.css"));
-var _excluded = ["accent", "action", "bold", "children", "headline", "level", "lighten", "markdown", "small", "tag", "tiny", "underline", "upperCase", "wide"];
+var _excluded = ["accent", "action", "bold", "capitalize", "children", "error", "headline", "level", "lighten", "markdown", "small", "success", "tag", "tiny", "underline", "upperCase", "warning", "wide"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -24,7 +24,9 @@ var Text = function Text(_ref) {
   var accent = _ref.accent,
     action = _ref.action,
     bold = _ref.bold,
+    capitalize = _ref.capitalize,
     children = _ref.children,
+    error = _ref.error,
     headline = _ref.headline,
     _ref$level = _ref.level,
     level = _ref$level === void 0 ? 3 : _ref$level,
@@ -32,17 +34,18 @@ var Text = function Text(_ref) {
     _ref$markdown = _ref.markdown,
     markdown = _ref$markdown === void 0 ? true : _ref$markdown,
     small = _ref.small,
-    _ref$tag = _ref.tag,
-    tag = _ref$tag === void 0 ? 'text' : _ref$tag,
+    success = _ref.success,
+    tag = _ref.tag,
     tiny = _ref.tiny,
     underline = _ref.underline,
     upperCase = _ref.upperCase,
+    warning = _ref.warning,
     wide = _ref.wide,
     others = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread({}, others), {}, {
     role: others.role || 'text',
-    tag: headline ? "h".concat(level) : tag,
-    className: (0, _helpers.styles)(_TextModule.default.text, accent && _TextModule.default.accent, bold && _TextModule.default.bold, headline ? _TextModule.default["headline-".concat(level)] : action ? _TextModule.default.action : small ? _TextModule.default.small : tiny ? _TextModule.default.tiny : _TextModule.default.paragraph, lighten && _TextModule.default.lighten, underline && _TextModule.default.underline, upperCase && _TextModule.default.upperCase, wide && _TextModule.default.wide, others.className)
+    tag: tag || (headline ? "h".concat(level) : 'span'),
+    className: (0, _helpers.styles)(_TextModule.default.text, accent && _TextModule.default.accent, bold && _TextModule.default.bold, capitalize && _TextModule.default.capitalize, error && _TextModule.default.error, headline ? _TextModule.default["headline-".concat(level)] : action ? _TextModule.default.action : small ? _TextModule.default.small : tiny ? _TextModule.default.tiny : _TextModule.default.paragraph, lighten && _TextModule.default.lighten, success && _TextModule.default.success, underline && _TextModule.default.underline, upperCase && _TextModule.default.upperCase, warning && _TextModule.default.warning, wide && _TextModule.default.wide, others.className)
   }), markdown ? (0, _helpers2.parseMarkdown)(children) : children);
 };
 exports.Text = Text;
@@ -51,16 +54,20 @@ Text.propTypes = {
   accent: _propTypes.default.bool,
   action: _propTypes.default.bool,
   bold: _propTypes.default.bool,
+  capitalize: _propTypes.default.bool,
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
+  error: _propTypes.default.bool,
   headline: _propTypes.default.bool,
   level: _propTypes.default.number,
   lighten: _propTypes.default.bool,
   markdown: _propTypes.default.bool,
   small: _propTypes.default.bool,
+  success: _propTypes.default.bool,
   tag: _propTypes.default.string,
   tiny: _propTypes.default.bool,
   underline: _propTypes.default.bool,
   upperCase: _propTypes.default.bool,
+  warning: _propTypes.default.bool,
   wide: _propTypes.default.bool
 };
 //# sourceMappingURL=Text.js.map

package/build/primitives/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["Text","accent","action","bold","children","headline","level","lighten","markdown","small","tag","tiny","underline","upperCase","wide","others","React","createElement","Primitive","role","className","styles","style","text","paragraph","parseMarkdown","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { parseMarkdown } from './helpers';\nimport style from './Text.module.css';\n\nconst Text = ({\n  accent,\n  action,\n  bold,\n  children,\n  headline,\n  level = 3,\n  lighten,\n  markdown = true,\n  small,\n  tag = 'text',\n  tiny,\n  underline,\n  upperCase,\n  wide,\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'text',\n      tag: headline ? `h${level}` : tag,\n      className: styles(\n        style.text,\n        accent && style.accent,\n        bold && style.bold,\n        headline\n          ? style[`headline-${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : tiny\n          ? style.tiny\n          : style.paragraph,\n        lighten && style.lighten,\n        underline && style.underline,\n        upperCase && style.upperCase,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    markdown ? parseMarkdown(children) : children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  accent: PropTypes.bool,\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  lighten: PropTypes.bool,\n  markdown: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n  tiny: PropTypes.bool,\n  underline: PropTypes.bool,\n  upperCase: PropTypes.bool,\n  wide: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,GAAG,SAAPA,IAAI;EAAA,IACRC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,CAAC;IACTC,OAAO,QAAPA,OAAO;IAAA,qBACPC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IACfC,KAAK,QAALA,KAAK;IAAA,gBACLC,GAAG;IAAHA,GAAG,yBAAG,MAAM;IACZC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACDC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,oBAAS,kCAEJH,MAAM;IACTI,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,MAAM;IAC3BT,GAAG,EAAEL,QAAQ,cAAOC,KAAK,IAAKI,GAAG;IACjCU,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACVtB,MAAM,IAAIqB,mBAAK,CAACrB,MAAM,EACtBE,IAAI,IAAImB,mBAAK,CAACnB,IAAI,EAClBE,QAAQ,GACJiB,mBAAK,oBAAahB,KAAK,EAAG,GAC1BJ,MAAM,GACNoB,mBAAK,CAACpB,MAAM,GACZO,KAAK,GACLa,mBAAK,CAACb,KAAK,GACXE,IAAI,GACJW,mBAAK,CAACX,IAAI,GACVW,mBAAK,CAACE,SAAS,EACnBjB,OAAO,IAAIe,mBAAK,CAACf,OAAO,EACxBK,SAAS,IAAIU,mBAAK,CAACV,SAAS,EAC5BC,SAAS,IAAIS,mBAAK,CAACT,SAAS,EAC5BC,IAAI,IAAIQ,mBAAK,CAACR,IAAI,EAClBC,MAAM,CAACK,SAAS;EACjB,IAEHZ,QAAQ,GAAG,IAAAiB,uBAAa,EAACrB,QAAQ,CAAC,GAAGA,QAAQ,CAC9C;AAAA;AAAC;AAEJJ,IAAI,CAAC0B,WAAW,GAAG,gBAAgB;AAEnC1B,IAAI,CAAC2B,SAAS,GAAG;EACf1B,MAAM,EAAE2B,kBAAS,CAACC,IAAI;EACtB3B,MAAM,EAAE0B,kBAAS,CAACC,IAAI;EACtB1B,IAAI,EAAEyB,kBAAS,CAACC,IAAI;EACpBzB,QAAQ,EAAEwB,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACI,MAAM,EAAEJ,kBAAS,CAACK,KAAK,CAAC,CAAC;EACpF5B,QAAQ,EAAEuB,kBAAS,CAACC,IAAI;EACxBvB,KAAK,EAAEsB,kBAAS,CAACI,MAAM;EACvBzB,OAAO,EAAEqB,kBAAS,CAACC,IAAI;EACvBrB,QAAQ,EAAEoB,kBAAS,CAACC,IAAI;EACxBpB,KAAK,EAAEmB,kBAAS,CAACC,IAAI;EACrBnB,GAAG,EAAEkB,kBAAS,CAACG,MAAM;EACrBpB,IAAI,EAAEiB,kBAAS,CAACC,IAAI;EACpBjB,SAAS,EAAEgB,kBAAS,CAACC,IAAI;EACzBhB,SAAS,EAAEe,kBAAS,CAACC,IAAI;EACzBf,IAAI,EAAEc,kBAAS,CAACC;AAClB,CAAC"}
+{"version":3,"file":"Text.js","names":["Text","accent","action","bold","capitalize","children","error","headline","level","lighten","markdown","small","success","tag","tiny","underline","upperCase","warning","wide","others","React","createElement","Primitive","role","className","styles","style","text","paragraph","parseMarkdown","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { parseMarkdown } from './helpers';\nimport style from './Text.module.css';\n\nconst Text = ({\n  accent,\n  action,\n  bold,\n  capitalize,\n  children,\n  error,\n  headline,\n  level = 3,\n  lighten,\n  markdown = true,\n  small,\n  success,\n  tag,\n  tiny,\n  underline,\n  upperCase,\n  warning,\n  wide,\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'text',\n      tag: tag || (headline ? `h${level}` : 'span'),\n      className: styles(\n        style.text,\n        accent && style.accent,\n        bold && style.bold,\n        capitalize && style.capitalize,\n        error && style.error,\n        headline\n          ? style[`headline-${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : tiny\n          ? style.tiny\n          : style.paragraph,\n        lighten && style.lighten,\n        success && style.success,\n        underline && style.underline,\n        upperCase && style.upperCase,\n        warning && style.warning,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    markdown ? parseMarkdown(children) : children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  accent: PropTypes.bool,\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  capitalize: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  error: PropTypes.bool,\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  lighten: PropTypes.bool,\n  markdown: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  tag: PropTypes.string,\n  tiny: PropTypes.bool,\n  underline: PropTypes.bool,\n  upperCase: PropTypes.bool,\n  warning: PropTypes.bool,\n  wide: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":"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"}