@mirai/ui 1.1.0-f → 1.1.2

package/build/primitives/Text/Text.module.css

@@ -13,11 +13,32 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.accent {
+  color: var(--mirai-ui-accent);
+}
+
+.action {
+  font-size: var(--mirai-ui-font-size-action);
+  line-height: var(--mirai-ui-line-height-action);
+}
+
 .bold {
   font-family: var(--mirai-ui-font-bold);
   font-weight: var(--mirai-ui-font-bold-weight);
 }
 
+.capitalize {
+  text-transform: lowercase;
+}
+
+.capitalize::first-letter {
+  text-transform: uppercase;
+}
+
+.error {
+  color: var(--mirai-ui-error);
+}
+
 .headline-1 {
   font-size: var(--mirai-ui-font-size-headline-1);
   line-height: var(--mirai-ui-line-height-headline-1);
@@ -33,25 +54,11 @@
   line-height: var(--mirai-ui-line-height-headline-3);
 }
 
-.headline-4 {
-  font-size: var(--mirai-ui-font-size-headline-4);
-  line-height: var(--mirai-ui-line-height-headline-4);
-}
-
 .paragraph {
   font-size: var(--mirai-ui-font-size-paragraph);
   line-height: var(--mirai-ui-line-height-paragraph);
 }
 
-.accent {
-  color: var(--mirai-ui-accent);
-}
-
-.action {
-  font-size: var(--mirai-ui-font-size-action);
-  line-height: var(--mirai-ui-line-height-action);
-}
-
 .lighten {
   color: var(--mirai-ui-content-light);
 }
@@ -61,6 +68,10 @@
   line-height: var(--mirai-ui-line-height-small);
 }
 
+.success {
+  color: var(--mirai-ui-success);
+}
+
 .tiny {
   font-size: var(--mirai-ui-font-size-tiny);
   line-height: var(--mirai-ui-line-height-tiny);
@@ -74,6 +85,10 @@
   text-transform: uppercase;
 }
 
+.warning {
+  color: var(--mirai-ui-warning);
+}
+
 .wide {
   width: 100%;
 }

package/build/primitives/Text/Text.stories.js

