@cloudflare/component-notifications 10.0.18 → 10.1.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 10.1.1
+
+## 10.1.0
+
+### Minor Changes
+
+- dd17161fbd: Convert to TypeScript
+
 ## 10.0.18
 
 ## 10.0.17

package/dist/Notification.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="node" />
+import React from 'react';
+declare type TNotificationProps = {
+    type?: TNotificationType;
+    message: string;
+    closable?: boolean;
+    delay?: number;
+    persist?: boolean;
+    onClose: () => void;
+};
+declare type TNotificationState = {
+    persist?: boolean;
+    timeoutId: NodeJS.Timeout | null;
+};
+export declare type TNotificationType = 'success' | 'error' | 'info' | 'warning';
+declare class Notification extends React.Component<TNotificationProps, TNotificationState> {
+    private _raf;
+    static defaultProps: Partial<TNotificationProps>;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    startTimeout(): void;
+    stopTimeout(): void;
+    handleMouseEnter(): void;
+    handleMouseLeave(): void;
+    handleClickClose(): void;
+    handleClick(): void;
+    render(): JSX.Element;
+}
+export default Notification;

package/dist/NotificationGlobalContainer.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+declare type TNotificationGlobalContainerProps = {
+    className?: string;
+    children?: ReactNode;
+};
+declare const NotificationGlobalContainer: ({ className, children }: TNotificationGlobalContainerProps) => JSX.Element;
+export default NotificationGlobalContainer;

package/dist/NotificationItem.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { type TNotificationType } from './Notification';
+declare type TNotificationItemProps = {
+    children?: string;
+    closable?: boolean;
+    handleClickClose?: () => void;
+    type?: TNotificationType;
+};
+declare const NotificationItem: ({ children, closable, handleClickClose, type }: TNotificationItemProps) => JSX.Element;
+export default NotificationItem;

package/dist/NotificationList.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+declare const _default: React.ComponentType<{
+    className?: string | undefined;
+    children?: React.ReactNode;
+    p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
+    color?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;
+    width?: import("csstype").WidthProperty<string | number> | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | undefined;
+    cursor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    display?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    fontSize?: import("csstype").FontSizeProperty<string | number> | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | undefined;
+    fontWeight?: import("csstype").FontWeightProperty | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | undefined;
+    textDecoration?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    margin?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
+    marginLeft?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+    marginRight?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
+    marginTop?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+    marginBottom?: import("csstype").MarginBottomProperty<string | number> | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | undefined;
+    padding?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
+    paddingLeft?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+    paddingRight?: import("csstype").PaddingRightProperty<string | number> | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | undefined;
+    paddingTop?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+    paddingBottom?: import("csstype").PaddingBottomProperty<string | number> | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | undefined;
+    gap?: import("csstype").GapProperty<string | number> | [import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined] | [import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined] | undefined;
+    m?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
+    ml?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+    mr?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
+    mt?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+    mb?: import("csstype").MarginBottomProperty<string | number> | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | undefined;
+    mx?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+    my?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+    pl?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+    pr?: import("csstype").PaddingRightProperty<string | number> | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | undefined;
+    pt?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+    pb?: import("csstype").PaddingBottomProperty<string | number> | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | undefined;
+    px?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+    py?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+    minWidth?: import("csstype").MinWidthProperty<string | number> | [import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined] | [import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined] | undefined;
+    minHeight?: import("csstype").MinHeightProperty<string | number> | [import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined] | [import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined] | undefined;
+    maxWidth?: import("csstype").MaxWidthProperty<string | number> | [import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined] | [import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined] | undefined;
+    maxHeight?: import("csstype").MaxHeightProperty<string | number> | [import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined] | [import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined] | undefined;
+    backgroundColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderLeftColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderRightColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderTopColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderBottomColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderStyle?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderTopStyle?: import("csstype").BorderTopStyleProperty | [import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined] | [import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined] | undefined;
+    borderBottomStyle?: import("csstype").BorderBottomStyleProperty | [import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined] | [import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined] | undefined;
+    borderLeftStyle?: import("csstype").BorderLeftStyleProperty | [import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined] | [import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined] | undefined;
+    borderRightStyle?: import("csstype").BorderRightStyleProperty | [import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined] | [import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined] | undefined;
+    borderWidth?: import("csstype").BorderWidthProperty<string | number> | [import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined] | [import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined] | undefined;
+    borderTopWidth?: import("csstype").BorderTopWidthProperty<string | number> | [import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined] | [import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined] | undefined;
+    borderBottomWidth?: import("csstype").BorderBottomWidthProperty<string | number> | [import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined] | [import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined] | undefined;
+    borderLeftWidth?: import("csstype").BorderLeftWidthProperty<string | number> | [import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined] | [import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined] | undefined;
+    borderRightWidth?: import("csstype").BorderRightWidthProperty<string | number> | [import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined] | [import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined] | undefined;
+    borderRadius?: import("csstype").BorderRadiusProperty<string | number> | [import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined] | [import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined] | undefined;
+    borderTopLeftRadius?: import("csstype").BorderTopLeftRadiusProperty<string | number> | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | undefined;
+    borderTopRightRadius?: import("csstype").BorderTopRightRadiusProperty<string | number> | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | undefined;
+    borderBottomLeftRadius?: import("csstype").BorderBottomLeftRadiusProperty<string | number> | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | undefined;
+    borderBottomRightRadius?: import("csstype").BorderBottomRightRadiusProperty<string | number> | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | undefined;
+    textAlign?: import("csstype").TextAlignProperty | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | undefined;
+    verticalAlign?: import("csstype").VerticalAlignProperty<string | number> | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | undefined;
+    alignItems?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    alignSelf?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    justifyContent?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    textTransform?: import("csstype").TextTransformProperty | [import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined] | [import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined] | undefined;
+    boxSizing?: import("csstype").BoxSizingProperty | [import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined] | [import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined] | undefined;
+    flexDirection?: import("csstype").FlexDirectionProperty | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | undefined;
+    flexBasis?: import("csstype").FlexBasisProperty<string | number> | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | undefined;
+    flexGrow?: import("csstype").GlobalsNumber | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | undefined;
+    gridTemplateColumns?: import("csstype").GridTemplateColumnsProperty<string | number> | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | undefined;
+    innerRef?: React.Ref<never> | undefined;
+    gridColumnSpan?: number | number[] | "all" | "end" | undefined;
+    gridColumnPad?: number | number[] | undefined;
+    gridRowSpan?: number | number[] | undefined;
+    gridRowPad?: number | number[] | undefined;
+    gridAlign?: ("start" | "end" | "center" | "stretch") | undefined;
+    gridJustify?: ("start" | "end" | "center" | "stretch") | undefined;
+}>;
+export default _default;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import Notification from './Notification';
+import NotificationList from './NotificationList';
+import NotificationGlobalContainer from './NotificationGlobalContainer';
+export { Notification, NotificationList, NotificationGlobalContainer };

