@coveord/plasma-mantine 52.27.3 → 53.0.0

package/dist/cjs/components/header/HeaderDocAnchor/HeaderDocAnchor.js

@@ -14,42 +14,51 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
-var _HeaderDocAnchorstyles = require("./HeaderDocAnchor.styles");
+var _Headercontext = require("../Header.context");
 var defaultProps = {
     position: "right",
     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.QuestionSize16Px, {
         height: 16
     })
 };
-var HeaderDocAnchor = function(props) {
-    var _useComponentDefaultProps = (0, _core.useComponentDefaultProps)("PlasmaHeaderActions", defaultProps, props), classNames = _useComponentDefaultProps.classNames, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, className = _useComponentDefaultProps.className, children = _useComponentDefaultProps.children, docLink = _useComponentDefaultProps.href, docLinkTooltipLabel = _useComponentDefaultProps.label, others = _object_without_properties._(_useComponentDefaultProps, [
+var HeaderDocAnchor = (0, _core.factory)(function(_props, ref) {
+    var props = (0, _core.useProps)("PlasmaHeaderActions", defaultProps, _props);
+    var className = props.className, classNames = props.classNames, styles = props.styles, style = props.style, children = props.children, label = props.label, position = props.position, vars = props.vars, others = _object_without_properties._(props, [
+        "className",
         "classNames",
         "styles",
-        "unstyled",
-        "className",
+        "style",
         "children",
-        "href",
-        "label"
+        "label",
+        "position",
+        "vars"
     ]);
-    var _useStyles = (0, _HeaderDocAnchorstyles.useStyles)({}, {
-        name: "PlasmaHeaderActions",
-        classNames: classNames,
-        styles: styles,
-        unstyled: unstyled
-    }), classes = _useStyles.classes, cx = _useStyles.cx;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, _object_spread_props._(_object_spread._({
-        className: cx(className, classes.tooltip),
-        label: docLinkTooltipLabel,
-        disabled: !docLinkTooltipLabel
-    }, others), {
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Anchor, {
-            className: classes.anchor,
+    var ctx = (0, _Headercontext.useHeaderContext)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
+        label: label,
+        disabled: !label,
+        position: position,
+        classNames: {
+            tooltip: ctx.getStyles("docAnchorTooltip", {
+                classNames: classNames,
+                styles: styles,
+                props: props
+            }).className
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Anchor, _object_spread_props._(_object_spread._({
+            ref: ref,
             inline: true,
-            href: docLink,
-            target: "_blank",
+            target: "_blank"
+        }, ctx.getStyles("docAnchor", {
+            classNames: classNames,
+            styles: styles,
+            props: props,
+            style: style,
+            className: className
+        }), others), {
             children: children
-        })
-    }));
-};
+        }))
+    });
+});
 
 //# sourceMappingURL=HeaderDocAnchor.js.map

