@activecollab/components 2.0.442 → 2.0.444

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","screen","FontStyle","dialogSizes","s","m","l","xl","xxl","xxxl","MIN_GAP","MAX_DIALOG_HEIGHT","StyledDialogViewport","div","withConfig","displayName","componentId","sm","StyledDialog","props","$maxWidth","$height","StyledDialogTitle","CLOSE_OFFSET","CLOSE_RESERVE","StyledDialogTitleBar","StyledDialogTitleClose","StyledDialogContent","$scroll","StyledDialogContentDivider","StyledDialogActions"],"sources":["../../../../src/components/Dialog/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const dialogSizes = {\n  s: 440,\n  m: 540,\n  l: 700,\n  xl: 840,\n  xxl: 1000,\n  xxxl: 1120,\n} as const;\n\nexport type DialogSize = keyof typeof dialogSizes;\n\nconst MIN_GAP = \"2.5vh\";\nconst MAX_DIALOG_HEIGHT = \"95vh\";\n\n// The dialog hangs at a fixed offset while there is room below it, then grows in both directions at\n// once. Two shrinkable spacers express that: only the lower one grows, and past the crossover both\n// shrink from the same basis, so the gaps stay equal down to MIN_GAP.\nexport const StyledDialogViewport = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-left: 16px;\n  padding-right: 16px;\n  pointer-events: none;\n\n  --ac-dialog-offset: 60px;\n\n  ${screen.sm} {\n    --ac-dialog-offset: 126px;\n  }\n\n  &::before,\n  &::after {\n    content: \"\";\n    flex-shrink: 1;\n    flex-basis: var(--ac-dialog-offset);\n    min-height: ${MIN_GAP};\n  }\n\n  &::before {\n    flex-grow: 0;\n  }\n\n  &::after {\n    flex-grow: 1;\n  }\n\n  ${BoxSizingStyle}\n`;\n\nStyledDialogViewport.displayName = \"StyledDialogViewport\";\n\nexport const StyledDialog = styled.div<{\n  $maxWidth: number;\n  $height?: string;\n}>`\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  pointer-events: auto;\n  width: 100%;\n  max-width: ${(props) => props.$maxWidth}px;\n  max-height: ${MAX_DIALOG_HEIGHT};\n  background-color: var(--page-paper-main);\n  color: var(--color-theme-900);\n  box-shadow: var(--shadow-primary);\n  border-radius: 8px;\n  position: relative;\n  transition: max-width 0.2s ease, height 0.2s ease;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  ${(props) =>\n    props.$height &&\n    css`\n      height: ${props.$height};\n    `}\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\n\nStyledDialog.displayName = \"StyledDialog\";\n\nexport const StyledDialogTitle = styled.div`\n  padding: 20px 30px;\n  flex: 0 0 auto;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\nStyledDialogTitle.displayName = \"StyledDialogTitle\";\n\n// The close button hangs 8px into the title padding, so it sits nearer the dialog edge than the\n// heading does. The bar reserves the rest, which keeps the gap to the heading unchanged.\nconst CLOSE_OFFSET = 8;\nconst CLOSE_RESERVE = 44 - CLOSE_OFFSET;\n\n// The header is as tall as its heading, with or without a close button.\nexport const StyledDialogTitleBar = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding-right: ${CLOSE_RESERVE}px;\n`;\nStyledDialogTitleBar.displayName = \"StyledDialogTitleBar\";\n\nexport const StyledDialogTitleClose = styled.div`\n  position: absolute;\n  right: -${CLOSE_OFFSET}px;\n  top: 50%;\n  transform: translateY(-50%);\n  line-height: 0;\n`;\nStyledDialogTitleClose.displayName = \"StyledDialogTitleClose\";\n\nexport const StyledDialogContent = styled.div<{ $scroll: boolean }>`\n  padding: 20px 30px;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: ${(props) => (props.$scroll ? \"auto\" : \"visible\")};\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\nStyledDialogContent.displayName = \"StyledDialogContent\";\n\nexport const StyledDialogContentDivider = styled.div`\n  border-top: 1px solid var(--border-primary);\n  height: 1px;\n  flex: 0 0 auto;\n`;\nStyledDialogContentDivider.displayName = \"StyledDialogContentDivider\";\n\nexport const StyledDialogActions = styled.div`\n  padding: 20px 30px;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\nStyledDialogActions.displayName = \"StyledDialogActions\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,WAAW,GAAG;EACzBC,CAAC,EAAE,GAAG;EACNC,CAAC,EAAE,GAAG;EACNC,CAAC,EAAE,GAAG;EACNC,EAAE,EAAE,GAAG;EACPC,GAAG,EAAE,IAAI;EACTC,IAAI,EAAE;AACR,CAAU;AAIV,MAAMC,OAAO,GAAG,OAAO;AACvB,MAAMC,iBAAiB,GAAG,MAAM;;AAEhC;AACA;AACA;AACA,OAAO,MAAMC,oBAAoB,GAAGd,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kXAe1Cf,MAAM,CAACgB,EAAE,EASKP,OAAO,EAWrBV,cAAc,CACjB;AAEDY,oBAAoB,CAACG,WAAW,GAAG,sBAAsB;AAEzD,OAAO,MAAMG,YAAY,GAAGpB,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0XAStBG,KAAK,IAAKA,KAAK,CAACC,SAAS,EACzBT,iBAAiB,EAY5BQ,KAAK,IACNA,KAAK,CAACE,OAAO,IACbtB,GAAG,mBACSoB,KAAK,CAACE,OAAO,CACxB,EAEDnB,SAAS,EACTF,cAAc,CACjB;AAEDkB,YAAY,CAACH,WAAW,GAAG,cAAc;AAEzC,OAAO,MAAMO,iBAAiB,GAAGxB,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kDAIvCd,SAAS,EACTF,cAAc,CACjB;AACDsB,iBAAiB,CAACP,WAAW,GAAG,mBAAmB;;AAEnD;AACA;AACA,MAAMQ,YAAY,GAAG,CAAC;AACtB,MAAMC,aAAa,GAAG,EAAE,GAAGD,YAAY;;AAEvC;AACA,OAAO,MAAME,oBAAoB,GAAG3B,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gFAI3BQ,aAAa,CAC/B;AACDC,oBAAoB,CAACV,WAAW,GAAG,sBAAsB;AAEzD,OAAO,MAAMW,sBAAsB,GAAG5B,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0FAEpCO,YAAY,CAIvB;AACDG,sBAAsB,CAACX,WAAW,GAAG,wBAAwB;AAE7D,OAAO,MAAMY,mBAAmB,GAAG7B,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+EAI5BG,KAAK,IAAMA,KAAK,CAACS,OAAO,GAAG,MAAM,GAAG,SAAU,EAE3D1B,SAAS,EACTF,cAAc,CACjB;AACD2B,mBAAmB,CAACZ,WAAW,GAAG,qBAAqB;AAEvD,OAAO,MAAMc,0BAA0B,GAAG/B,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4EAInD;AACDa,0BAA0B,CAACd,WAAW,GAAG,4BAA4B;AAErE,OAAO,MAAMe,mBAAmB,GAAGhC,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2FAOzCd,SAAS,EACTF,cAAc,CACjB;AACD8B,mBAAmB,CAACf,WAAW,GAAG,qBAAqB","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","screen","FontStyle","dialogSizes","s","m","l","xl","xxl","xxxl","MIN_GAP","MAX_DIALOG_HEIGHT","StyledDialogViewport","div","withConfig","displayName","componentId","sm","StyledDialog","props","$maxWidth","$height","StyledDialogTitle","CLOSE_OFFSET","CLOSE_RESERVE","StyledDialogTitleBar","StyledDialogTitleClose","StyledDialogContent","$scroll","StyledDialogContentDivider","StyledDialogActions"],"sources":["../../../../src/components/Dialog/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const dialogSizes = {\n  s: 440,\n  m: 540,\n  l: 700,\n  xl: 840,\n  xxl: 1000,\n  xxxl: 1120,\n} as const;\n\nexport type DialogSize = keyof typeof dialogSizes;\n\nconst MIN_GAP = \"2.5vh\";\nconst MAX_DIALOG_HEIGHT = \"95vh\";\n\n// The dialog hangs at a fixed offset while there is room below it, then grows in both directions at\n// once. Two shrinkable spacers express that: only the lower one grows, and past the crossover both\n// shrink from the same basis, so the gaps stay equal down to MIN_GAP.\nexport const StyledDialogViewport = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-left: 16px;\n  padding-right: 16px;\n  pointer-events: none;\n\n  --ac-dialog-offset: 60px;\n\n  ${screen.sm} {\n    --ac-dialog-offset: 126px;\n  }\n\n  &::before,\n  &::after {\n    content: \"\";\n    flex-shrink: 1;\n    flex-basis: var(--ac-dialog-offset);\n    min-height: ${MIN_GAP};\n  }\n\n  &::before {\n    flex-grow: 0;\n  }\n\n  &::after {\n    flex-grow: 1;\n  }\n\n  ${BoxSizingStyle}\n`;\n\nStyledDialogViewport.displayName = \"StyledDialogViewport\";\n\nexport const StyledDialog = styled.div<{\n  $maxWidth: number;\n  $height?: string;\n}>`\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  pointer-events: auto;\n  width: 100%;\n  max-width: ${(props) => props.$maxWidth}px;\n  max-height: ${MAX_DIALOG_HEIGHT};\n  background-color: var(--page-paper-main);\n  color: var(--color-theme-900);\n  box-shadow: var(--shadow-primary);\n  border-radius: 8px;\n  position: relative;\n  transition: max-width 0.2s ease, height 0.2s ease;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  ${(props) =>\n    props.$height &&\n    css`\n      height: ${props.$height};\n    `}\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\n\nStyledDialog.displayName = \"StyledDialog\";\n\nexport const StyledDialogTitle = styled.div`\n  padding: 20px 30px;\n  flex: 0 0 auto;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\nStyledDialogTitle.displayName = \"StyledDialogTitle\";\n\n// The close button hangs 8px into the title padding, so it sits nearer the dialog edge than the\n// heading does. The bar reserves the rest, which keeps the gap to the heading unchanged.\nconst CLOSE_OFFSET = 8;\nconst CLOSE_RESERVE = 44 - CLOSE_OFFSET;\n\n// The header is as tall as its heading, with or without a close button.\nexport const StyledDialogTitleBar = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding-right: ${CLOSE_RESERVE}px;\n`;\nStyledDialogTitleBar.displayName = \"StyledDialogTitleBar\";\n\nexport const StyledDialogTitleClose = styled.div`\n  position: absolute;\n  right: -${CLOSE_OFFSET}px;\n  top: 50%;\n  transform: translateY(-50%);\n  line-height: 0;\n`;\nStyledDialogTitleClose.displayName = \"StyledDialogTitleClose\";\n\nexport const StyledDialogContent = styled.div<{ $scroll: boolean }>`\n  padding: 20px 30px;\n  flex: 1 1 auto;\n  min-height: 0;\n  overscroll-behavior: contain;\n  overflow-y: ${(props) => (props.$scroll ? \"auto\" : \"visible\")};\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\nStyledDialogContent.displayName = \"StyledDialogContent\";\n\nexport const StyledDialogContentDivider = styled.div`\n  border-top: 1px solid var(--border-primary);\n  height: 1px;\n  flex: 0 0 auto;\n`;\nStyledDialogContentDivider.displayName = \"StyledDialogContentDivider\";\n\nexport const StyledDialogActions = styled.div`\n  padding: 20px 30px;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\nStyledDialogActions.displayName = \"StyledDialogActions\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,WAAW,GAAG;EACzBC,CAAC,EAAE,GAAG;EACNC,CAAC,EAAE,GAAG;EACNC,CAAC,EAAE,GAAG;EACNC,EAAE,EAAE,GAAG;EACPC,GAAG,EAAE,IAAI;EACTC,IAAI,EAAE;AACR,CAAU;AAIV,MAAMC,OAAO,GAAG,OAAO;AACvB,MAAMC,iBAAiB,GAAG,MAAM;;AAEhC;AACA;AACA;AACA,OAAO,MAAMC,oBAAoB,GAAGd,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kXAe1Cf,MAAM,CAACgB,EAAE,EASKP,OAAO,EAWrBV,cAAc,CACjB;AAEDY,oBAAoB,CAACG,WAAW,GAAG,sBAAsB;AAEzD,OAAO,MAAMG,YAAY,GAAGpB,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0XAStBG,KAAK,IAAKA,KAAK,CAACC,SAAS,EACzBT,iBAAiB,EAY5BQ,KAAK,IACNA,KAAK,CAACE,OAAO,IACbtB,GAAG,mBACSoB,KAAK,CAACE,OAAO,CACxB,EAEDnB,SAAS,EACTF,cAAc,CACjB;AAEDkB,YAAY,CAACH,WAAW,GAAG,cAAc;AAEzC,OAAO,MAAMO,iBAAiB,GAAGxB,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kDAIvCd,SAAS,EACTF,cAAc,CACjB;AACDsB,iBAAiB,CAACP,WAAW,GAAG,mBAAmB;;AAEnD;AACA;AACA,MAAMQ,YAAY,GAAG,CAAC;AACtB,MAAMC,aAAa,GAAG,EAAE,GAAGD,YAAY;;AAEvC;AACA,OAAO,MAAME,oBAAoB,GAAG3B,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gFAI3BQ,aAAa,CAC/B;AACDC,oBAAoB,CAACV,WAAW,GAAG,sBAAsB;AAEzD,OAAO,MAAMW,sBAAsB,GAAG5B,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0FAEpCO,YAAY,CAIvB;AACDG,sBAAsB,CAACX,WAAW,GAAG,wBAAwB;AAE7D,OAAO,MAAMY,mBAAmB,GAAG7B,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2GAK5BG,KAAK,IAAMA,KAAK,CAACS,OAAO,GAAG,MAAM,GAAG,SAAU,EAE3D1B,SAAS,EACTF,cAAc,CACjB;AACD2B,mBAAmB,CAACZ,WAAW,GAAG,qBAAqB;AAEvD,OAAO,MAAMc,0BAA0B,GAAG/B,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4EAInD;AACDa,0BAA0B,CAACd,WAAW,GAAG,4BAA4B;AAErE,OAAO,MAAMe,mBAAmB,GAAGhC,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2FAOzCd,SAAS,EACTF,cAAc,CACjB;AACD8B,mBAAmB,CAACf,WAAW,GAAG,qBAAqB","ignoreList":[]}

