@mirai/ui 1.0.182 → 1.0.184

package/build/components/Table/helpers/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _isChecked = require("./isChecked");
+Object.keys(_isChecked).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _isChecked[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _isChecked[key];
+    }
+  });
+});
 var _select = require("./select");
 Object.keys(_select).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/build/components/Table/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Table/helpers/index.js"],"sourcesContent":["export * from './select';\nexport * from './storage';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Table/helpers/index.js"],"sourcesContent":["export * from './isChecked';\nexport * from './select';\nexport * from './storage';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/components/Table/helpers/isChecked.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isChecked = void 0;
+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); }
+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."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var TYPES = ['string', 'number', 'boolean'];
+var reduce = function reduce() {
+  var row = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return JSON.stringify(Object.entries(row).reduce(function (result, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    if (TYPES.includes(_typeof(value))) result[key] = value;
+    return result;
+  }, {}));
+};
+var isChecked = function isChecked(row) {
+  var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var reducedRow = reduce(row);
+  return !!values.find(function (item) {
+    return reduce(item) === reducedRow;
+  });
+};
+exports.isChecked = isChecked;
+//# sourceMappingURL=isChecked.js.map

package/build/components/Table/helpers/isChecked.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isChecked.js","names":["TYPES","reduce","row","JSON","stringify","Object","entries","result","key","value","includes","isChecked","values","reducedRow","find","item"],"sources":["../../../../src/components/Table/helpers/isChecked.js"],"sourcesContent":["const TYPES = ['string', 'number', 'boolean'];\n\nconst reduce = (row = {}) =>\n  JSON.stringify(\n    Object.entries(row).reduce((result, [key, value]) => {\n      if (TYPES.includes(typeof value)) result[key] = value;\n\n      return result;\n    }, {}),\n  );\n\nexport const isChecked = (row, values = []) => {\n  const reducedRow = reduce(row);\n\n  return !!values.find((item) => reduce(item) === reducedRow);\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAMA,KAAK,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;AAE7C,IAAMC,MAAM,GAAG,SAATA,MAAM;EAAA,IAAIC,GAAG,uEAAG,CAAC,CAAC;EAAA,OACtBC,IAAI,CAACC,SAAS,CACZC,MAAM,CAACC,OAAO,CAACJ,GAAG,CAAC,CAACD,MAAM,CAAC,UAACM,MAAM,QAAmB;IAAA;MAAhBC,GAAG;MAAEC,KAAK;IAC7C,IAAIT,KAAK,CAACU,QAAQ,SAAQD,KAAK,EAAC,EAAEF,MAAM,CAACC,GAAG,CAAC,GAAGC,KAAK;IAErD,OAAOF,MAAM;EACf,CAAC,EAAE,CAAC,CAAC,CAAC,CACP;AAAA;AAEI,IAAMI,SAAS,GAAG,SAAZA,SAAS,CAAIT,GAAG,EAAkB;EAAA,IAAhBU,MAAM,uEAAG,EAAE;EACxC,IAAMC,UAAU,GAAGZ,MAAM,CAACC,GAAG,CAAC;EAE9B,OAAO,CAAC,CAACU,MAAM,CAACE,IAAI,CAAC,UAACC,IAAI;IAAA,OAAKd,MAAM,CAACc,IAAI,CAAC,KAAKF,UAAU;EAAA,EAAC;AAC7D,CAAC;AAAC"}

package/build/primitives/Layer/Layer.js

@@ -13,7 +13,7 @@ var _Primitive = require("../Primitive");
 var _helpers2 = require("./helpers");
 var _LayerModule = _interopRequireDefault(require("./Layer.module.css"));
 var _LayerContent = require("./LayerContent");
-var _excluded = ["bottom", "centered", "forceRender", "left", "right", "top", "timestamp", "visible", "onPosition"];
+var _excluded = ["bottom", "centered", "fixed", "forceRender", "left", "right", "top", "timestamp", "visible", "onPosition"];
 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 }; }