@@ -28,16 +28,20 @@ Story.args = {
   accent: false,
   action: false,
   bold: false,
+  capitalize: false,
   children: 'children',
   childrenMarkdown: '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',
+  error: false,
   headline: false,
   level: 3,
   lighten: false,
   small: false,
+  success: false,
   tag: 'span',
   tiny: false,
   underline: false,
   upperCase: false,
+  warning: false,
   wide: false,
   // inherited properties
   testId: 'test-story',

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

@@ -1 +1 @@
-{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","action","bold","children","headline","level","lighten","small","tag","tiny","underline","upperCase","wide","testId","style","argTypes"],"sources":["../../../src/primitives/Text/Text.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from './Text';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ childrenMarkdown, ...props }) => (\n  <>\n    <Text {...props} />\n    <Text {...props} children={childrenMarkdown} />\n  </>\n);\n\nStory.storyName = 'Text';\n\nStory.args = {\n  accent: false,\n  action: false,\n  bold: false,\n  children: 'children',\n  childrenMarkdown:\n    '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',\n  headline: false,\n  level: 3,\n  lighten: false,\n  small: false,\n  tag: 'span',\n  tiny: false,\n  underline: false,\n  upperCase: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,gBAAgB,QAAhBA,gBAAgB;IAAKC,KAAK;EAAA,oBAChD,yEACE,6BAAC,UAAI,EAAKA,KAAK,CAAI,eACnB,6BAAC,UAAI,eAAKA,KAAK;IAAE,QAAQ,EAAED;EAAiB,GAAG,CAC9C;AAAA,CACJ;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,MAAM;AAExBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,UAAU;EACpBP,gBAAgB,EACd,8HAA8H;EAChIQ,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,OAAO,EAAE,KAAK;EACdC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,KAAK;EACXC,SAAS,EAAE,KAAK;EAChBC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDnB,KAAK,CAACoB,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","action","bold","capitalize","children","error","headline","level","lighten","small","success","tag","tiny","underline","upperCase","warning","wide","testId","style","argTypes"],"sources":["../../../src/primitives/Text/Text.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from './Text';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ childrenMarkdown, ...props }) => (\n  <>\n    <Text {...props} />\n    <Text {...props} children={childrenMarkdown} />\n  </>\n);\n\nStory.storyName = 'Text';\n\nStory.args = {\n  accent: false,\n  action: false,\n  bold: false,\n  capitalize: false,\n  children: 'children',\n  childrenMarkdown:\n    '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',\n  error: false,\n  headline: false,\n  level: 3,\n  lighten: false,\n  small: false,\n  success: false,\n  tag: 'span',\n  tiny: false,\n  underline: false,\n  upperCase: false,\n  warning: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,gBAAgB,QAAhBA,gBAAgB;IAAKC,KAAK;EAAA,oBAChD,yEACE,6BAAC,UAAI,EAAKA,KAAK,CAAI,eACnB,6BAAC,UAAI,eAAKA,KAAK;IAAE,QAAQ,EAAED;EAAiB,GAAG,CAC9C;AAAA,CACJ;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,MAAM;AAExBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,UAAU;EACpBR,gBAAgB,EACd,8HAA8H;EAChIS,KAAK,EAAE,KAAK;EACZC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,OAAO,EAAE,KAAK;EACdC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,KAAK;EACXC,SAAS,EAAE,KAAK;EAChBC,SAAS,EAAE,KAAK;EAChBC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDvB,KAAK,CAACwB,QAAQ,GAAG,CAAC,CAAC"}

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

@@ -2,107 +2,127 @@
 
 exports[`primitive:<Text> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_text
+  <span
     class="text paragraph mirai"
   >
     Lorem Ipsum
-  </ui_text>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:accent 1`] = `
 <DocumentFragment>
-  <ui_text
+  <span
     class="text accent paragraph"
   >
     Lorem Ipsum
-  </ui_text>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:action 1`] = `
 <DocumentFragment>
-  <ui_text
+  <span
     class="text action"
   >
     Lorem Ipsum
-  </ui_text>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:bold 1`] = `
 <DocumentFragment>
-  <ui_text
+  <span
     class="text bold paragraph"
   >
     Lorem Ipsum
-  </ui_text>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Text> prop:capitalize 1`] = `
+<DocumentFragment>
+  <span
+    class="text capitalize paragraph"
+  >
+    Lorem Ipsum
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Text> prop:error 1`] = `
+<DocumentFragment>
+  <span
+    class="text error paragraph"
+  >
+    Lorem Ipsum
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:headline & level:1 1`] = `
 <DocumentFragment>
-  <ui_h1
+  <h1
     class="text headline-1"
   >
     Lorem Ipsum
-  </ui_h1>
+  </h1>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:headline & level:2 1`] = `
 <DocumentFragment>
-  <ui_h2
+  <h2
     class="text headline-2"
   >
     Lorem Ipsum
-  </ui_h2>
+  </h2>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:headline & level:3 1`] = `
 <DocumentFragment>
-  <ui_h3
+  <h3
     class="text headline-3"
   >
     Lorem Ipsum
-  </ui_h3>
+  </h3>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:headline & level:4 1`] = `
 <DocumentFragment>
-  <ui_h4
+  <h4
     class="text headline-4"
   >
     Lorem Ipsum
-  </ui_h4>
+  </h4>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:headline 1`] = `
 <DocumentFragment>
-  <ui_h3
+  <h3
     class="text headline-3"
   >
     Lorem Ipsum
-  </ui_h3>
+  </h3>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:lighten 1`] = `
 <DocumentFragment>
-  <ui_text
+  <span
     class="text paragraph lighten"
   >
     Lorem Ipsum
-  </ui_text>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:markdown 1`] = `
 <DocumentFragment>
-  <ui_text
+  <span
     class="text paragraph"
   >
     <span
@@ -116,87 +136,107 @@ exports[`primitive:<Text> prop:markdown 1`] = `
     >
       Ipsum
     </span>
-  </ui_text>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:small 1`] = `
 <DocumentFragment>
-  <ui_text
+  <span
     class="text small"
   >
     Lorem Ipsum
-  </ui_text>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Text> prop:success 1`] = `
+<DocumentFragment>
+  <span
+    class="text paragraph success"
+  >
+    Lorem Ipsum
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:tag 1`] = `
 <DocumentFragment>
-  <ui_tag
+  <p
     class="text paragraph"
   >
     Lorem Ipsum
-  </ui_tag>
+  </p>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:tiny 1`] = `
 <DocumentFragment>
-  <ui_text
+  <span
     class="text tiny"
   >
     Lorem Ipsum
-  </ui_text>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:underline 1`] = `
 <DocumentFragment>