package/dist/cjs/components/header/HeaderDocAnchor/HeaderDocAnchor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"sourcesContent":["import {QuestionSize16Px} from '@coveord/plasma-react-icons';\nimport {Anchor, DefaultProps, Selectors, Tooltip, TooltipProps, useComponentDefaultProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\nimport {HeaderDocAnchorStylesParams, useStyles} from './HeaderDocAnchor.styles';\n\nexport type HeaderDocAnchorStylesNames = Selectors<typeof useStyles>;\n\nconst defaultProps: Partial<HeaderDocAnchorProps> = {\n    position: 'right',\n    children: <QuestionSize16Px height={16} />,\n};\n\nexport interface HeaderDocAnchorProps\n    extends Pick<TooltipProps, 'position'>,\n        DefaultProps<HeaderDocAnchorStylesNames, HeaderDocAnchorStylesParams> {\n    /**\n     * A href pointing to documentation related to the current panel.\n     * When provided, an info icon is rendered next to the title as link to this documentation\n     */\n    href: string;\n    /**\n     * The tooltip text shown when hovering over the doc link icon\n     */\n    label?: ReactNode;\n    /**\n     * React component to add the tooltip and anchor on\n     */\n    children?: ReactNode;\n}\n\nexport const HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = (props: HeaderDocAnchorProps) => {\n    const {\n        classNames,\n        styles,\n        unstyled,\n        className,\n        children,\n        href: docLink,\n        label: docLinkTooltipLabel,\n        ...others\n    } = useComponentDefaultProps('PlasmaHeaderActions', defaultProps, props);\n    const {classes, cx} = useStyles({}, {name: 'PlasmaHeaderActions', classNames, styles, unstyled});\n    return (\n        <Tooltip\n            className={cx(className, classes.tooltip)}\n            label={docLinkTooltipLabel}\n            disabled={!docLinkTooltipLabel}\n            {...others}\n        >\n            <Anchor className={classes.anchor} inline href={docLink} target=\"_blank\">\n                {children}\n            </Anchor>\n        </Tooltip>\n    );\n};\n"],"names":["HeaderDocAnchor","defaultProps","position","children","QuestionSize16Px","height","props","useComponentDefaultProps","classNames","styles","unstyled","className","href","docLink","label","docLinkTooltipLabel","others","useStyles","name","classes","cx","Tooltip","tooltip","disabled","Anchor","anchor","inline","target"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;gCA9BkB;oBACgE;qCAE1C;AAIrD,IAAMC,eAA8C;IAChDC,UAAU;IACVC,wBAAU,qBAACC,kCAAgB;QAACC,QAAQ;;AACxC;AAoBO,IAAML,kBAA2D,SAACM;IACrE,IASIC,4BAAAA,IAAAA,8BAAwB,EAAC,uBAAuBN,cAAcK,QAR9DE,aAQAD,0BARAC,YACAC,SAOAF,0BAPAE,QACAC,WAMAH,0BANAG,UACAC,YAKAJ,0BALAI,WACAR,WAIAI,0BAJAJ,UACAS,AAAMC,UAGNN,0BAHAK,MACAE,AAAOC,sBAEPR,0BAFAO,OACGE,sCACHT;QARAC;QACAC;QACAC;QACAC;QACAR;QACAS;QACAE;;IAGJ,IAAsBG,aAAAA,IAAAA,gCAAS,EAAC,CAAC,GAAG;QAACC,MAAM;QAAuBV,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAvFS,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,qBACI,qBAACC,aAAO;QACJV,WAAWS,GAAGT,WAAWQ,QAAQG,OAAO;QACxCR,OAAOC;QACPQ,UAAU,CAACR;OACPC;kBAEJ,cAAA,qBAACQ,YAAM;YAACb,WAAWQ,QAAQM,MAAM;YAAEC,MAAM;YAACd,MAAMC;YAASc,QAAO;sBAC3DxB;;;AAIjB"}
+{"version":3,"sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"sourcesContent":["import {QuestionSize16Px} from '@coveord/plasma-react-icons';\nimport {\n    Anchor,\n    AnchorProps,\n    CompoundStylesApiProps,\n    Factory,\n    Tooltip,\n    TooltipProps,\n    factory,\n    useProps,\n} from '@mantine/core';\nimport {ReactNode} from 'react';\nimport {useHeaderContext} from '../Header.context';\n\nexport type HeaderDocAnchorStyleNames = 'docAnchorTooltip' | 'docAnchor';\n\nexport interface HeaderDocAnchorProps\n    extends Pick<TooltipProps, 'position'>,\n        CompoundStylesApiProps<HeaderDocAnchorFactory>,\n        Omit<AnchorProps, 'classNames' | 'styles' | 'variant' | 'vars'> {\n    /**\n     * A href pointing to documentation related to the current panel.\n     * When provided, an info icon is rendered next to the title as link to this documentation\n     */\n    href: string;\n    /**\n     * The tooltip text shown when hovering over the doc link icon\n     */\n    label?: ReactNode;\n    /**\n     * React component to add the tooltip and anchor on\n     */\n    children?: ReactNode;\n}\n\nexport type HeaderDocAnchorFactory = Factory<{\n    props: HeaderDocAnchorProps;\n    ref: HTMLAnchorElement;\n    stylesNames: HeaderDocAnchorStyleNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<HeaderDocAnchorProps> = {\n    position: 'right',\n    children: <QuestionSize16Px height={16} />,\n};\n\nexport const HeaderDocAnchor = factory<HeaderDocAnchorFactory>((_props, ref) => {\n    const props = useProps('PlasmaHeaderActions', defaultProps, _props);\n    const {className, classNames, styles, style, children, label, position, vars, ...others} = props;\n\n    const ctx = useHeaderContext();\n\n    return (\n        <Tooltip\n            label={label}\n            disabled={!label}\n            position={position}\n            classNames={{tooltip: ctx.getStyles('docAnchorTooltip', {classNames, styles, props}).className}}\n        >\n            <Anchor\n                ref={ref}\n                inline\n                target=\"_blank\"\n                {...ctx.getStyles('docAnchor', {classNames, styles, props, style, className})}\n                {...others}\n            >\n                {children}\n            </Anchor>\n        </Tooltip>\n    );\n});\n"],"names":["HeaderDocAnchor","defaultProps","position","children","QuestionSize16Px","height","factory","_props","ref","props","useProps","className","classNames","styles","style","label","vars","others","ctx","useHeaderContext","Tooltip","disabled","tooltip","getStyles","Anchor","inline","target"],"mappings":";;;;+BA+CaA;;;eAAAA;;;;;;;gCA/CkB;oBAUxB;6BAEwB;AA8B/B,IAAMC,eAA8C;IAChDC,UAAU;IACVC,wBAAU,qBAACC,kCAAgB;QAACC,QAAQ;;AACxC;AAEO,IAAML,kBAAkBM,IAAAA,aAAO,EAAyB,SAACC,QAAQC;IACpE,IAAMC,QAAQC,IAAAA,cAAQ,EAAC,uBAAuBT,cAAcM;IAC5D,IAAOI,YAAoFF,MAApFE,WAAWC,aAAyEH,MAAzEG,YAAYC,SAA6DJ,MAA7DI,QAAQC,QAAqDL,MAArDK,OAAOX,WAA8CM,MAA9CN,UAAUY,QAAoCN,MAApCM,OAAOb,WAA6BO,MAA7BP,UAAUc,OAAmBP,MAAnBO,MAASC,sCAAUR;QAApFE;QAAWC;QAAYC;QAAQC;QAAOX;QAAUY;QAAOb;QAAUc;;IAExE,IAAME,MAAMC,IAAAA,+BAAgB;IAE5B,qBACI,qBAACC,aAAO;QACJL,OAAOA;QACPM,UAAU,CAACN;QACXb,UAAUA;QACVU,YAAY;YAACU,SAASJ,IAAIK,SAAS,CAAC,oBAAoB;gBAACX,YAAAA;gBAAYC,QAAAA;gBAAQJ,OAAAA;YAAK,GAAGE,SAAS;QAAA;kBAE9F,cAAA,qBAACa,YAAM;YACHhB,KAAKA;YACLiB,MAAM;YACNC,QAAO;WACHR,IAAIK,SAAS,CAAC,aAAa;YAACX,YAAAA;YAAYC,QAAAA;YAAQJ,OAAAA;YAAOK,OAAAA;YAAOH,WAAAA;QAAS,IACvEM;sBAEHd;;;AAIjB"}

package/dist/cjs/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -2,48 +2,75 @@
 
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>
+  <style
+    data-mantine-styles="true"
+  >
+    :root{--mantine-webkit-font-smoothing: unset;--mantine-moz-font-smoothing: unset;--mantine-color-black: #282829;--mantine-line-height: 1.5;--mantine-font-family: canada-type-gibson, sans-serif;--mantine-font-family-headings: canada-type-gibson, sans-serif;--mantine-heading-font-weight: 500;--mantine-radius-default: calc(0.5rem * var(--mantine-scale));--mantine-primary-color-filled: var(--mantine-color-action-filled);--mantine-primary-color-filled-hover: var(--mantine-color-action-filled-hover);--mantine-primary-color-light: var(--mantine-color-action-light);--mantine-primary-color-light-hover: var(--mantine-color-action-light-hover);--mantine-primary-color-light-color: var(--mantine-color-action-light-color);--mantine-spacing-xs: 8px;--mantine-spacing-sm: 16px;--mantine-spacing-md: 24px;--mantine-spacing-lg: 32px;--mantine-spacing-xl: 40px;--mantine-line-height-md: 1.5;--mantine-shadow-xs: 0px 1px 0px rgba(4, 8, 31, 0.08);--mantine-shadow-sm: 0px 2px 4px rgba(4, 8, 31, 0.12);--mantine-shadow-md: 0px 4px 8px rgba(4, 8, 31, 0.08);--mantine-shadow-lg: 0px 8px 16px rgba(7, 12, 41, 0.06);--mantine-shadow-xl: 0px 16px 24px rgba(4, 8, 31, 0.06);--mantine-primary-color-0: var(--mantine-color-action-0);--mantine-primary-color-1: var(--mantine-color-action-1);--mantine-primary-color-2: var(--mantine-color-action-2);--mantine-primary-color-3: var(--mantine-color-action-3);--mantine-primary-color-4: var(--mantine-color-action-4);--mantine-primary-color-5: var(--mantine-color-action-5);--mantine-primary-color-6: var(--mantine-color-action-6);--mantine-primary-color-7: var(--mantine-color-action-7);--mantine-primary-color-8: var(--mantine-color-action-8);--mantine-primary-color-9: var(--mantine-color-action-9);--mantine-color-gray-0: #fcfcfc;--mantine-color-gray-1: #f9f9f9;--mantine-color-gray-2: #f3f3f3;--mantine-color-gray-3: #e5e8e8;--mantine-color-gray-4: #d6dcdd;--mantine-color-gray-5: #b7bcc0;--mantine-color-gray-6: #6c727b;--mantine-color-gray-7: #565b66;--mantine-color-gray-8: #353a3f;--mantine-color-gray-9: #282829;--mantine-color-red-0: #fff8f8;--mantine-color-red-1: #ffd7d3;--mantine-color-red-2: #f3b4ae;--mantine-color-red-3: #ee8279;--mantine-color-red-4: #f05245;--mantine-color-red-5: #e03729;--mantine-color-red-6: #cd2113;--mantine-color-red-7: #a11409;--mantine-color-red-8: #80130a;--mantine-color-red-9: #600a03;--mantine-color-indigo-0: #f2f3ff;--mantine-color-indigo-1: #ced4f4;--mantine-color-indigo-2: #9dabf2;--mantine-color-indigo-3: #687cdf;--mantine-color-indigo-4: #4a61d4;--mantine-color-indigo-5: #2e45ba;--mantine-color-indigo-6: #24389e;--mantine-color-indigo-7: #192b8a;--mantine-color-indigo-8: #101f6b;--mantine-color-indigo-9: #071140;--mantine-color-blue-0: #e7f7ff;--mantine-color-blue-1: #c3ecff;--mantine-color-blue-2: #86d8ff;--mantine-color-blue-3: #46c4ff;--mantine-color-blue-4: #00adff;--mantine-color-blue-5: #029de7;--mantine-color-blue-6: #0387c6;--mantine-color-blue-7: #0173a9;--mantine-color-blue-8: #004c71;--mantine-color-blue-9: #003148;--mantine-color-teal-0: #edfffc;--mantine-color-teal-1: #c2fef5;--mantine-color-teal-2: #50fae3;--mantine-color-teal-3: #1cebcf;--mantine-color-teal-4: #16dcc1;--mantine-color-teal-5: #12c7ae;--mantine-color-teal-6: #0ba893;--mantine-color-teal-7: #078675;--mantine-color-teal-8: #055f53;--mantine-color-teal-9: #033932;--mantine-color-green-0: #dcf3ef;--mantine-color-green-1: #b2e3db;--mantine-color-green-2: #79d1c3;--mantine-color-green-3: #34ad95;--mantine-color-green-4: #1a8973;--mantine-color-green-5: #00634f;--mantine-color-green-6: #045242;--mantine-color-green-7: #043f33;--mantine-color-green-8: #023128;--mantine-color-green-9: #01211b;--mantine-color-lime-0: #f2fff9;--mantine-color-lime-1: #f2fff9;--mantine-color-lime-2: #f2fff9;--mantine-color-lime-3: #f2fff9;--mantine-color-lime-4: #12a344;--mantine-color-lime-5: #12a344;--mantine-color-lime-6: #12a344;--mantine-color-lime-7: #004a20;--mantine-color-lime-8: #004a20;--mantine-color-lime-9: #004a20;--mantine-color-yellow-0: #fffdea;--mantine-color-yellow-1: #fff7ba;--mantine-color-yellow-2: #ffef70;--mantine-color-yellow-3: #ffe300;--mantine-color-yellow-4: #f5d029;--mantine-color-yellow-5: #eac10b;--mantine-color-yellow-6: #e2b104;--mantine-color-yellow-7: #bd9403;--mantine-color-yellow-8: #8f7000;--mantine-color-yellow-9: #493b08;--mantine-color-action-0: #edf6ff;--mantine-color-action-1: #edf6ff;--mantine-color-action-2: #c7e4ff;--mantine-color-action-3: #8bc7ff;--mantine-color-action-4: #399ffe;--mantine-color-action-5: #1372ec;--mantine-color-action-6: #1372ec;--mantine-color-action-7: #1a50ad;--mantine-color-action-8: #1a50ad;--mantine-color-action-9: #062d70;--mantine-color-navy-0: #f5f6ff;--mantine-color-navy-1: #d6d7fd;--mantine-color-navy-2: #aeb0f1;--mantine-color-navy-3: #8787db;--mantine-color-navy-4: #6b6bbd;--mantine-color-navy-5: #525296;--mantine-color-navy-6: #3f3f71;--mantine-color-navy-7: #333357;--mantine-color-navy-8: #262646;--mantine-color-navy-9: #181d3a;--mantine-color-info-0: #f5f6ff;--mantine-color-info-1: #d6d7fd;--mantine-color-info-2: #aeb0f1;--mantine-color-info-3: #8787db;--mantine-color-info-4: #6b6bbd;--mantine-color-info-5: #525296;--mantine-color-info-6: #3f3f71;--mantine-color-info-7: #333357;--mantine-color-info-8: #262646;--mantine-color-info-9: #181d3a;--mantine-color-critical-0: #fff8f8;--mantine-color-critical-1: #ffd7d3;--mantine-color-critical-2: #f3b4ae;--mantine-color-critical-3: #ee8279;--mantine-color-critical-4: #f05245;--mantine-color-critical-5: #e03729;--mantine-color-critical-6: #cd2113;--mantine-color-critical-7: #a11409;--mantine-color-critical-8: #80130a;--mantine-color-critical-9: #600a03;--mantine-color-new-0: #edfffc;--mantine-color-new-1: #c2fef5;--mantine-color-new-2: #50fae3;--mantine-color-new-3: #1cebcf;--mantine-color-new-4: #16dcc1;--mantine-color-new-5: #12c7ae;--mantine-color-new-6: #0ba893;--mantine-color-new-7: #078675;--mantine-color-new-8: #055f53;--mantine-color-new-9: #033932;--mantine-color-warning-0: #fffdea;--mantine-color-warning-1: #fff7ba;--mantine-color-warning-2: #ffef70;--mantine-color-warning-3: #ffe300;--mantine-color-warning-4: #f5d029;--mantine-color-warning-5: #eac10b;--mantine-color-warning-6: #e2b104;--mantine-color-warning-7: #bd9403;--mantine-color-warning-8: #8f7000;--mantine-color-warning-9: #493b08;--mantine-color-success-0: #f2fff9;--mantine-color-success-1: #f2fff9;--mantine-color-success-2: #f2fff9;--mantine-color-success-3: #f2fff9;--mantine-color-success-4: #12a344;--mantine-color-success-5: #12a344;--mantine-color-success-6: #12a344;--mantine-color-success-7: #004a20;--mantine-color-success-8: #004a20;--mantine-color-success-9: #004a20;--mantine-color-purple-0: #f2ebf3;--mantine-color-purple-1: #dabfe9;--mantine-color-purple-2: #bb80dc;--mantine-color-purple-3: #9a52c1;--mantine-color-purple-4: #752e9c;--mantine-color-purple-5: #5d237d;--mantine-color-purple-6: #451c5c;--mantine-color-purple-7: #390c53;--mantine-color-purple-8: #2b073f;--mantine-color-purple-9: #180323;--mantine-h1-font-size: 48px;--mantine-h1-line-height: 1.5;--mantine-h1-font-weight: 300;--mantine-h2-font-size: 32px;--mantine-h2-line-height: 1.5;--mantine-h2-font-weight: 500;--mantine-h3-font-size: 24px;--mantine-h3-line-height: 1.5;--mantine-h3-font-weight: 500;--mantine-h4-font-size: 18px;--mantine-h4-line-height: 1.5;--mantine-h4-font-weight: 300;--mantine-h5-font-size: 14px;--mantine-h5-font-weight: 500;--mantine-h6-font-size: 12px;--mantine-h6-font-weight: 500;}:root[data-mantine-color-scheme="dark"]{--mantine-color-anchor: var(--mantine-color-action-4);--mantine-color-gray-light: rgba(108, 114, 123, 0.15);--mantine-color-gray-light-hover: rgba(108, 114, 123, 0.2);--mantine-color-gray-outline-hover: rgba(214, 220, 221, 0.05);--mantine-color-red-light: rgba(205, 33, 19, 0.15);--mantine-color-red-light-hover: rgba(205, 33, 19, 0.2);--mantine-color-red-outline-hover: rgba(240, 82, 69, 0.05);--mantine-color-indigo-light: rgba(36, 56, 158, 0.15);--mantine-color-indigo-light-hover: rgba(36, 56, 158, 0.2);--mantine-color-indigo-outline-hover: rgba(74, 97, 212, 0.05);--mantine-color-blue-light: rgba(3, 135, 198, 0.15);--mantine-color-blue-light-hover: rgba(3, 135, 198, 0.2);--mantine-color-blue-outline-hover: rgba(0, 173, 255, 0.05);--mantine-color-teal-light: rgba(11, 168, 147, 0.15);--mantine-color-teal-light-hover: rgba(11, 168, 147, 0.2);--mantine-color-teal-outline-hover: rgba(22, 220, 193, 0.05);--mantine-color-green-light: rgba(4, 82, 66, 0.15);--mantine-color-green-light-hover: rgba(4, 82, 66, 0.2);--mantine-color-green-outline-hover: rgba(26, 137, 115, 0.05);--mantine-color-lime-light: rgba(18, 163, 68, 0.15);--mantine-color-lime-light-hover: rgba(18, 163, 68, 0.2);--mantine-color-lime-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-yellow-light: rgba(226, 177, 4, 0.15);--mantine-color-yellow-light-hover: rgba(226, 177, 4, 0.2);--mantine-color-yellow-outline-hover: rgba(245, 208, 41, 0.05);--mantine-color-action-text: var(--mantine-color-action-4);--mantine-color-action-filled: var(--mantine-color-action-8);--mantine-color-action-filled-hover: var(--mantine-color-action-9);--mantine-color-action-light: rgba(19, 114, 236, 0.15);--mantine-color-action-light-hover: rgba(19, 114, 236, 0.2);--mantine-color-action-light-color: var(--mantine-color-action-3);--mantine-color-action-outline: var(--mantine-color-action-4);--mantine-color-action-outline-hover: rgba(57, 159, 254, 0.05);--mantine-color-navy-text: var(--mantine-color-navy-4);--mantine-color-navy-filled: var(--mantine-color-navy-8);--mantine-color-navy-filled-hover: var(--mantine-color-navy-9);--mantine-color-navy-light: rgba(63, 63, 113, 0.15);--mantine-color-navy-light-hover: rgba(63, 63, 113, 0.2);--mantine-color-navy-light-color: var(--mantine-color-navy-3);--mantine-color-navy-outline: var(--mantine-color-navy-4);--mantine-color-navy-outline-hover: rgba(107, 107, 189, 0.05);--mantine-color-info-text: var(--mantine-color-info-4);--mantine-color-info-filled: var(--mantine-color-info-8);--mantine-color-info-filled-hover: var(--mantine-color-info-9);--mantine-color-info-light: rgba(63, 63, 113, 0.15);--mantine-color-info-light-hover: rgba(63, 63, 113, 0.2);--mantine-color-info-light-color: var(--mantine-color-info-3);--mantine-color-info-outline: var(--mantine-color-info-4);--mantine-color-info-outline-hover: rgba(107, 107, 189, 0.05);--mantine-color-critical-text: var(--mantine-color-critical-4);--mantine-color-critical-filled: var(--mantine-color-critical-8);--mantine-color-critical-filled-hover: var(--mantine-color-critical-9);--mantine-color-critical-light: rgba(205, 33, 19, 0.15);--mantine-color-critical-light-hover: rgba(205, 33, 19, 0.2);--mantine-color-critical-light-color: var(--mantine-color-critical-3);--mantine-color-critical-outline: var(--mantine-color-critical-4);--mantine-color-critical-outline-hover: rgba(240, 82, 69, 0.05);--mantine-color-new-text: var(--mantine-color-new-4);--mantine-color-new-filled: var(--mantine-color-new-8);--mantine-color-new-filled-hover: var(--mantine-color-new-9);--mantine-color-new-light: rgba(11, 168, 147, 0.15);--mantine-color-new-light-hover: rgba(11, 168, 147, 0.2);--mantine-color-new-light-color: var(--mantine-color-new-3);--mantine-color-new-outline: var(--mantine-color-new-4);--mantine-color-new-outline-hover: rgba(22, 220, 193, 0.05);--mantine-color-warning-text: var(--mantine-color-warning-4);--mantine-color-warning-filled: var(--mantine-color-warning-8);--mantine-color-warning-filled-hover: var(--mantine-color-warning-9);--mantine-color-warning-light: rgba(226, 177, 4, 0.15);--mantine-color-warning-light-hover: rgba(226, 177, 4, 0.2);--mantine-color-warning-light-color: var(--mantine-color-warning-3);--mantine-color-warning-outline: var(--mantine-color-warning-4);--mantine-color-warning-outline-hover: rgba(245, 208, 41, 0.05);--mantine-color-success-text: var(--mantine-color-success-4);--mantine-color-success-filled: var(--mantine-color-success-8);--mantine-color-success-filled-hover: var(--mantine-color-success-9);--mantine-color-success-light: rgba(18, 163, 68, 0.15);--mantine-color-success-light-hover: rgba(18, 163, 68, 0.2);--mantine-color-success-light-color: var(--mantine-color-success-3);--mantine-color-success-outline: var(--mantine-color-success-4);--mantine-color-success-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-purple-text: var(--mantine-color-purple-4);--mantine-color-purple-filled: var(--mantine-color-purple-8);--mantine-color-purple-filled-hover: var(--mantine-color-purple-9);--mantine-color-purple-light: rgba(69, 28, 92, 0.15);--mantine-color-purple-light-hover: rgba(69, 28, 92, 0.2);--mantine-color-purple-light-color: var(--mantine-color-purple-3);--mantine-color-purple-outline: var(--mantine-color-purple-4);--mantine-color-purple-outline-hover: rgba(117, 46, 156, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-text: #282829;--mantine-color-anchor: var(--mantine-color-action-6);--mantine-color-dark-light: #C9C9C9;--mantine-color-dark-light-hover: #b8b8b8;--mantine-color-gray-light: #f9f9f9;--mantine-color-gray-light-hover: #f3f3f3;--mantine-color-gray-outline-hover: rgba(108, 114, 123, 0.05);--mantine-color-red-light: #fff8f8;--mantine-color-red-light-hover: #ffd7d3;--mantine-color-red-outline-hover: rgba(205, 33, 19, 0.05);--mantine-color-pink-light: #fff0f6;--mantine-color-pink-light-hover: #ffdeeb;--mantine-color-grape-light: #f8f0fc;--mantine-color-grape-light-hover: #f3d9fa;--mantine-color-violet-light: #f3f0ff;--mantine-color-violet-light-hover: #e5dbff;--mantine-color-indigo-light: #f2f3ff;--mantine-color-indigo-light-hover: #ced4f4;--mantine-color-indigo-outline-hover: rgba(36, 56, 158, 0.05);--mantine-color-blue-light: #e7f7ff;--mantine-color-blue-light-hover: #c3ecff;--mantine-color-blue-outline-hover: rgba(3, 135, 198, 0.05);--mantine-color-cyan-light: #e3fafc;--mantine-color-cyan-light-hover: #c5f6fa;--mantine-color-teal-light: #edfffc;--mantine-color-teal-light-hover: #c2fef5;--mantine-color-teal-outline-hover: rgba(11, 168, 147, 0.05);--mantine-color-green-light: #dcf3ef;--mantine-color-green-light-hover: #b2e3db;--mantine-color-green-outline-hover: rgba(4, 82, 66, 0.05);--mantine-color-lime-light: #f2fff9;--mantine-color-lime-light-hover: #f2fff9;--mantine-color-lime-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-yellow-light: #fffdea;--mantine-color-yellow-light-hover: #fff7ba;--mantine-color-yellow-outline-hover: rgba(226, 177, 4, 0.05);--mantine-color-orange-light: #fff4e6;--mantine-color-orange-light-hover: #ffe8cc;--mantine-color-action-text: var(--mantine-color-action-filled);--mantine-color-action-filled: var(--mantine-color-action-6);--mantine-color-action-filled-hover: var(--mantine-color-action-7);--mantine-color-action-light: #edf6ff;--mantine-color-action-light-hover: #edf6ff;--mantine-color-action-light-color: var(--mantine-color-action-6);--mantine-color-action-outline: var(--mantine-color-action-6);--mantine-color-action-outline-hover: rgba(19, 114, 236, 0.05);--mantine-color-navy-text: var(--mantine-color-navy-filled);--mantine-color-navy-filled: var(--mantine-color-navy-6);--mantine-color-navy-filled-hover: var(--mantine-color-navy-7);--mantine-color-navy-light: #f5f6ff;--mantine-color-navy-light-hover: #d6d7fd;--mantine-color-navy-light-color: var(--mantine-color-navy-6);--mantine-color-navy-outline: var(--mantine-color-navy-6);--mantine-color-navy-outline-hover: rgba(63, 63, 113, 0.05);--mantine-color-info-text: var(--mantine-color-info-filled);--mantine-color-info-filled: var(--mantine-color-info-6);--mantine-color-info-filled-hover: var(--mantine-color-info-7);--mantine-color-info-light: #f5f6ff;--mantine-color-info-light-hover: #d6d7fd;--mantine-color-info-light-color: var(--mantine-color-info-6);--mantine-color-info-outline: var(--mantine-color-info-6);--mantine-color-info-outline-hover: rgba(63, 63, 113, 0.05);--mantine-color-critical-text: var(--mantine-color-critical-filled);--mantine-color-critical-filled: var(--mantine-color-critical-6);--mantine-color-critical-filled-hover: var(--mantine-color-critical-7);--mantine-color-critical-light: #fff8f8;--mantine-color-critical-light-hover: #ffd7d3;--mantine-color-critical-light-color: var(--mantine-color-critical-6);--mantine-color-critical-outline: var(--mantine-color-critical-6);--mantine-color-critical-outline-hover: rgba(205, 33, 19, 0.05);--mantine-color-new-text: var(--mantine-color-new-filled);--mantine-color-new-filled: var(--mantine-color-new-6);--mantine-color-new-filled-hover: var(--mantine-color-new-7);--mantine-color-new-light: #edfffc;--mantine-color-new-light-hover: #c2fef5;--mantine-color-new-light-color: var(--mantine-color-new-6);--mantine-color-new-outline: var(--mantine-color-new-6);--mantine-color-new-outline-hover: rgba(11, 168, 147, 0.05);--mantine-color-warning-text: var(--mantine-color-warning-filled);--mantine-color-warning-filled: var(--mantine-color-warning-6);--mantine-color-warning-filled-hover: var(--mantine-color-warning-7);--mantine-color-warning-light: #fffdea;--mantine-color-warning-light-hover: #fff7ba;--mantine-color-warning-light-color: var(--mantine-color-warning-6);--mantine-color-warning-outline: var(--mantine-color-warning-6);--mantine-color-warning-outline-hover: rgba(226, 177, 4, 0.05);--mantine-color-success-text: var(--mantine-color-success-filled);--mantine-color-success-filled: var(--mantine-color-success-6);--mantine-color-success-filled-hover: var(--mantine-color-success-7);--mantine-color-success-light: #f2fff9;--mantine-color-success-light-hover: #f2fff9;--mantine-color-success-light-color: var(--mantine-color-success-6);--mantine-color-success-outline: var(--mantine-color-success-6);--mantine-color-success-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-purple-text: var(--mantine-color-purple-filled);--mantine-color-purple-filled: var(--mantine-color-purple-6);--mantine-color-purple-filled-hover: var(--mantine-color-purple-7);--mantine-color-purple-light: #f2ebf3;--mantine-color-purple-light-hover: #dabfe9;--mantine-color-purple-light-color: var(--mantine-color-purple-6);--mantine-color-purple-outline: var(--mantine-color-purple-6);--mantine-color-purple-outline-hover: rgba(69, 28, 92, 0.05);}
+  </style>
+  <style
+    data-mantine-styles="classes"
+  >
+    @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
+  </style>
   <div
-    class="mantine-Group-root mantine-PlasmaHeader-root mantine-15aa8um"
+    class="_root_69e643 mantine-PlasmaHeader-root m-4081bf90 mantine-Group-root"
+    data-variant="primary"
+    style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: space-between; --group-wrap: nowrap;"
   >
     <div
-      class="mantine-Stack-root mantine-1178y6y"
+      class="m-6d731127 mantine-Stack-root"
+      style="--stack-gap: 0rem; --stack-align: stretch; --stack-justify: flex-start;"
     >
       <div
-        class="mantine-Breadcrumbs-root mantine-1ujbd2v"
+        class="m-8b3717df mantine-Breadcrumbs-root"
       >
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
+          class="mantine-focus-auto _root_a623ec m-849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root"
+          color="action.6"
+          data-underline="hover"
+          style="--text-color: var(--mantine-color-action-6); --text-fz: var(--mantine-font-size-sm);"
         >
           One
         </a>
         <div
-          class="mantine-Text-root mantine-PlasmaHeaderBreadcrumbs-separator mantine-Breadcrumbs-separator mantine-1y8084r"
+          class="_breadcrumbsSeparator_69e643 mantine-PlasmaHeader-breadcrumbsSeparator m-3b8f2208 mantine-Breadcrumbs-separator"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
+          class="mantine-focus-auto _root_a623ec m-849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root"
+          color="action.6"
+          data-underline="hover"
+          style="--text-color: var(--mantine-color-action-6); --text-fz: var(--mantine-font-size-sm);"
         >
           Two
         </a>
         <div
-          class="mantine-Text-root mantine-PlasmaHeaderBreadcrumbs-separator mantine-Breadcrumbs-separator mantine-1y8084r"
+          class="_breadcrumbsSeparator_69e643 mantine-PlasmaHeader-breadcrumbsSeparator m-3b8f2208 mantine-Breadcrumbs-separator"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
+          class="mantine-focus-auto _root_a623ec m-849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root"
+          color="action.6"
+          data-underline="hover"
+          style="--text-color: var(--mantine-color-action-6); --text-fz: var(--mantine-font-size-sm);"
         >
           Three
         </a>
       </div>
       <h1
-        class="mantine-Text-root mantine-Title-root mantine-PlasmaHeader-title mantine-1o7jx33"
+        class="_root_4eabcc _title_69e643 mantine-PlasmaHeader-title m-8a5d1357 mantine-Title-root"
+        data-order="1"
+        data-variant="primary"
+        style="--title-fw: var(--mantine-h1-font-weight); --title-lh: var(--mantine-h1-line-height); --title-fz: var(--mantine-h1-font-size);"
       >
         Title
       </h1>
-      <div
-        class="mantine-Text-root mantine-PlasmaHeader-description mantine-52dv7d"
+      <p
+        class="mantine-focus-auto _description_69e643 mantine-PlasmaHeader-description m-b6d8b162 mantine-Text-root"
+        data-size="md"
+        style="--text-fz: var(--mantine-font-size-md); --text-lh: var(--mantine-line-height-md);"
       />
     </div>
   </div>

package/dist/cjs/components/index.d.ts

@@ -8,7 +8,6 @@ export * from './header';
 export * from './inline-confirm';
 export * from './table';
 export * from './prompt';
-export * from './modal-wizard';
 export * from './button';
 export * from './action-icon';
 export * from './menu';

package/dist/cjs/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC"}

package/dist/cjs/components/index.js

@@ -13,7 +13,6 @@ _export_star._(require("./header"), exports);
 _export_star._(require("./inline-confirm"), exports);
 _export_star._(require("./table"), exports);
 _export_star._(require("./prompt"), exports);
-_export_star._(require("./modal-wizard"), exports);
 _export_star._(require("./button"), exports);
 _export_star._(require("./action-icon"), exports);
 _export_star._(require("./menu"), exports);

package/dist/cjs/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './blank-slate';\nexport * from './browser-preview';\nexport * from './code-editor';\nexport * from './collection';\nexport * from './date-range-picker';\nexport * from './sticky-footer';\nexport * from './header';\nexport * from './inline-confirm';\nexport * from './table';\nexport * from './prompt';\nexport * from './modal-wizard';\nexport * from './button';\nexport * from './action-icon';\nexport * from './menu';\nexport * from './copyToClipboard';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './blank-slate';\nexport * from './browser-preview';\nexport * from './code-editor';\nexport * from './collection';\nexport * from './date-range-picker';\nexport * from './sticky-footer';\nexport * from './header';\nexport * from './inline-confirm';\nexport * from './table';\nexport * from './prompt';\nexport * from './button';\nexport * from './action-icon';\nexport * from './menu';\nexport * from './copyToClipboard';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA"}

package/dist/cjs/components/inline-confirm/InlineConfirm.d.ts

@@ -1,12 +1,30 @@
-import { FunctionComponent, PropsWithChildren } from 'react';
-import { InlineConfirmButton } from './InlineConfirmButton';
-import { InlineConfirmMenuItem } from './InlineConfirmMenuItem';
+import { Factory, StylesApiProps } from '@mantine/core';
+import { ReactNode } from 'react';
 import { InlineConfirmPrompt } from './InlineConfirmPrompt';
-type InlineConfirmType = FunctionComponent<PropsWithChildren<unknown>> & {
-    Prompt: typeof InlineConfirmPrompt;
-    Button: typeof InlineConfirmButton;
-    MenuItem: typeof InlineConfirmMenuItem;
-};
-export declare const InlineConfirm: InlineConfirmType;
-export {};
+import { InlineConfirmTarget } from './InlineConfirmTarget';
+export type InlineConfirmStyleNames = 'root';
+export interface InlineConfirmProps extends StylesApiProps<InlineConfirmFactory> {
+    /**
+     * The content of the component. Should contain at least one `InlineConfirm.Target` and one `InlineConfirm.Prompt` with matching ids
+     */
+    children: ReactNode;
+}
+export type InlineConfirmFactory = Factory<{
+    props: InlineConfirmProps;
+    ref: never;
+    stylesNames: InlineConfirmStyleNames;
+    staticComponents: {
+        Prompt: typeof InlineConfirmPrompt;
+        Target: typeof InlineConfirmTarget;
+    };
+}>;
+export declare const InlineConfirm: import("@mantine/core").MantineComponent<{
+    props: InlineConfirmProps;
+    ref: never;
+    stylesNames: InlineConfirmStyleNames;
+    staticComponents: {
+        Prompt: typeof InlineConfirmPrompt;
+        Target: typeof InlineConfirmTarget;
+    };
+}>;
 //# sourceMappingURL=InlineConfirm.d.ts.map

package/dist/cjs/components/inline-confirm/InlineConfirm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineConfirm.d.ts","sourceRoot":"","sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,iBAAiB,EAAE,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAE7F,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,KAAK,iBAAiB,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,GAAG;IACrE,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,QAAQ,EAAE,OAAO,qBAAqB,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAc3B,CAAC"}
+{"version":3,"file":"InlineConfirm.d.ts","sourceRoot":"","sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,OAAO,EAAE,cAAc,EAAW,MAAM,eAAe,CAAC;AACzE,OAAO,EAAyB,SAAS,EAAW,MAAM,OAAO,CAAC;AAElE,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IAC5E;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC;IACvC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,GAAG,EAAE,KAAK,CAAC;IACX,WAAW,EAAE,uBAAuB,CAAC;IACrC,gBAAgB,EAAE;QACd,MAAM,EAAE,OAAO,mBAAmB,CAAC;QACnC,MAAM,EAAE,OAAO,mBAAmB,CAAC;KACtC,CAAC;CACL,CAAC,CAAC;AAIH,eAAO,MAAM,aAAa;WAXf,kBAAkB;SACpB,KAAK;iBACG,uBAAuB;sBAClB;QACd,MAAM,EAAE,0BAA0B,CAAC;QACnC,MAAM,EAAE,0BAA0B,CAAC;KACtC;EAoBH,CAAC"}

package/dist/cjs/components/inline-confirm/InlineConfirm.js

@@ -10,13 +10,14 @@ Object.defineProperty(exports, "InlineConfirm", {
 });
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _jsxruntime = require("react/jsx-runtime");
+var _core = require("@mantine/core");
 var _react = require("react");
-var _InlineConfirmButton = require("./InlineConfirmButton");
 var _InlineConfirmContext = require("./InlineConfirmContext");
-var _InlineConfirmMenuItem = require("./InlineConfirmMenuItem");
 var _InlineConfirmPrompt = require("./InlineConfirmPrompt");
-var InlineConfirm = function(param) {
-    var children = param.children;
+var _InlineConfirmTarget = require("./InlineConfirmTarget");
+var defaultProps = {};
+var InlineConfirm = (0, _core.factory)(function(_props) {
+    var children = (0, _core.useProps)("InlineConfirm", defaultProps, _props).children;
     var _useState = _sliced_to_array._((0, _react.useState)(null), 2), confirmingId = _useState[0], setConfirmingId = _useState[1];
     var convertedChildren = _react.Children.toArray(children);
     var prompt = convertedChildren.find(function(child) {
@@ -25,7 +26,7 @@ var InlineConfirm = function(param) {
     var clearConfirm = function() {
         return setConfirmingId(null);
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_InlineConfirmContext.InlineConfirmContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_InlineConfirmContext.InlineConfirmProvider, {
         value: {
             confirmingId: confirmingId,
             setConfirmingId: setConfirmingId,
@@ -33,9 +34,8 @@ var InlineConfirm = function(param) {
         },
         children: prompt !== null && prompt !== void 0 ? prompt : children
     });
-};
+});
 InlineConfirm.Prompt = _InlineConfirmPrompt.InlineConfirmPrompt;
-InlineConfirm.Button = _InlineConfirmButton.InlineConfirmButton;
-InlineConfirm.MenuItem = _InlineConfirmMenuItem.InlineConfirmMenuItem;
+InlineConfirm.Target = _InlineConfirmTarget.InlineConfirmTarget;
 
 //# sourceMappingURL=InlineConfirm.js.map

package/dist/cjs/components/inline-confirm/InlineConfirm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"sourcesContent":["import {Children, FunctionComponent, PropsWithChildren, ReactElement, useState} from 'react';\n\nimport {InlineConfirmButton} from './InlineConfirmButton';\nimport {InlineConfirmContext} from './InlineConfirmContext';\nimport {InlineConfirmMenuItem} from './InlineConfirmMenuItem';\nimport {InlineConfirmPrompt} from './InlineConfirmPrompt';\n\ntype InlineConfirmType = FunctionComponent<PropsWithChildren<unknown>> & {\n    Prompt: typeof InlineConfirmPrompt;\n    Button: typeof InlineConfirmButton;\n    MenuItem: typeof InlineConfirmMenuItem;\n};\n\nexport const InlineConfirm: InlineConfirmType = ({children}) => {\n    const [confirmingId, setConfirmingId] = useState<string | null>(null);\n\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const prompt = convertedChildren.find(\n        (child) => child.type === InlineConfirmPrompt && child.props.id === confirmingId,\n    );\n    const clearConfirm = () => setConfirmingId(null);\n\n    return (\n        <InlineConfirmContext.Provider value={{confirmingId, setConfirmingId, clearConfirm}}>\n            {prompt ?? children}\n        </InlineConfirmContext.Provider>\n    );\n};\n\nInlineConfirm.Prompt = InlineConfirmPrompt;\nInlineConfirm.Button = InlineConfirmButton;\nInlineConfirm.MenuItem = InlineConfirmMenuItem;\n"],"names":["InlineConfirm","children","useState","confirmingId","setConfirmingId","convertedChildren","Children","toArray","prompt","find","child","type","InlineConfirmPrompt","props","id","clearConfirm","InlineConfirmContext","Provider","value","Prompt","Button","InlineConfirmButton","MenuItem","InlineConfirmMenuItem"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;qBAbwE;mCAEnD;oCACC;qCACC;mCACF;AAQ3B,IAAMA,gBAAmC;QAAEC,iBAAAA;IAC9C,IAAwCC,+BAAAA,IAAAA,eAAQ,EAAgB,WAAzDC,eAAiCD,cAAnBE,kBAAmBF;IAExC,IAAMG,oBAAoBC,eAAQ,CAACC,OAAO,CAACN;IAC3C,IAAMO,SAASH,kBAAkBI,IAAI,CACjC,SAACC;eAAUA,MAAMC,IAAI,KAAKC,wCAAmB,IAAIF,MAAMG,KAAK,CAACC,EAAE,KAAKX;;IAExE,IAAMY,eAAe;eAAMX,gBAAgB;;IAE3C,qBACI,qBAACY,0CAAoB,CAACC,QAAQ;QAACC,OAAO;YAACf,cAAAA;YAAcC,iBAAAA;YAAiBW,cAAAA;QAAY;kBAC7EP,mBAAAA,oBAAAA,SAAUP;;AAGvB;AAEAD,cAAcmB,MAAM,GAAGP,wCAAmB;AAC1CZ,cAAcoB,MAAM,GAAGC,wCAAmB;AAC1CrB,cAAcsB,QAAQ,GAAGC,4CAAqB"}
+{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"sourcesContent":["import {factory, Factory, StylesApiProps, useProps} from '@mantine/core';\nimport {Children, ReactElement, ReactNode, useState} from 'react';\nimport {InlineConfirmProvider} from './InlineConfirmContext';\nimport {InlineConfirmPrompt} from './InlineConfirmPrompt';\n\nimport {InlineConfirmTarget} from './InlineConfirmTarget';\n\nexport type InlineConfirmStyleNames = 'root';\n\nexport interface InlineConfirmProps extends StylesApiProps<InlineConfirmFactory> {\n    /**\n     * The content of the component. Should contain at least one `InlineConfirm.Target` and one `InlineConfirm.Prompt` with matching ids\n     */\n    children: ReactNode;\n}\n\nexport type InlineConfirmFactory = Factory<{\n    props: InlineConfirmProps;\n    ref: never;\n    stylesNames: InlineConfirmStyleNames;\n    staticComponents: {\n        Prompt: typeof InlineConfirmPrompt;\n        Target: typeof InlineConfirmTarget;\n    };\n}>;\n\nconst defaultProps: Partial<InlineConfirmProps> = {};\n\nexport const InlineConfirm = factory<InlineConfirmFactory>((_props) => {\n    const {children} = useProps('InlineConfirm', defaultProps, _props);\n    const [confirmingId, setConfirmingId] = useState<string | null>(null);\n\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const prompt = convertedChildren.find(\n        (child) => child.type === InlineConfirmPrompt && child.props.id === confirmingId,\n    );\n    const clearConfirm = () => setConfirmingId(null);\n\n    return (\n        <InlineConfirmProvider value={{confirmingId, setConfirmingId, clearConfirm}}>\n            {prompt ?? children}\n        </InlineConfirmProvider>\n    );\n});\n\nInlineConfirm.Prompt = InlineConfirmPrompt;\nInlineConfirm.Target = InlineConfirmTarget;\n"],"names":["InlineConfirm","defaultProps","factory","_props","children","useProps","useState","confirmingId","setConfirmingId","convertedChildren","Children","toArray","prompt","find","child","type","InlineConfirmPrompt","props","id","clearConfirm","InlineConfirmProvider","value","Prompt","Target","InlineConfirmTarget"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;;oBA5B4C;qBACC;oCACtB;mCACF;mCAEA;AAqBlC,IAAMC,eAA4C,CAAC;AAE5C,IAAMD,gBAAgBE,IAAAA,aAAO,EAAuB,SAACC;IACxD,IAAM,AAACC,WAAYC,IAAAA,cAAQ,EAAC,iBAAiBJ,cAAcE,QAApDC;IACP,IAAwCE,+BAAAA,IAAAA,eAAQ,EAAgB,WAAzDC,eAAiCD,cAAnBE,kBAAmBF;IAExC,IAAMG,oBAAoBC,eAAQ,CAACC,OAAO,CAACP;IAC3C,IAAMQ,SAASH,kBAAkBI,IAAI,CACjC,SAACC;eAAUA,MAAMC,IAAI,KAAKC,wCAAmB,IAAIF,MAAMG,KAAK,CAACC,EAAE,KAAKX;;IAExE,IAAMY,eAAe;eAAMX,gBAAgB;;IAE3C,qBACI,qBAACY,2CAAqB;QAACC,OAAO;YAACd,cAAAA;YAAcC,iBAAAA;YAAiBW,cAAAA;QAAY;kBACrEP,mBAAAA,oBAAAA,SAAUR;;AAGvB;AAEAJ,cAAcsB,MAAM,GAAGN,wCAAmB;AAC1ChB,cAAcuB,MAAM,GAAGC,wCAAmB"}

package/dist/cjs/components/inline-confirm/InlineConfirmContext.d.ts

@@ -4,6 +4,9 @@ type InlineConfirmContextType = {
     setConfirmingId: (id: string) => void;
     clearConfirm: () => void;
 };
-export declare const InlineConfirmContext: import("react").Context<InlineConfirmContextType>;
+export declare const InlineConfirmProvider: ({ children, value }: {
+    value: InlineConfirmContextType;
+    children: import("react").ReactNode;
+}) => import("react").JSX.Element, useInlineConfirm: () => InlineConfirmContextType;
 export {};
 //# sourceMappingURL=InlineConfirmContext.d.ts.map

package/dist/cjs/components/inline-confirm/InlineConfirmContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineConfirmContext.d.ts","sourceRoot":"","sources":["../../../../src/components/inline-confirm/InlineConfirmContext.ts"],"names":[],"mappings":";AAEA,KAAK,wBAAwB,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,oBAAoB,mDAAuD,CAAC"}
+{"version":3,"file":"InlineConfirmContext.d.ts","sourceRoot":"","sources":["../../../../src/components/inline-confirm/InlineConfirmContext.ts"],"names":[],"mappings":";AAEA,KAAK,wBAAwB,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAO,qBAAqB;;;mCAAE,gBAAgB,gCAEpD,CAAC"}

package/dist/cjs/components/inline-confirm/InlineConfirmContext.js

@@ -2,13 +2,23 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "InlineConfirmContext", {
-    enumerable: true,
-    get: function() {
-        return InlineConfirmContext;
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    InlineConfirmProvider: function() {
+        return InlineConfirmProvider;
+    },
+    useInlineConfirm: function() {
+        return useInlineConfirm;
     }
 });
-var _react = require("react");
-var InlineConfirmContext = (0, _react.createContext)(null);
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _core = require("@mantine/core");
+var _createSafeContext = _sliced_to_array._((0, _core.createSafeContext)("InlineConfirm component was not found in tree"), 2);
+var InlineConfirmProvider = _createSafeContext[0], useInlineConfirm = _createSafeContext[1];
 
 //# sourceMappingURL=InlineConfirmContext.js.map

package/dist/cjs/components/inline-confirm/InlineConfirmContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmContext.ts"],"sourcesContent":["import {createContext} from 'react';\n\ntype InlineConfirmContextType = {\n    confirmingId: string;\n    setConfirmingId: (id: string) => void;\n    clearConfirm: () => void;\n};\n\nexport const InlineConfirmContext = createContext<InlineConfirmContextType | null>(null);\n"],"names":["InlineConfirmContext","createContext"],"mappings":";;;;+BAQaA;;;eAAAA;;;qBARe;AAQrB,IAAMA,uBAAuBC,IAAAA,oBAAa,EAAkC"}
+{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmContext.ts"],"sourcesContent":["import {createSafeContext} from '@mantine/core';\n\ntype InlineConfirmContextType = {\n    confirmingId: string;\n    setConfirmingId: (id: string) => void;\n    clearConfirm: () => void;\n};\n\nexport const [InlineConfirmProvider, useInlineConfirm] = createSafeContext<InlineConfirmContextType>(\n    'InlineConfirm component was not found in tree',\n);\n"],"names":["InlineConfirmProvider","useInlineConfirm","createSafeContext"],"mappings":";;;;;;;;;;;IAQcA,qBAAqB;eAArBA;;IAAuBC,gBAAgB;eAAhBA;;;;oBARL;IAQyBC,wCAAAA,IAAAA,uBAAiB,EACtE;AADG,IAAOF,wBAA2CE,uBAApBD,mBAAoBC"}

package/dist/cjs/components/inline-confirm/InlineConfirmPrompt.d.ts

@@ -1,11 +1,44 @@
-import { FunctionComponent, ReactNode } from 'react';
-interface InlineConfirmPromptProps {
+import { Factory, GroupProps } from '@mantine/core';
+import { ReactElement, ReactNode } from 'react';
+interface InlineConfirmPromptProps extends Omit<GroupProps, 'children'> {
+    /**
+     * Unique id to map the prompt to the target
+     */
     id: string;
-    label: ReactNode;
-    onConfirm: () => void;
-    confirmLabel?: ReactNode;
-    cancelLabel?: ReactNode;
+    /**
+     * Label element
+     *
+     * @default Are you sure?
+     */
+    label?: ReactNode;
+    /**
+     * Confirm button element
+     *
+     * @default <Button color="red">Delete</Button>
+     */
+    confirm?: ReactElement;
+    /**
+     * Cancel button element
+     *
+     * @default <Button variant="outline">Cancel</Button>
+     */
+    cancel?: ReactElement;
+    /**
+     * Function called when the confirm button is clicked
+     */
+    onConfirm?(): void;
+    /**
+     * Function called when the cancel button is clicked
+     */
+    onCancel?(): void;
 }
-export declare const InlineConfirmPrompt: FunctionComponent<InlineConfirmPromptProps>;
+export type InlineConfirmPromptFactory = Factory<{
+    props: InlineConfirmPromptProps;
+    ref: HTMLDivElement;
+}>;
+export declare const InlineConfirmPrompt: import("@mantine/core").MantineComponent<{
+    props: InlineConfirmPromptProps;
+    ref: HTMLDivElement;
+}>;
 export {};
 //# sourceMappingURL=InlineConfirmPrompt.d.ts.map

package/dist/cjs/components/inline-confirm/InlineConfirmPrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineConfirmPrompt.d.ts","sourceRoot":"","sources":["../../../../src/components/inline-confirm/InlineConfirmPrompt.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAK9D,UAAU,wBAAwB;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,wBAAwB,CAkC3E,CAAC"}
+{"version":3,"file":"InlineConfirmPrompt.d.ts","sourceRoot":"","sources":["../../../../src/components/inline-confirm/InlineConfirmPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAkB,UAAU,EAAsB,MAAM,eAAe,CAAC;AACvF,OAAO,EAAe,YAAY,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAKvE,UAAU,wBAAyB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACnE;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;;OAIG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,IAAI,IAAI,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,IAAI,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC;IAC7C,KAAK,EAAE,wBAAwB,CAAC;IAChC,GAAG,EAAE,cAAc,CAAC;CACvB,CAAC,CAAC;AAUH,eAAO,MAAM,mBAAmB;WAZrB,wBAAwB;SAC1B,cAAc;EAuDrB,CAAC"}

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

@@ -8,43 +8,73 @@ Object.defineProperty(exports, "InlineConfirmPrompt", {
         return InlineConfirmPrompt;
     }
 });
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _jsxruntime = require("react/jsx-runtime");
 var _core = require("@mantine/core");
 var _react = require("react");
-var _button = require("../button");
-var _useInlineConfirm = require("./useInlineConfirm");
-var InlineConfirmPrompt = function(param) {
-    var id = param.id, label = param.label, _param_confirmLabel = param.confirmLabel, confirmLabel = _param_confirmLabel === void 0 ? "Delete" : _param_confirmLabel, _param_cancelLabel = param.cancelLabel, cancelLabel = _param_cancelLabel === void 0 ? "Cancel" : _param_cancelLabel, onConfirm = param.onConfirm;
-    var _useInlineConfirm1 = (0, _useInlineConfirm.useInlineConfirm)(), confirmingId = _useInlineConfirm1.confirmingId, clearConfirm = _useInlineConfirm1.clearConfirm;
-    var onClickConfirm = function() {
-        onConfirm();
-        clearConfirm();
-    };
+var _InlineConfirmContext = require("./InlineConfirmContext");
+var _Button = require("../button/Button");
+var defaultProps = {
+    label: "Are you sure?",
+    confirm: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button, {
+        color: "red",
+        children: "Delete"
+    }),
+    cancel: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button, {
+        variant: "outline",
+        children: "Cancel"
+    }),
+    gap: "xs",
+    wrap: "nowrap"
+};
+var InlineConfirmPrompt = (0, _core.factory)(function(props, ref) {
+    var _useProps = (0, _core.useProps)("InlineConfirmPrompt", defaultProps, props), id = _useProps.id, label = _useProps.label, confirm = _useProps.confirm, cancel = _useProps.cancel, onConfirm = _useProps.onConfirm, onCancel = _useProps.onCancel, others = _object_without_properties._(_useProps, [
+        "id",
+        "label",
+        "confirm",
+        "cancel",
+        "onConfirm",
+        "onCancel"
+    ]);
+    var _useInlineConfirm = (0, _InlineConfirmContext.useInlineConfirm)(), confirmingId = _useInlineConfirm.confirmingId, clearConfirm = _useInlineConfirm.clearConfirm;
+    if (!(0, _core.isElement)(cancel) || !(0, _core.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");
+    }
+    var cancelEl = /*#__PURE__*/ (0, _react.cloneElement)(cancel, {
+        onClick: function() {
+            var _cancel_props_onClick, _cancel_props, _onCancel;
+            (_cancel_props_onClick = (_cancel_props = cancel.props).onClick) === null || _cancel_props_onClick === void 0 ? void 0 : _cancel_props_onClick.call(_cancel_props);
+            (_onCancel = onCancel) === null || _onCancel === void 0 ? void 0 : _onCancel();
+            clearConfirm();
+        }
+    });
+    var confirmEl = /*#__PURE__*/ (0, _react.cloneElement)(confirm, {
+        onClick: function() {
+            var _confirm_props_onClick, _confirm_props, _onConfirm;
+            (_confirm_props_onClick = (_confirm_props = confirm.props).onClick) === null || _confirm_props_onClick === void 0 ? void 0 : _confirm_props_onClick.call(_confirm_props);
+            (_onConfirm = onConfirm) === null || _onConfirm === void 0 ? void 0 : _onConfirm();
+            clearConfirm();
+        }
+    });
     (0, _react.useEffect)(function() {
         if (confirmingId !== id) {
             clearConfirm();
         }
     }, []);
     if (confirmingId === id) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
-            spacing: "xs",
-            noWrap: true,
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, _object_spread_props._(_object_spread._({
+            ref: ref
+        }, others), {
             children: [
                 label,
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {
-                    onClick: onClickConfirm,
-                    color: "red",
-                    children: confirmLabel
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {
-                    onClick: clearConfirm,
-                    variant: "outline",
-                    children: cancelLabel
-                })
+                confirmEl,
+                cancelEl
             ]
-        });
+        }));
     }
     return null;
-};
+});
 
 //# sourceMappingURL=InlineConfirmPrompt.js.map

package/dist/cjs/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":["InlineConfirmPrompt","id","label","confirmLabel","cancelLabel","onConfirm","useInlineConfirm","confirmingId","clearConfirm","onClickConfirm","useEffect","Group","spacing","noWrap","Button","onClick","color","variant"],"mappings":";;;;+BAcaA;;;eAAAA;;;;oBAdO;qBACkC;sBAEjC;gCACU;AAUxB,IAAMA,sBAAmE;QAC5EC,WAAAA,IACAC,cAAAA,mCACAC,cAAAA,gDAAe,2DACfC,aAAAA,8CAAc,+BACdC,kBAAAA;IAEA,IAAqCC,qBAAAA,IAAAA,kCAAgB,KAA9CC,eAA8BD,mBAA9BC,cAAcC,eAAgBF,mBAAhBE;IAErB,IAAMC,iBAAiB;QACnBJ;QACAG;IACJ;IAEAE,IAAAA,gBAAS,EAAC;QACN,IAAIH,iBAAiBN,IAAI;YACrBO;QACJ;IACJ,GAAG,EAAE;IAEL,IAAID,iBAAiBN,IAAI;QACrB,qBACI,sBAACU,WAAK;YAACC,SAAQ;YAAKC,MAAM;;gBACrBX;8BACD,qBAACY,cAAM;oBAACC,SAASN;oBAAgBO,OAAM;8BAClCb;;8BAEL,qBAACW,cAAM;oBAACC,SAASP;oBAAcS,SAAQ;8BAClCb;;;;IAIjB;IACA,OAAO;AACX"}
+{"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":["InlineConfirmPrompt","defaultProps","label","confirm","Button","color","cancel","variant","gap","wrap","factory","props","ref","useProps","id","onConfirm","onCancel","others","useInlineConfirm","confirmingId","clearConfirm","isElement","Error","cancelEl","cloneElement","onClick","confirmEl","useEffect","Group"],"mappings":";;;;+BAqDaA;;;eAAAA;;;;;;;oBArD0D;qBACR;oCAEhC;sBACV;AAyCrB,IAAMC,eAAkD;IACpDC,OAAO;IACPC,uBAAS,qBAACC,cAAM;QAACC,OAAM;kBAAM;;IAC7BC,sBAAQ,qBAACF,cAAM;QAACG,SAAQ;kBAAU;;IAClCC,KAAK;IACLC,MAAM;AACV;AAEO,IAAMT,sBAAsBU,IAAAA,aAAO,EAA6B,SAACC,OAAOC;IAC3E,IAAqEC,YAAAA,IAAAA,cAAQ,EACzE,uBACAZ,cACAU,QAHGG,KAA8DD,UAA9DC,IAAIZ,QAA0DW,UAA1DX,OAAOC,UAAmDU,UAAnDV,SAASG,SAA0CO,UAA1CP,QAAQS,YAAkCF,UAAlCE,WAAWC,WAAuBH,UAAvBG,UAAaC,sCAAUJ;QAA9DC;QAAIZ;QAAOC;QAASG;QAAQS;QAAWC;;IAK9C,IAAqCE,oBAAAA,IAAAA,sCAAgB,KAA9CC,eAA8BD,kBAA9BC,cAAcC,eAAgBF,kBAAhBE;IAErB,IAAI,CAACC,IAAAA,eAAS,EAACf,WAAW,CAACe,IAAAA,eAAS,EAAClB,UAAU;QAC3C,MAAM,IAAImB,MACN;IAER;IACA,IAAMC,yBAAWC,IAAAA,mBAAY,EAAClB,QAAQ;QAClCmB,SAAS;gBACLnB,uBAAAA,eACAU;aADAV,wBAAAA,CAAAA,gBAAAA,OAAOK,KAAK,EAACc,OAAO,cAApBnB,4CAAAA,2BAAAA;aACAU,YAAAA,sBAAAA,gCAAAA;YACAI;QACJ;IACJ;IACA,IAAMM,0BAAYF,IAAAA,mBAAY,EAACrB,SAAS;QACpCsB,SAAS;gBACLtB,wBAAAA,gBACAY;aADAZ,yBAAAA,CAAAA,iBAAAA,QAAQQ,KAAK,EAACc,OAAO,cAArBtB,6CAAAA,4BAAAA;aACAY,aAAAA,uBAAAA,iCAAAA;YACAK;QACJ;IACJ;IAEAO,IAAAA,gBAAS,EAAC;QACN,IAAIR,iBAAiBL,IAAI;YACrBM;QACJ;IACJ,GAAG,EAAE;IAEL,IAAID,iBAAiBL,IAAI;QACrB,qBACI,sBAACc,WAAK;YAAChB,KAAKA;WAASK;;gBAChBf;gBACAwB;gBACAH;;;IAGb;IACA,OAAO;AACX"}