@doist/reactist 10.0.0 → 11.0.0

package/lib/components/progress-bar/progress-bar.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=e(require("react")),t=e(require("classnames"));function a(e){var a=e.fillPercentage,s=void 0===a?0:a,i=t("reactist_progress_bar",e.className);return r.createElement("div",{className:i},r.createElement("div",{className:"inner",style:{width:(s<0?0:s>100?100:s)+"%"}}))}a.displayName="ProgressBar",exports.ProgressBar=a;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("react")),a=e(require("classnames")),t=require("../../new-components/hidden-visually/hidden-visually.js");function s(e){var s=e.fillPercentage,l=void 0===s?0:s,i=e["aria-valuetext"],n=a("reactist_progress_bar",e.className),u=l<0?0:l>100?100:l;return r.createElement("div",{className:n},r.createElement("div",{className:"inner",style:{width:u+"%"}}),r.createElement(t.HiddenVisually,null,r.createElement("progress",{value:u,max:100,"aria-valuetext":null!=i?i:void 0})))}s.displayName="ProgressBar",exports.ProgressBar=s;
 //# sourceMappingURL=progress-bar.js.map

package/lib/components/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './progress-bar.less'\n\ntype Props = {\n    /** Additional css class applied to the progress bar. */\n    className?: string\n    /** How much of the progress bar should be filled. Number between 0 and 100 inclusive. */\n    fillPercentage?: number\n}\nfunction ProgressBar({ fillPercentage = 0, className }: Props) {\n    const finalClassName = classNames('reactist_progress_bar', className)\n    const width = fillPercentage < 0 ? 0 : fillPercentage > 100 ? 100 : fillPercentage\n    return (\n        <div className={finalClassName}>\n            <div className=\"inner\" style={{ width: `${width}%` }} />\n        </div>\n    )\n}\nProgressBar.displayName = 'ProgressBar'\n\nexport { ProgressBar }\n"],"names":["ProgressBar","fillPercentage","finalClassName","classNames","className","React","style","width","displayName"],"mappings":"+LAWA,SAASA,aAAcC,eAAAA,aAAiB,IAC9BC,EAAiBC,EAAW,0BADKC,kBAInCC,uBAAKD,UAAWF,GACZG,uBAAKD,UAAU,QAAQE,MAAO,CAAEC,OAH1BN,EAAiB,EAAI,EAAIA,EAAiB,IAAM,IAAMA,WAOxED,EAAYQ,YAAc"}
+{"version":3,"file":"progress-bar.js","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["import React from 'react'\nimport { HiddenVisually } from '../../new-components/hidden-visually'\nimport classNames from 'classnames'\n\nimport './progress-bar.less'\n\ntype Props = {\n    /** Additional css class applied to the progress bar. */\n    className?: string\n    /** How much of the progress bar should be filled. Number between 0 and 100 inclusive. */\n    fillPercentage?: number\n    /** Defines the human readable text alternative for assitive technologies. */\n    'aria-valuetext'?: string\n}\nfunction ProgressBar({ fillPercentage = 0, className, 'aria-valuetext': ariaValuetext }: Props) {\n    const finalClassName = classNames('reactist_progress_bar', className)\n    const width = fillPercentage < 0 ? 0 : fillPercentage > 100 ? 100 : fillPercentage\n    return (\n        <div className={finalClassName}>\n            <div className=\"inner\" style={{ width: `${width}%` }} />\n            <HiddenVisually>\n                <progress value={width} max={100} aria-valuetext={ariaValuetext ?? undefined} />\n            </HiddenVisually>\n        </div>\n    )\n}\nProgressBar.displayName = 'ProgressBar'\n\nexport { ProgressBar }\n"],"names":["ProgressBar","fillPercentage","ariaValuetext","finalClassName","classNames","className","width","React","style","HiddenVisually","value","max","undefined","displayName"],"mappings":"oQAcA,SAASA,aAAcC,eAAAA,aAAiB,IAAgCC,IAAlB,kBAC5CC,EAAiBC,EAAW,0BADKC,WAEjCC,EAAQL,EAAiB,EAAI,EAAIA,EAAiB,IAAM,IAAMA,SAEhEM,uBAAKF,UAAWF,GACZI,uBAAKF,UAAU,QAAQG,MAAO,CAAEF,MAAUA,SAC1CC,gBAACE,sBACGF,4BAAUG,MAAOJ,EAAOK,IAAK,qBAAqBT,MAAAA,EAAAA,OAAiBU,MAKnFZ,EAAYa,YAAc"}

package/lib/components/progress-bar/progress-bar.test.d.ts

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

package/lib/components/select/select.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 a=e(require("react")),t=e(require("classnames")),l=require("../../_virtual/_rollupPluginBabelHelpers.js");function s(e){var s=e.value,u=e.options,i=void 0===u?[]:u,o=e.onChange,r=e.disabled,n=void 0===r||r,d=e.className,c=void 0===d?"":d,v=e.defaultValue,p=l.objectWithoutPropertiesLoose(e,["value","options","onChange","disabled","className","defaultValue"]),b=t("reactist_select",{disabled:n},c);return a.createElement("select",Object.assign({className:b,value:s,onChange:function(e){return o?o(e.target.value):void 0},disabled:n,defaultValue:v},p),null==i?void 0:i.map((function(e){return a.createElement("option",{key:e.key||e.value,value:e.value,disabled:e.disabled},e.text)})))}s.displayName="Select",s.defaultProps={options:[],disabled:!1},exports.Select=s;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var a=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=e(require("react")),l=e(require("classnames")),s=["value","options","onChange","disabled","className","defaultValue"];function u(e){var u=e.value,i=e.options,o=void 0===i?[]:i,r=e.onChange,n=e.disabled,d=void 0===n||n,c=e.className,v=void 0===c?"":c,p=e.defaultValue,b=a.objectWithoutPropertiesLoose(e,s),f=l("reactist_select",{disabled:d},v);return t.createElement("select",Object.assign({className:f,value:u,onChange:function(e){return r?r(e.target.value):void 0},disabled:d,defaultValue:p},b),null==o?void 0:o.map((function(e){return t.createElement("option",{key:e.key||e.value,value:e.value,disabled:e.disabled},e.text)})))}u.displayName="Select",u.defaultProps={options:[],disabled:!1},exports.Select=u;
 //# sourceMappingURL=select.js.map

package/lib/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../../src/components/select/select.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './select.less'\n\ntype Option = {\n    /** Optional key for each option. If not provided `value` is used. */\n    key?: string | number\n    /** Value of the option. */\n    value: string | number\n    /** Text to display for the option. */\n    text?: string | number\n    /** Whether the options is disabled or not. */\n    disabled?: boolean\n}\n\ntype Props = {\n    className?: string\n    disabled?: boolean\n    /** Currently selected value. */\n    value?: string | number\n    /** Callback for the change event. Will be called with the next value (not the full event). */\n    onChange?: (value: string) => void\n    /** Options that are rendered in the select. */\n    options?: Option[]\n    /** Value to initially be set */\n    defaultValue?: string | number\n}\n\nfunction Select({\n    value,\n    options = [],\n    onChange,\n    disabled = true,\n    className = '',\n    defaultValue,\n    ...otherProps\n}: Props) {\n    const selectClassName = classNames('reactist_select', { disabled }, className)\n    return (\n        <select\n            className={selectClassName}\n            value={value}\n            onChange={(event) => (onChange ? onChange(event.target.value) : undefined)}\n            disabled={disabled}\n            defaultValue={defaultValue}\n            {...otherProps}\n        >\n            {options?.map((option) => (\n                <option\n                    key={option.key || option.value}\n                    value={option.value}\n                    disabled={option.disabled}\n                >\n                    {option.text}\n                </option>\n            ))}\n        </select>\n    )\n}\nSelect.displayName = 'Select'\nSelect.defaultProps = {\n    options: [],\n    disabled: false,\n}\n\nexport { Select }\n"],"names":["Select","value","options","onChange","disabled","className","defaultValue","otherProps","selectClassName","classNames","React","event","target","undefined","map","option","key","text","displayName","defaultProps"],"mappings":"wPA6BA,SAASA,SACLC,IAAAA,UACAC,QAAAA,aAAU,KACVC,IAAAA,aACAC,SAAAA,oBACAC,UAAAA,aAAY,KACZC,IAAAA,aACGC,yGAEGC,EAAkBC,EAAW,kBAAmB,CAAEL,SAAAA,GAAYC,UAEhEK,wCACIL,UAAWG,EACXP,MAAOA,EACPE,SAAU,SAACQ,UAAWR,EAAWA,EAASQ,EAAMC,OAAOX,YAASY,GAChET,SAAUA,EACVE,aAAcA,GACVC,GAEHL,MAAAA,SAAAA,EAASY,KAAI,SAACC,UACXL,0BACIM,IAAKD,EAAOC,KAAOD,EAAOd,MAC1BA,MAAOc,EAAOd,MACdG,SAAUW,EAAOX,UAEhBW,EAAOE,UAM5BjB,EAAOkB,YAAc,SACrBlB,EAAOmB,aAAe,CAClBjB,QAAS,GACTE,UAAU"}
+{"version":3,"file":"select.js","sources":["../../../src/components/select/select.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './select.less'\n\ntype Option = {\n    /** Optional key for each option. If not provided `value` is used. */\n    key?: string | number\n    /** Value of the option. */\n    value: string | number\n    /** Text to display for the option. */\n    text?: string | number\n    /** Whether the options is disabled or not. */\n    disabled?: boolean\n}\n\ntype Props = {\n    className?: string\n    disabled?: boolean\n    /** Currently selected value. */\n    value?: string | number\n    /** Callback for the change event. Will be called with the next value (not the full event). */\n    onChange?: (value: string) => void\n    /** Options that are rendered in the select. */\n    options?: Option[]\n    /** Value to initially be set */\n    defaultValue?: string | number\n}\n\nfunction Select({\n    value,\n    options = [],\n    onChange,\n    disabled = true,\n    className = '',\n    defaultValue,\n    ...otherProps\n}: Props) {\n    const selectClassName = classNames('reactist_select', { disabled }, className)\n    return (\n        <select\n            className={selectClassName}\n            value={value}\n            onChange={(event) => (onChange ? onChange(event.target.value) : undefined)}\n            disabled={disabled}\n            defaultValue={defaultValue}\n            {...otherProps}\n        >\n            {options?.map((option) => (\n                <option\n                    key={option.key || option.value}\n                    value={option.value}\n                    disabled={option.disabled}\n                >\n                    {option.text}\n                </option>\n            ))}\n        </select>\n    )\n}\nSelect.displayName = 'Select'\nSelect.defaultProps = {\n    options: [],\n    disabled: false,\n}\n\nexport { Select }\n"],"names":["Select","value","options","onChange","disabled","className","defaultValue","otherProps","selectClassName","classNames","React","event","target","undefined","map","option","key","text","displayName","defaultProps"],"mappings":"+TA6BA,SAASA,SACLC,IAAAA,UACAC,QAAAA,aAAU,KACVC,IAAAA,aACAC,SAAAA,oBACAC,UAAAA,aAAY,KACZC,IAAAA,aACGC,sCAEGC,EAAkBC,EAAW,kBAAmB,CAAEL,SAAAA,GAAYC,UAEhEK,wCACIL,UAAWG,EACXP,MAAOA,EACPE,SAAU,SAACQ,UAAWR,EAAWA,EAASQ,EAAMC,OAAOX,YAASY,GAChET,SAAUA,EACVE,aAAcA,GACVC,GAEHL,MAAAA,SAAAA,EAASY,KAAI,SAACC,UACXL,0BACIM,IAAKD,EAAOC,KAAOD,EAAOd,MAC1BA,MAAOc,EAAOd,MACdG,SAAUW,EAAOX,UAEhBW,EAAOE,UAM5BjB,EAAOkB,YAAc,SACrBlB,EAAOmB,aAAe,CAClBjB,QAAS,GACTE,UAAU"}

package/lib/components/select/select.test.d.ts

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

package/lib/components/time/time.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,r=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=require("../tooltip/tooltip.js"),i=require("./time-utils.js"),s=function(e){function s(t){var r;return(r=e.call(this,t)||this).refreshInterval=void 0,r.state={hovered:!1,mouseX:void 0,mouseY:void 0},r}r.inheritsLoose(s,e);var n=s.prototype;return n.componentDidMount=function(){this.props.refresh&&this._refresh()},n.componentDidUpdate=function(e){!e.refresh&&this.props.refresh&&this._refresh(),e.refresh&&!this.props.refresh&&this.refreshInterval&&clearTimeout(this.refreshInterval)},n.componentWillUnmount=function(){this.refreshInterval&&clearTimeout(this.refreshInterval)},n._setHovered=function(e,t){var r=this.state,o=t.clientX,i=t.clientY;o===r.mouseX&&i===r.mouseY||this.setState((function(){return{hovered:e,mouseX:o,mouseY:i}}))},n._renderTime=function(e){if(this.props.time){if(this.state.hovered){if(this.props.expandFullyOnHover&&!this.props.tooltipOnHover)return i.TimeUtils.formatTimeLong(this.props.time,e);if(this.props.expandOnHover&&!this.props.tooltipOnHover)return i.TimeUtils.formatTime(this.props.time,e)}return i.TimeUtils.timeAgo(this.props.time,e)}},n._refresh=function(){var e=this;this.refreshInterval=setInterval((function(){e.forceUpdate()}),6e4)},n.render=function(){var e=this,r="reactist_time";this.props.className&&(r=this.props.className);var s=this._renderTime(this.props.config);return t.createElement("time",{className:r,onMouseEnter:function(t){return e._setHovered(!0,t)},onMouseLeave:function(t){return e._setHovered(!1,t)}},this.props.tooltipOnHover?t.createElement(o.Tooltip,{content:this.props.tooltip||this.props.time&&i.TimeUtils.formatTimeLong(this.props.time,this.props.config)},t.createElement("span",null,s)):s)},s}(t.Component);s.displayName="Time",s.defaultProps={expandOnHover:!1,expandFullyOnHover:!1,tooltipOnHover:!1,refresh:!0,config:{locale:"en",daysSuffix:"d",hoursSuffix:"h",minutesSuffix:"m",momentsAgo:"moments ago"}},exports.Time=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,o=require("../tooltip/tooltip.js"),i=require("./time-utils.js"),s=function(e){function s(t){var r;return(r=e.call(this,t)||this).refreshInterval=void 0,r.state={hovered:!1,mouseX:void 0,mouseY:void 0},r}t.inheritsLoose(s,e);var n=s.prototype;return n.componentDidMount=function(){this.props.refresh&&this._refresh()},n.componentDidUpdate=function(e){!e.refresh&&this.props.refresh&&this._refresh(),e.refresh&&!this.props.refresh&&this.refreshInterval&&clearTimeout(this.refreshInterval)},n.componentWillUnmount=function(){this.refreshInterval&&clearTimeout(this.refreshInterval)},n._setHovered=function(e,t){var r=this.state,o=t.clientX,i=t.clientY;o===r.mouseX&&i===r.mouseY||this.setState((function(){return{hovered:e,mouseX:o,mouseY:i}}))},n._renderTime=function(e){if(this.props.time){if(this.state.hovered){if(this.props.expandFullyOnHover&&!this.props.tooltipOnHover)return i.TimeUtils.formatTimeLong(this.props.time,e);if(this.props.expandOnHover&&!this.props.tooltipOnHover)return i.TimeUtils.formatTime(this.props.time,e)}return i.TimeUtils.timeAgo(this.props.time,e)}},n._refresh=function(){var e=this;this.refreshInterval=setInterval((function(){e.forceUpdate()}),6e4)},n.render=function(){var e=this,t="reactist_time";this.props.className&&(t=this.props.className);var s=this._renderTime(this.props.config);return r.createElement("time",{className:t,onMouseEnter:function(t){return e._setHovered(!0,t)},onMouseLeave:function(t){return e._setHovered(!1,t)}},this.props.tooltipOnHover?r.createElement(o.Tooltip,{content:this.props.tooltip||this.props.time&&i.TimeUtils.formatTimeLong(this.props.time,this.props.config)},r.createElement("span",null,s)):s)},s}(r.Component);s.displayName="Time",s.defaultProps={expandOnHover:!1,expandFullyOnHover:!1,tooltipOnHover:!1,refresh:!0,config:{locale:"en",daysSuffix:"d",hoursSuffix:"h",minutesSuffix:"m",momentsAgo:"moments ago"}},exports.Time=s;
 //# sourceMappingURL=time.js.map

package/lib/components/time/time.test.d.ts

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

package/lib/components/tooltip/tooltip.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=e(require("react")),n=e(require("classnames")),o=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("reakit/Tooltip");exports.HIDE_DELAY=100,exports.SHOW_DELAY=500,exports.Tooltip=function(e){var u,i,c,s,l=e.children,a=e.content,p=e.position,f=void 0===p?"top":p,d=e.gapSize,m=void 0===d?3:d,b=e.className,E=o.objectWithoutPropertiesLoose(e,["children","content","position","gapSize","className"]),v=(c=r.useTooltipState({placement:f,gutter:m}),u=t.useRef(),i=t.useCallback((function(){null!=u.current&&clearTimeout(u.current)}),[]),t.useEffect((function(){return i}),[i]),s=t.useCallback((function(e,t){return function(){i(),u.current=setTimeout(e,t)}}),[i]),t.useMemo((function(){return o.objectSpread2(o.objectSpread2({},c),{},{show:s((function(){return c.show()}),500),hide:s((function(){return c.hide()}),100)})}),[s,c])),h=t.Children.only(l);return a?t.createElement(t.Fragment,null,t.createElement(r.TooltipReference,Object.assign({},v,{ref:h.ref},h.props,{onFocus:function(e){e.currentTarget.addEventListener("keyup",(function(e){var t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&v.show()}),{once:!0}),e.preventDefault(),"function"==typeof h.props.onFocus&&h.props.onFocus(e)}}),(function(e){return t.cloneElement(h,e)})),v.visible?t.createElement(r.Tooltip,Object.assign({},v,E,{className:n("reactist_tooltip",b)}),"function"==typeof a?a():a):null):h};
+"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"),n=e(require("react")),o=e(require("classnames")),r=require("reakit/Tooltip"),u=["children","content","position","gapSize","className"];exports.HIDE_DELAY=100,exports.SHOW_DELAY=500,exports.Tooltip=function(e){var i,c,s,l,a=e.children,p=e.content,f=e.position,d=void 0===f?"top":f,m=e.gapSize,b=void 0===m?3:m,E=e.className,v=t.objectWithoutPropertiesLoose(e,u),h=(s=r.useTooltipState({placement:d,gutter:b}),i=n.useRef(),c=n.useCallback((function(){null!=i.current&&clearTimeout(i.current)}),[]),n.useEffect((function(){return c}),[c]),l=n.useCallback((function(e,t){return function(){c(),i.current=setTimeout(e,t)}}),[c]),n.useMemo((function(){return t.objectSpread2(t.objectSpread2({},s),{},{show:l((function(){return s.show()}),500),hide:l((function(){return s.hide()}),100)})}),[l,s])),g=n.Children.only(a);return p?n.createElement(n.Fragment,null,n.createElement(r.TooltipReference,Object.assign({},h,{ref:g.ref},g.props,{onFocus:function(e){e.currentTarget.addEventListener("keyup",(function(e){var t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&h.show()}),{once:!0}),e.preventDefault(),"function"==typeof g.props.onFocus&&g.props.onFocus(e)}}),(function(e){return n.cloneElement(g,e)})),h.visible?n.createElement(r.Tooltip,Object.assign({},h,v,{className:o("reactist_tooltip",E)}),"function"==typeof p?p():p):null):g};
 //# sourceMappingURL=tooltip.js.map

