@doist/reactist 24.2.0-beta → 25.0.0-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/dist/reactist.cjs.development.js +226 -176
  2. package/dist/reactist.cjs.development.js.map +1 -1
  3. package/dist/reactist.cjs.production.min.js +1 -1
  4. package/dist/reactist.cjs.production.min.js.map +1 -1
  5. package/es/box/box.js +94 -19
  6. package/es/box/box.js.map +1 -1
  7. package/es/button/button.js +93 -18
  8. package/es/button/button.js.map +1 -1
  9. package/es/button/button.module.css.js +4 -0
  10. package/es/button/button.module.css.js.map +1 -0
  11. package/es/index.js +2 -3
  12. package/es/index.js.map +1 -1
  13. package/es/loading/loading.js.map +1 -1
  14. package/es/menu/menu.js.map +1 -1
  15. package/es/modal/modal.js +2 -2
  16. package/es/modal/modal.js.map +1 -1
  17. package/es/password-field/password-field.js +2 -2
  18. package/es/password-field/password-field.js.map +1 -1
  19. package/es/toast/static-toast.js +2 -2
  20. package/es/toast/static-toast.js.map +1 -1
  21. package/es/utils/polymorphism.js.map +1 -1
  22. package/lib/box/box.d.ts +2 -1
  23. package/lib/box/box.js +1 -1
  24. package/lib/box/box.js.map +1 -1
  25. package/lib/button/button.d.ts +123 -11
  26. package/lib/button/button.js +1 -1
  27. package/lib/button/button.js.map +1 -1
  28. package/lib/button/button.module.css.js +2 -0
  29. package/lib/button/button.module.css.js.map +1 -0
  30. package/lib/index.d.ts +0 -1
  31. package/lib/index.js +1 -1
  32. package/lib/loading/loading.d.ts +2 -2
  33. package/lib/loading/loading.js.map +1 -1
  34. package/lib/menu/menu.d.ts +1 -2
  35. package/lib/menu/menu.js.map +1 -1
  36. package/lib/modal/modal.d.ts +5 -8
  37. package/lib/modal/modal.js +1 -1
  38. package/lib/modal/modal.js.map +1 -1
  39. package/lib/password-field/password-field.js +1 -1
  40. package/lib/password-field/password-field.js.map +1 -1
  41. package/lib/toast/static-toast.js +1 -1
  42. package/lib/toast/static-toast.js.map +1 -1
  43. package/lib/utils/common-types.d.ts +19 -0
  44. package/lib/utils/polymorphism.d.ts +1 -19
  45. package/lib/utils/polymorphism.js.map +1 -1
  46. package/package.json +1 -1
  47. package/styles/alert.css +2 -2
  48. package/styles/{base-button.css → button.css} +2 -2
  49. package/styles/button.module.css.css +1 -0
  50. package/styles/modal.css +2 -2
  51. package/styles/password-field.css +2 -2
  52. package/styles/reactist.css +1 -1
  53. package/styles/static-toast.css +2 -2
  54. package/styles/use-toasts.css +2 -2
  55. package/es/base-button/base-button.js +0 -75
  56. package/es/base-button/base-button.js.map +0 -1
  57. package/es/base-button/base-button.module.css.js +0 -4
  58. package/es/base-button/base-button.module.css.js.map +0 -1
  59. package/es/button-link/button-link.js +0 -38
  60. package/es/button-link/button-link.js.map +0 -1
  61. package/lib/base-button/base-button.d.ts +0 -80
  62. package/lib/base-button/base-button.js +0 -2
  63. package/lib/base-button/base-button.js.map +0 -1
  64. package/lib/base-button/base-button.module.css.js +0 -2
  65. package/lib/base-button/base-button.module.css.js.map +0 -1
  66. package/lib/base-button/index.d.ts +0 -1
  67. package/lib/button-link/button-link-story-wrapper.d.ts +0 -7
  68. package/lib/button-link/button-link.d.ts +0 -13
  69. package/lib/button-link/button-link.js +0 -2
  70. package/lib/button-link/button-link.js.map +0 -1
  71. package/lib/button-link/button-link.test.d.ts +0 -1
  72. package/lib/button-link/index.d.ts +0 -1
  73. package/styles/base-button.module.css.css +0 -1
