@doist/reactist 15.1.0 → 15.3.0

package/lib/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":["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":"04BAuFYA,wBAAuD,WAuC/DC,2BArCIC,GAAIC,EAAY,MADpBC,SAEIA,EAAW,SAFfC,QAGIA,EAHJC,cAIIA,EAAgB,MAJpBC,SAKIA,EALJC,SAMIA,EANJC,WAOIA,EAPJC,WAQIA,EARJC,eASIA,EATJC,UAUIA,EAVJC,SAWIA,EAXJC,MAYIA,EAZJC,OAaIA,EAbJC,WAcIA,EAdJC,OAeIA,EAfJC,aAgBIA,EAhBJC,SAiBIA,EAjBJC,SAkBIA,EAlBJC,UAmBIA,EAnBJC,QAoBIA,EApBJC,SAqBIA,EArBJC,SAsBIA,EAtBJC,WAuBIA,EAvBJC,aAwBIA,EAxBJC,cAyBIA,EAzBJC,YA0BIA,EA1BJC,OA2BIA,EA3BJC,QA4BIA,EA5BJC,QA6BIA,EA7BJC,UA8BIA,EA9BJC,YA+BIA,EA/BJC,aAgCIA,EAhCJC,WAiCIA,EAjCJC,UAkCIA,EAlCJC,SAmCIA,KACGC,kCAIP,MAAMC,kBAAqBd,EAAAA,EAAcF,KAAYD,EAC/CkB,kBAAuBd,EAAAA,EAAgBF,KAAYF,EACnDmB,kBAAwBd,EAAAA,EAAiBJ,KAAYD,EACrDoB,kBAAsBd,EAAAA,EAAeJ,KAAYF,EAEjDqB,kBAAoBX,EAAAA,EAAaF,KAAWD,EAC5Ce,kBAAsBX,EAAAA,EAAeF,KAAWF,EAChDgB,kBAAuBX,EAAAA,EAAgBJ,KAAWD,EAClDiB,kBAAqBX,EAAAA,EAAcJ,KAAWF,EAE9CkB,IACD1C,GAA+B,iBAAZA,GAAoC,SAAZA,GAAkC,eAAZA,EAEtE,OAAO2C,gBACH7C,qCAEOmC,QACHF,UACIa,EACIb,EACAc,UAAOC,IACP9C,EAAU+C,gBAAcF,UAAQ,UAAW7C,GAAW,KACzC,WAAbD,EAAwBgD,gBAAcF,UAAQ,WAAY9C,GAAY,KAC1D,MAAZe,EACMiC,gBAAcC,UAAa,WAAYC,OAAOnC,IAC9C,KACNiC,gBAAcC,UAAa,WAAYjC,GACvCgC,gBAAcF,UAAQ,YAAa7B,GAEnC+B,gBAAcG,UAAe,aAAchB,IAC3Ca,gBAAcG,UAAe,eAAgBf,IAC7CY,gBAAcG,UAAe,gBAAiBd,IAC9CW,gBAAcG,UAAe,cAAeb,IAE5CU,gBAAcI,UAAc,YAAab,IACzCS,gBAAcI,UAAc,cAAeZ,IAC3CQ,gBAAcI,UAAc,eAAgBX,IAC5CO,gBAAcI,UAAc,aAAcV,IAE1CC,GAAW,KAAOK,gBAAcF,UAAQ,gBAAiB5C,GACzDyC,GAAW,KAAOK,gBAAcF,UAAQ,WAAY3C,GACpDwC,GAAW,KAAOK,gBAAcF,UAAQ,aAAcxC,GACtDqC,GAAW,KAAOK,gBAAcF,UAAQ,iBAAkBvC,GAC7C,MAAbC,EAAoBwC,gBAAcF,UAAQ,YAAatC,GAAa,KACtD,MAAdH,EACM2C,gBAAcF,UAAQ,aAAcI,OAAO7C,IAC3C,KACM,MAAZD,EAAmB4C,gBAAcF,UAAQ,WAAYI,OAAO9C,IAAa,KAEzE4C,gBAAcF,UAAQ,WAAYrC,GACzB,MAATC,EAAgBsC,gBAAcC,UAAa,QAASC,OAAOxC,IAAU,KACrEsC,gBAAcF,UAAQ,SAAUnC,GAChCqC,gBAAcF,UAAQ,KAAMlC,GACX,SAAjBE,EACMkC,gBAAcF,UAAQ,eAAgBhC,GACtC,KACK,SAAXD,EAAoBmC,gBAAcF,UAAQ,SAAUjC,GAAU,YAC7DwC,EACTxD,IAAAA,IAEJoC"}
+{"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":["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":"+2BAuFYA,wBAAuD,WAuC/DC,2BArCIC,GAAIC,EAAY,MADpBC,SAEIA,EAAW,SAFfC,QAGIA,EAHJC,cAIIA,EAAgB,MAJpBC,SAKIA,EALJC,SAMIA,EANJC,WAOIA,EAPJC,WAQIA,EARJC,eASIA,EATJC,UAUIA,EAVJC,SAWIA,EAXJC,MAYIA,EAZJC,OAaIA,EAbJC,WAcIA,EAdJC,OAeIA,EAfJC,aAgBIA,EAhBJC,SAiBIA,EAjBJC,SAkBIA,EAlBJC,UAmBIA,EAnBJC,QAoBIA,EApBJC,SAqBIA,EArBJC,SAsBIA,EAtBJC,WAuBIA,EAvBJC,aAwBIA,EAxBJC,cAyBIA,EAzBJC,YA0BIA,EA1BJC,OA2BIA,EA3BJC,QA4BIA,EA5BJC,QA6BIA,EA7BJC,UA8BIA,EA9BJC,YA+BIA,EA/BJC,aAgCIA,EAhCJC,WAiCIA,EAjCJC,UAkCIA,EAlCJC,SAmCIA,KACGC,kCAIP,MAAMC,kBAAqBd,EAAAA,EAAcF,KAAYD,EAC/CkB,kBAAuBd,EAAAA,EAAgBF,KAAYF,EACnDmB,kBAAwBd,EAAAA,EAAiBJ,KAAYD,EACrDoB,kBAAsBd,EAAAA,EAAeJ,KAAYF,EAEjDqB,kBAAoBX,EAAAA,EAAaF,KAAWD,EAC5Ce,kBAAsBX,EAAAA,EAAeF,KAAWF,EAChDgB,kBAAuBX,EAAAA,EAAgBJ,KAAWD,EAClDiB,kBAAqBX,EAAAA,EAAcJ,KAAWF,EAE9CkB,IACD1C,GAA+B,iBAAZA,GAAoC,SAAZA,GAAkC,eAAZA,EAEtE,OAAO2C,gBACH7C,qCAEOmC,QACHF,UACIa,EACIb,EACAc,UAAOC,IACP9C,EAAU+C,gBAAcF,UAAQ,UAAW7C,GAAW,KACzC,WAAbD,EAAwBgD,gBAAcF,UAAQ,WAAY9C,GAAY,KAC1D,MAAZe,EACMiC,gBAAcC,UAAa,WAAYC,OAAOnC,IAC9C,KACNiC,gBAAcC,UAAa,WAAYjC,GACvCgC,gBAAcF,UAAQ,YAAa7B,GAEnC+B,gBAAcG,UAAe,aAAchB,IAC3Ca,gBAAcG,UAAe,eAAgBf,IAC7CY,gBAAcG,UAAe,gBAAiBd,IAC9CW,gBAAcG,UAAe,cAAeb,IAE5CU,gBAAcI,UAAc,YAAab,IACzCS,gBAAcI,UAAc,cAAeZ,IAC3CQ,gBAAcI,UAAc,eAAgBX,IAC5CO,gBAAcI,UAAc,aAAcV,IAE1CC,GAAW,KAAOK,gBAAcF,UAAQ,gBAAiB5C,GACzDyC,GAAW,KAAOK,gBAAcF,UAAQ,WAAY3C,GACpDwC,GAAW,KAAOK,gBAAcF,UAAQ,aAAcxC,GACtDqC,GAAW,KAAOK,gBAAcF,UAAQ,iBAAkBvC,GAC7C,MAAbC,EAAoBwC,gBAAcF,UAAQ,YAAatC,GAAa,KACtD,MAAdH,EACM2C,gBAAcF,UAAQ,aAAcI,OAAO7C,IAC3C,KACM,MAAZD,EAAmB4C,gBAAcF,UAAQ,WAAYI,OAAO9C,IAAa,KAEzE4C,gBAAcF,UAAQ,WAAYrC,GACzB,MAATC,EAAgBsC,gBAAcC,UAAa,QAASC,OAAOxC,IAAU,KACrEsC,gBAAcF,UAAQ,SAAUnC,GAChCqC,gBAAcF,UAAQ,KAAMlC,GACX,SAAjBE,EACMkC,gBAAcF,UAAQ,eAAgBhC,GACtC,KACK,SAAXD,EAAoBmC,gBAAcF,UAAQ,SAAUjC,GAAU,YAC7DwC,EACTxD,IAAAA,IAEJoC"}

package/lib/new-components/checkbox-field/checkbox-field.d.ts

@@ -12,7 +12,7 @@ declare type CheckboxFieldProps = Omit<JSX.IntrinsicElements['input'], 'type' |
     /** Defines whether or not the checkbox is disabled. */
     disabled?: boolean;
     /** The label for the checkbox element. */
-    label?: string;
+    label?: React.ReactNode;
     /** Defines whether or not the checkbox can be of a `mixed` state. */
     indeterminate?: boolean;
 };