package/lib/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState,\n    TooltipInitialState,\n    Tooltip as ReakitTooltip,\n    TooltipReference,\n    TooltipProps as ReakitTooltipProps,\n} from 'reakit/Tooltip'\nimport { PopoverState } from 'reakit/Popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<ReakitTooltipProps, 'children'> & {\n    children: React.ReactNode\n    content: React.ReactNode | (() => React.ReactNode)\n    position?: PopoverState['placement']\n    gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: TooltipInitialState) {\n    const tooltipState = useTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    className,\n    ...props\n}: TooltipProps) {\n    const tooltip = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only<React.ReactElement>(children as React.ReactElement)\n    if (!content) {\n        return child\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/reakit/reakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent) {\n        // If focus is not followed by a key up event, does it mean that it's not\n        // an intentional keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of reakit:\n        // https://github.com/reakit/reakit/issues/750\n        function handleKeyUp(e: Event) {\n            const eventKey = (e as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                tooltip.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access\n        if (typeof child.props.onFocus === 'function') child.props.onFocus(event)\n    }\n\n    return (\n        <>\n            <TooltipReference\n                {...tooltip}\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment\n                ref={(child as any).ref}\n                {...child.props}\n                onFocus={handleFocus}\n            >\n                {(referenceProps) => React.cloneElement(child, referenceProps)}\n            </TooltipReference>\n            {tooltip.visible ? (\n                <ReakitTooltip\n                    {...tooltip}\n                    {...props}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </ReakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["timeoutRef","clearTimeouts","tooltipState","delay","children","content","position","gapSize","className","props","tooltip","useTooltipState","placement","gutter","React","useRef","useCallback","current","clearTimeout","useEffect","fn","setTimeout","useMemo","show","hide","child","Children","only","TooltipReference","ref","onFocus","event","currentTarget","addEventListener","e","eventKey","key","once","preventDefault","referenceProps","cloneElement","visible","ReakitTooltip","classNames"],"mappings":"uSAuB0B,uBADA,oBAgB1B,gBAiFUA,EAEAC,EA/FAC,EACAC,EAYNC,IAAAA,SACAC,IAAAA,YACAC,SAAAA,aAAW,YACXC,QAAAA,aAAU,IACVC,IAAAA,UACGC,4FAEGC,GApBAR,EAAeS,kBAoBkB,CAAEC,UAAWN,EAAUO,OAAQN,IAyEhEP,EAAac,EAAMC,SAEnBd,EAAgBa,EAAME,aAAY,WACV,MAAtBhB,EAAWiB,SACXC,aAAalB,EAAWiB,WAE7B,IAGHH,EAAMK,WAAU,kBAAMlB,IAAe,CAACA,IArGhCE,EAuGCW,EAAME,aACT,SAAeI,EAAgBjB,UACpB,WACHF,IACAD,EAAWiB,QAAUI,WAAWD,EAAIjB,MAG5C,CAACF,IA7GEa,EAAMQ,SACT,qDACOpB,OACHqB,KAAMpB,GAAM,kBAAMD,EAAaqB,SATjB,KAUdC,KAAMrB,GAAM,kBAAMD,EAAasB,SATjB,SAWlB,CAACrB,EAAOD,KAcNuB,EAAQX,EAAMY,SAASC,KAAyBvB,UACjDC,EA6BDS,gCACIA,gBAACc,oCACOlB,GAEJmB,IAAMJ,EAAcI,KAChBJ,EAAMhB,OACVqB,iBAzBSC,GAWjBA,EAAMC,cAAcC,iBAAiB,kBANhBC,OACXC,EAAYD,EAAoBE,IACrB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjDzB,EAAQa,SAG2C,CAAEc,MAAM,IAEnEN,EAAMO,iBAE6B,mBAAxBb,EAAMhB,MAAMqB,SAAwBL,EAAMhB,MAAMqB,QAAQC,OAY1D,SAACQ,UAAmBzB,EAAM0B,aAAaf,EAAOc,MAElD7B,EAAQ+B,QACL3B,gBAAC4B,2BACOhC,EACAD,GACJD,UAAWmC,EAAW,mBAAoBnC,KAEtB,mBAAZH,EAAyBA,IAAYA,GAEjD,MA9CDoB"}
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState,\n    TooltipInitialState,\n    Tooltip as ReakitTooltip,\n    TooltipReference,\n    TooltipProps as ReakitTooltipProps,\n} from 'reakit/Tooltip'\nimport { PopoverState } from 'reakit/Popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<ReakitTooltipProps, 'children'> & {\n    children: React.ReactNode\n    content: React.ReactNode | (() => React.ReactNode)\n    position?: PopoverState['placement']\n    gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: TooltipInitialState) {\n    const tooltipState = useTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    className,\n    ...props\n}: TooltipProps) {\n    const tooltip = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only<React.ReactElement>(children as React.ReactElement)\n    if (!content) {\n        return child\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/reakit/reakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent) {\n        // If focus is not followed by a key up event, does it mean that it's not\n        // an intentional keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of reakit:\n        // https://github.com/reakit/reakit/issues/750\n        function handleKeyUp(e: Event) {\n            const eventKey = (e as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                tooltip.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access\n        if (typeof child.props.onFocus === 'function') child.props.onFocus(event)\n    }\n\n    return (\n        <>\n            <TooltipReference\n                {...tooltip}\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment\n                ref={(child as any).ref}\n                {...child.props}\n                onFocus={handleFocus}\n            >\n                {(referenceProps) => React.cloneElement(child, referenceProps)}\n            </TooltipReference>\n            {tooltip.visible ? (\n                <ReakitTooltip\n                    {...tooltip}\n                    {...props}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </ReakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["timeoutRef","clearTimeouts","tooltipState","delay","children","content","position","gapSize","className","props","tooltip","useTooltipState","placement","gutter","React","useRef","useCallback","current","clearTimeout","useEffect","fn","setTimeout","useMemo","show","hide","child","Children","only","TooltipReference","ref","onFocus","event","currentTarget","addEventListener","e","eventKey","key","once","preventDefault","referenceProps","cloneElement","visible","ReakitTooltip","classNames"],"mappings":"iWAuB0B,uBADA,oBAgB1B,gBAiFUA,EAEAC,EA/FAC,EACAC,EAYNC,IAAAA,SACAC,IAAAA,YACAC,SAAAA,aAAW,YACXC,QAAAA,aAAU,IACVC,IAAAA,UACGC,sCAEGC,GApBAR,EAAeS,kBAoBkB,CAAEC,UAAWN,EAAUO,OAAQN,IAyEhEP,EAAac,EAAMC,SAEnBd,EAAgBa,EAAME,aAAY,WACV,MAAtBhB,EAAWiB,SACXC,aAAalB,EAAWiB,WAE7B,IAGHH,EAAMK,WAAU,kBAAMlB,IAAe,CAACA,IArGhCE,EAuGCW,EAAME,aACT,SAAeI,EAAgBjB,UACpB,WACHF,IACAD,EAAWiB,QAAUI,WAAWD,EAAIjB,MAG5C,CAACF,IA7GEa,EAAMQ,SACT,qDACOpB,OACHqB,KAAMpB,GAAM,kBAAMD,EAAaqB,SATjB,KAUdC,KAAMrB,GAAM,kBAAMD,EAAasB,SATjB,SAWlB,CAACrB,EAAOD,KAcNuB,EAAQX,EAAMY,SAASC,KAAyBvB,UACjDC,EA6BDS,gCACIA,gBAACc,oCACOlB,GAEJmB,IAAMJ,EAAcI,KAChBJ,EAAMhB,OACVqB,iBAzBSC,GAWjBA,EAAMC,cAAcC,iBAAiB,kBANhBC,OACXC,EAAYD,EAAoBE,IACrB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjDzB,EAAQa,SAG2C,CAAEc,MAAM,IAEnEN,EAAMO,iBAE6B,mBAAxBb,EAAMhB,MAAMqB,SAAwBL,EAAMhB,MAAMqB,QAAQC,OAY1D,SAACQ,UAAmBzB,EAAM0B,aAAaf,EAAOc,MAElD7B,EAAQ+B,QACL3B,gBAAC4B,2BACOhC,EACAD,GACJD,UAAWmC,EAAW,mBAAoBnC,KAEtB,mBAAZH,EAAyBA,IAAYA,GAEjD,MA9CDoB"}

