@soul-refiner/design-system 0.1.28 → 0.1.30

package/dist/components/editor/plugins/index.js

@@ -0,0 +1,111 @@
+/**
+ * PLUGINS
+ */
+import { createBlockquotePlugin, createCodeBlockPlugin, createHeadingPlugin, createHorizontalRulePlugin, createIndentListPlugin, createImagePlugin, createTextIndentPlugin, createListPlugin, createMediaEmbedPlugin, createResetNodePlugin, createTablePlugin, createBoldPlugin, createCodePlugin, createFontBackgroundColorPlugin, createFontSizePlugin, createFontFamilyPlugin, createItalicPlugin, createStrikethroughPlugin, createSubscriptPlugin, createSuperscriptPlugin, createUnderlinePlugin, createAlignPlugin, createIndentPlugin, createLineHeightPlugin, createLinkPlugin, createExitBreakPlugin, createHistoryPlugin, createSelectOnBackspacePlugin, createSoftBreakPlugin, } from '@udecode/plate';
+import { createButtonsPlugin } from './buttons';
+import { exitBreakPlugin } from './exitBreak';
+import { resetBlockTypePlugin } from './resetBlockType';
+import { selectOnBackspace } from './selectOnBackspace';
+import { softBreakPlugin } from './softBreak';
+import { createParagraphPlugin, createHOnePlugin, createHTwoPlugin, createHThreePlugin, createHFourPlugin, createHFivePlugin, createHSixPlugin, } from './text';
+import { LinkFloatingMenu } from './link';
+/**
+ * ELEMENT TYPES
+ */
+import { ELEMENT_PARAGRAPH, ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6, ELEMENT_OL, ELEMENT_UL, } from '../constants';
+/**
+ * ELEMENT TYPES
+ */
+export const blocks = [
+    createButtonsPlugin(),
+    createBlockquotePlugin(),
+    createCodeBlockPlugin(),
+    createHeadingPlugin(),
+    createHorizontalRulePlugin(),
+    createImagePlugin({
+        options: {
+            disableUploadInsert: true,
+            disableCaption: true,
+            disableEmbedInsert: true,
+        },
+    }),
+    createTextIndentPlugin(),
+    createIndentListPlugin({
+        inject: {
+            props: {
+                validTypes: [
+                    ELEMENT_PARAGRAPH,
+                    ELEMENT_H1,
+                    ELEMENT_H2,
+                    ELEMENT_H3,
+                    ELEMENT_H4,
+                    ELEMENT_H5,
+                    ELEMENT_H6,
+                    ELEMENT_OL,
+                    ELEMENT_UL,
+                ],
+            },
+        },
+    }),
+    createListPlugin(),
+    createMediaEmbedPlugin(),
+    createParagraphPlugin(),
+    createHOnePlugin(),
+    createHTwoPlugin(),
+    createHThreePlugin(),
+    createHFourPlugin(),
+    createHFivePlugin(),
+    createHSixPlugin(),
+    // createPaywallPlugin(),
+    // createQAPlugin(),
+    createResetNodePlugin(),
+    createTablePlugin(),
+    // createVideoPlugin(),
+];
+export const marks = [
+    createBoldPlugin(),
+    createCodePlugin(),
+    createFontBackgroundColorPlugin(),
+    createFontSizePlugin(),
+    createFontFamilyPlugin(),
+    createItalicPlugin(),
+    createStrikethroughPlugin(),
+    createSubscriptPlugin(),
+    createSuperscriptPlugin(),
+    createUnderlinePlugin(),
+];
+export const inline = [
+    createAlignPlugin({
+        inject: {
+            props: {
+                validTypes: [
+                    ELEMENT_PARAGRAPH,
+                    ELEMENT_H1,
+                    ELEMENT_H2,
+                    ELEMENT_H3,
+                    ELEMENT_H4,
+                    ELEMENT_H5,
+                    ELEMENT_H6,
+                ],
+            },
+        },
+    }),
+    createIndentPlugin({
+        inject: {
+            props: {
+                validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1],
+            },
+        },
+    }),
+    createLineHeightPlugin(),
+    createLinkPlugin({
+        renderAfterEditable: LinkFloatingMenu,
+    }),
+];
+export const utils = [
+    createExitBreakPlugin(exitBreakPlugin),
+    createHistoryPlugin(),
+    createResetNodePlugin(resetBlockTypePlugin),
+    createSelectOnBackspacePlugin(selectOnBackspace),
+    createSoftBreakPlugin(softBreakPlugin),
+];

