@activecollab/components 1.0.256 → 1.0.257

package/dist/cjs/components/Sheet/Sheet.js

@@ -124,7 +124,7 @@ var Sheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onEnter: handleEnter,
     onExited: handleExited
   }, /*#__PURE__*/_react.default.createElement(_Styles.StyledSheetWrapperPaper, {
-    className: "c-sheet__wrapper__paper"
+    paperClass: "c-sheet__wrapper__paper"
   }, children))));
 });
 exports.Sheet = Sheet;

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

@@ -1 +1 @@
-{"version":3,"file":"Sheet.js","names":["Sheet","forwardRef","ref","children","onClose","controls","open","defaultOpen","animation","position","mode","disableFocusLock","disableScrollLock","disableBackgroundColor","bodyStyle","bodyClassName","disableBackgroundClick","rest","useState","setOpen","exited","setExited","innerRef","useRef","handleRef","useForkRef","useEffect","handleEnter","useCallback","handleExited","handleClose","handleBackgroundClick","event","preventDefault","classnames","length","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","state","displayName"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"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"],"mappings":"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"}
+{"version":3,"file":"Sheet.js","names":["Sheet","forwardRef","ref","children","onClose","controls","open","defaultOpen","animation","position","mode","disableFocusLock","disableScrollLock","disableBackgroundColor","bodyStyle","bodyClassName","disableBackgroundClick","rest","useState","setOpen","exited","setExited","innerRef","useRef","handleRef","useForkRef","useEffect","handleEnter","useCallback","handleExited","handleClose","handleBackgroundClick","event","preventDefault","classnames","length","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","state","displayName"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"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 paperClass=\"c-sheet__wrapper__paper\">\n              {children}\n            </StyledSheetWrapperPaper>\n          </StyledCssTransition>\n        </StyledSheetWrapper>\n      </Window>\n    );\n  }\n);\n\nSheet.displayName = \"Sheet\";\n"],"mappings":"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"}

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

@@ -44,7 +44,11 @@ var StyledSheetWrapper = _styledComponents.default.div.withConfig({
 });
 exports.StyledSheetWrapper = StyledSheetWrapper;
 StyledSheetWrapper.displayName = "StyledSheetWrapper";
-var StyledSheetWrapperPaper = _styledComponents.default.div.withConfig({
+var StyledSheetWrapperPaper = _styledComponents.default.div.attrs(function (props) {
+  return {
+    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;", ""], {

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

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

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

@@ -105,7 +105,7 @@ export var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onEnter: handleEnter,
     onExited: handleExited
   }, /*#__PURE__*/React.createElement(StyledSheetWrapperPaper, {
-    className: "c-sheet__wrapper__paper"
+    paperClass: "c-sheet__wrapper__paper"
   }, children))));
 });
 Sheet.displayName = "Sheet";

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

@@ -1 +1 @@
-{"version":3,"file":"Sheet.js","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"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"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"],"mappings":"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"}
+{"version":3,"file":"Sheet.js","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"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"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 paperClass=\"c-sheet__wrapper__paper\">\n              {children}\n            </StyledSheetWrapperPaper>\n          </StyledCssTransition>\n        </StyledSheetWrapper>\n      </Window>\n    );\n  }\n);\n\nSheet.displayName = \"Sheet\";\n"],"mappings":"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"}

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

@@ -5,7 +5,10 @@ interface IStyledSheetWrapper {
     $mode?: "normal" | "stretch";
 }
 export declare const StyledSheetWrapper: import("styled-components").StyledComponent<"div", any, IStyledSheetWrapper, never>;