-  <ui_text
+  <span
     class="text paragraph underline"
   >
     Lorem Ipsum
-  </ui_text>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:upperCase 1`] = `
 <DocumentFragment>
-  <ui_text
+  <span
     class="text paragraph upperCase"
   >
     Lorem Ipsum
-  </ui_text>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Text> prop:warning 1`] = `
+<DocumentFragment>
+  <span
+    class="text paragraph warning"
+  >
+    Lorem Ipsum
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> prop:wide 1`] = `
 <DocumentFragment>
-  <ui_text
+  <span
     class="text paragraph wide"
   >
     Lorem Ipsum
-  </ui_text>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> renders 1`] = `
 <DocumentFragment>
-  <ui_text
+  <span
     class="text paragraph"
   >
     Lorem Ipsum
-  </ui_text>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Text> testId 1`] = `
 <DocumentFragment>
-  <ui_text
+  <span
     class="text paragraph"
     data-testid="mirai"
   >
     Lorem Ipsum
-  </ui_text>
+  </span>
 </DocumentFragment>
 `;

package/build/primitives/View/View.js

@@ -26,7 +26,7 @@ var View = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     forceRow = _ref$forceRow === void 0 ? false : _ref$forceRow,
     row = _ref.row,
     _ref$tag = _ref.tag,
-    tag = _ref$tag === void 0 ? 'view' : _ref$tag,
+    tag = _ref$tag === void 0 ? 'div' : _ref$tag,
     wide = _ref.wide,
     others = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread({}, others), {}, {

package/build/primitives/View/View.js.map

@@ -1 +1 @@
-{"version":3,"file":"View.js","names":["View","React","forwardRef","ref","children","fit","forceRow","row","tag","wide","others","createElement","Primitive","role","className","styles","style","view","displayName","propTypes","PropTypes","node","bool","string"],"sources":["../../../src/primitives/View/View.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './View.module.css';\n\nconst View = React.forwardRef(({ children, fit, forceRow = false, row, tag = 'view', wide, ...others }, ref) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      ref,\n      role: others.role || 'view',\n      tag,\n      className: styles(\n        style.view,\n        fit && style.fit,\n        row && !forceRow && style.row,\n        forceRow && style.forceRow,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    children,\n  ),\n);\n\nView.displayName = 'Primitive:View';\n\nView.propTypes = {\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  forceRow: PropTypes.bool,\n  row: PropTypes.bool,\n  tag: PropTypes.string,\n  wide: PropTypes.bool,\n};\n\nexport { View };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBAA0EC,GAAG;EAAA,IAA1EC,QAAQ,QAARA,QAAQ;IAAEC,GAAG,QAAHA,GAAG;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAEC,GAAG,QAAHA,GAAG;IAAA,gBAAEC,GAAG;IAAHA,GAAG,yBAAG,MAAM;IAAEC,IAAI,QAAJA,IAAI;IAAKC,MAAM;EAAA,oBAClGT,cAAK,CAACU,aAAa,CACjBC,oBAAS,kCAEJF,MAAM;IACTP,GAAG,EAAHA,GAAG;IACHU,IAAI,EAAEH,MAAM,CAACG,IAAI,IAAI,MAAM;IAC3BL,GAAG,EAAHA,GAAG;IACHM,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACVZ,GAAG,IAAIW,mBAAK,CAACX,GAAG,EAChBE,GAAG,IAAI,CAACD,QAAQ,IAAIU,mBAAK,CAACT,GAAG,EAC7BD,QAAQ,IAAIU,mBAAK,CAACV,QAAQ,EAC1BG,IAAI,IAAIO,mBAAK,CAACP,IAAI,EAClBC,MAAM,CAACI,SAAS;EACjB,IAEHV,QAAQ,CACT;AAAA,EACF;AAAC;AAEFJ,IAAI,CAACkB,WAAW,GAAG,gBAAgB;AAEnClB,IAAI,CAACmB,SAAS,GAAG;EACff,QAAQ,EAAEgB,kBAAS,CAACC,IAAI;EACxBhB,GAAG,EAAEe,kBAAS,CAACE,IAAI;EACnBhB,QAAQ,EAAEc,kBAAS,CAACE,IAAI;EACxBf,GAAG,EAAEa,kBAAS,CAACE,IAAI;EACnBd,GAAG,EAAEY,kBAAS,CAACG,MAAM;EACrBd,IAAI,EAAEW,kBAAS,CAACE;AAClB,CAAC"}
+{"version":3,"file":"View.js","names":["View","React","forwardRef","ref","children","fit","forceRow","row","tag","wide","others","createElement","Primitive","role","className","styles","style","view","displayName","propTypes","PropTypes","node","bool","string"],"sources":["../../../src/primitives/View/View.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './View.module.css';\n\nconst View = React.forwardRef(({ children, fit, forceRow = false, row, tag = 'div', wide, ...others }, ref) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      ref,\n      role: others.role || 'view',\n      tag,\n      className: styles(\n        style.view,\n        fit && style.fit,\n        row && !forceRow && style.row,\n        forceRow && style.forceRow,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    children,\n  ),\n);\n\nView.displayName = 'Primitive:View';\n\nView.propTypes = {\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  forceRow: PropTypes.bool,\n  row: PropTypes.bool,\n  tag: PropTypes.string,\n  wide: PropTypes.bool,\n};\n\nexport { View };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBAAyEC,GAAG;EAAA,IAAzEC,QAAQ,QAARA,QAAQ;IAAEC,GAAG,QAAHA,GAAG;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAEC,GAAG,QAAHA,GAAG;IAAA,gBAAEC,GAAG;IAAHA,GAAG,yBAAG,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAKC,MAAM;EAAA,oBACjGT,cAAK,CAACU,aAAa,CACjBC,oBAAS,kCAEJF,MAAM;IACTP,GAAG,EAAHA,GAAG;IACHU,IAAI,EAAEH,MAAM,CAACG,IAAI,IAAI,MAAM;IAC3BL,GAAG,EAAHA,GAAG;IACHM,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACVZ,GAAG,IAAIW,mBAAK,CAACX,GAAG,EAChBE,GAAG,IAAI,CAACD,QAAQ,IAAIU,mBAAK,CAACT,GAAG,EAC7BD,QAAQ,IAAIU,mBAAK,CAACV,QAAQ,EAC1BG,IAAI,IAAIO,mBAAK,CAACP,IAAI,EAClBC,MAAM,CAACI,SAAS;EACjB,IAEHV,QAAQ,CACT;AAAA,EACF;AAAC;AAEFJ,IAAI,CAACkB,WAAW,GAAG,gBAAgB;AAEnClB,IAAI,CAACmB,SAAS,GAAG;EACff,QAAQ,EAAEgB,kBAAS,CAACC,IAAI;EACxBhB,GAAG,EAAEe,kBAAS,CAACE,IAAI;EACnBhB,QAAQ,EAAEc,kBAAS,CAACE,IAAI;EACxBf,GAAG,EAAEa,kBAAS,CAACE,IAAI;EACnBd,GAAG,EAAEY,kBAAS,CAACG,MAAM;EACrBd,IAAI,EAAEW,kBAAS,CAACE;AAClB,CAAC"}

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

@@ -2,7 +2,7 @@
 
 exports[`primitive:<View> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view mirai"
   />
 </DocumentFragment>