package/lib/components/tooltip/tooltip.test.d.ts

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

package/lib/hooks/use-previous/index.d.ts

@@ -0,0 +1 @@
+export * from './use-previous';

package/lib/hooks/use-previous/use-previous.d.ts

@@ -0,0 +1,15 @@
+/**
+ * usePrevious tracks the change of the given value -
+ * when a given value has been changed from a previous call,
+ * it will return the value prior to the change.
+ *
+ * Example:
+ *
+ * const [x, setX] = useState(1)
+ * const prevX = usePrevious(x)
+ *
+ * Suppose `setX(2)` is called, then in the next component render
+ * x = 2 and prevX = 1
+ */
+declare function usePrevious<T>(value: T): T | null;
+export { usePrevious };

package/lib/hooks/use-previous/use-previous.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.usePrevious=function(r){var u=e.useRef(null);return e.useEffect((function(){u.current=r}),[r]),u.current};
+//# sourceMappingURL=use-previous.js.map

package/lib/hooks/use-previous/use-previous.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-previous.js","sources":["../../../src/hooks/use-previous/use-previous.ts"],"sourcesContent":["import * as React from 'react'\n\n/**\n * usePrevious tracks the change of the given value -\n * when a given value has been changed from a previous call,\n * it will return the value prior to the change.\n *\n * Example:\n *\n * const [x, setX] = useState(1)\n * const prevX = usePrevious(x)\n *\n * Suppose `setX(2)` is called, then in the next component render\n * x = 2 and prevX = 1\n */\nfunction usePrevious<T>(value: T): T | null {\n    const ref = React.useRef<T | null>(null)\n\n    React.useEffect(() => {\n        ref.current = value\n    }, [value])\n\n    return ref.current\n}\n\nexport { usePrevious }\n"],"names":["value","ref","React","current"],"mappings":"+GAeA,SAAwBA,OACdC,EAAMC,SAAuB,aAEnCA,aAAgB,WACZD,EAAIE,QAAUH,IACf,CAACA,IAEGC,EAAIE"}

