@doist/reactist 17.10.1 → 18.0.0

package/es/components/color-picker/color-picker.js

@@ -1,6 +1,6 @@
 import { createElement } from 'react';
 import classNames from 'classnames';
-import { Tooltip } from '../tooltip/tooltip.js';
+import { Tooltip } from '../../new-components/tooltip/tooltip.js';
 import DeprecatedDropdown from '../deprecated-dropdown/index.js';
 
 const COLORS = ['#606060', '#4A90E2', '#03B3B2', '#008299', '#82BA00', '#D24726', '#AC193D', '#DC4FAD', '#3BD5FB', '#74E8D3', '#FFCC00', '#FB886E', '#CCCCCC'];

package/es/components/color-picker/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport classnames from 'classnames'\n\nimport DeprecatedDropdown from '../deprecated-dropdown'\nimport { Tooltip } from '../tooltip'\n\nimport './color-picker.less'\n\ntype NamedColor = { name: string; color: string }\n\nconst COLORS = [\n    '#606060',\n    '#4A90E2',\n    '#03B3B2',\n    '#008299',\n    '#82BA00',\n    '#D24726',\n    '#AC193D',\n    '#DC4FAD',\n    '#3BD5FB',\n    '#74E8D3',\n    '#FFCC00',\n    '#FB886E',\n    '#CCCCCC',\n]\n\nconst _isNamedColor = (color: string | NamedColor | undefined): color is NamedColor =>\n    typeof color !== 'string'\n\nconst _getColor = (colorList: (string | NamedColor)[], colorIndex: number) => {\n    const index = colorIndex >= colorList.length ? 0 : colorIndex\n    return colorList[index]\n}\n\ntype Props = {\n    small?: boolean\n    color?: number\n    onChange?: (color: number) => void\n    colorList?: (string | NamedColor)[]\n}\n\nfunction ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props) {\n    return (\n        <DeprecatedDropdown.Box right className=\"reactist_color_picker\">\n            <DeprecatedDropdown.Trigger>\n                {(() => {\n                    const backgroundColor = _getColor(colorList, color)\n\n                    return (\n                        <span\n                            className={classnames('color_trigger', { small })}\n                            style={{\n                                backgroundColor: _isNamedColor(backgroundColor)\n                                    ? backgroundColor.color\n                                    : backgroundColor,\n                            }}\n                        >\n                            <span className=\"color_trigger--inner_ring\" />\n                        </span>\n                    )\n                })()}\n            </DeprecatedDropdown.Trigger>\n            <DeprecatedDropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {\n                        items.push(\n                            <ColorItem\n                                isActive={\n                                    color >= colorList.length\n                                        ? currentIndex === 0\n                                        : currentIndex === color\n                                }\n                                key={currentIndex}\n                                color={\n                                    _isNamedColor(currentColor) ? currentColor.color : currentColor\n                                }\n                                colorIndex={currentIndex}\n                                onClick={onChange}\n                                tooltip={_isNamedColor(currentColor) ? currentColor.name : null}\n                            />,\n                        )\n                        return items\n                    }, [])}\n                </div>\n            </DeprecatedDropdown.Body>\n        </DeprecatedDropdown.Box>\n    )\n}\nColorPicker.displayName = 'ColorPicker'\n\ntype ColorItemProps = {\n    color: string\n    colorIndex: number\n    isActive?: boolean\n    onClick?: (colorIndex: number) => void\n    tooltip?: React.ReactNode\n}\n\nfunction ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {\n    const item = (\n        <span\n            data-testid=\"reactist-color-item\"\n            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => onClick?.(colorIndex)}\n        >\n            <span className=\"color_item--inner_ring\" />\n        </span>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{item}</Tooltip> : item\n}\nColorItem.displayName = 'ColorItem'\n\nexport { ColorPicker, ColorItem, COLORS }\n"],"names":["COLORS","_isNamedColor","color","_getColor","colorList","colorIndex","index","length","ColorPicker","small","onChange","React","DeprecatedDropdown","Box","right","className","Trigger","backgroundColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","displayName","item","Tooltip","content"],"mappings":";;;;;MAUMA,MAAM,GAAG,CACX,SADW,EAEX,SAFW,EAGX,SAHW,EAIX,SAJW,EAKX,SALW,EAMX,SANW,EAOX,SAPW,EAQX,SARW,EASX,SATW,EAUX,SAVW,EAWX,SAXW,EAYX,SAZW,EAaX,SAbW;;AAgBf,MAAMC,aAAa,GAAIC,KAAD,IAClB,OAAOA,KAAP,KAAiB,QADrB;;AAGA,MAAMC,SAAS,GAAG,CAACC,SAAD,EAAqCC,UAArC;EACd,MAAMC,KAAK,GAAGD,UAAU,IAAID,SAAS,CAACG,MAAxB,GAAiC,CAAjC,GAAqCF,UAAnD;EACA,OAAOD,SAAS,CAACE,KAAD,CAAhB;AACH,CAHD;;AAYA,SAASE,WAAT,CAAqB;EAAEN,KAAK,GAAG,CAAV;EAAaO,KAAb;EAAoBC,QAApB;EAA8BN,SAAS,GAAGJ;AAA1C,CAArB;EACI,oBACIW,aAAA,CAACC,kBAAkB,CAACC,GAApB;IAAwBC,KAAK;IAACC,SAAS,EAAC;GAAxC,eACIJ,aAAA,CAACC,kBAAkB,CAACI,OAApB,MAAA,EACK,CAAC;IACE,MAAMC,eAAe,GAAGd,SAAS,CAACC,SAAD,EAAYF,KAAZ,CAAjC;;IAEA,oBACIS,aAAA,OAAA;MACII,SAAS,EAAEG,UAAU,CAAC,eAAD,EAAkB;QAAET;OAApB;MACrBU,KAAK,EAAE;QACHF,eAAe,EAAEhB,aAAa,CAACgB,eAAD,CAAb,GACXA,eAAe,CAACf,KADL,GAEXe;;KALd,eAQIN,aAAA,OAAA;MAAMI,SAAS,EAAC;KAAhB,CARJ,CADJ;GAHH,GADL,CADJ,eAmBIJ,aAAA,CAACC,kBAAkB,CAACQ,IAApB,MAAA,eACIT,aAAA,MAAA;IAAKI,SAAS,EAAC;GAAf,EACKX,SAAS,CAACiB,MAAV,CAAoC,CAACC,KAAD,EAAQC,YAAR,EAAsBC,YAAtB;IACjCF,KAAK,CAACG,IAAN,eACId,aAAA,CAACe,SAAD;MACIC,QAAQ,EACJzB,KAAK,IAAIE,SAAS,CAACG,MAAnB,GACMiB,YAAY,KAAK,CADvB,GAEMA,YAAY,KAAKtB;MAE3B0B,GAAG,EAAEJ;MACLtB,KAAK,EACDD,aAAa,CAACsB,YAAD,CAAb,GAA8BA,YAAY,CAACrB,KAA3C,GAAmDqB;MAEvDlB,UAAU,EAAEmB;MACZK,OAAO,EAAEnB;MACToB,OAAO,EAAE7B,aAAa,CAACsB,YAAD,CAAb,GAA8BA,YAAY,CAACQ,IAA3C,GAAkD;KAZ/D,CADJ;IAgBA,OAAOT,KAAP;GAjBH,EAkBE,EAlBF,CADL,CADJ,CAnBJ,CADJ;AA6CH;;AACDd,WAAW,CAACwB,WAAZ,GAA0B,aAA1B;;AAUA,SAASN,SAAT,CAAmB;EAAExB,KAAF;EAASG,UAAT;EAAqBsB,QAArB;EAA+BE,OAA/B;EAAwCC;AAAxC,CAAnB;EACI,MAAMG,IAAI,gBACNtB,aAAA,OAAA;mBACgB;IACZI,SAAS,EAAE,yBAAyBY,QAAQ,GAAG,SAAH,GAAe,EAAhD;IACXR,KAAK,EAAE;MAAEF,eAAe,EAAEf;;IAC1B2B,OAAO,EAAE,MAAMA,OAAN,oBAAMA,OAAO,CAAGxB,UAAH;GAJ1B,eAMIM,aAAA,OAAA;IAAMI,SAAS,EAAC;GAAhB,CANJ,CADJ;EAWA,OAAOe,OAAO,gBAAGnB,aAAA,CAACuB,OAAD;IAASC,OAAO,EAAEL;GAAlB,EAA4BG,IAA5B,CAAH,GAAiDA,IAA/D;AACH;;AACDP,SAAS,CAACM,WAAV,GAAwB,WAAxB;;;;"}
+{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport classnames from 'classnames'\n\nimport DeprecatedDropdown from '../deprecated-dropdown'\nimport { Tooltip } from '../../new-components/tooltip'\n\nimport './color-picker.less'\n\ntype NamedColor = { name: string; color: string }\n\nconst COLORS = [\n    '#606060',\n    '#4A90E2',\n    '#03B3B2',\n    '#008299',\n    '#82BA00',\n    '#D24726',\n    '#AC193D',\n    '#DC4FAD',\n    '#3BD5FB',\n    '#74E8D3',\n    '#FFCC00',\n    '#FB886E',\n    '#CCCCCC',\n]\n\nconst _isNamedColor = (color: string | NamedColor | undefined): color is NamedColor =>\n    typeof color !== 'string'\n\nconst _getColor = (colorList: (string | NamedColor)[], colorIndex: number) => {\n    const index = colorIndex >= colorList.length ? 0 : colorIndex\n    return colorList[index]\n}\n\ntype Props = {\n    small?: boolean\n    color?: number\n    onChange?: (color: number) => void\n    colorList?: (string | NamedColor)[]\n}\n\nfunction ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props) {\n    return (\n        <DeprecatedDropdown.Box right className=\"reactist_color_picker\">\n            <DeprecatedDropdown.Trigger>\n                {(() => {\n                    const backgroundColor = _getColor(colorList, color)\n\n                    return (\n                        <span\n                            className={classnames('color_trigger', { small })}\n                            style={{\n                                backgroundColor: _isNamedColor(backgroundColor)\n                                    ? backgroundColor.color\n                                    : backgroundColor,\n                            }}\n                        >\n                            <span className=\"color_trigger--inner_ring\" />\n                        </span>\n                    )\n                })()}\n            </DeprecatedDropdown.Trigger>\n            <DeprecatedDropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {\n                        items.push(\n                            <ColorItem\n                                isActive={\n                                    color >= colorList.length\n                                        ? currentIndex === 0\n                                        : currentIndex === color\n                                }\n                                key={currentIndex}\n                                color={\n                                    _isNamedColor(currentColor) ? currentColor.color : currentColor\n                                }\n                                colorIndex={currentIndex}\n                                onClick={onChange}\n                                tooltip={_isNamedColor(currentColor) ? currentColor.name : null}\n                            />,\n                        )\n                        return items\n                    }, [])}\n                </div>\n            </DeprecatedDropdown.Body>\n        </DeprecatedDropdown.Box>\n    )\n}\nColorPicker.displayName = 'ColorPicker'\n\ntype ColorItemProps = {\n    color: string\n    colorIndex: number\n    isActive?: boolean\n    onClick?: (colorIndex: number) => void\n    tooltip?: React.ReactNode\n}\n\nfunction ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {\n    const item = (\n        <span\n            data-testid=\"reactist-color-item\"\n            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => onClick?.(colorIndex)}\n        >\n            <span className=\"color_item--inner_ring\" />\n        </span>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{item}</Tooltip> : item\n}\nColorItem.displayName = 'ColorItem'\n\nexport { ColorPicker, ColorItem, COLORS }\n"],"names":["COLORS","_isNamedColor","color","_getColor","colorList","colorIndex","index","length","ColorPicker","small","onChange","React","DeprecatedDropdown","Box","right","className","Trigger","backgroundColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","displayName","item","Tooltip","content"],"mappings":";;;;;MAUMA,MAAM,GAAG,CACX,SADW,EAEX,SAFW,EAGX,SAHW,EAIX,SAJW,EAKX,SALW,EAMX,SANW,EAOX,SAPW,EAQX,SARW,EASX,SATW,EAUX,SAVW,EAWX,SAXW,EAYX,SAZW,EAaX,SAbW;;AAgBf,MAAMC,aAAa,GAAIC,KAAD,IAClB,OAAOA,KAAP,KAAiB,QADrB;;AAGA,MAAMC,SAAS,GAAG,CAACC,SAAD,EAAqCC,UAArC;EACd,MAAMC,KAAK,GAAGD,UAAU,IAAID,SAAS,CAACG,MAAxB,GAAiC,CAAjC,GAAqCF,UAAnD;EACA,OAAOD,SAAS,CAACE,KAAD,CAAhB;AACH,CAHD;;AAYA,SAASE,WAAT,CAAqB;EAAEN,KAAK,GAAG,CAAV;EAAaO,KAAb;EAAoBC,QAApB;EAA8BN,SAAS,GAAGJ;AAA1C,CAArB;EACI,oBACIW,aAAA,CAACC,kBAAkB,CAACC,GAApB;IAAwBC,KAAK;IAACC,SAAS,EAAC;GAAxC,eACIJ,aAAA,CAACC,kBAAkB,CAACI,OAApB,MAAA,EACK,CAAC;IACE,MAAMC,eAAe,GAAGd,SAAS,CAACC,SAAD,EAAYF,KAAZ,CAAjC;;IAEA,oBACIS,aAAA,OAAA;MACII,SAAS,EAAEG,UAAU,CAAC,eAAD,EAAkB;QAAET;OAApB;MACrBU,KAAK,EAAE;QACHF,eAAe,EAAEhB,aAAa,CAACgB,eAAD,CAAb,GACXA,eAAe,CAACf,KADL,GAEXe;;KALd,eAQIN,aAAA,OAAA;MAAMI,SAAS,EAAC;KAAhB,CARJ,CADJ;GAHH,GADL,CADJ,eAmBIJ,aAAA,CAACC,kBAAkB,CAACQ,IAApB,MAAA,eACIT,aAAA,MAAA;IAAKI,SAAS,EAAC;GAAf,EACKX,SAAS,CAACiB,MAAV,CAAoC,CAACC,KAAD,EAAQC,YAAR,EAAsBC,YAAtB;IACjCF,KAAK,CAACG,IAAN,eACId,aAAA,CAACe,SAAD;MACIC,QAAQ,EACJzB,KAAK,IAAIE,SAAS,CAACG,MAAnB,GACMiB,YAAY,KAAK,CADvB,GAEMA,YAAY,KAAKtB;MAE3B0B,GAAG,EAAEJ;MACLtB,KAAK,EACDD,aAAa,CAACsB,YAAD,CAAb,GAA8BA,YAAY,CAACrB,KAA3C,GAAmDqB;MAEvDlB,UAAU,EAAEmB;MACZK,OAAO,EAAEnB;MACToB,OAAO,EAAE7B,aAAa,CAACsB,YAAD,CAAb,GAA8BA,YAAY,CAACQ,IAA3C,GAAkD;KAZ/D,CADJ;IAgBA,OAAOT,KAAP;GAjBH,EAkBE,EAlBF,CADL,CADJ,CAnBJ,CADJ;AA6CH;;AACDd,WAAW,CAACwB,WAAZ,GAA0B,aAA1B;;AAUA,SAASN,SAAT,CAAmB;EAAExB,KAAF;EAASG,UAAT;EAAqBsB,QAArB;EAA+BE,OAA/B;EAAwCC;AAAxC,CAAnB;EACI,MAAMG,IAAI,gBACNtB,aAAA,OAAA;mBACgB;IACZI,SAAS,EAAE,yBAAyBY,QAAQ,GAAG,SAAH,GAAe,EAAhD;IACXR,KAAK,EAAE;MAAEF,eAAe,EAAEf;;IAC1B2B,OAAO,EAAE,MAAMA,OAAN,oBAAMA,OAAO,CAAGxB,UAAH;GAJ1B,eAMIM,aAAA,OAAA;IAAMI,SAAS,EAAC;GAAhB,CANJ,CADJ;EAWA,OAAOe,OAAO,gBAAGnB,aAAA,CAACuB,OAAD;IAASC,OAAO,EAAEL;GAAlB,EAA4BG,IAA5B,CAAH,GAAiDA,IAA/D;AACH;;AACDP,SAAS,CAACM,WAAV,GAAwB,WAAxB;;;;"}

