@muraldevkit/ui-toolkit 4.71.0-dev-vNJi.1 → 4.72.0

package/dist/esm/contexts/MrlAnalyticsContext/MrlAnalyticsContext.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { createContext } from 'react';
+import { noop } from '../../utils/noop/index.js';
+
+/** Default is a no-op: components emit nothing until a consumer provides `track`. */
+var initialContext = {
+  track: noop
+};
+var MrlAnalyticsContext = /*#__PURE__*/createContext(initialContext);
+/**
+ * Injects the app's analytics transport into the toolkit. Wrap the app once;
+ * every instrumented Mrl* component below emits through the provided `track`.
+ *
+ * @param props - the provider props
+ * @param props.track - the transport that receives each MrlAnalyticsEvent (default no-op)
+ * @param props.children - the subtree that can emit analytics
+ * @returns the provider wrapping `children`
+ */
+var MrlAnalyticsProvider = _ref => {
+  var track = _ref.track,
+    children = _ref.children;
+  // Latest-ref pattern: the app's transport lives in a ref, so a new `track`
+  // identity never invalidates the context value.
+  var trackRef = React.useRef(track !== null && track !== void 0 ? track : noop);
+  React.useLayoutEffect(() => {
+    trackRef.current = track !== null && track !== void 0 ? track : noop;
+  });
+
+  // Created once; identity never changes regardless of what the app passes.
+  var value = React.useMemo(() => ({
+    track: event => trackRef.current(event)
+  }), []);
+  return /*#__PURE__*/React.createElement(MrlAnalyticsContext.Provider, {
+    value: value
+  }, children);
+};
+
+export { MrlAnalyticsContext, MrlAnalyticsProvider };
+//# sourceMappingURL=MrlAnalyticsContext.js.map