@@ -1,75 +0,0 @@
1
- import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
2
- import { createElement, Fragment } from 'react';
3
- import { polymorphicComponent } from '../utils/polymorphism.js';
4
- import { Box } from '../box/box.js';
5
- import { Tooltip } from '../tooltip/tooltip.js';
6
- import { Spinner } from '../spinner/spinner.js';
7
- import styles from './base-button.module.css.js';
8
-
9
- const _excluded = ["as", "variant", "tone", "size", "shape", "disabled", "loading", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon", "width", "align"];
10
-
11
- function preventDefault(event) {
12
- event.preventDefault();
13
- }
14
- /**
15
- * The component that powers `Button` and `ButtonLink`, where the button styling logic and some
16
- * common functionality resides. This component is internal to Reactist.
17
- *
18
- * @see Button
19
- * @see ButtonLink
20
- */
21
-
22
-
23
- const BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref) {
24
- let {
25
- as = 'div',
26
- variant,
27
- tone = 'normal',
28
- size = 'normal',
29
- shape = 'normal',
30
- disabled = false,
31
- loading = false,
32
- tooltip,
33
- onClick,
34
- exceptionallySetClassName,
35
- children,
36
- startIcon,
37
- endIcon,
38
- icon,
39
- width = 'auto',
40
- align = 'center'
41
- } = _ref,
42
- props = _objectWithoutProperties(_ref, _excluded);
43
-
44
- const isDisabled = loading || disabled;
45
- const buttonElement = /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
46
- as: as,
47
- ref: ref,
48
- "aria-disabled": isDisabled,
49
- onClick: isDisabled ? preventDefault : onClick,
50
- width: icon ? undefined : width,
51
- className: [exceptionallySetClassName, styles.baseButton, styles["variant-" + variant], styles["tone-" + tone], styles["size-" + size], shape === 'rounded' ? styles['shape-rounded'] : null, icon ? styles.iconButton : null, disabled ? styles.disabled : null]
52
- }), icon ? loading && /*#__PURE__*/createElement(Spinner, null) || icon : /*#__PURE__*/createElement(Fragment, null, startIcon ? /*#__PURE__*/createElement(Box, {
53
- display: "flex",
54
- className: styles.startIcon,
55
- "aria-hidden": true
56
- }, loading && !endIcon ? /*#__PURE__*/createElement(Spinner, null) : startIcon) : null, children ? /*#__PURE__*/createElement(Box, {
57
- as: "span",
58
- className: styles.label,
59
- overflow: "hidden",
60
- width: width === 'full' ? 'full' : undefined,
61
- textAlign: width === 'auto' ? 'center' : align
62
- }, children) : null, endIcon || loading && !startIcon ? /*#__PURE__*/createElement(Box, {
63
- display: "flex",
64
- className: styles.endIcon,
65
- "aria-hidden": true
66
- }, loading ? /*#__PURE__*/createElement(Spinner, null) : endIcon) : null)); // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided
67
-
68
- const tooltipContent = icon && tooltip === undefined ? props['aria-label'] : tooltip;
69
- return tooltipContent ? /*#__PURE__*/createElement(Tooltip, {
70
- content: tooltipContent
71
- }, buttonElement) : buttonElement;
72
- });
73
-
74
- export { BaseButton };
75
- //# sourceMappingURL=base-button.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"base-button.js","sources":["../../src/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../tooltip'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n /**\n * The button's variant.\n */\n variant: ButtonVariant\n\n /**\n * The button's tone.\n * @default 'normal'\n */\n tone?: ButtonTone\n\n /**\n * The button's size.\n * @default 'normal'\n */\n size?: ButtonSize\n\n /**\n * Controls the shape of the button. Specifically, it allows to make it have slightly curved\n * corners (the default) vs. having them fully curved to the point that they are as round as\n * possible. In icon-only buttons this allows to have the button be circular.\n * @default 'normal'\n */\n shape?: 'normal' | 'rounded'\n\n /**\n * Whether the button is disabled or not.\n * @default false\n */\n disabled?: boolean\n\n /**\n * Whether the button is busy/loading.\n *\n * A button in this state is functionally and semantically disabled. Visually is does not look\n * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n *\n * @default false\n */\n loading?: boolean\n\n /**\n * A tooltip linked to the button element.\n */\n tooltip?: TooltipProps['content']\n}\n\ntype AlignmentProps = {\n width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\n align?: 'start' | 'center' | 'end'\n}\n\ntype AutoWidthProps = {\n width?: 'auto'\n align?: never\n}\n\ntype IconButtonProps = {\n icon: IconElement\n 'aria-label': string\n children?: never\n startIcon?: never\n endIcon?: never\n width?: never\n align?: never\n}\n\ntype LabelledButtonProps = {\n children: NonNullable<React.ReactNode>\n startIcon?: IconElement\n endIcon?: IconElement\n icon?: never\n} & (AutoWidthProps | AlignmentProps)\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n {\n as = 'div',\n variant,\n tone = 'normal',\n size = 'normal',\n shape = 'normal',\n disabled = false,\n loading = false,\n tooltip,\n onClick,\n exceptionallySetClassName,\n children,\n startIcon,\n endIcon,\n icon,\n width = 'auto',\n align = 'center',\n ...props\n },\n ref,\n) {\n const isDisabled = loading || disabled\n const buttonElement = (\n <Box\n {...props}\n as={as}\n ref={ref}\n aria-disabled={isDisabled}\n onClick={isDisabled ? preventDefault : onClick}\n width={icon ? undefined : width}\n className={[\n exceptionallySetClassName,\n styles.baseButton,\n styles[`variant-${variant}`],\n styles[`tone-${tone}`],\n styles[`size-${size}`],\n shape === 'rounded' ? styles['shape-rounded'] : null,\n icon ? styles.iconButton : null,\n disabled ? styles.disabled : null,\n ]}\n >\n {icon ? (\n (loading && <Spinner />) || icon\n ) : (\n <>\n {startIcon ? (\n <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n {loading && !endIcon ? <Spinner /> : startIcon}\n </Box>\n ) : null}\n {children ? (\n <Box\n as=\"span\"\n className={styles.label}\n overflow=\"hidden\"\n width={width === 'full' ? 'full' : undefined}\n textAlign={width === 'auto' ? 'center' : align}\n >\n {children}\n </Box>\n ) : null}\n {endIcon || (loading && !startIcon) ? (\n <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n {loading ? <Spinner /> : endIcon}\n </Box>\n ) : null}\n </>\n )}\n </Box>\n )\n\n // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n const tooltipContent = icon && tooltip === undefined ? props['aria-label'] : tooltip\n return tooltipContent ? (\n <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n ) : (\n buttonElement\n )\n})\n"],"names":["preventDefault","event","BaseButton","polymorphicComponent","ref","as","variant","tone","size","shape","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align","props","isDisabled","buttonElement","React","Box","undefined","className","styles","baseButton","iconButton","Spinner","display","label","overflow","textAlign","tooltipContent","Tooltip","content"],"mappings":";;;;;;;;;;AAOA,SAASA,cAAT,CAAwBC,KAAxB;EACIA,KAAK,CAACD,cAAN;AACH;AAoFD;;;;;;;;;MAOaE,UAAU,gBAAGC,oBAAoB,CAAyB,SAASD,UAAT,OAoBnEE,GApBmE;MACnE;IACIC,EAAE,GAAG,KADT;IAEIC,OAFJ;IAGIC,IAAI,GAAG,QAHX;IAIIC,IAAI,GAAG,QAJX;IAKIC,KAAK,GAAG,QALZ;IAMIC,QAAQ,GAAG,KANf;IAOIC,OAAO,GAAG,KAPd;IAQIC,OARJ;IASIC,OATJ;IAUIC,yBAVJ;IAWIC,QAXJ;IAYIC,SAZJ;IAaIC,OAbJ;IAcIC,IAdJ;IAeIC,KAAK,GAAG,MAfZ;IAgBIC,KAAK,GAAG;;MACLC;;EAIP,MAAMC,UAAU,GAAGX,OAAO,IAAID,QAA9B;EACA,MAAMa,aAAa,gBACfC,aAAA,CAACC,GAAD,oCACQJ,KADR;IAEIhB,EAAE,EAAEA,EAFR;IAGID,GAAG,EAAEA,GAHT;qBAImBkB,UAJnB;IAKIT,OAAO,EAAES,UAAU,GAAGtB,cAAH,GAAoBa,OAL3C;IAMIM,KAAK,EAAED,IAAI,GAAGQ,SAAH,GAAeP,KAN9B;IAOIQ,SAAS,EAAE,CACPb,yBADO,EAEPc,MAAM,CAACC,UAFA,EAGPD,MAAM,cAAYtB,OAAZ,CAHC,EAIPsB,MAAM,WAASrB,IAAT,CAJC,EAKPqB,MAAM,WAASpB,IAAT,CALC,EAMPC,KAAK,KAAK,SAAV,GAAsBmB,MAAM,CAAC,eAAD,CAA5B,GAAgD,IANzC,EAOPV,IAAI,GAAGU,MAAM,CAACE,UAAV,GAAuB,IAPpB,EAQPpB,QAAQ,GAAGkB,MAAM,CAAClB,QAAV,GAAqB,IARtB;MAWVQ,IAAI,GACAP,OAAO,iBAAIa,aAAA,CAACO,OAAD,MAAA,CAAZ,IAA4Bb,IAD3B,gBAGDM,aAAA,SAAA,MAAA,EACKR,SAAS,gBACNQ,aAAA,CAACC,GAAD;IAAKO,OAAO,EAAC;IAAOL,SAAS,EAAEC,MAAM,CAACZ;;GAAtC,EACKL,OAAO,IAAI,CAACM,OAAZ,gBAAsBO,aAAA,CAACO,OAAD,MAAA,CAAtB,GAAoCf,SADzC,CADM,GAIN,IALR,EAMKD,QAAQ,gBACLS,aAAA,CAACC,GAAD;IACIpB,EAAE,EAAC;IACHsB,SAAS,EAAEC,MAAM,CAACK;IAClBC,QAAQ,EAAC;IACTf,KAAK,EAAEA,KAAK,KAAK,MAAV,GAAmB,MAAnB,GAA4BO;IACnCS,SAAS,EAAEhB,KAAK,KAAK,MAAV,GAAmB,QAAnB,GAA8BC;GAL7C,EAOKL,QAPL,CADK,GAUL,IAhBR,EAiBKE,OAAO,IAAKN,OAAO,IAAI,CAACK,SAAxB,gBACGQ,aAAA,CAACC,GAAD;IAAKO,OAAO,EAAC;IAAOL,SAAS,EAAEC,MAAM,CAACX;;GAAtC,EACKN,OAAO,gBAAGa,aAAA,CAACO,OAAD,MAAA,CAAH,GAAiBd,OAD7B,CADH,GAIG,IArBR,CArBR,CADJ;;EAkDA,MAAMmB,cAAc,GAAGlB,IAAI,IAAIN,OAAO,KAAKc,SAApB,GAAgCL,KAAK,CAAC,YAAD,CAArC,GAAsDT,OAA7E;EACA,OAAOwB,cAAc,gBACjBZ,aAAA,CAACa,OAAD;IAASC,OAAO,EAAEF;GAAlB,EAAmCb,aAAnC,CADiB,GAGjBA,aAHJ;AAKH,CA/E6C;;;;"}
@@ -1,4 +0,0 @@
1
- var modules_b9569bce = {"baseButton":"_8313bd46","label":"_0051d171","shape-rounded":"_8eb8f0fa","size-small":"_8b7f1a82","size-normal":"_5e45d59f","size-large":"_95951888","disabled":"_43792df1","iconButton":"_8644eccb","startIcon":"a44d4350","endIcon":"_073e1aa4","variant-primary":"_7a4dbd5f","variant-secondary":"_54d56775","variant-tertiary":"_907a61ca","variant-quaternary":"f169a390","tone-destructive":"ccb3eb8c"};
2
-
3
- export default modules_b9569bce;
4
- //# sourceMappingURL=base-button.module.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"base-button.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,38 +0,0 @@
1
- import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
2
- import { createElement } from 'react';
3
- import { polymorphicComponent } from '../utils/polymorphism.js';
4
- import { BaseButton } from '../base-button/base-button.js';
5
-
6
- const _excluded = ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"];
7
- /**
8
- * A semantic link that looks like a button, exactly matching the `Button` component in all visual
9
- * aspects.
10
- *
11
- * @see Button
12
- */
13
-
14
- const ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, ref) {
15
- let {
16
- as = 'a',
17
- variant,
18
- tone = 'normal',
19
- size = 'normal',
20
- exceptionallySetClassName,
21
- openInNewTab = false
22
- } = _ref,
23
- props = _objectWithoutProperties(_ref, _excluded);
24
-
25
- return /*#__PURE__*/createElement(BaseButton, _objectSpread2(_objectSpread2({}, props), {}, {
26
- as: as,
27
- ref: ref,
28
- variant: variant,
29
- tone: tone,
30
- size: size,
31
- exceptionallySetClassName: exceptionallySetClassName,
32
- target: openInNewTab ? '_blank' : undefined,
33
- rel: openInNewTab ? 'noopener noreferrer' : undefined
34
- }));
35
- });
36
-
37
- export { ButtonLink };
38
- //# sourceMappingURL=button-link.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"button-link.js","sources":["../../src/button-link/button-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\nimport type { OpenInNewTab } from '../utils/common-types'\n\ntype NativeLinkProps = Omit<\n JSX.IntrinsicElements['a'],\n 'aria-disabled' | 'target' | 'rel' | 'className'\n>\n\nexport type ButtonLinkProps = NativeLinkProps & BaseButtonProps & OpenInNewTab\n\n/**\n * A semantic link that looks like a button, exactly matching the `Button` component in all visual\n * aspects.\n *\n * @see Button\n */\nexport const ButtonLink = polymorphicComponent<'a', ButtonLinkProps>(function ButtonLink(\n {\n as = 'a',\n variant,\n tone = 'normal',\n size = 'normal',\n exceptionallySetClassName,\n openInNewTab = false,\n ...props\n },\n ref,\n) {\n return (\n <BaseButton\n {...props}\n as={as}\n ref={ref}\n variant={variant}\n tone={tone}\n size={size}\n exceptionallySetClassName={exceptionallySetClassName}\n target={openInNewTab ? '_blank' : undefined}\n rel={openInNewTab ? 'noopener noreferrer' : undefined}\n />\n )\n})\n"],"names":["ButtonLink","polymorphicComponent","ref","as","variant","tone","size","exceptionallySetClassName","openInNewTab","props","React","BaseButton","target","undefined","rel"],"mappings":";;;;;;AAaA;;;;;;;MAMaA,UAAU,gBAAGC,oBAAoB,CAAuB,SAASD,UAAT,OAUjEE,GAViE;MACjE;IACIC,EAAE,GAAG,GADT;IAEIC,OAFJ;IAGIC,IAAI,GAAG,QAHX;IAIIC,IAAI,GAAG,QAJX;IAKIC,yBALJ;IAMIC,YAAY,GAAG;;MACZC;;EAIP,oBACIC,aAAA,CAACC,UAAD,oCACQF,KADR;IAEIN,EAAE,EAAEA,EAFR;IAGID,GAAG,EAAEA,GAHT;IAIIE,OAAO,EAAEA,OAJb;IAKIC,IAAI,EAAEA,IALV;IAMIC,IAAI,EAAEA,IANV;IAOIC,yBAAyB,EAAEA,yBAP/B;IAQIK,MAAM,EAAEJ,YAAY,GAAG,QAAH,GAAcK,SARtC;IASIC,GAAG,EAAEN,YAAY,GAAG,qBAAH,GAA2BK;KAVpD;AAaH,CAzB6C;;;;"}
@@ -1,80 +0,0 @@
1
- import * as React from 'react';
2
- import { TooltipProps } from '../tooltip';
3
- declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
4
- declare type ButtonTone = 'normal' | 'destructive';
5
- declare type ButtonSize = 'small' | 'normal' | 'large';
6
- declare type IconElement = React.ReactChild;
7
- declare type CommonProps = {
8
- /**
9
- * The button's variant.
10
- */
11
- variant: ButtonVariant;
12
- /**
13
- * The button's tone.
14
- * @default 'normal'
15
- */
16
- tone?: ButtonTone;
17
- /**
18
- * The button's size.
19
- * @default 'normal'
20
- */
21
- size?: ButtonSize;
22
- /**
23
- * Controls the shape of the button. Specifically, it allows to make it have slightly curved
24
- * corners (the default) vs. having them fully curved to the point that they are as round as
25
- * possible. In icon-only buttons this allows to have the button be circular.
26
- * @default 'normal'
27
- */
28
- shape?: 'normal' | 'rounded';
29
- /**
30
- * Whether the button is disabled or not.
31
- * @default false
32
- */
33
- disabled?: boolean;
34
- /**
35
- * Whether the button is busy/loading.
36
- *
37
- * A button in this state is functionally and semantically disabled. Visually is does not look
38
- * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.
39
- *
40
- * @default false
41
- */
42
- loading?: boolean;
43
- /**
44
- * A tooltip linked to the button element.
45
- */
46
- tooltip?: TooltipProps['content'];
47
- };
48
- declare type AlignmentProps = {
49
- width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full';
50
- align?: 'start' | 'center' | 'end';
51
- };
52
- declare type AutoWidthProps = {
53
- width?: 'auto';
54
- align?: never;
55
- };
56
- declare type IconButtonProps = {
57
- icon: IconElement;
58
- 'aria-label': string;
59
- children?: never;
60
- startIcon?: never;
61
- endIcon?: never;
62
- width?: never;
63
- align?: never;
64
- };
65
- declare type LabelledButtonProps = {
66
- children: NonNullable<React.ReactNode>;
67
- startIcon?: IconElement;
68
- endIcon?: IconElement;
69
- icon?: never;
70
- } & (AutoWidthProps | AlignmentProps);
71
- export declare type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps);
72
- /**
73
- * The component that powers `Button` and `ButtonLink`, where the button styling logic and some
74
- * common functionality resides. This component is internal to Reactist.
75
- *
76
- * @see Button
77
- * @see ButtonLink
78
- */
79
- export declare const BaseButton: import("../utils/polymorphism").PolymorphicComponent<"div", BaseButtonProps, "obfuscateClassName">;
80
- export {};
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=require("../utils/polymorphism.js"),n=require("../box/box.js"),a=require("../tooltip/tooltip.js"),o=require("../spinner/spinner.js"),i=require("./base-button.module.css.js");const r=["as","variant","tone","size","shape","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align"];function s(e){e.preventDefault()}exports.BaseButton=t.polymorphicComponent((function(t,d){let{as:u="div",variant:c,tone:p="normal",size:m="normal",shape:f="normal",disabled:b=!1,loading:h=!1,tooltip:x,onClick:v,exceptionallySetClassName:j,children:B,startIcon:E,endIcon:g,icon:q,width:y="auto",align:S="center"}=t,C=e.objectWithoutProperties(t,r);const I=h||b,N=l.createElement(n.Box,e.objectSpread2(e.objectSpread2({},C),{},{as:u,ref:d,"aria-disabled":I,onClick:I?s:v,width:q?void 0:y,className:[j,i.default.baseButton,i.default["variant-"+c],i.default["tone-"+p],i.default["size-"+m],"rounded"===f?i.default["shape-rounded"]:null,q?i.default.iconButton:null,b?i.default.disabled:null]}),q?h&&l.createElement(o.Spinner,null)||q:l.createElement(l.Fragment,null,E?l.createElement(n.Box,{display:"flex",className:i.default.startIcon,"aria-hidden":!0},h&&!g?l.createElement(o.Spinner,null):E):null,B?l.createElement(n.Box,{as:"span",className:i.default.label,overflow:"hidden",width:"full"===y?"full":void 0,textAlign:"auto"===y?"center":S},B):null,g||h&&!E?l.createElement(n.Box,{display:"flex",className:i.default.endIcon,"aria-hidden":!0},h?l.createElement(o.Spinner,null):g):null)),w=q&&void 0===x?C["aria-label"]:x;return w?l.createElement(a.Tooltip,{content:w},N):N}));
2
- //# sourceMappingURL=base-button.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"base-button.js","sources":["../../src/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../tooltip'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n /**\n * The button's variant.\n */\n variant: ButtonVariant\n\n /**\n * The button's tone.\n * @default 'normal'\n */\n tone?: ButtonTone\n\n /**\n * The button's size.\n * @default 'normal'\n */\n size?: ButtonSize\n\n /**\n * Controls the shape of the button. Specifically, it allows to make it have slightly curved\n * corners (the default) vs. having them fully curved to the point that they are as round as\n * possible. In icon-only buttons this allows to have the button be circular.\n * @default 'normal'\n */\n shape?: 'normal' | 'rounded'\n\n /**\n * Whether the button is disabled or not.\n * @default false\n */\n disabled?: boolean\n\n /**\n * Whether the button is busy/loading.\n *\n * A button in this state is functionally and semantically disabled. Visually is does not look\n * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n *\n * @default false\n */\n loading?: boolean\n\n /**\n * A tooltip linked to the button element.\n */\n tooltip?: TooltipProps['content']\n}\n\ntype AlignmentProps = {\n width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\n align?: 'start' | 'center' | 'end'\n}\n\ntype AutoWidthProps = {\n width?: 'auto'\n align?: never\n}\n\ntype IconButtonProps = {\n icon: IconElement\n 'aria-label': string\n children?: never\n startIcon?: never\n endIcon?: never\n width?: never\n align?: never\n}\n\ntype LabelledButtonProps = {\n children: NonNullable<React.ReactNode>\n startIcon?: IconElement\n endIcon?: IconElement\n icon?: never\n} & (AutoWidthProps | AlignmentProps)\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n {\n as = 'div',\n variant,\n tone = 'normal',\n size = 'normal',\n shape = 'normal',\n disabled = false,\n loading = false,\n tooltip,\n onClick,\n exceptionallySetClassName,\n children,\n startIcon,\n endIcon,\n icon,\n width = 'auto',\n align = 'center',\n ...props\n },\n ref,\n) {\n const isDisabled = loading || disabled\n const buttonElement = (\n <Box\n {...props}\n as={as}\n ref={ref}\n aria-disabled={isDisabled}\n onClick={isDisabled ? preventDefault : onClick}\n width={icon ? undefined : width}\n className={[\n exceptionallySetClassName,\n styles.baseButton,\n styles[`variant-${variant}`],\n styles[`tone-${tone}`],\n styles[`size-${size}`],\n shape === 'rounded' ? styles['shape-rounded'] : null,\n icon ? styles.iconButton : null,\n disabled ? styles.disabled : null,\n ]}\n >\n {icon ? (\n (loading && <Spinner />) || icon\n ) : (\n <>\n {startIcon ? (\n <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n {loading && !endIcon ? <Spinner /> : startIcon}\n </Box>\n ) : null}\n {children ? (\n <Box\n as=\"span\"\n className={styles.label}\n overflow=\"hidden\"\n width={width === 'full' ? 'full' : undefined}\n textAlign={width === 'auto' ? 'center' : align}\n >\n {children}\n </Box>\n ) : null}\n {endIcon || (loading && !startIcon) ? (\n <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n {loading ? <Spinner /> : endIcon}\n </Box>\n ) : null}\n </>\n )}\n </Box>\n )\n\n // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n const tooltipContent = icon && tooltip === undefined ? props['aria-label'] : tooltip\n return tooltipContent ? (\n <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n ) : (\n buttonElement\n )\n})\n"],"names":["preventDefault","event","polymorphicComponent","ref","as","variant","tone","size","shape","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align","props","isDisabled","buttonElement","React","Box","undefined","className","styles","baseButton","iconButton","Spinner","display","label","overflow","textAlign","tooltipContent","Tooltip","content"],"mappings":"6eAOA,SAASA,EAAeC,GACpBA,EAAMD,oCA4FgBE,wBAA6C,WAoBnEC,OAnBAC,GACIA,EAAK,MADTC,QAEIA,EAFJC,KAGIA,EAAO,SAHXC,KAIIA,EAAO,SAJXC,MAKIA,EAAQ,SALZC,SAMIA,GAAW,EANfC,QAOIA,GAAU,UACVC,EARJC,QASIA,EATJC,0BAUIA,EAVJC,SAWIA,EAXJC,UAYIA,EAZJC,QAaIA,EAbJC,KAcIA,EAdJC,MAeIA,EAAQ,OAfZC,MAgBIA,EAAQ,YACLC,iCAIP,MAAMC,EAAaX,GAAWD,EACxBa,EACFC,gBAACC,yCACOJ,OACJhB,GAAIA,EACJD,IAAKA,kBACUkB,EACfT,QAASS,EAAarB,EAAiBY,EACvCM,MAAOD,OAAOQ,EAAYP,EAC1BQ,UAAW,CACPb,EACAc,UAAOC,WACPD,qBAAkBtB,GAClBsB,kBAAerB,GACfqB,kBAAepB,GACL,YAAVC,EAAsBmB,UAAO,iBAAmB,KAChDV,EAAOU,UAAOE,WAAa,KAC3BpB,EAAWkB,UAAOlB,SAAW,QAGhCQ,EACIP,GAAWa,gBAACO,iBAAeb,EAE5BM,gCACKR,EACGQ,gBAACC,OAAIO,QAAQ,OAAOL,UAAWC,UAAOZ,4BACjCL,IAAYM,EAAUO,gBAACO,gBAAaf,GAEzC,KACHD,EACGS,gBAACC,OACGpB,GAAG,OACHsB,UAAWC,UAAOK,MAClBC,SAAS,SACTf,MAAiB,SAAVA,EAAmB,YAASO,EACnCS,UAAqB,SAAVhB,EAAmB,SAAWC,GAExCL,GAEL,KACHE,GAAYN,IAAYK,EACrBQ,gBAACC,OAAIO,QAAQ,OAAOL,UAAWC,UAAOX,0BACjCN,EAAUa,gBAACO,gBAAad,GAE7B,OAOdmB,EAAiBlB,QAAoBQ,IAAZd,EAAwBS,EAAM,cAAgBT,EAC7E,OAAOwB,EACHZ,gBAACa,WAAQC,QAASF,GAAiBb,GAEnCA"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={baseButton:"_8313bd46",label:"_0051d171","shape-rounded":"_8eb8f0fa","size-small":"_8b7f1a82","size-normal":"_5e45d59f","size-large":"_95951888",disabled:"_43792df1",iconButton:"_8644eccb",startIcon:"a44d4350",endIcon:"_073e1aa4","variant-primary":"_7a4dbd5f","variant-secondary":"_54d56775","variant-tertiary":"_907a61ca","variant-quaternary":"f169a390","tone-destructive":"ccb3eb8c"};
2
- //# sourceMappingURL=base-button.module.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"base-button.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1 +0,0 @@
1
- export * from './base-button';
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- import { ButtonLinkProps } from './button-link';
3
- declare function ButtonLinkStoryWrapper(props: ButtonLinkProps): JSX.Element;
4
- declare namespace ButtonLinkStoryWrapper {
5
- var displayName: string;
6
- }
7
- export { ButtonLinkStoryWrapper as ButtonLink };
@@ -1,13 +0,0 @@
1
- /// <reference types="react" />
2
- import type { BaseButtonProps } from '../base-button';
3
- import type { OpenInNewTab } from '../utils/common-types';
4
- declare type NativeLinkProps = Omit<JSX.IntrinsicElements['a'], 'aria-disabled' | 'target' | 'rel' | 'className'>;
5
- export declare type ButtonLinkProps = NativeLinkProps & BaseButtonProps & OpenInNewTab;
6
- /**
7
- * A semantic link that looks like a button, exactly matching the `Button` component in all visual
8
- * aspects.
9
- *
10
- * @see Button
11
- */
12
- export declare const ButtonLink: import("../utils/polymorphism").PolymorphicComponent<"a", ButtonLinkProps, "obfuscateClassName">;
13
- export {};
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../utils/polymorphism.js"),o=require("../base-button/base-button.js");const a=["as","variant","tone","size","exceptionallySetClassName","openInNewTab"];exports.ButtonLink=r.polymorphicComponent((function(r,n){let{as:s="a",variant:i,tone:l="normal",size:p="normal",exceptionallySetClassName:u,openInNewTab:c=!1}=r,b=e.objectWithoutProperties(r,a);return t.createElement(o.BaseButton,e.objectSpread2(e.objectSpread2({},b),{},{as:s,ref:n,variant:i,tone:l,size:p,exceptionallySetClassName:u,target:c?"_blank":void 0,rel:c?"noopener noreferrer":void 0}))}));
2
- //# sourceMappingURL=button-link.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"button-link.js","sources":["../../src/button-link/button-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\nimport type { OpenInNewTab } from '../utils/common-types'\n\ntype NativeLinkProps = Omit<\n JSX.IntrinsicElements['a'],\n 'aria-disabled' | 'target' | 'rel' | 'className'\n>\n\nexport type ButtonLinkProps = NativeLinkProps & BaseButtonProps & OpenInNewTab\n\n/**\n * A semantic link that looks like a button, exactly matching the `Button` component in all visual\n * aspects.\n *\n * @see Button\n */\nexport const ButtonLink = polymorphicComponent<'a', ButtonLinkProps>(function ButtonLink(\n {\n as = 'a',\n variant,\n tone = 'normal',\n size = 'normal',\n exceptionallySetClassName,\n openInNewTab = false,\n ...props\n },\n ref,\n) {\n return (\n <BaseButton\n {...props}\n as={as}\n ref={ref}\n variant={variant}\n tone={tone}\n size={size}\n exceptionallySetClassName={exceptionallySetClassName}\n target={openInNewTab ? '_blank' : undefined}\n rel={openInNewTab ? 'noopener noreferrer' : undefined}\n />\n )\n})\n"],"names":["polymorphicComponent","ref","as","variant","tone","size","exceptionallySetClassName","openInNewTab","props","React","BaseButton","target","undefined","rel"],"mappings":"uUAmB0BA,wBAA2C,WAUjEC,OATAC,GACIA,EAAK,IADTC,QAEIA,EAFJC,KAGIA,EAAO,SAHXC,KAIIA,EAAO,SAJXC,0BAKIA,EALJC,aAMIA,GAAe,KACZC,iCAIP,OACIC,gBAACC,gDACOF,OACJN,GAAIA,EACJD,IAAKA,EACLE,QAASA,EACTC,KAAMA,EACNC,KAAMA,EACNC,0BAA2BA,EAC3BK,OAAQJ,EAAe,cAAWK,EAClCC,IAAKN,EAAe,2BAAwBK"}
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export * from './button-link';
@@ -1 +0,0 @@
1
- :root{--reactist-button-small-font-size:var(--reactist-font-size-caption);--reactist-button-small-spacing:var(--reactist-spacing-small);--reactist-button-small-height:28px;--reactist-button-normal-font-size:var(--reactist-font-size-copy);--reactist-button-normal-spacing:var(--reactist-spacing-medium);--reactist-button-normal-height:32px;--reactist-button-large-font-size:var(--reactist-font-size-body);--reactist-button-large-spacing:var(--reactist-spacing-large);--reactist-button-large-height:36px;--reactist-actionable-primary-idle-tint:#fff;--reactist-actionable-primary-idle-fill:#008aa6;--reactist-actionable-primary-hover-tint:#fff;--reactist-actionable-primary-hover-fill:#007992;--reactist-actionable-primary-disabled-tint:#fff;--reactist-actionable-primary-disabled-fill:#99d0db;--reactist-actionable-secondary-idle-tint:#282f30;--reactist-actionable-secondary-idle-fill:#f2f6f7;--reactist-actionable-secondary-hover-tint:#282f30;--reactist-actionable-secondary-hover-fill:#e3e7e8;--reactist-actionable-secondary-disabled-tint:#a9acac;--reactist-actionable-secondary-disabled-fill:#f2f6f7;--reactist-actionable-tertiary-idle-tint:#006f85;--reactist-actionable-tertiary-hover-tint:#006f85;--reactist-actionable-tertiary-hover-fill:#f2f6f7;--reactist-actionable-tertiary-disabled-tint:#99c5ce;--reactist-actionable-quaternary-idle-tint:#6c777a;--reactist-actionable-quaternary-hover-tint:#282f30;--reactist-actionable-quaternary-hover-fill:#e0e7e8;--reactist-actionable-quaternary-disabled-tint:#c4c9ca;--reactist-actionable-primary-destructive-idle-tint:#fff;--reactist-actionable-primary-destructive-idle-fill:#dc4c3e;--reactist-actionable-primary-destructive-hover-tint:#fff;--reactist-actionable-primary-destructive-hover-fill:#b03d32;--reactist-actionable-primary-destructive-disabled-tint:#fff;--reactist-actionable-primary-destructive-disabled-fill:#f1b7b2;--reactist-actionable-secondary-destructive-idle-tint:#dc4c3e;--reactist-actionable-secondary-destructive-hover-tint:#b03d32;--reactist-actionable-secondary-destructive-hover-fill:transparent;--reactist-actionable-secondary-destructive-disabled-tint:#f1b7b2}._8313bd46{max-width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;background-color:transparent;border-radius:var(--reactist-border-radius-small);white-space:nowrap;font-family:var(--reactist-font-family);font-weight:var(--reactist-font-weight-medium);text-decoration:none;border:1px solid transparent;transition-duration:.3s;transition-property:color,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}._0051d171{text-overflow:ellipsis;white-space:nowrap;font-size:inherit}._8313bd46:active:not([aria-disabled=true]){transform:scale(.97);transition:transform .2s cubic-bezier(.02,1.505,.745,1.235)}._8313bd46{padding:0 var(--reactist-btn-spacing);font-size:var(--reactist-btn-font-size);height:var(--reactist-btn-height);line-height:var(--reactist-btn-height);--reactist-spinner-tint:var(--reactist-btn-idle-tint);--reactist-spinner-fill:var(--reactist-btn-idle-fill)}._8313bd46._8eb8f0fa{border-radius:1000px}._8313bd46._8b7f1a82{--reactist-btn-height:var(--reactist-button-small-height);--reactist-btn-spacing:var(--reactist-button-small-spacing);--reactist-btn-font-size:var(--reactist-button-small-font-size)}._8313bd46._5e45d59f{--reactist-btn-height:var(--reactist-button-normal-height);--reactist-btn-spacing:var(--reactist-button-normal-spacing);--reactist-btn-font-size:var(--reactist-button-normal-font-size)}._8313bd46._95951888{--reactist-btn-height:var(--reactist-button-large-height);--reactist-btn-spacing:var(--reactist-button-large-spacing);--reactist-btn-font-size:var(--reactist-button-large-font-size)}._8313bd46:not(._43792df1){color:var(--reactist-btn-idle-tint);background-color:var(--reactist-btn-idle-fill)}._8313bd46:focus-visible:not([aria-disabled=true]),._8313bd46:hover:not([aria-disabled=true]),._8313bd46[aria-expanded=true]{color:var(--reactist-btn-hover-tint);background-color:var(--reactist-btn-hover-fill)}._8313bd46._43792df1{cursor:not-allowed;color:var(--reactist-btn-disabled-tint);background-color:var(--reactist-btn-disabled-fill)}._8313bd46:not(._8644eccb){min-width:68px}._8313bd46._8644eccb{width:var(--reactist-btn-height);height:var(--reactist-btn-height);padding:0}._8313bd46 .a44d4350{margin-right:calc(var(--reactist-btn-spacing) - 6px);margin-left:-6px}._8313bd46 ._073e1aa4{margin-left:calc(var(--reactist-btn-spacing) - 6px);margin-right:-6px}._8313bd46>*{pointer-events:none}._7a4dbd5f{--reactist-btn-idle-tint:var(--reactist-actionable-primary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-disabled-fill)}._54d56775{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-secondary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-secondary-disabled-fill)}._907a61ca{--reactist-btn-idle-tint:var(--reactist-actionable-tertiary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-tertiary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-tertiary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-tertiary-disabled-tint)}.f169a390,._907a61ca{--reactist-btn-idle-fill:transparent;--reactist-btn-disabled-fill:transparent}.f169a390{--reactist-btn-idle-tint:var(--reactist-actionable-quaternary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-quaternary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-quaternary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-quaternary-disabled-tint)}._7a4dbd5f.ccb3eb8c{--reactist-btn-idle-tint:var(--reactist-actionable-primary-destructive-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-destructive-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-destructive-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-destructive-disabled-fill)}._54d56775.ccb3eb8c{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-idle-fill:transparent;--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint);--reactist-btn-disabled-fill:transparent;border-color:var(--reactist-btn-idle-tint)}._54d56775.ccb3eb8c:hover{border-color:var(--reactist-btn-hover-tint)}._54d56775.ccb3eb8c._43792df1{border-color:var(--reactist-btn-disabled-tint)}.f169a390.ccb3eb8c,._907a61ca.ccb3eb8c{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint)}