package/lib/index.d.ts

@@ -1,22 +1,42 @@
+import './new-components/default-styles.less';
+export * from './new-components/box';
+export * from './new-components/columns';
+export * from './new-components/divider';
+export * from './new-components/inline';
+export * from './new-components/stack';
+export * from './new-components/hidden';
+export * from './new-components/hidden-visually';
+export * from './new-components/alert';
+export * from './new-components/loading';
+export * from './new-components/notice';
+export * from './new-components/heading';
+export * from './new-components/text';
+export * from './new-components/button';
+export * from './new-components/button-link';
+export * from './new-components/text-link';
+export * from './new-components/checkbox-field';
+export * from './new-components/password-field';
+export * from './new-components/select-field';
+export * from './new-components/switch-field';
+export * from './new-components/text-area';
+export * from './new-components/text-field';
+export * from './new-components/tabs';
+export * from './new-components/modal';
+export * from './hooks/use-previous';
 export { default as Avatar } from './components/avatar';
-export { default as Button } from './components/button';
 export { default as Checkbox } from './components/checkbox';
 export { default as ColorPicker, COLORS } from './components/color-picker';
 export { default as Dropdown } from './components/dropdown';
-export { default as ErrorMessage } from './components/error-message';
-export { default as Icon } from './components/icon';
 export { default as Input } from './components/input';
-export { default as KeyCapturer, SUPPORTED_KEYS } from './components/key-capturer';
 export { default as KeyboardShortcut } from './components/keyboard-shortcut';
-export { default as Loading } from './components/loading';
-export * from './components/menu';
-export { default as Modal } from './components/modal';
-export { Notification } from './components/notification/notification';
+export { default as KeyCapturer, SUPPORTED_KEYS } from './components/key-capturer';
+export { default as Popover } from './components/popover';
 export { default as ProgressBar } from './components/progress-bar';
-export { default as RangeInput } from './components/range-input';
 export { default as Select } from './components/select';
-export { Tabs, Tab } from './components/tabs';
 export { default as Time } from './components/time';
-export { default as Tip } from './components/tip';
+export { Notification } from './components/notification/notification';
 export { Tooltip, TooltipProps } from './components/tooltip';
-export { default as Popover } from './components/popover';
+export * from './components/menu';
+export { default as DeprecatedButton } from './components/deprecated-button';
+export { default as DeprecatedModal } from './components/deprecated-modal';
+export { DeprecatedLoading } from './components/deprecated-loading';