package/dist/utils.d.ts

@@ -0,0 +1,4 @@
+import { type TNotificationType } from './Notification';
+import { type ThemeProp } from '@cloudflare/style-container';
+export declare const getBorderColor: (theme: ThemeProp['theme'], type?: TNotificationType | undefined) => string;
+export declare const getBackgroundColor: (theme: ThemeProp['theme'], type?: TNotificationType | undefined) => string;

package/es/Notification.js

@@ -1,85 +1,15 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import React from 'react';
-import PropTypes from 'prop-types';
-import { isDarkMode } from '@cloudflare/style-const';
 import raf from 'raf';
-import { createComponent } from '@cloudflare/style-container';
-import { Icon } from '@cloudflare/component-icon';
-
-var getBorderColor = (type, theme) => {
-  switch (type) {
-    case 'success':
-      return theme.colors.green[5];
-
-    case 'warning':
-      return theme.colors.orange[5];
-
-    case 'error':
-      return theme.colors.red[2];
-
-    case 'info':
-    default:
-      return theme.colors.blue[3];
-  }
-};
-
-var getBackgroundColor = (type, theme) => {
-  switch (type) {
-    case 'success':
-      return theme.colors.green[isDarkMode() ? 3 : 6];
-
-    case 'warning':
-      return theme.colors.orange[isDarkMode() ? 3 : 6];
-
-    case 'error':
-      return theme.colors.red[3];
-
-    case 'info':
-    default:
-      return theme.colors.blue[isDarkMode() ? 3 : 6];
-  }
-};
-
-var NotificationMessage = createComponent(_ref => {
-  var {
-    theme
-  } = _ref;
-  return {
-    position: 'relative',
-    zIndex: 2,
-    color: theme.colors.white,
-    display: 'flex',
-    alignItems: 'center'
-  };
-}, 'span');
-var NotificationClose = createComponent(_ref2 => {
+import { createStyledComponent } from '@cloudflare/style-container';
+import NotificationItem from './NotificationItem';
+import { getBackgroundColor, getBorderColor } from './utils';
+var NotificationContainer = createStyledComponent(_ref => {
   var {
     theme,
     type
-  } = _ref2;
-  return {
-    position: 'absolute',
-    zIndex: 3,
-    top: 0,
-    right: 0,
-    bottom: 0,
-    width: '2.5em',
-    cursor: 'pointer',
-    '&:hover': {
-      backgroundColor: getBorderColor(type, theme)
-    },
-    '&::before': {
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)'
-    }
-  };
-}, 'span');
-var NotificationContainer = createComponent(_ref3 => {
-  var {
-    theme,
-    type
-  } = _ref3;
+  } = _ref;
   return {
     position: 'relative',
     padding: theme.space[2],
@@ -88,16 +18,16 @@ var NotificationContainer = createComponent(_ref3 => {
     '-webkit-font-smoothing': 'antialiased',
     cursor: 'pointer',
     transformOrigin: 'bottom left',
-    borderTopColor: getBorderColor(type, theme),
-    borderBottomColor: getBorderColor(type, theme),
-    borderLeftColor: getBorderColor(type, theme),
-    borderRightColor: getBorderColor(type, theme),
+    borderTopColor: getBorderColor(theme, type),
+    borderBottomColor: getBorderColor(theme, type),
+    borderLeftColor: getBorderColor(theme, type),
+    borderRightColor: getBorderColor(theme, type),
     borderTopWidth: 1,
     borderRightWidth: 1,
     borderBottomWidth: 0,
     borderLeftWidth: 1,
     borderStyle: 'solid',
-    backgroundColor: getBackgroundColor(type, theme),
+    backgroundColor: getBackgroundColor(theme, type),
     animationName: {
       '0%': {
         transform: 'scaleY(0)'
@@ -121,76 +51,13 @@ var NotificationContainer = createComponent(_ref3 => {
     }
   };
 }, 'div');
-var IconWrapper = createComponent(() => ({
-  paddingRight: 6,
-  display: 'flex'
-}));
-var NotificationWrapper = createComponent(() => ({
-  display: 'flex'
-}));
-var CloseWrapper = createComponent(() => ({
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%,-50%)'
-}));
-var NotificationItem = createComponent(() => ({}), _ref4 => {
-  var {
-    children,
-    closable,
-    handleClickClose,
-    type
-  } = _ref4;
-  var iconType;
-
-  switch (type) {
-    case 'success':
-      iconType = 'ok-sign';
-      break;
-
-    case 'info':
-      iconType = 'info-sign';
-      break;
-
-    case 'warning':
-      iconType = 'exclamation-sign';
-      break;
-
-    case 'error':
-      iconType = 'exclamation-sign';
-      break;
-
-    default:
-      iconType = 'info-sign';
-      break;
-  }
-
-  return /*#__PURE__*/React.createElement(NotificationWrapper, null, /*#__PURE__*/React.createElement(NotificationMessage, null, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
-    type: iconType,
-    label: type ? type : 'info-sign',
-    color: "white",
-    size: 24
-  })), children), closable && /*#__PURE__*/React.createElement(NotificationClose, {
-    onClick: handleClickClose,
-    type: type
-  }, /*#__PURE__*/React.createElement(CloseWrapper, null, /*#__PURE__*/React.createElement(Icon, {
-    type: "remove",
-    label: "close",
-    color: "white"
-  }))));
-});
-NotificationItem.propTypes = {
-  children: PropTypes.string,
-  closable: PropTypes.bool,
-  persist: PropTypes.bool,
-  duration: PropTypes.number,
-  active: PropTypes.bool,
-  handleClickClose: PropTypes.func
-};
 
 class Notification extends React.Component {
   constructor(props) {
     super(props);
+
+    _defineProperty(this, "_raf", null);
+
     this.state = {
       persist: this.props.persist,
       timeoutId: null
@@ -268,27 +135,17 @@ class Notification extends React.Component {
     }, /*#__PURE__*/React.createElement(NotificationItem, {
       closable: this.props.closable,
       handleClickClose: this.handleClickClose.bind(this),
-      duration: this.props.delay,
-      persist: this.state.persist,
-      active: !!this.state.timeoutId,
       type: this.props.type
     }, this.props.message));
   }
 
 }
 
-Notification.propTypes = {
-  type: PropTypes.oneOf(['success', 'error', 'info', 'warning']),
-  message: PropTypes.string.isRequired,
-  closable: PropTypes.bool,
-  delay: PropTypes.number,
-  persist: PropTypes.bool,
-  onClose: PropTypes.func.isRequired
-};
-Notification.defaultProps = {
+_defineProperty(Notification, "defaultProps", {
   closable: true,
   delay: 4000,
   persist: false,
   type: 'info'
-};
+});
+
 export default Notification;

package/es/NotificationGlobalContainer.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { createComponent } from '@cloudflare/style-container';
-
-var styles = _ref => {
+import { createStyledComponent } from '@cloudflare/style-container';
+var StyledContainer = createStyledComponent(_ref => {
   var {
     theme
   } = _ref;
@@ -16,21 +14,16 @@ var styles = _ref => {
     zIndex: 1600,
     fontSize: theme.fontSizes[3]
   };
-};
+}, 'div');
 
 var NotificationGlobalContainer = _ref2 => {
   var {
     className,
     children
   } = _ref2;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(StyledContainer, {
     className: className
   }, children);
 };
 
-NotificationGlobalContainer.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-NotificationGlobalContainer.displayName = 'NotificationGlobalContainer';
-export default createComponent(styles, NotificationGlobalContainer);
+export default NotificationGlobalContainer;

package/es/NotificationItem.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Icon } from '@cloudflare/component-icon';
+import { createStyledComponent } from '@cloudflare/style-container';
+import { getBorderColor } from './utils';
+var IconWrapper = createStyledComponent(() => ({
+  paddingRight: '6px',
+  display: 'flex'
+}));
+var NotificationWrapper = createStyledComponent(() => ({
+  display: 'flex'
+}));
+var CloseWrapper = createStyledComponent(() => ({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%,-50%)'
+}));
+var NotificationMessage = createStyledComponent(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    position: 'relative',
+    zIndex: 2,
+    color: theme.colors.white,
+    display: 'flex',
+    alignItems: 'center'
+  };
+}, 'span');
+var NotificationClose = createStyledComponent(_ref2 => {
+  var {
+    theme,
+    type
+  } = _ref2;
+  return {
+    position: 'absolute',
+    zIndex: 3,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: '2.5em',
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: getBorderColor(theme, type)
+    },
+    '&::before': {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  };
+}, 'span');
+
+var NotificationItem = _ref3 => {
+  var {
+    children,
+    closable,
+    handleClickClose,
+    type
+  } = _ref3;
+  var iconType;
+
+  switch (type) {
+    case 'success':
+      iconType = 'ok-sign';
+      break;
+
+    case 'info':
+      iconType = 'info-sign';
+      break;
+
+    case 'warning':
+      iconType = 'exclamation-sign';
+      break;
+
+    case 'error':
+      iconType = 'exclamation-sign';
+      break;
+
+    default:
+      iconType = 'info-sign';
+      break;
+  }
+
+  return /*#__PURE__*/React.createElement(NotificationWrapper, null, /*#__PURE__*/React.createElement(NotificationMessage, null, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    type: iconType,
+    label: type ? type : 'info-sign',
+    color: "white",
+    size: 24
+  })), children), closable && /*#__PURE__*/React.createElement(NotificationClose, {
+    onClick: handleClickClose,
+    type: type
+  }, /*#__PURE__*/React.createElement(CloseWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    type: "remove",
+    label: "close",
+    color: "white"
+  }))));
+};
+
+export default NotificationItem;

