npm - @activecollab/components - Versions diffs - 1.0.31 → 1.0.35 - Mend

@activecollab/components 1.0.31 → 1.0.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAef,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,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,eAAO,MAAM,KAAK,~~sHAkIjB~~,CAAC"}
1	+ {"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAef,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,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,eAAO,MAAM,KAAK,sHAoIjB,CAAC"}

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

@@ -6,7 +6,8 @@ import { Transition } from "react-transition-group";
 import { Window } from "../Window";
 import classnames from "classnames";
 import useForkRef from "../../utils/useForkRef";
-import { StyledAnimatedSpan, StyledCssTransition, StyledSheetIcons, StyledSheetOverlay, StyledSheetWrapper, StyledSheetWrapperPaper } from "./Styles";
+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,
@@ -71,10 +72,10 @@ export var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClose: handleClose,
     disableFocusLock: disableFocusLock,
     disableScrollLock: disableScrollLock
-  }), /*#__PURE__*/React.createElement(StyledSheetOverlay, {
+  }), open ? /*#__PURE__*/React.createElement(Overlay, {
     onClick: handleBackgroundClick,
-    $hasBgColor: !disableBackgroundColor
-  }), /*#__PURE__*/React.createElement(StyledSheetWrapper, {
+    disableBackgroundColor: disableBackgroundColor
+  }) : null, /*#__PURE__*/React.createElement(StyledSheetWrapper, {
     className: classnames("c-sheet__wrapper", bodyClassName),
     style: bodyStyle,
     $position: position,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":["React","useRef","useCallback","useEffect","forwardRef","useState","Transition","Window","classnames","useForkRef","StyledAnimatedSpan","StyledCssTransition","StyledSheetIcons","~~StyledSheetOverlay~~","~~StyledSheetWrapper~~","~~StyledSheetWrapperPaper~~","Sheet","ref","children","onClose","controls","open","defaultOpen","animation","position","mode","disableFocusLock","disableScrollLock","disableBackgroundColor","bodyStyle","bodyClassName","disableBackgroundClick","rest","setOpen","exited","setExited","innerRef","handleRef","handleEnter","handleExited","handleClose","handleBackgroundClick","event","preventDefault","length","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","state","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IACEC,MADF,EAEEC,WAFF,EAGEC,SAHF,EAIEC,UAJF,EAMEC,QANF,QAUO,OAVP;AAYA,SAASC,UAAT,QAA2B,wBAA3B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,SACEC,kBADF,EAEEC,mBAFF,EAGEC,gBAHF,EAIEC,kBAJF,EAKEC,~~kBALF~~,~~EAMEC~~,~~uBANF~~,~~QAOO~~,~~UAPP~~;~~AAwBA~~,OAAO,IAAMC,KAAK,gBAAGZ,UAAU,CAI7B,gBAiBEa,GAjBF,EAkBK;AAAA,MAhBDC,QAgBC,QAhBDA,QAgBC;AAAA,MAfDC,OAeC,QAfDA,OAeC;AAAA,2BAdDC,QAcC;AAAA,MAdDA,QAcC,8BAdU,EAcV;AAAA,uBAbDC,IAaC;AAAA,MAbKC,WAaL,0BAbmB,KAanB;AAAA,4BAZDC,SAYC;AAAA,MAZDA,SAYC,+BAZW,KAYX;AAAA,2BAXDC,QAWC;AAAA,MAXDA,QAWC,8BAXU,QAWV;AAAA,uBAVDC,IAUC;AAAA,MAVDA,IAUC,0BAVM,QAUN;AAAA,mCATDC,gBASC;AAAA,MATDA,gBASC,sCATkB,KASlB;AAAA,mCARDC,iBAQC;AAAA,MARDA,iBAQC,sCARmB,KAQnB;AAAA,mCAPDC,sBAOC;AAAA,MAPDA,sBAOC,sCAPwB,KAOxB;AAAA,MANDC,SAMC,QANDA,SAMC;AAAA,MALDC,aAKC,QALDA,aAKC;AAAA,oCAJDC,sBAIC;AAAA,MAJDA,sBAIC,uCAJwB,KAIxB;AAAA,MAHEC,IAGF;;AACH,kBAAwB3B,QAAQ,CAACiB,WAAD,CAAhC;AAAA,MAAOD,IAAP;AAAA,MAAaY,OAAb;;AACA,mBAA4B5B,QAAQ,CAAC,IAAD,CAApC;AAAA,MAAO6B,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,QAAQ,GAAGnC,MAAM,CAAiB,IAAjB,CAAvB;AAEA,MAAMoC,SAAS,GAAG5B,UAAU,CAAC2B,QAAD,EAAWnB,GAAX,CAA5B;AAEAd,EAAAA,SAAS,CAAC,YAAM;AACd8B,IAAAA,OAAO,CAACX,WAAD,CAAP;AACD,GAFQ,EAEN,CAACA,WAAD,CAFM,CAAT;AAIA,MAAMgB,WAAW,GAAGpC,WAAW,CAAC,YAAM;AACpCiC,IAAAA,SAAS,CAAC,KAAD,CAAT;AACD,GAF8B,EAE5B,EAF4B,CAA/B;AAIA,MAAMI,YAAY,GAAGrC,WAAW,CAAC,YAAM;AACrCiC,IAAAA,SAAS,CAAC,IAAD,CAAT;AACA,WAAOhB,OAAP,KAAmB,UAAnB,IAAiCA,OAAO,EAAxC;AACD,GAH+B,EAG7B,CAACA,OAAD,CAH6B,CAAhC;AAKA,MAAMqB,WAAW,GAAGtC,WAAW,CAAC,YAAM;AACpC+B,IAAAA,OAAO,CAAC,KAAD,CAAP;AACD,GAF8B,EAE5B,EAF4B,CAA/B;AAIA,MAAMQ,qBAAqB,GAAGvC,WAAW,CACvC,UAACwC,KAAD,EAAuC;AACrC,QAAI,CAACX,sBAAL,EAA6B;AAC3BW,MAAAA,KAAK,CAACC,cAAN;AACAH,MAAAA,WAAW;AACZ;AACF,GANsC,EAOvC,CAACT,sBAAD,EAAyBS,WAAzB,CAPuC,CAAzC;;AAUA,MAAI,CAACnB,IAAD,IAASa,MAAb,EAAqB;AACnB,WAAO,IAAP;AACD;;AAED,sBACE,oBAAC,MAAD,eACMF,IADN;AAEE,IAAA,GAAG,EAAEK,SAFP;AAGE,IAAA,OAAO,EAAEG,WAHX;AAIE,IAAA,gBAAgB,EAAEd,gBAJpB;AAKE,IAAA,iBAAiB,EAAEC;AALrB,~~mBAOE~~,oBAAC,~~kBAAD~~;AACE,IAAA,OAAO,~~EAAEc~~,qBADX;AAEE,IAAA,~~WAAW~~,~~EAAE,CAACb~~;~~AAFhB~~,~~IAPF~~,~~eAWE~~,oBAAC,kBAAD;AACE,IAAA,SAAS,EAAEpB,UAAU,CAAC,kBAAD,EAAqBsB,aAArB,CADvB;AAEE,IAAA,KAAK,EAAED,SAFT;AAGE,IAAA,SAAS,EAAEL,QAHb;AAIE,IAAA,KAAK,EAAEC;AAJT,KAMGL,QAAQ,CAACwB,MAAT,gBACC,oBAAC,gBAAD,QACGxB,QAAQ,CAACyB,GAAT,CAAa,UAACC,IAAD,EAAOC,KAAP,EAAiB;AAC7B,QAAMC,aAAa,GAAG,CAAtB,CAD6B,CACJ;;AACzB,QAAMC,cAAc,GAAG,CAAvB,CAF6B,CAEH;;AAC1B,QAAMC,OAAO,GAAGH,KAAK,GAAG,CAAxB;AACA,QAAMI,WAAW,GACf/B,QAAQ,CAACwB,MAAT,GAAkBK,cAAlB,GACIA,cADJ,GAEIA,cAAc,GAAGC,OAHvB;AAIA,QAAME,UAAU,GAAGF,OAAO,IAAIF,aAAX,GAA2B,CAA3B,GAA+BE,OAAlD;AACA,wBACE,oBAAC,UAAD;AACE,MAAA,MAAM,MADR;AAEE,MAAA,EAAE,EAAE7B,IAFN;AAGE,MAAA,OAAO,EAAE2B,aAAa,GAAG,GAH3B;AAIE,MAAA,GAAG,uBAAqBD;AAJ1B,OAMG,UAACM,KAAD;AAAA,0BACC,oBAAC,kBAAD;AACE,QAAA,MAAM,EAAEA,KADV;AAEE,QAAA,KAAK,EAAE5B,IAFT;AAGE,QAAA,cAAc,EAAEuB,aAAa,GAAG,EAHlC;AAIE,QAAA,eAAe,EAAEC,cAAc,GAAG,EAJpC;AAKE,QAAA,YAAY,EAAEE,WAAW,GAAG,EAL9B;AAME,QAAA,WAAW,EAAEC,UAAU,GAAG;AAN5B,SAQGN,IARH,CADD;AAAA,KANH,CADF;AAqBD,GA9BA,CADH,CADD,GAkCG,IAxCN,eAyCE,oBAAC,mBAAD;AACE,IAAA,MAAM,MADR;AAEE,IAAA,EAAE,EAAEzB,IAFN;AAGE,IAAA,OAAO,EAAE,GAHX;AAIE,IAAA,UAAU,EAAE,oBAJd;AAKE,IAAA,UAAU,EAAEE,SALd;AAME,IAAA,OAAO,EAAEe,WANX;AAOE,IAAA,QAAQ,EAAEC;AAPZ,kBASE,oBAAC,uBAAD;AAAyB,IAAA,SAAS,EAAC;AAAnC,KACGrB,QADH,CATF,CAzCF,~~CAXF~~,CADF;~~AAqED~~,~~CAjI4B~~,CAAxB;~~AAoIPF~~,KAAK,CAACsC,WAAN,GAAoB,OAApB","sourcesContent":["import React, {\n useRef,\n useCallback,\n useEffect,\n forwardRef,\n HTMLAttributes,\n useState,\n CSSProperties,\n ReactElement,\n MouseEvent,\n} from \"react\";\n\nimport { Transition } from \"react-transition-group\";\nimport { Window } from \"../Window\";\nimport classnames from \"classnames\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport {\n StyledAnimatedSpan,\n StyledCssTransition,\n StyledSheetIcons,\n ~~StyledSheetOverlay,\n~~ StyledSheetWrapper,\n StyledSheetWrapperPaper,\n} from \"./Styles\";\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 const Sheet = forwardRef<\n HTMLDivElement,\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 const innerRef = useRef<HTMLDivElement>(null);\n\n const handleRef = useForkRef(innerRef, ref);\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 if (!open && exited) {\n return null;\n }\n\n return (\n <Window\n {...rest}\n ref={handleRef}\n onClose={handleClose}\n disableFocusLock={disableFocusLock}\n disableScrollLock={disableScrollLock}\n >\n <~~StyledSheetOverlay~~\n onClick={handleBackgroundClick}\n ~~$hasBgColor~~={!disableBackgroundColor}\n />\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 className=\"c-sheet__wrapper__paper\">\n {children}\n </StyledSheetWrapperPaper>\n </StyledCssTransition>\n </StyledSheetWrapper>\n </Window>\n );\n }\n);\n\nSheet.displayName = \"Sheet\";\n"],"file":"Sheet.js"}