package/dist/esm/components/Overlay/Overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMlC,MAAM,WAAW,QAAQ;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CACtB,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,QAAQ,CAAC,CASvE,CAAC"}
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAwCvD,MAAM,WAAW,QAAQ;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CACtB,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,QAAQ,CAAC,CAavE,CAAC"}

package/dist/esm/components/Overlay/Overlay.js

@@ -1,17 +1,47 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "disableBackgroundColor"];
-import React from "react";
+import React, { useEffect, useState } from "react";
 import classnames from "classnames";
+import { isTopOverlay, popOverlay, pushOverlay, subscribeToOverlays } from "./overlayStack";
 import { StyledOverlay } from "./Styles";
+import { useLayerContext } from "../../helpers/LayerContext/LayerContext";
+import { layers } from "../../utils/layers";
+
+// Chrome samples the backdrop of every blurred overlay on every frame, and a covered one buys
+// nothing for that cost. Only the overlay on top keeps its blur.
+const useKeepsBlur = (blurs, zIndex) => {
+  const _useState = useState(true),
+    isTop = _useState[0],
+    setIsTop = _useState[1];
+  useEffect(() => {
+    if (!blurs) {
+      return undefined;
+    }
+    const id = pushOverlay(zIndex);
+    const sync = () => setIsTop(isTopOverlay(id));
+    sync();
+    const unsubscribe = subscribeToOverlays(sync);
+    return () => {
+      unsubscribe();
+      popOverlay(id);
+    };
+  }, [blurs, zIndex]);
+  return blurs && isTop;
+};
 export const Overlay = _ref => {
   let className = _ref.className,
     _ref$disableBackgroun = _ref.disableBackgroundColor,
     disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const _useLayerContext = useLayerContext(),
+    _useLayerContext$zInd = _useLayerContext.zIndex,
+    zIndex = _useLayerContext$zInd === void 0 ? layers.skyscraper : _useLayerContext$zInd;
+  const keepsBlur = useKeepsBlur(!disableBackgroundColor, zIndex);
   return /*#__PURE__*/React.createElement(StyledOverlay, _extends({
     className: classnames("c-overlay", className),
-    $disableBackgroundColor: disableBackgroundColor
+    $disableBackgroundColor: disableBackgroundColor,
+    $blurs: keepsBlur
   }, rest));
 };
 Overlay.displayName = "Overlay";

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

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","names":["React","classnames","StyledOverlay","Overlay","_ref","className","_ref$disableBackgroun","disableBackgroundColor","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","$disableBackgroundColor","displayName"],"sources":["../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import React, { FC } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledOverlay } from \"./Styles\";\n\nexport interface IOverlay {\n  disableBackgroundColor?: boolean;\n}\n\nexport const Overlay: FC<\n  IOverlay & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof IOverlay>\n> = ({ className, disableBackgroundColor = false, ...rest }) => {\n  return (\n    <StyledOverlay\n      className={classnames(\"c-overlay\", className)}\n      $disableBackgroundColor={disableBackgroundColor}\n      {...rest}\n    />\n  );\n};\n\nOverlay.displayName = \"Overlay\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAc,OAAO;AAEjC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,aAAa,QAAQ,UAAU;AAMxC,OAAO,MAAMC,OAEZ,GAAGC,IAAA,IAA4D;EAAA,IAAzDC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAAC,qBAAA,GAAAF,IAAA,CAAEG,sBAAsB;IAAtBA,sBAAsB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAKE,IAAI,GAAAC,6BAAA,CAAAL,IAAA,EAAAM,SAAA;EACvD,oBACEV,KAAA,CAAAW,aAAA,CAACT,aAAa,EAAAU,QAAA;IACZP,SAAS,EAAEJ,UAAU,CAAC,WAAW,EAAEI,SAAS,CAAE;IAC9CQ,uBAAuB,EAAEN;EAAuB,GAC5CC,IAAI,CACT,CAAC;AAEN,CAAC;AAEDL,OAAO,CAACW,WAAW,GAAG,SAAS","ignoreList":[]}
+{"version":3,"file":"Overlay.js","names":["React","useEffect","useState","classnames","isTopOverlay","popOverlay","pushOverlay","subscribeToOverlays","StyledOverlay","useLayerContext","layers","useKeepsBlur","blurs","zIndex","_useState","isTop","setIsTop","undefined","id","sync","unsubscribe","Overlay","_ref","className","_ref$disableBackgroun","disableBackgroundColor","rest","_objectWithoutPropertiesLoose","_excluded","_useLayerContext","_useLayerContext$zInd","skyscraper","keepsBlur","createElement","_extends","$disableBackgroundColor","$blurs","displayName"],"sources":["../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  isTopOverlay,\n  popOverlay,\n  pushOverlay,\n  subscribeToOverlays,\n} from \"./overlayStack\";\nimport { StyledOverlay } from \"./Styles\";\nimport { useLayerContext } from \"../../helpers/LayerContext/LayerContext\";\nimport { layers } from \"../../utils/layers\";\n\n// Chrome samples the backdrop of every blurred overlay on every frame, and a covered one buys\n// nothing for that cost. Only the overlay on top keeps its blur.\nconst useKeepsBlur = (blurs: boolean, zIndex: number): boolean => {\n  const [isTop, setIsTop] = useState(true);\n\n  useEffect(() => {\n    if (!blurs) {\n      return undefined;\n    }\n\n    const id = pushOverlay(zIndex);\n    const sync = () => setIsTop(isTopOverlay(id));\n\n    sync();\n\n    const unsubscribe = subscribeToOverlays(sync);\n\n    return () => {\n      unsubscribe();\n      popOverlay(id);\n    };\n  }, [blurs, zIndex]);\n\n  return blurs && isTop;\n};\n\nexport interface IOverlay {\n  disableBackgroundColor?: boolean;\n}\n\nexport const Overlay: FC<\n  IOverlay & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof IOverlay>\n> = ({ className, disableBackgroundColor = false, ...rest }) => {\n  const { zIndex = layers.skyscraper } = useLayerContext();\n  const keepsBlur = useKeepsBlur(!disableBackgroundColor, zIndex);\n\n  return (\n    <StyledOverlay\n      className={classnames(\"c-overlay\", className)}\n      $disableBackgroundColor={disableBackgroundColor}\n      $blurs={keepsBlur}\n      {...rest}\n    />\n  );\n};\n\nOverlay.displayName = \"Overlay\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAQC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAEtD,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,mBAAmB,QACd,gBAAgB;AACvB,SAASC,aAAa,QAAQ,UAAU;AACxC,SAASC,eAAe,QAAQ,yCAAyC;AACzE,SAASC,MAAM,QAAQ,oBAAoB;;AAE3C;AACA;AACA,MAAMC,YAAY,GAAGA,CAACC,KAAc,EAAEC,MAAc,KAAc;EAChE,MAAAC,SAAA,GAA0BZ,QAAQ,CAAC,IAAI,CAAC;IAAjCa,KAAK,GAAAD,SAAA;IAAEE,QAAQ,GAAAF,SAAA;EAEtBb,SAAS,CAAC,MAAM;IACd,IAAI,CAACW,KAAK,EAAE;MACV,OAAOK,SAAS;IAClB;IAEA,MAAMC,EAAE,GAAGZ,WAAW,CAACO,MAAM,CAAC;IAC9B,MAAMM,IAAI,GAAGA,CAAA,KAAMH,QAAQ,CAACZ,YAAY,CAACc,EAAE,CAAC,CAAC;IAE7CC,IAAI,CAAC,CAAC;IAEN,MAAMC,WAAW,GAAGb,mBAAmB,CAACY,IAAI,CAAC;IAE7C,OAAO,MAAM;MACXC,WAAW,CAAC,CAAC;MACbf,UAAU,CAACa,EAAE,CAAC;IAChB,CAAC;EACH,CAAC,EAAE,CAACN,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnB,OAAOD,KAAK,IAAIG,KAAK;AACvB,CAAC;AAMD,OAAO,MAAMM,OAEZ,GAAGC,IAAA,IAA4D;EAAA,IAAzDC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAAC,qBAAA,GAAAF,IAAA,CAAEG,sBAAsB;IAAtBA,sBAAsB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAKE,IAAI,GAAAC,6BAAA,CAAAL,IAAA,EAAAM,SAAA;EACvD,MAAAC,gBAAA,GAAuCpB,eAAe,CAAC,CAAC;IAAAqB,qBAAA,GAAAD,gBAAA,CAAhDhB,MAAM;IAANA,MAAM,GAAAiB,qBAAA,cAAGpB,MAAM,CAACqB,UAAU,GAAAD,qBAAA;EAClC,MAAME,SAAS,GAAGrB,YAAY,CAAC,CAACc,sBAAsB,EAAEZ,MAAM,CAAC;EAE/D,oBACEb,KAAA,CAAAiC,aAAA,CAACzB,aAAa,EAAA0B,QAAA;IACZX,SAAS,EAAEpB,UAAU,CAAC,WAAW,EAAEoB,SAAS,CAAE;IAC9CY,uBAAuB,EAAEV,sBAAuB;IAChDW,MAAM,EAAEJ;EAAU,GACdN,IAAI,CACT,CAAC;AAEN,CAAC;AAEDL,OAAO,CAACgB,WAAW,GAAG,SAAS","ignoreList":[]}

package/dist/esm/components/Overlay/Styles.d.ts

@@ -1,4 +1,5 @@
 export declare const StyledOverlay: import("styled-components").StyledComponent<"div", any, {
     $disableBackgroundColor: boolean;
+    $blurs?: boolean;
 }, never>;
 //# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Overlay/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;6BACC,OAAO;SAcjC,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;6BACC,OAAO;aACvB,OAAO;SAqBjB,CAAC"}

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

@@ -2,6 +2,6 @@ import styled, { css } from "styled-components";
 export const StyledOverlay = styled.div.withConfig({
   displayName: "Styles__StyledOverlay",
   componentId: "sc-flnrpv-0"
-})(["position:fixed;top:0;right:0;bottom:0;left:0;", ""], props => !props.$disableBackgroundColor && css(["background:var(--modal-background);backdrop-filter:blur(2px);"]));
+})(["position:fixed;top:0;right:0;bottom:0;left:0;", " ", ""], props => !props.$disableBackgroundColor && css(["background:var(--modal-background);transform:translateZ(0);"]), props => props.$blurs && css(["backdrop-filter:blur(2px);"]));
 StyledOverlay.displayName = "StyledOverlay";
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","StyledOverlay","div","withConfig","displayName","componentId","props","$disableBackgroundColor"],"sources":["../../../../src/components/Overlay/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nexport const StyledOverlay = styled.div<{\n  $disableBackgroundColor: boolean;\n}>`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  ${(props) =>\n    !props.$disableBackgroundColor &&\n    css`\n      background: var(--modal-background);\n      backdrop-filter: blur(2px);\n    `}\n`;\n\nStyledOverlay.displayName = \"StyledOverlay\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,OAAO,MAAMC,aAAa,GAAGF,MAAM,CAACG,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0DASlCC,KAAK,IACN,CAACA,KAAK,CAACC,uBAAuB,IAC9BP,GAAG,mEAGF,CACJ;AAEDC,aAAa,CAACG,WAAW,GAAG,eAAe","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["styled","css","StyledOverlay","div","withConfig","displayName","componentId","props","$disableBackgroundColor","$blurs"],"sources":["../../../../src/components/Overlay/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nexport const StyledOverlay = styled.div<{\n  $disableBackgroundColor: boolean;\n  $blurs?: boolean;\n}>`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  ${(props) =>\n    !props.$disableBackgroundColor &&\n    css`\n      background: var(--modal-background);\n      /* Chrome samples the backdrop per frame. On its own layer the sample survives a scroll above it. */\n      transform: translateZ(0);\n    `}\n\n  ${(props) =>\n    props.$blurs &&\n    css`\n      backdrop-filter: blur(2px);\n    `}\n`;\n\nStyledOverlay.displayName = \"StyledOverlay\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,OAAO,MAAMC,aAAa,GAAGF,MAAM,CAACG,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+DAUlCC,KAAK,IACN,CAACA,KAAK,CAACC,uBAAuB,IAC9BP,GAAG,iEAIF,EAEAM,KAAK,IACNA,KAAK,CAACE,MAAM,IACZR,GAAG,gCAEF,CACJ;AAEDC,aAAa,CAACG,WAAW,GAAG,eAAe","ignoreList":[]}