package/lib/new-components/checkbox-field/checkbox-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n    JSX.IntrinsicElements['input'],\n    | 'type'\n    | 'className'\n    | 'disabled'\n    | 'aria-controls'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    'aria-checked'?: never\n    /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n    'aria-controls'?: string\n    /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current checkbox for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n    'aria-labelledby'?: string\n    /** Defines whether or not the checkbox is disabled. */\n    disabled?: boolean\n    /** The label for the checkbox element. */\n    label?: string\n    /** Defines whether or not the checkbox can be of a `mixed` state. */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {label ? <Text>{label}</Text> : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["React","ref","label","disabled","indeterminate","defaultChecked","onChange","props","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"kZAmCsBA,cAAuD,WAEzEC,iBADAC,MAAEA,EAAFC,SAASA,EAATC,cAAmBA,EAAnBC,eAAkCA,EAAlCC,SAAkDA,KAAaC,iCAIlC,kBAAlBH,GAD4C,kBAAlBG,EAAMC,UAGvCC,QAAQC,KAAK,wDACbN,OAAgBO,GAGfT,GAAUK,EAAM,eAAkBA,EAAM,oBAEzCE,QAAQC,KAAK,4BAGjB,MAAOE,EAAYC,GAAiBb,YAAe,IAC5Cc,EAAcC,GAAcf,6BAAeO,EAAMC,WAAWH,OAC7DW,WAAYT,EAAMC,WAAWM,EAE7BG,EAAcjB,SAA+B,MAC7CkB,EAAcC,aAAWF,EAAahB,GAU5C,OATAD,aACI,WACQiB,EAAYG,SAAoC,kBAAlBhB,IAC9Ba,EAAYG,QAAQhB,cAAgBA,KAG5C,CAACA,IAIDJ,gBAACqB,OACGC,GAAG,QACHC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,UACPxB,EAAWuB,UAAOvB,SAAW,KAC7Ba,EAAYU,UAAOlB,QAAU,KAC7BI,EAAac,UAAOd,WAAa,OAGrCZ,2DACQO,OACJN,IAAKiB,EACLU,KAAK,0BACSxB,EAAgB,QAAUY,EACxCR,QAASQ,EACTb,SAAUA,EACVG,SAAWuB,UACPvB,GAAAA,EAAWuB,GACNA,EAAMC,kBACPf,EAAWc,EAAME,cAAcvB,UAGvCwB,OAASH,IACLhB,GAAc,SACdN,SAAAA,EAAOyB,QAAPzB,EAAOyB,OAASH,IAEpBI,QAAUJ,IACNhB,GAAc,SACdN,SAAAA,EAAO0B,SAAP1B,EAAO0B,QAAUJ,OAGzB7B,gBAACkC,gBACG1B,QAASQ,EACTb,SAAUA,EACVC,cAAeA,qBAGlBF,EAAQF,gBAACmC,YAAMjC,GAAgB"}
+{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n    JSX.IntrinsicElements['input'],\n    | 'type'\n    | 'className'\n    | 'disabled'\n    | 'aria-controls'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    'aria-checked'?: never\n    /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n    'aria-controls'?: string\n    /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current checkbox for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n    'aria-labelledby'?: string\n    /** Defines whether or not the checkbox is disabled. */\n    disabled?: boolean\n    /** The label for the checkbox element. */\n    label?: React.ReactNode\n    /** Defines whether or not the checkbox can be of a `mixed` state. */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {label ? <Text>{label}</Text> : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["React","ref","label","disabled","indeterminate","defaultChecked","onChange","props","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"kZAmCsBA,cAAuD,WAEzEC,iBADAC,MAAEA,EAAFC,SAASA,EAATC,cAAmBA,EAAnBC,eAAkCA,EAAlCC,SAAkDA,KAAaC,iCAIlC,kBAAlBH,GAD4C,kBAAlBG,EAAMC,UAGvCC,QAAQC,KAAK,wDACbN,OAAgBO,GAGfT,GAAUK,EAAM,eAAkBA,EAAM,oBAEzCE,QAAQC,KAAK,4BAGjB,MAAOE,EAAYC,GAAiBb,YAAe,IAC5Cc,EAAcC,GAAcf,6BAAeO,EAAMC,WAAWH,OAC7DW,WAAYT,EAAMC,WAAWM,EAE7BG,EAAcjB,SAA+B,MAC7CkB,EAAcC,aAAWF,EAAahB,GAU5C,OATAD,aACI,WACQiB,EAAYG,SAAoC,kBAAlBhB,IAC9Ba,EAAYG,QAAQhB,cAAgBA,KAG5C,CAACA,IAIDJ,gBAACqB,OACGC,GAAG,QACHC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,UACPxB,EAAWuB,UAAOvB,SAAW,KAC7Ba,EAAYU,UAAOlB,QAAU,KAC7BI,EAAac,UAAOd,WAAa,OAGrCZ,2DACQO,OACJN,IAAKiB,EACLU,KAAK,0BACSxB,EAAgB,QAAUY,EACxCR,QAASQ,EACTb,SAAUA,EACVG,SAAWuB,UACPvB,GAAAA,EAAWuB,GACNA,EAAMC,kBACPf,EAAWc,EAAME,cAAcvB,UAGvCwB,OAASH,IACLhB,GAAc,SACdN,SAAAA,EAAOyB,QAAPzB,EAAOyB,OAASH,IAEpBI,QAAUJ,IACNhB,GAAc,SACdN,SAAAA,EAAO0B,SAAP1B,EAAO0B,QAAUJ,OAGzB7B,gBAACkC,gBACG1B,QAASQ,EACTb,SAAUA,EACVC,cAAeA,qBAGlBF,EAAQF,gBAACmC,YAAMjC,GAAgB"}

package/lib/new-components/deprecated-modal/modal.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),o=(e(a),e(require("classnames"))),l=require("../box/box.js"),r=require("../columns/columns.js"),n=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("../button/button.js"),c=require("../icons/close-icon.js"),u=e(require("react-focus-lock")),d=require("@reach/dialog"),m=require("./modal.module.css.js");const p=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],h=["children","button","withDivider","exceptionallySetClassName"],f=["exceptionallySetClassName","children"],x=["exceptionallySetClassName","withDivider"],g=["children"],b=a.createContext({onDismiss:void 0,height:"fitContent"});function j(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function C(e){const{onDismiss:o}=a.useContext(b),[l,r]=a.useState(!1),[n,i]=a.useState(!1);return a.useEffect((function(){n?r(!0):i(!0)}),[n]),a.createElement(s.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:o,icon:a.createElement(c.CloseIcon,null),tabIndex:l?0:-1}))}function v(e){let{exceptionallySetClassName:o,withDivider:r=!1}=e,i=t.objectWithoutProperties(e,x);return a.createElement(a.Fragment,null,r?a.createElement(n.Divider,null):null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:o,padding:"large"})))}exports.DeprecatedModal=function(e){let{isOpen:r,onDismiss:n,height:i="fitContent",width:s="medium",exceptionallySetClassName:c,autoFocus:h=!0,children:f}=e,x=t.objectWithoutProperties(e,p);const g=a.useMemo(()=>({onDismiss:n,height:i}),[n,i]);return a.createElement(d.DialogOverlay,{isOpen:r,onDismiss:n,dangerouslyBypassFocusLock:!0,className:o(m.default.overlay,m.default[i],m.default[s]),"data-testid":"modal-overlay"},a.createElement(u,{autoFocus:h,whiteList:j,returnFocus:!0},a.createElement(d.DialogContent,t.objectSpread2(t.objectSpread2({},x),{},{as:l.Box,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[c,m.default.container]}),a.createElement(b.Provider,{value:g},f))))},exports.DeprecatedModalActions=function(e){let{children:o}=e,l=t.objectWithoutProperties(e,g);return a.createElement(v,t.objectSpread2({},l),a.createElement(i.Inline,{align:"right",space:"large"},o))},exports.DeprecatedModalBody=function(e){let{exceptionallySetClassName:o,children:r}=e,n=t.objectWithoutProperties(e,f);const{height:i}=a.useContext(b);return a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},n),{},{className:o,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(l.Box,{padding:"large",paddingBottom:"xxlarge"},r))},exports.DeprecatedModalCloseButton=C,exports.DeprecatedModalFooter=v,exports.DeprecatedModalHeader=function(e){let{children:o,button:i=!0,withDivider:s=!1,exceptionallySetClassName:c}=e,u=t.objectWithoutProperties(e,h);return a.createElement(a.Fragment,null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},u),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:c}),a.createElement(r.Columns,{space:"large",alignY:"center"},a.createElement(r.Column,{width:"auto"},o),!1===i||null===i?a.createElement("div",{className:m.default.headerContent}):a.createElement(r.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(C,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(n.Divider,null):null)};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),o=e(require("classnames")),l=require("../box/box.js"),r=require("../columns/columns.js"),n=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("../button/button.js"),c=require("../icons/close-icon.js"),u=e(require("react-focus-lock")),d=require("@reach/dialog"),m=require("./modal.module.css.js");const p=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],h=["children","button","withDivider","exceptionallySetClassName"],f=["exceptionallySetClassName","children"],x=["exceptionallySetClassName","withDivider"],g=["children"],b=a.createContext({onDismiss:void 0,height:"fitContent"});function j(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function C(e){const{onDismiss:o}=a.useContext(b),[l,r]=a.useState(!1),[n,i]=a.useState(!1);return a.useEffect((function(){n?r(!0):i(!0)}),[n]),a.createElement(s.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:o,icon:a.createElement(c.CloseIcon,null),tabIndex:l?0:-1}))}function v(e){let{exceptionallySetClassName:o,withDivider:r=!1}=e,i=t.objectWithoutProperties(e,x);return a.createElement(a.Fragment,null,r?a.createElement(n.Divider,null):null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:o,padding:"large"})))}exports.DeprecatedModal=function(e){let{isOpen:r,onDismiss:n,height:i="fitContent",width:s="medium",exceptionallySetClassName:c,autoFocus:h=!0,children:f}=e,x=t.objectWithoutProperties(e,p);const g=a.useMemo(()=>({onDismiss:n,height:i}),[n,i]);return a.createElement(d.DialogOverlay,{isOpen:r,onDismiss:n,dangerouslyBypassFocusLock:!0,className:o(m.default.overlay,m.default[i],m.default[s]),"data-testid":"modal-overlay"},a.createElement(u,{autoFocus:h,whiteList:j,returnFocus:!0},a.createElement(d.DialogContent,t.objectSpread2(t.objectSpread2({},x),{},{as:l.Box,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[c,m.default.container]}),a.createElement(b.Provider,{value:g},f))))},exports.DeprecatedModalActions=function(e){let{children:o}=e,l=t.objectWithoutProperties(e,g);return a.createElement(v,t.objectSpread2({},l),a.createElement(i.Inline,{align:"right",space:"large"},o))},exports.DeprecatedModalBody=function(e){let{exceptionallySetClassName:o,children:r}=e,n=t.objectWithoutProperties(e,f);const{height:i}=a.useContext(b);return a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},n),{},{className:o,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(l.Box,{padding:"large",paddingBottom:"xxlarge"},r))},exports.DeprecatedModalCloseButton=C,exports.DeprecatedModalFooter=v,exports.DeprecatedModalHeader=function(e){let{children:o,button:i=!0,withDivider:s=!1,exceptionallySetClassName:c}=e,u=t.objectWithoutProperties(e,h);return a.createElement(a.Fragment,null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},u),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:c}),a.createElement(r.Columns,{space:"large",alignY:"center"},a.createElement(r.Column,{width:"auto"},o),!1===i||null===i?a.createElement("div",{className:m.default.headerContent}):a.createElement(r.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(C,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(n.Divider,null):null)};
 //# sourceMappingURL=modal.js.map

package/lib/new-components/deprecated-modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/new-components/deprecated-modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type DeprecatedModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see DeprecatedModalHeader\n * @see DeprecatedModalFooter\n * @see DeprecatedModalBody\n * @deprecated\n */\nexport function DeprecatedModal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: DeprecatedModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type DeprecatedModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see DeprecatedModalHeader\n */\nexport function DeprecatedModalCloseButton(props: DeprecatedModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type DeprecatedModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see DeprecatedModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalFooter\n * @see DeprecatedModalBody\n */\nexport function DeprecatedModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: DeprecatedModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <DeprecatedModalCloseButton\n                                    aria-label=\"Close modal\"\n                                    autoFocus={false}\n                                />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type DeprecatedModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalHeader\n * @see DeprecatedModalFooter\n */\nexport function DeprecatedModalBody({\n    exceptionallySetClassName,\n    children,\n    ...props\n}: DeprecatedModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type DeprecatedModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalHeader\n * @see DeprecatedModalBody\n */\nexport function DeprecatedModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: DeprecatedModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type DeprecatedModalActionsProps = DeprecatedModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see DeprecatedModalFooter\n */\nexport function DeprecatedModalActions({ children, ...props }: DeprecatedModalActionsProps) {\n    return (\n        <DeprecatedModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </DeprecatedModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","DeprecatedModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","DeprecatedModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","autoFocus","children","contextValue","DialogOverlay","dangerouslyBypassFocusLock","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"+yBA0BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAsFnDC,EAA2BC,GACvC,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cA4J/BU,SAAsBC,0BAClCA,EADkCC,YAElCA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,oDAnQtDC,OAC5BA,EAD4B7B,UAE5BA,EAF4BE,OAG5BA,EAAS,aAHmB4B,MAI5BA,EAAQ,SAJoBR,0BAK5BA,EAL4BS,UAM5BA,GAAY,EANgBC,SAO5BA,KACGtB,iCAEH,MAAMuB,EAAkClC,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGJ,OACIH,gBAACmC,iBACGL,OAAQA,EACR7B,UAAWA,EACXmC,8BACAR,UAAWS,EAAWC,UAAOC,QAASD,UAAOnC,GAASmC,UAAOP,kBACjD,iBAEZ/B,gBAACwC,GAAUR,UAAWA,EAAWS,UAAWrC,EAAoBsC,aAAa,GACzE1C,gBAAC2C,mDACOhC,OACJgB,GAAID,MACJkB,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT7C,OAAmB,WAAXA,EAAsB,YAASD,EACvC+C,SAAqB,WAAX9C,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2Be,UAAOY,aAE9ClD,gBAACD,EAAaoD,UAASC,MAAOlB,GAAeD,sDA8O1BA,SAAEA,KAAatB,iCAClD,OACIX,gBAACsB,qBAA0BX,GACvBX,gBAACqD,UAAOC,MAAM,QAAQC,MAAM,SACvBtB,iDA3EmBV,0BAChCA,EADgCU,SAEhCA,KACGtB,iCAEH,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACX0B,SAAqB,WAAX9C,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvC8C,SAAS,SAEThD,gBAAC0B,OAAIG,QAAQ,QAAQ2B,cAAc,WAC9BvB,wHAtFqBA,SAClCA,EADkCwB,OAElCA,GAAS,EAFyBjC,YAGlCA,GAAc,EAHoBD,0BAIlCA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACH+B,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACThC,UAAWL,IAEXvB,gBAAC6D,WAAQN,MAAM,QAAQO,OAAO,UAC1B9D,gBAAC+D,UAAOhC,MAAM,QAAQE,IACV,IAAXwB,GAA+B,OAAXA,EACjBzD,uBAAK4B,UAAWU,UAAO0B,gBAEvBhE,gBAAC+D,UACGhC,MAAM,UACNR,0BAA2Be,UAAO2B,8BACtB,oBAEO,kBAAXR,EACJzD,gBAACU,gBACc,cACXsB,WAAW,IAGfyB,KAMnBjC,EAAcxB,gBAACyB,gBAAa"}
+{"version":3,"file":"modal.js","sources":["../../../src/new-components/deprecated-modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type DeprecatedModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see DeprecatedModalHeader\n * @see DeprecatedModalFooter\n * @see DeprecatedModalBody\n * @deprecated\n */\nexport function DeprecatedModal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: DeprecatedModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type DeprecatedModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see DeprecatedModalHeader\n */\nexport function DeprecatedModalCloseButton(props: DeprecatedModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type DeprecatedModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see DeprecatedModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalFooter\n * @see DeprecatedModalBody\n */\nexport function DeprecatedModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: DeprecatedModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <DeprecatedModalCloseButton\n                                    aria-label=\"Close modal\"\n                                    autoFocus={false}\n                                />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type DeprecatedModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalHeader\n * @see DeprecatedModalFooter\n */\nexport function DeprecatedModalBody({\n    exceptionallySetClassName,\n    children,\n    ...props\n}: DeprecatedModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type DeprecatedModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalHeader\n * @see DeprecatedModalBody\n */\nexport function DeprecatedModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: DeprecatedModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type DeprecatedModalActionsProps = DeprecatedModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see DeprecatedModalFooter\n */\nexport function DeprecatedModalActions({ children, ...props }: DeprecatedModalActionsProps) {\n    return (\n        <DeprecatedModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </DeprecatedModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","DeprecatedModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","DeprecatedModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","autoFocus","children","contextValue","DialogOverlay","dangerouslyBypassFocusLock","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"wyBA0BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAsFnDC,EAA2BC,GACvC,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cA4J/BU,SAAsBC,0BAClCA,EADkCC,YAElCA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,oDAnQtDC,OAC5BA,EAD4B7B,UAE5BA,EAF4BE,OAG5BA,EAAS,aAHmB4B,MAI5BA,EAAQ,SAJoBR,0BAK5BA,EAL4BS,UAM5BA,GAAY,EANgBC,SAO5BA,KACGtB,iCAEH,MAAMuB,EAAkClC,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGJ,OACIH,gBAACmC,iBACGL,OAAQA,EACR7B,UAAWA,EACXmC,8BACAR,UAAWS,EAAWC,UAAOC,QAASD,UAAOnC,GAASmC,UAAOP,kBACjD,iBAEZ/B,gBAACwC,GAAUR,UAAWA,EAAWS,UAAWrC,EAAoBsC,aAAa,GACzE1C,gBAAC2C,mDACOhC,OACJgB,GAAID,MACJkB,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT7C,OAAmB,WAAXA,EAAsB,YAASD,EACvC+C,SAAqB,WAAX9C,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2Be,UAAOY,aAE9ClD,gBAACD,EAAaoD,UAASC,MAAOlB,GAAeD,sDA8O1BA,SAAEA,KAAatB,iCAClD,OACIX,gBAACsB,qBAA0BX,GACvBX,gBAACqD,UAAOC,MAAM,QAAQC,MAAM,SACvBtB,iDA3EmBV,0BAChCA,EADgCU,SAEhCA,KACGtB,iCAEH,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACX0B,SAAqB,WAAX9C,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvC8C,SAAS,SAEThD,gBAAC0B,OAAIG,QAAQ,QAAQ2B,cAAc,WAC9BvB,wHAtFqBA,SAClCA,EADkCwB,OAElCA,GAAS,EAFyBjC,YAGlCA,GAAc,EAHoBD,0BAIlCA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACH+B,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACThC,UAAWL,IAEXvB,gBAAC6D,WAAQN,MAAM,QAAQO,OAAO,UAC1B9D,gBAAC+D,UAAOhC,MAAM,QAAQE,IACV,IAAXwB,GAA+B,OAAXA,EACjBzD,uBAAK4B,UAAWU,UAAO0B,gBAEvBhE,gBAAC+D,UACGhC,MAAM,UACNR,0BAA2Be,UAAO2B,8BACtB,oBAEO,kBAAXR,EACJzD,gBAACU,gBACc,cACXsB,WAAW,IAGfyB,KAMnBjC,EAAcxB,gBAACyB,gBAAa"}

package/lib/new-components/loading/loading.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,r=require("../box/box.js"),t=require("../spinner/spinner.js");const i=["size","exceptionallySetClassName"],s={xsmall:16,small:24,medium:36,large:48};exports.Loading=function(e){var n;let{size:o="small",exceptionallySetClassName:u}=e,c=a.objectWithoutProperties(e,i);const p=null!=(n=s[o])?n:s.small,b=c["aria-label"]?c["aria-label"]:c["aria-labelledby"]?void 0:"Loading…";return l.createElement(r.Box,a.objectSpread2(a.objectSpread2({},c),{},{"aria-label":b,className:u,display:"flex",alignItems:"center",justifyContent:"center",role:"progressbar"}),l.createElement(t.Spinner,{size:p,"aria-hidden":!0}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),l=require("../box/box.js"),r=require("../spinner/spinner.js");const t=["size","exceptionallySetClassName"],i={xsmall:16,small:24,medium:36,large:48};exports.Loading=function(s){var n;let{size:o="small",exceptionallySetClassName:c}=s,u=e.objectWithoutProperties(s,t);const p=null!=(n=i[o])?n:i.small,b=u["aria-label"]?u["aria-label"]:u["aria-labelledby"]?void 0:"Loading…";return a.createElement(l.Box,e.objectSpread2(e.objectSpread2({},u),{},{"aria-label":b,className:c,display:"flex",alignItems:"center",justifyContent:"center",role:"progressbar"}),a.createElement(r.Spinner,{size:p,"aria-hidden":!0}))};
 //# sourceMappingURL=loading.js.map

package/lib/new-components/loading/loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading.js","sources":["../../../src/new-components/loading/loading.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\n\ntype Size = 'xsmall' | 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n    JSX.IntrinsicElements['div'],\n    'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'\n>\n\ntype LoadingProps = NativeProps & {\n    /**\n     * The size of the loading spinner.\n     * @default 'small'\n     */\n    size?: Size\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Identifies the element (or elements) that describes the loading component for assistive technologies. */\n    'aria-describedby'?: string\n} & (\n        | {\n              /** Defines a string value that labels the current loading component for assistive technologies. */\n              'aria-label': string\n              'aria-labelledby'?: never\n          }\n        | {\n              /** Identifies the element (or elements) that labels the current loading component for assistive technologies. */\n              'aria-labelledby': string\n              'aria-label'?: never\n          }\n    )\n\nconst sizeMapping: Record<Size, number> = {\n    xsmall: 16,\n    small: 24,\n    medium: 36,\n    large: 48,\n}\n\nfunction Loading({ size = 'small', exceptionallySetClassName, ...props }: LoadingProps) {\n    const numericSize = sizeMapping[size] ?? sizeMapping.small\n    const ariaLabel = props['aria-label']\n        ? props['aria-label']\n        : !props['aria-labelledby']\n        ? 'Loading…'\n        : undefined\n\n    return (\n        <Box\n            {...props}\n            aria-label={ariaLabel}\n            className={exceptionallySetClassName}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            role=\"progressbar\"\n        >\n            <Spinner size={numericSize} aria-hidden />\n        </Box>\n    )\n}\n\nexport { Loading }\nexport type { LoadingProps }\n"],"names":["sizeMapping","xsmall","small","medium","large","size","exceptionallySetClassName","props","numericSize","ariaLabel","undefined","React","Box","className","display","alignItems","justifyContent","role","Spinner"],"mappings":"oTAoCMA,EAAoC,CACtCC,OAAQ,GACRC,MAAO,GACPC,OAAQ,GACRC,MAAO,oBAGX,sBAAiBC,KAAEA,EAAO,QAATC,0BAAkBA,KAA8BC,iCAC7D,MAAMC,WAAcR,EAAYK,MAASL,EAAYE,MAC/CO,EAAYF,EAAM,cAClBA,EAAM,cACLA,EAAM,wBAEPG,EADA,WAGN,OACIC,gBAACC,yCACOL,oBACQE,EACZI,UAAWP,EACXQ,QAAQ,OACRC,WAAW,SACXC,eAAe,SACfC,KAAK,gBAELN,gBAACO,WAAQb,KAAMG"}
+{"version":3,"file":"loading.js","sources":["../../../src/new-components/loading/loading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\n\ntype Size = 'xsmall' | 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n    JSX.IntrinsicElements['div'],\n    'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'\n>\n\ntype LoadingProps = NativeProps & {\n    /**\n     * The size of the loading spinner.\n     * @default 'small'\n     */\n    size?: Size\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Identifies the element (or elements) that describes the loading component for assistive technologies. */\n    'aria-describedby'?: string\n} & (\n        | {\n              /** Defines a string value that labels the current loading component for assistive technologies. */\n              'aria-label': string\n              'aria-labelledby'?: never\n          }\n        | {\n              /** Identifies the element (or elements) that labels the current loading component for assistive technologies. */\n              'aria-labelledby': string\n              'aria-label'?: never\n          }\n    )\n\nconst sizeMapping: Record<Size, number> = {\n    xsmall: 16,\n    small: 24,\n    medium: 36,\n    large: 48,\n}\n\nfunction Loading({ size = 'small', exceptionallySetClassName, ...props }: LoadingProps) {\n    const numericSize = sizeMapping[size] ?? sizeMapping.small\n    const ariaLabel = props['aria-label']\n        ? props['aria-label']\n        : !props['aria-labelledby']\n        ? 'Loading…'\n        : undefined\n\n    return (\n        <Box\n            {...props}\n            aria-label={ariaLabel}\n            className={exceptionallySetClassName}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            role=\"progressbar\"\n        >\n            <Spinner size={numericSize} aria-hidden />\n        </Box>\n    )\n}\n\nexport { Loading }\nexport type { LoadingProps }\n"],"names":["sizeMapping","xsmall","small","medium","large","size","exceptionallySetClassName","props","numericSize","ariaLabel","undefined","React","Box","className","display","alignItems","justifyContent","role","Spinner"],"mappings":"+PAoCMA,EAAoC,CACtCC,OAAQ,GACRC,MAAO,GACPC,OAAQ,GACRC,MAAO,oBAGX,sBAAiBC,KAAEA,EAAO,QAATC,0BAAkBA,KAA8BC,iCAC7D,MAAMC,WAAcR,EAAYK,MAASL,EAAYE,MAC/CO,EAAYF,EAAM,cAClBA,EAAM,cACLA,EAAM,wBAEPG,EADA,WAGN,OACIC,gBAACC,yCACOL,oBACQE,EACZI,UAAWP,EACXQ,QAAQ,OACRC,WAAW,SACXC,eAAe,SACfC,KAAK,gBAELN,gBAACO,WAAQb,KAAMG"}

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

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),l=(e(a),e(require("classnames"))),r=require("../box/box.js"),o=require("../columns/columns.js"),n=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("../button/button.js"),u=require("../icons/close-icon.js"),c=e(require("react-focus-lock")),d=require("aria-hidden"),m=require("ariakit/dialog"),p=require("ariakit/portal"),f=require("./modal.module.css.js");const h=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],x=["children","button","withDivider","exceptionallySetClassName"],b=["exceptionallySetClassName","children"],g=["exceptionallySetClassName","withDivider"],C=["children"],j=a.createContext({onDismiss:void 0,height:"fitContent"});function v(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function E(e){const{onDismiss:l}=a.useContext(j),[r,o]=a.useState(!1),[n,i]=a.useState(!1);return a.useEffect((function(){n?o(!0):i(!0)}),[n]),a.createElement(s.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:l,icon:a.createElement(u.CloseIcon,null),tabIndex:r?0:-1}))}function S(e){let{exceptionallySetClassName:l,withDivider:o=!1}=e,i=t.objectWithoutProperties(e,g);return a.createElement(a.Fragment,null,o?a.createElement(n.Divider,null):null,a.createElement(r.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:l,padding:"large"})))}exports.Modal=function(e){let{isOpen:o,onDismiss:n,height:i="fitContent",width:s="medium",exceptionallySetClassName:u,autoFocus:x=!0,children:b}=e,g=t.objectWithoutProperties(e,h);const C=a.useCallback(e=>{e||null==n||n()},[n]),E=m.useDialogState({visible:o,setVisible:C}),S=a.useMemo(()=>({onDismiss:n,height:i}),[n,i]),y=a.useRef(null),w=a.useRef(null),N=a.useRef(null),q=a.useCallback(e=>{var t,a;null!=(t=w.current)&&t.contains(e.target)||null==(a=N.current)||!a.contains(e.target)||(e.stopPropagation(),null==n||n())},[n]);return a.useLayoutEffect((function(){if(o&&y.current)return d.hideOthers(y.current)}),[o]),o?a.createElement(p.Portal,{portalRef:y},a.createElement(r.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:l(f.default.overlay,f.default[i],f.default[s]),onClick:q,ref:N},a.createElement(c,{autoFocus:x,whiteList:v,returnFocus:!0},a.createElement(m.Dialog,t.objectSpread2(t.objectSpread2({},g),{},{ref:w,as:r.Box,state:E,hideOnEscape:!0,preventBodyScroll:!0,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[u,f.default.container],modal:!1,autoFocus:!1,autoFocusOnShow:!1,autoFocusOnHide:!1,portal:!1,backdrop:!1,hideOnInteractOutside:!1}),a.createElement(j.Provider,{value:S},b))))):null},exports.ModalActions=function(e){let{children:l}=e,r=t.objectWithoutProperties(e,C);return a.createElement(S,t.objectSpread2({},r),a.createElement(i.Inline,{align:"right",space:"large"},l))},exports.ModalBody=function(e){let{exceptionallySetClassName:l,children:o}=e,n=t.objectWithoutProperties(e,b);const{height:i}=a.useContext(j);return a.createElement(r.Box,t.objectSpread2(t.objectSpread2({},n),{},{className:l,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(r.Box,{padding:"large",paddingBottom:"xxlarge"},o))},exports.ModalCloseButton=E,exports.ModalFooter=S,exports.ModalHeader=function(e){let{children:l,button:i=!0,withDivider:s=!1,exceptionallySetClassName:u}=e,c=t.objectWithoutProperties(e,x);return a.createElement(a.Fragment,null,a.createElement(r.Box,t.objectSpread2(t.objectSpread2({},c),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:u}),a.createElement(o.Columns,{space:"large",alignY:"center"},a.createElement(o.Column,{width:"auto"},l),!1===i||null===i?a.createElement("div",{className:f.default.headerContent}):a.createElement(o.Column,{width:"content",exceptionallySetClassName:f.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(E,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(n.Divider,null):null)};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),l=e(require("classnames")),r=require("../box/box.js"),o=require("../columns/columns.js"),n=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("../button/button.js"),u=require("../icons/close-icon.js"),c=e(require("react-focus-lock")),d=require("aria-hidden"),m=require("ariakit/dialog"),p=require("ariakit/portal"),f=require("./modal.module.css.js");const h=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],x=["children","button","withDivider","exceptionallySetClassName"],b=["exceptionallySetClassName","children"],g=["exceptionallySetClassName","withDivider"],C=["children"],j=a.createContext({onDismiss:void 0,height:"fitContent"});function v(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function E(e){const{onDismiss:l}=a.useContext(j),[r,o]=a.useState(!1),[n,i]=a.useState(!1);return a.useEffect((function(){n?o(!0):i(!0)}),[n]),a.createElement(s.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:l,icon:a.createElement(u.CloseIcon,null),tabIndex:r?0:-1}))}function S(e){let{exceptionallySetClassName:l,withDivider:o=!1}=e,i=t.objectWithoutProperties(e,g);return a.createElement(a.Fragment,null,o?a.createElement(n.Divider,null):null,a.createElement(r.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:l,padding:"large"})))}exports.Modal=function(e){let{isOpen:o,onDismiss:n,height:i="fitContent",width:s="medium",exceptionallySetClassName:u,autoFocus:x=!0,children:b}=e,g=t.objectWithoutProperties(e,h);const C=a.useCallback(e=>{e||null==n||n()},[n]),E=m.useDialogState({visible:o,setVisible:C}),S=a.useMemo(()=>({onDismiss:n,height:i}),[n,i]),y=a.useRef(null),w=a.useRef(null),N=a.useRef(null),q=a.useCallback(e=>{var t,a;null!=(t=w.current)&&t.contains(e.target)||null==(a=N.current)||!a.contains(e.target)||(e.stopPropagation(),null==n||n())},[n]);return a.useLayoutEffect((function(){if(o&&y.current)return d.hideOthers(y.current)}),[o]),o?a.createElement(p.Portal,{portalRef:y},a.createElement(r.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:l(f.default.overlay,f.default[i],f.default[s]),onClick:q,ref:N},a.createElement(c,{autoFocus:x,whiteList:v,returnFocus:!0},a.createElement(m.Dialog,t.objectSpread2(t.objectSpread2({},g),{},{ref:w,as:r.Box,state:E,hideOnEscape:!0,preventBodyScroll:!0,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[u,f.default.container],modal:!1,autoFocus:!1,autoFocusOnShow:!1,autoFocusOnHide:!1,portal:!1,backdrop:!1,hideOnInteractOutside:!1}),a.createElement(j.Provider,{value:S},b))))):null},exports.ModalActions=function(e){let{children:l}=e,r=t.objectWithoutProperties(e,C);return a.createElement(S,t.objectSpread2({},r),a.createElement(i.Inline,{align:"right",space:"large"},l))},exports.ModalBody=function(e){let{exceptionallySetClassName:l,children:o}=e,n=t.objectWithoutProperties(e,b);const{height:i}=a.useContext(j);return a.createElement(r.Box,t.objectSpread2(t.objectSpread2({},n),{},{className:l,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(r.Box,{padding:"large",paddingBottom:"xxlarge"},o))},exports.ModalCloseButton=E,exports.ModalFooter=S,exports.ModalHeader=function(e){let{children:l,button:i=!0,withDivider:s=!1,exceptionallySetClassName:u}=e,c=t.objectWithoutProperties(e,x);return a.createElement(a.Fragment,null,a.createElement(r.Box,t.objectSpread2(t.objectSpread2({},c),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:u}),a.createElement(o.Columns,{space:"large",alignY:"center"},a.createElement(o.Column,{width:"auto"},l),!1===i||null===i?a.createElement("div",{className:f.default.headerContent}):a.createElement(o.Column,{width:"content",exceptionallySetClassName:f.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(E,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(n.Divider,null):null)};
 //# sourceMappingURL=modal.js.map

package/lib/new-components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, useDialogState } from 'ariakit/dialog'\nimport { Portal } from 'ariakit/portal'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const setVisible = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const state = useDialogState({ visible: isOpen, setVisible })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal\n            // @ts-expect-error `portalRef` doesn't accept MutableRefObject initialized as null\n            portalRef={portalRef}\n        >\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(styles.overlay, styles[height], styles[width])}\n                onClick={handleBackdropClick}\n                ref={backdropRef}\n            >\n                <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        as={Box}\n                        state={state}\n                        hideOnEscape\n                        preventBodyScroll\n                        borderRadius=\"full\"\n                        background=\"default\"\n                        display=\"flex\"\n                        flexDirection=\"column\"\n                        overflow=\"hidden\"\n                        height={height === 'expand' ? 'full' : undefined}\n                        flexGrow={height === 'expand' ? 1 : 0}\n                        className={[exceptionallySetClassName, styles.container]}\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","autoFocus","children","setVisible","visible","state","useDialogState","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","_dialogRef$current","contains","target","_backdropRef$current","stopPropagation","hideOthers","Portal","classNames","styles","overlay","ref","FocusLock","whiteList","returnFocus","Dialog","hideOnEscape","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","hideOnInteractOutside","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"q2BA6BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAqJnDC,EAAiBC,GAC7B,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cAqJ/BU,SAAYC,0BACxBA,EADwBC,YAExBA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,0CA5ThEC,OAClBA,EADkB7B,UAElBA,EAFkBE,OAGlBA,EAAS,aAHS4B,MAIlBA,EAAQ,SAJUR,0BAKlBA,EALkBS,UAMlBA,GAAY,EANMC,SAOlBA,KACGtB,iCAEH,MAAMuB,EAAalC,cACdmC,IACQA,SACDlC,GAAAA,KAGR,CAACA,IAECmC,EAAQC,iBAAe,CAAEF,QAASL,EAAQI,WAAAA,IAE1CI,EAAkCtC,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGEoC,EAAYvC,SAAiC,MAC7CwC,EAAYxC,SAAoC,MAChDyC,EAAczC,SAAoC,MAClD0C,EAAsB1C,cACvB2C,qBAIQH,EAAUI,UAAVC,EAAmBC,SAASH,EAAMI,kBAEnCN,EAAYG,WAAZI,EAAqBF,SAASH,EAAMI,UAEpCJ,EAAMM,wBACNhD,GAAAA,MAGR,CAACA,IAcL,OAXAD,mBACI,WACI,GAAK8B,GAAWS,EAAUK,QAI1B,OAAOM,aAAWX,EAAUK,WAEhC,CAACd,IAGAA,EAKD9B,gBAACmD,UAEGZ,UAAWA,GAEXvC,gBAAC0B,qBACe,kCAEZE,UAAWwB,EAAWC,UAAOC,QAASD,UAAOlD,GAASkD,UAAOtB,IAC7Db,QAASwB,EACTa,IAAKd,GAELzC,gBAACwD,GAAUxB,UAAWA,EAAWyB,UAAWrD,EAAoBsD,aAAa,GACzE1D,gBAAC2D,4CACOhD,OACJ4C,IAAKf,EACLb,GAAID,MACJU,MAAOA,EACPwB,gBACAC,qBACAC,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT/D,OAAmB,WAAXA,EAAsB,YAASD,EACvCiE,SAAqB,WAAXhE,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2B8B,UAAOe,WAE9CC,OAAO,EACPrC,WAAW,EACXsC,iBAAiB,EACjBC,iBAAiB,EAEjBC,QAAQ,EACRC,UAAU,EACVC,uBAAuB,IAEvB1E,gBAACD,EAAa4E,UAASC,MAAOtC,GACzBL,OA1Cd,2CAmRcA,SAAEA,KAAatB,iCACxC,OACIX,gBAACsB,qBAAgBX,GACbX,gBAAC6E,UAAOC,MAAM,QAAQC,MAAM,SACvB9C,uCAvESV,0BAAEA,EAAFU,SAA6BA,KAAatB,iCAChE,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACX4C,SAAqB,WAAXhE,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvCgE,SAAS,SAETlE,gBAAC0B,OAAIG,QAAQ,QAAQmD,cAAc,WAC9B/C,0FA/EWA,SACxBA,EADwBgD,OAExBA,GAAS,EAFezD,YAGxBA,GAAc,EAHUD,0BAIxBA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACHuD,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACTxD,UAAWL,IAEXvB,gBAACqF,WAAQN,MAAM,QAAQO,OAAO,UAC1BtF,gBAACuF,UAAOxD,MAAM,QAAQE,IACV,IAAXgD,GAA+B,OAAXA,EACjBjF,uBAAK4B,UAAWyB,UAAOmC,gBAEvBxF,gBAACuF,UACGxD,MAAM,UACNR,0BAA2B8B,UAAOoC,8BACtB,oBAEO,kBAAXR,EACJjF,gBAACU,gBAA4B,cAAcsB,WAAW,IAEtDiD,KAMnBzD,EAAcxB,gBAACyB,gBAAa"}
+{"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, useDialogState } from 'ariakit/dialog'\nimport { Portal } from 'ariakit/portal'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const setVisible = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const state = useDialogState({ visible: isOpen, setVisible })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal\n            // @ts-expect-error `portalRef` doesn't accept MutableRefObject initialized as null\n            portalRef={portalRef}\n        >\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(styles.overlay, styles[height], styles[width])}\n                onClick={handleBackdropClick}\n                ref={backdropRef}\n            >\n                <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        as={Box}\n                        state={state}\n                        hideOnEscape\n                        preventBodyScroll\n                        borderRadius=\"full\"\n                        background=\"default\"\n                        display=\"flex\"\n                        flexDirection=\"column\"\n                        overflow=\"hidden\"\n                        height={height === 'expand' ? 'full' : undefined}\n                        flexGrow={height === 'expand' ? 1 : 0}\n                        className={[exceptionallySetClassName, styles.container]}\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","autoFocus","children","setVisible","visible","state","useDialogState","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","_dialogRef$current","contains","target","_backdropRef$current","stopPropagation","hideOthers","Portal","classNames","styles","overlay","ref","FocusLock","whiteList","returnFocus","Dialog","hideOnEscape","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","hideOnInteractOutside","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"81BA6BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAqJnDC,EAAiBC,GAC7B,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cAqJ/BU,SAAYC,0BACxBA,EADwBC,YAExBA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,0CA5ThEC,OAClBA,EADkB7B,UAElBA,EAFkBE,OAGlBA,EAAS,aAHS4B,MAIlBA,EAAQ,SAJUR,0BAKlBA,EALkBS,UAMlBA,GAAY,EANMC,SAOlBA,KACGtB,iCAEH,MAAMuB,EAAalC,cACdmC,IACQA,SACDlC,GAAAA,KAGR,CAACA,IAECmC,EAAQC,iBAAe,CAAEF,QAASL,EAAQI,WAAAA,IAE1CI,EAAkCtC,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGEoC,EAAYvC,SAAiC,MAC7CwC,EAAYxC,SAAoC,MAChDyC,EAAczC,SAAoC,MAClD0C,EAAsB1C,cACvB2C,qBAIQH,EAAUI,UAAVC,EAAmBC,SAASH,EAAMI,kBAEnCN,EAAYG,WAAZI,EAAqBF,SAASH,EAAMI,UAEpCJ,EAAMM,wBACNhD,GAAAA,MAGR,CAACA,IAcL,OAXAD,mBACI,WACI,GAAK8B,GAAWS,EAAUK,QAI1B,OAAOM,aAAWX,EAAUK,WAEhC,CAACd,IAGAA,EAKD9B,gBAACmD,UAEGZ,UAAWA,GAEXvC,gBAAC0B,qBACe,kCAEZE,UAAWwB,EAAWC,UAAOC,QAASD,UAAOlD,GAASkD,UAAOtB,IAC7Db,QAASwB,EACTa,IAAKd,GAELzC,gBAACwD,GAAUxB,UAAWA,EAAWyB,UAAWrD,EAAoBsD,aAAa,GACzE1D,gBAAC2D,4CACOhD,OACJ4C,IAAKf,EACLb,GAAID,MACJU,MAAOA,EACPwB,gBACAC,qBACAC,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT/D,OAAmB,WAAXA,EAAsB,YAASD,EACvCiE,SAAqB,WAAXhE,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2B8B,UAAOe,WAE9CC,OAAO,EACPrC,WAAW,EACXsC,iBAAiB,EACjBC,iBAAiB,EAEjBC,QAAQ,EACRC,UAAU,EACVC,uBAAuB,IAEvB1E,gBAACD,EAAa4E,UAASC,MAAOtC,GACzBL,OA1Cd,2CAmRcA,SAAEA,KAAatB,iCACxC,OACIX,gBAACsB,qBAAgBX,GACbX,gBAAC6E,UAAOC,MAAM,QAAQC,MAAM,SACvB9C,uCAvESV,0BAAEA,EAAFU,SAA6BA,KAAatB,iCAChE,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACX4C,SAAqB,WAAXhE,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvCgE,SAAS,SAETlE,gBAAC0B,OAAIG,QAAQ,QAAQmD,cAAc,WAC9B/C,0FA/EWA,SACxBA,EADwBgD,OAExBA,GAAS,EAFezD,YAGxBA,GAAc,EAHUD,0BAIxBA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACHuD,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACTxD,UAAWL,IAEXvB,gBAACqF,WAAQN,MAAM,QAAQO,OAAO,UAC1BtF,gBAACuF,UAAOxD,MAAM,QAAQE,IACV,IAAXgD,GAA+B,OAAXA,EACjBjF,uBAAK4B,UAAWyB,UAAOmC,gBAEvBxF,gBAACuF,UACGxD,MAAM,UACNR,0BAA2B8B,UAAOoC,8BACtB,oBAEO,kBAAXR,EACJjF,gBAACU,gBAA4B,cAAcsB,WAAW,IAEtDiD,KAMnBzD,EAAcxB,gBAACyB,gBAAa"}

package/lib/new-components/stack/stack.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=(e(t),require("../../utils/polymorphism.js")),s=require("../responsive-props.js"),a=require("../box/box.js"),l=require("../divider/divider.js"),n=e(require("react-keyed-flatten-children")),o=require("./stack.module.css.js");const c=["as","space","align","dividers","children","exceptionallySetClassName"];exports.Stack=i.polymorphicComponent((function(e,i){let{as:d,space:p,align:u="start",dividers:m="none",children:f,exceptionallySetClassName:j}=e,v=r.objectWithoutProperties(e,c);const x="start"===u?void 0:{width:"full",flexDirection:"column",display:"flex",alignItems:s.mapResponsiveProp(u,e=>"start"===e?"flexStart":"end"===e?"flexEnd":"center")};return t.createElement(a.Box,r.objectSpread2(r.objectSpread2(r.objectSpread2({},v),x),{},{as:d,className:[j,s.getClassNames(o.default,"space",p)],ref:i}),"none"!==m?t.Children.map(n(f),(e,r)=>r>0?t.createElement(t.Fragment,null,t.createElement(l.Divider,{weight:m}),e):e):f)}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),s=require("../../utils/polymorphism.js"),i=require("../responsive-props.js"),a=require("../box/box.js"),l=require("../divider/divider.js"),o=(e=require("react-keyed-flatten-children"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("./stack.module.css.js");const c=["as","space","align","dividers","children","exceptionallySetClassName"];exports.Stack=s.polymorphicComponent((function(e,s){let{as:d,space:p,align:u="start",dividers:m="none",children:f,exceptionallySetClassName:j}=e,v=r.objectWithoutProperties(e,c);const x="start"===u?void 0:{width:"full",flexDirection:"column",display:"flex",alignItems:i.mapResponsiveProp(u,e=>"start"===e?"flexStart":"end"===e?"flexEnd":"center")};return t.createElement(a.Box,r.objectSpread2(r.objectSpread2(r.objectSpread2({},v),x),{},{as:d,className:[j,i.getClassNames(n.default,"space",p)],ref:s}),"none"!==m?t.Children.map(o(f),(e,r)=>r>0?t.createElement(t.Fragment,null,t.createElement(l.Divider,{weight:m}),e):e):f)}));
 //# sourceMappingURL=stack.js.map

package/lib/new-components/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sources":["../../../src/new-components/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { DividerWeight, Space } from '../common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\nimport styles from './stack.module.css'\n\ntype Align = 'start' | 'center' | 'end'\n\ninterface StackProps extends ReusableBoxProps {\n    /** Space between items */\n    space?: ResponsiveProp<Space>\n    /** Align items horizontally */\n    align?: ResponsiveProp<Align>\n    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */\n    dividers?: DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n    {\n        as,\n        space,\n        align = 'start',\n        dividers = 'none',\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const alignProps: BoxProps | undefined =\n        align === 'start'\n            ? undefined\n            : {\n                  width: 'full',\n                  flexDirection: 'column',\n                  display: 'flex',\n                  alignItems: mapResponsiveProp(align, (align) =>\n                      align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n                  ),\n              }\n\n    return (\n        <Box\n            {...props}\n            {...alignProps}\n            as={as}\n            className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\n            ref={ref}\n        >\n            {dividers !== 'none'\n                ? React.Children.map(flattenChildren(children), (child, index) =>\n                      index > 0 ? (\n                          <>\n                              <Divider weight={dividers} />\n                              {child}\n                          </>\n                      ) : (\n                          child\n                      ),\n                  )\n                : children}\n        </Box>\n    )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["polymorphicComponent","ref","as","space","align","dividers","children","exceptionallySetClassName","props","alignProps","undefined","width","flexDirection","display","alignItems","mapResponsiveProp","React","Box","className","getClassNames","styles","map","flattenChildren","child","index","Divider","weight"],"mappings":"2hBAwBcA,wBAAwC,WAUlDC,OATAC,GACIA,EADJC,MAEIA,EAFJC,MAGIA,EAAQ,QAHZC,SAIIA,EAAW,OAJfC,SAKIA,EALJC,0BAMIA,KACGC,iCAIP,MAAMC,EACQ,UAAVL,OACMM,EACA,CACIC,MAAO,OACPC,cAAe,SACfC,QAAS,OACTC,WAAYC,oBAAkBX,EAAQA,GACxB,UAAVA,EAAoB,YAAwB,QAAVA,EAAkB,UAAY,WAIlF,OACIY,gBAACC,yDACOT,GACAC,OACJP,GAAIA,EACJgB,UAAW,CAACX,EAA2BY,gBAAcC,UAAQ,QAASjB,IACtEF,IAAKA,IAES,SAAbI,EACKW,WAAeK,IAAIC,EAAgBhB,GAAW,CAACiB,EAAOC,IAClDA,EAAQ,EACJR,gCACIA,gBAACS,WAAQC,OAAQrB,IAChBkB,GAGLA,GAGRjB"}
+{"version":3,"file":"stack.js","sources":["../../../src/new-components/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { DividerWeight, Space } from '../common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\nimport styles from './stack.module.css'\n\ntype Align = 'start' | 'center' | 'end'\n\ninterface StackProps extends ReusableBoxProps {\n    /** Space between items */\n    space?: ResponsiveProp<Space>\n    /** Align items horizontally */\n    align?: ResponsiveProp<Align>\n    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */\n    dividers?: DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n    {\n        as,\n        space,\n        align = 'start',\n        dividers = 'none',\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const alignProps: BoxProps | undefined =\n        align === 'start'\n            ? undefined\n            : {\n                  width: 'full',\n                  flexDirection: 'column',\n                  display: 'flex',\n                  alignItems: mapResponsiveProp(align, (align) =>\n                      align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n                  ),\n              }\n\n    return (\n        <Box\n            {...props}\n            {...alignProps}\n            as={as}\n            className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\n            ref={ref}\n        >\n            {dividers !== 'none'\n                ? React.Children.map(flattenChildren(children), (child, index) =>\n                      index > 0 ? (\n                          <>\n                              <Divider weight={dividers} />\n                              {child}\n                          </>\n                      ) : (\n                          child\n                      ),\n                  )\n                : children}\n        </Box>\n    )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["polymorphicComponent","ref","as","space","align","dividers","children","exceptionallySetClassName","props","alignProps","undefined","width","flexDirection","display","alignItems","mapResponsiveProp","React","Box","className","getClassNames","styles","map","flattenChildren","child","index","Divider","weight"],"mappings":"ggBAwBcA,wBAAwC,WAUlDC,OATAC,GACIA,EADJC,MAEIA,EAFJC,MAGIA,EAAQ,QAHZC,SAIIA,EAAW,OAJfC,SAKIA,EALJC,0BAMIA,KACGC,iCAIP,MAAMC,EACQ,UAAVL,OACMM,EACA,CACIC,MAAO,OACPC,cAAe,SACfC,QAAS,OACTC,WAAYC,oBAAkBX,EAAQA,GACxB,UAAVA,EAAoB,YAAwB,QAAVA,EAAkB,UAAY,WAIlF,OACIY,gBAACC,yDACOT,GACAC,OACJP,GAAIA,EACJgB,UAAW,CAACX,EAA2BY,gBAAcC,UAAQ,QAASjB,IACtEF,IAAKA,IAES,SAAbI,EACKW,WAAeK,IAAIC,EAAgBhB,GAAW,CAACiB,EAAOC,IAClDA,EAAQ,EACJR,gCACIA,gBAACS,WAAQC,OAAQrB,IAChBkB,GAGLA,GAGRjB"}

package/lib/new-components/tabs/tabs.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=(e(a),e(require("classnames"))),n=require("../../utils/polymorphism.js"),l=require("../box/box.js"),s=require("../inline/inline.js"),o=require("ariakit/tab"),i=require("../../hooks/use-previous/use-previous.js"),c=require("./tabs.module.css.js");const u=["as","children","id","exceptionallySetClassName"],d=["children","space"],p=["children","id","as","render"],b=a.createContext(null),f=n.polymorphicComponent((function(e,n){let{as:l,children:s,id:i,exceptionallySetClassName:d}=e,p=t.objectWithoutProperties(e,u);const f=a.useContext(b);if(!f)return null;const{variant:m,tabState:x}=f;return a.createElement(o.Tab,t.objectSpread2(t.objectSpread2({},p),{},{as:l,className:r(d,c.default.tab,c.default["tab-"+m]),id:i,state:x,ref:n}),s)})),m=n.polymorphicComponent((function(e,r){let{children:n,id:l,as:s,render:i="always"}=e,c=t.objectWithoutProperties(e,p);const u=a.useContext(b),[d,f]=a.useState(!1),m=(null==u?void 0:u.tabState.selectedId)===l;if(a.useEffect((function(){!d&&m&&f(!0)}),[d,m]),!u)return null;const{tabState:x}=u;return"always"===i||"active"===i&&m||"lazy"===i&&(m||d)?a.createElement(o.TabPanel,t.objectSpread2(t.objectSpread2({tabId:l},c),{},{state:x,as:s,ref:r}),n):null}));exports.Tab=f,exports.TabAwareSlot=function({children:e}){const t=a.useContext(b);return t?e({selectedId:null==t?void 0:t.tabState.selectedId}):null},exports.TabList=function(e){let{children:n,space:i="xsmall"}=e,u=t.objectWithoutProperties(e,d);const p=a.useContext(b);if(!p)return null;const{tabState:f,variant:m}=p;return a.createElement(l.Box,null,a.createElement(o.TabList,t.objectSpread2({state:f,as:l.Box,position:"relative",width:"maxContent"},u),a.createElement(l.Box,{className:r(c.default.track,c.default["track-"+i],c.default["track-"+m])}),a.createElement(s.Inline,{space:i},n)))},exports.TabPanel=m,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:n="neutral",onSelectedIdChange:l}){const s=o.useTabState({selectedId:t,setSelectedId:l}),c=i.usePrevious(r),{selectedId:u,select:d}=s;a.useEffect((function(){t||r===c||r===u||void 0===r||d(r)}),[t,r,u,d,c]);const p=a.useMemo((function(){return{tabState:s,variant:n}}),[n,s]);return a.createElement(b.Provider,{value:p},e)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=(e=require("classnames"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("../../utils/polymorphism.js"),l=require("../box/box.js"),s=require("../inline/inline.js"),o=require("ariakit/tab"),i=require("../../hooks/use-previous/use-previous.js"),c=require("./tabs.module.css.js");const u=["as","children","id","exceptionallySetClassName"],d=["children","space"],p=["children","id","as","render"],b=a.createContext(null),f=n.polymorphicComponent((function(e,n){let{as:l,children:s,id:i,exceptionallySetClassName:d}=e,p=t.objectWithoutProperties(e,u);const f=a.useContext(b);if(!f)return null;const{variant:m,tabState:x}=f;return a.createElement(o.Tab,t.objectSpread2(t.objectSpread2({},p),{},{as:l,className:r(d,c.default.tab,c.default["tab-"+m]),id:i,state:x,ref:n}),s)})),m=n.polymorphicComponent((function(e,r){let{children:n,id:l,as:s,render:i="always"}=e,c=t.objectWithoutProperties(e,p);const u=a.useContext(b),[d,f]=a.useState(!1),m=(null==u?void 0:u.tabState.selectedId)===l;if(a.useEffect((function(){!d&&m&&f(!0)}),[d,m]),!u)return null;const{tabState:x}=u;return"always"===i||"active"===i&&m||"lazy"===i&&(m||d)?a.createElement(o.TabPanel,t.objectSpread2(t.objectSpread2({tabId:l},c),{},{state:x,as:s,ref:r}),n):null}));exports.Tab=f,exports.TabAwareSlot=function({children:e}){const t=a.useContext(b);return t?e({selectedId:null==t?void 0:t.tabState.selectedId}):null},exports.TabList=function(e){let{children:n,space:i="xsmall"}=e,u=t.objectWithoutProperties(e,d);const p=a.useContext(b);if(!p)return null;const{tabState:f,variant:m}=p;return a.createElement(l.Box,null,a.createElement(o.TabList,t.objectSpread2({state:f,as:l.Box,position:"relative",width:"maxContent"},u),a.createElement(l.Box,{className:r(c.default.track,c.default["track-"+i],c.default["track-"+m])}),a.createElement(s.Inline,{space:i},n)))},exports.TabPanel=m,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:n="neutral",onSelectedIdChange:l}){const s=o.useTabState({selectedId:t,setSelectedId:l}),c=i.usePrevious(r),{selectedId:u,select:d}=s;a.useEffect((function(){t||r===c||r===u||void 0===r||d(r)}),[t,r,u,d,c]);const p=a.useMemo((function(){return{tabState:s,variant:n}}),[n,s]);return a.createElement(b.Provider,{value:p},e)};
 //# sourceMappingURL=tabs.js.map

package/lib/new-components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/new-components/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nexport function Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                variant,\n            }\n        },\n        [variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nexport const Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n            id={id}\n            state={tabState}\n            ref={ref}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nexport function TabList({\n    children,\n    space = 'xsmall',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                state={tabState}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box\n                    className={classNames(\n                        styles.track,\n                        styles[`track-${space}`],\n                        styles[`track-${variant}`],\n                    )}\n                />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nexport const TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(\n    function TabPanel(\n        { children, id, as, render = 'always', ...props },\n        ref,\n    ): React.ReactElement | null {\n        const tabContextValue = React.useContext(TabsContext)\n        const [tabRendered, setTabRendered] = React.useState(false)\n        const tabIsActive = tabContextValue?.tabState.selectedId === id\n\n        React.useEffect(\n            function trackTabRenderedState() {\n                if (!tabRendered && tabIsActive) {\n                    setTabRendered(true)\n                }\n            },\n            [tabRendered, tabIsActive],\n        )\n\n        if (!tabContextValue) {\n            return null\n        }\n\n        const { tabState } = tabContextValue\n        const shouldRender =\n            render === 'always' ||\n            (render === 'active' && tabIsActive) ||\n            (render === 'lazy' && (tabIsActive || tabRendered))\n\n        return shouldRender ? (\n            <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n                {children}\n            </BaseTabPanel>\n        ) : null\n    },\n)\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nexport function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n"],"names":["TabsContext","React","Tab","polymorphicComponent","ref","as","children","id","exceptionallySetClassName","props","tabContextValue","variant","tabState","BaseTab","className","classNames","styles","tab","state","TabPanel","render","tabRendered","setTabRendered","tabIsActive","selectedId","BaseTabPanel","tabId","space","Box","BaseTabList","position","width","track","Inline","defaultSelectedId","onSelectedIdChange","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","undefined","memoizedTabState","Provider","value"],"mappings":"skBAqBMA,EAAcC,gBAA6C,MA6EpDC,EAAMC,wBAAyC,WAExDC,OADAC,GAAEA,EAAFC,SAAMA,EAANC,GAAgBA,EAAhBC,0BAAoBA,KAA8BC,iCAGlD,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAMC,QAAEA,EAAFC,SAAWA,GAAaF,EAE9B,OACIT,gBAACY,yCACOJ,OACJJ,GAAIA,EACJS,UAAWC,EAAWP,EAA2BQ,UAAOC,IAAKD,iBAAcL,IAC3EJ,GAAIA,EACJW,MAAON,EACPR,IAAKA,IAEJE,MA6FAa,EAAWhB,wBACpB,WAEIC,OADAE,SAAEA,EAAFC,GAAYA,EAAZF,GAAgBA,EAAhBe,OAAoBA,EAAS,YAAaX,iCAG1C,MAAMC,EAAkBT,aAAiBD,IAClCqB,EAAaC,GAAkBrB,YAAe,GAC/CsB,SAAcb,SAAAA,EAAiBE,SAASY,cAAejB,EAW7D,GATAN,aACI,YACSoB,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbb,EACD,OAAO,KAGX,MAAME,SAAEA,GAAaF,EAMrB,MAJe,WAAXU,GACY,WAAXA,GAAuBG,GACZ,SAAXH,IAAsBG,GAAeF,GAGtCpB,gBAACwB,4CAAaC,MAAOnB,GAAQE,OAAOS,MAAON,EAAUP,GAAIA,EAAID,IAAKA,IAC7DE,GAEL,qDAgBiBA,SAAEA,IAC3B,MAAMI,EAAkBT,aAAiBD,GAEzC,OAAOU,EAAkBJ,EAAS,CAAEkB,iBAAYd,SAAAA,EAAiBE,SAASY,aAAgB,sCA1GtElB,SACpBA,EADoBqB,MAEpBA,EAAQ,YACLlB,iCAEH,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAME,SAAEA,EAAFD,QAAYA,GAAYD,EAE9B,OAGIT,gBAAC2B,WACG3B,gBAAC4B,2BACGX,MAAON,EACPP,GAAIuB,MACJE,SAAS,WACTC,MAAM,cACFtB,GAEJR,gBAAC2B,OACGd,UAAWC,EACPC,UAAOgB,MACPhB,mBAAgBW,GAChBX,mBAAgBL,MAGxBV,gBAACgC,UAAON,MAAOA,GAAQrB,gDA3IlBA,SACjBA,EADiBkB,WAEjBA,EAFiBU,kBAGjBA,EAHiBvB,QAIjBA,EAAU,UAJOwB,mBAKjBA,IAEA,MAAMvB,EAAWwB,cAAY,CAAEZ,WAAAA,EAAYa,cAAeF,IACpDG,EAA4BC,cAAYL,IACtCV,WAAYgB,EAAdC,OAAgCA,GAAW7B,EAEjDX,aACI,WAESuB,GACDU,IAAsBI,GACtBJ,IAAsBM,QACAE,IAAtBR,GAEAO,EAAOP,KAGf,CAACV,EAAYU,EAAmBM,EAAkBC,EAAQH,IAG9D,MAAMK,EAAmB1C,WACrB,WACI,MAAO,CACHW,SAAAA,EACAD,QAAAA,KAGR,CAACA,EAASC,IAGd,OAAOX,gBAACD,EAAY4C,UAASC,MAAOF,GAAmBrC"}
+{"version":3,"file":"tabs.js","sources":["../../../src/new-components/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nexport function Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                variant,\n            }\n        },\n        [variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nexport const Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n            id={id}\n            state={tabState}\n            ref={ref}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nexport function TabList({\n    children,\n    space = 'xsmall',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                state={tabState}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box\n                    className={classNames(\n                        styles.track,\n                        styles[`track-${space}`],\n                        styles[`track-${variant}`],\n                    )}\n                />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nexport const TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(\n    function TabPanel(\n        { children, id, as, render = 'always', ...props },\n        ref,\n    ): React.ReactElement | null {\n        const tabContextValue = React.useContext(TabsContext)\n        const [tabRendered, setTabRendered] = React.useState(false)\n        const tabIsActive = tabContextValue?.tabState.selectedId === id\n\n        React.useEffect(\n            function trackTabRenderedState() {\n                if (!tabRendered && tabIsActive) {\n                    setTabRendered(true)\n                }\n            },\n            [tabRendered, tabIsActive],\n        )\n\n        if (!tabContextValue) {\n            return null\n        }\n\n        const { tabState } = tabContextValue\n        const shouldRender =\n            render === 'always' ||\n            (render === 'active' && tabIsActive) ||\n            (render === 'lazy' && (tabIsActive || tabRendered))\n\n        return shouldRender ? (\n            <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n                {children}\n            </BaseTabPanel>\n        ) : null\n    },\n)\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nexport function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n"],"names":["TabsContext","React","Tab","polymorphicComponent","ref","as","children","id","exceptionallySetClassName","props","tabContextValue","variant","tabState","BaseTab","className","classNames","styles","tab","state","TabPanel","render","tabRendered","setTabRendered","tabIsActive","selectedId","BaseTabPanel","tabId","space","Box","BaseTabList","position","width","track","Inline","defaultSelectedId","onSelectedIdChange","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","undefined","memoizedTabState","Provider","value"],"mappings":"2iBAqBMA,EAAcC,gBAA6C,MA6EpDC,EAAMC,wBAAyC,WAExDC,OADAC,GAAEA,EAAFC,SAAMA,EAANC,GAAgBA,EAAhBC,0BAAoBA,KAA8BC,iCAGlD,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAMC,QAAEA,EAAFC,SAAWA,GAAaF,EAE9B,OACIT,gBAACY,yCACOJ,OACJJ,GAAIA,EACJS,UAAWC,EAAWP,EAA2BQ,UAAOC,IAAKD,iBAAcL,IAC3EJ,GAAIA,EACJW,MAAON,EACPR,IAAKA,IAEJE,MA6FAa,EAAWhB,wBACpB,WAEIC,OADAE,SAAEA,EAAFC,GAAYA,EAAZF,GAAgBA,EAAhBe,OAAoBA,EAAS,YAAaX,iCAG1C,MAAMC,EAAkBT,aAAiBD,IAClCqB,EAAaC,GAAkBrB,YAAe,GAC/CsB,SAAcb,SAAAA,EAAiBE,SAASY,cAAejB,EAW7D,GATAN,aACI,YACSoB,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbb,EACD,OAAO,KAGX,MAAME,SAAEA,GAAaF,EAMrB,MAJe,WAAXU,GACY,WAAXA,GAAuBG,GACZ,SAAXH,IAAsBG,GAAeF,GAGtCpB,gBAACwB,4CAAaC,MAAOnB,GAAQE,OAAOS,MAAON,EAAUP,GAAIA,EAAID,IAAKA,IAC7DE,GAEL,qDAgBiBA,SAAEA,IAC3B,MAAMI,EAAkBT,aAAiBD,GAEzC,OAAOU,EAAkBJ,EAAS,CAAEkB,iBAAYd,SAAAA,EAAiBE,SAASY,aAAgB,sCA1GtElB,SACpBA,EADoBqB,MAEpBA,EAAQ,YACLlB,iCAEH,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAME,SAAEA,EAAFD,QAAYA,GAAYD,EAE9B,OAGIT,gBAAC2B,WACG3B,gBAAC4B,2BACGX,MAAON,EACPP,GAAIuB,MACJE,SAAS,WACTC,MAAM,cACFtB,GAEJR,gBAAC2B,OACGd,UAAWC,EACPC,UAAOgB,MACPhB,mBAAgBW,GAChBX,mBAAgBL,MAGxBV,gBAACgC,UAAON,MAAOA,GAAQrB,gDA3IlBA,SACjBA,EADiBkB,WAEjBA,EAFiBU,kBAGjBA,EAHiBvB,QAIjBA,EAAU,UAJOwB,mBAKjBA,IAEA,MAAMvB,EAAWwB,cAAY,CAAEZ,WAAAA,EAAYa,cAAeF,IACpDG,EAA4BC,cAAYL,IACtCV,WAAYgB,EAAdC,OAAgCA,GAAW7B,EAEjDX,aACI,WAESuB,GACDU,IAAsBI,GACtBJ,IAAsBM,QACAE,IAAtBR,GAEAO,EAAOP,KAGf,CAACV,EAAYU,EAAmBM,EAAkBC,EAAQH,IAG9D,MAAMK,EAAmB1C,WACrB,WACI,MAAO,CACHW,SAAAA,EACAD,QAAAA,KAGR,CAACA,EAASC,IAGd,OAAOX,gBAACD,EAAY4C,UAASC,MAAOF,GAAmBrC"}

package/package.json

@@ -2,7 +2,7 @@
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
     "author": "Henning Muszynski <henning@doist.com> (http://doist.com)",
-    "version": "15.1.0",
+    "version": "15.3.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",

package/styles/badge.css

@@ -0,0 +1,5 @@
+.f9408a0e{box-sizing:border-box;border:0;margin:0;padding:0;font-size:var(--reactist-font-size-body);font-family:inherit;vertical-align:baseline;background-color:transparent;list-style:none}pre.f9408a0e{font-family:monospace}.f9408a0e[hidden]{display:none!important}._7807dcdd{position:absolute}.dc5f328c{position:fixed}._0e4ff085{position:relative}._4019d94a{position:-webkit-sticky;position:sticky}@media (min-width:768px){.b1865c0f{position:absolute}.af8c5967{position:fixed}.ef2b609f{position:relative}._04935ffd{position:-webkit-sticky;position:sticky}}@media (min-width:992px){.bda94091{position:absolute}._691dfd31{position:fixed}.efda904e{position:relative}.bcf04687{position:-webkit-sticky;position:sticky}}.b5b9f34a{display:block}._6e9db9aa{display:flex}.ece6d246{display:inline}.e5e2223f{display:inline-block}.f344a0e2{display:inline-flex}._9002f8c2{display:none}@media (min-width:768px){.d896f0ff{display:block}._56412665{display:flex}._6b430cc5{display:inline}._4158c5ad{display:inline-block}.c598eaab{display:inline-flex}._5a2a6d3f{display:none}}@media (min-width:992px){._132ef8fb{display:block}._5bd11385{display:flex}.a51c2ec9{display:inline}._93506988{display:inline-block}._385d45a5{display:inline-flex}._921732eb{display:none}}._41ef5755{flex-direction:column}._6cad1a19{flex-direction:row}@media (min-width:768px){.f1c16205{flex-direction:column}._65305ae1{flex-direction:row}}@media (min-width:992px){._4916f0f9{flex-direction:column}._430dfc8e{flex-direction:row}}._3d2d56fe{flex-wrap:wrap}._826e4adf{flex-wrap:nowrap}.f8344e0f{flex-shrink:0}.f117e2ab{flex-grow:0}._1355325c{flex-grow:1}.c5b05c6a{align-items:flex-start}._21b8bafa{align-items:center}._56d73c9b{align-items:flex-end}._052e0707{align-items:baseline}@media (min-width:768px){._90048c98{align-items:flex-start}._7e189a0b{align-items:center}.b8aefb5c{align-items:flex-end}._4c1a5ef9{align-items:baseline}}@media (min-width:992px){.f4d052ef{align-items:flex-start}.e5478926{align-items:center}.b4f5051a{align-items:flex-end}.b21adace{align-items:baseline}}.be6deb6a{justify-content:flex-start}.d8eaf780{justify-content:center}._9212ca89{justify-content:flex-end}._5d2cd095{justify-content:space-around}._00d5fe7e{justify-content:space-between}.ce4f4c2d{justify-content:space-evenly}@media (min-width:768px){._6580dbbc{justify-content:flex-start}._3f689891{justify-content:center}._628df8db{justify-content:flex-end}._3ea88b4f{justify-content:space-around}._4554d93d{justify-content:space-between}.eb13fb50{justify-content:space-evenly}}@media (min-width:992px){._36dc744d{justify-content:flex-start}.ee7077ab{justify-content:center}._4edc8c86{justify-content:flex-end}._3ea88b4f{justify-content:space-around}._7e147696{justify-content:space-between}.eb13fb50{justify-content:space-evenly}}.c0655cd6{align-self:stretch}._11863030{align-self:flex-start}.c6d86139{align-self:center}.c0bd1f82{align-self:flex-end}._95686aec{align-self:baseline}@media (min-width:768px){._9b712cc7{align-self:stretch}.f7b935f7{align-self:flex-start}.bf9ad125{align-self:center}._3b4f8c3c{align-self:flex-end}._49d27079{align-self:baseline}}@media (min-width:992px){._63d27ffa{align-self:stretch}.d45796cc{align-self:flex-start}.c91c7bf7{align-self:center}.f2453212{align-self:flex-end}._3882757c{align-self:baseline}}._473810b4{overflow:hidden}._051c2340{overflow:auto}._14e451d1{overflow:visible}._4d8555f8{overflow:scroll}._867d251e{height:100%}._2d928bf8{background-color:var(--reactist-bg-default)}.db3f5af6{background-color:var(--reactist-bg-aside)}.c990fcc3{background-color:var(--reactist-bg-highlight)}._976a662f{background-color:var(--reactist-bg-selected)}._46b52f05{border-radius:var(--reactist-border-radius-small)}._1c8b326b{border-radius:var(--reactist-border-radius-large)}._0ef8c314{border:1px solid var(--reactist-divider-primary)}._14871605{border:1px solid var(--reactist-divider-secondary)}._36c045c3{border:1px solid var(--reactist-divider-tertiary)}.d745aa1e{text-align:start}._31cf99c5{text-align:center}._10a7a030{text-align:end}._2cfc8b46{text-align:justify}@media (min-width:768px){.e6b7bb40{text-align:start}._47dcb91c{text-align:center}._1d4011ce{text-align:end}._18407499{text-align:justify}}@media (min-width:992px){._565de5cf{text-align:start}._64254ba3{text-align:center}._3cc6a504{text-align:end}._0efec659{text-align:justify}}
+.c4803194{padding-top:var(--reactist-spacing-xsmall)}._4e9ab24b{padding-top:var(--reactist-spacing-small)}._1d226e27{padding-top:var(--reactist-spacing-medium)}.eb6097f1{padding-top:var(--reactist-spacing-large)}.d3229ba4{padding-top:var(--reactist-spacing-xlarge)}._47978ba4{padding-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f987719c{padding-top:var(--reactist-spacing-xsmall)}._8dbc4b4d{padding-top:var(--reactist-spacing-small)}.ae44fe07{padding-top:var(--reactist-spacing-medium)}.ffe9548d{padding-top:var(--reactist-spacing-large)}.f2b76a44{padding-top:var(--reactist-spacing-xlarge)}.c6eb8f43{padding-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._8699b560{padding-top:var(--reactist-spacing-xsmall)}._02c374b7{padding-top:var(--reactist-spacing-small)}._0dd0332f{padding-top:var(--reactist-spacing-medium)}.da55f1f6{padding-top:var(--reactist-spacing-large)}._8ef2a278{padding-top:var(--reactist-spacing-xlarge)}._8b493b28{padding-top:var(--reactist-spacing-xxlarge)}}._211eebc7{padding-right:var(--reactist-spacing-xsmall)}.ad0ccf15{padding-right:var(--reactist-spacing-small)}.a03e39af{padding-right:var(--reactist-spacing-medium)}.f0941ead{padding-right:var(--reactist-spacing-large)}.e47c5a43{padding-right:var(--reactist-spacing-xlarge)}.e849a5cf{padding-right:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._85374228{padding-right:var(--reactist-spacing-xsmall)}._89df37b9{padding-right:var(--reactist-spacing-small)}._1cc50ebe{padding-right:var(--reactist-spacing-medium)}._1060982b{padding-right:var(--reactist-spacing-large)}.be58847d{padding-right:var(--reactist-spacing-xlarge)}._45093484{padding-right:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.f8d99d6a{padding-right:var(--reactist-spacing-xsmall)}.efa076d9{padding-right:var(--reactist-spacing-small)}.e59caa64{padding-right:var(--reactist-spacing-medium)}.da42f46a{padding-right:var(--reactist-spacing-large)}.b3ee2580{padding-right:var(--reactist-spacing-xlarge)}._3ef94658{padding-right:var(--reactist-spacing-xxlarge)}}.b0e6eab4{padding-bottom:var(--reactist-spacing-xsmall)}._9510d053{padding-bottom:var(--reactist-spacing-small)}.d7af60c9{padding-bottom:var(--reactist-spacing-medium)}.b75f86cd{padding-bottom:var(--reactist-spacing-large)}.fbd4ce29{padding-bottom:var(--reactist-spacing-xlarge)}._33e3ad63{padding-bottom:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f0302da7{padding-bottom:var(--reactist-spacing-xsmall)}._4f9b8012{padding-bottom:var(--reactist-spacing-small)}._4333e20e{padding-bottom:var(--reactist-spacing-medium)}._30bbc76c{padding-bottom:var(--reactist-spacing-large)}.ba5a4008{padding-bottom:var(--reactist-spacing-xlarge)}._423a3b1a{padding-bottom:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b40139b7{padding-bottom:var(--reactist-spacing-xsmall)}.f96071fa{padding-bottom:var(--reactist-spacing-small)}.fe803c9a{padding-bottom:var(--reactist-spacing-medium)}._01686eb9{padding-bottom:var(--reactist-spacing-large)}.afa763d8{padding-bottom:var(--reactist-spacing-xlarge)}.a95785f1{padding-bottom:var(--reactist-spacing-xxlarge)}}.cad4e2ec{padding-left:var(--reactist-spacing-xsmall)}.d70b3c17{padding-left:var(--reactist-spacing-small)}._8c851bd6{padding-left:var(--reactist-spacing-medium)}._078feb3c{padding-left:var(--reactist-spacing-large)}._76ab968c{padding-left:var(--reactist-spacing-xlarge)}.aaca85d7{padding-left:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5eb0e5aa{padding-left:var(--reactist-spacing-xsmall)}._0384fb4f{padding-left:var(--reactist-spacing-small)}.edffff6f{padding-left:var(--reactist-spacing-medium)}._873b9a46{padding-left:var(--reactist-spacing-large)}._89105db5{padding-left:var(--reactist-spacing-xlarge)}.db1966fe{padding-left:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b17f826b{padding-left:var(--reactist-spacing-xsmall)}._6dc83610{padding-left:var(--reactist-spacing-small)}._3421b8b2{padding-left:var(--reactist-spacing-medium)}._68cec7a6{padding-left:var(--reactist-spacing-large)}._94bde020{padding-left:var(--reactist-spacing-xlarge)}.b94ee579{padding-left:var(--reactist-spacing-xxlarge)}}
+.c7813d79{margin-top:var(--reactist-spacing-xsmall)}.d3449da6{margin-top:var(--reactist-spacing-small)}._4ea254c1{margin-top:var(--reactist-spacing-medium)}.c0844f64{margin-top:var(--reactist-spacing-large)}._213145b4{margin-top:var(--reactist-spacing-xlarge)}.df61c84c{margin-top:var(--reactist-spacing-xxlarge)}.efe72b13{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._870c2768{margin-top:calc(var(--reactist-spacing-small)*-1)}._0b927c57{margin-top:calc(var(--reactist-spacing-medium)*-1)}._461db014{margin-top:calc(var(--reactist-spacing-large)*-1)}._2a3a8cb8{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._9bcda921{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6add01e4{margin-top:var(--reactist-spacing-xsmall)}._735ef86b{margin-top:var(--reactist-spacing-small)}._0477d068{margin-top:var(--reactist-spacing-medium)}._2c90af97{margin-top:var(--reactist-spacing-large)}._63a82db6{margin-top:var(--reactist-spacing-xlarge)}._03cd7726{margin-top:var(--reactist-spacing-xxlarge)}.c986a62a{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.be2bdcdd{margin-top:calc(var(--reactist-spacing-small)*-1)}._47d2686b{margin-top:calc(var(--reactist-spacing-medium)*-1)}._25e5af9d{margin-top:calc(var(--reactist-spacing-large)*-1)}.ee82f441{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.a6f9d404{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._4d8d9a36{margin-top:var(--reactist-spacing-xsmall)}.e813cee7{margin-top:var(--reactist-spacing-small)}._56975b7d{margin-top:var(--reactist-spacing-medium)}._53b367f6{margin-top:var(--reactist-spacing-large)}.d69e7311{margin-top:var(--reactist-spacing-xlarge)}._92f57c7e{margin-top:var(--reactist-spacing-xxlarge)}._96880d3e{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.dc3f3555{margin-top:calc(var(--reactist-spacing-small)*-1)}._86dd06bb{margin-top:calc(var(--reactist-spacing-medium)*-1)}.c93ef12e{margin-top:calc(var(--reactist-spacing-large)*-1)}.bc8fd4a2{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.b12a9124{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}._6016f4fb{margin-right:var(--reactist-spacing-xsmall)}.b85e3dfa{margin-right:var(--reactist-spacing-small)}._297575f4{margin-right:var(--reactist-spacing-medium)}.b401ac6c{margin-right:var(--reactist-spacing-large)}.dc3ec387{margin-right:var(--reactist-spacing-xlarge)}._24694604{margin-right:var(--reactist-spacing-xxlarge)}._8e9bf2ee{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.ae9d1115{margin-right:calc(var(--reactist-spacing-small)*-1)}._14e46fc3{margin-right:calc(var(--reactist-spacing-medium)*-1)}._3370631b{margin-right:calc(var(--reactist-spacing-large)*-1)}._3f0e9b50{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}.bc13e010{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6fa1aae3{margin-right:var(--reactist-spacing-xsmall)}._2976c5cb{margin-right:var(--reactist-spacing-small)}._38d94802{margin-right:var(--reactist-spacing-medium)}.db9569b5{margin-right:var(--reactist-spacing-large)}._4a52f06d{margin-right:var(--reactist-spacing-xlarge)}._8a0f0410{margin-right:var(--reactist-spacing-xxlarge)}.e7d40e9d{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}._680fde91{margin-right:calc(var(--reactist-spacing-small)*-1)}._021010ca{margin-right:calc(var(--reactist-spacing-medium)*-1)}._9e52c87c{margin-right:calc(var(--reactist-spacing-large)*-1)}._4d602613{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._21b1b65a{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._7321bc07{margin-right:var(--reactist-spacing-xsmall)}.fa1721f4{margin-right:var(--reactist-spacing-small)}._3fd7b4b8{margin-right:var(--reactist-spacing-medium)}._4fdc2f74{margin-right:var(--reactist-spacing-large)}.c0254761{margin-right:var(--reactist-spacing-xlarge)}._710a5f09{margin-right:var(--reactist-spacing-xxlarge)}.e08bee7f{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.e5ab73d2{margin-right:calc(var(--reactist-spacing-small)*-1)}._5e731477{margin-right:calc(var(--reactist-spacing-medium)*-1)}._0f57a22e{margin-right:calc(var(--reactist-spacing-large)*-1)}._25f26ed3{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._11a3b4e0{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}._6a4f69f7{margin-bottom:var(--reactist-spacing-xsmall)}.db26b033{margin-bottom:var(--reactist-spacing-small)}.c7313022{margin-bottom:var(--reactist-spacing-medium)}.a5885889{margin-bottom:var(--reactist-spacing-large)}._33dfbd8e{margin-bottom:var(--reactist-spacing-xlarge)}._795ad2de{margin-bottom:var(--reactist-spacing-xxlarge)}.a329dbd3{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._85e739fb{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._681f65ff{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.caf50d8f{margin-bottom:calc(var(--reactist-spacing-large)*-1)}._1e084cbf{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._3dfb1c7e{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){.ef4735be{margin-bottom:var(--reactist-spacing-xsmall)}.de55afba{margin-bottom:var(--reactist-spacing-small)}._0e33ce88{margin-bottom:var(--reactist-spacing-medium)}._8ca391fc{margin-bottom:var(--reactist-spacing-large)}._3a609d23{margin-bottom:var(--reactist-spacing-xlarge)}._3e1177e4{margin-bottom:var(--reactist-spacing-xxlarge)}.d384884d{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._75254cec{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._5d9f127d{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}._835f1089{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.dad52a72{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._8703a4bf{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._90fd20e9{margin-bottom:var(--reactist-spacing-xsmall)}.f3769191{margin-bottom:var(--reactist-spacing-small)}._156410f8{margin-bottom:var(--reactist-spacing-medium)}._7fed74d0{margin-bottom:var(--reactist-spacing-large)}._477dc10e{margin-bottom:var(--reactist-spacing-xlarge)}._85c82d89{margin-bottom:var(--reactist-spacing-xxlarge)}._4f09c1e0{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._9523e048{margin-bottom:calc(var(--reactist-spacing-small)*-1)}.efe10240{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.c43971e6{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.f9b4da15{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}.a10fdf70{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}.f9be90b4{margin-left:var(--reactist-spacing-xsmall)}.f53218d5{margin-left:var(--reactist-spacing-small)}.c4a9b3ab{margin-left:var(--reactist-spacing-medium)}._5755e2c3{margin-left:var(--reactist-spacing-large)}._33fc9354{margin-left:var(--reactist-spacing-xlarge)}._4749a3bf{margin-left:var(--reactist-spacing-xxlarge)}.c76cb3c7{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._96003c07{margin-left:calc(var(--reactist-spacing-small)*-1)}._09988d07{margin-left:calc(var(--reactist-spacing-medium)*-1)}.b4a486f6{margin-left:calc(var(--reactist-spacing-large)*-1)}.f396e75e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._81d1f26d{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._0a46e8f1{margin-left:var(--reactist-spacing-xsmall)}._57c970af{margin-left:var(--reactist-spacing-small)}._4b6099d3{margin-left:var(--reactist-spacing-medium)}._378fcff5{margin-left:var(--reactist-spacing-large)}.f8785663{margin-left:var(--reactist-spacing-xlarge)}._72f957ee{margin-left:var(--reactist-spacing-xxlarge)}._2288c7e1{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.b27c1c05{margin-left:calc(var(--reactist-spacing-small)*-1)}._702cbb13{margin-left:calc(var(--reactist-spacing-medium)*-1)}._1a2748b4{margin-left:calc(var(--reactist-spacing-large)*-1)}.b8c043a5{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._8dc8ff63{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){.c2af646d{margin-left:var(--reactist-spacing-xsmall)}.c03d07be{margin-left:var(--reactist-spacing-small)}._915fb1d3{margin-left:var(--reactist-spacing-medium)}._64214ee1{margin-left:var(--reactist-spacing-large)}._7be4a22c{margin-left:var(--reactist-spacing-xlarge)}._5ec0a401{margin-left:var(--reactist-spacing-xxlarge)}.ea29f1ee{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.c26652c7{margin-left:calc(var(--reactist-spacing-small)*-1)}.c24f6af9{margin-left:calc(var(--reactist-spacing-medium)*-1)}.c2671f27{margin-left:calc(var(--reactist-spacing-large)*-1)}.cc51a04e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}.fd581f54{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}
+._68ab48ca{min-width:0}._6fa2b565{min-width:var(--reactist-width-xsmall)}.dd50fabd{min-width:var(--reactist-width-small)}.e7e2c808{min-width:var(--reactist-width-medium)}._6abbe25e{min-width:var(--reactist-width-large)}._54f479ac{min-width:var(--reactist-width-xlarge)}._148492bc{max-width:var(--reactist-width-xsmall)}.bd023b96{max-width:var(--reactist-width-small)}.e102903f{max-width:var(--reactist-width-medium)}._0e8d76d7{max-width:var(--reactist-width-large)}._47a031d0{max-width:var(--reactist-width-xlarge)}.cd4c8183{max-width:100%}._5f5959e8{width:0}._8c75067a{width:100%}._56a651f6{width:auto}._26f87bb8{width:-moz-max-content;width:-webkit-max-content;width:max-content}._07a6ab44{width:-moz-min-content;width:-webkit-min-content;width:min-content}.a87016fa{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}._1a972e50{width:var(--reactist-width-xsmall)}.c96d8261{width:var(--reactist-width-small)}.f3829d42{width:var(--reactist-width-medium)}._2caef228{width:var(--reactist-width-large)}._069e1491{width:var(--reactist-width-xlarge)}
+:root{--reactist-badge-neutral-background:#eee;--reactist-badge-neutral-foreground:#666;--reactist-badge-positive-background:rgba(5,133,39,0.1);--reactist-badge-positive-foreground:#058527;--reactist-badge-color-background:#faead1;--reactist-badge-color-foreground:#8f4700}._0b1e00ed{font-family:var(--reactist-font-family);font-size:10px;border-radius:3px;padding:3px var(--reactist-spacing-xsmall);text-transform:uppercase}.dda494a5{color:var(--reactist-badge-neutral-foreground);background-color:var(--reactist-badge-neutral-background)}._9260b8b0{color:var(--reactist-badge-positive-foreground);background-color:var(--reactist-badge-positive-background)}._73a14c03{color:var(--reactist-badge-color-foreground);background-color:var(--reactist-badge-color-background)}

package/styles/badge.module.css.css

@@ -0,0 +1 @@
+:root{--reactist-badge-neutral-background:#eee;--reactist-badge-neutral-foreground:#666;--reactist-badge-positive-background:rgba(5,133,39,0.1);--reactist-badge-positive-foreground:#058527;--reactist-badge-color-background:#faead1;--reactist-badge-color-foreground:#8f4700}._0b1e00ed{font-family:var(--reactist-font-family);font-size:10px;border-radius:3px;padding:3px var(--reactist-spacing-xsmall);text-transform:uppercase}.dda494a5{color:var(--reactist-badge-neutral-foreground);background-color:var(--reactist-badge-neutral-background)}._9260b8b0{color:var(--reactist-badge-positive-foreground);background-color:var(--reactist-badge-positive-background)}._73a14c03{color:var(--reactist-badge-color-foreground);background-color:var(--reactist-badge-color-background)}

package/styles/modal.css

@@ -8,4 +8,4 @@
 .reactist_tooltip{font-size:.81rem;color:#202020;font-weight:400;line-height:1.6;text-align:center;text-overflow:ellipsis;overflow:hidden;max-width:100%;padding:5px 10px;background-color:#333;color:#fff;border:none;border-radius:3px;z-index:1000}
 :root{--reactist-spinner-tint:var(--reactist-bg-brand);--reactist-spinner-fill:var(--reactist-framework-fill-crest)}@-webkit-keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}._51539197{-webkit-animation-name:_54fbe2b3;animation-name:_54fbe2b3;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.a0c466ed{fill:var(--reactist-spinner-tint)}._745b73d3{fill:var(--reactist-spinner-fill)}
 :root{--reactist-button-small-font-size:var(--reactist-font-size-caption);--reactist-button-small-spacing:var(--reactist-spacing-small);--reactist-button-small-height:28px;--reactist-button-normal-font-size:var(--reactist-font-size-copy);--reactist-button-normal-spacing:var(--reactist-spacing-medium);--reactist-button-normal-height:32px;--reactist-button-large-font-size:var(--reactist-font-size-body);--reactist-button-large-spacing:var(--reactist-spacing-large);--reactist-button-large-height:36px;--reactist-actionable-primary-idle-tint:#fff;--reactist-actionable-primary-idle-fill:#008aa6;--reactist-actionable-primary-hover-tint:#fff;--reactist-actionable-primary-hover-fill:#007992;--reactist-actionable-primary-disabled-tint:#fff;--reactist-actionable-primary-disabled-fill:#99d0db;--reactist-actionable-secondary-idle-tint:#282f30;--reactist-actionable-secondary-idle-fill:#f2f6f7;--reactist-actionable-secondary-hover-tint:#282f30;--reactist-actionable-secondary-hover-fill:#e3e7e8;--reactist-actionable-secondary-disabled-tint:#a9acac;--reactist-actionable-secondary-disabled-fill:#f2f6f7;--reactist-actionable-tertiary-idle-tint:#006f85;--reactist-actionable-tertiary-hover-tint:#006f85;--reactist-actionable-tertiary-hover-fill:#f2f6f7;--reactist-actionable-tertiary-disabled-tint:#99c5ce;--reactist-actionable-quaternary-idle-tint:#6c777a;--reactist-actionable-quaternary-hover-tint:#282f30;--reactist-actionable-quaternary-hover-fill:#e0e7e8;--reactist-actionable-quaternary-disabled-tint:#c4c9ca;--reactist-actionable-primary-destructive-idle-tint:#fff;--reactist-actionable-primary-destructive-idle-fill:#dc4c3e;--reactist-actionable-primary-destructive-hover-tint:#fff;--reactist-actionable-primary-destructive-hover-fill:#b03d32;--reactist-actionable-primary-destructive-disabled-tint:#fff;--reactist-actionable-primary-destructive-disabled-fill:#f1b7b2;--reactist-actionable-secondary-destructive-idle-tint:#dc4c3e;--reactist-actionable-secondary-destructive-hover-tint:#b03d32;--reactist-actionable-secondary-destructive-hover-fill:transparent;--reactist-actionable-secondary-destructive-disabled-tint:#f1b7b2}.a8af2163{max-width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;background-color:transparent;border-radius:var(--reactist-border-radius-small);white-space:nowrap;font-family:var(--reactist-font-family);font-weight:var(--reactist-font-weight-medium);text-decoration:none;border:1px solid transparent;transition-duration:.3s;transition-property:color,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bbdb467b{text-overflow:ellipsis;white-space:nowrap;font-size:inherit}.a8af2163:active:not([aria-disabled=true]){transform:scale(.97);transition:transform .2s cubic-bezier(.02,1.505,.745,1.235)}.a8af2163{padding:0 var(--reactist-btn-spacing);font-size:var(--reactist-btn-font-size);height:var(--reactist-btn-height);line-height:var(--reactist-btn-height);--reactist-spinner-tint:var(--reactist-btn-idle-tint);--reactist-spinner-fill:var(--reactist-btn-idle-fill)}.a8af2163.ca02fc07{border-radius:1000px}.a8af2163._45ffe137{--reactist-btn-height:var(--reactist-button-small-height);--reactist-btn-spacing:var(--reactist-button-small-spacing);--reactist-btn-font-size:var(--reactist-button-small-font-size)}.a8af2163._352995bd{--reactist-btn-height:var(--reactist-button-normal-height);--reactist-btn-spacing:var(--reactist-button-normal-spacing);--reactist-btn-font-size:var(--reactist-button-normal-font-size)}.a8af2163._3991076f{--reactist-btn-height:var(--reactist-button-large-height);--reactist-btn-spacing:var(--reactist-button-large-spacing);--reactist-btn-font-size:var(--reactist-button-large-font-size)}.a8af2163:not(.f82232b7){color:var(--reactist-btn-idle-tint);background-color:var(--reactist-btn-idle-fill)}.a8af2163:focus-visible:not([aria-disabled=true]),.a8af2163:hover:not([aria-disabled=true]),.a8af2163[aria-expanded=true]{color:var(--reactist-btn-hover-tint);background-color:var(--reactist-btn-hover-fill)}.a8af2163.f82232b7{cursor:not-allowed;color:var(--reactist-btn-disabled-tint);background-color:var(--reactist-btn-disabled-fill)}.a8af2163:not(.ef4c88db){min-width:68px}.a8af2163.ef4c88db{width:var(--reactist-btn-height);height:var(--reactist-btn-height);padding:0}.a8af2163 .a08c25c7{margin-right:calc(var(--reactist-btn-spacing) - 6px);margin-left:-6px}.a8af2163 ._2f6adc11{margin-left:calc(var(--reactist-btn-spacing) - 6px);margin-right:-6px}._3d1243b2{--reactist-btn-idle-tint:var(--reactist-actionable-primary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-disabled-fill)}._16b6b062{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-secondary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-secondary-disabled-fill)}.cffaea5e{--reactist-btn-idle-tint:var(--reactist-actionable-tertiary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-tertiary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-tertiary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-tertiary-disabled-tint)}._98cd5c3f,.cffaea5e{--reactist-btn-idle-fill:transparent;--reactist-btn-disabled-fill:transparent}._98cd5c3f{--reactist-btn-idle-tint:var(--reactist-actionable-quaternary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-quaternary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-quaternary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-quaternary-disabled-tint)}._3d1243b2._99cb1c4d{--reactist-btn-idle-tint:var(--reactist-actionable-primary-destructive-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-destructive-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-destructive-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-destructive-disabled-fill)}._16b6b062._99cb1c4d{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-idle-fill:transparent;--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint);--reactist-btn-disabled-fill:transparent;border-color:var(--reactist-btn-idle-tint)}._16b6b062._99cb1c4d:hover{border-color:var(--reactist-btn-hover-tint)}._16b6b062._99cb1c4d.f82232b7{border-color:var(--reactist-btn-disabled-tint)}._98cd5c3f._99cb1c4d,.cffaea5e._99cb1c4d{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint)}
-@-webkit-keyframes _77f9687f{0%{opacity:0}to{opacity:1}}@keyframes _77f9687f{0%{opacity:0}to{opacity:1}}:root{--reach-dialog:1;--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}._37bef8d8{isolation:isolate}[data-reach-dialog-overlay]{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_77f9687f .2s;animation:_77f9687f .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal,1)}[data-reach-dialog-overlay]>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}[data-reach-dialog-overlay].bcc4e0a5>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}[data-reach-dialog-overlay].bcc4e0a5>[data-focus-lock-disabled] .d4832c2d{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}[data-reach-dialog-content]{background:var(--reactist-bg-default);padding:0;outline:none;transition:box-shadow .5s}.d4832c2d{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out;max-width:100%}.b0c3b021 .d4832c2d{width:100%}._573d6aa5 .d4832c2d{width:768px}._8550d996 .d4832c2d{width:580px}._43bb18f5 .d4832c2d{width:450px}@media (min-width:992px){._57b4159d .d4832c2d{width:960px}}@media (min-width:1200px){._57b4159d .d4832c2d{width:1060px}}@media (max-width:1000px){._57b4159d .d4832c2d{width:768px}}@media (max-width:580px){.cb63f300:not(._43bb18f5) .d4832c2d{width:100%!important;max-height:none}.cb63f300.e741893e:not(._43bb18f5)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}.cb63f300.e741893e:not(._43bb18f5) .d4832c2d{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){.d4832c2d{width:100%!important;max-height:none}.cb63f300.e741893e>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}.cb63f300.e741893e .d4832c2d{border-bottom-left-radius:0;border-bottom-right-radius:0}}.bb1ce281{display:flex;align-items:center;height:32px}.c5ef989c{min-height:32px}
+@-webkit-keyframes _63d7ee15{0%{opacity:0}to{opacity:1}}@keyframes _63d7ee15{0%{opacity:0}to{opacity:1}}:root{--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}._868392ae{isolation:isolate;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_63d7ee15 .2s;animation:_63d7ee15 .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal,1)}._868392ae>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}._868392ae.b8548bf2>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}._868392ae.b8548bf2>[data-focus-lock-disabled] ._31956461{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}._31956461{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out,box-shadow .5s;max-width:100%}._1007df83 ._31956461{width:100%}._10c275aa ._31956461{width:768px}._0ac526b4 ._31956461{width:580px}._30f38fdb ._31956461{width:450px}@media (min-width:992px){._54868e8b ._31956461{width:960px}}@media (min-width:1200px){._54868e8b ._31956461{width:1060px}}@media (max-width:1000px){._54868e8b ._31956461{width:768px}}@media (max-width:580px){._868392ae:not(._30f38fdb) ._31956461{width:100%!important;max-height:none}._868392ae.c0bc68bc:not(._30f38fdb)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._868392ae.c0bc68bc:not(._30f38fdb) ._31956461{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){._31956461{width:100%!important;max-height:none}._868392ae.c0bc68bc>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._868392ae.c0bc68bc ._31956461{border-bottom-left-radius:0;border-bottom-right-radius:0}}._6527332a{display:flex;align-items:center;height:32px}._4750dc1b{min-height:32px}