@doist/reactist 15.3.0 → 16.1.0

package/es/components/{notification/notification.js → deprecated-notification/deprecated-notification.js}

@@ -5,7 +5,7 @@ import CloseIcon from '../icons/CloseIcon.svg.js';
 
 const _excluded = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
 
-function Notification(_ref) {
+function DeprecatedNotification(_ref) {
   let {
     id,
     icon,
@@ -69,5 +69,5 @@ function Notification(_ref) {
   }, customCloseButton != null ? customCloseButton : /*#__PURE__*/createElement(CloseIcon, null)) : null);
 }
 
-export { Notification };
-//# sourceMappingURL=notification.js.map
+export { DeprecatedNotification };
+//# sourceMappingURL=deprecated-notification.js.map

package/es/components/deprecated-notification/deprecated-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deprecated-notification.js","sources":["../../../src/components/deprecated-notification/deprecated-notification.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport CloseIcon from '../icons/CloseIcon.svg'\nimport './deprecated-notification.less'\n\ntype DeprecatedNotificationProps = {\n    id: string\n    icon?: React.ReactNode\n    title?: React.ReactNode\n    subtitle?: React.ReactNode\n    children?: React.ReactNode\n    customCloseButton?: React.ReactNode\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n    onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n    closeAltText?: string\n    className?: string\n    /** Indicates that the notification will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */\n    'aria-live'?: 'off' | 'polite' | 'assertive'\n} & Omit<JSX.IntrinsicElements['div'], 'aria-live'>\n\nfunction DeprecatedNotification({\n    id,\n    icon,\n    title,\n    subtitle,\n    children,\n    customCloseButton,\n    onClick,\n    onClose,\n    closeAltText = 'Close',\n    className,\n    'aria-live': ariaLive = 'polite',\n    ...rest\n}: DeprecatedNotificationProps) {\n    const titleId = title ? `${id}-title` : null\n    const titleIdAttribute = titleId ? { id: titleId } : null\n    const subtitleId = subtitle ? `${id}-subtitle` : null\n    const subtitleIdAttribute = subtitleId ? { id: subtitleId } : null\n    const contentId = children ? `${id}-content` : null\n    const contentIdAttribute = children ? { id: `${id}-content` } : null\n    const ariaLabelledBy = contentId\n        ? { 'aria-labelledby': contentId }\n        : titleId\n        ? { 'aria-labelledby': titleId }\n        : null\n    const ariaDescribedBy = subtitleId && !children ? { 'aria-describedby': subtitleId } : null\n\n    const notificationContent = (\n        <div className=\"reactist-notification__content\" {...contentIdAttribute}>\n            {children ?? (\n                <>\n                    {title ? (\n                        <h3 className=\"reactist-notification__title\" {...titleIdAttribute}>\n                            {title}\n                        </h3>\n                    ) : null}\n                    {subtitle ? (\n                        <p className=\"reactist-notification__subtitle\" {...subtitleIdAttribute}>\n                            {subtitle}\n                        </p>\n                    ) : null}\n                </>\n            )}\n        </div>\n    )\n    const notificationBody = (\n        <div className=\"reactist-notification__icon-content-group\">\n            {icon ?? null}\n            {notificationContent}\n        </div>\n    )\n\n    return (\n        <div\n            id={id}\n            role=\"alert\"\n            className={classNames('reactist-notification', className, {\n                'reactist-notification--with-button': Boolean(onClick),\n                'reactist-notification--with-close-button': Boolean(onClose),\n            })}\n            aria-live={ariaLive}\n            {...ariaLabelledBy}\n            {...ariaDescribedBy}\n            {...rest}\n        >\n            {onClick ? (\n                <button className=\"reactist-notification__button\" onClick={onClick}>\n                    {notificationBody}\n                </button>\n            ) : (\n                notificationBody\n            )}\n\n            {onClose ? (\n                <button\n                    className=\"reactist-notification__close-button\"\n                    onClick={onClose}\n                    aria-label={closeAltText}\n                >\n                    {customCloseButton ?? <CloseIcon />}\n                </button>\n            ) : null}\n        </div>\n    )\n}\n\nexport { DeprecatedNotification }\n"],"names":["DeprecatedNotification","id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className","ariaLive","rest","titleId","titleIdAttribute","subtitleId","subtitleIdAttribute","contentId","contentIdAttribute","ariaLabelledBy","ariaDescribedBy","notificationContent","React","notificationBody","role","classNames","Boolean","CloseIcon"],"mappings":";;;;;;;AAoBA,SAASA,sBAAT;MAAgC;IAC5BC,EAD4B;IAE5BC,IAF4B;IAG5BC,KAH4B;IAI5BC,QAJ4B;IAK5BC,QAL4B;IAM5BC,iBAN4B;IAO5BC,OAP4B;IAQ5BC,OAR4B;IAS5BC,YAAY,GAAG,OATa;IAU5BC,SAV4B;IAW5B,aAAaC,QAAQ,GAAG;;MACrBC;;EAEH,MAAMC,OAAO,GAAGV,KAAK,GAAMF,EAAN,cAAmB,IAAxC;EACA,MAAMa,gBAAgB,GAAGD,OAAO,GAAG;IAAEZ,EAAE,EAAEY;GAAT,GAAqB,IAArD;EACA,MAAME,UAAU,GAAGX,QAAQ,GAAMH,EAAN,iBAAsB,IAAjD;EACA,MAAMe,mBAAmB,GAAGD,UAAU,GAAG;IAAEd,EAAE,EAAEc;GAAT,GAAwB,IAA9D;EACA,MAAME,SAAS,GAAGZ,QAAQ,GAAMJ,EAAN,gBAAqB,IAA/C;EACA,MAAMiB,kBAAkB,GAAGb,QAAQ,GAAG;IAAEJ,EAAE,EAAKA,EAAL;GAAP,GAA6B,IAAhE;EACA,MAAMkB,cAAc,GAAGF,SAAS,GAC1B;IAAE,mBAAmBA;GADK,GAE1BJ,OAAO,GACP;IAAE,mBAAmBA;GADd,GAEP,IAJN;EAKA,MAAMO,eAAe,GAAGL,UAAU,IAAI,CAACV,QAAf,GAA0B;IAAE,oBAAoBU;GAAhD,GAA+D,IAAvF;EAEA,MAAMM,mBAAmB,gBACrBC,aAAA,MAAA;IAAKZ,SAAS,EAAC;KAAqCQ,kBAApD,GACKb,QADL,WACKA,QADL,gBAEQiB,aAAA,SAAA,MAAA,EACKnB,KAAK,gBACFmB,aAAA,KAAA;IAAIZ,SAAS,EAAC;KAAmCI,gBAAjD,GACKX,KADL,CADE,GAIF,IALR,EAMKC,QAAQ,gBACLkB,aAAA,IAAA;IAAGZ,SAAS,EAAC;KAAsCM,mBAAnD,GACKZ,QADL,CADK,GAIL,IAVR,CAFR,CADJ;EAkBA,MAAMmB,gBAAgB,gBAClBD,aAAA,MAAA;IAAKZ,SAAS,EAAC;GAAf,EACKR,IADL,WACKA,IADL,GACa,IADb,EAEKmB,mBAFL,CADJ;EAOA,oBACIC,aAAA,MAAA;IACIrB,EAAE,EAAEA,EADR;IAEIuB,IAAI,EAAC,OAFT;IAGId,SAAS,EAAEe,UAAU,CAAC,uBAAD,EAA0Bf,SAA1B,EAAqC;MACtD,sCAAsCgB,OAAO,CAACnB,OAAD,CADS;MAEtD,4CAA4CmB,OAAO,CAAClB,OAAD;KAFlC,CAHzB;iBAOeG;KACPQ,cARR,GASQC,eATR,GAUQR,IAVR,GAYKL,OAAO,gBACJe,aAAA,SAAA;IAAQZ,SAAS,EAAC;IAAgCH,OAAO,EAAEA;GAA3D,EACKgB,gBADL,CADI,GAKJA,gBAjBR,EAoBKf,OAAO,gBACJc,aAAA,SAAA;IACIZ,SAAS,EAAC;IACVH,OAAO,EAAEC;kBACGC;GAHhB,EAKKH,iBALL,WAKKA,iBALL,gBAK0BgB,aAAA,CAACK,SAAD,MAAA,CAL1B,CADI,GAQJ,IA5BR,CADJ;AAgCH;;;;"}