package/dist/esm/components/Overlay/overlayStack.d.ts

@@ -0,0 +1,7 @@
+type Listener = () => void;
+export declare const pushOverlay: (zIndex: number) => number;
+export declare const popOverlay: (id: number) => void;
+export declare const isTopOverlay: (id: number) => boolean;
+export declare const subscribeToOverlays: (listener: Listener) => (() => void);
+export {};
+//# sourceMappingURL=overlayStack.d.ts.map

package/dist/esm/components/Overlay/overlayStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayStack.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/overlayStack.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC;AAW3B,eAAO,MAAM,WAAW,GAAI,QAAQ,MAAM,KAAG,MAM5C,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,IAAI,MAAM,KAAG,IAGvC,CAAC;AAIF,eAAO,MAAM,YAAY,GAAI,IAAI,MAAM,KAAG,OAazC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,UAAU,QAAQ,KAAG,CAAC,MAAM,IAAI,CAMnE,CAAC"}

package/dist/esm/components/Overlay/overlayStack.js

@@ -0,0 +1,34 @@
+const listeners = new Set();
+let stack = [];
+let lastId = 0;
+const notify = () => listeners.forEach(listener => listener());
+export const pushOverlay = zIndex => {
+  lastId += 1;
+  stack = [...stack, {
+    id: lastId,
+    zIndex
+  }];
+  notify();
+  return lastId;
+};
+export const popOverlay = id => {
+  stack = stack.filter(entry => entry.id !== id);
+  notify();
+};
+
+// The overlay that covers the rest is the one on the highest layer. Mount order only breaks a tie,
+// because a lazily loaded surface can mount after the one it sits under.
+export const isTopOverlay = id => {
+  if (stack.length === 0) {
+    return true;
+  }
+  const top = stack.reduce((highest, entry) => entry.zIndex > highest.zIndex || entry.zIndex === highest.zIndex && entry.id > highest.id ? entry : highest);
+  return top.id === id;
+};
+export const subscribeToOverlays = listener => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+//# sourceMappingURL=overlayStack.js.map