package/dist/components/editor/plugins/link.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PlateElementProps, TEditableProps, TLinkElement, Value } from '@udecode/plate';
+export declare const LinkElement: React.ForwardRefExoticComponent<Omit<PlateElementProps<Value, TLinkElement>, "ref"> & React.RefAttributes<any>>;
+export declare const LinkFloatingMenu: ({ readOnly }: TEditableProps) => React.JSX.Element | null;

package/dist/components/editor/plugins/link.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FloatingLinkUrlInput, LinkOpenButton, PlateElement, useFloatingLinkEdit, useFloatingLinkEditState, useFloatingLinkInsert, useFloatingLinkInsertState, useFloatingLinkSelectors, useLink, } from '@udecode/plate';
+import { Box } from 'components';
+import { AASansSerif, Link, Upload } from 'icons';
+export const LinkElement = React.forwardRef(({ children, ...props }, ref) => {
+    const { props: linkProps } = useLink({ element: props.element });
+    return (React.createElement(PlateElement, { asChild: true, ref: ref, ...linkProps, ...props },
+        React.createElement("a", null, children)));
+});
+export const LinkFloatingMenu = ({ readOnly }) => {
+    const isEditing = useFloatingLinkSelectors().isEditing();
+    const state = useFloatingLinkInsertState();
+    const { props: insertProps, ref: insertRef, textInputProps, } = useFloatingLinkInsert(state);
+    const editState = useFloatingLinkEditState();
+    const { props: editProps, ref: editRef, editButtonProps, } = useFloatingLinkEdit(editState);
+    if (readOnly)
+        return null;
+    const input = (React.createElement(Box, { "$dir": "column", sx: `
+        background-color: var(--color-white);
+        gap: 16px;
+        padding: 16px;
+        border-radius: 16px;
+        box-shadow: var(--elevation-2);
+      ` },
+        React.createElement(Box, { "$align": "center", "$justify": "center", "$gap": 8 },
+            React.createElement(Box, { "$align": "center", "$justify": "center" },
+                React.createElement(Link, null)),
+            React.createElement(FloatingLinkUrlInput, { style: {
+                    border: 'none',
+                    outline: 'none',
+                    padding: '8px 12px',
+                }, placeholder: "Paste link" })),
+        React.createElement(Box, { "$align": "center", "$justify": "center", "$gap": 8 },
+            React.createElement(Box, { "$align": "center", "$justify": "center" },
+                React.createElement(AASansSerif, null)),
+            React.createElement(Input, { placeholder: "Text to display", ...textInputProps }))));
+    const editContent = isEditing ? (input) : (React.createElement(Box, { "$align": "center", "$justify": "center", sx: `
+        box-sizing: box-content;
+        background-color: var(--color-white);
+        gap: 8px;
+        padding: 16px;
+        border-radius: 16px;
+        box-shadow: var(--elevation-2);
+
+        a,
+        button {
+          padding: 8px 12px;
+          background-color: transparent;
+          outline: none;
+          border: none;
+          border-radius: 8px;
+          cursor: pointer;
+          width: max-content;
+          font-size: 16px;
+          line-height: 16px;
+
+          &:hover {
+            background-color: var(--color-grey-9);
+          }
+        }
+      `, "$gap": 8 },
+        React.createElement("button", { type: "button", ...editButtonProps }, "Edit link"),
+        React.createElement(LinkOpenButton, null,
+            React.createElement(Upload, null))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: insertRef, ...insertProps }, input),
+        React.createElement("div", { ref: editRef, ...editProps }, editContent)));
+};
+const Input = styled.input `
+  border: none;
+  outline: none;
+  padding: 8px 12px;
+`;

package/dist/components/editor/plugins/list.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PlateElementProps } from '@udecode/plate';
+export declare const ListElement: ({ children, variant, ...props }: import("@udecode/plate").PlateRenderNodeProps<import("@udecode/plate").Value, import("@udecode/plate").PlateEditor<import("@udecode/plate").Value>> & Omit<import("slate-react").RenderElementProps, "element"> & {
+    element: import("@udecode/plate").TElement;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    as?: React.ElementType<any> | undefined;
+    asChild?: boolean | undefined;
+} & React.RefAttributes<any> & {
+    elementToAttributes?: ((element: import("@udecode/plate").TElement) => any) | undefined;
+} & {
+    variant: 'ul' | 'ol';
+}) => React.JSX.Element;

