@commercetools-uikit/rich-text-utils 17.1.0 → 18.0.0

package/dist/commercetools-uikit-rich-text-utils.cjs.prod.js

@@ -1700,7 +1700,7 @@ const ToolbarRightControls = /*#__PURE__*/_styled__default["default"]("div", {
 } )("" );
 const Toolbar = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1sckae42"
-} )("display:flex;flex-wrap:wrap;font-family:", designSystem.designTokens.fontFamilyDefault, ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom:0;padding:", designSystem.designTokens.paddingForRichTextToolbar, ";padding-left:", designSystem.designTokens.paddingLeftForRichTextToolbar, ";align-items:flex-start;align-content:stretch;position:relative;&::after{position:absolute;content:'';width:calc(100% - ", designSystem.designTokens.spacing20, ");height:1px;background:", designSystem.designTokens.colorNeutral, ";left:50%;transform:translateX(-50%);bottom:-1px;}&:focus{outline:none;}" + ("" ));
+} )("display:flex;flex-wrap:wrap;font-family:", designSystem.designTokens.fontFamily, ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom:0;padding:none;padding-left:none;align-items:flex-start;align-content:stretch;position:relative;&::after{position:absolute;content:'';width:calc(100% - ", designSystem.designTokens.spacing20, ");height:1px;background:", designSystem.designTokens.colorNeutral, ";left:50%;transform:translateX(-50%);bottom:-1px;}&:focus{outline:none;}" + ("" ));
 var _ref$2 = {
   name: "7g2mws",
   styles: "h1,h2,h3,h4,h5,h6{margin:0;}p{margin:0;line-height:22px;}"
@@ -1708,10 +1708,10 @@ var _ref$2 = {
 const reset = props => [_ref$2, props.isReadOnly && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.fontColorForInputWhenReadonly, ";" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.fontColorForInputWhenDisabled, ";" + ("" ), "" )];
 const EditorContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1sckae41"
-} )("padding:", designSystem.designTokens.paddingForRichTextEditorContainer, ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";font-family:", designSystem.designTokens.fontFamilyDefault, ";border-color:", props => getBorderColor(props), ";overflow-y:scroll;", reset, " ", getTextColor, ";" + ("" ));
+} )("padding:", designSystem.designTokens.spacing20, " 0 0;border-radius:", designSystem.designTokens.borderRadiusForInput, ";font-family:", designSystem.designTokens.fontFamily, ";border-color:", props => getBorderColor(props), ";overflow-y:scroll;", reset, " ", getTextColor, ";" + ("" ));
 const Container = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1sckae40"