package/dist/esm/components/Overlay/overlayStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayStack.js","names":["listeners","Set","stack","lastId","notify","forEach","listener","pushOverlay","zIndex","id","popOverlay","filter","entry","isTopOverlay","length","top","reduce","highest","subscribeToOverlays","add","delete"],"sources":["../../../../src/components/Overlay/overlayStack.ts"],"sourcesContent":["type Listener = () => void;\n\ntype Entry = { id: number; zIndex: number };\n\nconst listeners = new Set<Listener>();\n\nlet stack: Entry[] = [];\nlet lastId = 0;\n\nconst notify = (): void => listeners.forEach((listener) => listener());\n\nexport const pushOverlay = (zIndex: number): number => {\n  lastId += 1;\n  stack = [...stack, { id: lastId, zIndex }];\n  notify();\n\n  return lastId;\n};\n\nexport const popOverlay = (id: number): void => {\n  stack = stack.filter((entry) => entry.id !== id);\n  notify();\n};\n\n// The overlay that covers the rest is the one on the highest layer. Mount order only breaks a tie,\n// because a lazily loaded surface can mount after the one it sits under.\nexport const isTopOverlay = (id: number): boolean => {\n  if (stack.length === 0) {\n    return true;\n  }\n\n  const top = stack.reduce((highest, entry) =>\n    entry.zIndex > highest.zIndex ||\n    (entry.zIndex === highest.zIndex && entry.id > highest.id)\n      ? entry\n      : highest\n  );\n\n  return top.id === id;\n};\n\nexport const subscribeToOverlays = (listener: Listener): (() => void) => {\n  listeners.add(listener);\n\n  return (): void => {\n    listeners.delete(listener);\n  };\n};\n"],"mappings":"AAIA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAW,CAAC;AAErC,IAAIC,KAAc,GAAG,EAAE;AACvB,IAAIC,MAAM,GAAG,CAAC;AAEd,MAAMC,MAAM,GAAGA,CAAA,KAAYJ,SAAS,CAACK,OAAO,CAAEC,QAAQ,IAAKA,QAAQ,CAAC,CAAC,CAAC;AAEtE,OAAO,MAAMC,WAAW,GAAIC,MAAc,IAAa;EACrDL,MAAM,IAAI,CAAC;EACXD,KAAK,GAAG,CAAC,GAAGA,KAAK,EAAE;IAAEO,EAAE,EAAEN,MAAM;IAAEK;EAAO,CAAC,CAAC;EAC1CJ,MAAM,CAAC,CAAC;EAER,OAAOD,MAAM;AACf,CAAC;AAED,OAAO,MAAMO,UAAU,GAAID,EAAU,IAAW;EAC9CP,KAAK,GAAGA,KAAK,CAACS,MAAM,CAAEC,KAAK,IAAKA,KAAK,CAACH,EAAE,KAAKA,EAAE,CAAC;EAChDL,MAAM,CAAC,CAAC;AACV,CAAC;;AAED;AACA;AACA,OAAO,MAAMS,YAAY,GAAIJ,EAAU,IAAc;EACnD,IAAIP,KAAK,CAACY,MAAM,KAAK,CAAC,EAAE;IACtB,OAAO,IAAI;EACb;EAEA,MAAMC,GAAG,GAAGb,KAAK,CAACc,MAAM,CAAC,CAACC,OAAO,EAAEL,KAAK,KACtCA,KAAK,CAACJ,MAAM,GAAGS,OAAO,CAACT,MAAM,IAC5BI,KAAK,CAACJ,MAAM,KAAKS,OAAO,CAACT,MAAM,IAAII,KAAK,CAACH,EAAE,GAAGQ,OAAO,CAACR,EAAG,GACtDG,KAAK,GACLK,OACN,CAAC;EAED,OAAOF,GAAG,CAACN,EAAE,KAAKA,EAAE;AACtB,CAAC;AAED,OAAO,MAAMS,mBAAmB,GAAIZ,QAAkB,IAAmB;EACvEN,SAAS,CAACmB,GAAG,CAACb,QAAQ,CAAC;EAEvB,OAAO,MAAY;IACjBN,SAAS,CAACoB,MAAM,CAACd,QAAQ,CAAC;EAC5B,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/esm/components/Sheet/Sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAoBf,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID,eAAO,MAAM,KAAK,oHAiLjB,CAAC"}
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAoBf,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID,eAAO,MAAM,KAAK,oHAgKjB,CAAC"}

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

