@activecollab/components 1.0.415 → 2.0.0

package/dist/esm/components/SelectTrigger/Styles.js

@@ -1,40 +1,62 @@
-import styled, { css } from "styled-components";
-import { CollapseExpandSingleIcon } from "../Icons";
-import { Trigger } from "../Trigger";
-export var StyledSelectTrigger = styled(Trigger).withConfig({
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSelectTrigger = exports.StyledCaretIcon = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Icons = require("../Icons");
+var _Trigger = require("../Trigger");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledSelectTrigger = exports.StyledSelectTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
   displayName: "Styles__StyledSelectTrigger",
   componentId: "sc-9799p2-0"
-})(["display:flex;align-items:center;justify-content:space-between;border:1px solid var(--color-theme-500);padding:0 4px 0 8px;width:300px;transition:border-color 0.3s ease;background-color:var(--input-background-color);", " ", " ", " ", " ", " ", ";"], function (_ref) {
-  var disabled = _ref.disabled;
-  return disabled && css(["opacity:50%;cursor:default;"]);
-}, function (_ref2) {
-  var $invalid = _ref2.$invalid,
-    disabled = _ref2.disabled;
-  return !$invalid && !disabled && css(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
-}, function (_ref3) {
-  var $invalid = _ref3.$invalid;
-  return $invalid && css(["", " &:hover{", "}"], {
+})(["display:flex;align-items:center;justify-content:space-between;border:1px solid var(--color-theme-500);padding:0 4px 0 8px;width:300px;transition:border-color 0.3s ease;background-color:var(--input-background-color);", " ", " ", " ", " ", " ", ";"], _ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled && (0, _styledComponents.css)(["opacity:50%;cursor:default;"]);
+}, _ref2 => {
+  let {
+    $invalid,
+    disabled
+  } = _ref2;
+  return !$invalid && !disabled && (0, _styledComponents.css)(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
+}, _ref3 => {
+  let {
+    $invalid
+  } = _ref3;
+  return $invalid && (0, _styledComponents.css)(["", " &:hover{", "}"], {
     "borderColor": "var(--red-alert)"
   }, {
     "borderColor": "var(--red-alert)"
   });
-}, function (_ref4) {
-  var $size = _ref4.$size;
-  return $size === "small" && css(["height:24px;border-radius:var(--ac-br-6);"]);
-}, function (_ref5) {
-  var $size = _ref5.$size;
-  return $size === "regular" && css(["height:32px;border-radius:var(--ac-br-8);"]);
-}, function (_ref6) {
-  var $size = _ref6.$size;
-  return $size === "big" && css(["height:40px;border-radius:var(--ac-br-8);"]);
+}, _ref4 => {
+  let {
+    $size
+  } = _ref4;
+  return $size === "small" && (0, _styledComponents.css)(["height:24px;border-radius:var(--ac-br-6);"]);
+}, _ref5 => {
+  let {
+    $size
+  } = _ref5;
+  return $size === "regular" && (0, _styledComponents.css)(["height:32px;border-radius:var(--ac-br-8);"]);
+}, _ref6 => {
+  let {
+    $size
+  } = _ref6;
+  return $size === "big" && (0, _styledComponents.css)(["height:40px;border-radius:var(--ac-br-8);"]);
 });
 StyledSelectTrigger.displayName = "StyledSelectTrigger";
-export var StyledCaretIcon = styled(CollapseExpandSingleIcon).withConfig({
+const StyledCaretIcon = exports.StyledCaretIcon = (0, _styledComponents.default)(_Icons.CollapseExpandSingleIcon).withConfig({
   displayName: "Styles__StyledCaretIcon",
   componentId: "sc-9799p2-1"
-})(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""], function (_ref7) {
-  var $open = _ref7.$open;
-  return !$open && css(["transform:rotate(180deg);"]);
+})(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""], _ref7 => {
+  let {
+    $open
+  } = _ref7;
+  return !$open && (0, _styledComponents.css)(["transform:rotate(180deg);"]);
 });
 StyledCaretIcon.displayName = "StyledCaretIcon";
 //# sourceMappingURL=Styles.js.map

package/dist/esm/components/SelectTrigger/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","CollapseExpandSingleIcon","Trigger","StyledSelectTrigger","disabled","$invalid","$size","displayName","StyledCaretIcon","$open"],"sources":["../../../../src/components/SelectTrigger/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { CollapseExpandSingleIcon } from \"../Icons\";\nimport { Trigger } from \"../Trigger\";\nimport { Size } from \"./SelectTrigger\";\n\nexport const StyledSelectTrigger = styled(Trigger)<{\n  $size?: Size;\n  $invalid?: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border: 1px solid var(--color-theme-500);\n  padding: 0 4px 0 8px;\n  width: 300px;\n  transition: border-color 0.3s ease;\n  background-color: var(--input-background-color);\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      opacity: 50%;\n      cursor: default;\n    `}\n\n  ${({ $invalid, disabled }) =>\n    !$invalid &&\n    !disabled &&\n    css`\n      &:hover,\n      &:focus {\n        border-color: var(--color-primary-700);\n      }\n    `}\n\n  ${({ $invalid }) =>\n    $invalid &&\n    css`\n      ${tw`tw-border-alert`}\n\n      &:hover {\n        ${tw`tw-border-alert`}\n      }\n    `}\n\n  ${({ $size }) =>\n    $size === \"small\" &&\n    css`\n      height: 24px;\n      border-radius: var(--ac-br-6);\n    `}\n\n  ${({ $size }) =>\n    $size === \"regular\" &&\n    css`\n      height: 32px;\n      border-radius: var(--ac-br-8);\n    `}\n\n    ${({ $size }) =>\n    $size === \"big\" &&\n    css`\n      height: 40px;\n      border-radius: var(--ac-br-8);\n    `};\n`;\n\nStyledSelectTrigger.displayName = \"StyledSelectTrigger\";\n\nexport const StyledCaretIcon = styled(CollapseExpandSingleIcon)<{\n  $open: boolean;\n}>`\n  margin-left: 8px;\n  flex-shrink: 0;\n  transition: transform 200ms ease;\n\n  ${({ $open }) =>\n    !$open &&\n    css`\n      transform: rotate(180deg);\n    `}\n`;\n\nStyledCaretIcon.displayName = \"StyledCaretIcon\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,wBAAwB,QAAQ,UAAU;AACnD,SAASC,OAAO,QAAQ,YAAY;AAGpC,OAAO,IAAMC,mBAAmB,GAAGJ,MAAM,CAACG,OAAO,CAAC;EAAA;EAAA;AAAA,8PAa9C;EAAA,IAAGE,QAAQ,QAARA,QAAQ;EAAA,OACXA,QAAQ,IACRJ,GAAG,iCAGF;AAAA,GAED;EAAA,IAAGK,QAAQ,SAARA,QAAQ;IAAED,QAAQ,SAARA,QAAQ;EAAA,OACrB,CAACC,QAAQ,IACT,CAACD,QAAQ,IACTJ,GAAG,6DAKF;AAAA,GAED;EAAA,IAAGK,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,IACRL,GAAG,yBACG;IAAA;EAAgB,CAAC,EAGf;IAAA;EAAgB,CAAC,CAExB;AAAA,GAED;EAAA,IAAGM,KAAK,SAALA,KAAK;EAAA,OACRA,KAAK,KAAK,OAAO,IACjBN,GAAG,+CAGF;AAAA,GAED;EAAA,IAAGM,KAAK,SAALA,KAAK;EAAA,OACRA,KAAK,KAAK,SAAS,IACnBN,GAAG,+CAGF;AAAA,GAEC;EAAA,IAAGM,KAAK,SAALA,KAAK;EAAA,OACVA,KAAK,KAAK,KAAK,IACfN,GAAG,+CAGF;AAAA,EACJ;AAEDG,mBAAmB,CAACI,WAAW,GAAG,qBAAqB;AAEvD,OAAO,IAAMC,eAAe,GAAGT,MAAM,CAACE,wBAAwB,CAAC;EAAA;EAAA;AAAA,2EAO3D;EAAA,IAAGQ,KAAK,SAALA,KAAK;EAAA,OACR,CAACA,KAAK,IACNT,GAAG,+BAEF;AAAA,EACJ;AAEDQ,eAAe,CAACD,WAAW,GAAG,iBAAiB"}
+{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_Icons","_Trigger","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledSelectTrigger","exports","styled","Trigger","withConfig","displayName","componentId","_ref","disabled","css","_ref2","$invalid","_ref3","_ref4","$size","_ref5","_ref6","StyledCaretIcon","CollapseExpandSingleIcon","_ref7","$open"],"sources":["../../../../src/components/SelectTrigger/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { CollapseExpandSingleIcon } from \"../Icons\";\nimport { Trigger } from \"../Trigger\";\nimport { Size } from \"./SelectTrigger\";\n\nexport const StyledSelectTrigger = styled(Trigger)<{\n  $size?: Size;\n  $invalid?: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border: 1px solid var(--color-theme-500);\n  padding: 0 4px 0 8px;\n  width: 300px;\n  transition: border-color 0.3s ease;\n  background-color: var(--input-background-color);\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      opacity: 50%;\n      cursor: default;\n    `}\n\n  ${({ $invalid, disabled }) =>\n    !$invalid &&\n    !disabled &&\n    css`\n      &:hover,\n      &:focus {\n        border-color: var(--color-primary-700);\n      }\n    `}\n\n  ${({ $invalid }) =>\n    $invalid &&\n    css`\n      ${tw`tw-border-alert`}\n\n      &:hover {\n        ${tw`tw-border-alert`}\n      }\n    `}\n\n  ${({ $size }) =>\n    $size === \"small\" &&\n    css`\n      height: 24px;\n      border-radius: var(--ac-br-6);\n    `}\n\n  ${({ $size }) =>\n    $size === \"regular\" &&\n    css`\n      height: 32px;\n      border-radius: var(--ac-br-8);\n    `}\n\n    ${({ $size }) =>\n    $size === \"big\" &&\n    css`\n      height: 40px;\n      border-radius: var(--ac-br-8);\n    `};\n`;\n\nStyledSelectTrigger.displayName = \"StyledSelectTrigger\";\n\nexport const StyledCaretIcon = styled(CollapseExpandSingleIcon)<{\n  $open: boolean;\n}>`\n  margin-left: 8px;\n  flex-shrink: 0;\n  transition: transform 200ms ease;\n\n  ${({ $open }) =>\n    !$open &&\n    css`\n      transform: rotate(180deg);\n    `}\n`;\n\nStyledCaretIcon.displayName = \"StyledCaretIcon\";\n"],"mappings":"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"}

package/dist/esm/components/SelectTrigger/index.js

@@ -1,2 +1,17 @@
-export * from "./SelectTrigger";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _SelectTrigger = require("./SelectTrigger");
+Object.keys(_SelectTrigger).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SelectTrigger[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SelectTrigger[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/dist/esm/components/SelectTrigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/SelectTrigger/index.ts"],"sourcesContent":["export * from \"./SelectTrigger\";\n"],"mappings":"AAAA,cAAc,iBAAiB"}
+{"version":3,"file":"index.js","names":["_SelectTrigger","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../src/components/SelectTrigger/index.ts"],"sourcesContent":["export * from \"./SelectTrigger\";\n"],"mappings":";;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,cAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,cAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,cAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}

package/dist/esm/components/Sheet/Sheet.js

@@ -1,103 +1,95 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
-import React, { useCallback, useEffect, forwardRef, useState, useImperativeHandle } from "react";
-import { Transition } from "react-transition-group";
-import { Window } from "../Window";
-import classnames from "classnames";
-import { StyledAnimatedSpan, StyledCssTransition, StyledSheetIcons, StyledSheetWrapper, StyledSheetWrapperPaper } from "./Styles";
-import { Overlay } from "../Overlay";
-export var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    onClose = _ref.onClose,
-    _ref$controls = _ref.controls,
-    controls = _ref$controls === void 0 ? [] : _ref$controls,
-    _ref$open = _ref.open,
-    defaultOpen = _ref$open === void 0 ? false : _ref$open,
-    _ref$animation = _ref.animation,
-    animation = _ref$animation === void 0 ? "top" : _ref$animation,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? "center" : _ref$position,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "normal" : _ref$mode,
-    _ref$disableFocusLock = _ref.disableFocusLock,
-    disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
-    _ref$disableScrollLoc = _ref.disableScrollLock,
-    disableScrollLock = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
-    _ref$disableBackgroun = _ref.disableBackgroundColor,
-    disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
-    bodyStyle = _ref.bodyStyle,
-    bodyClassName = _ref.bodyClassName,
-    _ref$disableBackgroun2 = _ref.disableBackgroundClick,
-    disableBackgroundClick = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = useState(defaultOpen),
-    open = _useState[0],
-    setOpen = _useState[1];
-  var _useState2 = useState(true),
-    exited = _useState2[0],
-    setExited = _useState2[1];
-  useEffect(function () {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Sheet = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactTransitionGroup = require("react-transition-group");
+var _Window = require("../Window");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Styles = require("./Styles");
+var _Overlay = require("../Overlay");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Sheet = exports.Sheet = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    onClose,
+    controls = [],
+    open: defaultOpen = false,
+    animation = "top",
+    position = "center",
+    mode = "normal",
+    disableFocusLock = false,
+    disableScrollLock = false,
+    disableBackgroundColor = false,
+    bodyStyle,
+    bodyClassName,
+    disableBackgroundClick = false,
+    ...rest
+  } = _ref;
+  const [open, setOpen] = (0, _react.useState)(defaultOpen);
+  const [exited, setExited] = (0, _react.useState)(true);
+  (0, _react.useEffect)(() => {
     setOpen(defaultOpen);
   }, [defaultOpen]);
-  var handleEnter = useCallback(function () {
+  const handleEnter = (0, _react.useCallback)(() => {
     setExited(false);
   }, []);
-  var handleExited = useCallback(function () {
+  const handleExited = (0, _react.useCallback)(() => {
     setExited(true);
     typeof onClose === "function" && onClose();
   }, [onClose]);
-  var handleClose = useCallback(function () {
+  const handleClose = (0, _react.useCallback)(() => {
     setOpen(false);
   }, []);
-  var handleBackgroundClick = useCallback(function (event) {
+  const handleBackgroundClick = (0, _react.useCallback)(event => {
     if (!disableBackgroundClick) {
       event.preventDefault();
       handleClose();
     }
   }, [disableBackgroundClick, handleClose]);
-  useImperativeHandle(ref, function () {
-    return {
-      close: handleClose
-    };
-  });
+  (0, _react.useImperativeHandle)(ref, () => ({
+    close: handleClose
+  }));
   if (!open && exited) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Window, _extends({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Window.Window, (0, _extends2.default)({}, rest, {
     onClose: handleClose,
     disableFocusLock: disableFocusLock,
     disableScrollLock: disableScrollLock
-  }), open ? /*#__PURE__*/React.createElement(Overlay, {
+  }), open ? /*#__PURE__*/_react.default.createElement(_Overlay.Overlay, {
     onClick: handleBackgroundClick,
     disableBackgroundColor: disableBackgroundColor
-  }) : null, /*#__PURE__*/React.createElement(StyledSheetWrapper, {
-    className: classnames("c-sheet__wrapper", bodyClassName),
+  }) : null, /*#__PURE__*/_react.default.createElement(_Styles.StyledSheetWrapper, {
+    className: (0, _classnames.default)("c-sheet__wrapper", bodyClassName),
     style: bodyStyle,
     $position: position,
     $mode: mode
-  }, controls.length ? /*#__PURE__*/React.createElement(StyledSheetIcons, null, controls.map(function (item, index) {
-    var maxDurationIn = 4; // max duration 4 for 400ms, shorten .4s
-    var maxDurationOut = 2; // max duration 2 for 200ms, shorten .2s
-    var control = index + 1;
-    var durationOut = controls.length > maxDurationOut ? maxDurationOut : maxDurationOut - control;
-    var durationIn = control >= maxDurationIn ? 1 : control;
-    return /*#__PURE__*/React.createElement(Transition, {
+  }, controls.length ? /*#__PURE__*/_react.default.createElement(_Styles.StyledSheetIcons, null, controls.map((item, index) => {
+    const maxDurationIn = 4; // max duration 4 for 400ms, shorten .4s
+    const maxDurationOut = 2; // max duration 2 for 200ms, shorten .2s
+    const control = index + 1;
+    const durationOut = controls.length > maxDurationOut ? maxDurationOut : maxDurationOut - control;
+    const durationIn = control >= maxDurationIn ? 1 : control;
+    return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
       appear: true,
       in: open,
       timeout: maxDurationIn * 100,
-      key: "c-sheet-control-" + index
-    }, function (state) {
-      return /*#__PURE__*/React.createElement(StyledAnimatedSpan, {
-        $state: state,
-        $mode: mode,
-        $maxDurationIn: maxDurationIn / 10,
-        $maxDurationOut: maxDurationOut / 10,
-        $durationOut: durationOut / 10,
-        $durationIn: durationIn / 10
-      }, item);
-    });
-  })) : null, /*#__PURE__*/React.createElement(StyledCssTransition, {
+      key: `c-sheet-control-${index}`
+    }, state => /*#__PURE__*/_react.default.createElement(_Styles.StyledAnimatedSpan, {
+      $state: state,
+      $mode: mode,
+      $maxDurationIn: maxDurationIn / 10,
+      $maxDurationOut: maxDurationOut / 10,
+      $durationOut: durationOut / 10,
+      $durationIn: durationIn / 10
+    }, item));
+  })) : null, /*#__PURE__*/_react.default.createElement(_Styles.StyledCssTransition, {
     appear: true,
     in: open,
     timeout: 400,
@@ -105,7 +97,7 @@ export var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     $direction: animation,
     onEnter: handleEnter,
     onExited: handleExited
-  }, /*#__PURE__*/React.createElement(StyledSheetWrapperPaper, {
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledSheetWrapperPaper, {
     paperClass: "c-sheet__wrapper__paper"
   }, children))));
 });

package/dist/esm/components/Sheet/Sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.js","names":["React","useCallback","useEffect","forwardRef","useState","useImperativeHandle","Transition","Window","classnames","StyledAnimatedSpan","StyledCssTransition","StyledSheetIcons","StyledSheetWrapper","StyledSheetWrapperPaper","Overlay","Sheet","ref","children","onClose","controls","open","defaultOpen","animation","position","mode","disableFocusLock","disableScrollLock","disableBackgroundColor","bodyStyle","bodyClassName","disableBackgroundClick","rest","setOpen","exited","setExited","handleEnter","handleExited","handleClose","handleBackgroundClick","event","preventDefault","close","length","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","state","displayName"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  forwardRef,\n  HTMLAttributes,\n  useState,\n  CSSProperties,\n  ReactElement,\n  MouseEvent,\n  useImperativeHandle,\n} from \"react\";\n\nimport { Transition } from \"react-transition-group\";\nimport { Window } from \"../Window\";\nimport classnames from \"classnames\";\nimport {\n  StyledAnimatedSpan,\n  StyledCssTransition,\n  StyledSheetIcons,\n  StyledSheetWrapper,\n  StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { Overlay } from \"../Overlay\";\n\ninterface ISheet {\n  onClose?: () => void;\n  controls?: JSX.Element[];\n  open?: boolean;\n  animation?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  position?: \"center\" | \"left\" | \"right\";\n  mode?: \"normal\" | \"stretch\";\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  disableBackgroundColor?: boolean;\n  bodyStyle?: CSSProperties;\n  bodyClassName?: string;\n  disableBackgroundClick?: boolean;\n}\n\nexport interface SheetMethods {\n  close: () => void;\n}\n\nexport const Sheet = forwardRef<\n  SheetMethods,\n  ISheet & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      onClose,\n      controls = [],\n      open: defaultOpen = false,\n      animation = \"top\",\n      position = \"center\",\n      mode = \"normal\",\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundColor = false,\n      bodyStyle,\n      bodyClassName,\n      disableBackgroundClick = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      typeof onClose === \"function\" && onClose();\n    }, [onClose]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n    }, []);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          handleClose();\n        }\n      },\n      [disableBackgroundClick, handleClose]\n    );\n\n    useImperativeHandle(ref, () => ({\n      close: handleClose,\n    }));\n\n    if (!open && exited) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n      >\n        {open ? (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        ) : null}\n        <StyledSheetWrapper\n          className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n          style={bodyStyle}\n          $position={position}\n          $mode={mode}\n        >\n          {controls.length ? (\n            <StyledSheetIcons>\n              {controls.map((item, index) => {\n                const maxDurationIn = 4; // max duration 4 for 400ms, shorten .4s\n                const maxDurationOut = 2; // max duration 2 for 200ms, shorten .2s\n                const control = index + 1;\n                const durationOut =\n                  controls.length > maxDurationOut\n                    ? maxDurationOut\n                    : maxDurationOut - control;\n                const durationIn = control >= maxDurationIn ? 1 : control;\n                return (\n                  <Transition\n                    appear\n                    in={open}\n                    timeout={maxDurationIn * 100}\n                    key={`c-sheet-control-${index}`}\n                  >\n                    {(state): ReactElement => (\n                      <StyledAnimatedSpan\n                        $state={state}\n                        $mode={mode}\n                        $maxDurationIn={maxDurationIn / 10}\n                        $maxDurationOut={maxDurationOut / 10}\n                        $durationOut={durationOut / 10}\n                        $durationIn={durationIn / 10}\n                      >\n                        {item}\n                      </StyledAnimatedSpan>\n                    )}\n                  </Transition>\n                );\n              })}\n            </StyledSheetIcons>\n          ) : null}\n          <StyledCssTransition\n            appear\n            in={open}\n            timeout={400}\n            classNames=\"c-sheet__animation\"\n            $direction={animation}\n            onEnter={handleEnter}\n            onExited={handleExited}\n          >\n            <StyledSheetWrapperPaper paperClass=\"c-sheet__wrapper__paper\">\n              {children}\n            </StyledSheetWrapperPaper>\n          </StyledCssTransition>\n        </StyledSheetWrapper>\n      </Window>\n    );\n  }\n);\n\nSheet.displayName = \"Sheet\";\n"],"mappings":"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"}
+{"version":3,"file":"Sheet.js","names":["_react","_interopRequireWildcard","require","_reactTransitionGroup","_Window","_classnames","_interopRequireDefault","_Styles","_Overlay","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Sheet","exports","forwardRef","_ref","ref","children","onClose","controls","open","defaultOpen","animation","position","mode","disableFocusLock","disableScrollLock","disableBackgroundColor","bodyStyle","bodyClassName","disableBackgroundClick","rest","setOpen","useState","exited","setExited","useEffect","handleEnter","useCallback","handleExited","handleClose","handleBackgroundClick","event","preventDefault","useImperativeHandle","close","createElement","Window","_extends2","Overlay","onClick","StyledSheetWrapper","className","classnames","style","$position","$mode","length","StyledSheetIcons","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","Transition","appear","in","timeout","key","state","StyledAnimatedSpan","$state","$maxDurationIn","$maxDurationOut","$durationOut","$durationIn","StyledCssTransition","classNames","$direction","onEnter","onExited","StyledSheetWrapperPaper","paperClass","displayName"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  forwardRef,\n  HTMLAttributes,\n  useState,\n  CSSProperties,\n  ReactElement,\n  MouseEvent,\n  useImperativeHandle,\n} from \"react\";\n\nimport { Transition } from \"react-transition-group\";\nimport { Window } from \"../Window\";\nimport classnames from \"classnames\";\nimport {\n  StyledAnimatedSpan,\n  StyledCssTransition,\n  StyledSheetIcons,\n  StyledSheetWrapper,\n  StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { Overlay } from \"../Overlay\";\n\ninterface ISheet {\n  onClose?: () => void;\n  controls?: JSX.Element[];\n  open?: boolean;\n  animation?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  position?: \"center\" | \"left\" | \"right\";\n  mode?: \"normal\" | \"stretch\";\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  disableBackgroundColor?: boolean;\n  bodyStyle?: CSSProperties;\n  bodyClassName?: string;\n  disableBackgroundClick?: boolean;\n}\n\nexport interface SheetMethods {\n  close: () => void;\n}\n\nexport const Sheet = forwardRef<\n  SheetMethods,\n  ISheet & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      onClose,\n      controls = [],\n      open: defaultOpen = false,\n      animation = \"top\",\n      position = \"center\",\n      mode = \"normal\",\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundColor = false,\n      bodyStyle,\n      bodyClassName,\n      disableBackgroundClick = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      typeof onClose === \"function\" && onClose();\n    }, [onClose]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n    }, []);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          handleClose();\n        }\n      },\n      [disableBackgroundClick, handleClose]\n    );\n\n    useImperativeHandle(ref, () => ({\n      close: handleClose,\n    }));\n\n    if (!open && exited) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n      >\n        {open ? (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        ) : null}\n        <StyledSheetWrapper\n          className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n          style={bodyStyle}\n          $position={position}\n          $mode={mode}\n        >\n          {controls.length ? (\n            <StyledSheetIcons>\n              {controls.map((item, index) => {\n                const maxDurationIn = 4; // max duration 4 for 400ms, shorten .4s\n                const maxDurationOut = 2; // max duration 2 for 200ms, shorten .2s\n                const control = index + 1;\n                const durationOut =\n                  controls.length > maxDurationOut\n                    ? maxDurationOut\n                    : maxDurationOut - control;\n                const durationIn = control >= maxDurationIn ? 1 : control;\n                return (\n                  <Transition\n                    appear\n                    in={open}\n                    timeout={maxDurationIn * 100}\n                    key={`c-sheet-control-${index}`}\n                  >\n                    {(state): ReactElement => (\n                      <StyledAnimatedSpan\n                        $state={state}\n                        $mode={mode}\n                        $maxDurationIn={maxDurationIn / 10}\n                        $maxDurationOut={maxDurationOut / 10}\n                        $durationOut={durationOut / 10}\n                        $durationIn={durationIn / 10}\n                      >\n                        {item}\n                      </StyledAnimatedSpan>\n                    )}\n                  </Transition>\n                );\n              })}\n            </StyledSheetIcons>\n          ) : null}\n          <StyledCssTransition\n            appear\n            in={open}\n            timeout={400}\n            classNames=\"c-sheet__animation\"\n            $direction={animation}\n            onEnter={handleEnter}\n            onExited={handleExited}\n          >\n            <StyledSheetWrapperPaper paperClass=\"c-sheet__wrapper__paper\">\n              {children}\n            </StyledSheetWrapperPaper>\n          </StyledCssTransition>\n        </StyledSheetWrapper>\n      </Window>\n    );\n  }\n);\n\nSheet.displayName = \"Sheet\";\n"],"mappings":"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"}

package/dist/esm/components/Sheet/Styles.js

@@ -1,77 +1,55 @@
-import styled, { css, keyframes } from "styled-components";
-import { BoxSizingStyle } from "../BoxSizingStyle";
-import { FontStyle } from "../FontStyle";
-import { CSSTransition } from "react-transition-group";
-export var StyledSheetIcons = styled.div.withConfig({
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSheetWrapperPaper = exports.StyledSheetWrapper = exports.StyledSheetIcons = exports.StyledSheetControlsTop = exports.StyledSheetControlsCenterOut = exports.StyledSheetControlsCenterIn = exports.StyledSheetControlsBottom = exports.StyledCssTransition = exports.StyledAnimatedSpan = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _BoxSizingStyle = require("../BoxSizingStyle");
+var _FontStyle = require("../FontStyle");
+var _reactTransitionGroup = require("react-transition-group");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledSheetIcons = exports.StyledSheetIcons = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledSheetIcons",
   componentId: "sc-144eyxd-0"
 })(["display:flex;height:0;position:relative;span{position:relative;background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);cursor:pointer;border-radius:100%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;& > *{height:40px;width:40px;padding:8px;fill:var(--color-theme-600);}}"]);
 StyledSheetIcons.displayName = "StyledSheetIcons";
-export var StyledSheetWrapper = styled.div.withConfig({
+const StyledSheetWrapper = exports.StyledSheetWrapper = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledSheetWrapper",
   componentId: "sc-144eyxd-1"
-})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, function (props) {
-  return props.$mode === "stretch" ? css(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:1000px;", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;animation-fill-mode:both;}span{top:8px;}}"], StyledSheetIcons) : css(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;animation-fill-mode:both;}span{top:-48px;right:8px;}}"], StyledSheetIcons);
-}, function (props) {
-  return props.$position === "center" && css(["", ""], {
-    "marginLeft": "auto",
-    "marginRight": "auto"
-  });
-}, function (props) {
-  return props.$position === "left" && css(["", ""], {
-    "marginLeft": "0.5rem",
-    "marginRight": "auto"
-  });
-}, function (props) {
-  return props.$position === "right" && css(["", ""], {
-    "marginLeft": "auto",
-    "marginRight": "0.5rem"
-  });
-}, function (props) {
-  return props.$mode === "stretch" && props.$position !== "left" && css(["", "{span{right:48px;}}"], StyledSheetIcons);
-}, function (props) {
-  return props.$mode === "stretch" && props.$position === "left" && css(["flex-direction:row-reverse;", "{span{right:-8px;}}"], StyledSheetIcons);
-});
+})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", ""], _BoxSizingStyle.BoxSizingStyle, _FontStyle.FontStyle, props => props.$mode === "stretch" ? (0, _styledComponents.css)(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:1000px;", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;animation-fill-mode:both;}span{top:8px;}}"], StyledSheetIcons) : (0, _styledComponents.css)(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;animation-fill-mode:both;}span{top:-48px;right:8px;}}"], StyledSheetIcons), props => props.$position === "center" && (0, _styledComponents.css)(["", ""], {
+  "marginLeft": "auto",
+  "marginRight": "auto"
+}), props => props.$position === "left" && (0, _styledComponents.css)(["", ""], {
+  "marginLeft": "0.5rem",
+  "marginRight": "auto"
+}), props => props.$position === "right" && (0, _styledComponents.css)(["", ""], {
+  "marginLeft": "auto",
+  "marginRight": "0.5rem"
+}), props => props.$mode === "stretch" && props.$position !== "left" && (0, _styledComponents.css)(["", "{span{right:48px;}}"], StyledSheetIcons), props => props.$mode === "stretch" && props.$position === "left" && (0, _styledComponents.css)(["flex-direction:row-reverse;", "{span{right:-8px;}}"], StyledSheetIcons));
 StyledSheetWrapper.displayName = "StyledSheetWrapper";