package/es/components/deprecated-button/deprecated-button.js

@@ -1,7 +1,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import classNames from 'classnames';
-import { Tooltip } from '../tooltip/tooltip.js';
+import { Tooltip } from '../../new-components/tooltip/tooltip.js';
 
 const _excluded = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"deprecated-button.js","sources":["../../../src/components/deprecated-button/deprecated-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { Tooltip } from '../tooltip'\n\nimport './deprecated-button.less'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\n/** @deprecated */\nexport type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link'\n\n/** @deprecated */\nexport type ButtonSize = 'default' | 'small' | 'large'\n\n/** @deprecated */\nexport type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {\n    /**\n     * Loading style. When true it disables the button, but it also adds a visual indication of\n     * some in-progress operation going on.\n     */\n    loading?: boolean\n    /**\n     * Controls visually how the button shows up from a predefined set of kinds of buttons.\n     */\n    variant?: ButtonVariant\n    /**\n     * The size of the button. If not provided it shows up in a normal size.\n     */\n    size?: ButtonSize\n    /**\n     * Tooltip that is displayed on hover.\n     *\n     * This replaces `title` which is not supported for these buttons to avoid confusion.\n     */\n    tooltip?: React.ReactNode\n}\n\n/**\n * @deprecated\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        type = 'button',\n        variant,\n        size = 'default',\n        loading = false,\n        disabled = false,\n        tooltip,\n        onClick,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const className = classNames(\n        'reactist_button',\n        variant ? `reactist_button--${variant}` : null,\n        size !== 'default' ? `reactist_button--${size}` : null,\n        { 'reactist_button--loading': loading },\n        props.className,\n    )\n\n    const button = (\n        <button\n            {...props}\n            ref={ref}\n            type={type}\n            className={className}\n            aria-disabled={disabled || loading}\n            onClick={disabled || loading ? undefined : onClick}\n        >\n            {children}\n        </button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{button}</Tooltip> : button\n})\n\nButton.displayName = 'Button'\n\nButton.defaultProps = {\n    size: 'default',\n    loading: false,\n    disabled: false,\n}\n\nexport { Button }\n"],"names":["Button","React","ref","type","variant","size","loading","disabled","tooltip","onClick","children","props","className","classNames","button","undefined","Tooltip","content","displayName","defaultProps"],"mappings":";;;;;;AAyCA;;;;MAGMA,MAAM,gBAAGC,UAAA,CAAiD,SAASD,MAAT,OAY5DE,GAZ4D;MAC5D;IACIC,IAAI,GAAG,QADX;IAEIC,OAFJ;IAGIC,IAAI,GAAG,SAHX;IAIIC,OAAO,GAAG,KAJd;IAKIC,QAAQ,GAAG,KALf;IAMIC,OANJ;IAOIC,OAPJ;IAQIC;;MACGC;;EAIP,MAAMC,SAAS,GAAGC,UAAU,CACxB,iBADwB,EAExBT,OAAO,yBAAuBA,OAAvB,GAAmC,IAFlB,EAGxBC,IAAI,KAAK,SAAT,yBAAyCA,IAAzC,GAAkD,IAH1B,EAIxB;IAAE,4BAA4BC;GAJN,EAKxBK,KAAK,CAACC,SALkB,CAA5B;EAQA,MAAME,MAAM,gBACRb,aAAA,SAAA,oCACQU,KADR;IAEIT,GAAG,EAAEA,GAFT;IAGIC,IAAI,EAAEA,IAHV;IAIIS,SAAS,EAAEA,SAJf;qBAKmBL,QAAQ,IAAID,OAL/B;IAMIG,OAAO,EAAEF,QAAQ,IAAID,OAAZ,GAAsBS,SAAtB,GAAkCN;MAE1CC,QARL,CADJ;EAaA,OAAOF,OAAO,gBAAGP,aAAA,CAACe,OAAD;IAASC,OAAO,EAAET;GAAlB,EAA4BM,MAA5B,CAAH,GAAmDA,MAAjE;AACH,CApCc;AAsCfd,MAAM,CAACkB,WAAP,GAAqB,QAArB;AAEAlB,MAAM,CAACmB,YAAP,GAAsB;EAClBd,IAAI,EAAE,SADY;EAElBC,OAAO,EAAE,KAFS;EAGlBC,QAAQ,EAAE;AAHQ,CAAtB;;;;"}
+{"version":3,"file":"deprecated-button.js","sources":["../../../src/components/deprecated-button/deprecated-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { Tooltip } from '../../new-components/tooltip'\n\nimport './deprecated-button.less'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\n/** @deprecated */\nexport type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link'\n\n/** @deprecated */\nexport type ButtonSize = 'default' | 'small' | 'large'\n\n/** @deprecated */\nexport type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {\n    /**\n     * Loading style. When true it disables the button, but it also adds a visual indication of\n     * some in-progress operation going on.\n     */\n    loading?: boolean\n    /**\n     * Controls visually how the button shows up from a predefined set of kinds of buttons.\n     */\n    variant?: ButtonVariant\n    /**\n     * The size of the button. If not provided it shows up in a normal size.\n     */\n    size?: ButtonSize\n    /**\n     * Tooltip that is displayed on hover.\n     *\n     * This replaces `title` which is not supported for these buttons to avoid confusion.\n     */\n    tooltip?: React.ReactNode\n}\n\n/**\n * @deprecated\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        type = 'button',\n        variant,\n        size = 'default',\n        loading = false,\n        disabled = false,\n        tooltip,\n        onClick,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const className = classNames(\n        'reactist_button',\n        variant ? `reactist_button--${variant}` : null,\n        size !== 'default' ? `reactist_button--${size}` : null,\n        { 'reactist_button--loading': loading },\n        props.className,\n    )\n\n    const button = (\n        <button\n            {...props}\n            ref={ref}\n            type={type}\n            className={className}\n            aria-disabled={disabled || loading}\n            onClick={disabled || loading ? undefined : onClick}\n        >\n            {children}\n        </button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{button}</Tooltip> : button\n})\n\nButton.displayName = 'Button'\n\nButton.defaultProps = {\n    size: 'default',\n    loading: false,\n    disabled: false,\n}\n\nexport { Button }\n"],"names":["Button","React","ref","type","variant","size","loading","disabled","tooltip","onClick","children","props","className","classNames","button","undefined","Tooltip","content","displayName","defaultProps"],"mappings":";;;;;;AAyCA;;;;MAGMA,MAAM,gBAAGC,UAAA,CAAiD,SAASD,MAAT,OAY5DE,GAZ4D;MAC5D;IACIC,IAAI,GAAG,QADX;IAEIC,OAFJ;IAGIC,IAAI,GAAG,SAHX;IAIIC,OAAO,GAAG,KAJd;IAKIC,QAAQ,GAAG,KALf;IAMIC,OANJ;IAOIC,OAPJ;IAQIC;;MACGC;;EAIP,MAAMC,SAAS,GAAGC,UAAU,CACxB,iBADwB,EAExBT,OAAO,yBAAuBA,OAAvB,GAAmC,IAFlB,EAGxBC,IAAI,KAAK,SAAT,yBAAyCA,IAAzC,GAAkD,IAH1B,EAIxB;IAAE,4BAA4BC;GAJN,EAKxBK,KAAK,CAACC,SALkB,CAA5B;EAQA,MAAME,MAAM,gBACRb,aAAA,SAAA,oCACQU,KADR;IAEIT,GAAG,EAAEA,GAFT;IAGIC,IAAI,EAAEA,IAHV;IAIIS,SAAS,EAAEA,SAJf;qBAKmBL,QAAQ,IAAID,OAL/B;IAMIG,OAAO,EAAEF,QAAQ,IAAID,OAAZ,GAAsBS,SAAtB,GAAkCN;MAE1CC,QARL,CADJ;EAaA,OAAOF,OAAO,gBAAGP,aAAA,CAACe,OAAD;IAASC,OAAO,EAAET;GAAlB,EAA4BM,MAA5B,CAAH,GAAmDA,MAAjE;AACH,CApCc;AAsCfd,MAAM,CAACkB,WAAP,GAAqB,QAArB;AAEAlB,MAAM,CAACmB,YAAP,GAAsB;EAClBd,IAAI,EAAE,SADY;EAElBC,OAAO,EAAE,KAFS;EAGlBC,QAAQ,EAAE;AAHQ,CAAtB;;;;"}

package/es/components/time/time.js

@@ -1,5 +1,5 @@
 import { Component, createElement } from 'react';
-import { Tooltip } from '../tooltip/tooltip.js';
+import { Tooltip } from '../../new-components/tooltip/tooltip.js';
 import { TimeUtils } from './time-utils.js';
 
 const DELAY = 60000;