@@ -2,9 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _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 classnames from "classnames";
-import { StyledAnimatedSpan, StyledCssTransition, StyledHeader, StyledIconsWrapperSmall, StyledListSeparator, StyledSheetIcons, StyledSheetWrapper, StyledSheetWrapperPaper } from "./Styles";
+import { StyledAnimatedSpan, StyledCssTransition, StyledHeader, StyledIconsWrapperSmall, StyledListSeparator, StyledSheetIcons, StyledSheetWrapper, StyledSheetSurface, StyledSheetWrapperPaper } from "./Styles";
 import { IconButton } from "../IconButton";
 import { Overlay } from "../Overlay";
 import { Tooltip } from "../Tooltip";
@@ -76,45 +75,30 @@ export const Sheet = /*#__PURE__*/forwardRef((_ref, ref) => {
     style: bodyStyle,
     $position: position,
     $mode: mode
-  }, controls.length > 0 && /*#__PURE__*/React.createElement(StyledSheetIcons, null, controls.map((_ref2, index) => {
+  }, /*#__PURE__*/React.createElement(StyledCssTransition, {
+    appear: true,
+    in: open,
+    timeout: 400,
+    classNames: "c-sheet__animation",
+    $direction: animation,
+    onEnter: handleEnter,
+    onExited: handleExited
+  }, /*#__PURE__*/React.createElement(StyledSheetSurface, null, controls.length > 0 && /*#__PURE__*/React.createElement(StyledSheetIcons, null, controls.map((_ref2, index) => {
     let IconComponent = _ref2.icon,
       tooltip = _ref2.tooltip,
       onClick = _ref2.onClick,
       disabled = _ref2.disabled,
       className = _ref2.className;
-    const maxDurationIn = 4;
-    const maxDurationOut = 2;
-    const control = index + 1;
-    const durationOut = Math.max(0, maxDurationOut - control);
-    const durationIn = Math.min(control, maxDurationIn);
-    return /*#__PURE__*/React.createElement(Transition, {
-      appear: true,
-      in: open,
-      timeout: maxDurationIn * 100,
-      key: "c-sheet-control-" + index
-    }, state => /*#__PURE__*/React.createElement(Tooltip, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
       title: tooltip,
-      disable: !tooltip || disabled
+      disable: !tooltip || disabled,
+      key: "c-sheet-control-" + index
     }, /*#__PURE__*/React.createElement(StyledAnimatedSpan, {
       onClick: onClick,
       $disabled: disabled,
-      $mode: mode,
-      $state: state,
-      className: className,
-      $maxDurationIn: maxDurationIn / 10,
-      $maxDurationOut: maxDurationOut / 10,
-      $durationOut: durationOut / 10,
-      $durationIn: durationIn / 10
-    }, IconComponent)));
-  })), /*#__PURE__*/React.createElement(StyledCssTransition, {
-    appear: true,
-    in: open,
-    timeout: 400,
-    classNames: "c-sheet__animation",
-    $direction: animation,
-    onEnter: handleEnter,
-    onExited: handleExited
-  }, /*#__PURE__*/React.createElement(StyledSheetWrapperPaper, {
+      className: className
+    }, IconComponent));
+  })), /*#__PURE__*/React.createElement(StyledSheetWrapperPaper, {
     paperClass: "c-sheet__wrapper__paper"
   }, controls.length > 0 && /*#__PURE__*/React.createElement(StyledHeader, null, /*#__PURE__*/React.createElement(StyledIconsWrapperSmall, null, controls.map((_ref3, index) => {
     let IconComponent = _ref3.icon,
@@ -132,7 +116,7 @@ export const Sheet = /*#__PURE__*/forwardRef((_ref, ref) => {
       className: className,
       variant: "text gray"
     }, IconComponent));
-  })), /*#__PURE__*/React.createElement(StyledListSeparator, null)), children))));
+  })), /*#__PURE__*/React.createElement(StyledListSeparator, null)), children)))));
 });
 Sheet.displayName = "Sheet";
 //# sourceMappingURL=Sheet.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Sheet.js","names":["React","useCallback","useEffect","forwardRef","useState","useImperativeHandle","Transition","classnames","StyledAnimatedSpan","StyledCssTransition","StyledHeader","StyledIconsWrapperSmall","StyledListSeparator","StyledSheetIcons","StyledSheetWrapper","StyledSheetWrapperPaper","IconButton","Overlay","Tooltip","Window","Sheet","_ref","ref","children","onClose","_ref$controls","controls","_ref$open","open","defaultOpen","_ref$animation","animation","_ref$position","position","_ref$mode","mode","_ref$disableFocusLock","disableFocusLock","_ref$disableScrollLoc","disableScrollLock","_ref$disableBackgroun","disableBackgroundColor","bodyStyle","bodyClassName","_ref$disableBackgroun2","disableBackgroundClick","rest","_objectWithoutPropertiesLoose","_excluded","_useState","setOpen","_useState2","exited","setExited","handleEnter","handleExited","handleClose","handleBackgroundClick","event","preventDefault","close","createElement","_extends","onClick","className","style","$position","$mode","length","map","_ref2","index","IconComponent","icon","tooltip","disabled","maxDurationIn","maxDurationOut","control","durationOut","Math","max","durationIn","min","appear","in","timeout","key","state","title","disable","$disabled","$state","$maxDurationIn","$maxDurationOut","$durationOut","$durationIn","classNames","$direction","onEnter","onExited","paperClass","_ref3","variant","displayName"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  forwardRef,\n  HTMLAttributes,\n  useState,\n  CSSProperties,\n  MouseEvent,\n  useImperativeHandle,\n} from \"react\";\nimport { Transition } from \"react-transition-group\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledAnimatedSpan,\n  StyledCssTransition,\n  StyledHeader,\n  StyledIconsWrapperSmall,\n  StyledListSeparator,\n  StyledSheetIcons,\n  StyledSheetWrapper,\n  StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { IconButton } from \"../IconButton\";\nimport { Overlay } from \"../Overlay\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Window } from \"../Window\";\n\ninterface ControlProps {\n  onClick: () => void;\n  icon: React.ReactElement;\n  tooltip: string;\n  disabled: boolean;\n  className: string;\n}\n\ninterface ISheet {\n  onClose?: () => void;\n  controls?: ControlProps[];\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\ntype SheetProps = ISheet & HTMLAttributes<HTMLDivElement>;\n\nexport const Sheet = forwardRef<SheetMethods, SheetProps>(\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      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        )}\n        <StyledSheetWrapper\n          className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n          style={bodyStyle}\n          $position={position}\n          $mode={mode}\n        >\n          {controls.length > 0 && (\n            <StyledSheetIcons>\n              {controls.map(\n                (\n                  {\n                    icon: IconComponent,\n                    tooltip,\n                    onClick,\n                    disabled,\n                    className,\n                  },\n                  index\n                ) => {\n                  const maxDurationIn = 4;\n                  const maxDurationOut = 2;\n                  const control = index + 1;\n                  const durationOut = Math.max(0, maxDurationOut - control);\n                  const durationIn = Math.min(control, maxDurationIn);\n\n                  return (\n                    <Transition\n                      appear\n                      in={open}\n                      timeout={maxDurationIn * 100}\n                      key={`c-sheet-control-${index}`}\n                    >\n                      {(state) => (\n                        <Tooltip title={tooltip} disable={!tooltip || disabled}>\n                          <StyledAnimatedSpan\n                            onClick={onClick}\n                            $disabled={disabled}\n                            $mode={mode}\n                            $state={state}\n                            className={className}\n                            $maxDurationIn={maxDurationIn / 10}\n                            $maxDurationOut={maxDurationOut / 10}\n                            $durationOut={durationOut / 10}\n                            $durationIn={durationIn / 10}\n                          >\n                            {IconComponent}\n                          </StyledAnimatedSpan>\n                        </Tooltip>\n                      )}\n                    </Transition>\n                  );\n                }\n              )}\n            </StyledSheetIcons>\n          )}\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              {controls.length > 0 && (\n                <StyledHeader>\n                  <StyledIconsWrapperSmall>\n                    {controls.map(\n                      (\n                        {\n                          icon: IconComponent,\n                          tooltip,\n                          onClick,\n                          disabled,\n                          className,\n                        },\n                        index\n                      ) => (\n                        <Tooltip\n                          title={tooltip}\n                          disable={!tooltip || disabled}\n                          key={index}\n                        >\n                          <IconButton\n                            onClick={onClick}\n                            disabled={disabled}\n                            className={className}\n                            variant=\"text gray\"\n                          >\n                            {IconComponent}\n                          </IconButton>\n                        </Tooltip>\n                      )\n                    )}\n                  </StyledIconsWrapperSmall>\n                  <StyledListSeparator />\n                </StyledHeader>\n              )}\n              {children}\n            </StyledSheetWrapperPaper>\n          </StyledCssTransition>\n        </StyledSheetWrapper>\n      </Window>\n    );\n  }\n);\n\nSheet.displayName = \"Sheet\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Sheet.js","names":["React","useCallback","useEffect","forwardRef","useState","useImperativeHandle","classnames","StyledAnimatedSpan","StyledCssTransition","StyledHeader","StyledIconsWrapperSmall","StyledListSeparator","StyledSheetIcons","StyledSheetWrapper","StyledSheetSurface","StyledSheetWrapperPaper","IconButton","Overlay","Tooltip","Window","Sheet","_ref","ref","children","onClose","_ref$controls","controls","_ref$open","open","defaultOpen","_ref$animation","animation","_ref$position","position","_ref$mode","mode","_ref$disableFocusLock","disableFocusLock","_ref$disableScrollLoc","disableScrollLock","_ref$disableBackgroun","disableBackgroundColor","bodyStyle","bodyClassName","_ref$disableBackgroun2","disableBackgroundClick","rest","_objectWithoutPropertiesLoose","_excluded","_useState","setOpen","_useState2","exited","setExited","handleEnter","handleExited","handleClose","handleBackgroundClick","event","preventDefault","close","createElement","_extends","onClick","className","style","$position","$mode","appear","in","timeout","classNames","$direction","onEnter","onExited","length","map","_ref2","index","IconComponent","icon","tooltip","disabled","title","disable","key","$disabled","paperClass","_ref3","variant","displayName"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  forwardRef,\n  HTMLAttributes,\n  useState,\n  CSSProperties,\n  MouseEvent,\n  useImperativeHandle,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledAnimatedSpan,\n  StyledCssTransition,\n  StyledHeader,\n  StyledIconsWrapperSmall,\n  StyledListSeparator,\n  StyledSheetIcons,\n  StyledSheetWrapper,\n  StyledSheetSurface,\n  StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { IconButton } from \"../IconButton\";\nimport { Overlay } from \"../Overlay\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Window } from \"../Window\";\n\ninterface ControlProps {\n  onClick: () => void;\n  icon: React.ReactElement;\n  tooltip: string;\n  disabled: boolean;\n  className: string;\n}\n\ninterface ISheet {\n  onClose?: () => void;\n  controls?: ControlProps[];\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\ntype SheetProps = ISheet & HTMLAttributes<HTMLDivElement>;\n\nexport const Sheet = forwardRef<SheetMethods, SheetProps>(\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      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        )}\n        <StyledSheetWrapper\n          className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n          style={bodyStyle}\n          $position={position}\n          $mode={mode}\n        >\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            <StyledSheetSurface>\n              {controls.length > 0 && (\n                <StyledSheetIcons>\n                  {controls.map(\n                    (\n                      {\n                        icon: IconComponent,\n                        tooltip,\n                        onClick,\n                        disabled,\n                        className,\n                      },\n                      index\n                    ) => (\n                      <Tooltip\n                        title={tooltip}\n                        disable={!tooltip || disabled}\n                        key={`c-sheet-control-${index}`}\n                      >\n                        <StyledAnimatedSpan\n                          onClick={onClick}\n                          $disabled={disabled}\n                          className={className}\n                        >\n                          {IconComponent}\n                        </StyledAnimatedSpan>\n                      </Tooltip>\n                    )\n                  )}\n                </StyledSheetIcons>\n              )}\n              <StyledSheetWrapperPaper paperClass=\"c-sheet__wrapper__paper\">\n                {controls.length > 0 && (\n                  <StyledHeader>\n                    <StyledIconsWrapperSmall>\n                      {controls.map(\n                        (\n                          {\n                            icon: IconComponent,\n                            tooltip,\n                            onClick,\n                            disabled,\n                            className,\n                          },\n                          index\n                        ) => (\n                          <Tooltip\n                            title={tooltip}\n                            disable={!tooltip || disabled}\n                            key={index}\n                          >\n                            <IconButton\n                              onClick={onClick}\n                              disabled={disabled}\n                              className={className}\n                              variant=\"text gray\"\n                            >\n                              {IconComponent}\n                            </IconButton>\n                          </Tooltip>\n                        )\n                      )}\n                    </StyledIconsWrapperSmall>\n                    <StyledListSeparator />\n                  </StyledHeader>\n                )}\n                {children}\n              </StyledSheetWrapperPaper>\n            </StyledSheetSurface>\n          </StyledCssTransition>\n        </StyledSheetWrapper>\n      </Window>\n    );\n  }\n);\n\nSheet.displayName = \"Sheet\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/Sheet/Styles.d.ts

