@elliemae/ds-legacy-toast 1.0.0-rc.1

package/dist/esm/parts/styled.js

@@ -0,0 +1,356 @@
+import * as React from "react";
+import { DSButtonV2 } from "@elliemae/ds-legacy-button-v2";
+import { styled, th, xStyledCommonProps } from "@elliemae/ds-legacy-system";
+import {
+  DSToastActionLinkName,
+  DSToastActionName,
+  DSToastActionSlots,
+  DSToastActionLinkSlots,
+  DSToastName,
+  DSToastSlots
+} from "../DSToastDefinitions.js";
+const StyledLink = styled("span", { name: DSToastActionLinkName, slot: DSToastActionLinkSlots.ROOT })`
+  color: brand-600;
+  ${xStyledCommonProps}
+`;
+const StyledContainer = styled("div", { name: DSToastName, slot: DSToastSlots.CONTAINER })`
+  display: flex;
+  padding: ${th.space("xxs")};
+  padding-right: ${th.space("s")};
+`;
+const StyledIconContainer = styled("div", { name: DSToastName, slot: DSToastSlots.ICON_CONTAINER })`
+  margin-top: ${th.space("xxxs")};
+  margin-right: ${th.space("xxs")};
+`;
+const StyledMessageContent = styled("div", { name: DSToastName, slot: DSToastSlots.MESSAGE_CONTENT })`
+  flex: 1;
+`;
+const StyledMessageHeader = styled("div", { name: DSToastName, slot: DSToastSlots.MESSAGE_HEADER })`
+  margin-top: ${th.space("xxxs")};
+  margin-bottom: ${th.space("xxs")};
+  color: neutral-700;
+  font-weight: 600;
+  font-size: 1rem;
+`;
+const StyledMessageText = styled("span", { name: DSToastName, slot: DSToastSlots.MESSAGE_TEXT })`
+  color: neutral-500;
+  font-size: 1rem;
+`;
+const StyledAction = styled("div", { name: DSToastActionName, slot: DSToastActionSlots.ROOT })`
+  position: relative;
+  &:focus {
+    &:after {
+      position: absolute;
+      content: '';
+      border: 2px solid brand-700;
+      top: -1px;
+      left: -1px;
+      width: calc(100% + 2px);
+      height: calc(100% + 2px);
+    }
+  }
+  &:focus-visible {
+    outline: none;
+  }
+  ${xStyledCommonProps}
+`;
+const StyledButton = styled(DSButtonV2, { name: DSToastName, slot: DSToastSlots.CLOSE_BUTTON })`
+  position: absolute;
+  top: 4px;
+  right: 4px;
+
+  fill: ${th.color("neutral-300")};
+`;
+const ToastifyWrapper = styled("div", { name: DSToastName, slot: DSToastSlots.ROOT })`
+  .Toastify__toast-container {
+    z-index: 9999;
+    position: fixed;
+    width: 300px;
+    box-sizing: border-box;
+    color: #fff;
+    &--top-left {
+      top: 1em;
+      left: 1em;
+    }
+    &--top-center {
+      top: 1em;
+      left: 50%;
+      margin-left: -150px;
+    }
+    &--top-right {
+      top: 1em;
+      right: 1em;
+    }
+    &--bottom-left {
+      bottom: 1em;
+      left: 1em;
+    }
+    &--bottom-center {
+      bottom: 1em;
+      left: 50%;
+      margin-left: -150px;
+    }
+    &--bottom-right {
+      bottom: 1em;
+      right: 1em;
+    }
+
+    &:not(.with-progressbar) {
+      .Toastify__toast {
+        &--default {
+          border-color: neutral-400;
+        }
+        &--info {
+          border-color: brand-400;
+        }
+        &--success {
+          border-color: success-900;
+        }
+        &--warning {
+          border-color: warning-900;
+        }
+        &--error {
+          border-color: danger-900;
+        }
+      }
+    }
+
+    &.with-progressbar {
+      .Toastify__toast {
+        &--default {
+          border-color: neutral-300;
+        }
+        &--info {
+          border-color: brand-300;
+        }
+        &--success {
+          border-color: success-300;
+        }
+        &--warning {
+          border-color: warning-600;
+        }
+        &--error {
+          border-color: danger-200;
+        }
+      }
+    }
+  }
+
+  .Toastify__toast {
+    position: relative;
+    min-height: 76px;
+    box-sizing: border-box;
+    border-radius: 1px;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    direction: ltr;
+    background-color: neutral-000;
+    border-left: 5px solid;
+    box-shadow: 0 4px 10px 1px neutral-400;
+    margin-bottom: ${th.space("xxs")};
+    &--rtl {
+      direction: rtl;
+    }
+    &-body {
+      margin: 0;
+      flex: 1;
+    }
+  }
+
+  .Toastify__progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: -5px;
+    width: 5px;
+    height: 0;
+    z-index: 9999;
+    opacity: 0.7;
+    animation: Toastify__trackProgress linear 1;
+    background-color: brand-200;
+
+    &--rtl {
+      right: 0;
+      left: initial;
+    }
+    &--default {
+      background-color: neutral-400;
+    }
+
+    &--info {
+      background-color: brand-400;
+    }
+    &--success {
+      background-color: success-900;
+    }
+    &--warning {
+      background-color: warning-900;
+    }
+    &--error {
+      background-color: danger-900;
+    }
+  }
+
+  @media only screen and (max-width: 480px) {
+    .Toastify__toast-container {
+      width: 100vw;
+      padding: 0;
+      left: 0;
+      margin: 0;
+      &--top-left,
+      &--top-center,
+      &--top-right {
+        top: 0;
+      }
+      &--bottom-left,
+      &--bottom-center,
+      &--bottom-right {
+        bottom: 0;
+      }
+      &--rtl {
+        right: 0;
+        left: initial;
+      }
+    }
+
+    .Toastify__toast {
+      margin-bottom: 0;
+    }
+  }
+
+  @keyframes Toastify__trackProgress {
+    from {
+      height: 100%;
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes Toastify__slideInRight {
+    from {
+      transform: translate3d(110%, 0, 0);
+      visibility: visible;
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes Toastify__slideInLeft {
+    from {
+      transform: translate3d(-110%, 0, 0);
+      visibility: visible;
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes Toastify__slideInUp {
+    from {
+      transform: translate3d(0, 110%, 0);
+      visibility: visible;
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes Toastify__slideInDown {
+    from {
+      transform: translate3d(0, -110%, 0);
+      visibility: visible;
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes Toastify__slideOutRight {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      visibility: hidden;
+      transform: translate3d(110%, 0, 0);
+    }
+  }
+
+  @keyframes Toastify__slideOutLeft {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      visibility: hidden;
+      transform: translate3d(-110%, 0, 0);
+    }
+  }
+
+  @keyframes Toastify__slideOutDown {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      visibility: hidden;
+      transform: translate3d(0, 500px, 0);
+    }
+  }
+
+  @keyframes Toastify__slideOutUp {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      visibility: hidden;
+      transform: translate3d(0, -500px, 0);
+    }
+  }
+
+  .Toastify__slide-enter {
+    &--top-left,
+    &--bottom-left {
+      animation-name: Toastify__slideInLeft;
+    }
+    &--top-right,
+    &--bottom-right {
+      animation-name: Toastify__slideInRight;
+    }
+    &--top-center {
+      animation-name: Toastify__slideInDown;
+    }
+    &--bottom-center {
+      animation-name: Toastify__slideInUp;
+    }
+  }
+
+  .Toastify__slide-exit {
+    &--top-left,
+    &--bottom-left {
+      animation-name: Toastify__slideOutLeft;
+    }
+    &--top-right,
+    &--bottom-right {
+      animation-name: Toastify__slideOutRight;
+    }
+    &--top-center {
+      animation-name: Toastify__slideOutUp;
+    }
+    &--bottom-center {
+      animation-name: Toastify__slideOutDown;
+    }
+  }
+  ${xStyledCommonProps}
+`;
+export {
+  StyledAction,
+  StyledButton,
+  StyledContainer,
+  StyledIconContainer,
+  StyledLink,
+  StyledMessageContent,
+  StyledMessageHeader,
+  StyledMessageText,
+  ToastifyWrapper
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/parts/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-legacy-button-v2';\nimport { styled, th, xStyledCommonProps } from '@elliemae/ds-legacy-system';\nimport {\n  DSToastActionLinkName,\n  DSToastActionName,\n  DSToastActionSlots,\n  DSToastActionLinkSlots,\n  DSToastName,\n  DSToastSlots,\n} from '../DSToastDefinitions.js';\n\nexport const StyledLink = styled('span', { name: DSToastActionLinkName, slot: DSToastActionLinkSlots.ROOT })`\n  color: brand-600;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledContainer = styled('div', { name: DSToastName, slot: DSToastSlots.CONTAINER })`\n  display: flex;\n  padding: ${th.space('xxs')};\n  padding-right: ${th.space('s')};\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSToastName, slot: DSToastSlots.ICON_CONTAINER })`\n  margin-top: ${th.space('xxxs')};\n  margin-right: ${th.space('xxs')};\n`;\n\nexport const StyledMessageContent = styled('div', { name: DSToastName, slot: DSToastSlots.MESSAGE_CONTENT })`\n  flex: 1;\n`;\n\nexport const StyledMessageHeader = styled('div', { name: DSToastName, slot: DSToastSlots.MESSAGE_HEADER })`\n  margin-top: ${th.space('xxxs')};\n  margin-bottom: ${th.space('xxs')};\n  color: neutral-700;\n  font-weight: 600;\n  font-size: 1rem;\n`;\n\nexport const StyledMessageText = styled('span', { name: DSToastName, slot: DSToastSlots.MESSAGE_TEXT })`\n  color: neutral-500;\n  font-size: 1rem;\n`;\n\nexport const StyledAction = styled('div', { name: DSToastActionName, slot: DSToastActionSlots.ROOT })`\n  position: relative;\n  &:focus {\n    &:after {\n      position: absolute;\n      content: '';\n      border: 2px solid brand-700;\n      top: -1px;\n      left: -1px;\n      width: calc(100% + 2px);\n      height: calc(100% + 2px);\n    }\n  }\n  &:focus-visible {\n    outline: none;\n  }\n  ${xStyledCommonProps}\n`;\n\nexport const StyledButton = styled(DSButtonV2, { name: DSToastName, slot: DSToastSlots.CLOSE_BUTTON })`\n  position: absolute;\n  top: 4px;\n  right: 4px;\n\n  fill: ${th.color('neutral-300')};\n`;\n\nexport const ToastifyWrapper = styled('div', { name: DSToastName, slot: DSToastSlots.ROOT })`\n  .Toastify__toast-container {\n    z-index: 9999;\n    position: fixed;\n    width: 300px;\n    box-sizing: border-box;\n    color: #fff;\n    &--top-left {\n      top: 1em;\n      left: 1em;\n    }\n    &--top-center {\n      top: 1em;\n      left: 50%;\n      margin-left: -150px;\n    }\n    &--top-right {\n      top: 1em;\n      right: 1em;\n    }\n    &--bottom-left {\n      bottom: 1em;\n      left: 1em;\n    }\n    &--bottom-center {\n      bottom: 1em;\n      left: 50%;\n      margin-left: -150px;\n    }\n    &--bottom-right {\n      bottom: 1em;\n      right: 1em;\n    }\n\n    &:not(.with-progressbar) {\n      .Toastify__toast {\n        &--default {\n          border-color: neutral-400;\n        }\n        &--info {\n          border-color: brand-400;\n        }\n        &--success {\n          border-color: success-900;\n        }\n        &--warning {\n          border-color: warning-900;\n        }\n        &--error {\n          border-color: danger-900;\n        }\n      }\n    }\n\n    &.with-progressbar {\n      .Toastify__toast {\n        &--default {\n          border-color: neutral-300;\n        }\n        &--info {\n          border-color: brand-300;\n        }\n        &--success {\n          border-color: success-300;\n        }\n        &--warning {\n          border-color: warning-600;\n        }\n        &--error {\n          border-color: danger-200;\n        }\n      }\n    }\n  }\n\n  .Toastify__toast {\n    position: relative;\n    min-height: 76px;\n    box-sizing: border-box;\n    border-radius: 1px;\n    display: flex;\n    justify-content: space-between;\n    cursor: pointer;\n    direction: ltr;\n    background-color: neutral-000;\n    border-left: 5px solid;\n    box-shadow: 0 4px 10px 1px neutral-400;\n    margin-bottom: ${th.space('xxs')};\n    &--rtl {\n      direction: rtl;\n    }\n    &-body {\n      margin: 0;\n      flex: 1;\n    }\n  }\n\n  .Toastify__progress-bar {\n    position: absolute;\n    bottom: 0;\n    left: -5px;\n    width: 5px;\n    height: 0;\n    z-index: 9999;\n    opacity: 0.7;\n    animation: Toastify__trackProgress linear 1;\n    background-color: brand-200;\n\n    &--rtl {\n      right: 0;\n      left: initial;\n    }\n    &--default {\n      background-color: neutral-400;\n    }\n\n    &--info {\n      background-color: brand-400;\n    }\n    &--success {\n      background-color: success-900;\n    }\n    &--warning {\n      background-color: warning-900;\n    }\n    &--error {\n      background-color: danger-900;\n    }\n  }\n\n  @media only screen and (max-width: 480px) {\n    .Toastify__toast-container {\n      width: 100vw;\n      padding: 0;\n      left: 0;\n      margin: 0;\n      &--top-left,\n      &--top-center,\n      &--top-right {\n        top: 0;\n      }\n      &--bottom-left,\n      &--bottom-center,\n      &--bottom-right {\n        bottom: 0;\n      }\n      &--rtl {\n        right: 0;\n        left: initial;\n      }\n    }\n\n    .Toastify__toast {\n      margin-bottom: 0;\n    }\n  }\n\n  @keyframes Toastify__trackProgress {\n    from {\n      height: 100%;\n    }\n    to {\n      height: 0;\n    }\n  }\n\n  @keyframes Toastify__slideInRight {\n    from {\n      transform: translate3d(110%, 0, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n\n  @keyframes Toastify__slideInLeft {\n    from {\n      transform: translate3d(-110%, 0, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n\n  @keyframes Toastify__slideInUp {\n    from {\n      transform: translate3d(0, 110%, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n\n  @keyframes Toastify__slideInDown {\n    from {\n      transform: translate3d(0, -110%, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n\n  @keyframes Toastify__slideOutRight {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(110%, 0, 0);\n    }\n  }\n\n  @keyframes Toastify__slideOutLeft {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(-110%, 0, 0);\n    }\n  }\n\n  @keyframes Toastify__slideOutDown {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(0, 500px, 0);\n    }\n  }\n\n  @keyframes Toastify__slideOutUp {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(0, -500px, 0);\n    }\n  }\n\n  .Toastify__slide-enter {\n    &--top-left,\n    &--bottom-left {\n      animation-name: Toastify__slideInLeft;\n    }\n    &--top-right,\n    &--bottom-right {\n      animation-name: Toastify__slideInRight;\n    }\n    &--top-center {\n      animation-name: Toastify__slideInDown;\n    }\n    &--bottom-center {\n      animation-name: Toastify__slideInUp;\n    }\n  }\n\n  .Toastify__slide-exit {\n    &--top-left,\n    &--bottom-left {\n      animation-name: Toastify__slideOutLeft;\n    }\n    &--top-right,\n    &--bottom-right {\n      animation-name: Toastify__slideOutRight;\n    }\n    &--top-center {\n      animation-name: Toastify__slideOutUp;\n    }\n    &--bottom-center {\n      animation-name: Toastify__slideOutDown;\n    }\n  }\n  ${xStyledCommonProps}\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,kBAAkB;AAC3B,SAAS,QAAQ,IAAI,0BAA0B;AAC/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,aAAa,OAAO,QAAQ,EAAE,MAAM,uBAAuB,MAAM,uBAAuB,KAAK,CAAC;AAAA;AAAA,IAEvG;AAAA;AAGG,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,aAAa,MAAM,aAAa,UAAU,CAAC;AAAA;AAAA,aAEnF,GAAG,MAAM,KAAK;AAAA,mBACR,GAAG,MAAM,GAAG;AAAA;AAGxB,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,aAAa,MAAM,aAAa,eAAe,CAAC;AAAA,gBACzF,GAAG,MAAM,MAAM;AAAA,kBACb,GAAG,MAAM,KAAK;AAAA;AAGzB,MAAM,uBAAuB,OAAO,OAAO,EAAE,MAAM,aAAa,MAAM,aAAa,gBAAgB,CAAC;AAAA;AAAA;AAIpG,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,aAAa,MAAM,aAAa,eAAe,CAAC;AAAA,gBACzF,GAAG,MAAM,MAAM;AAAA,mBACZ,GAAG,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,oBAAoB,OAAO,QAAQ,EAAE,MAAM,aAAa,MAAM,aAAa,aAAa,CAAC;AAAA;AAAA;AAAA;AAK/F,MAAM,eAAe,OAAO,OAAO,EAAE,MAAM,mBAAmB,MAAM,mBAAmB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBhG;AAAA;AAGG,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,aAAa,MAAM,aAAa,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,UAK3F,GAAG,MAAM,aAAa;AAAA;AAGzB,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,aAAa,MAAM,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAuFtE,GAAG,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgM/B;AAAA;",
+  "names": []
+}

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { PropTypes } from "@elliemae/ds-legacy-props-helpers";
+import { toastsPositions } from "./constants.js";
+const defaultProps = {
+  containerProps: {},
+  position: "bottom-left",
+  autoClose: 5e3,
+  showProgressBar: false,
+  closeOnClick: false,
+  enableMultiContainer: false
+};
+const actionDefaultProps = {};
+const DSToastPropTypes = {
+  /** inject props to wrapper */
+  containerProps: PropTypes.object.description("inject props to wrapper").defaultValue({}),
+  /** Position on the screen to show the toast */
+  position: PropTypes.oneOf(toastsPositions).description("Position on the screen to show the toast").defaultValue("bottom-left"),
+  /** ms to autoclose the toast */
+  autoClose: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([false])]).description("ms to autoclose the toast, false if you don't want to automatically close").defaultValue(5e3),
+  /** Whether to show a progress bar indicating when the toast is going to be closed */
+  showProgressBar: PropTypes.bool.description("Whether to show a progress bar indicating when the toast is going to be closed").defaultValue(false),
+  /** Close toast handler */
+  closeOnClick: PropTypes.bool.description("Close toast handler").defaultValue(false),
+  /** Allows instantiating multiple Toast containers */
+  enableMultiContainer: PropTypes.bool.description("Allows instantiating multiple Toast containers").defaultValue(false),
+  /** unique id for multi container */
+  containerId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("unique id for multi container")
+};
+const DSToastActionLinkPropTypes = {
+  /** link text */
+  children: PropTypes.node.isRequired.description("link text")
+};
+const DSToastActionPropsTypes = {
+  /** DSToastActionLink component or text string */
+  children: PropTypes.node.description("DSToastActionLink component or text string"),
+  /** click handler */
+  onClick: PropTypes.func.description("click handler"),
+  /** key down handler */
+  onKeyDown: PropTypes.func.description("key down handler")
+};
+export {
+  DSToastActionLinkPropTypes,
+  DSToastActionPropsTypes,
+  DSToastPropTypes,
+  actionDefaultProps,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-legacy-props-helpers';\nimport { PropTypes } from '@elliemae/ds-legacy-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { toastsPositions } from './constants.js';\nimport type { toastTypes } from './constants.js';\n\nexport declare namespace DSToastT {\n  type PropsT<D, R, O, E> = Partial<D> &\n    R &\n    O &\n    Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> &\n    Omit<XstyledProps, keyof D | keyof R | keyof O>;\n  type InternalPropsT<D, R, O, E> = D &\n    R &\n    O &\n    Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> &\n    Omit<XstyledProps, keyof D | keyof R | keyof O>;\n\n  export type ToastPositions = (typeof toastsPositions)[number];\n\n  export type ToastTypes = (typeof toastTypes)[number];\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    position: ToastPositions;\n    autoClose: number;\n    showProgressBar: boolean;\n    closeOnClick: boolean;\n    enableMultiContainer: boolean;\n  }\n\n  export interface OptionalProps {\n    containerId?: string | number;\n    closeButtonRef?: React.MutableRefObject<HTMLButtonElement | null>;\n  }\n\n  export interface RequiredProps {}\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n  export interface ActionDefaultProps {}\n\n  export interface ActionOptionalProps {\n    onClick?: React.MouseEventHandler;\n    onKeyDown?: React.KeyboardEventHandler;\n  }\n\n  export interface ActionRequiredProps {\n    children: React.ReactNode;\n  }\n\n  export type ActionProps = PropsT<ActionDefaultProps, ActionRequiredProps, ActionOptionalProps, HTMLDivElement>;\n\n  export type ActionInternalProps = InternalPropsT<\n    ActionDefaultProps,\n    ActionRequiredProps,\n    ActionOptionalProps,\n    HTMLDivElement\n  >;\n}\n\nexport const defaultProps: DSToastT.DefaultProps = {\n  containerProps: {},\n  position: 'bottom-left',\n  autoClose: 5000,\n  showProgressBar: false,\n  closeOnClick: false,\n  enableMultiContainer: false,\n};\n\nexport const actionDefaultProps: DSToastT.ActionDefaultProps = {};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\nexport const DSToastPropTypes = {\n  /** inject props to wrapper */\n  containerProps: PropTypes.object.description('inject props to wrapper').defaultValue({}),\n  /** Position on the screen to show the toast */\n  position: PropTypes.oneOf(toastsPositions as unknown as string[])\n    .description('Position on the screen to show the toast')\n    .defaultValue('bottom-left'),\n  /** ms to autoclose the toast */\n  autoClose: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([false])])\n    .description(\"ms to autoclose the toast, false if you don't want to automatically close\")\n    .defaultValue(5000),\n  /** Whether to show a progress bar indicating when the toast is going to be closed */\n  showProgressBar: PropTypes.bool\n    .description('Whether to show a progress bar indicating when the toast is going to be closed')\n    .defaultValue(false),\n  /** Close toast handler */\n  closeOnClick: PropTypes.bool.description('Close toast handler').defaultValue(false),\n  /** Allows instantiating multiple Toast containers */\n  enableMultiContainer: PropTypes.bool\n    .description('Allows instantiating multiple Toast containers')\n    .defaultValue(false),\n  /** unique id for multi container */\n  containerId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('unique id for multi container'),\n} as WeakValidationMap<unknown>;\n\nexport const DSToastActionLinkPropTypes = {\n  /** link text */\n  children: PropTypes.node.isRequired.description('link text'),\n} as React.WeakValidationMap<unknown>;\n\nexport const DSToastActionPropsTypes = {\n  /** DSToastActionLink component or text string */\n  children: PropTypes.node.description('DSToastActionLink component or text string'),\n  /** click handler */\n  onClick: PropTypes.func.description('click handler'),\n  /** key down handler */\n  onKeyDown: PropTypes.func.description('key down handler'),\n} as React.WeakValidationMap<unknown>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,iBAAiB;AAE1B,SAAS,uBAAuB;AA4DzB,MAAM,eAAsC;AAAA,EACjD,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,sBAAsB;AACxB;AAEO,MAAM,qBAAkD,CAAC;AAKzD,MAAM,mBAAmB;AAAA;AAAA,EAE9B,gBAAgB,UAAU,OAAO,YAAY,yBAAyB,EAAE,aAAa,CAAC,CAAC;AAAA;AAAA,EAEvF,UAAU,UAAU,MAAM,eAAsC,EAC7D,YAAY,0CAA0C,EACtD,aAAa,aAAa;AAAA;AAAA,EAE7B,WAAW,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EACxE,YAAY,2EAA2E,EACvF,aAAa,GAAI;AAAA;AAAA,EAEpB,iBAAiB,UAAU,KACxB,YAAY,gFAAgF,EAC5F,aAAa,KAAK;AAAA;AAAA,EAErB,cAAc,UAAU,KAAK,YAAY,qBAAqB,EAAE,aAAa,KAAK;AAAA;AAAA,EAElF,sBAAsB,UAAU,KAC7B,YAAY,gDAAgD,EAC5D,aAAa,KAAK;AAAA;AAAA,EAErB,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,+BAA+B;AACpH;AAEO,MAAM,6BAA6B;AAAA;AAAA,EAExC,UAAU,UAAU,KAAK,WAAW,YAAY,WAAW;AAC7D;AAEO,MAAM,0BAA0B;AAAA;AAAA,EAErC,UAAU,UAAU,KAAK,YAAY,4CAA4C;AAAA;AAAA,EAEjF,SAAS,UAAU,KAAK,YAAY,eAAe;AAAA;AAAA,EAEnD,WAAW,UAAU,KAAK,YAAY,kBAAkB;AAC1D;",
+  "names": []
+}

