cherry-styled-components 0.2.2 → 0.2.3

package/dist/modal.d.ts

@@ -6,10 +6,14 @@ export interface ModalProps {
     $title?: string;
     $width?: number;
     $hideCloseButton?: boolean;
-    /** Enables restyling via styled(Modal); applied to the overlay root. The
-        inner parts expose class hooks: .modal-inner, .modal-close, .modal-title,
-        .modal-content. */
+    /** Escape hatches for app-level restyling, both applied to the overlay
+        root. Note that wrapping with styled(Modal) does NOT work for the $-props
+        API (styled-components strips transient props before they reach the
+        wrapped component), so restyle by targeting a passed class instead. The
+        inner parts expose stable class hooks: .modal-inner, .modal-close,
+        .modal-title, .modal-content. */
     className?: string;
+    style?: React.CSSProperties;
 }
-declare function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton, className, }: ModalProps): React.ReactPortal | null;
+declare function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton, className, style, }: ModalProps): React.ReactPortal | null;
 export { Modal };

package/dist/modal.js

@@ -21,7 +21,7 @@ var innerRiseIn = keyframes([`from{transform:translateY(40px);}to{transform:tran
 var innerSinkOut = keyframes([`from{transform:translateY(0);}to{transform:translateY(40px);}`]);
 var StyledModal = styled.div.withConfig({
 	displayName: "modal__StyledModal",
-	componentId: "sc-e8a3a913-0"
+	componentId: "sc-14a8d5c-0"
 })([
 	`position:fixed;top:0;left:0;width:100%;height:100%;background:`,
 	`;display:flex;justify-content:center;align-items:center;z-index:1010;animation:`,
@@ -35,11 +35,11 @@ var StyledModal = styled.div.withConfig({
 ], ({ theme }) => rgba(theme.colors.primary, .5), ({ $isClosing }) => $isClosing ? overlayFadeOut : overlayFadeIn, ({ $isClosing }) => $isClosing && css([`pointer-events:none;`]), ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.lg, ({ $isClosing }) => $isClosing ? innerSinkOut : innerRiseIn, mq("lg"), ({ $width }) => $width && css([`max-width:`, `px;`], $width));
 var StyledModalClose = styled(IconButton).withConfig({
 	displayName: "modal__StyledModalClose",
-	componentId: "sc-e8a3a913-1"
+	componentId: "sc-14a8d5c-1"
 })([`position:absolute;top:20px;right:20px;z-index:10;`]);
 var StyledModalTitle = styled.h2.withConfig({
 	displayName: "modal__StyledModalTitle",
-	componentId: "sc-e8a3a913-2"
+	componentId: "sc-14a8d5c-2"
 })([
 	`--divider-color:`,
 	`;margin:0 0 15px 0;padding:0 0 15px 0;color:`,
@@ -48,13 +48,13 @@ var StyledModalTitle = styled.h2.withConfig({
 ], ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.dark, ({ theme }) => styledH5(theme));
 var StyledModalContent = styled.div.withConfig({
 	displayName: "modal__StyledModalContent",
-	componentId: "sc-e8a3a913-3"
+	componentId: "sc-14a8d5c-3"
 })([
 	`max-height:calc(100svh - 200px);overflow-y:auto;padding:5px;margin:-5px;--divider-color:`,
 	`;`,
 	`;& hr{margin:20px 0;border:none;border-bottom:solid 1px var(--divider-color);}`
 ], ({ theme }) => theme.colors.grayLight, ({ theme }) => styledText(theme));
-function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton, className }) {
+function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton, className, style }) {
 	const wrapperRef = useRef(null);
 	const elmRef = useRef(null);
 	const isClient = useIsClient();
@@ -85,6 +85,7 @@ function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton,
 		$isClosing: isClosing,
 		$width,
 		className,
+		style,
 		onAnimationEnd: handleAnimationEnd,
 		children: /*#__PURE__*/ jsxs("div", {
 			className: "modal-inner",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",