@doist/reactist 17.2.0 → 17.3.0
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/dist/reactist.cjs.development.js +11 -3
- 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/new-components/checkbox-field/checkbox-field.js +10 -2
- package/es/new-components/checkbox-field/checkbox-field.js.map +1 -1
- package/es/new-components/checkbox-field/checkbox-field.module.css.js +1 -1
- package/lib/new-components/checkbox-field/checkbox-field.d.ts +3 -1
- package/lib/new-components/checkbox-field/checkbox-field.js +1 -1
- package/lib/new-components/checkbox-field/checkbox-field.js.map +1 -1
- package/lib/new-components/checkbox-field/checkbox-field.module.css.js +1 -1
- package/package.json +1 -1
- package/styles/checkbox-field.css +1 -1
- package/styles/checkbox-field.module.css.css +1 -1
- package/styles/reactist.css +1 -1
|
@@ -6,12 +6,13 @@ import { useForkRef } from 'ariakit-utils';
|
|
|
6
6
|
import { CheckboxIcon } from './checkbox-icon.js';
|
|
7
7
|
import styles from './checkbox-field.module.css.js';
|
|
8
8
|
|
|
9
|
-
const _excluded = ["label", "disabled", "indeterminate", "defaultChecked", "onChange"];
|
|
9
|
+
const _excluded = ["label", "icon", "disabled", "indeterminate", "defaultChecked", "onChange"];
|
|
10
10
|
const CheckboxField = /*#__PURE__*/forwardRef(function CheckboxField(_ref, ref) {
|
|
11
11
|
var _ref2, _props$checked, _props$checked2;
|
|
12
12
|
|
|
13
13
|
let {
|
|
14
14
|
label,
|
|
15
|
+
icon,
|
|
15
16
|
disabled,
|
|
16
17
|
indeterminate,
|
|
17
18
|
defaultChecked,
|
|
@@ -73,7 +74,14 @@ const CheckboxField = /*#__PURE__*/forwardRef(function CheckboxField(_ref, ref)
|
|
|
73
74
|
disabled: disabled,
|
|
74
75
|
indeterminate: indeterminate,
|
|
75
76
|
"aria-hidden": true
|
|
76
|
-
}),
|
|
77
|
+
}), icon ? /*#__PURE__*/createElement(Box, {
|
|
78
|
+
display: "flex",
|
|
79
|
+
className: styles.icon,
|
|
80
|
+
"aria-hidden": true
|
|
81
|
+
}, icon) : null, label ? /*#__PURE__*/createElement(Box, {
|
|
82
|
+
display: "flex",
|
|
83
|
+
className: styles.label
|
|
84
|
+
}, /*#__PURE__*/createElement(Text, null, label)) : null);
|
|
77
85
|
});
|
|
78
86
|
|
|
79
87
|
export { CheckboxField };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n JSX.IntrinsicElements['input'],\n | 'type'\n | 'className'\n | 'disabled'\n | 'aria-controls'\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n> & {\n 'aria-checked'?: never\n /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n 'aria-controls'?: string\n /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n 'aria-describedby'?: string\n /** Defines a string value that labels the current checkbox for assistive technologies. */\n 'aria-label'?: string\n /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n 'aria-labelledby'?: string\n /** Defines whether or not the checkbox is disabled. */\n disabled?: boolean\n /** The label for the checkbox element. */\n label?: React.ReactNode\n /** Defines whether or not the checkbox can be of a `mixed` state. */\n indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n { label, disabled, indeterminate, defaultChecked, onChange, ...props },\n ref,\n) {\n const isControlledComponent = typeof props.checked === 'boolean'\n if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n // eslint-disable-next-line no-console\n console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n indeterminate = undefined\n }\n\n if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn('A Checkbox needs a label')\n }\n\n const [keyFocused, setKeyFocused] = React.useState(false)\n const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n const isChecked = props.checked ?? checkedState\n\n const internalRef = React.useRef<HTMLInputElement>(null)\n const combinedRef = useForkRef(internalRef, ref)\n React.useEffect(\n function setIndeterminate() {\n if (internalRef.current && typeof indeterminate === 'boolean') {\n internalRef.current.indeterminate = indeterminate\n }\n },\n [indeterminate],\n )\n\n return (\n <Box\n as=\"label\"\n display=\"flex\"\n alignItems=\"center\"\n className={[\n styles.container,\n disabled ? styles.disabled : null,\n isChecked ? styles.checked : null,\n keyFocused ? styles.keyFocused : null,\n ]}\n >\n <input\n {...props}\n ref={combinedRef}\n type=\"checkbox\"\n aria-checked={indeterminate ? 'mixed' : isChecked}\n checked={isChecked}\n disabled={disabled}\n onChange={(event) => {\n onChange?.(event)\n if (!event.defaultPrevented) {\n setChecked(event.currentTarget.checked)\n }\n }}\n onBlur={(event) => {\n setKeyFocused(false)\n props?.onBlur?.(event)\n }}\n onKeyUp={(event) => {\n setKeyFocused(true)\n props?.onKeyUp?.(event)\n }}\n />\n <CheckboxIcon\n checked={isChecked}\n disabled={disabled}\n indeterminate={indeterminate}\n aria-hidden\n />\n {label ? <Text>{label}</Text
|
|
1
|
+
{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n JSX.IntrinsicElements['input'],\n | 'type'\n | 'className'\n | 'disabled'\n | 'aria-controls'\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n> & {\n 'aria-checked'?: never\n /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n 'aria-controls'?: string\n /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n 'aria-describedby'?: string\n /** Defines a string value that labels the current checkbox for assistive technologies. */\n 'aria-label'?: string\n /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n 'aria-labelledby'?: string\n /** Defines whether or not the checkbox is disabled. */\n disabled?: boolean\n /** The label for the checkbox element. */\n label?: React.ReactNode\n /** The icon that should be added to the checkbox label. */\n icon?: React.ReactChild\n /** Defines whether or not the checkbox can be of a `mixed` state. */\n indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n ref,\n) {\n const isControlledComponent = typeof props.checked === 'boolean'\n if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n // eslint-disable-next-line no-console\n console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n indeterminate = undefined\n }\n\n if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn('A Checkbox needs a label')\n }\n\n const [keyFocused, setKeyFocused] = React.useState(false)\n const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n const isChecked = props.checked ?? checkedState\n\n const internalRef = React.useRef<HTMLInputElement>(null)\n const combinedRef = useForkRef(internalRef, ref)\n React.useEffect(\n function setIndeterminate() {\n if (internalRef.current && typeof indeterminate === 'boolean') {\n internalRef.current.indeterminate = indeterminate\n }\n },\n [indeterminate],\n )\n\n return (\n <Box\n as=\"label\"\n display=\"flex\"\n alignItems=\"center\"\n className={[\n styles.container,\n disabled ? styles.disabled : null,\n isChecked ? styles.checked : null,\n keyFocused ? styles.keyFocused : null,\n ]}\n >\n <input\n {...props}\n ref={combinedRef}\n type=\"checkbox\"\n aria-checked={indeterminate ? 'mixed' : isChecked}\n checked={isChecked}\n disabled={disabled}\n onChange={(event) => {\n onChange?.(event)\n if (!event.defaultPrevented) {\n setChecked(event.currentTarget.checked)\n }\n }}\n onBlur={(event) => {\n setKeyFocused(false)\n props?.onBlur?.(event)\n }}\n onKeyUp={(event) => {\n setKeyFocused(true)\n props?.onKeyUp?.(event)\n }}\n />\n <CheckboxIcon\n checked={isChecked}\n disabled={disabled}\n indeterminate={indeterminate}\n aria-hidden\n />\n {icon ? (\n <Box display=\"flex\" className={styles.icon} aria-hidden>\n {icon}\n </Box>\n ) : null}\n {label ? (\n <Box display=\"flex\" className={styles.label}>\n <Text>{label}</Text>\n </Box>\n ) : null}\n </Box>\n )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["CheckboxField","React","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","isControlledComponent","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","setIndeterminate","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":";;;;;;;;;MAqCMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAEzEE,GAFyE;;;MACzE;IAAEC,KAAF;IAASC,IAAT;IAAeC,QAAf;IAAyBC,aAAzB;IAAwCC,cAAxC;IAAwDC;;MAAaC;;EAGrE,MAAMC,qBAAqB,GAAG,OAAOD,KAAK,CAACE,OAAb,KAAyB,SAAvD;;EACA,IAAI,OAAOL,aAAP,KAAyB,SAAzB,IAAsC,CAACI,qBAA3C,EAAkE;;IAE9DE,OAAO,CAACC,IAAR,CAAa,sDAAb;IACAP,aAAa,GAAGQ,SAAhB;;;EAGJ,IAAI,CAACX,KAAD,IAAU,CAACM,KAAK,CAAC,YAAD,CAAhB,IAAkC,CAACA,KAAK,CAAC,iBAAD,CAA5C,EAAiE;;IAE7DG,OAAO,CAACC,IAAR,CAAa,0BAAb;;;EAGJ,MAAM,CAACE,UAAD,EAAaC,aAAb,IAA8Bf,QAAA,CAAe,KAAf,CAApC;EACA,MAAM,CAACgB,YAAD,EAAeC,UAAf,IAA6BjB,QAAA,4BAAeQ,KAAK,CAACE,OAArB,6BAAgCJ,cAAhC,oBAAkD,KAAlD,CAAnC;EACA,MAAMY,SAAS,sBAAGV,KAAK,CAACE,OAAT,8BAAoBM,YAAnC;EAEA,MAAMG,WAAW,GAAGnB,MAAA,CAA+B,IAA/B,CAApB;EACA,MAAMoB,WAAW,GAAGC,UAAU,CAACF,WAAD,EAAclB,GAAd,CAA9B;EACAD,SAAA,CACI,SAASsB,gBAAT;IACI,IAAIH,WAAW,CAACI,OAAZ,IAAuB,OAAOlB,aAAP,KAAyB,SAApD,EAA+D;MAC3Dc,WAAW,CAACI,OAAZ,CAAoBlB,aAApB,GAAoCA,aAApC;;GAHZ,EAMI,CAACA,aAAD,CANJ;EASA,oBACIL,aAAA,CAACwB,GAAD;IACIC,EAAE,EAAC;IACHC,OAAO,EAAC;IACRC,UAAU,EAAC;IACXC,SAAS,EAAE,CACPC,MAAM,CAACC,SADA,EAEP1B,QAAQ,GAAGyB,MAAM,CAACzB,QAAV,GAAqB,IAFtB,EAGPc,SAAS,GAAGW,MAAM,CAACnB,OAAV,GAAoB,IAHtB,EAIPI,UAAU,GAAGe,MAAM,CAACf,UAAV,GAAuB,IAJ1B;GAJf,eAWId,aAAA,QAAA,oCACQQ,KADR;IAEIP,GAAG,EAAEmB,WAFT;IAGIW,IAAI,EAAC,UAHT;oBAIkB1B,aAAa,GAAG,OAAH,GAAaa,SAJ5C;IAKIR,OAAO,EAAEQ,SALb;IAMId,QAAQ,EAAEA,QANd;IAOIG,QAAQ,EAAGyB,KAAD;MACNzB,QAAQ,QAAR,YAAAA,QAAQ,CAAGyB,KAAH,CAAR;;MACA,IAAI,CAACA,KAAK,CAACC,gBAAX,EAA6B;QACzBhB,UAAU,CAACe,KAAK,CAACE,aAAN,CAAoBxB,OAArB,CAAV;;KAVZ;IAaIyB,MAAM,EAAGH,KAAD;MACJjB,aAAa,CAAC,KAAD,CAAb;MACAP,KAAK,QAAL,YAAAA,KAAK,CAAE2B,MAAP,oBAAA3B,KAAK,CAAE2B,MAAP,CAAgBH,KAAhB;KAfR;IAiBII,OAAO,EAAGJ,KAAD;MACLjB,aAAa,CAAC,IAAD,CAAb;MACAP,KAAK,QAAL,YAAAA,KAAK,CAAE4B,OAAP,oBAAA5B,KAAK,CAAE4B,OAAP,CAAiBJ,KAAjB;;KA9BZ,eAiCIhC,aAAA,CAACqC,YAAD;IACI3B,OAAO,EAAEQ;IACTd,QAAQ,EAAEA;IACVC,aAAa,EAAEA;;GAHnB,CAjCJ,EAuCKF,IAAI,gBACDH,aAAA,CAACwB,GAAD;IAAKE,OAAO,EAAC;IAAOE,SAAS,EAAEC,MAAM,CAAC1B;;GAAtC,EACKA,IADL,CADC,GAID,IA3CR,EA4CKD,KAAK,gBACFF,aAAA,CAACwB,GAAD;IAAKE,OAAO,EAAC;IAAOE,SAAS,EAAEC,MAAM,CAAC3B;GAAtC,eACIF,aAAA,CAACsC,IAAD,MAAA,EAAOpC,KAAP,CADJ,CADE,GAIF,IAhDR,CADJ;AAoDH,CAnFqB;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var modules_664a6a80 = {"container":"
|
|
1
|
+
var modules_664a6a80 = {"container":"_84dfdb83","disabled":"_131a2ca4","checked":"_95b1556d","keyFocused":"_49de7ebd","icon":"_6b4b1851","label":"_9047f3bd"};
|
|
2
2
|
|
|
3
3
|
export default modules_664a6a80;
|
|
4
4
|
//# sourceMappingURL=checkbox-field.module.css.js.map
|
|
@@ -13,9 +13,11 @@ declare type CheckboxFieldProps = Omit<JSX.IntrinsicElements['input'], 'type' |
|
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
/** The label for the checkbox element. */
|
|
15
15
|
label?: React.ReactNode;
|
|
16
|
+
/** The icon that should be added to the checkbox label. */
|
|
17
|
+
icon?: React.ReactChild;
|
|
16
18
|
/** Defines whether or not the checkbox can be of a `mixed` state. */
|
|
17
19
|
indeterminate?: boolean;
|
|
18
20
|
};
|
|
19
|
-
declare const CheckboxField: React.ForwardRefExoticComponent<Pick<CheckboxFieldProps, "disabled" | "aria-controls" | "aria-describedby" | "aria-label" | "aria-labelledby" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
|
|
21
|
+
declare const CheckboxField: React.ForwardRefExoticComponent<Pick<CheckboxFieldProps, "disabled" | "aria-controls" | "aria-describedby" | "aria-label" | "aria-labelledby" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "icon" | "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
|
|
20
22
|
export { CheckboxField };
|
|
21
23
|
export type { CheckboxFieldProps };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),n=require("../box/box.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),n=require("../box/box.js"),a=require("../text/text.js"),t=require("ariakit-utils"),r=require("./checkbox-icon.js"),c=require("./checkbox-field.module.css.js");const o=["label","icon","disabled","indeterminate","defaultChecked","onChange"];exports.CheckboxField=l.forwardRef((function(u,d){var i,s,b;let{label:f,icon:h,disabled:x,indeterminate:k,defaultChecked:p,onChange:m}=u,y=e.objectWithoutProperties(u,o);"boolean"!=typeof k||"boolean"==typeof y.checked||(console.warn("Cannot use indeterminate on an uncontrolled checkbox"),k=void 0),f||y["aria-label"]||y["aria-labelledby"]||console.warn("A Checkbox needs a label");const[j,C]=l.useState(!1),[q,B]=l.useState(null!=(i=null!=(s=y.checked)?s:p)&&i),E=null!=(b=y.checked)?b:q,g=l.useRef(null),v=t.useForkRef(g,d);return l.useEffect((function(){g.current&&"boolean"==typeof k&&(g.current.indeterminate=k)}),[k]),l.createElement(n.Box,{as:"label",display:"flex",alignItems:"center",className:[c.default.container,x?c.default.disabled:null,E?c.default.checked:null,j?c.default.keyFocused:null]},l.createElement("input",e.objectSpread2(e.objectSpread2({},y),{},{ref:v,type:"checkbox","aria-checked":k?"mixed":E,checked:E,disabled:x,onChange:e=>{null==m||m(e),e.defaultPrevented||B(e.currentTarget.checked)},onBlur:e=>{C(!1),null==y||null==y.onBlur||y.onBlur(e)},onKeyUp:e=>{C(!0),null==y||null==y.onKeyUp||y.onKeyUp(e)}})),l.createElement(r.CheckboxIcon,{checked:E,disabled:x,indeterminate:k,"aria-hidden":!0}),h?l.createElement(n.Box,{display:"flex",className:c.default.icon,"aria-hidden":!0},h):null,f?l.createElement(n.Box,{display:"flex",className:c.default.label},l.createElement(a.Text,null,f)):null)}));
|
|
2
2
|
//# sourceMappingURL=checkbox-field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n JSX.IntrinsicElements['input'],\n | 'type'\n | 'className'\n | 'disabled'\n | 'aria-controls'\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n> & {\n 'aria-checked'?: never\n /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n 'aria-controls'?: string\n /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n 'aria-describedby'?: string\n /** Defines a string value that labels the current checkbox for assistive technologies. */\n 'aria-label'?: string\n /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n 'aria-labelledby'?: string\n /** Defines whether or not the checkbox is disabled. */\n disabled?: boolean\n /** The label for the checkbox element. */\n label?: React.ReactNode\n /** Defines whether or not the checkbox can be of a `mixed` state. */\n indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n { label, disabled, indeterminate, defaultChecked, onChange, ...props },\n ref,\n) {\n const isControlledComponent = typeof props.checked === 'boolean'\n if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n // eslint-disable-next-line no-console\n console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n indeterminate = undefined\n }\n\n if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn('A Checkbox needs a label')\n }\n\n const [keyFocused, setKeyFocused] = React.useState(false)\n const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n const isChecked = props.checked ?? checkedState\n\n const internalRef = React.useRef<HTMLInputElement>(null)\n const combinedRef = useForkRef(internalRef, ref)\n React.useEffect(\n function setIndeterminate() {\n if (internalRef.current && typeof indeterminate === 'boolean') {\n internalRef.current.indeterminate = indeterminate\n }\n },\n [indeterminate],\n )\n\n return (\n <Box\n as=\"label\"\n display=\"flex\"\n alignItems=\"center\"\n className={[\n styles.container,\n disabled ? styles.disabled : null,\n isChecked ? styles.checked : null,\n keyFocused ? styles.keyFocused : null,\n ]}\n >\n <input\n {...props}\n ref={combinedRef}\n type=\"checkbox\"\n aria-checked={indeterminate ? 'mixed' : isChecked}\n checked={isChecked}\n disabled={disabled}\n onChange={(event) => {\n onChange?.(event)\n if (!event.defaultPrevented) {\n setChecked(event.currentTarget.checked)\n }\n }}\n onBlur={(event) => {\n setKeyFocused(false)\n props?.onBlur?.(event)\n }}\n onKeyUp={(event) => {\n setKeyFocused(true)\n props?.onKeyUp?.(event)\n }}\n />\n <CheckboxIcon\n checked={isChecked}\n disabled={disabled}\n indeterminate={indeterminate}\n aria-hidden\n />\n {label ? <Text>{label}</Text
|
|
1
|
+
{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n JSX.IntrinsicElements['input'],\n | 'type'\n | 'className'\n | 'disabled'\n | 'aria-controls'\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n> & {\n 'aria-checked'?: never\n /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n 'aria-controls'?: string\n /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n 'aria-describedby'?: string\n /** Defines a string value that labels the current checkbox for assistive technologies. */\n 'aria-label'?: string\n /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n 'aria-labelledby'?: string\n /** Defines whether or not the checkbox is disabled. */\n disabled?: boolean\n /** The label for the checkbox element. */\n label?: React.ReactNode\n /** The icon that should be added to the checkbox label. */\n icon?: React.ReactChild\n /** Defines whether or not the checkbox can be of a `mixed` state. */\n indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n ref,\n) {\n const isControlledComponent = typeof props.checked === 'boolean'\n if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n // eslint-disable-next-line no-console\n console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n indeterminate = undefined\n }\n\n if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn('A Checkbox needs a label')\n }\n\n const [keyFocused, setKeyFocused] = React.useState(false)\n const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n const isChecked = props.checked ?? checkedState\n\n const internalRef = React.useRef<HTMLInputElement>(null)\n const combinedRef = useForkRef(internalRef, ref)\n React.useEffect(\n function setIndeterminate() {\n if (internalRef.current && typeof indeterminate === 'boolean') {\n internalRef.current.indeterminate = indeterminate\n }\n },\n [indeterminate],\n )\n\n return (\n <Box\n as=\"label\"\n display=\"flex\"\n alignItems=\"center\"\n className={[\n styles.container,\n disabled ? styles.disabled : null,\n isChecked ? styles.checked : null,\n keyFocused ? styles.keyFocused : null,\n ]}\n >\n <input\n {...props}\n ref={combinedRef}\n type=\"checkbox\"\n aria-checked={indeterminate ? 'mixed' : isChecked}\n checked={isChecked}\n disabled={disabled}\n onChange={(event) => {\n onChange?.(event)\n if (!event.defaultPrevented) {\n setChecked(event.currentTarget.checked)\n }\n }}\n onBlur={(event) => {\n setKeyFocused(false)\n props?.onBlur?.(event)\n }}\n onKeyUp={(event) => {\n setKeyFocused(true)\n props?.onKeyUp?.(event)\n }}\n />\n <CheckboxIcon\n checked={isChecked}\n disabled={disabled}\n indeterminate={indeterminate}\n aria-hidden\n />\n {icon ? (\n <Box display=\"flex\" className={styles.icon} aria-hidden>\n {icon}\n </Box>\n ) : null}\n {label ? (\n <Box display=\"flex\" className={styles.label}>\n <Text>{label}</Text>\n </Box>\n ) : null}\n </Box>\n )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["React","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"yZAqCsBA,cAAuD,WAEzEC,iBADAC,MAAEA,EAAFC,KAASA,EAATC,SAAeA,EAAfC,cAAyBA,EAAzBC,eAAwCA,EAAxCC,SAAwDA,KAAaC,iCAIxC,kBAAlBH,GAD4C,kBAAlBG,EAAMC,UAGvCC,QAAQC,KAAK,wDACbN,OAAgBO,GAGfV,GAAUM,EAAM,eAAkBA,EAAM,oBAEzCE,QAAQC,KAAK,4BAGjB,MAAOE,EAAYC,GAAiBd,YAAe,IAC5Ce,EAAcC,GAAchB,6BAAeQ,EAAMC,WAAWH,OAC7DW,WAAYT,EAAMC,WAAWM,EAE7BG,EAAclB,SAA+B,MAC7CmB,EAAcC,aAAWF,EAAajB,GAU5C,OATAD,aACI,WACQkB,EAAYG,SAAoC,kBAAlBhB,IAC9Ba,EAAYG,QAAQhB,cAAgBA,KAG5C,CAACA,IAIDL,gBAACsB,OACGC,GAAG,QACHC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,UACPxB,EAAWuB,UAAOvB,SAAW,KAC7Ba,EAAYU,UAAOlB,QAAU,KAC7BI,EAAac,UAAOd,WAAa,OAGrCb,2DACQQ,OACJP,IAAKkB,EACLU,KAAK,0BACSxB,EAAgB,QAAUY,EACxCR,QAASQ,EACTb,SAAUA,EACVG,SAAWuB,UACPvB,GAAAA,EAAWuB,GACNA,EAAMC,kBACPf,EAAWc,EAAME,cAAcvB,UAGvCwB,OAASH,IACLhB,GAAc,SACdN,SAAAA,EAAOyB,QAAPzB,EAAOyB,OAASH,IAEpBI,QAAUJ,IACNhB,GAAc,SACdN,SAAAA,EAAO0B,SAAP1B,EAAO0B,QAAUJ,OAGzB9B,gBAACmC,gBACG1B,QAASQ,EACTb,SAAUA,EACVC,cAAeA,qBAGlBF,EACGH,gBAACsB,OAAIE,QAAQ,OAAOE,UAAWC,UAAOxB,uBACjCA,GAEL,KACHD,EACGF,gBAACsB,OAAIE,QAAQ,OAAOE,UAAWC,UAAOzB,OAClCF,gBAACoC,YAAMlC,IAEX"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"_84dfdb83",disabled:"_131a2ca4",checked:"_95b1556d",keyFocused:"_49de7ebd",icon:"_6b4b1851",label:"_9047f3bd"};
|
|
2
2
|
//# sourceMappingURL=checkbox-field.module.css.js.map
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@doist/reactist",
|
|
3
3
|
"description": "Open source React components by Doist",
|
|
4
4
|
"author": "Henning Muszynski <henning@doist.com> (http://doist.com)",
|
|
5
|
-
"version": "17.
|
|
5
|
+
"version": "17.3.0",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"homepage": "https://github.com/Doist/reactist#readme",
|
|
8
8
|
"repository": "git+https://github.com/Doist/reactist.git",
|
|
@@ -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
|
.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}
|
|
6
|
-
.
|
|
6
|
+
._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}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._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}
|
package/styles/reactist.css
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
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
18
|
: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}.a8af2163{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)}.bbdb467b{text-overflow:ellipsis;white-space:nowrap;font-size:inherit}.a8af2163:active:not([aria-disabled=true]){transform:scale(.97);transition:transform .2s cubic-bezier(.02,1.505,.745,1.235)}.a8af2163{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)}.a8af2163.ca02fc07{border-radius:1000px}.a8af2163._45ffe137{--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)}.a8af2163._352995bd{--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)}.a8af2163._3991076f{--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)}.a8af2163:not(.f82232b7){color:var(--reactist-btn-idle-tint);background-color:var(--reactist-btn-idle-fill)}.a8af2163:focus-visible:not([aria-disabled=true]),.a8af2163:hover:not([aria-disabled=true]),.a8af2163[aria-expanded=true]{color:var(--reactist-btn-hover-tint);background-color:var(--reactist-btn-hover-fill)}.a8af2163.f82232b7{cursor:not-allowed;color:var(--reactist-btn-disabled-tint);background-color:var(--reactist-btn-disabled-fill)}.a8af2163:not(.ef4c88db){min-width:68px}.a8af2163.ef4c88db{width:var(--reactist-btn-height);height:var(--reactist-btn-height);padding:0}.a8af2163 .a08c25c7{margin-right:calc(var(--reactist-btn-spacing) - 6px);margin-left:-6px}.a8af2163 ._2f6adc11{margin-left:calc(var(--reactist-btn-spacing) - 6px);margin-right:-6px}._3d1243b2{--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)}._16b6b062{--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)}.cffaea5e{--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)}._98cd5c3f,.cffaea5e{--reactist-btn-idle-fill:transparent;--reactist-btn-disabled-fill:transparent}._98cd5c3f{--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)}._3d1243b2._99cb1c4d{--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)}._16b6b062._99cb1c4d{--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)}._16b6b062._99cb1c4d:hover{border-color:var(--reactist-btn-hover-tint)}._16b6b062._99cb1c4d.f82232b7{border-color:var(--reactist-btn-disabled-tint)}._98cd5c3f._99cb1c4d,.cffaea5e._99cb1c4d{--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)}
|
|
19
19
|
: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}
|
|
20
|
-
.
|
|
20
|
+
._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}
|
|
21
21
|
._2e189908{font-family:var(--reactist-font-family)}._2e189908 ._83051e0a,._2e189908 label{padding-bottom:var(--reactist-spacing-small)}._2e189908.fd20ef50{border-radius:var(--reactist-border-radius-large);border:1px solid var(--reactist-divider-secondary);padding:var(--reactist-spacing-small);padding-bottom:var(--reactist-spacing-xsmall);overflow:clip}._2e189908.fd20ef50 label{flex-grow:1;cursor:text}._2e189908.fd20ef50 label span{cursor:default}._2e189908.fd20ef50:focus-within{border-color:var(--reactist-divider-primary)!important}._2e189908.fd20ef50.d1a17d92{border-color:var(--reactist-alert-tone-critical-border)!important}._2e189908.fd20ef50 ._75e0afa0{font-weight:500}._2e189908.fd20ef50 ._83051e0a{font-size:var(--reactist-font-size-caption)}._2e189908:not(.fd20ef50) ._75e0afa0{font-weight:var(--reactist-font-weight-strong)}._2e189908:not(.fd20ef50) ._83051e0a{font-size:var(--reactist-font-size-body)}.d04a867d{color:var(--reactist-content-secondary)}._83051e0a{text-align:right}._77b2107e{vertical-align:bottom}
|
|
22
22
|
._66b448b3 input{padding-right:0;box-shadow:none!important;border:none}._66b448b3 button{outline:none;line-height:0;margin:0 3px;padding:0;border:none;border-radius:3px;background:none;color:var(--reactist-content-secondary);cursor:pointer}._66b448b3 button:focus,._66b448b3 button:hover{color:var(--reactist-content-primary);background-color:var(--reactist-bg-selected)}
|
|
23
23
|
._07e75293{width:100%;position:relative}._07e75293 svg{position:absolute;right:10px;top:8px;bottom:8px;color:var(--reactist-content-secondary)}._07e75293 select{position:relative;z-index:1;--tmp-desired-height:32px;--tmp-line-height-increase:4px;--tmp-vertical-padding:calc((var(--tmp-desired-height) - var(--reactist-font-size-body) - var(--tmp-line-height-increase))/2);padding:var(--tmp-vertical-padding) 10px;padding-right:30px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:100%;color:var(--reactist-content-primary);background:none;border-radius:var(--reactist-border-radius-small);border:1px solid var(--reactist-divider-secondary);font-size:var(--reactist-font-size-body);line-height:calc(var(--reactist-font-size-body) + 4px);margin:0}._07e75293.f147bcea select{border-color:var(--reactist-alert-tone-critical-border)!important}._07e75293 option{background-color:var(--reactist-bg-aside)}._07e75293 select:focus{border-color:var(--reactist-divider-primary)}
|