package/dist/esm/toast.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { toast as toastifyToast } from "react-toastify";
+import { DSToastContent } from "./parts/DSToastContent.js";
+const toast = Object.assign(
+  ({ type, messageTitle, messageText, ...rest }, options) => toastifyToast(/* @__PURE__ */ jsx(DSToastContent, { messageText, messageTitle, type }), {
+    ...rest,
+    ...options,
+    type
+  }),
+  { ...toastifyToast, isActive: (id) => toastifyToast.isActive(id) }
+);
+export {
+  toast
+};
+//# sourceMappingURL=toast.js.map

package/dist/esm/toast.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/toast.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { ToastOptions } from 'react-toastify';\nimport { toast as toastifyToast } from 'react-toastify';\nimport type { DSToastContentProps } from './parts/DSToastContent.js';\nimport { DSToastContent } from './parts/DSToastContent.js';\n\nconst toast = Object.assign(\n  ({ type, messageTitle, messageText, ...rest }: DSToastContentProps, options: ToastOptions) =>\n    toastifyToast(<DSToastContent messageText={messageText} messageTitle={messageTitle} type={type} />, {\n      ...rest,\n      ...options,\n      type,\n    }),\n  { ...toastifyToast, isActive: (id: string | number) => toastifyToast.isActive(id) },\n);\n\nexport { toast };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACQL;AANlB,SAAS,SAAS,qBAAqB;AAEvC,SAAS,sBAAsB;AAE/B,MAAM,QAAQ,OAAO;AAAA,EACnB,CAAC,EAAE,MAAM,cAAc,aAAa,GAAG,KAAK,GAAwB,YAClE,cAAc,oBAAC,kBAAe,aAA0B,cAA4B,MAAY,GAAI;AAAA,IAClG,GAAG;AAAA,IACH,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AAAA,EACH,EAAE,GAAG,eAAe,UAAU,CAAC,OAAwB,cAAc,SAAS,EAAE,EAAE;AACpF;",
+  "names": []
+}