package/es/components/time/time.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.js","sources":["../../../src/components/time/time.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Tooltip } from '../tooltip'\nimport { TimeUtils, TimeConfig } from './time-utils'\n\nimport './time.less'\n\nconst DELAY = 60000\n\ntype Props = {\n    /** UNIX timestamp of the time to display. */\n    time?: number\n    /** Configuration for localization. */\n    config?: TimeConfig\n    /** Additional css class applied to the time element. */\n    className?: string\n    tooltipOnHover?: boolean\n    /** Refresh the component every DELAY seconds. */\n    refresh?: boolean\n    /** If you don't want to use the default time format on the tooltip use this prop to supply a custom text */\n    tooltip?: React.ReactNode\n    /** When hovering over time it expands to short absolute version. */\n    expandOnHover?: boolean\n    /** When hovering over time it expands to the full absolute version. */\n    expandFullyOnHover?: boolean\n}\n\ntype State = {\n    hovered: boolean\n    mouseX?: number\n    mouseY?: number\n}\n\nclass Time extends React.Component<Props, State> {\n    public static displayName: string\n    public static defaultProps: Props\n\n    constructor(props: Props) {\n        super(props)\n        this.refreshInterval = undefined\n\n        this.state = {\n            hovered: false,\n            mouseX: undefined,\n            mouseY: undefined,\n        }\n    }\n\n    componentDidMount() {\n        if (this.props.refresh) {\n            this._refresh()\n        }\n    }\n\n    componentDidUpdate(prevProps: Props) {\n        if (!prevProps.refresh && this.props.refresh) {\n            this._refresh()\n        }\n\n        if (prevProps.refresh && !this.props.refresh) {\n            if (this.refreshInterval) {\n                clearTimeout(this.refreshInterval)\n            }\n        }\n    }\n\n    componentWillUnmount() {\n        if (this.refreshInterval) {\n            clearTimeout(this.refreshInterval)\n        }\n    }\n\n    refreshInterval?: ReturnType<typeof setTimeout>\n\n    _setHovered(hovered: boolean, event: React.MouseEvent) {\n        const { mouseX, mouseY } = this.state\n        const { clientX, clientY } = event\n        if (clientX !== mouseX || clientY !== mouseY) {\n            // mouse has moved\n            this.setState(() => ({\n                hovered,\n                mouseX: clientX,\n                mouseY: clientY,\n            }))\n        }\n    }\n\n    _renderTime(config: Props['config']) {\n        if (!this.props.time) {\n            return\n        }\n        if (this.state.hovered) {\n            if (this.props.expandFullyOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTimeLong(this.props.time, config)\n            }\n            if (this.props.expandOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTime(this.props.time, config)\n            }\n        }\n        return TimeUtils.timeAgo(this.props.time, config)\n    }\n\n    _refresh() {\n        this.refreshInterval = setInterval(() => {\n            this.forceUpdate()\n        }, DELAY)\n    }\n\n    render() {\n        let className = 'reactist_time'\n        if (this.props.className) {\n            className = this.props.className\n        }\n\n        const timeComponent = this._renderTime(this.props.config)\n\n        return (\n            <time\n                className={className}\n                onMouseEnter={(event) => this._setHovered(true, event)}\n                onMouseLeave={(event) => this._setHovered(false, event)}\n            >\n                {this.props.tooltipOnHover ? (\n                    <Tooltip\n                        content={\n                            this.props.tooltip ||\n                            (this.props.time &&\n                                TimeUtils.formatTimeLong(this.props.time, this.props.config))\n                        }\n                    >\n                        <span>{timeComponent}</span>\n                    </Tooltip>\n                ) : (\n                    timeComponent\n                )}\n            </time>\n        )\n    }\n}\nTime.displayName = 'Time'\n\nTime.defaultProps = {\n    expandOnHover: false,\n    expandFullyOnHover: false,\n    tooltipOnHover: false,\n    refresh: true,\n    config: {\n        locale: 'en',\n        daysSuffix: 'd',\n        hoursSuffix: 'h',\n        minutesSuffix: 'm',\n        momentsAgo: 'moments ago',\n    },\n}\n\nexport { Time }\n"],"names":["DELAY","Time","React","constructor","props","refreshInterval","undefined","state","hovered","mouseX","mouseY","componentDidMount","refresh","_refresh","componentDidUpdate","prevProps","clearTimeout","componentWillUnmount","_setHovered","event","clientX","clientY","setState","_renderTime","config","time","expandFullyOnHover","tooltipOnHover","TimeUtils","formatTimeLong","expandOnHover","formatTime","timeAgo","setInterval","forceUpdate","render","className","timeComponent","onMouseEnter","onMouseLeave","Tooltip","content","tooltip","displayName","defaultProps","locale","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo"],"mappings":"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"}
+{"version":3,"file":"time.js","sources":["../../../src/components/time/time.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Tooltip } from '../../new-components/tooltip'\nimport { TimeUtils, TimeConfig } from './time-utils'\n\nimport './time.less'\n\nconst DELAY = 60000\n\ntype Props = {\n    /** UNIX timestamp of the time to display. */\n    time?: number\n    /** Configuration for localization. */\n    config?: TimeConfig\n    /** Additional css class applied to the time element. */\n    className?: string\n    tooltipOnHover?: boolean\n    /** Refresh the component every DELAY seconds. */\n    refresh?: boolean\n    /** If you don't want to use the default time format on the tooltip use this prop to supply a custom text */\n    tooltip?: React.ReactNode\n    /** When hovering over time it expands to short absolute version. */\n    expandOnHover?: boolean\n    /** When hovering over time it expands to the full absolute version. */\n    expandFullyOnHover?: boolean\n}\n\ntype State = {\n    hovered: boolean\n    mouseX?: number\n    mouseY?: number\n}\n\nclass Time extends React.Component<Props, State> {\n    public static displayName: string\n    public static defaultProps: Props\n\n    constructor(props: Props) {\n        super(props)\n        this.refreshInterval = undefined\n\n        this.state = {\n            hovered: false,\n            mouseX: undefined,\n            mouseY: undefined,\n        }\n    }\n\n    componentDidMount() {\n        if (this.props.refresh) {\n            this._refresh()\n        }\n    }\n\n    componentDidUpdate(prevProps: Props) {\n        if (!prevProps.refresh && this.props.refresh) {\n            this._refresh()\n        }\n\n        if (prevProps.refresh && !this.props.refresh) {\n            if (this.refreshInterval) {\n                clearTimeout(this.refreshInterval)\n            }\n        }\n    }\n\n    componentWillUnmount() {\n        if (this.refreshInterval) {\n            clearTimeout(this.refreshInterval)\n        }\n    }\n\n    refreshInterval?: ReturnType<typeof setTimeout>\n\n    _setHovered(hovered: boolean, event: React.MouseEvent) {\n        const { mouseX, mouseY } = this.state\n        const { clientX, clientY } = event\n        if (clientX !== mouseX || clientY !== mouseY) {\n            // mouse has moved\n            this.setState(() => ({\n                hovered,\n                mouseX: clientX,\n                mouseY: clientY,\n            }))\n        }\n    }\n\n    _renderTime(config: Props['config']) {\n        if (!this.props.time) {\n            return\n        }\n        if (this.state.hovered) {\n            if (this.props.expandFullyOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTimeLong(this.props.time, config)\n            }\n            if (this.props.expandOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTime(this.props.time, config)\n            }\n        }\n        return TimeUtils.timeAgo(this.props.time, config)\n    }\n\n    _refresh() {\n        this.refreshInterval = setInterval(() => {\n            this.forceUpdate()\n        }, DELAY)\n    }\n\n    render() {\n        let className = 'reactist_time'\n        if (this.props.className) {\n            className = this.props.className\n        }\n\n        const timeComponent = this._renderTime(this.props.config)\n\n        return (\n            <time\n                className={className}\n                onMouseEnter={(event) => this._setHovered(true, event)}\n                onMouseLeave={(event) => this._setHovered(false, event)}\n            >\n                {this.props.tooltipOnHover ? (\n                    <Tooltip\n                        content={\n                            this.props.tooltip ||\n                            (this.props.time &&\n                                TimeUtils.formatTimeLong(this.props.time, this.props.config))\n                        }\n                    >\n                        <span>{timeComponent}</span>\n                    </Tooltip>\n                ) : (\n                    timeComponent\n                )}\n            </time>\n        )\n    }\n}\nTime.displayName = 'Time'\n\nTime.defaultProps = {\n    expandOnHover: false,\n    expandFullyOnHover: false,\n    tooltipOnHover: false,\n    refresh: true,\n    config: {\n        locale: 'en',\n        daysSuffix: 'd',\n        hoursSuffix: 'h',\n        minutesSuffix: 'm',\n        momentsAgo: 'moments ago',\n    },\n}\n\nexport { Time }\n"],"names":["DELAY","Time","React","constructor","props","refreshInterval","undefined","state","hovered","mouseX","mouseY","componentDidMount","refresh","_refresh","componentDidUpdate","prevProps","clearTimeout","componentWillUnmount","_setHovered","event","clientX","clientY","setState","_renderTime","config","time","expandFullyOnHover","tooltipOnHover","TimeUtils","formatTimeLong","expandOnHover","formatTime","timeAgo","setInterval","forceUpdate","render","className","timeComponent","onMouseEnter","onMouseLeave","Tooltip","content","tooltip","displayName","defaultProps","locale","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo"],"mappings":"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"}

package/es/index.js

@@ -5,7 +5,7 @@ export { Inline } from './new-components/inline/inline.js';
 export { Stack } from './new-components/stack/stack.js';
 export { Hidden } from './new-components/hidden/hidden.js';
 export { HiddenVisually } from './new-components/hidden-visually/hidden-visually.js';
-export { Tooltip } from './components/tooltip/tooltip.js';
+export { Tooltip } from './new-components/tooltip/tooltip.js';
 export { Button } from './new-components/button/button.js';
 export { Alert } from './new-components/alert/alert.js';
 export { Loading } from './new-components/loading/loading.js';

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

@@ -2,7 +2,7 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { createElement, Fragment } from 'react';
 import { polymorphicComponent } from '../../utils/polymorphism.js';
 import { Box } from '../box/box.js';
-import { Tooltip } from '../../components/tooltip/tooltip.js';
+import { Tooltip } from '../tooltip/tooltip.js';
 import { Spinner } from '../spinner/spinner.js';
 import styles from './base-button.module.css.js';
 

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

@@ -1 +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    /**\n     * The button's tone.\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n\n    /**\n     * The button's size.\n     * @default 'normal'\n     */\n    size?: ButtonSize\n\n    /**\n     * Controls the shape of the button. Specifically, it allows to make it have slightly curved\n     * corners (the default) vs. having them fully curved to the point that they are as round as\n     * possible. In icon-only buttons this allows to have the button be circular.\n     * @default 'normal'\n     */\n    shape?: 'normal' | 'rounded'\n\n    /**\n     * Whether the button is disabled or not.\n     * @default false\n     */\n    disabled?: boolean\n\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    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n}\n\ntype AlignmentProps = {\n    width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\n    align?: 'start' | 'center' | 'end'\n}\n\ntype AutoWidthProps = {\n    width?: 'auto'\n    align?: never\n}\n\ntype IconButtonProps = {\n    icon: IconElement\n    'aria-label': string\n    children?: never\n    startIcon?: never\n    endIcon?: never\n    width?: never\n    align?: never\n}\n\ntype LabelledButtonProps = {\n    children: NonNullable<React.ReactNode>\n    startIcon?: IconElement\n    endIcon?: IconElement\n    icon?: never\n} & (AutoWidthProps | AlignmentProps)\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 * @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        shape = 'normal',\n        disabled = false,\n        loading = false,\n        tooltip,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        icon,\n        width = 'auto',\n        align = 'center',\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            width={icon ? undefined : width}\n            className={[\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                shape === 'rounded' ? styles['shape-rounded'] : null,\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 ? (\n                        <Box\n                            as=\"span\"\n                            className={styles.label}\n                            overflow=\"hidden\"\n                            width={width === 'full' ? 'full' : undefined}\n                            textAlign={width === 'auto' ? 'center' : align}\n                        >\n                            {children}\n                        </Box>\n                    ) : 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 === undefined ? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n"],"names":["preventDefault","event","BaseButton","polymorphicComponent","ref","as","variant","tone","size","shape","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align","props","isDisabled","buttonElement","React","Box","undefined","className","styles","baseButton","iconButton","Spinner","display","label","overflow","textAlign","tooltipContent","Tooltip","content"],"mappings":";;;;;;;;;;AAOA,SAASA,cAAT,CAAwBC,KAAxB;EACIA,KAAK,CAACD,cAAN;AACH;AAoFD;;;;;;;;;MAOaE,UAAU,gBAAGC,oBAAoB,CAAyB,SAASD,UAAT,OAoBnEE,GApBmE;MACnE;IACIC,EAAE,GAAG,KADT;IAEIC,OAFJ;IAGIC,IAAI,GAAG,QAHX;IAIIC,IAAI,GAAG,QAJX;IAKIC,KAAK,GAAG,QALZ;IAMIC,QAAQ,GAAG,KANf;IAOIC,OAAO,GAAG,KAPd;IAQIC,OARJ;IASIC,OATJ;IAUIC,yBAVJ;IAWIC,QAXJ;IAYIC,SAZJ;IAaIC,OAbJ;IAcIC,IAdJ;IAeIC,KAAK,GAAG,MAfZ;IAgBIC,KAAK,GAAG;;MACLC;;EAIP,MAAMC,UAAU,GAAGX,OAAO,IAAID,QAA9B;EACA,MAAMa,aAAa,gBACfC,aAAA,CAACC,GAAD,oCACQJ,KADR;IAEIhB,EAAE,EAAEA,EAFR;IAGID,GAAG,EAAEA,GAHT;qBAImBkB,UAJnB;IAKIT,OAAO,EAAES,UAAU,GAAGtB,cAAH,GAAoBa,OAL3C;IAMIM,KAAK,EAAED,IAAI,GAAGQ,SAAH,GAAeP,KAN9B;IAOIQ,SAAS,EAAE,CACPb,yBADO,EAEPc,MAAM,CAACC,UAFA,EAGPD,MAAM,cAAYtB,OAAZ,CAHC,EAIPsB,MAAM,WAASrB,IAAT,CAJC,EAKPqB,MAAM,WAASpB,IAAT,CALC,EAMPC,KAAK,KAAK,SAAV,GAAsBmB,MAAM,CAAC,eAAD,CAA5B,GAAgD,IANzC,EAOPV,IAAI,GAAGU,MAAM,CAACE,UAAV,GAAuB,IAPpB,EAQPpB,QAAQ,GAAGkB,MAAM,CAAClB,QAAV,GAAqB,IARtB;MAWVQ,IAAI,GACAP,OAAO,iBAAIa,aAAA,CAACO,OAAD,MAAA,CAAZ,IAA4Bb,IAD3B,gBAGDM,aAAA,SAAA,MAAA,EACKR,SAAS,gBACNQ,aAAA,CAACC,GAAD;IAAKO,OAAO,EAAC;IAAOL,SAAS,EAAEC,MAAM,CAACZ;;GAAtC,EACKL,OAAO,IAAI,CAACM,OAAZ,gBAAsBO,aAAA,CAACO,OAAD,MAAA,CAAtB,GAAoCf,SADzC,CADM,GAIN,IALR,EAMKD,QAAQ,gBACLS,aAAA,CAACC,GAAD;IACIpB,EAAE,EAAC;IACHsB,SAAS,EAAEC,MAAM,CAACK;IAClBC,QAAQ,EAAC;IACTf,KAAK,EAAEA,KAAK,KAAK,MAAV,GAAmB,MAAnB,GAA4BO;IACnCS,SAAS,EAAEhB,KAAK,KAAK,MAAV,GAAmB,QAAnB,GAA8BC;GAL7C,EAOKL,QAPL,CADK,GAUL,IAhBR,EAiBKE,OAAO,IAAKN,OAAO,IAAI,CAACK,SAAxB,gBACGQ,aAAA,CAACC,GAAD;IAAKO,OAAO,EAAC;IAAOL,SAAS,EAAEC,MAAM,CAACX;;GAAtC,EACKN,OAAO,gBAAGa,aAAA,CAACO,OAAD,MAAA,CAAH,GAAiBd,OAD7B,CADH,GAIG,IArBR,CArBR,CADJ;;EAkDA,MAAMmB,cAAc,GAAGlB,IAAI,IAAIN,OAAO,KAAKc,SAApB,GAAgCL,KAAK,CAAC,YAAD,CAArC,GAAsDT,OAA7E;EACA,OAAOwB,cAAc,gBACjBZ,aAAA,CAACa,OAAD;IAASC,OAAO,EAAEF;GAAlB,EAAmCb,aAAnC,CADiB,GAGjBA,aAHJ;AAKH,CA/E6C;;;;"}
+{"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 '../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    /**\n     * The button's tone.\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n\n    /**\n     * The button's size.\n     * @default 'normal'\n     */\n    size?: ButtonSize\n\n    /**\n     * Controls the shape of the button. Specifically, it allows to make it have slightly curved\n     * corners (the default) vs. having them fully curved to the point that they are as round as\n     * possible. In icon-only buttons this allows to have the button be circular.\n     * @default 'normal'\n     */\n    shape?: 'normal' | 'rounded'\n\n    /**\n     * Whether the button is disabled or not.\n     * @default false\n     */\n    disabled?: boolean\n\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    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n}\n\ntype AlignmentProps = {\n    width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\n    align?: 'start' | 'center' | 'end'\n}\n\ntype AutoWidthProps = {\n    width?: 'auto'\n    align?: never\n}\n\ntype IconButtonProps = {\n    icon: IconElement\n    'aria-label': string\n    children?: never\n    startIcon?: never\n    endIcon?: never\n    width?: never\n    align?: never\n}\n\ntype LabelledButtonProps = {\n    children: NonNullable<React.ReactNode>\n    startIcon?: IconElement\n    endIcon?: IconElement\n    icon?: never\n} & (AutoWidthProps | AlignmentProps)\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 * @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        shape = 'normal',\n        disabled = false,\n        loading = false,\n        tooltip,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        icon,\n        width = 'auto',\n        align = 'center',\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            width={icon ? undefined : width}\n            className={[\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                shape === 'rounded' ? styles['shape-rounded'] : null,\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 ? (\n                        <Box\n                            as=\"span\"\n                            className={styles.label}\n                            overflow=\"hidden\"\n                            width={width === 'full' ? 'full' : undefined}\n                            textAlign={width === 'auto' ? 'center' : align}\n                        >\n                            {children}\n                        </Box>\n                    ) : 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 === undefined ? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n"],"names":["preventDefault","event","BaseButton","polymorphicComponent","ref","as","variant","tone","size","shape","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align","props","isDisabled","buttonElement","React","Box","undefined","className","styles","baseButton","iconButton","Spinner","display","label","overflow","textAlign","tooltipContent","Tooltip","content"],"mappings":";;;;;;;;;;AAOA,SAASA,cAAT,CAAwBC,KAAxB;EACIA,KAAK,CAACD,cAAN;AACH;AAoFD;;;;;;;;;MAOaE,UAAU,gBAAGC,oBAAoB,CAAyB,SAASD,UAAT,OAoBnEE,GApBmE;MACnE;IACIC,EAAE,GAAG,KADT;IAEIC,OAFJ;IAGIC,IAAI,GAAG,QAHX;IAIIC,IAAI,GAAG,QAJX;IAKIC,KAAK,GAAG,QALZ;IAMIC,QAAQ,GAAG,KANf;IAOIC,OAAO,GAAG,KAPd;IAQIC,OARJ;IASIC,OATJ;IAUIC,yBAVJ;IAWIC,QAXJ;IAYIC,SAZJ;IAaIC,OAbJ;IAcIC,IAdJ;IAeIC,KAAK,GAAG,MAfZ;IAgBIC,KAAK,GAAG;;MACLC;;EAIP,MAAMC,UAAU,GAAGX,OAAO,IAAID,QAA9B;EACA,MAAMa,aAAa,gBACfC,aAAA,CAACC,GAAD,oCACQJ,KADR;IAEIhB,EAAE,EAAEA,EAFR;IAGID,GAAG,EAAEA,GAHT;qBAImBkB,UAJnB;IAKIT,OAAO,EAAES,UAAU,GAAGtB,cAAH,GAAoBa,OAL3C;IAMIM,KAAK,EAAED,IAAI,GAAGQ,SAAH,GAAeP,KAN9B;IAOIQ,SAAS,EAAE,CACPb,yBADO,EAEPc,MAAM,CAACC,UAFA,EAGPD,MAAM,cAAYtB,OAAZ,CAHC,EAIPsB,MAAM,WAASrB,IAAT,CAJC,EAKPqB,MAAM,WAASpB,IAAT,CALC,EAMPC,KAAK,KAAK,SAAV,GAAsBmB,MAAM,CAAC,eAAD,CAA5B,GAAgD,IANzC,EAOPV,IAAI,GAAGU,MAAM,CAACE,UAAV,GAAuB,IAPpB,EAQPpB,QAAQ,GAAGkB,MAAM,CAAClB,QAAV,GAAqB,IARtB;MAWVQ,IAAI,GACAP,OAAO,iBAAIa,aAAA,CAACO,OAAD,MAAA,CAAZ,IAA4Bb,IAD3B,gBAGDM,aAAA,SAAA,MAAA,EACKR,SAAS,gBACNQ,aAAA,CAACC,GAAD;IAAKO,OAAO,EAAC;IAAOL,SAAS,EAAEC,MAAM,CAACZ;;GAAtC,EACKL,OAAO,IAAI,CAACM,OAAZ,gBAAsBO,aAAA,CAACO,OAAD,MAAA,CAAtB,GAAoCf,SADzC,CADM,GAIN,IALR,EAMKD,QAAQ,gBACLS,aAAA,CAACC,GAAD;IACIpB,EAAE,EAAC;IACHsB,SAAS,EAAEC,MAAM,CAACK;IAClBC,QAAQ,EAAC;IACTf,KAAK,EAAEA,KAAK,KAAK,MAAV,GAAmB,MAAnB,GAA4BO;IACnCS,SAAS,EAAEhB,KAAK,KAAK,MAAV,GAAmB,QAAnB,GAA8BC;GAL7C,EAOKL,QAPL,CADK,GAUL,IAhBR,EAiBKE,OAAO,IAAKN,OAAO,IAAI,CAACK,SAAxB,gBACGQ,aAAA,CAACC,GAAD;IAAKO,OAAO,EAAC;IAAOL,SAAS,EAAEC,MAAM,CAACX;;GAAtC,EACKN,OAAO,gBAAGa,aAAA,CAACO,OAAD,MAAA,CAAH,GAAiBd,OAD7B,CADH,GAIG,IArBR,CArBR,CADJ;;EAkDA,MAAMmB,cAAc,GAAGlB,IAAI,IAAIN,OAAO,KAAKc,SAApB,GAAgCL,KAAK,CAAC,YAAD,CAArC,GAAsDT,OAA7E;EACA,OAAOwB,cAAc,gBACjBZ,aAAA,CAACa,OAAD;IAASC,OAAO,EAAEF;GAAlB,EAAmCb,aAAnC,CADiB,GAGjBA,aAHJ;AAKH,CA/E6C;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_54d944f2 = {"box":"c6a2474f","position-absolute":"_49e2264f","position-fixed":"a2c9755f","position-relative":"_1986121c","position-sticky":"c5be4e70","tablet-position-absolute":"c6d09c38","tablet-position-fixed":"_2bb75a11","tablet-position-relative":"e992df42","tablet-position-sticky":"d693740c","desktop-position-absolute":"a9f2e68e","desktop-position-fixed":"fca89ad4","desktop-position-relative":"_84913029","desktop-position-sticky":"_1f54b76e","display-block":"_78a04f11","display-flex":"_04f32a92","display-inline":"_00982f96","display-inlineBlock":"_9be0cd8f","display-inlineFlex":"_7ff24869","display-none":"e85f798b","tablet-display-block":"cc7d9996","tablet-display-flex":"aec740e8","tablet-display-inline":"_5eb29888","tablet-display-inlineBlock":"_7399782e","tablet-display-inlineFlex":"_2a4eeb4a","tablet-display-none":"cbd91c8d","desktop-display-block":"d830ca47","desktop-display-flex":"_48cb59a8","desktop-display-inline":"cd0008da","desktop-display-inlineBlock":"_9826a4c8","desktop-display-inlineFlex":"_3e3e729b","desktop-display-none":"_183faf15","flexDirection-column":"eb8408ce","flexDirection-row":"cc313af7","tablet-flexDirection-column":"_571a8cb5","tablet-flexDirection-row":"_03a092d9","desktop-flexDirection-column":"_28991a11","desktop-flexDirection-row":"_7de969fe","flexWrap-wrap":"a6716a2d","flexWrap-nowrap":"_80a7d7fe","flexShrink-0":"_88012354","flexGrow-0":"_6cce36ca","flexGrow-1":"ee7114e6","alignItems-flexStart":"d482b846","alignItems-center":"b7b3664a","alignItems-flexEnd":"_3ca6f2cc","alignItems-baseline":"f97f2803","tablet-alignItems-flexStart":"_57269e2f","tablet-alignItems-center":"_1104d48d","tablet-alignItems-flexEnd":"_86b85059","tablet-alignItems-baseline":"_884972d7","desktop-alignItems-flexStart":"_55026d8f","desktop-alignItems-center":"_49c0fe6f","desktop-alignItems-flexEnd":"_7f55b215","desktop-alignItems-baseline":"da3d398e","justifyContent-flexStart":"f64f71c8","justifyContent-center":"_85286fa2","justifyContent-flexEnd":"cf4ec4c9","justifyContent-spaceAround":"bd407abb","justifyContent-spaceBetween":"a6ae7538","justifyContent-spaceEvenly":"_0e4d97f7","tablet-justifyContent-flexStart":"f2417980","tablet-justifyContent-center":"_5dab5532","tablet-justifyContent-flexEnd":"_4f8d866f","tablet-justifyContent-spaceAround":"_2090c016","tablet-justifyContent-spaceBetween":"ecde71f9","tablet-justifyContent-spaceEvenly":"d779c879","desktop-justifyContent-flexStart":"eb59e0ec","desktop-justifyContent-center":"_4be33fff","desktop-justifyContent-flexEnd":"_14f5eeab","desktop-justifyContent-spaceBetween":"_6fc4e2ed","alignSelf-stretch":"ac494732","alignSelf-flexStart":"_32b61baa","alignSelf-center":"_757c3504","alignSelf-flexEnd":"_539c72bc","alignSelf-baseline":"_2c0ed225","tablet-alignSelf-stretch":"f5896cb5","tablet-alignSelf-flexStart":"_2313a9cc","tablet-alignSelf-center":"_2cbc3335","tablet-alignSelf-flexEnd":"_5b1e6221","tablet-alignSelf-baseline":"fd0f9da4","desktop-alignSelf-stretch":"bef42d6a","desktop-alignSelf-flexStart":"_73620997","desktop-alignSelf-center":"_4eeafebd","desktop-alignSelf-flexEnd":"_944043da","desktop-alignSelf-baseline":"_18913c93","overflow-hidden":"_57850d52","overflow-auto":"bcc25aac","overflow-visible":"eabdf554","overflow-scroll":"_382f77d7","height-full":"e7a8b591","bg-default":"_64eb02c8","bg-aside":"_4bc1d066","bg-highlight":"_7a672ba1","bg-selected":"_3191f73c","bg-toast":"_2b535d30","borderRadius-standard":"_75e98b4e","borderRadius-full":"_51ff4c0f","border-primary":"b9c6f2a1","border-secondary":"_54355849","border-tertiary":"_6199baf2","textAlign-start":"a144300d","textAlign-center":"_48affbca","textAlign-end":"_6bfe8b19","textAlign-justify":"a1168ad5","tablet-textAlign-start":"_00a122fe","tablet-textAlign-center":"_440cb970","tablet-textAlign-end":"_7d161401","tablet-textAlign-justify":"_09dfcdd3","desktop-textAlign-start":"_3ad9923a","desktop-textAlign-center":"_1b158a32","desktop-textAlign-end":"_9255e83c","desktop-textAlign-justify":"_2138258d"};
+var modules_54d944f2 = {"box":"_2a3b75a1","position-absolute":"_2286072d","position-fixed":"_0847ebf3","position-relative":"_9015266f","position-sticky":"_572136cd","tablet-position-absolute":"dec0da3c","tablet-position-fixed":"eb3f61a4","tablet-position-relative":"_6a9d01dd","tablet-position-sticky":"cf9268ba","desktop-position-absolute":"_6579cc9c","desktop-position-fixed":"_3a6a421f","desktop-position-relative":"_3a6950ac","desktop-position-sticky":"_142cd372","display-block":"_9a084bff","display-flex":"_509a57b4","display-inline":"_4a786bb9","display-inlineBlock":"_5d644b40","display-inlineFlex":"_973d00d0","display-none":"_3e4f26a6","tablet-display-block":"d525fe3a","tablet-display-flex":"_316c9f4b","tablet-display-inline":"_5e788d98","tablet-display-inlineBlock":"_851fc6b8","tablet-display-inlineFlex":"c16ba46a","tablet-display-none":"_759c0c1a","desktop-display-block":"c374b455","desktop-display-flex":"_8a854d8f","desktop-display-inline":"_805fa8dc","desktop-display-inlineBlock":"ab26af05","desktop-display-inlineFlex":"_9bd12ba4","desktop-display-none":"_581476ce","flexDirection-column":"_1fb9d90e","flexDirection-row":"e5a9206f","tablet-flexDirection-column":"_3e6a0be1","tablet-flexDirection-row":"e9e2e53a","desktop-flexDirection-column":"c7d6b073","desktop-flexDirection-row":"_935269b4","flexWrap-wrap":"_3692f9c2","flexWrap-nowrap":"_55f6f487","flexShrink-0":"d5d0d34a","flexGrow-0":"d8ff7933","flexGrow-1":"_4a93668a","alignItems-flexStart":"_5a8c5a77","alignItems-center":"_50ba6b6b","alignItems-flexEnd":"_3963f790","alignItems-baseline":"_55ef2d4e","tablet-alignItems-flexStart":"_3e2bfb5d","tablet-alignItems-center":"a99be1ab","tablet-alignItems-flexEnd":"fa8221fe","tablet-alignItems-baseline":"e83669a0","desktop-alignItems-flexStart":"_65e6b537","desktop-alignItems-center":"db356482","desktop-alignItems-flexEnd":"acc08587","desktop-alignItems-baseline":"ad033867","justifyContent-flexStart":"_985b733f","justifyContent-center":"_95a98d2a","justifyContent-flexEnd":"be9bf31a","justifyContent-spaceAround":"a89d8798","justifyContent-spaceBetween":"_904ef8fe","justifyContent-spaceEvenly":"_489975d5","tablet-justifyContent-flexStart":"a7175ae7","tablet-justifyContent-center":"_7334dead","tablet-justifyContent-flexEnd":"_746de733","tablet-justifyContent-spaceAround":"_6d09398a","tablet-justifyContent-spaceBetween":"c2324c1d","tablet-justifyContent-spaceEvenly":"_04bd6e07","desktop-justifyContent-flexStart":"_39b310de","desktop-justifyContent-center":"_0dc77292","desktop-justifyContent-flexEnd":"_96c15bd8","desktop-justifyContent-spaceBetween":"_096111a6","alignSelf-stretch":"_35d69587","alignSelf-flexStart":"f46f3a67","alignSelf-center":"fb6a8035","alignSelf-flexEnd":"d3193acd","alignSelf-baseline":"_1154f656","tablet-alignSelf-stretch":"_298e04af","tablet-alignSelf-flexStart":"_2c729d24","tablet-alignSelf-center":"_9ea5e943","tablet-alignSelf-flexEnd":"_02266425","tablet-alignSelf-baseline":"c16a5800","desktop-alignSelf-stretch":"_2ec9eb74","desktop-alignSelf-flexStart":"_34f1fb03","desktop-alignSelf-center":"_77c58550","desktop-alignSelf-flexEnd":"_9ffa429f","desktop-alignSelf-baseline":"_6cc14c5d","overflow-hidden":"f6342c26","overflow-auto":"_10a2f952","overflow-visible":"f20b8b87","overflow-scroll":"_4954f87c","height-full":"a83fb2f5","bg-default":"d85cf739","bg-aside":"_4eb1d749","bg-highlight":"da1ccaa5","bg-selected":"_82dc28e7","bg-toast":"_63ba3dfa","borderRadius-standard":"_34cd2b5e","borderRadius-full":"_5fe4d5e3","border-primary":"_1b34ffd9","border-secondary":"_705519b0","border-tertiary":"_67adc238","textAlign-start":"fff8bff0","textAlign-center":"f973eed0","textAlign-end":"_225acbd7","textAlign-justify":"dea1e8ba","tablet-textAlign-start":"_919d6c8f","tablet-textAlign-center":"ab9d970e","tablet-textAlign-end":"b5b45e0e","tablet-textAlign-justify":"bd6e42e0","desktop-textAlign-start":"_15120506","desktop-textAlign-center":"_337333b5","desktop-textAlign-end":"_221db0fb","desktop-textAlign-justify":"_29ea9711"};
 
 export default modules_54d944f2;
 //# sourceMappingURL=box.module.css.js.map

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

@@ -1,7 +1,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useRef, useState, createElement } from 'react';
 import { Box } from '../box/box.js';
-import { Tooltip } from '../../components/tooltip/tooltip.js';
+import { Tooltip } from '../tooltip/tooltip.js';
 import { useId } from '../common-helpers.js';
 import { useForkRef } from 'ariakit-utils';
 import { BaseField } from '../base-field/base-field.js';

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

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","sources":["../../../src/new-components/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Tooltip } from '../../components/tooltip'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport { useId } from '../common-helpers'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport styles from './password-field.module.css'\nimport textFieldStyles from '../text-field/text-field.module.css'\n\nimport type { TextFieldProps } from '../text-field'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type'> &\n    BaseFieldVariantProps & {\n        togglePasswordLabel?: string\n    }\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    {\n        variant = 'default',\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        togglePasswordLabel = 'Toggle password visibility',\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const inputRef = useForkRef(internalRef, ref)\n\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n\n    function togglePasswordVisibility() {\n        setPasswordVisible((v) => !v)\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        textFieldStyles.inputWrapper,\n                        tone === 'error' ? textFieldStyles.error : null,\n                        variant === 'bordered' ? textFieldStyles.bordered : null,\n                    ]}\n                >\n                    <input\n                        {...props}\n                        {...extraProps}\n                        ref={inputRef}\n                        type={isPasswordVisible ? 'text' : 'password'}\n                    />\n                    <Tooltip content={togglePasswordLabel}>\n                        <button\n                            type=\"button\"\n                            onClick={togglePasswordVisibility}\n                            aria-label={togglePasswordLabel}\n                            tabIndex={-1}\n                        >\n                            {isPasswordVisible ? (\n                                <PasswordVisibleIcon aria-hidden />\n                            ) : (\n                                <PasswordHiddenIcon aria-hidden />\n                            )}\n                        </button>\n                    </Tooltip>\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","ref","variant","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","togglePasswordLabel","hidden","ariaDescribedBy","props","id","useId","internalRef","inputRef","useForkRef","isPasswordVisible","setPasswordVisible","togglePasswordVisibility","v","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","textFieldStyles","error","bordered","type","Tooltip","content","onClick","tabIndex","PasswordVisibleIcon","PasswordHiddenIcon"],"mappings":";;;;;;;;;;;;;MAoBMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAezEE,GAfyE;MACzE;IACIC,OAAO,GAAG,SADd;IAEIC,KAFJ;IAGIC,cAHJ;IAIIC,cAJJ;IAKIC,IALJ;IAMIC,OANJ;IAOIC,IAPJ;IAQIC,QARJ;IASIC,mBAAmB,GAAG,4BAT1B;IAUIC,MAVJ;IAWI,oBAAoBC;;MACjBC;;EAIP,MAAMC,EAAE,GAAGC,KAAK,CAACF,KAAK,CAACC,EAAP,CAAhB;EACA,MAAME,WAAW,GAAGhB,MAAA,CAA+B,IAA/B,CAApB;EACA,MAAMiB,QAAQ,GAAGC,UAAU,CAACF,WAAD,EAAcf,GAAd,CAA3B;EAEA,MAAM,CAACkB,iBAAD,EAAoBC,kBAApB,IAA0CpB,QAAA,CAAe,KAAf,CAAhD;;EAEA,SAASqB,wBAAT;;;IACID,kBAAkB,CAAEE,CAAD,IAAO,CAACA,CAAT,CAAlB;IACA,wBAAAN,WAAW,CAACO,OAAZ,0CAAqBC,KAArB;;;EAGJ,oBACIxB,aAAA,CAACyB,SAAD;IACIvB,OAAO,EAAEA;IACTY,EAAE,EAAEA;IACJX,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNC,QAAQ,EAAEA;IACVE,MAAM,EAAEA;wBACUC;GAXtB,EAaMc,UAAD,iBACG1B,aAAA,CAAC2B,GAAD;IACIC,OAAO,EAAC;IACRC,UAAU,EAAC;IACXC,SAAS,EAAE,CACPC,MAAM,CAACC,YADA,EAEPC,QAAe,CAACD,YAFT,EAGPxB,IAAI,KAAK,OAAT,GAAmByB,QAAe,CAACC,KAAnC,GAA2C,IAHpC,EAIPhC,OAAO,KAAK,UAAZ,GAAyB+B,QAAe,CAACE,QAAzC,GAAoD,IAJ7C;GAHf,eAUInC,aAAA,QAAA,mDACQa,KADR,GAEQa,UAFR;IAGIzB,GAAG,EAAEgB,QAHT;IAIImB,IAAI,EAAEjB,iBAAiB,GAAG,MAAH,GAAY;KAd3C,eAgBInB,aAAA,CAACqC,OAAD;IAASC,OAAO,EAAE5B;GAAlB,eACIV,aAAA,SAAA;IACIoC,IAAI,EAAC;IACLG,OAAO,EAAElB;kBACGX;IACZ8B,QAAQ,EAAE,CAAC;GAJf,EAMKrB,iBAAiB,gBACdnB,aAAA,CAACyC,mBAAD;;GAAA,CADc,gBAGdzC,aAAA,CAAC0C,kBAAD;;GAAA,CATR,CADJ,CAhBJ,CAdR,CADJ;AAiDH,CA7EqB;;;;"}
+{"version":3,"file":"password-field.js","sources":["../../../src/new-components/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Tooltip } from '../tooltip'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport { useId } from '../common-helpers'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport styles from './password-field.module.css'\nimport textFieldStyles from '../text-field/text-field.module.css'\n\nimport type { TextFieldProps } from '../text-field'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type'> &\n    BaseFieldVariantProps & {\n        togglePasswordLabel?: string\n    }\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    {\n        variant = 'default',\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        togglePasswordLabel = 'Toggle password visibility',\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const inputRef = useForkRef(internalRef, ref)\n\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n\n    function togglePasswordVisibility() {\n        setPasswordVisible((v) => !v)\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        textFieldStyles.inputWrapper,\n                        tone === 'error' ? textFieldStyles.error : null,\n                        variant === 'bordered' ? textFieldStyles.bordered : null,\n                    ]}\n                >\n                    <input\n                        {...props}\n                        {...extraProps}\n                        ref={inputRef}\n                        type={isPasswordVisible ? 'text' : 'password'}\n                    />\n                    <Tooltip content={togglePasswordLabel}>\n                        <button\n                            type=\"button\"\n                            onClick={togglePasswordVisibility}\n                            aria-label={togglePasswordLabel}\n                            tabIndex={-1}\n                        >\n                            {isPasswordVisible ? (\n                                <PasswordVisibleIcon aria-hidden />\n                            ) : (\n                                <PasswordHiddenIcon aria-hidden />\n                            )}\n                        </button>\n                    </Tooltip>\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","ref","variant","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","togglePasswordLabel","hidden","ariaDescribedBy","props","id","useId","internalRef","inputRef","useForkRef","isPasswordVisible","setPasswordVisible","togglePasswordVisibility","v","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","textFieldStyles","error","bordered","type","Tooltip","content","onClick","tabIndex","PasswordVisibleIcon","PasswordHiddenIcon"],"mappings":";;;;;;;;;;;;;MAoBMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAezEE,GAfyE;MACzE;IACIC,OAAO,GAAG,SADd;IAEIC,KAFJ;IAGIC,cAHJ;IAIIC,cAJJ;IAKIC,IALJ;IAMIC,OANJ;IAOIC,IAPJ;IAQIC,QARJ;IASIC,mBAAmB,GAAG,4BAT1B;IAUIC,MAVJ;IAWI,oBAAoBC;;MACjBC;;EAIP,MAAMC,EAAE,GAAGC,KAAK,CAACF,KAAK,CAACC,EAAP,CAAhB;EACA,MAAME,WAAW,GAAGhB,MAAA,CAA+B,IAA/B,CAApB;EACA,MAAMiB,QAAQ,GAAGC,UAAU,CAACF,WAAD,EAAcf,GAAd,CAA3B;EAEA,MAAM,CAACkB,iBAAD,EAAoBC,kBAApB,IAA0CpB,QAAA,CAAe,KAAf,CAAhD;;EAEA,SAASqB,wBAAT;;;IACID,kBAAkB,CAAEE,CAAD,IAAO,CAACA,CAAT,CAAlB;IACA,wBAAAN,WAAW,CAACO,OAAZ,0CAAqBC,KAArB;;;EAGJ,oBACIxB,aAAA,CAACyB,SAAD;IACIvB,OAAO,EAAEA;IACTY,EAAE,EAAEA;IACJX,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNC,QAAQ,EAAEA;IACVE,MAAM,EAAEA;wBACUC;GAXtB,EAaMc,UAAD,iBACG1B,aAAA,CAAC2B,GAAD;IACIC,OAAO,EAAC;IACRC,UAAU,EAAC;IACXC,SAAS,EAAE,CACPC,MAAM,CAACC,YADA,EAEPC,QAAe,CAACD,YAFT,EAGPxB,IAAI,KAAK,OAAT,GAAmByB,QAAe,CAACC,KAAnC,GAA2C,IAHpC,EAIPhC,OAAO,KAAK,UAAZ,GAAyB+B,QAAe,CAACE,QAAzC,GAAoD,IAJ7C;GAHf,eAUInC,aAAA,QAAA,mDACQa,KADR,GAEQa,UAFR;IAGIzB,GAAG,EAAEgB,QAHT;IAIImB,IAAI,EAAEjB,iBAAiB,GAAG,MAAH,GAAY;KAd3C,eAgBInB,aAAA,CAACqC,OAAD;IAASC,OAAO,EAAE5B;GAAlB,eACIV,aAAA,SAAA;IACIoC,IAAI,EAAC;IACLG,OAAO,EAAElB;kBACGX;IACZ8B,QAAQ,EAAE,CAAC;GAJf,EAMKrB,iBAAiB,gBACdnB,aAAA,CAACyC,mBAAD;;GAAA,CADc,gBAGdzC,aAAA,CAAC0C,kBAAD;;GAAA,CATR,CADJ,CAhBJ,CAdR,CADJ;AAiDH,CA7EqB;;;;"}

package/es/{components → new-components}/tooltip/tooltip.js

@@ -1,9 +1,8 @@
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useMemo, Children, createElement, Fragment, cloneElement, useCallback, useRef, useEffect } from 'react';
-import classNames from 'classnames';
-import { TooltipAnchor, Tooltip as Tooltip$1, useTooltipState } from 'ariakit/tooltip';
-
-const _excluded = ["children", "content", "position", "gapSize", "className"];
+import { Box } from '../box/box.js';
+import { TooltipAnchor, Tooltip as Tooltip$1, TooltipArrow, useTooltipState } from 'ariakit/tooltip';
+import styles from './tooltip.module.css.js';
 
 const SHOW_DELAY = 500;
 const HIDE_DELAY = 100;
