@cloud-ru/ds-drawer 1.0.0

package/dist/esm/components/DrawerCustom/styles.module.css

@@ -0,0 +1,491 @@
+@charset "UTF-8";
+.drawerRoot:global(.snack-rc-drawer){
+  pointer-events:none;
+  position:fixed;
+  z-index:initial;
+  inset:0;
+  overflow:hidden;
+  transition:width 0s ease 0.3s, height 0s ease 0.3s, transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.drawerRoot:global(.snack-rc-drawer):global(> *){
+  transition:transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), box-shadow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.drawerRoot:global(.snack-rc-drawer):global(.snack-rc-drawer-open){
+  transition:transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-mask{
+  pointer-events:auto;
+  position:absolute;
+  z-index:initial;
+  inset:0;
+  opacity:1;
+  background-color:var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275)));
+  transition:opacity 0.2s;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-mask.maskMotion-enter, .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-mask.maskMotion-appear{
+  opacity:0;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-mask.maskMotion-enter-active, .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-mask.maskMotion-appear-active{
+  opacity:1;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-mask.maskMotion-leave{
+  opacity:1;
+  transition:opacity 0.1s;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-mask.maskMotion-leave-active{
+  opacity:0;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-section{
+  pointer-events:auto;
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  box-sizing:border-box;
+  width:100%;
+  box-shadow:var(--sn-boxShadow-elevation-level5, var(--sn-theme-effect-shadow-level5-layer1-positionX, 0) var(--sn-theme-effect-shadow-level5-layer1-positionY, 0) var(--sn-theme-effect-shadow-level5-layer1-blur, 16px) var(--sn-theme-effect-shadow-level5-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level5-layer2-positionX, 0) var(--sn-theme-effect-shadow-level5-layer2-positionY, 24px) var(--sn-theme-effect-shadow-level5-layer2-blur, 16px) var(--sn-theme-effect-shadow-level5-layer2-speed, 4px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper{
+  pointer-events:none;
+  will-change:transform;
+  position:absolute;
+  z-index:initial;
+  overflow:unset;
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  max-width:100%;
+  background:none;
+  box-shadow:none;
+  transition:transform 0.2s ease-in-out;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=top]{
+  padding-top:var(--sn-drawer-anatomy-container-horizontal-positionTop-paddingTop, var(--sn-primitive-dimension-0, 0));
+  padding-right:var(--sn-drawer-anatomy-container-horizontal-positionTop-paddingRight, var(--sn-primitive-dimension-0, 0));
+  padding-bottom:var(--sn-drawer-anatomy-container-horizontal-positionTop-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-left:var(--sn-drawer-anatomy-container-horizontal-positionTop-paddingLeft, var(--sn-primitive-dimension-0, 0));
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=top] .snack-rc-drawer-section{
+  border-top-left-radius:var(--sn-drawer-anatomy-container-horizontal-positionTop-container-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0));
+  border-top-right-radius:var(--sn-drawer-anatomy-container-horizontal-positionTop-container-borderTopRightRadius, var(--sn-primitive-dimension-0, 0));
+  border-bottom-right-radius:var(--sn-drawer-anatomy-container-horizontal-positionTop-container-borderBottomRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px)));
+  border-bottom-left-radius:var(--sn-drawer-anatomy-container-horizontal-positionTop-container-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px)));
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=bottom]{
+  bottom:0;
+  padding-top:var(--sn-drawer-anatomy-container-horizontal-positionBottom-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-drawer-anatomy-container-horizontal-positionBottom-paddingRight, var(--sn-primitive-dimension-0, 0));
+  padding-bottom:var(--sn-drawer-anatomy-container-horizontal-positionBottom-paddingBottom, var(--sn-primitive-dimension-0, 0));
+  padding-left:var(--sn-drawer-anatomy-container-horizontal-positionBottom-paddingLeft, var(--sn-primitive-dimension-0, 0));
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=bottom] .snack-rc-drawer-section{
+  border-top-left-radius:var(--sn-drawer-anatomy-container-horizontal-positionBottom-container-borderTopLeftRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px)));
+  border-top-right-radius:var(--sn-drawer-anatomy-container-horizontal-positionBottom-container-borderTopRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px)));
+  border-bottom-right-radius:var(--sn-drawer-anatomy-container-horizontal-positionBottom-container-borderBottomRightRadius, var(--sn-primitive-dimension-0, 0));
+  border-bottom-left-radius:var(--sn-drawer-anatomy-container-horizontal-positionBottom-container-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0));
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=left]{
+  top:0;
+  bottom:0;
+  left:0;
+  padding-bottom:var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingBottom, var(--sn-primitive-dimension-0, 0));
+  padding-right:var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-left:var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingLeft, var(--sn-primitive-dimension-0, 0));
+  padding-top:var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingTop, var(--sn-primitive-dimension-0, 0));
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=left] .snack-rc-drawer-section{
+  border-top-right-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px)));
+  border-top-left-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0));
+  border-bottom-right-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px)));
+  border-bottom-left-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0));
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=right]{
+  top:0;
+  right:0;
+  bottom:0;
+  padding-left:var(--sn-drawer-anatomy-container-vertical-positionRight-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-bottom:var(--sn-drawer-anatomy-container-vertical-positionRight-paddingBottom, var(--sn-primitive-dimension-0, 0));
+  padding-right:var(--sn-drawer-anatomy-container-vertical-positionRight-paddingRight, var(--sn-primitive-dimension-0, 0));
+  padding-top:var(--sn-drawer-anatomy-container-vertical-positionRight-paddingTop, var(--sn-primitive-dimension-0, 0));
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=right] .snack-rc-drawer-section{
+  border-top-left-radius:var(--sn-drawer-anatomy-container-vertical-positionRight-container-borderTopLeftRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px)));
+  border-top-right-radius:var(--sn-drawer-anatomy-container-vertical-positionRight-container-borderTopRightRadius, var(--sn-primitive-dimension-0, 0));
+  border-bottom-right-radius:var(--sn-drawer-anatomy-container-vertical-positionRight-container-borderBottomRightRadius, var(--sn-primitive-dimension-0, 0));
+  border-bottom-left-radius:var(--sn-drawer-anatomy-container-vertical-positionRight-container-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px)));
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=left], .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=right]{
+  align-items:stretch;
+  box-sizing:content-box;
+  height:100%;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=left][data-width=s], .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=right][data-width=s]{
+  max-width:464px;
+  width:min(100%, 464px);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=left][data-width=m], .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=right][data-width=m]{
+  max-width:864px;
+  width:min(100%, 864px);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=left][data-width=l], .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=right][data-width=l]{
+  max-width:1872px;
+  width:min(100%, 1872px);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=top], .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=bottom]{
+  width:100%;
+  height:100%;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=top][data-height-auto], .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=bottom][data-height-auto]{
+  height:auto;
+  max-height:100%;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=top][data-height-auto]{
+  inset:0 0 auto;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper[data-position=bottom][data-height-auto]{
+  inset:auto 0 0;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-left-enter, .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-left-appear{
+  transform:translateX(-100%);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-left-enter-active, .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-left-appear-active{
+  transform:translate(0);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-left-leave{
+  transform:translate(0);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-left-leave-active{
+  transform:translateX(-100%);
+  transition:transform 0.1s ease-out;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-right-enter, .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-right-appear{
+  transform:translateX(100%);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-right-enter-active, .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-right-appear-active{
+  transform:translate(0);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-right-leave{
+  transform:translate(0);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-right-leave-active{
+  transform:translateX(100%);
+  transition:transform 0.1s ease-out;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-top-enter, .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-top-appear{
+  transform:translateY(-100%);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-top-enter-active, .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-top-appear-active{
+  transform:translate(0);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-top-leave{
+  transform:translate(0);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-top-leave-active{
+  transform:translateY(-100%);
+  transition:transform 0.1s ease-out;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-bottom-enter, .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-bottom-appear{
+  transform:translateY(100%);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-bottom-enter-active, .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-bottom-appear-active{
+  transform:translate(0);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-bottom-leave{
+  transform:translate(0);
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper.panelMotion-bottom-leave-active{
+  transform:translateY(100%);
+  transition:transform 0.1s ease-out;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-content-wrapper-hidden{
+  display:none;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-resizable-dragger{
+  pointer-events:auto;
+  cursor:ew-resize;
+  position:absolute;
+  z-index:2;
+  top:50%;
+  transform:translateY(-50%);
+  width:var(--sn-primitive-dimension-4, 4px);
+  height:var(--sn-primitive-dimension-32, 32px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  transition:height ease-in-out 0.2s;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-resizable-dragger::after{
+  content:"";
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+  width:calc(100% + var(--sn-primitive-dimension-12, 12px));
+  height:100vh;
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-resizable-dragger:hover{
+  height:calc(var(--sn-primitive-dimension-32, 32px) + var(--sn-primitive-dimension-24, 24px));
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-resizable-dragger-left{
+  right:calc(var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) - var(--sn-primitive-dimension-4, 4px) - var(--sn-primitive-dimension-6, 6px));
+}
+.drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-resizable-dragger-right{
+  left:calc(var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) - var(--sn-primitive-dimension-4, 4px) - var(--sn-primitive-dimension-6, 6px));
+}
+.drawerRoot:global(.snack-rc-drawer):global(.snack-rc-drawer-left), .drawerRoot:global(.snack-rc-drawer):global(.snack-rc-drawer-right){
+  top:0;
+  width:0%;
+  height:100%;
+}
+.drawerRoot:global(.snack-rc-drawer):global(.snack-rc-drawer-left){
+  left:0;
+}
+.drawerRoot:global(.snack-rc-drawer):global(.snack-rc-drawer-right){
+  right:0;
+}
+.drawerRoot:global(.snack-rc-drawer):global(.snack-rc-drawer-top), .drawerRoot:global(.snack-rc-drawer):global(.snack-rc-drawer-bottom){
+  left:0;
+  width:100%;
+  height:0%;
+}
+.drawerRoot:global(.snack-rc-drawer):global(.snack-rc-drawer-top){
+  top:0;
+}
+.drawerRoot:global(.snack-rc-drawer):global(.snack-rc-drawer-bottom){
+  bottom:0;
+}
+.drawerRoot:global(.snack-rc-drawer):has(:global(.snack-rc-drawer-resizable-dragger-dragging)){
+  cursor:ew-resize;
+}
+.drawerRoot:global(.snack-rc-drawer):has(:global(.snack-rc-drawer-resizable-dragger-dragging)) :global(.snack-rc-drawer-resizable-dragger){
+  height:calc(var(--sn-primitive-dimension-32, 32px) + var(--sn-primitive-dimension-24, 24px));
+}
+.drawerRoot:global(.snack-rc-drawer):global(.snack-rc-drawer-left.snack-rc-drawer-open), .drawerRoot:global(.snack-rc-drawer):global(.snack-rc-drawer-right.snack-rc-drawer-open){
+  width:100%;
+}
+.drawerRoot:global(.snack-rc-drawer):global(.snack-rc-drawer-top.snack-rc-drawer-open), .drawerRoot:global(.snack-rc-drawer):global(.snack-rc-drawer-bottom.snack-rc-drawer-open){
+  height:100%;
+}
+
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=primary][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=primary][data-acrylic-level=default] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, var(--sn-brandRole-color-brandA-90, var(--sn-primitive-color-brandA-90, #edf7f1))));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, var(--sn-brandRole-color-brandA-99, var(--sn-primitive-color-brandA-99, #fbfffc))));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=neutral][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=neutral][data-acrylic-level=default] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=red][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=red][data-acrylic-level=default] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=red][data-acrylic-level="1Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=red][data-acrylic-level="2Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=orange][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=orange][data-acrylic-level=default] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=yellow][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=yellow][data-acrylic-level=default] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=green][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=green][data-acrylic-level=default] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=green][data-acrylic-level="1Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=green][data-acrylic-level="2Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=blue][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=blue][data-acrylic-level=default] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=violet][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=violet][data-acrylic-level=default] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=pink][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=pink][data-acrylic-level=default] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=transparent]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=transparent] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:transparent;
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=decorTransparent]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper)[data-acrylic-appearance=decorTransparent] .drawer{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+
+.focusScope{
+  display:contents;
+}
+
+.showButtonClosed{
+  margin:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingTop, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingTop, var(--sn-primitive-dimension-48, 48px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingRight, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingRight, var(--sn-primitive-dimension-48, 48px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingBottom, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingBottom, var(--sn-primitive-dimension-0, 0px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingLeft, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingLeft, var(--sn-primitive-dimension-0, 0px)));
+}
+
+.showButtonClosedWrapper{
+  position:absolute;
+  top:0;
+  right:0;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  width:0;
+  height:0;
+}

package/dist/esm/components/DrawerCustom/types.d.ts

@@ -0,0 +1,71 @@
+import { BottomSheetCustomProps } from '@cloud-ru/ds-bottom-sheet';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { DrawerProps as RcDrawerProps } from '@rc-component/drawer';
+import { PropsWithChildren, ReactElement } from 'react';
+import { Position, Width } from '../../types.js';
+export type DrawerCustomProps = WithSupportProps<PropsWithChildren<{
+    /** Управление состоянием показан/не показан. */
+    open: boolean;
+    /** Колбэк закрытия */
+    onClose(): void;
+    /**
+     * Отображение темной подложки
+     * @default true
+     */
+    showBlackout?: boolean;
+    /**
+     * Отображение кнопки закрытия в шапке дровера
+     * @default true
+     */
+    showButtonClosed?: boolean;
+    /**
+     * Расположение
+     */
+    position: Position;
+    /**
+     * Ширина (только при position: "left" | "right")
+     * @default 's'
+     */
+    width?: Width | string | number;
+    /**
+     * Высота панели по контенту (только при `position: "top" | "bottom"`).
+     * @default false
+     */
+    heightAuto?: boolean;
+    /** CSS-класс для элемента с контентом */
+    className?: string;
+    /** CSS-класс для корневого элемента */
+    rootClassName?: string;
+    /** Смещение при открытии "вложенного" компонента */
+    push?: RcDrawerProps['push'];
+    /** Контейнер в котором будет рендерится Drawer. По-умолчанию - body */
+    container?: string | HTMLElement;
+    /** Вложенный Drawer */
+    nestedDrawer?: ReactElement<Omit<DrawerCustomProps, 'resizable'>>;
+    /** Закрывать дровер при перемещении по истории браузера */
+    closeOnPopstate?: boolean;
+    /** Футер */
+    footer?: ReactElement;
+    /** Отключить анимации
+     * @default false
+     */
+    disableMotions?: boolean;
+    /**
+     * Ширина (только при position: "left" | "right")
+     * @default 's'
+     */
+    resizable?: {
+        /** Минимальная доступная ширина */
+        min: number;
+        /** Максимальная доступная ширина */
+        max?: number;
+        /** Ширина по умолчанию */
+        default?: number;
+        /** Колбэк на изменение размера */
+        onResize?: (width: number) => void;
+        /** Колбэк на окончание изменения размера */
+        onResizeEnd?: (width: number) => void;
+        /** Tooltip для элемента dragger */
+        draggerTooltip?: string;
+    };
+}>> & Pick<BottomSheetCustomProps, 'snapPoints' | 'swipeEnabled' | 'safeArea'>;

package/dist/esm/components/DrawerCustom/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Drawer/index.js';
+export * from './DrawerCustom/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './Drawer/index.js';
+export * from './DrawerCustom/index.js';

package/dist/esm/constants.d.ts

@@ -0,0 +1,28 @@
+export declare const TEST_IDS: {
+    readonly closeButton: "drawer__close-button";
+    readonly header: "drawer__header";
+    readonly title: "drawer__title";
+    readonly image: "drawer__image";
+    readonly tooltip: "drawer__title-tooltip";
+    readonly subtitle: "drawer__subtitle";
+    readonly body: "drawer__body";
+    readonly footer: "drawer__footer";
+    readonly footerApprove: "drawer__footer-approve";
+    readonly footerCancel: "drawer__footer-cancel";
+    readonly footerAdditional: "drawer__footer-additional";
+    readonly nestedDrawer: "drawer__nested";
+    readonly overlay: "drawer__overlay";
+    readonly contentWrapper: "drawer__content-wrapper";
+};
+export declare const WIDTH: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const WIDTH_AS_VALUES: string[];
+export declare const POSITION: {
+    readonly Left: "left";
+    readonly Right: "right";
+    readonly Top: "top";
+    readonly Bottom: "bottom";
+};

package/dist/esm/constants.js

@@ -0,0 +1,28 @@
+export const TEST_IDS = {
+    closeButton: 'drawer__close-button',
+    header: 'drawer__header',
+    title: 'drawer__title',
+    image: 'drawer__image',
+    tooltip: 'drawer__title-tooltip',
+    subtitle: 'drawer__subtitle',
+    body: 'drawer__body',
+    footer: 'drawer__footer',
+    footerApprove: 'drawer__footer-approve',
+    footerCancel: 'drawer__footer-cancel',
+    footerAdditional: 'drawer__footer-additional',
+    nestedDrawer: 'drawer__nested',
+    overlay: 'drawer__overlay',
+    contentWrapper: 'drawer__content-wrapper',
+};
+export const WIDTH = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+export const WIDTH_AS_VALUES = Object.values(WIDTH);
+export const POSITION = {
+    Left: 'left',
+    Right: 'right',
+    Top: 'top',
+    Bottom: 'bottom',
+};

package/dist/esm/helperComponents/DesktopDrawer/DesktopDrawer.d.ts

@@ -0,0 +1,3 @@
+import { DrawerProps } from '../../components/Drawer/types.js';
+/** Desktop-поверхность Drawer'а: панель (`DrawerCustom`) с пресетной разметкой. Internal. */
+export declare function DesktopDrawer({ content, media, title, slotAfterTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, nestedDrawer, className, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;