@cloud-ru/ds-dropzone 1.0.0

package/dist/cjs/components/PrivateDropZone/styles.module.css

@@ -0,0 +1,405 @@
+@charset "UTF-8";
+.hidden{
+  display:none;
+}
+
+.content{
+  z-index:1;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:100%;
+  height:100%;
+}
+
+.overLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  visibility:hidden;
+  background-color:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+}
+
+.borderLayer{
+  visibility:initial;
+}
+
+.acrylic{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+
+.container{
+  cursor:pointer;
+  position:relative;
+  z-index:0;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:100%;
+  margin:0;
+  padding:0;
+  border:none;
+  font-family:inherit;
+  text-decoration:none;
+  background:transparent;
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  outline:0;
+  outline-offset:0;
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
+  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))));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
+  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))));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
+  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))));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
+  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)));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
+  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)));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
+  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)));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
+}
+.container[data-acrylic-appearance=transparent]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=transparent] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:transparent;
+}
+.container[data-acrylic-appearance=decorTransparent]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=decorTransparent] .acrylic{
+  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)));
+}
+.container .content{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.container:focus-visible{
+  outline:var(--sn-brand-anatomy-focusLine-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeBold, 3px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline-offset:0;
+}
+.container[data-over] .overLayer{
+  visibility:inherit;
+}
+.container[data-size=s]{
+  border-radius:var(--sn-dropzone-anatomy-size-s-borderRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
+  min-height:var(--sn-dropzone-anatomy-size-s-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  border-width:var(--sn-dropzone-anatomy-size-s-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
+  padding-left:var(--sn-dropzone-anatomy-size-s-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-dropzone-anatomy-size-s-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-top:var(--sn-dropzone-anatomy-size-s-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-s-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+}
+.container[data-size=s] .content{
+  padding-left:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.container[data-size=m]{
+  border-radius:var(--sn-dropzone-anatomy-size-m-borderRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-dropzone-anatomy-size-m-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-right:var(--sn-dropzone-anatomy-size-m-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-top:var(--sn-dropzone-anatomy-size-m-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-m-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  min-height:var(--sn-dropzone-anatomy-size-m-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  border-width:var(--sn-dropzone-anatomy-size-m-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
+}
+.container[data-size=m] .content{
+  padding-left:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.container[data-size=l]{
+  border-radius:var(--sn-dropzone-anatomy-size-l-borderRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-dropzone-anatomy-size-l-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-right:var(--sn-dropzone-anatomy-size-l-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-top:var(--sn-dropzone-anatomy-size-l-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-l-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  min-height:var(--sn-dropzone-anatomy-size-l-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
+  border-width:var(--sn-dropzone-anatomy-size-l-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
+}
+.container[data-size=l] .content{
+  padding-left:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  padding-top:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
+}
+.container[data-disabled]{
+  cursor:not-allowed;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+.container[data-disabled] .content{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.container .borderLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.container .borderLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.container .borderLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.container .borderLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.container .borderLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.container .borderLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.container .borderLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.container .borderLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.container .borderLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.container{
+}
+.container[data-loading] .borderLayer[data-state=borderOnBackground], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=borderOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.container[data-loading] .borderLayer[data-state=emptyNeutralOnBackground], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyNeutralOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.container[data-loading] .borderLayer[data-state=activatedOnBackground], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=activatedOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.container[data-loading] .borderLayer[data-state=versionOnColor], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=versionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.container[data-loading] .borderLayer[data-state=emptyVersionOnColor], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyVersionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.container[data-loading] .borderLayer[data-state=inversionOnColor], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=inversionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.container[data-loading] .borderLayer[data-state=emptyInversionOnColor], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyInversionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.container[data-loading] .borderLayer[data-state=emptyDarkOnAccent], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyDarkOnAccent], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.container > [data-state-layer][data-state=borderOnBackground]{
+  border-style:dashed !important;
+}

package/dist/cjs/components/PrivateDropZone/types.d.ts

@@ -0,0 +1,23 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from 'react';
+import { FileFieldProps, Size } from '../../types';
+import { UPLOAD_MODE } from './constants';
+export type DragAndDropEventNames = 'onDragLeave' | 'onDragOver' | 'onDrop';
+export type PrivateDropZoneProps = WithSupportProps<{
+    isOver: boolean;
+    /** Колбек с принятыми файлами (прошедшими проверку `maxSize` и `accept`). */
+    onFilesUpload(files: File[]): void;
+    /** Контент dropzone */
+    children?: ReactNode;
+    /** Деактивирован ли компонент */
+    disabled?: boolean;
+    /**
+     * Режим
+     * @default multiple
+     */
+    mode?: (typeof UPLOAD_MODE)[keyof typeof UPLOAD_MODE];
+    /** Размер компонента */
+    size?: Size;
+    /** CSS-класс */
+    className?: string;
+} & FileFieldProps> & Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, DragAndDropEventNames>;

package/dist/cjs/components/PrivateDropZone/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,3 @@
+export * from './Dropzone';
+export * from './FileUpload';
+export * from './HiddenDropZone';

package/dist/cjs/components/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Dropzone"), exports);
+__exportStar(require("./FileUpload"), exports);
+__exportStar(require("./HiddenDropZone"), exports);

package/dist/cjs/constants.d.ts

@@ -0,0 +1,17 @@
+export declare const UPLOAD_MODE: {
+    readonly Single: "single";
+    readonly Multiple: "multiple";
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const TEST_IDS: {
+    readonly dropzone: {
+        readonly nativeInput: "file-input";
+    };
+    readonly fileUpload: {
+        readonly nativeInput: "file-upload__native-input";
+    };
+};

package/dist/cjs/constants.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_IDS = exports.SIZE = exports.UPLOAD_MODE = void 0;
+exports.UPLOAD_MODE = {
+    Single: 'single',
+    Multiple: 'multiple',
+};
+exports.SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+exports.TEST_IDS = {
+    dropzone: {
+        nativeInput: 'file-input',
+    },
+    fileUpload: {
+        nativeInput: 'file-upload__native-input',
+    },
+};

package/dist/cjs/hooks/useDrag.d.ts

@@ -0,0 +1,7 @@
+import { DragEventHandler } from 'react';
+type UseDragResult = {
+    events: Record<'onDragLeave' | 'onDragOver' | 'onDrop', DragEventHandler<HTMLElement>>;
+    isOver: boolean;
+};
+export declare function useDrag(disabled: boolean): UseDragResult;
+export {};

package/dist/cjs/hooks/useDrag.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDrag = useDrag;
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+function useDrag(disabled) {
+    const [isOver, setIsOver] = (0, react_1.useState)(false);
+    const debouncedSetIsOver = (0, react_1.useMemo)(() => (0, utils_1.debounce)(setIsOver, 5), []);
+    const handleDragLeave = (0, react_1.useCallback)(e => {
+        if (!disabled) {
+            e.preventDefault();
+            debouncedSetIsOver(false);
+        }
+    }, [debouncedSetIsOver, disabled]);
+    const handleDragOver = (0, react_1.useCallback)(e => {
+        if (!disabled) {
+            e.preventDefault();
+            debouncedSetIsOver(true);
+        }
+    }, [debouncedSetIsOver, disabled]);
+    const handleDrop = (0, react_1.useCallback)(e => {
+        if (!disabled) {
+            e.preventDefault();
+            debouncedSetIsOver(false);
+        }
+    }, [debouncedSetIsOver, disabled]);
+    (0, react_1.useEffect)(() => () => debouncedSetIsOver.cancel(), [debouncedSetIsOver]);
+    const events = { onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop };
+    return { events, isOver };
+}

package/dist/cjs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './constants';
+export * from './types';
+export * from './utils';

package/dist/cjs/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./utils"), exports);

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}