1	+ {"version":3,"sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":["React","useRef","useCallback","useEffect","forwardRef","useState","Transition","Window","classnames","useForkRef","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","innerRef","handleRef","handleEnter","handleExited","handleClose","handleBackgroundClick","event","preventDefault","length","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","state","displayName"],"mappings":"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","sourcesContent":["import React, {\n useRef,\n useCallback,\n useEffect,\n forwardRef,\n HTMLAttributes,\n useState,\n CSSProperties,\n ReactElement,\n MouseEvent,\n} from \"react\";\n\nimport { Transition } from \"react-transition-group\";\nimport { Window } from \"../Window\";\nimport classnames from \"classnames\";\nimport useForkRef from \"../../utils/useForkRef\";\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 const Sheet = forwardRef<\n HTMLDivElement,\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 const innerRef = useRef<HTMLDivElement>(null);\n\n const handleRef = useForkRef(innerRef, ref);\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 if (!open && exited) {\n return null;\n }\n\n return (\n <Window\n {...rest}\n ref={handleRef}\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 className=\"c-sheet__wrapper__paper\">\n {children}\n </StyledSheetWrapperPaper>\n </StyledCssTransition>\n </StyledSheetWrapper>\n </Window>\n );\n }\n);\n\nSheet.displayName = \"Sheet\";\n"],"file":"Sheet.js"}

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