package/dist/components/editor/plugins/list.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PlateElement } from '@udecode/plate';
+import { styled } from 'styled-components';
+export const ListElement = ({ children, variant = 'ul', ...props }) => {
+    const Element = variant;
+    return (React.createElement(PlateElement, { asChild: true, ...props },
+        React.createElement(React.Fragment, null,
+            React.createElement(Element, null, React.Children.map(children, (child) => (React.createElement(Li, null, child)))))));
+};
+const Li = styled.li `
+  margin: 16px 0px;
+  padding-left: 8px;
+
+  &::marker {
+    color: var(--color-grey-4);
+  }
+`;

package/dist/components/editor/plugins/resetBlockType.d.ts

@@ -0,0 +1,10 @@
+export declare const resetBlockTypePlugin: {
+    options: {
+        rules: {
+            hotkey: string;
+            predicate: <V extends import("@udecode/plate").Value>(editor: import("@udecode/plate").TEditor<V>, options?: import("@udecode/plate").GetAboveNodeOptions<V> | undefined) => boolean;
+            types: string[];
+            defaultType: string;
+        }[];
+    };
+};

package/dist/components/editor/plugins/resetBlockType.js

@@ -0,0 +1,22 @@
+import { isBlockAboveEmpty, isSelectionAtBlockStart } from '@udecode/plate';
+import { ELEMENT_BLOCKQUOTE, ELEMENT_PARAGRAPH, ELEMENT_TODO_LI, } from '../constants';
+const resetBlockTypesCommonRule = {
+    types: [ELEMENT_BLOCKQUOTE, ELEMENT_TODO_LI],
+    defaultType: ELEMENT_PARAGRAPH,
+};
+export const resetBlockTypePlugin = {
+    options: {
+        rules: [
+            {
+                ...resetBlockTypesCommonRule,
+                hotkey: 'Enter',
+                predicate: isBlockAboveEmpty,
+            },
+            {
+                ...resetBlockTypesCommonRule,
+                hotkey: 'Backspace',
+                predicate: isSelectionAtBlockStart,
+            },
+        ],
+    },
+};

package/dist/components/editor/plugins/selectOnBackspace.d.ts

@@ -0,0 +1,7 @@
+export declare const selectOnBackspace: {
+    options: {
+        query: {
+            allow: string[];
+        };
+    };
+};

package/dist/components/editor/plugins/selectOnBackspace.js

@@ -0,0 +1,6 @@
+import { ELEMENT_HR, ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED } from '../constants';
+export const selectOnBackspace = {
+    options: {
+        query: { allow: [ELEMENT_HR, ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED] },
+    },
+};

package/dist/components/editor/plugins/softBreak.d.ts

@@ -0,0 +1,13 @@
+export declare const softBreakPlugin: {
+    options: {
+        rules: ({
+            hotkey: string;
+            query?: undefined;
+        } | {
+            hotkey: string;
+            query: {
+                allow: string[];
+            };
+        })[];
+    };
+};

package/dist/components/editor/plugins/softBreak.js

@@ -0,0 +1,14 @@
+import { ELEMENT_BLOCKQUOTE, ELEMENT_CODE_BLOCK, ELEMENT_TD, } from '@udecode/plate';
+export const softBreakPlugin = {
+    options: {
+        rules: [
+            { hotkey: 'shift+enter' },
+            {
+                hotkey: 'enter',
+                query: {
+                    allow: [ELEMENT_CODE_BLOCK, ELEMENT_BLOCKQUOTE, ELEMENT_TD],
+                },
+            },
+        ],
+    },
+};

