@activecollab/components 2.0.164 → 2.0.166

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

@@ -2,15 +2,16 @@ import { CSSTransition } from "react-transition-group";
 import styled, { css, keyframes } from "styled-components";
 import { BoxSizingStyle } from "../BoxSizingStyle";
 import { FontStyle } from "../FontStyle";
+import { ListSeparator } from "../List";
 export const StyledSheetIcons = styled.div.withConfig({
   displayName: "Styles__StyledSheetIcons",
   componentId: "sc-144eyxd-0"
-})(["display:flex;height:0;position:relative;span{position:relative;background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);cursor:pointer;border-radius:100%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;& > *{height:40px;width:40px;padding:8px;fill:var(--color-theme-600);}}"]);
+})(["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);}}@media (max-width:640px){display:none;}"]);
 StyledSheetIcons.displayName = "StyledSheetIcons";
 export const StyledSheetWrapper = styled.div.withConfig({
   displayName: "Styles__StyledSheetWrapper",
   componentId: "sc-144eyxd-1"
-})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, props => props.$mode === "stretch" ? css(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:1000px;", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;animation-fill-mode:both;}span{top:8px;}}"], StyledSheetIcons) : css(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;animation-fill-mode:both;}span{top:-48px;right:8px;}}"], StyledSheetIcons), props => props.$position === "center" && css(["", ""], {
+})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, props => props.$mode === "stretch" ? css(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:1000px;", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;animation-fill-mode:both;}span{top:8px;}}"], StyledSheetIcons) : css(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;animation-fill-mode:both;}span{top:-48px;right:8px;}}"], StyledSheetIcons), props => props.$mode === "stretch" && css(["@media (max-width:640px){width:100%;height:100%;}"]), props => props.$position === "center" && css(["", ""], {
   "marginLeft": "auto",
   "marginRight": "auto"
 }), props => props.$position === "left" && css(["", ""], {
@@ -37,11 +38,26 @@ export const StyledSheetControlsCenterOut = keyframes(["0%{transform:translateY(
 export const StyledAnimatedSpan = styled.span.withConfig({
   displayName: "Styles__StyledAnimatedSpan",
   componentId: "sc-144eyxd-3"
-})(["background:red;", " ", " ", " ", ""], props => props.$state === "entering" && css(["opacity:1;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, props.$durationIn + "s", props.$durationIn + "s") : css(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, props.$maxDurationIn + "s")), props => props.$state === "entered" && css(["opacity:1;"]), props => props.$state === "exiting" && css(["opacity:0;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, props.$durationOut + "s", props.$durationOut + "s") : css(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, props.$maxDurationOut + "s")), props => props.$state === "exited" && css(["opacity:0;"]));
+})(["&:hover svg{fill:var(--color-primary);}", " ", " ", " ", " ", ""], props => props.$state === "entering" && css(["opacity:1;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, props.$durationIn + "s", props.$durationIn + "s") : css(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, props.$maxDurationIn + "s")), props => props.$state === "entered" && css(["opacity:1;"]), props => props.$disabled && css(["pointer-events:none;svg{opacity:0.5;}"]), props => props.$state === "exiting" && css(["opacity:0;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, props.$durationOut + "s", props.$durationOut + "s") : css(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, props.$maxDurationOut + "s")), props => props.$state === "exited" && css(["opacity:0;"]));
 StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
 export const StyledCssTransition = styled(CSSTransition).withConfig({
   displayName: "Styles__StyledCssTransition",
   componentId: "sc-144eyxd-4"
 })(["", " ", " ", " ", ""], props => props.$direction === "top" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(-100%);transition:opacity 200ms,transform 200ms;}"]), props => props.$direction === "bottom" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(100%);transition:opacity 200ms,transform 200ms;}"]), props => props.$direction === "left" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(-100%);transition:opacity 200ms,transform 200ms;}"]), props => props.$direction === "right" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(100%);transition:opacity 200ms,transform 200ms;}"]));
 StyledCssTransition.displayName = "StyledCssTransition";