package/dist/types/DSToastDefinitions.d.ts

@@ -0,0 +1,23 @@
+export declare const DSToastName = "DSToast";
+export declare const DSToastActionLinkName = "DSToastActionLink";
+export declare const DSToastActionName = "DSToastAction";
+export declare const DSToastSlots: {
+    ROOT: string;
+    CLOSE_BUTTON: string;
+    CONTAINER: string;
+    ICON_CONTAINER: string;
+    MESSAGE_CONTENT: string;
+    MESSAGE_HEADER: string;
+    MESSAGE_TEXT: string;
+};
+export declare const DSToastActionSlots: {
+    ROOT: string;
+};
+export declare const DSToastActionLinkSlots: {
+    ROOT: string;
+};
+export declare const DSToastDataTestIds: {
+    CONTAINER: string;
+};
+export declare const DSToastActionDataTestIds: Record<string, string>;
+export declare const DSToastActionLinkDataTestIds: Record<string, string>;

package/dist/types/config/useToast.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { DSToastT } from '../react-desc-prop-types.js';
+export declare const useToast: (props: DSToastT.Props) => {
+    propsWithDefault: DSToastT.InternalProps;
+    toastifyWrapperRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    globalAttributes: import("@elliemae/ds-legacy-props-helpers").GlobalAttributesT<Element>;
+    xstyledAttributes: import("@elliemae/ds-legacy-props-helpers").XstyledProps;
+};