-export var StyledSheetWrapperPaper = styled.div.attrs(function (props) {
-  return {
-    className: props.paperClass
-  };
-}).withConfig({
+const StyledSheetWrapperPaper = exports.StyledSheetWrapperPaper = _styledComponents.default.div.attrs(props => ({
+  className: props.paperClass
+})).withConfig({
   displayName: "Styles__StyledSheetWrapperPaper",
   componentId: "sc-144eyxd-2"
 })(["background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:6px;overflow:auto;animation:0.3s linear ease-out;", ""], {
   "flex": "1 1 auto"
 });
 StyledSheetWrapperPaper.displayName = "StyledSheetWrapperPaper";
-export var StyledSheetControlsTop = keyframes(["0%{opacity:0;transform:translateY(-200px);}100%{opacity:1;transform:translateY(0);}"]);
-export var StyledSheetControlsBottom = keyframes(["0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-200px);}"]);
-export var StyledSheetControlsCenterIn = keyframes(["0%{transform:translateY(-150px);opacity:0;}100%{transform:translateY(0);opacity:1;}"]);
-export var StyledSheetControlsCenterOut = keyframes(["0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-150px);opacity:0;}"]);
-export var StyledAnimatedSpan = styled.span.withConfig({
+const StyledSheetControlsTop = exports.StyledSheetControlsTop = (0, _styledComponents.keyframes)(["0%{opacity:0;transform:translateY(-200px);}100%{opacity:1;transform:translateY(0);}"]);
+const StyledSheetControlsBottom = exports.StyledSheetControlsBottom = (0, _styledComponents.keyframes)(["0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-200px);}"]);
+const StyledSheetControlsCenterIn = exports.StyledSheetControlsCenterIn = (0, _styledComponents.keyframes)(["0%{transform:translateY(-150px);opacity:0;}100%{transform:translateY(0);opacity:1;}"]);
+const StyledSheetControlsCenterOut = exports.StyledSheetControlsCenterOut = (0, _styledComponents.keyframes)(["0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-150px);opacity:0;}"]);
+const StyledAnimatedSpan = exports.StyledAnimatedSpan = _styledComponents.default.span.withConfig({
   displayName: "Styles__StyledAnimatedSpan",
   componentId: "sc-144eyxd-3"
-})(["background:red;", " ", " ", " ", ""], function (props) {
-  return props.$state === "entering" && css(["opacity:1;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, props.$durationIn + "s", props.$durationIn + "s") : css(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, props.$maxDurationIn + "s"));
-}, function (props) {
-  return props.$state === "entered" && css(["opacity:1;"]);
-}, function (props) {
-  return props.$state === "exiting" && css(["opacity:0;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, props.$durationOut + "s", props.$durationOut + "s") : css(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, props.$maxDurationOut + "s"));
-}, function (props) {
-  return props.$state === "exited" && css(["opacity:0;"]);
-});
+})(["background:red;", " ", " ", " ", ""], props => props.$state === "entering" && (0, _styledComponents.css)(["opacity:1;", ""], props.$mode === "stretch" ? (0, _styledComponents.css)(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, `${props.$durationIn}s`, `${props.$durationIn}s`) : (0, _styledComponents.css)(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, `${props.$maxDurationIn}s`)), props => props.$state === "entered" && (0, _styledComponents.css)(["opacity:1;"]), props => props.$state === "exiting" && (0, _styledComponents.css)(["opacity:0;", ""], props.$mode === "stretch" ? (0, _styledComponents.css)(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, `${props.$durationOut}s`, `${props.$durationOut}s`) : (0, _styledComponents.css)(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, `${props.$maxDurationOut}s`)), props => props.$state === "exited" && (0, _styledComponents.css)(["opacity:0;"]));
 StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
-export var StyledCssTransition = styled(CSSTransition).withConfig({
+const StyledCssTransition = exports.StyledCssTransition = (0, _styledComponents.default)(_reactTransitionGroup.CSSTransition).withConfig({
   displayName: "Styles__StyledCssTransition",
   componentId: "sc-144eyxd-4"
-})(["", " ", " ", " ", ""], function (props) {
-  return props.$direction === "top" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(-100%);transition:opacity 200ms,transform 200ms;}"]);
-}, function (props) {
-  return props.$direction === "bottom" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(100%);transition:opacity 200ms,transform 200ms;}"]);
-}, function (props) {
-  return props.$direction === "left" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(-100%);transition:opacity 200ms,transform 200ms;}"]);
-}, function (props) {
-  return props.$direction === "right" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(100%);transition:opacity 200ms,transform 200ms;}"]);
-});
+})(["", " ", " ", " ", ""], props => props.$direction === "top" && (0, _styledComponents.css)(["&.c-sheet__animation-enter{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(-100%);transition:opacity 200ms,transform 200ms;}"]), props => props.$direction === "bottom" && (0, _styledComponents.css)(["&.c-sheet__animation-enter{opacity:0;transform:translateY(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(100%);transition:opacity 200ms,transform 200ms;}"]), props => props.$direction === "left" && (0, _styledComponents.css)(["&.c-sheet__animation-enter{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(-100%);transition:opacity 200ms,transform 200ms;}"]), props => props.$direction === "right" && (0, _styledComponents.css)(["&.c-sheet__animation-enter{opacity:0;transform:translateX(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(100%);transition:opacity 200ms,transform 200ms;}"]));
 StyledCssTransition.displayName = "StyledCssTransition";
 //# sourceMappingURL=Styles.js.map

package/dist/esm/components/Sheet/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","keyframes","BoxSizingStyle","FontStyle","CSSTransition","StyledSheetIcons","div","displayName","StyledSheetWrapper","props","$mode","$position","StyledSheetWrapperPaper","attrs","className","paperClass","StyledSheetControlsTop","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","$direction"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport const StyledSheetIcons = styled.div`\n  display: flex;\n  height: 0;\n  position: relative;\n\n  span {\n    position: relative;\n    background-color: var(--page-paper-main);\n    box-shadow: var(--shadow-secondary);\n    cursor: pointer;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    & > * {\n      height: 40px;\n      width: 40px;\n      padding: 8px;\n      fill: var(--color-theme-600);\n    }\n  }\n`;\n\nStyledSheetIcons.displayName = \"StyledSheetIcons\";\n\ninterface IStyledSheetWrapper {\n  $position?: \"center\" | \"left\" | \"right\";\n  $mode?: \"normal\" | \"stretch\";\n}\n\nexport const StyledSheetWrapper = styled.div<IStyledSheetWrapper>`\n  ${BoxSizingStyle}\n  ${FontStyle}\n\n  position: relative;\n  max-width: 95vw;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) =>\n    props.$mode === \"stretch\"\n      ? css`\n          margin-top: 8px;\n          height: calc(100vh - 16px);\n          width: calc(100vw - 100px);\n          max-width: 1000px;\n          ${StyledSheetIcons} {\n            flex-direction: column;\n            width: 0;\n            height: calc(100vh - 32px);\n            & > * {\n              margin-bottom: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: 8px;\n            }\n          }\n        `\n      : css`\n          max-height: calc(100vh - 156px);\n          margin-top: 126px;\n          margin-bottom: 30px;\n          width: 540px;\n          flex-direction: column;\n\n          ${StyledSheetIcons} {\n            flex-direction: row-reverse;\n            & > * {\n              margin-left: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: -48px;\n              right: 8px;\n            }\n          }\n        `}\n\n  ${(props) =>\n    props.$position === \"center\" &&\n    css`\n      ${tw`tw-mx-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"left\" &&\n    css`\n      ${tw`tw-ml-2 tw-mr-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"right\" &&\n    css`\n      ${tw`tw-mr-2 tw-ml-auto`}\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position !== \"left\" &&\n    css`\n      ${StyledSheetIcons} {\n        span {\n          right: 48px;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position === \"left\" &&\n    css`\n      flex-direction: row-reverse;\n\n      ${StyledSheetIcons} {\n        span {\n          right: -8px;\n        }\n      }\n    `}\n`;\n\nStyledSheetWrapper.displayName = \"StyledSheetWrapper\";\n\ninterface IStyledSheetWrapperPaper {\n  paperClass?: string;\n}\n\nexport const StyledSheetWrapperPaper = styled.div.attrs<IStyledSheetWrapperPaper>(\n  (props) => ({\n    className: props.paperClass,\n  })\n)<IStyledSheetWrapperPaper>`\n  background-color: var(--page-paper-main);\n  color: var(--color-theme-900);\n  box-shadow: var(--shadow-primary);\n  border-radius: 6px;\n  overflow: auto;\n  animation: 0.3s linear ease-out;\n\n  ${tw`tw-flex-auto`}\n`;\n\nStyledSheetWrapperPaper.displayName = \"StyledSheetWrapperPaper\";\n\nexport const StyledSheetControlsTop = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-200px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const StyledSheetControlsBottom = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-200px);\n}\n`;\n\nexport const StyledSheetControlsCenterIn = keyframes`\n  0% {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n`;\n\nexport const StyledSheetControlsCenterOut = keyframes`\n  0% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n`;\n\ninterface IStyledAnimatedSpan {\n  $mode: string;\n  $state: string;\n  $maxDurationIn: number;\n  $maxDurationOut: number;\n  $durationOut: number;\n  $durationIn: number;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n  background: red;\n  ${(props) =>\n    props.$state === \"entering\" &&\n    css`\n      opacity: 1;\n\n      ${props.$mode === \"stretch\"\n        ? css`\n            animation-name: ${StyledSheetControlsTop};\n            animation-duration: ${`${props.$durationIn}s`};\n            animation-delay: ${`${props.$durationIn}s`};\n          `\n        : css`\n            animation-name: ${StyledSheetControlsCenterIn};\n            animation-duration: ${`${props.$maxDurationIn}s`};\n            animation-delay: 0s;\n          `}\n    `}\n\n  ${(props) =>\n    props.$state === \"entered\" &&\n    css`\n      opacity: 1;\n    `}\n\n  ${(props) =>\n    props.$state === \"exiting\" &&\n    css`\n      opacity: 0;\n\n      ${props.$mode === \"stretch\"\n        ? css`\n            animation-name: ${StyledSheetControlsBottom};\n            animation-duration: ${`${props.$durationOut}s`};\n            animation-delay: ${`${props.$durationOut}s`};\n          `\n        : css`\n            animation-name: ${StyledSheetControlsCenterOut};\n            animation-duration: ${`${props.$maxDurationOut}s`};\n            animation-delay: 0;\n          `}\n    `}\n\n  ${(props) =>\n    props.$state === \"exited\" &&\n    css`\n      opacity: 0;\n    `}\n`;\n\nStyledAnimatedSpan.displayName = \"StyledAnimatedSpan\";\n\nexport const StyledCssTransition = styled(CSSTransition)<{\n  $direction: string;\n}>`\n  ${(props) =>\n    props.$direction === \"top\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"bottom\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"left\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"right\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n`;\n\nStyledCssTransition.displayName = \"StyledCssTransition\";\n"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_reactTransitionGroup","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledSheetIcons","exports","styled","div","withConfig","displayName","componentId","StyledSheetWrapper","BoxSizingStyle","FontStyle","props","$mode","css","$position","StyledSheetWrapperPaper","attrs","className","paperClass","StyledSheetControlsTop","keyframes","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","CSSTransition","$direction"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport const StyledSheetIcons = styled.div`\n  display: flex;\n  height: 0;\n  position: relative;\n\n  span {\n    position: relative;\n    background-color: var(--page-paper-main);\n    box-shadow: var(--shadow-secondary);\n    cursor: pointer;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    & > * {\n      height: 40px;\n      width: 40px;\n      padding: 8px;\n      fill: var(--color-theme-600);\n    }\n  }\n`;\n\nStyledSheetIcons.displayName = \"StyledSheetIcons\";\n\ninterface IStyledSheetWrapper {\n  $position?: \"center\" | \"left\" | \"right\";\n  $mode?: \"normal\" | \"stretch\";\n}\n\nexport const StyledSheetWrapper = styled.div<IStyledSheetWrapper>`\n  ${BoxSizingStyle}\n  ${FontStyle}\n\n  position: relative;\n  max-width: 95vw;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) =>\n    props.$mode === \"stretch\"\n      ? css`\n          margin-top: 8px;\n          height: calc(100vh - 16px);\n          width: calc(100vw - 100px);\n          max-width: 1000px;\n          ${StyledSheetIcons} {\n            flex-direction: column;\n            width: 0;\n            height: calc(100vh - 32px);\n            & > * {\n              margin-bottom: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: 8px;\n            }\n          }\n        `\n      : css`\n          max-height: calc(100vh - 156px);\n          margin-top: 126px;\n          margin-bottom: 30px;\n          width: 540px;\n          flex-direction: column;\n\n          ${StyledSheetIcons} {\n            flex-direction: row-reverse;\n            & > * {\n              margin-left: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: -48px;\n              right: 8px;\n            }\n          }\n        `}\n\n  ${(props) =>\n    props.$position === \"center\" &&\n    css`\n      ${tw`tw-mx-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"left\" &&\n    css`\n      ${tw`tw-ml-2 tw-mr-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"right\" &&\n    css`\n      ${tw`tw-mr-2 tw-ml-auto`}\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position !== \"left\" &&\n    css`\n      ${StyledSheetIcons} {\n        span {\n          right: 48px;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position === \"left\" &&\n    css`\n      flex-direction: row-reverse;\n\n      ${StyledSheetIcons} {\n        span {\n          right: -8px;\n        }\n      }\n    `}\n`;\n\nStyledSheetWrapper.displayName = \"StyledSheetWrapper\";\n\ninterface IStyledSheetWrapperPaper {\n  paperClass?: string;\n}\n\nexport const StyledSheetWrapperPaper = styled.div.attrs<IStyledSheetWrapperPaper>(\n  (props) => ({\n    className: props.paperClass,\n  })\n)<IStyledSheetWrapperPaper>`\n  background-color: var(--page-paper-main);\n  color: var(--color-theme-900);\n  box-shadow: var(--shadow-primary);\n  border-radius: 6px;\n  overflow: auto;\n  animation: 0.3s linear ease-out;\n\n  ${tw`tw-flex-auto`}\n`;\n\nStyledSheetWrapperPaper.displayName = \"StyledSheetWrapperPaper\";\n\nexport const StyledSheetControlsTop = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-200px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const StyledSheetControlsBottom = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-200px);\n}\n`;\n\nexport const StyledSheetControlsCenterIn = keyframes`\n  0% {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n`;\n\nexport const StyledSheetControlsCenterOut = keyframes`\n  0% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n`;\n\ninterface IStyledAnimatedSpan {\n  $mode: string;\n  $state: string;\n  $maxDurationIn: number;\n  $maxDurationOut: number;\n  $durationOut: number;\n  $durationIn: number;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n  background: red;\n  ${(props) =>\n    props.$state === \"entering\" &&\n    css`\n      opacity: 1;\n\n      ${props.$mode === \"stretch\"\n        ? css`\n            animation-name: ${StyledSheetControlsTop};\n            animation-duration: ${`${props.$durationIn}s`};\n            animation-delay: ${`${props.$durationIn}s`};\n          `\n        : css`\n            animation-name: ${StyledSheetControlsCenterIn};\n            animation-duration: ${`${props.$maxDurationIn}s`};\n            animation-delay: 0s;\n          `}\n    `}\n\n  ${(props) =>\n    props.$state === \"entered\" &&\n    css`\n      opacity: 1;\n    `}\n\n  ${(props) =>\n    props.$state === \"exiting\" &&\n    css`\n      opacity: 0;\n\n      ${props.$mode === \"stretch\"\n        ? css`\n            animation-name: ${StyledSheetControlsBottom};\n            animation-duration: ${`${props.$durationOut}s`};\n            animation-delay: ${`${props.$durationOut}s`};\n          `\n        : css`\n            animation-name: ${StyledSheetControlsCenterOut};\n            animation-duration: ${`${props.$maxDurationOut}s`};\n            animation-delay: 0;\n          `}\n    `}\n\n  ${(props) =>\n    props.$state === \"exited\" &&\n    css`\n      opacity: 0;\n    `}\n`;\n\nStyledAnimatedSpan.displayName = \"StyledAnimatedSpan\";\n\nexport const StyledCssTransition = styled(CSSTransition)<{\n  $direction: string;\n}>`\n  ${(props) =>\n    props.$direction === \"top\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"bottom\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"left\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"right\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n`;\n\nStyledCssTransition.displayName = \"StyledCssTransition\";\n"],"mappings":"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"}

package/dist/esm/components/Sheet/index.js

@@ -1,2 +1,17 @@
-export * from "./Sheet";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Sheet = require("./Sheet");
+Object.keys(_Sheet).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Sheet[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Sheet[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Sheet/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Sheet/index.ts"],"sourcesContent":["export * from \"./Sheet\";\n"],"mappings":"AAAA,cAAc,SAAS"}
+{"version":3,"file":"index.js","names":["_Sheet","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../src/components/Sheet/index.ts"],"sourcesContent":["export * from \"./Sheet\";\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,MAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}