@@ -33,6 +33,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Layer = function Layer(_ref) {
   var forceBottom = _ref.bottom,
     centered = _ref.centered,
+    fixed = _ref.fixed,
     _ref$forceRender = _ref.forceRender,
     forceRender = _ref$forceRender === void 0 ? true : _ref$forceRender,
     forceLeft = _ref.left,
@@ -112,7 +113,7 @@ var Layer = function Layer(_ref) {
   })), (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),
+    className: (0, _helpers.styles)(_LayerModule.default.layer, fixed && _LayerModule.default.fixed, !visible && _LayerModule.default.hidden),
     style: _objectSpread({}, position)
   }, /*#__PURE__*/_react.default.createElement(createWrapper ? 'div' : _react.default.Fragment, createWrapper ? {
     className: className,
@@ -127,6 +128,7 @@ Layer.propTypes = {
   bottom: _propTypes.default.bool,
   centered: _propTypes.default.bool,
   children: _propTypes.default.node,
+  fixed: _propTypes.default.bool,
   forceRender: _propTypes.default.bool,
   left: _propTypes.default.bool,
   right: _propTypes.default.bool,

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

@@ -1 +1 @@
-{"version":3,"file":"Layer.js","names":["Layer","forceBottom","bottom","centered","forceRender","forceLeft","left","forceRight","right","forceTop","top","timestamp","visible","onPosition","others","device","useDevice","componentRef","useRef","contentRef","useState","position","setPosition","useLayoutEffect","content","current","ResizeObserver","observer","calcPosition","observe","unobserve","componentEl","firstChild","contentEl","componentLayout","getElementLayout","scrollTop","getScrollParent","contentLayout","getLayerPosition","orientation","children","React","Children","map","child","className","contentStyle","style","createWrapper","role","testId","find","name","type","LayerContent","styles","layer","hidden","createElement","Fragment","undefined","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, getScrollParent } from './helpers';\nimport style from './Layer.module.css';\nimport { LayerContent } from './LayerContent';\n\nconst Layer = ({\n  bottom: forceBottom,\n  centered,\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 [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\n    const {\n      left = 0,\n      top = 0,\n      orientation = {},\n    } = getLayerPosition(componentLayout, contentLayout, device, {\n      centered,\n      forceBottom,\n      forceLeft,\n      forceRight,\n      forceTop,\n    });\n\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, !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.propTypes = {\n  bottom: PropTypes.bool,\n  centered: PropTypes.bool,\n  children: PropTypes.node,\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","fixed","forceRender","forceLeft","left","forceRight","right","forceTop","top","timestamp","visible","onPosition","others","device","useDevice","componentRef","useRef","contentRef","useState","position","setPosition","useLayoutEffect","content","current","ResizeObserver","observer","calcPosition","observe","unobserve","componentEl","firstChild","contentEl","componentLayout","getElementLayout","scrollTop","getScrollParent","contentLayout","getLayerPosition","orientation","children","React","Children","map","child","className","contentStyle","style","createWrapper","role","testId","find","name","type","LayerContent","styles","layer","hidden","createElement","Fragment","undefined","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, getScrollParent } from './helpers';\nimport style from './Layer.module.css';\nimport { LayerContent } from './LayerContent';\n\nconst Layer = ({\n  bottom: forceBottom,\n  centered,\n  fixed,\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 [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\n    const {\n      left = 0,\n      top = 0,\n      orientation = {},\n    } = getLayerPosition(componentLayout, contentLayout, device, {\n      centered,\n      forceBottom,\n      forceLeft,\n      forceRight,\n      forceTop,\n    });\n\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.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,8 +1,15 @@
 .layer {
-  position: absolute;
   z-index: var(--mirai-ui-layer-content);
 }
 
+.layer:not(.fixed) {
+  position: absolute;
+}
+
+.layer.fixed {
+  position: fixed;
+}
+
 .layer.hidden {
   display: none;
   visibility: hidden;

package/build/primitives/Layer/Layer.stories.js

@@ -28,6 +28,7 @@ Story.storyName = 'Layer';
 Story.args = {
   bottom: false,
   centered: false,
+  fixed: false,
   forceRender: true,
   left: false,
   right: false,

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

@@ -1 +1 @@
-{"version":3,"file":"Layer.stories.js","names":["title","Story","props","margin","storyName","args","bottom","centered","forceRender","left","right","top","visible","testId","style"],"sources":["../../../src/primitives/Layer/Layer.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Action } from '../../';\nimport { Layer } from './Layer';\nimport { LayerContent } from './LayerContent';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => (\n  <Layer {...props} className=\"children\">\n    <Action style={{ margin: '0 auto' }}>Parent element</Action>\n\n    <LayerContent>\n      <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</span>\n    </LayerContent>\n  </Layer>\n);\n\nStory.storyName = 'Layer';\n\nStory.args = {\n  bottom: false,\n  centered: false,\n  forceRender: true,\n  left: false,\n  right: false,\n  top: false,\n  visible: true,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AAA8C;AAAA;AAAA,eAE/B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,YAAK,eAAKA,KAAK;IAAE,SAAS,EAAC;EAAU,iBACpC,6BAAC,QAAM;IAAC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAS;EAAE,oBAAwB,eAE5D,6BAAC,0BAAY,qBACX,uGAAsE,CACzD,CACT;AAAA,CACT;AAAC;AAEFF,KAAK,CAACG,SAAS,GAAG,OAAO;AAEzBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,KAAK;EACfC,WAAW,EAAE,IAAI;EACjBC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,KAAK;EACVC,OAAO,EAAE,IAAI;EACb;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC"}
+{"version":3,"file":"Layer.stories.js","names":["title","Story","props","margin","storyName","args","bottom","centered","fixed","forceRender","left","right","top","visible","testId","style"],"sources":["../../../src/primitives/Layer/Layer.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Action } from '../../';\nimport { Layer } from './Layer';\nimport { LayerContent } from './LayerContent';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => (\n  <Layer {...props} className=\"children\">\n    <Action style={{ margin: '0 auto' }}>Parent element</Action>\n\n    <LayerContent>\n      <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</span>\n    </LayerContent>\n  </Layer>\n);\n\nStory.storyName = 'Layer';\n\nStory.args = {\n  bottom: false,\n  centered: false,\n  fixed: false,\n  forceRender: true,\n  left: false,\n  right: false,\n  top: false,\n  visible: true,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AAA8C;AAAA;AAAA,eAE/B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,YAAK,eAAKA,KAAK;IAAE,SAAS,EAAC;EAAU,iBACpC,6BAAC,QAAM;IAAC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAS;EAAE,oBAAwB,eAE5D,6BAAC,0BAAY,qBACX,uGAAsE,CACzD,CACT;AAAA,CACT;AAAC;AAEFF,KAAK,CAACG,SAAS,GAAG,OAAO;AAEzBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,WAAW,EAAE,IAAI;EACjBC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,KAAK;EACVC,OAAO,EAAE,IAAI;EACb;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC"}

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

@@ -93,6 +93,28 @@ exports[`primitive:<Layer> w/ component 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Layer> w/ fixed 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button"
+    >
+      Action
+    </button>
+  </span>
+  <div
+    class="layer fixed hidden"
+    style="left: 0px; top: 0px;"
+  >
+    <span
+      class="text paragraph"
+    >
+      Mirai
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Layer> w/ forceRender={false} & <LayerContent> 1`] = `
 <DocumentFragment>
   <span>

package/build/theme/default.theme.css

@@ -123,6 +123,7 @@
 
   /* Layer */
   --mirai-ui-layer-content: var(--mirai-ui-layer-XL);
+  --mirai-ui-layer-XS: -1;
   --mirai-ui-layer-S: 0;
   --mirai-ui-layer-M: 1;
   --mirai-ui-layer-L: 10;

package/package.json

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