package/dist/types/constants.d.ts

@@ -0,0 +1,31 @@
+export declare const ToastPosition: {
+    readonly TOP_RIGHT: "top-right";
+    readonly TOP_CENTER: "top-center";
+    readonly TOP_LEFT: "top-left";
+    readonly BOTTOM_RIGHT: "bottom-right";
+    readonly BOTTOM_CENTER: "bottom-center";
+    readonly BOTTOM_LEFT: "bottom-left";
+};
+export declare const toastsPositions: readonly ["top-right", "top-center", "top-left", "bottom-right", "bottom-center", "bottom-left"];
+export declare const ToastType: {
+    readonly INFO: "info";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
+    readonly DEFAULT: "default";
+};
+export declare const toastTypes: readonly ["info", "success", "warning", "error", "default"];
+export declare const TYPE_TO_ICON: {
+    readonly success: (props: import("@elliemae/ds-legacy-icons").SvgIconT.Props) => import("react/jsx-runtime").JSX.Element;
+    readonly warning: (props: import("@elliemae/ds-legacy-icons").SvgIconT.Props) => import("react/jsx-runtime").JSX.Element;
+    readonly info: (rest: import("@elliemae/ds-legacy-icons").SvgIconT.Props) => import("react/jsx-runtime").JSX.Element;
+    readonly error: (props: import("@elliemae/ds-legacy-icons").SvgIconT.Props) => import("react/jsx-runtime").JSX.Element;
+    readonly default: () => null;
+};
+export declare const TYPE_TO_ICON_COLOR: {
+    readonly success: readonly ["success", "900"];
+    readonly warning: readonly ["warning", "900"];
+    readonly info: readonly ["brand-primary", "400"];
+    readonly error: readonly ["danger", "900"];
+    readonly default: readonly ["neutral", "400"];
+};

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+export { DSToast, DSToastWithSchema } from './parts/DSToast.js';
+export { toast } from './toast.js';
+export { ToastType, toastTypes, ToastPosition, toastsPositions } from './constants.js';
+export { DSToastAction, DSToastActionWithSchema } from './parts/DSToastAction.js';
+export { DSToastActionLink, DSToastActionLinkWithSchema } from './parts/DSToastActionLink.js';
+export { DSToastName, DSToastActionName, DSToastActionLinkName, DSToastSlots, DSToastActionSlots, DSToastActionLinkSlots, DSToastDataTestIds, DSToastActionDataTestIds, DSToastActionLinkDataTestIds, } from './DSToastDefinitions.js';
+export { default } from './parts/DSToast.js';