package/lib/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./components/avatar/index.js"),o=require("./components/tooltip/tooltip.js"),r=require("./components/button/index.js"),t=require("./components/checkbox/index.js"),n=require("./components/dropdown/index.js"),s=require("./components/color-picker/color-picker.js"),p=require("./components/color-picker/index.js"),u=require("./components/error-message/index.js"),i=require("./components/icon/index.js"),a=require("./components/input/index.js"),x=require("./components/key-capturer/key-capturer.js"),c=require("./components/key-capturer/index.js"),d=require("./components/keyboard-shortcut/index.js"),l=require("./components/loading/index.js"),m=require("./components/menu/menu.js"),j=require("./components/modal/index.js"),q=require("./components/notification/notification.js"),f=require("./components/progress-bar/index.js"),b=require("./components/range-input/index.js"),M=require("./components/select/index.js"),k=require("./components/tabs/tabs.js"),S=require("./components/time/index.js"),T=require("./components/tip/index.js"),g=require("./components/popover/index.js");exports.Avatar=e.default,exports.Tooltip=o.Tooltip,exports.Button=r.default,exports.Checkbox=t.default,exports.Dropdown=n.default,exports.COLORS=s.COLORS,exports.ColorPicker=p.default,exports.ErrorMessage=u.default,exports.Icon=i.default,exports.Input=a.default,exports.SUPPORTED_KEYS=x.SUPPORTED_KEYS,exports.KeyCapturer=c.default,exports.KeyboardShortcut=d.default,exports.Loading=l.default,exports.Menu=m.Menu,exports.MenuButton=m.MenuButton,exports.MenuGroup=m.MenuGroup,exports.MenuItem=m.MenuItem,exports.MenuList=m.MenuList,exports.SubMenu=m.SubMenu,exports.Modal=j.default,exports.Notification=q.Notification,exports.ProgressBar=f.default,exports.RangeInput=b.default,exports.Select=M.default,exports.Tab=k.Tab,exports.Tabs=k.Tabs,exports.Time=S.default,exports.Tip=T.default,exports.Popover=g.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./new-components/box/box.js"),o=require("./new-components/columns/columns.js"),t=require("./new-components/divider/divider.js"),r=require("./new-components/inline/inline.js"),n=require("./new-components/stack/stack.js"),s=require("./new-components/hidden/hidden.js"),i=require("./new-components/hidden-visually/hidden-visually.js"),p=require("./new-components/alert/alert.js"),d=require("./new-components/loading/loading.js"),u=require("./new-components/notice/notice.js"),a=require("./new-components/heading/heading.js"),l=require("./new-components/text/text.js"),c=require("./components/tooltip/tooltip.js"),x=require("./new-components/button/button.js"),m=require("./new-components/button-link/button-link.js"),j=require("./new-components/text-link/text-link.js"),q=require("./new-components/checkbox-field/checkbox-field.js"),w=require("./new-components/password-field/password-field.js"),b=require("./new-components/select-field/select-field.js"),f=require("./new-components/switch-field/switch-field.js"),k=require("./new-components/text-area/text-area.js"),M=require("./new-components/text-field/text-field.js"),T=require("./hooks/use-previous/use-previous.js"),h=require("./new-components/tabs/tabs.js"),S=require("./new-components/modal/modal.js"),v=require("./components/avatar/index.js"),g=require("./components/checkbox/index.js"),B=require("./components/deprecated-button/index.js"),L=require("./components/dropdown/index.js"),P=require("./components/color-picker/color-picker.js"),y=require("./components/color-picker/index.js"),C=require("./components/input/index.js"),F=require("./components/keyboard-shortcut/index.js"),A=require("./components/key-capturer/key-capturer.js"),D=require("./components/key-capturer/index.js"),H=require("./components/popover/index.js"),O=require("./components/progress-bar/index.js"),I=require("./components/select/index.js"),E=require("./components/time/index.js"),K=require("./components/notification/notification.js"),N=require("./components/menu/menu.js"),R=require("./components/deprecated-modal/index.js"),_=require("./components/deprecated-loading/deprecated-loading.js");exports.Box=e.Box,exports.Column=o.Column,exports.Columns=o.Columns,exports.Divider=t.Divider,exports.Inline=r.Inline,exports.Stack=n.Stack,exports.Hidden=s.Hidden,exports.HiddenVisually=i.HiddenVisually,exports.Alert=p.Alert,exports.Loading=d.Loading,exports.Notice=u.Notice,exports.Heading=a.Heading,exports.Text=l.Text,exports.Tooltip=c.Tooltip,exports.Button=x.Button,exports.ButtonLink=m.ButtonLink,exports.TextLink=j.TextLink,exports.CheckboxField=q.CheckboxField,exports.PasswordField=w.PasswordField,exports.SelectField=b.SelectField,exports.SwitchField=f.SwitchField,exports.TextArea=k.TextArea,exports.TextField=M.TextField,exports.usePrevious=T.usePrevious,exports.Tab=h.Tab,exports.TabAwareSlot=h.TabAwareSlot,exports.TabList=h.TabList,exports.TabPanel=h.TabPanel,exports.Tabs=h.Tabs,exports.Modal=S.Modal,exports.ModalActions=S.ModalActions,exports.ModalBody=S.ModalBody,exports.ModalCloseButton=S.ModalCloseButton,exports.ModalFooter=S.ModalFooter,exports.ModalHeader=S.ModalHeader,exports.Avatar=v.default,exports.Checkbox=g.default,exports.DeprecatedButton=B.default,exports.Dropdown=L.default,exports.COLORS=P.COLORS,exports.ColorPicker=y.default,exports.Input=C.default,exports.KeyboardShortcut=F.default,exports.SUPPORTED_KEYS=A.SUPPORTED_KEYS,exports.KeyCapturer=D.default,exports.Popover=H.default,exports.ProgressBar=O.default,exports.Select=I.default,exports.Time=E.default,exports.Notification=K.Notification,exports.Menu=N.Menu,exports.MenuButton=N.MenuButton,exports.MenuGroup=N.MenuGroup,exports.MenuItem=N.MenuItem,exports.MenuList=N.MenuList,exports.SubMenu=N.SubMenu,exports.DeprecatedModal=R.default,exports.DeprecatedLoading=_.Loading;
 //# sourceMappingURL=index.js.map

package/lib/new-components/alert/alert.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { AlertTone } from '../common-types';
+declare type AllOrNone<T> = T | {
+    [K in keyof T]?: never;
+};
+declare type AlertCloseProps = AllOrNone<{
+    closeLabel: string;
+    onClose: () => void;
+}>;
+declare type AlertProps = {
+    id?: string;
+    children: React.ReactNode;
+    tone: AlertTone;
+} & AlertCloseProps;
+declare function Alert({ id, children, tone, closeLabel, onClose }: AlertProps): JSX.Element;
+export { Alert };
+export type { AlertProps };

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),l=require("../responsive-props.js"),t=require("../box/box.js"),n=require("../columns/columns.js"),r=require("../icons/alert-icon.js"),o=require("../icons/close-icon.js"),a=require("./alert.module.css.js");exports.Alert=function(s){var c=s.children,i=s.tone,u=s.closeLabel,m=s.onClose;return e.createElement(t.Box,{id:s.id,role:"alert","aria-live":"polite",padding:"small",className:[a.default.container,l.getClassNames(a.default,"tone",i)]},e.createElement(n.Columns,{space:"small",alignY:"top"},e.createElement(n.Column,{width:"content"},e.createElement(r.AlertIcon,{tone:i})),e.createElement(n.Column,null,c),null!=m?e.createElement(n.Column,{width:"content"},e.createElement("button",{type:"button",onClick:m,"aria-label":u},e.createElement(o.CloseIcon,null))):null))};
+//# sourceMappingURL=alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sources":["../../../src/new-components/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AlertTone } from '../common-types'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n    closeLabel: string\n    onClose: () => void\n}>\n\ntype AlertProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            padding=\"small\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"top\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} />\n                </Column>\n                <Column>{children}</Column>\n                {onClose != null ? (\n                    <Column width=\"content\">\n                        <button type=\"button\" onClick={onClose} aria-label={closeLabel}>\n                            <CloseIcon />\n                        </button>\n                    </Column>\n                ) : null}\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["children","tone","closeLabel","onClose","React","Box","id","role","padding","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","type","onClick","CloseIcon"],"mappings":"sTAwBA,gBAAqBA,IAAAA,SAAUC,IAAAA,KAAMC,IAAAA,WAAYC,IAAAA,eAEzCC,gBAACC,OACGC,KAHKA,GAILC,KAAK,oBACK,SACVC,QAAQ,QACRC,UAAW,CAACC,UAAOC,UAAWC,gBAAcF,UAAQ,OAAQT,KAE5DG,gBAACS,WAAQC,MAAM,QAAQC,OAAO,OAC1BX,gBAACY,UAAOC,MAAM,WACVb,gBAACc,aAAUjB,KAAMA,KAErBG,gBAACY,cAAQhB,GACG,MAAXG,EACGC,gBAACY,UAAOC,MAAM,WACVb,0BAAQe,KAAK,SAASC,QAASjB,eAAqBD,GAChDE,gBAACiB,oBAGT"}

package/lib/new-components/alert/alert.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"ad19f859","tone-info":"_7fd19074","tone-positive":"b6504efb","tone-caution":"_1668c1a3","tone-critical":"_59663dff"};
+//# sourceMappingURL=alert.module.css.js.map

package/lib/new-components/alert/alert.module.css.js.map

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

package/lib/new-components/alert/index.d.ts

@@ -0,0 +1 @@
+export * from './alert';

