@elliemae/ds-toast 3.17.0-next.2 → 3.17.0-next.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/parts/styled.js +1 -0
- package/dist/cjs/parts/styled.js.map +2 -2
- package/dist/esm/parts/styled.js +1 -0
- package/dist/esm/parts/styled.js.map +2 -2
- package/dist/types/constants.d.ts +4 -4
- package/dist/types/parts/CloseButton.d.ts +1 -1
- package/dist/types/parts/DSToastContent.d.ts +1 -1
- package/package.json +6 -6
- package/dist/types/parts/DSToastActionLink.d.ts +0 -12
- package/dist/types/parts/styled.d.ts +0 -10
package/dist/cjs/parts/styled.js
CHANGED
|
@@ -182,6 +182,7 @@ const ToastifyWrapper = (0, import_ds_system.styled)("div", { name: import_DSToa
|
|
|
182
182
|
background-color: neutral-000;
|
|
183
183
|
border-left: 5px solid;
|
|
184
184
|
box-shadow: 0 4px 10px 1px neutral-400;
|
|
185
|
+
margin-bottom: ${import_ds_system.th.space("xxs")};
|
|
185
186
|
&--rtl {
|
|
186
187
|
direction: rtl;
|
|
187
188
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/styled.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { styled, th, xStyledCommonProps } from '@elliemae/ds-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 &--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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA2B;AAC3B,uBAA+C;AAC/C,gCAOO;AAEA,MAAM,iBAAa,yBAAO,QAAQ,EAAE,MAAM,iDAAuB,MAAM,iDAAuB,KAAK,CAAC;AAAA;AAAA,IAEvG;AAAA;AAGG,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,uCAAa,MAAM,uCAAa,UAAU,CAAC;AAAA;AAAA,aAEnF,oBAAG,MAAM,KAAK;AAAA,mBACR,oBAAG,MAAM,GAAG;AAAA;AAGxB,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,uCAAa,MAAM,uCAAa,eAAe,CAAC;AAAA,gBACzF,oBAAG,MAAM,MAAM;AAAA,kBACb,oBAAG,MAAM,KAAK;AAAA;AAGzB,MAAM,2BAAuB,yBAAO,OAAO,EAAE,MAAM,uCAAa,MAAM,uCAAa,gBAAgB,CAAC;AAAA;AAAA;AAIpG,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,uCAAa,MAAM,uCAAa,eAAe,CAAC;AAAA,gBACzF,oBAAG,MAAM,MAAM;AAAA,mBACZ,oBAAG,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,uCAAa,MAAM,uCAAa,aAAa,CAAC;AAAA;AAAA;AAAA;AAK/F,MAAM,mBAAe,yBAAO,OAAO,EAAE,MAAM,6CAAmB,MAAM,6CAAmB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBhG;AAAA;AAGG,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,uCAAa,MAAM,uCAAa,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,UAK3F,oBAAG,MAAM,aAAa;AAAA;AAGzB,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,uCAAa,MAAM,uCAAa,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;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,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { styled, th, xStyledCommonProps } from '@elliemae/ds-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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA2B;AAC3B,uBAA+C;AAC/C,gCAOO;AAEA,MAAM,iBAAa,yBAAO,QAAQ,EAAE,MAAM,iDAAuB,MAAM,iDAAuB,KAAK,CAAC;AAAA;AAAA,IAEvG;AAAA;AAGG,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,uCAAa,MAAM,uCAAa,UAAU,CAAC;AAAA;AAAA,aAEnF,oBAAG,MAAM,KAAK;AAAA,mBACR,oBAAG,MAAM,GAAG;AAAA;AAGxB,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,uCAAa,MAAM,uCAAa,eAAe,CAAC;AAAA,gBACzF,oBAAG,MAAM,MAAM;AAAA,kBACb,oBAAG,MAAM,KAAK;AAAA;AAGzB,MAAM,2BAAuB,yBAAO,OAAO,EAAE,MAAM,uCAAa,MAAM,uCAAa,gBAAgB,CAAC;AAAA;AAAA;AAIpG,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,uCAAa,MAAM,uCAAa,eAAe,CAAC;AAAA,gBACzF,oBAAG,MAAM,MAAM;AAAA,mBACZ,oBAAG,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,uCAAa,MAAM,uCAAa,aAAa,CAAC;AAAA;AAAA;AAAA;AAK/F,MAAM,mBAAe,yBAAO,OAAO,EAAE,MAAM,6CAAmB,MAAM,6CAAmB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBhG;AAAA;AAGG,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,uCAAa,MAAM,uCAAa,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,UAK3F,oBAAG,MAAM,aAAa;AAAA;AAGzB,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,uCAAa,MAAM,uCAAa,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,oBAAG,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/styled.js
CHANGED
|
@@ -148,6 +148,7 @@ const ToastifyWrapper = styled("div", { name: DSToastName, slot: DSToastSlots.RO
|
|
|
148
148
|
background-color: neutral-000;
|
|
149
149
|
border-left: 5px solid;
|
|
150
150
|
box-shadow: 0 4px 10px 1px neutral-400;
|
|
151
|
+
margin-bottom: ${th.space("xxs")};
|
|
151
152
|
&--rtl {
|
|
152
153
|
direction: rtl;
|
|
153
154
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styled.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { styled, th, xStyledCommonProps } from '@elliemae/ds-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 &--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"],
|
|
5
|
-
"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;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,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { styled, th, xStyledCommonProps } from '@elliemae/ds-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"],
|
|
5
|
+
"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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,10 +16,10 @@ export declare const ToastType: {
|
|
|
16
16
|
};
|
|
17
17
|
export declare const toastTypes: readonly ["info", "success", "warning", "error", "default"];
|
|
18
18
|
export declare const TYPE_TO_ICON: {
|
|
19
|
-
readonly success: (props:
|
|
20
|
-
readonly warning: (props: import("@elliemae/ds-icons").SvgIconT.Props) => JSX.Element;
|
|
21
|
-
readonly info: (rest:
|
|
22
|
-
readonly error: (props: import("@elliemae/ds-icons").SvgIconT.Props) => JSX.Element;
|
|
19
|
+
readonly success: (props: import("@elliemae/ds-icons").SvgIconT.Props) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
readonly warning: (props: import("@elliemae/ds-icons").SvgIconT.Props) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
readonly info: (rest: import("@elliemae/ds-icons").SvgIconT.Props) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
readonly error: (props: import("@elliemae/ds-icons").SvgIconT.Props) => import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
readonly default: () => null;
|
|
24
24
|
};
|
|
25
25
|
export declare const TYPE_TO_ICON_COLOR: {
|
|
@@ -4,5 +4,5 @@ interface CloseButtonProps {
|
|
|
4
4
|
}
|
|
5
5
|
export declare const CloseButton: ({ closeButtonRef }: {
|
|
6
6
|
closeButtonRef: DSToastT.Props['closeButtonRef'];
|
|
7
|
-
}) => ({ closeToast }: CloseButtonProps) => JSX.Element;
|
|
7
|
+
}) => ({ closeToast }: CloseButtonProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
8
8
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { SvgIconT } from '@elliemae/ds-icons';
|
|
3
3
|
import type { DSToastT } from '../react-desc-prop-types.js';
|
|
4
|
-
export declare const getIconByToastType: (type: DSToastT.ToastTypes) => ((props:
|
|
4
|
+
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);
|
|
5
5
|
export declare const getIconColorByToastType: (type: DSToastT.ToastTypes) => SvgIconT.ColorType;
|
|
6
6
|
export interface DSToastContentProps {
|
|
7
7
|
type?: DSToastT.ToastTypes;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-toast",
|
|
3
|
-
"version": "3.17.0-next.
|
|
3
|
+
"version": "3.17.0-next.20",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Toast",
|
|
6
6
|
"files": [
|
|
@@ -60,12 +60,12 @@
|
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
62
|
"@xstyled/system": "~3.7.3",
|
|
63
|
-
"
|
|
63
|
+
"@xstyled/util": "3.7.0",
|
|
64
64
|
"react-toastify": "~6.2.0",
|
|
65
|
-
"@elliemae/ds-button-v2": "3.17.0-next.
|
|
66
|
-
"@elliemae/ds-
|
|
67
|
-
"@elliemae/ds-
|
|
68
|
-
"@elliemae/ds-system": "3.17.0-next.
|
|
65
|
+
"@elliemae/ds-button-v2": "3.17.0-next.20",
|
|
66
|
+
"@elliemae/ds-props-helpers": "3.17.0-next.20",
|
|
67
|
+
"@elliemae/ds-icons": "3.17.0-next.20",
|
|
68
|
+
"@elliemae/ds-system": "3.17.0-next.20"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"@testing-library/jest-dom": "~5.16.5",
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const DSToastActionLink: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").SpaceProps & import("@xstyled/system").BoxShadowProps<import("@xstyled/system").Theme> & import("@xstyled/system").FlexboxesProps<import("@xstyled/system").Theme> & import("@xstyled/system").LayoutProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").ColorProps, never>;
|
|
3
|
-
export declare const DSToastActionLinkWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
|
|
4
|
-
[x: string]: any;
|
|
5
|
-
[x: number]: any;
|
|
6
|
-
[x: symbol]: any;
|
|
7
|
-
} & {
|
|
8
|
-
theme?: import("@elliemae/ds-system").Theme | undefined;
|
|
9
|
-
} & {
|
|
10
|
-
as?: string | import("react").ComponentType<any> | undefined;
|
|
11
|
-
forwardedAs?: string | import("react").ComponentType<any> | undefined;
|
|
12
|
-
}>;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const StyledLink: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").SpaceProps & import("@xstyled/system").BoxShadowProps<import("@xstyled/system").Theme> & import("@xstyled/system").FlexboxesProps<import("@xstyled/system").Theme> & import("@xstyled/system").LayoutProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").ColorProps, never>;
|
|
3
|
-
export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, Record<string, unknown>, never>;
|
|
4
|
-
export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, Record<string, unknown>, never>;
|
|
5
|
-
export declare const StyledMessageContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object, never>;
|
|
6
|
-
export declare const StyledMessageHeader: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, Record<string, unknown>, never>;
|
|
7
|
-
export declare const StyledMessageText: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object, never>;
|
|
8
|
-
export declare const StyledAction: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").SpaceProps & import("@xstyled/system").BoxShadowProps<import("@xstyled/system").Theme> & import("@xstyled/system").FlexboxesProps<import("@xstyled/system").Theme> & import("@xstyled/system").LayoutProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").ColorProps, never>;
|
|
9
|
-
export declare const StyledButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonT.Props>, import("@elliemae/ds-system").Theme, import("@elliemae/ds-system").PropsWithTheme<Record<string, unknown>>, never>;
|
|
10
|
-
export declare const ToastifyWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").SpaceProps & import("@xstyled/system").BoxShadowProps<import("@xstyled/system").Theme> & import("@xstyled/system").FlexboxesProps<import("@xstyled/system").Theme> & import("@xstyled/system").LayoutProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").ColorProps, never>;
|