@@ -1,9 +1,5 @@
-/// <reference types="react" />
 import { CSSTransition } from "react-transition-group";
 export declare const StyledSheetIcons: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledSheetOverlay: import("styled-components").StyledComponent<import("react").FC<import("react").HTMLAttributes<HTMLDivElement>>, any, {
-    $hasBgColor: boolean;
-}, never>;
 interface IStyledSheetWrapper {
     $position?: "center" | "left" | "right";
     $mode?: "normal" | "stretch";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Styles.ts"],"names":[],"mappings":"~~;AAKA~~,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD,eAAO,MAAM,gBAAgB,oEAuB5B,CAAC;AAIF,~~eAAO,MAAM,kBAAkB;iBAAkC,OAAO;SAMvE,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,qFA0F9B,CAAC;AAIF,eAAO,MAAM,uBAAuB,oEASnC,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,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,sFAiD9B,CAAC;AAIF,eAAO,MAAM,mBAAmB;gBAClB,MAAM;SA6HnB,CAAC"}
1	+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD,eAAO,MAAM,gBAAgB,oEAuB5B,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,qFA0F9B,CAAC;AAIF,eAAO,MAAM,uBAAuB,oEASnC,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,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,sFAiD9B,CAAC;AAIF,eAAO,MAAM,mBAAmB;gBAClB,MAAM;SA6HnB,CAAC"}

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

@@ -1,5 +1,4 @@
 import styled, { css, keyframes } from "styled-components";
-import { Overlay } from "../Overlay";
 import { BoxSizingStyle } from "../BoxSizingStyle";
 import { FontStyle } from "../FontStyle";
 import { CSSTransition } from "react-transition-group";
@@ -8,16 +7,9 @@ export var StyledSheetIcons = styled.div.withConfig({
   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 StyledSheetOverlay = styled(Overlay).withConfig({
-  displayName: "Styles__StyledSheetOverlay",
-  componentId: "sc-144eyxd-1"
-})(["", ""], function (props) {
-  return props.$hasBgColor && css(["background:var(--modal-background);"]);
-});
-StyledSheetOverlay.displayName = "StyledSheetOverlay";
 export var StyledSheetWrapper = styled.div.withConfig({
   displayName: "Styles__StyledSheetWrapper",
-  componentId: "sc-144eyxd-2"
+  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) {
@@ -43,7 +35,7 @@ export var StyledSheetWrapper = styled.div.withConfig({
 StyledSheetWrapper.displayName = "StyledSheetWrapper";
 export var StyledSheetWrapperPaper = styled.div.withConfig({
   displayName: "Styles__StyledSheetWrapperPaper",
-  componentId: "sc-144eyxd-3"
+  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"
 });
@@ -54,7 +46,7 @@ export var StyledSheetControlsCenterIn = keyframes(["0%{transform:translateY(-15
 export var StyledSheetControlsCenterOut = keyframes(["0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-150px);opacity:0;}"]);
 export var StyledAnimatedSpan = styled.span.withConfig({
   displayName: "Styles__StyledAnimatedSpan",
-  componentId: "sc-144eyxd-4"
+  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) {
@@ -67,7 +59,7 @@ export var StyledAnimatedSpan = styled.span.withConfig({
 StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
 export var StyledCssTransition = styled(CSSTransition).withConfig({
   displayName: "Styles__StyledCssTransition",
-  componentId: "sc-144eyxd-5"
+  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) {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Sheet/Styles.ts"],"names":["styled","css","keyframes","Overlay","BoxSizingStyle","FontStyle","CSSTransition","StyledSheetIcons","div","displayName","StyledSheetOverlay","props","$hasBgColor","StyledSheetWrapper","$mode","$position","StyledSheetWrapperPaper","StyledSheetControlsTop","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","$direction"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,EAAsBC,SAAtB,QAAuC,mBAAvC;AAEA,SAASC,OAAT,QAAwB,YAAxB;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,aAAT,QAA8B,wBAA9B;AAEA,OAAO,IAAMC,gBAAgB,GAAGP,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,yUAAtB;AAyBPD,gBAAgB,CAACE,WAAjB,GAA+B,kBAA/B;AAEA,OAAO,IAAMC,kBAAkB,GAAGV,MAAM,CAACG,OAAD,CAAT;AAAA;AAAA;AAAA,aAC3B,UAACQ,KAAD;AAAA,SACAA,KAAK,CAACC,WAAN,IACAX,GADA,yCADA;AAAA,CAD2B,CAAxB;AAQPS,kBAAkB,CAACD,WAAnB,GAAiC,oBAAjC;AAOA,OAAO,IAAMI,kBAAkB,GAAGb,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,iHAC3BJ,cAD2B,EAE3BC,SAF2B,EAS3B,UAACM,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,SAAhB,GACIb,GADJ,yNAMQM,gBANR,IAmBIN,GAnBJ,uNA0BQM,gBA1BR,CADA;AAAA,CAT2B,EAiD3B,UAACI,KAAD;AAAA,SACAA,KAAK,CAACI,SAAN,KAAoB,QAApB,IACAd,GADA,WAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CAjD2B,EAuD3B,UAACU,KAAD;AAAA,SACAA,KAAK,CAACI,SAAN,KAAoB,MAApB,IACAd,GADA,WAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CAvD2B,EA6D3B,UAACU,KAAD;AAAA,SACAA,KAAK,CAACI,SAAN,KAAoB,OAApB,IACAd,GADA,WAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CA7D2B,EAmE3B,UAACU,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,SAAhB,IACAH,KAAK,CAACI,SAAN,KAAoB,MADpB,IAEAd,GAFA,8BAGIM,gBAHJ,CADA;AAAA,CAnE2B,EA8E3B,UAACI,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,SAAhB,IACAH,KAAK,CAACI,SAAN,KAAoB,MADpB,IAEAd,GAFA,yDAKIM,gBALJ,CADA;AAAA,CA9E2B,CAAxB;AA4FPM,kBAAkB,CAACJ,WAAnB,GAAiC,oBAAjC;AAEA,OAAO,IAAMO,uBAAuB,GAAGhB,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,kLAQ9B;AAAA;AAAA,CAR8B,CAA7B;AAWPQ,uBAAuB,CAACP,WAAxB,GAAsC,yBAAtC;AAEA,OAAO,IAAMQ,sBAAsB,GAAGf,SAAH,yFAA5B;AAWP,OAAO,IAAMgB,yBAAyB,GAAGhB,SAAH,yFAA/B;AAWP,OAAO,IAAMiB,2BAA2B,GAAGjB,SAAH,yFAAjC;AAWP,OAAO,IAAMkB,4BAA4B,GAAGlB,SAAH,yFAAlC;AAoBP,OAAO,IAAMmB,kBAAkB,GAAGrB,MAAM,CAACsB,IAAV;AAAA;AAAA;AAAA,2CAE3B,UAACX,KAAD;AAAA,SACAA,KAAK,CAACY,MAAN,KAAiB,UAAjB,IACAtB,GADA,qBAIIU,KAAK,CAACG,KAAN,KAAgB,SAAhB,GACEb,GADF,wEAEsBgB,sBAFtB,EAG6BN,KAAK,CAACa,WAHnC,QAI0Bb,KAAK,CAACa,WAJhC,UAMEvB,GANF,sEAOsBkB,2BAPtB,EAQ6BR,KAAK,CAACc,cARnC,OAJJ,CADA;AAAA,CAF2B,EAoB3B,UAACd,KAAD;AAAA,SACAA,KAAK,CAACY,MAAN,KAAiB,SAAjB,IACAtB,GADA,gBADA;AAAA,CApB2B,EA0B3B,UAACU,KAAD;AAAA,SACAA,KAAK,CAACY,MAAN,KAAiB,SAAjB,IACAtB,GADA,qBAIIU,KAAK,CAACG,KAAN,KAAgB,SAAhB,GACEb,GADF,wEAEsBiB,yBAFtB,EAG6BP,KAAK,CAACe,YAHnC,QAI0Bf,KAAK,CAACe,YAJhC,UAMEzB,GANF,qEAOsBmB,4BAPtB,EAQ6BT,KAAK,CAACgB,eARnC,OAJJ,CADA;AAAA,CA1B2B,EA4C3B,UAAChB,KAAD;AAAA,SACAA,KAAK,CAACY,MAAN,KAAiB,QAAjB,IACAtB,GADA,gBADA;AAAA,CA5C2B,CAAxB;AAmDPoB,kBAAkB,CAACZ,WAAnB,GAAiC,oBAAjC;AAEA,OAAO,IAAMmB,mBAAmB,GAAG5B,MAAM,CAACM,aAAD,CAAT;AAAA;AAAA;AAAA,4BAG5B,UAACK,KAAD;AAAA,SACAA,KAAK,CAACkB,UAAN,KAAqB,KAArB,IACA5B,GADA,8fADA;AAAA,CAH4B,EAkC5B,UAACU,KAAD;AAAA,SACAA,KAAK,CAACkB,UAAN,KAAqB,QAArB,IACA5B,GADA,2fADA;AAAA,CAlC4B,EAiE5B,UAACU,KAAD;AAAA,SACAA,KAAK,CAACkB,UAAN,KAAqB,MAArB,IACA5B,GADA,8fADA;AAAA,CAjE4B,EAgG5B,UAACU,KAAD;AAAA,SACAA,KAAK,CAACkB,UAAN,KAAqB,OAArB,IACA5B,GADA,2fADA;AAAA,CAhG4B,CAAzB;AAgIP2B,mBAAmB,CAACnB,WAApB,GAAkC,qBAAlC","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Overlay } from \"../Overlay\";\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\nexport const StyledSheetOverlay = styled(Overlay)<{ $hasBgColor: boolean }>`\n ${(props) =>\n props.$hasBgColor &&\n css`\n background: var(--modal-background);\n `}\n`;\n\nStyledSheetOverlay.displayName = \"StyledSheetOverlay\";\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\nexport const StyledSheetWrapperPaper = styled.div`\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"],"file":"Styles.js"}
1	+ {"version":3,"sources":["../../../../src/components/Sheet/Styles.ts"],"names":["styled","css","keyframes","BoxSizingStyle","FontStyle","CSSTransition","StyledSheetIcons","div","displayName","StyledSheetWrapper","props","$mode","$position","StyledSheetWrapperPaper","StyledSheetControlsTop","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","$direction"],"mappings":"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","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\nexport const StyledSheetWrapperPaper = styled.div`\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"],"file":"Styles.js"}

package/dist/esm/hooks/index.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export * from "./useInitScrollRef";
+export * from "./useHeight";
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/hooks/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC"}

package/dist/esm/hooks/index.js CHANGED Viewed

@@ -1,2 +1,3 @@
 export * from "./useInitScrollRef";
+export * from "./useHeight";
 //# sourceMappingURL=index.js.map

package/dist/esm/hooks/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAd","sourcesContent":["export * from \"./useInitScrollRef\";\n"],"file":"index.js"}
1	+ {"version":3,"sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAd;AACA,cAAc,aAAd","sourcesContent":["export * from \"./useInitScrollRef\";\nexport * from \"./useHeight\";\n"],"file":"index.js"}

package/dist/esm/hooks/useHeight.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
 import { RefObject } from "react";
-declare const useHeight: (ref: RefObject<HTMLElement>) => number;
-export default useHeight;
+export declare const useHeight: (ref: RefObject<HTMLElement>) => number;
 //# sourceMappingURL=useHeight.d.ts.map

package/dist/esm/hooks/useHeight.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useHeight.d.ts","sourceRoot":"","sources":["../../../src/hooks/useHeight.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEvD,~~QAAA~~,MAAM,SAAS,QAAS,UAAU,WAAW,CAAC,KAAG,~~MAsBhD~~,CAAC~~;AAEF,eAAe,SAAS,CAAC~~"}
1	+ {"version":3,"file":"useHeight.d.ts","sourceRoot":"","sources":["../../../src/hooks/useHeight.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEvD,eAAO,MAAM,SAAS,QAAS,UAAU,WAAW,CAAC,KAAG,MAsBvD,CAAC"}

package/dist/esm/hooks/useHeight.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
-var useHeight = function useHeight(ref) {
+export var useHeight = function useHeight(ref) {
   var _useState = useState(0),
       height = _useState[0],
       setHeight = _useState[1];
@@ -20,6 +19,4 @@ var useHeight = function useHeight(ref) {
   }, [ref]);
   return height;
 };
-export default useHeight;
 //# sourceMappingURL=useHeight.js.map

package/dist/esm/hooks/useHeight.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/hooks/useHeight.tsx"],"names":["useEffect","useState","useHeight","ref","height","setHeight","current","element","prevMaxHeight","style","maxHeight","prevVisibility","visibility","elementHeight","clientHeight"],"mappings":"AAAA,SAAoBA,SAApB,EAA+BC,QAA/B,QAA+C,OAA/C;;AAEA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,GAAD,EAAyC;~~AACzD~~,kBAA4BF,QAAQ,CAAC,CAAD,CAApC;AAAA,MAAOG,MAAP;AAAA,MAAeC,SAAf;;AAEAL,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIG,GAAG,IAAIA,GAAG,CAACG,OAAf,EAAwB;AACtB,UAAMC,OAAO,GAAGJ,GAAG,CAACG,OAApB;AACA,UAAME,aAAa,GAAGD,OAAO,CAACE,KAAR,CAAcC,SAApC;AACA,UAAMC,cAAc,GAAGJ,OAAO,CAACE,KAAR,CAAcG,UAArC;AAEAL,MAAAA,OAAO,CAACE,KAAR,CAAcG,UAAd,GAA2B,QAA3B;AACAL,MAAAA,OAAO,CAACE,KAAR,CAAcC,SAAd,GAA0B,MAA1B;AAEA,UAAMG,aAAa,GAAGN,OAAO,CAACO,YAA9B;AAEAP,MAAAA,OAAO,CAACE,KAAR,CAAcG,UAAd,GAA2BD,cAA3B;AACAJ,MAAAA,OAAO,CAACE,KAAR,CAAcC,SAAd,GAA0BF,aAA1B;AAEA,aAAOH,SAAS,CAACQ,aAAD,CAAhB;AACD;AACF,GAhBQ,EAgBN,CAACV,GAAD,CAhBM,CAAT;AAkBA,SAAOC,MAAP;AACD,~~CAtBD;;AAwBA,eAAeF,SAAf~~","sourcesContent":["import { RefObject, useEffect, useState } from \"react\";\n\~~nconst~~ useHeight = (ref: RefObject<HTMLElement>): number => {\n const [height, setHeight] = useState(0);\n\n useEffect(() => {\n if (ref && ref.current) {\n const element = ref.current;\n const prevMaxHeight = element.style.maxHeight;\n const prevVisibility = element.style.visibility;\n\n element.style.visibility = \"hidden\";\n element.style.maxHeight = \"none\";\n\n const elementHeight = element.clientHeight;\n\n element.style.visibility = prevVisibility;\n element.style.maxHeight = prevMaxHeight;\n\n return setHeight(elementHeight);\n }\n }, [ref]);\n\n return height;\n};\n~~\nexport default useHeight;\n~~"],"file":"useHeight.js"}
1	+ {"version":3,"sources":["../../../src/hooks/useHeight.tsx"],"names":["useEffect","useState","useHeight","ref","height","setHeight","current","element","prevMaxHeight","style","maxHeight","prevVisibility","visibility","elementHeight","clientHeight"],"mappings":"AAAA,SAAoBA,SAApB,EAA+BC,QAA/B,QAA+C,OAA/C;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,GAAD,EAAyC;AAChE,kBAA4BF,QAAQ,CAAC,CAAD,CAApC;AAAA,MAAOG,MAAP;AAAA,MAAeC,SAAf;;AAEAL,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIG,GAAG,IAAIA,GAAG,CAACG,OAAf,EAAwB;AACtB,UAAMC,OAAO,GAAGJ,GAAG,CAACG,OAApB;AACA,UAAME,aAAa,GAAGD,OAAO,CAACE,KAAR,CAAcC,SAApC;AACA,UAAMC,cAAc,GAAGJ,OAAO,CAACE,KAAR,CAAcG,UAArC;AAEAL,MAAAA,OAAO,CAACE,KAAR,CAAcG,UAAd,GAA2B,QAA3B;AACAL,MAAAA,OAAO,CAACE,KAAR,CAAcC,SAAd,GAA0B,MAA1B;AAEA,UAAMG,aAAa,GAAGN,OAAO,CAACO,YAA9B;AAEAP,MAAAA,OAAO,CAACE,KAAR,CAAcG,UAAd,GAA2BD,cAA3B;AACAJ,MAAAA,OAAO,CAACE,KAAR,CAAcC,SAAd,GAA0BF,aAA1B;AAEA,aAAOH,SAAS,CAACQ,aAAD,CAAhB;AACD;AACF,GAhBQ,EAgBN,CAACV,GAAD,CAhBM,CAAT;AAkBA,SAAOC,MAAP;AACD,CAtBM","sourcesContent":["import { RefObject, useEffect, useState } from \"react\";\n\nexport const useHeight = (ref: RefObject<HTMLElement>): number => {\n const [height, setHeight] = useState(0);\n\n useEffect(() => {\n if (ref && ref.current) {\n const element = ref.current;\n const prevMaxHeight = element.style.maxHeight;\n const prevVisibility = element.style.visibility;\n\n element.style.visibility = \"hidden\";\n element.style.maxHeight = \"none\";\n\n const elementHeight = element.clientHeight;\n\n element.style.visibility = prevVisibility;\n element.style.maxHeight = prevMaxHeight;\n\n return setHeight(elementHeight);\n }\n }, [ref]);\n\n return height;\n};\n"],"file":"useHeight.js"}

package/dist/index.js CHANGED Viewed

@@ -1700,16 +1700,21 @@
   var StyledOverlay = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledOverlay",
     componentId: "sc-flnrpv-0"
-  })(["position:fixed;top:0;right:0;bottom:0;left:0;"]);
+  })(["position:fixed;top:0;right:0;bottom:0;left:0;", ""], function (props) {
+    return !props.$disableBackgroundColor && styled.css(["background:var(--modal-background);backdrop-filter:blur(2px);"]);
+  });
   StyledOverlay.displayName = "StyledOverlay";
-  var _excluded$M = ["className"];
+  var _excluded$M = ["className", "disableBackgroundColor"];
   var Overlay = function Overlay(_ref) {
     var className = _ref.className,
+        _ref$disableBackgroun = _ref.disableBackgroundColor,
+        disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
         rest = _objectWithoutProperties(_ref, _excluded$M);
     return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
-      className: classnames__default["default"]("c-overlay", className)
+      className: classnames__default["default"]("c-overlay", className),
+      $disableBackgroundColor: disableBackgroundColor
     }, rest));
   };
   Overlay.displayName = "Overlay";
@@ -1931,7 +1936,8 @@
     }, /*#__PURE__*/React__default["default"].createElement(Overlay, {
       className: backgroundElementClass,
       onClick: handleClose,
-      tabIndex: -1
+      tabIndex: -1,
+      disableBackgroundColor: true
     }), /*#__PURE__*/React__default["default"].createElement(Popper, {
       anchorEl: childNode,
       open: childNode ? open : false,
@@ -4120,6 +4126,28 @@
     return ref;
   };
+  var useHeight = function useHeight(ref) {
+    var _useState = React.useState(0),
+        _useState2 = _slicedToArray(_useState, 2),
+        height = _useState2[0],
+        setHeight = _useState2[1];
+    React.useEffect(function () {
+      if (ref && ref.current) {
+        var element = ref.current;
+        var prevMaxHeight = element.style.maxHeight;
+        var prevVisibility = element.style.visibility;
+        element.style.visibility = "hidden";
+        element.style.maxHeight = "none";
+        var elementHeight = element.clientHeight;
+        element.style.visibility = prevVisibility;
+        element.style.maxHeight = prevMaxHeight;
+        return setHeight(elementHeight);
+      }
+    }, [ref]);
+    return height;
+  };
   var _excluded$q = ["as", "className", "invert"];
   var ScrollElement = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$as = _ref.as,
@@ -6808,6 +6836,22 @@
   OpenExpandedIcon.displayName = "OpenExpandedIcon";
   var OpenExpandedIcon$1 = OpenExpandedIcon;
+  var OrderFirstIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "var(--color-theme-600)",
+      ref: svgRef
+    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
+      d: "M4 4h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V5a1 1 0 011-1zm2 14h12a1 1 0 010 2H6a1 1 0 010-2zm0-4h12a1 1 0 010 2H6a1 1 0 010-2zm0-4h12a1 1 0 010 2H6a1 1 0 010-2z",
+      fillRule: "evenodd"
+    }));
+  });
+  OrderFirstIcon.displayName = "OrderFirstIcon";
+  var OrderFirstIcon$1 = OrderFirstIcon;
   var PaidSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 12,