package/lib/new-components/base-button/base-button.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { TooltipProps } from '../../components/tooltip';
+declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+declare type ButtonTone = 'normal' | 'destructive';
+declare type ButtonSize = 'small' | 'normal' | 'large';
+declare type IconElement = React.ReactChild;
+declare type CommonProps = {
+    /**
+     * The button's variant.
+     */
+    variant: ButtonVariant;
+    /**
+     * The button's tone.
+     * @default 'normal'
+     */
+    tone?: ButtonTone;
+    /**
+     * The button's size.
+     * @default 'normal'
+     */
+    size?: ButtonSize;
+    /**
+     * Whether the button is disabled or not.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button is busy/loading.
+     *
+     * A button in this state is functionally and semantically disabled. Visually is does not look
+     * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * A tooltip linked to the button element.
+     */
+    tooltip?: TooltipProps['content'];
+};
+declare type IconButtonProps = {
+    icon: IconElement;
+    'aria-label': string;
+    children?: never;
+    startIcon?: never;
+    endIcon?: never;
+};
+declare type LabelledButtonProps = {
+    children: NonNullable<React.ReactNode>;
+    startIcon?: IconElement;
+    endIcon?: IconElement;
+    icon?: never;
+};
+export declare type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps);
+/**
+ * The component that powers `Button` and `ButtonLink`, where the button styling logic and some
+ * common functionality resides. This component is internal to Reactist.
+ *
+ * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)
+ *
+ * @see Button
+ * @see ButtonLink
+ */
+export declare const BaseButton: import("../../utils/polymorphism").PolymorphicComponent<"div", BaseButtonProps, "obfuscateClassName">;
+export {};

package/lib/new-components/base-button/base-button.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=require("../../utils/polymorphism.js"),n=require("../box/box.js"),a=require("../spinner/spinner.js"),o=require("../../components/tooltip/tooltip.js"),i=require("./base-button.module.css.js"),r=["as","variant","tone","size","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon"];function s(e){e.preventDefault()}exports.BaseButton=t.polymorphicComponent((function(t,u){var c=t.as,d=void 0===c?"div":c,p=t.variant,m=t.tone,f=void 0===m?"normal":m,b=t.size,v=void 0===b?"normal":b,x=t.disabled,j=void 0!==x&&x,E=t.loading,B=void 0!==E&&E,h=t.tooltip,q=t.onClick,y=t.exceptionallySetClassName,C=t.children,I=t.startIcon,N=t.endIcon,g=t.icon,S=e.objectWithoutPropertiesLoose(t,r),_=B||j,k=l.createElement(n.Box,Object.assign({},S,{as:d,ref:u,"aria-disabled":_,onClick:_?s:q,className:[y,i.default.baseButton,i.default["variant-"+p],i.default["tone-"+f],i.default["size-"+v],g?i.default.iconButton:null,j?i.default.disabled:null]}),g?B&&l.createElement(a.Spinner,null)||g:l.createElement(l.Fragment,null,I?l.createElement(n.Box,{display:"flex",className:i.default.startIcon,"aria-hidden":!0},B&&!N?l.createElement(a.Spinner,null):I):null,C?l.createElement("span",{className:i.default.label},C):null,N||B&&!I?l.createElement(n.Box,{display:"flex",className:i.default.endIcon,"aria-hidden":!0},B?l.createElement(a.Spinner,null):N):null)),z=g?null!=h?h:S["aria-label"]:h;return z?l.createElement(o.Tooltip,{content:z},k):k}));
+//# sourceMappingURL=base-button.js.map

package/lib/new-components/base-button/base-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-button.js","sources":["../../../src/new-components/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../../components/tooltip'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n    event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n    /**\n     * The button's variant.\n     */\n    variant: ButtonVariant\n    /**\n     * The button's tone.\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n    /**\n     * The button's size.\n     * @default 'normal'\n     */\n    size?: ButtonSize\n    /**\n     * Whether the button is disabled or not.\n     * @default false\n     */\n    disabled?: boolean\n    /**\n     * Whether the button is busy/loading.\n     *\n     * A button in this state is functionally and semantically disabled. Visually is does not look\n     * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n     *\n     * @default false\n     */\n    loading?: boolean\n    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n}\n\ntype IconButtonProps = {\n    icon: IconElement\n    'aria-label': string\n    children?: never\n    startIcon?: never\n    endIcon?: never\n}\n\ntype LabelledButtonProps = {\n    children: NonNullable<React.ReactNode>\n    startIcon?: IconElement\n    endIcon?: IconElement\n    icon?: never\n}\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n    {\n        as = 'div',\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        disabled = false,\n        loading = false,\n        tooltip,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        icon,\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Box\n            {...props}\n            as={as}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={[\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                icon ? styles.iconButton : null,\n                disabled ? styles.disabled : null,\n            ]}\n        >\n            {icon ? (\n                (loading && <Spinner />) || icon\n            ) : (\n                <>\n                    {startIcon ? (\n                        <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n                            {loading && !endIcon ? <Spinner /> : startIcon}\n                        </Box>\n                    ) : null}\n                    {children ? <span className={styles.label}>{children}</span> : null}\n                    {endIcon || (loading && !startIcon) ? (\n                        <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n                            {loading ? <Spinner /> : endIcon}\n                        </Box>\n                    ) : null}\n                </>\n            )}\n        </Box>\n    )\n\n    // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n    const tooltipContent = icon ? tooltip ?? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n"],"names":["preventDefault","event","polymorphicComponent","ref","as","variant","tone","size","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","props","isDisabled","buttonElement","React","Box","className","styles","baseButton","iconButton","Spinner","display","label","tooltipContent","Tooltip","content"],"mappings":"meAOA,SAASA,EAAeC,GACpBA,EAAMD,oCAqEgBE,wBAA6C,WAiBnEC,WAfIC,GAAAA,aAAK,QACLC,IAAAA,YACAC,KAAAA,aAAO,eACPC,KAAAA,aAAO,eACPC,SAAAA,oBACAC,QAAAA,gBACAC,IAAAA,QACAC,IAAAA,QACAC,IAAAA,0BACAC,IAAAA,SACAC,IAAAA,UACAC,IAAAA,QACAC,IAAAA,KACGC,sCAIDC,EAAaT,GAAWD,EACxBW,EACFC,gBAACC,uBACOJ,GACJb,GAAIA,EACJD,IAAKA,kBACUe,EACfP,QAASO,EAAalB,EAAiBW,EACvCW,UAAW,CACPV,EACAW,UAAOC,WACPD,qBAAkBlB,GAClBkB,kBAAejB,GACfiB,kBAAehB,GACfS,EAAOO,UAAOE,WAAa,KAC3BjB,EAAWe,UAAOf,SAAW,QAGhCQ,EACIP,GAAWW,gBAACM,iBAAeV,EAE5BI,gCACKN,EACGM,gBAACC,OAAIM,QAAQ,OAAOL,UAAWC,UAAOT,4BACjCL,IAAYM,EAAUK,gBAACM,gBAAaZ,GAEzC,KACHD,EAAWO,wBAAME,UAAWC,UAAOK,OAAQf,GAAmB,KAC9DE,GAAYN,IAAYK,EACrBM,gBAACC,OAAIM,QAAQ,OAAOL,UAAWC,UAAOR,0BACjCN,EAAUW,gBAACM,gBAAaX,GAE7B,OAOdc,EAAiBb,EAAON,MAAAA,EAAAA,EAAWO,EAAM,cAAgBP,SACxDmB,EACHT,gBAACU,WAAQC,QAASF,GAAiBV,GAEnCA"}

package/lib/new-components/base-button/base-button.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={label:"_1f20c88a",baseButton:"_623015f3","size-small":"_062de645","size-normal":"_55e2a6a9","size-large":"cab32a7c",disabled:"e71c191a",iconButton:"_368efc16",startIcon:"d35389c1",endIcon:"_900d41d8","variant-primary":"_7c95e162","variant-secondary":"_9cb889aa","variant-tertiary":"_611b5b28","variant-quaternary":"_80c2bb84","tone-destructive":"ee13c455"};
+//# sourceMappingURL=base-button.module.css.js.map

package/lib/new-components/base-button/base-button.module.css.js.map

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

package/lib/new-components/base-button/index.d.ts

