@doist/reactist 19.0.1 → 19.1.1
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.
- package/README.md +14 -0
- package/dist/reactist.cjs.development.js +127 -71
- package/dist/reactist.cjs.development.js.map +1 -1
- package/dist/reactist.cjs.production.min.js +1 -1
- package/dist/reactist.cjs.production.min.js.map +1 -1
- package/es/index.js +1 -0
- package/es/index.js.map +1 -1
- package/es/new-components/banner/banner.js +61 -0
- package/es/new-components/banner/banner.js.map +1 -0
- package/es/new-components/banner/banner.module.css.js +4 -0
- package/es/new-components/banner/banner.module.css.js.map +1 -0
- package/es/new-components/base-field/base-field.js +1 -1
- package/es/new-components/spinner/spinner.js +2 -1
- package/es/new-components/spinner/spinner.js.map +1 -1
- package/es/new-components/switch-field/switch-field.js +1 -1
- package/es/new-components/toast/use-toasts.js +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -1
- package/lib/new-components/banner/banner.d.ts +28 -0
- package/lib/new-components/banner/banner.js +2 -0
- package/lib/new-components/banner/banner.js.map +1 -0
- package/lib/new-components/banner/banner.module.css.js +2 -0
- package/lib/new-components/banner/banner.module.css.js.map +1 -0
- package/lib/new-components/banner/banner.test.d.ts +1 -0
- package/lib/new-components/banner/index.d.ts +2 -0
- package/lib/new-components/base-field/base-field.js +1 -1
- package/lib/new-components/spinner/spinner.js +1 -1
- package/lib/new-components/spinner/spinner.js.map +1 -1
- package/lib/new-components/switch-field/switch-field.js +1 -1
- package/lib/new-components/toast/use-toasts.js +1 -1
- package/package.json +5 -2
- package/styles/banner.css +7 -0
- package/styles/banner.module.css.css +1 -0
- package/styles/reactist.css +1 -0
package/es/index.js
CHANGED
|
@@ -8,6 +8,7 @@ export { HiddenVisually } from './new-components/hidden-visually/hidden-visually
|
|
|
8
8
|
export { Tooltip } from './new-components/tooltip/tooltip.js';
|
|
9
9
|
export { Button } from './new-components/button/button.js';
|
|
10
10
|
export { Alert } from './new-components/alert/alert.js';
|
|
11
|
+
export { Banner } from './new-components/banner/banner.js';
|
|
11
12
|
export { Loading } from './new-components/loading/loading.js';
|
|
12
13
|
export { Notice } from './new-components/notice/notice.js';
|
|
13
14
|
export { Text } from './new-components/text/text.js';
|
package/es/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
+
import { forwardRef, createElement } from 'react';
|
|
3
|
+
import { Box } from '../box/box.js';
|
|
4
|
+
import { Columns, Column } from '../columns/columns.js';
|
|
5
|
+
import { useId } from '../common-helpers.js';
|
|
6
|
+
import styles from './banner.module.css.js';
|
|
7
|
+
|
|
8
|
+
const _excluded = ["id", "tone", "icon", "title", "description", "action"];
|
|
9
|
+
const Banner = /*#__PURE__*/forwardRef(function Banner(_ref, ref) {
|
|
10
|
+
let {
|
|
11
|
+
id,
|
|
12
|
+
tone,
|
|
13
|
+
icon,
|
|
14
|
+
title,
|
|
15
|
+
description,
|
|
16
|
+
action
|
|
17
|
+
} = _ref,
|
|
18
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
19
|
+
|
|
20
|
+
const titleId = useId();
|
|
21
|
+
const descriptionId = useId();
|
|
22
|
+
return /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
23
|
+
ref: ref,
|
|
24
|
+
id: id,
|
|
25
|
+
role: "status",
|
|
26
|
+
"aria-labelledby": titleId,
|
|
27
|
+
"aria-describedby": descriptionId,
|
|
28
|
+
"aria-live": "polite",
|
|
29
|
+
tabIndex: 0,
|
|
30
|
+
borderRadius: "standard",
|
|
31
|
+
className: [styles.banner, styles["banner-" + tone]]
|
|
32
|
+
}), /*#__PURE__*/createElement(Columns, {
|
|
33
|
+
space: "medium",
|
|
34
|
+
alignY: "center"
|
|
35
|
+
}, /*#__PURE__*/createElement(Column, {
|
|
36
|
+
width: "content",
|
|
37
|
+
"aria-hidden": true,
|
|
38
|
+
style: {
|
|
39
|
+
/* Make sure the icon is centered vertically */
|
|
40
|
+
lineHeight: 0
|
|
41
|
+
}
|
|
42
|
+
}, icon), /*#__PURE__*/createElement(Column, null, /*#__PURE__*/createElement(Box, {
|
|
43
|
+
paddingY: "xsmall"
|
|
44
|
+
}, description ? /*#__PURE__*/createElement(Box, {
|
|
45
|
+
id: titleId,
|
|
46
|
+
className: [styles.title, styles["title-" + tone]]
|
|
47
|
+
}, title) : /*#__PURE__*/createElement(Box, {
|
|
48
|
+
id: titleId,
|
|
49
|
+
className: [styles.title, // If the banner does not have a description, we need to slightly tweak
|
|
50
|
+
// the styling of the title applying an extra css class
|
|
51
|
+
styles["title-without-description"], styles["title-" + tone]]
|
|
52
|
+
}, title), description ? /*#__PURE__*/createElement(Box, {
|
|
53
|
+
id: descriptionId,
|
|
54
|
+
className: [styles.description, styles["description-" + tone]]
|
|
55
|
+
}, description) : null)), action ? /*#__PURE__*/createElement(Column, {
|
|
56
|
+
width: "content"
|
|
57
|
+
}, action) : null));
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
export { Banner };
|
|
61
|
+
//# sourceMappingURL=banner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"banner.js","sources":["../../../src/new-components/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { useId } from '../common-helpers'\n\nimport styles from './banner.module.css'\n\nexport type BannerTone = 'info' | 'promotion'\n\ntype BannerProps = {\n id?: string\n /**\n * The tone of the Banner. Affects the background color and the outline.\n */\n tone: BannerTone\n /**\n * The icon that should be added inside the Banner.\n */\n icon: React.ReactChild\n /**\n * The title to be displayed at the top of the Banner.\n */\n title: React.ReactNode\n /**\n * An optional description to be displayed inside the Banner.\n */\n description?: React.ReactNode\n /**\n * An optional action to displayed inside the Banner.\n */\n action?: React.ReactChild\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n { id, tone, icon, title, description, action, ...props }: BannerProps,\n ref,\n) {\n const titleId = useId()\n const descriptionId = useId()\n return (\n <Box\n {...props}\n ref={ref}\n id={id}\n role=\"status\"\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n aria-live=\"polite\"\n tabIndex={0}\n borderRadius=\"standard\"\n className={[styles.banner, styles[`banner-${tone}`]]}\n >\n <Columns space=\"medium\" alignY=\"center\">\n <Column\n width=\"content\"\n aria-hidden\n style={{\n /* Make sure the icon is centered vertically */\n lineHeight: 0,\n }}\n >\n {icon}\n </Column>\n <Column>\n <Box paddingY=\"xsmall\">\n {description ? (\n <Box id={titleId} className={[styles.title, styles[`title-${tone}`]]}>\n {title}\n </Box>\n ) : (\n <Box\n id={titleId}\n className={[\n styles.title,\n // If the banner does not have a description, we need to slightly tweak\n // the styling of the title applying an extra css class\n styles[`title-without-description`],\n styles[`title-${tone}`],\n ]}\n >\n {title}\n </Box>\n )}\n {description ? (\n <Box\n id={descriptionId}\n className={[styles.description, styles[`description-${tone}`]]}\n >\n {description}\n </Box>\n ) : null}\n </Box>\n </Column>\n {action ? <Column width=\"content\">{action}</Column> : null}\n </Columns>\n </Box>\n )\n})\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["Banner","React","ref","id","tone","icon","title","description","action","props","titleId","useId","descriptionId","Box","role","tabIndex","borderRadius","className","styles","banner","Columns","space","alignY","Column","width","style","lineHeight","paddingY"],"mappings":";;;;;;;;MAiCMA,MAAM,gBAAGC,UAAA,CAA8C,SAASD,MAAT,OAEzDE,GAFyD;MACzD;IAAEC,EAAF;IAAMC,IAAN;IAAYC,IAAZ;IAAkBC,KAAlB;IAAyBC,WAAzB;IAAsCC;;MAAWC;;EAGjD,MAAMC,OAAO,GAAGC,KAAK,EAArB;EACA,MAAMC,aAAa,GAAGD,KAAK,EAA3B;EACA,oBACIV,aAAA,CAACY,GAAD,oCACQJ,KADR;IAEIP,GAAG,EAAEA,GAFT;IAGIC,EAAE,EAAEA,EAHR;IAIIW,IAAI,EAAC,QAJT;uBAKqBJ,OALrB;wBAMsBE,aANtB;iBAOc,QAPd;IAQIG,QAAQ,EAAE,CARd;IASIC,YAAY,EAAC,UATjB;IAUIC,SAAS,EAAE,CAACC,MAAM,CAACC,MAAR,EAAgBD,MAAM,aAAWd,IAAX,CAAtB;mBAEXH,aAAA,CAACmB,OAAD;IAASC,KAAK,EAAC;IAASC,MAAM,EAAC;GAA/B,eACIrB,aAAA,CAACsB,MAAD;IACIC,KAAK,EAAC;;IAENC,KAAK,EAAE;;MAEHC,UAAU,EAAE;;GALpB,EAQKrB,IARL,CADJ,eAWIJ,aAAA,CAACsB,MAAD,MAAA,eACItB,aAAA,CAACY,GAAD;IAAKc,QAAQ,EAAC;GAAd,EACKpB,WAAW,gBACRN,aAAA,CAACY,GAAD;IAAKV,EAAE,EAAEO;IAASO,SAAS,EAAE,CAACC,MAAM,CAACZ,KAAR,EAAeY,MAAM,YAAUd,IAAV,CAArB;GAA7B,EACKE,KADL,CADQ,gBAKRL,aAAA,CAACY,GAAD;IACIV,EAAE,EAAEO;IACJO,SAAS,EAAE,CACPC,MAAM,CAACZ,KADA;;IAIPY,MAAM,6BAJC,EAKPA,MAAM,YAAUd,IAAV,CALC;GAFf,EAUKE,KAVL,CANR,EAmBKC,WAAW,gBACRN,aAAA,CAACY,GAAD;IACIV,EAAE,EAAES;IACJK,SAAS,EAAE,CAACC,MAAM,CAACX,WAAR,EAAqBW,MAAM,kBAAgBd,IAAhB,CAA3B;GAFf,EAIKG,WAJL,CADQ,GAOR,IA1BR,CADJ,CAXJ,EAyCKC,MAAM,gBAAGP,aAAA,CAACsB,MAAD;IAAQC,KAAK,EAAC;GAAd,EAAyBhB,MAAzB,CAAH,GAA+C,IAzC1D,CAZJ,CADJ;AA0DH,CAhEc;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var modules_afa80466 = {"banner":"c1dffd60","banner-info":"_9d552538","banner-promotion":"d797752e","title":"_8cd610da","title-without-description":"_78ea5373","title-info":"_319c73fa","title-promotion":"fc84253f","description":"af4bd758","description-info":"b95a8c07","description-promotion":"_3c33f615"};
|
|
2
|
+
|
|
3
|
+
export default modules_afa80466;
|
|
4
|
+
//# sourceMappingURL=banner.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"banner.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -3,8 +3,8 @@ import { createElement } from 'react';
|
|
|
3
3
|
import { Box } from '../box/box.js';
|
|
4
4
|
import { Stack } from '../stack/stack.js';
|
|
5
5
|
import { Spinner } from '../spinner/spinner.js';
|
|
6
|
-
import { Text } from '../text/text.js';
|
|
7
6
|
import { useId } from '../common-helpers.js';
|
|
7
|
+
import { Text } from '../text/text.js';
|
|
8
8
|
import styles from './base-field.module.css.js';
|
|
9
9
|
|
|
10
10
|
function FieldHint(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.js","sources":["../../../src/new-components/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size = 24 }: { size?: number }) {\n return (\n <svg
|
|
1
|
+
{"version":3,"file":"spinner.js","sources":["../../../src/new-components/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size = 24 }: { size?: number }) {\n return (\n <svg\n aria-hidden\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n className={styles.svg}\n data-chromatic=\"ignore\"\n >\n <g fill=\"none\" fillRule=\"nonzero\">\n <path\n className={styles.tint}\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 className={styles.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\"\n />\n </g>\n </svg>\n )\n}\n\nexport { Spinner }\n"],"names":["Spinner","size","React","width","height","viewBox","className","styles","svg","fill","fillRule","tint","d"],"mappings":";;;AAGA,SAASA,OAAT,CAAiB;EAAEC,IAAI,GAAG;AAAT,CAAjB;EACI,oBACIC,aAAA,MAAA;;IAEIC,KAAK,EAAEF;IACPG,MAAM,EAAEH;IACRI,OAAO,EAAC;IACRC,SAAS,EAAEC,MAAM,CAACC;sBACH;GANnB,eAQIN,aAAA,IAAA;IAAGO,IAAI,EAAC;IAAOC,QAAQ,EAAC;GAAxB,eACIR,aAAA,OAAA;IACII,SAAS,EAAEC,MAAM,CAACI;IAClBC,CAAC,EAAC;GAFN,CADJ,eAKIV,aAAA,OAAA;IACII,SAAS,EAAEC,MAAM,CAACE;IAClBG,CAAC,EAAC;GAFN,CALJ,CARJ,CADJ;AAqBH;;;;"}
|
|
@@ -3,8 +3,8 @@ import { forwardRef, useState, createElement } from 'react';
|
|
|
3
3
|
import { Box } from '../box/box.js';
|
|
4
4
|
import { Stack } from '../stack/stack.js';
|
|
5
5
|
import { HiddenVisually } from '../hidden-visually/hidden-visually.js';
|
|
6
|
-
import { Text } from '../text/text.js';
|
|
7
6
|
import { useId } from '../common-helpers.js';
|
|
7
|
+
import { Text } from '../text/text.js';
|
|
8
8
|
import { FieldHint } from '../base-field/base-field.js';
|
|
9
9
|
import styles from './switch-field.module.css.js';
|
|
10
10
|
|
|
@@ -2,10 +2,10 @@ import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWith
|
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
import { Box } from '../box/box.js';
|
|
4
4
|
import { Stack } from '../stack/stack.js';
|
|
5
|
+
import { generateElementId } from '../common-helpers.js';
|
|
5
6
|
import styles from './toast.module.css.js';
|
|
6
7
|
import { StaticToast } from './static-toast.js';
|
|
7
8
|
import { Portal } from 'ariakit/portal';
|
|
8
|
-
import { generateElementId } from '../common-helpers.js';
|
|
9
9
|
import { useToastsAnimation } from './toast-animation.js';
|
|
10
10
|
|
|
11
11
|
const _excluded = ["toastId"];
|
package/lib/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export * from './new-components/stack';
|
|
|
7
7
|
export * from './new-components/hidden';
|
|
8
8
|
export * from './new-components/hidden-visually';
|
|
9
9
|
export * from './new-components/alert';
|
|
10
|
+
export * from './new-components/banner';
|
|
10
11
|
export * from './new-components/loading';
|
|
11
12
|
export * from './new-components/notice';
|
|
12
13
|
export * from './new-components/toast';
|
package/lib/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./new-components/box/box.js"),o=require("./new-components/columns/columns.js"),t=require("./new-components/divider/divider.js"),r=require("./new-components/inline/inline.js"),s=require("./new-components/stack/stack.js"),n=require("./new-components/hidden/hidden.js"),i=require("./new-components/hidden-visually/hidden-visually.js"),p=require("./new-components/tooltip/tooltip.js"),a=require("./new-components/button/button.js"),d=require("./new-components/alert/alert.js"),u=require("./new-components/loading/loading.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./new-components/box/box.js"),o=require("./new-components/columns/columns.js"),t=require("./new-components/divider/divider.js"),r=require("./new-components/inline/inline.js"),s=require("./new-components/stack/stack.js"),n=require("./new-components/hidden/hidden.js"),i=require("./new-components/hidden-visually/hidden-visually.js"),p=require("./new-components/tooltip/tooltip.js"),a=require("./new-components/button/button.js"),d=require("./new-components/alert/alert.js"),u=require("./new-components/banner/banner.js"),c=require("./new-components/loading/loading.js"),l=require("./new-components/notice/notice.js"),x=require("./new-components/text/text.js"),m=require("./new-components/toast/static-toast.js"),j=require("./new-components/toast/use-toasts.js"),q=require("./new-components/heading/heading.js"),w=require("./new-components/button-link/button-link.js"),M=require("./new-components/text-link/text-link.js"),b=require("./new-components/checkbox-field/checkbox-field.js"),T=require("./new-components/password-field/password-field.js"),k=require("./new-components/select-field/select-field.js"),f=require("./new-components/switch-field/switch-field.js"),D=require("./new-components/text-area/text-area.js"),B=require("./new-components/text-field/text-field.js"),S=require("./new-components/avatar/avatar.js"),g=require("./new-components/badge/badge.js"),v=require("./new-components/modal/modal.js"),h=require("./hooks/use-previous/use-previous.js"),C=require("./new-components/tabs/tabs.js"),y=require("./new-components/menu/menu.js"),P=require("./components/deprecated-button/index.js"),F=require("./components/deprecated-dropdown/index.js"),A=require("./components/color-picker/color-picker.js"),L=require("./components/color-picker/index.js"),H=require("./components/keyboard-shortcut/index.js"),O=require("./components/key-capturer/key-capturer.js"),I=require("./components/key-capturer/index.js"),E=require("./components/progress-bar/index.js"),K=require("./components/time/index.js"),N=require("./components/deprecated-input/index.js"),R=require("./components/deprecated-select/index.js"),_=require("./components/deprecated-notification/deprecated-notification.js"),G=require("./new-components/deprecated-modal/modal.js");exports.Box=e.Box,exports.Column=o.Column,exports.Columns=o.Columns,exports.Divider=t.Divider,exports.Inline=r.Inline,exports.Stack=s.Stack,exports.Hidden=n.Hidden,exports.HiddenVisually=i.HiddenVisually,exports.Tooltip=p.Tooltip,exports.Button=a.Button,exports.Alert=d.Alert,exports.Banner=u.Banner,exports.Loading=c.Loading,exports.Notice=l.Notice,exports.Text=x.Text,exports.StaticToast=m.StaticToast,exports.Toast=j.Toast,exports.ToastsProvider=j.ToastsProvider,exports.useToasts=j.useToasts,exports.Heading=q.Heading,exports.ButtonLink=w.ButtonLink,exports.TextLink=M.TextLink,exports.CheckboxField=b.CheckboxField,exports.PasswordField=T.PasswordField,exports.SelectField=k.SelectField,exports.SwitchField=f.SwitchField,exports.TextArea=D.TextArea,exports.TextField=B.TextField,exports.Avatar=S.Avatar,exports.Badge=g.Badge,exports.Modal=v.Modal,exports.ModalActions=v.ModalActions,exports.ModalBody=v.ModalBody,exports.ModalCloseButton=v.ModalCloseButton,exports.ModalFooter=v.ModalFooter,exports.ModalHeader=v.ModalHeader,exports.usePrevious=h.usePrevious,exports.Tab=C.Tab,exports.TabAwareSlot=C.TabAwareSlot,exports.TabList=C.TabList,exports.TabPanel=C.TabPanel,exports.Tabs=C.Tabs,exports.ContextMenuTrigger=y.ContextMenuTrigger,exports.Menu=y.Menu,exports.MenuButton=y.MenuButton,exports.MenuGroup=y.MenuGroup,exports.MenuItem=y.MenuItem,exports.MenuList=y.MenuList,exports.SubMenu=y.SubMenu,exports.DeprecatedButton=P.default,exports.DeprecatedDropdown=F.default,exports.COLORS=A.COLORS,exports.ColorPicker=L.default,exports.KeyboardShortcut=H.default,exports.SUPPORTED_KEYS=O.SUPPORTED_KEYS,exports.KeyCapturer=I.default,exports.ProgressBar=E.default,exports.Time=K.default,exports.DeprecatedInput=N.default,exports.DeprecatedSelect=R.default,exports.DeprecatedNotification=_.DeprecatedNotification,exports.DeprecatedModal=G.DeprecatedModal,exports.DeprecatedModalActions=G.DeprecatedModalActions,exports.DeprecatedModalBody=G.DeprecatedModalBody,exports.DeprecatedModalCloseButton=G.DeprecatedModalCloseButton,exports.DeprecatedModalFooter=G.DeprecatedModalFooter,exports.DeprecatedModalHeader=G.DeprecatedModalHeader;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export declare type BannerTone = 'info' | 'promotion';
|
|
3
|
+
declare type BannerProps = {
|
|
4
|
+
id?: string;
|
|
5
|
+
/**
|
|
6
|
+
* The tone of the Banner. Affects the background color and the outline.
|
|
7
|
+
*/
|
|
8
|
+
tone: BannerTone;
|
|
9
|
+
/**
|
|
10
|
+
* The icon that should be added inside the Banner.
|
|
11
|
+
*/
|
|
12
|
+
icon: React.ReactChild;
|
|
13
|
+
/**
|
|
14
|
+
* The title to be displayed at the top of the Banner.
|
|
15
|
+
*/
|
|
16
|
+
title: React.ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* An optional description to be displayed inside the Banner.
|
|
19
|
+
*/
|
|
20
|
+
description?: React.ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* An optional action to displayed inside the Banner.
|
|
23
|
+
*/
|
|
24
|
+
action?: React.ReactChild;
|
|
25
|
+
};
|
|
26
|
+
declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
|
|
27
|
+
export { Banner };
|
|
28
|
+
export type { BannerProps };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../box/box.js"),r=require("../columns/columns.js"),a=require("../common-helpers.js"),i=require("./banner.module.css.js");const n=["id","tone","icon","title","description","action"];exports.Banner=t.forwardRef((function(o,d){let{id:s,tone:u,icon:c,title:m,description:p,action:b}=o,f=e.objectWithoutProperties(o,n);const x=a.useId(),j=a.useId();return t.createElement(l.Box,e.objectSpread2(e.objectSpread2({},f),{},{ref:d,id:s,role:"status","aria-labelledby":x,"aria-describedby":j,"aria-live":"polite",tabIndex:0,borderRadius:"standard",className:[i.default.banner,i.default["banner-"+u]]}),t.createElement(r.Columns,{space:"medium",alignY:"center"},t.createElement(r.Column,{width:"content","aria-hidden":!0,style:{lineHeight:0}},c),t.createElement(r.Column,null,t.createElement(l.Box,{paddingY:"xsmall"},t.createElement(l.Box,p?{id:x,className:[i.default.title,i.default["title-"+u]]}:{id:x,className:[i.default.title,i.default["title-without-description"],i.default["title-"+u]]},m),p?t.createElement(l.Box,{id:j,className:[i.default.description,i.default["description-"+u]]},p):null)),b?t.createElement(r.Column,{width:"content"},b):null))}));
|
|
2
|
+
//# sourceMappingURL=banner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"banner.js","sources":["../../../src/new-components/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { useId } from '../common-helpers'\n\nimport styles from './banner.module.css'\n\nexport type BannerTone = 'info' | 'promotion'\n\ntype BannerProps = {\n id?: string\n /**\n * The tone of the Banner. Affects the background color and the outline.\n */\n tone: BannerTone\n /**\n * The icon that should be added inside the Banner.\n */\n icon: React.ReactChild\n /**\n * The title to be displayed at the top of the Banner.\n */\n title: React.ReactNode\n /**\n * An optional description to be displayed inside the Banner.\n */\n description?: React.ReactNode\n /**\n * An optional action to displayed inside the Banner.\n */\n action?: React.ReactChild\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n { id, tone, icon, title, description, action, ...props }: BannerProps,\n ref,\n) {\n const titleId = useId()\n const descriptionId = useId()\n return (\n <Box\n {...props}\n ref={ref}\n id={id}\n role=\"status\"\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n aria-live=\"polite\"\n tabIndex={0}\n borderRadius=\"standard\"\n className={[styles.banner, styles[`banner-${tone}`]]}\n >\n <Columns space=\"medium\" alignY=\"center\">\n <Column\n width=\"content\"\n aria-hidden\n style={{\n /* Make sure the icon is centered vertically */\n lineHeight: 0,\n }}\n >\n {icon}\n </Column>\n <Column>\n <Box paddingY=\"xsmall\">\n {description ? (\n <Box id={titleId} className={[styles.title, styles[`title-${tone}`]]}>\n {title}\n </Box>\n ) : (\n <Box\n id={titleId}\n className={[\n styles.title,\n // If the banner does not have a description, we need to slightly tweak\n // the styling of the title applying an extra css class\n styles[`title-without-description`],\n styles[`title-${tone}`],\n ]}\n >\n {title}\n </Box>\n )}\n {description ? (\n <Box\n id={descriptionId}\n className={[styles.description, styles[`description-${tone}`]]}\n >\n {description}\n </Box>\n ) : null}\n </Box>\n </Column>\n {action ? <Column width=\"content\">{action}</Column> : null}\n </Columns>\n </Box>\n )\n})\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["React","ref","id","tone","icon","title","description","action","props","titleId","useId","descriptionId","Box","role","tabIndex","borderRadius","className","styles","banner","Columns","space","alignY","Column","width","style","lineHeight","paddingY"],"mappings":"mWAiCeA,cAA8C,WAEzDC,OADAC,GAAEA,EAAFC,KAAMA,EAANC,KAAYA,EAAZC,MAAkBA,EAAlBC,YAAyBA,EAAzBC,OAAsCA,KAAWC,iCAGjD,MAAMC,EAAUC,UACVC,EAAgBD,UACtB,OACIV,gBAACY,yCACOJ,OACJP,IAAKA,EACLC,GAAIA,EACJW,KAAK,2BACYJ,qBACCE,cACR,SACVG,SAAU,EACVC,aAAa,WACbC,UAAW,CAACC,UAAOC,OAAQD,oBAAiBd,MAE5CH,gBAACmB,WAAQC,MAAM,SAASC,OAAO,UAC3BrB,gBAACsB,UACGC,MAAM,2BAENC,MAAO,CAEHC,WAAY,IAGfrB,GAELJ,gBAACsB,cACGtB,gBAACY,OAAIc,SAAS,UAEN1B,gBAACY,MADJN,GACQJ,GAAIO,EAASO,UAAW,CAACC,UAAOZ,MAAOY,mBAAgBd,MAKxDD,GAAIO,EACJO,UAAW,CACPC,UAAOZ,MAGPY,uCACAA,mBAAgBd,KAVnBE,GAgBRC,EACGN,gBAACY,OACGV,GAAIS,EACJK,UAAW,CAACC,UAAOX,YAAaW,yBAAsBd,KAErDG,GAEL,OAGXC,EAASP,gBAACsB,UAAOC,MAAM,WAAWhB,GAAmB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={banner:"c1dffd60","banner-info":"_9d552538","banner-promotion":"d797752e",title:"_8cd610da","title-without-description":"_78ea5373","title-info":"_319c73fa","title-promotion":"fc84253f",description:"af4bd758","description-info":"b95a8c07","description-promotion":"_3c33f615"};
|
|
2
|
+
//# sourceMappingURL=banner.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"banner.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),r=require("../stack/stack.js"),t=require("../spinner/spinner.js"),n=require("../
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),r=require("../stack/stack.js"),t=require("../spinner/spinner.js"),n=require("../common-helpers.js"),i=require("../text/text.js"),s=require("./base-field.module.css.js");function d(a){return l.createElement(i.Text,e.objectSpread2({as:"p",tone:"secondary",size:"copy"},a))}function o(a){return l.createElement("svg",e.objectSpread2({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a),l.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",fill:"currentColor"}))}function c({id:e,children:r,tone:n}){return l.createElement(i.Text,{as:"p",tone:"error"===n?"danger":"success"===n?"positive":"normal",size:"copy",id:e},l.createElement(a.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:s.default.messageIcon},"loading"===n?l.createElement(t.Spinner,{size:16}):l.createElement(o,{"aria-hidden":!0})),r)}exports.BaseField=function({variant:e="default",label:t,secondaryLabel:o,auxiliaryLabel:u,hint:m,message:p,tone:x="neutral",className:b,children:f,maxWidth:C,hidden:E,"aria-describedby":h,id:y}){const g=n.useId(y),j=n.useId(),v=n.useId(),B={id:g,"aria-describedby":null!=h?h:[p?v:null,j].filter(Boolean).join(" "),"aria-invalid":"error"===x||void 0};return l.createElement(r.Stack,{space:"small",hidden:E},l.createElement(a.Box,{className:[b,s.default.container,"error"===x?s.default.error:null,"bordered"===e?s.default.bordered:null],maxWidth:C},t||o||u?l.createElement(a.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},l.createElement(i.Text,{size:"bordered"===e?"caption":"body",as:"label",htmlFor:g},t?l.createElement("span",{className:s.default.primaryLabel},t):null,o?l.createElement("span",{className:s.default.secondaryLabel}," (",o,")"):null),u?l.createElement(a.Box,{className:s.default.auxiliaryLabel,paddingLeft:"small"},u):null):null,f(B)),p?l.createElement(c,{id:v,tone:x},p):null,m?l.createElement(d,{id:j},m):null)},exports.FieldHint=d,exports.FieldMessage=c;
|
|
2
2
|
//# sourceMappingURL=base-field.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./spinner.module.css.js");exports.Spinner=function({size:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./spinner.module.css.js");exports.Spinner=function({size:a=24}){return e.createElement("svg",{"aria-hidden":!0,width:a,height:a,viewBox:"0 0 24 24",className:t.default.svg,"data-chromatic":"ignore"},e.createElement("g",{fill:"none",fillRule:"nonzero"},e.createElement("path",{className:t.default.tint,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"}),e.createElement("path",{className:t.default.fill,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"})))};
|
|
2
2
|
//# sourceMappingURL=spinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.js","sources":["../../../src/new-components/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size = 24 }: { size?: number }) {\n return (\n <svg
|
|
1
|
+
{"version":3,"file":"spinner.js","sources":["../../../src/new-components/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size = 24 }: { size?: number }) {\n return (\n <svg\n aria-hidden\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n className={styles.svg}\n data-chromatic=\"ignore\"\n >\n <g fill=\"none\" fillRule=\"nonzero\">\n <path\n className={styles.tint}\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 className={styles.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\"\n />\n </g>\n </svg>\n )\n}\n\nexport { Spinner }\n"],"names":["size","React","width","height","viewBox","className","styles","svg","fill","fillRule","tint","d"],"mappings":"gJAGA,UAAiBA,KAAEA,EAAO,KACtB,OACIC,wCAEIC,MAAOF,EACPG,OAAQH,EACRI,QAAQ,YACRC,UAAWC,UAAOC,qBACH,UAEfN,qBAAGO,KAAK,OAAOC,SAAS,WACpBR,wBACII,UAAWC,UAAOI,KAClBC,EAAE,iJAENV,wBACII,UAAWC,UAAOE,KAClBG,EAAE"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),t=require("../stack/stack.js"),i=require("../hidden-visually/hidden-visually.js"),r=require("../
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),t=require("../stack/stack.js"),i=require("../hidden-visually/hidden-visually.js"),r=require("../common-helpers.js"),d=require("../text/text.js"),n=require("../base-field/base-field.js"),s=require("./switch-field.module.css.js");const u=["label","hint","disabled","hidden","defaultChecked","id","aria-describedby","aria-label","aria-labelledby","onChange"];exports.SwitchField=l.forwardRef((function(c,o){var b,h,f;let{label:p,hint:m,disabled:y=!1,hidden:k,defaultChecked:v,id:x,"aria-describedby":j,"aria-label":g,"aria-labelledby":q,onChange:E}=c,S=e.objectWithoutProperties(c,u);const B=r.useId(x),C=r.useId(),w=null!=j?j:m?C:void 0,N=null!=g?g:void 0,P=null!=q?q:void 0,[_,F]=l.useState(!1),[H,I]=l.useState(null!=(b=null!=(h=S.checked)?h:v)&&b),K=null!=(f=S.checked)?f:H;return l.createElement(t.Stack,{space:"small",hidden:k},l.createElement(a.Box,{className:[s.default.container,y?s.default.disabled:null,K?s.default.checked:null,_?s.default.keyFocused:null],as:"label",display:"flex",alignItems:"center"},l.createElement(a.Box,{position:"relative",display:"inlineBlock",overflow:"visible",marginRight:"small",flexShrink:0,className:s.default.toggle},l.createElement(i.HiddenVisually,null,l.createElement("input",e.objectSpread2(e.objectSpread2({},S),{},{id:B,type:"checkbox",disabled:y,"aria-describedby":w,"aria-label":N,"aria-labelledby":P,ref:o,checked:K,onChange:e=>{null==E||E(e),e.defaultPrevented||I(e.currentTarget.checked)},onBlur:e=>{F(!1),null==S||null==S.onBlur||S.onBlur(e)},onKeyUp:e=>{F(!0),null==S||null==S.onKeyUp||S.onKeyUp(e)}}))),l.createElement("span",{className:s.default.handle})),l.createElement(d.Text,{exceptionallySetClassName:s.default.label},p)),m?l.createElement(n.FieldHint,{id:C},m):null)}));
|
|
2
2
|
//# sourceMappingURL=switch-field.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../../_virtual/_rollupPluginBabelHelpers.js"),s=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,o=require("../box/box.js"),a=require("../stack/stack.js"),r=require("./toast.module.css.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../../_virtual/_rollupPluginBabelHelpers.js"),s=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,o=require("../box/box.js"),a=require("../stack/stack.js"),r=require("../common-helpers.js"),n=require("./toast.module.css.js"),i=require("./static-toast.js"),u=require("ariakit/portal"),l=require("./toast-animation.js");const c=["toastId"],d=s.forwardRef((function({message:e,description:t,icon:o,action:a,autoDismissDelay:r,dismissLabel:n,showDismissButton:u=!0,toastId:l,onDismiss:c,onRemoveToast:d},m){const[f,p]=s.useState(Boolean(r)),b=s.useRef(),j=s.useCallback((function(){p(!0)}),[]),v=s.useCallback((function(){p(!1),clearTimeout(b.current),b.current=void 0}),[]);return s.useEffect((function(){if(f&&r)return b.current=window.setTimeout(()=>{d(l),null==c||c()},1e3*r),v}),[r,c,d,l,v,f]),s.createElement(i.StaticToast,{ref:m,message:e,description:t,icon:o,action:a,onDismiss:u?()=>{null==c||c(),d(l)}:void 0,dismissLabel:n,onMouseEnter:v,onMouseLeave:j})})),m=s.createContext(()=>()=>{});function f(){return s.useContext(m)}exports.Toast=function(e){const t=f(),o=s.useRef(e);return s.useEffect(()=>t(o.current),[t]),null},exports.ToastsProvider=function({children:e,padding:i="large",defaultAutoDismissDelay:f=10,defaultDismissLabel:p="Close"}){const[b,j]=s.useState([]),{mappedRef:v,animateRemove:x}=l.useToastsAnimation(),k=s.useCallback((function(e){x(e,()=>{j(t=>{const s=t.findIndex(t=>t.toastId===e);if(s<0)return t;const o=[...t];return o.splice(s,1),o})})}),[x]),D=s.useCallback((function(e){const s=r.generateElementId("toast"),o=t.objectSpread2(t.objectSpread2({autoDismissDelay:f,dismissLabel:p},e),{},{toastId:s});return j(e=>[...e,o]),()=>k(s)}),[f,p,k]);return s.createElement(m.Provider,{value:D},e,s.createElement(u.Portal,null,0===b.length?null:s.createElement(o.Box,{className:n.default.stackedToastsView,position:"fixed",width:"full",paddingX:i,paddingBottom:i},s.createElement(a.Stack,{space:"medium"},b.map(e=>{let{toastId:o}=e,a=t.objectWithoutProperties(e,c);return s.createElement(d,t.objectSpread2({key:o,ref:v(o),toastId:o,onRemoveToast:k},a))})))))},exports.useToasts=f;
|
|
2
2
|
//# sourceMappingURL=use-toasts.js.map
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"email": "henning@doist.com",
|
|
7
7
|
"url": "http://doist.com"
|
|
8
8
|
},
|
|
9
|
-
"version": "19.
|
|
9
|
+
"version": "19.1.1",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"homepage": "https://github.com/Doist/reactist#readme",
|
|
12
12
|
"repository": {
|
|
@@ -46,7 +46,8 @@
|
|
|
46
46
|
"type-check": "tsc --noEmit -p ./tsconfig.json",
|
|
47
47
|
"lint": "eslint --format codeframe --cache --ext js,jsx,ts,tsx ./",
|
|
48
48
|
"storybook": "start-storybook -p 6006",
|
|
49
|
-
"prettify": "prettier --write \"./**/*.{js,jsx,ts,tsx,json,css,scss,less,md,mdx}\""
|
|
49
|
+
"prettify": "prettier --write \"./**/*.{js,jsx,ts,tsx,json,css,scss,less,md,mdx}\"",
|
|
50
|
+
"plop": "plop"
|
|
50
51
|
},
|
|
51
52
|
"peerDependencies": {
|
|
52
53
|
"classnames": "^2.2.5",
|
|
@@ -96,6 +97,7 @@
|
|
|
96
97
|
"autoprefixer": "^9.8.0",
|
|
97
98
|
"babel-core": "^7.0.0-bridge.0",
|
|
98
99
|
"babel-loader": "^8.1.0",
|
|
100
|
+
"chromatic": "^6.11.4",
|
|
99
101
|
"classnames": "^2.2.5",
|
|
100
102
|
"css-loader": "^4.2.2",
|
|
101
103
|
"cssnano": "^4.1.10",
|
|
@@ -118,6 +120,7 @@
|
|
|
118
120
|
"mockdate": "^3.0.2",
|
|
119
121
|
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
|
120
122
|
"path": "^0.12.7",
|
|
123
|
+
"plop": "^3.1.1",
|
|
121
124
|
"prettier": "2.1.2",
|
|
122
125
|
"raw-loader": "^4.0.1",
|
|
123
126
|
"react": "^17.0.2",
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
._2a3b75a1{box-sizing:border-box;border:0;margin:0;padding:0;font-size:var(--reactist-font-size-body);font-family:inherit;vertical-align:baseline;background-color:transparent;list-style:none}pre._2a3b75a1{font-family:monospace}._2a3b75a1[hidden]{display:none!important}._2286072d{position:absolute}._0847ebf3{position:fixed}._9015266f{position:relative}._572136cd{position:-webkit-sticky;position:sticky}@media (min-width:768px){.dec0da3c{position:absolute}.eb3f61a4{position:fixed}._6a9d01dd{position:relative}.cf9268ba{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._6579cc9c{position:absolute}._3a6a421f{position:fixed}._3a6950ac{position:relative}._142cd372{position:-webkit-sticky;position:sticky}}._9a084bff{display:block}._509a57b4{display:flex}._4a786bb9{display:inline}._5d644b40{display:inline-block}._973d00d0{display:inline-flex}._3e4f26a6{display:none}@media (min-width:768px){.d525fe3a{display:block}._316c9f4b{display:flex}._5e788d98{display:inline}._851fc6b8{display:inline-block}.c16ba46a{display:inline-flex}._759c0c1a{display:none}}@media (min-width:992px){.c374b455{display:block}._8a854d8f{display:flex}._805fa8dc{display:inline}.ab26af05{display:inline-block}._9bd12ba4{display:inline-flex}._581476ce{display:none}}._1fb9d90e{flex-direction:column}.e5a9206f{flex-direction:row}@media (min-width:768px){._3e6a0be1{flex-direction:column}.e9e2e53a{flex-direction:row}}@media (min-width:992px){.c7d6b073{flex-direction:column}._935269b4{flex-direction:row}}._3692f9c2{flex-wrap:wrap}._55f6f487{flex-wrap:nowrap}.d5d0d34a{flex-shrink:0}.d8ff7933{flex-grow:0}._4a93668a{flex-grow:1}._5a8c5a77{align-items:flex-start}._50ba6b6b{align-items:center}._3963f790{align-items:flex-end}._55ef2d4e{align-items:baseline}@media (min-width:768px){._3e2bfb5d{align-items:flex-start}.a99be1ab{align-items:center}.fa8221fe{align-items:flex-end}.e83669a0{align-items:baseline}}@media (min-width:992px){._65e6b537{align-items:flex-start}.db356482{align-items:center}.acc08587{align-items:flex-end}.ad033867{align-items:baseline}}._985b733f{justify-content:flex-start}._95a98d2a{justify-content:center}.be9bf31a{justify-content:flex-end}.a89d8798{justify-content:space-around}._904ef8fe{justify-content:space-between}._489975d5{justify-content:space-evenly}@media (min-width:768px){.a7175ae7{justify-content:flex-start}._7334dead{justify-content:center}._746de733{justify-content:flex-end}._6d09398a{justify-content:space-around}.c2324c1d{justify-content:space-between}._04bd6e07{justify-content:space-evenly}}@media (min-width:992px){._39b310de{justify-content:flex-start}._0dc77292{justify-content:center}._96c15bd8{justify-content:flex-end}._6d09398a{justify-content:space-around}._096111a6{justify-content:space-between}._04bd6e07{justify-content:space-evenly}}._35d69587{align-self:stretch}.f46f3a67{align-self:flex-start}.fb6a8035{align-self:center}.d3193acd{align-self:flex-end}._1154f656{align-self:baseline}@media (min-width:768px){._298e04af{align-self:stretch}._2c729d24{align-self:flex-start}._9ea5e943{align-self:center}._02266425{align-self:flex-end}.c16a5800{align-self:baseline}}@media (min-width:992px){._2ec9eb74{align-self:stretch}._34f1fb03{align-self:flex-start}._77c58550{align-self:center}._9ffa429f{align-self:flex-end}._6cc14c5d{align-self:baseline}}.f6342c26{overflow:hidden}._10a2f952{overflow:auto}.f20b8b87{overflow:visible}._4954f87c{overflow:scroll}.a83fb2f5{height:100%}.d85cf739{background-color:var(--reactist-bg-default)}._4eb1d749{background-color:var(--reactist-bg-aside)}.da1ccaa5{background-color:var(--reactist-bg-highlight)}._82dc28e7{background-color:var(--reactist-bg-selected)}._63ba3dfa{background-color:var(--reactist-bg-toast);color:var(--reactist-content-primary);--reactist-content-primary:var(--reactist-toast-content-primary);--reactist-content-secondary:var(--reactist-toast-content-secondary);--reactist-text-link-idle-tint:var(--reactist-content-primary);--reactist-text-link-idle-decoration:var(--reactist-text-link-hover-decoration);--reactist-actionable-tertiary-idle-tint:var(--reactist-toast-actionable-primary-tint);--reactist-actionable-tertiary-hover-tint:var(--reactist-toast-actionable-primary-tint);--reactist-actionable-tertiary-hover-fill:var(--reactist-toast-actionable-hover-fill);--reactist-actionable-quaternary-idle-tint:var(--reactist-toast-actionable-secondary-tint);--reactist-actionable-quaternary-hover-tint:var(--reactist-toast-actionable-secondary-tint);--reactist-actionable-quaternary-hover-fill:var(--reactist-toast-actionable-hover-fill)}._34cd2b5e{border-radius:var(--reactist-border-radius-small)}._5fe4d5e3{border-radius:var(--reactist-border-radius-large)}._1b34ffd9{border:1px solid var(--reactist-divider-primary)}._705519b0{border:1px solid var(--reactist-divider-secondary)}._67adc238{border:1px solid var(--reactist-divider-tertiary)}.fff8bff0{text-align:start}.f973eed0{text-align:center}._225acbd7{text-align:end}.dea1e8ba{text-align:justify}@media (min-width:768px){._919d6c8f{text-align:start}.ab9d970e{text-align:center}.b5b45e0e{text-align:end}.bd6e42e0{text-align:justify}}@media (min-width:992px){._15120506{text-align:start}._337333b5{text-align:center}._221db0fb{text-align:end}._29ea9711{text-align:justify}}
|
|
2
|
+
.c4803194{padding-top:var(--reactist-spacing-xsmall)}._4e9ab24b{padding-top:var(--reactist-spacing-small)}._1d226e27{padding-top:var(--reactist-spacing-medium)}.eb6097f1{padding-top:var(--reactist-spacing-large)}.d3229ba4{padding-top:var(--reactist-spacing-xlarge)}._47978ba4{padding-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f987719c{padding-top:var(--reactist-spacing-xsmall)}._8dbc4b4d{padding-top:var(--reactist-spacing-small)}.ae44fe07{padding-top:var(--reactist-spacing-medium)}.ffe9548d{padding-top:var(--reactist-spacing-large)}.f2b76a44{padding-top:var(--reactist-spacing-xlarge)}.c6eb8f43{padding-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._8699b560{padding-top:var(--reactist-spacing-xsmall)}._02c374b7{padding-top:var(--reactist-spacing-small)}._0dd0332f{padding-top:var(--reactist-spacing-medium)}.da55f1f6{padding-top:var(--reactist-spacing-large)}._8ef2a278{padding-top:var(--reactist-spacing-xlarge)}._8b493b28{padding-top:var(--reactist-spacing-xxlarge)}}._211eebc7{padding-right:var(--reactist-spacing-xsmall)}.ad0ccf15{padding-right:var(--reactist-spacing-small)}.a03e39af{padding-right:var(--reactist-spacing-medium)}.f0941ead{padding-right:var(--reactist-spacing-large)}.e47c5a43{padding-right:var(--reactist-spacing-xlarge)}.e849a5cf{padding-right:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._85374228{padding-right:var(--reactist-spacing-xsmall)}._89df37b9{padding-right:var(--reactist-spacing-small)}._1cc50ebe{padding-right:var(--reactist-spacing-medium)}._1060982b{padding-right:var(--reactist-spacing-large)}.be58847d{padding-right:var(--reactist-spacing-xlarge)}._45093484{padding-right:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.f8d99d6a{padding-right:var(--reactist-spacing-xsmall)}.efa076d9{padding-right:var(--reactist-spacing-small)}.e59caa64{padding-right:var(--reactist-spacing-medium)}.da42f46a{padding-right:var(--reactist-spacing-large)}.b3ee2580{padding-right:var(--reactist-spacing-xlarge)}._3ef94658{padding-right:var(--reactist-spacing-xxlarge)}}.b0e6eab4{padding-bottom:var(--reactist-spacing-xsmall)}._9510d053{padding-bottom:var(--reactist-spacing-small)}.d7af60c9{padding-bottom:var(--reactist-spacing-medium)}.b75f86cd{padding-bottom:var(--reactist-spacing-large)}.fbd4ce29{padding-bottom:var(--reactist-spacing-xlarge)}._33e3ad63{padding-bottom:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f0302da7{padding-bottom:var(--reactist-spacing-xsmall)}._4f9b8012{padding-bottom:var(--reactist-spacing-small)}._4333e20e{padding-bottom:var(--reactist-spacing-medium)}._30bbc76c{padding-bottom:var(--reactist-spacing-large)}.ba5a4008{padding-bottom:var(--reactist-spacing-xlarge)}._423a3b1a{padding-bottom:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b40139b7{padding-bottom:var(--reactist-spacing-xsmall)}.f96071fa{padding-bottom:var(--reactist-spacing-small)}.fe803c9a{padding-bottom:var(--reactist-spacing-medium)}._01686eb9{padding-bottom:var(--reactist-spacing-large)}.afa763d8{padding-bottom:var(--reactist-spacing-xlarge)}.a95785f1{padding-bottom:var(--reactist-spacing-xxlarge)}}.cad4e2ec{padding-left:var(--reactist-spacing-xsmall)}.d70b3c17{padding-left:var(--reactist-spacing-small)}._8c851bd6{padding-left:var(--reactist-spacing-medium)}._078feb3c{padding-left:var(--reactist-spacing-large)}._76ab968c{padding-left:var(--reactist-spacing-xlarge)}.aaca85d7{padding-left:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5eb0e5aa{padding-left:var(--reactist-spacing-xsmall)}._0384fb4f{padding-left:var(--reactist-spacing-small)}.edffff6f{padding-left:var(--reactist-spacing-medium)}._873b9a46{padding-left:var(--reactist-spacing-large)}._89105db5{padding-left:var(--reactist-spacing-xlarge)}.db1966fe{padding-left:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b17f826b{padding-left:var(--reactist-spacing-xsmall)}._6dc83610{padding-left:var(--reactist-spacing-small)}._3421b8b2{padding-left:var(--reactist-spacing-medium)}._68cec7a6{padding-left:var(--reactist-spacing-large)}._94bde020{padding-left:var(--reactist-spacing-xlarge)}.b94ee579{padding-left:var(--reactist-spacing-xxlarge)}}
|
|
3
|
+
.c7813d79{margin-top:var(--reactist-spacing-xsmall)}.d3449da6{margin-top:var(--reactist-spacing-small)}._4ea254c1{margin-top:var(--reactist-spacing-medium)}.c0844f64{margin-top:var(--reactist-spacing-large)}._213145b4{margin-top:var(--reactist-spacing-xlarge)}.df61c84c{margin-top:var(--reactist-spacing-xxlarge)}.efe72b13{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._870c2768{margin-top:calc(var(--reactist-spacing-small)*-1)}._0b927c57{margin-top:calc(var(--reactist-spacing-medium)*-1)}._461db014{margin-top:calc(var(--reactist-spacing-large)*-1)}._2a3a8cb8{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._9bcda921{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6add01e4{margin-top:var(--reactist-spacing-xsmall)}._735ef86b{margin-top:var(--reactist-spacing-small)}._0477d068{margin-top:var(--reactist-spacing-medium)}._2c90af97{margin-top:var(--reactist-spacing-large)}._63a82db6{margin-top:var(--reactist-spacing-xlarge)}._03cd7726{margin-top:var(--reactist-spacing-xxlarge)}.c986a62a{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.be2bdcdd{margin-top:calc(var(--reactist-spacing-small)*-1)}._47d2686b{margin-top:calc(var(--reactist-spacing-medium)*-1)}._25e5af9d{margin-top:calc(var(--reactist-spacing-large)*-1)}.ee82f441{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.a6f9d404{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._4d8d9a36{margin-top:var(--reactist-spacing-xsmall)}.e813cee7{margin-top:var(--reactist-spacing-small)}._56975b7d{margin-top:var(--reactist-spacing-medium)}._53b367f6{margin-top:var(--reactist-spacing-large)}.d69e7311{margin-top:var(--reactist-spacing-xlarge)}._92f57c7e{margin-top:var(--reactist-spacing-xxlarge)}._96880d3e{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.dc3f3555{margin-top:calc(var(--reactist-spacing-small)*-1)}._86dd06bb{margin-top:calc(var(--reactist-spacing-medium)*-1)}.c93ef12e{margin-top:calc(var(--reactist-spacing-large)*-1)}.bc8fd4a2{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.b12a9124{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}._6016f4fb{margin-right:var(--reactist-spacing-xsmall)}.b85e3dfa{margin-right:var(--reactist-spacing-small)}._297575f4{margin-right:var(--reactist-spacing-medium)}.b401ac6c{margin-right:var(--reactist-spacing-large)}.dc3ec387{margin-right:var(--reactist-spacing-xlarge)}._24694604{margin-right:var(--reactist-spacing-xxlarge)}._8e9bf2ee{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.ae9d1115{margin-right:calc(var(--reactist-spacing-small)*-1)}._14e46fc3{margin-right:calc(var(--reactist-spacing-medium)*-1)}._3370631b{margin-right:calc(var(--reactist-spacing-large)*-1)}._3f0e9b50{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}.bc13e010{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6fa1aae3{margin-right:var(--reactist-spacing-xsmall)}._2976c5cb{margin-right:var(--reactist-spacing-small)}._38d94802{margin-right:var(--reactist-spacing-medium)}.db9569b5{margin-right:var(--reactist-spacing-large)}._4a52f06d{margin-right:var(--reactist-spacing-xlarge)}._8a0f0410{margin-right:var(--reactist-spacing-xxlarge)}.e7d40e9d{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}._680fde91{margin-right:calc(var(--reactist-spacing-small)*-1)}._021010ca{margin-right:calc(var(--reactist-spacing-medium)*-1)}._9e52c87c{margin-right:calc(var(--reactist-spacing-large)*-1)}._4d602613{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._21b1b65a{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._7321bc07{margin-right:var(--reactist-spacing-xsmall)}.fa1721f4{margin-right:var(--reactist-spacing-small)}._3fd7b4b8{margin-right:var(--reactist-spacing-medium)}._4fdc2f74{margin-right:var(--reactist-spacing-large)}.c0254761{margin-right:var(--reactist-spacing-xlarge)}._710a5f09{margin-right:var(--reactist-spacing-xxlarge)}.e08bee7f{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.e5ab73d2{margin-right:calc(var(--reactist-spacing-small)*-1)}._5e731477{margin-right:calc(var(--reactist-spacing-medium)*-1)}._0f57a22e{margin-right:calc(var(--reactist-spacing-large)*-1)}._25f26ed3{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._11a3b4e0{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}._6a4f69f7{margin-bottom:var(--reactist-spacing-xsmall)}.db26b033{margin-bottom:var(--reactist-spacing-small)}.c7313022{margin-bottom:var(--reactist-spacing-medium)}.a5885889{margin-bottom:var(--reactist-spacing-large)}._33dfbd8e{margin-bottom:var(--reactist-spacing-xlarge)}._795ad2de{margin-bottom:var(--reactist-spacing-xxlarge)}.a329dbd3{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._85e739fb{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._681f65ff{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.caf50d8f{margin-bottom:calc(var(--reactist-spacing-large)*-1)}._1e084cbf{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._3dfb1c7e{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){.ef4735be{margin-bottom:var(--reactist-spacing-xsmall)}.de55afba{margin-bottom:var(--reactist-spacing-small)}._0e33ce88{margin-bottom:var(--reactist-spacing-medium)}._8ca391fc{margin-bottom:var(--reactist-spacing-large)}._3a609d23{margin-bottom:var(--reactist-spacing-xlarge)}._3e1177e4{margin-bottom:var(--reactist-spacing-xxlarge)}.d384884d{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._75254cec{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._5d9f127d{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}._835f1089{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.dad52a72{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._8703a4bf{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._90fd20e9{margin-bottom:var(--reactist-spacing-xsmall)}.f3769191{margin-bottom:var(--reactist-spacing-small)}._156410f8{margin-bottom:var(--reactist-spacing-medium)}._7fed74d0{margin-bottom:var(--reactist-spacing-large)}._477dc10e{margin-bottom:var(--reactist-spacing-xlarge)}._85c82d89{margin-bottom:var(--reactist-spacing-xxlarge)}._4f09c1e0{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._9523e048{margin-bottom:calc(var(--reactist-spacing-small)*-1)}.efe10240{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.c43971e6{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.f9b4da15{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}.a10fdf70{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}.f9be90b4{margin-left:var(--reactist-spacing-xsmall)}.f53218d5{margin-left:var(--reactist-spacing-small)}.c4a9b3ab{margin-left:var(--reactist-spacing-medium)}._5755e2c3{margin-left:var(--reactist-spacing-large)}._33fc9354{margin-left:var(--reactist-spacing-xlarge)}._4749a3bf{margin-left:var(--reactist-spacing-xxlarge)}.c76cb3c7{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._96003c07{margin-left:calc(var(--reactist-spacing-small)*-1)}._09988d07{margin-left:calc(var(--reactist-spacing-medium)*-1)}.b4a486f6{margin-left:calc(var(--reactist-spacing-large)*-1)}.f396e75e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._81d1f26d{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._0a46e8f1{margin-left:var(--reactist-spacing-xsmall)}._57c970af{margin-left:var(--reactist-spacing-small)}._4b6099d3{margin-left:var(--reactist-spacing-medium)}._378fcff5{margin-left:var(--reactist-spacing-large)}.f8785663{margin-left:var(--reactist-spacing-xlarge)}._72f957ee{margin-left:var(--reactist-spacing-xxlarge)}._2288c7e1{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.b27c1c05{margin-left:calc(var(--reactist-spacing-small)*-1)}._702cbb13{margin-left:calc(var(--reactist-spacing-medium)*-1)}._1a2748b4{margin-left:calc(var(--reactist-spacing-large)*-1)}.b8c043a5{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._8dc8ff63{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){.c2af646d{margin-left:var(--reactist-spacing-xsmall)}.c03d07be{margin-left:var(--reactist-spacing-small)}._915fb1d3{margin-left:var(--reactist-spacing-medium)}._64214ee1{margin-left:var(--reactist-spacing-large)}._7be4a22c{margin-left:var(--reactist-spacing-xlarge)}._5ec0a401{margin-left:var(--reactist-spacing-xxlarge)}.ea29f1ee{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.c26652c7{margin-left:calc(var(--reactist-spacing-small)*-1)}.c24f6af9{margin-left:calc(var(--reactist-spacing-medium)*-1)}.c2671f27{margin-left:calc(var(--reactist-spacing-large)*-1)}.cc51a04e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}.fd581f54{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}
|
|
4
|
+
._68ab48ca{min-width:0}._6fa2b565{min-width:var(--reactist-width-xsmall)}.dd50fabd{min-width:var(--reactist-width-small)}.e7e2c808{min-width:var(--reactist-width-medium)}._6abbe25e{min-width:var(--reactist-width-large)}._54f479ac{min-width:var(--reactist-width-xlarge)}._148492bc{max-width:var(--reactist-width-xsmall)}.bd023b96{max-width:var(--reactist-width-small)}.e102903f{max-width:var(--reactist-width-medium)}._0e8d76d7{max-width:var(--reactist-width-large)}._47a031d0{max-width:var(--reactist-width-xlarge)}.cd4c8183{max-width:100%}._5f5959e8{width:0}._8c75067a{width:100%}._56a651f6{width:auto}._26f87bb8{width:-moz-max-content;width:-webkit-max-content;width:max-content}._07a6ab44{width:-moz-min-content;width:-webkit-min-content;width:min-content}.a87016fa{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}._1a972e50{width:var(--reactist-width-xsmall)}.c96d8261{width:var(--reactist-width-small)}.f3829d42{width:var(--reactist-width-medium)}._2caef228{width:var(--reactist-width-large)}._069e1491{width:var(--reactist-width-xlarge)}
|
|
5
|
+
._64ed24f4{gap:0}._2580a74b{gap:var(--reactist-spacing-xsmall)}.c68f8bf6{gap:var(--reactist-spacing-small)}._43e5f8e9{gap:var(--reactist-spacing-medium)}._966b120f{gap:var(--reactist-spacing-large)}.f957894c{gap:var(--reactist-spacing-xlarge)}._8cca104b{gap:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5797cee2{gap:0}._9015672f{gap:var(--reactist-spacing-xsmall)}._7ec86eec{gap:var(--reactist-spacing-small)}._714d7179{gap:var(--reactist-spacing-medium)}.ae1deb59{gap:var(--reactist-spacing-large)}.e1cfce55{gap:var(--reactist-spacing-xlarge)}._168a8ff8{gap:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._43e2b619{gap:0}._0ea9bf88{gap:var(--reactist-spacing-xsmall)}.d451307a{gap:var(--reactist-spacing-small)}.bf93cf66{gap:var(--reactist-spacing-medium)}._1430cddf{gap:var(--reactist-spacing-large)}.fa00c93e{gap:var(--reactist-spacing-xlarge)}._6f3aee54{gap:var(--reactist-spacing-xxlarge)}}
|
|
6
|
+
.eae3d34f,.eae3d34f>:last-child{--reactist-columns-gap:0px}._9b4012c9{--reactist-columns-gap:var(--reactist-spacing-xsmall)}.e35e0320{--reactist-columns-gap:var(--reactist-spacing-small)}._0703e67f{--reactist-columns-gap:var(--reactist-spacing-medium)}._1cf15621{--reactist-columns-gap:var(--reactist-spacing-large)}._1c7dff67{--reactist-columns-gap:var(--reactist-spacing-xlarge)}._25bee9b6{--reactist-columns-gap:var(--reactist-spacing-xxlarge)}._4bb9987d{flex-basis:content}._9dd31975{flex-basis:auto}._38d11c0e{flex-basis:calc(50% - var(--reactist-columns-gap))}._7ac225c6{flex-basis:calc(33.33333% - var(--reactist-columns-gap))}._9c340680{flex-basis:calc(66.66667% - var(--reactist-columns-gap))}._81cb99d2{flex-basis:calc(25% - var(--reactist-columns-gap))}._10fd355f{flex-basis:calc(75% - var(--reactist-columns-gap))}._3ee66520{flex-basis:calc(20% - var(--reactist-columns-gap))}.df1201a5{flex-basis:calc(40% - var(--reactist-columns-gap))}.f772e0b2{flex-basis:calc(60% - var(--reactist-columns-gap))}._880cbbb1{flex-basis:calc(80% - var(--reactist-columns-gap))}
|
|
7
|
+
:root{--reactist-banner-title-font-size:14px;--reactist-banner-title-line-height:21px;--reactist-banner-description-font-size:12px;--reactist-banner-description-line-height:20px;--reactist-banner-info-border:#eee;--reactist-banner-info-background:#fafafa;--reactist-banner-info-title:#202020;--reactist-banner-info-description:#666;--reactist-banner-promotion-border:#fae8d6;--reactist-banner-promotion-background:#fffaf4;--reactist-banner-promotion-title:#202020;--reactist-banner-promotion-description:#666}.c1dffd60{border-style:solid;border-width:1px;padding:var(--reactist-spacing-small) var(--reactist-spacing-large);letter-spacing:-.15px;font-family:var(--reactist-font-family)}._9d552538{background-color:var(--reactist-banner-info-background);border-color:var(--reactist-banner-info-border)}.d797752e{background-color:var(--reactist-banner-promotion-background);border-color:var(--reactist-banner-promotion-border)}._8cd610da{font-size:var(--reactist-banner-title-font-size);line-height:var(--reactist-banner-title-line-height);font-weight:var(--reactist-font-weight-strong)}._78ea5373{font-weight:var(--reactist-font-weight-regular)}._319c73fa{color:var(--reactist-banner-info-title)}.fc84253f{color:var(--reactist-banner-promotion-title)}.af4bd758{font-size:var(--reactist-banner-description-font-size);line-height:var(--reactist-banner-description-line-height);font-weight:var(--reactist-font-weight-regular)}.b95a8c07{color:var(--reactist-banner-info-description)}._3c33f615{color:var(--reactist-banner-promotion-description)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--reactist-banner-title-font-size:14px;--reactist-banner-title-line-height:21px;--reactist-banner-description-font-size:12px;--reactist-banner-description-line-height:20px;--reactist-banner-info-border:#eee;--reactist-banner-info-background:#fafafa;--reactist-banner-info-title:#202020;--reactist-banner-info-description:#666;--reactist-banner-promotion-border:#fae8d6;--reactist-banner-promotion-background:#fffaf4;--reactist-banner-promotion-title:#202020;--reactist-banner-promotion-description:#666}.c1dffd60{border-style:solid;border-width:1px;padding:var(--reactist-spacing-small) var(--reactist-spacing-large);letter-spacing:-.15px;font-family:var(--reactist-font-family)}._9d552538{background-color:var(--reactist-banner-info-background);border-color:var(--reactist-banner-info-border)}.d797752e{background-color:var(--reactist-banner-promotion-background);border-color:var(--reactist-banner-promotion-border)}._8cd610da{font-size:var(--reactist-banner-title-font-size);line-height:var(--reactist-banner-title-line-height);font-weight:var(--reactist-font-weight-strong)}._78ea5373{font-weight:var(--reactist-font-weight-regular)}._319c73fa{color:var(--reactist-banner-info-title)}.fc84253f{color:var(--reactist-banner-promotion-title)}.af4bd758{font-size:var(--reactist-banner-description-font-size);line-height:var(--reactist-banner-description-line-height);font-weight:var(--reactist-font-weight-regular)}.b95a8c07{color:var(--reactist-banner-info-description)}._3c33f615{color:var(--reactist-banner-promotion-description)}
|
package/styles/reactist.css
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
@media print{._0e595dea{display:none}}
|
|
10
10
|
._618235b7{width:1px;height:1px;clip:rect(1px,1px,1px,1px);white-space:nowrap}
|
|
11
11
|
.eb665121{border-style:solid;border-width:1px;color:var(--reactist-content-primary);padding:var(--reactist-spacing-small);min-height:calc(2*var(--reactist-spacing-small) + var(--reactist-button-small-height) + 2px)}.d0373ff9{background-color:var(--reactist-alert-tone-info-background);border-color:var(--reactist-alert-tone-info-border)}.d0373ff9 svg{color:var(--reactist-alert-tone-info-icon)}.bb18dcab{background-color:var(--reactist-alert-tone-positive-background);border-color:var(--reactist-alert-tone-positive-border)}.bb18dcab svg{color:var(--reactist-alert-tone-positive-icon)}._0af02331{background-color:var(--reactist-alert-tone-caution-background);border-color:var(--reactist-alert-tone-caution-border)}._0af02331 svg{color:var(--reactist-alert-tone-caution-icon)}.f76146f9{background-color:var(--reactist-alert-tone-critical-background);border-color:var(--reactist-alert-tone-critical-border)}.f76146f9 svg{color:var(--reactist-alert-tone-critical-icon)}
|
|
12
|
+
:root{--reactist-banner-title-font-size:14px;--reactist-banner-title-line-height:21px;--reactist-banner-description-font-size:12px;--reactist-banner-description-line-height:20px;--reactist-banner-info-border:#eee;--reactist-banner-info-background:#fafafa;--reactist-banner-info-title:#202020;--reactist-banner-info-description:#666;--reactist-banner-promotion-border:#fae8d6;--reactist-banner-promotion-background:#fffaf4;--reactist-banner-promotion-title:#202020;--reactist-banner-promotion-description:#666}.c1dffd60{border-style:solid;border-width:1px;padding:var(--reactist-spacing-small) var(--reactist-spacing-large);letter-spacing:-.15px;font-family:var(--reactist-font-family)}._9d552538{background-color:var(--reactist-banner-info-background);border-color:var(--reactist-banner-info-border)}.d797752e{background-color:var(--reactist-banner-promotion-background);border-color:var(--reactist-banner-promotion-border)}._8cd610da{font-size:var(--reactist-banner-title-font-size);line-height:var(--reactist-banner-title-line-height);font-weight:var(--reactist-font-weight-strong)}._78ea5373{font-weight:var(--reactist-font-weight-regular)}._319c73fa{color:var(--reactist-banner-info-title)}.fc84253f{color:var(--reactist-banner-promotion-title)}.af4bd758{font-size:var(--reactist-banner-description-font-size);line-height:var(--reactist-banner-description-line-height);font-weight:var(--reactist-font-weight-regular)}.b95a8c07{color:var(--reactist-banner-info-description)}._3c33f615{color:var(--reactist-banner-promotion-description)}
|
|
12
13
|
:root{--reactist-spinner-tint:var(--reactist-bg-brand);--reactist-spinner-fill:var(--reactist-framework-fill-crest)}@-webkit-keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}._51539197{-webkit-animation-name:_54fbe2b3;animation-name:_54fbe2b3;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.a0c466ed{fill:var(--reactist-spinner-tint)}._745b73d3{fill:var(--reactist-spinner-fill)}
|
|
13
14
|
._464500ae{color:var(--reactist-content-primary)}._1abfe147 svg{color:var(--reactist-alert-tone-info-icon)}._36ce9859 svg{color:var(--reactist-alert-tone-positive-icon)}.f92214b7 svg{color:var(--reactist-alert-tone-caution-icon)}.be6cf28e svg{color:var(--reactist-alert-tone-critical-icon)}
|
|
14
15
|
._616cc3f3{bottom:0;pointer-events:none;z-index:var(--reactist-stacking-order-toast)}._1b5f8e86{pointer-events:all;gap:var(--reactist-spacing-medium);box-shadow:var(--reactist-toast-box-shadow)}.ce2e3476{color:var(--reactist-content-primary)}@media (max-width:500px){._1b5f8e86{width:100%!important}}
|