@@ -8,18 +8,9 @@ export declare const StyledSheetWrapper: import("styled-components").StyledCompo
 interface IStyledSheetWrapperPaper {
     paperClass?: string;
 }
+export declare const StyledSheetSurface: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledSheetWrapperPaper: import("styled-components").StyledComponent<"div", any, IStyledSheetWrapperPaper, never>;
-export declare const StyledSheetControlsTop: import("styled-components").Keyframes;
-export declare const StyledSheetControlsBottom: import("styled-components").Keyframes;
-export declare const StyledSheetControlsCenterIn: import("styled-components").Keyframes;
-export declare const StyledSheetControlsCenterOut: import("styled-components").Keyframes;
 interface IStyledAnimatedSpan {
-    $mode: string;
-    $state?: string;
-    $maxDurationIn: number;
-    $maxDurationOut: number;
-    $durationOut: number;
-    $durationIn: number;
     $disabled?: boolean;
 }
 export declare const StyledAnimatedSpan: import("styled-components").StyledComponent<"span", any, IStyledAnimatedSpan, never>;

package/dist/esm/components/Sheet/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AASvD,eAAO,MAAM,gBAAgB,oEA2B5B,CAAC;AAIF,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACxC,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,qFAmG9B,CAAC;AAIF,UAAU,wBAAwB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,0FAanC,CAAC;AAIF,eAAO,MAAM,sBAAsB,uCASlC,CAAC;AAEF,eAAO,MAAM,yBAAyB,uCASrC,CAAC;AAEF,eAAO,MAAM,2BAA2B,uCASvC,CAAC;AAEF,eAAO,MAAM,4BAA4B,uCASxC,CAAC;AAEF,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,sFA6D9B,CAAC;AAIF,eAAO,MAAM,mBAAmB;gBAClB,MAAM;SA6HnB,CAAC;AAIF,eAAO,MAAM,mBAAmB;;;kBAE/B,CAAC;AAIF,eAAO,MAAM,uBAAuB,oEASnC,CAAC;AAIF,eAAO,MAAM,YAAY,oEAIxB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AASvD,eAAO,MAAM,gBAAgB,oEA2B5B,CAAC;AAIF,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACxC,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,qFAiG9B,CAAC;AAIF,UAAU,wBAAwB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,oEAM9B,CAAC;AAIF,eAAO,MAAM,uBAAuB,0FAkBnC,CAAC;AAIF,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,sFAc9B,CAAC;AAIF,eAAO,MAAM,mBAAmB;gBAClB,MAAM;SA6HnB,CAAC;AAIF,eAAO,MAAM,mBAAmB;;;kBAE/B,CAAC;AAIF,eAAO,MAAM,uBAAuB,oEASnC,CAAC;AAIF,eAAO,MAAM,YAAY,oEAIxB,CAAC"}

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