-} )("border-radius:", designSystem.designTokens.borderRadiusForInput, ";border:1px solid ", designSystem.designTokens.borderColorForInput, ";transition:", designSystem.designTokens.transitionStandard, ";padding:", designSystem.designTokens.paddingForRichTextInput, ";background-color:", props => getContainerBackgroundColor(props), ";", props => getInputBoxShadow(props), " border-color:", props => getBorderColor(props), ";pointer-events:", props => props.isDisabled || props.isReadOnly ? 'none' : 'inherit', ";position:relative;&:hover{", props => getBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered), ";background-color:", designSystem.designTokens.backgroundColorForInputWhenHovered, ";}&:focus{outline:none;box-shadow:inset 0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}", Toolbar, "{border-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:", designSystem.designTokens.borderColorForInput, ";}&:focus-within{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";box-shadow:", designSystem.designTokens.shadowForInputWhenFocused, ";", Toolbar, "{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}", EditorContainer, "{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}}" + ("" ));
+} )("border-radius:", designSystem.designTokens.borderRadiusForInput, ";border:1px solid ", designSystem.designTokens.borderColorForInput, ";transition:", designSystem.designTokens.transitionStandard, ";padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";background-color:", props => getContainerBackgroundColor(props), ";", props => getInputBoxShadow(props), " border-color:", props => getBorderColor(props), ";pointer-events:", props => props.isDisabled || props.isReadOnly ? 'none' : 'inherit', ";position:relative;&:hover{", props => getBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered), ";background-color:", designSystem.designTokens.backgroundColorForInputWhenHovered, ";}&:focus{outline:none;box-shadow:inset 0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}", Toolbar, "{border-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:", designSystem.designTokens.borderColorForInput, ";}&:focus-within{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";box-shadow:", designSystem.designTokens.shadowForInputWhenFocused, ";", Toolbar, "{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}", EditorContainer, "{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}}" + ("" ));
 
 function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
@@ -1728,7 +1728,7 @@ const RichTextBodyButton = props => {
     "aria-disabled": props.isDisabled,
     disabled: props.isDisabled,
     "aria-label": props.label,
-    css: [/*#__PURE__*/react$1.css("border:0;cursor:pointer;background:", props.isActive ? designSystem.designTokens.backgroundColorForLocalizedRichTextBodyButtonWhenActive : 'transparent', ";display:flex;justify-content:center;align-items:center;border-radius:", designSystem.designTokens.spacing10, ";padding:", designSystem.designTokens.paddingForLocalizedRichTextBodyButton, ";margin:", designSystem.designTokens.marginForLocalizedRichTextBodyButton, ";&:focus{outline:none;}&:hover,&:focus{background:", props.isActive ? designSystem.designTokens.backgroundColorForLocalizedRichTextBodyButtonWhenActive : designSystem.designTokens.backgroundColorForLocalizedRichTextBodyButton, ";}svg{fill:", getFillColor(props), ";}&:disabled{pointer-events:none;svg{fill:", designSystem.designTokens.colorNeutral60, ";}}" + ("" ), "" ), props.isReadOnly && /*#__PURE__*/react$1.css("svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" ), "" , "" ],
+    css: [/*#__PURE__*/react$1.css("border:0;cursor:pointer;background:", props.isActive ? designSystem.designTokens.colorAccent20 : 'transparent', ";display:flex;justify-content:center;align-items:center;border-radius:", designSystem.designTokens.spacing10, ";padding:", designSystem.designTokens.spacing20, ";margin:0 ", designSystem.designTokens.spacing05, " ", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing05, ";&:focus{outline:none;}&:hover,&:focus{background:", props.isActive ? designSystem.designTokens.colorAccent20 : designSystem.designTokens.colorNeutral95, ";}svg{fill:", getFillColor(props), ";}&:disabled{pointer-events:none;svg{fill:", designSystem.designTokens.colorNeutral60, ";}}" + ("" ), "" ), props.isReadOnly && /*#__PURE__*/react$1.css("svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" ), "" , "" ],
     children: props.children
   }));
 };
