@razorpay/blade 11.2.1 → 11.3.1

package/build/lib/native/components/Toast/Toast.native.js

@@ -0,0 +1,7 @@
+import { throwBladeError } from '../../utils/logger/logger.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var Toast=function Toast(_props){throwBladeError({message:'Toast is not yet implemented for native',moduleName:'Toast'});return jsx(Fragment,{});};
+
+export { Toast };
+//# sourceMappingURL=Toast.native.js.map

package/build/lib/native/components/Toast/Toast.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.native.js","sources":["../../../../../src/components/Toast/Toast.native.tsx"],"sourcesContent":["import type { ToastProps } from './types';\nimport { throwBladeError } from '~utils/logger';\n\nconst Toast = (\n  _props: ToastProps & {\n    isVisible?: boolean;\n  },\n): React.ReactElement => {\n  throwBladeError({\n    message: 'Toast is not yet implemented for native',\n    moduleName: 'Toast',\n  });\n\n  return <></>;\n};\n\nexport { Toast };\n"],"names":["Toast","_props","throwBladeError","message","moduleName","_jsx","_Fragment"],"mappings":";;;AAGM,IAAAA,KAAK,CAAG,SAARA,KAAKA,CACTC,MAEC,CACsB,CACvBC,eAAe,CAAC,CACdC,OAAO,CAAE,yCAAyC,CAClDC,UAAU,CAAE,OACd,CAAC,CAAC,CAEF,OAAOC,GAAA,CAAAC,QAAA,CAAA,EAAI,CAAC,CACd;;;;"}

package/build/lib/native/components/Toast/ToastContainer.native.js

@@ -0,0 +1,7 @@
+import { throwBladeError } from '../../utils/logger/logger.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var ToastContainer=function ToastContainer(){throwBladeError({message:'ToastContainer is not yet implemented for native',moduleName:'ToastContainer'});return jsx(Fragment,{});};
+
+export { ToastContainer };
+//# sourceMappingURL=ToastContainer.native.js.map

package/build/lib/native/components/Toast/ToastContainer.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContainer.native.js","sources":["../../../../../src/components/Toast/ToastContainer.native.tsx"],"sourcesContent":["import { throwBladeError } from '~utils/logger';\n\nconst ToastContainer = (): React.ReactElement => {\n  throwBladeError({\n    message: 'ToastContainer is not yet implemented for native',\n    moduleName: 'ToastContainer',\n  });\n\n  return <></>;\n};\n\nexport { ToastContainer };\n"],"names":["ToastContainer","throwBladeError","message","moduleName","_jsx","_Fragment"],"mappings":";;;AAEM,IAAAA,cAAc,CAAG,SAAjBA,cAAcA,EAA6B,CAC/CC,eAAe,CAAC,CACdC,OAAO,CAAE,kDAAkD,CAC3DC,UAAU,CAAE,gBACd,CAAC,CAAC,CAEF,OAAOC,GAAA,CAAAC,QAAA,CAAA,EAAI,CAAC,CACd;;;;"}

package/build/lib/native/components/Toast/useToast.js

@@ -0,0 +1,9 @@
+import toast, { useToasterStore } from 'react-hot-toast';
+import { Toast } from './Toast.native.js';
+import { logger } from '../../utils/logger/logger.js';
+import { jsx } from 'react/jsx-runtime';
+
+var useToast=function useToast(){var _useToasterStore=useToasterStore(),toasts=_useToasterStore.toasts;var show=function show(props){var _props$type;props.type=(_props$type=props.type)!=null?_props$type:'informational';if(toasts.find(function(t){return t.type==='promotional';})&&props.type==='promotional'){if(__DEV__){logger({message:'There can only be one promotional toast at a time',type:'warn',moduleName:'Toast'});}return '';}var isPromoToast=props.type==='promotional';if(props.autoDismiss===undefined){props.autoDismiss=!isPromoToast;}if(props.duration===undefined){if(isPromoToast){props.duration=8000;}else {props.duration=4000;}}if(!props.autoDismiss){props.duration=Infinity;}return toast.custom(function(_ref){var visible=_ref.visible,id=_ref.id;return jsx(Toast,Object.assign({},props,{id:id,isVisible:visible}));},props);};return {toasts:toasts,show:show,dismiss:toast.dismiss};};
+
+export { useToast };
+//# sourceMappingURL=useToast.js.map