package/es/components/menu/menu.js

@@ -2,8 +2,8 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { useCallback, useMemo, createElement, useContext, forwardRef, Children, cloneElement, createContext } from 'react';
 import classNames from 'classnames';
 import { polymorphicComponent } from '../../utils/polymorphism.js';
-import FocusLock from 'react-focus-lock';
 import { Portal } from 'ariakit/portal';
+import FocusLock from 'react-focus-lock';
 import { useMenuState, MenuButton as MenuButton$1, Menu as Menu$1, MenuItem as MenuItem$1, useMenuItem, MenuGroup as MenuGroup$1 } from 'ariakit/menu';
 
 const _excluded = ["children", "onItemSelect"],

package/es/index.js

@@ -10,8 +10,10 @@ export { Button } from './new-components/button/button.js';
 export { Alert } from './new-components/alert/alert.js';
 export { Loading } from './new-components/loading/loading.js';
 export { Notice } from './new-components/notice/notice.js';
-export { Heading } from './new-components/heading/heading.js';
 export { Text } from './new-components/text/text.js';
+export { StaticToast } from './new-components/toast/static-toast.js';
+export { Toast, ToastsProvider, useToasts } from './new-components/toast/use-toasts.js';
+export { Heading } from './new-components/heading/heading.js';
 export { ButtonLink } from './new-components/button-link/button-link.js';
 export { TextLink } from './new-components/text-link/text-link.js';
 export { CheckboxField } from './new-components/checkbox-field/checkbox-field.js';
@@ -34,9 +36,9 @@ export { SUPPORTED_KEYS } from './components/key-capturer/key-capturer.js';
 export { default as KeyCapturer } from './components/key-capturer/index.js';
 export { default as ProgressBar } from './components/progress-bar/index.js';
 export { default as Time } from './components/time/index.js';
-export { Notification } from './components/notification/notification.js';
 export { Menu, MenuButton, MenuGroup, MenuItem, MenuList, SubMenu } from './components/menu/menu.js';
 export { default as DeprecatedInput } from './components/deprecated-input/index.js';
 export { default as DeprecatedSelect } from './components/deprecated-select/index.js';
+export { DeprecatedNotification } from './components/deprecated-notification/deprecated-notification.js';
 export { DeprecatedModal, DeprecatedModalActions, DeprecatedModalBody, DeprecatedModalCloseButton, DeprecatedModalFooter, DeprecatedModalHeader } from './new-components/deprecated-modal/modal.js';
 //# sourceMappingURL=index.js.map

package/es/index.js.map

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

package/es/new-components/badge/badge.module.css.js

@@ -1,4 +1,4 @@
-var modules_33c7c985 = {"badge":"_0b1e00ed","badge-neutral":"dda494a5","badge-positive":"_9260b8b0","badge-color":"_73a14c03"};
+var modules_33c7c985 = {"badge":"d05d2b62","badge-neutral":"a14691f3","badge-positive":"_4e255fdb","badge-color":"a58624e2"};
 
 export default modules_33c7c985;
 //# sourceMappingURL=badge.module.css.js.map