@@ -7215,6 +7259,22 @@
   TaskAddIcon.displayName = "TaskAddIcon";
   var TaskAddIcon$1 = TaskAddIcon;
+  var TaskListAddIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "var(--color-theme-600)",
+      ref: svgRef
+    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
+      d: "M20 14v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2zm-8 4a1 1 0 010 2H5a1 1 0 010-2h7zm0-4a1 1 0 010 2H5a1 1 0 010-2h7zm7-4a1 1 0 010 2H5a1 1 0 010-2h14zm0-6a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1h14z",
+      fillRule: "evenodd"
+    }));
+  });
+  TaskListAddIcon.displayName = "TaskListAddIcon";
+  var TaskListAddIcon$1 = TaskListAddIcon;
   var TextFormatGeneralAltIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
@@ -7456,18 +7516,6 @@
     function () {});
   }
-  var StyledModalOverlay = styled__default["default"](Overlay).withConfig({
-    displayName: "Styles__StyledModalOverlay",
-    componentId: "sc-1elktgs-0"
-  })(["", " ", ""], function (props) {
-    return !props.$open && styled.css(["", ""], {
-      "display": "none"
-    });
-  }, function (props) {
-    return !props.$disableBackgroundColor && styled.css(["background:var(--modal-background);"]);
-  });
-  StyledModalOverlay.displayName = "StyledModalOverlay";
   var _excluded$h = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "open", "onClose"];
   var getHasTransition = function getHasTransition(children) {
@@ -7550,11 +7598,10 @@
       onClose: handleClose,
       disableFocusLock: disableFocusLock,
       disableScrollLock: disableScrollLock
-    }), /*#__PURE__*/React__default["default"].createElement(StyledModalOverlay, {
+    }), open ? /*#__PURE__*/React__default["default"].createElement(Overlay, {
       onClick: handleBackgroundClick,
-      $disableBackgroundColor: disableBackgroundColor,
-      $open: open
-    }), /*#__PURE__*/React.cloneElement(children, childProps));
+      disableBackgroundColor: disableBackgroundColor
+    }) : null, /*#__PURE__*/React.cloneElement(children, childProps));
   });
   Modal.displayName = "Modal";
