@doist/reactist 21.0.2 → 21.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 +2 -6
- package/dist/reactist.cjs.development.js +4 -1
- 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/menu/menu.js +4 -1
- package/es/menu/menu.js.map +1 -1
- package/es/prose/prose.module.css.js +1 -1
- package/lib/menu/menu.js +1 -1
- package/lib/menu/menu.js.map +1 -1
- package/lib/prose/prose.module.css.js +1 -1
- package/package.json +1 -2
- package/styles/modal.css +1 -1
- package/styles/modal.module.css.css +1 -1
- package/styles/prose.css +1 -1
- package/styles/prose.module.css.css +1 -1
- package/styles/reactist.css +1 -1
package/es/menu/menu.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import { useState, useMemo, useCallback, createElement, useContext, forwardRef, Children, cloneElement, createContext } from 'react';
|
|
2
|
+
import { useState, useMemo, useEffect, useCallback, createElement, useContext, forwardRef, Children, cloneElement, createContext } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { polymorphicComponent } from '../utils/polymorphism.js';
|
|
5
5
|
import { Portal } from 'ariakit/portal';
|
|
@@ -39,6 +39,9 @@ function Menu(_ref) {
|
|
|
39
39
|
shift: 4,
|
|
40
40
|
getAnchorRect
|
|
41
41
|
}, props));
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
if (!state.open) handleAnchorRectChange(null);
|
|
44
|
+
}, [state.open]);
|
|
42
45
|
const handleItemSelect = useCallback(function handleItemSelect(value) {
|
|
43
46
|
if (onItemSelect) onItemSelect(value);
|
|
44
47
|
}, [onItemSelect]);
|
package/es/menu/menu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { polymorphicComponent } from '../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n state: Ariakit.MenuState\n handleItemSelect: (value: string | null | undefined) => void\n handleAnchorRectChange: (value: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n // This is however of little consequence since this value is only used if some of the components\n // are used outside Menu, something that should not happen and we do not support.\n // @ts-expect-error\n {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n /**\n * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n * `MenuButton` that triggers the menu to be opened or closed.\n */\n children: React.ReactNode\n\n /**\n * An optional callback that will be called back whenever a menu item is selected. It receives\n * the `value` of the selected `MenuItem`.\n *\n * If you pass down this callback, it is recommended that you properly memoize it so it does not\n * change on every render.\n */\n onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n const [anchorRect, handleAnchorRectChange] = React.useState<{ x: number; y: number } | null>(\n null,\n )\n const getAnchorRect = React.useMemo(() => {\n return anchorRect ? () => anchorRect : undefined\n }, [anchorRect])\n\n const state = Ariakit.useMenuState({\n focusLoop: true,\n gutter: 8,\n shift: 4,\n getAnchorRect,\n ...props,\n })\n\n const handleItemSelect = React.useCallback(\n function handleItemSelect(value: string | null | undefined) {\n if (onItemSelect) onItemSelect(value)\n },\n [onItemSelect],\n )\n\n const value: MenuContextState = React.useMemo(\n () => ({\n state,\n handleItemSelect,\n handleAnchorRectChange,\n }),\n [state, handleItemSelect],\n )\n\n return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n { exceptionallySetClassName, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n return (\n <Ariakit.MenuButton\n {...props}\n state={state}\n ref={ref}\n className={classNames('reactist_menubutton', exceptionallySetClassName)}\n />\n )\n})\n\n//\n// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n { as: component = 'div', ...props },\n ref,\n) {\n const { handleAnchorRectChange, state } = React.useContext(MenuContext)\n const handleContextMenu = React.useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault()\n handleAnchorRectChange({ x: event.clientX, y: event.clientY })\n state.show()\n },\n [handleAnchorRectChange, state],\n )\n\n return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n { exceptionallySetClassName, modal = true, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n\n return state.open ? (\n <Portal preserveTabOrder>\n <Ariakit.Menu\n {...props}\n state={state}\n ref={ref}\n className={classNames('reactist_menulist', exceptionallySetClassName)}\n modal={modal}\n />\n </Portal>\n ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n /**\n * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n * `onItemSelect` when you provide that instead of (or alongside) providing individual\n * `onSelect` callbacks to each menu item.\n */\n value?: string\n /**\n * The content inside the menu item.\n */\n children: React.ReactNode\n /**\n * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n * navigation across the menu options.\n *\n * @default true\n */\n disabled?: boolean\n /**\n * When `true` the menu will close when the menu item is selected, in addition to performing the\n * action that the menu item is set out to do.\n *\n * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n * selected. This should be the exception and not the norm, as the default is to auto-close.\n *\n * @default true\n */\n hideOnSelect?: boolean\n /**\n * The action to perform when the menu item is selected.\n *\n * If you return `false` from this function, the menu will not auto-close when this menu item\n * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n * achieve the same effect conditionally and dynamically deciding at run time.\n */\n onSelect?: () => unknown\n /**\n * The event handler called when the menu item is clicked.\n *\n * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n * action that the menu item represents. But in general you should prefer `onSelect` for that.\n *\n * The main use for this handler is to get access to the click event. This can be used, for\n * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n * consequences of the click, including preventing `onSelect` from being called. In particular,\n * this is useful in menu items that are links, and you want the click to not trigger navigation\n * under some circumstances.\n */\n onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n {\n value,\n children,\n onSelect,\n hideOnSelect = true,\n onClick,\n exceptionallySetClassName,\n as = 'button',\n ...props\n },\n ref,\n) {\n const { handleItemSelect, state } = React.useContext(MenuContext)\n const { hide } = state\n\n const handleClick = React.useCallback(\n function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n onClick?.(event)\n const onSelectResult: unknown =\n onSelect && !event.defaultPrevented ? onSelect() : undefined\n const shouldClose = onSelectResult !== false && hideOnSelect\n handleItemSelect(value)\n if (shouldClose) hide()\n },\n [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n )\n\n return (\n <Ariakit.MenuItem\n {...props}\n as={as}\n state={state}\n ref={ref}\n onClick={handleClick}\n className={exceptionallySetClassName}\n hideOnClick={false}\n >\n {children}\n </Ariakit.MenuItem>\n )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n * <MenuButton>More options</MenuButton>\n * <MenuList>\n * <MenuItem label=\"Preferences\" />\n * <MenuItem label=\"Sign out\" />\n * </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n { children, onItemSelect },\n ref,\n) {\n const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n const { hide: parentMenuHide } = state\n\n const handleSubItemSelect = React.useCallback(\n function handleSubItemSelect(value: string | null | undefined) {\n if (onItemSelect) onItemSelect(value)\n parentMenuItemSelect(value)\n parentMenuHide()\n },\n [parentMenuHide, parentMenuItemSelect, onItemSelect],\n )\n\n const [button, list] = React.Children.toArray(children)\n\n // Ariakit needs to be able to pass props to the MenuButton\n // and combine it with the MenuItem component\n const renderMenuButton = React.useCallback(\n function renderMenuButton(props: MenuButtonProps) {\n return React.cloneElement(button as React.ReactElement, props)\n },\n [button],\n )\n\n return (\n <Menu onItemSelect={handleSubItemSelect}>\n <Ariakit.MenuItem as=\"div\" state={state} ref={ref} hideOnClick={false}>\n {renderMenuButton}\n </Ariakit.MenuItem>\n {list}\n </Menu>\n )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n /**\n * A label to be shown visually and also used to semantically label the group.\n */\n label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n { label, children, exceptionallySetClassName, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n return (\n <Ariakit.MenuGroup {...props} ref={ref} state={state} className={exceptionallySetClassName}>\n {label ? (\n <div role=\"presentation\" className=\"reactist_menugroup__label\">\n {label}\n </div>\n ) : null}\n {children}\n </Ariakit.MenuGroup>\n )\n})\n\nexport { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","anchorRect","handleAnchorRectChange","getAnchorRect","undefined","state","Ariakit","focusLoop","gutter","shift","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","onContextMenu","MenuList","modal","open","Portal","preserveTabOrder","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","onSelectResult","defaultPrevented","shouldClose","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","role"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { polymorphicComponent } from '../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n state: Ariakit.MenuState\n handleItemSelect: (value: string | null | undefined) => void\n handleAnchorRectChange: (value: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n // This is however of little consequence since this value is only used if some of the components\n // are used outside Menu, something that should not happen and we do not support.\n // @ts-expect-error\n {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n /**\n * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n * `MenuButton` that triggers the menu to be opened or closed.\n */\n children: React.ReactNode\n\n /**\n * An optional callback that will be called back whenever a menu item is selected. It receives\n * the `value` of the selected `MenuItem`.\n *\n * If you pass down this callback, it is recommended that you properly memoize it so it does not\n * change on every render.\n */\n onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n const [anchorRect, handleAnchorRectChange] = React.useState<{ x: number; y: number } | null>(\n null,\n )\n const getAnchorRect = React.useMemo(() => {\n return anchorRect ? () => anchorRect : undefined\n }, [anchorRect])\n\n const state = Ariakit.useMenuState({\n focusLoop: true,\n gutter: 8,\n shift: 4,\n getAnchorRect,\n ...props,\n })\n\n React.useEffect(() => {\n if (!state.open) handleAnchorRectChange(null)\n }, [state.open])\n\n const handleItemSelect = React.useCallback(\n function handleItemSelect(value: string | null | undefined) {\n if (onItemSelect) onItemSelect(value)\n },\n [onItemSelect],\n )\n\n const value: MenuContextState = React.useMemo(\n () => ({\n state,\n handleItemSelect,\n handleAnchorRectChange,\n }),\n [state, handleItemSelect],\n )\n\n return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n { exceptionallySetClassName, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n return (\n <Ariakit.MenuButton\n {...props}\n state={state}\n ref={ref}\n className={classNames('reactist_menubutton', exceptionallySetClassName)}\n />\n )\n})\n\n//\n// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n { as: component = 'div', ...props },\n ref,\n) {\n const { handleAnchorRectChange, state } = React.useContext(MenuContext)\n const handleContextMenu = React.useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault()\n handleAnchorRectChange({ x: event.clientX, y: event.clientY })\n state.show()\n },\n [handleAnchorRectChange, state],\n )\n\n return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n { exceptionallySetClassName, modal = true, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n\n return state.open ? (\n <Portal preserveTabOrder>\n <Ariakit.Menu\n {...props}\n state={state}\n ref={ref}\n className={classNames('reactist_menulist', exceptionallySetClassName)}\n modal={modal}\n />\n </Portal>\n ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n /**\n * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n * `onItemSelect` when you provide that instead of (or alongside) providing individual\n * `onSelect` callbacks to each menu item.\n */\n value?: string\n /**\n * The content inside the menu item.\n */\n children: React.ReactNode\n /**\n * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n * navigation across the menu options.\n *\n * @default true\n */\n disabled?: boolean\n /**\n * When `true` the menu will close when the menu item is selected, in addition to performing the\n * action that the menu item is set out to do.\n *\n * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n * selected. This should be the exception and not the norm, as the default is to auto-close.\n *\n * @default true\n */\n hideOnSelect?: boolean\n /**\n * The action to perform when the menu item is selected.\n *\n * If you return `false` from this function, the menu will not auto-close when this menu item\n * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n * achieve the same effect conditionally and dynamically deciding at run time.\n */\n onSelect?: () => unknown\n /**\n * The event handler called when the menu item is clicked.\n *\n * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n * action that the menu item represents. But in general you should prefer `onSelect` for that.\n *\n * The main use for this handler is to get access to the click event. This can be used, for\n * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n * consequences of the click, including preventing `onSelect` from being called. In particular,\n * this is useful in menu items that are links, and you want the click to not trigger navigation\n * under some circumstances.\n */\n onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n {\n value,\n children,\n onSelect,\n hideOnSelect = true,\n onClick,\n exceptionallySetClassName,\n as = 'button',\n ...props\n },\n ref,\n) {\n const { handleItemSelect, state } = React.useContext(MenuContext)\n const { hide } = state\n\n const handleClick = React.useCallback(\n function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n onClick?.(event)\n const onSelectResult: unknown =\n onSelect && !event.defaultPrevented ? onSelect() : undefined\n const shouldClose = onSelectResult !== false && hideOnSelect\n handleItemSelect(value)\n if (shouldClose) hide()\n },\n [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n )\n\n return (\n <Ariakit.MenuItem\n {...props}\n as={as}\n state={state}\n ref={ref}\n onClick={handleClick}\n className={exceptionallySetClassName}\n hideOnClick={false}\n >\n {children}\n </Ariakit.MenuItem>\n )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n * <MenuButton>More options</MenuButton>\n * <MenuList>\n * <MenuItem label=\"Preferences\" />\n * <MenuItem label=\"Sign out\" />\n * </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n { children, onItemSelect },\n ref,\n) {\n const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n const { hide: parentMenuHide } = state\n\n const handleSubItemSelect = React.useCallback(\n function handleSubItemSelect(value: string | null | undefined) {\n if (onItemSelect) onItemSelect(value)\n parentMenuItemSelect(value)\n parentMenuHide()\n },\n [parentMenuHide, parentMenuItemSelect, onItemSelect],\n )\n\n const [button, list] = React.Children.toArray(children)\n\n // Ariakit needs to be able to pass props to the MenuButton\n // and combine it with the MenuItem component\n const renderMenuButton = React.useCallback(\n function renderMenuButton(props: MenuButtonProps) {\n return React.cloneElement(button as React.ReactElement, props)\n },\n [button],\n )\n\n return (\n <Menu onItemSelect={handleSubItemSelect}>\n <Ariakit.MenuItem as=\"div\" state={state} ref={ref} hideOnClick={false}>\n {renderMenuButton}\n </Ariakit.MenuItem>\n {list}\n </Menu>\n )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n /**\n * A label to be shown visually and also used to semantically label the group.\n */\n label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n { label, children, exceptionallySetClassName, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n return (\n <Ariakit.MenuGroup {...props} ref={ref} state={state} className={exceptionallySetClassName}>\n {label ? (\n <div role=\"presentation\" className=\"reactist_menugroup__label\">\n {label}\n </div>\n ) : null}\n {children}\n </Ariakit.MenuGroup>\n )\n})\n\nexport { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","anchorRect","handleAnchorRectChange","getAnchorRect","undefined","state","Ariakit","focusLoop","gutter","shift","open","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","onContextMenu","MenuList","modal","Portal","preserveTabOrder","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","onSelectResult","defaultPrevented","shouldClose","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","role"],"mappings":"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"}
|
package/lib/menu/menu.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),n=require("react"),o=(e(n),e(require("classnames"))),l=require("../utils/polymorphism.js"),r=require("ariakit/portal"),a=require("ariakit/menu");const c=["children","onItemSelect"],s=["exceptionallySetClassName"],u=["as"],i=["exceptionallySetClassName","modal"],p=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],m=["label","children","exceptionallySetClassName"],d=n.createContext({});function h(e){let{children:o,onItemSelect:l}=e,r=t.objectWithoutProperties(e,c);const[s,u]=n.useState(null),i=n.useMemo(()=>s?()=>s:void 0,[s]),p=a.useMenuState(t.objectSpread2({focusLoop:!0,gutter:8,shift:4,getAnchorRect:i},r)),m=n.useCallback((function(e){l&&l(e)}),[l]),h=n.useMemo(()=>({state:p,handleItemSelect:m,handleAnchorRectChange:u}),[p,m]);return n.createElement(d.Provider,{value:h},o)}const C=l.polymorphicComponent((function(e,l){let{exceptionallySetClassName:r}=e,c=t.objectWithoutProperties(e,s);const{state:u}=n.useContext(d);return n.createElement(a.MenuButton,t.objectSpread2(t.objectSpread2({},c),{},{state:u,ref:l,className:o("reactist_menubutton",r)}))})),S=l.polymorphicComponent((function(e,o){let{as:l="div"}=e,r=t.objectWithoutProperties(e,u);const{handleAnchorRectChange:a,state:c}=n.useContext(d),s=n.useCallback(e=>{e.preventDefault(),a({x:e.clientX,y:e.clientY}),c.show()},[a,c]);return n.createElement(l,t.objectSpread2(t.objectSpread2({},r),{},{onContextMenu:s,ref:o}))})),b=l.polymorphicComponent((function(e,l){let{exceptionallySetClassName:c,modal:s=!0}=e,u=t.objectWithoutProperties(e,i);const{state:p}=n.useContext(d);return p.open?n.createElement(r.Portal,{preserveTabOrder:!0},n.createElement(a.Menu,t.objectSpread2(t.objectSpread2({},u),{},{state:p,ref:l,className:o("reactist_menulist",c),modal:s}))):null})),f=l.polymorphicComponent((function(e,o){let{value:l,children:r,onSelect:c,hideOnSelect:s=!0,onClick:u,exceptionallySetClassName:i,as:m="button"}=e,h=t.objectWithoutProperties(e,p);const{handleItemSelect:C,state:S}=n.useContext(d),{hide:b}=S,f=n.useCallback((function(e){null==u||u(e);const t=!1!==(c&&!e.defaultPrevented?c():void 0)&&s;C(l),t&&b()}),[c,u,C,s,b,l]);return n.createElement(a.MenuItem,t.objectSpread2(t.objectSpread2({},h),{},{as:m,state:S,ref:o,onClick:f,className:i,hideOnClick:!1}),r)})),x=n.forwardRef((function({children:e,onItemSelect:t},o){const{handleItemSelect:l,state:r}=n.useContext(d),{hide:c}=r,s=n.useCallback((function(e){t&&t(e),l(e),c()}),[c,l,t]),[u,i]=n.Children.toArray(e),p=n.useCallback((function(e){return n.cloneElement(u,e)}),[u]);return n.createElement(h,{onItemSelect:s},n.createElement(a.MenuItem,{as:"div",state:r,ref:o,hideOnClick:!1},p),i)})),j=l.polymorphicComponent((function(e,o){let{label:l,children:r,exceptionallySetClassName:c}=e,s=t.objectWithoutProperties(e,m);const{state:u}=n.useContext(d);return n.createElement(a.MenuGroup,t.objectSpread2(t.objectSpread2({},s),{},{ref:o,state:u,className:c}),l?n.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},l):null,r)}));exports.ContextMenuTrigger=S,exports.Menu=h,exports.MenuButton=C,exports.MenuGroup=j,exports.MenuItem=f,exports.MenuList=b,exports.SubMenu=x;
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),n=require("react"),o=(e(n),e(require("classnames"))),l=require("../utils/polymorphism.js"),r=require("ariakit/portal"),a=require("ariakit/menu");const c=["children","onItemSelect"],s=["exceptionallySetClassName"],u=["as"],i=["exceptionallySetClassName","modal"],p=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],m=["label","children","exceptionallySetClassName"],d=n.createContext({});function h(e){let{children:o,onItemSelect:l}=e,r=t.objectWithoutProperties(e,c);const[s,u]=n.useState(null),i=n.useMemo(()=>s?()=>s:void 0,[s]),p=a.useMenuState(t.objectSpread2({focusLoop:!0,gutter:8,shift:4,getAnchorRect:i},r));n.useEffect(()=>{p.open||u(null)},[p.open]);const m=n.useCallback((function(e){l&&l(e)}),[l]),h=n.useMemo(()=>({state:p,handleItemSelect:m,handleAnchorRectChange:u}),[p,m]);return n.createElement(d.Provider,{value:h},o)}const C=l.polymorphicComponent((function(e,l){let{exceptionallySetClassName:r}=e,c=t.objectWithoutProperties(e,s);const{state:u}=n.useContext(d);return n.createElement(a.MenuButton,t.objectSpread2(t.objectSpread2({},c),{},{state:u,ref:l,className:o("reactist_menubutton",r)}))})),S=l.polymorphicComponent((function(e,o){let{as:l="div"}=e,r=t.objectWithoutProperties(e,u);const{handleAnchorRectChange:a,state:c}=n.useContext(d),s=n.useCallback(e=>{e.preventDefault(),a({x:e.clientX,y:e.clientY}),c.show()},[a,c]);return n.createElement(l,t.objectSpread2(t.objectSpread2({},r),{},{onContextMenu:s,ref:o}))})),b=l.polymorphicComponent((function(e,l){let{exceptionallySetClassName:c,modal:s=!0}=e,u=t.objectWithoutProperties(e,i);const{state:p}=n.useContext(d);return p.open?n.createElement(r.Portal,{preserveTabOrder:!0},n.createElement(a.Menu,t.objectSpread2(t.objectSpread2({},u),{},{state:p,ref:l,className:o("reactist_menulist",c),modal:s}))):null})),f=l.polymorphicComponent((function(e,o){let{value:l,children:r,onSelect:c,hideOnSelect:s=!0,onClick:u,exceptionallySetClassName:i,as:m="button"}=e,h=t.objectWithoutProperties(e,p);const{handleItemSelect:C,state:S}=n.useContext(d),{hide:b}=S,f=n.useCallback((function(e){null==u||u(e);const t=!1!==(c&&!e.defaultPrevented?c():void 0)&&s;C(l),t&&b()}),[c,u,C,s,b,l]);return n.createElement(a.MenuItem,t.objectSpread2(t.objectSpread2({},h),{},{as:m,state:S,ref:o,onClick:f,className:i,hideOnClick:!1}),r)})),x=n.forwardRef((function({children:e,onItemSelect:t},o){const{handleItemSelect:l,state:r}=n.useContext(d),{hide:c}=r,s=n.useCallback((function(e){t&&t(e),l(e),c()}),[c,l,t]),[u,i]=n.Children.toArray(e),p=n.useCallback((function(e){return n.cloneElement(u,e)}),[u]);return n.createElement(h,{onItemSelect:s},n.createElement(a.MenuItem,{as:"div",state:r,ref:o,hideOnClick:!1},p),i)})),j=l.polymorphicComponent((function(e,o){let{label:l,children:r,exceptionallySetClassName:c}=e,s=t.objectWithoutProperties(e,m);const{state:u}=n.useContext(d);return n.createElement(a.MenuGroup,t.objectSpread2(t.objectSpread2({},s),{},{ref:o,state:u,className:c}),l?n.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},l):null,r)}));exports.ContextMenuTrigger=S,exports.Menu=h,exports.MenuButton=C,exports.MenuGroup=j,exports.MenuItem=f,exports.MenuList=b,exports.SubMenu=x;
|
|
2
2
|
//# sourceMappingURL=menu.js.map
|
package/lib/menu/menu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { polymorphicComponent } from '../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n state: Ariakit.MenuState\n handleItemSelect: (value: string | null | undefined) => void\n handleAnchorRectChange: (value: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n // This is however of little consequence since this value is only used if some of the components\n // are used outside Menu, something that should not happen and we do not support.\n // @ts-expect-error\n {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n /**\n * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n * `MenuButton` that triggers the menu to be opened or closed.\n */\n children: React.ReactNode\n\n /**\n * An optional callback that will be called back whenever a menu item is selected. It receives\n * the `value` of the selected `MenuItem`.\n *\n * If you pass down this callback, it is recommended that you properly memoize it so it does not\n * change on every render.\n */\n onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n const [anchorRect, handleAnchorRectChange] = React.useState<{ x: number; y: number } | null>(\n null,\n )\n const getAnchorRect = React.useMemo(() => {\n return anchorRect ? () => anchorRect : undefined\n }, [anchorRect])\n\n const state = Ariakit.useMenuState({\n focusLoop: true,\n gutter: 8,\n shift: 4,\n getAnchorRect,\n ...props,\n })\n\n const handleItemSelect = React.useCallback(\n function handleItemSelect(value: string | null | undefined) {\n if (onItemSelect) onItemSelect(value)\n },\n [onItemSelect],\n )\n\n const value: MenuContextState = React.useMemo(\n () => ({\n state,\n handleItemSelect,\n handleAnchorRectChange,\n }),\n [state, handleItemSelect],\n )\n\n return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n { exceptionallySetClassName, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n return (\n <Ariakit.MenuButton\n {...props}\n state={state}\n ref={ref}\n className={classNames('reactist_menubutton', exceptionallySetClassName)}\n />\n )\n})\n\n//\n// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n { as: component = 'div', ...props },\n ref,\n) {\n const { handleAnchorRectChange, state } = React.useContext(MenuContext)\n const handleContextMenu = React.useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault()\n handleAnchorRectChange({ x: event.clientX, y: event.clientY })\n state.show()\n },\n [handleAnchorRectChange, state],\n )\n\n return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n { exceptionallySetClassName, modal = true, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n\n return state.open ? (\n <Portal preserveTabOrder>\n <Ariakit.Menu\n {...props}\n state={state}\n ref={ref}\n className={classNames('reactist_menulist', exceptionallySetClassName)}\n modal={modal}\n />\n </Portal>\n ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n /**\n * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n * `onItemSelect` when you provide that instead of (or alongside) providing individual\n * `onSelect` callbacks to each menu item.\n */\n value?: string\n /**\n * The content inside the menu item.\n */\n children: React.ReactNode\n /**\n * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n * navigation across the menu options.\n *\n * @default true\n */\n disabled?: boolean\n /**\n * When `true` the menu will close when the menu item is selected, in addition to performing the\n * action that the menu item is set out to do.\n *\n * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n * selected. This should be the exception and not the norm, as the default is to auto-close.\n *\n * @default true\n */\n hideOnSelect?: boolean\n /**\n * The action to perform when the menu item is selected.\n *\n * If you return `false` from this function, the menu will not auto-close when this menu item\n * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n * achieve the same effect conditionally and dynamically deciding at run time.\n */\n onSelect?: () => unknown\n /**\n * The event handler called when the menu item is clicked.\n *\n * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n * action that the menu item represents. But in general you should prefer `onSelect` for that.\n *\n * The main use for this handler is to get access to the click event. This can be used, for\n * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n * consequences of the click, including preventing `onSelect` from being called. In particular,\n * this is useful in menu items that are links, and you want the click to not trigger navigation\n * under some circumstances.\n */\n onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n {\n value,\n children,\n onSelect,\n hideOnSelect = true,\n onClick,\n exceptionallySetClassName,\n as = 'button',\n ...props\n },\n ref,\n) {\n const { handleItemSelect, state } = React.useContext(MenuContext)\n const { hide } = state\n\n const handleClick = React.useCallback(\n function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n onClick?.(event)\n const onSelectResult: unknown =\n onSelect && !event.defaultPrevented ? onSelect() : undefined\n const shouldClose = onSelectResult !== false && hideOnSelect\n handleItemSelect(value)\n if (shouldClose) hide()\n },\n [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n )\n\n return (\n <Ariakit.MenuItem\n {...props}\n as={as}\n state={state}\n ref={ref}\n onClick={handleClick}\n className={exceptionallySetClassName}\n hideOnClick={false}\n >\n {children}\n </Ariakit.MenuItem>\n )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n * <MenuButton>More options</MenuButton>\n * <MenuList>\n * <MenuItem label=\"Preferences\" />\n * <MenuItem label=\"Sign out\" />\n * </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n { children, onItemSelect },\n ref,\n) {\n const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n const { hide: parentMenuHide } = state\n\n const handleSubItemSelect = React.useCallback(\n function handleSubItemSelect(value: string | null | undefined) {\n if (onItemSelect) onItemSelect(value)\n parentMenuItemSelect(value)\n parentMenuHide()\n },\n [parentMenuHide, parentMenuItemSelect, onItemSelect],\n )\n\n const [button, list] = React.Children.toArray(children)\n\n // Ariakit needs to be able to pass props to the MenuButton\n // and combine it with the MenuItem component\n const renderMenuButton = React.useCallback(\n function renderMenuButton(props: MenuButtonProps) {\n return React.cloneElement(button as React.ReactElement, props)\n },\n [button],\n )\n\n return (\n <Menu onItemSelect={handleSubItemSelect}>\n <Ariakit.MenuItem as=\"div\" state={state} ref={ref} hideOnClick={false}>\n {renderMenuButton}\n </Ariakit.MenuItem>\n {list}\n </Menu>\n )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n /**\n * A label to be shown visually and also used to semantically label the group.\n */\n label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n { label, children, exceptionallySetClassName, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n return (\n <Ariakit.MenuGroup {...props} ref={ref} state={state} className={exceptionallySetClassName}>\n {label ? (\n <div role=\"presentation\" className=\"reactist_menugroup__label\">\n {label}\n </div>\n ) : null}\n {children}\n </Ariakit.MenuGroup>\n )\n})\n\nexport { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","anchorRect","handleAnchorRectChange","getAnchorRect","undefined","state","Ariakit","focusLoop","gutter","shift","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","onContextMenu","MenuList","modal","open","Portal","preserveTabOrder","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","shouldClose","defaultPrevented","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","role"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { polymorphicComponent } from '../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n state: Ariakit.MenuState\n handleItemSelect: (value: string | null | undefined) => void\n handleAnchorRectChange: (value: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n // This is however of little consequence since this value is only used if some of the components\n // are used outside Menu, something that should not happen and we do not support.\n // @ts-expect-error\n {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n /**\n * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n * `MenuButton` that triggers the menu to be opened or closed.\n */\n children: React.ReactNode\n\n /**\n * An optional callback that will be called back whenever a menu item is selected. It receives\n * the `value` of the selected `MenuItem`.\n *\n * If you pass down this callback, it is recommended that you properly memoize it so it does not\n * change on every render.\n */\n onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n const [anchorRect, handleAnchorRectChange] = React.useState<{ x: number; y: number } | null>(\n null,\n )\n const getAnchorRect = React.useMemo(() => {\n return anchorRect ? () => anchorRect : undefined\n }, [anchorRect])\n\n const state = Ariakit.useMenuState({\n focusLoop: true,\n gutter: 8,\n shift: 4,\n getAnchorRect,\n ...props,\n })\n\n React.useEffect(() => {\n if (!state.open) handleAnchorRectChange(null)\n }, [state.open])\n\n const handleItemSelect = React.useCallback(\n function handleItemSelect(value: string | null | undefined) {\n if (onItemSelect) onItemSelect(value)\n },\n [onItemSelect],\n )\n\n const value: MenuContextState = React.useMemo(\n () => ({\n state,\n handleItemSelect,\n handleAnchorRectChange,\n }),\n [state, handleItemSelect],\n )\n\n return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n { exceptionallySetClassName, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n return (\n <Ariakit.MenuButton\n {...props}\n state={state}\n ref={ref}\n className={classNames('reactist_menubutton', exceptionallySetClassName)}\n />\n )\n})\n\n//\n// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n { as: component = 'div', ...props },\n ref,\n) {\n const { handleAnchorRectChange, state } = React.useContext(MenuContext)\n const handleContextMenu = React.useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault()\n handleAnchorRectChange({ x: event.clientX, y: event.clientY })\n state.show()\n },\n [handleAnchorRectChange, state],\n )\n\n return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n { exceptionallySetClassName, modal = true, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n\n return state.open ? (\n <Portal preserveTabOrder>\n <Ariakit.Menu\n {...props}\n state={state}\n ref={ref}\n className={classNames('reactist_menulist', exceptionallySetClassName)}\n modal={modal}\n />\n </Portal>\n ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n /**\n * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n * `onItemSelect` when you provide that instead of (or alongside) providing individual\n * `onSelect` callbacks to each menu item.\n */\n value?: string\n /**\n * The content inside the menu item.\n */\n children: React.ReactNode\n /**\n * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n * navigation across the menu options.\n *\n * @default true\n */\n disabled?: boolean\n /**\n * When `true` the menu will close when the menu item is selected, in addition to performing the\n * action that the menu item is set out to do.\n *\n * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n * selected. This should be the exception and not the norm, as the default is to auto-close.\n *\n * @default true\n */\n hideOnSelect?: boolean\n /**\n * The action to perform when the menu item is selected.\n *\n * If you return `false` from this function, the menu will not auto-close when this menu item\n * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n * achieve the same effect conditionally and dynamically deciding at run time.\n */\n onSelect?: () => unknown\n /**\n * The event handler called when the menu item is clicked.\n *\n * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n * action that the menu item represents. But in general you should prefer `onSelect` for that.\n *\n * The main use for this handler is to get access to the click event. This can be used, for\n * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n * consequences of the click, including preventing `onSelect` from being called. In particular,\n * this is useful in menu items that are links, and you want the click to not trigger navigation\n * under some circumstances.\n */\n onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n {\n value,\n children,\n onSelect,\n hideOnSelect = true,\n onClick,\n exceptionallySetClassName,\n as = 'button',\n ...props\n },\n ref,\n) {\n const { handleItemSelect, state } = React.useContext(MenuContext)\n const { hide } = state\n\n const handleClick = React.useCallback(\n function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n onClick?.(event)\n const onSelectResult: unknown =\n onSelect && !event.defaultPrevented ? onSelect() : undefined\n const shouldClose = onSelectResult !== false && hideOnSelect\n handleItemSelect(value)\n if (shouldClose) hide()\n },\n [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n )\n\n return (\n <Ariakit.MenuItem\n {...props}\n as={as}\n state={state}\n ref={ref}\n onClick={handleClick}\n className={exceptionallySetClassName}\n hideOnClick={false}\n >\n {children}\n </Ariakit.MenuItem>\n )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n * <MenuButton>More options</MenuButton>\n * <MenuList>\n * <MenuItem label=\"Preferences\" />\n * <MenuItem label=\"Sign out\" />\n * </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n { children, onItemSelect },\n ref,\n) {\n const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n const { hide: parentMenuHide } = state\n\n const handleSubItemSelect = React.useCallback(\n function handleSubItemSelect(value: string | null | undefined) {\n if (onItemSelect) onItemSelect(value)\n parentMenuItemSelect(value)\n parentMenuHide()\n },\n [parentMenuHide, parentMenuItemSelect, onItemSelect],\n )\n\n const [button, list] = React.Children.toArray(children)\n\n // Ariakit needs to be able to pass props to the MenuButton\n // and combine it with the MenuItem component\n const renderMenuButton = React.useCallback(\n function renderMenuButton(props: MenuButtonProps) {\n return React.cloneElement(button as React.ReactElement, props)\n },\n [button],\n )\n\n return (\n <Menu onItemSelect={handleSubItemSelect}>\n <Ariakit.MenuItem as=\"div\" state={state} ref={ref} hideOnClick={false}>\n {renderMenuButton}\n </Ariakit.MenuItem>\n {list}\n </Menu>\n )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n /**\n * A label to be shown visually and also used to semantically label the group.\n */\n label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n { label, children, exceptionallySetClassName, ...props },\n ref,\n) {\n const { state } = React.useContext(MenuContext)\n return (\n <Ariakit.MenuGroup {...props} ref={ref} state={state} className={exceptionallySetClassName}>\n {label ? (\n <div role=\"presentation\" className=\"reactist_menugroup__label\">\n {label}\n </div>\n ) : null}\n {children}\n </Ariakit.MenuGroup>\n )\n})\n\nexport { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","anchorRect","handleAnchorRectChange","getAnchorRect","undefined","state","Ariakit","focusLoop","gutter","shift","open","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","onContextMenu","MenuList","modal","Portal","preserveTabOrder","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","shouldClose","defaultPrevented","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","role"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={prose:"
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={prose:"e3d32437",darkModeTypography:"_95ee669d"};
|
|
2
2
|
//# sourceMappingURL=prose.module.css.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": "21.
|
|
9
|
+
"version": "21.1.1",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"homepage": "https://github.com/Doist/reactist#readme",
|
|
12
12
|
"repository": {
|
|
@@ -36,7 +36,6 @@
|
|
|
36
36
|
"setup": "npm install && npm run validate",
|
|
37
37
|
"validate": "npm run lint && npm run type-check && npm run test",
|
|
38
38
|
"start": "tsdx watch --onSuccess \"./scripts/organize-styles.sh\"",
|
|
39
|
-
"build-all": "npm run build && npm run build:storybook",
|
|
40
39
|
"build": "scripts/build.sh",
|
|
41
40
|
"build:storybook": "build-storybook -o docs",
|
|
42
41
|
"clean": "rimraf es lib styles dist",
|
package/styles/modal.css
CHANGED
|
@@ -8,4 +8,4 @@
|
|
|
8
8
|
._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
|
|
9
9
|
: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)}
|
|
10
10
|
: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)}
|
|
11
|
-
@-webkit-keyframes
|
|
11
|
+
@-webkit-keyframes _20c07ee6{0%{opacity:0}to{opacity:1}}@keyframes _20c07ee6{0%{opacity:0}to{opacity:1}}:root{--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}._8aa86dd3{isolation:isolate;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_20c07ee6 .2s;animation:_20c07ee6 .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal)}._8aa86dd3>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}._8aa86dd3._713bc08f>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}._8aa86dd3._713bc08f>[data-focus-lock-disabled] ._45139719{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}._45139719{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out,box-shadow .5s;max-width:100%}.ec8619a2 ._45139719{width:100%}._86a1d5a4 ._45139719{width:768px}._11d61de3 ._45139719{width:580px}.aee19643 ._45139719{width:450px}@media (min-width:992px){.fe449c81 ._45139719{width:960px}}@media (min-width:1200px){.fe449c81 ._45139719{width:1060px}}@media (max-width:1000px){.fe449c81 ._45139719{width:768px}}@media (max-width:580px){._8aa86dd3:not(.aee19643) ._45139719{width:100%!important;max-height:none}._8aa86dd3._61ffb38f:not(.aee19643)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._8aa86dd3._61ffb38f:not(.aee19643) ._45139719{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){._45139719{width:100%!important;max-height:none}._8aa86dd3._61ffb38f>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._8aa86dd3._61ffb38f ._45139719{border-bottom-left-radius:0;border-bottom-right-radius:0}}._49ffdac0{display:flex;align-items:center;height:32px}.ee92ccb3{min-height:32px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@-webkit-keyframes
|
|
1
|
+
@-webkit-keyframes _20c07ee6{0%{opacity:0}to{opacity:1}}@keyframes _20c07ee6{0%{opacity:0}to{opacity:1}}:root{--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}._8aa86dd3{isolation:isolate;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_20c07ee6 .2s;animation:_20c07ee6 .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal)}._8aa86dd3>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}._8aa86dd3._713bc08f>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}._8aa86dd3._713bc08f>[data-focus-lock-disabled] ._45139719{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}._45139719{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out,box-shadow .5s;max-width:100%}.ec8619a2 ._45139719{width:100%}._86a1d5a4 ._45139719{width:768px}._11d61de3 ._45139719{width:580px}.aee19643 ._45139719{width:450px}@media (min-width:992px){.fe449c81 ._45139719{width:960px}}@media (min-width:1200px){.fe449c81 ._45139719{width:1060px}}@media (max-width:1000px){.fe449c81 ._45139719{width:768px}}@media (max-width:580px){._8aa86dd3:not(.aee19643) ._45139719{width:100%!important;max-height:none}._8aa86dd3._61ffb38f:not(.aee19643)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._8aa86dd3._61ffb38f:not(.aee19643) ._45139719{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){._45139719{width:100%!important;max-height:none}._8aa86dd3._61ffb38f>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._8aa86dd3._61ffb38f ._45139719{border-bottom-left-radius:0;border-bottom-right-radius:0}}._49ffdac0{display:flex;align-items:center;height:32px}.ee92ccb3{min-height:32px}
|
package/styles/prose.css
CHANGED
|
@@ -3,4 +3,4 @@
|
|
|
3
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
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
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
|
-
:root{--reactist-prose-code-fill:#f7fafb;--reactist-prose-code-tint:var(--reactist-content-primary);--reactist-prose-code-border:var(--reactist-divider-primary);--reactist-prose-quote-tint:#4a6368;--reactist-prose-link-idle-tint:#006f85;--reactist-prose-link-idle-underline:var(--reactist-divider-primary);--reactist-prose-link-hover-tint:#006f85;--reactist-prose-link-hover-underline:#006f85;--reactist-prose-content-font-size:15px;--reactist-prose-em-multiplier:1.5;--reactist-prose-space-1:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)/3);--reactist-prose-space-2:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*2/3);--reactist-prose-space-3:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*1);--reactist-prose-space-4:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*4/3);--reactist-prose-space-6:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*5/3)}.
|
|
6
|
+
:root{--reactist-prose-code-fill:#f7fafb;--reactist-prose-code-tint:var(--reactist-content-primary);--reactist-prose-code-border:var(--reactist-divider-primary);--reactist-prose-quote-tint:#4a6368;--reactist-prose-link-idle-tint:#006f85;--reactist-prose-link-idle-underline:var(--reactist-divider-primary);--reactist-prose-link-hover-tint:#006f85;--reactist-prose-link-hover-underline:#006f85;--reactist-prose-content-font-size:15px;--reactist-prose-em-multiplier:1.5;--reactist-prose-space-1:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)/3);--reactist-prose-space-2:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*2/3);--reactist-prose-space-3:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*1);--reactist-prose-space-4:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*4/3);--reactist-prose-space-6:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*5/3)}.e3d32437{font-size:var(--reactist-prose-content-font-size);color:var(--reactist-content-primary);line-height:1.65;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.e3d32437,.e3d32437 *,.e3d32437 :after,.e3d32437 :before{box-sizing:border-box}.e3d32437 p{margin-top:var(--reactist-prose-space-2)}.e3d32437 h1,.e3d32437 h2,.e3d32437 h3,.e3d32437 h4,.e3d32437 h5,.e3d32437 h6{font-weight:600;margin:0}.e3d32437 h1{font-size:1.35em;margin-top:var(--reactist-prose-space-4);line-height:1.35}.e3d32437 h2{font-size:1.2em;margin-top:var(--reactist-prose-space-3);line-height:1.45}.e3d32437 h1 *,.e3d32437 h2 *{font-size:1em}.e3d32437 h3,.e3d32437 h4,.e3d32437 h5,.e3d32437 h6{font-size:inherit;margin-top:var(--reactist-prose-space-2);line-height:inherit}.e3d32437 ol,.e3d32437 ul{margin:var(--reactist-prose-space-1) 0 0;padding-left:var(--reactist-prose-space-4)}.e3d32437 ol li p,.e3d32437 ul li p{margin-block:var(--reactist-prose-space-1)}.e3d32437 ol li p:first-child,.e3d32437 ul li p:first-child{margin:0}.e3d32437 ul{list-style:disc}.e3d32437 ul ul{list-style:circle}.e3d32437 ul ul ul{list-style:square}.e3d32437 ol{list-style:decimal}.e3d32437 li+li,.e3d32437 ol ol,.e3d32437 ol ul,.e3d32437 ul ol,.e3d32437 ul ul{margin-top:calc(0.5*var(--reactist-prose-space-1))}.e3d32437 ol li{padding-left:4px}.e3d32437 ul li::marker{font-size:.9em}.e3d32437 hr{margin-block:var(--reactist-prose-space-2);border:none;border-top:1px solid var(--reactist-divider-secondary)}.e3d32437 blockquote{color:var(--reactist-prose-quote-tint);padding:0;padding-block:0;padding-inline:var(--reactist-spacing-large);margin:0;margin-block:var(--reactist-prose-space-2);position:relative}.e3d32437 blockquote:before{content:"";border-left:2px solid var(--reactist-divider-primary);position:absolute;top:.25em;bottom:.25em;left:0}.e3d32437 blockquote :first-child{margin-top:0}.e3d32437 blockquote code{color:inherit}.e3d32437 :not(pre)>code,.e3d32437 pre{color:var(--reactist-prose-code-tint);background-color:var(--reactist-prose-code-fill);border:1px solid var(--reactist-prose-code-border);border-radius:var(--reactist-border-radius-small);font-family:Source Code Pro,Inconsolata,Monaco,Consolas,Courier New,Courier,monospace;font-size:.875em;line-height:1.6}.e3d32437 :not(pre)>code{padding:2px 4px;vertical-align:text-top}.e3d32437 pre{margin:var(--reactist-prose-space-2) 0 0;padding:var(--reactist-prose-space-1) var(--reactist-prose-space-2)}.e3d32437 pre code{white-space:break-spaces;overflow:auto}.e3d32437 h1+*{margin-top:var(--reactist-prose-space-1)!important}.e3d32437 h1+h2,.e3d32437 h2+h3,.e3d32437 h3+h4,.e3d32437 h4+h5,.e3d32437 h5+h6{margin-top:var(--reactist-prose-space-3)!important}.e3d32437 h2+:not(h3){margin-top:var(--reactist-prose-space-1)!important}.e3d32437 em{font-style:italic}.e3d32437 b,.e3d32437 strong{font-weight:600}.e3d32437 a,.e3d32437 a code{color:var(--reactist-prose-link-idle-tint);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:solid;text-decoration-style:solid;-webkit-text-decoration-color:var(--reactist-prose-link-idle-underline);text-decoration-color:var(--reactist-prose-link-idle-underline)}.e3d32437 a:active,.e3d32437 a:active code,.e3d32437 a:focus,.e3d32437 a:focus code,.e3d32437 a:hover,.e3d32437 a:hover code{color:var(--reactist-prose-link-hover-tint);-webkit-text-decoration-color:var(--reactist-prose-link-hover-underline);text-decoration-color:var(--reactist-prose-link-hover-underline)}.e3d32437._95ee669d{letter-spacing:.0065em}.e3d32437._95ee669d h1,.e3d32437._95ee669d h2{letter-spacing:.0125em}.e3d32437._95ee669d b,.e3d32437._95ee669d b *,.e3d32437._95ee669d strong,.e3d32437._95ee669d strong *{letter-spacing:.01em}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--reactist-prose-code-fill:#f7fafb;--reactist-prose-code-tint:var(--reactist-content-primary);--reactist-prose-code-border:var(--reactist-divider-primary);--reactist-prose-quote-tint:#4a6368;--reactist-prose-link-idle-tint:#006f85;--reactist-prose-link-idle-underline:var(--reactist-divider-primary);--reactist-prose-link-hover-tint:#006f85;--reactist-prose-link-hover-underline:#006f85;--reactist-prose-content-font-size:15px;--reactist-prose-em-multiplier:1.5;--reactist-prose-space-1:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)/3);--reactist-prose-space-2:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*2/3);--reactist-prose-space-3:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*1);--reactist-prose-space-4:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*4/3);--reactist-prose-space-6:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*5/3)}.
|
|
1
|
+
:root{--reactist-prose-code-fill:#f7fafb;--reactist-prose-code-tint:var(--reactist-content-primary);--reactist-prose-code-border:var(--reactist-divider-primary);--reactist-prose-quote-tint:#4a6368;--reactist-prose-link-idle-tint:#006f85;--reactist-prose-link-idle-underline:var(--reactist-divider-primary);--reactist-prose-link-hover-tint:#006f85;--reactist-prose-link-hover-underline:#006f85;--reactist-prose-content-font-size:15px;--reactist-prose-em-multiplier:1.5;--reactist-prose-space-1:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)/3);--reactist-prose-space-2:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*2/3);--reactist-prose-space-3:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*1);--reactist-prose-space-4:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*4/3);--reactist-prose-space-6:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*5/3)}.e3d32437{font-size:var(--reactist-prose-content-font-size);color:var(--reactist-content-primary);line-height:1.65;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.e3d32437,.e3d32437 *,.e3d32437 :after,.e3d32437 :before{box-sizing:border-box}.e3d32437 p{margin-top:var(--reactist-prose-space-2)}.e3d32437 h1,.e3d32437 h2,.e3d32437 h3,.e3d32437 h4,.e3d32437 h5,.e3d32437 h6{font-weight:600;margin:0}.e3d32437 h1{font-size:1.35em;margin-top:var(--reactist-prose-space-4);line-height:1.35}.e3d32437 h2{font-size:1.2em;margin-top:var(--reactist-prose-space-3);line-height:1.45}.e3d32437 h1 *,.e3d32437 h2 *{font-size:1em}.e3d32437 h3,.e3d32437 h4,.e3d32437 h5,.e3d32437 h6{font-size:inherit;margin-top:var(--reactist-prose-space-2);line-height:inherit}.e3d32437 ol,.e3d32437 ul{margin:var(--reactist-prose-space-1) 0 0;padding-left:var(--reactist-prose-space-4)}.e3d32437 ol li p,.e3d32437 ul li p{margin-block:var(--reactist-prose-space-1)}.e3d32437 ol li p:first-child,.e3d32437 ul li p:first-child{margin:0}.e3d32437 ul{list-style:disc}.e3d32437 ul ul{list-style:circle}.e3d32437 ul ul ul{list-style:square}.e3d32437 ol{list-style:decimal}.e3d32437 li+li,.e3d32437 ol ol,.e3d32437 ol ul,.e3d32437 ul ol,.e3d32437 ul ul{margin-top:calc(0.5*var(--reactist-prose-space-1))}.e3d32437 ol li{padding-left:4px}.e3d32437 ul li::marker{font-size:.9em}.e3d32437 hr{margin-block:var(--reactist-prose-space-2);border:none;border-top:1px solid var(--reactist-divider-secondary)}.e3d32437 blockquote{color:var(--reactist-prose-quote-tint);padding:0;padding-block:0;padding-inline:var(--reactist-spacing-large);margin:0;margin-block:var(--reactist-prose-space-2);position:relative}.e3d32437 blockquote:before{content:"";border-left:2px solid var(--reactist-divider-primary);position:absolute;top:.25em;bottom:.25em;left:0}.e3d32437 blockquote :first-child{margin-top:0}.e3d32437 blockquote code{color:inherit}.e3d32437 :not(pre)>code,.e3d32437 pre{color:var(--reactist-prose-code-tint);background-color:var(--reactist-prose-code-fill);border:1px solid var(--reactist-prose-code-border);border-radius:var(--reactist-border-radius-small);font-family:Source Code Pro,Inconsolata,Monaco,Consolas,Courier New,Courier,monospace;font-size:.875em;line-height:1.6}.e3d32437 :not(pre)>code{padding:2px 4px;vertical-align:text-top}.e3d32437 pre{margin:var(--reactist-prose-space-2) 0 0;padding:var(--reactist-prose-space-1) var(--reactist-prose-space-2)}.e3d32437 pre code{white-space:break-spaces;overflow:auto}.e3d32437 h1+*{margin-top:var(--reactist-prose-space-1)!important}.e3d32437 h1+h2,.e3d32437 h2+h3,.e3d32437 h3+h4,.e3d32437 h4+h5,.e3d32437 h5+h6{margin-top:var(--reactist-prose-space-3)!important}.e3d32437 h2+:not(h3){margin-top:var(--reactist-prose-space-1)!important}.e3d32437 em{font-style:italic}.e3d32437 b,.e3d32437 strong{font-weight:600}.e3d32437 a,.e3d32437 a code{color:var(--reactist-prose-link-idle-tint);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:solid;text-decoration-style:solid;-webkit-text-decoration-color:var(--reactist-prose-link-idle-underline);text-decoration-color:var(--reactist-prose-link-idle-underline)}.e3d32437 a:active,.e3d32437 a:active code,.e3d32437 a:focus,.e3d32437 a:focus code,.e3d32437 a:hover,.e3d32437 a:hover code{color:var(--reactist-prose-link-hover-tint);-webkit-text-decoration-color:var(--reactist-prose-link-hover-underline);text-decoration-color:var(--reactist-prose-link-hover-underline)}.e3d32437._95ee669d{letter-spacing:.0065em}.e3d32437._95ee669d h1,.e3d32437._95ee669d h2{letter-spacing:.0125em}.e3d32437._95ee669d b,.e3d32437._95ee669d b *,.e3d32437._95ee669d strong,.e3d32437._95ee669d strong *{letter-spacing:.01em}
|
package/styles/reactist.css
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
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}}
|
|
16
16
|
._71a1610c{color:var(--reactist-content-primary);font-weight:var(--reactist-font-weight-strong);font-family:var(--reactist-font-family)}._63750f40{font-weight:var(--reactist-font-weight-regular)}._9ce984cf{color:var(--reactist-content-secondary)}._1acad35e{color:#d1453b}h1._71a1610c{font-size:var(--reactist-font-size-header)}h1._3da27a00{font-size:var(--reactist-font-size-header-xlarge)}h1.df220733{font-size:var(--reactist-font-size-header-large)}h1.eb373739,h2._71a1610c{font-size:var(--reactist-font-size-subtitle)}h2._3da27a00{font-size:var(--reactist-font-size-header-large)}h2.df220733{font-size:var(--reactist-font-size-header)}h2.eb373739,h3._71a1610c{font-size:var(--reactist-font-size-body)}h3._3da27a00{font-size:var(--reactist-font-size-header)}h3.df220733{font-size:var(--reactist-font-size-subtitle)}h3.eb373739{font-size:var(--reactist-font-size-caption)}h4._71a1610c,h5._71a1610c,h6._71a1610c{font-size:var(--reactist-font-size-body)}h4._3da27a00,h5._3da27a00,h6._3da27a00{font-size:var(--reactist-font-size-header)}h4.df220733,h5.df220733,h6.df220733{font-size:var(--reactist-font-size-subtitle)}.f53cfd2b{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.e4819fc9{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.a0ed6177{-webkit-line-clamp:2}._180d433e{-webkit-line-clamp:3}._40826ad9{-webkit-line-clamp:4}._5999b247{-webkit-line-clamp:5}
|
|
17
17
|
.a83bd4e0{font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._266d6623{font-size:var(--reactist-font-size-caption)}.a8d37c6e{font-size:var(--reactist-font-size-copy)}._39f4eb1f{font-size:var(--reactist-font-size-subtitle)}._7be5c531{font-weight:var(--reactist-font-weight-medium)}.e214ff2e{font-weight:var(--reactist-font-weight-strong)}._6a3e5ade{color:var(--reactist-content-secondary)}._8f5b5f2b{color:var(--reactist-content-danger)}._9ae47ae4{color:var(--reactist-content-positive)}._969f18f7{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}._2f303ac3{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.d3e04245{-webkit-line-clamp:2}._33411704{-webkit-line-clamp:3}.bfc32640{-webkit-line-clamp:4}.f813c82f{-webkit-line-clamp:5}
|
|
18
|
-
:root{--reactist-prose-code-fill:#f7fafb;--reactist-prose-code-tint:var(--reactist-content-primary);--reactist-prose-code-border:var(--reactist-divider-primary);--reactist-prose-quote-tint:#4a6368;--reactist-prose-link-idle-tint:#006f85;--reactist-prose-link-idle-underline:var(--reactist-divider-primary);--reactist-prose-link-hover-tint:#006f85;--reactist-prose-link-hover-underline:#006f85;--reactist-prose-content-font-size:15px;--reactist-prose-em-multiplier:1.5;--reactist-prose-space-1:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)/3);--reactist-prose-space-2:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*2/3);--reactist-prose-space-3:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*1);--reactist-prose-space-4:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*4/3);--reactist-prose-space-6:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*5/3)}.
|
|
18
|
+
:root{--reactist-prose-code-fill:#f7fafb;--reactist-prose-code-tint:var(--reactist-content-primary);--reactist-prose-code-border:var(--reactist-divider-primary);--reactist-prose-quote-tint:#4a6368;--reactist-prose-link-idle-tint:#006f85;--reactist-prose-link-idle-underline:var(--reactist-divider-primary);--reactist-prose-link-hover-tint:#006f85;--reactist-prose-link-hover-underline:#006f85;--reactist-prose-content-font-size:15px;--reactist-prose-em-multiplier:1.5;--reactist-prose-space-1:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)/3);--reactist-prose-space-2:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*2/3);--reactist-prose-space-3:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*1);--reactist-prose-space-4:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*4/3);--reactist-prose-space-6:calc(var(--reactist-prose-em-multiplier)*var(--reactist-prose-content-font-size)*5/3)}.e3d32437{font-size:var(--reactist-prose-content-font-size);color:var(--reactist-content-primary);line-height:1.65;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.e3d32437,.e3d32437 *,.e3d32437 :after,.e3d32437 :before{box-sizing:border-box}.e3d32437 p{margin-top:var(--reactist-prose-space-2)}.e3d32437 h1,.e3d32437 h2,.e3d32437 h3,.e3d32437 h4,.e3d32437 h5,.e3d32437 h6{font-weight:600;margin:0}.e3d32437 h1{font-size:1.35em;margin-top:var(--reactist-prose-space-4);line-height:1.35}.e3d32437 h2{font-size:1.2em;margin-top:var(--reactist-prose-space-3);line-height:1.45}.e3d32437 h1 *,.e3d32437 h2 *{font-size:1em}.e3d32437 h3,.e3d32437 h4,.e3d32437 h5,.e3d32437 h6{font-size:inherit;margin-top:var(--reactist-prose-space-2);line-height:inherit}.e3d32437 ol,.e3d32437 ul{margin:var(--reactist-prose-space-1) 0 0;padding-left:var(--reactist-prose-space-4)}.e3d32437 ol li p,.e3d32437 ul li p{margin-block:var(--reactist-prose-space-1)}.e3d32437 ol li p:first-child,.e3d32437 ul li p:first-child{margin:0}.e3d32437 ul{list-style:disc}.e3d32437 ul ul{list-style:circle}.e3d32437 ul ul ul{list-style:square}.e3d32437 ol{list-style:decimal}.e3d32437 li+li,.e3d32437 ol ol,.e3d32437 ol ul,.e3d32437 ul ol,.e3d32437 ul ul{margin-top:calc(0.5*var(--reactist-prose-space-1))}.e3d32437 ol li{padding-left:4px}.e3d32437 ul li::marker{font-size:.9em}.e3d32437 hr{margin-block:var(--reactist-prose-space-2);border:none;border-top:1px solid var(--reactist-divider-secondary)}.e3d32437 blockquote{color:var(--reactist-prose-quote-tint);padding:0;padding-block:0;padding-inline:var(--reactist-spacing-large);margin:0;margin-block:var(--reactist-prose-space-2);position:relative}.e3d32437 blockquote:before{content:"";border-left:2px solid var(--reactist-divider-primary);position:absolute;top:.25em;bottom:.25em;left:0}.e3d32437 blockquote :first-child{margin-top:0}.e3d32437 blockquote code{color:inherit}.e3d32437 :not(pre)>code,.e3d32437 pre{color:var(--reactist-prose-code-tint);background-color:var(--reactist-prose-code-fill);border:1px solid var(--reactist-prose-code-border);border-radius:var(--reactist-border-radius-small);font-family:Source Code Pro,Inconsolata,Monaco,Consolas,Courier New,Courier,monospace;font-size:.875em;line-height:1.6}.e3d32437 :not(pre)>code{padding:2px 4px;vertical-align:text-top}.e3d32437 pre{margin:var(--reactist-prose-space-2) 0 0;padding:var(--reactist-prose-space-1) var(--reactist-prose-space-2)}.e3d32437 pre code{white-space:break-spaces;overflow:auto}.e3d32437 h1+*{margin-top:var(--reactist-prose-space-1)!important}.e3d32437 h1+h2,.e3d32437 h2+h3,.e3d32437 h3+h4,.e3d32437 h4+h5,.e3d32437 h5+h6{margin-top:var(--reactist-prose-space-3)!important}.e3d32437 h2+:not(h3){margin-top:var(--reactist-prose-space-1)!important}.e3d32437 em{font-style:italic}.e3d32437 b,.e3d32437 strong{font-weight:600}.e3d32437 a,.e3d32437 a code{color:var(--reactist-prose-link-idle-tint);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:solid;text-decoration-style:solid;-webkit-text-decoration-color:var(--reactist-prose-link-idle-underline);text-decoration-color:var(--reactist-prose-link-idle-underline)}.e3d32437 a:active,.e3d32437 a:active code,.e3d32437 a:focus,.e3d32437 a:focus code,.e3d32437 a:hover,.e3d32437 a:hover code{color:var(--reactist-prose-link-hover-tint);-webkit-text-decoration-color:var(--reactist-prose-link-hover-underline);text-decoration-color:var(--reactist-prose-link-hover-underline)}.e3d32437._95ee669d{letter-spacing:.0065em}.e3d32437._95ee669d h1,.e3d32437._95ee669d h2{letter-spacing:.0125em}.e3d32437._95ee669d b,.e3d32437._95ee669d b *,.e3d32437._95ee669d strong,.e3d32437._95ee669d strong *{letter-spacing:.01em}
|
|
19
19
|
: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)}
|
|
20
20
|
:root{--reactist-text-link-idle-tint:#246fe0;--reactist-text-link-hover-tint:var(--reactist-text-link-idle-tint);--reactist-text-link-idle-decoration:none;--reactist-text-link-hover-decoration:underline}.fdc181b3{font-size:inherit;font-weight:inherit;font-family:inherit;-webkit-text-decoration:var(--reactist-text-link-idle-decoration);text-decoration:var(--reactist-text-link-idle-decoration);color:var(--reactist-text-link-idle-tint);cursor:pointer}.fdc181b3:hover{-webkit-text-decoration:var(--reactist-text-link-hover-decoration);text-decoration:var(--reactist-text-link-hover-decoration);color:var(--reactist-text-link-hover-tint)}.fdc181b3 svg{display:inline-block;width:1em;height:1em;font-size:inherit;color:inherit;vertical-align:-.125em;fill:currentColor;padding:0 6px}
|
|
21
21
|
._84dfdb83{position:relative}._84dfdb83,._84dfdb83 *{cursor:pointer;font-family:var(--reactist-font-family)}._84dfdb83._131a2ca4,._84dfdb83._131a2ca4 *{cursor:not-allowed}._84dfdb83._131a2ca4{opacity:.5}._84dfdb83 svg{color:var(--reactist-content-secondary);border-radius:5px;min-width:24px}._84dfdb83._95b1556d svg{color:var(--reactist-switch-checked)}._84dfdb83 input[type=checkbox]{display:block;height:16px;left:0;margin:4px;opacity:0;position:absolute;top:0;width:16px}._84dfdb83._49de7ebd svg{border:2px solid var(--reactist-actionable-primary-idle-fill)}._6b4b1851{margin-left:12px}._9047f3bd{margin-left:6px}
|