@mirai/ui 1.0.170 → 1.0.172

package/build/components/Tooltip/Tooltip.js

@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
 var _excluded = ["children", "left", "pressable", "right", "Template", "text", "timestamp", "top", "visible"],
-  _excluded2 = ["data-testid"];
+  _excluded2 = ["testId"];
 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 }; }
@@ -50,7 +50,7 @@ var Tooltip = function Tooltip(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     position = _useState4[0],
     setPosition = _useState4[1];
-  var testId = others['data-testid'],
+  var testId = others.testId,
     rest = _objectWithoutProperties(others, _excluded2);
   var left = position.left,
     right = position.right,
@@ -61,11 +61,12 @@ var Tooltip = function Tooltip(_ref) {
     forceRender: false,
     left: propLeft,
     right: propRight,
+    role: others.role || 'tooltip',
     timestamp: timestamp,
     top: top,
     visible: visible,
     onPosition: setPosition,
-    "data-testid": testId
+    testId: testId
   }, _react.default.Children.map(children, function (child, index) {
     return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({
       key: index
@@ -80,7 +81,7 @@ var Tooltip = function Tooltip(_ref) {
         return setVisible(false);
       },
       className: (0, _helpers.styles)(_TooltipModule.default.dispatcher, child.props.className),
-      'data-testid': testId ? "".concat(testId, "-dispatcher") : undefined
+      testId: testId ? "".concat(testId, "-dispatcher") : undefined
     }));
   }), /*#__PURE__*/_react.default.createElement(_primitives.LayerContent, null, /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, rest, {
     className: (0, _helpers.styles)(_TooltipModule.default.tooltip, (propLeft || propRight) && _TooltipModule.default.aline, left && _TooltipModule.default.left, right && _TooltipModule.default.right, top ? _TooltipModule.default.top : _TooltipModule.default.bottom, rest.className)

package/build/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["Tooltip","children","propLeft","left","pressable","propRight","right","Template","text","timestamp","propTop","top","visible","propVisible","others","useState","setVisible","position","setPosition","testId","rest","React","Children","map","child","index","cloneElement","key","props","onClick","undefined","onMouseEnter","onMouseLeave","className","styles","style","dispatcher","tooltip","aline","bottom","propTypes","PropTypes","node","isRequired","bool","oneOfType","func","string","number"],"sources":["../../../src/components/Tooltip/Tooltip.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Layer, LayerContent, Text, View } from '../../primitives';\nimport style from './Tooltip.module.css';\n\nconst Tooltip = ({\n  children,\n  left: propLeft,\n  pressable = false,\n  right: propRight,\n  Template,\n  text,\n  timestamp,\n  top: propTop,\n  visible: propVisible = false,\n  ...others\n}) => {\n  const [visible, setVisible] = useState(propVisible);\n  const [position, setPosition] = useState({});\n\n  const { ['data-testid']: testId, ...rest } = others;\n\n  const { left, right, top = propTop } = position;\n\n  return text || Template ? (\n    <Layer\n      centered\n      forceRender={false}\n      left={propLeft}\n      right={propRight}\n      timestamp={timestamp}\n      top={top}\n      visible={visible}\n      onPosition={setPosition}\n      data-testid={testId}\n    >\n      {React.Children.map(children, (child, index) =>\n        React.cloneElement(child, {\n          key: index,\n          ...child.props,\n          onClick: pressable ? () => setVisible(!visible) : undefined,\n          onMouseEnter: !pressable ? () => setVisible(true) : undefined,\n          onMouseLeave: () => setVisible(false),\n          className: styles(style.dispatcher, child.props.className),\n          'data-testid': testId ? `${testId}-dispatcher` : undefined,\n        }),\n      )}\n\n      <LayerContent>\n        <View\n          {...rest}\n          className={styles(\n            style.tooltip,\n            (propLeft || propRight) && style.aline,\n            left && style.left,\n            right && style.right,\n            top ? style.top : style.bottom,\n            rest.className,\n          )}\n        >\n          {Template ? (\n            <Template />\n          ) : (\n            <Text bold small className={style.text}>\n              {text}\n            </Text>\n          )}\n        </View>\n      </LayerContent>\n    </Layer>\n  ) : (\n    <>{children}</>\n  );\n};\n\nTooltip.propTypes = {\n  children: PropTypes.node.isRequired,\n  left: PropTypes.bool,\n  pressable: PropTypes.bool,\n  right: PropTypes.bool,\n  Template: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n  text: PropTypes.string,\n  timestamp: PropTypes.number,\n  top: PropTypes.bool,\n  visible: PropTypes.bool,\n};\n\nexport { Tooltip };\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","names":["Tooltip","children","propLeft","left","pressable","propRight","right","Template","text","timestamp","propTop","top","visible","propVisible","others","useState","setVisible","position","setPosition","testId","rest","role","React","Children","map","child","index","cloneElement","key","props","onClick","undefined","onMouseEnter","onMouseLeave","className","styles","style","dispatcher","tooltip","aline","bottom","propTypes","PropTypes","node","isRequired","bool","oneOfType","func","string","number"],"sources":["../../../src/components/Tooltip/Tooltip.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Layer, LayerContent, Text, View } from '../../primitives';\nimport style from './Tooltip.module.css';\n\nconst Tooltip = ({\n  children,\n  left: propLeft,\n  pressable = false,\n  right: propRight,\n  Template,\n  text,\n  timestamp,\n  top: propTop,\n  visible: propVisible = false,\n  ...others\n}) => {\n  const [visible, setVisible] = useState(propVisible);\n  const [position, setPosition] = useState({});\n\n  const { testId, ...rest } = others;\n\n  const { left, right, top = propTop } = position;\n\n  return text || Template ? (\n    <Layer\n      centered\n      forceRender={false}\n      left={propLeft}\n      right={propRight}\n      role={others.role || 'tooltip'}\n      timestamp={timestamp}\n      top={top}\n      visible={visible}\n      onPosition={setPosition}\n      testId={testId}\n    >\n      {React.Children.map(children, (child, index) =>\n        React.cloneElement(child, {\n          key: index,\n          ...child.props,\n          onClick: pressable ? () => setVisible(!visible) : undefined,\n          onMouseEnter: !pressable ? () => setVisible(true) : undefined,\n          onMouseLeave: () => setVisible(false),\n          className: styles(style.dispatcher, child.props.className),\n          testId: testId ? `${testId}-dispatcher` : undefined,\n        }),\n      )}\n\n      <LayerContent>\n        <View\n          {...rest}\n          className={styles(\n            style.tooltip,\n            (propLeft || propRight) && style.aline,\n            left && style.left,\n            right && style.right,\n            top ? style.top : style.bottom,\n            rest.className,\n          )}\n        >\n          {Template ? (\n            <Template />\n          ) : (\n            <Text bold small className={style.text}>\n              {text}\n            </Text>\n          )}\n        </View>\n      </LayerContent>\n    </Layer>\n  ) : (\n    <>{children}</>\n  );\n};\n\nTooltip.propTypes = {\n  children: PropTypes.node.isRequired,\n  left: PropTypes.bool,\n  pressable: PropTypes.bool,\n  right: PropTypes.bool,\n  Template: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n  text: PropTypes.string,\n  timestamp: PropTypes.number,\n  top: PropTypes.bool,\n  visible: PropTypes.bool,\n};\n\nexport { Tooltip };\n"],"mappings":"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"}

package/build/components/Tooltip/Tooltip.stories.js

@@ -1,6 +1,5 @@
 "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
 });