package/build/lib/native/components/Toast/useToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.js","sources":["../../../../../src/components/Toast/useToast.tsx"],"sourcesContent":["import type { Toast } from 'react-hot-toast';\nimport toast, { useToasterStore } from 'react-hot-toast';\nimport type { ToastProps } from './types';\nimport { Toast as ToastComponent } from './Toast';\nimport { logger } from '~utils/logger';\n\ntype BladeToast = Omit<Toast, 'type'> & ToastProps;\ntype UseToastReturn = {\n  toasts: BladeToast[];\n  show: (props: ToastProps) => string;\n  dismiss: (id?: string) => void;\n};\n\nconst useToast = (): UseToastReturn => {\n  const { toasts } = useToasterStore();\n  const show = (props: ToastProps): string => {\n    props.type = props.type ?? 'informational';\n\n    // Do not show promotional toasts if there is already one\n    if (\n      toasts.find((t) => {\n        // @ts-expect-error - react-hot-toast doesn't recognize our promotional type\n        return t.type === 'promotional';\n      }) &&\n      props.type === 'promotional'\n    ) {\n      if (__DEV__) {\n        logger({\n          message: 'There can only be one promotional toast at a time',\n          type: 'warn',\n          moduleName: 'Toast',\n        });\n      }\n      return '';\n    }\n\n    const isPromoToast = props.type === 'promotional';\n    if (props.autoDismiss === undefined) {\n      // Promotional toasts should not auto dismiss\n      props.autoDismiss = !isPromoToast;\n    }\n\n    if (props.duration === undefined) {\n      // Set default durations\n      if (isPromoToast) {\n        props.duration = 8000;\n      } else {\n        props.duration = 4000;\n      }\n    }\n\n    // If autoDismiss is false, set duration to infinity\n    if (!props.autoDismiss) {\n      props.duration = Infinity;\n    }\n\n    return toast.custom(({ visible, id }) => {\n      return <ToastComponent {...props} id={id} isVisible={visible} />;\n    }, props);\n  };\n\n  return {\n    toasts: (toasts as unknown) as BladeToast[],\n    show,\n    dismiss: toast.dismiss,\n  };\n};\n\nexport type { UseToastReturn };\nexport { useToast };\n"],"names":["useToast","_useToasterStore","useToasterStore","toasts","show","props","_props$type","type","find","t","__DEV__","logger","message","moduleName","isPromoToast","autoDismiss","undefined","duration","Infinity","toast","custom","_ref","visible","id","_jsx","ToastComponent","Object","assign","isVisible","dismiss"],"mappings":";;;;;AAaM,IAAAA,QAAQ,CAAG,SAAXA,QAAQA,EAAyB,CACrC,IAAAC,gBAAA,CAAmBC,eAAe,EAAE,CAA5BC,MAAM,CAAAF,gBAAA,CAANE,MAAM,CACd,IAAMC,IAAI,CAAG,SAAPA,IAAIA,CAAIC,KAAiB,CAAa,CAAAC,IAAAA,WAAA,CAC1CD,KAAK,CAACE,IAAI,CAAAD,CAAAA,WAAA,CAAGD,KAAK,CAACE,IAAI,GAAA,IAAA,CAAAD,WAAA,CAAI,eAAe,CAG1C,GACEH,MAAM,CAACK,IAAI,CAAC,SAACC,CAAC,CAAK,CAEjB,OAAOA,CAAC,CAACF,IAAI,GAAK,aAAa,CACjC,CAAC,CAAC,EACFF,KAAK,CAACE,IAAI,GAAK,aAAa,CAC5B,CACA,GAAIG,OAAO,CAAE,CACXC,MAAM,CAAC,CACLC,OAAO,CAAE,mDAAmD,CAC5DL,IAAI,CAAE,MAAM,CACZM,UAAU,CAAE,OACd,CAAC,CAAC,CACJ,CACA,OAAO,EAAE,CACX,CAEA,IAAMC,YAAY,CAAGT,KAAK,CAACE,IAAI,GAAK,aAAa,CACjD,GAAIF,KAAK,CAACU,WAAW,GAAKC,SAAS,CAAE,CAEnCX,KAAK,CAACU,WAAW,CAAG,CAACD,YAAY,CACnC,CAEA,GAAIT,KAAK,CAACY,QAAQ,GAAKD,SAAS,CAAE,CAEhC,GAAIF,YAAY,CAAE,CAChBT,KAAK,CAACY,QAAQ,CAAG,IAAI,CACvB,CAAC,KAAM,CACLZ,KAAK,CAACY,QAAQ,CAAG,IAAI,CACvB,CACF,CAGA,GAAI,CAACZ,KAAK,CAACU,WAAW,CAAE,CACtBV,KAAK,CAACY,QAAQ,CAAGC,QAAQ,CAC3B,CAEA,OAAOC,KAAK,CAACC,MAAM,CAAC,SAAAC,IAAA,CAAqB,CAAA,IAAlBC,OAAO,CAAAD,IAAA,CAAPC,OAAO,CAAEC,EAAE,CAAAF,IAAA,CAAFE,EAAE,CAChC,OAAOC,GAAA,CAACC,KAAc,CAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,CAAKtB,KAAK,CAAA,CAAEkB,EAAE,CAAEA,EAAG,CAACK,SAAS,CAAEN,OAAQ,CAAE,CAAA,CAAC,CAClE,CAAC,CAAEjB,KAAK,CAAC,CACX,CAAC,CAED,OAAO,CACLF,MAAM,CAAGA,MAAkC,CAC3CC,IAAI,CAAJA,IAAI,CACJyB,OAAO,CAAEV,KAAK,CAACU,OACjB,CAAC,CACH;;;;"}

package/build/lib/native/components/index.js

@@ -344,6 +344,8 @@ export { TabPanel } from './Tabs/TabPanel.native.js';
 export { Tag } from './Tag/Tag.js';
 export { Tooltip } from './Tooltip/Tooltip.native.js';
 export { TooltipInteractiveWrapper } from './Tooltip/TooltipInteractiveWrapper.native.js';
+export { ToastContainer } from './Toast/ToastContainer.native.js';
+export { useToast } from './Toast/useToast.js';
 export { Heading } from './Typography/Heading/Heading.js';
 export { Text, getTextProps } from './Typography/Text/Text.js';
 export { Code } from './Typography/Code/Code.js';

package/build/lib/native/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/lib/native/utils/metaAttribute/metaConstants.js

@@ -1,4 +1,4 @@
-var MetaConstants={Accordion:'accordion',AccordionButton:'accordion-button',AccordionItem:'accordion-item',ActionList:'action-list',ActionListItem:'action-list-item',ActionListSection:'action-list-section',Alert:'alert',Amount:'amount',AutoComplete:'autocomplete',Badge:'badge',Box:'box',BaseBox:'base-box',BaseText:'base-text',Button:'button',Carousel:'carousel',Checkbox:'checkbox',CheckboxGroup:'checkbox-group',CheckboxLabel:'checkbox-label',Chip:'chip',ChipGroup:'chip-group',ChipLabel:'chip-label',Code:'code',Component:'blade-component',Counter:'counter',Display:'display',Divider:'divider',Dropdown:'dropdown',DropdownOverlay:'dropdown-overlay',DropdownFooter:'dropdown-footer',DropdownHeader:'dropdown-header',Icon:'icon',IconButton:'icon-button',Indicator:'indicator',Link:'link',List:'list',ListItem:'list-item',ListItemCode:'list-item-code',ListItemLink:'list-item-link',ListItemText:'list-item-text',OTPInput:'otp-input',PasswordInput:'password-input',TextArea:'textarea',TextInput:'textinput',ProgressBar:'progress-bar',Radio:'radio',RadioGroup:'radio-group',RadioLabel:'radio-label',SkipNav:'skipnav',Spinner:'spinner',SelectInput:'select-input',Tag:'tag',Tooltip:'tooltip',TooltipInteractiveWrapper:'tooltip-interactive-wrapper',Tabs:'tabs',TabList:'tab-list',TabItem:'tab-item',TabPanel:'tab-panel',TabIndicator:'tab-indicator',Table:'table',TableBody:'table-body',TableRow:'table-row',TableCell:'table-cell',TableHeader:'table-header',TableHeaderRow:'table-header-row',TableHeaderCell:'table-header-cell',TableFooter:'table-footer',TableFooterRow:'table-footer-row',TableFooterCell:'table-footer-cell',TableElement:'table-element',TourPopover:'tour-popover',TourMask:'tour-mask',Popover:'popover',PopoverInteractiveWrapper:'popover-interactive-wrapper',BottomSheet:'bottom-sheet',BottomSheetBody:'bottom-sheet-body',BottomSheetHeader:'bottom-sheet-header',BottomSheetFooter:'bottom-sheet-footer',BottomSheetGrabHandle:'bottomsheet-grab-handle',Card:'card',CardBody:'card-body',CardHeader:'card-header',CardFooter:'card-footer',Collapsible:'collapsible',CollapsibleBody:'collapsible-body',CollapsibleButton:'collapsible-button',CollapsibleLink:'collapsible-link',Modal:'modal',ModalBody:'modal-body',ModalHeader:'modal-header',ModalFooter:'modal-footer',ModalBackdrop:'modal-backdrop',ModalScrollOverlay:'modal-scroll-overlay',VisuallyHidden:'visually-hidden',FormLabel:'form-label',Switch:'switch',SwitchLabel:'switch-label',StyledBaseInput:'styled-base-input',Skeleton:'skeleton'};
+var MetaConstants={Accordion:'accordion',AccordionButton:'accordion-button',AccordionItem:'accordion-item',ActionList:'action-list',ActionListItem:'action-list-item',ActionListSection:'action-list-section',Alert:'alert',Amount:'amount',AutoComplete:'autocomplete',Badge:'badge',Box:'box',BaseBox:'base-box',BaseText:'base-text',Button:'button',Carousel:'carousel',Checkbox:'checkbox',CheckboxGroup:'checkbox-group',CheckboxLabel:'checkbox-label',Chip:'chip',ChipGroup:'chip-group',ChipLabel:'chip-label',Code:'code',Component:'blade-component',Counter:'counter',Display:'display',Divider:'divider',Dropdown:'dropdown',DropdownOverlay:'dropdown-overlay',DropdownFooter:'dropdown-footer',DropdownHeader:'dropdown-header',Icon:'icon',IconButton:'icon-button',Indicator:'indicator',Link:'link',List:'list',ListItem:'list-item',ListItemCode:'list-item-code',ListItemLink:'list-item-link',ListItemText:'list-item-text',OTPInput:'otp-input',PasswordInput:'password-input',TextArea:'textarea',TextInput:'textinput',Toast:'toast',ToastContainer:'toast-container',ProgressBar:'progress-bar',Radio:'radio',RadioGroup:'radio-group',RadioLabel:'radio-label',SkipNav:'skipnav',Spinner:'spinner',SelectInput:'select-input',Tag:'tag',Tooltip:'tooltip',TooltipInteractiveWrapper:'tooltip-interactive-wrapper',Tabs:'tabs',TabList:'tab-list',TabItem:'tab-item',TabPanel:'tab-panel',TabIndicator:'tab-indicator',Table:'table',TableBody:'table-body',TableRow:'table-row',TableCell:'table-cell',TableHeader:'table-header',TableHeaderRow:'table-header-row',TableHeaderCell:'table-header-cell',TableFooter:'table-footer',TableFooterRow:'table-footer-row',TableFooterCell:'table-footer-cell',TableElement:'table-element',TourPopover:'tour-popover',TourMask:'tour-mask',Popover:'popover',PopoverInteractiveWrapper:'popover-interactive-wrapper',BottomSheet:'bottom-sheet',BottomSheetBody:'bottom-sheet-body',BottomSheetHeader:'bottom-sheet-header',BottomSheetFooter:'bottom-sheet-footer',BottomSheetGrabHandle:'bottomsheet-grab-handle',Card:'card',CardBody:'card-body',CardHeader:'card-header',CardFooter:'card-footer',Collapsible:'collapsible',CollapsibleBody:'collapsible-body',CollapsibleButton:'collapsible-button',CollapsibleLink:'collapsible-link',Modal:'modal',ModalBody:'modal-body',ModalHeader:'modal-header',ModalFooter:'modal-footer',ModalBackdrop:'modal-backdrop',ModalScrollOverlay:'modal-scroll-overlay',VisuallyHidden:'visually-hidden',FormLabel:'form-label',Switch:'switch',SwitchLabel:'switch-label',StyledBaseInput:'styled-base-input',Skeleton:'skeleton'};
 
 export { MetaConstants };
 //# sourceMappingURL=metaConstants.js.map

package/build/lib/native/utils/metaAttribute/metaConstants.js.map

@@ -1 +1 @@
-{"version":3,"file":"metaConstants.js","sources":["../../../../../src/utils/metaAttribute/metaConstants.ts"],"sourcesContent":["export const MetaConstants = {\n  Accordion: 'accordion',\n  AccordionButton: 'accordion-button',\n  AccordionItem: 'accordion-item',\n  ActionList: 'action-list',\n  ActionListItem: 'action-list-item',\n  ActionListSection: 'action-list-section',\n  Alert: 'alert',\n  Amount: 'amount',\n  AutoComplete: 'autocomplete',\n  Badge: 'badge',\n  Box: 'box',\n  BaseBox: 'base-box',\n  BaseText: 'base-text',\n  Button: 'button',\n  Carousel: 'carousel',\n  Checkbox: 'checkbox',\n  CheckboxGroup: 'checkbox-group',\n  CheckboxLabel: 'checkbox-label',\n  Chip: 'chip',\n  ChipGroup: 'chip-group',\n  ChipLabel: 'chip-label',\n  Code: 'code',\n  Component: 'blade-component',\n  Counter: 'counter',\n  Display: 'display',\n  Divider: 'divider',\n  Dropdown: 'dropdown',\n  DropdownOverlay: 'dropdown-overlay',\n  DropdownFooter: 'dropdown-footer',\n  DropdownHeader: 'dropdown-header',\n  Icon: 'icon',\n  IconButton: 'icon-button',\n  Indicator: 'indicator',\n  Link: 'link',\n  List: 'list',\n  ListItem: 'list-item',\n  ListItemCode: 'list-item-code',\n  ListItemLink: 'list-item-link',\n  ListItemText: 'list-item-text',\n  OTPInput: 'otp-input',\n  PasswordInput: 'password-input',\n  TextArea: 'textarea',\n  TextInput: 'textinput',\n  ProgressBar: 'progress-bar',\n  Radio: 'radio',\n  RadioGroup: 'radio-group',\n  RadioLabel: 'radio-label',\n  SkipNav: 'skipnav',\n  Spinner: 'spinner',\n  SelectInput: 'select-input',\n  Tag: 'tag',\n  Tooltip: 'tooltip',\n  TooltipInteractiveWrapper: 'tooltip-interactive-wrapper',\n  Tabs: 'tabs',\n  TabList: 'tab-list',\n  TabItem: 'tab-item',\n  TabPanel: 'tab-panel',\n  TabIndicator: 'tab-indicator',\n  Table: 'table',\n  TableBody: 'table-body',\n  TableRow: 'table-row',\n  TableCell: 'table-cell',\n  TableHeader: 'table-header',\n  TableHeaderRow: 'table-header-row',\n  TableHeaderCell: 'table-header-cell',\n  TableFooter: 'table-footer',\n  TableFooterRow: 'table-footer-row',\n  TableFooterCell: 'table-footer-cell',\n  TableElement: 'table-element',\n  TourPopover: 'tour-popover',\n  TourMask: 'tour-mask',\n  Popover: 'popover',\n  PopoverInteractiveWrapper: 'popover-interactive-wrapper',\n  BottomSheet: 'bottom-sheet',\n  BottomSheetBody: 'bottom-sheet-body',\n  BottomSheetHeader: 'bottom-sheet-header',\n  BottomSheetFooter: 'bottom-sheet-footer',\n  BottomSheetGrabHandle: 'bottomsheet-grab-handle',\n  Card: 'card',\n  CardBody: 'card-body',\n  CardHeader: 'card-header',\n  CardFooter: 'card-footer',\n  Collapsible: 'collapsible',\n  CollapsibleBody: 'collapsible-body',\n  CollapsibleButton: 'collapsible-button',\n  CollapsibleLink: 'collapsible-link',\n  Modal: 'modal',\n  ModalBody: 'modal-body',\n  ModalHeader: 'modal-header',\n  ModalFooter: 'modal-footer',\n  ModalBackdrop: 'modal-backdrop',\n  ModalScrollOverlay: 'modal-scroll-overlay',\n  VisuallyHidden: 'visually-hidden',\n  FormLabel: 'form-label',\n  Switch: 'switch',\n  SwitchLabel: 'switch-label',\n  StyledBaseInput: 'styled-base-input',\n  Skeleton: 'skeleton',\n} as const;\n"],"names":["MetaConstants","Accordion","AccordionButton","AccordionItem","ActionList","ActionListItem","ActionListSection","Alert","Amount","AutoComplete","Badge","Box","BaseBox","BaseText","Button","Carousel","Checkbox","CheckboxGroup","CheckboxLabel","Chip","ChipGroup","ChipLabel","Code","Component","Counter","Display","Divider","Dropdown","DropdownOverlay","DropdownFooter","DropdownHeader","Icon","IconButton","Indicator","Link","List","ListItem","ListItemCode","ListItemLink","ListItemText","OTPInput","PasswordInput","TextArea","TextInput","ProgressBar","Radio","RadioGroup","RadioLabel","SkipNav","Spinner","SelectInput","Tag","Tooltip","TooltipInteractiveWrapper","Tabs","TabList","TabItem","TabPanel","TabIndicator","Table","TableBody","TableRow","TableCell","TableHeader","TableHeaderRow","TableHeaderCell","TableFooter","TableFooterRow","TableFooterCell","TableElement","TourPopover","TourMask","Popover","PopoverInteractiveWrapper","BottomSheet","BottomSheetBody","BottomSheetHeader","BottomSheetFooter","BottomSheetGrabHandle","Card","CardBody","CardHeader","CardFooter","Collapsible","CollapsibleBody","CollapsibleButton","CollapsibleLink","Modal","ModalBody","ModalHeader","ModalFooter","ModalBackdrop","ModalScrollOverlay","VisuallyHidden","FormLabel","Switch","SwitchLabel","StyledBaseInput","Skeleton"],"mappings":"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"}
+{"version":3,"file":"metaConstants.js","sources":["../../../../../src/utils/metaAttribute/metaConstants.ts"],"sourcesContent":["export const MetaConstants = {\n  Accordion: 'accordion',\n  AccordionButton: 'accordion-button',\n  AccordionItem: 'accordion-item',\n  ActionList: 'action-list',\n  ActionListItem: 'action-list-item',\n  ActionListSection: 'action-list-section',\n  Alert: 'alert',\n  Amount: 'amount',\n  AutoComplete: 'autocomplete',\n  Badge: 'badge',\n  Box: 'box',\n  BaseBox: 'base-box',\n  BaseText: 'base-text',\n  Button: 'button',\n  Carousel: 'carousel',\n  Checkbox: 'checkbox',\n  CheckboxGroup: 'checkbox-group',\n  CheckboxLabel: 'checkbox-label',\n  Chip: 'chip',\n  ChipGroup: 'chip-group',\n  ChipLabel: 'chip-label',\n  Code: 'code',\n  Component: 'blade-component',\n  Counter: 'counter',\n  Display: 'display',\n  Divider: 'divider',\n  Dropdown: 'dropdown',\n  DropdownOverlay: 'dropdown-overlay',\n  DropdownFooter: 'dropdown-footer',\n  DropdownHeader: 'dropdown-header',\n  Icon: 'icon',\n  IconButton: 'icon-button',\n  Indicator: 'indicator',\n  Link: 'link',\n  List: 'list',\n  ListItem: 'list-item',\n  ListItemCode: 'list-item-code',\n  ListItemLink: 'list-item-link',\n  ListItemText: 'list-item-text',\n  OTPInput: 'otp-input',\n  PasswordInput: 'password-input',\n  TextArea: 'textarea',\n  TextInput: 'textinput',\n  Toast: 'toast',\n  ToastContainer: 'toast-container',\n  ProgressBar: 'progress-bar',\n  Radio: 'radio',\n  RadioGroup: 'radio-group',\n  RadioLabel: 'radio-label',\n  SkipNav: 'skipnav',\n  Spinner: 'spinner',\n  SelectInput: 'select-input',\n  Tag: 'tag',\n  Tooltip: 'tooltip',\n  TooltipInteractiveWrapper: 'tooltip-interactive-wrapper',\n  Tabs: 'tabs',\n  TabList: 'tab-list',\n  TabItem: 'tab-item',\n  TabPanel: 'tab-panel',\n  TabIndicator: 'tab-indicator',\n  Table: 'table',\n  TableBody: 'table-body',\n  TableRow: 'table-row',\n  TableCell: 'table-cell',\n  TableHeader: 'table-header',\n  TableHeaderRow: 'table-header-row',\n  TableHeaderCell: 'table-header-cell',\n  TableFooter: 'table-footer',\n  TableFooterRow: 'table-footer-row',\n  TableFooterCell: 'table-footer-cell',\n  TableElement: 'table-element',\n  TourPopover: 'tour-popover',\n  TourMask: 'tour-mask',\n  Popover: 'popover',\n  PopoverInteractiveWrapper: 'popover-interactive-wrapper',\n  BottomSheet: 'bottom-sheet',\n  BottomSheetBody: 'bottom-sheet-body',\n  BottomSheetHeader: 'bottom-sheet-header',\n  BottomSheetFooter: 'bottom-sheet-footer',\n  BottomSheetGrabHandle: 'bottomsheet-grab-handle',\n  Card: 'card',\n  CardBody: 'card-body',\n  CardHeader: 'card-header',\n  CardFooter: 'card-footer',\n  Collapsible: 'collapsible',\n  CollapsibleBody: 'collapsible-body',\n  CollapsibleButton: 'collapsible-button',\n  CollapsibleLink: 'collapsible-link',\n  Modal: 'modal',\n  ModalBody: 'modal-body',\n  ModalHeader: 'modal-header',\n  ModalFooter: 'modal-footer',\n  ModalBackdrop: 'modal-backdrop',\n  ModalScrollOverlay: 'modal-scroll-overlay',\n  VisuallyHidden: 'visually-hidden',\n  FormLabel: 'form-label',\n  Switch: 'switch',\n  SwitchLabel: 'switch-label',\n  StyledBaseInput: 'styled-base-input',\n  Skeleton: 'skeleton',\n} as const;\n"],"names":["MetaConstants","Accordion","AccordionButton","AccordionItem","ActionList","ActionListItem","ActionListSection","Alert","Amount","AutoComplete","Badge","Box","BaseBox","BaseText","Button","Carousel","Checkbox","CheckboxGroup","CheckboxLabel","Chip","ChipGroup","ChipLabel","Code","Component","Counter","Display","Divider","Dropdown","DropdownOverlay","DropdownFooter","DropdownHeader","Icon","IconButton","Indicator","Link","List","ListItem","ListItemCode","ListItemLink","ListItemText","OTPInput","PasswordInput","TextArea","TextInput","Toast","ToastContainer","ProgressBar","Radio","RadioGroup","RadioLabel","SkipNav","Spinner","SelectInput","Tag","Tooltip","TooltipInteractiveWrapper","Tabs","TabList","TabItem","TabPanel","TabIndicator","Table","TableBody","TableRow","TableCell","TableHeader","TableHeaderRow","TableHeaderCell","TableFooter","TableFooterRow","TableFooterCell","TableElement","TourPopover","TourMask","Popover","PopoverInteractiveWrapper","BottomSheet","BottomSheetBody","BottomSheetHeader","BottomSheetFooter","BottomSheetGrabHandle","Card","CardBody","CardHeader","CardFooter","Collapsible","CollapsibleBody","CollapsibleButton","CollapsibleLink","Modal","ModalBody","ModalHeader","ModalFooter","ModalBackdrop","ModalScrollOverlay","VisuallyHidden","FormLabel","Switch","SwitchLabel","StyledBaseInput","Skeleton"],"mappings":"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"}

package/build/lib/web/development/components/Toast/Toast.web.js

@@ -0,0 +1,149 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import 'react';
+import toast from 'react-hot-toast';
+import styled, { keyframes, css } from 'styled-components';
+import '../Box/index.js';
+import '../Button/index.js';
+import '../Button/IconButton/index.js';
+import '../Icons/index.js';
+import '../Box/BaseBox/index.js';
+import '../Typography/index.js';
+import '../../utils/index.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import '../../utils/makeAccessible/index.js';
+import '../../utils/metaAttribute/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import CheckCircleIcon from '../Icons/CheckCircleIcon/CheckCircleIcon.js';
+import AlertTriangleIcon from '../Icons/AlertOctagonIcon/AlertOctagonIcon.js';
+import InfoIcon from '../Icons/InfoIcon/InfoIcon.js';
+import AlertTriangleIcon$1 from '../Icons/AlertTriangleIcon/AlertTriangleIcon.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import useTheme from '../BladeProvider/useTheme.js';
+import { Box } from '../Box/Box.js';
+import Button from '../Button/Button/Button.js';
+import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
+import { castWebType } from '../../utils/platform/castUtils.js';
+import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { Text } from '../Typography/Text/Text.js';
+import { IconButton } from '../Button/IconButton/IconButton.js';
+import CloseIcon from '../Icons/CloseIcon/CloseIcon.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var iconMap = {
+  positive: CheckCircleIcon,
+  negative: AlertTriangleIcon,
+  information: InfoIcon,
+  neutral: InfoIcon,
+  notice: AlertTriangleIcon$1
+};
+var borderColorMap = {
+  positive: 'feedback.border.positive.intense',
+  negative: 'feedback.border.negative.intense',
+  notice: 'feedback.border.notice.intense',
+  information: 'feedback.border.information.intense',
+  neutral: 'feedback.border.neutral.intense'
+};
+var slideIn = /*#__PURE__*/keyframes(["from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:translateY(0);}"]);
+var slideOut = /*#__PURE__*/keyframes(["from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(100%);}"]);
+var AnimatedFade = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "Toastweb__AnimatedFade",
+  componentId: "lbyqty-0"
+})(function (_ref) {
+  var animationType = _ref.animationType,
+    toastBorderColor = _ref.toastBorderColor;
+  return css(["overflow:hidden;border:1px solid ", ";", ""], toastBorderColor, animationType);
+});
+var Toast = function Toast(_ref2) {
+  var type = _ref2.type,
+    _ref2$color = _ref2.color,
+    color = _ref2$color === void 0 ? 'neutral' : _ref2$color,
+    leading = _ref2.leading,
+    action = _ref2.action,
+    content = _ref2.content,
+    onDismissButtonClick = _ref2.onDismissButtonClick,
+    isVisible = _ref2.isVisible,
+    id = _ref2.id;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var Icon = leading || iconMap[color];
+  var isPromotional = type === 'promotional';
+  var actionButton = action ? /*#__PURE__*/jsx(Box, {
+    children: /*#__PURE__*/jsx(Button, {
+      size: "xsmall",
+      variant: isPromotional ? 'secondary' : 'tertiary',
+      color: isPromotional ? 'primary' : 'white',
+      onClick: function onClick(event) {
+        var _action$onClick;
+        event.stopPropagation();
+        action === null || action === void 0 ? void 0 : (_action$onClick = action.onClick) === null || _action$onClick === void 0 ? void 0 : _action$onClick.call(action, {
+          event: event,
+          toastId: id
+        });
+      },
+      isLoading: action === null || action === void 0 ? void 0 : action.isLoading,
+      children: action === null || action === void 0 ? void 0 : action.text
+    })
+  }) : null;
+  var enter = /*#__PURE__*/css(["opacity:0;animation:", " ", " ", " forwards;"], slideIn, makeMotionTime(theme.motion.duration.gentle), castWebType(theme.motion.easing.entrance.effective));
+  var exit = /*#__PURE__*/css(["opacity:1;animation:", " ", " ", " forwards;"], slideOut, makeMotionTime(theme.motion.duration.moderate), castWebType(theme.motion.easing.exit.effective));
+  return /*#__PURE__*/jsxs(AnimatedFade, _objectSpread(_objectSpread(_objectSpread({}, makeAccessible({
+    role: 'status',
+    liveRegion: 'polite'
+  })), metaAttribute({
+    name: MetaConstants.Toast
+  })), {}, {
+    toastBorderColor: getIn(theme.colors, isPromotional ? 'surface.border.gray.muted' : borderColorMap[color]),
+    animationType: isVisible ? enter : exit,
+    width: "100%",
+    display: "flex",
+    gap: "spacing.3",
+    paddingX: "spacing.4",
+    paddingY: isPromotional ? 'spacing.4' : 'spacing.3',
+    borderRadius: "medium",
+    alignItems: "center",
+    backgroundColor: isPromotional ? 'surface.background.gray.intense' : "feedback.background.".concat(color, ".intense"),
+    children: [Icon ? /*#__PURE__*/jsx(Box, {
+      flexShrink: 0,
+      display: "flex",
+      alignItems: "center",
+      alignSelf: isPromotional ? 'start' : 'center',
+      children: /*#__PURE__*/jsx(Icon, {
+        color: isPromotional ? 'surface.icon.gray.normal' : 'surface.icon.staticWhite.normal'
+      })
+    }) : null, /*#__PURE__*/jsxs(Box, {
+      display: "flex",
+      flexDirection: "column",
+      gap: "spacing.3",
+      children: [isPromotional ? content : /*#__PURE__*/jsx(Text, {
+        as: "span",
+        size: "small",
+        color: "surface.text.staticWhite.normal",
+        children: content
+      }), isPromotional && actionButton]
+    }), /*#__PURE__*/jsxs(Box, {
+      alignSelf: "start",
+      marginLeft: "auto",
+      display: "flex",
+      gap: "spacing.4",
+      children: [!isPromotional && actionButton, /*#__PURE__*/jsx(IconButton, {
+        emphasis: isPromotional ? 'intense' : 'subtle',
+        accessibilityLabel: "Dismiss toast",
+        onClick: function onClick(event) {
+          event.stopPropagation();
+          onDismissButtonClick === null || onDismissButtonClick === void 0 ? void 0 : onDismissButtonClick({
+            event: event,
+            toastId: id
+          });
+          toast.dismiss(id);
+        },
+        icon: CloseIcon
+      })]
+    })]
+  }));
+};
+
+export { Toast };
+//# sourceMappingURL=Toast.web.js.map