package/dist/components/editor/plugins/text.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PlateElementProps } from '@udecode/plate';
+export declare const ParagraphElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
+export declare const createParagraphPlugin: <OP = any, OV extends import("@udecode/plate").Value = import("@udecode/plate").Value, OE extends import("@udecode/plate").PlateEditor<OV> = import("@udecode/plate").PlateEditor<OV>>(override?: Partial<import("@udecode/plate").PlatePlugin<import("@udecode/plate").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate").PlatePlugin<import("@udecode/plate").NoInfer<OP>, OV, OE>;
+export declare const HOneElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
+export declare const createHOnePlugin: <OP = any, OV extends import("@udecode/plate").Value = import("@udecode/plate").Value, OE extends import("@udecode/plate").PlateEditor<OV> = import("@udecode/plate").PlateEditor<OV>>(override?: Partial<import("@udecode/plate").PlatePlugin<import("@udecode/plate").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate").PlatePlugin<import("@udecode/plate").NoInfer<OP>, OV, OE>;
+export declare const HTwoElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
+export declare const createHTwoPlugin: <OP = any, OV extends import("@udecode/plate").Value = import("@udecode/plate").Value, OE extends import("@udecode/plate").PlateEditor<OV> = import("@udecode/plate").PlateEditor<OV>>(override?: Partial<import("@udecode/plate").PlatePlugin<import("@udecode/plate").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate").PlatePlugin<import("@udecode/plate").NoInfer<OP>, OV, OE>;
+export declare const HThreeElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
+export declare const createHThreePlugin: <OP = any, OV extends import("@udecode/plate").Value = import("@udecode/plate").Value, OE extends import("@udecode/plate").PlateEditor<OV> = import("@udecode/plate").PlateEditor<OV>>(override?: Partial<import("@udecode/plate").PlatePlugin<import("@udecode/plate").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate").PlatePlugin<import("@udecode/plate").NoInfer<OP>, OV, OE>;
+export declare const HFourElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
+export declare const createHFourPlugin: <OP = any, OV extends import("@udecode/plate").Value = import("@udecode/plate").Value, OE extends import("@udecode/plate").PlateEditor<OV> = import("@udecode/plate").PlateEditor<OV>>(override?: Partial<import("@udecode/plate").PlatePlugin<import("@udecode/plate").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate").PlatePlugin<import("@udecode/plate").NoInfer<OP>, OV, OE>;
+export declare const HFiveElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
+export declare const createHFivePlugin: <OP = any, OV extends import("@udecode/plate").Value = import("@udecode/plate").Value, OE extends import("@udecode/plate").PlateEditor<OV> = import("@udecode/plate").PlateEditor<OV>>(override?: Partial<import("@udecode/plate").PlatePlugin<import("@udecode/plate").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate").PlatePlugin<import("@udecode/plate").NoInfer<OP>, OV, OE>;
+export declare const HSixElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
+export declare const createHSixPlugin: <OP = any, OV extends import("@udecode/plate").Value = import("@udecode/plate").Value, OE extends import("@udecode/plate").PlateEditor<OV> = import("@udecode/plate").PlateEditor<OV>>(override?: Partial<import("@udecode/plate").PlatePlugin<import("@udecode/plate").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate").PlatePlugin<import("@udecode/plate").NoInfer<OP>, OV, OE>;

package/dist/components/editor/plugins/text.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { createPluginFactory, PlateElement, } from '@udecode/plate';
+import { H, P } from 'components';
+import * as Elements from '../constants';
+export const ParagraphElement = React.forwardRef(({ children, ...props }, ref) => {
+    const textAlign = props?.style?.textAlign;
+    return (React.createElement(PlateElement, { asChild: true, ref: ref, ...props },
+        React.createElement(React.Fragment, null,
+            React.createElement(P, { as: "div", "$textAlign": textAlign }, children))));
+});
+export const createParagraphPlugin = createPluginFactory({
+    key: Elements.ELEMENT_PARAGRAPH,
+    type: Elements.ELEMENT_PARAGRAPH,
+    isElement: true,
+});
+export const HOneElement = React.forwardRef(({ children, ...props }, ref) => {
+    const textAlign = props?.style?.textAlign;
+    return (React.createElement(PlateElement, { asChild: true, ref: ref, ...props },
+        React.createElement(React.Fragment, null,
+            React.createElement(H.One, { "$textAlign": textAlign }, children))));
+});
+export const createHOnePlugin = createPluginFactory({
+    key: Elements.ELEMENT_H1,
+    type: Elements.ELEMENT_H1,
+    isElement: true,
+});
+export const HTwoElement = React.forwardRef(({ children, ...props }, ref) => {
+    const textAlign = props?.style?.textAlign;
+    return (React.createElement(PlateElement, { asChild: true, ref: ref, ...props },
+        React.createElement(React.Fragment, null,
+            React.createElement(H.Two, { "$textAlign": textAlign }, children))));
+});
+export const createHTwoPlugin = createPluginFactory({
+    key: Elements.ELEMENT_H2,
+    type: Elements.ELEMENT_H2,
+    isElement: true,
+});
+export const HThreeElement = React.forwardRef(({ children, ...props }, ref) => {
+    const textAlign = props?.style?.textAlign;
+    return (React.createElement(PlateElement, { asChild: true, ref: ref, ...props },
+        React.createElement(React.Fragment, null,
+            React.createElement(H.Three, { "$textAlign": textAlign }, children))));
+});
+export const createHThreePlugin = createPluginFactory({
+    key: Elements.ELEMENT_H3,
+    type: Elements.ELEMENT_H3,
+    isElement: true,
+});
+export const HFourElement = React.forwardRef(({ children, ...props }, ref) => {
+    const textAlign = props?.style?.textAlign;
+    return (React.createElement(PlateElement, { asChild: true, ref: ref, ...props },
+        React.createElement(React.Fragment, null,
+            React.createElement(H.Four, { "$textAlign": textAlign }, children))));
+});
+export const createHFourPlugin = createPluginFactory({
+    key: Elements.ELEMENT_H4,
+    type: Elements.ELEMENT_H4,
+    isElement: true,
+});
+export const HFiveElement = React.forwardRef(({ children, ...props }, ref) => {
+    const textAlign = props?.style?.textAlign;
+    return (React.createElement(PlateElement, { asChild: true, ref: ref, ...props },
+        React.createElement(React.Fragment, null,
+            React.createElement(H.Five, { "$textAlign": textAlign }, children))));
+});
+export const createHFivePlugin = createPluginFactory({
+    key: Elements.ELEMENT_H5,
+    type: Elements.ELEMENT_H5,
+    isElement: true,
+});
+export const HSixElement = React.forwardRef(({ children, ...props }, ref) => {
+    const textAlign = props?.style?.textAlign;
+    return (React.createElement(PlateElement, { asChild: true, ref: ref, ...props },
+        React.createElement(React.Fragment, null,
+            React.createElement(H.Six, { "$textAlign": textAlign }, children))));
+});
+export const createHSixPlugin = createPluginFactory({
+    key: Elements.ELEMENT_H6,
+    type: Elements.ELEMENT_H6,
+    isElement: true,
+});

package/dist/components/feedback/badge/badge.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type BadgeColor = 'blue' | 'red' | 'green' | 'purple' | 'orange';
+export interface BadgeProps extends React.PropsWithChildren {
+    color: BadgeColor;
+    dot?: boolean;
+    onDismiss?: () => void;
+}
+export declare const Badge: ({ children, color, dot, onDismiss }: BadgeProps) => React.JSX.Element;
+export {};

package/dist/components/feedback/badge/badge.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Close } from 'icons';
+const colorLookup = {
+    blue: {
+        primary: 'var(--color-hue-blue-1)',
+        secondary: 'var(--color-hue-blue-2)',
+        bg: 'var(--color-hue-blue-3)',
+    },
+    green: {
+        primary: 'var(--color-green-3)',
+        secondary: 'var(--color-green-8)',
+        bg: 'var(--color-green-10)',
+    },
+    orange: {
+        primary: 'var(--color-hue-orange-1)',
+        secondary: 'var(--color-hue-orange-2)',
+        bg: 'var(--color-hue-orange-3)',
+    },
+    purple: {
+        primary: 'var(--color-hue-purple-1)',
+        secondary: 'var(--color-hue-purple-2)',
+        bg: 'var(--color-hue-purple-3)',
+    },
+    red: {
+        primary: 'var(--color-red-4)',
+        secondary: 'var(--color-red-9)',
+        bg: 'var(--color-red-10)',
+    },
+};
+export const Badge = ({ children, color, dot, onDismiss }) => {
+    const bgColor = colorLookup[color].bg;
+    const textColor = colorLookup[color].primary;
+    const borderColor = colorLookup[color].secondary;
+    return (React.createElement(Component, { "$bgColor": bgColor, "$borderColor": borderColor, "$textColor": textColor },
+        dot && React.createElement(Dot, { "$secondaryColor": textColor }),
+        children,
+        onDismiss && React.createElement(Close, { size: 16 })));
+};
+const Component = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 1px 7px;
+  border-radius: 32px;
+  background-color: ${({ $bgColor }) => $bgColor};
+  color: ${({ $textColor }) => $textColor};
+  border: 1px solid ${({ $borderColor }) => $borderColor};
+  font-family: Inter;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  user-select: none;
+
+  svg {
+    fill: currentColor;
+    cursor: pointer;
+  }
+`;
+const Dot = styled.div `
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: ${({ $secondaryColor }) => $secondaryColor};
+`;

package/dist/components/feedback/badge/badge.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import { BadgeProps } from './badge';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, BadgeProps & {
+    hasDismissFn?: boolean | undefined;
+}>;
+export default meta;

package/dist/components/feedback/badge/badge.stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Badge } from './badge';
+const meta = {
+    title: 'Feedback/Badge',
+    parameters: {
+        layout: 'centered',
+    },
+};
+// eslint-disable-next-line
+const Story = ({ hasDismissFn, 
+// eslint-disable-next-line
+onDismiss, ...args }) => (React.createElement(Badge, { onDismiss: hasDismissFn ? () => undefined : undefined, ...args }, "Badge"));
+export const Default = Story.bind({});
+Default.argTypes = {
+    color: {
+        options: ['blue', 'red', 'green', 'purple', 'orange'],
+        control: 'select',
+    },
+};
+Default.args = {
+    color: 'blue',
+    hasDismissFn: true,
+    dot: true,
+};
+export default meta;

package/dist/components/feedback/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './badge';
+export type { BadgeProps } from './badge';

package/dist/components/feedback/badge/index.js

@@ -0,0 +1 @@
+export { Badge } from './badge';

package/dist/components/feedback/banner/banner.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type BannerTypes = 'error' | 'info' | 'success' | 'warning';
+export interface BannerProps {
+    content: string;
+    href: string;
+    onClose: () => void;
+    title: string;
+    type: BannerTypes;
+}
+export declare const Banner: ({ content, href, onClose, title, type, }: BannerProps) => React.JSX.Element;
+export {};

package/dist/components/feedback/banner/banner.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import { Box, Button, P } from 'components';
+import { AlertCircle, AlertOctogon, AlertTriangle, Close, Information, } from 'icons';
+export const Banner = ({ content, href, onClose, title, type, }) => {
+    const iconLookup = {
+        error: React.createElement(AlertOctogon, { size: 24 }),
+        info: React.createElement(Information, { size: 24 }),
+        success: React.createElement(AlertCircle, { size: 24 }),
+        warning: React.createElement(AlertTriangle, { size: 24 }),
+    };
+    return (React.createElement(Wrapper, { as: "output", "$align": "center", "$dir": "row", "$gap": 8, "$type": type },
+        iconLookup[type],
+        React.createElement(Box, { "$dir": "row", "$gap": 4, "$align": "center" },
+            React.createElement(P, { as: "span", "$semiBold": true }, title),
+            React.createElement(P, { as: "span" }, content),
+            React.createElement(P, { as: "a", href: href, "$color": "primary-blue-2" }, "Read more")),
+        React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: onClose, type: "special" })));
+};
+const Wrapper = styled.output `
+  width: 100%;
+  box-sizing: border-box;
+  padding: 12px 16px;
+  display: flex;
+  background-color: ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-9)'
+    : $type === 'info'
+        ? 'var(--color-blue-9)'
+        : $type === 'success'
+            ? 'var(--color-green-9)'
+            : 'var(--color-orange-9)'};
+  border-bottom: 1px solid
+    ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-4)'
+    : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+            ? 'var(--color-green-3)'
+            : 'var(--color-orange-5)'};
+  box-shadow: var(--elevation-2);
+  border-radius: var(--small);
+
+  & > svg {
+    fill: ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-4)'
+    : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+            ? 'var(--color-green-3)'
+            : 'var(--color-orange-5)'};
+  }
+
+  a {
+    position: relative;
+    cursor: pointer;
+
+    &::after {
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 1px;
+      right: 0px;
+      left: 0px;
+      bottom: 0px;
+      background-color: var(--color-primary-blue-2);
+    }
+  }
+
+  button {
+    padding: 0px;
+    margin-left: auto;
+  }
+
+  ${Styles.flex}
+`;

package/dist/components/feedback/banner/banner.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { BannerProps } from './banner';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, BannerProps>;
+export default meta;

package/dist/components/feedback/banner/banner.stories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Banner } from './banner';
+const meta = {
+    title: 'Feedback/Banner',
+};
+const Story = (args) => React.createElement(Banner, { ...args });
+export const Default = Story.bind({});
+Default.argTypes = {
+    content: {
+        type: 'string',
+    },
+    href: {
+        type: 'string',
+    },
+    title: {
+        type: 'string',
+    },
+    type: {
+        type: 'string',
+        options: ['error', 'info', 'success', 'warning'],
+        control: 'select',
+    },
+};
+Default.args = {
+    content: 'Notification message.',
+    href: '',
+    title: 'Notification title.',
+    type: 'success',
+};
+Default.parameters = {
+    layout: 'padded',
+};
+export default meta;

package/dist/components/feedback/banner/index.d.ts

@@ -0,0 +1,2 @@
+export { Banner } from './banner';
+export type { BannerProps } from './banner';