package/es/NotificationList.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { createComponent } from '@cloudflare/style-container';
+import { createStyledComponent } from '@cloudflare/style-container';
 
 var styles = () => ({
   marginTop: 0,
@@ -17,9 +16,4 @@ var NotificationList = _ref => {
   }, children);
 };
 
-NotificationList.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-NotificationList.displayName = 'NotificationList';
-export default createComponent(styles, NotificationList);
+export default createStyledComponent(styles, NotificationList);

package/es/utils.js

@@ -0,0 +1,33 @@
+import { isDarkMode } from '@cloudflare/style-const';
+export var getBorderColor = (theme, type) => {
+  switch (type) {
+    case 'success':
+      return theme.colors.green[5];
+
+    case 'warning':
+      return theme.colors.orange[5];
+
+    case 'error':
+      return theme.colors.red[2];
+
+    case 'info':
+    default:
+      return theme.colors.blue[3];
+  }
+};
+export var getBackgroundColor = (theme, type) => {
+  switch (type) {
+    case 'success':
+      return theme.colors.green[isDarkMode() ? 3 : 6];
+
+    case 'warning':
+      return theme.colors.orange[isDarkMode() ? 3 : 6];
+
+    case 'error':
+      return theme.colors.red[3];
+
+    case 'info':
+    default:
+      return theme.colors.blue[isDarkMode() ? 3 : 6];
+  }
+};