@mirai/ui 1.0.248 → 1.0.249

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

@@ -139,7 +139,9 @@ exports[`component:<Button> prop:tag 1`] = `
 
 exports[`component:<Button> prop:tooltip 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable dispatcher button"
     >

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

@@ -2,13 +2,17 @@
 
 exports[`component:<Menu> inherit:className 1`] = `
 <DocumentFragment>
-  <span />
+  <span
+    class="container"
+  />
 </DocumentFragment>
 `;
 
 exports[`component:<Menu> prop:Template 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable button"
     >
@@ -20,7 +24,9 @@ exports[`component:<Menu> prop:Template 1`] = `
 
 exports[`component:<Menu> prop:children 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable button"
     >
@@ -32,7 +38,9 @@ exports[`component:<Menu> prop:children 1`] = `
 
 exports[`component:<Menu> prop:options & visible 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable button"
     >
@@ -179,7 +187,9 @@ exports[`component:<Menu> prop:options & visible 1`] = `
 
 exports[`component:<Menu> prop:options 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable button"
     >
@@ -191,7 +201,9 @@ exports[`component:<Menu> prop:options 1`] = `
 
 exports[`component:<Menu> prop:title 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable button"
     >
@@ -211,13 +223,16 @@ exports[`component:<Menu> prop:title 1`] = `
 
 exports[`component:<Menu> renders 1`] = `
 <DocumentFragment>
-  <span />
+  <span
+    class="container"
+  />
 </DocumentFragment>
 `;
 
 exports[`component:<Menu> testId 1`] = `
 <DocumentFragment>
   <span
+    class="container"
     data-testid="mirai"
   />
 </DocumentFragment>

package/build/components/Table/__tests__/__snapshots__/Table.ColumnFilter.test.js.snap

@@ -2,7 +2,9 @@
 
 exports[`component:<Table>:<ColumnFilter> inherit:className 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <div
       class="pressable"
       style="position: relative;"
@@ -127,7 +129,9 @@ exports[`component:<Table>:<ColumnFilter> inherit:className 1`] = `
 
 exports[`component:<Table>:<ColumnFilter> prop:l10n 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <div
       class="pressable"
       style="position: relative;"
@@ -252,7 +256,9 @@ exports[`component:<Table>:<ColumnFilter> prop:l10n 1`] = `
 
 exports[`component:<Table>:<ColumnFilter> prop:schema type:number 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <div
       class="pressable"
       style="position: relative;"
@@ -377,7 +383,9 @@ exports[`component:<Table>:<ColumnFilter> prop:schema type:number 1`] = `
 
 exports[`component:<Table>:<ColumnFilter> prop:schema type:text 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <div
       class="pressable"
       style="position: relative;"
@@ -502,7 +510,9 @@ exports[`component:<Table>:<ColumnFilter> prop:schema type:text 1`] = `
 
 exports[`component:<Table>:<ColumnFilter> renders 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <div
       class="pressable"
       style="position: relative;"
@@ -628,6 +638,7 @@ exports[`component:<Table>:<ColumnFilter> renders 1`] = `
 exports[`component:<Table>:<ColumnFilter> testId 1`] = `
 <DocumentFragment>
   <span
+    class="container"
     data-testid="mirai"
   >
     <div

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

@@ -110,7 +110,9 @@ exports[`component:<Table> inherit:className 1`] = `
             <span
               class="view forceRow column"
             >
-              <span>
+              <span
+                class="container"
+              >
                 <div
                   class="dispatcher tooltip"
                 >
@@ -587,7 +589,9 @@ exports[`component:<Table> prop:filter 1`] = `
                     />
                   </svg>
                 </span>
-                <span>
+                <span
+                  class="container"
+                >
                   <div
                     class="pressable"
                     style="position: relative;"
@@ -647,7 +651,9 @@ exports[`component:<Table> prop:filter 1`] = `
                     />
                   </svg>
                 </span>
-                <span>
+                <span
+                  class="container"
+                >
                   <div
                     class="pressable"
                     style="position: relative;"
@@ -707,7 +713,9 @@ exports[`component:<Table> prop:filter 1`] = `
                     />
                   </svg>
                 </span>
-                <span>
+                <span
+                  class="container"
+                >
                   <div
                     class="pressable"
                     style="position: relative;"
@@ -742,7 +750,9 @@ exports[`component:<Table> prop:filter 1`] = `
             <span
               class="view forceRow column"
             >
-              <span>
+              <span
+                class="container"
+              >
                 <div
                   class="dispatcher tooltip"
                 >
@@ -773,7 +783,9 @@ exports[`component:<Table> prop:filter 1`] = `
                     />
                   </svg>
                 </span>
-                <span>
+                <span
+                  class="container"
+                >
                   <div
                     class="pressable"
                     style="position: relative;"
@@ -833,7 +845,9 @@ exports[`component:<Table> prop:filter 1`] = `
                     />
                   </svg>
                 </span>
-                <span>
+                <span
+                  class="container"
+                >
                   <div
                     class="pressable"
                     style="position: relative;"
@@ -1121,7 +1135,9 @@ exports[`component:<Table> prop:inline (false 1`] = `
             <span
               class="view forceRow column"
             >
-              <span>
+              <span
+                class="container"
+              >
                 <div
                   class="dispatcher tooltip"
                 >
@@ -1554,7 +1570,9 @@ exports[`component:<Table> prop:onScroll 1`] = `
             <span
               class="view forceRow column"
             >
-              <span>
+              <span
+                class="container"
+              >
                 <div
                   class="dispatcher tooltip"
                 >
@@ -2088,7 +2106,9 @@ exports[`component:<Table> prop:onSelect 1`] = `
             <span
               class="view forceRow column"
             >
-              <span>
+              <span
+                class="container"
+              >
                 <div
                   class="dispatcher tooltip"
                 >
@@ -2701,7 +2721,9 @@ exports[`component:<Table> prop:pagination 1`] = `
             <span
               class="view forceRow column"
             >
-              <span>
+              <span
+                class="container"
+              >
                 <div
                   class="dispatcher tooltip"
                 >
@@ -3022,7 +3044,9 @@ exports[`component:<Table> prop:search 1`] = `
             <span
               class="view forceRow column"
             >
-              <span>
+              <span
+                class="container"
+              >
                 <div
                   class="dispatcher tooltip"
                 >
@@ -3242,7 +3266,9 @@ exports[`component:<Table> prop:selected 1`] = `
             <span
               class="view forceRow column"
             >
-              <span>
+              <span
+                class="container"
+              >
                 <div
                   class="dispatcher tooltip"
                 >
@@ -3591,7 +3617,9 @@ exports[`component:<Table> prop:sort 1`] = `
             <span
               class="view forceRow column"
             >
-              <span>
+              <span
+                class="container"
+              >
                 <div
                   class="dispatcher tooltip"
                 >
@@ -3940,7 +3968,9 @@ exports[`component:<Table> prop:store 1`] = `
                     />
                   </svg>
                 </span>
-                <span>
+                <span
+                  class="container"
+                >
                   <div
                     class="pressable"
                     style="position: relative;"
@@ -4000,7 +4030,9 @@ exports[`component:<Table> prop:store 1`] = `
                     />
                   </svg>
                 </span>
-                <span>
+                <span
+                  class="container"
+                >
                   <div
                     class="pressable"
                     style="position: relative;"
@@ -4060,7 +4092,9 @@ exports[`component:<Table> prop:store 1`] = `
                     />
                   </svg>
                 </span>
-                <span>
+                <span
+                  class="container"
+                >
                   <div
                     class="pressable"
                     style="position: relative;"
@@ -4095,7 +4129,9 @@ exports[`component:<Table> prop:store 1`] = `
             <span
               class="view forceRow column"
             >
-              <span>
+              <span
+                class="container"
+              >
                 <div
                   class="dispatcher tooltip"
                 >
@@ -4126,7 +4162,9 @@ exports[`component:<Table> prop:store 1`] = `
                     />
                   </svg>
                 </span>
-                <span>
+                <span
+                  class="container"
+                >
                   <div
                     class="pressable"
                     style="position: relative;"
@@ -4186,7 +4224,9 @@ exports[`component:<Table> prop:store 1`] = `
                     />
                   </svg>
                 </span>
-                <span>
+                <span
+                  class="container"
+                >
                   <div
                     class="pressable"
                     style="position: relative;"
@@ -4335,7 +4375,9 @@ exports[`component:<Table> renders 1`] = `
             <span
               class="view forceRow column"
             >
-              <span>
+              <span
+                class="container"
+              >
                 <div
                   class="dispatcher tooltip"
                 >
@@ -4768,7 +4810,9 @@ exports[`component:<Table> testId 1`] = `
             <span
               class="view forceRow column"
             >
-              <span>
+              <span
+                class="container"
+              >
                 <div
                   class="dispatcher tooltip"
                 >

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

@@ -3,6 +3,7 @@
 exports[` 1`] = `
 <DocumentFragment>
   <span
+    class="container"
     data-testid="onEnter"
   >
     <button
@@ -18,6 +19,7 @@ exports[` 1`] = `
 exports[` 2`] = `
 <DocumentFragment>
   <span
+    class="container"
     data-testid="onEnter"
   >
     <button
@@ -33,6 +35,7 @@ exports[` 2`] = `
 exports[` 3`] = `
 <DocumentFragment>
   <span
+    class="container"
     data-testid="onPress"
   >
     <div
@@ -52,6 +55,7 @@ exports[` 3`] = `
 exports[` 4`] = `
 <DocumentFragment>
   <span
+    class="container"
     data-testid="onPress"
   >
     <div
@@ -80,7 +84,9 @@ exports[`component:<Tooltip> inherit:className 1`] = `
 
 exports[`component:<Tooltip> prop:Template 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable button dispatcher"
     >
@@ -104,7 +110,9 @@ exports[`component:<Tooltip> prop:Template 1`] = `
 
 exports[`component:<Tooltip> prop:text 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable button dispatcher"
     >
@@ -151,6 +159,7 @@ exports[`component:<Tooltip> renders 1`] = `
 exports[`component:<Tooltip> testId 1`] = `
 <DocumentFragment>
   <span
+    class="container"
     data-testid="mirai"
   >
     <button

package/build/primitives/Layer/Layer.js

@@ -112,6 +112,7 @@ var Layer = function Layer(_ref) {
     ref: componentRef,
     role: others.role || 'layer',
     tag: "span",
+    className: _LayerModule.default.container,
     testId: others.testId
   }, children.find(function (_ref2) {
     var name = _ref2.type.name;

package/build/primitives/Layer/Layer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layer.js","names":["Layer","forceBottom","bottom","centered","propFixed","fixed","forceRender","forceLeft","left","forceRight","right","forceTop","top","timestamp","visible","onPosition","others","device","useDevice","componentRef","useRef","contentRef","useState","setFixed","position","setPosition","useLayoutEffect","content","current","ResizeObserver","observer","calcPosition","observe","unobserve","componentEl","firstChild","contentEl","componentLayout","getElementLayout","scrollTop","getScrollParent","contentLayout","modal","getModalParent","getLayerPosition","orientation","isComponentFixed","children","React","Children","map","child","className","contentStyle","style","createWrapper","role","testId","find","name","type","LayerContent","styles","layer","hidden","createElement","Fragment","undefined","displayName","propTypes","PropTypes","bool","node","number","func"],"sources":["../../../src/primitives/Layer/Layer.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Primitive } from '../Primitive';\nimport { getElementLayout, getLayerPosition, getModalParent, getScrollParent, isComponentFixed } from './helpers';\nimport style from './Layer.module.css';\nimport { LayerContent } from './LayerContent';\n\nconst Layer = ({\n  bottom: forceBottom,\n  centered,\n  fixed: propFixed,\n  forceRender = true,\n  left: forceLeft,\n  right: forceRight,\n  top: forceTop,\n  timestamp,\n  visible,\n  onPosition = () => {},\n  ...others\n}) => {\n  const device = useDevice();\n  const componentRef = useRef();\n  const contentRef = useRef();\n\n  const [fixed, setFixed] = useState();\n  const [position, setPosition] = useState();\n\n  useLayoutEffect(() => {\n    const content = contentRef?.current;\n    if (!content || typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(calcPosition);\n    observer.observe(content);\n\n    return () => observer.unobserve(content);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useLayoutEffect(\n    () => calcPosition(),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [centered, device, forceBottom, forceLeft, forceRight, forceTop, timestamp, visible],\n  );\n\n  const calcPosition = () => {\n    const { current: { firstChild: componentEl } = {} } = componentRef;\n    const { current: contentEl } = contentRef;\n\n    if (!componentEl || !contentEl) return setPosition();\n\n    const componentLayout = { ...getElementLayout(componentEl), scrollTop: getScrollParent(componentEl)?.scrollTop };\n    const contentLayout = getElementLayout(contentEl);\n    const modal = getModalParent(componentEl);\n    const {\n      left = 0,\n      top = 0,\n      orientation = {},\n    } = getLayerPosition(componentLayout, contentLayout, device, modal, {\n      centered,\n      forceBottom,\n      forceLeft,\n      forceRight,\n      forceTop,\n    });\n\n    setFixed(propFixed || isComponentFixed(componentEl));\n    setPosition({ left: `${left}px`, top: `${top}px` });\n    onPosition(orientation);\n  };\n\n  const children = React.Children.map(others.children || [], (child) => child);\n  const { className, style: contentStyle } = others;\n  const createWrapper = className || contentStyle;\n\n  return (\n    <>\n      <Primitive ref={componentRef} role={others.role || 'layer'} tag=\"span\" testId={others.testId}>\n        {children.find(({ type: { name } }) => name !== LayerContent.name)}\n      </Primitive>\n\n      {(forceRender || visible) && (\n        <Primitive\n          ref={contentRef}\n          role={others.role ? `${others.role}-content` : 'layer-content'}\n          className={styles(style.layer, fixed && style.fixed, !visible && style.hidden)}\n          style={{ ...position }}\n        >\n          {React.createElement(\n            createWrapper ? 'div' : React.Fragment,\n            createWrapper ? { className, style: contentStyle } : undefined,\n            children?.find(({ type: { name } }) => name === LayerContent.name),\n          )}\n        </Primitive>\n      )}\n    </>\n  );\n};\n\nLayer.displayName = 'Primitive:Layer';\n\nLayer.propTypes = {\n  bottom: PropTypes.bool,\n  centered: PropTypes.bool,\n  children: PropTypes.node,\n  fixed: PropTypes.bool,\n  forceRender: PropTypes.bool,\n  left: PropTypes.bool,\n  right: PropTypes.bool,\n  timestamp: PropTypes.number,\n  top: PropTypes.bool,\n  visible: PropTypes.bool,\n  onPosition: PropTypes.func,\n};\n\nexport { Layer };\n"],"mappings":"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"}
+{"version":3,"file":"Layer.js","names":["Layer","forceBottom","bottom","centered","propFixed","fixed","forceRender","forceLeft","left","forceRight","right","forceTop","top","timestamp","visible","onPosition","others","device","useDevice","componentRef","useRef","contentRef","useState","setFixed","position","setPosition","useLayoutEffect","content","current","ResizeObserver","observer","calcPosition","observe","unobserve","componentEl","firstChild","contentEl","componentLayout","getElementLayout","scrollTop","getScrollParent","contentLayout","modal","getModalParent","getLayerPosition","orientation","isComponentFixed","children","React","Children","map","child","className","contentStyle","style","createWrapper","role","container","testId","find","name","type","LayerContent","styles","layer","hidden","createElement","Fragment","undefined","displayName","propTypes","PropTypes","bool","node","number","func"],"sources":["../../../src/primitives/Layer/Layer.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Primitive } from '../Primitive';\nimport { getElementLayout, getLayerPosition, getModalParent, getScrollParent, isComponentFixed } from './helpers';\nimport style from './Layer.module.css';\nimport { LayerContent } from './LayerContent';\n\nconst Layer = ({\n  bottom: forceBottom,\n  centered,\n  fixed: propFixed,\n  forceRender = true,\n  left: forceLeft,\n  right: forceRight,\n  top: forceTop,\n  timestamp,\n  visible,\n  onPosition = () => {},\n  ...others\n}) => {\n  const device = useDevice();\n  const componentRef = useRef();\n  const contentRef = useRef();\n\n  const [fixed, setFixed] = useState();\n  const [position, setPosition] = useState();\n\n  useLayoutEffect(() => {\n    const content = contentRef?.current;\n    if (!content || typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(calcPosition);\n    observer.observe(content);\n\n    return () => observer.unobserve(content);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useLayoutEffect(\n    () => calcPosition(),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [centered, device, forceBottom, forceLeft, forceRight, forceTop, timestamp, visible],\n  );\n\n  const calcPosition = () => {\n    const { current: { firstChild: componentEl } = {} } = componentRef;\n    const { current: contentEl } = contentRef;\n\n    if (!componentEl || !contentEl) return setPosition();\n\n    const componentLayout = { ...getElementLayout(componentEl), scrollTop: getScrollParent(componentEl)?.scrollTop };\n    const contentLayout = getElementLayout(contentEl);\n    const modal = getModalParent(componentEl);\n    const {\n      left = 0,\n      top = 0,\n      orientation = {},\n    } = getLayerPosition(componentLayout, contentLayout, device, modal, {\n      centered,\n      forceBottom,\n      forceLeft,\n      forceRight,\n      forceTop,\n    });\n\n    setFixed(propFixed || isComponentFixed(componentEl));\n    setPosition({ left: `${left}px`, top: `${top}px` });\n    onPosition(orientation);\n  };\n\n  const children = React.Children.map(others.children || [], (child) => child);\n  const { className, style: contentStyle } = others;\n  const createWrapper = className || contentStyle;\n\n  return (\n    <>\n      <Primitive\n        ref={componentRef}\n        role={others.role || 'layer'}\n        tag=\"span\"\n        className={style.container}\n        testId={others.testId}\n      >\n        {children.find(({ type: { name } }) => name !== LayerContent.name)}\n      </Primitive>\n\n      {(forceRender || visible) && (\n        <Primitive\n          ref={contentRef}\n          role={others.role ? `${others.role}-content` : 'layer-content'}\n          className={styles(style.layer, fixed && style.fixed, !visible && style.hidden)}\n          style={{ ...position }}\n        >\n          {React.createElement(\n            createWrapper ? 'div' : React.Fragment,\n            createWrapper ? { className, style: contentStyle } : undefined,\n            children?.find(({ type: { name } }) => name === LayerContent.name),\n          )}\n        </Primitive>\n      )}\n    </>\n  );\n};\n\nLayer.displayName = 'Primitive:Layer';\n\nLayer.propTypes = {\n  bottom: PropTypes.bool,\n  centered: PropTypes.bool,\n  children: PropTypes.node,\n  fixed: PropTypes.bool,\n  forceRender: PropTypes.bool,\n  left: PropTypes.bool,\n  right: PropTypes.bool,\n  timestamp: PropTypes.number,\n  top: PropTypes.bool,\n  visible: PropTypes.bool,\n  onPosition: PropTypes.func,\n};\n\nexport { Layer };\n"],"mappings":"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"}

package/build/primitives/Layer/Layer.module.css

@@ -1,3 +1,7 @@
+.container {
+  width: fit-content;
+}
+
 .layer {
   z-index: var(--mirai-ui-layer-content);
 }

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

@@ -2,7 +2,9 @@
 
 exports[`primitive:<Layer> inherit:className 1`] = `
 <DocumentFragment>
-  <span />
+  <span
+    class="container"
+  />
   <div
     class="layer hidden"
   >
@@ -15,7 +17,9 @@ exports[`primitive:<Layer> inherit:className 1`] = `
 
 exports[`primitive:<Layer> renders 1`] = `
 <DocumentFragment>
-  <span />
+  <span
+    class="container"
+  />
   <div
     class="layer hidden"
   />
@@ -25,6 +29,7 @@ exports[`primitive:<Layer> renders 1`] = `
 exports[`primitive:<Layer> testId 1`] = `
 <DocumentFragment>
   <span
+    class="container"
     data-testid="mirai"
   />
   <div
@@ -35,7 +40,9 @@ exports[`primitive:<Layer> testId 1`] = `
 
 exports[`primitive:<Layer> w/ centered && visible 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable button"
     >
@@ -57,7 +64,9 @@ exports[`primitive:<Layer> w/ centered && visible 1`] = `
 
 exports[`primitive:<Layer> w/ child fixed 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable button"
       style="position: fixed;"
@@ -80,7 +89,9 @@ exports[`primitive:<Layer> w/ child fixed 1`] = `
 
 exports[`primitive:<Layer> w/ component & <LayerContent> 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable button"
     >
@@ -102,7 +113,9 @@ exports[`primitive:<Layer> w/ component & <LayerContent> 1`] = `
 
 exports[`primitive:<Layer> w/ component 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable button"
     >
@@ -118,7 +131,9 @@ exports[`primitive:<Layer> w/ component 1`] = `
 
 exports[`primitive:<Layer> w/ fixed 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable button"
     >
@@ -140,7 +155,9 @@ exports[`primitive:<Layer> w/ fixed 1`] = `
 
 exports[`primitive:<Layer> w/ forceRender={false} & <LayerContent> 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable button"
     >
@@ -152,7 +169,9 @@ exports[`primitive:<Layer> w/ forceRender={false} & <LayerContent> 1`] = `
 
 exports[`primitive:<Layer> w/ visible 1`] = `
 <DocumentFragment>
-  <span>
+  <span
+    class="container"
+  >
     <button
       class="pressable button"
     >

package/package.json

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