@@ -1,5 +1,5 @@
 import { CSSTransition } from "react-transition-group";
-import styled, { css, keyframes } from "styled-components";
+import styled, { css } from "styled-components";
 import { BoxSizingStyle } from "../BoxSizingStyle";
 import { FontStyle } from "../FontStyle";
 import { ListSeparator } from "../List";
@@ -11,7 +11,7 @@ StyledSheetIcons.displayName = "StyledSheetIcons";
 export const StyledSheetWrapper = styled.div.withConfig({
   displayName: "Styles__StyledSheetWrapper",
   componentId: "sc-144eyxd-1"
-})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, props => 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), props => props.$mode === "stretch" && css(["@media (max-width:640px){width:100%;height:100%;}"]), props => props.$position === "center" && css(["", ""], {
+})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, props => 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;}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;}span{top:-48px;right:8px;}}"], StyledSheetIcons), props => props.$mode === "stretch" && css(["@media (max-width:640px){width:100%;height:100%;}"]), props => props.$position === "center" && css(["", ""], {
   "marginLeft": "auto",
   "marginRight": "auto"
 }), props => props.$position === "left" && css(["", ""], {
@@ -22,42 +22,43 @@ export const StyledSheetWrapper = styled.div.withConfig({
   "marginRight": "0.5rem"
 }), props => props.$mode === "stretch" && props.$position !== "left" && css(["", "{span{right:48px;}}"], StyledSheetIcons), props => props.$mode === "stretch" && props.$position === "left" && css(["flex-direction:row-reverse;", "{span{right:-8px;}}"], StyledSheetIcons));
 StyledSheetWrapper.displayName = "StyledSheetWrapper";
+export const StyledSheetSurface = styled.div.withConfig({
+  displayName: "Styles__StyledSheetSurface",
+  componentId: "sc-144eyxd-2"
+})(["display:flex;flex-direction:inherit;flex:1 1 auto;min-width:0;min-height:0;"]);
+StyledSheetSurface.displayName = "StyledSheetSurface";
 export const StyledSheetWrapperPaper = styled.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;", ""], {
+  componentId: "sc-144eyxd-3"
+})(["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;transform:translateZ(0);contain:paint;overscroll-behavior:contain;", ""], {
   "flex": "1 1 auto"
 });
 StyledSheetWrapperPaper.displayName = "StyledSheetWrapperPaper";