package/es/new-components/box/box.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.js","sources":["../../../src/new-components/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames } from '../responsive-props'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type {\n    DividerWeight,\n    Space,\n    SpaceWithNegatives,\n    WithEnhancedClassName,\n} from '../common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\nimport widthStyles from './width.module.css'\n\ninterface BoxPaddingProps {\n    padding?: ResponsiveProp<Space>\n    paddingX?: ResponsiveProp<Space>\n    paddingY?: ResponsiveProp<Space>\n    paddingTop?: ResponsiveProp<Space>\n    paddingRight?: ResponsiveProp<Space>\n    paddingBottom?: ResponsiveProp<Space>\n    paddingLeft?: ResponsiveProp<Space>\n}\n\ninterface BoxMarginProps {\n    margin?: ResponsiveProp<SpaceWithNegatives>\n    marginX?: ResponsiveProp<SpaceWithNegatives>\n    marginY?: ResponsiveProp<SpaceWithNegatives>\n    marginTop?: ResponsiveProp<SpaceWithNegatives>\n    marginRight?: ResponsiveProp<SpaceWithNegatives>\n    marginBottom?: ResponsiveProp<SpaceWithNegatives>\n    marginLeft?: ResponsiveProp<SpaceWithNegatives>\n}\n\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline'\ntype BoxJustifyContent =\n    | 'center'\n    | 'flexEnd'\n    | 'flexStart'\n    | 'spaceAround'\n    | 'spaceBetween'\n    | 'spaceEvenly'\ntype BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxMinWidth = 0 | BoxMaxMinWidth\ntype BoxMaxWidth = BoxMaxMinWidth | 'full'\ntype BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent'\n\ninterface BorderProps {\n    borderRadius?: 'standard' | 'none' | 'full'\n    border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n    minWidth?: BoxMinWidth\n    maxWidth?: BoxMaxWidth\n    width?: BoxWidth\n    background?: 'default' | 'aside' | 'highlight' | 'selected'\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\ntype BoxTextAlign = 'start' | 'center' | 'end' | 'justify'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n    position?: ResponsiveProp<BoxPosition>\n    display?: ResponsiveProp<BoxDisplay>\n    flexDirection?: ResponsiveProp<BoxFlexDirection>\n    flexWrap?: BoxFlexWrap\n    alignItems?: ResponsiveProp<BoxAlignItems>\n    alignSelf?: ResponsiveProp<BoxAlignSelf>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    height?: 'full'\n    textAlign?: ResponsiveProp<BoxTextAlign>\n}\n\nconst Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(\n    {\n        as: component = 'div',\n        position = 'static',\n        display,\n        flexDirection = 'row',\n        flexWrap,\n        flexGrow,\n        flexShrink,\n        alignItems,\n        justifyContent,\n        alignSelf,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign,\n        padding,\n        paddingY,\n        paddingX,\n        paddingTop,\n        paddingRight,\n        paddingBottom,\n        paddingLeft,\n        margin,\n        marginY,\n        marginX,\n        marginTop,\n        marginRight,\n        marginBottom,\n        marginLeft,\n        className,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n    const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n    const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n    const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n\n    const resolvedMarginTop = marginTop ?? marginY ?? margin\n    const resolvedMarginRight = marginRight ?? marginX ?? margin\n    const resolvedMarginBottom = marginBottom ?? marginY ?? margin\n    const resolvedMarginLeft = marginLeft ?? marginX ?? margin\n\n    const omitFlex =\n        !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex')\n\n    return React.createElement(\n        component,\n        {\n            ...props,\n            className:\n                classNames(\n                    className,\n                    styles.box,\n                    display ? getClassNames(styles, 'display', display) : null,\n                    position !== 'static' ? getClassNames(styles, 'position', position) : null,\n                    minWidth != null\n                        ? getClassNames(widthStyles, 'minWidth', String(minWidth))\n                        : null,\n                    getClassNames(widthStyles, 'maxWidth', maxWidth),\n                    getClassNames(styles, 'textAlign', textAlign),\n                    // padding\n                    getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop),\n                    getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight),\n                    getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom),\n                    getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft),\n                    // margin\n                    getClassNames(marginStyles, 'marginTop', resolvedMarginTop),\n                    getClassNames(marginStyles, 'marginRight', resolvedMarginRight),\n                    getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom),\n                    getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft),\n                    // flex props\n                    omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection),\n                    omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap),\n                    omitFlex ? null : getClassNames(styles, 'alignItems', alignItems),\n                    omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent),\n                    alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\n                    flexShrink != null\n                        ? getClassNames(styles, 'flexShrink', String(flexShrink))\n                        : null,\n                    flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n                    // other props\n                    getClassNames(styles, 'overflow', overflow),\n                    width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\n                    getClassNames(styles, 'height', height),\n                    getClassNames(styles, 'bg', background),\n                    borderRadius !== 'none'\n                        ? getClassNames(styles, 'borderRadius', borderRadius)\n                        : null,\n                    border !== 'none' ? getClassNames(styles, 'border', border) : null,\n                ) || undefined,\n            ref,\n        },\n        children,\n    )\n})\n\nexport type {\n    BoxProps,\n    BoxPaddingProps,\n    BoxMarginProps,\n    ReusableBoxProps,\n    BoxMinWidth,\n    BoxMaxWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n    BoxTextAlign,\n}\n\nexport { Box }\n"],"names":["Box","polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","React","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","undefined"],"mappings":"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"}
+{"version":3,"file":"box.js","sources":["../../../src/new-components/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames } from '../responsive-props'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type {\n    DividerWeight,\n    Space,\n    SpaceWithNegatives,\n    WithEnhancedClassName,\n} from '../common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\nimport widthStyles from './width.module.css'\n\ninterface BoxPaddingProps {\n    padding?: ResponsiveProp<Space>\n    paddingX?: ResponsiveProp<Space>\n    paddingY?: ResponsiveProp<Space>\n    paddingTop?: ResponsiveProp<Space>\n    paddingRight?: ResponsiveProp<Space>\n    paddingBottom?: ResponsiveProp<Space>\n    paddingLeft?: ResponsiveProp<Space>\n}\n\ninterface BoxMarginProps {\n    margin?: ResponsiveProp<SpaceWithNegatives>\n    marginX?: ResponsiveProp<SpaceWithNegatives>\n    marginY?: ResponsiveProp<SpaceWithNegatives>\n    marginTop?: ResponsiveProp<SpaceWithNegatives>\n    marginRight?: ResponsiveProp<SpaceWithNegatives>\n    marginBottom?: ResponsiveProp<SpaceWithNegatives>\n    marginLeft?: ResponsiveProp<SpaceWithNegatives>\n}\n\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline'\ntype BoxJustifyContent =\n    | 'center'\n    | 'flexEnd'\n    | 'flexStart'\n    | 'spaceAround'\n    | 'spaceBetween'\n    | 'spaceEvenly'\ntype BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxMinWidth = 0 | BoxMaxMinWidth\ntype BoxMaxWidth = BoxMaxMinWidth | 'full'\ntype BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent'\ntype BoxBackground = 'default' | 'aside' | 'highlight' | 'selected' | 'toast'\ntype BoxBorderRadius = 'standard' | 'none' | 'full'\n\ninterface BorderProps {\n    borderRadius?: BoxBorderRadius\n    border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n    minWidth?: BoxMinWidth\n    maxWidth?: BoxMaxWidth\n    width?: BoxWidth\n    background?: BoxBackground\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\ntype BoxTextAlign = 'start' | 'center' | 'end' | 'justify'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n    position?: ResponsiveProp<BoxPosition>\n    display?: ResponsiveProp<BoxDisplay>\n    flexDirection?: ResponsiveProp<BoxFlexDirection>\n    flexWrap?: BoxFlexWrap\n    alignItems?: ResponsiveProp<BoxAlignItems>\n    alignSelf?: ResponsiveProp<BoxAlignSelf>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    height?: 'full'\n    textAlign?: ResponsiveProp<BoxTextAlign>\n}\n\nconst Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(\n    {\n        as: component = 'div',\n        position = 'static',\n        display,\n        flexDirection = 'row',\n        flexWrap,\n        flexGrow,\n        flexShrink,\n        alignItems,\n        justifyContent,\n        alignSelf,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign,\n        padding,\n        paddingY,\n        paddingX,\n        paddingTop,\n        paddingRight,\n        paddingBottom,\n        paddingLeft,\n        margin,\n        marginY,\n        marginX,\n        marginTop,\n        marginRight,\n        marginBottom,\n        marginLeft,\n        className,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n    const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n    const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n    const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n\n    const resolvedMarginTop = marginTop ?? marginY ?? margin\n    const resolvedMarginRight = marginRight ?? marginX ?? margin\n    const resolvedMarginBottom = marginBottom ?? marginY ?? margin\n    const resolvedMarginLeft = marginLeft ?? marginX ?? margin\n\n    const omitFlex =\n        !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex')\n\n    return React.createElement(\n        component,\n        {\n            ...props,\n            className:\n                classNames(\n                    className,\n                    styles.box,\n                    display ? getClassNames(styles, 'display', display) : null,\n                    position !== 'static' ? getClassNames(styles, 'position', position) : null,\n                    minWidth != null\n                        ? getClassNames(widthStyles, 'minWidth', String(minWidth))\n                        : null,\n                    getClassNames(widthStyles, 'maxWidth', maxWidth),\n                    getClassNames(styles, 'textAlign', textAlign),\n                    // padding\n                    getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop),\n                    getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight),\n                    getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom),\n                    getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft),\n                    // margin\n                    getClassNames(marginStyles, 'marginTop', resolvedMarginTop),\n                    getClassNames(marginStyles, 'marginRight', resolvedMarginRight),\n                    getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom),\n                    getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft),\n                    // flex props\n                    omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection),\n                    omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap),\n                    omitFlex ? null : getClassNames(styles, 'alignItems', alignItems),\n                    omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent),\n                    alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\n                    flexShrink != null\n                        ? getClassNames(styles, 'flexShrink', String(flexShrink))\n                        : null,\n                    flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n                    // other props\n                    getClassNames(styles, 'overflow', overflow),\n                    width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\n                    getClassNames(styles, 'height', height),\n                    getClassNames(styles, 'bg', background),\n                    borderRadius !== 'none'\n                        ? getClassNames(styles, 'borderRadius', borderRadius)\n                        : null,\n                    border !== 'none' ? getClassNames(styles, 'border', border) : null,\n                ) || undefined,\n            ref,\n        },\n        children,\n    )\n})\n\nexport type {\n    BoxProps,\n    BoxPaddingProps,\n    BoxMarginProps,\n    ReusableBoxProps,\n    BoxMinWidth,\n    BoxMaxWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n    BoxTextAlign,\n    BoxBackground,\n    BoxBorderRadius,\n}\n\nexport { Box }\n"],"names":["Box","polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","React","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","undefined"],"mappings":"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"}

package/es/new-components/box/box.module.css.js

@@ -1,4 +1,4 @@
-var modules_54d944f2 = {"box":"f9408a0e","position-absolute":"_7807dcdd","position-fixed":"dc5f328c","position-relative":"_0e4ff085","position-sticky":"_4019d94a","tablet-position-absolute":"b1865c0f","tablet-position-fixed":"af8c5967","tablet-position-relative":"ef2b609f","tablet-position-sticky":"_04935ffd","desktop-position-absolute":"bda94091","desktop-position-fixed":"_691dfd31","desktop-position-relative":"efda904e","desktop-position-sticky":"bcf04687","display-block":"b5b9f34a","display-flex":"_6e9db9aa","display-inline":"ece6d246","display-inlineBlock":"e5e2223f","display-inlineFlex":"f344a0e2","display-none":"_9002f8c2","tablet-display-block":"d896f0ff","tablet-display-flex":"_56412665","tablet-display-inline":"_6b430cc5","tablet-display-inlineBlock":"_4158c5ad","tablet-display-inlineFlex":"c598eaab","tablet-display-none":"_5a2a6d3f","desktop-display-block":"_132ef8fb","desktop-display-flex":"_5bd11385","desktop-display-inline":"a51c2ec9","desktop-display-inlineBlock":"_93506988","desktop-display-inlineFlex":"_385d45a5","desktop-display-none":"_921732eb","flexDirection-column":"_41ef5755","flexDirection-row":"_6cad1a19","tablet-flexDirection-column":"f1c16205","tablet-flexDirection-row":"_65305ae1","desktop-flexDirection-column":"_4916f0f9","desktop-flexDirection-row":"_430dfc8e","flexWrap-wrap":"_3d2d56fe","flexWrap-nowrap":"_826e4adf","flexShrink-0":"f8344e0f","flexGrow-0":"f117e2ab","flexGrow-1":"_1355325c","alignItems-flexStart":"c5b05c6a","alignItems-center":"_21b8bafa","alignItems-flexEnd":"_56d73c9b","alignItems-baseline":"_052e0707","tablet-alignItems-flexStart":"_90048c98","tablet-alignItems-center":"_7e189a0b","tablet-alignItems-flexEnd":"b8aefb5c","tablet-alignItems-baseline":"_4c1a5ef9","desktop-alignItems-flexStart":"f4d052ef","desktop-alignItems-center":"e5478926","desktop-alignItems-flexEnd":"b4f5051a","desktop-alignItems-baseline":"b21adace","justifyContent-flexStart":"be6deb6a","justifyContent-center":"d8eaf780","justifyContent-flexEnd":"_9212ca89","justifyContent-spaceAround":"_5d2cd095","justifyContent-spaceBetween":"_00d5fe7e","justifyContent-spaceEvenly":"ce4f4c2d","tablet-justifyContent-flexStart":"_6580dbbc","tablet-justifyContent-center":"_3f689891","tablet-justifyContent-flexEnd":"_628df8db","tablet-justifyContent-spaceAround":"_3ea88b4f","tablet-justifyContent-spaceBetween":"_4554d93d","tablet-justifyContent-spaceEvenly":"eb13fb50","desktop-justifyContent-flexStart":"_36dc744d","desktop-justifyContent-center":"ee7077ab","desktop-justifyContent-flexEnd":"_4edc8c86","desktop-justifyContent-spaceBetween":"_7e147696","alignSelf-stretch":"c0655cd6","alignSelf-flexStart":"_11863030","alignSelf-center":"c6d86139","alignSelf-flexEnd":"c0bd1f82","alignSelf-baseline":"_95686aec","tablet-alignSelf-stretch":"_9b712cc7","tablet-alignSelf-flexStart":"f7b935f7","tablet-alignSelf-center":"bf9ad125","tablet-alignSelf-flexEnd":"_3b4f8c3c","tablet-alignSelf-baseline":"_49d27079","desktop-alignSelf-stretch":"_63d27ffa","desktop-alignSelf-flexStart":"d45796cc","desktop-alignSelf-center":"c91c7bf7","desktop-alignSelf-flexEnd":"f2453212","desktop-alignSelf-baseline":"_3882757c","overflow-hidden":"_473810b4","overflow-auto":"_051c2340","overflow-visible":"_14e451d1","overflow-scroll":"_4d8555f8","height-full":"_867d251e","bg-default":"_2d928bf8","bg-aside":"db3f5af6","bg-highlight":"c990fcc3","bg-selected":"_976a662f","borderRadius-standard":"_46b52f05","borderRadius-full":"_1c8b326b","border-primary":"_0ef8c314","border-secondary":"_14871605","border-tertiary":"_36c045c3","textAlign-start":"d745aa1e","textAlign-center":"_31cf99c5","textAlign-end":"_10a7a030","textAlign-justify":"_2cfc8b46","tablet-textAlign-start":"e6b7bb40","tablet-textAlign-center":"_47dcb91c","tablet-textAlign-end":"_1d4011ce","tablet-textAlign-justify":"_18407499","desktop-textAlign-start":"_565de5cf","desktop-textAlign-center":"_64254ba3","desktop-textAlign-end":"_3cc6a504","desktop-textAlign-justify":"_0efec659"};
+var modules_54d944f2 = {"box":"aa9a5a15","position-absolute":"_8e8803b9","position-fixed":"e11a8cf1","position-relative":"_5e6c2a17","position-sticky":"_125d4a65","tablet-position-absolute":"_8cbc0cd3","tablet-position-fixed":"_4b5e0b30","tablet-position-relative":"_32636b2c","tablet-position-sticky":"_3c8df1b2","desktop-position-absolute":"_0fc96c32","desktop-position-fixed":"_86f2af8d","desktop-position-relative":"_9ca81d89","desktop-position-sticky":"_7ddb76a3","display-block":"_1f239253","display-flex":"d3c9028a","display-inline":"_7804dae4","display-inlineBlock":"_2011b4f7","display-inlineFlex":"_84d1c5e9","display-none":"ecffd994","tablet-display-block":"_858d10e6","tablet-display-flex":"_048e1351","tablet-display-inline":"_4ad22f53","tablet-display-inlineBlock":"_9bdcf7c5","tablet-display-inlineFlex":"_086af02f","tablet-display-none":"e6d66504","desktop-display-block":"_42a60b7f","desktop-display-flex":"_75f9923b","desktop-display-inline":"_89fe8b6b","desktop-display-inlineBlock":"f5044459","desktop-display-inlineFlex":"c4bb937b","desktop-display-none":"_155e67e3","flexDirection-column":"_8b7928cc","flexDirection-row":"_5d86bbce","tablet-flexDirection-column":"_056ba2f7","tablet-flexDirection-row":"_68a9954e","desktop-flexDirection-column":"febb3bff","desktop-flexDirection-row":"e32ba18f","flexWrap-wrap":"bf057363","flexWrap-nowrap":"c12b5de4","flexShrink-0":"_1b0fdede","flexGrow-0":"_74d96364","flexGrow-1":"_8085a81a","alignItems-flexStart":"d646b895","alignItems-center":"_7eb6fbcd","alignItems-flexEnd":"aa0f1674","alignItems-baseline":"_5f712321","tablet-alignItems-flexStart":"_9cba71cc","tablet-alignItems-center":"_8803e1ed","tablet-alignItems-flexEnd":"dd23ad40","tablet-alignItems-baseline":"b6e66958","desktop-alignItems-flexStart":"_3cf6aa44","desktop-alignItems-center":"c455cc71","desktop-alignItems-flexEnd":"d72d7865","desktop-alignItems-baseline":"d856f657","justifyContent-flexStart":"e99eaf27","justifyContent-center":"f9927840","justifyContent-flexEnd":"_318ae7a4","justifyContent-spaceAround":"_792f21bb","justifyContent-spaceBetween":"c563d133","justifyContent-spaceEvenly":"_88fa03eb","tablet-justifyContent-flexStart":"_10110808","tablet-justifyContent-center":"_39532d47","tablet-justifyContent-flexEnd":"_6f28967b","tablet-justifyContent-spaceAround":"_61cf0e53","tablet-justifyContent-spaceBetween":"d9eb935c","tablet-justifyContent-spaceEvenly":"_2c34f330","desktop-justifyContent-flexStart":"_0d99cfa4","desktop-justifyContent-center":"a8e50b37","desktop-justifyContent-flexEnd":"_5c59c692","desktop-justifyContent-spaceBetween":"_2367b5bf","alignSelf-stretch":"da53b153","alignSelf-flexStart":"e7504e05","alignSelf-center":"_31910485","alignSelf-flexEnd":"f9deb037","alignSelf-baseline":"d2e0b600","tablet-alignSelf-stretch":"_322b2d4c","tablet-alignSelf-flexStart":"_8c3ace8c","tablet-alignSelf-center":"_3784fff8","tablet-alignSelf-flexEnd":"_7d7054cd","tablet-alignSelf-baseline":"_24e72f72","desktop-alignSelf-stretch":"_805f09a3","desktop-alignSelf-flexStart":"c124aecf","desktop-alignSelf-center":"_7f550538","desktop-alignSelf-flexEnd":"f1a1ea25","desktop-alignSelf-baseline":"a47a5534","overflow-hidden":"_79330f2d","overflow-auto":"_2d735aa4","overflow-visible":"_2d2dc480","overflow-scroll":"eae7bf85","height-full":"_3bd4b4e5","bg-default":"cdd56ed4","bg-aside":"ace3a6e9","bg-highlight":"_69ba9d50","bg-selected":"d3c85356","bg-toast":"_54ff8cfc","borderRadius-standard":"a010e6ce","borderRadius-full":"c7f4eef5","border-primary":"_0133b2bb","border-secondary":"_10ddcd6f","border-tertiary":"b1dd5c24","textAlign-start":"_3692c550","textAlign-center":"_917de8e0","textAlign-end":"f1f1808a","textAlign-justify":"_70cadb46","tablet-textAlign-start":"c009a023","tablet-textAlign-center":"_994025e9","tablet-textAlign-end":"da09b74f","tablet-textAlign-justify":"cedd005b","desktop-textAlign-start":"_6fb085b1","desktop-textAlign-center":"_742b34ba","desktop-textAlign-end":"_8d252912","desktop-textAlign-justify":"_081ee438"};
 
 export default modules_54d944f2;
 //# sourceMappingURL=box.module.css.js.map

package/es/new-components/modal/modal.js

@@ -7,10 +7,10 @@ import { Divider } from '../divider/divider.js';
 import { Inline } from '../inline/inline.js';
 import { Button } from '../button/button.js';
 import { CloseIcon } from '../icons/close-icon.js';
+import { Portal } from 'ariakit/portal';
 import FocusLock from 'react-focus-lock';
 import { hideOthers } from 'aria-hidden';
 import { useDialogState, Dialog } from 'ariakit/dialog';
-import { Portal } from 'ariakit/portal';
 import styles from './modal.module.css.js';
 
 const _excluded = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],

package/es/new-components/password-field/password-field.js

@@ -2,8 +2,8 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { forwardRef, useRef, useState, createElement } from 'react';
 import { Box } from '../box/box.js';
 import { Tooltip } from '../../components/tooltip/tooltip.js';
-import { useForkRef } from 'ariakit-utils';
 import { useId } from '../common-helpers.js';
+import { useForkRef } from 'ariakit-utils';
 import { BaseField } from '../base-field/base-field.js';
 import { PasswordVisibleIcon } from '../icons/password-visible-icon.js';
 import { PasswordHiddenIcon } from '../icons/password-hidden-icon.js';

package/es/new-components/toast/static-toast.js

@@ -0,0 +1,86 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { Box } from '../box/box.js';
+import { Stack } from '../stack/stack.js';
+import { Button } from '../button/button.js';
+import { CloseIcon } from '../icons/close-icon.js';
+import { Text } from '../text/text.js';
+import styles from './toast.module.css.js';
+
+const _excluded = ["message", "description", "icon", "action", "onDismiss", "dismissLabel"];
+/**
+ * A toast that shows a message, and an optional action associated with it.
+ *
+ * This component is generally not meant to be used directly. Most of the time you'll want to use
+ * toasts generated via `useToasts` instead. However, this component is available in case you need
+ * to take control of rendering a toast under different circumstances than that of notification-like
+ * floating toasts.
+ *
+ * This component makes no assumptions outwardly about how it is positioned on the screen. That is,
+ * it will not be shown floating or fixed to the viewport edges, as toasts normally show up. It only
+ * provides the toast look and feel, but you are responsible for positioning it as you want.
+ *
+ * @see useToasts
+ */
+
+const StaticToast = /*#__PURE__*/React__default.forwardRef(function Toast(_ref, ref) {
+  let {
+    message,
+    description,
+    icon,
+    action,
+    onDismiss,
+    dismissLabel = 'Close'
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React__default.createElement(Box, _objectSpread2({
+    ref: ref,
+    role: "alert",
+    "aria-live": "polite",
+    borderRadius: "full",
+    width: "fitContent",
+    background: "toast",
+    display: "flex",
+    padding: "large",
+    alignItems: "center",
+    className: styles.toastContainer
+  }, props), icon ? /*#__PURE__*/React__default.createElement(ToastContentSlot, null, icon) : null, /*#__PURE__*/React__default.createElement(Box, {
+    flexGrow: 1,
+    maxWidth: "small"
+  }, description ? /*#__PURE__*/React__default.createElement(Stack, {
+    space: "small"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    weight: "bold"
+  }, message, " "), /*#__PURE__*/React__default.createElement(Text, null, description)) : /*#__PURE__*/React__default.createElement(Text, null, message)), action ? /*#__PURE__*/React__default.createElement(ToastContentSlot, null, isActionObject(action) ? /*#__PURE__*/React__default.createElement(Button, {
+    variant: "tertiary",
+    size: "small",
+    onClick: action.onClick
+  }, action.label) : action) : null, onDismiss ? /*#__PURE__*/React__default.createElement(ToastContentSlot, null, /*#__PURE__*/React__default.createElement(Button, {
+    variant: "quaternary",
+    size: "small",
+    onClick: onDismiss,
+    "aria-label": dismissLabel,
+    icon: /*#__PURE__*/React__default.createElement(CloseIcon, null)
+  })) : null);
+});
+
+function isActionObject(action) {
+  return action != null && typeof action === 'object' && 'label' in action && 'onClick' in action && typeof action.label === 'string' && typeof action.onClick === 'function';
+}
+
+function ToastContentSlot({
+  children
+}) {
+  return /*#__PURE__*/React__default.createElement(Box, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginX: "-xsmall",
+    marginY: "-medium",
+    className: styles.slot
+  }, children);
+}
+
+export { StaticToast };
+//# sourceMappingURL=static-toast.js.map

package/es/new-components/toast/static-toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-toast.js","sources":["../../../src/new-components/toast/static-toast.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\n\nimport styles from './toast.module.css'\n\ntype ToastActionObject = {\n    label: string\n    onClick: () => void\n}\n\ntype StaticToastProps = {\n    /**\n     * The message shown in the toast.\n     */\n    message: NonNullable<React.ReactNode>\n\n    /**\n     * An optional extra description that complements the main message shown in the toast.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An icon to be shown in front of the message.\n     */\n    icon?: React.ReactNode\n\n    /**\n     * The action to call when the user clicks on the dismiss button. If omitted, the dismiss button\n     * does not appear.\n     */\n    onDismiss?: () => void\n\n    /**\n     * The label for the button that dismisses the toast.\n     */\n    dismissLabel?: string\n\n    /**\n     * What to render in the action slot. Usually a button or link.\n     *\n     * You can also pass an object that containst the action label, and a function that performs the\n     * action. This is used by the toast component to render a button for you.\n     *\n     * In general, you should prefer the action object most of the time. But it is possible to pass\n     * a React element instead, if you need more control over what to render. For instance, you may\n     * want to render a link instead of a button.\n     *\n     * Keep in mind, though, that the default button rendered uses `variant=\"tertiary\"` and\n     * `size=\"small\"`. In most cases you should stick to the variants `tertiary` or `primary`, which\n     * are the ones that look better in the toast's dark background. And in all cases you should use\n     * size `small`.\n     */\n    action?: React.ReactElement | ToastActionObject\n}\n\n/**\n * A toast that shows a message, and an optional action associated with it.\n *\n * This component is generally not meant to be used directly. Most of the time you'll want to use\n * toasts generated via `useToasts` instead. However, this component is available in case you need\n * to take control of rendering a toast under different circumstances than that of notification-like\n * floating toasts.\n *\n * This component makes no assumptions outwardly about how it is positioned on the screen. That is,\n * it will not be shown floating or fixed to the viewport edges, as toasts normally show up. It only\n * provides the toast look and feel, but you are responsible for positioning it as you want.\n *\n * @see useToasts\n */\nconst StaticToast = React.forwardRef<HTMLDivElement, StaticToastProps>(function Toast(\n    { message, description, icon, action, onDismiss, dismissLabel = 'Close', ...props },\n    ref,\n) {\n    return (\n        <Box\n            ref={ref}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            width=\"fitContent\"\n            background=\"toast\"\n            display=\"flex\"\n            padding=\"large\"\n            alignItems=\"center\"\n            className={styles.toastContainer}\n            {...props}\n        >\n            {icon ? <ToastContentSlot>{icon}</ToastContentSlot> : null}\n\n            <Box flexGrow={1} maxWidth=\"small\">\n                {description ? (\n                    <Stack space=\"small\">\n                        <Text weight=\"bold\">{message} </Text>\n                        <Text>{description}</Text>\n                    </Stack>\n                ) : (\n                    <Text>{message}</Text>\n                )}\n            </Box>\n\n            {action ? (\n                <ToastContentSlot>\n                    {isActionObject(action) ? (\n                        <Button variant=\"tertiary\" size=\"small\" onClick={action.onClick}>\n                            {action.label}\n                        </Button>\n                    ) : (\n                        action\n                    )}\n                </ToastContentSlot>\n            ) : null}\n\n            {onDismiss ? (\n                <ToastContentSlot>\n                    <Button\n                        variant=\"quaternary\"\n                        size=\"small\"\n                        onClick={onDismiss}\n                        aria-label={dismissLabel}\n                        icon={<CloseIcon />}\n                    />\n                </ToastContentSlot>\n            ) : null}\n        </Box>\n    )\n})\n\nfunction isActionObject(action: StaticToastProps['action']): action is ToastActionObject {\n    return (\n        action != null &&\n        typeof action === 'object' &&\n        'label' in action &&\n        'onClick' in action &&\n        typeof action.label === 'string' &&\n        typeof action.onClick === 'function'\n    )\n}\n\nfunction ToastContentSlot({ children }: { children: React.ReactNode }) {\n    return (\n        <Box\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            marginX=\"-xsmall\"\n            marginY=\"-medium\"\n            className={styles.slot}\n        >\n            {children}\n        </Box>\n    )\n}\n\nexport { StaticToast }\nexport type { StaticToastProps }\n"],"names":["StaticToast","React","forwardRef","Toast","ref","message","description","icon","action","onDismiss","dismissLabel","props","Box","role","borderRadius","width","background","display","padding","alignItems","className","styles","toastContainer","ToastContentSlot","flexGrow","maxWidth","Stack","space","Text","weight","isActionObject","Button","variant","size","onClick","label","CloseIcon","children","justifyContent","marginX","marginY","slot"],"mappings":";;;;;;;;;;AA4DA;;;;;;;;;;;;;;;MAcMA,WAAW,gBAAGC,cAAK,CAACC,UAAN,CAAmD,SAASC,KAAT,OAEnEC,GAFmE;MACnE;IAAEC,OAAF;IAAWC,WAAX;IAAwBC,IAAxB;IAA8BC,MAA9B;IAAsCC,SAAtC;IAAiDC,YAAY,GAAG;;MAAYC;;EAG5E,oBACIV,4BAAA,CAACW,GAAD;IACIR,GAAG,EAAEA,GADT;IAEIS,IAAI,EAAC,OAFT;iBAGc,QAHd;IAIIC,YAAY,EAAC,MAJjB;IAKIC,KAAK,EAAC,YALV;IAMIC,UAAU,EAAC,OANf;IAOIC,OAAO,EAAC,MAPZ;IAQIC,OAAO,EAAC,OARZ;IASIC,UAAU,EAAC,QATf;IAUIC,SAAS,EAAEC,MAAM,CAACC;KACdX,KAXR,GAaKJ,IAAI,gBAAGN,4BAAA,CAACsB,gBAAD,MAAA,EAAmBhB,IAAnB,CAAH,GAAiD,IAb1D,eAeIN,4BAAA,CAACW,GAAD;IAAKY,QAAQ,EAAE;IAAGC,QAAQ,EAAC;GAA3B,EACKnB,WAAW,gBACRL,4BAAA,CAACyB,KAAD;IAAOC,KAAK,EAAC;GAAb,eACI1B,4BAAA,CAAC2B,IAAD;IAAMC,MAAM,EAAC;GAAb,EAAqBxB,OAArB,KAAA,CADJ,eAEIJ,4BAAA,CAAC2B,IAAD,MAAA,EAAOtB,WAAP,CAFJ,CADQ,gBAMRL,4BAAA,CAAC2B,IAAD,MAAA,EAAOvB,OAAP,CAPR,CAfJ,EA0BKG,MAAM,gBACHP,4BAAA,CAACsB,gBAAD,MAAA,EACKO,cAAc,CAACtB,MAAD,CAAd,gBACGP,4BAAA,CAAC8B,MAAD;IAAQC,OAAO,EAAC;IAAWC,IAAI,EAAC;IAAQC,OAAO,EAAE1B,MAAM,CAAC0B;GAAxD,EACK1B,MAAM,CAAC2B,KADZ,CADH,GAKG3B,MANR,CADG,GAUH,IApCR,EAsCKC,SAAS,gBACNR,4BAAA,CAACsB,gBAAD,MAAA,eACItB,4BAAA,CAAC8B,MAAD;IACIC,OAAO,EAAC;IACRC,IAAI,EAAC;IACLC,OAAO,EAAEzB;kBACGC;IACZH,IAAI,eAAEN,4BAAA,CAACmC,SAAD,MAAA;GALV,CADJ,CADM,GAUN,IAhDR,CADJ;AAoDH,CAxDmB;;AA0DpB,SAASN,cAAT,CAAwBtB,MAAxB;EACI,OACIA,MAAM,IAAI,IAAV,IACA,OAAOA,MAAP,KAAkB,QADlB,IAEA,WAAWA,MAFX,IAGA,aAAaA,MAHb,IAIA,OAAOA,MAAM,CAAC2B,KAAd,KAAwB,QAJxB,IAKA,OAAO3B,MAAM,CAAC0B,OAAd,KAA0B,UAN9B;AAQH;;AAED,SAASX,gBAAT,CAA0B;EAAEc;AAAF,CAA1B;EACI,oBACIpC,4BAAA,CAACW,GAAD;IACIK,OAAO,EAAC;IACRE,UAAU,EAAC;IACXmB,cAAc,EAAC;IACfC,OAAO,EAAC;IACRC,OAAO,EAAC;IACRpB,SAAS,EAAEC,MAAM,CAACoB;GANtB,EAQKJ,QARL,CADJ;AAYH;;;;"}

package/es/new-components/toast/toast-animation.js

@@ -0,0 +1,175 @@
+import { useMemo, useLayoutEffect, useCallback } from 'react';
+
+/**
+ * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts
+ *
+ * MIT License
+ *
+ * Copyright (c) 2018 SEEK
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const ANIMATION_TIMEOUT = 400;
+const ENTRANCE_TRANSITION = 'transform 0.3s ease, opacity 0.3s ease';
+const EXIT_TRANSITION = 'opacity 0.2s ease';
+/**
+ * Applies the "from" value of given CSS properties, and also sets a transition CSS property. Then
+ * it waits an animation frame before setting the same CSS properties to the target "to" value. This
+ * triggers the browser to perform the CSS transition on them.
+ *
+ * At the end of the animation, it cleans up, unsetting all the CSS properties (including the
+ * transition), and calls the "done" callback, if given.
+ */
+
+function animate({
+  element,
+  transforms,
+  transition,
+  done
+}) {
+  const fallbackTimeout = setTimeout(() => {
+    done == null ? void 0 : done();
+  }, ANIMATION_TIMEOUT);
+  transforms.forEach(({
+    property,
+    from = ''
+  }) => {
+    element.style.setProperty(property, from);
+  });
+  element.style.setProperty('transition', '');
+
+  function transitionEndHandler(event) {
+    if (event.target !== element) {
+      return;
+    }
+
+    element.style.setProperty('transition', '');
+    done == null ? void 0 : done();
+    element.removeEventListener('transitionend', transitionEndHandler);
+    clearTimeout(fallbackTimeout);
+  }
+
+  element.addEventListener('transitionend', transitionEndHandler); // Call requestAnimationFrame twice to make sure we have a full animation frame at our disposal
+
+  window.requestAnimationFrame(() => {
+    window.requestAnimationFrame(() => {
+      element.style.setProperty('transition', transition);
+      transforms.forEach(({
+        property,
+        to = ''
+      }) => {
+        element.style.setProperty(property, to);
+      });
+    });
+  });
+}
+/**
+ * Provides the functionality of animating the stacked toasts when they appear and before they
+ * disappear.
+ *
+ * It works by keeping a mapping from toast IDs to the toast elements, and keeping a mapping from
+ * toast IDs to their top position. Then, on every single re-render, it compares the new DOM
+ * situation with the previously stored one in these mappings. With this information, it applies
+ * animations that smoothly transitions between both states.
+ */
+
+
+function useToastsAnimation() {
+  const refs = useMemo(() => new Map(), []);
+  const positions = useMemo(() => new Map(), []);
+  useLayoutEffect(() => {
+    const animations = [];
+    Array.from(refs.entries()).forEach(([id, element]) => {
+      if (!element) {
+        refs.delete(id);
+        return;
+      }
+
+      const prevTop = positions.get(id);
+      const {
+        top,
+        height
+      } = element.getBoundingClientRect();
+
+      if (typeof prevTop === 'number' && prevTop !== top) {
+        // Move animation
+        animations.push({
+          element,
+          transition: ENTRANCE_TRANSITION,
+          transforms: [{
+            property: 'transform',
+            from: "translateY(" + (prevTop - top) + "px)"
+          }]
+        });
+      } else if (typeof prevTop !== 'number') {
+        // Enter animation
+        animations.push({
+          element,
+          transition: ENTRANCE_TRANSITION,
+          transforms: [{
+            property: 'transform',
+            from: "translateY(" + height + "px)"
+          }, {
+            property: 'opacity',
+            from: '0'
+          }]
+        });
+      }
+
+      positions.set(id, element.getBoundingClientRect().top);
+    });
+    animations.forEach(({
+      element,
+      transforms,
+      transition
+    }) => {
+      animate({
+        element,
+        transforms,
+        transition
+      });
+    });
+  });
+  const animateRemove = useCallback(function animateRemove(id, onAnimationDone) {
+    const element = refs.get(id);
+
+    if (element) {
+      // Removal animation
+      animate({
+        element,
+        transforms: [{
+          property: 'opacity',
+          to: '0'
+        }],
+        transition: EXIT_TRANSITION,
+        done: onAnimationDone
+      });
+    }
+  }, [refs]);
+  const mappedRef = useCallback(id => ref => {
+    refs.set(id, ref);
+  }, [refs]);
+  return {
+    mappedRef,
+    animateRemove
+  };
+}
+
+export { ANIMATION_TIMEOUT, useToastsAnimation };
+//# sourceMappingURL=toast-animation.js.map

package/es/new-components/toast/toast-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-animation.js","sources":["../../../src/new-components/toast/toast-animation.ts"],"sourcesContent":["/**\n * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts\n *\n * MIT License\n *\n * Copyright (c) 2018 SEEK\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport { useMemo, useCallback, useLayoutEffect } from 'react'\n\nconst ANIMATION_TIMEOUT = 400\nconst ENTRANCE_TRANSITION = 'transform 0.3s ease, opacity 0.3s ease'\nconst EXIT_TRANSITION = 'opacity 0.2s ease'\n\ntype Transform = {\n    property: 'opacity' | 'transform' | 'scale'\n    from?: string\n    to?: string\n}\n\n/**\n * Applies the \"from\" value of given CSS properties, and also sets a transition CSS property. Then\n * it waits an animation frame before setting the same CSS properties to the target \"to\" value. This\n * triggers the browser to perform the CSS transition on them.\n *\n * At the end of the animation, it cleans up, unsetting all the CSS properties (including the\n * transition), and calls the \"done\" callback, if given.\n */\nfunction animate({\n    element,\n    transforms,\n    transition,\n    done,\n}: {\n    element: HTMLElement\n    transforms: Transform[]\n    transition: string\n    done?: () => void\n}) {\n    const fallbackTimeout = setTimeout(() => {\n        done?.()\n    }, ANIMATION_TIMEOUT)\n\n    transforms.forEach(({ property, from = '' }) => {\n        element.style.setProperty(property, from)\n    })\n    element.style.setProperty('transition', '')\n\n    function transitionEndHandler(event: TransitionEvent) {\n        if (event.target !== element) {\n            return\n        }\n        element.style.setProperty('transition', '')\n        done?.()\n        element.removeEventListener('transitionend', transitionEndHandler)\n        clearTimeout(fallbackTimeout)\n    }\n\n    element.addEventListener('transitionend', transitionEndHandler)\n\n    // Call requestAnimationFrame twice to make sure we have a full animation frame at our disposal\n    window.requestAnimationFrame(() => {\n        window.requestAnimationFrame(() => {\n            element.style.setProperty('transition', transition)\n            transforms.forEach(({ property, to = '' }) => {\n                element.style.setProperty(property, to)\n            })\n        })\n    })\n}\n\ntype ToastsAnimationToolkit = {\n    /**\n     * Used for gathering all the active stacked toast elements. Should be used by passing\n     * `ref={mappedRef(toastId)}` to the stacked toasts.\n     */\n    mappedRef: (toastId: string) => (ref: HTMLElement | null) => void\n\n    /**\n     * The stacked toasts view should use this callback when it needs to remove a toast, instead of\n     * removing it right away. The actual removal from the state (and consequently, from the DOM)\n     * should happen in the `onAnimationDone` instead.\n     */\n    animateRemove: (toastId: string, onAnimationDone: () => void) => void\n}\n\n/**\n * Provides the functionality of animating the stacked toasts when they appear and before they\n * disappear.\n *\n * It works by keeping a mapping from toast IDs to the toast elements, and keeping a mapping from\n * toast IDs to their top position. Then, on every single re-render, it compares the new DOM\n * situation with the previously stored one in these mappings. With this information, it applies\n * animations that smoothly transitions between both states.\n */\nfunction useToastsAnimation(): ToastsAnimationToolkit {\n    const refs = useMemo(() => new Map<string, HTMLElement | null>(), [])\n    const positions = useMemo(() => new Map<string, number>(), [])\n\n    useLayoutEffect(() => {\n        const animations: Array<{\n            element: HTMLElement\n            transforms: Transform[]\n            transition: string\n        }> = []\n\n        Array.from(refs.entries()).forEach(([id, element]) => {\n            if (!element) {\n                refs.delete(id)\n                return\n            }\n\n            const prevTop = positions.get(id)\n            const { top, height } = element.getBoundingClientRect()\n\n            if (typeof prevTop === 'number' && prevTop !== top) {\n                // Move animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [{ property: 'transform', from: `translateY(${prevTop - top}px)` }],\n                })\n            } else if (typeof prevTop !== 'number') {\n                // Enter animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [\n                        { property: 'transform', from: `translateY(${height}px)` },\n                        { property: 'opacity', from: '0' },\n                    ],\n                })\n            }\n\n            positions.set(id, element.getBoundingClientRect().top)\n        })\n\n        animations.forEach(({ element, transforms, transition }) => {\n            animate({ element, transforms, transition })\n        })\n    })\n\n    const animateRemove = useCallback(\n        function animateRemove(id: string, onAnimationDone: () => void) {\n            const element = refs.get(id)\n            if (element) {\n                // Removal animation\n                animate({\n                    element,\n                    transforms: [{ property: 'opacity', to: '0' }],\n                    transition: EXIT_TRANSITION,\n                    done: onAnimationDone,\n                })\n            }\n        },\n        [refs],\n    )\n\n    const mappedRef = useCallback(\n        (id: string) => (ref: HTMLElement | null) => {\n            refs.set(id, ref)\n        },\n        [refs],\n    )\n\n    return { mappedRef, animateRemove }\n}\n\nexport { ANIMATION_TIMEOUT, useToastsAnimation }\n"],"names":["ANIMATION_TIMEOUT","ENTRANCE_TRANSITION","EXIT_TRANSITION","animate","element","transforms","transition","done","fallbackTimeout","setTimeout","forEach","property","from","style","setProperty","transitionEndHandler","event","target","removeEventListener","clearTimeout","addEventListener","window","requestAnimationFrame","to","useToastsAnimation","refs","useMemo","Map","positions","useLayoutEffect","animations","Array","entries","id","delete","prevTop","get","top","height","getBoundingClientRect","push","set","animateRemove","useCallback","onAnimationDone","mappedRef","ref"],"mappings":"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"}

package/es/new-components/toast/toast.module.css.js

@@ -0,0 +1,4 @@
+var modules_d11e18f0 = {"stackedToastsView":"_8e9f0a55","toastContainer":"_121b9429","slot":"_6a2a04c5"};
+
+export default modules_d11e18f0;
+//# sourceMappingURL=toast.module.css.js.map

package/es/new-components/toast/toast.module.css.js.map

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