package/build/lib/web/development/components/Toast/Toast.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.web.js","sources":["../../../../../../src/components/Toast/Toast.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport toast from 'react-hot-toast';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { ToastProps } from './types';\nimport { Box } from '~components/Box';\nimport { Button } from '~components/Button';\nimport { IconButton } from '~components/Button/IconButton';\nimport {\n  AlertOctagonIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoIcon,\n} from '~components/Icons';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { castWebType, makeMotionTime, useTheme } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst iconMap = {\n  positive: CheckCircleIcon,\n  negative: AlertOctagonIcon,\n  information: InfoIcon,\n  neutral: InfoIcon,\n  notice: AlertTriangleIcon,\n};\n\nconst borderColorMap = {\n  positive: 'feedback.border.positive.intense',\n  negative: 'feedback.border.negative.intense',\n  notice: 'feedback.border.notice.intense',\n  information: 'feedback.border.information.intense',\n  neutral: 'feedback.border.neutral.intense',\n} as const;\n\nconst slideIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\nconst AnimatedFade = styled(BaseBox)<{\n  animationType: FlattenSimpleInterpolation | null;\n  toastBorderColor: string;\n}>(({ animationType, toastBorderColor }) => {\n  return css`\n    overflow: hidden;\n    border: 1px solid ${toastBorderColor};\n    ${animationType}\n  `;\n});\n\nconst Toast = ({\n  type,\n  color = 'neutral',\n  leading,\n  action,\n  content,\n  onDismissButtonClick,\n  isVisible,\n  id,\n}: ToastProps & {\n  isVisible?: boolean;\n}): React.ReactElement => {\n  const { theme } = useTheme();\n  const Icon = leading || iconMap[color];\n  const isPromotional = type === 'promotional';\n  const actionButton = action ? (\n    <Box>\n      <Button\n        size=\"xsmall\"\n        variant={isPromotional ? 'secondary' : 'tertiary'}\n        color={isPromotional ? 'primary' : 'white'}\n        onClick={(event) => {\n          event.stopPropagation();\n          action?.onClick?.({ event: event as never, toastId: id! });\n        }}\n        isLoading={action?.isLoading}\n      >\n        {action?.text}\n      </Button>\n    </Box>\n  ) : null;\n\n  const enter = css`\n    opacity: 0;\n    animation: ${slideIn} ${makeMotionTime(theme.motion.duration.gentle)}\n      ${castWebType(theme.motion.easing.entrance.effective)} forwards;\n  `;\n\n  const exit = css`\n    opacity: 1;\n    animation: ${slideOut} ${makeMotionTime(theme.motion.duration.moderate)}\n      ${castWebType(theme.motion.easing.exit.effective)} forwards;\n  `;\n\n  return (\n    <AnimatedFade\n      {...makeAccessible({ role: 'status', liveRegion: 'polite' })}\n      {...metaAttribute({ name: MetaConstants.Toast })}\n      toastBorderColor={getIn(\n        theme.colors,\n        isPromotional ? 'surface.border.gray.muted' : borderColorMap[color],\n      )}\n      animationType={isVisible ? enter : exit}\n      width=\"100%\"\n      display=\"flex\"\n      gap=\"spacing.3\"\n      paddingX=\"spacing.4\"\n      paddingY={isPromotional ? 'spacing.4' : 'spacing.3'}\n      borderRadius=\"medium\"\n      alignItems=\"center\"\n      backgroundColor={\n        isPromotional ? 'surface.background.gray.intense' : `feedback.background.${color}.intense`\n      }\n    >\n      {Icon ? (\n        <Box\n          flexShrink={0}\n          display=\"flex\"\n          alignItems=\"center\"\n          alignSelf={isPromotional ? 'start' : 'center'}\n        >\n          <Icon\n            color={isPromotional ? 'surface.icon.gray.normal' : 'surface.icon.staticWhite.normal'}\n          />\n        </Box>\n      ) : null}\n      <Box display=\"flex\" flexDirection=\"column\" gap=\"spacing.3\">\n        {isPromotional ? (\n          content\n        ) : (\n          <Text as=\"span\" size=\"small\" color=\"surface.text.staticWhite.normal\">\n            {content}\n          </Text>\n        )}\n        {isPromotional && actionButton}\n      </Box>\n      <Box alignSelf=\"start\" marginLeft=\"auto\" display=\"flex\" gap=\"spacing.4\">\n        {!isPromotional && actionButton}\n        <IconButton\n          emphasis={isPromotional ? 'intense' : 'subtle'}\n          accessibilityLabel=\"Dismiss toast\"\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation();\n            onDismissButtonClick?.({ event, toastId: id! });\n            toast.dismiss(id);\n          }}\n          icon={CloseIcon}\n        />\n      </Box>\n    </AnimatedFade>\n  );\n};\n\nexport { Toast };\n"],"names":["iconMap","positive","CheckCircleIcon","negative","AlertOctagonIcon","information","InfoIcon","neutral","notice","AlertTriangleIcon","borderColorMap","slideIn","keyframes","slideOut","AnimatedFade","styled","BaseBox","withConfig","displayName","componentId","_ref","animationType","toastBorderColor","css","Toast","_ref2","type","_ref2$color","color","leading","action","content","onDismissButtonClick","isVisible","id","_useTheme","useTheme","theme","Icon","isPromotional","actionButton","_jsx","Box","children","Button","size","variant","onClick","event","_action$onClick","stopPropagation","call","toastId","isLoading","text","enter","makeMotionTime","motion","duration","gentle","castWebType","easing","entrance","effective","exit","moderate","_jsxs","_objectSpread","makeAccessible","role","liveRegion","metaAttribute","name","MetaConstants","getIn","colors","width","display","gap","paddingX","paddingY","borderRadius","alignItems","backgroundColor","concat","flexShrink","alignSelf","flexDirection","Text","as","marginLeft","IconButton","emphasis","accessibilityLabel","toast","dismiss","icon","CloseIcon"],"mappings":"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"}