@@ -0,0 +1 @@
+export * from './base-button';

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

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { BoxProps } from '../box';
+import { WithEnhancedClassName } from '../common-types';
+declare type FieldHintProps = {
+    id: string;
+    children: React.ReactNode;
+    hidden?: boolean;
+};
+declare function FieldHint(props: FieldHintProps): JSX.Element;
+declare type HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<React.InputHTMLAttributes<T>, T>;
+declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {
+    /**
+     * The main label for this field element.
+     *
+     * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.
+     *
+     * @see secondaryLabel
+     * @see auxiliaryLabel
+     */
+    label: React.ReactNode;
+    /**
+     * An optional secondary label for this field element. It is combined with the `label` to
+     * form the field's entire accessible name (unless the field label is overriden by using
+     * `aria-label` or `aria-labelledby`).
+     *
+     * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.
+     *
+     * @see label
+     * @see auxiliaryLabel
+     */
+    secondaryLabel?: React.ReactNode;
+    /**
+     * An optional extra element to be placed to the right of the main and secondary labels.
+     *
+     * This extra element is not included in the accessible name of the field element. Its only
+     * purpose is either visual, or functional (if you include interactive elements in it).
+     *
+     * @see label
+     * @see secondaryLabel
+     */
+    auxiliaryLabel?: React.ReactNode;
+    /**
+     * A hint or help-like content associated as the accessible description of the field. It is
+     * generally rendered below it, and with a visual style that reduces its prominence (i.e.
+     * as secondary text).
+     */
+    hint?: React.ReactNode;
+    /**
+     * The maximum width that the input field can expand to.
+     */
+    maxWidth?: BoxProps['maxWidth'];
+    /**
+     * Used internally by components composed using `BaseField`. It is not exposed as part of
+     * the public props of such components.
+     */
+    children: (props: {
+        id: string;
+        'aria-describedby'?: string;
+    }) => React.ReactNode;
+};
+declare type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
+declare function BaseField({ label, secondaryLabel, auxiliaryLabel, hint, className, children, maxWidth, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, }: BaseFieldProps & WithEnhancedClassName): JSX.Element;
+export { BaseField, FieldHint };
+export type { FieldComponentProps };