-export const StyledSheetControlsTop = keyframes(["0%{opacity:0;transform:translateY(-200px);}100%{opacity:1;transform:translateY(0);}"]);
-export const StyledSheetControlsBottom = keyframes(["0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-200px);}"]);
-export const StyledSheetControlsCenterIn = keyframes(["0%{transform:translateY(-150px);opacity:0;}100%{transform:translateY(0);opacity:1;}"]);
-export const StyledSheetControlsCenterOut = keyframes(["0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-150px);opacity:0;}"]);
 export const StyledAnimatedSpan = styled.span.withConfig({
   displayName: "Styles__StyledAnimatedSpan",
-  componentId: "sc-144eyxd-3"
-})(["&:hover svg{fill:var(--color-primary);}", " ", " ", " ", " ", ""], props => 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")), props => props.$state === "entered" && css(["opacity:1;"]), props => props.$disabled && css(["pointer-events:none;svg{opacity:0.5;}"]), props => 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")), props => props.$state === "exited" && css(["opacity:0;"]));
+  componentId: "sc-144eyxd-4"
+})(["&:hover svg{fill:var(--color-primary);}", ""], props => props.$disabled && css(["pointer-events:none;svg{opacity:0.5;}"]));
 StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
 export const StyledCssTransition = styled(CSSTransition).withConfig({
   displayName: "Styles__StyledCssTransition",
-  componentId: "sc-144eyxd-4"
+  componentId: "sc-144eyxd-5"
 })(["", " ", " ", " ", ""], props => 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;}"]), props => 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;}"]), props => 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;}"]), props => 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;}"]));
 StyledCssTransition.displayName = "StyledCssTransition";
 export const StyledListSeparator = styled(ListSeparator).withConfig({
   displayName: "Styles__StyledListSeparator",
-  componentId: "sc-144eyxd-5"
+  componentId: "sc-144eyxd-6"
 })(["margin:0;"]);
 StyledListSeparator.displayName = "StyledListSeparator";
 export const StyledIconsWrapperSmall = styled.div.withConfig({
   displayName: "Styles__StyledIconsWrapperSmall",
-  componentId: "sc-144eyxd-6"
+  componentId: "sc-144eyxd-7"
 })(["height:40px;display:flex;gap:8px;padding-left:16px;padding-right:16px;align-items:center;place-content:end;flex-direction:row-reverse;"]);
 StyledIconsWrapperSmall.displayName = "StyledIconsWrapperSmall";
 export const StyledHeader = styled.div.withConfig({
   displayName: "Styles__StyledHeader",
-  componentId: "sc-144eyxd-7"
+  componentId: "sc-144eyxd-8"
 })(["@media (min-width:640px){display:none;}"]);
 StyledHeader.displayName = "StyledHeader";
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["CSSTransition","styled","css","keyframes","BoxSizingStyle","FontStyle","ListSeparator","StyledSheetIcons","div","withConfig","displayName","componentId","StyledSheetWrapper","props","$mode","$position","StyledSheetWrapperPaper","attrs","className","paperClass","StyledSheetControlsTop","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$disabled","$durationOut","$maxDurationOut","StyledCssTransition","$direction","StyledListSeparator","StyledIconsWrapperSmall","StyledHeader"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import { CSSTransition } from \"react-transition-group\";\n\nimport styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { ListSeparator } from \"../List\";\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  @media (max-width: 640px) {\n    display: none;\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.$mode === \"stretch\" &&\n    css`\n      @media (max-width: 640px) {\n        width: 100%;\n        height: 100%;\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  $disabled?: boolean;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n  &:hover svg {\n    fill: var(--color-primary);\n  }\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.$disabled &&\n    css`\n      pointer-events: none;\n\n      svg {\n        opacity: 0.5;\n      }\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\nexport const StyledListSeparator = styled(ListSeparator)`\n  margin: 0;\n`;\n\nStyledListSeparator.displayName = \"StyledListSeparator\";\n\nexport const StyledIconsWrapperSmall = styled.div`\n  height: 40px;\n  display: flex;\n  gap: 8px;\n  padding-left: 16px;\n  padding-right: 16px;\n  align-items: center;\n  place-content: end;\n  flex-direction: row-reverse;\n`;\n\nStyledIconsWrapperSmall.displayName = \"StyledIconsWrapperSmall\";\n\nexport const StyledHeader = styled.div`\n  @media (min-width: 640px) {\n    display: none;\n  }\n`;\n\nStyledHeader.displayName = \"StyledHeader\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["CSSTransition","styled","css","BoxSizingStyle","FontStyle","ListSeparator","StyledSheetIcons","div","withConfig","displayName","componentId","StyledSheetWrapper","props","$mode","$position","StyledSheetSurface","StyledSheetWrapperPaper","attrs","className","paperClass","StyledAnimatedSpan","span","$disabled","StyledCssTransition","$direction","StyledListSeparator","StyledIconsWrapperSmall","StyledHeader"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import { CSSTransition } from \"react-transition-group\";\n\nimport styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { ListSeparator } from \"../List\";\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  @media (max-width: 640px) {\n    display: none;\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            }\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            }\n            span {\n              top: -48px;\n              right: 8px;\n            }\n          }\n        `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    css`\n      @media (max-width: 640px) {\n        width: 100%;\n        height: 100%;\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 StyledSheetSurface = styled.div`\n  display: flex;\n  flex-direction: inherit;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n`;\n\nStyledSheetSurface.displayName = \"StyledSheetSurface\";\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  /* Scrolling here must not dirty the blurred overlays below, which already clip to this box. */\n  transform: translateZ(0);\n  contain: paint;\n  /* A scroll that runs off the end must stop here. Chained to the page, it moves what the blur samples. */\n  overscroll-behavior: contain;\n\n  ${tw`tw-flex-auto`}\n`;\n\nStyledSheetWrapperPaper.displayName = \"StyledSheetWrapperPaper\";\n\ninterface IStyledAnimatedSpan {\n  $disabled?: boolean;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n  &:hover svg {\n    fill: var(--color-primary);\n  }\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      pointer-events: none;\n\n      svg {\n        opacity: 0.5;\n      }\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\nexport const StyledListSeparator = styled(ListSeparator)`\n  margin: 0;\n`;\n\nStyledListSeparator.displayName = \"StyledListSeparator\";\n\nexport const StyledIconsWrapperSmall = styled.div`\n  height: 40px;\n  display: flex;\n  gap: 8px;\n  padding-left: 16px;\n  padding-right: 16px;\n  align-items: center;\n  place-content: end;\n  flex-direction: row-reverse;\n`;\n\nStyledIconsWrapperSmall.displayName = \"StyledIconsWrapperSmall\";\n\nexport const StyledHeader = styled.div`\n  @media (min-width: 640px) {\n    display: none;\n  }\n`;\n\nStyledHeader.displayName = \"StyledHeader\";\n"],"mappings":"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","ignoreList":[]}