+export const StyledListSeparator = styled(ListSeparator).withConfig({
+  displayName: "Styles__StyledListSeparator",
+  componentId: "sc-144eyxd-5"
+})(["margin:0;"]);
+StyledListSeparator.displayName = "StyledListSeparator";
+export const StyledIconsWrapperSmall = styled.div.withConfig({
+  displayName: "Styles__StyledIconsWrapperSmall",
+  componentId: "sc-144eyxd-6"
+})(["height:40px;display:flex;gap:8px;padding-left:16px;padding-right:16px;align-items:center;place-content:end;flex-direction:row-reverse;"]);
+StyledIconsWrapperSmall.displayName = "StyledIconsWrapperSmall";
+export const StyledHeader = styled.div.withConfig({
+  displayName: "Styles__StyledHeader",
+  componentId: "sc-144eyxd-7"
+})(["@media (min-width:640px){display:none;}"]);
+StyledHeader.displayName = "StyledHeader";
 //# sourceMappingURL=Styles.js.map

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

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

package/dist/index.js

@@ -363,11 +363,11 @@
     componentId: "sc-dv1w0m-1"
   })(["", " ", " display:flex;flex-direction:row;align-items:center;cursor:pointer;padding:0 1rem;margin:0.25rem 0;font-size:0.875rem;user-select:none;color:var(--color-theme-900);line-height:28px;> svg:first-child{margin-right:8px;}&:hover,&:focus-visible{background-color:var(--color-theme-200);outline:none;}"], BoxSizingStyle, FontStyle);
   StyledListItem.displayName = "StyledListItem";
-  var StyledListSeparator = styled__default["default"].div.withConfig({
+  var StyledListSeparator$1 = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledListSeparator",
     componentId: "sc-dv1w0m-2"
   })(["border-top:1px solid var(--border-primary);margin:12px 16px;height:1px;"]);
-  StyledListSeparator.displayName = "StyledListSeparator";
+  StyledListSeparator$1.displayName = "StyledListSeparator";
 
   var _excluded$1u = ["children", "className"];
   var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -386,7 +386,7 @@
   var ListSeparator = function ListSeparator(_ref) {
     var className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded$1t);
-    return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator$1, _extends({
       className: classNames__default["default"]("c-list-separator", className)
     }, props));
   };
@@ -16904,13 +16904,15 @@
   var StyledSheetIcons = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledSheetIcons",
     componentId: "sc-144eyxd-0"
-  })(["display:flex;height:0;position:relative;span{position:relative;background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);cursor:pointer;border-radius:100%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;& > *{height:40px;width:40px;padding:8px;fill:var(--color-theme-600);}}"]);
+  })(["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);}}@media (max-width:640px){display:none;}"]);
   StyledSheetIcons.displayName = "StyledSheetIcons";
   var StyledSheetWrapper = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledSheetWrapper",
     componentId: "sc-144eyxd-1"