package/dist/esm/contexts/MrlAnalyticsContext/MrlAnalyticsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlAnalyticsContext.js","sources":["../../../../src/contexts/MrlAnalyticsContext/MrlAnalyticsContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createContext } from 'react';\nimport { noop } from '../../utils';\nimport { MrlTrack } from './types';\n\nexport interface MrlAnalyticsContextProps {\n\ttrack: MrlTrack;\n}\n\n/** Default is a no-op: components emit nothing until a consumer provides `track`. */\nconst initialContext: MrlAnalyticsContextProps = {\n\ttrack: noop\n};\n\nexport const MrlAnalyticsContext = createContext<MrlAnalyticsContextProps>(initialContext);\n\nexport interface MrlAnalyticsProviderProps {\n\t/**\n\t * The transport the app injects. Receives a MrlAnalyticsEvent and forwards it\n\t * wherever the app tracks (in murally: a wrapper over trackWithSegment).\n\t * Omit it and the toolkit stays silent — safe for consumers with no analytics.\n\t */\n\ttrack?: MrlTrack;\n\tchildren: React.ReactNode;\n}\n\n/**\n * Injects the app's analytics transport into the toolkit. Wrap the app once;\n * every instrumented Mrl* component below emits through the provided `track`.\n *\n * @param props - the provider props\n * @param props.track - the transport that receives each MrlAnalyticsEvent (default no-op)\n * @param props.children - the subtree that can emit analytics\n * @returns the provider wrapping `children`\n */\nexport const MrlAnalyticsProvider = ({ track, children }: MrlAnalyticsProviderProps) => {\n\t// Latest-ref pattern: the app's transport lives in a ref, so a new `track`\n\t// identity never invalidates the context value.\n\tconst trackRef = React.useRef<MrlTrack>(track ?? noop);\n\n\tReact.useLayoutEffect(() => {\n\t\ttrackRef.current = track ?? noop;\n\t});\n\n\t// Created once; identity never changes regardless of what the app passes.\n\tconst value = React.useMemo<MrlAnalyticsContextProps>(\n\t\t() => ({ track: (event) => trackRef.current(event) }),\n\t\t[]\n\t);\n\n\treturn <MrlAnalyticsContext.Provider value={value}>{children}</MrlAnalyticsContext.Provider>;\n};\n"],"names":["initialContext","track","noop","MrlAnalyticsContext","createContext","MrlAnalyticsProvider","_ref","children","trackRef","React","useRef","useLayoutEffect","current","value","useMemo","event","createElement","Provider"],"mappings":";;;;AASA;AACA,IAAMA,cAAwC,GAAG;AAChDC,EAAAA,KAAK,EAAEC;AACR,CAAC;IAEYC,mBAAmB,gBAAGC,aAAa,CAA2BJ,cAAc;AAYzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMK,oBAAoB,GAAGC,IAAA,IAAoD;AAAA,EAAA,IAAjDL,KAAK,GAAAK,IAAA,CAALL,KAAK;IAAEM,QAAQ,GAAAD,IAAA,CAARC,QAAQ;AACrD;AACA;AACA,EAAA,IAAMC,QAAQ,GAAGC,KAAK,CAACC,MAAM,CAAWT,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,MAAA,GAALA,KAAK,GAAIC,IAAI,CAAC;EAEtDO,KAAK,CAACE,eAAe,CAAC,MAAM;IAC3BH,QAAQ,CAACI,OAAO,GAAGX,KAAK,aAALA,KAAK,KAAA,MAAA,GAALA,KAAK,GAAIC,IAAI;AACjC,EAAA,CAAC,CAAC;;AAEF;AACA,EAAA,IAAMW,KAAK,GAAGJ,KAAK,CAACK,OAAO,CAC1B,OAAO;AAAEb,IAAAA,KAAK,EAAGc,KAAK,IAAKP,QAAQ,CAACI,OAAO,CAACG,KAAK;GAAG,CAAC,EACrD,EACD,CAAC;AAED,EAAA,oBAAON,KAAA,CAAAO,aAAA,CAACb,mBAAmB,CAACc,QAAQ,EAAA;AAACJ,IAAAA,KAAK,EAAEA;AAAM,GAAA,EAAEN,QAAuC,CAAC;AAC7F;;;;"}

package/dist/esm/hooks/useMrlAnalytics/useMrlAnalytics.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { TOOLKIT_VERSION } from '../../version.js';
+import { MrlAnalyticsContext } from '../../contexts/MrlAnalyticsContext/MrlAnalyticsContext.js';
+
+/**
+ * Raw accessor for the analytics context.
+ *
+ * @returns the injected `track` transport (default no-op)
+ */
+var useMrlAnalytics = () => React.useContext(MrlAnalyticsContext);
+/**
+ * Component-facing helper. Binds component identity + trackingId once, then
+ * `emit({ action })` per interaction. No-ops entirely when trackingId is absent,
+ * so instrumentation is opt-in and attributable.
+ *
+ * @param component - the emitting component's name, e.g. 'MrlButton'
+ * @param trackingId - consumer-supplied, non-PII id; undefined disables emission
+ * @returns an `emit` callback that fires a single interaction per call
+ */
+var useMrlTrackInteraction = (component, trackingId) => {
+  var _useMrlAnalytics = useMrlAnalytics(),
+    track = _useMrlAnalytics.track;
+  return React.useCallback(_ref => {
+    var action = _ref.action,
+      variant = _ref.variant,
+      metadata = _ref.metadata;
+    // opt-in: no id → no event (volume + PII guard)
+    if (!trackingId) return;
+    try {
+      track({
+        action,
+        component,
+        metadata,
+        toolkitVersion: TOOLKIT_VERSION,
+        trackingId,
+        variant
+      });
+    } catch (e) {
+      return;
+    }
+  }, [track, component, trackingId]);
+};
+
+export { useMrlAnalytics, useMrlTrackInteraction };
+//# sourceMappingURL=useMrlAnalytics.js.map

package/dist/esm/hooks/useMrlAnalytics/useMrlAnalytics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMrlAnalytics.js","sources":["../../../../src/hooks/useMrlAnalytics/useMrlAnalytics.ts"],"sourcesContent":["import * as React from 'react';\nimport { MrlAnalyticsContext } from '../../contexts/MrlAnalyticsContext';\nimport { MrlAnalyticsEvent, MrlTrack } from '../../contexts/MrlAnalyticsContext/types';\nimport { TOOLKIT_VERSION } from '../../version';\n\n/**\n * Raw accessor for the analytics context.\n *\n * @returns the injected `track` transport (default no-op)\n */\nexport const useMrlAnalytics = (): { track: MrlTrack } => React.useContext(MrlAnalyticsContext);\n\ntype EmitArgs = Pick<MrlAnalyticsEvent, 'action' | 'variant' | 'metadata'>;\n\n/**\n * Component-facing helper. Binds component identity + trackingId once, then\n * `emit({ action })` per interaction. No-ops entirely when trackingId is absent,\n * so instrumentation is opt-in and attributable.\n *\n * @param component - the emitting component's name, e.g. 'MrlButton'\n * @param trackingId - consumer-supplied, non-PII id; undefined disables emission\n * @returns an `emit` callback that fires a single interaction per call\n */\nexport const useMrlTrackInteraction = (component: string, trackingId?: string) => {\n\tconst { track } = useMrlAnalytics();\n\n\treturn React.useCallback(\n\t\t({ action, variant, metadata }: EmitArgs) => {\n\t\t\t// opt-in: no id → no event (volume + PII guard)\n\t\t\tif (!trackingId) return;\n\t\t\ttry {\n\t\t\t\ttrack({\n\t\t\t\t\taction,\n\t\t\t\t\tcomponent,\n\t\t\t\t\tmetadata,\n\t\t\t\t\ttoolkitVersion: TOOLKIT_VERSION,\n\t\t\t\t\ttrackingId,\n\t\t\t\t\tvariant\n\t\t\t\t});\n\t\t\t} catch (e) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t},\n\t\t[track, component, trackingId]\n\t);\n};\n"],"names":["useMrlAnalytics","React","useContext","MrlAnalyticsContext","useMrlTrackInteraction","component","trackingId","_useMrlAnalytics","track","useCallback","_ref","action","variant","metadata","toolkitVersion","TOOLKIT_VERSION","e"],"mappings":";;;;AAKA;AACA;AACA;AACA;AACA;AACO,IAAMA,eAAe,GAAGA,MAA2BC,KAAK,CAACC,UAAU,CAACC,mBAAmB;AAI9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACaC,sBAAsB,GAAGA,CAACC,SAAiB,EAAEC,UAAmB,KAAK;AACjF,EAAA,IAAAC,gBAAA,GAAkBP,eAAe,EAAE;IAA3BQ,KAAK,GAAAD,gBAAA,CAALC,KAAK;AAEb,EAAA,OAAOP,KAAK,CAACQ,WAAW,CACvBC,IAAA,IAA6C;AAAA,IAAA,IAA1CC,MAAM,GAAAD,IAAA,CAANC,MAAM;MAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;MAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;AAC3B;IACA,IAAI,CAACP,UAAU,EAAE;IACjB,IAAI;AACHE,MAAAA,KAAK,CAAC;QACLG,MAAM;QACNN,SAAS;QACTQ,QAAQ;AACRC,QAAAA,cAAc,EAAEC,eAAe;QAC/BT,UAAU;AACVM,QAAAA;AACD,OAAC,CAAC;IACH,CAAC,CAAC,OAAOI,CAAC,EAAE;AACX,MAAA;AACD,IAAA;EACD,CAAC,EACD,CAACR,KAAK,EAAEH,SAAS,EAAEC,UAAU,CAC9B,CAAC;AACF;;;;"}

package/dist/esm/index.js

@@ -5,6 +5,7 @@ export { MRL_PORTAL_ID, MrlPortal } from './components/portal/MrlPortal.js';
 export { MRL_PROCESSING_BUTTON_ACTIONS, copyToClipboard } from './components/button/MrlProcessingButton/actions.js';
 export { MULTI_CREATABLE_SELECT_CLASS_NAME_PREFIX, MULTI_CREATABLE_SELECT_MENU_LIST_CLASS_NAME, MrlMultiCreatableSelect } from './components/form/select/MrlMultiCreatableSelect/MrlMultiCreatableSelect.js';
 export { MULTI_SELECT_CLASS_NAME_PREFIX, MULTI_SELECT_MENU_LIST_CLASS_NAME, MrlMultiSelect } from './components/form/select/MrlMultiSelect/MrlMultiSelect.js';
+export { MrlAnalyticsContext, MrlAnalyticsProvider } from './contexts/MrlAnalyticsContext/MrlAnalyticsContext.js';
 export { MrlAnimatedIconButton } from './components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.js';
 export { MrlAvatar, defaultAvatarValues } from './components/avatar/MrlAvatar/MrlAvatar.js';
 export { MrlAvatarButton } from './components/avatar/MrlAvatarButton/MrlAvatarButton.js';
@@ -141,5 +142,6 @@ export { useBreakpoint } from './hooks/useBreakpoint/index.js';
 export { useCoordinate } from './hooks/useCoordinate/index.js';
 export { useElementDimensions } from './hooks/useElementDimensions/index.js';
 export { useHasFocusableDescendant } from './hooks/useHasFocusableDescendant/index.js';
+export { useMrlAnalytics, useMrlTrackInteraction } from './hooks/useMrlAnalytics/useMrlAnalytics.js';
 export { useScrollbarInfo } from './hooks/useScrollbarInfo/index.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/version.js

@@ -0,0 +1,4 @@
+var TOOLKIT_VERSION = "4.72.0";
+
+export { TOOLKIT_VERSION };
+//# sourceMappingURL=version.js.map

package/dist/esm/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","sources":["../../src/version.ts"],"sourcesContent":["export const TOOLKIT_VERSION = \"4.72.0\";"],"names":["TOOLKIT_VERSION"],"mappings":"AAAO,IAAMA,eAAe,GAAG;;;;"}

package/dist/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useCoordinate';
+export * from './useMrlAnalytics';
 export * from './useBreakpoint';
 export * from './useElementDimensions';
 export * from './useHasFocusableDescendant';

package/dist/hooks/useMrlAnalytics/index.d.ts

@@ -0,0 +1 @@
+export * from './useMrlAnalytics';

package/dist/hooks/useMrlAnalytics/useMrlAnalytics.d.ts

@@ -0,0 +1,21 @@
+import { MrlAnalyticsEvent, MrlTrack } from '../../contexts/MrlAnalyticsContext/types';
+/**
+ * Raw accessor for the analytics context.
+ *
+ * @returns the injected `track` transport (default no-op)
+ */
+export declare const useMrlAnalytics: () => {
+    track: MrlTrack;
+};
+type EmitArgs = Pick<MrlAnalyticsEvent, 'action' | 'variant' | 'metadata'>;
+/**
+ * Component-facing helper. Binds component identity + trackingId once, then
+ * `emit({ action })` per interaction. No-ops entirely when trackingId is absent,
+ * so instrumentation is opt-in and attributable.
+ *
+ * @param component - the emitting component's name, e.g. 'MrlButton'
+ * @param trackingId - consumer-supplied, non-PII id; undefined disables emission
+ * @returns an `emit` callback that fires a single interaction per call
+ */
+export declare const useMrlTrackInteraction: (component: string, trackingId?: string) => ({ action, variant, metadata }: EmitArgs) => void;
+export {};

package/dist/hooks/useMrlAnalytics/useMrlAnalyticsDemo.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Demo for the useMrlAnalytics hooks. Injects a `track` transport that simply
+ * records the last emitted event so you can see the transport-agnostic
+ * `MrlAnalyticsEvent` the toolkit produces.
+ *
+ * @returns JSX.Element
+ */
+export declare const UseMrlAnalyticsDemo: () => JSX.Element;

package/dist/styles/MrlTooltipContent/variables.scss

@@ -10,8 +10,4 @@
 	--mrl-tooltip-arrow-spacing: var(--mrl-spacing-06);
 	--mrl-tooltip-arrow-display-left-right: none;
 	--mrl-tooltip-trigger-offset: var(--mrl-spacing-03);
-	&--inverse {
-		--mrl-tooltip-background-color: rgba(var(--mrl-gray-80), 1);
-		--mrl-tooltip-text-color: var(--mrl-color-text-inverse);
-	}
 }

package/dist/styles.css

@@ -2,7 +2,7 @@
 .MrlAvatar-content--E7qX_{border:var(--mrl-stroke-02) solid rgba(0,0,0,0);border-radius:var(--mrl-radii-03);display:block;font-size:var(--mrl-font-size-04);font-weight:var(--mrl-font-weight-04);height:100%;line-height:2.875rem;max-width:100%;overflow:hidden;text-align:center;width:100%}.MrlAvatar-content--E7qX_ .MrlSvgContainer{display:block;height:auto;max-width:100%;width:100%}.MrlAvatar--e8VFH{border-radius:var(--mrl-radii-03);box-shadow:0 0 1px 1px rgba(0,0,0,.04) inset;box-sizing:border-box;display:block;height:var(--mrl-spacing-10);position:relative;width:var(--mrl-spacing-10)}.MrlAvatar--xsmall--jn6uR{height:var(--mrl-spacing-07);width:var(--mrl-spacing-07)}.MrlAvatar--xsmall--jn6uR .MrlAvatar-content--E7qX_{font-size:var(--mrl-font-size-02);line-height:1.375rem}.MrlAvatar--small--DdBZ7{height:var(--mrl-spacing-08);width:var(--mrl-spacing-08)}.MrlAvatar--small--DdBZ7 .MrlAvatar-content--E7qX_{font-size:var(--mrl-font-size-02);line-height:1.875rem}.MrlAvatar--large--eT7KW{border-radius:var(--mrl-radii-06);height:var(--mrl-spacing-13);width:var(--mrl-spacing-13)}.MrlAvatar--large--eT7KW .MrlAvatar-content--E7qX_{border-radius:var(--mrl-radii-06);font-size:var(--mrl-font-size-07);line-height:5.875rem}.MrlAvatar-image--lWg5A{display:block;height:auto;max-width:100%;width:100%}.MrlAvatar-icon-container--xUwiS{border-radius:1rem;bottom:-0.1875rem;color:var(--mrl-color-background);position:absolute}.MrlAvatar-icon-container--xUwiS .MrlAvatar-icon--tfC5v{display:block;left:50%;position:absolute}.MrlAvatar-icon-container--xUwiS .MrlAvatar-icon--tfC5v .mrl-svg{margin:0}.MrlAvatar-icon-container--small--_IFIA{height:1rem;right:-0.1875rem;width:1rem}.MrlAvatar-icon-container--small--_IFIA .MrlAvatar-icon--tfC5v{height:1rem;margin-left:-0.3125rem;top:0;width:.625rem}.MrlAvatar-icon-container--xsmall--oIGsd{border-radius:.75rem;height:.75rem;right:-0.125rem;width:.75rem}.MrlAvatar-icon-container--xsmall--oIGsd .MrlAvatar-icon--tfC5v{height:.5rem;margin-left:-0.225rem;top:-0.1rem;width:.5rem}
 @keyframes spin--uLQTd{from{transform:rotate(0)}to{transform:rotate(360deg)}}.MrlSpinner-container--BbU6W{height:var(--mrl-spacing-06);overflow:hidden;position:relative;width:var(--mrl-spacing-06)}.MrlSpinner-container--xsmall--vY91J{align-items:center;display:flex;height:var(--mrl-spacing-05);justify-content:center;width:var(--mrl-spacing-05)}.MrlSpinner-container--medium--fCwTF{height:var(--mrl-spacing-07);width:var(--mrl-spacing-07)}.MrlSpinner-container--large--UE9f9{height:var(--mrl-spacing-09);width:var(--mrl-spacing-09)}.MrlSpinner-container--large--UE9f9.MrlSpinner-container--logo--BrgYx{height:93px}.MrlSpinner--PDiRC{align-items:center;animation:500ms spin--uLQTd var(--mrl-timing-m3) infinite;display:flex;height:var(--mrl-spacing-06);justify-content:center;width:var(--mrl-spacing-06)}.MrlSpinner--PDiRC::before{background:conic-gradient(from 11.31deg at 50% 50%, rgba(var(--mrl-blue-70), 0) 0deg, rgba(var(--mrl-blue-70), 0) 0.26deg, rgba(var(--mrl-blue-70), 0) 60deg, rgba(var(--mrl-blue-70), 0.26) 114.38deg, rgba(var(--mrl-blue-70), 1) 217.5deg, rgba(var(--mrl-blue-70), 1) 360deg);border-radius:6px;clip-path:path("M10 1c0-.552-.449-1.005-.999-.95C3.947.55 0 4.813 0 10c0 5.523 4.477 10 10 10s10-4.477 10-10a9.987 9.987 0 0 0-4.152-8.112c-.452-.327-1.073-.154-1.347.332-.268.477-.099 1.077.337 1.408a8 8 0 1 1-5.836-1.566C9.55 1.993 10 1.552 10 1Z");content:"";display:block;height:20px;width:20px}.MrlSpinner--xsmall--lKxwJ{height:var(--mrl-spacing-06);width:var(--mrl-spacing-06)}.MrlSpinner--xsmall--lKxwJ::before{transform:scale(0.6)}.MrlSpinner--medium--TkBU7{height:var(--mrl-spacing-07);width:var(--mrl-spacing-07)}.MrlSpinner--medium--TkBU7::before{transform:scale(1.2)}.MrlSpinner--large--m3U6M{height:var(--mrl-spacing-09);width:var(--mrl-spacing-09)}.MrlSpinner--large--m3U6M::before{transform:scale(2)}.MrlSpinner--inverse--SsPk0::before{background:conic-gradient(from 11.31deg at 50% 50%, rgba(var(--mrl-white), 0) 0deg, rgba(var(--mrl-white), 0) 0.26deg, rgba(var(--mrl-white), 0) 60deg, rgba(var(--mrl-white), 0.26) 114.38deg, rgba(var(--mrl-white), 1) 217.5deg, rgba(var(--mrl-white), 1) 360deg)}.MrlSpinner-container--logo--BrgYx{text-align:center}.MrlSpinner-container--logo--BrgYx.MrlSpinner-container--BbU6W{display:block;min-height:calc(var(--mrl-spacing-12) + var(--mrl-spacing-02));width:99px}.MrlSpinner-container--logo--BrgYx .MrlSpinner--PDiRC{margin:0 auto}.MrlSpinnerLogo--DZqlx{display:block;margin-top:var(--mrl-spacing-07);width:99px}@media(prefers-reduced-motion){.MrlSpinner--PDiRC{animation:1.5s spin--uLQTd linear 4}}
 .mrl-visually-hidden{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
-.mrl-tooltip-content{--mrl-tooltip-background-color: var(--mrl-color-background-inverse);--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);--mrl-tooltip-border-radius: var(--mrl-border-radius-content-large);--mrl-tooltip-font-size: var(--mrl-type-size-text-xsmall);--mrl-tooltip-line-height: var(--mrl-type-line-height-text-xsmall);--mrl-tooltip-padding: var(--mrl-spacing-02) var(--mrl-spacing-03);--mrl-tooltip-arrow-size: 8px;--mrl-tooltip-arrow-border-radius: 1px;--mrl-tooltip-arrow-spacing: var(--mrl-spacing-06);--mrl-tooltip-arrow-display-left-right: none;--mrl-tooltip-trigger-offset: var(--mrl-spacing-03)}.mrl-tooltip-content--inverse{--mrl-tooltip-background-color: rgba(var(--mrl-gray-80), 1);--mrl-tooltip-text-color: var(--mrl-color-text-inverse)}.mrl-tooltip-content{background:var(--mrl-tooltip-background-color);border-radius:var(--mrl-tooltip-border-radius);color:var(--mrl-tooltip-text-color);cursor:default;display:flex;font-family:var(--mrl-body-font);font-size:var(--mrl-tooltip-font-size);font-weight:var(--mrl-type-weight-title-secondary);gap:var(--mrl-spacing-02);line-height:var(--mrl-tooltip-line-height);max-width:calc(var(--mrl-spacing-09)*7);overflow-wrap:break-word;padding:var(--mrl-tooltip-padding);position:absolute;transition-property:opacity;white-space:normal;width:max-content;z-index:900}.mrl-tooltip-content.has-custom-render{padding-right:var(--mrl-spacing-02)}.mrl-tooltip-content__hover{background:rgba(0,0,0,0);position:absolute}.mrl-tooltip-content::after{background:rgba(0,0,0,0);border-bottom:9.4339811321px solid var(--mrl-tooltip-background-color);border-right:9.4339811321px solid rgba(0,0,0,0);content:"";height:0;position:absolute;transform:rotate(135deg);width:0}.mrl-tooltip-content[data-position=top]{bottom:100%;margin-bottom:var(--mrl-tooltip-trigger-offset);right:50%;transform:translateX(50%)}.mrl-tooltip-content[data-position=top]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);bottom:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);left:calc(50% - var(--mrl-tooltip-arrow-size)/2);transform:rotate(315deg)}.mrl-tooltip-content[data-position=top] .mrl-tooltip-content__hover{height:10px;left:0;top:100%;width:100%}.mrl-tooltip-content[data-anchor=start]{left:0;right:initial;transform:none}.mrl-tooltip-content[data-anchor=start]::after{left:var(--mrl-tooltip-arrow-spacing)}.mrl-tooltip-content[data-anchor=start].mrlIconButton--small-wrapper::after{left:var(--mrl-spacing-04)}.mrl-tooltip-content[data-anchor=start].mrlIconButton--xsmall-wrapper::after{left:var(--mrl-spacing-03)}.mrl-tooltip-content[data-anchor=end]{right:0;transform:none}.mrl-tooltip-content[data-anchor=end]::after{left:auto;right:var(--mrl-tooltip-arrow-spacing)}.mrl-tooltip-content[data-anchor=end].mrlIconButton--small-wrapper::after{left:auto;right:var(--mrl-spacing-04)}.mrl-tooltip-content[data-anchor=end].mrlIconButton--xsmall-wrapper::after{left:auto;right:var(--mrl-spacing-03)}.mrl-tooltip-content[data-position=bottom]{margin-top:var(--mrl-tooltip-trigger-offset);top:100%}.mrl-tooltip-content[data-position=bottom]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);top:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px)}.mrl-tooltip-content[data-position=bottom] .mrl-tooltip-content__hover{height:10px;left:0;top:-10px;width:100%}.mrl-tooltip-content[data-position=bottom][data-anchor=center]{right:50%;transform:translateX(50%)}.mrl-tooltip-content[data-position=bottom][data-anchor=center]::after{left:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=left]{left:initial;margin-right:var(--mrl-tooltip-trigger-offset);right:100%;top:50%;transform:translateY(-50%)}.mrl-tooltip-content[data-position=left]::after{border-top-right-radius:var(--mrl-tooltip-arrow-border-radius);display:var(--mrl-tooltip-arrow-display-left-right);right:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);top:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=left] .mrl-tooltip-content__hover{height:23px;right:-10px;top:0;width:100%}.mrl-tooltip-content[data-position=right]{left:100%;margin-left:var(--mrl-tooltip-trigger-offset);top:50%;transform:translateY(-50%)}.mrl-tooltip-content[data-position=right]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);display:var(--mrl-tooltip-arrow-display-left-right);left:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);top:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=right] .mrl-tooltip-content__hover{height:23px;left:-10px;top:0;width:100%}
+.mrl-tooltip-content{--mrl-tooltip-background-color: var(--mrl-color-background-inverse);--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);--mrl-tooltip-border-radius: var(--mrl-border-radius-content-large);--mrl-tooltip-font-size: var(--mrl-type-size-text-xsmall);--mrl-tooltip-line-height: var(--mrl-type-line-height-text-xsmall);--mrl-tooltip-padding: var(--mrl-spacing-02) var(--mrl-spacing-03);--mrl-tooltip-arrow-size: 8px;--mrl-tooltip-arrow-border-radius: 1px;--mrl-tooltip-arrow-spacing: var(--mrl-spacing-06);--mrl-tooltip-arrow-display-left-right: none;--mrl-tooltip-trigger-offset: var(--mrl-spacing-03)}.mrl-tooltip-content{background:var(--mrl-tooltip-background-color);border-radius:var(--mrl-tooltip-border-radius);color:var(--mrl-tooltip-text-color);cursor:default;display:flex;font-family:var(--mrl-body-font);font-size:var(--mrl-tooltip-font-size);font-weight:var(--mrl-type-weight-title-secondary);gap:var(--mrl-spacing-02);line-height:var(--mrl-tooltip-line-height);max-width:calc(var(--mrl-spacing-09)*7);overflow-wrap:break-word;padding:var(--mrl-tooltip-padding);position:absolute;transition-property:opacity;white-space:normal;width:max-content;z-index:900}.mrl-tooltip-content.has-custom-render{padding-right:var(--mrl-spacing-02)}.mrl-tooltip-content__hover{background:rgba(0,0,0,0);position:absolute}.mrl-tooltip-content::after{background:rgba(0,0,0,0);border-bottom:9.4339811321px solid var(--mrl-tooltip-background-color);border-right:9.4339811321px solid rgba(0,0,0,0);content:"";height:0;position:absolute;transform:rotate(135deg);width:0}.mrl-tooltip-content[data-position=top]{bottom:100%;margin-bottom:var(--mrl-tooltip-trigger-offset);right:50%;transform:translateX(50%)}.mrl-tooltip-content[data-position=top]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);bottom:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);left:calc(50% - var(--mrl-tooltip-arrow-size)/2);transform:rotate(315deg)}.mrl-tooltip-content[data-position=top] .mrl-tooltip-content__hover{height:10px;left:0;top:100%;width:100%}.mrl-tooltip-content[data-anchor=start]{left:0;right:initial;transform:none}.mrl-tooltip-content[data-anchor=start]::after{left:var(--mrl-tooltip-arrow-spacing)}.mrl-tooltip-content[data-anchor=start].mrlIconButton--small-wrapper::after{left:var(--mrl-spacing-04)}.mrl-tooltip-content[data-anchor=start].mrlIconButton--xsmall-wrapper::after{left:var(--mrl-spacing-03)}.mrl-tooltip-content[data-anchor=end]{right:0;transform:none}.mrl-tooltip-content[data-anchor=end]::after{left:auto;right:var(--mrl-tooltip-arrow-spacing)}.mrl-tooltip-content[data-anchor=end].mrlIconButton--small-wrapper::after{left:auto;right:var(--mrl-spacing-04)}.mrl-tooltip-content[data-anchor=end].mrlIconButton--xsmall-wrapper::after{left:auto;right:var(--mrl-spacing-03)}.mrl-tooltip-content[data-position=bottom]{margin-top:var(--mrl-tooltip-trigger-offset);top:100%}.mrl-tooltip-content[data-position=bottom]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);top:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px)}.mrl-tooltip-content[data-position=bottom] .mrl-tooltip-content__hover{height:10px;left:0;top:-10px;width:100%}.mrl-tooltip-content[data-position=bottom][data-anchor=center]{right:50%;transform:translateX(50%)}.mrl-tooltip-content[data-position=bottom][data-anchor=center]::after{left:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=left]{left:initial;margin-right:var(--mrl-tooltip-trigger-offset);right:100%;top:50%;transform:translateY(-50%)}.mrl-tooltip-content[data-position=left]::after{border-top-right-radius:var(--mrl-tooltip-arrow-border-radius);display:var(--mrl-tooltip-arrow-display-left-right);right:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);top:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=left] .mrl-tooltip-content__hover{height:23px;right:-10px;top:0;width:100%}.mrl-tooltip-content[data-position=right]{left:100%;margin-left:var(--mrl-tooltip-trigger-offset);top:50%;transform:translateY(-50%)}.mrl-tooltip-content[data-position=right]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);display:var(--mrl-tooltip-arrow-display-left-right);left:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);top:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=right] .mrl-tooltip-content__hover{height:23px;left:-10px;top:0;width:100%}
 .mrl-u-focus-wrapper--l91TH{position:relative}.MrlAvatarButton--b_ja8{background-color:rgba(0,0,0,0);border:none;border-radius:var(--mrl-radii-03);margin:0;outline:none;padding:0;position:relative}.MrlAvatarButton--b_ja8::after{background-color:rgba(0,0,0,0);border-radius:var(--mrl-radii-03);content:"";display:block;inset:0;position:absolute}.MrlAvatarButton--b_ja8:focus-visible{position:relative}.MrlAvatarButton--b_ja8:focus-visible:focus-visible{outline:none}.MrlAvatarButton--b_ja8:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-timing-function:var(--mrl-timing-m3);border:0 solid rgba(0,0,0,0);border-radius:calc(
 		var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
 	);bottom:calc((

package/dist/types/components/button/MrlButton/MrlButton.d.ts

@@ -81,6 +81,11 @@ export interface MrlButtonProps extends Omit<MrlComponentProps, 'style'>, React.
      * Icon buttons require a text label to ensure accessibility.
      */
     text: string;
+    /**
+     * Enables interaction tracking for this button. Provide a stable, non-PII id
+     * (e.g. 'board-share-cta'). When omitted, the button emits no analytics.
+     */
+    trackingId?: string;
     /**
      * Determines which aria setup to use for various toggle/selected styles.
      * pressed - use for an traditional “toggle button”

package/dist/types/components/button/MrlIconButton/MrlIconButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { MrlButtonKind, MrlButtonSize, MrlGhostIconButtonSize, ToggleAria } from '../constants';
 import { AttrsObject, MrlComponentProps } from '../../../utils';
-import { MrlTooltipAnchor, MrlTooltipPosition, MrlTooltipVariant } from '../../tooltip/constants';
+import { MrlTooltipAnchor, MrlTooltipPosition } from '../../tooltip/constants';
 import { MrlButtonState, ToggleStyle } from '../../';
 import './MrlIconButton.scss';
 export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>, React.ComponentProps<'button'> {
@@ -96,8 +96,6 @@ export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>, Re
      * informs the component that this is a toggle button and to add that functionality
      */
     toggleStyle?: ToggleStyle;
-    /** tooltip varient kind */
-    tooltipKind?: MrlTooltipVariant;
     /**
      * An optional class name to add to the tooltip wrapper.
      */

package/dist/types/components/toolbar/MrlToolbarButton/MrlToolbarButton.d.ts

@@ -46,7 +46,6 @@ export interface MrlToolbarButtonProps {
         tipAnchor?: MrlIconButtonProps['tipAnchor'];
         toggleAria?: MrlIconButtonProps['toggleAria'];
         toggleStyle?: MrlIconButtonProps['toggleStyle'];
-        tooltipKind?: MrlIconButtonProps['tooltipKind'];
     };
 }
 /**

package/dist/types/components/tooltip/MrlTooltip/MrlTooltip.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AttrsObject } from '../../../utils';
-import { MrlTooltipAnchor, MrlTooltipPosition, MrlTooltipState, MrlTooltipVariant } from '../constants';
+import { MrlTooltipAnchor, MrlTooltipPosition, MrlTooltipState } from '../constants';
 import '../../../styles/shared/a11y-helpers/a11y.global.scss';
 interface MrlTooltipProps {
     /** The arrow position of the tooltip in relation to its trigger's content */
@@ -27,8 +27,6 @@ interface MrlTooltipProps {
     display?: MrlTooltipState;
     /** Whether to disable the tooltip hover action that keeps it open */
     disableTooltipHover?: boolean;
-    /** The kind of tooltip to be rendered */
-    kind?: MrlTooltipVariant;
     /** The placement of the tooltip in relation to its trigger */
     position?: MrlTooltipPosition;
     /** Whether to announce the tooltip content to screen readers */

package/dist/types/components/tooltip/MrlTooltipContent/MrlTooltipContent.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AttrsObject } from '../../../utils';
-import { MrlTooltipAnchor, MrlTooltipPosition, MrlTooltipVariant } from '../constants';
+import { MrlTooltipAnchor, MrlTooltipPosition } from '../constants';
 import './MrlTooltipContent.global.scss';
 interface MrlTooltipContentProps {
     /**
@@ -18,8 +18,6 @@ interface MrlTooltipContentProps {
     attrs: AttrsObject;
     /** dataQa attribute for tooltip */
     dataQa?: string;
-    /** The kind of tooltip to be rendered */
-    kind: MrlTooltipVariant;
     /** The id of the tooltip used for aria-describedby in the parent component */
     id?: string;
     /** The placement of the tooltip in relation to its trigger */

package/dist/types/components/tooltip/constants.d.ts

@@ -22,6 +22,5 @@ export interface MrlTooltipDefaults {
  * Shared between the component and Storybook
  */
 export declare const MrlTooltipDefaults: MrlTooltipDefaults;
-export type MrlTooltipVariant = 'default' | 'inverse';
 export type TooltipAlignment = 'start' | 'end' | 'center';
 export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';

package/dist/types/contexts/MrlAnalyticsContext/MrlAnalyticsContext.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { MrlTrack } from './types';
+export interface MrlAnalyticsContextProps {
+    track: MrlTrack;
+}
+export declare const MrlAnalyticsContext: React.Context<MrlAnalyticsContextProps>;
+export interface MrlAnalyticsProviderProps {
+    /**
+     * The transport the app injects. Receives a MrlAnalyticsEvent and forwards it
+     * wherever the app tracks (in murally: a wrapper over trackWithSegment).
+     * Omit it and the toolkit stays silent — safe for consumers with no analytics.
+     */
+    track?: MrlTrack;
+    children: React.ReactNode;
+}
+/**
+ * Injects the app's analytics transport into the toolkit. Wrap the app once;
+ * every instrumented Mrl* component below emits through the provided `track`.
+ *
+ * @param props - the provider props
+ * @param props.track - the transport that receives each MrlAnalyticsEvent (default no-op)
+ * @param props.children - the subtree that can emit analytics
+ * @returns the provider wrapping `children`
+ */
+export declare const MrlAnalyticsProvider: ({ track, children }: MrlAnalyticsProviderProps) => React.JSX.Element;

package/dist/types/contexts/MrlAnalyticsContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MrlAnalyticsContext';
+export * from './types';

package/dist/types/contexts/MrlAnalyticsContext/types.d.ts

@@ -0,0 +1,22 @@
+/** Values allowed in analytics payloads. No free-text/PII — see MrlAnalyticsProvider docs. */
+export type MrlAnalyticsValue = string | number | boolean;
+/** The canonical interaction a Mrl* component emits. Transport-agnostic. */
+export interface MrlAnalyticsEvent {
+    /** Component identity, e.g. 'MrlButton', 'MrlMenu', 'MrlModal'. Set by the component. */
+    component: string;
+    /** Interaction type, e.g. 'click' | 'open' | 'close' | 'select' | 'change'. Set by the component. */
+    action: string;
+    /** ui-toolkit version for internal tracking */
+    toolkitVersion: string;
+    /**
+     * Consumer-supplied attribution id. REQUIRED for an event to fire (opt-in).
+     * Must be a stable, non-PII identifier (e.g. 'board-share', not the user's name).
+     */
+    trackingId: string;
+    /** Non-PII component variant, e.g. button kind/size. Set by the component. */
+    variant?: string;
+    /** Curated, non-PII extra context. Never button labels, input values, etc. */
+    metadata?: Record<string, MrlAnalyticsValue>;
+}
+/** The one function the toolkit calls. The app decides what it does. */
+export type MrlTrack = (event: MrlAnalyticsEvent) => void;

package/dist/types/contexts/index.d.ts

@@ -1 +1,2 @@
+export * from './MrlAnalyticsContext';
 export * from './MrlTabContext';

package/dist/types/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useCoordinate';
+export * from './useMrlAnalytics';
 export * from './useBreakpoint';
 export * from './useElementDimensions';
 export * from './useHasFocusableDescendant';

package/dist/types/hooks/useMrlAnalytics/index.d.ts

@@ -0,0 +1 @@
+export * from './useMrlAnalytics';

package/dist/types/hooks/useMrlAnalytics/useMrlAnalytics.d.ts

@@ -0,0 +1,21 @@
+import { MrlAnalyticsEvent, MrlTrack } from '../../contexts/MrlAnalyticsContext/types';
+/**
+ * Raw accessor for the analytics context.
+ *
+ * @returns the injected `track` transport (default no-op)
+ */
+export declare const useMrlAnalytics: () => {
+    track: MrlTrack;
+};
+type EmitArgs = Pick<MrlAnalyticsEvent, 'action' | 'variant' | 'metadata'>;
+/**
+ * Component-facing helper. Binds component identity + trackingId once, then
+ * `emit({ action })` per interaction. No-ops entirely when trackingId is absent,
+ * so instrumentation is opt-in and attributable.
+ *
+ * @param component - the emitting component's name, e.g. 'MrlButton'
+ * @param trackingId - consumer-supplied, non-PII id; undefined disables emission
+ * @returns an `emit` callback that fires a single interaction per call
+ */
+export declare const useMrlTrackInteraction: (component: string, trackingId?: string) => ({ action, variant, metadata }: EmitArgs) => void;
+export {};

package/dist/types/hooks/useMrlAnalytics/useMrlAnalyticsDemo.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Demo for the useMrlAnalytics hooks. Injects a `track` transport that simply
+ * records the last emitted event so you can see the transport-agnostic
+ * `MrlAnalyticsEvent` the toolkit produces.
+ *
+ * @returns JSX.Element
+ */
+export declare const UseMrlAnalyticsDemo: () => JSX.Element;

package/dist/types/version.d.ts

@@ -0,0 +1 @@
+export declare const TOOLKIT_VERSION = "0.0.0-dev";

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const TOOLKIT_VERSION = "0.0.0-dev";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "4.71.0-dev-vNJi.1",
+	"version": "4.72.0",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/cjs/index.js",
 	"module": "./dist/esm/index.js",
@@ -14,6 +14,7 @@
 	],
 	"scripts": {
 		"prebuild": "rimraf dist",
+		"prepack": "npm run build",
 		"analyze": "ANALYZE=true rollup --config rollup.config.mjs",
 		"build": "npm run build:js && npm run build:css && npm run build:types && npm run build:verify",
 		"build:css": "webpack --mode=production",