@@ -10,19 +10,19 @@ exports[`primitive:<View> inherit:className 1`] = `
 
 exports[`primitive:<View> prop:children 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view"
   >
     <span>
       mirai
     </span>
-  </ui_view>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`primitive:<View> prop:fit 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view fit"
   />
 </DocumentFragment>
@@ -30,7 +30,7 @@ exports[`primitive:<View> prop:fit 1`] = `
 
 exports[`primitive:<View> prop:forceRow 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view forceRow"
   />
 </DocumentFragment>
@@ -38,7 +38,7 @@ exports[`primitive:<View> prop:forceRow 1`] = `
 
 exports[`primitive:<View> prop:row 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view row"
   />
 </DocumentFragment>
@@ -46,7 +46,7 @@ exports[`primitive:<View> prop:row 1`] = `
 
 exports[`primitive:<View> prop:tag 1`] = `
 <DocumentFragment>
-  <ui_tag
+  <section
     class="view"
   />
 </DocumentFragment>
@@ -54,7 +54,7 @@ exports[`primitive:<View> prop:tag 1`] = `
 
 exports[`primitive:<View> prop:wide 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view wide"
   />
 </DocumentFragment>
@@ -62,7 +62,7 @@ exports[`primitive:<View> prop:wide 1`] = `
 
 exports[`primitive:<View> renders 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view"
   />
 </DocumentFragment>
@@ -70,7 +70,7 @@ exports[`primitive:<View> renders 1`] = `
 
 exports[`primitive:<View> testId 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view"
     data-testid="mirai"
   />