package/lib/new-components/base-field/base-field.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("../box/box.js"),t=require("../stack/stack.js"),l=require("../text/text.js"),s=require("../common-helpers.js"),r=require("./base-field.module.css.js");function n(a){return e.createElement(l.Text,Object.assign({as:"p",tone:"secondary",size:"copy"},a))}exports.BaseField=function(i){var d=i.label,c=i.secondaryLabel,u=i.auxiliaryLabel,o=i.hint,m=i.className,x=i.children,b=i.maxWidth,p=i.hidden,y=i["aria-describedby"],f=s.useId(i.id),E=s.useId(),h=null!=y?y:o?E:void 0;return e.createElement(t.Stack,{space:"small"},e.createElement(a.Box,{className:[m,r.default.container],maxWidth:b,hidden:p},e.createElement(a.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd",paddingBottom:"small"},e.createElement(l.Text,{size:"body",as:"label",htmlFor:f},d?e.createElement("span",{className:r.default.primaryLabel},d):null,c?e.createElement("span",{className:r.default.secondaryLabel}," (",c,")"):null),u?e.createElement(a.Box,{className:r.default.auxiliaryLabel,paddingLeft:"small"},u):null),x(h?{id:f,"aria-describedby":h}:{id:f})),o?e.createElement(n,{hidden:p,id:E},o):null)},exports.FieldHint=n;
+//# sourceMappingURL=base-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-field.js","sources":["../../../src/new-components/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../common-helpers'\nimport { Text } from '../text'\nimport { WithEnhancedClassName } from '../common-types'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n    hidden?: boolean\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\n//\n// BaseField\n//\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see secondaryLabel\n         * @see auxiliaryLabel\n         */\n        label: React.ReactNode\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see label\n         * @see auxiliaryLabel\n         */\n        secondaryLabel?: React.ReactNode\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see label\n         * @see secondaryLabel\n         */\n        auxiliaryLabel?: React.ReactNode\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         */\n        hint?: React.ReactNode\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: { id: string; 'aria-describedby'?: string }) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className'> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n\n    return (\n        <Stack space=\"small\">\n            <Box className={[className, styles.container]} maxWidth={maxWidth} hidden={hidden}>\n                <Box\n                    as=\"span\"\n                    display=\"flex\"\n                    justifyContent=\"spaceBetween\"\n                    alignItems=\"flexEnd\"\n                    paddingBottom=\"small\"\n                >\n                    <Text size=\"body\" as=\"label\" htmlFor={id}>\n                        {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                        {secondaryLabel ? (\n                            <span className={styles.secondaryLabel}>&nbsp;({secondaryLabel})</span>\n                        ) : null}\n                    </Text>\n                    {auxiliaryLabel ? (\n                        <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                            {auxiliaryLabel}\n                        </Box>\n                    ) : null}\n                </Box>\n                {children(ariaDescribedBy ? { id, 'aria-describedby': ariaDescribedBy } : { id })}\n            </Box>\n            {hint ? (\n                <FieldHint hidden={hidden} id={hintId}>\n                    {hint}\n                </FieldHint>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint }\nexport type { FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","as","tone","size","label","secondaryLabel","auxiliaryLabel","hint","className","children","maxWidth","hidden","originalAriaDescribedBy","id","useId","hintId","ariaDescribedBy","undefined","Stack","space","Box","styles","container","display","justifyContent","alignItems","paddingBottom","htmlFor","primaryLabel","paddingLeft"],"mappings":"4PAcA,SAASA,EAAUC,UACRC,gBAACC,sBAAKC,GAAG,IAAIC,KAAK,YAAYC,KAAK,QAAWL,sBAgEzD,gBACIM,IAAAA,MACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,KACAC,IAAAA,UACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,OACoBC,IAApB,oBAGMC,EAAKC,UAFXD,IAGME,EAASD,UAETE,EAAkBJ,MAAAA,EAAAA,EAA4BL,EAAOQ,OAASE,SAGhElB,gBAACmB,SAAMC,MAAM,SACTpB,gBAACqB,OAAIZ,UAAW,CAACA,EAAWa,UAAOC,WAAYZ,SAAUA,EAAUC,OAAQA,GACvEZ,gBAACqB,OACGnB,GAAG,OACHsB,QAAQ,OACRC,eAAe,eACfC,WAAW,UACXC,cAAc,SAEd3B,gBAACC,QAAKG,KAAK,OAAOF,GAAG,QAAQ0B,QAASd,GACjCT,EAAQL,wBAAMS,UAAWa,UAAOO,cAAexB,GAAgB,KAC/DC,EACGN,wBAAMS,UAAWa,UAAOhB,qBAAwBA,OAChD,MAEPC,EACGP,gBAACqB,OAAIZ,UAAWa,UAAOf,eAAgBuB,YAAY,SAC9CvB,GAEL,MAEPG,EAASO,EAAkB,CAAEH,GAAAA,qBAAwBG,GAAoB,CAAEH,GAAAA,KAE/EN,EACGR,gBAACF,GAAUc,OAAQA,EAAQE,GAAIE,GAC1BR,GAEL"}

package/lib/new-components/base-field/base-field.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"ed7d894c",primaryLabel:"_22213081",secondaryLabel:"be8637dd",auxiliaryLabel:"_72b46ad5"};
+//# sourceMappingURL=base-field.module.css.js.map

package/lib/new-components/base-field/base-field.module.css.js.map

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

package/lib/new-components/base-field/index.d.ts

@@ -0,0 +1 @@
+export * from './base-field';

package/lib/new-components/box/box.d.ts

@@ -0,0 +1,57 @@
+import type { ResponsiveProp } from '../responsive-props';
+import type { DividerWeight, Space, SpaceWithNegatives, WithEnhancedClassName } from '../common-types';
+interface BoxPaddingProps {
+    padding?: ResponsiveProp<Space>;
+    paddingX?: ResponsiveProp<Space>;
+    paddingY?: ResponsiveProp<Space>;
+    paddingTop?: ResponsiveProp<Space>;
+    paddingRight?: ResponsiveProp<Space>;
+    paddingBottom?: ResponsiveProp<Space>;
+    paddingLeft?: ResponsiveProp<Space>;
+}
+interface BoxMarginProps {
+    margin?: ResponsiveProp<SpaceWithNegatives>;
+    marginX?: ResponsiveProp<SpaceWithNegatives>;
+    marginY?: ResponsiveProp<SpaceWithNegatives>;
+    marginTop?: ResponsiveProp<SpaceWithNegatives>;
+    marginRight?: ResponsiveProp<SpaceWithNegatives>;
+    marginBottom?: ResponsiveProp<SpaceWithNegatives>;
+    marginLeft?: ResponsiveProp<SpaceWithNegatives>;
+}
+declare type BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none';
+declare type BoxFlexDirection = 'column' | 'row';
+declare type BoxFlexWrap = 'nowrap' | 'wrap';
+declare type BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline';
+declare type BoxJustifyContent = 'center' | 'flexEnd' | 'flexStart' | 'spaceAround' | 'spaceBetween' | 'spaceEvenly';
+declare type BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll';
+declare type BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+declare type BoxMinWidth = 0 | BoxMaxMinWidth;
+declare type BoxMaxWidth = BoxMaxMinWidth | 'full';
+declare type BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent';
+interface BorderProps {
+    borderRadius?: 'standard' | 'none' | 'full';
+    border?: DividerWeight;
+}
+interface ReusableBoxProps extends BorderProps, BoxPaddingProps {
+    minWidth?: BoxMinWidth;
+    maxWidth?: BoxMaxWidth;
+    width?: BoxWidth;
+    background?: 'default' | 'aside' | 'highlight' | 'selected';
+    flexGrow?: 0 | 1;
+    flexShrink?: 0;
+}
+declare type BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
+interface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {
+    position?: ResponsiveProp<BoxPosition>;
+    display?: ResponsiveProp<BoxDisplay>;
+    flexDirection?: ResponsiveProp<BoxFlexDirection>;
+    flexWrap?: BoxFlexWrap;
+    alignItems?: ResponsiveProp<BoxAlignItems>;
+    justifyContent?: ResponsiveProp<BoxJustifyContent>;
+    overflow?: BoxOverflow;
+    height?: 'full';
+    textAlign?: ResponsiveProp<'start' | 'center' | 'end' | 'justify'>;
+}
+declare const Box: import("../../utils/polymorphism").PolymorphicComponent<"div", BoxProps, "keepClassName">;
+export type { BoxProps, BoxPaddingProps, BoxMarginProps, ReusableBoxProps, BoxMinWidth, BoxMaxWidth, BoxDisplay, BoxPosition, BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxOverflow, };
+export { Box };

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

@@ -0,0 +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 l=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=(e(a),e(require("classnames"))),i=require("../../utils/polymorphism.js"),s=require("../responsive-props.js"),n=require("./box.module.css.js"),d=require("./padding.module.css.js"),r=require("./margin.module.css.js"),o=require("./width.module.css.js"),u=["as","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","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"];exports.Box=i.polymorphicComponent((function(e,i){var g,m,f,p,h,C,c,N,x=e.as,v=void 0===x?"div":x,b=e.position,j=void 0===b?"static":b,w=e.display,y=e.flexDirection,W=void 0===y?"row":y,q=e.flexWrap,R=e.flexGrow,S=e.flexShrink,B=e.alignItems,L=e.justifyContent,T=e.overflow,k=e.width,X=e.height,Y=e.background,_=e.border,A=e.borderRadius,D=e.minWidth,G=e.maxWidth,I=e.textAlign,P=void 0===I?"start":I,E=e.padding,F=e.paddingY,H=e.paddingX,M=e.paddingTop,O=e.paddingRight,z=e.paddingBottom,J=e.paddingLeft,K=e.margin,Q=e.marginY,U=e.marginX,V=e.marginTop,Z=e.marginRight,$=e.marginBottom,ee=e.marginLeft,le=e.className,ae=e.children,te=l.objectWithoutPropertiesLoose(e,u),ie=null!==(g=null!=M?M:F)&&void 0!==g?g:E,se=null!==(m=null!=O?O:H)&&void 0!==m?m:E,ne=null!==(f=null!=z?z:F)&&void 0!==f?f:E,de=null!==(p=null!=J?J:H)&&void 0!==p?p:E,re=null!==(h=null!=V?V:Q)&&void 0!==h?h:K,oe=null!==(C=null!=Z?Z:U)&&void 0!==C?C:K,ue=null!==(c=null!=$?$:Q)&&void 0!==c?c:K,ge=null!==(N=null!=ee?ee:U)&&void 0!==N?N:K,me=!w||"string"==typeof w&&"flex"!==w&&"inlineFlex"!==w;return a.createElement(v,l.objectSpread2(l.objectSpread2({},te),{},{className:t(le,n.default.box,w?s.getClassNames(n.default,"display",w):null,"static"!==j?s.getClassNames(n.default,"position",j):null,null!=D?s.getClassNames(o.default,"minWidth",String(D)):null,s.getClassNames(o.default,"maxWidth",G),"start"!==P?s.getClassNames(n.default,"textAlign",P):null,s.getClassNames(d.default,"paddingTop",ie),s.getClassNames(d.default,"paddingRight",se),s.getClassNames(d.default,"paddingBottom",ne),s.getClassNames(d.default,"paddingLeft",de),s.getClassNames(r.default,"marginTop",re),s.getClassNames(r.default,"marginRight",oe),s.getClassNames(r.default,"marginBottom",ue),s.getClassNames(r.default,"marginLeft",ge),me?null:s.getClassNames(n.default,"flexDirection",W),me?null:s.getClassNames(n.default,"flexWrap",q),me?null:s.getClassNames(n.default,"alignItems",B),me?null:s.getClassNames(n.default,"justifyContent",L),null!=S?s.getClassNames(n.default,"flexShrink",String(S)):null,null!=R?s.getClassNames(n.default,"flexGrow",String(R)):null,s.getClassNames(n.default,"overflow",T),null!=k?s.getClassNames(o.default,"width",String(k)):null,s.getClassNames(n.default,"height",X),s.getClassNames(n.default,"bg",Y),"none"!==A?s.getClassNames(n.default,"borderRadius",A):null,"none"!==_?s.getClassNames(n.default,"border",_):null)||void 0,ref:i}),ae)}));
+//# sourceMappingURL=box.js.map

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

@@ -0,0 +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 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'\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    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    height?: 'full'\n    textAlign?: ResponsiveProp<'start' | 'center' | 'end' | 'justify'>\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        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign = 'start',\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                    textAlign !== 'start' ? getClassNames(styles, 'textAlign', textAlign) : null,\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                    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}\n\nexport { Box }\n"],"names":["polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","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":"w3BAoFYA,wBAAuD,WAsC/DC,2BApCIC,GAAIC,aAAY,YAChBC,SAAAA,aAAW,WACXC,IAAAA,YACAC,cAAAA,aAAgB,QAChBC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,WACAC,IAAAA,WACAC,IAAAA,eACAC,IAAAA,SACAC,IAAAA,MACAC,IAAAA,OACAC,IAAAA,WACAC,IAAAA,OACAC,IAAAA,aACAC,IAAAA,SACAC,IAAAA,aACAC,UAAAA,aAAY,UACZC,IAAAA,QACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,WACAC,IAAAA,aACAC,IAAAA,cACAC,IAAAA,YACAC,IAAAA,OACAC,IAAAA,QACAC,IAAAA,QACAC,IAAAA,UACAC,IAAAA,YACAC,IAAAA,aACAC,KAAAA,WACAC,KAAAA,UACAC,KAAAA,SACGC,uCAIDC,aAAqBd,MAAAA,EAAAA,EAAcF,iBAAYD,EAC/CkB,aAAuBd,MAAAA,EAAAA,EAAgBF,iBAAYF,EACnDmB,aAAwBd,MAAAA,EAAAA,EAAiBJ,iBAAYD,EACrDoB,aAAsBd,MAAAA,EAAAA,EAAeJ,iBAAYF,EAEjDqB,aAAoBX,MAAAA,EAAAA,EAAaF,iBAAWD,EAC5Ce,aAAsBX,MAAAA,EAAAA,EAAeF,iBAAWF,EAChDgB,aAAuBX,MAAAA,EAAAA,EAAgBJ,iBAAWD,EAClDiB,aAAqBX,MAAAA,GAAAA,GAAcJ,iBAAWF,EAE9CkB,IACDzC,GAA+B,iBAAZA,GAAoC,SAAZA,GAAkC,eAAZA,SAE/D0C,gBACH5C,qCAEOkC,QACHF,UACIa,EACIb,GACAc,UAAOC,IACP7C,EAAU8C,gBAAcF,UAAQ,UAAW5C,GAAW,KACzC,WAAbD,EAAwB+C,gBAAcF,UAAQ,WAAY7C,GAAY,KAC1D,MAAZc,EACMiC,gBAAcC,UAAa,WAAYC,OAAOnC,IAC9C,KACNiC,gBAAcC,UAAa,WAAYjC,GACzB,UAAdC,EAAwB+B,gBAAcF,UAAQ,YAAa7B,GAAa,KAExE+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,gBAAiB3C,GACzDwC,GAAW,KAAOK,gBAAcF,UAAQ,WAAY1C,GACpDuC,GAAW,KAAOK,gBAAcF,UAAQ,aAAcvC,GACtDoC,GAAW,KAAOK,gBAAcF,UAAQ,iBAAkBtC,GAC5C,MAAdF,EACM0C,gBAAcF,UAAQ,aAAcI,OAAO5C,IAC3C,KACM,MAAZD,EAAmB2C,gBAAcF,UAAQ,WAAYI,OAAO7C,IAAa,KAEzE2C,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,EACTvD,IAAAA,IAEJmC"}