@doist/reactist 9.2.0-beta.7 → 10.0.0-beta.10

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

@@ -1,27 +1,32 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement } from 'react';
-import { forwardRefWithAs } from '../type-helpers.js';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
 import { getClassNames } from '../responsive-props.js';
 import { Box } from '../box/box.js';
 import styles from './text.module.css.js';
 
-var Text = /*#__PURE__*/forwardRefWithAs(function Text(_ref, ref) {
-  var _ref$component = _ref.component,
-      component = _ref$component === void 0 ? 'span' : _ref$component,
+var Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
+  var as = _ref.as,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'standard' : _ref$size,
+      size = _ref$size === void 0 ? 'body' : _ref$size,
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? 'regular' : _ref$weight,
       _ref$tone = _ref.tone,
       tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
+      align = _ref.align,
       children = _ref.children,
       lineClamp = _ref.lineClamp,
-      rest = _objectWithoutPropertiesLoose(_ref, ["component", "size", "weight", "tone", "children", "lineClamp"]);
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"]);
 
-  var lineClampMultipleLines = typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1;
-  return /*#__PURE__*/createElement(Box, Object.assign({}, rest, {
-    component: component,
-    className: [styles.text, size !== 'standard' ? getClassNames(styles, 'size', size) : null, weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null, tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null, lineClampMultipleLines ? styles.lineClamp : null, lineClamp ? getClassNames(styles, 'line-clamp', lineClamp.toString()) : null],
+  var lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp !== null && lineClamp !== void 0 ? lineClamp : 1) > 1;
+  return /*#__PURE__*/createElement(Box, Object.assign({}, props, {
+    as: as,
+    className: [exceptionallySetClassName, styles.text, size !== 'body' ? getClassNames(styles, 'size', size) : null, weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null, tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null, lineClampMultipleLines ? styles.lineClampMultipleLines : null, lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null],
+    textAlign: align,
+    // Prevents emojis from being cut-off
+    // See https://github.com/Doist/reactist/pull/528
+    paddingRight: lineClamp ? 'xsmall' : undefined,
     ref: ref
   }), children);
 });

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

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../src/new-components/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\n\nimport { ComponentTypes, forwardRefWithAs } from '../type-helpers'\nimport type { Tone } from '../common-types'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n    component?: ComponentTypes\n    children: React.ReactNode\n    size?: 'xsmall' | 'small' | 'standard' | 'large' | 'xlarge'\n    weight?: 'regular' | 'medium' | 'strong'\n    tone?: Tone\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n}\n\nconst Text = forwardRefWithAs<TextProps>(function Text(\n    {\n        component = 'span',\n        size = 'standard',\n        weight = 'regular',\n        tone = 'normal',\n        children,\n        lineClamp,\n        ...rest\n    },\n    ref,\n) {\n    const lineClampMultipleLines =\n        typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1\n\n    return (\n        <Box\n            {...rest}\n            component={component}\n            className={[\n                styles.text,\n                size !== 'standard' ? getClassNames(styles, 'size', size) : null,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                lineClampMultipleLines ? styles.lineClamp : null,\n                lineClamp ? getClassNames(styles, 'line-clamp', lineClamp.toString()) : null,\n            ]}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["Text","forwardRefWithAs","ref","component","size","weight","tone","children","lineClamp","rest","lineClampMultipleLines","parseInt","React","Box","className","styles","text","getClassNames","toString"],"mappings":";;;;;;;IAkBMA,IAAI,gBAAGC,gBAAgB,CAAY,SAASD,IAAT,OAUrCE,GAVqC;4BAEjCC;MAAAA,wCAAY;uBACZC;MAAAA,8BAAO;yBACPC;MAAAA,kCAAS;uBACTC;MAAAA,8BAAO;MACPC,gBAAAA;MACAC,iBAAAA;MACGC;;AAIP,MAAMC,sBAAsB,GACxB,OAAOF,SAAP,KAAqB,QAArB,GAAgCG,QAAQ,CAACH,SAAD,EAAY,EAAZ,CAAR,GAA0B,CAA1D,GAA8D,CAACA,SAAS,IAAI,CAAd,IAAmB,CADrF;AAGA,sBACII,aAAA,CAACC,GAAD,oBACQJ;AACJN,IAAAA,SAAS,EAAEA;AACXW,IAAAA,SAAS,EAAE,CACPC,MAAM,CAACC,IADA,EAEPZ,IAAI,KAAK,UAAT,GAAsBa,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBX,IAAjB,CAAnC,GAA4D,IAFrD,EAGPC,MAAM,KAAK,SAAX,GAAuBY,aAAa,CAACF,MAAD,EAAS,QAAT,EAAmBV,MAAnB,CAApC,GAAiE,IAH1D,EAIPC,IAAI,KAAK,QAAT,GAAoBW,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBT,IAAjB,CAAjC,GAA0D,IAJnD,EAKPI,sBAAsB,GAAGK,MAAM,CAACP,SAAV,GAAsB,IALrC,EAMPA,SAAS,GAAGS,aAAa,CAACF,MAAD,EAAS,YAAT,EAAuBP,SAAS,CAACU,QAAV,EAAvB,CAAhB,GAA+D,IANjE;AAQXhB,IAAAA,GAAG,EAAEA;IAXT,EAaKK,QAbL,CADJ;AAiBH,CAhC4B;;;;"}
+{"version":3,"file":"text.js","sources":["../../../src/new-components/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../../utils/polymorphism'\n\nimport type { Tone } from '../common-types'\nimport type { BoxProps } from '../box'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n    children: React.ReactNode\n    /**\n     * The size of the text.\n     *\n     * The supported values, from smaller size to larger size, are:\n     * 'caption', 'copy', 'body', and 'subtitle'\n     *\n     * @default 'body'\n     */\n    size?: 'caption' | 'copy' | 'body' | 'subtitle'\n    /**\n     * The weight of the text font.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'semibold' | 'bold'\n    /**\n     * The tone (semantic color) of the text.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n    /**\n     * Used to truncate the text to a given number of lines.\n     *\n     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n     * truncated. If the text fits without it being truncated, no ellipsis is added.\n     *\n     * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n     *\n     * @default undefined\n     */\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n    /**\n     * How to align the text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n    {\n        as,\n        size = 'body',\n        weight = 'regular',\n        tone = 'normal',\n        align,\n        children,\n        lineClamp,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const lineClampMultipleLines =\n        typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n    return (\n        <Box\n            {...props}\n            as={as}\n            className={[\n                exceptionallySetClassName,\n                styles.text,\n                size !== 'body' ? getClassNames(styles, 'size', size) : null,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n                lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n            ]}\n            textAlign={align}\n            // Prevents emojis from being cut-off\n            // See https://github.com/Doist/reactist/pull/528\n            paddingRight={lineClamp ? 'xsmall' : undefined}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["Text","polymorphicComponent","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","lineClampMultipleLines","Number","React","Box","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":";;;;;;;IAoDMA,IAAI,gBAAGC,oBAAoB,CAAmB,SAASD,IAAT,OAYhDE,GAZgD;MAE5CC,UAAAA;uBACAC;MAAAA,8BAAO;yBACPC;MAAAA,kCAAS;uBACTC;MAAAA,8BAAO;MACPC,aAAAA;MACAC,gBAAAA;MACAC,iBAAAA;MACAC,iCAAAA;MACGC;;AAIP,MAAMC,sBAAsB,GACxB,OAAOH,SAAP,KAAqB,QAArB,GAAgCI,MAAM,CAACJ,SAAD,CAAN,GAAoB,CAApD,GAAwD,CAACA,SAAD,aAACA,SAAD,cAACA,SAAD,GAAc,CAAd,IAAmB,CAD/E;AAGA,sBACIK,aAAA,CAACC,GAAD,oBACQJ;AACJR,IAAAA,EAAE,EAAEA;AACJa,IAAAA,SAAS,EAAE,CACPN,yBADO,EAEPO,MAAM,CAACC,IAFA,EAGPd,IAAI,KAAK,MAAT,GAAkBe,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBb,IAAjB,CAA/B,GAAwD,IAHjD,EAIPC,MAAM,KAAK,SAAX,GAAuBc,aAAa,CAACF,MAAD,EAAS,QAAT,EAAmBZ,MAAnB,CAApC,GAAiE,IAJ1D,EAKPC,IAAI,KAAK,QAAT,GAAoBa,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBX,IAAjB,CAAjC,GAA0D,IALnD,EAMPM,sBAAsB,GAAGK,MAAM,CAACL,sBAAV,GAAmC,IANlD,EAOPH,SAAS,GAAGU,aAAa,CAACF,MAAD,EAAS,WAAT,EAAsBR,SAAS,CAACW,QAAV,EAAtB,CAAhB,GAA8D,IAPhE;AASXC,IAAAA,SAAS,EAAEd;AACX;AACA;AACAe,IAAAA,YAAY,EAAEb,SAAS,GAAG,QAAH,GAAcc;AACrCrB,IAAAA,GAAG,EAAEA;IAhBT,EAkBKM,QAlBL,CADJ;AAsBH,CAvCgC;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_a9637dd3 = {"text":"e25b6eac","size-xsmall":"_7be564c9","size-small":"_0b65f3be","size-large":"_148c266b","size-xlarge":"efa6a189","weight-medium":"a1ce91c1","weight-strong":"_615a6cf6","tone-secondary":"e1348c0a","tone-danger":"f2471c06","line-clamp-1":"_8f257fa0","lineClamp":"b219e836","line-clamp-2":"d1379189","line-clamp-3":"edc9a040","line-clamp-4":"d463b64b","line-clamp-5":"_4feee537"};
+var modules_a9637dd3 = {"text":"c12d1277","size-caption":"c88e1204","size-copy":"_426d67ec","size-subtitle":"f978d6c7","weight-semibold":"_0c31eccd","weight-bold":"aba17bdd","tone-secondary":"_2767b43d","tone-danger":"e8ae531e","lineClampMultipleLines":"dc839422","lineClamp-1":"e2d23135","lineClamp-2":"_7c778b7e","lineClamp-3":"_5ff41166","lineClamp-4":"b7a4998e","lineClamp-5":"_6a7f8803"};
 
 export default modules_a9637dd3;
 //# sourceMappingURL=text.module.css.js.map

package/es/new-components/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = BaseFieldProps<HTMLTextAreaElement>\n\nfunction TextArea({\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    maxWidth,\n    ...props\n}: TextAreaProps) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            className={styles.container}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box width=\"full\">\n                    <textarea {...props} {...extraProps} />\n                </Box>\n            )}\n        </BaseField>\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","props","React","BaseField","className","styles","container","extraProps","Box","width"],"mappings":";;;;;;AAOA,SAASA,QAAT;MACIC,UAAAA;MACAC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,gBAAAA;MACGC;;AAEH,sBACIC,aAAA,CAACC,SAAD;AACIR,IAAAA,EAAE,EAAEA;AACJC,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNK,IAAAA,SAAS,EAAEC,MAAM,CAACC;AAClBN,IAAAA,QAAQ,EAAEA;GAPd,EASK,UAACO,UAAD;AAAA,wBACGL,aAAA,CAACM,GAAD;AAAKC,MAAAA,KAAK,EAAC;KAAX,eACIP,aAAA,WAAA,oBAAcD,OAAWM,WAAzB,CADJ,CADH;AAAA,GATL,CADJ;AAiBH;;;;"}
+{"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement>\n\nfunction TextArea({\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    maxWidth,\n    ...props\n}: TextAreaProps) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            className={styles.container}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box width=\"full\">\n                    <textarea {...props} {...extraProps} />\n                </Box>\n            )}\n        </BaseField>\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","props","React","BaseField","className","styles","container","extraProps","Box","width"],"mappings":";;;;;;AAOA,SAASA,QAAT;MACIC,UAAAA;MACAC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,gBAAAA;MACGC;;AAEH,sBACIC,aAAA,CAACC,SAAD;AACIR,IAAAA,EAAE,EAAEA;AACJC,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNK,IAAAA,SAAS,EAAEC,MAAM,CAACC;AAClBN,IAAAA,QAAQ,EAAEA;GAPd,EASK,UAACO,UAAD;AAAA,wBACGL,aAAA,CAACM,GAAD;AAAKC,MAAAA,KAAK,EAAC;KAAX,eACIP,aAAA,WAAA,oBAAcD,OAAWM,WAAzB,CADJ,CADH;AAAA,GATL,CADJ;AAiBH;;;;"}

package/es/new-components/text-area/text-area.module.css.js

@@ -1,4 +1,4 @@
-var modules_2728c236 = {"container":"b2fe9429"};
+var modules_2728c236 = {"container":"_5a579f96"};
 
 export default modules_2728c236;
 //# sourceMappingURL=text-area.module.css.js.map

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

@@ -14,7 +14,8 @@ var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
       type = _ref$type === void 0 ? 'text' : _ref$type,
       maxWidth = _ref.maxWidth,
       hidden = _ref.hidden,
-      props = _objectWithoutPropertiesLoose(_ref, ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "type", "maxWidth", "hidden"]);
+      ariaDescribedBy = _ref['aria-describedby'],
+      props = _objectWithoutPropertiesLoose(_ref, ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "type", "maxWidth", "hidden", "aria-describedby"]);
 
   return /*#__PURE__*/createElement(BaseField, {
     id: id,
@@ -23,7 +24,8 @@ var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
     maxWidth: maxWidth,
-    hidden: hidden
+    hidden: hidden,
+    "aria-describedby": ariaDescribedBy
   }, function (extraProps) {
     return /*#__PURE__*/createElement(Box, {
       className: styles.inputWrapper

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

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sources":["../../../src/new-components/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\n\ntype TextFieldProps = BaseFieldProps<HTMLInputElement>\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    { id, label, secondaryLabel, auxiliaryLabel, hint, type = 'text', maxWidth, hidden, ...props },\n    ref,\n) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n        >\n            {(extraProps) => (\n                <Box className={styles.inputWrapper}>\n                    <input {...props} {...extraProps} type={type} ref={ref} />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps }\n"],"names":["TextField","React","ref","id","label","secondaryLabel","auxiliaryLabel","hint","type","maxWidth","hidden","props","BaseField","extraProps","Box","className","styles","inputWrapper"],"mappings":";;;;;;IAOMA,SAAS,gBAAGC,UAAA,CAAmD,SAASD,SAAT,OAEjEE,GAFiE;MAC/DC,UAAAA;MAAIC,aAAAA;MAAOC,sBAAAA;MAAgBC,sBAAAA;MAAgBC,YAAAA;uBAAMC;MAAAA,8BAAO;MAAQC,gBAAAA;MAAUC,cAAAA;MAAWC;;AAGvF,sBACIV,aAAA,CAACW,SAAD;AACIT,IAAAA,EAAE,EAAEA;AACJC,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNE,IAAAA,QAAQ,EAAEA;AACVC,IAAAA,MAAM,EAAEA;GAPZ,EASK,UAACG,UAAD;AAAA,wBACGZ,aAAA,CAACa,GAAD;AAAKC,MAAAA,SAAS,EAAEC,MAAM,CAACC;KAAvB,eACIhB,aAAA,QAAA,oBAAWU,OAAWE;AAAYL,MAAAA,IAAI,EAAEA;AAAMN,MAAAA,GAAG,EAAEA;MAAnD,CADJ,CADH;AAAA,GATL,CADJ;AAiBH,CArBiB;;;;"}
+{"version":3,"file":"text-field.js","sources":["../../../src/new-components/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ntype TextFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type'> & {\n    type?: TextFieldType\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        type = 'text',\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box className={styles.inputWrapper}>\n                    <input {...props} {...extraProps} type={type} ref={ref} />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["TextField","React","ref","id","label","secondaryLabel","auxiliaryLabel","hint","type","maxWidth","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","inputWrapper"],"mappings":";;;;;;IAYMA,SAAS,gBAAGC,UAAA,CAAmD,SAASD,SAAT,OAajEE,GAbiE;MAE7DC,UAAAA;MACAC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;uBACAC;MAAAA,8BAAO;MACPC,gBAAAA;MACAC,cAAAA;MACoBC,uBAApB;MACGC;;AAIP,sBACIX,aAAA,CAACY,SAAD;AACIV,IAAAA,EAAE,EAAEA;AACJC,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNE,IAAAA,QAAQ,EAAEA;AACVC,IAAAA,MAAM,EAAEA;wBACUC;GARtB,EAUK,UAACG,UAAD;AAAA,wBACGb,aAAA,CAACc,GAAD;AAAKC,MAAAA,SAAS,EAAEC,MAAM,CAACC;KAAvB,eACIjB,aAAA,QAAA,oBAAWW,OAAWE;AAAYN,MAAAA,IAAI,EAAEA;AAAMN,MAAAA,GAAG,EAAEA;MAAnD,CADJ,CADH;AAAA,GAVL,CADJ;AAkBH,CAjCiB;;;;"}

package/es/new-components/text-field/text-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_aaf25250 = {"inputWrapper":"_509cf6b5"};
+var modules_aaf25250 = {"inputWrapper":"dd9ffeab"};
 
 export default modules_aaf25250;
 //# sourceMappingURL=text-field.module.css.js.map

package/es/new-components/text-link/text-link.js

@@ -1,20 +1,21 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement } from 'react';
-import { forwardRefWithAs } from '../type-helpers.js';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
 import { Box } from '../box/box.js';
 import styles from './text-link.module.css.js';
 
-var TextLink = /*#__PURE__*/forwardRefWithAs(function TextLink(_ref, ref) {
-  var _ref$component = _ref.component,
-      component = _ref$component === void 0 ? 'a' : _ref$component,
+var TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref) {
+  var _ref$as = _ref.as,
+      as = _ref$as === void 0 ? 'a' : _ref$as,
       _ref$openInNewTab = _ref.openInNewTab,
       openInNewTab = _ref$openInNewTab === void 0 ? false : _ref$openInNewTab,
-      props = _objectWithoutPropertiesLoose(_ref, ["component", "tone", "openInNewTab"]);
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "openInNewTab", "exceptionallySetClassName"]);
 
   return /*#__PURE__*/createElement(Box, Object.assign({}, props, {
-    component: component,
+    as: as,
     display: "inline",
-    className: styles.container,
+    className: [exceptionallySetClassName, styles.container],
     ref: ref,
     target: openInNewTab ? '_blank' : undefined,
     rel: openInNewTab ? 'noopener noreferrer' : undefined

package/es/new-components/text-link/text-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-link.js","sources":["../../../src/new-components/text-link/text-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { forwardRefWithAs } from '../type-helpers'\nimport styles from './text-link.module.css'\nimport type { OpenInNewTab } from '../common-types'\n\ntype TextLinkProps = OpenInNewTab\n\nconst TextLink = forwardRefWithAs<TextLinkProps>(function TextLink(\n    { component = 'a', tone = 'normal', openInNewTab = false, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            component={component}\n            display=\"inline\"\n            className={styles.container}\n            ref={ref}\n            target={openInNewTab ? '_blank' : undefined}\n            rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        />\n    )\n})\n\nexport { TextLink }\nexport type { TextLinkProps }\n"],"names":["TextLink","forwardRefWithAs","ref","component","openInNewTab","props","React","Box","display","className","styles","container","target","undefined","rel"],"mappings":";;;;;;IAQMA,QAAQ,gBAAGC,gBAAgB,CAAgB,SAASD,QAAT,OAE7CE,GAF6C;4BAC3CC;MAAAA,wCAAY;+BAAsBC;MAAAA,8CAAe;MAAUC;;AAG7D,sBACIC,aAAA,CAACC,GAAD,oBACQF;AACJF,IAAAA,SAAS,EAAEA;AACXK,IAAAA,OAAO,EAAC;AACRC,IAAAA,SAAS,EAAEC,MAAM,CAACC;AAClBT,IAAAA,GAAG,EAAEA;AACLU,IAAAA,MAAM,EAAER,YAAY,GAAG,QAAH,GAAcS;AAClCC,IAAAA,GAAG,EAAEV,YAAY,GAAG,qBAAH,GAA2BS;IAPhD,CADJ;AAWH,CAfgC;;;;"}
+{"version":3,"file":"text-link.js","sources":["../../../src/new-components/text-link/text-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport styles from './text-link.module.css'\nimport type { OpenInNewTab } from '../common-types'\n\ntype TextLinkProps = OpenInNewTab\n\nconst TextLink = polymorphicComponent<'a', TextLinkProps>(function TextLink(\n    { as = 'a', openInNewTab = false, exceptionallySetClassName, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            as={as}\n            display=\"inline\"\n            className={[exceptionallySetClassName, styles.container]}\n            ref={ref}\n            target={openInNewTab ? '_blank' : undefined}\n            rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        />\n    )\n})\n\nexport { TextLink }\nexport type { TextLinkProps }\n"],"names":["TextLink","polymorphicComponent","ref","as","openInNewTab","exceptionallySetClassName","props","React","Box","display","className","styles","container","target","undefined","rel"],"mappings":";;;;;;IAQMA,QAAQ,gBAAGC,oBAAoB,CAAqB,SAASD,QAAT,OAEtDE,GAFsD;qBACpDC;MAAAA,0BAAK;+BAAKC;MAAAA,8CAAe;MAAOC,iCAAAA;MAA8BC;;AAGhE,sBACIC,aAAA,CAACC,GAAD,oBACQF;AACJH,IAAAA,EAAE,EAAEA;AACJM,IAAAA,OAAO,EAAC;AACRC,IAAAA,SAAS,EAAE,CAACL,yBAAD,EAA4BM,MAAM,CAACC,SAAnC;AACXV,IAAAA,GAAG,EAAEA;AACLW,IAAAA,MAAM,EAAET,YAAY,GAAG,QAAH,GAAcU;AAClCC,IAAAA,GAAG,EAAEX,YAAY,GAAG,qBAAH,GAA2BU;IAPhD,CADJ;AAWH,CAfoC;;;;"}

package/es/utils/polymorphism.js

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a
+ * convenience over merely using React.forwardRef directly, and then manually forcing the resulting
+ * value to be typed using `as PolymorphicComponent<…>`.
+ *
+ * @see PolymorphicComponent for details about what this type does
+ */
+
+function polymorphicComponent(render) {
+  return /*#__PURE__*/forwardRef(render);
+}
+
+export { polymorphicComponent };
+//# sourceMappingURL=polymorphism.js.map

package/es/utils/polymorphism.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react'\n\ntype Merge<P1, P2> = Omit<P1, keyof P2> & P2\n\ntype EmptyObject = {\n    [K in any]: never\n}\n\ntype ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName'\n\ntype ObfuscatedClassName = {\n    /**\n     * Used internally to set the `className` prop of the main container element for this component.\n     *\n     * Aside from the different name, the prop behaves the same as the native `className`. The only\n     * reason for the name change is to discourage applying custom CSS to the design system\n     * components, which are supposed to _eventually_ provide all the styling features we may need.\n     *\n     * This prop is meant to be used only in certain circumstances, when you really need a escape\n     * hatch to apply custom styles to a component. Before reaching for this feature, try harder to\n     * see if you can solve your needs with what the design system provides.\n     *\n     * For instance, instead of applying layout-related styles to a non-layout component, consider\n     * wrapping it inside a layout component.\n     *\n     * @see PolymorphicComponent\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This can be customized via the second generic parameter, as there are cases where it may be\n * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the\n * `className` prop while not replacing it with the `exceptionallySetClassName` one.\n *\n * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop\n * @see PolymorphicComponent for details about this feature\n */\ntype WithObfuscatedClassName<\n    Props,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = 'className' extends keyof Props\n    ? ShouldObfuscateClassName extends 'obfuscateClassName'\n        ? Omit<Props, 'className'> & ObfuscatedClassName\n        : ShouldObfuscateClassName extends 'omitClassName'\n        ? Omit<Props, 'className'>\n        : ShouldObfuscateClassName extends 'keepClassName'\n        ? Props\n        : never\n    : Props\n\ntype PolymorphicProp<ComponentType extends React.ElementType> = {\n    /**\n     * Used to instruct this component what React element to render as. It can be both a string\n     * representing a HTML tag name, or a React component.\n     *\n     * When using this prop, the component you apply it to will also recognize in its props types\n     * all the props from the component or HTML element you are rendering it as.\n     *\n     * Some uses for this feature:\n     *\n     * - Using some of our layout components, while at the same time being able to set them to use\n     *   semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).\n     * - Using a design system link component, but have it internally use a client-side router link\n     *   implemented via a React component (e.g. react-router's `Link`).\n     *\n     * Keep in mind that not all compositions of this kind may work well, especially when composing\n     * with another React component and not with a HTML tag name. In particular, if the components\n     * being composed have opposing concerns of clashing features (e.g. they have contradicting\n     * styles applied to them) things may not go well. In those cases prefer to nest them instead.\n     *\n     * @see PolymorphicComponent\n     */\n    as?: ComponentType\n}\n\n/**\n * Given a component or element type, and a set of additional props, this builds the entire set of\n * props for a polymorphic component.\n *\n * It does three things:\n *\n * 1. it merges the element type props with the `OwnProps`\n * 2. it adds the `as` prop to allow for polymorphism to happen\n * 3. it optionally obfuscates or omits the className prop if present\n *\n * @see PolymorphicProp\n * @see WithObfuscatedClassName\n */\ntype PolymorphicComponentProps<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = Merge<\n    WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,\n    OwnProps & PolymorphicProp<ComponentType>\n>\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n    Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>\n\ntype ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]\n\ntype ElementByTagOrAny<\n    ComponentType extends React.ElementType\n> = ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any\n\n/**\n * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via\n * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.\n *\n * @see PolymorphicComponentProps\n * @see WithObfuscatedClassName\n */\ninterface ForwardRefFunction<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> {\n    (\n        props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>,\n        ref:\n            | ((instance: ElementByTagOrAny<ComponentType> | null) => void)\n            | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null>\n            | null,\n    ): React.ReactElement | null\n    displayName?: string\n}\n\n/**\n * A component that can customize the React element type that it renders (a.k.a. a polymorphic\n * component). This is achieved by passing a prop `as={ElementType}` or `as=\"html-tag-name\"`.\n *\n * It transparently takes care of forwarding refs, and properly sets the ref type depending on the\n * element type.\n *\n * ## Recognizing props based on the polymorphic type\n *\n * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop\n * component or HTML element is, the type system will automatically allow you to pass props that are\n * not explicitly defined by you, but that are recognized as valid props to be passed to the\n * component you are rendering.\n *\n * For instance, see the following example:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor=\"field-id\">Hello</Box>\n * ```\n *\n * The `htmlFor` prop is exclusive to label elements. If you omit the `as=\"label\"` prop, the type\n * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of\n * an incorrect type to such prop. For instance, the example below will issue a type error:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor={123}>Hello</Box>\n * ```\n *\n * ## Omitting or obfuscating the `className` prop\n *\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This is to discourage customizing design system components via custom styling, while still\n * leaving the door open to do it as an escape hatch when the design system still has shortcomings\n * with respect to the product designs we want to achieve.\n *\n * The cumbersome name also serves the purpose of aiding in easily searching for the places in the\n * code where this escape hatch was needed, in order to identify areas where the design system\n * components need to improve to better match our needs.\n *\n * This behaviour can be customized via an optional second generic argument that allows to disable\n * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop\n * name.\n */\ninterface PolymorphicComponent<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n> {\n    <TT extends React.ElementType = ComponentType>(\n        props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,\n    ): React.ReactElement | null\n    readonly $$typeof: symbol\n    defaultProps?: Partial<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    propTypes?: React.WeakValidationMap<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    displayName?: string\n}\n\n/**\n * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a\n * convenience over merely using React.forwardRef directly, and then manually forcing the resulting\n * value to be typed using `as PolymorphicComponent<…>`.\n *\n * @see PolymorphicComponent for details about what this type does\n */\nfunction polymorphicComponent<\n    ComponentType extends React.ElementType = 'div',\n    OwnProps = EmptyObject,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {\n    return React.forwardRef(render) as PolymorphicComponent<\n        ComponentType,\n        OwnProps,\n        ShouldObfuscateClassName\n    >\n}\n\nexport type { PolymorphicComponent, ObfuscatedClassName }\nexport { polymorphicComponent }\n"],"names":["polymorphicComponent","render","React"],"mappings":";;AAAA;AAqMA;;;;;;;;AAOA,SAASA,oBAAT,CAIEC,MAJF;AAKI,sBAAOC,UAAA,CAAiBD,MAAjB,CAAP;AAKH;;;;"}

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 r=e(require("react")),t=e(require("classnames")),o=require("../tooltip/tooltip.js"),l=require("../dropdown/index.js"),n=["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"],c=function(e){return"string"!=typeof e};function a(e){var o,a=e.color,s=void 0===a?0:a,u=e.small,m=e.onChange,p=e.colorList,d=void 0===p?n:p;return r.createElement(l.default.Box,{right:!0,className:"reactist_color_picker"},r.createElement(l.default.Trigger,null,(o=function(e,r){return e[r>=e.length?0:r]}(d,s),r.createElement("span",{className:t("color_trigger",{small:u}),style:{backgroundColor:c(o)?o.color:o}},r.createElement("span",{className:"color_trigger--inner_ring"})))),r.createElement(l.default.Body,null,r.createElement("div",{className:"color_options"},d.reduce((function(e,t,o){return e.push(r.createElement(i,{isActive:s>=d.length?0===o:o===s,key:o,color:c(t)?t.color:t,colorIndex:o,onClick:m,tooltip:c(t)?t.name:null})),e}),[]))))}function i(e){var t=e.colorIndex,l=e.onClick,n=e.tooltip,c=r.createElement("span",{className:"reactist color_item"+(e.isActive?" active":""),style:{backgroundColor:e.color},onClick:function(){return l&&l(t)}},r.createElement("span",{className:"color_item--inner_ring"}));return n?r.createElement(o.Tooltip,{content:n},c):c}a.displayName="ColorPicker",i.displayName="ColorItem",exports.COLORS=n,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 r=e(require("react")),t=e(require("classnames")),o=require("../tooltip/tooltip.js"),l=require("../dropdown/index.js"),n=["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"],c=function(e){return"string"!=typeof e};function i(e){var o,i=e.color,s=void 0===i?0:i,u=e.small,m=e.onChange,d=e.colorList,p=void 0===d?n:d;return r.createElement(l.default.Box,{right:!0,className:"reactist_color_picker"},r.createElement(l.default.Trigger,null,(o=function(e,r){return e[r>=e.length?0:r]}(p,s),r.createElement("span",{className:t("color_trigger",{small:u}),style:{backgroundColor:c(o)?o.color:o}},r.createElement("span",{className:"color_trigger--inner_ring"})))),r.createElement(l.default.Body,null,r.createElement("div",{className:"color_options"},p.reduce((function(e,t,o){return e.push(r.createElement(a,{isActive:s>=p.length?0===o:o===s,key:o,color:c(t)?t.color:t,colorIndex:o,onClick:m,tooltip:c(t)?t.name:null})),e}),[]))))}function a(e){var t=e.colorIndex,l=e.onClick,n=e.tooltip,c=r.createElement("span",{className:"reactist color_item"+(e.isActive?" active":""),style:{backgroundColor:e.color},onClick:function(){return null==l?void 0:l(t)}},r.createElement("span",{className:"color_item--inner_ring"}));return n?r.createElement(o.Tooltip,{content:n},c):c}i.displayName="ColorPicker",a.displayName="ColorItem",exports.COLORS=n,exports.ColorItem=a,exports.ColorPicker=i;
 //# 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 React from 'react'\nimport classnames from 'classnames'\n\nimport Dropdown from '../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): color is NamedColor => 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        <Dropdown.Box right className=\"reactist_color_picker\">\n            <Dropdown.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            </Dropdown.Trigger>\n            <Dropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce((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                    }, [] as React.ReactNode[])}\n                </div>\n            </Dropdown.Body>\n        </Dropdown.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            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => 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","backgroundColor","small","onChange","colorList","React","Dropdown","Box","right","className","Trigger","colorIndex","length","_getColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","item","Tooltip","content","displayName"],"mappings":"oQAUMA,EAAS,CACX,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAGEC,EAAgB,SAACC,SAAqE,iBAAVA,GAclF,SAASC,SAKiBC,MALHF,MAAAA,aAAQ,IAAGG,IAAAA,MAAOC,IAAAA,aAAUC,UAAAA,aAAYP,WAEvDQ,gBAACC,UAASC,KAAIC,SAAMC,UAAU,yBAC1BJ,gBAACC,UAASI,cAEIT,EAjBR,SAACG,EAAoCO,UAE5CP,EADOO,GAAcP,EAAUQ,OAAS,EAAID,GAgBXE,CAAUT,EAAWL,GAGzCM,wBACII,UAAWK,EAAW,gBAAiB,CAAEZ,MAAAA,IACzCa,MAAO,CACHd,gBAAiBH,EAAcG,GACzBA,EAAgBF,MAChBE,IAGVI,wBAAMI,UAAU,iCAKhCJ,gBAACC,UAASU,UACNX,uBAAKI,UAAU,iBACVL,EAAUa,QAAO,SAACC,EAAOC,EAAcC,UACpCF,EAAMG,KACFhB,gBAACiB,GACGC,SACIxB,GAASK,EAAUQ,OACI,IAAjBQ,EACAA,IAAiBrB,EAE3ByB,IAAKJ,EACLrB,MACID,EAAcqB,GAAgBA,EAAapB,MAAQoB,EAEvDR,WAAYS,EACZK,QAAStB,EACTuB,QAAS5B,EAAcqB,GAAgBA,EAAaQ,KAAO,QAG5DT,IACR,OAgBvB,SAASI,SAAmBX,IAAAA,WAAsBc,IAAAA,QAASC,IAAAA,QACjDE,EACFvB,wBACII,UAAW,yBAHiBc,SAGmB,UAAY,IAC3DR,MAAO,CAAEd,kBAJAF,OAKT0B,QAAS,kBAAMA,GAAWA,EAAQd,KAElCN,wBAAMI,UAAU,mCAIjBiB,EAAUrB,gBAACwB,WAAQC,QAASJ,GAAUE,GAAkBA,EArBnE5B,EAAY+B,YAAc,cAuB1BT,EAAUS,YAAc"}
+{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\nimport Dropdown from '../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): color is NamedColor => 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        <Dropdown.Box right className=\"reactist_color_picker\">\n            <Dropdown.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            </Dropdown.Trigger>\n            <Dropdown.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            </Dropdown.Body>\n        </Dropdown.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            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","backgroundColor","small","onChange","colorList","React","Dropdown","Box","right","className","Trigger","colorIndex","length","_getColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","item","Tooltip","content","displayName"],"mappings":"oQAUMA,EAAS,CACX,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAGEC,EAAgB,SAACC,SAAqE,iBAAVA,GAclF,SAASC,SAKiBC,MALHF,MAAAA,aAAQ,IAAGG,IAAAA,MAAOC,IAAAA,aAAUC,UAAAA,aAAYP,WAEvDQ,gBAACC,UAASC,KAAIC,SAAMC,UAAU,yBAC1BJ,gBAACC,UAASI,cAEIT,EAjBR,SAACG,EAAoCO,UAE5CP,EADOO,GAAcP,EAAUQ,OAAS,EAAID,GAgBXE,CAAUT,EAAWL,GAGzCM,wBACII,UAAWK,EAAW,gBAAiB,CAAEZ,MAAAA,IACzCa,MAAO,CACHd,gBAAiBH,EAAcG,GACzBA,EAAgBF,MAChBE,IAGVI,wBAAMI,UAAU,iCAKhCJ,gBAACC,UAASU,UACNX,uBAAKI,UAAU,iBACVL,EAAUa,QAA0B,SAACC,EAAOC,EAAcC,UACvDF,EAAMG,KACFhB,gBAACiB,GACGC,SACIxB,GAASK,EAAUQ,OACI,IAAjBQ,EACAA,IAAiBrB,EAE3ByB,IAAKJ,EACLrB,MACID,EAAcqB,GAAgBA,EAAapB,MAAQoB,EAEvDR,WAAYS,EACZK,QAAStB,EACTuB,QAAS5B,EAAcqB,GAAgBA,EAAaQ,KAAO,QAG5DT,IACR,OAgBvB,SAASI,SAAmBX,IAAAA,WAAsBc,IAAAA,QAASC,IAAAA,QACjDE,EACFvB,wBACII,UAAW,yBAHiBc,SAGmB,UAAY,IAC3DR,MAAO,CAAEd,kBAJAF,OAKT0B,QAAS,kBAAMA,MAAAA,SAAAA,EAAUd,KAEzBN,wBAAMI,UAAU,mCAIjBiB,EAAUrB,gBAACwB,WAAQC,QAASJ,GAAUE,GAAkBA,EArBnE5B,EAAY+B,YAAc,cAuB1BT,EAAUS,YAAc"}

package/lib/components/{button/button.d.ts → deprecated-button/deprecated-button.d.ts}

@@ -1,8 +1,11 @@
 import React from 'react';
-import './button.less';
+import './deprecated-button.less';
 declare type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+/** @deprecated */
 export declare type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link';
+/** @deprecated */
 export declare type ButtonSize = 'default' | 'small' | 'large';
+/** @deprecated */
 export declare type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {
     /**
      * Loading style. When true it disables the button, but it also adds a visual indication of
@@ -24,6 +27,9 @@ export declare type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {
      */
     tooltip?: React.ReactNode;
 };
+/**
+ * @deprecated
+ */
 declare const Button: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
     /**
      * Loading style. When true it disables the button, but it also adds a visual indication of

package/lib/components/{button/button.js → 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"),i=t(require("react")),o=t(require("classnames")),l=require("../tooltip/tooltip.js"),a=i.forwardRef((function(t,a){var r=t.type,n=void 0===r?"button":r,s=t.variant,u=t.size,d=void 0===u?"default":u,c=t.loading,p=void 0!==c&&c,b=t.disabled,f=void 0!==b&&b,v=t.tooltip,_=t.onClick,g=t.children,j=e.objectWithoutPropertiesLoose(t,["type","variant","size","loading","disabled","tooltip","onClick","children"]),m=o("reactist_button",s?"reactist_button--"+s:null,"default"!==d?"reactist_button--"+d:null,{"reactist_button--loading":p},j.className),y=i.createElement("button",Object.assign({},j,{ref:a,type:n,className:m,disabled:f||p,onClick:_}),g);return v?i.createElement(l.Tooltip,{content:v},y):y}));a.displayName="Button",a.defaultProps={size:"default",loading:!1,disabled:!1},exports.Button=a;
-//# sourceMappingURL=button.js.map
+"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"),i=t(require("react")),o=t(require("classnames")),a=require("../tooltip/tooltip.js"),l=i.forwardRef((function(t,l){var r=t.type,n=void 0===r?"button":r,s=t.variant,u=t.size,d=void 0===u?"default":u,c=t.loading,p=void 0!==c&&c,b=t.disabled,f=void 0!==b&&b,v=t.tooltip,_=t.onClick,g=t.children,j=e.objectWithoutPropertiesLoose(t,["type","variant","size","loading","disabled","tooltip","onClick","children"]),m=o("reactist_button",s?"reactist_button--"+s:null,"default"!==d?"reactist_button--"+d:null,{"reactist_button--loading":p},j.className),y=i.createElement("button",Object.assign({},j,{ref:l,type:n,className:m,"aria-disabled":f||p,onClick:f||p?void 0:_}),g);return v?i.createElement(a.Tooltip,{content:v},y):y}));l.displayName="Button",l.defaultProps={size:"default",loading:!1,disabled:!1},exports.Button=l;
+//# sourceMappingURL=deprecated-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"deprecated-button.js","sources":["../../../src/components/deprecated-button/deprecated-button.tsx"],"sourcesContent":["import 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","forwardRef","ref","type","variant","size","loading","disabled","tooltip","onClick","children","props","className","classNames","button","undefined","Tooltip","content","displayName","defaultProps"],"mappings":"2RA4CMA,EAASC,EAAMC,YAA2C,WAY5DC,WAVIC,KAAAA,aAAO,WACPC,IAAAA,YACAC,KAAAA,aAAO,gBACPC,QAAAA,oBACAC,SAAAA,gBACAC,IAAAA,QACAC,IAAAA,QACAC,IAAAA,SACGC,kHAIDC,EAAYC,EACd,kBACAT,sBAA8BA,EAAY,KACjC,YAATC,sBAAyCA,EAAS,KAClD,4BAA8BC,GAC9BK,EAAMC,WAGJE,EACFd,0CACQW,GACJT,IAAKA,EACLC,KAAMA,EACNS,UAAWA,kBACIL,GAAYD,EAC3BG,QAASF,GAAYD,OAAUS,EAAYN,IAE1CC,UAIFF,EAAUR,gBAACgB,WAAQC,QAAST,GAAUM,GAAoBA,KAGrEf,EAAOmB,YAAc,SAErBnB,EAAOoB,aAAe,CAClBd,KAAM,UACNC,SAAS,EACTC,UAAU"}

package/lib/components/deprecated-button/index.d.ts

@@ -0,0 +1,4 @@
+import { Button } from './deprecated-button';
+import type { ButtonProps, ButtonSize, ButtonVariant } from './deprecated-button';
+export type { ButtonProps, ButtonSize, ButtonVariant };
+export default Button;

package/lib/components/{loading → deprecated-button}/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./loading.js");exports.default=e.Loading;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./deprecated-button.js");exports.default=e.Button;
 //# sourceMappingURL=index.js.map

package/lib/components/{loading/loading.d.ts → deprecated-loading/deprecated-loading.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import './loading.less';
+import './deprecated-loading.less';
 declare type Props = {
     /** Additional css class that is applied to Loading. */
     className?: string;
@@ -11,6 +11,7 @@ declare type Props = {
     size?: string | number;
     'aria-label'?: string;
 };
+/** @deprecated */
 declare function Loading({ className, spinnerColor, bgColor, size, 'aria-label': ariaLabel, }: Props): JSX.Element;
 declare namespace Loading {
     var displayName: string;

package/lib/components/{loading/loading.js → deprecated-loading/deprecated-loading.js}

@@ -1,2 +1,2 @@
 "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var a=e(require("react")),l=e(require("classnames"));function t(e){var t=e.spinnerColor,i=void 0===t?"#3F82EF":t,r=e.bgColor,n=void 0===r?"#D9E6FB":r,o=e.size,s=void 0===o?24:o,c=e["aria-label"],d=void 0===c?"Loading":c;return a.createElement("div",{className:l("reactist_loading",e.className),"aria-label":d,"aria-live":"assertive",role:"alert"},a.createElement("span",{className:"reactist_loading--spinner"},a.createElement("svg",{width:s,height:s,viewBox:"0 0 24 24"},a.createElement("g",{fill:"none",fillRule:"nonzero"},a.createElement("path",{fill:i,d:"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"}),a.createElement("path",{fill:n,d:"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"})))))}t.displayName="Loading",exports.Loading=t;
-//# sourceMappingURL=loading.js.map
+//# sourceMappingURL=deprecated-loading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"deprecated-loading.js","sources":["../../../src/components/deprecated-loading/deprecated-loading.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './deprecated-loading.less'\n\ntype Props = {\n    /** Additional css class that is applied to Loading. */\n    className?: string\n    /** Hex code of the spinner color. */\n    spinnerColor?: string\n    /** Hex code of the background color. */\n    bgColor?: string\n    /** Circle diameter in pixels. */\n    size?: string | number\n\n    'aria-label'?: string\n}\n\n/** @deprecated */\nfunction Loading({\n    className,\n    spinnerColor = '#3F82EF',\n    bgColor = '#D9E6FB',\n    size = 24,\n    'aria-label': ariaLabel = 'Loading',\n}: Props) {\n    return (\n        <div\n            className={classNames('reactist_loading', className)}\n            aria-label={ariaLabel}\n            aria-live=\"assertive\"\n            role=\"alert\"\n        >\n            <span className=\"reactist_loading--spinner\">\n                <svg width={size} height={size} viewBox={'0 0 24 24'}>\n                    <g fill=\"none\" fillRule=\"nonzero\">\n                        <path\n                            fill={spinnerColor}\n                            d=\"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z\"\n                        />\n                        <path\n                            fill={bgColor}\n                            d=\"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z\"\n                        />\n                    </g>\n                </svg>\n            </span>\n        </div>\n    )\n}\n\nLoading.displayName = 'Loading'\n\nexport { Loading }\n"],"names":["Loading","spinnerColor","bgColor","size","ariaLabel","React","className","classNames","role","width","height","viewBox","fill","fillRule","d","displayName"],"mappings":"+LAmBA,SAASA,aAELC,aAAAA,aAAe,gBACfC,QAAAA,aAAU,gBACVC,KAAAA,aAAO,SACP,cAAcC,aAAY,mBAGtBC,uBACIC,UAAWC,EAAW,qBAR9BD,wBASoBF,cACF,YACVI,KAAK,SAELH,wBAAMC,UAAU,6BACZD,uBAAKI,MAAON,EAAMO,OAAQP,EAAMQ,QAAS,aACrCN,qBAAGO,KAAK,OAAOC,SAAS,WACpBR,wBACIO,KAAMX,EACNa,EAAE,iJAENT,wBACIO,KAAMV,EACNY,EAAE,kOAS9Bd,EAAQe,YAAc"}

package/lib/components/deprecated-loading/index.d.ts

@@ -0,0 +1 @@
+export { Loading as DeprecatedLoading } from './deprecated-loading';

package/lib/components/{modal/modal.d.ts → deprecated-modal/deprecated-modal.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import './modal.less';
+import './deprecated-modal.less';
 declare type Props = {
     /** Additional css class applied to the Modal.Box. */
     className?: string;
@@ -12,6 +12,7 @@ declare type Props = {
     /** Close the Modal when clicking on the overlay. */
     closeOnOverlayClick: boolean;
 };
+/** @deprecated */
 declare class Box extends React.Component<React.PropsWithChildren<Props>> {
     static displayName: string;
     static defaultProps: Props;
@@ -30,6 +31,7 @@ declare type HeaderProps = {
     /** Function that is called right before the Modal unmounts itself. */
     beforeClose?: () => void;
 };
+/** @deprecated */
 declare class Header extends React.Component<HeaderProps> {
     static displayName: string;
     static defaultProps: HeaderProps;
@@ -51,6 +53,7 @@ declare type BodyProps = {
      */
     showCloseIcon?: boolean;
 };
+/** @deprecated */
 declare class Body extends React.Component<BodyProps> {
     static displayName: string;
     static defaultProps: BodyProps;
@@ -68,11 +71,13 @@ declare type ActionChildrenProps = {
     close?: boolean;
     onClick?: () => void;
 };
+/** @deprecated */
 declare class Actions extends React.Component<ActionProps> {
     static displayName: string;
     _onClick(onClick: ActionChildrenProps['onClick']): void;
     render(): JSX.Element;
 }
+/** @deprecated */
 declare type Modal = {
     Box: Box;
     Header: Header;

package/lib/components/{modal/modal.js → deprecated-modal/deprecated-modal.js}

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),n=e(require("react")),o=e(require("classnames")),r=e(require("react-dom")),l=require("../icons/CloseIcon.svg.js"),a=function(e){function l(){var t;return(t=e.apply(this,arguments)||this)._closeModal=function(){var e=document.getElementById("modal_box");r.unmountComponentAtNode(e)},t._handleKeyDown=function(e){27===e.keyCode&&(t._closeModal(),e.preventDefault&&e.preventDefault())},t._handleOverlayClick=function(e){e.target instanceof Element&&("reactist-overlay"===e.target.id||"reactist-overlay-inner"===e.target.id)&&t._closeModal()},t}t.inheritsLoose(l,e);var a=l.prototype;return a.componentDidMount=function(){window.addEventListener("keydown",this._handleKeyDown)},a.componentWillUnmount=function(){window.removeEventListener("keydown",this._handleKeyDown)},a.render=function(){var e=this.props,t=e.style,r=e.children,l=e.closeOnOverlayClick,a=o("reactist_modal_box",{large:e.large,medium:e.medium},this.props.className);return n.createElement("div",{className:"reactist_overlay",id:"reactist-overlay",onClick:l?this._handleOverlayClick:void 0},n.createElement("div",{className:"reactist_overlay_inner",id:"reactist-overlay-inner"},n.createElement("div",{style:t,className:a},r)))},l}(n.Component);a.displayName="Modal.Box",a.defaultProps={large:!1,closeOnOverlayClick:!1};var s=function(e){function o(){return e.apply(this,arguments)||this}t.inheritsLoose(o,e);var a=o.prototype;return a._closeModal=function(e){e.preventDefault(),"function"==typeof this.props.beforeClose&&this.props.beforeClose();var t=document.getElementById("modal_box");r.unmountComponentAtNode(t)},a.render=function(){return n.createElement("div",{className:"reactist_modal_box__header"},n.createElement("p",null,this.props.title&&n.createElement("span",{className:"title"},this.props.title),this.props.subtitle&&n.createElement("span",{className:"subtitle"},this.props.subtitle),this.props.children),n.createElement("a",{className:"close",onClick:this._closeModal.bind(this),href:"#"},n.createElement(l.default,null)))},o}(n.Component);s.displayName="Modal.Header";var i=function(e){function a(){return e.apply(this,arguments)||this}t.inheritsLoose(a,e);var s=a.prototype;return s._closeModal=function(e){e.preventDefault();var t=document.getElementById("modal_box");r.unmountComponentAtNode(t)},s.render=function(){var e=this.props,t=e.icon,r=e.children,a=e.style,s=e.showCloseIcon,i=o("reactist_modal_box__body",{plain:e.plain},this.props.className);return n.createElement("div",{className:i,style:a},s&&n.createElement("a",{className:"close",onClick:this._closeModal.bind(this),href:"#"},n.createElement(l.default,null)),t?n.createElement("div",{className:"dialog"},n.createElement("div",{className:"reactist_icon"},t),n.createElement("div",{className:"content"},r)):r)},a}(n.Component);i.displayName="Modal.Body",i.defaultProps={showCloseIcon:!1};var c=function(e){function o(){return e.apply(this,arguments)||this}t.inheritsLoose(o,e);var l=o.prototype;return l._onClick=function(e){e&&e();var t=document.getElementById("modal_box");r.unmountComponentAtNode(t)},l.render=function(){var e=this,t=n.Children.map(this.props.children,(function(t){return t&&t.props&&t.props.close?n.cloneElement(t,{onClick:function(){return e._onClick(t.props.onClick)}}):t?n.cloneElement(t):n.createElement(n.Fragment,null)}));return n.createElement("div",{className:"reactist_modal_box__actions"},t)},o}(n.Component);c.displayName="Modal.Actions",exports.Actions=c,exports.Body=i,exports.Box=a,exports.Header=s;
-//# sourceMappingURL=modal.js.map
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),n=e(require("react")),o=e(require("classnames")),r=e(require("react-dom")),l=require("../icons/CloseIcon.svg.js"),a=function(e){function l(){var t;return(t=e.apply(this,arguments)||this)._closeModal=function(){var e=document.getElementById("modal_box");r.unmountComponentAtNode(e)},t._handleKeyDown=function(e){27===e.keyCode&&(t._closeModal(),e.preventDefault&&e.preventDefault())},t._handleOverlayClick=function(e){e.target instanceof Element&&("reactist-overlay"===e.target.id||"reactist-overlay-inner"===e.target.id)&&t._closeModal()},t}t.inheritsLoose(l,e);var a=l.prototype;return a.componentDidMount=function(){window.addEventListener("keydown",this._handleKeyDown)},a.componentWillUnmount=function(){window.removeEventListener("keydown",this._handleKeyDown)},a.render=function(){var e=this.props,t=e.style,r=e.children,l=e.closeOnOverlayClick,a=o("reactist_modal_box",{large:e.large,medium:e.medium},this.props.className);return n.createElement("div",{className:"reactist_overlay",id:"reactist-overlay",onClick:l?this._handleOverlayClick:void 0},n.createElement("div",{className:"reactist_overlay_inner",id:"reactist-overlay-inner"},n.createElement("div",{style:t,className:a},r)))},l}(n.Component);a.displayName="Modal.Box",a.defaultProps={large:!1,closeOnOverlayClick:!1};var s=function(e){function o(){return e.apply(this,arguments)||this}t.inheritsLoose(o,e);var a=o.prototype;return a._closeModal=function(e){e.preventDefault(),"function"==typeof this.props.beforeClose&&this.props.beforeClose();var t=document.getElementById("modal_box");r.unmountComponentAtNode(t)},a.render=function(){return n.createElement("div",{className:"reactist_modal_box__header"},n.createElement("p",null,this.props.title&&n.createElement("span",{className:"title"},this.props.title),this.props.subtitle&&n.createElement("span",{className:"subtitle"},this.props.subtitle),this.props.children),n.createElement("a",{className:"close",onClick:this._closeModal.bind(this),href:"#"},n.createElement(l.default,null)))},o}(n.Component);s.displayName="Modal.Header";var i=function(e){function a(){return e.apply(this,arguments)||this}t.inheritsLoose(a,e);var s=a.prototype;return s._closeModal=function(e){e.preventDefault();var t=document.getElementById("modal_box");r.unmountComponentAtNode(t)},s.render=function(){var e=this.props,t=e.icon,r=e.children,a=e.style,s=e.showCloseIcon,i=o("reactist_modal_box__body",{plain:e.plain},this.props.className);return n.createElement("div",{className:i,style:a},s&&n.createElement("a",{className:"close",onClick:this._closeModal.bind(this),href:"#"},n.createElement(l.default,null)),t?n.createElement("div",{className:"dialog"},n.createElement("div",{className:"reactist_icon"},t),n.createElement("div",{className:"content"},r)):r)},a}(n.Component);i.displayName="Modal.Body",i.defaultProps={showCloseIcon:!1};var c=function(e){function o(){return e.apply(this,arguments)||this}t.inheritsLoose(o,e);var l=o.prototype;return l._onClick=function(e){e&&e();var t=document.getElementById("modal_box");r.unmountComponentAtNode(t)},l.render=function(){var e=this,t=n.Children.map(this.props.children,(function(t){var o;return(null==t||null===(o=t.props)||void 0===o?void 0:o.close)?n.cloneElement(t,{onClick:function(){return e._onClick(t.props.onClick)}}):t?n.cloneElement(t):n.createElement(n.Fragment,null)}));return n.createElement("div",{className:"reactist_modal_box__actions"},t)},o}(n.Component);c.displayName="Modal.Actions",exports.Actions=c,exports.Body=i,exports.Box=a,exports.Header=s;
+//# sourceMappingURL=deprecated-modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"deprecated-modal.js","sources":["../../../src/components/deprecated-modal/deprecated-modal.tsx"],"sourcesContent":["import React from 'react'\nimport ReactDOM from 'react-dom'\nimport classnames from 'classnames'\n\nimport CloseIcon from '../icons/CloseIcon.svg'\n\nimport './deprecated-modal.less'\n\ntype Props = {\n    /** Additional css class applied to the Modal.Box. */\n    className?: string\n    /** Sometimes a class name is not enough so you can use this to set the style directly. */\n    style?: React.CSSProperties\n    /** Large style. */\n    large: boolean\n    /** Medium size syle. */\n    medium?: boolean\n    /** Close the Modal when clicking on the overlay. */\n    closeOnOverlayClick: boolean\n}\n\n/** @deprecated */\nclass Box extends React.Component<React.PropsWithChildren<Props>> {\n    public static displayName: string\n    public static defaultProps: Props\n\n    componentDidMount() {\n        window.addEventListener('keydown', this._handleKeyDown)\n    }\n\n    componentWillUnmount() {\n        window.removeEventListener('keydown', this._handleKeyDown)\n    }\n\n    _closeModal = () => {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        const modalElement = document.getElementById('modal_box')!\n        ReactDOM.unmountComponentAtNode(modalElement)\n    }\n\n    _handleKeyDown = (event: Partial<KeyboardEvent>) => {\n        if (event.keyCode === 27) {\n            // ESC\n            this._closeModal()\n            if (event.preventDefault) event.preventDefault()\n        }\n    }\n\n    _handleOverlayClick = (event: React.MouseEvent<Element>) => {\n        if (\n            event.target instanceof Element &&\n            (event.target.id === 'reactist-overlay' || event.target.id === 'reactist-overlay-inner')\n        ) {\n            this._closeModal()\n        }\n    }\n\n    render() {\n        const { large, medium, style, children, closeOnOverlayClick } = this.props\n\n        const className = classnames('reactist_modal_box', { large, medium }, this.props.className)\n\n        return (\n            <div\n                className=\"reactist_overlay\"\n                id=\"reactist-overlay\"\n                onClick={closeOnOverlayClick ? this._handleOverlayClick : undefined}\n            >\n                <div className=\"reactist_overlay_inner\" id=\"reactist-overlay-inner\">\n                    <div style={style} className={className}>\n                        {children}\n                    </div>\n                </div>\n            </div>\n        )\n    }\n}\nBox.displayName = 'Modal.Box'\nBox.defaultProps = {\n    large: false,\n    closeOnOverlayClick: false,\n}\n\ntype HeaderProps = {\n    /** Title of the Modal.Header. */\n    title?: string | React.ReactNode\n    /** Subtitle of the Modal.Header. */\n    subtitle?: string | React.ReactNode\n    /** Function that is called right before the Modal unmounts itself. */\n    beforeClose?: () => void\n}\n\n/** @deprecated */\nclass Header extends React.Component<HeaderProps> {\n    public static displayName: string\n    public static defaultProps: HeaderProps\n\n    _closeModal(event: React.MouseEvent) {\n        event.preventDefault()\n        if (typeof this.props.beforeClose === 'function') {\n            this.props.beforeClose()\n        }\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        const modalElement = document.getElementById('modal_box')!\n        ReactDOM.unmountComponentAtNode(modalElement)\n    }\n\n    render() {\n        return (\n            /* eslint-disable jsx-a11y/anchor-is-valid */\n            <div className=\"reactist_modal_box__header\">\n                <p>\n                    {this.props.title && <span className=\"title\">{this.props.title}</span>}\n                    {this.props.subtitle && <span className=\"subtitle\">{this.props.subtitle}</span>}\n                    {this.props.children}\n                </p>\n                <a className=\"close\" onClick={this._closeModal.bind(this)} href=\"#\">\n                    <CloseIcon />\n                </a>\n            </div>\n            /* eslint-enable jsx-a11y/anchor-is-valid */\n        )\n    }\n}\nHeader.displayName = 'Modal.Header'\n\ntype BodyProps = {\n    /** Display an icon (or basically any component) on the right hand side of the Modal.Body. */\n    icon?: React.ReactNode\n    /** Applies less styles on the body (e.g. no padding) */\n    plain?: boolean\n    /** Sometimes a class name is not enough so you can use this to set the style directly. */\n    style?: React.CSSProperties\n    /** Additionall css class applied to the Modal.Body. */\n    className?: string\n    /**\n     * Render a close icon in the top right corner of the Modal.Body.\n     * Recommended to use when no Modal.Header is used.\n     */\n    showCloseIcon?: boolean\n}\n\n/** @deprecated */\nclass Body extends React.Component<BodyProps> {\n    public static displayName: string\n    public static defaultProps: BodyProps\n\n    _closeModal(event: React.MouseEvent) {\n        event.preventDefault()\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        const modalElement = document.getElementById('modal_box')!\n        ReactDOM.unmountComponentAtNode(modalElement)\n    }\n\n    render() {\n        const { icon, plain, children, style, showCloseIcon } = this.props\n        const className = classnames('reactist_modal_box__body', { plain }, this.props.className)\n\n        return (\n            /* eslint-disable jsx-a11y/anchor-is-valid */\n            <div className={className} style={style}>\n                {showCloseIcon && (\n                    <a className=\"close\" onClick={this._closeModal.bind(this)} href=\"#\">\n                        <CloseIcon />\n                    </a>\n                )}\n                {icon ? (\n                    <div className=\"dialog\">\n                        <div className=\"reactist_icon\">{icon}</div>\n                        <div className=\"content\">{children}</div>\n                    </div>\n                ) : (\n                    children\n                )}\n            </div>\n            /* eslint-enable jsx-a11y/anchor-is-valid */\n        )\n    }\n}\nBody.displayName = 'Modal.Body'\nBody.defaultProps = {\n    showCloseIcon: false,\n}\n\ntype ActionProps = {\n    /**\n     * Children to render inside the Modal.Actions. They can have an optional `close` property (boolean).\n     * When that is supplied and set to true it will close the modal after the onClick function\n     */\n    children?: React.ReactNode\n}\n\ntype ActionChildrenProps = {\n    close?: boolean\n    onClick?: () => void\n}\n\n/** @deprecated */\nclass Actions extends React.Component<ActionProps> {\n    public static displayName: string\n\n    _onClick(onClick: ActionChildrenProps['onClick']) {\n        if (onClick) {\n            onClick()\n        }\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        const modalElement = document.getElementById('modal_box')!\n        ReactDOM.unmountComponentAtNode(modalElement)\n    }\n\n    render() {\n        const children = React.Children.map(\n            // see: https://github.com/microsoft/TypeScript/issues/21699\n            // @ts-expect-error Children cannot be typed properly yet in React\n            this.props.children,\n            (child: React.ReactElement<ActionChildrenProps>) => {\n                if (child?.props?.close) {\n                    return React.cloneElement(child, {\n                        onClick: () => this._onClick(child.props.onClick),\n                    })\n                } else {\n                    return child ? React.cloneElement(child) : <></>\n                }\n            },\n        )\n\n        return <div className=\"reactist_modal_box__actions\">{children}</div>\n    }\n}\n\nActions.displayName = 'Modal.Actions'\n\n/** @deprecated */\ntype Modal = {\n    Box: Box\n    Header: Header\n    Body: Body\n    Actions: Actions\n}\n\nexport type { Modal }\n\nexport { Box, Header, Body, Actions }\n"],"names":["Box","modalElement","document","getElementById","ReactDOM","unmountComponentAtNode","event","keyCode","_closeModal","preventDefault","target","Element","id","componentDidMount","window","addEventListener","this","_handleKeyDown","componentWillUnmount","removeEventListener","render","props","style","children","closeOnOverlayClick","className","classnames","large","medium","React","onClick","_handleOverlayClick","undefined","Component","displayName","defaultProps","Header","beforeClose","title","subtitle","bind","href","CloseIcon","Body","icon","showCloseIcon","plain","Actions","_onClick","Children","map","child","_child$props","close","cloneElement","_this2"],"mappings":"yTAsBMA,qFAYY,eAEJC,EAAeC,SAASC,eAAe,aAC7CC,EAASC,uBAAuBJ,qBAGnB,SAACK,GACQ,KAAlBA,EAAMC,YAEDC,cACDF,EAAMG,gBAAgBH,EAAMG,yCAIlB,SAACH,GAEfA,EAAMI,kBAAkBC,UACH,qBAApBL,EAAMI,OAAOE,IAAiD,2BAApBN,EAAMI,OAAOE,OAEnDJ,iEA3BbK,kBAAA,WACIC,OAAOC,iBAAiB,UAAWC,KAAKC,mBAG5CC,qBAAA,WACIJ,OAAOK,oBAAoB,UAAWH,KAAKC,mBA0B/CG,OAAA,iBACoEJ,KAAKK,MAA9CC,IAAAA,MAAOC,IAAAA,SAAUC,IAAAA,oBAElCC,EAAYC,EAAW,qBAAsB,CAAEC,QAF7CA,MAEoDC,SAF7CA,QAEuDZ,KAAKK,MAAMI,kBAG7EI,uBACIJ,UAAU,mBACVb,GAAG,mBACHkB,QAASN,EAAsBR,KAAKe,yBAAsBC,GAE1DH,uBAAKJ,UAAU,yBAAyBb,GAAG,0BACvCiB,uBAAKP,MAAOA,EAAOG,UAAWA,GACzBF,SAhDPM,EAAMI,WAuDxBjC,EAAIkC,YAAc,YAClBlC,EAAImC,aAAe,CACfR,OAAO,EACPH,qBAAqB,OAanBY,gHAIF5B,YAAA,SAAYF,GACRA,EAAMG,iBACgC,mBAA3BO,KAAKK,MAAMgB,kBACbhB,MAAMgB,kBAGTpC,EAAeC,SAASC,eAAe,aAC7CC,EAASC,uBAAuBJ,MAGpCmB,OAAA,kBAGQS,uBAAKJ,UAAU,8BACXI,yBACKb,KAAKK,MAAMiB,OAAST,wBAAMJ,UAAU,SAAST,KAAKK,MAAMiB,OACxDtB,KAAKK,MAAMkB,UAAYV,wBAAMJ,UAAU,YAAYT,KAAKK,MAAMkB,UAC9DvB,KAAKK,MAAME,UAEhBM,qBAAGJ,UAAU,QAAQK,QAASd,KAAKR,YAAYgC,KAAKxB,MAAOyB,KAAK,KAC5DZ,gBAACa,sBAxBAb,EAAMI,WA+B3BG,EAAOF,YAAc,mBAmBfS,gHAIFnC,YAAA,SAAYF,GACRA,EAAMG,qBAEAR,EAAeC,SAASC,eAAe,aAC7CC,EAASC,uBAAuBJ,MAGpCmB,OAAA,iBAC4DJ,KAAKK,MAArDuB,IAAAA,KAAarB,IAAAA,SAAUD,IAAAA,MAAOuB,IAAAA,cAChCpB,EAAYC,EAAW,2BAA4B,CAAEoB,QAD7CA,OACsD9B,KAAKK,MAAMI,kBAI3EI,uBAAKJ,UAAWA,EAAWH,MAAOA,GAC7BuB,GACGhB,qBAAGJ,UAAU,QAAQK,QAASd,KAAKR,YAAYgC,KAAKxB,MAAOyB,KAAK,KAC5DZ,gBAACa,iBAGRE,EACGf,uBAAKJ,UAAU,UACXI,uBAAKJ,UAAU,iBAAiBmB,GAChCf,uBAAKJ,UAAU,WAAWF,IAG9BA,OA7BDM,EAAMI,WAoCzBU,EAAKT,YAAc,aACnBS,EAAKR,aAAe,CAChBU,eAAe,OAiBbE,gHAGFC,SAAA,SAASlB,GACDA,GACAA,QAGE7B,EAAeC,SAASC,eAAe,aAC7CC,EAASC,uBAAuBJ,MAGpCmB,OAAA,sBACUG,EAAWM,EAAMoB,SAASC,SAGvB7B,MAAME,UACX,SAAC4B,gBACOA,MAAAA,aAAAA,EAAO9B,0BAAP+B,EAAcC,OACPxB,EAAMyB,aAAaH,EAAO,CAC7BrB,QAAS,kBAAMyB,EAAKP,SAASG,EAAM9B,MAAMS,YAGtCqB,EAAQtB,EAAMyB,aAAaH,GAAStB,2CAKhDA,uBAAKJ,UAAU,+BAA+BF,OA5BvCM,EAAMI,WAgC5Bc,EAAQb,YAAc"}

package/lib/components/{modal → deprecated-modal}/index.d.ts

@@ -1,5 +1,5 @@
-import { Box, Header, Body, Actions } from './modal';
-import type { Modal } from './modal';
+import { Box, Header, Body, Actions } from './deprecated-modal';
+import type { Modal } from './deprecated-modal';
 declare const _default: {
     Box: typeof Box;
     Header: typeof Header;
@@ -7,4 +7,4 @@ declare const _default: {
     Actions: typeof Actions;
 };
 export default _default;
-export { Modal };
+export type { Modal };

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./deprecated-modal.js");exports.default={Box:e.Box,Header:e.Header,Body:e.Body,Actions:e.Actions};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/deprecated-modal/index.ts"],"sourcesContent":["import { Box, Header, Body, Actions } from './deprecated-modal'\nimport type { Modal } from './deprecated-modal'\n\nexport default { Box, Header, Body, Actions }\nexport type { Modal }\n"],"names":["Box","Header","Body","Actions"],"mappings":"2HAGe,CAAEA,IAAAA,MAAKC,OAAAA,SAAQC,KAAAA,OAAMC,QAAAA"}

package/lib/components/dropdown/dropdown.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=t(require("react")),i=t(require("classnames")),n=require("../button/index.js"),r=t(require("react-dom")),s=function(t){function n(o,i){var n;return(n=t.call(this,o,i)||this)._handleClickOutside=function(t){var o=r.findDOMNode(e.assertThisInitialized(n));o&&!o.contains(t.target)?n._toggleShowBody():n.props.allowBodyInteractions||(n._timeout=setTimeout((function(){n.state.showBody&&n._toggleShowBody()}),100))},n._toggleShowBody=function(){n.state.showBody?(n.props.onHideBody&&n.props.onHideBody(),document.removeEventListener("click",n._handleClickOutside,!0)):(n.props.onShowBody&&n.props.onShowBody(),document.addEventListener("click",n._handleClickOutside,!0)),n.setState({showBody:!n.state.showBody})},n._setPosition=function(t){if(t){var o=document.getElementById(n.props.scrolling_parent?n.props.scrolling_parent:"");if(o){var i=r.findDOMNode(e.assertThisInitialized(n));if(!i)return;var s=r.findDOMNode(e.assertThisInitialized(n)).offsetTop,a=i.querySelector(".trigger");if(!a)return;var l=o.clientHeight+o.scrollTop-s-a.clientHeight<t.clientHeight;l!==n.state.top&&n.setState({top:l})}}},n.state={showBody:!1,top:o.top||!1},n._timeout=void 0,n}e.inheritsLoose(n,t);var s=n.prototype;return s.componentWillUnmount=function(){document.removeEventListener("click",this._handleClickOutside,!0),this._timeout&&clearTimeout(this._timeout)},s._getTriggerComponent=function(){var t=this.props.children&&this.props.children[0];return t?o.cloneElement(t,{onClick:this._toggleShowBody}):void 0},s._getBodyComponent=function(){if(!this.state.showBody)return null;var t=this.state.top,e=this.props,n=e.right,r=e.children,s={top:t,right:void 0!==n&&n,setPosition:this._setPosition},a=i({body_wrapper:!0,with_arrow:!0,top:t,bottom:!t}),l=r&&r[1],d="function"==typeof l?l(s):l?o.cloneElement(l,s):void 0;return o.createElement("div",{className:a,style:{position:"relative"}},d)},s.render=function(){var t=i("reactist_dropdown",this.props.className),e=this.state.top;return o.createElement("div",{style:{display:"inline-block"},className:t},e&&this._getBodyComponent(),this._getTriggerComponent(),!e&&this._getBodyComponent())},n}(o.Component);s.displayName="Dropdown.Box";var a=o.forwardRef((function(t,r){var s=t.children,a=t.onClick,l=t.tooltip,d=t.className,c=e.objectWithoutPropertiesLoose(t,["children","onClick","tooltip","className"]);return o.createElement(n.default,Object.assign({},c,{className:i("trigger",d),onClick:function(t){t.preventDefault(),t.stopPropagation(),a&&a(t)},tooltip:l,ref:r}),s)}));function l(t){var e=t.right,i=t.children,n=t.setPosition,r={position:"absolute",right:0,top:0};return t.top&&(r.top="auto",r.bottom=0),e&&(r.right="auto",r.left=0),o.createElement("div",{ref:n,style:r,className:"body",id:"reactist-dropdown-body"},i)}a.displayName="Dropdown.Trigger",l.displayName="Dropdown.Body",exports.Dropdown={Box:s,Trigger:a,Body:l};
+"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=t(require("react")),i=t(require("classnames")),n=t(require("react-dom")),r=require("../deprecated-button/index.js"),s=function(t){function r(o,i){var r;return(r=t.call(this,o,i)||this)._handleClickOutside=function(t){var o=n.findDOMNode(e.assertThisInitialized(r));o&&!o.contains(t.target)?r._toggleShowBody():r.props.allowBodyInteractions||(r._timeout=setTimeout((function(){r.state.showBody&&r._toggleShowBody()}),100))},r._toggleShowBody=function(){r.state.showBody?(r.props.onHideBody&&r.props.onHideBody(),document.removeEventListener("click",r._handleClickOutside,!0)):(r.props.onShowBody&&r.props.onShowBody(),document.addEventListener("click",r._handleClickOutside,!0)),r.setState({showBody:!r.state.showBody})},r._setPosition=function(t){if(t){var o=document.getElementById(r.props.scrolling_parent?r.props.scrolling_parent:"");if(o){var i=n.findDOMNode(e.assertThisInitialized(r));if(!i)return;var s=n.findDOMNode(e.assertThisInitialized(r)).offsetTop,l=i.querySelector(".trigger");if(!l)return;var a=o.clientHeight+o.scrollTop-s-l.clientHeight<t.clientHeight;a!==r.state.top&&r.setState({top:a})}}},r.state={showBody:!1,top:o.top||!1},r._timeout=void 0,r}e.inheritsLoose(r,t);var s=r.prototype;return s.componentWillUnmount=function(){document.removeEventListener("click",this._handleClickOutside,!0),this._timeout&&clearTimeout(this._timeout)},s._getTriggerComponent=function(){var t,e=null===(t=this.props.children)||void 0===t?void 0:t[0];return e?o.cloneElement(e,{onClick:this._toggleShowBody}):void 0},s._getBodyComponent=function(){if(!this.state.showBody)return null;var t=this.state.top,e=this.props,n=e.right,r=e.children,s={top:t,right:void 0!==n&&n,setPosition:this._setPosition},l=i({body_wrapper:!0,with_arrow:!0,top:t,bottom:!t}),a=null==r?void 0:r[1],d="function"==typeof a?a(s):a?o.cloneElement(a,s):void 0;return o.createElement("div",{className:l,style:{position:"relative"}},d)},s.render=function(){var t=i("reactist_dropdown",this.props.className),e=this.state.top;return o.createElement("div",{style:{display:"inline-block"},className:t},e&&this._getBodyComponent(),this._getTriggerComponent(),!e&&this._getBodyComponent())},r}(o.Component);s.displayName="Dropdown.Box";var l=o.forwardRef((function(t,n){var s=t.children,l=t.onClick,a=t.tooltip,d=t.className,c=e.objectWithoutPropertiesLoose(t,["children","onClick","tooltip","className"]);return o.createElement(r.default,Object.assign({},c,{className:i("trigger",d),onClick:function(t){t.preventDefault(),t.stopPropagation(),l&&l(t)},tooltip:a,ref:n}),s)}));function a(t){var e=t.right,i=t.children,n=t.setPosition,r={position:"absolute",right:0,top:0};return t.top&&(r.top="auto",r.bottom=0),e&&(r.right="auto",r.left=0),o.createElement("div",{ref:n,style:r,className:"body",id:"reactist-dropdown-body"},i)}l.displayName="Dropdown.Trigger",a.displayName="Dropdown.Body",exports.Dropdown={Box:s,Trigger:l,Body:a};
 //# sourceMappingURL=dropdown.js.map