@coveord/plasma-mantine 52.27.4 → 53.0.0

package/dist/esm/components/inline-confirm/InlineConfirmPrompt.js

@@ -1,14 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Group } from '@mantine/core';
-import { useEffect } from 'react';
-import { Button } from '../button';
-import { useInlineConfirm } from './useInlineConfirm';
-export const InlineConfirmPrompt = ({ id, label, confirmLabel = 'Delete', cancelLabel = 'Cancel', onConfirm })=>{
+import { factory, Group, isElement, useProps } from '@mantine/core';
+import { cloneElement, useEffect } from 'react';
+import { useInlineConfirm } from './InlineConfirmContext';
+import { Button } from '../button/Button';
+const defaultProps = {
+    label: 'Are you sure?',
+    confirm: /*#__PURE__*/ _jsx(Button, {
+        color: "red",
+        children: "Delete"
+    }),
+    cancel: /*#__PURE__*/ _jsx(Button, {
+        variant: "outline",
+        children: "Cancel"
+    }),
+    gap: 'xs',
+    wrap: 'nowrap'
+};
+export const InlineConfirmPrompt = factory((props, ref)=>{
+    const { id, label, confirm, cancel, onConfirm, onCancel, ...others } = useProps('InlineConfirmPrompt', defaultProps, props);
     const { confirmingId, clearConfirm } = useInlineConfirm();
-    const onClickConfirm = ()=>{
-        onConfirm();
-        clearConfirm();
-    };
+    if (!isElement(cancel) || !isElement(confirm)) {
+        throw new Error('InlineConfirm.Prompt component cancel & confirm props should be elements or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported');
+    }
+    const cancelEl = /*#__PURE__*/ cloneElement(cancel, {
+        onClick: ()=>{
+            cancel.props.onClick?.();
+            onCancel?.();
+            clearConfirm();
+        }
+    });
+    const confirmEl = /*#__PURE__*/ cloneElement(confirm, {
+        onClick: ()=>{
+            confirm.props.onClick?.();
+            onConfirm?.();
+            clearConfirm();
+        }
+    });
     useEffect(()=>{
         if (confirmingId !== id) {
             clearConfirm();
@@ -16,24 +43,16 @@ export const InlineConfirmPrompt = ({ id, label, confirmLabel = 'Delete', cancel
     }, []);
     if (confirmingId === id) {
         return /*#__PURE__*/ _jsxs(Group, {
-            spacing: "xs",
-            noWrap: true,
+            ref: ref,
+            ...others,
             children: [
                 label,
-                /*#__PURE__*/ _jsx(Button, {
-                    onClick: onClickConfirm,
-                    color: "red",
-                    children: confirmLabel
-                }),
-                /*#__PURE__*/ _jsx(Button, {
-                    onClick: clearConfirm,
-                    variant: "outline",
-                    children: cancelLabel
-                })
+                confirmEl,
+                cancelEl
             ]
         });
     }
     return null;
-};
+});
 
 //# sourceMappingURL=InlineConfirmPrompt.js.map

package/dist/esm/components/inline-confirm/InlineConfirmPrompt.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmPrompt.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {FunctionComponent, ReactNode, useEffect} from 'react';\n\nimport {Button} from '../button';\nimport {useInlineConfirm} from './useInlineConfirm';\n\ninterface InlineConfirmPromptProps {\n    id: string;\n    label: ReactNode;\n    onConfirm: () => void;\n    confirmLabel?: ReactNode;\n    cancelLabel?: ReactNode;\n}\n\nexport const InlineConfirmPrompt: FunctionComponent<InlineConfirmPromptProps> = ({\n    id,\n    label,\n    confirmLabel = 'Delete',\n    cancelLabel = 'Cancel',\n    onConfirm,\n}) => {\n    const {confirmingId, clearConfirm} = useInlineConfirm();\n\n    const onClickConfirm = () => {\n        onConfirm();\n        clearConfirm();\n    };\n\n    useEffect(() => {\n        if (confirmingId !== id) {\n            clearConfirm();\n        }\n    }, []);\n\n    if (confirmingId === id) {\n        return (\n            <Group spacing=\"xs\" noWrap>\n                {label}\n                <Button onClick={onClickConfirm} color=\"red\">\n                    {confirmLabel}\n                </Button>\n                <Button onClick={clearConfirm} variant=\"outline\">\n                    {cancelLabel}\n                </Button>\n            </Group>\n        );\n    }\n    return null;\n};\n"],"names":["Group","useEffect","Button","useInlineConfirm","InlineConfirmPrompt","id","label","confirmLabel","cancelLabel","onConfirm","confirmingId","clearConfirm","onClickConfirm","spacing","noWrap","onClick","color","variant"],"mappings":";AAAA,SAAQA,KAAK,QAAO,gBAAgB;AACpC,SAAsCC,SAAS,QAAO,QAAQ;AAE9D,SAAQC,MAAM,QAAO,YAAY;AACjC,SAAQC,gBAAgB,QAAO,qBAAqB;AAUpD,OAAO,MAAMC,sBAAmE,CAAC,EAC7EC,EAAE,EACFC,KAAK,EACLC,eAAe,QAAQ,EACvBC,cAAc,QAAQ,EACtBC,SAAS,EACZ;IACG,MAAM,EAACC,YAAY,EAAEC,YAAY,EAAC,GAAGR;IAErC,MAAMS,iBAAiB;QACnBH;QACAE;IACJ;IAEAV,UAAU;QACN,IAAIS,iBAAiBL,IAAI;YACrBM;QACJ;IACJ,GAAG,EAAE;IAEL,IAAID,iBAAiBL,IAAI;QACrB,qBACI,MAACL;YAAMa,SAAQ;YAAKC,MAAM;;gBACrBR;8BACD,KAACJ;oBAAOa,SAASH;oBAAgBI,OAAM;8BAClCT;;8BAEL,KAACL;oBAAOa,SAASJ;oBAAcM,SAAQ;8BAClCT;;;;IAIjB;IACA,OAAO;AACX,EAAE"}
+{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmPrompt.tsx"],"sourcesContent":["import {Factory, factory, Group, GroupProps, isElement, useProps} from '@mantine/core';\nimport {cloneElement, ReactElement, ReactNode, useEffect} from 'react';\n\nimport {useInlineConfirm} from './InlineConfirmContext';\nimport {Button} from '../button/Button';\n\ninterface InlineConfirmPromptProps extends Omit<GroupProps, 'children'> {\n    /**\n     * Unique id to map the prompt to the target\n     */\n    id: string;\n    /**\n     * Label element\n     *\n     * @default Are you sure?\n     */\n    label?: ReactNode;\n    /**\n     * Confirm button element\n     *\n     * @default <Button color=\"red\">Delete</Button>\n     */\n    confirm?: ReactElement;\n    /**\n     * Cancel button element\n     *\n     * @default <Button variant=\"outline\">Cancel</Button>\n     */\n    cancel?: ReactElement;\n    /**\n     * Function called when the confirm button is clicked\n     */\n    onConfirm?(): void;\n\n    /**\n     * Function called when the cancel button is clicked\n     */\n    onCancel?(): void;\n}\n\nexport type InlineConfirmPromptFactory = Factory<{\n    props: InlineConfirmPromptProps;\n    ref: HTMLDivElement;\n}>;\n\nconst defaultProps: Partial<InlineConfirmPromptProps> = {\n    label: 'Are you sure?',\n    confirm: <Button color=\"red\">Delete</Button>,\n    cancel: <Button variant=\"outline\">Cancel</Button>,\n    gap: 'xs',\n    wrap: 'nowrap',\n};\n\nexport const InlineConfirmPrompt = factory<InlineConfirmPromptFactory>((props, ref) => {\n    const {id, label, confirm, cancel, onConfirm, onCancel, ...others} = useProps(\n        'InlineConfirmPrompt',\n        defaultProps,\n        props,\n    );\n    const {confirmingId, clearConfirm} = useInlineConfirm();\n\n    if (!isElement(cancel) || !isElement(confirm)) {\n        throw new Error(\n            'InlineConfirm.Prompt component cancel & confirm props should be elements or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported',\n        );\n    }\n    const cancelEl = cloneElement(cancel, {\n        onClick: () => {\n            cancel.props.onClick?.();\n            onCancel?.();\n            clearConfirm();\n        },\n    });\n    const confirmEl = cloneElement(confirm, {\n        onClick: () => {\n            confirm.props.onClick?.();\n            onConfirm?.();\n            clearConfirm();\n        },\n    });\n\n    useEffect(() => {\n        if (confirmingId !== id) {\n            clearConfirm();\n        }\n    }, []);\n\n    if (confirmingId === id) {\n        return (\n            <Group ref={ref} {...others}>\n                {label}\n                {confirmEl}\n                {cancelEl}\n            </Group>\n        );\n    }\n    return null;\n});\n"],"names":["factory","Group","isElement","useProps","cloneElement","useEffect","useInlineConfirm","Button","defaultProps","label","confirm","color","cancel","variant","gap","wrap","InlineConfirmPrompt","props","ref","id","onConfirm","onCancel","others","confirmingId","clearConfirm","Error","cancelEl","onClick","confirmEl"],"mappings":";AAAA,SAAiBA,OAAO,EAAEC,KAAK,EAAcC,SAAS,EAAEC,QAAQ,QAAO,gBAAgB;AACvF,SAAQC,YAAY,EAA2BC,SAAS,QAAO,QAAQ;AAEvE,SAAQC,gBAAgB,QAAO,yBAAyB;AACxD,SAAQC,MAAM,QAAO,mBAAmB;AAyCxC,MAAMC,eAAkD;IACpDC,OAAO;IACPC,uBAAS,KAACH;QAAOI,OAAM;kBAAM;;IAC7BC,sBAAQ,KAACL;QAAOM,SAAQ;kBAAU;;IAClCC,KAAK;IACLC,MAAM;AACV;AAEA,OAAO,MAAMC,sBAAsBhB,QAAoC,CAACiB,OAAOC;IAC3E,MAAM,EAACC,EAAE,EAAEV,KAAK,EAAEC,OAAO,EAAEE,MAAM,EAAEQ,SAAS,EAAEC,QAAQ,EAAE,GAAGC,QAAO,GAAGnB,SACjE,uBACAK,cACAS;IAEJ,MAAM,EAACM,YAAY,EAAEC,YAAY,EAAC,GAAGlB;IAErC,IAAI,CAACJ,UAAUU,WAAW,CAACV,UAAUQ,UAAU;QAC3C,MAAM,IAAIe,MACN;IAER;IACA,MAAMC,yBAAWtB,aAAaQ,QAAQ;QAClCe,SAAS;YACLf,OAAOK,KAAK,CAACU,OAAO;YACpBN;YACAG;QACJ;IACJ;IACA,MAAMI,0BAAYxB,aAAaM,SAAS;QACpCiB,SAAS;YACLjB,QAAQO,KAAK,CAACU,OAAO;YACrBP;YACAI;QACJ;IACJ;IAEAnB,UAAU;QACN,IAAIkB,iBAAiBJ,IAAI;YACrBK;QACJ;IACJ,GAAG,EAAE;IAEL,IAAID,iBAAiBJ,IAAI;QACrB,qBACI,MAAClB;YAAMiB,KAAKA;YAAM,GAAGI,MAAM;;gBACtBb;gBACAmB;gBACAF;;;IAGb;IACA,OAAO;AACX,GAAG"}

package/dist/esm/components/inline-confirm/InlineConfirmTarget.d.ts

@@ -0,0 +1,61 @@
+import { MouseEventHandler } from 'react';
+import { ButtonProps } from '../button';
+export interface InlineConfirmTargetProps extends ButtonProps {
+    id: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+export declare const InlineConfirmTarget: (<C = (<C_1 = "button">(props: import("@mantine/core").PolymorphicComponentProps<C_1, ButtonProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & Omit<import("react").FunctionComponent<(ButtonProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof ButtonProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (ButtonProps & {
+    component: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & import("@mantine/core/lib/core/factory/factory").ThemeExtend<{
+    props: ButtonProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: "button";
+    stylesNames: import("@mantine/core").ButtonStylesNames;
+    vars: import("@mantine/core").ButtonCssVariables;
+    variant: import("@mantine/core").ButtonVariant;
+    staticComponents: {
+        Group: import("@mantine/core").MantineComponent<{
+            props: import("@mantine/core").ButtonGroupProps;
+            ref: HTMLDivElement;
+            stylesNames: "group";
+            vars: import("@mantine/core").ButtonGroupCssVariables;
+        }>;
+    };
+}> & import("@mantine/core/lib/core/factory/factory").ComponentClasses<{
+    props: ButtonProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: "button";
+    stylesNames: import("@mantine/core").ButtonStylesNames;
+    vars: import("@mantine/core").ButtonCssVariables;
+    variant: import("@mantine/core").ButtonVariant;
+    staticComponents: {
+        Group: import("@mantine/core").MantineComponent<{
+            props: import("@mantine/core").ButtonGroupProps;
+            ref: HTMLDivElement;
+            stylesNames: "group";
+            vars: import("@mantine/core").ButtonGroupCssVariables;
+        }>;
+    };
+}> & {
+    Group: import("@mantine/core").MantineComponent<{
+        props: import("@mantine/core").ButtonGroupProps;
+        ref: HTMLDivElement;
+        stylesNames: "group";
+        vars: import("@mantine/core").ButtonGroupCssVariables;
+    }>;
+}>(props: import("@mantine/core").PolymorphicComponentProps<C, InlineConfirmTargetProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & Omit<import("react").FunctionComponent<(InlineConfirmTargetProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof InlineConfirmTargetProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (InlineConfirmTargetProps & {
+    component: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & Record<string, never>;
+//# sourceMappingURL=InlineConfirmTarget.d.ts.map

package/dist/esm/components/inline-confirm/InlineConfirmTarget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineConfirmTarget.d.ts","sourceRoot":"","sources":["../../../../src/components/inline-confirm/InlineConfirmTarget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,iBAAiB,EAAC,MAAM,OAAO,CAAC;AACpD,OAAO,EAAS,WAAW,EAAC,MAAM,WAAW,CAAC;AAG9C,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAe/B,CAAC"}

package/dist/esm/components/inline-confirm/InlineConfirmTarget.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPolymorphicComponent } from '@mantine/core';
+import { forwardRef } from 'react';
+import { Button } from '../button';
+import { useInlineConfirm } from './InlineConfirmContext';
+export const InlineConfirmTarget = createPolymorphicComponent(/*#__PURE__*/ forwardRef(({ onClick, id, component: Component = Button, ...others }, ref)=>{
+    const { setConfirmingId } = useInlineConfirm();
+    const handleOnClick = (e)=>{
+        setConfirmingId(id);
+        onClick?.(e);
+    };
+    return /*#__PURE__*/ _jsx(Component, {
+        ref: ref,
+        onClick: handleOnClick,
+        ...others
+    });
+}));
+
+//# sourceMappingURL=InlineConfirmTarget.js.map

package/dist/esm/components/inline-confirm/InlineConfirmTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmTarget.tsx"],"sourcesContent":["import {createPolymorphicComponent} from '@mantine/core';\nimport {forwardRef, MouseEventHandler} from 'react';\nimport {Button, ButtonProps} from '../button';\nimport {useInlineConfirm} from './InlineConfirmContext';\n\nexport interface InlineConfirmTargetProps extends ButtonProps {\n    id: string;\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const InlineConfirmTarget = createPolymorphicComponent<typeof Button, InlineConfirmTargetProps>(\n    forwardRef(\n        (\n            {onClick, id, component: Component = Button, ...others}: InlineConfirmTargetProps & {component?: any},\n            ref,\n        ) => {\n            const {setConfirmingId} = useInlineConfirm();\n            const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {\n                setConfirmingId(id);\n                onClick?.(e);\n            };\n\n            return <Component ref={ref} onClick={handleOnClick} {...others} />;\n        },\n    ),\n);\n"],"names":["createPolymorphicComponent","forwardRef","Button","useInlineConfirm","InlineConfirmTarget","onClick","id","component","Component","others","ref","setConfirmingId","handleOnClick","e"],"mappings":";AAAA,SAAQA,0BAA0B,QAAO,gBAAgB;AACzD,SAAQC,UAAU,QAA0B,QAAQ;AACpD,SAAQC,MAAM,QAAoB,YAAY;AAC9C,SAAQC,gBAAgB,QAAO,yBAAyB;AAOxD,OAAO,MAAMC,sBAAsBJ,yCAC/BC,WACI,CACI,EAACI,OAAO,EAAEC,EAAE,EAAEC,WAAWC,YAAYN,MAAM,EAAE,GAAGO,QAAqD,EACrGC;IAEA,MAAM,EAACC,eAAe,EAAC,GAAGR;IAC1B,MAAMS,gBAAsD,CAACC;QACzDF,gBAAgBL;QAChBD,UAAUQ;IACd;IAEA,qBAAO,KAACL;QAAUE,KAAKA;QAAKL,SAASO;QAAgB,GAAGH,MAAM;;AAClE,IAEN"}

package/dist/esm/components/inline-confirm/index.d.ts

@@ -1,4 +1,3 @@
 export * from './InlineConfirm';
-export * from './useInlineConfirm';
 export * from './InlineConfirmContext';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/inline-confirm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inline-confirm/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inline-confirm/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC"}

package/dist/esm/components/inline-confirm/index.js

@@ -1,5 +1,4 @@
 export * from './InlineConfirm';
-export * from './useInlineConfirm';
 export * from './InlineConfirmContext';
 
 //# sourceMappingURL=index.js.map

package/dist/esm/components/inline-confirm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/inline-confirm/index.ts"],"sourcesContent":["export * from './InlineConfirm';\nexport * from './useInlineConfirm';\nexport * from './InlineConfirmContext';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,qBAAqB;AACnC,cAAc,yBAAyB"}
+{"version":3,"sources":["../../../../src/components/inline-confirm/index.ts"],"sourcesContent":["export * from './InlineConfirm';\nexport * from './InlineConfirmContext';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,yBAAyB"}

package/dist/esm/components/menu/Menu.d.ts

@@ -3,14 +3,14 @@ import { Menu as MantineMenu, MenuItemProps as MantineMenuItemProps } from '@man
 import { ButtonWithDisabledTooltipProps } from '../button';
 export interface MenuItemProps extends MantineMenuItemProps, ButtonWithDisabledTooltipProps {
 }
-export declare const Menu: ((props: import("@mantine/core").MenuProps) => JSX.Element) & typeof MantineMenu & {
+export declare const Menu: ((_props: import("@mantine/core").MenuProps) => import("react").JSX.Element) & typeof MantineMenu & {
     displayName: string;
     Item: (<C = "button">(props: import("@mantine/utils").PolymorphicComponentProps<C, MenuItemProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & Omit<import("react").FunctionComponent<(MenuItemProps & {
         component?: any;
     } & Omit<Pick<any, string | number | symbol>, "component" | keyof MenuItemProps> & {
         ref?: any;
     }) | (MenuItemProps & {
-        component: import("react").ElementType<any>;
+        component: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
     })>, never> & Record<string, never>;
 };
 //# sourceMappingURL=Menu.d.ts.map

package/dist/esm/components/prompt/Prompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Prompt.d.ts","sourceRoot":"","sources":["../../../../src/components/prompt/Prompt.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,UAAU,EAAC,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAW,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AA+B5C,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC3C;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACtD,QAAQ,EAAE,SAAS,CAAC;CACvB;AACD,UAAU,UAAU;IAChB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAAC;IACnC,MAAM,EAAE,OAAO,YAAY,CAAC;CAC/B;AAED,eAAO,MAAM,MAAM,EAAE,UA4BpB,CAAC"}
+{"version":3,"file":"Prompt.d.ts","sourceRoot":"","sources":["../../../../src/components/prompt/Prompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAExD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC3C;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACtD,QAAQ,EAAE,SAAS,CAAC;CACvB;AACD,UAAU,UAAU;IAChB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAAC;IACnC,MAAM,EAAE,OAAO,YAAY,CAAC;CAC/B;AAED,eAAO,MAAM,MAAM,EAAE,UAqBpB,CAAC"}

package/dist/esm/components/prompt/Prompt.js

@@ -1,78 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { color } from '@coveord/plasma-tokens';
-import { createStyles, Modal } from '@mantine/core';
+import { Box, Modal } from '@mantine/core';
 import { Children } from 'react';
+import PromptClasses from './Prompt.module.css';
 import { PromptFooter } from './PromptFooter';
-const useStyles = createStyles((theme)=>({
-        body: {
-            padding: 0
-        },
-        modalType: {
-            overflow: 'hidden',
-            width: 550
-        },
-        innerBody: {
-            padding: `${theme.spacing.md} ${theme.spacing.xl} ${theme.spacing.lg}`
-        },
-        header: {
-            padding: `${theme.spacing.md} ${theme.spacing.xl}`,
-            width: '100%',
-            borderBottom: `1px solid ${theme.colors.gray[3]}`,
-            fontSize: theme.headings.sizes.h3.fontSize,
-            lineHeight: theme.headings.sizes.h3.lineHeight,
-            overflowWrap: 'anywhere'
-        },
-        success: {
-            backgroundColor: theme.colors.lime[6],
-            color: color.primary.pureWhite
-        },
-        warning: {
-            backgroundColor: theme.colors.yellow[5],
-            color: color.primary.pureWhite
-        },
-        critical: {
-            backgroundColor: theme.colors.red[6],
-            color: color.primary.pureWhite
-        },
-        info: {
-            backgroundColor: theme.colors.navy[5],
-            color: color.primary.pureWhite
-        },
-        whiteClose: {
-            color: color.primary.pureWhite,
-            '&:hover': {
-                backgroundColor: 'transparent'
-            }
-        },
-        title: {
-            color: color.primary.pureWhite
-        }
-    }));
-export const Prompt = ({ children, variant = 'info', ...otherProps })=>{
+export const Prompt = ({ children, ...otherProps })=>{
     const { classNames: classesProps, ...otherPropsWithoutClasses } = otherProps;
-    const { classes, cx } = useStyles();
     const convertedChildren = Children.toArray(children);
     const otherChildren = convertedChildren.filter((child)=>child.type !== PromptFooter);
     const footer = convertedChildren.find((child)=>child.type === PromptFooter);
     const classNames = {
-        header: cx(classes.header, classes[variant]),
-        close: classes.whiteClose,
-        body: classes.body,
-        modal: classes.modalType,
-        title: classes.title
+        root: PromptClasses.root,
+        header: PromptClasses.header,
+        close: PromptClasses.whiteClose,
+        body: PromptClasses.body,
+        title: PromptClasses.title
     };
     return /*#__PURE__*/ _jsxs(Modal, {
         variant: "prompt",
-        padding: 0,
         classNames: {
             ...classNames,
             ...classesProps
         },
-        size: 'sm',
+        size: "sm",
         ...otherPropsWithoutClasses,
         children: [
-            /*#__PURE__*/ _jsx("div", {
-                className: classes.innerBody,
+            /*#__PURE__*/ _jsx(Box, {
+                className: PromptClasses.innerBody,
                 children: otherChildren
             }),
             footer

package/dist/esm/components/prompt/Prompt.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/prompt/Prompt.tsx"],"sourcesContent":["import {color} from '@coveord/plasma-tokens';\nimport {createStyles, Modal, ModalProps} from '@mantine/core';\nimport {Children, ReactElement, ReactNode} from 'react';\nimport {PromptFooter} from './PromptFooter';\n\nconst useStyles = createStyles((theme) => ({\n    body: {\n        padding: 0,\n    },\n    modalType: {overflow: 'hidden', width: 550},\n    innerBody: {\n        padding: `${theme.spacing.md} ${theme.spacing.xl} ${theme.spacing.lg}`,\n    },\n    header: {\n        padding: `${theme.spacing.md} ${theme.spacing.xl}`,\n        width: '100%',\n        borderBottom: `1px solid ${theme.colors.gray[3]}`,\n        fontSize: theme.headings.sizes.h3.fontSize,\n        lineHeight: theme.headings.sizes.h3.lineHeight,\n        overflowWrap: 'anywhere',\n    },\n    success: {backgroundColor: theme.colors.lime[6], color: color.primary.pureWhite},\n    warning: {backgroundColor: theme.colors.yellow[5], color: color.primary.pureWhite},\n    critical: {\n        backgroundColor: theme.colors.red[6],\n        color: color.primary.pureWhite,\n    },\n    info: {backgroundColor: theme.colors.navy[5], color: color.primary.pureWhite},\n    whiteClose: {color: color.primary.pureWhite, '&:hover': {backgroundColor: 'transparent'}},\n    title: {\n        color: color.primary.pureWhite,\n    },\n}));\n\nexport interface PromptProps extends ModalProps {\n    /**\n     * Controls prompt appearance\n     *\n     * @default \"info\"\n     */\n    variant?: 'success' | 'warning' | 'critical' | 'info';\n    children: ReactNode;\n}\ninterface PromptType {\n    (props: PromptProps): ReactElement;\n    Footer: typeof PromptFooter;\n}\n\nexport const Prompt: PromptType = ({children, variant = 'info', ...otherProps}) => {\n    const {classNames: classesProps, ...otherPropsWithoutClasses} = otherProps;\n    const {classes, cx} = useStyles();\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n\n    const otherChildren = convertedChildren.filter((child) => child.type !== PromptFooter);\n    const footer = convertedChildren.find((child) => child.type === PromptFooter);\n\n    const classNames = {\n        header: cx(classes.header, classes[variant]),\n        close: classes.whiteClose,\n        body: classes.body,\n        modal: classes.modalType,\n        title: classes.title,\n    };\n\n    return (\n        <Modal\n            variant=\"prompt\"\n            padding={0}\n            classNames={{...classNames, ...classesProps}}\n            size={'sm'}\n            {...otherPropsWithoutClasses}\n        >\n            <div className={classes.innerBody}>{otherChildren}</div>\n            {footer}\n        </Modal>\n    );\n};\n\nPrompt.Footer = PromptFooter;\n"],"names":["color","createStyles","Modal","Children","PromptFooter","useStyles","theme","body","padding","modalType","overflow","width","innerBody","spacing","md","xl","lg","header","borderBottom","colors","gray","fontSize","headings","sizes","h3","lineHeight","overflowWrap","success","backgroundColor","lime","primary","pureWhite","warning","yellow","critical","red","info","navy","whiteClose","title","Prompt","children","variant","otherProps","classNames","classesProps","otherPropsWithoutClasses","classes","cx","convertedChildren","toArray","otherChildren","filter","child","type","footer","find","close","modal","size","div","className","Footer"],"mappings":";AAAA,SAAQA,KAAK,QAAO,yBAAyB;AAC7C,SAAQC,YAAY,EAAEC,KAAK,QAAmB,gBAAgB;AAC9D,SAAQC,QAAQ,QAAgC,QAAQ;AACxD,SAAQC,YAAY,QAAO,iBAAiB;AAE5C,MAAMC,YAAYJ,aAAa,CAACK,QAAW,CAAA;QACvCC,MAAM;YACFC,SAAS;QACb;QACAC,WAAW;YAACC,UAAU;YAAUC,OAAO;QAAG;QAC1CC,WAAW;YACPJ,SAAS,CAAC,EAAEF,MAAMO,OAAO,CAACC,EAAE,CAAC,CAAC,EAAER,MAAMO,OAAO,CAACE,EAAE,CAAC,CAAC,EAAET,MAAMO,OAAO,CAACG,EAAE,CAAC,CAAC;QAC1E;QACAC,QAAQ;YACJT,SAAS,CAAC,EAAEF,MAAMO,OAAO,CAACC,EAAE,CAAC,CAAC,EAAER,MAAMO,OAAO,CAACE,EAAE,CAAC,CAAC;YAClDJ,OAAO;YACPO,cAAc,CAAC,UAAU,EAAEZ,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,CAAC,CAAC;YACjDC,UAAUf,MAAMgB,QAAQ,CAACC,KAAK,CAACC,EAAE,CAACH,QAAQ;YAC1CI,YAAYnB,MAAMgB,QAAQ,CAACC,KAAK,CAACC,EAAE,CAACC,UAAU;YAC9CC,cAAc;QAClB;QACAC,SAAS;YAACC,iBAAiBtB,MAAMa,MAAM,CAACU,IAAI,CAAC,EAAE;YAAE7B,OAAOA,MAAM8B,OAAO,CAACC,SAAS;QAAA;QAC/EC,SAAS;YAACJ,iBAAiBtB,MAAMa,MAAM,CAACc,MAAM,CAAC,EAAE;YAAEjC,OAAOA,MAAM8B,OAAO,CAACC,SAAS;QAAA;QACjFG,UAAU;YACNN,iBAAiBtB,MAAMa,MAAM,CAACgB,GAAG,CAAC,EAAE;YACpCnC,OAAOA,MAAM8B,OAAO,CAACC,SAAS;QAClC;QACAK,MAAM;YAACR,iBAAiBtB,MAAMa,MAAM,CAACkB,IAAI,CAAC,EAAE;YAAErC,OAAOA,MAAM8B,OAAO,CAACC,SAAS;QAAA;QAC5EO,YAAY;YAACtC,OAAOA,MAAM8B,OAAO,CAACC,SAAS;YAAE,WAAW;gBAACH,iBAAiB;YAAa;QAAC;QACxFW,OAAO;YACHvC,OAAOA,MAAM8B,OAAO,CAACC,SAAS;QAClC;IACJ,CAAA;AAgBA,OAAO,MAAMS,SAAqB,CAAC,EAACC,QAAQ,EAAEC,UAAU,MAAM,EAAE,GAAGC,YAAW;IAC1E,MAAM,EAACC,YAAYC,YAAY,EAAE,GAAGC,0BAAyB,GAAGH;IAChE,MAAM,EAACI,OAAO,EAAEC,EAAE,EAAC,GAAG3C;IACtB,MAAM4C,oBAAoB9C,SAAS+C,OAAO,CAACT;IAE3C,MAAMU,gBAAgBF,kBAAkBG,MAAM,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAKlD;IACzE,MAAMmD,SAASN,kBAAkBO,IAAI,CAAC,CAACH,QAAUA,MAAMC,IAAI,KAAKlD;IAEhE,MAAMwC,aAAa;QACf3B,QAAQ+B,GAAGD,QAAQ9B,MAAM,EAAE8B,OAAO,CAACL,QAAQ;QAC3Ce,OAAOV,QAAQT,UAAU;QACzB/B,MAAMwC,QAAQxC,IAAI;QAClBmD,OAAOX,QAAQtC,SAAS;QACxB8B,OAAOQ,QAAQR,KAAK;IACxB;IAEA,qBACI,MAACrC;QACGwC,SAAQ;QACRlC,SAAS;QACToC,YAAY;YAAC,GAAGA,UAAU;YAAE,GAAGC,YAAY;QAAA;QAC3Cc,MAAM;QACL,GAAGb,wBAAwB;;0BAE5B,KAACc;gBAAIC,WAAWd,QAAQnC,SAAS;0BAAGuC;;YACnCI;;;AAGb,EAAE;AAEFf,OAAOsB,MAAM,GAAG1D"}
+{"version":3,"sources":["../../../../src/components/prompt/Prompt.tsx"],"sourcesContent":["import {Box, Modal, ModalProps} from '@mantine/core';\nimport {Children, ReactElement, ReactNode} from 'react';\nimport PromptClasses from './Prompt.module.css';\nimport {PromptFooter} from './PromptFooter';\n\nexport interface PromptProps extends ModalProps {\n    /**\n     * Controls prompt appearance\n     *\n     * @default \"info\"\n     */\n    variant?: 'success' | 'warning' | 'critical' | 'info';\n    children: ReactNode;\n}\ninterface PromptType {\n    (props: PromptProps): ReactElement;\n    Footer: typeof PromptFooter;\n}\n\nexport const Prompt: PromptType = ({children, ...otherProps}) => {\n    const {classNames: classesProps, ...otherPropsWithoutClasses} = otherProps;\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n\n    const otherChildren = convertedChildren.filter((child) => child.type !== PromptFooter);\n    const footer = convertedChildren.find((child) => child.type === PromptFooter);\n\n    const classNames = {\n        root: PromptClasses.root,\n        header: PromptClasses.header,\n        close: PromptClasses.whiteClose,\n        body: PromptClasses.body,\n        title: PromptClasses.title,\n    };\n\n    return (\n        <Modal variant=\"prompt\" classNames={{...classNames, ...classesProps}} size=\"sm\" {...otherPropsWithoutClasses}>\n            <Box className={PromptClasses.innerBody}>{otherChildren}</Box>\n            {footer}\n        </Modal>\n    );\n};\n\nPrompt.Footer = PromptFooter;\n"],"names":["Box","Modal","Children","PromptClasses","PromptFooter","Prompt","children","otherProps","classNames","classesProps","otherPropsWithoutClasses","convertedChildren","toArray","otherChildren","filter","child","type","footer","find","root","header","close","whiteClose","body","title","variant","size","className","innerBody","Footer"],"mappings":";AAAA,SAAQA,GAAG,EAAEC,KAAK,QAAmB,gBAAgB;AACrD,SAAQC,QAAQ,QAAgC,QAAQ;AACxD,OAAOC,mBAAmB,sBAAsB;AAChD,SAAQC,YAAY,QAAO,iBAAiB;AAgB5C,OAAO,MAAMC,SAAqB,CAAC,EAACC,QAAQ,EAAE,GAAGC,YAAW;IACxD,MAAM,EAACC,YAAYC,YAAY,EAAE,GAAGC,0BAAyB,GAAGH;IAChE,MAAMI,oBAAoBT,SAASU,OAAO,CAACN;IAE3C,MAAMO,gBAAgBF,kBAAkBG,MAAM,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAKZ;IACzE,MAAMa,SAASN,kBAAkBO,IAAI,CAAC,CAACH,QAAUA,MAAMC,IAAI,KAAKZ;IAEhE,MAAMI,aAAa;QACfW,MAAMhB,cAAcgB,IAAI;QACxBC,QAAQjB,cAAciB,MAAM;QAC5BC,OAAOlB,cAAcmB,UAAU;QAC/BC,MAAMpB,cAAcoB,IAAI;QACxBC,OAAOrB,cAAcqB,KAAK;IAC9B;IAEA,qBACI,MAACvB;QAAMwB,SAAQ;QAASjB,YAAY;YAAC,GAAGA,UAAU;YAAE,GAAGC,YAAY;QAAA;QAAGiB,MAAK;QAAM,GAAGhB,wBAAwB;;0BACxG,KAACV;gBAAI2B,WAAWxB,cAAcyB,SAAS;0BAAGf;;YACzCI;;;AAGb,EAAE;AAEFZ,OAAOwB,MAAM,GAAGzB"}

package/dist/esm/components/prompt/Prompt.module.css

@@ -0,0 +1,45 @@
+.root {
+    &[data-variant='success']&[data-size] {
+        .header {
+            background-color: var(--mantine-color-lime-6);
+        }
+    }
+    &[data-variant='warning']&[data-size] {
+        .header {
+            background-color: var(--mantine-color-yellow-5);
+        }
+    }
+    &[data-variant='critical']&[data-size] {
+        .header {
+            background-color: var(--mantine-color-red-6);
+        }
+    }
+    &[data-variant='info']&[data-size] {
+        .header {
+            background-color: var(--mantine-color-navy-5);
+        }
+    }
+}
+
+.title {
+    color: var(--mantine-color-white);
+}
+
+.header {
+    width: 100%;
+    border-bottom: 1px solid var(--mantine-color-gray-3);
+    font-size: var(--mantine-h3-font-size);
+    line-height: var(--mantine-h3-line-height);
+    overflow-wrap: anywhere;
+    padding-top: var(--mantine-spacing-md);
+    padding-bottom: var(--mantine-spacing-md);
+}
+
+.whiteClose {
+    @mixin light {
+        color: var(--mantine-color-white);
+        @mixin hover {
+            background-color: transparent;
+        }
+    }
+}

package/dist/esm/components/prompt/PromptFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/prompt/PromptFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAe,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEjE,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;CAAG;AAE/D,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAEhF,CAAC"}
+{"version":3,"file":"PromptFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/prompt/PromptFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAe,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEjE,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;CAAG;AAE/D,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAIhF,CAAC"}

package/dist/esm/components/prompt/PromptFooter.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StickyFooter } from '../sticky-footer';
 export const PromptFooter = ({ children, ...otherProps })=>/*#__PURE__*/ _jsx(StickyFooter, {
+        p: 0,
+        pt: "lg",
         ...otherProps,
         children: children
     });

package/dist/esm/components/prompt/PromptFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/prompt/PromptFooter.tsx"],"sourcesContent":["import {FunctionComponent, PropsWithChildren} from 'react';\nimport {StickyFooter, StickyFooterProps} from '../sticky-footer';\n\nexport interface PromptFooterProps extends StickyFooterProps {}\n\nexport const PromptFooter: FunctionComponent<PropsWithChildren<PromptFooterProps>> = ({children, ...otherProps}) => (\n    <StickyFooter {...otherProps}>{children}</StickyFooter>\n);\n"],"names":["StickyFooter","PromptFooter","children","otherProps"],"mappings":";AACA,SAAQA,YAAY,QAA0B,mBAAmB;AAIjE,OAAO,MAAMC,eAAwE,CAAC,EAACC,QAAQ,EAAE,GAAGC,YAAW,iBAC3G,KAACH;QAAc,GAAGG,UAAU;kBAAGD;OACjC"}
+{"version":3,"sources":["../../../../src/components/prompt/PromptFooter.tsx"],"sourcesContent":["import {FunctionComponent, PropsWithChildren} from 'react';\nimport {StickyFooter, StickyFooterProps} from '../sticky-footer';\n\nexport interface PromptFooterProps extends StickyFooterProps {}\n\nexport const PromptFooter: FunctionComponent<PropsWithChildren<PromptFooterProps>> = ({children, ...otherProps}) => (\n    <StickyFooter p={0} pt=\"lg\" {...otherProps}>\n        {children}\n    </StickyFooter>\n);\n"],"names":["StickyFooter","PromptFooter","children","otherProps","p","pt"],"mappings":";AACA,SAAQA,YAAY,QAA0B,mBAAmB;AAIjE,OAAO,MAAMC,eAAwE,CAAC,EAACC,QAAQ,EAAE,GAAGC,YAAW,iBAC3G,KAACH;QAAaI,GAAG;QAAGC,IAAG;QAAM,GAAGF,UAAU;kBACrCD;OAEP"}

package/dist/esm/components/sticky-footer/StickyFooter.d.ts

@@ -1,36 +1,24 @@
-import { DefaultProps, GroupPosition, MantineNumberSize, Selectors } from '@mantine/core';
+import { Factory, GroupProps, StylesApiProps } from '@mantine/core';
 import { ReactNode } from 'react';
-export interface StickyFooterProps extends DefaultProps<Selectors<typeof useStyles>> {
+export interface StickyFooterProps extends Omit<GroupProps, 'classNames' | 'styles' | 'vars'>, StylesApiProps<StickyFooterFactory> {
     /**
      * Whether a border is render on top of the footer
      */
     borderTop?: boolean;
-    /**
-     * Position of the children within the footer
-     *
-     * @default 'right'
-     */
-    position?: GroupPosition;
-    /**
-     * Defines the spacing between footer children
-     *
-     * @default 'sm'
-     */
-    spacing?: MantineNumberSize;
     /**
      * Footer's children, usually buttons
      */
     children?: ReactNode;
 }
-declare const useStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<string>) => {
-    classes: {
-        root: string;
-        footer: string;
-        divider: string;
-    };
-    cx: (...args: any) => string;
-    theme: import("@mantine/core").MantineTheme;
-};
-export declare const StickyFooter: import("react").ForwardRefExoticComponent<StickyFooterProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};
+export type StickyFooterStylesNames = 'root';
+export type StickyFooterFactory = Factory<{
+    props: StickyFooterProps;
+    ref: HTMLDivElement;
+    stylesNames: StickyFooterStylesNames;
+}>;
+export declare const StickyFooter: import("@mantine/core").MantineComponent<{
+    props: StickyFooterProps;
+    ref: HTMLDivElement;
+    stylesNames: StickyFooterStylesNames;
+}>;
 //# sourceMappingURL=StickyFooter.d.ts.map

package/dist/esm/components/sticky-footer/StickyFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StickyFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/sticky-footer/StickyFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGH,YAAY,EAGZ,aAAa,EACb,iBAAiB,EACjB,SAAS,EAEZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAa,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAChF;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,QAAA,MAAM,SAAS;;;;;;;;CAWZ,CAAC;AAOJ,eAAO,MAAM,YAAY,8GAavB,CAAC"}
+{"version":3,"file":"StickyFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/sticky-footer/StickyFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAS,UAAU,EAAE,cAAc,EAA+B,MAAM,eAAe,CAAC;AAEvG,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhC,MAAM,WAAW,iBACb,SAAQ,IAAI,CAAC,UAAU,EAAE,YAAY,GAAG,QAAQ,GAAG,MAAM,CAAC,EACtD,cAAc,CAAC,mBAAmB,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC;IACtC,KAAK,EAAE,iBAAiB,CAAC;IACzB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,uBAAuB,CAAC;CACxC,CAAC,CAAC;AAOH,eAAO,MAAM,YAAY;WAVd,iBAAiB;SACnB,cAAc;iBACN,uBAAuB;EAoCtC,CAAC"}

package/dist/esm/components/sticky-footer/StickyFooter.js

@@ -1,46 +1,34 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, createStyles, Divider, Group, useComponentDefaultProps } from '@mantine/core';
-import { forwardRef } from 'react';
-const useStyles = createStyles((theme)=>({
-        root: {
-            position: 'sticky',
-            bottom: 0,
-            zIndex: 10,
-            backgroundColor: 'white'
-        },
-        footer: {
-            padding: theme.spacing.lg
-        },
-        divider: {}
-    }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Group, factory, useProps, useStyles } from '@mantine/core';
+import clsx from 'clsx';
+import classes from './StickyFooter.module.css';
 const defaultProps = {
-    spacing: 'sm',
-    position: 'right'
+    gap: 'sm',
+    justify: 'flex-end'
 };
-export const StickyFooter = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { borderTop, spacing, position, children, className, classNames, styles, unstyled, ...others } = useComponentDefaultProps('StickyFooter', defaultProps, props);
-    const { classes, cx } = useStyles(null, {
+export const StickyFooter = factory((props, ref)=>{
+    const { borderTop, justify, gap, children, className, classNames, style, styles, unstyled, vars, ...others } = useProps('StickyFooter', defaultProps, props);
+    const getStyles = useStyles({
         name: 'StickyFooter',
+        classes,
+        props,
+        className,
+        style,
         classNames,
         styles,
         unstyled
     });
-    return /*#__PURE__*/ _jsxs(Box, {
+    const css = getStyles('root');
+    return /*#__PURE__*/ _jsx(Group, {
+        justify: justify,
+        gap: gap,
+        className: clsx(css.className, {
+            [classes.border]: !!borderTop
+        }),
+        style: css.style,
         ref: ref,
-        className: cx(classes.root, className),
-        children: [
-            borderTop ? /*#__PURE__*/ _jsx(Divider, {
-                size: "xs",
-                className: classes.divider
-            }) : null,
-            /*#__PURE__*/ _jsx(Group, {
-                position: position,
-                spacing: spacing,
-                className: classes.footer,
-                ...others,
-                children: children
-            })
-        ]
+        ...others,
+        children: children
     });
 });
 

package/dist/esm/components/sticky-footer/StickyFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/sticky-footer/StickyFooter.tsx"],"sourcesContent":["import {\n    Box,\n    createStyles,\n    DefaultProps,\n    Divider,\n    Group,\n    GroupPosition,\n    MantineNumberSize,\n    Selectors,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {forwardRef, ReactNode} from 'react';\n\nexport interface StickyFooterProps extends DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * Whether a border is render on top of the footer\n     */\n    borderTop?: boolean;\n    /**\n     * Position of the children within the footer\n     *\n     * @default 'right'\n     */\n    position?: GroupPosition;\n    /**\n     * Defines the spacing between footer children\n     *\n     * @default 'sm'\n     */\n    spacing?: MantineNumberSize;\n    /**\n     * Footer's children, usually buttons\n     */\n    children?: ReactNode;\n}\n\nconst useStyles = createStyles((theme) => ({\n    root: {\n        position: 'sticky',\n        bottom: 0,\n        zIndex: 10,\n        backgroundColor: 'white',\n    },\n    footer: {\n        padding: theme.spacing.lg,\n    },\n    divider: {},\n}));\n\nconst defaultProps: Partial<StickyFooterProps> = {\n    spacing: 'sm',\n    position: 'right',\n};\n\nexport const StickyFooter = forwardRef<HTMLDivElement, StickyFooterProps>((props, ref) => {\n    const {borderTop, spacing, position, children, className, classNames, styles, unstyled, ...others} =\n        useComponentDefaultProps('StickyFooter', defaultProps, props);\n    const {classes, cx} = useStyles(null, {name: 'StickyFooter', classNames, styles, unstyled});\n\n    return (\n        <Box ref={ref} className={cx(classes.root, className)}>\n            {borderTop ? <Divider size=\"xs\" className={classes.divider} /> : null}\n            <Group position={position} spacing={spacing} className={classes.footer} {...others}>\n                {children}\n            </Group>\n        </Box>\n    );\n});\n"],"names":["Box","createStyles","Divider","Group","useComponentDefaultProps","forwardRef","useStyles","theme","root","position","bottom","zIndex","backgroundColor","footer","padding","spacing","lg","divider","defaultProps","StickyFooter","props","ref","borderTop","children","className","classNames","styles","unstyled","others","classes","cx","name","size"],"mappings":";AAAA,SACIA,GAAG,EACHC,YAAY,EAEZC,OAAO,EACPC,KAAK,EAILC,wBAAwB,QACrB,gBAAgB;AACvB,SAAQC,UAAU,QAAkB,QAAQ;AAyB5C,MAAMC,YAAYL,aAAa,CAACM,QAAW,CAAA;QACvCC,MAAM;YACFC,UAAU;YACVC,QAAQ;YACRC,QAAQ;YACRC,iBAAiB;QACrB;QACAC,QAAQ;YACJC,SAASP,MAAMQ,OAAO,CAACC,EAAE;QAC7B;QACAC,SAAS,CAAC;IACd,CAAA;AAEA,MAAMC,eAA2C;IAC7CH,SAAS;IACTN,UAAU;AACd;AAEA,OAAO,MAAMU,6BAAed,WAA8C,CAACe,OAAOC;IAC9E,MAAM,EAACC,SAAS,EAAEP,OAAO,EAAEN,QAAQ,EAAEc,QAAQ,EAAEC,SAAS,EAAEC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGC,QAAO,GAC9FxB,yBAAyB,gBAAgBc,cAAcE;IAC3D,MAAM,EAACS,OAAO,EAAEC,EAAE,EAAC,GAAGxB,UAAU,MAAM;QAACyB,MAAM;QAAgBN;QAAYC;QAAQC;IAAQ;IAEzF,qBACI,MAAC3B;QAAIqB,KAAKA;QAAKG,WAAWM,GAAGD,QAAQrB,IAAI,EAAEgB;;YACtCF,0BAAY,KAACpB;gBAAQ8B,MAAK;gBAAKR,WAAWK,QAAQZ,OAAO;iBAAO;0BACjE,KAACd;gBAAMM,UAAUA;gBAAUM,SAASA;gBAASS,WAAWK,QAAQhB,MAAM;gBAAG,GAAGe,MAAM;0BAC7EL;;;;AAIjB,GAAG"}
+{"version":3,"sources":["../../../../src/components/sticky-footer/StickyFooter.tsx"],"sourcesContent":["import {Factory, Group, GroupProps, StylesApiProps, factory, useProps, useStyles} from '@mantine/core';\nimport clsx from 'clsx';\nimport {ReactNode} from 'react';\nimport classes from './StickyFooter.module.css';\n\nexport interface StickyFooterProps\n    extends Omit<GroupProps, 'classNames' | 'styles' | 'vars'>,\n        StylesApiProps<StickyFooterFactory> {\n    /**\n     * Whether a border is render on top of the footer\n     */\n    borderTop?: boolean;\n    /**\n     * Footer's children, usually buttons\n     */\n    children?: ReactNode;\n}\n\nexport type StickyFooterStylesNames = 'root';\n\nexport type StickyFooterFactory = Factory<{\n    props: StickyFooterProps;\n    ref: HTMLDivElement;\n    stylesNames: StickyFooterStylesNames;\n}>;\n\nconst defaultProps: Partial<StickyFooterProps> = {\n    gap: 'sm',\n    justify: 'flex-end',\n};\n\nexport const StickyFooter = factory<StickyFooterFactory>((props, ref) => {\n    const {borderTop, justify, gap, children, className, classNames, style, styles, unstyled, vars, ...others} =\n        useProps('StickyFooter', defaultProps, props);\n    const getStyles = useStyles<StickyFooterFactory>({\n        name: 'StickyFooter',\n        classes,\n        props,\n        className,\n        style,\n        classNames,\n        styles,\n        unstyled,\n    });\n\n    const css = getStyles('root');\n\n    return (\n        <Group\n            justify={justify}\n            gap={gap}\n            className={clsx(css.className, {[classes.border]: !!borderTop})}\n            style={css.style}\n            ref={ref}\n            {...others}\n        >\n            {children}\n        </Group>\n    );\n});\n"],"names":["Group","factory","useProps","useStyles","clsx","classes","defaultProps","gap","justify","StickyFooter","props","ref","borderTop","children","className","classNames","style","styles","unstyled","vars","others","getStyles","name","css","border"],"mappings":";AAAA,SAAiBA,KAAK,EAA8BC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,QAAO,gBAAgB;AACvG,OAAOC,UAAU,OAAO;AAExB,OAAOC,aAAa,4BAA4B;AAuBhD,MAAMC,eAA2C;IAC7CC,KAAK;IACLC,SAAS;AACb;AAEA,OAAO,MAAMC,eAAeR,QAA6B,CAACS,OAAOC;IAC7D,MAAM,EAACC,SAAS,EAAEJ,OAAO,EAAED,GAAG,EAAEM,QAAQ,EAAEC,SAAS,EAAEC,UAAU,EAAEC,KAAK,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGC,QAAO,GACtGlB,SAAS,gBAAgBI,cAAcI;IAC3C,MAAMW,YAAYlB,UAA+B;QAC7CmB,MAAM;QACNjB;QACAK;QACAI;QACAE;QACAD;QACAE;QACAC;IACJ;IAEA,MAAMK,MAAMF,UAAU;IAEtB,qBACI,KAACrB;QACGQ,SAASA;QACTD,KAAKA;QACLO,WAAWV,KAAKmB,IAAIT,SAAS,EAAE;YAAC,CAACT,QAAQmB,MAAM,CAAC,EAAE,CAAC,CAACZ;QAAS;QAC7DI,OAAOO,IAAIP,KAAK;QAChBL,KAAKA;QACJ,GAAGS,MAAM;kBAETP;;AAGb,GAAG"}

package/dist/esm/components/sticky-footer/StickyFooter.module.css

@@ -0,0 +1,11 @@
+.root {
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    background-color: white;
+    padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
+}
+
+.border {
+    border-top: 1px solid var(--mantine-color-gray-3);
+}