@@ -8,11 +7,7 @@ exports.default = exports.Story = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ = require("../../");
 var _Tooltip = require("./Tooltip");
-var _Story$args;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 _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); }
 var _default = {
   title: 'Components'
@@ -116,11 +111,14 @@ var Story = function Story(props) {
 };
 exports.Story = Story;
 Story.storyName = 'Tooltip';
-Story.args = (_Story$args = {
+Story.args = {
   pressable: false,
   text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nemo adipisci consequatur et tenetur natus',
-  visible: false
-}, _defineProperty(_Story$args, 'data-testid', 'test-story'), _defineProperty(_Story$args, "style", {}), _Story$args);
+  visible: false,
+  // inherited properties
+  testId: 'test-story',
+  style: {}
+};
 Story.argTypes = {
   onClose: {
     action: 'onClose'

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.stories.js","names":["title","INSTANCES","Array","from","keys","Template","padding","marginRight","height","width","borderRadius","backgroundColor","backgroundImage","backgroundSize","border","color","Story","props","justifyContent","map","number","margin","storyName","args","pressable","text","visible","argTypes","onClose","action"],"sources":["../../../src/components/Tooltip/Tooltip.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text, View } from '../../';\nimport { Tooltip } from './Tooltip';\n\nexport default { title: 'Components' };\n\nconst INSTANCES = Array.from(Array(3).keys());\n\nconst Template = () => (\n  <View row style={{ padding: 4 }}>\n    <img\n      style={{\n        marginRight: 12,\n        height: 32,\n        width: 32,\n        borderRadius: '50%',\n        backgroundColor: 'grey',\n        backgroundImage: 'url(https://raw.githubusercontent.com/soyjavi/site/master/public/soyjavi.jpg)',\n        backgroundSize: 'cover',\n        border: 'none',\n      }}\n    />\n    <View>\n      <Text bold action style={{ color: 'white' }}>\n        Javi Jimenez Villar\n      </Text>\n      <Text small style={{ color: 'white' }}>\n        @soyjavi\n      </Text>\n    </View>\n  </View>\n);\n\nexport const Story = (props) => (\n  <>\n    <View row style={{ justifyContent: 'space-between' }}>\n      {INSTANCES.map((number) => (\n        <Tooltip {...props} key={number} top>\n          <span className=\"children\" style={{ margin: 'var(--mirai-ui-space-XS)' }}>\n            hover:text\n          </span>\n        </Tooltip>\n      ))}\n    </View>\n\n    <View row style={{ justifyContent: 'space-between' }}>\n      {INSTANCES.map((number) => (\n        <Tooltip {...props} key={number} right>\n          <span className=\"children\" style={{ margin: 'var(--mirai-ui-space-XS)' }}>\n            hover:text:right\n          </span>\n        </Tooltip>\n      ))}\n    </View>\n    <View row style={{ justifyContent: 'space-between' }}>\n      {INSTANCES.map((number) => (\n        <Tooltip {...props} key={number} left text=\"Lorem ipsum dolor sit\">\n          <span className=\"children\" style={{ margin: 'var(--mirai-ui-space-XS)' }}>\n            hover:text:left\n          </span>\n        </Tooltip>\n      ))}\n    </View>\n\n    <View row style={{ justifyContent: 'space-between' }}>\n      {INSTANCES.map((number) => (\n        <Tooltip {...props} bottom key={number} Template={Template}>\n          <span className=\"children\" style={{ margin: 'var(--mirai-ui-space-XS)' }}>\n            hover:node\n          </span>\n        </Tooltip>\n      ))}\n    </View>\n  </>\n);\n\nStory.storyName = 'Tooltip';\n\nStory.args = {\n  pressable: false,\n  text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nemo adipisci consequatur et tenetur natus',\n  visible: false,\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  onClose: { action: 'onClose' },\n};\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.stories.js","names":["title","INSTANCES","Array","from","keys","Template","padding","marginRight","height","width","borderRadius","backgroundColor","backgroundImage","backgroundSize","border","color","Story","props","justifyContent","map","number","margin","storyName","args","pressable","text","visible","testId","style","argTypes","onClose","action"],"sources":["../../../src/components/Tooltip/Tooltip.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text, View } from '../../';\nimport { Tooltip } from './Tooltip';\n\nexport default { title: 'Components' };\n\nconst INSTANCES = Array.from(Array(3).keys());\n\nconst Template = () => (\n  <View row style={{ padding: 4 }}>\n    <img\n      style={{\n        marginRight: 12,\n        height: 32,\n        width: 32,\n        borderRadius: '50%',\n        backgroundColor: 'grey',\n        backgroundImage: 'url(https://raw.githubusercontent.com/soyjavi/site/master/public/soyjavi.jpg)',\n        backgroundSize: 'cover',\n        border: 'none',\n      }}\n    />\n    <View>\n      <Text bold action style={{ color: 'white' }}>\n        Javi Jimenez Villar\n      </Text>\n      <Text small style={{ color: 'white' }}>\n        @soyjavi\n      </Text>\n    </View>\n  </View>\n);\n\nexport const Story = (props) => (\n  <>\n    <View row style={{ justifyContent: 'space-between' }}>\n      {INSTANCES.map((number) => (\n        <Tooltip {...props} key={number} top>\n          <span className=\"children\" style={{ margin: 'var(--mirai-ui-space-XS)' }}>\n            hover:text\n          </span>\n        </Tooltip>\n      ))}\n    </View>\n\n    <View row style={{ justifyContent: 'space-between' }}>\n      {INSTANCES.map((number) => (\n        <Tooltip {...props} key={number} right>\n          <span className=\"children\" style={{ margin: 'var(--mirai-ui-space-XS)' }}>\n            hover:text:right\n          </span>\n        </Tooltip>\n      ))}\n    </View>\n    <View row style={{ justifyContent: 'space-between' }}>\n      {INSTANCES.map((number) => (\n        <Tooltip {...props} key={number} left text=\"Lorem ipsum dolor sit\">\n          <span className=\"children\" style={{ margin: 'var(--mirai-ui-space-XS)' }}>\n            hover:text:left\n          </span>\n        </Tooltip>\n      ))}\n    </View>\n\n    <View row style={{ justifyContent: 'space-between' }}>\n      {INSTANCES.map((number) => (\n        <Tooltip {...props} bottom key={number} Template={Template}>\n          <span className=\"children\" style={{ margin: 'var(--mirai-ui-space-XS)' }}>\n            hover:node\n          </span>\n        </Tooltip>\n      ))}\n    </View>\n  </>\n);\n\nStory.storyName = 'Tooltip';\n\nStory.args = {\n  pressable: false,\n  text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nemo adipisci consequatur et tenetur natus',\n  visible: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  onClose: { action: 'onClose' },\n};\n"],"mappings":"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"}

package/build/components/Tooltip/__tests__/__snapshots__/Tooltip.test.jsx.snap

@@ -140,7 +140,7 @@ exports[`component:<Tooltip> renders 1`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Tooltip> testID 1`] = `
+exports[`component:<Tooltip> testId 1`] = `
 <DocumentFragment>
   <span
     data-testid="mirai"

package/build/helpers/styles.js

@@ -8,11 +8,12 @@ var styles = function styles() {
   for (var _len = arguments.length, stylesheets = new Array(_len), _key = 0; _key < _len; _key++) {
     stylesheets[_key] = arguments[_key];
   }
-  return stylesheets.flat(Infinity).filter(function (value) {
+  var value = stylesheets.flat(Infinity).filter(function (value) {
     return value !== false;
   }).filter(function (value) {
     return value !== undefined && value !== null;
   }).join(' ').trim();
+  return value !== null && value !== void 0 && value.length ? value : undefined;
 };
 exports.styles = styles;
 //# sourceMappingURL=styles.js.map

package/build/helpers/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styles","stylesheets","flat","Infinity","filter","value","undefined","join","trim"],"sources":["../../src/helpers/styles.js"],"sourcesContent":["export const styles = (...stylesheets) =>\n  stylesheets\n    .flat(Infinity)\n    .filter((value) => value !== false)\n    .filter((value) => value !== undefined && value !== null)\n    .join(' ')\n    .trim();\n"],"mappings":";;;;;;AAAO,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,kCAAOC,WAAW;IAAXA,WAAW;EAAA;EAAA,OACnCA,WAAW,CACRC,IAAI,CAACC,QAAQ,CAAC,CACdC,MAAM,CAAC,UAACC,KAAK;IAAA,OAAKA,KAAK,KAAK,KAAK;EAAA,EAAC,CAClCD,MAAM,CAAC,UAACC,KAAK;IAAA,OAAKA,KAAK,KAAKC,SAAS,IAAID,KAAK,KAAK,IAAI;EAAA,EAAC,CACxDE,IAAI,CAAC,GAAG,CAAC,CACTC,IAAI,EAAE;AAAA;AAAC"}
+{"version":3,"file":"styles.js","names":["styles","stylesheets","value","flat","Infinity","filter","undefined","join","trim","length"],"sources":["../../src/helpers/styles.js"],"sourcesContent":["export const styles = (...stylesheets) => {\n  const value = stylesheets\n    .flat(Infinity)\n    .filter((value) => value !== false)\n    .filter((value) => value !== undefined && value !== null)\n    .join(' ')\n    .trim();\n\n  return value?.length ? value : undefined;\n};\n"],"mappings":";;;;;;AAAO,IAAMA,MAAM,GAAG,SAATA,MAAM,GAAuB;EAAA,kCAAhBC,WAAW;IAAXA,WAAW;EAAA;EACnC,IAAMC,KAAK,GAAGD,WAAW,CACtBE,IAAI,CAACC,QAAQ,CAAC,CACdC,MAAM,CAAC,UAACH,KAAK;IAAA,OAAKA,KAAK,KAAK,KAAK;EAAA,EAAC,CAClCG,MAAM,CAAC,UAACH,KAAK;IAAA,OAAKA,KAAK,KAAKI,SAAS,IAAIJ,KAAK,KAAK,IAAI;EAAA,EAAC,CACxDK,IAAI,CAAC,GAAG,CAAC,CACTC,IAAI,EAAE;EAET,OAAON,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEO,MAAM,GAAGP,KAAK,GAAGI,SAAS;AAC1C,CAAC;AAAC"}

package/build/primitives/Checkbox/Checkbox.js

@@ -7,6 +7,7 @@ exports.Checkbox = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
+var _Primitive = require("../Primitive");
 var _CheckboxModule = _interopRequireDefault(require("./Checkbox.module.css"));
 var _excluded = ["checked", "children", "disabled", "name", "value", "onChange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,18 +29,20 @@ var Checkbox = function Checkbox(_ref) {
     var checked = event.target.checked;
     onChange(checked, event);
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
+    role: others.role || 'checkbox',
     className: (0, _helpers.styles)(_CheckboxModule.default.checkbox, others.className),
     style: others.style
-  }, /*#__PURE__*/_react.default.createElement("input", {
+  }, /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
     checked: checked,
-    "data-testid": others['data-testid'],
     disabled: disabled,
     name: name,
+    tag: "input",
     type: "checkbox",
     value: value,
-    className: (0, _helpers.styles)(checked && _CheckboxModule.default.checked, _CheckboxModule.default.input),
-    onChange: handleChange
+    onChange: handleChange,
+    testId: others.testId,
+    className: (0, _helpers.styles)(checked && _CheckboxModule.default.checked, _CheckboxModule.default.input)
   }), children);
 };
 exports.Checkbox = Checkbox;

package/build/primitives/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["Checkbox","checked","children","disabled","name","value","onChange","others","handleChange","event","target","styles","style","checkbox","className","input","displayName","propTypes","PropTypes","bool","node","string","isRequired","oneOfType","func"],"sources":["../../../src/primitives/Checkbox/Checkbox.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Checkbox.module.css';\n\nconst Checkbox = ({ checked = false, children, disabled, name, value = '', onChange = () => {}, ...others }) => {\n  const handleChange = (event) => {\n    if (disabled) return;\n\n    const {\n      target: { checked },\n    } = event;\n    onChange(checked, event);\n  };\n\n  return (\n    <div className={styles(style.checkbox, others.className)} style={others.style}>\n      <input\n        checked={checked}\n        data-testid={others['data-testid']}\n        disabled={disabled}\n        name={name}\n        type=\"checkbox\"\n        value={value}\n        className={styles(checked && style.checked, style.input)}\n        onChange={handleChange}\n      />\n      {children}\n    </div>\n  );\n};\n\nCheckbox.displayName = 'Primitive:Checkbox';\n\nCheckbox.propTypes = {\n  checked: PropTypes.bool,\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onChange: PropTypes.func,\n};\n\nexport { Checkbox };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AAA0C;AAAA;AAAA;AAAA;AAE1C,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAAkG;EAAA,wBAA5FC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,EAAE;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IAAKC,MAAM;EACvG,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAK;IAC9B,IAAIN,QAAQ,EAAE;IAEd,IACYF,OAAO,GACfQ,KAAK,CADPC,MAAM,CAAIT,OAAO;IAEnBK,QAAQ,CAACL,OAAO,EAAEQ,KAAK,CAAC;EAC1B,CAAC;EAED,oBACE;IAAK,SAAS,EAAE,IAAAE,eAAM,EAACC,uBAAK,CAACC,QAAQ,EAAEN,MAAM,CAACO,SAAS,CAAE;IAAC,KAAK,EAAEP,MAAM,CAACK;EAAM,gBAC5E;IACE,OAAO,EAAEX,OAAQ;IACjB,eAAaM,MAAM,CAAC,aAAa,CAAE;IACnC,QAAQ,EAAEJ,QAAS;IACnB,IAAI,EAAEC,IAAK;IACX,IAAI,EAAC,UAAU;IACf,KAAK,EAAEC,KAAM;IACb,SAAS,EAAE,IAAAM,eAAM,EAACV,OAAO,IAAIW,uBAAK,CAACX,OAAO,EAAEW,uBAAK,CAACG,KAAK,CAAE;IACzD,QAAQ,EAAEP;EAAa,EACvB,EACDN,QAAQ,CACL;AAEV,CAAC;AAAC;AAEFF,QAAQ,CAACgB,WAAW,GAAG,oBAAoB;AAE3ChB,QAAQ,CAACiB,SAAS,GAAG;EACnBhB,OAAO,EAAEiB,kBAAS,CAACC,IAAI;EACvBjB,QAAQ,EAAEgB,kBAAS,CAACE,IAAI;EACxBjB,QAAQ,EAAEe,kBAAS,CAACC,IAAI;EACxBf,IAAI,EAAEc,kBAAS,CAACG,MAAM,CAACC,UAAU;EACjCjB,KAAK,EAAEa,kBAAS,CAACK,SAAS,CAAC,CAACL,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACC,IAAI,CAAC,CAAC;EAC9Db,QAAQ,EAAEY,kBAAS,CAACM;AACtB,CAAC"}
+{"version":3,"file":"Checkbox.js","names":["Checkbox","checked","children","disabled","name","value","onChange","others","handleChange","event","target","role","styles","style","checkbox","className","testId","input","displayName","propTypes","PropTypes","bool","node","string","isRequired","oneOfType","func"],"sources":["../../../src/primitives/Checkbox/Checkbox.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Checkbox.module.css';\n\nconst Checkbox = ({ checked = false, children, disabled, name, value = '', onChange = () => {}, ...others }) => {\n  const handleChange = (event) => {\n    if (disabled) return;\n\n    const {\n      target: { checked },\n    } = event;\n    onChange(checked, event);\n  };\n\n  return (\n    <Primitive\n      role={others.role || 'checkbox'}\n      className={styles(style.checkbox, others.className)}\n      style={others.style}\n    >\n      <Primitive\n        checked={checked}\n        disabled={disabled}\n        name={name}\n        tag=\"input\"\n        type=\"checkbox\"\n        value={value}\n        onChange={handleChange}\n        testId={others.testId}\n        className={styles(checked && style.checked, style.input)}\n      />\n      {children}\n    </Primitive>\n  );\n};\n\nCheckbox.displayName = 'Primitive:Checkbox';\n\nCheckbox.propTypes = {\n  checked: PropTypes.bool,\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onChange: PropTypes.func,\n};\n\nexport { Checkbox };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA0C;AAAA;AAAA;AAAA;AAE1C,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAAkG;EAAA,wBAA5FC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,EAAE;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IAAKC,MAAM;EACvG,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAK;IAC9B,IAAIN,QAAQ,EAAE;IAEd,IACYF,OAAO,GACfQ,KAAK,CADPC,MAAM,CAAIT,OAAO;IAEnBK,QAAQ,CAACL,OAAO,EAAEQ,KAAK,CAAC;EAC1B,CAAC;EAED,oBACE,6BAAC,oBAAS;IACR,IAAI,EAAEF,MAAM,CAACI,IAAI,IAAI,UAAW;IAChC,SAAS,EAAE,IAAAC,eAAM,EAACC,uBAAK,CAACC,QAAQ,EAAEP,MAAM,CAACQ,SAAS,CAAE;IACpD,KAAK,EAAER,MAAM,CAACM;EAAM,gBAEpB,6BAAC,oBAAS;IACR,OAAO,EAAEZ,OAAQ;IACjB,QAAQ,EAAEE,QAAS;IACnB,IAAI,EAAEC,IAAK;IACX,GAAG,EAAC,OAAO;IACX,IAAI,EAAC,UAAU;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEG,YAAa;IACvB,MAAM,EAAED,MAAM,CAACS,MAAO;IACtB,SAAS,EAAE,IAAAJ,eAAM,EAACX,OAAO,IAAIY,uBAAK,CAACZ,OAAO,EAAEY,uBAAK,CAACI,KAAK;EAAE,EACzD,EACDf,QAAQ,CACC;AAEhB,CAAC;AAAC;AAEFF,QAAQ,CAACkB,WAAW,GAAG,oBAAoB;AAE3ClB,QAAQ,CAACmB,SAAS,GAAG;EACnBlB,OAAO,EAAEmB,kBAAS,CAACC,IAAI;EACvBnB,QAAQ,EAAEkB,kBAAS,CAACE,IAAI;EACxBnB,QAAQ,EAAEiB,kBAAS,CAACC,IAAI;EACxBjB,IAAI,EAAEgB,kBAAS,CAACG,MAAM,CAACC,UAAU;EACjCnB,KAAK,EAAEe,kBAAS,CAACK,SAAS,CAAC,CAACL,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACC,IAAI,CAAC,CAAC;EAC9Df,QAAQ,EAAEc,kBAAS,CAACM;AACtB,CAAC"}

package/build/primitives/Checkbox/Checkbox.stories.js

@@ -7,12 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Story = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Checkbox = require("./Checkbox");
-var _Story$args;
 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 _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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -44,11 +40,14 @@ var Story = function Story(props) {
 };
 exports.Story = Story;
 Story.storyName = 'Checkbox';
-Story.args = (_Story$args = {
+Story.args = {
   children: 'children',
   disabled: false,
   name: 'checkbox',
-  value: 'value'
-}, _defineProperty(_Story$args, 'data-testid', 'test-story'), _defineProperty(_Story$args, "style", {}), _Story$args);
+  value: 'value',
+  // inherited properties
+  testId: 'test-story',
+  style: {}
+};
 Story.argTypes = {};
 //# sourceMappingURL=Checkbox.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.js","names":["title","Story","props","useState","checked","setChecked","handleChange","next","others","console","log","storyName","args","children","disabled","name","value","argTypes"],"sources":["../../../src/primitives/Checkbox/Checkbox.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Checkbox } from './Checkbox';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => {\n  const [checked, setChecked] = useState(true);\n\n  const handleChange = (next, ...others) => {\n    setChecked(next);\n    console.log('<Checkbox>::onChange', next, ...others);\n  };\n\n  return <Checkbox {...props} checked={checked} onChange={handleChange} />;\n};\n\nStory.storyName = 'Checkbox';\n\nStory.args = {\n  children: 'children',\n  disabled: false,\n  name: 'checkbox',\n  value: 'value',\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEvB;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,sBAAsB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACtD,CAAC;EAED,oBAAO,6BAAC,kBAAQ,eAAKN,KAAK;IAAE,OAAO,EAAEE,OAAQ;IAAC,QAAQ,EAAEE;EAAa,GAAG;AAC1E,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,UAAU;AAE5BV,KAAK,CAACW,IAAI;EACRC,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE;AAAO,gCAEb,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDf,KAAK,CAACgB,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Checkbox.stories.js","names":["title","Story","props","useState","checked","setChecked","handleChange","next","others","console","log","storyName","args","children","disabled","name","value","testId","style","argTypes"],"sources":["../../../src/primitives/Checkbox/Checkbox.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Checkbox } from './Checkbox';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => {\n  const [checked, setChecked] = useState(true);\n\n  const handleChange = (next, ...others) => {\n    setChecked(next);\n    console.log('<Checkbox>::onChange', next, ...others);\n  };\n\n  return <Checkbox {...props} checked={checked} onChange={handleChange} />;\n};\n\nStory.storyName = 'Checkbox';\n\nStory.args = {\n  children: 'children',\n  disabled: false,\n  name: 'checkbox',\n  value: 'value',\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEvB;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,sBAAsB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACtD,CAAC;EAED,oBAAO,6BAAC,kBAAQ,eAAKN,KAAK;IAAE,OAAO,EAAEE,OAAQ;IAAC,QAAQ,EAAEE;EAAa,GAAG;AAC1E,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,UAAU;AAE5BV,KAAK,CAACW,IAAI,GAAG;EACXC,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE,OAAO;EACd;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDjB,KAAK,CAACkB,QAAQ,GAAG,CAAC,CAAC"}

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

@@ -110,7 +110,7 @@ exports[`primitive:<Checkbox> render 1`] = `
 </DocumentFragment>
 `;
 
-exports[`primitive:<Checkbox> testID 1`] = `
+exports[`primitive:<Checkbox> testId 1`] = `
 <DocumentFragment>
   <div
     class="checkbox"

package/build/primitives/Icon/Icon.js

@@ -8,6 +8,7 @@ exports.Icon = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
+var _Primitive = require("../Primitive");
 var _IconModule = _interopRequireDefault(require("./Icon.module.css"));
 var _excluded = ["action", "headline", "level", "paragraph", "small", "value"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,7 +28,9 @@ var Icon = function Icon(_ref) {
     small = _ref.small,
     value = _ref.value,
     others = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement('span', _objectSpread(_objectSpread({}, others), {}, {
+  return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread({}, others), {}, {
+    role: others.role || 'icon',
+    tag: 'span',
     className: (0, _helpers.styles)(_IconModule.default.icon, headline ? _IconModule.default["headline-".concat(level)] : action ? _IconModule.default.action : small ? _IconModule.default.small : paragraph ? _IconModule.default.paragraph : _IconModule.default["headline-".concat(level)], others.className)
   }), value ? /*#__PURE__*/_react.default.createElement(value) : undefined);
 };

package/build/primitives/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["Icon","action","headline","level","paragraph","small","value","others","React","createElement","className","styles","style","icon","undefined","displayName","propTypes","PropTypes","bool","number","func","isRequired"],"sources":["../../../src/primitives/Icon/Icon.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Icon.module.css';\n\nconst Icon = ({ action, headline, level = 3, paragraph, small, value, ...others }) =>\n  React.createElement(\n    'span',\n    {\n      ...others,\n      className: styles(\n        style.icon,\n        headline\n          ? style[`headline-${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : paragraph\n          ? style.paragraph\n          : style[`headline-${level}`],\n        others.className,\n      ),\n    },\n    value ? React.createElement(value) : undefined,\n  );\n\nIcon.displayName = 'Primitive:Icon';\n\nIcon.propTypes = {\n  action: PropTypes.bool,\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  paragraph: PropTypes.bool,\n  small: PropTypes.bool,\n  value: PropTypes.func.isRequired,\n};\n\nexport { Icon };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,GAAG,SAAPA,IAAI;EAAA,IAAMC,MAAM,QAANA,MAAM;IAAEC,QAAQ,QAARA,QAAQ;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAEC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAKC,MAAM;EAAA,oBAC7EC,cAAK,CAACC,aAAa,CACjB,MAAM,kCAEDF,MAAM;IACTG,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACVX,QAAQ,GACJU,mBAAK,oBAAaT,KAAK,EAAG,GAC1BF,MAAM,GACNW,mBAAK,CAACX,MAAM,GACZI,KAAK,GACLO,mBAAK,CAACP,KAAK,GACXD,SAAS,GACTQ,mBAAK,CAACR,SAAS,GACfQ,mBAAK,oBAAaT,KAAK,EAAG,EAC9BI,MAAM,CAACG,SAAS;EACjB,IAEHJ,KAAK,gBAAGE,cAAK,CAACC,aAAa,CAACH,KAAK,CAAC,GAAGQ,SAAS,CAC/C;AAAA;AAAC;AAEJd,IAAI,CAACe,WAAW,GAAG,gBAAgB;AAEnCf,IAAI,CAACgB,SAAS,GAAG;EACff,MAAM,EAAEgB,kBAAS,CAACC,IAAI;EACtBhB,QAAQ,EAAEe,kBAAS,CAACC,IAAI;EACxBf,KAAK,EAAEc,kBAAS,CAACE,MAAM;EACvBf,SAAS,EAAEa,kBAAS,CAACC,IAAI;EACzBb,KAAK,EAAEY,kBAAS,CAACC,IAAI;EACrBZ,KAAK,EAAEW,kBAAS,CAACG,IAAI,CAACC;AACxB,CAAC"}
+{"version":3,"file":"Icon.js","names":["Icon","action","headline","level","paragraph","small","value","others","React","createElement","Primitive","role","tag","className","styles","style","icon","undefined","displayName","propTypes","PropTypes","bool","number","func","isRequired"],"sources":["../../../src/primitives/Icon/Icon.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Icon.module.css';\n\nconst Icon = ({ action, headline, level = 3, paragraph, small, value, ...others }) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'icon',\n      tag: 'span',\n      className: styles(\n        style.icon,\n        headline\n          ? style[`headline-${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : paragraph\n          ? style.paragraph\n          : style[`headline-${level}`],\n        others.className,\n      ),\n    },\n    value ? React.createElement(value) : undefined,\n  );\n\nIcon.displayName = 'Primitive:Icon';\n\nIcon.propTypes = {\n  action: PropTypes.bool,\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  paragraph: PropTypes.bool,\n  small: PropTypes.bool,\n  value: PropTypes.func.isRequired,\n};\n\nexport { Icon };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,GAAG,SAAPA,IAAI;EAAA,IAAMC,MAAM,QAANA,MAAM;IAAEC,QAAQ,QAARA,QAAQ;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAEC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAKC,MAAM;EAAA,oBAC7EC,cAAK,CAACC,aAAa,CACjBC,oBAAS,kCAEJH,MAAM;IACTI,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,MAAM;IAC3BC,GAAG,EAAE,MAAM;IACXC,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACVd,QAAQ,GACJa,mBAAK,oBAAaZ,KAAK,EAAG,GAC1BF,MAAM,GACNc,mBAAK,CAACd,MAAM,GACZI,KAAK,GACLU,mBAAK,CAACV,KAAK,GACXD,SAAS,GACTW,mBAAK,CAACX,SAAS,GACfW,mBAAK,oBAAaZ,KAAK,EAAG,EAC9BI,MAAM,CAACM,SAAS;EACjB,IAEHP,KAAK,gBAAGE,cAAK,CAACC,aAAa,CAACH,KAAK,CAAC,GAAGW,SAAS,CAC/C;AAAA;AAAC;AAEJjB,IAAI,CAACkB,WAAW,GAAG,gBAAgB;AAEnClB,IAAI,CAACmB,SAAS,GAAG;EACflB,MAAM,EAAEmB,kBAAS,CAACC,IAAI;EACtBnB,QAAQ,EAAEkB,kBAAS,CAACC,IAAI;EACxBlB,KAAK,EAAEiB,kBAAS,CAACE,MAAM;EACvBlB,SAAS,EAAEgB,kBAAS,CAACC,IAAI;EACzBhB,KAAK,EAAEe,kBAAS,CAACC,IAAI;EACrBf,KAAK,EAAEc,kBAAS,CAACG,IAAI,CAACC;AACxB,CAAC"}

package/build/primitives/Icon/Icon.stories.js

@@ -1,18 +1,13 @@
 "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
 });
 exports.default = exports.Story = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ = require("./");
-var _Story$args;
 var _excluded = ["value"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -29,14 +24,17 @@ var Story = function Story(_ref) {
 };
 exports.Story = Story;
 Story.storyName = 'Icon';
-Story.args = (_Story$args = {
+Story.args = {
   action: false,
   headline: false,
   level: 3,
   paragraph: false,
   small: false,
-  value: undefined
-}, _defineProperty(_Story$args, 'data-testid', 'test-story'), _defineProperty(_Story$args, "style", {}), _Story$args);
+  value: undefined,
+  // inherited properties
+  testId: 'test-story',
+  style: {}
+};
 Story.argTypes = {
   value: {
     options: Object.keys(_.ICON),

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.js","names":["title","Story","value","props","ICON","storyName","args","action","headline","level","paragraph","small","undefined","argTypes","options","Object","keys","control","type","defaultValue"],"sources":["../../../src/primitives/Icon/Icon.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React from 'react';\n\nimport { Icon, ICON } from './';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ value, ...props }) => <Icon {...props} value={ICON[value]} />;\n\nStory.storyName = 'Icon';\n\nStory.args = {\n  action: false,\n  headline: false,\n  level: 3,\n  paragraph: false,\n  small: false,\n  value: undefined,\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  value: {\n    options: Object.keys(ICON),\n    control: { type: 'select' },\n    defaultValue: Object.keys(ICON)[0],\n  },\n};\n"],"mappings":";;;;;;;AACA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,KAAK,QAALA,KAAK;IAAKC,KAAK;EAAA,oBAAO,6BAAC,MAAI,eAAKA,KAAK;IAAE,KAAK,EAAEC,MAAI,CAACF,KAAK;EAAE,GAAG;AAAA;AAAC;AAEtFD,KAAK,CAACI,SAAS,GAAG,MAAM;AAExBJ,KAAK,CAACK,IAAI;EACRC,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZT,KAAK,EAAEU;AAAS,gCAEf,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDX,KAAK,CAACY,QAAQ,GAAG;EACfX,KAAK,EAAE;IACLY,OAAO,EAAEC,MAAM,CAACC,IAAI,CAACZ,MAAI,CAAC;IAC1Ba,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAACZ,MAAI,CAAC,CAAC,CAAC;EACnC;AACF,CAAC"}
+{"version":3,"file":"Icon.stories.js","names":["title","Story","value","props","ICON","storyName","args","action","headline","level","paragraph","small","undefined","testId","style","argTypes","options","Object","keys","control","type","defaultValue"],"sources":["../../../src/primitives/Icon/Icon.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React from 'react';\n\nimport { Icon, ICON } from './';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ value, ...props }) => <Icon {...props} value={ICON[value]} />;\n\nStory.storyName = 'Icon';\n\nStory.args = {\n  action: false,\n  headline: false,\n  level: 3,\n  paragraph: false,\n  small: false,\n  value: undefined,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  value: {\n    options: Object.keys(ICON),\n    control: { type: 'select' },\n    defaultValue: Object.keys(ICON)[0],\n  },\n};\n"],"mappings":";;;;;;AACA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,KAAK,QAALA,KAAK;IAAKC,KAAK;EAAA,oBAAO,6BAAC,MAAI,eAAKA,KAAK;IAAE,KAAK,EAAEC,MAAI,CAACF,KAAK;EAAE,GAAG;AAAA;AAAC;AAEtFD,KAAK,CAACI,SAAS,GAAG,MAAM;AAExBJ,KAAK,CAACK,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZT,KAAK,EAAEU,SAAS;EAChB;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDb,KAAK,CAACc,QAAQ,GAAG;EACfb,KAAK,EAAE;IACLc,OAAO,EAAEC,MAAM,CAACC,IAAI,CAACd,MAAI,CAAC;IAC1Be,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAACd,MAAI,CAAC,CAAC,CAAC;EACnC;AACF,CAAC"}

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

@@ -747,7 +747,7 @@ exports[`primitive:<Icon> renders 1`] = `
 </DocumentFragment>
 `;
 
-exports[`primitive:<Icon> testID 1`] = `
+exports[`primitive:<Icon> testId 1`] = `
 <DocumentFragment>
   <span
     class="icon headline-3"

package/build/primitives/Input/Input.js

@@ -8,6 +8,7 @@ exports.Input = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../helpers");
+var _Primitive = require("../Primitive");
 var _helpers2 = require("./helpers");
 var _InputModule = _interopRequireDefault(require("./Input.module.css"));
 var _excluded = ["autoResize", "disabled", "multiLine", "type", "onChange", "onEnter", "onError", "onLeave"];
@@ -62,20 +63,23 @@ var Input = function Input(_ref) {
     ref.current.style.height = 'auto';
     ref.current.style.height = ref.current.scrollHeight + 'px';
   };
-  return /*#__PURE__*/_react.default.createElement(multiLine ? 'textarea' : 'input', _objectSpread(_objectSpread({}, others), {}, {
+  return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread(_objectSpread({}, others), {}, {
     disabled: disabled,
     ref: autoResize ? ref : undefined,
+    role: others.role || 'input',
+    tag: multiLine ? 'textarea' : 'input',
     test: undefined,
     type: !multiLine ? type : undefined,
-    value: others.value || '',
-    className: (0, _helpers.styles)(_InputModule.default.input, autoResize && multiLine && _InputModule.default.autoResize, others.className)
+    value: others.value || ''
   }, !disabled ? {
     onChange: function onChange(event) {
       return handleChange(event.target.value, event);
     },
     onFocus: onEnter,
     onBlur: onLeave
-  } : {}));
+  } : {}), {}, {
+    className: (0, _helpers.styles)(_InputModule.default.input, autoResize && multiLine && _InputModule.default.autoResize, others.className)
+  }));
 };
 exports.Input = Input;
 Input.displayName = 'Primitive:Input';

package/build/primitives/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["Input","autoResize","disabled","multiLine","type","onChange","onEnter","onError","onLeave","others","ref","useRef","useEffect","errors","getInputErrors","current","scrollHeight","clientHeight","resize","handleChange","next","event","isNaN","value","parseValue","style","height","React","createElement","undefined","test","className","styles","input","target","onFocus","onBlur","displayName","propTypes","PropTypes","bool","name","string","isRequired","func"],"sources":["../../../src/primitives/Input/Input.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef } from 'react';\n\nimport { getInputErrors, styles } from '../../helpers';\nimport { parseValue } from './helpers';\nimport style from './Input.module.css';\n\nconst Input = ({ autoResize, disabled, multiLine, type = 'text', onChange, onEnter, onError, onLeave, ...others }) => {\n  const ref = useRef(null);\n\n  useEffect(() => {\n    const errors = getInputErrors({ ...others, type });\n    if (errors && onError) onError(errors);\n\n    if (autoResize && multiLine && ref?.current) {\n      const { scrollHeight, clientHeight } = ref.current;\n      if (scrollHeight > clientHeight) resize();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleChange = (next = '', event) => {\n    if (type === 'number' && isNaN(next)) return;\n    const value = parseValue(next, type, others);\n\n    onError && onError(getInputErrors({ ...others, type, value }));\n    onChange && onChange(value || '', event);\n    if (autoResize && multiLine) resize();\n  };\n\n  const resize = () => {\n    ref.current.style.height = 'auto';\n    ref.current.style.height = ref.current.scrollHeight + 'px';\n  };\n\n  return React.createElement(multiLine ? 'textarea' : 'input', {\n    ...others,\n    disabled,\n    ref: autoResize ? ref : undefined,\n    test: undefined,\n    type: !multiLine ? type : undefined,\n    value: others.value || '',\n    className: styles(style.input, autoResize && multiLine && style.autoResize, others.className),\n    ...(!disabled\n      ? {\n          onChange: (event) => handleChange(event.target.value, event),\n          onFocus: onEnter,\n          onBlur: onLeave,\n        }\n      : {}),\n  });\n};\n\nInput.displayName = 'Primitive:Input';\n\nInput.propTypes = {\n  autoResize: PropTypes.bool,\n  disabled: PropTypes.bool,\n  multiLine: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  type: PropTypes.string,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onError: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { Input };\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["Input","autoResize","disabled","multiLine","type","onChange","onEnter","onError","onLeave","others","ref","useRef","useEffect","errors","getInputErrors","current","scrollHeight","clientHeight","resize","handleChange","next","event","isNaN","value","parseValue","style","height","React","createElement","Primitive","undefined","role","tag","test","target","onFocus","onBlur","className","styles","input","displayName","propTypes","PropTypes","bool","name","string","isRequired","func"],"sources":["../../../src/primitives/Input/Input.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef } from 'react';\n\nimport { getInputErrors, styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { parseValue } from './helpers';\nimport style from './Input.module.css';\n\nconst Input = ({ autoResize, disabled, multiLine, type = 'text', onChange, onEnter, onError, onLeave, ...others }) => {\n  const ref = useRef(null);\n\n  useEffect(() => {\n    const errors = getInputErrors({ ...others, type });\n    if (errors && onError) onError(errors);\n\n    if (autoResize && multiLine && ref?.current) {\n      const { scrollHeight, clientHeight } = ref.current;\n      if (scrollHeight > clientHeight) resize();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleChange = (next = '', event) => {\n    if (type === 'number' && isNaN(next)) return;\n    const value = parseValue(next, type, others);\n\n    onError && onError(getInputErrors({ ...others, type, value }));\n    onChange && onChange(value || '', event);\n    if (autoResize && multiLine) resize();\n  };\n\n  const resize = () => {\n    ref.current.style.height = 'auto';\n    ref.current.style.height = ref.current.scrollHeight + 'px';\n  };\n\n  return React.createElement(Primitive, {\n    ...others,\n    disabled,\n    ref: autoResize ? ref : undefined,\n    role: others.role || 'input',\n    tag: multiLine ? 'textarea' : 'input',\n    test: undefined,\n    type: !multiLine ? type : undefined,\n    value: others.value || '',\n    ...(!disabled\n      ? {\n          onChange: (event) => handleChange(event.target.value, event),\n          onFocus: onEnter,\n          onBlur: onLeave,\n        }\n      : {}),\n    className: styles(style.input, autoResize && multiLine && style.autoResize, others.className),\n  });\n};\n\nInput.displayName = 'Primitive:Input';\n\nInput.propTypes = {\n  autoResize: PropTypes.bool,\n  disabled: PropTypes.bool,\n  multiLine: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  type: PropTypes.string,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onError: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { Input };\n"],"mappings":"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"}

package/build/primitives/Input/Input.stories.js

@@ -7,12 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Story = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Input = require("./Input");
-var _Story$args;
 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 _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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -44,7 +40,7 @@ var Story = function Story(props) {
 };
 exports.Story = Story;
 Story.storyName = 'Input';
-Story.args = (_Story$args = {
+Story.args = {
   autoResize: false,
   disabled: false,
   multiLine: false,
@@ -71,8 +67,11 @@ Story.args = (_Story$args = {
       props[_key4] = arguments[_key4];
     }
     return (_console4 = console).log.apply(_console4, ['<Select>::onLeave'].concat(props));
-  }
-}, _defineProperty(_Story$args, 'data-testid', 'test-story'), _defineProperty(_Story$args, "style", {}), _Story$args);
+  },
+  // inherited properties
+  testId: 'test-story',
+  style: {}
+};
 Story.argTypes = {
   type: {
     options: ['text', 'password', 'number', 'email', 'date'],

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

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","storyName","args","autoResize","disabled","multiLine","name","placeholder","type","onEnter","onError","onLeave","argTypes","options","control","defaultValue"],"sources":["../../../src/primitives/Input/Input.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Input } from './Input';\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('<Input>::onChange', next, ...others);\n  };\n\n  return <Input {...props} value={value} onChange={handleChange} />;\n};\n\nStory.storyName = 'Input';\n\nStory.args = {\n  autoResize: false,\n  disabled: false,\n  multiLine: false,\n  name: 'Input',\n  placeholder: 'placeholder',\n  type: 'text',\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  ['data-testid']: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  type: {\n    options: ['text', 'password', 'number', 'email', 'date'],\n    control: { type: 'select' },\n    defaultValue: 'text',\n  },\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,GAAE;IAAA;IAA7BC,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,mBAAmB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACnD,CAAC;EAED,oBAAO,6BAAC,YAAK,eAAKN,KAAK;IAAE,KAAK,EAAEE,KAAM;IAAC,QAAQ,EAAEE;EAAa,GAAG;AACnE,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,OAAO;AAEzBV,KAAK,CAACW,IAAI;EACRC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,KAAK;EACfC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,OAAO;EACbC,WAAW,EAAE,aAAa;EAC1BC,IAAI,EAAE,MAAM;EACZC,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;EACjEmB,OAAO,EAAE;IAAA;IAAA,mCAAInB,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAO,OAAO,EAACC,GAAG,mBAAC,mBAAmB,SAAKR,KAAK,EAAC;EAAA;AAAA,gCAEhE,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDD,KAAK,CAACqB,QAAQ,GAAG;EACfJ,IAAI,EAAE;IACJK,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;IACxDC,OAAO,EAAE;MAAEN,IAAI,EAAE;IAAS,CAAC;IAC3BO,YAAY,EAAE;EAChB;AACF,CAAC"}
+{"version":3,"file":"Input.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","storyName","args","autoResize","disabled","multiLine","name","placeholder","type","onEnter","onError","onLeave","testId","style","argTypes","options","control","defaultValue"],"sources":["../../../src/primitives/Input/Input.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Input } from './Input';\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('<Input>::onChange', next, ...others);\n  };\n\n  return <Input {...props} value={value} onChange={handleChange} />;\n};\n\nStory.storyName = 'Input';\n\nStory.args = {\n  autoResize: false,\n  disabled: false,\n  multiLine: false,\n  name: 'Input',\n  placeholder: 'placeholder',\n  type: 'text',\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  type: {\n    options: ['text', 'password', 'number', 'email', 'date'],\n    control: { type: 'select' },\n    defaultValue: 'text',\n  },\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,GAAE;IAAA;IAA7BC,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,mBAAmB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACnD,CAAC;EAED,oBAAO,6BAAC,YAAK,eAAKN,KAAK;IAAE,KAAK,EAAEE,KAAM;IAAC,QAAQ,EAAEE;EAAa,GAAG;AACnE,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,OAAO;AAEzBV,KAAK,CAACW,IAAI,GAAG;EACXC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,KAAK;EACfC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,OAAO;EACbC,WAAW,EAAE,aAAa;EAC1BC,IAAI,EAAE,MAAM;EACZC,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;EACjEmB,OAAO,EAAE;IAAA;IAAA,mCAAInB,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAO,OAAO,EAACC,GAAG,mBAAC,mBAAmB,SAAKR,KAAK,EAAC;EAAA;EACjE;EACAoB,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDtB,KAAK,CAACuB,QAAQ,GAAG;EACfN,IAAI,EAAE;IACJO,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;IACxDC,OAAO,EAAE;MAAER,IAAI,EAAE;IAAS,CAAC;IAC3BS,YAAY,EAAE;EAChB;AACF,CAAC"}

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

@@ -85,7 +85,7 @@ exports[`primitive:<Input> renders 1`] = `
 </DocumentFragment>
 `;
 
-exports[`primitive:<Input> testID 1`] = `
+exports[`primitive:<Input> testId 1`] = `
 <DocumentFragment>
   <input
     class="input"

package/build/primitives/Layer/Layer.js

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../helpers");
 var _hooks = require("../../hooks");
+var _Primitive = require("../Primitive");
 var _helpers2 = require("./helpers");
 var _LayerModule = _interopRequireDefault(require("./Layer.module.css"));
 var _LayerContent = require("./LayerContent");
@@ -100,14 +101,17 @@ var Layer = function Layer(_ref) {
   var className = others.className,
     contentStyle = others.style;
   var createWrapper = className || contentStyle;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    "data-testid": others['data-testid'],
-    ref: componentRef
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
+    ref: componentRef,
+    role: others.role || 'layer',
+    tag: "span",
+    testId: others.testId
   }, children.find(function (_ref2) {
     var name = _ref2.type.name;
     return name !== _LayerContent.LayerContent.name;
-  })), (forceRender || visible) && /*#__PURE__*/_react.default.createElement("div", {
+  })), (forceRender || visible) && /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
     ref: contentRef,
+    role: others.role ? "".concat(others.role, "-content") : 'layer-content',
     className: (0, _helpers.styles)(_LayerModule.default.layer, !visible && _LayerModule.default.hidden),
     style: _objectSpread({}, position)
   }, /*#__PURE__*/_react.default.createElement(createWrapper ? 'div' : _react.default.Fragment, createWrapper ? {