@pushwoosh/dumb-components 2.9.0 → 2.9.2

package/RadioCard/RadioCard.js

@@ -3,7 +3,7 @@ import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { H4, Paragraph } from '@pushwoosh/kit-typography';
 import { Radio } from '../Radio';
 import { TooltipTrigger } from '../Tooltip';
-import { RootBox } from './styled';
+import { RootBox } from './styles';
 /**
  * Selectable card with a title, optional description and a radio indicator — a richer
  * alternative to {@link Radio} for choosing one option among cards.

package/RadioCard/{styled.js → styles.js}

@@ -9,7 +9,7 @@ export const RootBox = styled(Vertical).attrs({
   $gap: 0
 }).withConfig({
   displayName: "RootBox",
-  componentId: "sc-tkztr1-0"
+  componentId: "sc-1woucxa-0"
 })(["width:", ";height:100%;box-sizing:border-box;outline:", ";cursor:", ";opacity:", ";pointer-events:", ";&:hover{background:", ";}"], ({
   $width
 }) => toCssValue($width), ({

package/RichMessageEditor/EditorEmojiPicker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { EditorEmojiPickerStyled } from './EditorEmojiPicker.styled';
+import { EditorEmojiPickerStyled } from './EditorEmojiPicker.styles';
 import { EmojiPicker } from '../EmojiPicker';
 import { useThemeName } from '../hooks';
 export const EditorEmojiPicker = ({

package/RichMessageEditor/{EditorEmojiPicker.styled.js → EditorEmojiPicker.styles.js}

@@ -3,7 +3,7 @@ import { Color, getThemeColors, Shadow, ShapeRadius } from '@pushwoosh/kit-const
 import { rgbChannels } from './EditorEmojiPicker.helpers';
 export const EditorEmojiPickerStyled = styled.div.withConfig({
   displayName: "EditorEmojiPickerStyled",
-  componentId: "sc-sdjrip-0"
+  componentId: "sc-1jl3t23-0"
 })(["min-width:352px;em-emoji-picker{border:1px solid ", ";--border-radius:", ";--shadow:", ";background-color:", ";--rgb-background:", ";}"], Color.FORM, ShapeRadius.CONTROL, Shadow.REGULAR, Color.FROZEN, ({
   $theme
 }) => rgbChannels(getThemeColors($theme).FROZEN));

package/RichMessageEditor/RichMessageEditor.js

@@ -10,7 +10,7 @@ import EmojiIcon from './assets/EmojiIcon.svg';
 import PersonalizationIcon from './assets/PersonalizationIcon.svg';
 import { EditorEmojiPicker } from './EditorEmojiPicker';
 import { placementToDirection } from './RichMessageEditor.helpers';
-import { Arrow, DropArea, DropContent, ImSpan } from './RichMessageEditor.styled';
+import { Arrow, DropArea, DropContent, ImSpan } from './RichMessageEditor.styles';
 import { getDcByPath } from './slate/helpers';
 import { SlateEditable, SlateEditor } from './slate/SlateEditor';
 /**

package/RichMessageEditor/{RichMessageEditor.styled.js → RichMessageEditor.styles.js}

@@ -3,15 +3,15 @@ import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 export const ImSpan = styled.span.withConfig({
   displayName: "ImSpan",
-  componentId: "sc-kdvgj9-0"
+  componentId: "sc-1l3r9n8-0"
 })(["color:", ";position:relative;padding-left:20px;font-size:12px;font-style:normal;font-weight:500;line-height:130%;text-transform:uppercase;cursor:pointer;> svg{position:absolute;left:0;top:-1px;}"], Color.SOFT);
 export const DropArea = styled.div.withConfig({
   displayName: "DropArea",
-  componentId: "sc-kdvgj9-1"
+  componentId: "sc-1l3r9n8-1"
 })(["z-index:1000;"]);
 export const DropContent = styled.div.withConfig({
   displayName: "DropContent",
-  componentId: "sc-kdvgj9-2"
+  componentId: "sc-1l3r9n8-2"
 })(["border:1px solid ", ";border-radius:", ";box-shadow:", ";background-color:", ";"], Color.FORM, ShapeRadius.CONTROL, Shadow.REGULAR, Color.FROZEN);
 const transforms = {
   left: 'scaleX(-1)',
@@ -23,7 +23,7 @@ export const Arrow = styled(Horizontal).attrs({
   $placeItems: 'center'
 }).withConfig({
   displayName: "Arrow",
-  componentId: "sc-kdvgj9-3"
+  componentId: "sc-1l3r9n8-3"
 })(["position:absolute;width:20px;height:20px;transform:", " translateX(11px);", ":0;"], ({
   $direction
 }) => transforms[$direction], ({

package/RichMessageEditor/slate/SlateEditor.js

@@ -4,7 +4,7 @@ import { Slate } from 'slate-react';
 import { usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { renderElement } from './DynamicContentElement';
 import { content2string, string2content } from './helpers';
-import { EditableStyled } from './SlateEditor.styled';
+import { EditableStyled } from './SlateEditor.styles';
 import { createMKEditor } from './SlateEditor.utils';
 export const SlateEditor = ({
   initialValue: initialValueString,

package/RichMessageEditor/slate/{SlateEditor.styled.js → SlateEditor.styles.js}

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { Color, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
 export const EditableStyled = styled(Editable).withConfig({
   displayName: "EditableStyled",
-  componentId: "sc-1frhl1f-0"
+  componentId: "sc-13jikil-0"
 })(["font-weight:", ";font-size:", ";line-height:140%;padding:8px;color:", ";background:", ";caret-color:", ";border:1px solid ", ";border-radius:", ";overflow-x:auto;& [data-slate-placeholder='true']{color:", ";opacity:1 !important;}&:focus{border-color:", ";outline:none;}& > p{position:relative;margin:4px 0;&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}"], FontWeight.REGULAR, FontSize.REGULAR, Color.MAIN, Color.CLEAR, Color.BRIGHT, ({
   $isErrored
 }) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, Color.PHANTOM, Color.BRIGHT);

package/hooks/useOnClickOutside.d.ts

@@ -1,5 +1,5 @@
 import { type RefObject } from 'react';
-type Ref = RefObject<HTMLElement> | RefObject<HTMLElement>[];
+type Ref = RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[];
 /**
  * Calls `handler` on a mousedown/touchstart outside the referenced element(s).
  * Pass a single ref or an array of refs to treat several elements as "inside".

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "2.9.0",
+  "version": "2.9.2",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",