-export declare const StyledSheetWrapperPaper: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface IStyledSheetWrapperPaper {
+    paperClass?: string;
+}
+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;

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":"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"}
+{"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,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,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

@@ -33,7 +33,11 @@ export var StyledSheetWrapper = styled.div.withConfig({
   return props.$mode === "stretch" && props.$position === "left" && css(["flex-direction:row-reverse;", "{span{right:-8px;}}"], StyledSheetIcons);
 });
 StyledSheetWrapper.displayName = "StyledSheetWrapper";
-export var StyledSheetWrapperPaper = styled.div.withConfig({
+export var StyledSheetWrapperPaper = styled.div.attrs(function (props) {
+  return {
+    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;", ""], {

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","keyframes","BoxSizingStyle","FontStyle","CSSTransition","StyledSheetIcons","div","displayName","StyledSheetWrapper","props","$mode","$position","StyledSheetWrapperPaper","StyledSheetControlsTop","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","$direction"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport const StyledSheetIcons = styled.div`\n  display: flex;\n  height: 0;\n  position: relative;\n\n  span {\n    position: relative;\n    background-color: var(--page-paper-main);\n    box-shadow: var(--shadow-secondary);\n    cursor: pointer;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    & > * {\n      height: 40px;\n      width: 40px;\n      padding: 8px;\n      fill: var(--color-theme-600);\n    }\n  }\n`;\n\nStyledSheetIcons.displayName = \"StyledSheetIcons\";\n\ninterface IStyledSheetWrapper {\n  $position?: \"center\" | \"left\" | \"right\";\n  $mode?: \"normal\" | \"stretch\";\n}\n\nexport const StyledSheetWrapper = styled.div<IStyledSheetWrapper>`\n  ${BoxSizingStyle}\n  ${FontStyle}\n\n  position: relative;\n  max-width: 95vw;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) =>\n    props.$mode === \"stretch\"\n      ? css`\n          margin-top: 8px;\n          height: calc(100vh - 16px);\n          width: calc(100vw - 100px);\n          max-width: 1000px;\n          ${StyledSheetIcons} {\n            flex-direction: column;\n            width: 0;\n            height: calc(100vh - 32px);\n            & > * {\n              margin-bottom: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: 8px;\n            }\n          }\n        `\n      : css`\n          max-height: calc(100vh - 156px);\n          margin-top: 126px;\n          margin-bottom: 30px;\n          width: 540px;\n          flex-direction: column;\n\n          ${StyledSheetIcons} {\n            flex-direction: row-reverse;\n            & > * {\n              margin-left: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: -48px;\n              right: 8px;\n            }\n          }\n        `}\n\n  ${(props) =>\n    props.$position === \"center\" &&\n    css`\n      ${tw`tw-mx-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"left\" &&\n    css`\n      ${tw`tw-ml-2 tw-mr-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"right\" &&\n    css`\n      ${tw`tw-mr-2 tw-ml-auto`}\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position !== \"left\" &&\n    css`\n      ${StyledSheetIcons} {\n        span {\n          right: 48px;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position === \"left\" &&\n    css`\n      flex-direction: row-reverse;\n\n      ${StyledSheetIcons} {\n        span {\n          right: -8px;\n        }\n      }\n    `}\n`;\n\nStyledSheetWrapper.displayName = \"StyledSheetWrapper\";\n\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"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["styled","css","keyframes","BoxSizingStyle","FontStyle","CSSTransition","StyledSheetIcons","div","displayName","StyledSheetWrapper","props","$mode","$position","StyledSheetWrapperPaper","attrs","className","paperClass","StyledSheetControlsTop","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","$direction"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport const StyledSheetIcons = styled.div`\n  display: flex;\n  height: 0;\n  position: relative;\n\n  span {\n    position: relative;\n    background-color: var(--page-paper-main);\n    box-shadow: var(--shadow-secondary);\n    cursor: pointer;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    & > * {\n      height: 40px;\n      width: 40px;\n      padding: 8px;\n      fill: var(--color-theme-600);\n    }\n  }\n`;\n\nStyledSheetIcons.displayName = \"StyledSheetIcons\";\n\ninterface IStyledSheetWrapper {\n  $position?: \"center\" | \"left\" | \"right\";\n  $mode?: \"normal\" | \"stretch\";\n}\n\nexport const StyledSheetWrapper = styled.div<IStyledSheetWrapper>`\n  ${BoxSizingStyle}\n  ${FontStyle}\n\n  position: relative;\n  max-width: 95vw;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) =>\n    props.$mode === \"stretch\"\n      ? css`\n          margin-top: 8px;\n          height: calc(100vh - 16px);\n          width: calc(100vw - 100px);\n          max-width: 1000px;\n          ${StyledSheetIcons} {\n            flex-direction: column;\n            width: 0;\n            height: calc(100vh - 32px);\n            & > * {\n              margin-bottom: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: 8px;\n            }\n          }\n        `\n      : css`\n          max-height: calc(100vh - 156px);\n          margin-top: 126px;\n          margin-bottom: 30px;\n          width: 540px;\n          flex-direction: column;\n\n          ${StyledSheetIcons} {\n            flex-direction: row-reverse;\n            & > * {\n              margin-left: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: -48px;\n              right: 8px;\n            }\n          }\n        `}\n\n  ${(props) =>\n    props.$position === \"center\" &&\n    css`\n      ${tw`tw-mx-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"left\" &&\n    css`\n      ${tw`tw-ml-2 tw-mr-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"right\" &&\n    css`\n      ${tw`tw-mr-2 tw-ml-auto`}\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position !== \"left\" &&\n    css`\n      ${StyledSheetIcons} {\n        span {\n          right: 48px;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position === \"left\" &&\n    css`\n      flex-direction: row-reverse;\n\n      ${StyledSheetIcons} {\n        span {\n          right: -8px;\n        }\n      }\n    `}\n`;\n\nStyledSheetWrapper.displayName = \"StyledSheetWrapper\";\n\ninterface IStyledSheetWrapperPaper {\n  paperClass?: string;\n}\n\nexport const StyledSheetWrapperPaper = styled.div.attrs<IStyledSheetWrapperPaper>(\n  (props) => ({\n    className: props.paperClass,\n  })\n)<IStyledSheetWrapperPaper>`\n  background-color: var(--page-paper-main);\n  color: var(--color-theme-900);\n  box-shadow: var(--shadow-primary);\n  border-radius: 6px;\n  overflow: auto;\n  animation: 0.3s linear ease-out;\n\n  ${tw`tw-flex-auto`}\n`;\n\nStyledSheetWrapperPaper.displayName = \"StyledSheetWrapperPaper\";\n\nexport const StyledSheetControlsTop = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-200px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const StyledSheetControlsBottom = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-200px);\n}\n`;\n\nexport const StyledSheetControlsCenterIn = keyframes`\n  0% {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n`;\n\nexport const StyledSheetControlsCenterOut = keyframes`\n  0% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n`;\n\ninterface IStyledAnimatedSpan {\n  $mode: string;\n  $state: string;\n  $maxDurationIn: number;\n  $maxDurationOut: number;\n  $durationOut: number;\n  $durationIn: number;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n  background: red;\n  ${(props) =>\n    props.$state === \"entering\" &&\n    css`\n      opacity: 1;\n\n      ${props.$mode === \"stretch\"\n        ? css`\n            animation-name: ${StyledSheetControlsTop};\n            animation-duration: ${`${props.$durationIn}s`};\n            animation-delay: ${`${props.$durationIn}s`};\n          `\n        : css`\n            animation-name: ${StyledSheetControlsCenterIn};\n            animation-duration: ${`${props.$maxDurationIn}s`};\n            animation-delay: 0s;\n          `}\n    `}\n\n  ${(props) =>\n    props.$state === \"entered\" &&\n    css`\n      opacity: 1;\n    `}\n\n  ${(props) =>\n    props.$state === \"exiting\" &&\n    css`\n      opacity: 0;\n\n      ${props.$mode === \"stretch\"\n        ? css`\n            animation-name: ${StyledSheetControlsBottom};\n            animation-duration: ${`${props.$durationOut}s`};\n            animation-delay: ${`${props.$durationOut}s`};\n          `\n        : css`\n            animation-name: ${StyledSheetControlsCenterOut};\n            animation-duration: ${`${props.$maxDurationOut}s`};\n            animation-delay: 0;\n          `}\n    `}\n\n  ${(props) =>\n    props.$state === \"exited\" &&\n    css`\n      opacity: 0;\n    `}\n`;\n\nStyledAnimatedSpan.displayName = \"StyledAnimatedSpan\";\n\nexport const StyledCssTransition = styled(CSSTransition)<{\n  $direction: string;\n}>`\n  ${(props) =>\n    props.$direction === \"top\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"bottom\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"left\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"right\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n`;\n\nStyledCssTransition.displayName = \"StyledCssTransition\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAE1D,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,aAAa,QAAQ,wBAAwB;AAEtD,OAAO,IAAMC,gBAAgB,GAAGN,MAAM,CAACO,GAAG;EAAA;EAAA;AAAA,yUAuBzC;AAEDD,gBAAgB,CAACE,WAAW,GAAG,kBAAkB;AAOjD,OAAO,IAAMC,kBAAkB,GAAGT,MAAM,CAACO,GAAG;EAAA;EAAA;AAAA,iHACxCJ,cAAc,EACdC,SAAS,EAOT,UAACM,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,GACrBV,GAAG,yNAKCK,gBAAgB,IAapBL,GAAG,uNAOCK,gBAAgB,CAWnB;AAAA,GAEL,UAACI,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,KAAK,QAAQ,IAC5BX,GAAG,WACG;IAAA;IAAA;EAAW,CAAC,CACjB;AAAA,GAED,UAACS,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,KAAK,MAAM,IAC1BX,GAAG,WACG;IAAA;IAAA;EAAmB,CAAC,CACzB;AAAA,GAED,UAACS,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,KAAK,OAAO,IAC3BX,GAAG,WACG;IAAA;IAAA;EAAmB,CAAC,CACzB;AAAA,GAED,UAACS,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,IACzBD,KAAK,CAACE,SAAS,KAAK,MAAM,IAC1BX,GAAG,8BACCK,gBAAgB,CAKnB;AAAA,GAED,UAACI,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,IACzBD,KAAK,CAACE,SAAS,KAAK,MAAM,IAC1BX,GAAG,yDAGCK,gBAAgB,CAKnB;AAAA,EACJ;AAEDG,kBAAkB,CAACD,WAAW,GAAG,oBAAoB;AAMrD,OAAO,IAAMK,uBAAuB,GAAGb,MAAM,CAACO,GAAG,CAACO,KAAK,CACrD,UAACJ,KAAK;EAAA,OAAM;IACVK,SAAS,EAAEL,KAAK,CAACM;EACnB,CAAC;AAAA,CAAC,CACH;EAAA;EAAA;AAAA,kLAQK;EAAA;AAAa,CAAC,CACnB;AAEDH,uBAAuB,CAACL,WAAW,GAAG,yBAAyB;AAE/D,OAAO,IAAMS,sBAAsB,GAAGf,SAAS,yFAS9C;AAED,OAAO,IAAMgB,yBAAyB,GAAGhB,SAAS,yFASjD;AAED,OAAO,IAAMiB,2BAA2B,GAAGjB,SAAS,yFASnD;AAED,OAAO,IAAMkB,4BAA4B,GAAGlB,SAAS,yFASpD;AAWD,OAAO,IAAMmB,kBAAkB,GAAGrB,MAAM,CAACsB,IAAI;EAAA;EAAA;AAAA,2CAEzC,UAACZ,KAAK;EAAA,OACNA,KAAK,CAACa,MAAM,KAAK,UAAU,IAC3BtB,GAAG,qBAGCS,KAAK,CAACC,KAAK,KAAK,SAAS,GACvBV,GAAG,wEACiBgB,sBAAsB,EACfP,KAAK,CAACc,WAAW,QACpBd,KAAK,CAACc,WAAW,UAEzCvB,GAAG,sEACiBkB,2BAA2B,EACpBT,KAAK,CAACe,cAAc,OAE9C,CACN;AAAA,GAED,UAACf,KAAK;EAAA,OACNA,KAAK,CAACa,MAAM,KAAK,SAAS,IAC1BtB,GAAG,gBAEF;AAAA,GAED,UAACS,KAAK;EAAA,OACNA,KAAK,CAACa,MAAM,KAAK,SAAS,IAC1BtB,GAAG,qBAGCS,KAAK,CAACC,KAAK,KAAK,SAAS,GACvBV,GAAG,wEACiBiB,yBAAyB,EAClBR,KAAK,CAACgB,YAAY,QACrBhB,KAAK,CAACgB,YAAY,UAE1CzB,GAAG,qEACiBmB,4BAA4B,EACrBV,KAAK,CAACiB,eAAe,OAE/C,CACN;AAAA,GAED,UAACjB,KAAK;EAAA,OACNA,KAAK,CAACa,MAAM,KAAK,QAAQ,IACzBtB,GAAG,gBAEF;AAAA,EACJ;AAEDoB,kBAAkB,CAACb,WAAW,GAAG,oBAAoB;AAErD,OAAO,IAAMoB,mBAAmB,GAAG5B,MAAM,CAACK,aAAa,CAAC;EAAA;EAAA;AAAA,4BAGpD,UAACK,KAAK;EAAA,OACNA,KAAK,CAACmB,UAAU,KAAK,KAAK,IAC1B5B,GAAG,8fA2BF;AAAA,GAED,UAACS,KAAK;EAAA,OACNA,KAAK,CAACmB,UAAU,KAAK,QAAQ,IAC7B5B,GAAG,2fA2BF;AAAA,GAED,UAACS,KAAK;EAAA,OACNA,KAAK,CAACmB,UAAU,KAAK,MAAM,IAC3B5B,GAAG,8fA2BF;AAAA,GAED,UAACS,KAAK;EAAA,OACNA,KAAK,CAACmB,UAAU,KAAK,OAAO,IAC5B5B,GAAG,2fA2BF;AAAA,EACJ;AAED2B,mBAAmB,CAACpB,WAAW,GAAG,qBAAqB"}

package/dist/index.js

@@ -11485,7 +11485,11 @@
     return props.$mode === "stretch" && props.$position === "left" && styled.css(["flex-direction:row-reverse;", "{span{right:-8px;}}"], StyledSheetIcons);
   });
   StyledSheetWrapper.displayName = "StyledSheetWrapper";
-  var StyledSheetWrapperPaper = styled__default["default"].div.withConfig({
+  var StyledSheetWrapperPaper = styled__default["default"].div.attrs(function (props) {
+    return {
+      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;", ""], {
@@ -11623,7 +11627,7 @@
       onEnter: handleEnter,
       onExited: handleExited
     }, /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapperPaper, {
-      className: "c-sheet__wrapper__paper"
+      paperClass: "c-sheet__wrapper__paper"
     }, children))));
   });
   Sheet.displayName = "Sheet";