@quadrats/react 0.0.2 → 0.4.4

package/blockquote/createReactBlockquote.js

@@ -1,9 +1,9 @@
-import { BLOCKQUOTE_HOTKEY } from './constants.js';
-import { defaultRenderBlockquoteElement } from './defaultRenderBlockquoteElement.js';
 import isHotkey from 'is-hotkey';
 import { createBlockquote } from '@quadrats/common/blockquote';
 import { createRenderElement } from '@quadrats/react';
-import { createOnKeyDownBreak } from '@quadrats/react/break';
+import { createOnKeyDownBreak } from '@quadrats/react/line-break';
+import { BLOCKQUOTE_HOTKEY } from './constants.js';
+import { defaultRenderBlockquoteElement } from './defaultRenderBlockquoteElement.js';
 
 function createReactBlockquote(options = {}) {
     const core = createBlockquote(options);

package/blockquote/index.cjs.js

@@ -6,9 +6,9 @@ var React = require('react');
 var isHotkey = require('is-hotkey');
 var blockquote = require('@quadrats/common/blockquote');
 var react = require('@quadrats/react');
-var _break = require('@quadrats/react/break');
+var lineBreak = require('@quadrats/react/line-break');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var isHotkey__default = /*#__PURE__*/_interopDefaultLegacy(isHotkey);
@@ -25,7 +25,7 @@ const defaultRenderBlockquoteElement = ({ attributes, children, }) => React__def
 function createReactBlockquote(options = {}) {
     const core = blockquote.createBlockquote(options);
     const { type } = core;
-    const onKeyDownBreak = _break.createOnKeyDownBreak({
+    const onKeyDownBreak = lineBreak.createOnKeyDownBreak({
         softBreak: {
             rules: [
                 {

package/blockquote/jsx-serializer/createJsxSerializeBlockquote.js

@@ -1,6 +1,6 @@
-import { defaultRenderBlockquoteElement } from '@quadrats/react/blockquote';
 import { BLOCKQUOTE_TYPE } from '@quadrats/common/blockquote';
 import { createJsxSerializeElement } from '@quadrats/react/jsx-serializer';
+import { defaultRenderBlockquoteElement } from '@quadrats/react/blockquote';
 
 function createJsxSerializeBlockquote(options = {}) {
     const { type = BLOCKQUOTE_TYPE, render = defaultRenderBlockquoteElement } = options;

package/blockquote/toolbar/BlockquoteToolbarIcon.js

@@ -1,7 +1,7 @@
-import { useBlockquoteTool } from './useBlockquoteTool.js';
 import { __rest } from 'tslib';
 import React from 'react';
 import { ToolbarIcon } from '@quadrats/react/toolbar';
+import { useBlockquoteTool } from './useBlockquoteTool.js';
 
 function BlockquoteToolbarIcon(props) {
     const { controller } = props, rest = __rest(props, ["controller"]);
@@ -9,4 +9,4 @@ function BlockquoteToolbarIcon(props) {
     return React.createElement(ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
 }
 
-export default BlockquoteToolbarIcon;
+export { BlockquoteToolbarIcon as default };

package/blockquote/toolbar/index.cjs.js

@@ -7,7 +7,7 @@ var tslib = require('tslib');
 var React = require('react');
 var toolbar = require('@quadrats/react/toolbar');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/bold/createReactBold.d.ts

@@ -1 +1 @@
-export declare const createReactBold: ({ type }?: Partial<import("@quadrats/core").WithMarkType> | undefined) => import("@quadrats/react/toggle-mark").ReactToggleMark;
+export declare const createReactBold: (variant?: string | undefined) => import("@quadrats/react/toggle-mark").ReactToggleMark;

package/bold/createReactBold.js

@@ -1,11 +1,11 @@
-import { BOLD_HOTKEY } from './constants.js';
-import { defaultRenderBold } from './defaultRenderBold.js';
 import { createBold } from '@quadrats/common/bold';
 import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
+import { BOLD_HOTKEY } from './constants.js';
+import { defaultRenderBold } from './defaultRenderBold.js';
 
-const createReactBold = createReactToggleMarkCreator(createBold, {
+const createReactBold = (variant) => createReactToggleMarkCreator(createBold(variant), {
     hotkey: BOLD_HOTKEY,
-    render: defaultRenderBold,
-});
+    render: defaultRenderBold(variant),
+})();
 
 export { createReactBold };

package/bold/defaultRenderBold.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { RenderMarkPropsBase } from '@quadrats/react/_internal';
-export declare const defaultRenderBold: ({ children }: RenderMarkPropsBase<boolean>) => JSX.Element;
+export declare const defaultRenderBold: (variant?: string | undefined) => ({ children }: RenderMarkPropsBase<boolean>) => JSX.Element;

package/bold/defaultRenderBold.js

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const defaultRenderBold = ({ children }) => React.createElement("strong", null, children);
+const defaultRenderBold = (variant) => (({ children }) => (React.createElement("strong", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
 
 export { defaultRenderBold };

package/bold/index.cjs.js

@@ -6,7 +6,7 @@ var React = require('react');
 var bold = require('@quadrats/common/bold');
 var toggleMark = require('@quadrats/react/toggle-mark');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
@@ -17,12 +17,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const BOLD_HOTKEY = 'mod+b';
 
-const defaultRenderBold = ({ children }) => React__default.createElement("strong", null, children);
+const defaultRenderBold = (variant) => (({ children }) => (React__default.createElement("strong", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
 
-const createReactBold = toggleMark.createReactToggleMarkCreator(bold.createBold, {
+const createReactBold = (variant) => toggleMark.createReactToggleMarkCreator(bold.createBold(variant), {
     hotkey: BOLD_HOTKEY,
-    render: defaultRenderBold,
-});
+    render: defaultRenderBold(variant),
+})();
 
 exports.BOLD_HOTKEY = BOLD_HOTKEY;
 exports.createReactBold = createReactBold;

package/bold/jsx-serializer/createJsxSerializeBold.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const createJsxSerializeBold: (options?: Partial<import("@quadrats/react/jsx-serializer").CreateJsxSerializeMarkOptions<boolean>> | undefined) => (props: Pick<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "leaf" | "children">) => JSX.Element;
+export declare const createJsxSerializeBold: (options?: Partial<import("@quadrats/react/toggle-mark/jsx-serializer").CreateJsxSerializeToggleMarkCreatorOptions> | undefined) => (props: Omit<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "mark">) => JSX.Element;

package/bold/jsx-serializer/createJsxSerializeBold.js

@@ -1,10 +1,10 @@
-import { defaultRenderBold } from '@quadrats/react/bold';
 import { BOLD_TYPE } from '@quadrats/common/bold';
 import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
+import { defaultRenderBold } from '@quadrats/react/bold';
 
 const createJsxSerializeBold = createJsxSerializeToggleMarkCreator({
     type: BOLD_TYPE,
-    render: defaultRenderBold,
+    render: defaultRenderBold(),
 });
 
 export { createJsxSerializeBold };

package/bold/jsx-serializer/index.cjs.js

@@ -8,7 +8,7 @@ var jsxSerializer = require('@quadrats/react/toggle-mark/jsx-serializer');
 
 const createJsxSerializeBold = jsxSerializer.createJsxSerializeToggleMarkCreator({
     type: bold$1.BOLD_TYPE,
-    render: bold.defaultRenderBold,
+    render: bold.defaultRenderBold(),
 });
 
 exports.defaultRenderBold = bold.defaultRenderBold;

package/components/Icon/index.d.ts

@@ -11,5 +11,5 @@ export interface IconProps extends SVGProps<SVGSVGElement> {
      */
     size?: number;
 }
-declare const Icon: React.ForwardRefExoticComponent<Pick<IconProps, "string" | "max" | "accumulate" | "origin" | "end" | "alphabetic" | "hanging" | "ideographic" | "media" | "style" | "clipPath" | "filter" | "mask" | "path" | "result" | "fill" | "values" | "local" | "color" | "clip" | "size" | "stroke" | "x" | "y" | "icon" | "mathematical" | "cursor" | "direction" | "display" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "offset" | "overflow" | "textDecoration" | "azimuth" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "additive" | "unicodeRange" | "orientation" | "children" | "key" | "className" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "role" | "tabIndex" | "crossOrigin" | "accentHeight" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "operator" | "orient" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unitsPerEm" | "vAlphabetic" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<SVGSVGElement>>;
+declare const Icon: React.ForwardRefExoticComponent<Pick<IconProps, "string" | "filter" | "values" | "fill" | "max" | "type" | "accumulate" | "offset" | "key" | "id" | "media" | "origin" | "height" | "width" | "end" | "name" | "alignmentBaseline" | "baselineShift" | "clip" | "clipPath" | "clipRule" | "color" | "colorInterpolation" | "colorInterpolationFilters" | "cursor" | "direction" | "display" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "imageRendering" | "letterSpacing" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "mask" | "opacity" | "order" | "overflow" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "textDecoration" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "wordSpacing" | "writingMode" | "alphabetic" | "hanging" | "ideographic" | "style" | "path" | "method" | "target" | "lang" | "className" | "children" | "tabIndex" | "size" | "orientation" | "local" | "x" | "y" | "icon" | "mathematical" | "azimuth" | "colorRendering" | "glyphOrientationVertical" | "vectorEffect" | "additive" | "crossOrigin" | "href" | "min" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accentHeight" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "operator" | "orient" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<SVGSVGElement>>;
 export default Icon;

package/components/Icon/index.js

@@ -18,4 +18,4 @@ const Icon = forwardRef((_a, ref) => {
         React.createElement("path", Object.assign({}, definition.path))));
 });
 
-export default Icon;
+export { Icon as default };

package/components/Portal/index.js

@@ -5,4 +5,4 @@ const Portal = ({ getContainer, children }) => {
     return ReactDOM.createPortal(children, container);
 };
 
-export default Portal;
+export { Portal as default };

package/components/Progress/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './progress.scss';
 export interface ProgressProps {
     className?: string;
     percentage?: number;

package/components/Progress/index.js

@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
-import './progress.scss.js';
 
 const Progress = forwardRef(function Progress(props, ref) {
     const { className, percentage = 0 } = props;
@@ -14,4 +13,4 @@ const Progress = forwardRef(function Progress(props, ref) {
         React.createElement("span", { className: "qdr-progress__track", style: style })));
 });
 
-export default Progress;
+export { Progress as default };

package/components/Tooltip/index.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { TooltipProps } from './typings';
-import './tooltip.scss';
 /**
  * @todo
  * To implement all placement.

package/components/Tooltip/index.js

@@ -1,11 +1,10 @@
 import React, { useContext, useState, useRef, useCallback, Children, cloneElement, useLayoutEffect } from 'react';
-import Portal from '../Portal/index.js';
-import clsx from 'clsx';
 import { CSSTransition } from 'react-transition-group';
+import clsx from 'clsx';
 import { composeRefs } from '@quadrats/react/utils';
 import { ThemeContext } from '@quadrats/react/configs';
+import Portal from '../Portal/index.js';
 import { calculatePosition } from './calculatePosition.js';
-import './tooltip.scss.js';
 
 const clsPrefix = 'qdr-tooltip';
 const defaultTriggers = ['hover'];
@@ -118,4 +117,4 @@ function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = d
         trigger));
 }
 
-export default Tooltip;
+export { Tooltip as default };

package/components/index.cjs.js

@@ -10,7 +10,7 @@ var reactTransitionGroup = require('react-transition-group');
 var utils = require('@quadrats/react/utils');
 var configs = require('@quadrats/react/configs');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
@@ -38,36 +38,6 @@ const Portal = ({ getContainer, children }) => {
     return ReactDOM__default.createPortal(children, container);
 };
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = ".qdr-progress{display:inline-block;position:relative;border-radius:9px;width:100%;height:6px;overflow:hidden}.qdr-progress__backdrop,.qdr-progress__track{display:inline-block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:9px}.qdr-progress__backdrop{background-color:var(--qdr-text);opacity:.1}.qdr-progress__track{background-color:var(--qdr-primary);transition:transform .2s linear;transform-origin:left}";
-styleInject(css_248z);
-
 const Progress = React.forwardRef(function Progress(props, ref) {
     const { className, percentage = 0 } = props;
     const transform = `scaleX(${percentage / 100})`;
@@ -148,9 +118,6 @@ function calculatePosition(props, triggerEl, popupEl) {
     return { top, left };
 }
 
-var css_248z$1 = ".qdr-tooltip__mask{position:absolute;width:100%;top:0;left:0;z-index:20}.qdr-tooltip__popup{position:absolute;max-width:250px;overflow:hidden;overflow-wrap:break-word;box-sizing:border-box}.qdr-tooltip__popup--top{padding-bottom:10px}.qdr-tooltip__popup--right{padding-left:10px}.qdr-tooltip__popup--bottom{padding-top:10px}.qdr-tooltip__popup--left{padding-right:10px}.qdr-tooltip__content{background-color:var(--qdr-surface);border:1px solid var(--qdr-border);color:var(--qdr-text);border-radius:4px;padding:16px;font-size:13px;white-space:pre-wrap}.qdr-tooltip__arrow{position:absolute;content:\"\";width:10px;height:10px;background-color:var(--qdr-surface);border:1px solid var(--qdr-border);transform:translateX(-50%) translateY(-50%) rotate(45deg)}.qdr-tooltip__arrow--top{top:calc(100% - 10px);left:50%;border-top:none;border-left:none}.qdr-tooltip__arrow--bottom{left:50%;top:10px;border-bottom:none;border-right:none}.qdr-tooltip__arrow--right{left:10px;top:50%;border-top:none;border-right:none}.qdr-tooltip__arrow--left{left:calc(100% - 10px);top:50%;border-bottom:none;border-left:none}.qdr-tooltip__arrow--bottom-left,.qdr-tooltip__arrow--top-left{left:20px}.qdr-tooltip__arrow--bottom-right,.qdr-tooltip__arrow--top-right{left:calc(100% - 20px)}.qdr-tooltip__fade--enter{opacity:.01}.qdr-tooltip__fade--enter-active{opacity:1;transition:all .2s ease-out}.qdr-tooltip__fade--exit{opacity:1}.qdr-tooltip__fade--exit-active{opacity:0;transition:all .2s ease-in}";
-styleInject(css_248z$1);
-
 const clsPrefix = 'qdr-tooltip';
 const defaultTriggers = ['hover'];
 const defaultGetContainer = () => document.body;

package/components/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@quadrats/react/components",
   "sideEffects": [
-    "**/*.scss",
-    "**/*.scss.js"
+    "**/*.css",
+    "**/*.scss"
   ],
   "main": "./index.cjs.js",
   "module": "./index.js",

package/components/progress.css

@@ -0,0 +1 @@
+.qdr-progress{display:inline-block;position:relative;border-radius:9px;width:100%;height:6px;overflow:hidden}.qdr-progress__backdrop,.qdr-progress__track{display:inline-block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:9px}.qdr-progress__backdrop{background-color:var(--qdr-text);opacity:.1}.qdr-progress__track{background-color:var(--qdr-primary);transition:transform .2s linear;transform-origin:left}

package/components/progress.scss

@@ -0,0 +1,30 @@
+.qdr-progress {
+  display: inline-block;
+  position: relative;
+  border-radius: 9px;
+  width: 100%;
+  height: 6px;
+  overflow: hidden;
+
+  &__backdrop,
+  &__track {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: 9px;
+  }
+
+  &__backdrop {
+    background-color: var(--qdr-text);
+    opacity: 0.1;
+  }
+
+  &__track {
+    background-color: var(--qdr-primary);
+    transition: transform 0.2s linear;
+    transform-origin: left;
+  }
+}

package/components/tooltip.css

@@ -0,0 +1 @@
+.qdr-tooltip__mask{position:absolute;width:100%;top:0;left:0;z-index:20}.qdr-tooltip__popup{position:absolute;max-width:250px;overflow:hidden;overflow-wrap:break-word;box-sizing:border-box}.qdr-tooltip__popup--top{padding-bottom:10px}.qdr-tooltip__popup--right{padding-left:10px}.qdr-tooltip__popup--bottom{padding-top:10px}.qdr-tooltip__popup--left{padding-right:10px}.qdr-tooltip__content{background-color:var(--qdr-surface);border:1px solid var(--qdr-border);color:var(--qdr-text);border-radius:4px;padding:16px;font-size:13px;white-space:pre-wrap}.qdr-tooltip__arrow{position:absolute;content:"";width:10px;height:10px;background-color:var(--qdr-surface);border:1px solid var(--qdr-border);transform:translateX(-50%) translateY(-50%) rotate(45deg)}.qdr-tooltip__arrow--top{top:calc(100% - 10px);left:50%;border-top:none;border-left:none}.qdr-tooltip__arrow--bottom{left:50%;top:10px;border-bottom:none;border-right:none}.qdr-tooltip__arrow--right{left:10px;top:50%;border-top:none;border-right:none}.qdr-tooltip__arrow--left{left:calc(100% - 10px);top:50%;border-bottom:none;border-left:none}.qdr-tooltip__arrow--top-left,.qdr-tooltip__arrow--bottom-left{left:20px}.qdr-tooltip__arrow--top-right,.qdr-tooltip__arrow--bottom-right{left:calc(100% - 20px)}.qdr-tooltip__fade--enter{opacity:.01}.qdr-tooltip__fade--enter-active{opacity:1;transition:all 200ms ease-out}.qdr-tooltip__fade--exit{opacity:1}.qdr-tooltip__fade--exit-active{opacity:0;transition:all 200ms ease-in}

package/components/tooltip.scss

@@ -0,0 +1,110 @@
+$qdr-tooltip-popup-gap: 10px;
+$qdr-tooltip-arrow-size: $qdr-tooltip-popup-gap;
+$qdr-tooltip-placement-inverse-map: (
+  top: bottom,
+  right: left,
+  bottom: top,
+  left: right
+);
+
+.qdr-tooltip {
+  &__mask {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 20;
+  }
+
+  &__popup {
+    position: absolute;
+    max-width: 250px;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    box-sizing: border-box;
+
+    @each $placement, $inverse-placement in $qdr-tooltip-placement-inverse-map {
+      &--#{$placement} {
+        padding-#{$inverse-placement}: $qdr-tooltip-popup-gap;
+      }
+    }
+  }
+
+  &__content {
+    background-color: var(--qdr-surface);
+    border: 1px solid var(--qdr-border);
+    color: var(--qdr-text);
+    border-radius: 4px;
+    padding: 16px;
+    font-size: 13px;
+    white-space: pre-wrap;
+  }
+
+  &__arrow {
+    position: absolute;
+    content: '';
+    width: $qdr-tooltip-arrow-size;
+    height: $qdr-tooltip-arrow-size;
+    background-color: var(--qdr-surface);
+    border: 1px solid var(--qdr-border);
+    transform: translateX(-50%) translateY(-50%) rotate(45deg);
+
+    &--top {
+      top: calc(100% - #{$qdr-tooltip-popup-gap});
+      left: 50%;
+      border-top: none;
+      border-left: none;
+    }
+
+    &--bottom {
+      left: 50%;
+      top: #{$qdr-tooltip-popup-gap};
+      border-bottom: none;
+      border-right: none;
+    }
+
+    &--right {
+      left: #{$qdr-tooltip-popup-gap};
+      top: 50%;
+      border-top: none;
+      border-right: none;
+    }
+
+    &--left {
+      left: calc(100% - #{$qdr-tooltip-popup-gap});
+      top: 50%;
+      border-bottom: none;
+      border-left: none;
+    }
+
+    &--top-left,
+    &--bottom-left {
+      left: #{$qdr-tooltip-popup-gap * 2};
+    }
+
+    &--top-right,
+    &--bottom-right {
+      left: calc(100% - #{$qdr-tooltip-popup-gap * 2});
+    }
+  }
+
+  &__fade {
+    &--enter {
+      opacity: 0.01;
+    }
+
+    &--enter-active {
+      opacity: 1;
+      transition: all 200ms ease-out;
+    }
+
+    &--exit {
+      opacity: 1;
+    }
+
+    &--exit-active {
+      opacity: 0;
+      transition: all 200ms ease-in;
+    }
+  }
+}

package/configs/ConfigsProvider.js

@@ -12,4 +12,4 @@ function ConfigsProvider({ theme, locale = enUS, children }) {
         React.createElement(LocaleContext.Provider, { value: locale }, typeof children === 'function' ? children({ theme: themeContext, locale }) : children)));
 }
 
-export default ConfigsProvider;
+export { ConfigsProvider as default };

package/configs/index.cjs.js

@@ -6,7 +6,7 @@ var React = require('react');
 var locales = require('@quadrats/locales');
 var utils = require('@quadrats/utils');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/core/components/DefaultElement.js

@@ -2,4 +2,4 @@ import React from 'react';
 
 const DefaultElement = ({ attributes, children }) => React.createElement("div", Object.assign({}, attributes), children);
 
-export default DefaultElement;
+export { DefaultElement as default };

package/core/components/DefaultLeaf.js

@@ -2,4 +2,4 @@ import React from 'react';
 
 const DefaultLeaf = ({ attributes, children }) => React.createElement("span", Object.assign({}, attributes), children);
 
-export default DefaultLeaf;
+export { DefaultLeaf as default };

package/core/components/Editable.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { EditableProps as SlateEditableProps } from 'slate-react/dist/components/editable';
-import './editable.scss';
 export declare type EditableProps = SlateEditableProps;
 declare function Editable(props: EditableProps): JSX.Element;
 export default Editable;

package/core/components/Editable.js

@@ -1,11 +1,10 @@
-import { useLocale, useTheme } from '@quadrats/react/configs';
-import { useSlate, Editable as Editable$1 } from 'slate-react';
 import { __rest } from 'tslib';
 import React, { useState, useCallback } from 'react';
+import { useSlate, Editable as Editable$1 } from 'slate-react';
 import clsx from 'clsx';
 import { isAncestorEmpty, Editor } from '@quadrats/core';
+import { useLocale, useTheme } from '@quadrats/react/configs';
 import DefaultLeaf from './DefaultLeaf.js';
-import './editable.scss.js';
 
 const PLACEHOLDER_KEY = '__quadrats-placeholder__';
 function Editable(props) {
@@ -50,4 +49,4 @@ function Editable(props) {
     return (React.createElement(Editable$1, Object.assign({}, slateEditableProps, { className: clsx('qdr-editable', themeProps.className, className), decorate: decorate, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, renderLeaf: renderLeaf, style: Object.assign(Object.assign({}, themeProps.style), style) })));
 }
 
-export default Editable;
+export { Editable as default };

package/core/components/Quadrats.js

@@ -1,6 +1,6 @@
-import { ConfigsProvider } from '@quadrats/react/configs';
-import { Slate } from 'slate-react';
 import React from 'react';
+import { Slate } from 'slate-react';
+import { ConfigsProvider } from '@quadrats/react/configs';
 
 /**
  * Provide configs of quadrats and control the value.
@@ -11,4 +11,4 @@ function Quadrats(props) {
         React.createElement(Slate, { editor: editor, onChange: onChange, value: value }, children)));
 }
 
-export default Quadrats;
+export { Quadrats as default };

package/core/composeRenderElements.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import DefaultElement from './components/DefaultElement.js';
 import { composeRenderElementsBase } from '@quadrats/react/_internal';
+import DefaultElement from './components/DefaultElement.js';
 
 /**
  * To compose sequential `renderElement`s to single.

package/core/composeRenderLeafs.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import DefaultLeaf from './components/DefaultLeaf.js';
 import { composeRenderLeafsBase } from '@quadrats/react/_internal';
+import DefaultLeaf from './components/DefaultLeaf.js';
 
 /**
  * To compose sequential `renderLeaf`s or `renderMark`s to single.

package/core/createRenderMark.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CreateRenderMarkOptions } from './typings/renderer';
-export declare function createRenderMark<M>(options: CreateRenderMarkOptions<M>): (props: Pick<import("./typings/renderer").RenderMarkProps<M>, "children" | "leaf">) => JSX.Element;
+export declare function createRenderMark<M>(options: CreateRenderMarkOptions<M>): (props: Omit<import("./typings/renderer").RenderMarkProps<M>, "mark">) => JSX.Element;

package/divider/createReactDivider.js

@@ -1,6 +1,6 @@
-import { defaultRenderDividerElement } from './defaultRenderDividerElement.js';
 import { createDivider } from '@quadrats/common/divider';
 import { createRenderElement } from '@quadrats/react';
+import { defaultRenderDividerElement } from './defaultRenderDividerElement.js';
 
 function createReactDivider(options = {}) {
     const core = createDivider(options);