@@ -1743,14 +1743,14 @@ var Divider$1 = Divider;
 
 const DropdownItem = /*#__PURE__*/_styled__default["default"]("button", {
   target: "e1f4n71b2"
-} )("width:100%;border:0;font-size:1rem;cursor:pointer;padding:", designSystem.designTokens.paddingForLocalizedRichTextDropdownItem, ";font-family:", designSystem.designTokens.fontFamilyDefault, ";display:block;background-color:", props => props.isSelected ? designSystem.designTokens.backgroundColorForInputWhenActive : designSystem.designTokens.colorSurface, ";&:focus,&:hover{outline:none;background-color:", designSystem.designTokens.backgroundColorForSelectInputOptionWhenHovered, ";}" + ("" ));
-const getButtonStyles = props => [/*#__PURE__*/react$1.css("border:0;font-family:", designSystem.designTokens.fontFamilyDefault, ";border-radius:", designSystem.designTokens.borderRadius4, ";cursor:pointer;font-size:", designSystem.designTokens.fontSizeForInput, ";color:", designSystem.designTokens.colorSolid, ";display:flex;justify-content:center;align-items:center;padding:", props.isStyleButton ? "".concat(designSystem.designTokens.paddingForLocalizedRichTextDropdownButton) : designSystem.designTokens.paddingForLocalizedRichTextBodyButton, ";&:hover{background-color:", designSystem.designTokens.backgroundColorForRichTextDropdownWhenHovered, ";}" + ("" ), "" ), props.isIndeterminate && /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorAccent95, ";" + ("" ), "" ), props.isOpen && /*#__PURE__*/react$1.css("&:not(:hover){background-color:", designSystem.designTokens.backgroundColorForRichTextButton, ";color:", designSystem.designTokens.colorSurface, ";svg{fill:", designSystem.designTokens.colorSurface, ";}}" + ("" ), "" ), props.isReadOnly && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.colorNeutral60, ";svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.colorNeutral60, ";svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" )];
+} )("width:100%;border:0;font-size:1rem;cursor:pointer;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";font-family:", designSystem.designTokens.fontFamily, ";display:block;background-color:", props => props.isSelected ? designSystem.designTokens.backgroundColorForInputWhenActive : designSystem.designTokens.colorSurface, ";&:focus,&:hover{outline:none;background-color:", designSystem.designTokens.colorNeutral98, ";}" + ("" ));
+const getButtonStyles = props => [/*#__PURE__*/react$1.css("border:0;font-family:", designSystem.designTokens.fontFamily, ";border-radius:", designSystem.designTokens.borderRadius4, ";cursor:pointer;font-size:", designSystem.designTokens.fontSize30, ";color:", designSystem.designTokens.colorSolid, ";display:flex;justify-content:center;align-items:center;padding:", props.isStyleButton ? "5px ".concat(designSystem.designTokens.spacing20) : "".concat(designSystem.designTokens.spacing20), ";&:hover{background-color:", designSystem.designTokens.colorNeutral95, ";}" + ("" ), "" ), props.isIndeterminate && /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorAccent95, ";" + ("" ), "" ), props.isOpen && /*#__PURE__*/react$1.css("&:not(:hover){background-color:", designSystem.designTokens.colorAccent20, ";color:", designSystem.designTokens.colorSurface, ";svg{fill:", designSystem.designTokens.colorSurface, ";}}" + ("" ), "" ), props.isReadOnly && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.colorNeutral60, ";svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.colorNeutral60, ";svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" )];
 const DropdownContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1f4n71b1"
-} )("position:absolute;cursor:pointer;font-size:", designSystem.designTokens.fontSizeForInput, ";top:", designSystem.designTokens.spacing10, ";margin-top:", designSystem.designTokens.spacing10, ";left:0;white-space:nowrap;background:", designSystem.designTokens.colorSurface, ";overflow:hidden;z-index:9999;border:1px solid ", designSystem.designTokens.borderColorForSelectInputMenu, ";box-shadow:", designSystem.designTokens.shadowForSelectInputMenu, ";border-radius:", designSystem.designTokens.borderRadius6, ";" + ("" ));
+} )("position:absolute;cursor:pointer;font-size:", designSystem.designTokens.fontSize30, ";top:", designSystem.designTokens.spacing10, ";margin-top:", designSystem.designTokens.spacing10, ";left:0;white-space:nowrap;background:", designSystem.designTokens.colorSurface, ";overflow:hidden;z-index:9999;border:1px solid ", designSystem.designTokens.colorSurface, ";box-shadow:0 2px 5px 0px rgba(0, 0, 0, 0.15);border-radius:", designSystem.designTokens.borderRadius6, ";" + ("" ));
 const DropdownItemLabelWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1f4n71b0"
-} )("margin:", designSystem.designTokens.marginForRichTextDropdownItemLabel, ";" + ("" ));
+} )("margin:0 0 0 ", designSystem.designTokens.spacing20, ";" + ("" ));
 
 function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$2(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
@@ -2444,7 +2444,7 @@ const RichTextEditorBody = /*#__PURE__*/react.forwardRef((props, ref) => {
           },
           getIsItemSelected: getIsMoreStyleMarkItemSelected
         }), jsxRuntime.jsx(Divider$1, {
-          css: /*#__PURE__*/react$1.css("margin:", designSystem.designTokens.marginForRichTextDivider, ";" + ("" ), "" )
+          css: /*#__PURE__*/react$1.css("margin:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing05, ";" + ("" ), "" )
         }), jsxRuntime.jsx(Tooltip__default["default"], {
           title: intl.formatMessage(messages.orderedListButtonLabel),
           placement: "bottom",
@@ -2504,7 +2504,7 @@ const RichTextEditorBody = /*#__PURE__*/react.forwardRef((props, ref) => {
           })
         }), props.showExpandIcon && jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(Divider$1, {
-            css: /*#__PURE__*/react$1.css("margin:", designSystem.designTokens.marginForRichTextDivider, ";" + ("" ), "" )
+            css: /*#__PURE__*/react$1.css("margin:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing05, ";" + ("" ), "" )
           }), jsxRuntime.jsx(Tooltip__default["default"], {
             title: intl.formatMessage(messages.expandButtonLabel),
             placement: "bottom-end",
@@ -2545,7 +2545,7 @@ RichTextEditorBody.defaultProps = defaultProps;
 var RichTextEditorBody$1 = RichTextEditorBody;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "17.1.0";
+var version = "18.0.0";
 
 exports.Element = Element;
 exports.HiddenInput = HiddenInput$1;