package/build/lib/web/development/components/Toast/ToastContainer.web.js

@@ -0,0 +1,309 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { useToaster, resolveValue } from 'react-hot-toast';
+import React__default from 'react';
+import styled from 'styled-components';
+import { PEEKS, MAX_TOASTS, MIN_TOAST_MOBILE, MIN_TOAST_DESKTOP, CONTAINER_GUTTER_MOBILE, CONTAINER_GUTTER_DESKTOP, GUTTER, SCALE_FACTOR, PEEK_GUTTER, TOAST_Z_INDEX, TOAST_MAX_WIDTH } from './constants.js';
+import '../../utils/index.js';
+import '../Box/BaseBox/index.js';
+import { useIsMobile } from '../../utils/useIsMobile.js';
+import '../../utils/metaAttribute/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
+import useTheme from '../BladeProvider/useTheme.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var StyledToastWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "ToastContainerweb__StyledToastWrapper",
+  componentId: "mv9fjf-0"
+})(function (_ref) {
+  var isVisible = _ref.isVisible,
+    index = _ref.index,
+    isExpanded = _ref.isExpanded,
+    isPromotional = _ref.isPromotional;
+  var opacity = isVisible ? 1 : 0;
+  // Only make the PEEKING and MAX_TOASTS toasts visible,
+  // Every other toasts should be hidden
+  if (index < PEEKS + MAX_TOASTS) {
+    opacity = 1;
+  } else if (isPromotional || isExpanded) {
+    opacity = 1;
+  } else {
+    opacity = 0;
+  }
+  return {
+    '& > *': {
+      pointerEvents: opacity === 1 ? 'auto' : 'none'
+    },
+    opacity: opacity
+  };
+});
+var getPositionStyle = function getPositionStyle(position, offset, scale, theme) {
+  var top = position.includes('top');
+  var verticalStyle = top ? {
+    top: 0
+  } : {
+    bottom: 0
+  };
+  var horizontalStyle = position.includes('center') ? {
+    justifyContent: 'center'
+  } : position.includes('right') ? {
+    justifyContent: 'flex-end'
+  } : {};
+  return _objectSpread(_objectSpread({
+    left: 0,
+    right: 0,
+    display: 'flex',
+    position: 'absolute',
+    transformOrigin: 'center',
+    transition: "".concat(makeMotionTime(theme.motion.duration.gentle), " ").concat(theme.motion.easing.standard.effective),
+    transitionProperty: 'transform, opacity, height',
+    transform: "translateY(".concat(offset * (top ? 1 : -1), "px) scale(").concat(scale, ")")
+  }, verticalStyle), horizontalStyle);
+};
+function isPromotionalToast(toast) {
+  // @ts-expect-error
+  return toast.type == 'promotional';
+}
+var Toaster = function Toaster(_ref2) {
+  var _promoToasts$, _promoToasts$0$height, _promoToasts$2;
+  var reverseOrder = _ref2.reverseOrder,
+    _ref2$position = _ref2.position,
+    position = _ref2$position === void 0 ? 'top-center' : _ref2$position,
+    toastOptions = _ref2.toastOptions,
+    containerClassName = _ref2.containerClassName;
+  var _useToaster = useToaster(toastOptions),
+    toasts = _useToaster.toasts,
+    handlers = _useToaster.handlers;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var _React$useState = React__default.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    frontToastHeight = _React$useState2[0],
+    setFrontToastHeight = _React$useState2[1];
+  var _React$useState3 = React__default.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    hasManuallyExpanded = _React$useState4[0],
+    setHasManuallyExpanded = _React$useState4[1];
+  var isMobile = useIsMobile();
+  var minToasts = isMobile ? MIN_TOAST_MOBILE : MIN_TOAST_DESKTOP;
+  var containerGutter = isMobile ? CONTAINER_GUTTER_MOBILE : CONTAINER_GUTTER_DESKTOP;
+  var infoToasts = React__default.useMemo(function () {
+    return toasts.filter(function (toast) {
+      return !isPromotionalToast(toast);
+    });
+  }, [toasts]);
+  var promoToasts = React__default.useMemo(function () {
+    return toasts.filter(function (toast) {
+      return isPromotionalToast(toast);
+    });
+  }, [toasts]);
+
+  // always keep promo toasts at the bottom of the stack
+  var recomputedToasts = React__default.useMemo(function () {
+    return [].concat(_toConsumableArray(infoToasts), _toConsumableArray(promoToasts));
+  }, [infoToasts, promoToasts]);
+  var hasPromoToast = promoToasts.length > 0 && ((_promoToasts$ = promoToasts[0]) === null || _promoToasts$ === void 0 ? void 0 : _promoToasts$.visible);
+  var promoToastHeight = (_promoToasts$0$height = (_promoToasts$2 = promoToasts[0]) === null || _promoToasts$2 === void 0 ? void 0 : _promoToasts$2.height) !== null && _promoToasts$0$height !== void 0 ? _promoToasts$0$height : 0;
+  var isExpanded = hasManuallyExpanded || recomputedToasts.length <= minToasts;
+  React__default.useLayoutEffect(function () {
+    // find the first toast which is visible
+    var firstToast = infoToasts.find(function (t, index) {
+      return t.visible && index === 0;
+    });
+    if (firstToast) {
+      var _firstToast$height;
+      setFrontToastHeight((_firstToast$height = firstToast.height) !== null && _firstToast$height !== void 0 ? _firstToast$height : 0);
+    }
+  }, [infoToasts]);
+
+  // calculate total height of all toasts
+  var totalHeight = React__default.useMemo(function () {
+    return recomputedToasts
+    // only consider visible recomputedToasts
+    .filter(function (toast) {
+      return toast.visible;
+    }).reduce(function (prevHeight, toast) {
+      var _toast$height;
+      return prevHeight + ((_toast$height = toast.height) !== null && _toast$height !== void 0 ? _toast$height : 0);
+    }, 0) + recomputedToasts.length * GUTTER;
+  }, [recomputedToasts]);
+
+  // Stacking logic explained in detail:
+  // https://www.loom.com/share/522d9a445e2f41e1886cce4decb9ab9d?sid=4287acf6-8d44-431b-93e1-c1a0d40a0aba
+  //
+  // 1. 3 toasts can be stacked on top of each other
+  // 2. After 3 toasts, the toasts will be scaled down and peek from behind
+  // 3. There can be maximum of 3 toasts peeking from behind
+  // 4. After 3 peeking toasts, the toasts will be hidden
+  // 5. If there is a promo toast, all toasts will be lifted up
+  // 6. Promo toasts will always be on the bottom
+  var calculateYPosition = React__default.useCallback(function (_ref3) {
+    var toast = _ref3.toast,
+      index = _ref3.index;
+    // find the current toast index
+    var toastIndex = infoToasts.findIndex(function (t) {
+      return t.id === toast.id;
+    });
+    // number of toasts before this toast
+    var toastsBefore = infoToasts.filter(function (toast, i) {
+      return i < toastIndex && toast.visible;
+    }).length;
+    var scale = Math.max(0.7, 1 - toastsBefore * SCALE_FACTOR);
+    // first toast should always have a scale of 1
+    if (index < MAX_TOASTS) {
+      scale = 1;
+    }
+
+    // y position of toast,
+    var offset = infoToasts.filter(function (toast) {
+      return toast.visible;
+    }).slice(0, toastsBefore).reduce(function (y, toast) {
+      // if the toast is expanded, add the height of the toast + gutter
+      if (isExpanded) {
+        var _toast$height2;
+        return y + ((_toast$height2 = toast.height) !== null && _toast$height2 !== void 0 ? _toast$height2 : 0) + GUTTER;
+      }
+      // if the toast is not expanded, add only the peek gutter
+      return y + PEEK_GUTTER;
+    }, 0);
+
+    // lift all info toasts up if there is a promo toast
+    if (hasPromoToast) {
+      offset += GUTTER + promoToastHeight;
+    }
+
+    // if this is a promo toast, then put it at the bottom and force the scale to 1
+    if (isPromotionalToast(toast)) {
+      offset = 0;
+      scale = 1;
+    }
+    return {
+      offset: offset,
+      scale: isExpanded ? 1 : scale
+    };
+  }, [hasPromoToast, infoToasts, isExpanded, promoToastHeight]);
+  var handleMouseEnter = function handleMouseEnter() {
+    if (isMobile) return;
+    setHasManuallyExpanded(true);
+    handlers.startPause();
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    if (isMobile) return;
+    setHasManuallyExpanded(false);
+    handlers.endPause();
+  };
+  var handleToastClick = function handleToastClick() {
+    if (!isMobile) return;
+    setHasManuallyExpanded(function (prev) {
+      var next = !prev;
+      if (next) {
+        handlers.startPause();
+      } else {
+        handlers.endPause();
+      }
+      return next;
+    });
+  };
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
+    position: "fixed",
+    zIndex: TOAST_Z_INDEX,
+    top: makeSize(containerGutter),
+    left: makeSize(containerGutter),
+    right: makeSize(containerGutter),
+    bottom: makeSize(containerGutter),
+    width: "calc(100% - ".concat(containerGutter * 2, "px)"),
+    maxWidth: makeSize(TOAST_MAX_WIDTH),
+    pointerEvents: "none",
+    className: containerClassName
+  }, metaAttribute({
+    name: MetaConstants.ToastContainer
+  })), {}, {
+    children: [/*#__PURE__*/jsx(BaseBox, _objectSpread({
+      position: "absolute",
+      bottom: "".concat(promoToastHeight, "px"),
+      left: "0px",
+      width: "100%",
+      pointerEvents: isExpanded ? 'all' : 'none',
+      height: makeSize(isExpanded ? totalHeight - promoToastHeight : frontToastHeight),
+      zIndex: -100,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleToastClick
+    }, metaAttribute({
+      testID: 'toast-mouseover-container'
+    }))), recomputedToasts.map(function (toast, index) {
+      var _toast$position;
+      var toastPosition = (_toast$position = toast.position) !== null && _toast$position !== void 0 ? _toast$position : position;
+      var isPromotional = isPromotionalToast(toast);
+      var _calculateYPosition = calculateYPosition({
+          toast: toast,
+          isExpanded: isExpanded,
+          reverseOrder: reverseOrder,
+          index: index
+        }),
+        offset = _calculateYPosition.offset,
+        scale = _calculateYPosition.scale;
+      var positionStyle = getPositionStyle(toastPosition, offset, scale, theme);
+      // recalculate height of toast
+      var ref = function ref(el) {
+        if (el && typeof toast.height !== 'number') {
+          var height = el.getBoundingClientRect().height;
+          handlers.updateHeight(toast.id, height);
+        }
+      };
+      var toastHeight = toast.height;
+      if (index > MAX_TOASTS - 1 && !isPromotional) {
+        toastHeight = frontToastHeight;
+      }
+      if (isExpanded) {
+        toastHeight = toast.height;
+      }
+      return /*#__PURE__*/jsx(StyledToastWrapper, {
+        index: index,
+        ref: ref,
+        isExpanded: isExpanded,
+        isVisible: toast.visible,
+        isPromotional: isPromotional,
+        style: _objectSpread(_objectSpread({}, positionStyle), {}, {
+          zIndex: -1 * index,
+          height: toastHeight,
+          overflow: 'hidden'
+        }),
+        onMouseEnter: function onMouseEnter() {
+          if (isPromotional) return;
+          handleMouseEnter();
+        },
+        onMouseLeave: function onMouseLeave() {
+          if (isPromotional) return;
+          handleMouseLeave();
+        },
+        onClick: function onClick() {
+          if (isPromotional) return;
+          handleToastClick();
+        },
+        children: /*#__PURE__*/jsx(BaseBox, {
+          height: "fit-content",
+          width: "100%",
+          children: resolveValue(toast.message, _objectSpread(_objectSpread({}, toast), {}, {
+            index: index
+          }))
+        })
+      }, toast.id);
+    })]
+  }));
+};
+var ToastContainer = function ToastContainer() {
+  return /*#__PURE__*/jsx(Toaster, {
+    position: "bottom-left"
+  });
+};
+
+export { ToastContainer };
+//# sourceMappingURL=ToastContainer.web.js.map