@@ -7563,16 +7610,9 @@
     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";
-  var StyledSheetOverlay = styled__default["default"](Overlay).withConfig({
-    displayName: "Styles__StyledSheetOverlay",
-    componentId: "sc-144eyxd-1"
-  })(["", ""], function (props) {
-    return props.$hasBgColor && styled.css(["background:var(--modal-background);"]);
-  });
-  StyledSheetOverlay.displayName = "StyledSheetOverlay";
   var StyledSheetWrapper = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledSheetWrapper",
-    componentId: "sc-144eyxd-2"
+    componentId: "sc-144eyxd-1"
   })(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, function (props) {
     return props.$mode === "stretch" ? styled.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) : styled.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) {
@@ -7598,7 +7638,7 @@
   StyledSheetWrapper.displayName = "StyledSheetWrapper";
   var StyledSheetWrapperPaper = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledSheetWrapperPaper",
-    componentId: "sc-144eyxd-3"
+    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"
   });
@@ -7609,7 +7649,7 @@
   var StyledSheetControlsCenterOut = styled.keyframes(["0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-150px);opacity:0;}"]);
   var StyledAnimatedSpan = styled__default["default"].span.withConfig({
     displayName: "Styles__StyledAnimatedSpan",
-    componentId: "sc-144eyxd-4"
+    componentId: "sc-144eyxd-3"
   })(["background:red;", " ", " ", " ", ""], function (props) {
     return props.$state === "entering" && styled.css(["opacity:1;", ""], props.$mode === "stretch" ? styled.css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, "".concat(props.$durationIn, "s"), "".concat(props.$durationIn, "s")) : styled.css(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, "".concat(props.$maxDurationIn, "s")));
   }, function (props) {
@@ -7622,7 +7662,7 @@
   StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
   var StyledCssTransition = styled__default["default"](reactTransitionGroup.CSSTransition).withConfig({
     displayName: "Styles__StyledCssTransition",
-    componentId: "sc-144eyxd-5"
+    componentId: "sc-144eyxd-4"
   })(["", " ", " ", " ", ""], function (props) {
     return props.$direction === "top" && styled.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) {
@@ -7701,10 +7741,10 @@
       onClose: handleClose,
       disableFocusLock: disableFocusLock,
       disableScrollLock: disableScrollLock
-    }), /*#__PURE__*/React__default["default"].createElement(StyledSheetOverlay, {
+    }), open ? /*#__PURE__*/React__default["default"].createElement(Overlay, {
       onClick: handleBackgroundClick,
-      $hasBgColor: !disableBackgroundColor
-    }), /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapper, {
+      disableBackgroundColor: disableBackgroundColor
+    }) : null, /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapper, {
       className: classnames__default["default"]("c-sheet__wrapper", bodyClassName),
       style: bodyStyle,
       $position: position,
@@ -8013,37 +8053,13 @@
   };
   AccordionItemHead.displayName = "AccordionItemHead";