package/dist/types/parts/CloseButton.d.ts

@@ -0,0 +1,8 @@
+import type { DSToastT } from '../react-desc-prop-types.js';
+interface CloseButtonProps {
+    closeToast: () => void;
+}
+export declare const CloseButton: ({ closeButtonRef }: {
+    closeButtonRef: DSToastT.Props['closeButtonRef'];
+}) => ({ closeToast }: CloseButtonProps) => import("react/jsx-runtime.js").JSX.Element;
+export {};

package/dist/types/parts/DSToast.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { DSToastT } from '../react-desc-prop-types.js';
+declare const DSToast: React.ComponentType<DSToastT.Props>;
+declare const DSToastWithSchema: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSToastT.Props>;
+export { DSToast, DSToastWithSchema };
+export default DSToast;

package/dist/types/parts/DSToastAction.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { DSToastT } from '../react-desc-prop-types.js';
+declare const DSToastAction: React.ComponentType<DSToastT.ActionProps>;
+declare const DSToastActionWithSchema: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSToastT.ActionProps>;
+export { DSToastAction, DSToastActionWithSchema };

package/dist/types/parts/DSToastContent.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SvgIconT } from '@elliemae/ds-legacy-icons';
+import type { DSToastT } from '../react-desc-prop-types.js';
+export declare const getIconByToastType: (type: DSToastT.ToastTypes) => ((props: SvgIconT.Props) => import("react/jsx-runtime.js").JSX.Element) | ((props: SvgIconT.Props) => import("react/jsx-runtime.js").JSX.Element) | ((rest: SvgIconT.Props) => import("react/jsx-runtime.js").JSX.Element) | ((props: SvgIconT.Props) => import("react/jsx-runtime.js").JSX.Element) | (() => null);
+export declare const getIconColorByToastType: (type: DSToastT.ToastTypes) => SvgIconT.ColorType;
+export interface DSToastContentProps {
+    type?: DSToastT.ToastTypes;
+    messageTitle?: string;
+    messageText?: string;
+}
+export declare const DSToastContent: React.ComponentType<DSToastContentProps>;

