@snack-uikit/alert 0.13.5 → 0.13.7-preview-1f246c4a.0

package/package.json

@@ -4,15 +4,16 @@
     "access": "public"
   },
   "title": "Alert",
-  "version": "0.13.5",
+  "version": "0.13.7-preview-1f246c4a.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/alert",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Alexander Starodubtsev <avstarodubtsev@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,12 +34,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.22.1",
-    "@snack-uikit/link": "0.13.3",
-    "@snack-uikit/loaders": "0.5.3",
-    "@snack-uikit/truncate-string": "0.4.23",
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/icons": "0.22.2-preview-1f246c4a.0",
+    "@snack-uikit/link": "0.13.5-preview-1f246c4a.0",
+    "@snack-uikit/loaders": "0.5.4-preview-1f246c4a.0",
+    "@snack-uikit/truncate-string": "0.4.25-preview-1f246c4a.0",
+    "@snack-uikit/utils": "3.4.1-preview-1f246c4a.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "fc6a22e54444112c7ded3349a79da17bb777fd0e"
+  "gitHead": "a185a55c0722b19f70dd168cf299e6f53a0fd93f"
 }

package/dist/components/Alert/styles.module.css

@@ -1,198 +0,0 @@
-.alert{
-  display:flex;
-  flex-direction:column;
-  box-sizing:border-box;
-  min-width:256px;
-}
-.alert[data-color=neutral]{
-  background-color:var(--sys-neutral-background, #eeeff3);
-}
-.alert[data-color=primary]{
-  background-color:var(--sys-primary-background, #f6effe);
-}
-.alert[data-color=red]{
-  background-color:var(--sys-red-background, #fdf1ef);
-}
-.alert[data-color=yellow]{
-  background-color:var(--sys-yellow-background, #fef7e1);
-}
-.alert[data-color=green]{
-  background-color:var(--sys-green-background, #f1fbee);
-}
-.alert[data-color=blue]{
-  background-color:var(--sys-blue-background, #eef8ff);
-}
-.alert[data-size=s]{
-  padding-top:var(--space-alert-s-container-vertical-padding, 7px);
-  padding-bottom:var(--space-alert-s-container-vertical-padding, 7px);
-  padding-left:var(--space-alert-s-container-horizontal-padding, 7px);
-  padding-right:var(--space-alert-s-container-horizontal-padding, 7px);
-  gap:var(--space-alert-s-container-gap, 7px);
-  border-radius:var(--radius-alert-container, 8px);
-  border-width:var(--border-width-alert-single, 1px);
-}
-.alert[data-size=m]{
-  padding-top:var(--space-alert-m-container-vertical-padding, 15px);
-  padding-bottom:var(--space-alert-m-container-vertical-padding, 15px);
-  padding-left:var(--space-alert-m-container-horizontal-padding, 15px);
-  padding-right:var(--space-alert-m-container-horizontal-padding, 15px);
-  gap:var(--space-alert-m-container-gap, 15px);
-  border-radius:var(--radius-alert-container, 8px);
-  border-width:var(--border-width-alert-single, 1px);
-}
-
-.alertOutline{
-  outline-style:solid;
-  outline-width:var(--border-width-accordion-collapse-block-primary, 1px);
-}
-.alertOutline[data-color=neutral]{
-  outline-color:var(--sys-neutral-decor-default, #dde0ea);
-}
-.alertOutline[data-color=neutral]:focus-within, .alertOutline[data-color=neutral]:hover{
-  outline-color:var(--sys-neutral-decor-default, #dde0ea);
-}
-.alertOutline[data-color=primary]{
-  outline-color:var(--sys-primary-decor-default, #ebdefd);
-}
-.alertOutline[data-color=primary]:focus-within, .alertOutline[data-color=primary]:hover{
-  outline-color:var(--sys-primary-decor-default, #ebdefd);
-}
-.alertOutline[data-color=red]{
-  outline-color:var(--sys-red-decor-default, #fdd6cd);
-}
-.alertOutline[data-color=red]:focus-within, .alertOutline[data-color=red]:hover{
-  outline-color:var(--sys-red-decor-default, #fdd6cd);
-}
-.alertOutline[data-color=yellow]{
-  outline-color:var(--sys-yellow-decor-default, #f0dfb1);
-}
-.alertOutline[data-color=yellow]:focus-within, .alertOutline[data-color=yellow]:hover{
-  outline-color:var(--sys-yellow-decor-default, #f0dfb1);
-}
-.alertOutline[data-color=green]{
-  outline-color:var(--sys-green-decor-default, #d2ead0);
-}
-.alertOutline[data-color=green]:focus-within, .alertOutline[data-color=green]:hover{
-  outline-color:var(--sys-green-decor-default, #d2ead0);
-}
-.alertOutline[data-color=blue]{
-  outline-color:var(--sys-blue-decor-default, #d6e2f4);
-}
-.alertOutline[data-color=blue]:focus-within, .alertOutline[data-color=blue]:hover{
-  outline-color:var(--sys-blue-decor-default, #d6e2f4);
-}
-
-.body{
-  display:flex;
-  box-sizing:border-box;
-  width:100%;
-}
-.body[data-size=s]{
-  gap:var(--space-alert-s-container-body-gap, 4px);
-}
-.body[data-size=m]{
-  gap:var(--space-alert-m-container-body-gap, 8px);
-}
-
-.icon[data-color=neutral]{
-  color:var(--sys-neutral-accent-default, #787b8a);
-}
-.icon[data-color=primary]{
-  color:var(--sys-primary-accent-default, #794ed3);
-}
-.icon[data-color=red]{
-  color:var(--sys-red-accent-default, #cb3f3e);
-}
-.icon[data-color=yellow]{
-  color:var(--sys-yellow-accent-default, #e2b134);
-}
-.icon[data-color=green]{
-  color:var(--sys-green-accent-default, #57b762);
-}
-.icon[data-color=blue]{
-  color:var(--sys-blue-accent-default, #5388d1);
-}
-.icon[data-size=s]{
-  width:var(--size-icon-container-xs, 16px);
-  height:var(--size-icon-container-xs, 16px);
-}
-.icon[data-size=s] svg{
-  max-width:var(--size-icon-container-xs, 16px);
-  max-height:var(--size-icon-container-xs, 16px);
-}
-.icon[data-size=m]{
-  width:var(--size-icon-container-s, 24px);
-  height:var(--size-icon-container-s, 24px);
-}
-.icon[data-size=m] svg{
-  max-width:var(--size-icon-container-s, 24px);
-  max-height:var(--size-icon-container-s, 24px);
-}
-
-.contentLayout{
-  display:flex;
-  flex:1;
-  flex-direction:column;
-  min-width:0;
-}
-.contentLayout[data-size=s]{
-  padding-top:var(--space-alert-s-container-content-layout-padding-top, 0px);
-}
-.contentLayout[data-size=m]{
-  padding-top:var(--space-alert-m-container-content-layout-padding-top, 2px);
-}
-
-.title{
-  color:var(--sys-neutral-text-main, #41424e);
-}
-.title[data-size=s]{
-  font-family:var(--sans-label-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-m-font-weight, Semibold);
-  line-height:var(--sans-label-m-line-height, 16px);
-  font-size:var(--sans-label-m-font-size, 12px);
-  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
-}
-.title[data-size=m]{
-  font-family:var(--sans-title-s-font-family, SB Sans Interface);
-  font-weight:var(--sans-title-s-font-weight, Semibold);
-  line-height:var(--sans-title-s-line-height, 20px);
-  font-size:var(--sans-title-s-font-size, 14px);
-  letter-spacing:var(--sans-title-s-letter-spacing, 0.15px);
-  paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
-}
-
-.description{
-  color:var(--sys-neutral-text-support, #6d707f);
-  word-wrap:break-word;
-}
-.description[data-size=s]{
-  font-family:var(--sans-body-s-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-s-font-weight, Regular);
-  line-height:var(--sans-body-s-line-height, 16px);
-  font-size:var(--sans-body-s-font-size, 12px);
-  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
-}
-.description[data-size=m]{
-  font-family:var(--sans-body-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-m-font-weight, Regular);
-  line-height:var(--sans-body-m-line-height, 20px);
-  font-size:var(--sans-body-m-font-size, 14px);
-  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
-}
-
-.footer{
-  position:relative;
-  display:flex;
-  flex-direction:row-reverse;
-  align-items:center;
-  width:100%;
-}
-.footer[data-size=s]{
-  gap:var(--space-alert-s-container-footer-gap, 16px);
-}
-.footer[data-size=m]{
-  gap:var(--space-alert-m-container-footer-gap, 16px);
-}

package/dist/components/AlertTop/styles.module.css

@@ -1,135 +0,0 @@
-.alertTop{
-  padding-top:var(--space-alert-top-container-vertical-padding, 8px);
-  padding-bottom:var(--space-alert-top-container-vertical-padding, 8px);
-  padding-left:var(--space-alert-top-container-horizontal-padding, 16px);
-  padding-right:var(--space-alert-top-container-horizontal-padding, 16px);
-  gap:var(--space-alert-top-container-gap, 16px);
-  display:flex;
-  justify-content:space-between;
-  box-sizing:border-box;
-}
-.alertTop[data-color=invert-neutral]{
-  background-color:var(--sys-invert-neutral-background, #30303c);
-}
-.alertTop[data-color=primary]{
-  background-color:var(--sys-primary-accent-default, #794ed3);
-}
-.alertTop[data-color=red]{
-  background-color:var(--sys-red-accent-default, #cb3f3e);
-}
-.alertTop[data-color=yellow]{
-  background-color:var(--sys-yellow-accent-default, #e2b134);
-}
-.alertTop[data-color=green]{
-  background-color:var(--sys-green-accent-default, #57b762);
-}
-.alertTop[data-color=blue]{
-  background-color:var(--sys-blue-accent-default, #5388d1);
-}
-
-.icon{
-  display:flex;
-  align-items:center;
-  justify-content:center;
-}
-.icon[data-color=invert-neutral]{
-  color:var(--sys-invert-neutral-text-main, #e6e8ef);
-}
-.icon[data-color=primary]{
-  color:var(--sys-primary-on-accent, #fdfbff);
-}
-.icon[data-color=red]{
-  color:var(--sys-red-on-accent, #fffbf9);
-}
-.icon[data-color=yellow]{
-  color:var(--sys-yellow-on-accent, #583f1f);
-}
-.icon[data-color=green]{
-  color:var(--sys-green-on-accent, #fcfefa);
-}
-.icon[data-color=blue]{
-  color:var(--sys-blue-on-accent, #fdfeff);
-}
-.icon svg{
-  width:var(--size-icon-container-s, 24px) !important;
-  height:var(--size-icon-container-s, 24px) !important;
-}
-
-.title{
-  font-family:var(--sans-title-s-font-family, SB Sans Interface);
-  font-weight:var(--sans-title-s-font-weight, Semibold);
-  line-height:var(--sans-title-s-line-height, 20px);
-  font-size:var(--sans-title-s-font-size, 14px);
-  letter-spacing:var(--sans-title-s-letter-spacing, 0.15px);
-  paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
-}
-.title[data-color=invert-neutral]{
-  color:var(--sys-invert-neutral-text-main, #e6e8ef);
-}
-.title[data-color=primary]{
-  color:var(--sys-primary-on-accent, #fdfbff);
-}
-.title[data-color=red]{
-  color:var(--sys-red-on-accent, #fffbf9);
-}
-.title[data-color=yellow]{
-  color:var(--sys-yellow-on-accent, #583f1f);
-}
-.title[data-color=green]{
-  color:var(--sys-green-on-accent, #fcfefa);
-}
-.title[data-color=blue]{
-  color:var(--sys-blue-on-accent, #fdfeff);
-}
-
-.description{
-  font-family:var(--sans-body-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-m-font-weight, Regular);
-  line-height:var(--sans-body-m-line-height, 20px);
-  font-size:var(--sans-body-m-font-size, 14px);
-  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
-  word-wrap:break-word;
-}
-.description[data-color=invert-neutral]{
-  color:var(--sys-invert-neutral-text-main, #e6e8ef);
-}
-.description[data-color=primary]{
-  color:var(--sys-primary-on-accent, #fdfbff);
-}
-.description[data-color=red]{
-  color:var(--sys-red-on-accent, #fffbf9);
-}
-.description[data-color=yellow]{
-  color:var(--sys-yellow-on-accent, #583f1f);
-}
-.description[data-color=green]{
-  color:var(--sys-green-on-accent, #fcfefa);
-}
-.description[data-color=blue]{
-  color:var(--sys-blue-on-accent, #fdfeff);
-}
-
-.contentWrapper{
-  display:flex;
-  gap:var(--dimension-2m, 16px);
-  align-items:center;
-  min-width:0;
-}
-
-.contentLayout{
-  gap:var(--space-alert-top-container-content-layout-gap, 2px);
-  display:flex;
-  flex-direction:column;
-  min-width:0;
-}
-
-.textLayout{
-  overflow:hidden;
-}
-
-.actions{
-  display:flex;
-  gap:var(--dimension-2m, 16px);
-  align-items:center;
-}

package/dist/helperComponents/styles.module.css

@@ -1,171 +0,0 @@
-.alertButton{
-  cursor:pointer;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  box-sizing:border-box;
-  margin:0;
-  padding:0;
-  white-space:nowrap;
-  background:none;
-  border:0;
-}
-.alertButton .text[data-size=s]{
-  font-family:var(--sans-label-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-m-font-weight, Semibold);
-  line-height:var(--sans-label-m-line-height, 16px);
-  font-size:var(--sans-label-m-font-size, 12px);
-  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
-}
-.alertButton .text[data-size=m]{
-  font-family:var(--sans-label-l-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-l-font-weight, Semibold);
-  line-height:var(--sans-label-l-line-height, 20px);
-  font-size:var(--sans-label-l-font-size, 14px);
-  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
-}
-.alertButton .icon{
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  width:var(--size-icon-container-s, 24px);
-  height:var(--size-icon-container-s, 24px);
-}
-.alertButton .icon svg{
-  max-width:var(--size-icon-container-s, 24px);
-  max-height:var(--size-icon-container-s, 24px);
-}
-.alertButton[data-loading=true]{
-  cursor:not-allowed;
-}
-.alertButton[data-loading=true] > *{
-  cursor:not-allowed;
-}
-
-.alertButton[data-variant=simple][data-size=s]{
-  height:var(--size-alert-button-m, 24px);
-  gap:var(--space-alert-m-button-gap, 4px);
-  border-radius:var(--radius-alert-button, 8px);
-}
-.alertButton[data-variant=simple][data-size=s][data-icon-only]{
-  height:var(--size-alert-button-s, 16px);
-  width:var(--size-alert-button-s, 16px);
-  border-radius:var(--radius-alert-button, 8px);
-}
-.alertButton[data-variant=simple][data-size=m]{
-  height:var(--size-alert-button-m, 24px);
-  gap:var(--space-alert-m-button-gap, 4px);
-  border-radius:var(--radius-alert-button, 8px);
-}
-.alertButton[data-variant=simple][data-size=m][data-icon-only]{
-  height:var(--size-alert-button-m, 24px);
-  width:var(--size-alert-button-m, 24px);
-  border-radius:var(--radius-alert-button, 8px);
-}
-.alertButton[data-variant=simple]:focus-visible{
-  outline-color:var(--sys-available-complementary, #1c1c24);
-  outline-offset:var(--spacing-state-focus-offset, 2px);
-}
-.alertButton[data-variant=simple][data-appearance=neutral]{
-  color:var(--sys-neutral-text-support, #6d707f);
-}
-.alertButton[data-variant=simple][data-appearance=neutral]:hover, .alertButton[data-variant=simple][data-appearance=neutral]:focus-visible{
-  color:var(--sys-neutral-text-main, #41424e);
-}
-.alertButton[data-variant=simple][data-appearance=neutral]:active{
-  color:var(--sys-neutral-text-main, #41424e);
-}
-.alertButton[data-variant=simple][data-appearance=primary]{
-  color:var(--sys-primary-text-support, #5b4796);
-}
-.alertButton[data-variant=simple][data-appearance=primary]:hover, .alertButton[data-variant=simple][data-appearance=primary]:focus-visible{
-  color:var(--sys-primary-text-main, #382a62);
-}
-.alertButton[data-variant=simple][data-appearance=primary]:active{
-  color:var(--sys-primary-text-main, #382a62);
-}
-.alertButton[data-variant=simple][data-appearance=red]{
-  color:var(--sys-red-text-support, #ae514c);
-}
-.alertButton[data-variant=simple][data-appearance=red]:hover, .alertButton[data-variant=simple][data-appearance=red]:focus-visible{
-  color:var(--sys-red-text-main, #7a2d2d);
-}
-.alertButton[data-variant=simple][data-appearance=red]:active{
-  color:var(--sys-red-text-main, #7a2d2d);
-}
-.alertButton[data-variant=simple][data-appearance=yellow]{
-  color:var(--sys-yellow-text-support, #b78c32);
-}
-.alertButton[data-variant=simple][data-appearance=yellow]:hover, .alertButton[data-variant=simple][data-appearance=yellow]:focus-visible{
-  color:var(--sys-yellow-text-main, #815f19);
-}
-.alertButton[data-variant=simple][data-appearance=yellow]:active{
-  color:var(--sys-yellow-text-main, #815f19);
-}
-.alertButton[data-variant=simple][data-appearance=green]{
-  color:var(--sys-green-text-support, #55915a);
-}
-.alertButton[data-variant=simple][data-appearance=green]:hover, .alertButton[data-variant=simple][data-appearance=green]:focus-visible{
-  color:var(--sys-green-text-main, #3d6035);
-}
-.alertButton[data-variant=simple][data-appearance=green]:active{
-  color:var(--sys-green-text-main, #3d6035);
-}
-.alertButton[data-variant=simple][data-appearance=blue]{
-  color:var(--sys-blue-text-support, #4877b0);
-}
-.alertButton[data-variant=simple][data-appearance=blue]:hover, .alertButton[data-variant=simple][data-appearance=blue]:focus-visible{
-  color:var(--sys-blue-text-main, #2b537e);
-}
-.alertButton[data-variant=simple][data-appearance=blue]:active{
-  color:var(--sys-blue-text-main, #2b537e);
-}
-
-.alertButton[data-variant=tonal]{
-  height:var(--size-alert-top-button, 32px);
-  gap:var(--space-alert-top-button-gap, 4px);
-  border-radius:var(--radius-alert-top-button, 12px);
-  padding-left:var(--space-alert-top-button-horizontal-padding, 12px);
-  padding-right:var(--space-alert-top-button-horizontal-padding, 12px);
-  background:var(--sys-opacity-enabled, rgba(255, 255, 255, 0.1607843137));
-}
-.alertButton[data-variant=tonal][data-icon-only]{
-  border-radius:var(--radius-alert-top-button, 12px);
-  height:var(--size-alert-top-button, 32px);
-  width:var(--size-alert-top-button, 32px);
-  background:none;
-}
-.alertButton[data-variant=tonal]:hover{
-  opacity:unset;
-  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
-}
-.alertButton[data-variant=tonal]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.alertButton[data-variant=tonal]:active{
-  background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
-}
-.alertButton[data-variant=tonal][data-appearance=invert-neutral]{
-  color:var(--sys-invert-neutral-text-main, #e6e8ef);
-}
-.alertButton[data-variant=tonal][data-appearance=primary]{
-  color:var(--sys-primary-on-accent, #fdfbff);
-}
-.alertButton[data-variant=tonal][data-appearance=red]{
-  color:var(--sys-red-on-accent, #fffbf9);
-}
-.alertButton[data-variant=tonal][data-appearance=yellow]{
-  color:var(--sys-yellow-on-accent, #583f1f);
-}
-.alertButton[data-variant=tonal][data-appearance=green]{
-  color:var(--sys-green-on-accent, #fcfefa);
-}
-.alertButton[data-variant=tonal][data-appearance=blue]{
-  color:var(--sys-blue-on-accent, #fdfeff);
-}