-  })(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, function (props) {
+  })(["", " ", " 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) {
+    return props.$mode === "stretch" && styled.css(["@media (max-width:640px){width:100%;height:100%;}"]);
   }, function (props) {
     return props.$position === "center" && styled.css(["", ""], {
       "marginLeft": "auto",
@@ -16950,10 +16952,12 @@
   var StyledAnimatedSpan = styled__default["default"].span.withConfig({
     displayName: "Styles__StyledAnimatedSpan",
     componentId: "sc-144eyxd-3"
-  })(["background:red;", " ", " ", " ", ""], function (props) {
+  })(["&:hover svg{fill:var(--color-primary);}", " ", " ", " ", " ", ""], 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) {
     return props.$state === "entered" && styled.css(["opacity:1;"]);
+  }, function (props) {
+    return props.$disabled && styled.css(["pointer-events:none;svg{opacity:0.5;}"]);
   }, function (props) {
     return props.$state === "exiting" && styled.css(["opacity:0;", ""], props.$mode === "stretch" ? styled.css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, "".concat(props.$durationOut, "s"), "".concat(props.$durationOut, "s")) : styled.css(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, "".concat(props.$maxDurationOut, "s")));
   }, function (props) {
@@ -16973,6 +16977,21 @@
     return props.$direction === "right" && styled.css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(100%);transition:opacity 200ms,transform 200ms;}"]);
   });
   StyledCssTransition.displayName = "StyledCssTransition";
+  var StyledListSeparator = styled__default["default"](ListSeparator).withConfig({
+    displayName: "Styles__StyledListSeparator",
+    componentId: "sc-144eyxd-5"
+  })(["margin:0;"]);
+  StyledListSeparator.displayName = "StyledListSeparator";
+  var StyledIconsWrapperSmall = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledIconsWrapperSmall",
+    componentId: "sc-144eyxd-6"
+  })(["height:40px;display:flex;gap:8px;padding-left:16px;padding-right:16px;align-items:center;place-content:end;flex-direction:row-reverse;"]);
+  StyledIconsWrapperSmall.displayName = "StyledIconsWrapperSmall";
+  var StyledHeader$1 = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledHeader",
+    componentId: "sc-144eyxd-7"
+  })(["@media (min-width:640px){display:none;}"]);
+  StyledHeader$1.displayName = "StyledHeader";
 
   var _excluded$x = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
   var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -17015,7 +17034,7 @@
     }, []);
     var handleExited = React.useCallback(function () {
       setExited(true);
-      typeof onClose === "function" && onClose();
+      onClose === null || onClose === void 0 || onClose();
     }, [onClose]);
     var handleClose = React.useCallback(function () {
       setOpen(false);
@@ -17038,36 +17057,47 @@
       onClose: handleClose,
       disableFocusLock: disableFocusLock,
       disableScrollLock: disableScrollLock
-    }), open ? /*#__PURE__*/React__default["default"].createElement(Overlay, {
+    }), open && /*#__PURE__*/React__default["default"].createElement(Overlay, {
       onClick: handleBackgroundClick,
       disableBackgroundColor: disableBackgroundColor
-    }) : null, /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapper, {
+    }), /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapper, {
       className: classNames__default["default"]("c-sheet__wrapper", bodyClassName),
       style: bodyStyle,
       $position: position,
       $mode: mode
-    }, controls.length ? /*#__PURE__*/React__default["default"].createElement(StyledSheetIcons, null, controls.map(function (item, index) {
-      var maxDurationIn = 4; // max duration 4 for 400ms, shorten .4s
-      var maxDurationOut = 2; // max duration 2 for 200ms, shorten .2s
+    }, controls.length > 0 && /*#__PURE__*/React__default["default"].createElement(StyledSheetIcons, null, controls.map(function (_ref2, index) {
+      var IconComponent = _ref2.icon,
+        tooltip = _ref2.tooltip,
+        onClick = _ref2.onClick,
+        disabled = _ref2.disabled,
+        className = _ref2.className;
+      var maxDurationIn = 4;
+      var maxDurationOut = 2;
       var control = index + 1;
-      var durationOut = controls.length > maxDurationOut ? maxDurationOut : maxDurationOut - control;
-      var durationIn = control >= maxDurationIn ? 1 : control;
+      var durationOut = Math.max(0, maxDurationOut - control);
+      var durationIn = Math.min(control, maxDurationIn);
       return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
         appear: true,
         in: open,
         timeout: maxDurationIn * 100,
         key: "c-sheet-control-".concat(index)
       }, function (state) {
-        return /*#__PURE__*/React__default["default"].createElement(StyledAnimatedSpan, {
-          $state: state,
+        return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+          title: tooltip,
+          disable: !tooltip || disabled
+        }, /*#__PURE__*/React__default["default"].createElement(StyledAnimatedSpan, {
+          onClick: onClick,
+          $disabled: disabled,
           $mode: mode,
+          $state: state,
+          className: className,
           $maxDurationIn: maxDurationIn / 10,
           $maxDurationOut: maxDurationOut / 10,
           $durationOut: durationOut / 10,
           $durationIn: durationIn / 10
-        }, item);
+        }, IconComponent));
       });
-    })) : null, /*#__PURE__*/React__default["default"].createElement(StyledCssTransition, {
+    })), /*#__PURE__*/React__default["default"].createElement(StyledCssTransition, {
       appear: true,
       in: open,
       timeout: 400,
@@ -17077,7 +17107,23 @@
       onExited: handleExited
     }, /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapperPaper, {
       paperClass: "c-sheet__wrapper__paper"
-    }, children))));
+    }, controls.length > 0 && /*#__PURE__*/React__default["default"].createElement(StyledHeader$1, null, /*#__PURE__*/React__default["default"].createElement(StyledIconsWrapperSmall, null, controls.map(function (_ref3, index) {
+      var IconComponent = _ref3.icon,
+        tooltip = _ref3.tooltip,
+        onClick = _ref3.onClick,
+        disabled = _ref3.disabled,
+        className = _ref3.className;
+      return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+        title: tooltip,
+        disable: !tooltip || disabled,
+        key: index
+      }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
+        onClick: onClick,
+        disabled: disabled,
+        className: className,
+        variant: "text gray"
+      }, IconComponent));
+    })), /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, null)), children))));
   });
   Sheet.displayName = "Sheet";