package/dist/types/react-desc-prop-types.d.ts

@@ -0,0 +1,42 @@
+import type React from 'react';
+import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-legacy-props-helpers';
+import { toastsPositions } from './constants.js';
+import type { toastTypes } from './constants.js';
+export declare namespace DSToastT {
+    type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & Omit<XstyledProps, keyof D | keyof R | keyof O>;
+    type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & Omit<XstyledProps, keyof D | keyof R | keyof O>;
+    type ToastPositions = (typeof toastsPositions)[number];
+    type ToastTypes = (typeof toastTypes)[number];
+    interface DefaultProps {
+        containerProps: Record<string, unknown>;
+        position: ToastPositions;
+        autoClose: number;
+        showProgressBar: boolean;
+        closeOnClick: boolean;
+        enableMultiContainer: boolean;
+    }
+    interface OptionalProps {
+        containerId?: string | number;
+        closeButtonRef?: React.MutableRefObject<HTMLButtonElement | null>;
+    }
+    interface RequiredProps {
+    }
+    type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;
+    type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;
+    interface ActionDefaultProps {
+    }
+    interface ActionOptionalProps {
+        onClick?: React.MouseEventHandler;
+        onKeyDown?: React.KeyboardEventHandler;
+    }
+    interface ActionRequiredProps {
+        children: React.ReactNode;
+    }
+    type ActionProps = PropsT<ActionDefaultProps, ActionRequiredProps, ActionOptionalProps, HTMLDivElement>;
+    type ActionInternalProps = InternalPropsT<ActionDefaultProps, ActionRequiredProps, ActionOptionalProps, HTMLDivElement>;
+}
+export declare const defaultProps: DSToastT.DefaultProps;
+export declare const actionDefaultProps: DSToastT.ActionDefaultProps;
+export declare const DSToastPropTypes: React.WeakValidationMap<unknown>;
+export declare const DSToastActionLinkPropTypes: React.WeakValidationMap<unknown>;
+export declare const DSToastActionPropsTypes: React.WeakValidationMap<unknown>;

package/dist/types/tests/toast-axe.test.d.ts

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

package/dist/types/tests/toast-render.test.d.ts

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