-  var useHeight = function useHeight(ref) {
-    var _useState = React.useState(0),
-        _useState2 = _slicedToArray(_useState, 2),
-        height = _useState2[0],
-        setHeight = _useState2[1];
-    React.useEffect(function () {
-      if (ref && ref.current) {
-        var element = ref.current;
-        var prevMaxHeight = element.style.maxHeight;
-        var prevVisibility = element.style.visibility;
-        element.style.visibility = "hidden";
-        element.style.maxHeight = "none";
-        var elementHeight = element.clientHeight;
-        element.style.visibility = prevVisibility;
-        element.style.maxHeight = prevMaxHeight;
-        return setHeight(elementHeight);
-      }
-    }, [ref]);
-    return height;
-  };
-  var useHeight$1 = useHeight;
   var AccordionItemBody = function AccordionItemBody(_ref) {
     var children = _ref.children,
         className = _ref.className;
     var itemContext = React.useContext(ItemContext);
     var divRef = React.useRef(null);
     var duration = 200;
-    var height = useHeight$1(divRef);
+    var height = useHeight(divRef);
     var defaultStyle = {
       transition: "max-height ".concat(duration, "ms linear"),
       maxHeight: 0
@@ -10140,6 +10156,7 @@
   exports.OpenExpandedIcon = OpenExpandedIcon$1;
   exports.Option = Option;
   exports.OptionGroup = OptionGroup;
+  exports.OrderFirstIcon = OrderFirstIcon$1;
   exports.Overlay = Overlay;
   exports.PaidSmallIcon = PaidSmallIcon$1;
   exports.Paper = Paper;
@@ -10192,6 +10209,7 @@
   exports.Steps = Steps;
   exports.Table = Table;
   exports.TaskAddIcon = TaskAddIcon$1;
+  exports.TaskListAddIcon = TaskListAddIcon$1;
   exports.Tbody = Tbody;
   exports.TextFormatGeneralAltIcon = TextFormatGeneralAltIcon$1;
   exports.Textarea = Textarea;
@@ -10217,6 +10235,7 @@
   exports.WorkloadIcon = WorkloadIcon$1;
   exports.YearMonthPicker = YearMonthPicker;
   exports.signifierTypes = signifierTypes;
+  exports.useHeight = useHeight;
   exports.useInitScrollRef = useInitScrollRef;
   exports.useLayerContext = useLayerContext;
   exports.useMenuContext = useMenuContext;