@@ -17,16 +16,14 @@ function useDelayedTooltipState(initialState) {
   }), [delay, tooltipState]);
 }
 
-function Tooltip(_ref) {
-  let {
-    children,
-    content,
-    position = 'top',
-    gapSize = 3,
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+function Tooltip({
+  children,
+  content,
+  position = 'top',
+  gapSize = 3,
+  withArrow = false,
+  exceptionallySetClassName
+}) {
   const state = useDelayedTooltipState({
     placement: position,
     gutter: gapSize
@@ -44,19 +41,19 @@ function Tooltip(_ref) {
    * Prevents the tooltip from automatically firing on focus all the time. This is to prevent
    * tooltips from showing when the trigger element is focused back after a popover or dialog that
    * it opened was closed. See link below for more details.
-   * @see https://github.com/reakit/reakit/discussions/749
+   * @see https://github.com/ariakit/ariakit/discussions/749
    */
 
 
   function handleFocus(event) {
     var _child$props;
 
-    // If focus is not followed by a key up event, does it mean that it's not
-    // an intentional keyboard focus? Not sure but it seems to work.
-    // This may be resolved soon in an upcoming version of reakit:
-    // https://github.com/reakit/reakit/issues/750
-    function handleKeyUp(e) {
-      const eventKey = e.key;
+    // If focus is not followed by a key up event, does it mean that it's not an intentional
+    // keyboard focus? Not sure but it seems to work.
+    // This may be resolved soon in an upcoming version of ariakit:
+    // https://github.com/ariakit/ariakit/issues/750
+    function handleKeyUp(event) {
+      const eventKey = event.key;
 
       if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {
         state.show();
@@ -65,25 +62,35 @@ function Tooltip(_ref) {
 
     event.currentTarget.addEventListener('keyup', handleKeyUp, {
       once: true
-    }); // Prevent tooltip.show from being called by TooltipReference
+    });
+    event.preventDefault(); // Prevent tooltip.show from being called by TooltipReference
 
-    event.preventDefault();
     child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.onFocus == null ? void 0 : _child$props.onFocus(event);
   }
 
   return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(TooltipAnchor, {
     state: state,
     ref: child.ref,
-    onFocus: handleFocus
+    onFocus: handleFocus,
+    described: true
   }, anchorProps => {
     // Let child props override anchor props so user can specify attributes like tabIndex
     // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems
     // by applying the replacement component/element twice
     return /*#__PURE__*/cloneElement(child, _objectSpread2(_objectSpread2({}, anchorProps), child.props));
-  }), state.visible ? /*#__PURE__*/createElement(Tooltip$1, _objectSpread2(_objectSpread2({}, props), {}, {
+  }), state.visible ? /*#__PURE__*/createElement(Box, {
+    as: Tooltip$1,
     state: state,
-    className: classNames('reactist_tooltip', className)
-  }), typeof content === 'function' ? content() : content) : null);
+    className: [styles.tooltip, exceptionallySetClassName],
+    background: "toast",
+    borderRadius: "standard",
+    paddingX: "small",
+    paddingY: "xsmall",
+    maxWidth: "medium",
+    width: "fitContent",
+    overflow: "hidden",
+    textAlign: "center"
+  }, withArrow ? /*#__PURE__*/createElement(TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
 }
 // Internal helpers
 //

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../src/new-components/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from 'ariakit/tooltip'\nimport { Box } from '../box'\n\nimport type {\n    TooltipStateProps as AriakitTooltipStateProps,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport styles from './tooltip.module.css'\n\ntype TooltipProps = {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: PopoverState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * An escape hatch, in case you need to provide a custom class name to the tooltip.\n     */\n    exceptionallySetClassName?: string\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: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(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    withArrow = false,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!content || !child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\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/ariakit/ariakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not an intentional\n        // keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of ariakit:\n        // https://github.com/ariakit/ariakit/issues/750\n        function handleKeyUp(event: Event) {\n            const eventKey = (event as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        event.preventDefault() // Prevent tooltip.show from being called by TooltipReference\n        child?.props?.onFocus?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} ref={child.ref} onFocus={handleFocus} described>\n                {(anchorProps: TooltipAnchorProps) => {\n                    // Let child props override anchor props so user can specify attributes like tabIndex\n                    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n                    // by applying the replacement component/element twice\n                    return React.cloneElement(child, { ...anchorProps, ...child.props })\n                }}\n            </TooltipAnchor>\n            {state.visible ? (\n                <Box\n                    as={AriakitTooltip}\n                    state={state}\n                    className={[styles.tooltip, exceptionallySetClassName]}\n                    background=\"toast\"\n                    borderRadius=\"standard\"\n                    paddingX=\"small\"\n                    paddingY=\"xsmall\"\n                    maxWidth=\"medium\"\n                    width=\"fitContent\"\n                    overflow=\"hidden\"\n                    textAlign=\"center\"\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </Box>\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":["SHOW_DELAY","HIDE_DELAY","useDelayedTooltipState","initialState","tooltipState","useAriakitTooltipState","delay","useDelay","React","show","hide","Tooltip","children","content","position","gapSize","withArrow","exceptionallySetClassName","state","placement","gutter","child","only","ref","Error","handleFocus","event","handleKeyUp","eventKey","key","currentTarget","addEventListener","once","preventDefault","props","onFocus","TooltipAnchor","described","anchorProps","visible","Box","as","AriakitTooltip","className","styles","tooltip","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","timeoutRef","clearTimeouts","current","clearTimeout","fn","setTimeout"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var modules_95f1407a = {"tooltip":"_2b075a8d"};
+
+export default modules_95f1407a;
+//# sourceMappingURL=tooltip.module.css.js.map

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

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

package/lib/components/color-picker/color-picker.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("react"),o=(e(t),e(require("classnames"))),r=require("../tooltip/tooltip.js"),l=require("../deprecated-dropdown/index.js");const c=["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"],n=e=>"string"!=typeof e;function a({color:e=0,small:r,onChange:a,colorList:s=c}){return t.createElement(l.default.Box,{right:!0,className:"reactist_color_picker"},t.createElement(l.default.Trigger,null,(()=>{const l=((e,t)=>e[t>=e.length?0:t])(s,e);return t.createElement("span",{className:o("color_trigger",{small:r}),style:{backgroundColor:n(l)?l.color:l}},t.createElement("span",{className:"color_trigger--inner_ring"}))})()),t.createElement(l.default.Body,null,t.createElement("div",{className:"color_options"},s.reduce((o,r,l)=>(o.push(t.createElement(i,{isActive:e>=s.length?0===l:l===e,key:l,color:n(r)?r.color:r,colorIndex:l,onClick:a,tooltip:n(r)?r.name:null})),o),[]))))}function i({color:e,colorIndex:o,isActive:l,onClick:c,tooltip:n}){const a=t.createElement("span",{"data-testid":"reactist-color-item",className:"reactist color_item"+(l?" active":""),style:{backgroundColor:e},onClick:()=>null==c?void 0:c(o)},t.createElement("span",{className:"color_item--inner_ring"}));return n?t.createElement(r.Tooltip,{content:n},a):a}a.displayName="ColorPicker",i.displayName="ColorItem",exports.COLORS=c,exports.ColorItem=i,exports.ColorPicker=a;
+"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("react"),o=(e(t),e(require("classnames"))),r=require("../../new-components/tooltip/tooltip.js"),l=require("../deprecated-dropdown/index.js");const n=["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"],c=e=>"string"!=typeof e;function a({color:e=0,small:r,onChange:a,colorList:s=n}){return t.createElement(l.default.Box,{right:!0,className:"reactist_color_picker"},t.createElement(l.default.Trigger,null,(()=>{const l=((e,t)=>e[t>=e.length?0:t])(s,e);return t.createElement("span",{className:o("color_trigger",{small:r}),style:{backgroundColor:c(l)?l.color:l}},t.createElement("span",{className:"color_trigger--inner_ring"}))})()),t.createElement(l.default.Body,null,t.createElement("div",{className:"color_options"},s.reduce((o,r,l)=>(o.push(t.createElement(i,{isActive:e>=s.length?0===l:l===e,key:l,color:c(r)?r.color:r,colorIndex:l,onClick:a,tooltip:c(r)?r.name:null})),o),[]))))}function i({color:e,colorIndex:o,isActive:l,onClick:n,tooltip:c}){const a=t.createElement("span",{"data-testid":"reactist-color-item",className:"reactist color_item"+(l?" active":""),style:{backgroundColor:e},onClick:()=>null==n?void 0:n(o)},t.createElement("span",{className:"color_item--inner_ring"}));return c?t.createElement(r.Tooltip,{content:c},a):a}a.displayName="ColorPicker",i.displayName="ColorItem",exports.COLORS=n,exports.ColorItem=i,exports.ColorPicker=a;
 //# sourceMappingURL=color-picker.js.map

package/lib/components/color-picker/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport classnames from 'classnames'\n\nimport DeprecatedDropdown from '../deprecated-dropdown'\nimport { Tooltip } from '../tooltip'\n\nimport './color-picker.less'\n\ntype NamedColor = { name: string; color: string }\n\nconst COLORS = [\n    '#606060',\n    '#4A90E2',\n    '#03B3B2',\n    '#008299',\n    '#82BA00',\n    '#D24726',\n    '#AC193D',\n    '#DC4FAD',\n    '#3BD5FB',\n    '#74E8D3',\n    '#FFCC00',\n    '#FB886E',\n    '#CCCCCC',\n]\n\nconst _isNamedColor = (color: string | NamedColor | undefined): color is NamedColor =>\n    typeof color !== 'string'\n\nconst _getColor = (colorList: (string | NamedColor)[], colorIndex: number) => {\n    const index = colorIndex >= colorList.length ? 0 : colorIndex\n    return colorList[index]\n}\n\ntype Props = {\n    small?: boolean\n    color?: number\n    onChange?: (color: number) => void\n    colorList?: (string | NamedColor)[]\n}\n\nfunction ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props) {\n    return (\n        <DeprecatedDropdown.Box right className=\"reactist_color_picker\">\n            <DeprecatedDropdown.Trigger>\n                {(() => {\n                    const backgroundColor = _getColor(colorList, color)\n\n                    return (\n                        <span\n                            className={classnames('color_trigger', { small })}\n                            style={{\n                                backgroundColor: _isNamedColor(backgroundColor)\n                                    ? backgroundColor.color\n                                    : backgroundColor,\n                            }}\n                        >\n                            <span className=\"color_trigger--inner_ring\" />\n                        </span>\n                    )\n                })()}\n            </DeprecatedDropdown.Trigger>\n            <DeprecatedDropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {\n                        items.push(\n                            <ColorItem\n                                isActive={\n                                    color >= colorList.length\n                                        ? currentIndex === 0\n                                        : currentIndex === color\n                                }\n                                key={currentIndex}\n                                color={\n                                    _isNamedColor(currentColor) ? currentColor.color : currentColor\n                                }\n                                colorIndex={currentIndex}\n                                onClick={onChange}\n                                tooltip={_isNamedColor(currentColor) ? currentColor.name : null}\n                            />,\n                        )\n                        return items\n                    }, [])}\n                </div>\n            </DeprecatedDropdown.Body>\n        </DeprecatedDropdown.Box>\n    )\n}\nColorPicker.displayName = 'ColorPicker'\n\ntype ColorItemProps = {\n    color: string\n    colorIndex: number\n    isActive?: boolean\n    onClick?: (colorIndex: number) => void\n    tooltip?: React.ReactNode\n}\n\nfunction ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {\n    const item = (\n        <span\n            data-testid=\"reactist-color-item\"\n            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => onClick?.(colorIndex)}\n        >\n            <span className=\"color_item--inner_ring\" />\n        </span>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{item}</Tooltip> : item\n}\nColorItem.displayName = 'ColorItem'\n\nexport { ColorPicker, ColorItem, COLORS }\n"],"names":["COLORS","_isNamedColor","color","ColorPicker","small","onChange","colorList","React","DeprecatedDropdown","Box","right","className","Trigger","backgroundColor","colorIndex","length","_getColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","item","Tooltip","content","displayName"],"mappings":"yRAUMA,EAAS,CACX,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAGEC,EAAiBC,GACF,iBAAVA,EAcX,SAASC,GAAYD,MAAEA,EAAQ,EAAVE,MAAaA,EAAbC,SAAoBA,EAApBC,UAA8BA,EAAYN,IAC3D,OACIO,gBAACC,UAAmBC,KAAIC,SAAMC,UAAU,yBACpCJ,gBAACC,UAAmBI,aACf,MACG,MAAMC,EAjBR,EAACP,EAAoCQ,IAE5CR,EADOQ,GAAcR,EAAUS,OAAS,EAAID,GAgBXE,CAAUV,EAAWJ,GAE7C,OACIK,wBACII,UAAWM,EAAW,gBAAiB,CAAEb,MAAAA,IACzCc,MAAO,CACHL,gBAAiBZ,EAAcY,GACzBA,EAAgBX,MAChBW,IAGVN,wBAAMI,UAAU,gCAZ3B,IAiBLJ,gBAACC,UAAmBW,UAChBZ,uBAAKI,UAAU,iBACVL,EAAUc,OAA0B,CAACC,EAAOC,EAAcC,KACvDF,EAAMG,KACFjB,gBAACkB,GACGC,SACIxB,GAASI,EAAUS,OACI,IAAjBQ,EACAA,IAAiBrB,EAE3ByB,IAAKJ,EACLrB,MACID,EAAcqB,GAAgBA,EAAapB,MAAQoB,EAEvDR,WAAYS,EACZK,QAASvB,EACTwB,QAAS5B,EAAcqB,GAAgBA,EAAaQ,KAAO,QAG5DT,GACR,OAgBvB,SAASI,GAAUvB,MAAEA,EAAFY,WAASA,EAATY,SAAqBA,EAArBE,QAA+BA,UAASC,IACvD,MAAME,EACFxB,sCACgB,sBACZI,UAAW,uBAAyBe,EAAW,UAAY,IAC3DR,MAAO,CAAEL,gBAAiBX,GAC1B0B,QAAS,UAAMA,SAAAA,EAAUd,IAEzBP,wBAAMI,UAAU,4BAIxB,OAAOkB,EAAUtB,gBAACyB,WAAQC,QAASJ,GAAUE,GAAkBA,EAtBnE5B,EAAY+B,YAAc,cAwB1BT,EAAUS,YAAc"}
+{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport classnames from 'classnames'\n\nimport DeprecatedDropdown from '../deprecated-dropdown'\nimport { Tooltip } from '../../new-components/tooltip'\n\nimport './color-picker.less'\n\ntype NamedColor = { name: string; color: string }\n\nconst COLORS = [\n    '#606060',\n    '#4A90E2',\n    '#03B3B2',\n    '#008299',\n    '#82BA00',\n    '#D24726',\n    '#AC193D',\n    '#DC4FAD',\n    '#3BD5FB',\n    '#74E8D3',\n    '#FFCC00',\n    '#FB886E',\n    '#CCCCCC',\n]\n\nconst _isNamedColor = (color: string | NamedColor | undefined): color is NamedColor =>\n    typeof color !== 'string'\n\nconst _getColor = (colorList: (string | NamedColor)[], colorIndex: number) => {\n    const index = colorIndex >= colorList.length ? 0 : colorIndex\n    return colorList[index]\n}\n\ntype Props = {\n    small?: boolean\n    color?: number\n    onChange?: (color: number) => void\n    colorList?: (string | NamedColor)[]\n}\n\nfunction ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props) {\n    return (\n        <DeprecatedDropdown.Box right className=\"reactist_color_picker\">\n            <DeprecatedDropdown.Trigger>\n                {(() => {\n                    const backgroundColor = _getColor(colorList, color)\n\n                    return (\n                        <span\n                            className={classnames('color_trigger', { small })}\n                            style={{\n                                backgroundColor: _isNamedColor(backgroundColor)\n                                    ? backgroundColor.color\n                                    : backgroundColor,\n                            }}\n                        >\n                            <span className=\"color_trigger--inner_ring\" />\n                        </span>\n                    )\n                })()}\n            </DeprecatedDropdown.Trigger>\n            <DeprecatedDropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {\n                        items.push(\n                            <ColorItem\n                                isActive={\n                                    color >= colorList.length\n                                        ? currentIndex === 0\n                                        : currentIndex === color\n                                }\n                                key={currentIndex}\n                                color={\n                                    _isNamedColor(currentColor) ? currentColor.color : currentColor\n                                }\n                                colorIndex={currentIndex}\n                                onClick={onChange}\n                                tooltip={_isNamedColor(currentColor) ? currentColor.name : null}\n                            />,\n                        )\n                        return items\n                    }, [])}\n                </div>\n            </DeprecatedDropdown.Body>\n        </DeprecatedDropdown.Box>\n    )\n}\nColorPicker.displayName = 'ColorPicker'\n\ntype ColorItemProps = {\n    color: string\n    colorIndex: number\n    isActive?: boolean\n    onClick?: (colorIndex: number) => void\n    tooltip?: React.ReactNode\n}\n\nfunction ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {\n    const item = (\n        <span\n            data-testid=\"reactist-color-item\"\n            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => onClick?.(colorIndex)}\n        >\n            <span className=\"color_item--inner_ring\" />\n        </span>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{item}</Tooltip> : item\n}\nColorItem.displayName = 'ColorItem'\n\nexport { ColorPicker, ColorItem, COLORS }\n"],"names":["COLORS","_isNamedColor","color","ColorPicker","small","onChange","colorList","React","DeprecatedDropdown","Box","right","className","Trigger","backgroundColor","colorIndex","length","_getColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","item","Tooltip","content","displayName"],"mappings":"2SAUMA,EAAS,CACX,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAGEC,EAAiBC,GACF,iBAAVA,EAcX,SAASC,GAAYD,MAAEA,EAAQ,EAAVE,MAAaA,EAAbC,SAAoBA,EAApBC,UAA8BA,EAAYN,IAC3D,OACIO,gBAACC,UAAmBC,KAAIC,SAAMC,UAAU,yBACpCJ,gBAACC,UAAmBI,aACf,MACG,MAAMC,EAjBR,EAACP,EAAoCQ,IAE5CR,EADOQ,GAAcR,EAAUS,OAAS,EAAID,GAgBXE,CAAUV,EAAWJ,GAE7C,OACIK,wBACII,UAAWM,EAAW,gBAAiB,CAAEb,MAAAA,IACzCc,MAAO,CACHL,gBAAiBZ,EAAcY,GACzBA,EAAgBX,MAChBW,IAGVN,wBAAMI,UAAU,gCAZ3B,IAiBLJ,gBAACC,UAAmBW,UAChBZ,uBAAKI,UAAU,iBACVL,EAAUc,OAA0B,CAACC,EAAOC,EAAcC,KACvDF,EAAMG,KACFjB,gBAACkB,GACGC,SACIxB,GAASI,EAAUS,OACI,IAAjBQ,EACAA,IAAiBrB,EAE3ByB,IAAKJ,EACLrB,MACID,EAAcqB,GAAgBA,EAAapB,MAAQoB,EAEvDR,WAAYS,EACZK,QAASvB,EACTwB,QAAS5B,EAAcqB,GAAgBA,EAAaQ,KAAO,QAG5DT,GACR,OAgBvB,SAASI,GAAUvB,MAAEA,EAAFY,WAASA,EAATY,SAAqBA,EAArBE,QAA+BA,UAASC,IACvD,MAAME,EACFxB,sCACgB,sBACZI,UAAW,uBAAyBe,EAAW,UAAY,IAC3DR,MAAO,CAAEL,gBAAiBX,GAC1B0B,QAAS,UAAMA,SAAAA,EAAUd,IAEzBP,wBAAMI,UAAU,4BAIxB,OAAOkB,EAAUtB,gBAACyB,WAAQC,QAASJ,GAAUE,GAAkBA,EAtBnE5B,EAAY+B,YAAc,cAwB1BT,EAAUS,YAAc"}

package/lib/components/deprecated-button/deprecated-button.js

@@ -1,2 +1,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),i=(t(o),t(require("classnames"))),l=require("../tooltip/tooltip.js");const a=["type","variant","size","loading","disabled","tooltip","onClick","children"],r=o.forwardRef((function(t,r){let{type:n="button",variant:s,size:u="default",loading:d=!1,disabled:c=!1,tooltip:p,onClick:b,children:f}=t,_=e.objectWithoutProperties(t,a);const j=i("reactist_button",s?"reactist_button--"+s:null,"default"!==u?"reactist_button--"+u:null,{"reactist_button--loading":d},_.className),m=o.createElement("button",e.objectSpread2(e.objectSpread2({},_),{},{ref:r,type:n,className:j,"aria-disabled":c||d,onClick:c||d?void 0:b}),f);return p?o.createElement(l.Tooltip,{content:p},m):m}));r.displayName="Button",r.defaultProps={size:"default",loading:!1,disabled:!1},exports.Button=r;
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),i=(t(o),t(require("classnames"))),l=require("../../new-components/tooltip/tooltip.js");const a=["type","variant","size","loading","disabled","tooltip","onClick","children"],r=o.forwardRef((function(t,r){let{type:n="button",variant:s,size:u="default",loading:c=!1,disabled:d=!1,tooltip:p,onClick:b,children:f}=t,_=e.objectWithoutProperties(t,a);const j=i("reactist_button",s?"reactist_button--"+s:null,"default"!==u?"reactist_button--"+u:null,{"reactist_button--loading":c},_.className),m=o.createElement("button",e.objectSpread2(e.objectSpread2({},_),{},{ref:r,type:n,className:j,"aria-disabled":d||c,onClick:d||c?void 0:b}),f);return p?o.createElement(l.Tooltip,{content:p},m):m}));r.displayName="Button",r.defaultProps={size:"default",loading:!1,disabled:!1},exports.Button=r;
 //# sourceMappingURL=deprecated-button.js.map

package/lib/components/deprecated-button/deprecated-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"deprecated-button.js","sources":["../../../src/components/deprecated-button/deprecated-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { Tooltip } from '../tooltip'\n\nimport './deprecated-button.less'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\n/** @deprecated */\nexport type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link'\n\n/** @deprecated */\nexport type ButtonSize = 'default' | 'small' | 'large'\n\n/** @deprecated */\nexport type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {\n    /**\n     * Loading style. When true it disables the button, but it also adds a visual indication of\n     * some in-progress operation going on.\n     */\n    loading?: boolean\n    /**\n     * Controls visually how the button shows up from a predefined set of kinds of buttons.\n     */\n    variant?: ButtonVariant\n    /**\n     * The size of the button. If not provided it shows up in a normal size.\n     */\n    size?: ButtonSize\n    /**\n     * Tooltip that is displayed on hover.\n     *\n     * This replaces `title` which is not supported for these buttons to avoid confusion.\n     */\n    tooltip?: React.ReactNode\n}\n\n/**\n * @deprecated\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        type = 'button',\n        variant,\n        size = 'default',\n        loading = false,\n        disabled = false,\n        tooltip,\n        onClick,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const className = classNames(\n        'reactist_button',\n        variant ? `reactist_button--${variant}` : null,\n        size !== 'default' ? `reactist_button--${size}` : null,\n        { 'reactist_button--loading': loading },\n        props.className,\n    )\n\n    const button = (\n        <button\n            {...props}\n            ref={ref}\n            type={type}\n            className={className}\n            aria-disabled={disabled || loading}\n            onClick={disabled || loading ? undefined : onClick}\n        >\n            {children}\n        </button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{button}</Tooltip> : button\n})\n\nButton.displayName = 'Button'\n\nButton.defaultProps = {\n    size: 'default',\n    loading: false,\n    disabled: false,\n}\n\nexport { Button }\n"],"names":["Button","React","ref","type","variant","size","loading","disabled","tooltip","onClick","children","props","className","classNames","reactist_button--loading","button","undefined","Tooltip","content","displayName","defaultProps"],"mappings":"qXA4CMA,EAASC,cAAiD,WAY5DC,OAXAC,KACIA,EAAO,SADXC,QAEIA,EAFJC,KAGIA,EAAO,UAHXC,QAIIA,GAAU,EAJdC,SAKIA,GAAW,UACXC,EANJC,QAOIA,EAPJC,SAQIA,KACGC,iCAIP,MAAMC,EAAYC,EACd,kBACAT,sBAA8BA,EAAY,KACjC,YAATC,sBAAyCA,EAAS,KAClD,CAAES,2BAA4BR,GAC9BK,EAAMC,WAGJG,EACFd,4DACQU,OACJT,IAAKA,EACLC,KAAMA,EACNS,UAAWA,kBACIL,GAAYD,EAC3BG,QAASF,GAAYD,OAAUU,EAAYP,IAE1CC,GAIT,OAAOF,EAAUP,gBAACgB,WAAQC,QAASV,GAAUO,GAAoBA,KAGrEf,EAAOmB,YAAc,SAErBnB,EAAOoB,aAAe,CAClBf,KAAM,UACNC,SAAS,EACTC,UAAU"}
+{"version":3,"file":"deprecated-button.js","sources":["../../../src/components/deprecated-button/deprecated-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { Tooltip } from '../../new-components/tooltip'\n\nimport './deprecated-button.less'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\n/** @deprecated */\nexport type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link'\n\n/** @deprecated */\nexport type ButtonSize = 'default' | 'small' | 'large'\n\n/** @deprecated */\nexport type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {\n    /**\n     * Loading style. When true it disables the button, but it also adds a visual indication of\n     * some in-progress operation going on.\n     */\n    loading?: boolean\n    /**\n     * Controls visually how the button shows up from a predefined set of kinds of buttons.\n     */\n    variant?: ButtonVariant\n    /**\n     * The size of the button. If not provided it shows up in a normal size.\n     */\n    size?: ButtonSize\n    /**\n     * Tooltip that is displayed on hover.\n     *\n     * This replaces `title` which is not supported for these buttons to avoid confusion.\n     */\n    tooltip?: React.ReactNode\n}\n\n/**\n * @deprecated\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        type = 'button',\n        variant,\n        size = 'default',\n        loading = false,\n        disabled = false,\n        tooltip,\n        onClick,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const className = classNames(\n        'reactist_button',\n        variant ? `reactist_button--${variant}` : null,\n        size !== 'default' ? `reactist_button--${size}` : null,\n        { 'reactist_button--loading': loading },\n        props.className,\n    )\n\n    const button = (\n        <button\n            {...props}\n            ref={ref}\n            type={type}\n            className={className}\n            aria-disabled={disabled || loading}\n            onClick={disabled || loading ? undefined : onClick}\n        >\n            {children}\n        </button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{button}</Tooltip> : button\n})\n\nButton.displayName = 'Button'\n\nButton.defaultProps = {\n    size: 'default',\n    loading: false,\n    disabled: false,\n}\n\nexport { Button }\n"],"names":["Button","React","ref","type","variant","size","loading","disabled","tooltip","onClick","children","props","className","classNames","reactist_button--loading","button","undefined","Tooltip","content","displayName","defaultProps"],"mappings":"uYA4CMA,EAASC,cAAiD,WAY5DC,OAXAC,KACIA,EAAO,SADXC,QAEIA,EAFJC,KAGIA,EAAO,UAHXC,QAIIA,GAAU,EAJdC,SAKIA,GAAW,UACXC,EANJC,QAOIA,EAPJC,SAQIA,KACGC,iCAIP,MAAMC,EAAYC,EACd,kBACAT,sBAA8BA,EAAY,KACjC,YAATC,sBAAyCA,EAAS,KAClD,CAAES,2BAA4BR,GAC9BK,EAAMC,WAGJG,EACFd,4DACQU,OACJT,IAAKA,EACLC,KAAMA,EACNS,UAAWA,kBACIL,GAAYD,EAC3BG,QAASF,GAAYD,OAAUU,EAAYP,IAE1CC,GAIT,OAAOF,EAAUP,gBAACgB,WAAQC,QAASV,GAAUO,GAAoBA,KAGrEf,EAAOmB,YAAc,SAErBnB,EAAOoB,aAAe,CAClBf,KAAM,UACNC,SAAS,EACTC,UAAU"}

package/lib/components/time/time.js

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

package/lib/components/time/time.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.js","sources":["../../../src/components/time/time.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Tooltip } from '../tooltip'\nimport { TimeUtils, TimeConfig } from './time-utils'\n\nimport './time.less'\n\nconst DELAY = 60000\n\ntype Props = {\n    /** UNIX timestamp of the time to display. */\n    time?: number\n    /** Configuration for localization. */\n    config?: TimeConfig\n    /** Additional css class applied to the time element. */\n    className?: string\n    tooltipOnHover?: boolean\n    /** Refresh the component every DELAY seconds. */\n    refresh?: boolean\n    /** If you don't want to use the default time format on the tooltip use this prop to supply a custom text */\n    tooltip?: React.ReactNode\n    /** When hovering over time it expands to short absolute version. */\n    expandOnHover?: boolean\n    /** When hovering over time it expands to the full absolute version. */\n    expandFullyOnHover?: boolean\n}\n\ntype State = {\n    hovered: boolean\n    mouseX?: number\n    mouseY?: number\n}\n\nclass Time extends React.Component<Props, State> {\n    public static displayName: string\n    public static defaultProps: Props\n\n    constructor(props: Props) {\n        super(props)\n        this.refreshInterval = undefined\n\n        this.state = {\n            hovered: false,\n            mouseX: undefined,\n            mouseY: undefined,\n        }\n    }\n\n    componentDidMount() {\n        if (this.props.refresh) {\n            this._refresh()\n        }\n    }\n\n    componentDidUpdate(prevProps: Props) {\n        if (!prevProps.refresh && this.props.refresh) {\n            this._refresh()\n        }\n\n        if (prevProps.refresh && !this.props.refresh) {\n            if (this.refreshInterval) {\n                clearTimeout(this.refreshInterval)\n            }\n        }\n    }\n\n    componentWillUnmount() {\n        if (this.refreshInterval) {\n            clearTimeout(this.refreshInterval)\n        }\n    }\n\n    refreshInterval?: ReturnType<typeof setTimeout>\n\n    _setHovered(hovered: boolean, event: React.MouseEvent) {\n        const { mouseX, mouseY } = this.state\n        const { clientX, clientY } = event\n        if (clientX !== mouseX || clientY !== mouseY) {\n            // mouse has moved\n            this.setState(() => ({\n                hovered,\n                mouseX: clientX,\n                mouseY: clientY,\n            }))\n        }\n    }\n\n    _renderTime(config: Props['config']) {\n        if (!this.props.time) {\n            return\n        }\n        if (this.state.hovered) {\n            if (this.props.expandFullyOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTimeLong(this.props.time, config)\n            }\n            if (this.props.expandOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTime(this.props.time, config)\n            }\n        }\n        return TimeUtils.timeAgo(this.props.time, config)\n    }\n\n    _refresh() {\n        this.refreshInterval = setInterval(() => {\n            this.forceUpdate()\n        }, DELAY)\n    }\n\n    render() {\n        let className = 'reactist_time'\n        if (this.props.className) {\n            className = this.props.className\n        }\n\n        const timeComponent = this._renderTime(this.props.config)\n\n        return (\n            <time\n                className={className}\n                onMouseEnter={(event) => this._setHovered(true, event)}\n                onMouseLeave={(event) => this._setHovered(false, event)}\n            >\n                {this.props.tooltipOnHover ? (\n                    <Tooltip\n                        content={\n                            this.props.tooltip ||\n                            (this.props.time &&\n                                TimeUtils.formatTimeLong(this.props.time, this.props.config))\n                        }\n                    >\n                        <span>{timeComponent}</span>\n                    </Tooltip>\n                ) : (\n                    timeComponent\n                )}\n            </time>\n        )\n    }\n}\nTime.displayName = 'Time'\n\nTime.defaultProps = {\n    expandOnHover: false,\n    expandFullyOnHover: false,\n    tooltipOnHover: false,\n    refresh: true,\n    config: {\n        locale: 'en',\n        daysSuffix: 'd',\n        hoursSuffix: 'h',\n        minutesSuffix: 'm',\n        momentsAgo: 'moments ago',\n    },\n}\n\nexport { Time }\n"],"names":["Time","React","constructor","props","super","refreshInterval","this","undefined","state","hovered","mouseX","mouseY","componentDidMount","refresh","_refresh","componentDidUpdate","prevProps","clearTimeout","componentWillUnmount","_setHovered","event","clientX","clientY","setState","_renderTime","config","time","expandFullyOnHover","tooltipOnHover","TimeUtils","formatTimeLong","expandOnHover","formatTime","timeAgo","setInterval","forceUpdate","render","className","timeComponent","onMouseEnter","onMouseLeave","Tooltip","content","tooltip","displayName","defaultProps","locale","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo"],"mappings":"2JAiCA,MAAMA,UAAaC,YAIfC,YAAYC,GACRC,MAAMD,QAkCVE,uBAjCIC,KAAKD,qBAAkBE,EAEvBD,KAAKE,MAAQ,CACTC,SAAS,EACTC,YAAQH,EACRI,YAAQJ,GAIhBK,oBACQN,KAAKH,MAAMU,SACXP,KAAKQ,WAIbC,mBAAmBC,IACVA,EAAUH,SAAWP,KAAKH,MAAMU,SACjCP,KAAKQ,WAGLE,EAAUH,UAAYP,KAAKH,MAAMU,SAC7BP,KAAKD,iBACLY,aAAaX,KAAKD,iBAK9Ba,uBACQZ,KAAKD,iBACLY,aAAaX,KAAKD,iBAM1Bc,YAAYV,EAAkBW,GAC1B,MAAMV,OAAEA,EAAFC,OAAUA,GAAWL,KAAKE,OAC1Ba,QAAEA,EAAFC,QAAWA,GAAYF,EACzBC,IAAYX,GAAUY,IAAYX,GAElCL,KAAKiB,SAAS,MACVd,QAAAA,EACAC,OAAQW,EACRV,OAAQW,KAKpBE,YAAYC,GACR,GAAKnB,KAAKH,MAAMuB,KAAhB,CAGA,GAAIpB,KAAKE,MAAMC,QAAS,CACpB,GAAIH,KAAKH,MAAMwB,qBAAuBrB,KAAKH,MAAMyB,eAC7C,OAAOC,YAAUC,eAAexB,KAAKH,MAAMuB,KAAMD,GAErD,GAAInB,KAAKH,MAAM4B,gBAAkBzB,KAAKH,MAAMyB,eACxC,OAAOC,YAAUG,WAAW1B,KAAKH,MAAMuB,KAAMD,GAGrD,OAAOI,YAAUI,QAAQ3B,KAAKH,MAAMuB,KAAMD,IAG9CX,WACIR,KAAKD,gBAAkB6B,YAAY,KAC/B5B,KAAK6B,eAjGH,KAqGVC,SACI,IAAIC,EAAY,gBACZ/B,KAAKH,MAAMkC,YACXA,EAAY/B,KAAKH,MAAMkC,WAG3B,MAAMC,EAAgBhC,KAAKkB,YAAYlB,KAAKH,MAAMsB,QAElD,OACIxB,wBACIoC,UAAWA,EACXE,aAAenB,GAAUd,KAAKa,aAAY,EAAMC,GAChDoB,aAAepB,GAAUd,KAAKa,aAAY,EAAOC,IAEhDd,KAAKH,MAAMyB,eACR3B,gBAACwC,WACGC,QACIpC,KAAKH,MAAMwC,SACVrC,KAAKH,MAAMuB,MACRG,YAAUC,eAAexB,KAAKH,MAAMuB,KAAMpB,KAAKH,MAAMsB,SAG7DxB,4BAAOqC,IAGXA,IApGdtC,EACY4C,mBADZ5C,EAEY6C,oBAwGlB7C,EAAK4C,YAAc,OAEnB5C,EAAK6C,aAAe,CAChBd,eAAe,EACfJ,oBAAoB,EACpBC,gBAAgB,EAChBf,SAAS,EACTY,OAAQ,CACJqB,OAAQ,KACRC,WAAY,IACZC,YAAa,IACbC,cAAe,IACfC,WAAY"}
+{"version":3,"file":"time.js","sources":["../../../src/components/time/time.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Tooltip } from '../../new-components/tooltip'\nimport { TimeUtils, TimeConfig } from './time-utils'\n\nimport './time.less'\n\nconst DELAY = 60000\n\ntype Props = {\n    /** UNIX timestamp of the time to display. */\n    time?: number\n    /** Configuration for localization. */\n    config?: TimeConfig\n    /** Additional css class applied to the time element. */\n    className?: string\n    tooltipOnHover?: boolean\n    /** Refresh the component every DELAY seconds. */\n    refresh?: boolean\n    /** If you don't want to use the default time format on the tooltip use this prop to supply a custom text */\n    tooltip?: React.ReactNode\n    /** When hovering over time it expands to short absolute version. */\n    expandOnHover?: boolean\n    /** When hovering over time it expands to the full absolute version. */\n    expandFullyOnHover?: boolean\n}\n\ntype State = {\n    hovered: boolean\n    mouseX?: number\n    mouseY?: number\n}\n\nclass Time extends React.Component<Props, State> {\n    public static displayName: string\n    public static defaultProps: Props\n\n    constructor(props: Props) {\n        super(props)\n        this.refreshInterval = undefined\n\n        this.state = {\n            hovered: false,\n            mouseX: undefined,\n            mouseY: undefined,\n        }\n    }\n\n    componentDidMount() {\n        if (this.props.refresh) {\n            this._refresh()\n        }\n    }\n\n    componentDidUpdate(prevProps: Props) {\n        if (!prevProps.refresh && this.props.refresh) {\n            this._refresh()\n        }\n\n        if (prevProps.refresh && !this.props.refresh) {\n            if (this.refreshInterval) {\n                clearTimeout(this.refreshInterval)\n            }\n        }\n    }\n\n    componentWillUnmount() {\n        if (this.refreshInterval) {\n            clearTimeout(this.refreshInterval)\n        }\n    }\n\n    refreshInterval?: ReturnType<typeof setTimeout>\n\n    _setHovered(hovered: boolean, event: React.MouseEvent) {\n        const { mouseX, mouseY } = this.state\n        const { clientX, clientY } = event\n        if (clientX !== mouseX || clientY !== mouseY) {\n            // mouse has moved\n            this.setState(() => ({\n                hovered,\n                mouseX: clientX,\n                mouseY: clientY,\n            }))\n        }\n    }\n\n    _renderTime(config: Props['config']) {\n        if (!this.props.time) {\n            return\n        }\n        if (this.state.hovered) {\n            if (this.props.expandFullyOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTimeLong(this.props.time, config)\n            }\n            if (this.props.expandOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTime(this.props.time, config)\n            }\n        }\n        return TimeUtils.timeAgo(this.props.time, config)\n    }\n\n    _refresh() {\n        this.refreshInterval = setInterval(() => {\n            this.forceUpdate()\n        }, DELAY)\n    }\n\n    render() {\n        let className = 'reactist_time'\n        if (this.props.className) {\n            className = this.props.className\n        }\n\n        const timeComponent = this._renderTime(this.props.config)\n\n        return (\n            <time\n                className={className}\n                onMouseEnter={(event) => this._setHovered(true, event)}\n                onMouseLeave={(event) => this._setHovered(false, event)}\n            >\n                {this.props.tooltipOnHover ? (\n                    <Tooltip\n                        content={\n                            this.props.tooltip ||\n                            (this.props.time &&\n                                TimeUtils.formatTimeLong(this.props.time, this.props.config))\n                        }\n                    >\n                        <span>{timeComponent}</span>\n                    </Tooltip>\n                ) : (\n                    timeComponent\n                )}\n            </time>\n        )\n    }\n}\nTime.displayName = 'Time'\n\nTime.defaultProps = {\n    expandOnHover: false,\n    expandFullyOnHover: false,\n    tooltipOnHover: false,\n    refresh: true,\n    config: {\n        locale: 'en',\n        daysSuffix: 'd',\n        hoursSuffix: 'h',\n        minutesSuffix: 'm',\n        momentsAgo: 'moments ago',\n    },\n}\n\nexport { Time }\n"],"names":["Time","React","constructor","props","super","refreshInterval","this","undefined","state","hovered","mouseX","mouseY","componentDidMount","refresh","_refresh","componentDidUpdate","prevProps","clearTimeout","componentWillUnmount","_setHovered","event","clientX","clientY","setState","_renderTime","config","time","expandFullyOnHover","tooltipOnHover","TimeUtils","formatTimeLong","expandOnHover","formatTime","timeAgo","setInterval","forceUpdate","render","className","timeComponent","onMouseEnter","onMouseLeave","Tooltip","content","tooltip","displayName","defaultProps","locale","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo"],"mappings":"6KAiCA,MAAMA,UAAaC,YAIfC,YAAYC,GACRC,MAAMD,QAkCVE,uBAjCIC,KAAKD,qBAAkBE,EAEvBD,KAAKE,MAAQ,CACTC,SAAS,EACTC,YAAQH,EACRI,YAAQJ,GAIhBK,oBACQN,KAAKH,MAAMU,SACXP,KAAKQ,WAIbC,mBAAmBC,IACVA,EAAUH,SAAWP,KAAKH,MAAMU,SACjCP,KAAKQ,WAGLE,EAAUH,UAAYP,KAAKH,MAAMU,SAC7BP,KAAKD,iBACLY,aAAaX,KAAKD,iBAK9Ba,uBACQZ,KAAKD,iBACLY,aAAaX,KAAKD,iBAM1Bc,YAAYV,EAAkBW,GAC1B,MAAMV,OAAEA,EAAFC,OAAUA,GAAWL,KAAKE,OAC1Ba,QAAEA,EAAFC,QAAWA,GAAYF,EACzBC,IAAYX,GAAUY,IAAYX,GAElCL,KAAKiB,SAAS,MACVd,QAAAA,EACAC,OAAQW,EACRV,OAAQW,KAKpBE,YAAYC,GACR,GAAKnB,KAAKH,MAAMuB,KAAhB,CAGA,GAAIpB,KAAKE,MAAMC,QAAS,CACpB,GAAIH,KAAKH,MAAMwB,qBAAuBrB,KAAKH,MAAMyB,eAC7C,OAAOC,YAAUC,eAAexB,KAAKH,MAAMuB,KAAMD,GAErD,GAAInB,KAAKH,MAAM4B,gBAAkBzB,KAAKH,MAAMyB,eACxC,OAAOC,YAAUG,WAAW1B,KAAKH,MAAMuB,KAAMD,GAGrD,OAAOI,YAAUI,QAAQ3B,KAAKH,MAAMuB,KAAMD,IAG9CX,WACIR,KAAKD,gBAAkB6B,YAAY,KAC/B5B,KAAK6B,eAjGH,KAqGVC,SACI,IAAIC,EAAY,gBACZ/B,KAAKH,MAAMkC,YACXA,EAAY/B,KAAKH,MAAMkC,WAG3B,MAAMC,EAAgBhC,KAAKkB,YAAYlB,KAAKH,MAAMsB,QAElD,OACIxB,wBACIoC,UAAWA,EACXE,aAAenB,GAAUd,KAAKa,aAAY,EAAMC,GAChDoB,aAAepB,GAAUd,KAAKa,aAAY,EAAOC,IAEhDd,KAAKH,MAAMyB,eACR3B,gBAACwC,WACGC,QACIpC,KAAKH,MAAMwC,SACVrC,KAAKH,MAAMuB,MACRG,YAAUC,eAAexB,KAAKH,MAAMuB,KAAMpB,KAAKH,MAAMsB,SAG7DxB,4BAAOqC,IAGXA,IApGdtC,EACY4C,mBADZ5C,EAEY6C,oBAwGlB7C,EAAK4C,YAAc,OAEnB5C,EAAK6C,aAAe,CAChBd,eAAe,EACfJ,oBAAoB,EACpBC,gBAAgB,EAChBf,SAAS,EACTY,OAAQ,CACJqB,OAAQ,KACRC,WAAY,IACZC,YAAa,IACbC,cAAe,IACfC,WAAY"}

package/lib/index.d.ts

@@ -25,14 +25,13 @@ export * from './new-components/avatar';
 export * from './new-components/badge';
 export * from './new-components/modal';
 export * from './new-components/tabs';
+export * from './new-components/tooltip';
 export * from './hooks/use-previous';
 export { default as ColorPicker, COLORS } from './components/color-picker';
 export { default as KeyboardShortcut } from './components/keyboard-shortcut';
 export { default as KeyCapturer, SUPPORTED_KEYS } from './components/key-capturer';
 export { default as ProgressBar } from './components/progress-bar';
 export { default as Time } from './components/time';
-export { Tooltip } from './components/tooltip';
-export type { TooltipProps } from './components/tooltip';
 export * from './components/menu';
 export { default as DeprecatedButton } from './components/deprecated-button';
 export { default as DeprecatedDropdown } from './components/deprecated-dropdown';